终端运行管理
This commit is contained in:
仲么了
@@ -9,9 +9,13 @@ import 'echarts/lib/component/dataZoom'
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options'])
|
||||
let chart: echarts.ECharts | null = null
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
chart?.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = "none";
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = "";
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
chart?.dispose()
|
||||
@@ -88,7 +92,6 @@ const initChart = () => {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
|
||||
type: 'value',
|
||||
|
||||
nameTextStyle: {
|
||||
@@ -148,9 +151,7 @@ const initChart = () => {
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
// initChart()
|
||||
}, 20)
|
||||
initChart()
|
||||
window.addEventListener('resize', resizeHandler)
|
||||
})
|
||||
defineExpose({ initChart })
|
||||
|
||||
@@ -147,6 +147,21 @@ const init = async () => {
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
type: 'menu',
|
||||
title: '终端运行统计',
|
||||
name: 'voltage/sags/operationsManagement/statistics',
|
||||
path: 'voltage/sags/operationsManagement/statistics',
|
||||
icon: 'fa-solid fa-chart-column',
|
||||
menu_type: 'tab',
|
||||
url: '',
|
||||
component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
|
||||
keepalive: 'voltage/sags/operationsManagement/statistics',
|
||||
extend: 'none',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
pid: 3,
|
||||
|
||||
442
src/views/voltage/sags/operationsManagement/statistics.vue
Normal file
442
src/views/voltage/sags/operationsManagement/statistics.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker :showOperation="false" showSelect>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="区域">
|
||||
<Area v-model="tableStore.table.params.deptIndex" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div style="font-weight: bold; background: #fff;text-indent: 1em">
|
||||
<span style="color: #000">
|
||||
(左柱):
|
||||
<span style="color: #0099cc">
|
||||
<span class="smallBlock" style="background: #0099cc"></span>
|
||||
投运
|
||||
</span>
|
||||
<span style="color: #996600">
|
||||
<span class="smallBlock" style="background: #996600"></span>
|
||||
热备用
|
||||
</span>
|
||||
<span style="color: #cc0000">
|
||||
<span class="smallBlock" style="background: #cc0000"></span>
|
||||
停运
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span style="color: #000">
|
||||
(右柱):
|
||||
<span style="color: #2e8b57">
|
||||
<span class="smallBlock" style="background: #2e8b57"></span>
|
||||
{{ '在线率≥90 %' }}
|
||||
</span>
|
||||
<span style="color: #daa520">
|
||||
<span class="smallBlock" style="background: #daa520"></span>
|
||||
{{ '60 %≤在线率 < 90 %' }}
|
||||
</span>
|
||||
<span style="color: #cc0000">
|
||||
<span class="smallBlock" style="background: #cc0000"></span>
|
||||
{{ '在线率 < 60 %' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="statistics-main" v-loading="tableStore.table.loading">
|
||||
<template v-if="!tableStore.table.loading">
|
||||
<div>
|
||||
<my-echart :options="areaStatistics" />
|
||||
</div>
|
||||
<div>
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
align="center"
|
||||
class="ba-data-table w100"
|
||||
header-cell-class-name="table-header-cell"
|
||||
:data="tableStore.table.data.area.areaInfo"
|
||||
:border="true"
|
||||
stripe
|
||||
size="small"
|
||||
:column-config="{ resizable: true }"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
>
|
||||
<vxe-column field="areaName" title="区域"></vxe-column>
|
||||
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
|
||||
<vxe-column field="normal" title="投运" width="80"></vxe-column>
|
||||
<vxe-column field="breaks" title="热备用" width="80"></vxe-column>
|
||||
<vxe-column field="shutdown" title="停运" width="80"></vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率（%）"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div>
|
||||
<my-echart :options="factoryStatistics" />
|
||||
</div>
|
||||
<div>
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
align="center"
|
||||
class="ba-data-table w100"
|
||||
header-cell-class-name="table-header-cell"
|
||||
:data="tableStore.table.data.factory.areaInfo"
|
||||
:border="true"
|
||||
stripe
|
||||
size="small"
|
||||
:column-config="{ resizable: true }"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
>
|
||||
<vxe-column field="areaName" title="厂家"></vxe-column>
|
||||
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
|
||||
<vxe-column field="normal" title="投运" width="80"></vxe-column>
|
||||
<vxe-column field="breaks" title="热备用" width="80"></vxe-column>
|
||||
<vxe-column field="shutdown" title="停运" width="80"></vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率（%）"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import Area from '@/components/form/area/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { onMounted, provide, reactive, ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import * as echarts from 'echarts/core'
|
||||
|
||||
defineOptions({
|
||||
name: 'voltage/sags/operationsManagement/statistics'
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const areaStatistics = ref(null)
|
||||
const factoryStatistics = ref(null)
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/area/getTerminalRunningStatistics',
|
||||
method: 'POST',
|
||||
loadCallback: () => {
|
||||
areaStatistics.value = {
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: '区域'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: tableStore.table.data.area.areaInfo.map(
|
||||
(item: any) => item.areaName + `(${item.numberOfTerminals})`
|
||||
)
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
formatter: function (params) {
|
||||
var tips = ''
|
||||
tips += params[0].name + '</br/>'
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
stack: 'one',
|
||||
name: '投运',
|
||||
data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0099CC'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '热备用',
|
||||
stack: 'one',
|
||||
data: tableStore.table.data.area.areaInfo.map((item: any) => item.shutdownRate),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#cc0000'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '在线率',
|
||||
stack: 'two',
|
||||
data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
])
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
])
|
||||
} else if (params.value <= 60 && params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
factoryStatistics.value = {
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: '终端厂家'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: tableStore.table.data.factory.areaInfo.map(
|
||||
(item: any) => item.areaName + `(${item.numberOfTerminals})`
|
||||
)
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
formatter: function (params) {
|
||||
var tips = ''
|
||||
tips += params[0].name + '</br/>'
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
stack: 'one',
|
||||
name: '投运',
|
||||
data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0099CC'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '热备用',
|
||||
stack: 'one',
|
||||
data: tableStore.table.data.factory.areaInfo.map((item: any) => item.shutdownRate),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#cc0000'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '在线率',
|
||||
stack: 'two',
|
||||
data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
])
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
])
|
||||
} else if (params.value <= 60 && params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
])
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.statisticalType = {
|
||||
name: '电网拓扑',
|
||||
id: 'cc28974d259ad22642f6a1bff708f967',
|
||||
code: 'Power_Network',
|
||||
value: 'cc28974d259ad22642f6a1bff708f967',
|
||||
gvalue: null,
|
||||
label: '电网拓扑',
|
||||
sort: 0
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const layout = mainHeight(104) as any
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics-main {
|
||||
box-sizing: border-box;
|
||||
height: v-bind('layout.height');
|
||||
padding: 0 10px 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 600px;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user