电能质量对接

.history/src/views/powerQuality/realTimeMonitoring/realScore_20211018102819.vue

@@ -1,221 +0,0 @@
-<template>
-  <div>
-    <!-- 筛选start -->
-    <div class="filter-container">
-      <div class="left">
-        <div>
-          数据刷新时间：2021-10-11 15:00:00
-
-          <el-button type="primary" class="search-button" style="margin-left:30px" >刷新</el-button>
-        </div>
-      </div>
-      <div class="right descIcon">
-        <img src="@/assets/images/descIcon.png" alt=""  >
-        指标说明
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <el-row :gutter="20" class="mt-20">
-
-      <el-col :span="6">
-
-        <!-- 评分 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>评分</span>
-          </div>
-            <radar-chart></radar-chart>
-            <div class="totalScore">总评分：40  
-              <el-button type="danger">不合格</el-button>
-            </div>
-        </div>
-          <!-- 评分 end -->
-
-        <br />
-
-        <!-- 回路统计 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>回路统计</span>
-          </div>
-          <div>
-            <pie-chart></pie-chart>
-          </div>
-        </div>
-        <!-- 回路统计 end -->
-
-      </el-col>
-
-
-
-      <el-col :span="18">
-        <!-- 表格start -->
-        <el-table
-          :data="tableData"
-          style="width: 100%"
-          :header-cell-style="headCellStyle"
-        >
-          <el-table-column prop="huilv" label="回路" width="">
-          </el-table-column>
-          <el-table-column prop="gongLv" label="功率因数" width="">
-          </el-table-column>
-
-          <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.dianLiu }}
-                
-              </template>
-            </el-table-column>
-            <el-table-column label="电压">
-              <template #default="scope">
-                 <i class="smallSquare"></i>
-                {{ scope.row.dianYa }}
-              </template>
-            </el-table-column>
-          </el-table-column>
-
-          <el-table-column label="电压">
-            <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-                 <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template></el-table-column
-            >
-          </el-table-column>
-          <el-table-column label="电流负载率">
-             <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-               <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template></el-table-column
-            >
-          </el-table-column>
-          <el-table-column label="电流谐波畸变率">
-            <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-               <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare green"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template></el-table-column
-            >
-          </el-table-column>]
-
-          <el-table-column  label="评分" width="">
-            <template #default="scope">
-                <el-button size="mini" type="warning">{{ scope.row.score }}</el-button>
-              </template>
-          </el-table-column>
-        </el-table>
-        <!-- 表格end -->
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import radarChart from "./realScoreComponent/radarChart.vue";
-import pieChart from "./realScoreComponent/pieChart.vue";
-// import scoreReport from "./scoreReport";
-export default {
-  name: "RealScore",
-  components: {
-    radarChart,
-    pieChart,
-  },
-
-  data() {
-    return {
-      num: 0,
-      value4: "",
-      tableData: [
-        {
-          huilv: "/HZ183",
-          gongLv: "2%",
-          dianLiu: "100%",
-          dianYa: "0.67%",
-          name: "5%",
-          city: "7%",
-          score:'60'
-        },
-      ],
-    };
-  },
-  methods: {
-    // 表头行的 style 的回调方法
-    headCellStyle({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
-        return `text-align:center`;
-      } else {
-        return "";
-      }
-    },
-  },
-};
-</script>
- 
-<style scoped lang="scss">
-.el-row {
-  margin-bottom: 20px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-.el-col {
-  border-radius: 4px;
-}
-.bg-purple-dark {
-  border: 1px solid #99a9bf;
-}
-.bg-purple {
-  border: 1px solid #d3dce6;
-}
-.bg-purple-light {
-  border: 1px solid #e5e9f2;
-}
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
-}
-.row-bg {
-  padding: 10px 0;
-  border: 1px solid #f9fafc;
-}
-</style>

.history/src/views/powerQuality/realTimeMonitoring/realScore_20211018111826.vue

