谐波监测-区域-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',