-

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

@@ -1,198 +0,0 @@
-<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-ora.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="800px"
+    @close="closeDialog()"
+    @open="open"
+  >
+    <div style="width: 100%; height: 400px">
+      <inner-line-chart :yinSuChart="yinSuChart" :aa="aa" v-if="yinSuChart.cos"></inner-line-chart>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
+
+import innerLineChart from './innerLineChart.vue'
+
+export default defineComponent({
+  name: 'DialogCom',
+  components: {
+    innerLineChart,
+  },
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+    echartsAllData: Array,
+  },
+  setup(props, context) {
+    context
+    const dialogVisible = ref(false)
+    const siteList = ref([])
+
+    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)
+
+      // loading.value = false
+    }
+
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn) => {
+      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(() => {
+      getData()
+
+    })
+
+    return {
+      closeDialog,
+      dialogVisible,
+      siteList,
+      open,
+      yinSuChart,
+      aa
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+</style>

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

@@ -7,66 +7,167 @@
     @open="open"
   >
     <div style="width: 100%; height: 400px">
-      <inner-line-chart :yinSuChart="yinSuChart" :aa="aa" v-if="yinSuChart.cos"></inner-line-chart>
+      <!-- <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 { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
+// 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'
+// 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([])
-
-    const yinSuChart=ref({})
-    const aa=ref(1)
+    function echarts2() {
+      // 新建一个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 = () => {
-     
-    
-      
-
-    }
-
-     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)
-
-      // loading.value = false
+      echarts2()
     }
 
+    
 
     // 关闭弹框
     const closeDialog = () => {
@@ -78,37 +179,16 @@ 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(() => {
-      getData()
-
+    
     })
 
     return {
       closeDialog,
       dialogVisible,
       siteList,
+      echarts2,
       open,
-      yinSuChart,
-      aa
     }
   },
 })

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

@@ -1,167 +1,142 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div
-      style="height: 400px; width: 700px"
-      ref="lineChartBanlance"
-      v-show="flag"
-    />
+    <div class="height400" ref="lineChartBanlance" />
   </div>
 </template>
 <script>
-import { defineComponent, onMounted, ref, watch } from 'vue'
-import * as echarts from 'echarts'
-
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+// import * as echarts from 'echarts'
 
 export default defineComponent({
-  name: 'innerLineChart',
+  name: 'lineChartValue',
   props: {
     yinSuChart: Object,
-    aa: Number,
+    // electricChartData:Object
   },
   setup(props) {
-    const flag = ref(true)
     let lineChartBanlance = ref(null)
+    //  const electricChart=ref({})
 
     // 读取数据 func
     const loading = ref(true)
+    const getData = async () => {
 
-
-     const getData = async () => {
-       console.log('子组件中的props.yinSuChart.cos')
-      // console.log(props.yinSuChart)
+      console.log('子字组件中的props.yinSuChart')
       console.log(props.yinSuChart)
-      console.log(props.yinSuChart.dataTime)
+     
 
       loading.value = false
     }
-
-
-
-
-
-
-
-
-     function echarts2() {
-      let myChart = echarts.init(lineChartBanlance.value)
-      // 绘制图表
-      myChart.setOption({
-        color: ['#1187FF'],
-        legend: {
-          top: '0',
-          data: ['功率因素'],
-        },
-
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'cross' },
-        },
-        grid: {
-          left: '20',
-          right: '40',
-          top: '50',
-          bottom: '30',
-          containLabel: true,
-        },
-        xAxis: {
-          axisLabel: {
-            color: '#444',
-            fontSize: 14,
-          },
-          /*改变xy轴颜色*/
-          axisLine: {
-            lineStyle: {
-              color: '#444',
-              width: 1, //这里是为了突出显示加上的
-            },
-          },
-          boundaryGap: false,
-          //   data: props.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: props.yinSuChart.value.cos,
-            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 writeValue = (val) => {
+    // function echarts2(){
+    //   let myChart = echarts.init(lineChartBanlance.value)
+    //   // 绘制图表
+    //   myChart.setOption({
+    //     // backgroundColor: "pink",
+    //     color: ['#f2e251', '#48C964', '#fe8161'],
+
+    //     legend: {
+    //       bottom: '0',
+    //       data: ['A相电流', 'B相电流', 'C相电流'],
+    //     },
+    //     // toolbox: {
+    //     //   show: false,
+    //     // },
+    //     tooltip: {
+    //       // show: true
+    //       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: electricChart.value.dataTime,
+    //     },
+    //     yAxis: {
+    //       name: 'A',
+    //       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: 'A相电流',
+    //         type: 'line',
+    //         symbolSize: 7,
+    //         smooth: false,
+    //         data:electricChart.value.la,
+    //       },
+    //       {
+    //         name: 'B相电流',
+    //         type: 'line',
+    //         symbolSize: 7,
+    //         smooth: false,
+    //         data: electricChart.value.lb,
+    //       },
+    //       {
+    //         name: 'C相电流',
+    //         type: 'line',
+    //         symbolSize: 7,
+    //         smooth: false,
+    //         data:electricChart.value.lc,
+    //       },
+    //     ],
+    //   })
+    //   window.addEventListener('resize', () => {
+    //     myChart.resize()
+    //   })
+
+    // }
+
+     const writeValue = (val) => {
       val
       getData()
-      echarts2()
+      // echarts2()
     }
 
     //监听变化
     watch(
       () => props.yinSuChart,
       (newVal, oldVal, clear) => {
-
-        alert(2)
+        alert('aaa')
         // 执行异步任务，并得到关闭异步任务的 id
         // console.log(newVal)
         let id = writeValue(newVal, oldVal)
@@ -170,16 +145,19 @@ export default defineComponent({
       },
       { lazy: true }
     )
+
+
     onMounted(() => {
       getData()
-      echarts2()
+      // echarts2()
+      
     })
 
     return {
       lineChartBanlance,
       loading,
-      flag,
-      echarts2,
+     
+      
     }
   },
 })