-

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -200,6 +200,7 @@
       :dialogTitle="dialogTitle"
       @closeDialog="closeDialog"
       :flag="showDialog2"
+      :echartsAllData="echartsAllData"
     ></dialog-com>
     <!--视频弹框组件结束-----------------------end-->
   </div>
@@ -245,6 +246,8 @@ export default defineComponent({
     const dialogTitle = ref('')
     const showDialog2 = ref(false)
 
+    const echartsAllData=ref([])
+
     function headCellStyle({ row, column, rowIndex, columnIndex }) {
       row, column
       if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
@@ -291,9 +294,6 @@ export default defineComponent({
           deviceCode: 'DA00021026',
           startTime: start,
           endTime: end,
-          // queryPeriod: 'NORMAL',
-          // calcmethod: 'AVG',
-          // sns: 'bdwq_183__COS',
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
@@ -301,6 +301,7 @@ export default defineComponent({
             console.log(requset.data)
             // getData.value[0] = requset.data
             // console.log(getData.value)
+            echartsAllData.value=requset.data
           } else {
             ElMessage.error(requset.msg)
           }
@@ -332,6 +333,7 @@ export default defineComponent({
       closeDialog,
       showDialog2,
       dialogTitle,
+      echartsAllData
     }
   },
 })

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

@@ -0,0 +1,198 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="800px"
+    @close="closeDialog()"
+    @open="open"
+  >
+    <div style="width: 100%; height: 400px">
+      <!-- <inner-line-chart></inner-line-chart> -->
+      <div shadow="never" class="homeBoxCard" v-loading="loading">
+        <div
+          style="height:300px"
+          ref="lineChartBanlance"
+          id="lineChartBanlance"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import { useStore } from 'vuex'
+import { defineComponent, ref, watchEffect, onMounted } from 'vue'
+// import * as api from '@/api/siteManage/watchDog.js'
+// import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+
+// import innerLineChart from './innerLineChart.vue'
+
+export default defineComponent({
+  name: 'DialogCom',
+  components: {
+    // innerLineChart,
+  },
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  setup(props, context) {
+    // let lineChartBanlance = ref(null)
+    context
+    const dialogVisible = ref(false)
+    const siteList = ref([])
+     function echarts2() {
+      alert('000')
+      // 新建一个promise对象
+      let newPromise = new Promise((resolve) => {
+        resolve()
+      })
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        alert('promise')
+        //	此dom为echarts图标展示dom
+        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
+        myChart.setOption({
+          color: ['#1187FF'],
+          legend: {
+            bottom: '0',
+            data: ['电流不平衡度'],
+          },
+
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'cross' },
+          },
+          grid: {
+            left: '20',
+            right: '40',
+            top: '40',
+            bottom: '30',
+            containLabel: true,
+          },
+          xAxis: {
+            axisLabel: {
+              color: '#444',
+              fontSize: 14,
+            },
+            /*改变xy轴颜色*/
+            axisLine: {
+              lineStyle: {
+                color: '#444',
+                width: 1, //这里是为了突出显示加上的
+              },
+            },
+            boundaryGap: false,
+            //   data: electricChart2.value.dataTime,
+            data: [1, 2, 3, 4, 5, 6, 7, 8],
+          },
+          yAxis: {
+            name: '%',
+            nameTextStyle: {
+              color: 'black',
+              fontSize: 10,
+            },
+            type: 'value',
+            axisTick: {
+              show: true, //去除刻度线
+            },
+            axisLabel: {
+              color: 'black', // 文本颜色
+            },
+            axisLine: {
+              show: true, // 去除轴线
+              lineStyle: {
+                color: 'black',
+              },
+            },
+            splitNumber: 5,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#9d9d9d',
+              },
+            },
+          },
+
+          series: [
+            {
+              name: '电流不平衡度',
+              type: 'line',
+              symbolSize: 7,
+              smooth: false,
+              // data: electricChart2.value.elBalun,
+              data: [1, 2, 3, 4, 5, 6, 7, 8],
+              markLine: {
+                //最大值和最小值
+                data: [
+                  {
+                    yAxis: 30,
+                    label: {
+                      position: 'middle',
+                      formatter: '严重三项不平衡',
+                    },
+                    lineStyle: {
+                      width: 2,
+                      color: '#FF5D1D',
+                    },
+                  },
+                  {
+                    yAxis: 14,
+                    label: {
+                      position: 'middle',
+                      formatter: '不平衡度',
+                    },
+                    lineStyle: {
+                      width: 2,
+                      color: '#f2e251',
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        })
+        window.addEventListener('resize', () => {
+          myChart.resize()
+        })
+      })
+    }
+
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      // setTimeout(echarts2(), 1000)
+
+      echarts2()
+    }
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn) => {
+      fn
+      dialogVisible.value = props.flag
+    })
+    onMounted(() => {
+      // setTimeout(function(){
+      // },3000)
+    })
+
+    return {
+      closeDialog,
+      dialogVisible,
+      siteList,
+      echarts2,
+      open,
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+</style>

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

@@ -7,167 +7,67 @@
     @open="open"
   >
     <div style="width: 100%; height: 400px">
-      <!-- <inner-line-chart></inner-line-chart> -->
-      <div shadow="never" class="homeBoxCard" v-loading="loading">
-        <div
-          style="height:300px"
-          ref="lineChartBanlance"
-          id="lineChartBanlance"
-        />
-      </div>
+      <inner-line-chart :yinSuChart="yinSuChart" :aa="aa" v-if="yinSuChart.cos"></inner-line-chart>
     </div>
   </el-dialog>
 </template>
 
 <script>
-// import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect, onMounted } from 'vue'
-// import * as api from '@/api/siteManage/watchDog.js'
-// import { ElMessage } from 'element-plus'
-import * as echarts from 'echarts'
+import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
 
-// import innerLineChart from './innerLineChart.vue'
+import innerLineChart from './innerLineChart.vue'
 
 export default defineComponent({
   name: 'DialogCom',
   components: {
-    // innerLineChart,
+    innerLineChart,
   },
   emits: ['closeDialog'],
   props: {
     flag: Boolean,
     dialogTitle: String,
     itemInfo: Object,
+    echartsAllData: Array,
   },
   setup(props, context) {
-    // let lineChartBanlance = ref(null)
     context
     const dialogVisible = ref(false)
     const siteList = ref([])
-     function echarts2() {
-      alert('000')
-      // 新建一个promise对象
-      let newPromise = new Promise((resolve) => {
-        resolve()
-      })
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        alert('promise')
-        //	此dom为echarts图标展示dom
-        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
-        myChart.setOption({
-          color: ['#1187FF'],
-          legend: {
-            bottom: '0',
-            data: ['电流不平衡度'],
-          },
-
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { type: 'cross' },
-          },
-          grid: {
-            left: '20',
-            right: '40',
-            top: '40',
-            bottom: '30',
-            containLabel: true,
-          },
-          xAxis: {
-            axisLabel: {
-              color: '#444',
-              fontSize: 14,
-            },
-            /*改变xy轴颜色*/
-            axisLine: {
-              lineStyle: {
-                color: '#444',
-                width: 1, //这里是为了突出显示加上的
-              },
-            },
-            boundaryGap: false,
-            //   data: electricChart2.value.dataTime,
-            data: [1, 2, 3, 4, 5, 6, 7, 8],
-          },
-          yAxis: {
-            name: '%',
-            nameTextStyle: {
-              color: 'black',
-              fontSize: 10,
-            },
-            type: 'value',
-            axisTick: {
-              show: true, //去除刻度线
-            },
-            axisLabel: {
-              color: 'black', // 文本颜色
-            },
-            axisLine: {
-              show: true, // 去除轴线
-              lineStyle: {
-                color: 'black',
-              },
-            },
-            splitNumber: 5,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#9d9d9d',
-              },
-            },
-          },
-
-          series: [
-            {
-              name: '电流不平衡度',
-              type: 'line',
-              symbolSize: 7,
-              smooth: false,
-              // data: electricChart2.value.elBalun,
-              data: [1, 2, 3, 4, 5, 6, 7, 8],
-              markLine: {
-                //最大值和最小值
-                data: [
-                  {
-                    yAxis: 30,
-                    label: {
-                      position: 'middle',
-                      formatter: '严重三项不平衡',
-                    },
-                    lineStyle: {
-                      width: 2,
-                      color: '#FF5D1D',
-                    },
-                  },
-                  {
-                    yAxis: 14,
-                    label: {
-                      position: 'middle',
-                      formatter: '不平衡度',
-                    },
-                    lineStyle: {
-                      width: 2,
-                      color: '#f2e251',
-                    },
-                  },
-                ],
-              },
-            },
-          ],
-        })
-        window.addEventListener('resize', () => {
-          myChart.resize()
-        })
-      })
-    }
+
+    const yinSuChart=ref({})
+    const aa=ref(1)
 
     // open(): Dialog弹窗打开之前做的事
     const open = () => {
+     
+    
+      
+
+    }
+
+     const getData = async () => {
       // setTimeout(echarts2(), 1000)
+      console.log('props.echartsAllData')
+      console.log(props.echartsAllData)
+
+
+      var arrOld = props.echartsAllData
+      let dataTime = arrOld.map((item) => {
+        return item.dataTime
+      })
+      let cos = arrOld.map((item) => {
+        return item.cos
+      })
+
+      yinSuChart.value.dataTime = dataTime
+      yinSuChart.value.cos = cos
+       console.log('yinSuChart.value')
+      console.log(yinSuChart.value)
 
-      echarts2()
+      // loading.value = false
     }
 
+
     // 关闭弹框
     const closeDialog = () => {
       context.emit('closeDialog', false)
@@ -178,17 +78,37 @@ export default defineComponent({
       fn
       dialogVisible.value = props.flag
     })
+
+    const writeValue = (val) => {
+      val
+      getData()
+    }
+
+    //监听变化
+    watch(
+      () => props.echartsAllData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
     onMounted(() => {
-      // setTimeout(function(){
-      // },3000)
+      getData()
+
     })
 
     return {
       closeDialog,
       dialogVisible,
       siteList,
-      echarts2,
       open,
+      yinSuChart,
+      aa
     }
   },
 })

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

@@ -1,55 +1,55 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-      <div>dsds</div>
-    <div class="height400" ref="lineChartBanlance" />
+    <div
+      style="height: 400px; width: 700px"
+      ref="lineChartBanlance"
+      v-show="flag"
+    />
   </div>
 </template>
 <script>
-import {  defineComponent, onMounted, ref} from 'vue'
-// import { useStore } from 'vuex'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
-// import { ChartDataType } from "../../data";
+
 
 export default defineComponent({
   name: 'innerLineChart',
   props: {
-    echartsData: Object,
+    yinSuChart: Object,
+    aa: Number,
   },
-  setup() {
-    // const store = useStore()
+  setup(props) {
+    const flag = ref(true)
     let lineChartBanlance = ref(null)
-    // const electricChart2 = ref({})
-
-
 
     // 读取数据 func
     const loading = ref(true)
 
-    
-    const getData = async () => {
-    //   var arrOld = props.echartsData
-      
-    //   let dataTime = arrOld.map((item) => {
-    //     return item.dataTime.substring(0, 10);
-    //   })
-    //   let elBalun = arrOld.map((item) => {
-    //     return item.elBalun*100
-    //   })
-    //   electricChart2.value.dataTime = dataTime
-    //   electricChart2.value.elBalun = elBalun
-    
+
+     const getData = async () => {
+       console.log('子组件中的props.yinSuChart.cos')
+      // console.log(props.yinSuChart)
+      console.log(props.yinSuChart)
+      console.log(props.yinSuChart.dataTime)
+
       loading.value = false
     }
-    async function echarts2() {
-        alert(3)
+
+
+
+
+
+
+
+
+     function echarts2() {
       let myChart = echarts.init(lineChartBanlance.value)
-       alert(999)
       // 绘制图表
       myChart.setOption({
         color: ['#1187FF'],
         legend: {
-          bottom: '0',
-          data: ['电流不平衡度'],
+          top: '0',
+          data: ['功率因素'],
         },
 
         tooltip: {
@@ -59,7 +59,7 @@ export default defineComponent({
         grid: {
           left: '20',
           right: '40',
-          top: '40',
+          top: '50',
           bottom: '30',
           containLabel: true,
         },
@@ -76,8 +76,8 @@ export default defineComponent({
             },
           },
           boundaryGap: false,
-        //   data: electricChart2.value.dataTime,
-           data: [1,2,3,4,5,6,7,8,],
+          //   data: props.value.dataTime,
+          // data: [1, 2, 3, 4, 5, 6, 7, 8],
         },
         yAxis: {
           name: '%',
@@ -113,8 +113,8 @@ export default defineComponent({
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            // data: electricChart2.value.elBalun,
-             data: [1,2,3,4,5,6,7,8,],
+            // data: props.yinSuChart.value.cos,
+            data: [1, 2, 3, 4, 5, 6, 7, 8],
             markLine: {
               //最大值和最小值
               data: [
@@ -146,33 +146,31 @@ export default defineComponent({
         ],
       })
       window.addEventListener('resize', () => {
-         
         myChart.resize()
       })
+    }
 
-    
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
     }
 
-    // const writeValue = (val) => {
-    //   val
-    //   getData()
-    //   echarts2()
-    // }
-
-    // //监听变化
-    // watch(
-    //   () => props.echartsData,
-    //   (newVal, oldVal, clear) => {
-    //     // 执行异步任务，并得到关闭异步任务的 id
-    //     // console.log(newVal)
-    //     let id = writeValue(newVal, oldVal)
-    //     // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-    //     clear(() => clearTimeout(id))
-    //   },
-    //   { lazy: true }
-    // )
+    //监听变化
+    watch(
+      () => props.yinSuChart,
+      (newVal, oldVal, clear) => {
+
+        alert(2)
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
     onMounted(() => {
-        alert('mounted')
       getData()
       echarts2()
     })
@@ -180,7 +178,8 @@ export default defineComponent({
     return {
       lineChartBanlance,
       loading,
-    
+      flag,
+      echarts2,
     }
   },
 })