ehcarts

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -103,7 +103,7 @@
           <el-table-column label="不平衡度">
             <el-table-column label="电流" width="" align="center">
               <template #default="scope">
-                <div @click="oneClick('elBalun')">
+                <div>
                   <i
                     class="smallSquare"
                     :style="{
@@ -128,29 +128,36 @@
           <el-table-column label="电压">
             <el-table-column prop="name" label="A相" width="" align="center">
               <template #default="scope">
-                <i
-                  class="smallSquare"
-                  :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
-                ></i>
-                {{ scope.row.ua }}
+                <div @click="oneClick('ua')">
+                  <i
+                    class="smallSquare"
+                    :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
+                  ></i>
+                  {{ scope.row.ua }}
+                </div>
               </template>
             </el-table-column>
             <el-table-column prop="city" label="B相" align="center">
               <template #default="scope">
-                <i
-                  class="smallSquare"
-                  :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
-                ></i>
-                {{ scope.row.ub }}
+                <div @click="oneClick('ub')">
+                  <i
+                    class="smallSquare"
+                    :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
+                  ></i>
+                  {{ scope.row.ub }}
+                </div>
               </template>
             </el-table-column>
             <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-                <i
+                <div  @click="oneClick('uc')">
+                  <i
                   class="smallSquare"
                   :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
                 ></i>
                 {{ scope.row.uc }}
+                </div>
+                
               </template>
             </el-table-column>
           </el-table-column>
@@ -201,6 +208,7 @@
       @closeDialog="closeDialog"
       :flag="showDialog2"
       :echartsAllData="echartsAllData"
+      :echartsTitle="echartsTitle"
     ></dialog-com>
     <!--视频弹框组件结束-----------------------end-->
   </div>
