电能质量图表及数据对接loading修复

src/views/powerQuality/asseReport/loopReport.vue

@@ -72,7 +72,7 @@
     </div>
     <!-- 筛选end -->
 
-    <el-row :gutter="20">
+    <el-row :gutter="20" >
       <el-col :md="24" :lg="14">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
@@ -83,8 +83,8 @@
             </span>
           </div>
 
-          <el-row :gutter="20" style="padding: 20px">
-            <el-col :md="24" :lg="8">
+          <el-row :gutter="20" style="padding: 20px" >
+            <el-col :md="24" :lg="8" v-loading="loading" >
               <div
                 class="grid-content bg-purple assCard"
                 style="text-align: center"
@@ -167,7 +167,7 @@
                 </ul>
               </div>
             </el-col>
-            <el-col :md="24" :lg="8">
+            <el-col :md="24" :lg="8" v-loading="loading">
               <div
                 class="grid-content bg-purple assCard"
                 style="text-align: center"
@@ -251,7 +251,7 @@
                 </ul>
               </div>
             </el-col>
-            <el-col :md="24" :lg="8">
+            <el-col :md="24" :lg="8" v-loading="loading">
               <div
                 class="grid-content bg-purple assCard"
                 style="text-align: center"
@@ -338,7 +338,7 @@
           </el-row>
         </div>
       </el-col>
-      <el-col :md="12" :lg="5">
+      <el-col :md="12" :lg="5" v-loading="loading">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
             <span>频率质量</span>
@@ -434,7 +434,7 @@
           </el-row>
         </div>
       </el-col>
-      <el-col :md="12" :lg="5">
+      <el-col :md="12" :lg="5" v-loading="loading">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">功率因数分析</div>
           <el-row :gutter="20" style="padding: 20px">
@@ -489,7 +489,7 @@
     </el-row>
 
     <el-row :gutter="20" class="mt-20">
-      <el-col :md="24" :lg="14">
+      <el-col :md="24" :lg="14" v-loading="loading">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
             <span>谐波畸变率</span>
@@ -614,8 +614,8 @@
                 style="text-align: center"
               >
                 <div class="subTits">电流不平衡度</div>
