终端状态统计页面
This commit is contained in:
zhujiyan
@@ -0,0 +1,457 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="charts"
|
||||||
|
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">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStoreParams: any = ref({})
|
||||||
|
const loading = ref(false)
|
||||||
|
const getTableStoreParams = async (val: any) => {
|
||||||
|
tableStoreParams.value = val
|
||||||
|
loading.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
const chartsRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/harmonic-boot/terminal/getTerminalDataCensus',
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.table.params = tableStoreParams.value
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
const chartsData = ref(tableStore.table.data)
|
||||||
|
chartsData.value.single.map((item: any) => {
|
||||||
|
if (item == 3.14159) {
|
||||||
|
item = 0.5
|
||||||
|
}
|
||||||
|
item = item.toFixed(2)
|
||||||
|
})
|
||||||
|
// tableStore.table.data.type
|
||||||
|
const legendColorList = ['#0099CC', '#9A6601', '#CCCCCC', '#FFFFFF']
|
||||||
|
let code = tableStore.table.params.statisticalType.code
|
||||||
|
let title = '',
|
||||||
|
titleX = ''
|
||||||
|
if (code == 'Power_Network') {
|
||||||
|
title = '区域'
|
||||||
|
titleX = '区域'
|
||||||
|
} else if (code == 'Manufacturer') {
|
||||||
|
title = '终端厂家'
|
||||||
|
titleX = '终端\n厂家'
|
||||||
|
} else if (code == 'Voltage_Level') {
|
||||||
|
title = '电压等级'
|
||||||
|
titleX = '电压\n等级'
|
||||||
|
} else if (code == 'Load_Type') {
|
||||||
|
title = '干扰源类型'
|
||||||
|
titleX = '干扰\n源类型'
|
||||||
|
} else if (code == 'Report_Type') {
|
||||||
|
title = '上报类型'
|
||||||
|
titleX = '上报\n类型'
|
||||||
|
}
|
||||||
|
options.value = {
|
||||||
|
title: {
|
||||||
|
text: title
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['投运', '热备用', '停运'],
|
||||||
|
left: '4%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#666666'
|
||||||
|
},
|
||||||
|
itemWidth: 30,
|
||||||
|
itemHeight: 15,
|
||||||
|
itemGap: 25
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {
|
||||||
|
// bottom: '10px',
|
||||||
|
show: true,
|
||||||
|
title: '保存'
|
||||||
|
// yAxisIndex: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
right: 0,
|
||||||
|
top: 0
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
},
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
|
||||||
|
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
// <p style="width:14px;height:8px;border-radius:2px;background:${
|
||||||
|
// legendColorList[i]
|
||||||
|
// }"></p>
|
||||||
|
tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
|
||||||
|
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${
|
||||||
|
params[i].seriesName
|
||||||
|
}</span> ${
|
||||||
|
params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
|
||||||
|
} </div>`
|
||||||
|
}
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '50px', // 等价于 y: '16%'
|
||||||
|
left: '10px',
|
||||||
|
right: '10px',
|
||||||
|
bottom: '50px',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: {
|
||||||
|
name: titleX,
|
||||||
|
data: chartsData.value.type
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '台',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#000',
|
||||||
|
verticalAlign: 'top', //标题位置
|
||||||
|
padding: [-22, 0, 10, 0]
|
||||||
|
},
|
||||||
|
// max:50,
|
||||||
|
// interval: 2,
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
symbol: ['none', 'arrow'],
|
||||||
|
symbolOffset: 25, //箭头距离x轴末端距离
|
||||||
|
lineStyle: {
|
||||||
|
// shadowOffsetY: -25,
|
||||||
|
color: '#000',
|
||||||
|
shadowColor: '#000' //设置阴影的颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '%',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#000',
|
||||||
|
verticalAlign: 'top', //标题位置
|
||||||
|
padding: [-22, 0, 10, 0]
|
||||||
|
},
|
||||||
|
max: 100,
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: "#000"
|
||||||
|
// },
|
||||||
|
position: 'right',
|
||||||
|
offset: 0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
// symbol: ["none", "arrow"],
|
||||||
|
symbolOffset: 20, //箭头距离x轴末端距离
|
||||||
|
lineStyle: {
|
||||||
|
shadowOffsetY: -20,
|
||||||
|
color: '#000',
|
||||||
|
shadowColor: '#000' //设置阴影的颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{value} ', //右侧Y轴文字显示
|
||||||
|
textStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '投运',
|
||||||
|
type: 'bar',
|
||||||
|
// stack: 'false',
|
||||||
|
barMaxWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0099CC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#0099CC'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
barBorderRadius: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
|
||||||
|
data: chartsData.value.runFlag
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '热备用',
|
||||||
|
type: 'bar',
|
||||||
|
// stack: 'false',
|
||||||
|
barMaxWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#996600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#996600'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
barBorderRadius: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
|
||||||
|
data: chartsData.value.reaFlag
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '停运',
|
||||||
|
type: 'bar',
|
||||||
|
// stack: 'false',
|
||||||
|
barMaxWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#CCCCCC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#CCCCCC'
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
barBorderRadius: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
|
||||||
|
data: chartsData.value.stopFlag
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '在线率',
|
||||||
|
type: 'bar',
|
||||||
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||||
|
smooth: false, //平滑曲线显示
|
||||||
|
barMaxWidth: 24,
|
||||||
|
symbol: 'circle', //标记的图形为实心圆
|
||||||
|
symbolSize: 8, //标记的大小
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 随机显示
|
||||||
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||||
|
|
||||||
|
// 定制显示（按顺序）
|
||||||
|
color: function (params) {
|
||||||
|
if (params.value >= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#349966'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value >= 60 && params.value <= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value > 0.5 && params.value <= 60) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#CC0100'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value > 0 && params.value <= 0.5) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ffa43a'
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
silent: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 100,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#349966'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#349966'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 90,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 60,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#CC0100'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#CC0100'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
//data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
|
||||||
|
data: chartsData.value.single
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
// tableStore.table.params.monitorFlag = 2
|
||||||
|
// tableStore.table.params.powerFlag = 2
|
||||||
|
// tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
defineExpose({ getTableStoreParams })
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -0,0 +1,465 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main online">
|
||||||
|
<div class="online_header">
|
||||||
|
<TableHeader date-picker ref="tableHeaderRef">
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="统计类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.statisticalType"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
value-key="id"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<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 ref="select1" v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
|
||||||
|
<el-option :value="formData.deptIndex" style="height: auto"> -->
|
||||||
|
<!-- {{ formData.deptIndex }} -->
|
||||||
|
<el-cascader
|
||||||
|
v-model="formData.deptIndex"
|
||||||
|
:props="defaultProps"
|
||||||
|
:options="treeData"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
collapse-tags
|
||||||
|
placeholder="请选择区域"
|
||||||
|
/>
|
||||||
|
<!-- <el-tree
|
||||||
|
ref="tree"
|
||||||
|
v-model="formData.deptName"
|
||||||
|
:data="treeData"
|
||||||
|
node-key="id"
|
||||||
|
accordion
|
||||||
|
:default-expanded-keys="idArr"
|
||||||
|
:props="defaultProps"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<span :title="data.name">{{ data?.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-tree> -->
|
||||||
|
<!-- </el-option>
|
||||||
|
</el-select> -->
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="电压等级:">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.scale"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
placeholder="请选择电压等级"
|
||||||
|
style="width: 100%"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<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="formData.manufacturer"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
placeholder="请选择终端厂家"
|
||||||
|
style="width: 100%"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, index) in terminaloption"
|
||||||
|
:key="index"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="干扰源类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.loadType"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
placeholder="请选择干扰源类型"
|
||||||
|
style="width: 100%"
|
||||||
|
value-key="id"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, index) in interfereoption"
|
||||||
|
:key="index"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
</div>
|
||||||
|
<div class="online_main">
|
||||||
|
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||||||
|
<el-tab-pane :name="0" label="终端状态统计表">
|
||||||
|
<div class="table_legend">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p style="background: #339966">
|
||||||
|
<svg
|
||||||
|
t="1722910570852"
|
||||||
|
class="icon"
|
||||||
|
viewBox="0 0 1336 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="6243"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024"
|
||||||
|
fill="#ffffff"
|
||||||
|
p-id="6244"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
<span style="color: #339966">投运状态</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p style="background: #ffcc33">
|
||||||
|
<svg
|
||||||
|
t="1722910570852"
|
||||||
|
class="icon"
|
||||||
|
viewBox="0 0 1336 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="6243"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024"
|
||||||
|
fill="#ffffff"
|
||||||
|
p-id="6244"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
<span style="color: #ffcc33">热备用状态</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p style="background: #cc0000">
|
||||||
|
<svg
|
||||||
|
t="1722910570852"
|
||||||
|
class="icon"
|
||||||
|
viewBox="0 0 1336 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="6243"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024"
|
||||||
|
fill="#ffffff"
|
||||||
|
p-id="6244"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
<span style="color: #cc0000">停运状态</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Table
|
||||||
|
ref="tableRef"
|
||||||
|
:tree-config="{ transform: true, parentField: 'pid' }"
|
||||||
|
:scroll-y="{ enabled: true }"
|
||||||
|
v-if="activeName == 0"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane :name="1" label="终端状态统计图">
|
||||||
|
<charts ref="chartsRef" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, watch } from 'vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import { getAreaDept } from '@/api/harmonic-boot/area'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import charts from './components/charts.vue'
|
||||||
|
const tableRef = ref()
|
||||||
|
const chartsRef = ref()
|
||||||
|
const dictData = useDictData()
|
||||||
|
//字典获取电压等级
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
//字典获取终端厂家
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
//字典获取干扰源类型
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
//字典获取统计类型
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||||
|
//调用区域接口获取区域
|
||||||
|
const treeData = ref([])
|
||||||
|
const idArr = ref([])
|
||||||
|
const activeName = ref(0)
|
||||||
|
const getTreeData = async () => {
|
||||||
|
await getAreaDept().then(res => {
|
||||||
|
var data = res.data
|
||||||
|
data.forEach(element => {
|
||||||
|
idArr.value.push(element.id)
|
||||||
|
})
|
||||||
|
treeData.value = JSON.parse(JSON.stringify(res.data))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
getTreeData()
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
statisticalType: classificationData[0], //统计类型
|
||||||
|
deptIndex: treeData.value[0]?.id, //区域选择
|
||||||
|
scale: voltageleveloption, //电压等级
|
||||||
|
manufacturer: terminaloption, //终端厂家
|
||||||
|
loadType: interfereoption //干扰源类型
|
||||||
|
// searchBeginTime: '',
|
||||||
|
// searchEndTime: ''
|
||||||
|
})
|
||||||
|
formData.value.deptIndex = treeData.value[0]?.id
|
||||||
|
const defaultProps = ref({
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
checkStrictly: true,
|
||||||
|
emitPath: false,
|
||||||
|
expandTrigger: 'click' as const
|
||||||
|
})
|
||||||
|
const handleClick = (tab: any, e: any) => {
|
||||||
|
// if(activeName.value===1){
|
||||||
|
tableStore.index()
|
||||||
|
chartsRef.value.getTableStoreParams(tableStore.table.params)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
// const datePickerRef = ref()
|
||||||
|
const tableHeaderRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
// publicHeight: 60,
|
||||||
|
showPage: false,
|
||||||
|
url: '/harmonic-boot/terminal/getTerminalData',
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
title: formData.value.statisticalType.name,
|
||||||
|
field: 'name',
|
||||||
|
align: 'left',
|
||||||
|
minWidth: '200px',
|
||||||
|
treeNode: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '终端个数(台)',
|
||||||
|
field: 'number',
|
||||||
|
align: 'center',
|
||||||
|
formatter: function (row) {
|
||||||
|
return row.cellValue != 0 ? row.cellValue : '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '投运(台)',
|
||||||
|
field: 'runFlag',
|
||||||
|
type: 'html',
|
||||||
|
align: 'center',
|
||||||
|
formatter: function (row) {
|
||||||
|
return row.cellValue == 0
|
||||||
|
? '/'
|
||||||
|
: row.cellValue !== 0 && row.row.level !== 4
|
||||||
|
? row.cellValue
|
||||||
|
: row.cellValue !== 0 && row.row.level == 4 && row.row.reaFlag == 0 && row.row.stopFlag == 0
|
||||||
|
? "<p class='table_icon' style='width: 18px;height: 18px;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: #339966'><svg t='1722910570852' class='icon' viewBox='0 0 1336 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6243' width='16' height='16'><path d='M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024' fill='#ffffff' p-id='6244'></path></svg> </p>"
|
||||||
|
: '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '热备用(台)',
|
||||||
|
field: 'reaFlag',
|
||||||
|
type: 'html',
|
||||||
|
align: 'center',
|
||||||
|
formatter: function (row) {
|
||||||
|
return row.cellValue == 0
|
||||||
|
? '/'
|
||||||
|
: row.cellValue !== 0 && row.row.level !== 4
|
||||||
|
? row.cellValue
|
||||||
|
: row.cellValue !== 0 && row.row.level == 4 && row.row.runFlag == 0 && row.row.stopFlag == 0
|
||||||
|
? "<p class='table_icon' style='width: 18px;height: 18px;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: #ffcc33'><svg t='1722910570852' class='icon' viewBox='0 0 1336 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6243' width='16' height='16'><path d='M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024' fill='#ffffff' p-id='6244'></path></svg> </p>"
|
||||||
|
: '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '停运(台)',
|
||||||
|
field: 'reaFlag',
|
||||||
|
type: 'html',
|
||||||
|
align: 'center',
|
||||||
|
formatter: function (row) {
|
||||||
|
return row.cellValue == 0
|
||||||
|
? '/'
|
||||||
|
: row.cellValue !== 0 && row.row.level !== 4
|
||||||
|
? row.cellValue
|
||||||
|
: row.cellValue !== 0 && row.row.level == 4 && row.row.runFlag == 0 && row.row.reaFlag == 0
|
||||||
|
? "<p class='table_icon' style='width: 18px;height: 18px;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: #cc0000'><svg t='1722910570852' class='icon' viewBox='0 0 1336 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6243' width='16' height='16'><path d='M49.588224 883.816448M1139.531776 883.816448M86.939648 862.977024M538.459136 960.381952c109.876224-153.544704 223.55968-289.842176 308.03968-385.787904 49.87392-56.639488 96.715776-108.155904 141.549568-154.500096 40.576-41.945088 80.805888-80.405504 119.478272-116.59264 65.92-61.693952 142.984192-130.034688 191.446016-159.30368l-61.891584-82.050048c-89.732096 56.139776-176.10752 116.103168-242.799616 162.18112-38.863872 26.855424-74.928128 52.667392-108.915712 77.252608-33.668096 24.356864-68.429824 51.106816-105.081856 79.166464-63.633408 48.712704-145.388544 114.194432-224.555008 181.860352L357.07904 374.989824 123.885568 558.770176 538.459136 960.381952zM1335.92064 862.977024' fill='#ffffff' p-id='6244'></path></svg> </p>"
|
||||||
|
: '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '通讯状态',
|
||||||
|
// field: 'comFlag',
|
||||||
|
// align: 'center',
|
||||||
|
// render: 'tag',
|
||||||
|
// custom: {
|
||||||
|
// null: 'primary',
|
||||||
|
// 0: 'danger',
|
||||||
|
// 1: 'success'
|
||||||
|
// },
|
||||||
|
// replaceValue: {
|
||||||
|
// null: '/',
|
||||||
|
// 0: '中断',
|
||||||
|
// 1: '正常'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '最新数据时间',
|
||||||
|
// field: 'updateTime',
|
||||||
|
// align: 'center',
|
||||||
|
// formatter: function (row) {
|
||||||
|
// return row.cellValue ? row.cellValue : '/'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '在线率(%)',
|
||||||
|
field: 'onlineRateData',
|
||||||
|
align: 'center',
|
||||||
|
formatter: function (row) {
|
||||||
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.table.params.deptIndex = formData.value.deptIndex
|
||||||
|
tableStore.table.params.statisticalType = formData.value.statisticalType
|
||||||
|
tableStore.table.params.scale = formData.value.scale
|
||||||
|
tableStore.table.params.manufacturer = formData.value.manufacturer
|
||||||
|
tableStore.table.params.loadType = formData.value.loadType
|
||||||
|
tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
delete tableStore.table.params.timeFlag
|
||||||
|
delete tableStore.table.params.startTime
|
||||||
|
delete tableStore.table.params.endTime
|
||||||
|
delete tableStore.table.params.pageNum
|
||||||
|
delete tableStore.table.params.pageSize
|
||||||
|
// chartsRef.value.getTableStoreParams(tableStore.table.params)
|
||||||
|
// tableStore.table.params.searchBeginTime = tableHeaderRef.value.datePickerRef.timeValue[0]
|
||||||
|
// tableStore.table.params.searchEndTime = tableHeaderRef.value.datePickerRef.timeValue[1]
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
let treeData = []
|
||||||
|
treeData = tree2List(tableStore.table.data)
|
||||||
|
tableStore.table.column[0].title = formData.value.statisticalType.name
|
||||||
|
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
|
||||||
|
setTimeout(() => {
|
||||||
|
activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const handleSearch = () => {
|
||||||
|
formData.value.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.value.searchEndTime = datePickerRef.value.timeValue[1]
|
||||||
|
}
|
||||||
|
tableStore.table.params.deptIndex = ''
|
||||||
|
tableStore.table.params.statisticalType = []
|
||||||
|
tableStore.table.params.scale = []
|
||||||
|
tableStore.table.params.manufacturer = []
|
||||||
|
tableStore.table.params.loadType = []
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
const tree2List = (list: any, pid?: string) => {
|
||||||
|
//存储结果的数组
|
||||||
|
let arr: any = []
|
||||||
|
// 遍历 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.pid = pid
|
||||||
|
// 判断item是否存在children
|
||||||
|
if (!item.children) return arr.push(item)
|
||||||
|
// 函数递归，对children数组进行tree2List的转换
|
||||||
|
const children = tree2List(item.children, item.id)
|
||||||
|
// 删除item的children属性
|
||||||
|
delete item.children
|
||||||
|
// 把item和children数组添加至结果数组
|
||||||
|
//..children: 意思是把children数组展开
|
||||||
|
arr.push(item, ...children)
|
||||||
|
})
|
||||||
|
// 返回结果数组
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => treeData.value,
|
||||||
|
(val, oldVal) => {
|
||||||
|
if (val && val.length != 0) {
|
||||||
|
formData.value.deptIndex = val[0].id
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.online {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.online_header {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 140px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.online_main {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table_legend {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
ul {
|
||||||
|
width: 280px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
li {
|
||||||
|
flex: 1;
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
p {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user