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

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

@@ -3,14 +3,12 @@
         class="charts"
         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)`"
+        <div
-            :options="options"
+            style="position: absolute; right: 60px; top: 5px; font-weight: bold"
-        />
+            v-if="!loading && tableStore.table.data.length != 0"
-        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
+        >
             <el-tag
                 style="
                     background: #cc0000;
@@ -46,6 +44,11 @@
             ></el-tag>
             <span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率≥90%</span>
         </div>
+        <my-echart
+            class="mt10"
+            :style="`margin-top:50px;height: calc(${tableStore.table.height} - 120px)`"
+            :options="options"
+        />
     </div>
 </template>
 <script setup lang="ts">
@@ -72,7 +75,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/getIntegrityData/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="default-main online" ref="aaRef">
+    <div class="default-main online">
         <div class="online_header">
             <TableHeader date-picker ref="tableHeaderRef">
                 <template #select>
@@ -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="数据完整性列表">
                     <Table
                         ref="tableRef"
                         :tree-config="{ transform: true, parentField: 'pid' }"
@@ -115,8 +115,8 @@
                         v-if="activeName == 0"
                     />
                 </el-tab-pane>
-                <el-tab-pane :name="1" label="数据完整性图表">
+                <el-tab-pane :name="1" :lazy="true" label="数据完整性图表">
-                    <charts ref="chartsRef" />
+                    <charts v-if="activeName == 1" ref="chartsRef" />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -146,8 +146,6 @@ const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Ty
 const treeData = ref([])
 const idArr = ref([])
 const activeName = ref(0)
-const aaRef=ref()
-console.log(aaRef.value,"lllllkkkkk");
 const getTreeData = async () => {
     await getAreaDept().then(res => {
         var data = res.data
@@ -198,15 +196,7 @@ const tableStore = new TableStore({
         },
         {
             title: '网络参数',
-            field: 'networkParam',
+            field: 'ip',
-            align: 'center',
-            formatter: function (row) {
-                return row.cellValue ? row.cellValue : '/'
-            }
-        },
-        {
-            title: '终端名称',
-            field: 'dataName',
             align: 'center',
             formatter: function (row) {
                 return row.cellValue ? row.cellValue : '/'
@@ -220,6 +210,14 @@ const tableStore = new TableStore({
                 return row.cellValue ? row.cellValue : '/'
             }
         },
+        {
+            title: '终端名称',
+            field: 'deviceName',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
         {
             title: '通讯状态',
             field: 'comFlag',
@@ -245,11 +243,11 @@ const tableStore = new TableStore({
             }
         },
         {
-            title: '在线率(%)',
+            title: '完整性(%)',
-            field: 'onlineRate',
+            field: 'integrityData',
             align: 'center',
             formatter: function (row) {
-                // return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
+                return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
             }
         },
         {
@@ -293,7 +291,7 @@ const tableStore = new TableStore({
         treeData = tree2List(tableStore.table.data)
         tableStore.table.data = JSON.parse(JSON.stringify(treeData))
         tableStore.table.column[0].title = formData.value.statisticalType.name
-        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)
@@ -315,7 +313,14 @@ const tree2List = (list: any, pid?: string) => {
     // 遍历 tree 数组
     list.forEach((item: any) => {
         // item.comFlag = item.comFlag == null ? 3 : item.comFlag
-        item.valueOver == 3.14159 ? 0 : item.valueOver >= 90 ? 1 : item.valueOver && item.valueOver < 90 ? 2 : 3
+        item.valueOver =
+            item.integrityData == 3.14159
+                ? 0
+                : item.integrityData >= 90
+                ? 1
+                : item.integrityData >= 60 && item.integrityData < 90
+                ? 2
+                : 3
         item.pid = pid
         // 判断item是否存在children
         if (!item.children) return arr.push(item)

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

@@ -1,74 +1,4 @@
 <template>
-    <!-- <TableHeader area datePicker ref="TableHeaderRef">
-        <template #select>
-            <el-form-item label="统计类型:">
-                <el-select
-                    v-model="tableStore.table.params.statisticalType"
-                    value-key="id"
-                    placeholder="请选择统计类型"
-                >
-                    <el-option
-                        v-for="item in classificationData"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-form-item label="电压等级:">
-                <el-select
-                    v-model="tableStore.table.params.scale"
-                    multiple
-                    collapse-tags
-                    clearable
-                    value-key="id"
-                    placeholder="请选择电压等级"
-                >
-                    <el-option
-                        v-for="item in voltageleveloption"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="终端厂家:">
-                <el-select
-                    v-model="tableStore.table.params.manufacturer"
-                    multiple
-                    collapse-tags
-                    clearable
-                    value-key="id"
-                    placeholder="请选择终端厂家"
-                >
-                    <el-option
-                        v-for="item in terminaloption"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="干扰源类型:">
-                <el-select
-                    v-model="tableStore.table.params.loadType"
-                    multiple
-                    collapse-tags
-                    clearable
-                    value-key="id"
-                    placeholder="请选择干扰源类型"
-                >
-                    <el-option
-                        v-for="item in interfereoption"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-        </template>
-    </TableHeader> -->
     <my-echart
         v-loading="loading"
         class="mt10"
@@ -100,7 +30,7 @@ const getTableStoreParams = async (val: any) => {
     loading.value = true
     setTimeout(() => {
         tableStore.index()
-    }, 2000)
+    }, 1500)
 }
 const tableStore = new TableStore({
     url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',

src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/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="谐波畸变率统计表">
                     <Table
                         ref="tableRef"
                         :tree-config="{ transform: true, parentField: 'pid' }"
@@ -115,8 +115,8 @@
                         v-if="activeName == 0"
                     />
                 </el-tab-pane>
-                <el-tab-pane :name="1" label="谐波畸变率统计图">
+                <el-tab-pane :name="1" :lazy="true" label="谐波畸变率统计图">
-                    <charts ref="chartsRef" />
+                    <charts v-if="activeName == 1" ref="chartsRef" />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -249,7 +249,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)

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

@@ -1,10 +1,56 @@
 <template>
+    <div
+        class="charts"
+        style="position: relative; width: 100%"
+        :style="`height: calc(${tableStore.table.height} - 75px)`"
+        v-loading="loading"
+    >
+        <div
+            style="position: absolute; right: 60px; top: 5px; font-weight: bold"
+            v-if="!loading && tableStore.table.data && tableStore.table.data.type&& tableStore.table.data.type.length!=0"
+        >
+            <el-tag
+                style="
+                    background: #cc0000;
+                    width: 30px;
+                    height: 15px;
+                    border: 1px solid #cc0000;
+                    float: left;
+                    margin-top: 2px;
+                "
+            ></el-tag>
+            <span style="color: #cc0000; font-weight: 400; float: left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
+            <el-tag
+                size="mini"
+                style="
+                    background: #ffcc33;
+                    width: 30px;
+                    height: 15px;
+                    border: 1px solid #ffcc33;
+                    float: left;
+                    margin-top: 2px;
+                "
+            ></el-tag>
+            <span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
+            <el-tag
+                style="
+                    background: #339966;
+                    width: 30px;
+                    height: 15px;
+                    border: 1px solid #339966;
+                    float: left;
+                    margin-top: 2px;
+                "
+            ></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} - 75px)`"
+            :style="`height: calc(${tableStore.table.height} - 120px)`"
             :options="options"
         />
