-

src/views/planOutage/dialogComponent.vue

@@ -231,7 +231,7 @@ export default defineComponent({
           { required: true, message: '请选择站点', trigger: 'blur' },
         ],
         time: [
-          { required: true, message: '请选择开始停电时间', trigger: 'blur' },
+          { required: true, message: '请选择起始停电时间', trigger: 'change' },
         ],
         // startTime: [
         //   { required: true, message: '请选择开始停电时间', trigger: 'blur' },

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(scope)">
+                <div @click="oneClick('elBalun')">
                   <i
                     class="smallSquare"
                     :style="{
@@ -194,12 +194,21 @@
         <!-- 表格end -->
       </el-col>
     </el-row>
+
+    <!--视频弹框组件开始-----------------------start-->
+    <dialog-com
+      :dialogTitle="dialogTitle"
+      @closeDialog="closeDialog"
+      :flag="showDialog2"
+    ></dialog-com>
+    <!--视频弹框组件结束-----------------------end-->
   </div>
 </template>
 
 <script>
 import radarChart from './realScoreComponent/radarChart.vue'
 import pieChart from './realScoreComponent/pieChart.vue'
+import dialogCom from './realScoreComponent/dialogCom'
 import { useStore } from 'vuex'
 import { defineComponent, onMounted, ref } from 'vue'
 import * as api from '@/api/powerQuality/realScore.js'
@@ -211,6 +220,7 @@ export default defineComponent({
   components: {
     radarChart,
     pieChart,
+    dialogCom,
   },
   setup() {
     const store = useStore()
@@ -229,8 +239,11 @@ export default defineComponent({
       },
     ])
     const deviceList = ref([])
-    // const deviceCode = ref('DA00012784')
-    const deviceCode = ref('')
+    const deviceCode = ref('DA00012784')
+    // const deviceCode = ref('')
+
+    const dialogTitle = ref('')
+    const showDialog2 = ref(false)
 
     function headCellStyle({ row, column, rowIndex, columnIndex }) {
       row, column
@@ -245,7 +258,7 @@ export default defineComponent({
       api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
         if (requset.status === 'SUCCESS') {
           deviceList.value = requset.data
-          deviceCode.value= requset.data[0]?requset.data[0].deviceCode:''
+          deviceCode.value = requset.data[0] ? requset.data[0].deviceCode : ''
         } else {
           ElMessage.error(requset.msg)
         }
@@ -266,8 +279,37 @@ export default defineComponent({
       nowTime.value = parseTime(new Date())
     }
     function oneClick(params) {
-      console.log(params)
+      alert(params)
+      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,
+          // queryPeriod: 'NORMAL',
+          // calcmethod: 'AVG',
+          // sns: 'bdwq_183__COS',
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            console.log('requset.data')
+            console.log(requset.data)
+            // getData.value[0] = requset.data
+            // console.log(getData.value)
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
 
+    // 关闭操作
+    const closeDialog = () => {
+      showDialog2.value = false
     }
 
     onMounted(() => {
@@ -287,6 +329,9 @@ export default defineComponent({
       realScore,
       nowTime,
       deviceCode,
+      closeDialog,
+      showDialog2,
+      dialogTitle,
     }
   },
 })

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

@@ -0,0 +1,199 @@
+<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>ddss</div>
+        <div
+          class="height400;width: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/innerLineChart.vue

@@ -0,0 +1,211 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+      <div>dsds</div>
+    <div class="height400" ref="lineChartBanlance" />
+  </div>
+</template>
+<script>
+import {  defineComponent, onMounted, ref} from 'vue'
+// import { useStore } from 'vuex'
+import * as echarts from 'echarts'
+// import { ChartDataType } from "../../data";
+
+export default defineComponent({
+  name: 'innerLineChart',
+  props: {
+    echartsData: Object,
+  },
+  setup() {
+    // const store = useStore()
+    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
+    
+      loading.value = false
+    }
+    async function echarts2() {
+        alert(3)
+      let myChart = echarts.init(lineChartBanlance.value)
+       alert(999)
+      // 绘制图表
+      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 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 }
+    // )
+    onMounted(() => {
+        alert('mounted')
+      getData()
+      echarts2()
+    })
+
+    return {
+      lineChartBanlance,
+      loading,
+    
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+  margin-bottom: 24px;
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>