三相不平衡

.history/src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart_20211018102819.vue

@@ -1,169 +0,0 @@
-<template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="pieChart" ref="pieChart" />
-  </div>
-</template>
-<script>
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-} from 'vue'
-import { useStore } from 'vuex'
-import * as echarts from 'echarts'
-
-var echartData = [
-  {
-    value: 335,
-    legendname: '优秀',
-    name: '优秀',
-    itemStyle: { color: '#40ABFE' },
-  },
-  {
-    value: 335,
-    legendname: '合格',
-    name: '合格',
-    itemStyle: { color: '#EEAA3F' },
-  },
-  {
-    value: 335,
-    legendname: '不合格',
-    name: '不合格',
-    itemStyle: { color: '#FF2222' },
-  },
-]
-
-var total_datas = 0
-for (var i = 0; i < echartData.length; i++) {
-  total_datas += Number(echartData[i].value)
-  console.log(typeof echartData[i].value)
-}
-
-export default defineComponent({
-  name: 'PieChart',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true;
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
-    }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('pieChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: [
-          {
-            text: '' + total_datas,
-            subtext: '共计回路',
-            textStyle: {
-              fontSize: 24,
-              color: 'black',
-            },
-            subtextStyle: {
-              fontSize: 16,
-              color: 'black',
-            },
-            textAlign: 'center',
-            left: '49%',
-            top: '40%',
-          },
-        ],
-        tooltip: {
-          trigger: 'item',
-          formatter: function (parms) {
-            var str =
-              parms.seriesName +
-              '</br>' +
-              parms.marker +
-              '' +
-              parms.data.legendname +
-              '</br>' +
-              '数量：' +
-              parms.data.value +
-              '</br>' +
-              '占比：' +
-              parms.percent +
-              '%'
-            return str
-          },
-        },
-        legend: {
-          type: 'scroll',
-          orient: 'horizontal',
-          bottom: '0%',
-          align: 'left',
-          // top:'middle',
-          textStyle: {
-            color: '#8C8C8C',
-          },
-          height: 250,
-        },
-        series: [
-          {
-            name: '标题',
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['40%', '60%'],
-
-            clockwise: false, //饼图的扇区是否是顺时针排布
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: echartData,
-          },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      loading,
-      total,
-      num,
-    }
-  },
-})
-</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;
-  }
-  .height300 {
-    height: 300px;
-  }
-}
-</style>

.history/src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart_20211020150207.vue

@@ -1,169 +0,0 @@
-<template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="pieChart" ref="pieChart" />
-  </div>
-</template>
-<script>
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-} from 'vue'
-import { useStore } from 'vuex'
-import * as echarts from 'echarts'
-
-var echartData = [
-  {
-    value: 335,
-    legendname: '优秀',
-    name: '优秀',
-    itemStyle: { color: '#40ABFE' },
-  },
-  {
-    value: 335,
-    legendname: '合格',
-    name: '合格',
-    itemStyle: { color: '#EEAA3F' },
-  },
-  {
-    value: 335,
-    legendname: '不合格',
-    name: '不合格',
-    itemStyle: { color: '#FF2222' },
-  },
-]
-
-var total_datas = 0
-for (var i = 0; i < echartData.length; i++) {
-  total_datas += Number(echartData[i].value)
-  console.log(typeof echartData[i].value)
-}
-
-export default defineComponent({
-  name: 'PieChart',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true;
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
-    }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('pieChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: [
-          {
-            text: '' + total_datas,
-            subtext: '共计回路',
-            textStyle: {
-              fontSize: 24,
-              color: 'black',
-            },
-            subtextStyle: {
-              fontSize: 16,
-              color: 'black',
-            },
-            textAlign: 'center',
-            left: '49%',
-            top: '40%',
-          },
-        ],
-        tooltip: {
-          trigger: 'item',
-          formatter: function (parms) {
-            var str =
-              parms.seriesName +
-              '</br>' +
-              parms.marker +
-              '' +
-              parms.data.legendname +
-              '</br>' +
-              '数量：' +
-              parms.data.value +
-              '</br>' +
-              '占比：' +
-              parms.percent +
-              '%'
-            return str
-          },
-        },
-        legend: {
-          type: 'scroll',
-          orient: 'horizontal',
-          bottom: '20%',
-          align: 'left',
-          // top:'middle',
-          textStyle: {
-            color: '#8C8C8C',
-          },
-          height: 250,
-        },
-        series: [
-          {
-            name: '标题',
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['40%', '60%'],
-
-            clockwise: false, //饼图的扇区是否是顺时针排布
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: echartData,
-          },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      loading,
-      total,
-      num,
-    }
-  },
-})
-</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;
-  }
-  .height300 {
-    height: 300px;
-  }
-}
-</style>

