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

This commit is contained in:
zhujiyan
2024-08-08 10:09:50 +08:00
parent ac07f7ec17
commit 9cfb8bed8a
8 changed files with 115 additions and 130 deletions

View File

@@ -1,10 +1,56 @@
<template>
<my-echart
v-loading="loading"
class="mt10"
<div
class="charts"
style="position: relative; width: 100%"
:style="`height: calc(${tableStore.table.height} - 75px)`"
:options="options"
/>
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} - 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( () => {
tableStore.index()
}, 2000)
setTimeout(() => {
tableStore.index()
}, 1500)
}
const tableStore = new TableStore({
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',

View File

@@ -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="终端在线率图表">
<charts ref="chartsRef" />
<el-tab-pane :name="1" :lazy="true" label="终端在线率图表">
<charts v-if="activeName == 1" ref="chartsRef" />
</el-tab-pane>
</el-tabs>
</div>
@@ -174,7 +174,7 @@ const defaultProps = ref({
emitPath: false,
expandTrigger: 'click' as const
})
const handleClick = (tab: any, e: any) => {
const handleClick = (tab: any, e: any) => {
// if(activeName.value===1){
tableStore.index()
// }
@@ -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)