-                <el-row :gutter="20" style="padding: 0 20px">
-                  <el-col :span="12">
+                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
+                  <el-col :span="12" >
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum">
                         {{
@@ -714,7 +714,7 @@
                 style="text-align: center"
               >
                 <div class="subTits">电压不平衡度</div>
-                <el-row :gutter="20" style="padding: 0 20px">
+                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum">
@@ -839,6 +839,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+    const loading=ref(false)
     const getData = ref({})
     const showDialog2 = ref(false)
 
@@ -865,6 +866,7 @@ export default defineComponent({
 
     //单回路主页面请求
     function SingleLoopReportData() {
+        loading.value=true
       store.commit('getNowFormatDate', dateTime.value)
       //  time:store.state.dateList,
       // time:'2021-11-01'
@@ -875,6 +877,9 @@ export default defineComponent({
           type: 1,
         })
         .then((requset) => {
+           setTimeout(()=>{
+          loading.value=false
+        },200)
           if (requset.status === 'SUCCESS') {
             // console.log('requset.data.uaStatus')
             // console.log(requset.data.uaStatus)
@@ -930,6 +935,7 @@ export default defineComponent({
       showDialog2,
       descripDialog,
       dialogTitle,
+      loading
     }
   },
 })

src/views/powerQuality/asseReport/scoreReport.vue

@@ -63,7 +63,7 @@
             <span>评分</span>
           </div>
 
-          <radar-chart :getTableData="getData[0]" v-if="getData[0]"></radar-chart>
+          <radar-chart :getTableData="getData[0]" v-if="getData[0]" v-loading="loading"></radar-chart>
           <div class="totalScore">
             总评分：{{ getData[0].score?getData[0].score:0 }}
             <el-button
@@ -91,7 +91,7 @@
             <span>回路统计</span>
           </div>
           <div>
-            <pie-chart :getTableData="getData[0]"></pie-chart>
+            <pie-chart :getTableData="getData[0]" v-loading="loading"></pie-chart>
           </div>
         </div>
       </el-col>
@@ -101,6 +101,7 @@
           :data="getData"
           style="width: 100%"
           :header-cell-style="headCellStyle"
+          v-loading="loading"
         >
           <el-table-column label="回路" width="" align="center">
             <template #default="scope">
@@ -316,6 +317,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+     const loading=ref(false)
     const listTabPosition = ref('dayValue')
     const dateType = ref('date')
     const dateTime = ref(new Date())
@@ -351,6 +353,7 @@ export default defineComponent({
     }
     //主页面数据请求
     function evaluationReport() {
+       loading.value=true
       let list = {}
 
       if (listTabPosition.value == 'dayValue') {
@@ -375,7 +378,11 @@ export default defineComponent({
       }
 
       api.evaluationReport(list).then((requset) => {
+        setTimeout(()=>{
+          loading.value=false
+        },200)
         if (requset.status === 'SUCCESS') {
+          
           if(requset.data[0]){
             getData.value[0] = requset.data[0]
             deviceCode.value= requset.data[0].deviceCode
@@ -631,7 +638,8 @@ export default defineComponent({
       echartsAllData,
       closeDialog,
       descripDialog,
-      deviceCode
+      deviceCode,
+      loading
     }
   },
 })

src/views/powerQuality/harmonicReport/curveCom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard">
     <div style="text-align: center; font-weight: bold">
       {{ curveComList.name }}
     </div>
@@ -27,9 +27,7 @@ export default defineComponent({
     const num = computed(() => store.state.Home.worksChartData.num)
 
     // 读取数据 func
-    const loading = ref(true)
     const getData = async () => {
-      loading.value = false
     }
 
     function ecahrts() {
@@ -134,8 +132,6 @@ export default defineComponent({
     // 异步任务 用于给tree传值
     const writeValue = (val) => {
       val
-      //   console.log(val)
-      loading.value = true
       
       ecahrts()
       setTimeout(()=>{
@@ -159,7 +155,6 @@ export default defineComponent({
 
     return {
       worksChartRef,
-      loading,
       total,
       num,
     }

src/views/powerQuality/harmonicReport/index.vue

@@ -103,7 +103,7 @@
     </el-button>
     <div v-if="num2 == 0">
       <div v-for="curve in curveComList" :key="curve">
-        <curve-com :curveComList="curve"></curve-com>
+        <curve-com :curveComList="curve" v-loading="loading"></curve-com>
       </div>
 
       <!-- <curve-comA></curve-comA>
@@ -138,6 +138,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const loading=ref(false)
     const dateType = ref('date')
     const listTabPosition = ref('dayValue')
     // const deviceCode = ref('')
@@ -189,6 +190,7 @@ export default defineComponent({
     }
 
     function listSelect() {
+       loading.value=true
       let list = {}
 
       if (listTabPosition.value == 'dayValue') {
@@ -215,7 +217,11 @@ export default defineComponent({
 
       }else{
         api.rtRealScore(list).then((requset) => {
+         setTimeout(()=>{
+          loading.value=false
+        },200)
         if (requset.status === 'SUCCESS') {
+          
           tableList.value = requset.data
       
           if (tableList.value.length==0) {
@@ -276,6 +282,7 @@ export default defineComponent({
       tabPosition: 'one',
       input: '',
       region: '',
+      loading
     }
   },
 })

src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

@@ -66,7 +66,7 @@
           >
             <el-col :span="12" class="loopUnbanlanceCard">
               <div class="grid-content" style="text-align: center">
-                <loop-radarChart :getData="getData"></loop-radarChart>
+                <loop-radarChart :getData="getData" v-loading="loading"></loop-radarChart>
               </div>
             </el-col>
             <el-col :span="12" class="loopUnbanlanceCard">
@@ -121,7 +121,7 @@
           >
             <el-col :span="12" class="loopUnbanlanceCard">
               <div class="grid-content" style="text-align: center">
-                <loop-radarChart2 :getData="getData"></loop-radarChart2>
+                <loop-radarChart2 :getData="getData" v-loading="loading"></loop-radarChart2>
               </div>
             </el-col>
             <el-col :span="12" class="loopUnbanlanceCard">
@@ -175,7 +175,7 @@
 
       <!-- 谐波 -->
       <el-col :md="24" :lg="16">
-        <harmonic-panel></harmonic-panel>
+        <harmonic-panel v-loading="loading"></harmonic-panel>
       </el-col>
       <!-- 谐波 end -->
     </el-row>
@@ -183,19 +183,19 @@
     <el-row :gutter="20" class="mt-20">
       <!-- 电压start -->
       <el-col :md="24" :lg="8" class="mb-20">
-        <voltage-panel :getData="getData"></voltage-panel>
+        <voltage-panel :getData="getData" v-loading="loading"></voltage-panel>
       </el-col>
       <!-- 电压end -->
 
       <!-- 频率 start-->
       <el-col :md="24" :lg="8" class="mb-20">
-        <frequency-panel :getData="getData"></frequency-panel>
+        <frequency-panel :getData="getData" v-loading="loading"></frequency-panel>
       </el-col>
       <!-- 频率 end -->
 
       <!-- 有功功率 -->
       <el-col :md="24" :lg="8">
-        <power-panel :getData="getData"></power-panel>
+        <power-panel :getData="getData" v-loading="loading"></power-panel>
       </el-col>
       <!-- 有功功率 end -->
     </el-row>
@@ -242,6 +242,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+     const loading=ref(false)
     const getData = ref({})
     const deviceList = ref([])
     const deviceCode = ref('')
@@ -267,7 +268,11 @@ export default defineComponent({
 
     //数据请求
     function realScoreOne() {
+       loading.value=true
       api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
+        setTimeout(()=>{
+          loading.value=false
+        },200)
         if (requset.status === 'SUCCESS') {
           getData.value = requset.data
         } else {
@@ -313,6 +318,7 @@ export default defineComponent({
       dialogTitle,
       closeDialog,
       siteId,
+      loading
     }
   },
 })

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -64,7 +64,7 @@
           <div class="blanceChartTit">
             <span>评分</span>
           </div>
-          <radar-chart :getTableData="getData[0]"></radar-chart>
+          <radar-chart :getTableData="getData[0]" v-loading="loading"></radar-chart>
           <div class="totalScore">
             总评分：{{ getData[0].score }}
             <el-button :type=" getData[0].score > 80
@@ -92,7 +92,7 @@
             <span>回路统计</span>
           </div>
           <div>
-            <pie-chart :getTableData="getData[0]"></pie-chart>
+            <pie-chart :getTableData="getData[0]" v-loading="loading"></pie-chart>
           </div>
         </div>
         <!-- 回路统计 end -->
@@ -105,6 +105,7 @@
           style="width: 100%"
           :header-cell-style="headCellStyle"
            :cell-style="cellStyle"
+           v-loading="loading"
         >
           <el-table-column label="回路" width="" align="center">
             <template #default="scope">
@@ -287,6 +288,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+    const loading=ref(false)
     const num = ref(1)
     const nowTime = ref(parseTime(new Date()))
     const value4 = ref('')
@@ -349,7 +351,12 @@ export default defineComponent({
 
     //主页面数据请求
     function realScore() {
+       loading.value=true
       api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
+         setTimeout(()=>{
+          loading.value=false
+        },200)
+        
         if (requset.status === 'SUCCESS') {
           getData.value[0] = requset.data
         } else {
@@ -529,7 +536,7 @@ export default defineComponent({
         if (newVal == 'first') {
          setTimeout(function(){
         realScore()
-      },1000)
+      },400)
         }
       }
     )
@@ -538,7 +545,7 @@ export default defineComponent({
       deviceSelect()
       setTimeout(function(){
         realScore()
-      },1000)
+      },500)
       
     })
     return {
@@ -562,6 +569,7 @@ export default defineComponent({
       echartsTitle,
       rtRealScore,
       linkDevice,
+      loading,
 
       descripDialog
     }

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

@@ -1,10 +1,10 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard">
     <div class="height300" id="pieChart" ref="pieChart" />
   </div>
 </template>
 <script>
-import { defineComponent, onMounted, ref ,watch} from 'vue'
+import { defineComponent, onMounted,watch} from 'vue'
 // import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 
@@ -21,9 +21,7 @@ export default defineComponent({
   },
   setup(props) {
     // 读取数据 func
-    const loading = ref(true)
     const getData = async () => {
-      loading.value = false
     }
     function echarts2() {
       let myChart = echarts.init(document.getElementById('pieChart'))
@@ -145,7 +143,6 @@ export default defineComponent({
     })
 
     return {
-      loading,
       echarts2,
     }
   },

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

@@ -1,10 +1,10 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard">
     <div class="height260" id="radarChart" ref="radarChart" />
   </div>
 </template>
 <script>
-import {  defineComponent, onMounted, ref,watch } from 'vue'
+import {  defineComponent, onMounted, watch } from 'vue'
 import * as echarts from 'echarts'
 
 export default defineComponent({
@@ -15,12 +15,9 @@ export default defineComponent({
   setup(props) {
 
     // 读取数据 func
-    const loading = ref(true)
     const getData = async () => {
 
-      // loading.value = true;
       // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
     }
     function echarts2(){
        let myChart = echarts.init(document.getElementById('radarChart'))
@@ -142,7 +139,6 @@ export default defineComponent({
     })
 
     return {
-      loading,
    
       getData,
       echarts2

src/views/powerQuality/unbalanceAnalysis/index.vue

@@ -69,10 +69,13 @@
           <div class="blanceChartTit">电压不平衡度</div>
           <voltage-chart
             :echartsData="echartsData"
+            v-loading="loading"
           ></voltage-chart>
           <el-divider></el-divider>
           <voltage-chart2
             :echartsData="echartsData"
+            v-loading="loading"
+            
           ></voltage-chart2>
         </div>
       </el-col>
@@ -81,10 +84,12 @@
           <div class="blanceChartTit">电流不平衡度</div>
           <electric-chart
             :echartsData="echartsData"
+            v-loading="loading"
           ></electric-chart>
           <el-divider></el-divider>
           <electric-chart2
             :echartsData="echartsData"
+            v-loading="loading"
           ></electric-chart2>
         </div>
       </el-col>
@@ -113,6 +118,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const loading=ref(false)
     const value4 = ref('请选择')
     const region = ref('')
     // const deviceCode = ref('')
@@ -170,12 +176,16 @@ export default defineComponent({
     }
 
     function rtRealScore() {
+       loading.value=true
+        console.log('dateTime.value')
+       console.log(dateTime.value)
       if (!dateTime.value) {
         ElNotification({
           title: '提示',
           message: '请选择开始和结束时间',
           type: 'warning',
         })
+        loading.value=false
         return
       }
       store.commit('TimeAll_function', dateTime.value)
@@ -187,6 +197,9 @@ export default defineComponent({
           endTime: time[1],
         })
         .then((requset) => {
+          setTimeout(()=>{
+          loading.value=false
+        },200)
           if (requset.status === 'SUCCESS') {
             echartsData.value = requset.data
 
@@ -220,6 +233,7 @@ export default defineComponent({
 
       dateTime,
        linkDevice,
+       loading
     }
   },
 })