.history/src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart_20211020150236.vue

@@ -1,169 +0,0 @@
-<template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="pieChart" ref="pieChart" />
-  </div>
-</template>
-<script>
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-} from 'vue'
-import { useStore } from 'vuex'
-import * as echarts from 'echarts'
-
-var echartData = [
-  {
-    value: 335,
-    legendname: '优秀',
-    name: '优秀',
-    itemStyle: { color: '#40ABFE' },
-  },
-  {
-    value: 335,
-    legendname: '合格',
-    name: '合格',
-    itemStyle: { color: '#EEAA3F' },
-  },
-  {
-    value: 335,
-    legendname: '不合格',
-    name: '不合格',
-    itemStyle: { color: '#FF2222' },
-  },
-]
-
-var total_datas = 0
-for (var i = 0; i < echartData.length; i++) {
-  total_datas += Number(echartData[i].value)
-  console.log(typeof echartData[i].value)
-}
-
-export default defineComponent({
-  name: 'PieChart',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true;
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
-    }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('pieChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: [
-          {
-            text: '' + total_datas,
-            subtext: '共计回路',
-            textStyle: {
-              fontSize: 24,
-              color: 'black',
-            },
-            subtextStyle: {
-              fontSize: 16,
-              color: 'black',
-            },
-            textAlign: 'center',
-            left: '49%',
-            top: '40%',
-          },
-        ],
-        tooltip: {
-          trigger: 'item',
-          formatter: function (parms) {
-            var str =
-              parms.seriesName +
-              '</br>' +
-              parms.marker +
-              '' +
-              parms.data.legendname +
-              '</br>' +
-              '数量：' +
-              parms.data.value +
-              '</br>' +
-              '占比：' +
-              parms.percent +
-              '%'
-            return str
-          },
-        },
-        legend: {
-          type: 'scroll',
-          orient: 'horizontal',
-          bottom: '0%',
-          align: 'left',
-          // top:'middle',
-          textStyle: {
-            color: '#8C8C8C',
-          },
-          height: 250,
-        },
-        series: [
-          {
-            name: '标题',
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['40%', '60%'],
-
-            clockwise: false, //饼图的扇区是否是顺时针排布
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: echartData,
-          },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      loading,
-      total,
-      num,
-    }
-  },
-})
-</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;
-  }
-  .height300 {
-    height: 300px;
-  }
-}
-</style>

src/api/powerQuality/unbalanceAnalysis.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+//通信设备列表查询-无分页
+export function deviceListOne(params) {
+    return request({
+        url: '/device/deviceListOne',
+        method: 'GET',
+        params,
+    })
+}
+
+
+// 三项不平衡  （历史消费组模拟量----历史电流电压评分）
+export function rtRealScore(params) {
+    return request({
+        url: '/htAnalogData/rtRealScore',
+        method: 'GET',
+        params,
+    })
+}

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -17,10 +17,9 @@
                 :label="device.deviceName"
                 :value="device.deviceCode"
               ></el-option>
-              <!-- <el-option label="设备1" value="DA00021026"></el-option> -->
             </el-select>
           </div>
-          数据刷新时间：{{nowTime}}
+          数据刷新时间：{{ nowTime }}
 
           <el-button
             type="primary"
@@ -48,8 +47,16 @@
           </div>
           <radar-chart :getTableData="getData[0]"></radar-chart>
           <div class="totalScore">
-            总评分：{{getData[0].score}}
-            <el-button type="danger">{{getData[0].score>80?'优秀':getData[0].score>=60?'合格':'不合格'}}</el-button>
+            总评分：{{ getData[0].score }}
+            <el-button type="danger">
+              {{
+                getData[0].score > 80
+                  ? '优秀'
+                  : getData[0].score >= 60
+                  ? '合格'
+                  : '不合格'
+              }}
+            </el-button>
           </div>
         </div>
         <!-- 评分 end -->
@@ -62,7 +69,7 @@
             <span>回路统计</span>
           </div>
           <div>
