App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

详情数据对接

Browse Source
This commit is contained in:
仲么了
2023-08-18 14:41:53 +08:00
parent 9423ad6216
commit cc63cda4e7
12 changed files with 246 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/device/APF/comp/basic.vue
View File

@@ -1,31 +1,5 @@
<template>
<view class="basic">
<!-- <view class="grid-card">
<view class="grid-card-title">模块</view>
<view class="grid-card-content-4">
<view class="item item-title">名称</view>
<view class="item item-title">实际输出电流（A）</view>
<view class="item item-title">总谐波电流（A）</view>
<view class="item item-title">总谐波电压（V）</view>
<view class="item">模块1</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块2</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块3</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块4</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
</view>
</view> -->
<view class="grid-card">
<view class="grid-card-title">电网电流</view>
<view class="grid-card-content-3">
@@ -34,8 +8,8 @@
<view class="item item-title">THDI(%)</view>
<template v-for="(item, index) in renderData.电网侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['A(A)'] }}</view>
<view class="item">{{ item['ThdPhI(%)'] }}</view>
<view class="item">{{ item['Pq_RmsI(A)'] || '-' }}</view>
<view class="item">{{ item['Pq_ThdI(%)'] || '-'}}</view>
</template>
</view>
</view>
@@ -48,9 +22,9 @@
<view class="item item-title">THDU(%)</view>
<template v-for="(item, index) in renderData.电网侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['PhV(V)'] }}</view>
<view class="item">{{ item['Hz(Hz)'] }}</view>
<view class="item">{{ item['ThdPhV(%)'] }}</view>
<view class="item">{{ item['Pq_RmsLU(V)'] || '-' }}</view>
<view class="item">{{ item['Pq_Freq(Hz)'] || '-' }}</view>
<view class="item">{{ item['Pq_ThdU(%)'] || '-' }}</view>
</template>
</view>
</view>
@@ -62,8 +36,8 @@
<view class="item item-title">THDI(%)</view>
<template v-for="(item, index) in renderData.负载侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['A(A)'] }}</view>
<view class="item">{{ item['ThdPhI(%)'] }}</view>
<view class="item">{{ item['Pq_RmsI(A)'] || '-' }}</view>
<view class="item">{{ item['Pq_ThdI(%)'] || '-' }}</view>
</template>
</view>
</view>
@@ -75,7 +49,7 @@
<view class="item item-title">负载率(%)</view>
<template v-for="(item, index) in renderData.输出侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['A(A)'] }}</view>
<view class="item">{{ item['Apf_RmsI_Sys(A)'] || '-' }}</view>
<view class="item"></view>
</template>
</view>
@@ -94,56 +68,49 @@ export default {
}
},
props: {
deviceInfo: {
type: Object,
basicData: {
type: Array,
default: () => {
return {}
return []
},
},
},
watch: {
deviceInfo: {
basicData: {
handler: function (newVal, oldVal) {
let arr = [
{
name: '电网侧',
position: 'cb23b9ede3b652cd6da194fd7b318124',
linePostion: 'cb23b9ede3b652cd6da194fd7b318124',
},
{
name: '负载侧',
position: '32624d4bb3a86f2b9a01bab272e50125',
linePostion: '32624d4bb3a86f2b9a01bab272e50125',
},
{
name: '输出侧',
position: '26eae70fb5ff1c090d2dc7c3a0743948',
linePostion: '26eae70fb5ff1c090d2dc7c3a0743948',
},
]
console.log(this.deviceInfo)
this.deviceInfo.appsLineTopologyDiagramPO.forEach((item1) => {
if (item1.value.length === 0) {
this.basicData.forEach((item) => {
if (item.phase === 'avg') {
return
}
let index = arr.findIndex((item2) => {
return item2.position === item1.linePostion
return item2.linePostion === item.position
})
if(index === -1) {
return
}
item1.value.forEach((item) => {
if(item.phase === 'avg'){
return
}
if (index > -1) {
if (this.renderData[arr[index]['name']][item.phase]) {
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData || '-'
} else {
this.renderData[arr[index]['name']][item.phase] = {
phase: item.phase,
[item.statisticalName]: item.statisticalData,
[item.statisticalName]: item.statisticalData || '-',
}
}
})
}
})
console.warn(this.renderData)
console.log(this.renderData)
},
deep: true,
immediate: true,

52
pages/device/APF/comp/power.vue
View File

@@ -10,10 +10,10 @@
<view class="item item-title">功率因数</view>
<template v-for="(item, index) in renderData.电网侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['W(W)'] }}</view>
<view class="item">{{ item['VAr(var)'] }}</view>
<view class="item">{{ item['VA(VA)'] }}</view>
<view class="item">{{ item['ThdPhI(%)'] }}</view>
<view class="item">{{ item['Pq_P(W)'] || '-' }}</view>
<view class="item">{{ item['Pq_Q(var)'] || '-' }}</view>
<view class="item">{{ item['Pq_S(VA)'] || '-' }}</view>
<view class="item">{{ item['Pq_PF(null)'] || '-' }}</view>
</template>
</view>
</view>
@@ -27,10 +27,10 @@
<view class="item item-title">功率因数</view>
<template v-for="(item, index) in renderData.电网侧">
<view class="item">{{ item.phase }}</view>
<view class="item">{{ item['W(W)'] }}</view>
<view class="item">{{ item['VAr(var)'] }}</view>
<view class="item">{{ item['VA(VA)'] }}</view>
<view class="item">{{ item['ThdPhI(%)'] }}</view>
<view class="item">{{ item['Pq_P(W)'] || '-' }}</view>
<view class="item">{{ item['Pq_Q(var)'] || '-' }}</view>
<view class="item">{{ item['Pq_S(VA)'] || '-' }}</view>
<view class="item">{{ item['Pq_PF(null)'] || '-' }}</view>
</template>
</view>
</view>
@@ -48,55 +48,49 @@ export default {
}
},
props: {
deviceInfo: {
type: Object,
basicData: {
type: Array,
default: () => {
return {}
return []
},
},
},
watch: {
deviceInfo: {
basicData: {
handler: function (newVal, oldVal) {
let arr = [
{
name: '电网侧',
position: 'cb23b9ede3b652cd6da194fd7b318124',
linePostion: 'cb23b9ede3b652cd6da194fd7b318124',
},
{
name: '负载侧',
position: '32624d4bb3a86f2b9a01bab272e50125',
linePostion: '32624d4bb3a86f2b9a01bab272e50125',
},
{
name: '输出侧',
position: '26eae70fb5ff1c090d2dc7c3a0743948',
linePostion: '26eae70fb5ff1c090d2dc7c3a0743948',
},
]
this.deviceInfo.appsLineTopologyDiagramPO.forEach((item1) => {
if (item1.value.length === 0) {
this.basicData.forEach((item) => {
if (item.phase === 'avg') {
return
}
let index = arr.findIndex((item2) => {
return item2.position === item1.linePostion
return item2.linePostion === item.position
})
if (index === -1) {
return
}
item1.value.forEach((item) => {
if(item.phase === 'avg'){
return
}
if (index > -1) {
if (this.renderData[arr[index]['name']][item.phase]) {
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData || '-'
} else {
this.renderData[arr[index]['name']][item.phase] = {
phase: item.phase,
[item.statisticalName]: item.statisticalData,
[item.statisticalName]: item.statisticalData || '-',
}
}
})
}
})
console.warn(this.renderData)
console.log(this.renderData)
},
deep: true,
immediate: true,

113
pages/device/APF/comp/xieBo.vue
View File

@@ -2,32 +2,32 @@
<view>
<uni-data-checkbox v-model="radio" :localdata="sex"></uni-data-checkbox>
<view class="charts-box">
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData"/>
</view>
</view>
</template>
<script>
export default {
data () {
props: {
basicData: {
type: Array,
default: () => []
}
},
data() {
return {
radio: 0,
sex: [{
text: 'THDI L1',
value: 0
}, {
text: 'THDI L2',
value: 1
}, {
text: 'THDI L3',
value: 2
}],
renderData: {
电网侧: {},
负载侧: {},
},
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
enableScroll: true,
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
padding: [10,0,10,0],
padding: [10, 0, 10, 0],
legend: {},
xAxis: {
disableGrid: true,
@@ -49,14 +49,89 @@ export default {
activeBgOpacity: 0.08
}
},
}
}
};
},
mounted () {
this.getServerData();
watch: {
basicData: {
handler: function (newVal, oldVal) {
let basicData = JSON.parse(JSON.stringify(this.basicData))
let arr = [
{
name: '电网侧',
linePostion: 'cb23b9ede3b652cd6da194fd7b318124',
},
{
name: '负载侧',
linePostion: '32624d4bb3a86f2b9a01bab272e50125',
},
]
basicData.forEach((item) => {
if (item.statisticalName.indexOf('Pq_HarmI_') === -1) {
return
}
let index = arr.findIndex((item2) => {
return item2.linePostion === item.position
})
if (index > -1) {
if (this.renderData[arr[index]['name']][item.phase]) {
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData || 0
} else {
this.renderData[arr[index]['name']][item.phase] = {
phase: item.phase,
[item.statisticalName]: item.statisticalData || 0,
}
}
}
})
console.log(this.renderData)
this.sex = Object.keys(this.renderData['电网侧']).map((item, index) => {
return {
text: item,
value: index
}
})
let obj = JSON.parse(JSON.stringify(this.renderData['电网侧'][Object.keys(this.renderData['电网侧'])[0]]))
delete obj['phase']
console.log(Object.keys(obj).map(item => {
return Number(item.match(/Pq_HarmI_(\d+)/)[1])
}))
console.log(Object.values(this.renderData['电网侧'][this.sex[this.radio].text]).filter((item) => {
return typeof item === 'number'
}))
console.log(Object.values(this.renderData['负载侧'][this.sex[this.radio].text]).filter((item) => {
return typeof item === 'number'
}))
this.chartData = {
categories: Object.keys(obj).map(item => {
return item.match(/Pq_HarmI_(\d+)/)[1]
}),
series: [
{
name: "电网侧",
data: Object.values(this.renderData['电网侧'][this.sex[this.radio].text]).filter((item) => {
return typeof item === 'number'
})
},
{
name: "负载侧",
data: Object.values(this.renderData['负载侧'][this.sex[this.radio].text]).filter((item) => {
return typeof item === 'number'
})
}
]
}
},
deep: true,
immediate: true,
}
},
mounted() {
// this.getServerData();
},
methods: {
getServerData () {
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
@@ -77,12 +152,12 @@ export default {
}, 500);
},
}
};
}
</script>
<style lang="scss">
.charts-box {
margin-top: 20rpx;
height:600px;
height: 600px;
}
</style>

103
pages/device/APF/detail.vue
View File

@@ -14,14 +14,14 @@
<view
class="point"
:style="{ left: item.lat + 'px', top: item.lng + 'px' }"
v-for="(item, index) in showtTarget"
v-for="(item, index) in topolodyData"
:key="index"
>
<view class="grid-card mt10" style="width: fit-content">
<view class="grid-card-content-1">
<view class="item">{{ item.label }}</view>
<view class="item" v-for="(child, childIndex) in item.value" :key="childIndex">
{{ child.showText }}
{{ child }}
</view>
</view>
</view>
@@ -63,13 +63,13 @@
</view>
<view class="content" v-if="deviceInfo">
<view v-if="navMenuActive == 0">
<basic :deviceInfo="deviceInfo"></basic>
<basic :basicData="basicData"></basic>
</view>
<view v-else-if="navMenuActive == 1">
<xieBo></xieBo>
<xieBo :basicData="basicData"></xieBo>
</view>
<view v-else-if="navMenuActive == 2">
<power :deviceInfo="deviceInfo"></power>
<power :basicData="basicData"></power>
</view>
<!-- <view v-else-if="navMenuActive == 3">
<oscillogram></oscillogram>
@@ -159,6 +159,33 @@ export default {
dictData: [],
isPrimaryUser: 0,
userInfo: {},
topolodyData: [
{
label: '电网侧',
linePostion: 'cb23b9ede3b652cd6da194fd7b318124',
lat: '',
lng: '',
showKey: ['Pq_ThdU(%)', 'Pq_ThdI(%)'], //要展示的指标key
value: [],// 展示的指标值
},
{
label: '负载侧',
linePostion: '32624d4bb3a86f2b9a01bab272e50125',
lat: '',
lng: '',
showKey: ['Pq_ThdU(%)', 'Pq_ThdI(%)'], //要展示的指标key
value: [],
},
{
label: '输出侧',
linePostion: '26eae70fb5ff1c090d2dc7c3a0743948',
lat: '',
lng: '',
showKey: ['Apf_ThdA_Load(%)', 'Apf_ThdA_Sys(%)'], //要展示的指标key
value: [],
},
],
basicData: []
}
},
computed: {
@@ -172,7 +199,9 @@ export default {
return item2.showText
})
})
return arr
return arr.filter((item) => {
return item.value.length
})
},
},
methods: {
@@ -317,36 +346,31 @@ export default {
console.log('连接断开')
})
.on('message', (topic, message) => {
console.log('接收推送信息：', message.toString().length)
console.log('接收推送信息：', message.toString())
if (!message.toString()) {
return
}
this.loading = false
let dataList = []
this.deviceInfo.appsLineTopologyDiagramPO.forEach((element) => {
element.value = []
})
JSON.parse(message.toString()).forEach((item) => {
this.deviceInfo.appsLineTopologyDiagramPO.forEach((element) => {
if (element.linePostion === item.position) {
// element.value.push({
// label: item.statisticalName,
// value: item.statisticalData,
// })
element.value.push({
...item,
showText:
item.statisticalName.indexOf('ThdPh') > -1 && item.phase === 'avg'
? item.statisticalName + '：' + item.statisticalData
: '',
})
}
})
})
this.handlerData(JSON.parse(message.toString()))
this.$forceUpdate()
console.log(this.deviceInfo.appsLineTopologyDiagramPO)
})
},
handlerData(data) {
this.topolodyData.forEach((element) => {
let arr = []
element.showKey.forEach((key) => {
data.forEach((item) => {
if (item.statisticalName === key && item.phase === 'avg' && element.linePostion === item.position) {
arr.push(key + ':' + item.statisticalData)
}
})
})
element.value = arr
})
this.basicData = data
this.$forceUpdate()
},
},
// 页面销毁
onUnload() {
@@ -354,7 +378,6 @@ export default {
this.client.end()
},
onLoad(options) {
this.dictData = uni.getStorageSync(this.$cacheKey.dictData)
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
this.devId = options.id
@@ -364,15 +387,17 @@ export default {
queryTopologyDiagram(options.id).then((res) => {
this.deviceInfo = res.data
uni.setNavigationBarTitle({title: this.deviceInfo.devName || '设备详情'})
this.dictData.forEach((item) => {
if (item.code == 'Line_Position') {
item.children.forEach((item2) => {
this.deviceInfo.appsLineTopologyDiagramPO.forEach((element) => {
if (element.linePostion === item2.id) {
element.label = item2.name
}
})
})
this.topolodyData.filter((item) => {
let index = this.deviceInfo.appsLineTopologyDiagramPO.findIndex((element) => {
return element.linePostion === item.linePostion
})
if (index > -1) {
item.lat = this.deviceInfo.appsLineTopologyDiagramPO[index].lat
item.lng = this.deviceInfo.appsLineTopologyDiagramPO[index].lng
return true
} else {
// 把多余的监测点过滤掉
return false
}
})
this.initMqtt()