指标趋势表格渲染

src/store/index.js

@@ -47,6 +47,9 @@ export default createStore({
         basicInfoConst: 1, // 站点弹窗
 
         siteManageLabelCom: '', //站点管理，树结构label传值
+
+
+        realScoreLineDatasAll: '',
     },
     mutations: {
         /**

src/views/deviceManage/powerEquip/communicateEquip/dialog/cloneDialog.vue

@@ -21,7 +21,7 @@
         <el-form-item label="变量克隆至:" prop="cloneRadio">
           <el-radio-group v-model="form.type" size="medium">
             <el-radio :label="1">新设备</el-radio>
-            <el-radio :label="2">已有设备</el-radio>
+            <el-radio :label="2">已有设备（仅克隆变量）</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item

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>
+                <div @click="oneClick('elBalun')">
                   <i
                     class="smallSquare"
                     :style="{
@@ -116,11 +116,15 @@
             </el-table-column>
             <el-table-column label="电压" align="center">
               <template #default="scope">
-                <i
-                  class="smallSquare"
-                  :style="{ background: scope.row.vtBalunQ ? 'green' : 'red' }"
-                ></i>
-                {{ scope.row.vtBalun }}
+                <div @click="oneClick('vtBalun')">
+                  <i
+                    class="smallSquare"
+                    :style="{
+                      background: scope.row.vtBalunQ ? 'green' : 'red',
+                    }"
+                  ></i>
+                  {{ scope.row.vtBalun }}
+                </div>
               </template>
             </el-table-column>
           </el-table-column>
@@ -150,14 +154,13 @@
             </el-table-column>
             <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-                <div  @click="oneClick('uc')">
+                <div @click="oneClick('uc')">
                   <i
-                  class="smallSquare"
-                  :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
-                ></i>
-                {{ scope.row.uc }}
+                    class="smallSquare"
+                    :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
+                  ></i>
+                  {{ scope.row.uc }}
                 </div>
-                
               </template>
             </el-table-column>
           </el-table-column>
@@ -202,22 +205,22 @@
       </el-col>
     </el-row>
 
-    <!--视频弹框组件开始-----------------------start-->
-    <dialog-com
+    <!--弹框组件开始-----------------------start-->
+    <dialog-chartOne
       :dialogTitle="dialogTitle"
       @closeDialog="closeDialog"
       :flag="showDialog2"
       :echartsAllData="echartsAllData"
       :echartsTitle="echartsTitle"
-    ></dialog-com>
-    <!--视频弹框组件结束-----------------------end-->
+    ></dialog-chartOne>
+    <!--弹框组件结束-----------------------end-->
   </div>
 </template>
 
 <script>
 import radarChart from './realScoreComponent/radarChart.vue'
 import pieChart from './realScoreComponent/pieChart.vue'
-import dialogCom from './realScoreComponent/dialogCom'
+import dialogChartOne from './realScoreComponent/dialogChartOne'
 import { useStore } from 'vuex'
 import { defineComponent, onMounted, ref } from 'vue'
 import * as api from '@/api/powerQuality/realScore.js'
@@ -229,7 +232,7 @@ export default defineComponent({
   components: {
     radarChart,
     pieChart,
-    dialogCom,
+    dialogChartOne,
   },
   setup() {
     const store = useStore()
@@ -266,6 +269,7 @@ export default defineComponent({
       }
     }
 
+    //设备下拉请求
     function deviceSelect() {
       api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
         if (requset.status === 'SUCCESS') {
@@ -277,6 +281,7 @@ export default defineComponent({
       })
     }
 
+    //表格数据请求
     function realScore() {
       api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
         if (requset.status === 'SUCCESS') {
@@ -290,6 +295,30 @@ export default defineComponent({
       })
       nowTime.value = parseTime(new Date())
     }
+
+
+    // 折线图详情总数据请求
+    function rtRealScore(){
+      var start = parseTime(new Date().setHours(0, 0, 0, 0))
+      var end = parseTime(new Date())
+      api
+        .rtRealScore({
+          deviceCode: 'DA00021026',
+          startTime: start,
+          endTime: end,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            echartsAllData.value = requset.data
+
+            store.state.realScoreLineDatasAll= requset.data
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    // 点击表格弹框图表
     function oneClick(params) {
       switch (params) {
         case 'cos':
@@ -304,28 +333,19 @@ export default defineComponent({
         case 'uc':
           echartsTitle.value = 'C相电压'
           break
+        // case 'elBalun':
+        //   echartsTitle.value = 'C相电压'
+        //   break
+        // case 'vtBalun':
+        //   echartsTitle.value = 'C相电压'
+        //   break
         default:
       }
-
       dialogTitle.value = deviceCode.value
       showDialog2.value = true
 
-      var start = parseTime(new Date().setHours(0, 0, 0, 0))
-      var end = parseTime(new Date())
-
-      api
-        .rtRealScore({
-          deviceCode: 'DA00021026',
-          startTime: start,
-          endTime: end,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            echartsAllData.value = requset.data
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
+      rtRealScore()
+      
     }
 
     // 关闭操作
@@ -355,6 +375,7 @@ export default defineComponent({
       dialogTitle,
       echartsAllData,
       echartsTitle,
+      rtRealScore
     }
   },
 })

src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogChartOne-ori.vue

@@ -0,0 +1,237 @@
+<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: 400px"
+          ref="lineChartBanlance"
+          id="lineChartBanlance"
+        />
+      </div> -->
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import innerLineChart from './innerLineChart'
+
+export default defineComponent({
+  name: 'DialogChartOne',
+  components: {
+    innerLineChart
+  },
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+    echartsAllData: Array,
+    echartsTitle: String,
+  },
+  setup(props, context) {
+    context
+    const dialogVisible = ref(false)
+    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) => {
+        resolve()
+      })
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        //	此dom为echarts图标展示dom
+        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
+        myChart.setOption({
+          color: ['#1187FF'],
+          legend: {
+            top: '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: dataTimes.value,
+          },
+          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: props.echartsTitle + '实时数据',
+              type: 'line',
+              symbolSize: 7,
+              smooth: false,
+              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',
+                //     },
+                //   },
+                // ],
+              },
+            },
+          ],
+        })
+        window.addEventListener('resize', () => {
+          myChart.resize()
+        })
+      })
+    }
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn) => {
+      fn
+      dialogVisible.value = props.flag
+    })
+
+    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,
+      echarts2,
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+</style>

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

@@ -7,7 +7,6 @@
     @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: 400px"
@@ -20,18 +19,12 @@
 </template>
 
 <script>
-// import { useStore } from 'vuex'
 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'
 
-// import innerLineChart from './innerLineChart.vue'
-
 export default defineComponent({
-  name: 'DialogCom',
+  name: 'DialogChartOne',
   components: {
-    // innerLineChart,
   },
   emits: ['closeDialog'],
   props: {
@@ -44,7 +37,6 @@ export default defineComponent({
   setup(props, context) {
     context
     const dialogVisible = ref(false)
-    const siteList = ref([])
     const dataList = ref([])
     const dataTimes = ref([])
 
@@ -65,12 +57,10 @@ export default defineComponent({
       let uc = arrOld.map((item) => {
         return item.uc
       })
-
       dataTimes.value = dataTime;
       switch (props.echartsTitle) {
         case '功率因数':
           dataList.value = cos
-
           break
         case 'A相电压':
           dataList.value = ua
@@ -232,7 +222,6 @@ export default defineComponent({
     return {
       closeDialog,
       dialogVisible,
-      siteList,
       echarts2,
     }
   },

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

@@ -1,118 +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 :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/innerLineChart.vue

@@ -4,139 +4,173 @@
   </div>
 </template>
 <script>
+import { useStore } from 'vuex'
 import {  defineComponent, onMounted, ref, watch } from 'vue'
-// import * as echarts from 'echarts'
+import * as echarts from 'echarts'
 
 export default defineComponent({
   name: 'lineChartValue',
   props: {
-    yinSuChart: Object,
-    // electricChartData:Object
   },
   setup(props) {
+    props
+     const store = useStore()
     let lineChartBanlance = ref(null)
-    //  const electricChart=ref({})
+    const dataTimes=ref([])
+    const dataList = ref([])
 
     // 读取数据 func
     const loading = ref(true)
     const getData = async () => {
+  
+      console.log('store.state.realScoreLineDatasAll')
+      console.log(store.state.realScoreLineDatasAll)
+       console.log('store.state.realScoreLineDatasAll')
 
-      console.log('子字组件中的props.yinSuChart')
-      console.log(props.yinSuChart)
-     
 
+      var arrOld = store.state.realScoreLineDatasAll
+      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:
+      }
       loading.value = false
     }
-    // function echarts2(){
-    //   let myChart = echarts.init(lineChartBanlance.value)
-    //   // 绘制图表
-    //   myChart.setOption({
-    //     // backgroundColor: "pink",
-    //     color: ['#f2e251', '#48C964', '#fe8161'],
+    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',
-    //         },
-    //       },
-    //     },
+        legend: {
+          top: '0',
+         
+        },
+        // 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: dataTimes.value,
+        },
+        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()
-    //   })
+        series: [
+          {
+            name: 'A相电流',
+            type: 'line',
+            symbolSize: 7,
+            smooth: false,
+            data:[1,2,6,4,5,58,6,7,8],
+          },
+          {
+            name: 'B相电流',
+            type: 'line',
+            symbolSize: 7,
+            smooth: false,
+             data:[1,2,3,4,9,5,6,7,8],
+          },
+          {
+            name: 'C相电流',
+            type: 'line',
+            symbolSize: 7,
+            smooth: false,
+            data:[1,2,3,4,5,6,6,7,3],
+          },
+        ],
+      })
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
 
-    // }
+    }
 
      const writeValue = (val) => {
       val
       getData()
-      // echarts2()
+      echarts2()
     }
 
     //监听变化
     watch(
-      () => props.yinSuChart,
+      () => store.state.realScoreLineDatasAll,
       (newVal, oldVal, clear) => {
-        alert('aaa')
         // 执行异步任务，并得到关闭异步任务的 id
         // console.log(newVal)
         let id = writeValue(newVal, oldVal)
@@ -148,7 +182,7 @@ export default defineComponent({
 
 
     onMounted(() => {
-      getData()
+      // getData()
       // echarts2()
       
     })
@@ -156,6 +190,9 @@ export default defineComponent({
     return {
       lineChartBanlance,
       loading,
+      store,
+      dataTimes,
+      dataList
      
       
     }