+    </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide, nextTick } from 'vue'
@@ -25,12 +71,12 @@ const interfereoption = dictData.getBasicData('Interference_Source')
 const TableHeaderRef = ref()
 const tableStoreParams: any = ref({})
 const loading = ref(false)
-const getTableStoreParams = async(val: any) => {
+const getTableStoreParams = async (val: any) => {
     tableStoreParams.value = val
     loading.value = true
-    setTimeout( () => {
+    setTimeout(() => {
         tableStore.index()
-    }, 2000)
+    }, 1500)
 }
 const tableStore = new TableStore({
     url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',

src/views/pqs/harmonicMonitoring/area/onlinerate/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="终端在线率列表">
                     <Table
                         ref="tableRef"
                         :tree-config="{ transform: true, parentField: 'pid' }"
@@ -115,8 +115,8 @@
                         v-if="activeName == 0"
                     />
                 </el-tab-pane>
-                <el-tab-pane :name="1" label="终端在线率图表">
+                <el-tab-pane :name="1" :lazy="true" label="终端在线率图表">
-                    <charts ref="chartsRef" />
+                    <charts v-if="activeName == 1" ref="chartsRef" />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -290,7 +290,7 @@ const tableStore = new TableStore({
         let treeData = []
         treeData = tree2List(tableStore.table.data)
         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)

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"
+    <div style="position: absolute; right: 60px; top: 5px; font-weight: bold"  v-if="!loading && tableStore.table.data.length != 0">
-            class="mt10"
-            :style="`height: calc(${tableStore.table.height} - 100px)`"
-            :options="options"
-        />
-        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
             <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="终端状态统计图">
+                <el-tab-pane :name="1" :lazy="true" label="终端状态统计图">
-                    <charts ref="chartsRef" />
+                    <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)