-            <pie-chart></pie-chart>
+            <pie-chart :getTableData="getData[0]"></pie-chart>
           </div>
         </div>
         <!-- 回路统计 end -->
@@ -81,30 +88,38 @@
             </template>
           </el-table-column>
 
-
-           <el-table-column label="功率因数" width="" align="center">
-              <template #default="scope">
-                <div  @click="oneClick(scope)">
-                <i class="smallSquare" :style="{'background': (scope.row.cosQ ? 'green':'red')}"></i>
+          <el-table-column label="功率因数" width="" align="center">
+            <template #default="scope">
+              <div @click="oneClick('cos')">
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.cosQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.cos }}
-                 </div>
-              </template>
-             
-            </el-table-column>
+              </div>
+            </template>
+          </el-table-column>
 
-          <el-table-column label="不平衡度" >
+          <el-table-column label="不平衡度">
             <el-table-column label="电流" width="" align="center">
               <template #default="scope">
-                <div  @click="oneClick(scope)">
-               <i class="smallSquare" :style="{'background': (scope.row.elBalunQ ? 'green':'red')}"></i>
-                {{ scope.row.elBalun }}
-                 </div>
+                <div @click="oneClick(scope)">
+                  <i
+                    class="smallSquare"
+                    :style="{
+                      background: scope.row.elBalunQ ? 'green' : 'red',
+                    }"
+                  ></i>
+                  {{ scope.row.elBalun }}
+                </div>
               </template>
-             
             </el-table-column>
             <el-table-column label="电压" align="center">
               <template #default="scope">
-                 <i class="smallSquare" :style="{'background': (scope.row.vtBalunQ ? 'green':'red')}"></i>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.vtBalunQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.vtBalun }}
               </template>
             </el-table-column>
@@ -113,39 +128,57 @@
           <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>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.ua }}
               </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>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.ub }}
               </template>
             </el-table-column>
             <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-                <i class="smallSquare" :style="{'background': (scope.row.ucQ ? 'green':'red')}"></i>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.uc }}
               </template>
             </el-table-column>
           </el-table-column>
-          <el-table-column label="电流负载率" >
+          <el-table-column label="电流负载率">
             <el-table-column prop="name" label="A相" width="" align="center">
               <template #default="scope">
-                <i class="smallSquare" :style="{'background': (scope.row.iaLoadQ? 'green':'red')}"></i>
-                {{ scope.row.iaLoad }} 
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.iaLoadQ ? 'green' : 'red' }"
+                ></i>
+                {{ scope.row.iaLoad }}
               </template>
             </el-table-column>
-            <el-table-column prop="city" label="B相"  align="center">
+            <el-table-column prop="city" label="B相" align="center">
               <template #default="scope">
-                 <i class="smallSquare" :style="{'background': (scope.row.ibLoadQ? 'green':'red')}"></i>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.ibLoadQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.ibLoad }}
               </template>
             </el-table-column>
             <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-               <i class="smallSquare" :style="{'background': (scope.row.icLoadQ? 'green':'red')}"></i>
+                <i
+                  class="smallSquare"
+                  :style="{ background: scope.row.icLoadQ ? 'green' : 'red' }"
+                ></i>
                 {{ scope.row.icLoad }}
               </template>
             </el-table-column>
