详情数据对接

pages/device/APF/detail.vue

@@ -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()