Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/pqs/harmonicMonitoring/area/getIntegrityData/components/charts.vue
View File

@@ -3,14 +3,12 @@
class="charts"
style="position: relative; width: 100%"
:style="`height: calc(${tableStore.table.height} - 75px)`"
v-loading="loading"
>
<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 +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({

47
src/views/pqs/harmonicMonitoring/area/getIntegrityData/index.vue
View File

@@ -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="数据完整性图表">
<charts ref="chartsRef" />
<el-tab-pane :name="1" :lazy="true" label="数据完整性图表">
<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
@@ -176,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()
// }
@@ -198,15 +196,7 @@ const tableStore = new TableStore({
},
{
title: '网络参数',
field: 'networkParam',
align: 'center',
formatter: function (row) {
return row.cellValue ? row.cellValue : '/'
}
},
{
title: '终端名称',
field: 'dataName',
field: 'ip',
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: '在线率(%)',
field: 'onlineRate',
title: '完整性(%)',
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)

72
src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/components/charts.vue
View File

@@ -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',

8
src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/index.vue
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>
@@ -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)

64
src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue
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',

10
src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
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)

17
src/views/pqs/harmonicMonitoring/area/terminalonlinerate/components/charts.vue
View File

@@ -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({

8
src/views/pqs/harmonicMonitoring/area/terminalonlinerate/index.vue
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="终端状态统计表">
<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)