谐波监测-区域-echarts加载优化
This commit is contained in:
@@ -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">  在线率<60%   </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">  60%≤在线率<90%   </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">  在线率≥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',
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user