详情数据对接

pages/device/APF/comp/xieBo.vue

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