实时数据-基波电压/电流相角

src/views/govern/device/control/index.vue

@@ -310,7 +310,6 @@ const realTrendRef = ref()
 const handleTrend = () => {
     realTimeFlag.value = false
     sonTab.value = 1
-    console.log(realTrendRef.value, '++++++')
     realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
     window.clearInterval(timer.value)
 }
@@ -403,14 +402,13 @@ const nodeClick = async (e: anyObj) => {
 }
 const realTimeRef: any = ref()
 const intRealTime = async (val: any) => {
-    getTabsDataByType(val).then(res => {
+    await getTabsDataByType(val).then(res => {
         realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
     })
-    timer.value = window.setInterval(() => {
+    timer.value = window.setInterval(async () => {
-        getTabsDataByType(val).then(res => {
+        await getTabsDataByType(val).then(res => {
             realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
         })
-        console.log(timer.value, '定时器时间666666 ')
     }, 20000)
 }
 //趋势数据组件

src/views/govern/device/control/tabs/realtime.vue

@@ -20,8 +20,8 @@
                 <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
             </div>
         </div>
-        <div class="view_bot">
+        <div class="view_bot"  v-loading="loading">
-            <div class="view_bot_tables" v-loading="loading">
+            <div class="view_bot_tables">
                 <!-- 表格数据 -->
                 <div v-if="tableData.length != 0">
                     <!-- div设计table -->
@@ -118,68 +118,8 @@ const echartsDataV3: any = ref({})
 const echartsDataA1: any = ref({})
 const echartsDataA2: any = ref({})
 const echartsDataA3: any = ref({})
-//渲染echarts
+//渲染中相角图
-const init = () => {
+const initRadioCharts = () => {
-    echartsData.value = {
-        options: {
-            tooltip: {},
-            series: [
-                {
-                    type: 'gauge',
-                    startAngle: 180,
-                    endAngle: 0,
-                    min: 0,
-                    max: 300,
-                    radius: '150%',
-                    center: ['55%', '76%'],
-                    splitNumber: 3, //刻度数量
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            width: 10,
-                            shadowBlur: 0,
-                            color: [
-                                [0.3, '#91c7a1'],
-                                [0.7, '#63869e'],
-                                [1, '#002B6A']
-                            ]
-                        }
-                    },
-
-                    itemStyle: {
-                        normal: {
-                            shadowBlur: 10
-                        }
-                    },
-                    //标题位置
-                    title: {
-                        fontWeight: 'bolder',
-                        fontSize: 12,
-                        offsetCenter: ['-130%', '-20%']
-                    },
-                    //数值位置
-                    detail: {
-                        fontSize: 12,
-                        formatter: '{value}',
-                        offsetCenter: ['0%', '25%']
-                    },
-                    data: [
-                        {
-                            value: 15,
-                            name: 'A相'
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-    echartsDataV1.value = echartsData.value
-    echartsDataV2.value = echartsData.value
-    echartsDataV3.value = echartsData.value
-    echartsDataA1.value = echartsData.value
-    echartsDataA2.value = echartsData.value
-    echartsDataA3.value = echartsData.value
-
     //中间指针图
     echartsData1.value = {
         options: {
@@ -195,6 +135,7 @@ const init = () => {
             },
             legend: [],
             series: [
+                // 外圈电压 内圈电流
                 {
                     name: '基波电流相位',
                     type: 'gauge',
@@ -271,21 +212,21 @@ const init = () => {
                     },
                     data: [
                         {
-                            value: 40,
+                            value: 180,
                             name: 'A相',
                             itemStyle: {
                                 color: '#A5292A'
                             }
                         },
                         {
-                            value: 10,
+                            value: 90,
                             name: 'B相',
                             itemStyle: {
                                 color: '#DAA521'
                             }
                         },
                         {
-                            value: 20,
+                            value: 30,
                             name: 'C相',
                             itemStyle: {
                                 color: '#2F8A57'
@@ -369,21 +310,21 @@ const init = () => {
                     },
                     data: [
                         {
-                            value: 140,
+                            value: 160,
                             name: 'A相',
                             itemStyle: {
                                 color: '#A5292A'
                             }
                         },
                         {
-                            value: 110,
+                            value:70,
                             name: 'B相',
                             itemStyle: {
                                 color: '#DAA521'
                             }
                         },
                         {
-                            value: 120,
+                            value: 40,
                             name: 'C相',
                             itemStyle: {
                                 color: '#2F8A57'
@@ -394,7 +335,22 @@ const init = () => {
             ]
         }
     }
-
+    //电流相角
+    echartsData1.value.options.series[0].data.map((item: any) => {
+        iRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
+    //电压相角
+    echartsData1.value.options.series[1].data.map((item: any) => {
+        vRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
     for (var i = 0; i < echartsData1.value.options.series.length; i++) {
         echartsData1.value.options.series[i].type = 'gauge'
         echartsData1.value.options.series[i].startAngle = 90
@@ -402,6 +358,68 @@ const init = () => {
         echartsData1.value.options.series[i].center = ['50%', '50%']
     }
 }
+//渲染echarts
+const init = () => {
+    echartsData.value = {
+        options: {
+            tooltip: {},
+            series: [
+                {
+                    type: 'gauge',
+                    startAngle: 180,
+                    endAngle: 0,
+                    min: 0,
+                    max: 300,
+                    radius: '150%',
+                    center: ['55%', '76%'],
+                    splitNumber: 3, //刻度数量
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 10,
+                            shadowBlur: 0,
+                            color: [
+                                [0.3, '#91c7a1'],
+                                [0.7, '#63869e'],
+                                [1, '#002B6A']
+                            ]
+                        }
+                    },
+
+                    itemStyle: {
+                        normal: {
+                            shadowBlur: 10
+                        }
+                    },
+                    //标题位置
+                    title: {
+                        fontWeight: 'bolder',
+                        fontSize: 12,
+                        offsetCenter: ['-130%', '-20%']
+                    },
+                    //数值位置
+                    detail: {
+                        fontSize: 12,
+                        formatter: '{value}',
+                        offsetCenter: ['0%', '25%']
+                    },
+                    data: [
+                        {
+                            value: 15,
+                            name: 'A相'
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+    echartsDataV1.value = echartsData.value
+    echartsDataV2.value = echartsData.value
+    echartsDataV3.value = echartsData.value
+    echartsDataA1.value = echartsData.value
+    echartsDataA2.value = echartsData.value
+    echartsDataA3.value = echartsData.value
+}
 //接收父组件传递的table数据
 const dataList: any = ref([])
 const listV: any = ref([])
@@ -438,8 +456,24 @@ const getTableData = (list: any) => {
         loading.value = false
     })
 }
+//电流相角数组&电压相角数组
+const iRadioList: any = ref([]),
+    vRadioList: any = ref([])
 //获取实时数据
 const getRealTimeData = (val: any) => {
+    iRadioList.value = []
+    vRadioList.value = []
+    val.map((item: any) => {
+        //基波电流相角
+        if (item.statisticalName == 'Pq_FundIAng') {
+            iRadioList.value.push(item)
+        }
+        //相电压基波有效值相角
+        if (item.statisticalName == 'Pq_FundUAng') {
+            vRadioList.value.push(item)
+        }
+    })
+    initRadioCharts()
     loading.value = true
     if (val.length != 0) {
         getColumns()
@@ -533,6 +567,7 @@ const getRealTimeData = (val: any) => {
 defineExpose({ getRealTimeData })
 onMounted(() => {
     init()
+    initRadioCharts()
 })
 </script>
 <style lang="scss" scoped>
@@ -668,12 +703,11 @@ onMounted(() => {
         }
     }
 }
-.table_container:hover{
+.table_container:hover {
     .table {
-        .tbody{
+        .tbody {
             background: #f4f6f9;
         }
-   }
+    }
 }
-
 </style>