@@ -1,228 +0,0 @@
-<template>
-  <div>
-    <!-- 筛选start -->
-    <div class="filter-container">
-      <div class="left">
-        <div>
-          数据刷新时间：2021-10-11 15:00:00
-
-          <el-button
-            type="primary"
-            class="search-button"
-            style="margin-left: 30px"
-          >
-            刷新
-          </el-button>
-        </div>
-      </div>
-      <div class="right descIcon">
-        <img src="@/assets/images/descIcon.png" alt="" />
-        指标说明
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <el-row :gutter="20" class="mt-20">
-      <el-col :span="6">
-        <!-- 评分 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>评分</span>
-          </div>
-          <radar-chart></radar-chart>
-          <div class="totalScore">
-            总评分：40
-            <el-button type="danger">不合格</el-button>
-          </div>
-        </div>
-        <!-- 评分 end -->
-
-        <br />
-
-        <!-- 回路统计 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>回路统计</span>
-          </div>
-          <div>
-            <pie-chart></pie-chart>
-          </div>
-        </div>
-        <!-- 回路统计 end -->
-      </el-col>
-
-      <el-col :span="18">
-        <!-- 表格start -->
-        <el-table
-          :data="tableData"
-          style="width: 100%"
-          :header-cell-style="headCellStyle"
-        >
-          <el-table-column prop="huilv" label="回路" width=""></el-table-column>
-          <el-table-column
-            prop="gongLv"
-            label="功率因数"
-            width=""
-          ></el-table-column>
-
-          <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.dianLiu }}
-              </template>
-            </el-table-column>
-            <el-table-column label="电压">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.dianYa }}
-              </template>
-            </el-table-column>
-          </el-table-column>
-
-          <el-table-column label="电压">
-            <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="电流负载率">
-            <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="电流谐波畸变率">
-            <el-table-column prop="name" label="A相" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相">
-              <template #default="scope">
-                <i class="smallSquare green"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
-              </template>
-            </el-table-column>
-          </el-table-column>
-          ]
-
-          <el-table-column label="评分" width="">
-            <template #default="scope">
-              <el-button size="mini" type="warning">
-                {{ scope.row.score }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 表格end -->
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import radarChart from './realScoreComponent/radarChart.vue'
-import pieChart from './realScoreComponent/pieChart.vue'
-// import scoreReport from "./scoreReport";
-export default {
-  name: 'RealScore',
-  components: {
-    radarChart,
-    pieChart,
-  },
-
-  data() {
-    return {
-      num: 0,
-      value4: '',
-      tableData: [
-        {
-          huilv: '/HZ183',
-          gongLv: '2%',
-          dianLiu: '100%',
-          dianYa: '0.67%',
-          name: '5%',
-          city: '7%',
-          score: '60',
-        },
-      ],
-    }
-  },
-  methods: {
-    // 表头行的 style 的回调方法
-    headCellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column
-      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
-        return `text-align:center`
-      } else {
-        return ''
-      }
-    },
-  },
-}
-</script>
- 
-<style scoped lang="scss">
-.el-row {
-  margin-bottom: 20px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-.el-col {
-  border-radius: 4px;
-}
-.bg-purple-dark {
-  border: 1px solid #99a9bf;
-}
-.bg-purple {
-  border: 1px solid #d3dce6;
-}
-.bg-purple-light {
-  border: 1px solid #e5e9f2;
-}
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
-}
-.row-bg {
-  padding: 10px 0;
-  border: 1px solid #f9fafc;
-}
-</style>

src/api/powerQuality/realScore.js

@@ -1,13 +1,6 @@
 import request from '@/utils/request'
 
-//历史电流电压评分
-export function rtRealScore(params) {
-    return request({
-        url: '/htAnalogData/rtRealScore',
-        method: 'GET',
-        params,
-    })
-}
+
 
 //通信设备列表查询-无分页
 export function deviceListOne(params) {
@@ -18,11 +11,20 @@ export function deviceListOne(params) {
     })
 }
 
-// 实时评分表格筛选
+// 实时评分主页面  （实时消费组模拟量-----电能质量(实时评分）
 export function realScore(params) {
     return request({
         url: '/rtAnalogData/realScore',
         method: 'GET',
         params,
     })
+}
+
+// 实时评分弹框详情  （历史消费组模拟量----历史电流电压评分）
+export function rtRealScore(params) {
+    return request({
+        url: '/htAnalogData/rtRealScore',
+        method: 'GET',
+        params,
+    })
 }

src/api/publicList.js

@@ -15,3 +15,6 @@ export function dataManagementDeviceList(params) {
         params,
     })
 }