@@ -182,7 +215,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const num = ref(1)
-    const nowTime=ref(parseTime(new Date()))
+    const nowTime = ref(parseTime(new Date()))
     const value4 = ref('')
     const getData = ref([
       {
@@ -210,7 +243,7 @@ export default defineComponent({
     function deviceSelect() {
       api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
         if (requset.status === 'SUCCESS') {
-          deviceList.value = requset.data;
+          deviceList.value = requset.data
         } else {
           ElMessage.error(requset.msg)
         }
@@ -228,12 +261,11 @@ export default defineComponent({
           ElMessage.error(requset.msg)
         }
       })
-      nowTime.value=parseTime(new Date())
-
+      nowTime.value = parseTime(new Date())
     }
-    function oneClick(params){
-       console.log(params)
-      console.log(params.column.label)
+    function oneClick(params) {
+      console.log(params)
+
     }
 
     onMounted(() => {

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

@@ -4,68 +4,36 @@
   </div>
 </template>
 <script>
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-} from 'vue'
-import { useStore } from 'vuex'
+import { defineComponent, onMounted, ref ,watch} from 'vue'
+// import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 
-var echartData = [
-  {
-    value: 335,
-    legendname: '优秀',
-    name: '优秀',
-    itemStyle: { color: '#40ABFE' },
-  },
-  {
-    value: 335,
-    legendname: '合格',
-    name: '合格',
-    itemStyle: { color: '#EEAA3F' },
-  },
-  {
-    value: 335,
-    legendname: '不合格',
-    name: '不合格',
-    itemStyle: { color: '#FF2222' },
-  },
-]
-
-var total_datas = 0
-for (var i = 0; i < echartData.length; i++) {
-  total_datas += Number(echartData[i].value)
-  console.log(typeof echartData[i].value)
-}
+// var total_datas = 0
+// for (var i = 0; i < echartData.length; i++) {
+//   total_datas += Number(echartData[i].value)
+//   console.log(typeof echartData[i].value)
+// }
 
 export default defineComponent({
   name: 'PieChart',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
+  props: {
+    getTableData: Object,
+  },
+  setup(props) {
     // 读取数据 func
     const loading = ref(true)
     const getData = async () => {
-      // loading.value = true;
-      // await store.dispatch("Home/queryWorksChartData");
       loading.value = false
+      console.log('props.getTableData.score')
+      console.log(props.getTableData.score)
     }
-
-    onMounted(() => {
-      getData()
+    function echarts2() {
       let myChart = echarts.init(document.getElementById('pieChart'))
       // 绘制图表
       myChart.setOption({
         title: [
           {
-            text: '' + total_datas,
+            text: 1,
             subtext: '共计回路',
             textStyle: {
               fontSize: 24,
@@ -84,18 +52,18 @@ export default defineComponent({
           trigger: 'item',
           formatter: function (parms) {
             var str =
-              parms.seriesName +
               '</br>' +
               parms.marker +
               '' +
               parms.data.legendname +
-              '</br>' +
-              '数量：' +
-              parms.data.value +
-              '</br>' +
-              '占比：' +
-              parms.percent +
-              '%'
+              '</br>' 
+              // +
+              // '数量：' +
+              // parms.data.value +
+              // '</br>' +
+              // '占比：' +
+              // parms.percent +
+              // '%'
             return str
           },
         },
@@ -112,7 +80,7 @@ export default defineComponent({
         },
         series: [
           {
-            name: '标题',
+            // name: '标题',
             type: 'pie',
             center: ['50%', '50%'],
             radius: ['37%', '55%'],
@@ -125,19 +93,62 @@ export default defineComponent({
             labelLine: {
               show: false,
             },
-            data: echartData,
+            data: [
+              {
+                value: props.getTableData.score>=80?1:0,
+                legendname: '优秀',
+                name: '优秀',
+                itemStyle: { color: '#40ABFE' },
+              },
+              {
+                value: props.getTableData.score>=60?1:0,
+                legendname: '合格',
+                name: '合格',
+                itemStyle: { color: '#EEAA3F' },
+              },
+              {
+                value: props.getTableData.score<60?1:0,
+                legendname: '不合格',
+                name: '不合格',
+                itemStyle: { color: '#FF2222' },
+              },
+            ],
           },
         ],
       })
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+    }
+
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.getTableData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
+
+    onMounted(() => {
+      getData()
+      echarts2()
     })
 
     return {
       loading,
-      total,
-      num,
+      echarts2,
     }
   },
 })

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

@@ -117,7 +117,7 @@ export default defineComponent({
     }
 
     const writeValue = (val) => {
-      alert(1)
+    
       val
 
       getData()

src/views/powerQuality/unbalanceAnalysis/electricChart.vue

@@ -4,31 +4,43 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+import {  defineComponent, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
 
 export default defineComponent({
   name: 'ElectricChart',
-  setup() {
-    const store = useStore()
+  props: {
+    echartsData: Object,
+  },
+  setup(props) {
     let lineChartBanlance = ref(null)
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
+     const electricChart=ref({})
 
     // 读取数据 func
     const loading = ref(true)
     const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
+      var arrOld = props.echartsData
+      let dataTime = arrOld.map((item) => {
+        return item.dataTime
+      })
+      let la = arrOld.map((item) => {
+        return item.ia
+      })
+      let lb = arrOld.map((item) => {
+        return item.ib
+      })
+      let lc = arrOld.map((item) => {
+        return item.ic
+      })
+
+      electricChart.value.dataTime = dataTime
+      electricChart.value.la = la
+      electricChart.value.lb = lb
+      electricChart.value.lc = lc
+      loading.value = false
       loading.value = false
     }
-
-    onMounted(() => {
-      getData()
+    function echarts2(){
       let myChart = echarts.init(lineChartBanlance.value)
       // 绘制图表
       myChart.setOption({
@@ -67,39 +79,33 @@ export default defineComponent({
             },
           },
           boundaryGap: false,
-          data: [
-            '0:00',
-            '2:00',
-            '4:00',
-            '6:00',
-            '8:00',
-            '10:00',
-            '12:00',
-            '14:00',
-            '16:00',
-            '18:00',
-            '20:00',
-            '22:00',
-            '24:00',
-          ],
+          data: electricChart.value.dataTime,
         },
         yAxis: {
           name: 'A',
           nameTextStyle: {
-            color: '#707070',
-            fontSize: 14,
+            color: 'black',
+            fontSize: 10,
+          },
+          type: 'value',
+          axisTick: {
+            show: true, //去除刻度线
           },
           axisLabel: {
-            color: '#444',
-            fontSize: 14,
+            color: 'black', // 文本颜色
           },
-
           axisLine: {
-            symbolOffset: [0, 4],
-            lineStyle: { color: '#444' },
+            show: true, // 去除轴线
+            lineStyle: {
+              color: 'black',
+            },
           },
-          splitArea: {
-            show: false,
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#9d9d9d',
+            },
           },
         },
 
@@ -109,43 +115,61 @@ export default defineComponent({
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0,
-              5, 10, 2, 12, 0, 5,
-            ],
+            data:electricChart.value.la,
           },
           {
             name: 'B相电流',
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7,
-              8, 9, 7, 19, 7, 8, 9, 7, 19,
-            ],
+            data: electricChart.value.lb,
           },
           {
             name: 'C相电流',
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5,
-              3, 6, 5, 14, 5, 3, 6, 5, 14,
-            ],
+            data:electricChart.value.lc,
           },
         ],
       })
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+
+    }
+
+     const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.getTableData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
+
+    onMounted(() => {
+      getData()
+      echarts2()
+      
     })
 
     return {
       lineChartBanlance,
       loading,
-      total,
-      num,
+     
+      
     }
   },
 })

src/views/powerQuality/unbalanceAnalysis/electricChart2.vue

@@ -4,16 +4,20 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref,watch } from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
 
 export default defineComponent({
   name: 'ElectricChart2',
-  setup() {
+  props: {
+    echartsData: Object,
+  },
+  setup(props) {
     const store = useStore()
     let lineChartBanlance = ref(null)
+    const electricChart2 = ref({})
 
     // 总数
     const total = computed(() => store.state.Home.worksChartData.total)
@@ -22,14 +26,23 @@ export default defineComponent({
 
     // 读取数据 func
     const loading = ref(true)
+
+    
     const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
+      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
     }
-
-    onMounted(() => {
-      getData()
+    function echarts2() {
       let myChart = echarts.init(lineChartBanlance.value)
       // 绘制图表
       myChart.setOption({
@@ -63,38 +76,33 @@ export default defineComponent({
             },
           },
           boundaryGap: false,
-          data: [
-            '0:00',
-            '2:00',
-            '4:00',
-            '6:00',
-            '8:00',
-            '10:00',
-            '12:00',
-            '14:00',
-            '16:00',
-            '18:00',
-            '20:00',
-            '22:00',
-            '24:00',
-          ],
+          data: electricChart2.value.dataTime,
         },
         yAxis: {
           name: '%',
           nameTextStyle: {
-            color: '#707070',
-            fontSize: 14,
+            color: 'black',
+            fontSize: 10,
+          },
+          type: 'value',
+          axisTick: {
+            show: true, //去除刻度线
           },
           axisLabel: {
-            color: '#444',
-            fontSize: 14,
+            color: 'black', // 文本颜色
           },
           axisLine: {
-            symbolOffset: [0, 4],
-            lineStyle: { color: '#444' },
+            show: true, // 去除轴线
+            lineStyle: {
+              color: 'black',
+            },
           },
-          splitArea: {
-            show: false,
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#9d9d9d',
+            },
           },
         },
 
@@ -104,15 +112,12 @@ export default defineComponent({
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0,
-              5, 10, 2, 12, 0, 5,
-            ],
+            data: electricChart2.value.elBalun,
             markLine: {
               //最大值和最小值
               data: [
                 {
-                  yAxis: 10,
+                  yAxis: 30,
                   label: {
                     position: 'middle',
                     formatter: '严重三项不平衡',
@@ -123,7 +128,7 @@ export default defineComponent({
                   },
                 },
                 {
-                  yAxis: 8,
+                  yAxis: 14,
                   label: {
                     position: 'middle',
                     formatter: '不平衡度',
@@ -141,6 +146,29 @@ export default defineComponent({
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+    }
+
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.getTableData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+    onMounted(() => {
+      getData()
+      echarts2()
     })
 
     return {

src/views/powerQuality/unbalanceAnalysis/index.vue

@@ -7,46 +7,69 @@
           <div class="filter-item">
             设备:
             <el-select
-              v-model="region"
+              v-model="deviceCode"
               placeholder="请选择"
-              style="width: 200px"
+              style="width: 150px"
             >
-              <el-option label="设备一" value="1"></el-option>
-              <el-option label="设备二" value="2"></el-option>
+              <el-option
+                v-for="device in deviceList"
+                :key="device"
+                :label="device.deviceName"
+                :value="device.deviceCode"
+              ></el-option>
             </el-select>
           </div>
 
           <div class="filter-item">
             日期：
             <el-date-picker
-              v-model="value4"
-              type="dates"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-            </el-date-picker>
+              v-model="dateTime"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width: auto"
+            ></el-date-picker>
           </div>
 
-          <el-button type="primary" class="search-button">搜索</el-button>
+          <el-button
+            type="primary"
+            class="search-button"
+            @click="rtRealScore()"
+          >
+            搜索
+          </el-button>
         </div>
       </div>
     </div>
     <!-- 筛选end -->
-    <el-row :gutter="20" >
+    <el-row :gutter="20">
       <el-col :md="24" :lg="12">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">电压不平衡度</div>
-          <voltage-chart></voltage-chart>
+          <voltage-chart
+            :echartsData="echartsData"
+            v-if="echartsData[0]"
+          ></voltage-chart>
           <el-divider></el-divider>
-          <voltage-chart2></voltage-chart2>
+          <voltage-chart2
+            :echartsData="echartsData"
+            v-if="echartsData[0]"
+          ></voltage-chart2>
         </div>
       </el-col>
       <el-col :md="24" :lg="12">
         <div class="grid-content bg-purple">
-           <div class="blanceChartTit">电流不平衡度</div>
-          <electric-chart></electric-chart>
+          <div class="blanceChartTit">电流不平衡度</div>
+          <electric-chart
+            :echartsData="echartsData"
+            v-if="echartsData[0]"
+          ></electric-chart>
           <el-divider></el-divider>
-          <electric-chart2></electric-chart2>
+          <electric-chart2
+            :echartsData="echartsData"
+            v-if="echartsData[0]"
+          ></electric-chart2>
         </div>
       </el-col>
     </el-row>
@@ -54,35 +77,104 @@
 </template>
 
 <script>
-import voltageChart from "./voltageChart";
-import voltageChart2 from "./voltageChart2";
-import electricChart from "./electricChart";
-import electricChart2 from "./electricChart2";
+import { useStore } from 'vuex'
+import voltageChart from './voltageChart'
+import voltageChart2 from './voltageChart2'
+import electricChart from './electricChart'
+import electricChart2 from './electricChart2'
+import { defineComponent, onMounted, ref } from 'vue'
+import * as api from '@/api/powerQuality/unbalanceAnalysis.js'
+import { ElMessage } from 'element-plus'
+import { ElNotification } from 'element-plus'
 
-export default {
-  name: "VariableList",
+export default defineComponent({
+  name: 'VariableList',
   components: {
     voltageChart,
     voltageChart2,
     electricChart,
     electricChart2,
   },
+  setup() {
+    const store = useStore()
+    const value4 = ref('请选择')
+    const region = ref('')
+    // const deviceCode = ref('')
+    const deviceCode = ref('DA00021026')
+    const deviceList = ref([])
+    const echartsData = ref([])
+    const voltageChartData = ref({})
+
+    const dateTime = ref([new Date(2021, 10, 10, 10, 10), new Date()])
+
+    async function deviceSelect() {
+      await api
+        .deviceListOne({ siteId: store.state.siteId })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            console.log('requset.data')
+            console.log(requset.data)
+            deviceList.value = requset.data
+            // deviceCode.value = requset.data[0].deviceCode
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
 
-  data() {
+    function rtRealScore() {
+      if (!dateTime.value) {
+        ElNotification({
+          title: '提示',
+          message: '请选择开始和结束时间',
+          type: 'warning',
+        })
+        return
+      }
+      store.commit('TimeAll_function', dateTime.value)
+      const time = store.state.Time_Data
+      api
+        .rtRealScore({
+          deviceCode: deviceCode.value,
+          startTime: time[0],
+          endTime: time[1],
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            echartsData.value = requset.data
+
+            if(!echartsData.value[0]){
+               ElMessage.error('暂无数据') 
+               return
+            }
+            console.log('requset.data')
+            console.log(echartsData.value)
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    onMounted(() => {
+      deviceSelect()
+
+      rtRealScore()
+    })
     return {
-      value4: "请选择",
-      number: 1,
-      measurType: 1,
-      select: 1,
-      currentPage4: 4,
-      showDialog: false,
-      tabPosition: "one",
-      input: "",
-      region: "",
-    };
+      store,
+      rtRealScore,
+      value4,
+      region,
+      deviceSelect,
+      deviceCode,
+      deviceList,
+      echartsData,
+      voltageChartData,
+
+      dateTime,
+    }
   },
-  methods: {},
-};
+})
 </script>
 
 <style lang="scss" scoped>

src/views/powerQuality/unbalanceAnalysis/voltageChart.vue

@@ -4,31 +4,43 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
 
 export default defineComponent({
   name: 'VoltageChart',
-  setup() {
-    const store = useStore()
+  props: {
+    echartsData: Object,
+  },
+  setup(props) {
     let lineChartBanlance = ref(null)
 
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
     // 读取数据 func
     const loading = ref(true)
+    const voltageChart=ref({})
+
     const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
+      var arrOld = props.echartsData
+      let dataTime = arrOld.map((item) => {
+        return item.dataTime
+      })
+      let ua = arrOld.map((item) => {
+        return item.ua
+      })
+      let ub = arrOld.map((item) => {
+        return item.ub
+      })
+      let uc = arrOld.map((item) => {
+        return item.uc
+      })
+
+      voltageChart.value.dataTime = dataTime
+      voltageChart.value.ua = ua
+      voltageChart.value.ub = ub
+      voltageChart.value.uc = uc
       loading.value = false
     }
-
-    onMounted(() => {
-      getData()
+    function echarts2() {
       let myChart = echarts.init(lineChartBanlance.value)
       // 绘制图表
       myChart.setOption({
@@ -39,9 +51,6 @@ export default defineComponent({
           bottom: '0',
           data: ['A相电压', 'B相电压', 'C相电压'],
         },
-        // toolbox: {
-        //   show: false,
-        // },
         tooltip: {
           // show: true
           trigger: 'axis',
@@ -67,39 +76,33 @@ export default defineComponent({
             },
           },
           boundaryGap: false,
-          data: [
-            '0:00',
-            '2:00',
-            '4:00',
-            '6:00',
-            '8:00',
-            '10:00',
-            '12:00',
-            '14:00',
-            '16:00',
-            '18:00',
-            '20:00',
-            '22:00',
-            '24:00',
-          ],
+          data: voltageChart.value.dataTime,
         },
         yAxis: {
-          name: 'V',
+          name: 'kV',
           nameTextStyle: {
-            color: '#707070',
-            fontSize: 14,
+            color: 'black',
+            fontSize: 10,
+          },
+          type: 'value',
+          axisTick: {
+            show: true, //去除刻度线
           },
           axisLabel: {
-            color: '#444',
-            fontSize: 14,
+            color: 'black', // 文本颜色
           },
-
           axisLine: {
-            symbolOffset: [0, 4],
-            lineStyle: { color: '#444' },
+            show: true, // 去除轴线
+            lineStyle: {
+              color: 'black',
+            },
           },
-          splitArea: {
-            show: false,
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#9d9d9d',
+            },
           },
         },
 
@@ -109,43 +112,58 @@ export default defineComponent({
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0,
-              5, 10, 2, 12, 0, 5,
-            ],
+            data: voltageChart.value.ua
           },
           {
             name: 'B相电压',
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7, 8, 9, 7, 19, 7,
-              8, 9, 7, 19, 7, 8, 9, 7, 19,
-            ],
+            data: voltageChart.value.ub,
           },
           {
             name: 'C相电压',
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5, 3, 6, 5, 14, 5,
-              3, 6, 5, 14, 5, 3, 6, 5, 14,
-            ],
+            data: voltageChart.value.uc,
           },
         ],
       })
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+    }
+
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.getTableData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+
+    onMounted(() => {
+      getData()
+      echarts2()
     })
 
     return {
       lineChartBanlance,
       loading,
-      total,
-      num,
+      echarts2,
+      voltageChart
     }
   },
 })

src/views/powerQuality/unbalanceAnalysis/voltageChart2.vue

@@ -4,16 +4,20 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref,watch } from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
 
 export default defineComponent({
   name: 'VoltageChart2',
-  setup() {
+  props: {
+    echartsData: Object,
+  },
+  setup(props) {
     const store = useStore()
     let lineChartBanlance = ref(null)
+    const voltageChart2 = ref({})
 
     // 总数
     const total = computed(() => store.state.Home.worksChartData.total)
@@ -22,14 +26,23 @@ export default defineComponent({
 
     // 读取数据 func
     const loading = ref(true)
+
+    
     const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
+      var arrOld = props.echartsData
+      
+      let dataTime = arrOld.map((item) => {
+        return item.dataTime.substring(0, 10);
+      })
+      let vtBalun = arrOld.map((item) => {
+        return item.vtBalun*100
+      })
+      voltageChart2.value.dataTime = dataTime
+      voltageChart2.value.vtBalun = vtBalun
+    
       loading.value = false
     }
-
-    onMounted(() => {
-      getData()
+    function echarts2() {
       let myChart = echarts.init(lineChartBanlance.value)
       // 绘制图表
       myChart.setOption({
@@ -63,39 +76,33 @@ export default defineComponent({
             },
           },
           boundaryGap: false,
-          data: [
-            '0:00',
-            '2:00',
-            '4:00',
-            '6:00',
-            '8:00',
-            '10:00',
-            '12:00',
-            '14:00',
-            '16:00',
-            '18:00',
-            '20:00',
-            '22:00',
-            '24:00',
-          ],
+          data: voltageChart2.value.dataTime,
         },
         yAxis: {
           name: '%',
           nameTextStyle: {
-            color: '#707070',
-            fontSize: 14,
+            color: 'black',
+            fontSize: 10,
+          },
+          type: 'value',
+          axisTick: {
+            show: true, //去除刻度线
           },
           axisLabel: {
-            color: '#444',
-            fontSize: 14,
+            color: 'black', // 文本颜色
           },
-
           axisLine: {
-            symbolOffset: [0, 4],
-            lineStyle: { color: '#444' },
+            show: true, // 去除轴线
+            lineStyle: {
+              color: 'black',
+            },
           },
-          splitArea: {
-            show: false,
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#9d9d9d',
+            },
           },
         },
 
@@ -105,15 +112,12 @@ export default defineComponent({
             type: 'line',
             symbolSize: 7,
             smooth: false,
-            data: [
-              10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0,
-              5, 10, 2, 12, 0, 5,
-            ],
+            data: voltageChart2.value.vtBalun,
             markLine: {
               //最大值和最小值
               data: [
                 {
-                  yAxis: 10,
+                  yAxis: 30,
                   label: {
                     position: 'middle',
                     formatter: '严重三项不平衡',
@@ -124,7 +128,7 @@ export default defineComponent({
                   },
                 },
                 {
-                  yAxis: 8,
+                  yAxis: 14,
                   label: {
                     position: 'middle',
                     formatter: '不平衡度',
@@ -142,6 +146,29 @@ export default defineComponent({
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+    }
+
+    const writeValue = (val) => {
+      val
+      getData()
+      echarts2()
+    }
+
+    //监听变化
+    watch(
+      () => props.getTableData,
+      (newVal, oldVal, clear) => {
+        // 执行异步任务，并得到关闭异步任务的 id
+        // console.log(newVal)
+        let id = writeValue(newVal, oldVal)
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(id))
+      },
+      { lazy: true }
+    )
+    onMounted(() => {
+      getData()
+      echarts2()
     })
 
     return {