谐波监测-区域-echarts加载优化

src/views/pqs/harmonicMonitoring/area/terminalonlinerate/components/charts.vue

@@ -4,13 +4,8 @@
         style="position: relative; width: 100%"
         :style="`height: calc(${tableStore.table.height} - 75px)`"
     >
-        <my-echart
-            v-loading="loading"
-            class="mt10"
-            :style="`height: calc(${tableStore.table.height} - 100px)`"
-            :options="options"
-        />
-        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
+
+    <div style="position: absolute; right: 60px; top: 5px; font-weight: bold"  v-if="!loading && tableStore.table.data.length != 0">
             <el-tag
                 style="
                     background: #cc0000;
@@ -46,6 +41,12 @@
             ></el-tag>
             <span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率>90%</span>
         </div>
+        <my-echart
+            v-loading="loading"
+            class="mt10"
+            :style="`height: calc(${tableStore.table.height} - 100px)`"
+            :options="options"
+        />
     </div>
 </template>
 <script setup lang="ts">
@@ -72,7 +73,7 @@ const getTableStoreParams = async (val: any) => {
     loading.value = true
     setTimeout(() => {
         tableStore.index()
-    }, 2000)
+    }, 1500)
 }
 const chartsRef = ref()
 const tableStore = new TableStore({

src/views/pqs/harmonicMonitoring/area/terminalonlinerate/index.vue

@@ -107,7 +107,7 @@
         </div>
         <div class="online_main">
             <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
-                <el-tab-pane :name="0" label="终端状态统计表">
+                <el-tab-pane :name="0" :lazy="true" label="终端状态统计表">
                     <div class="table_legend">
                         <ul>
                             <li>
@@ -182,8 +182,8 @@
                         v-if="activeName == 0"
                     />
                 </el-tab-pane>
-                <el-tab-pane :name="1" label="终端状态统计图">
-                    <charts ref="chartsRef" />
+                <el-tab-pane :name="1" :lazy="true" label="终端状态统计图">
+                    <charts v-if="activeName == 1" ref="chartsRef" />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -344,7 +344,7 @@ const tableStore = new TableStore({
         treeData = tree2List(tableStore.table.data)
         tableStore.table.column[0].title = formData.value.statisticalType.name
         tableStore.table.data = JSON.parse(JSON.stringify(treeData))
-        chartsRef.value.getTableStoreParams(tableStore.table.params)
+        chartsRef.value&&chartsRef.value.getTableStoreParams(tableStore.table.params)
         setTimeout(() => {
             activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
         }, 0)