+
+
+// 设备下拉

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -3,31 +3,30 @@
     <!-- 筛选start -->
     <div class="filter-container">
       <div class="left">
-        
         <div>
-
           <div class="filter-item" style="margin-right: 20px">
-          选择设备:
-          <el-select
-            v-model="deviceCode"
-            placeholder="请选择"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="device in deviceList"
-              :key="device"
-              :label="device.deviceName"
-              :value="device.deviceCode"
-            ></el-option>
-            <el-option label="设备1" value="DA00021026"></el-option>
-          </el-select>
-        </div>
-          数据刷新时间：2021-10-11 15:00:00
+            选择设备:
+            <el-select
+              v-model="deviceCode"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <el-option
+                v-for="device in deviceList"
+                :key="device"
+                :label="device.deviceName"
+                :value="device.deviceCode"
+              ></el-option>
+              <!-- <el-option label="设备1" value="DA00021026"></el-option> -->
+            </el-select>
+          </div>
+          数据刷新时间：{{nowTime}}
 
           <el-button
             type="primary"
             class="search-button"
             style="margin-left: 30px"
+            @click="realScore()"
           >
             刷新
           </el-button>
@@ -47,10 +46,10 @@
           <div class="blanceChartTit">
             <span>评分</span>
           </div>
-          <radar-chart></radar-chart>
+          <radar-chart :getTableData="getData[0]"></radar-chart>
           <div class="totalScore">
-            总评分：40
-            <el-button type="danger">不合格</el-button>
+            总评分：{{getData[0].score}}
+            <el-button type="danger">{{getData[0].score>80?'优秀':getData[0].score>=60?'合格':'不合格'}}</el-button>
           </div>
         </div>
         <!-- 评分 end -->
@@ -72,95 +71,86 @@
       <el-col :md="24" :lg="17">
         <!-- 表格start -->
         <el-table
-          :data="tableData"
+          :data="getData"
           style="width: 100%"
           :header-cell-style="headCellStyle"
         >
-          <el-table-column prop="huilv" label="回路" width=""></el-table-column>
-          <el-table-column
-            prop="gongLv"
-            label="功率因数"
-            width=""
-          ></el-table-column>
-
-          <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.dianLiu }}
-              </template>
-            </el-table-column>
-            <el-table-column label="电压">
-              <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.dianYa }}
-              </template>
-            </el-table-column>
+          <el-table-column label="回路" width="" align="center">
+            <template #default="scope">
+              {{ scope.row.loop ? scope.row.loop : '-' }}
+            </template>
           </el-table-column>
 
-          <el-table-column label="电压">
-            <el-table-column prop="name" label="A相" width="">
+
+           <el-table-column label="功率因数" width="" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
+                <div  @click="oneClick(scope)">
+                <i class="smallSquare" :style="{'background': (scope.row.cosQ ? 'green':'red')}"></i>
+                {{ scope.row.cos }}
+                 </div>
               </template>
+             
             </el-table-column>
-            <el-table-column prop="city" label="B相">
+
+          <el-table-column label="不平衡度" >
+            <el-table-column label="电流" width="" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
+                <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 prop="city" label="C相">
+            <el-table-column label="电压" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
+                 <i class="smallSquare" :style="{'background': (scope.row.vtBalunQ ? 'green':'red')}"></i>
+                {{ scope.row.vtBalun }}
               </template>
             </el-table-column>
           </el-table-column>
-          <el-table-column label="电流负载率">
-            <el-table-column prop="name" label="A相" width="">
+
+          <el-table-column label="电压">
+            <el-table-column prop="name" label="A相" width="" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
+                 <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相">
+            <el-table-column prop="city" label="B相" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
+                <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相">
+            <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
+                <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 prop="name" label="A相" width="">
+          <el-table-column label="电流负载率" >
+            <el-table-column prop="name" label="A相" width="" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.name }}
+                <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相">
+            <el-table-column prop="city" label="B相"  align="center">
               <template #default="scope">
-                <i class="smallSquare green"></i>
-                {{ scope.row.city }}
+                 <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相">
+            <el-table-column prop="city" label="C相" align="center">
               <template #default="scope">