@@ -246,7 +254,8 @@ export default defineComponent({
     const dialogTitle = ref('')
     const showDialog2 = ref(false)
 
-    const echartsAllData=ref([])
+    const echartsAllData = ref([])
+    const echartsTitle = ref('')
 
     function headCellStyle({ row, column, rowIndex, columnIndex }) {
       row, column
@@ -282,7 +291,22 @@ export default defineComponent({
       nowTime.value = parseTime(new Date())
     }
     function oneClick(params) {
-      alert(params)
+      switch (params) {
+        case 'cos':
+          echartsTitle.value = '功率因数'
+          break
+        case 'ua':
+          echartsTitle.value = 'A相电压'
+          break
+        case 'ub':
+          echartsTitle.value = 'B相电压'
+          break
+        case 'uc':
+          echartsTitle.value = 'C相电压'
+          break
+        default:
+      }
+
       dialogTitle.value = deviceCode.value
       showDialog2.value = true
 
@@ -297,11 +321,7 @@ export default defineComponent({
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
-            console.log('requset.data')
-            console.log(requset.data)
-            // getData.value[0] = requset.data
-            // console.log(getData.value)
-            echartsAllData.value=requset.data
+            echartsAllData.value = requset.data
           } else {
             ElMessage.error(requset.msg)
           }
@@ -333,7 +353,8 @@ export default defineComponent({
       closeDialog,
       showDialog2,
       dialogTitle,
-      echartsAllData
+      echartsAllData,
+      echartsTitle,
     }
   },
 })

src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogCom.vue

@@ -10,7 +10,7 @@
       <!-- <inner-line-chart></inner-line-chart> -->
       <div shadow="never" class="homeBoxCard" v-loading="loading">
         <div
-          style="height: 300px"
+          style="height: 400px"
           ref="lineChartBanlance"
           id="lineChartBanlance"
         />
@@ -21,7 +21,7 @@
 
 <script>
 // import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect, onMounted } from 'vue'
+import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
 // import * as api from '@/api/siteManage/watchDog.js'
 // import { ElMessage } from 'element-plus'
 import * as echarts from 'echarts'
@@ -38,13 +38,53 @@ export default defineComponent({
     flag: Boolean,
     dialogTitle: String,
     itemInfo: Object,
-    
+    echartsAllData: Array,
+    echartsTitle: String,
   },
   setup(props, context) {
-    // let lineChartBanlance = ref(null)
     context
     const dialogVisible = ref(false)
     const siteList = ref([])
+    const dataList = ref([])
+    const dataTimes = ref([])
+
+    const getData = async () => {
+      var arrOld = props.echartsAllData
+      let dataTime = arrOld.map((item) => {
+        return item.dataTime
+      })
+      let cos = arrOld.map((item) => {
+        return item.cos
+      })
+      let ua = arrOld.map((item) => {
+        return item.ua
+      })
+      let ub = arrOld.map((item) => {
+        return item.ub
+      })
+      let uc = arrOld.map((item) => {
+        return item.uc
+      })
+
+      dataTimes.value = dataTime;
+      switch (props.echartsTitle) {
+        case '功率因数':
+          dataList.value = cos
+
+          break
+        case 'A相电压':
+          dataList.value = ua
+          break
+        case 'B相电压':
+          dataList.value = ub
+          break
+        case 'C相电压':
+          dataList.value = uc
+          break
+        default:
+      }
+    }
+
     function echarts2() {
       // 新建一个promise对象
       let newPromise = new Promise((resolve) => {
@@ -52,16 +92,14 @@ export default defineComponent({
       })
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
-        alert('promise')
         //	此dom为echarts图标展示dom
         let myChart = echarts.init(document.getElementById('lineChartBanlance'))
         myChart.setOption({
           color: ['#1187FF'],
           legend: {
-            bottom: '0',
-            data: ['电流不平衡度'],
+            top: '0',
+            // data: ['电流不平衡度'],
           },
-
           tooltip: {
             trigger: 'axis',
             axisPointer: { type: 'cross' },
@@ -86,8 +124,7 @@ export default defineComponent({
               },
             },
             boundaryGap: false,
-            //   data: electricChart2.value.dataTime,
-            data: [1, 2, 3, 4, 5, 6, 7, 8],
+            data: dataTimes.value,
           },
           yAxis: {
             name: '%',
@@ -119,38 +156,37 @@ export default defineComponent({
 
           series: [
             {
-              name: '电流不平衡度',
+              name: props.echartsTitle + '实时数据',
               type: 'line',
               symbolSize: 7,
               smooth: false,
-              // data: electricChart2.value.elBalun,
-              data: [1, 2, 3, 4, 5, 6, 7, 8],
+              data: dataList.value,
               markLine: {
                 //最大值和最小值
-                data: [
-                  {
-                    yAxis: 30,
-                    label: {
-                      position: 'middle',
-                      formatter: '严重三项不平衡',
-                    },
-                    lineStyle: {
-                      width: 2,
-                      color: '#FF5D1D',
-                    },
-                  },
-                  {
-                    yAxis: 14,
-                    label: {
-                      position: 'middle',
-                      formatter: '不平衡度',
-                    },
-                    lineStyle: {
-                      width: 2,
-                      color: '#f2e251',
-                    },
-                  },
-                ],
+                // data: [
+                //   {
+                //     yAxis: 30,
+                //     label: {
+                //       position: 'middle',
+                //       formatter: '严重三项不平衡',
+                //     },
+                //     lineStyle: {
+                //       width: 2,
+                //       color: '#FF5D1D',
+                //     },
+                //   },
+                //   {
+                //     yAxis: 14,
+                //     label: {
+                //       position: 'middle',
+                //       formatter: '不平衡度',
+                //     },
+                //     lineStyle: {
+                //       width: 2,
+                //       color: '#f2e251',
+                //     },
+                //   },
+                // ],
               },
             },
           ],
@@ -161,14 +197,6 @@ export default defineComponent({
       })
     }
 
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      // setTimeout(echarts2(), 1000)
-      echarts2()
-    }
-
-    
-
     // 关闭弹框
     const closeDialog = () => {
       context.emit('closeDialog', false)
@@ -179,16 +207,33 @@ export default defineComponent({
       fn
       dialogVisible.value = props.flag
     })
-    onMounted(() => {
-    
-    })
+
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.echartsAllData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
+    onMounted(() => {})
 
     return {
       closeDialog,
       dialogVisible,
       siteList,
       echarts2,
-      open,
     }
   },
 })