-                <i class="smallSquare"></i>
-                {{ scope.row.city }}
+               <i class="smallSquare" :style="{'background': (scope.row.icLoadQ? 'green':'red')}"></i>
+                {{ scope.row.icLoad }}
               </template>
             </el-table-column>
           </el-table-column>
-          ]
-
-          <el-table-column label="评分" width="">
+          <el-table-column label="评分" width="" align="center">
             <template #default="scope">
               <el-button size="mini" type="warning">
                 {{ scope.row.score }}
@@ -181,6 +171,7 @@ import { useStore } from 'vuex'
 import { defineComponent, onMounted, ref } from 'vue'
 import * as api from '@/api/powerQuality/realScore.js'
 import { ElMessage } from 'element-plus'
+import { parseTime } from '@/utils'
 
 export default defineComponent({
   name: 'RealScore',
@@ -190,21 +181,22 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const num = ref(0)
+    const num = ref(1)
+    const nowTime=ref(parseTime(new Date()))
     const value4 = ref('')
-    const tableData = ref([
+    const getData = ref([
       {
-        huilv: '/HZ183',
-        gongLv: '2%',
-        dianLiu: '100%',
-        dianYa: '0.67%',
+        loop: '/HZ183',
+        cos: '2%',
+        elBalun: '100%',
+        vtBalun: '0.67%',
         name: '5%',
         city: '7%',
         score: '60',
       },
     ])
     const deviceList = ref([])
-    const deviceCode = ref('DA00021026')
+    const deviceCode = ref('DA00012784')
 
     function headCellStyle({ row, column, rowIndex, columnIndex }) {
       row, column
@@ -218,7 +210,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,27 +220,38 @@ export default defineComponent({
     function realScore() {
       api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
         if (requset.status === 'SUCCESS') {
-           console.log('requset')
+          console.log('requset.data')
           console.log(requset.data)
-          // tableData.value = requset.data
+          getData.value[0] = requset.data
+          console.log(getData.value)
         } else {
           ElMessage.error(requset.msg)
         }
       })
+      nowTime.value=parseTime(new Date())
+
+    }
+    function oneClick(params){
+       console.log(params)
+      console.log(params.column.label)
     }
 
     onMounted(() => {
+      console.log(parseTime(new Date()))
       deviceSelect()
       realScore()
     })
     return {
       store,
       num,
+      oneClick,
       value4,
-      tableData,
+      getData,
       headCellStyle,
       deviceSelect,
       deviceList,
+      realScore,
+      nowTime,
       deviceCode,
     }
   },

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

@@ -4,31 +4,29 @@
   </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: 'RadarChart',
-  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')
+      console.log(props.getTableData.cosQ)
+  
     }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('radarChart'))
+    function echarts2(){
+       let myChart = echarts.init(document.getElementById('radarChart'))
       // 绘制图表
       myChart.setOption({
         backgroundColor: '#FFF',
@@ -67,29 +65,25 @@ export default defineComponent({
             },
           },
           indicator: [
-            {
-              name: '谐波畸变率',
-              max: 100,
-            },
             {
               name: '电压平衡度',
-              max: 100,
+              max: 20,
             },
             {
-              name: '电压合格率',
-              max: 100,
+              name: '电流平衡度',
+              max: 20,
             },
             {
               name: '功率因数',
-              max: 100,
+              max: 20,
             },
             {
-              name: '电流平衡度',
-              max: 100,
+              name: '电压合格率',
+              max: 20,
             },
             {
               name: '负载率',
-              max: 100,
+              max: 20,
             },
           ],
         },
@@ -110,21 +104,51 @@ export default defineComponent({
                 itemStyle: {
                   color: '#5eb6db',
                 },
-                value: [20, 33, 80, 50, 30, 40, 100],
+                value: [props.getTableData.vtBalunQ?20:0,props.getTableData.elBalunQ?20:0, props.getTableData.cosQ?20:0, props.getTableData.uQ?20:0, props.getTableData.iLoadQ?20:0],
               },
             ],
           },
         ],
       })
-     window.addEventListener('resize', () => {
+      window.addEventListener('resize', () => {
         myChart.resize()
       })
+
+    }
+
+    const writeValue = (val) => {
+      alert(1)
+      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,
+   
+      getData,
+      echarts2
     }
   },
 })