联调电网一张图
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="综合评估详情" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="所属区域" />
|
||||
<vxe-column field="devName" title="综合评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-colgroup title="各项指标得分">
|
||||
<vxe-colgroup title="电压偏差">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="评率偏差">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="谐波含量">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="电压闪变">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="三相不平衡度">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
</vxe-colgroup>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div style="height: 300px; margin-top: 10px">
|
||||
<MyEChart style="height: 300px" :options="picEChart" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
|
||||
const picEChart = ref({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: ['承德', '承德', '承德', '承德', '承德', '承德', '承德']
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '评估得分',
|
||||
type: 'bar',
|
||||
|
||||
data: [12, 12, 12, 12, 12, 12, 12]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<!-- 监测点详情 -->
|
||||
<el-dialog draggable title="监测点详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>趋势分析</span>
|
||||
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||
<el-option label="年" value="1" />
|
||||
<el-option label="月" value="3" />
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>分布统计</span>
|
||||
<el-select v-model="time" style="width: 120px; margin-right: 80px" @change="statiStics">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px" :options="picEChart" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>监测点详细列表</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="lineName" title="监测点名称" />
|
||||
<vxe-column field="areaName" title="所属区域" />
|
||||
<vxe-column field="subName" title="所属变电站" />
|
||||
<vxe-column field="voltageScale" title="电压等级" :formatter="formatter" />
|
||||
<vxe-column field="loadType" title="负荷类型" :formatter="formatter" />
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.comFlag == 1">正常</el-tag>
|
||||
<el-tag type="danger" v-else>中断</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率(%)" />
|
||||
<vxe-column field="integrityData" title="数据完整性(%)" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableData: any = ref([])
|
||||
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const loadTypeArr = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const rowList: any = ref({})
|
||||
const trendEChart: any = ref()
|
||||
|
||||
const picEChart = ref()
|
||||
const open = async (row: any) => {
|
||||
rowList.value = {
|
||||
deviceInfoParam: {
|
||||
...row
|
||||
},
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
...row
|
||||
}
|
||||
analysis(1)
|
||||
// 统计
|
||||
statiStics()
|
||||
// 监测点列表
|
||||
getHalfReport(rowList.value).then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 分析
|
||||
const analysis = (e: any) => {
|
||||
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||
// 分析
|
||||
getGridDiagramLineTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||
let name = []
|
||||
let data = []
|
||||
for (let k in res.data) {
|
||||
name.push(k)
|
||||
data.push(res.data[k])
|
||||
}
|
||||
|
||||
trendEChart.value = {
|
||||
title: {
|
||||
text: '监测点数量'
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
data: name
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: '个'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '接入',
|
||||
type: 'line',
|
||||
data: data,
|
||||
smooth: true,
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 统计
|
||||
const statiStics = () => {
|
||||
getGridDiagramLineData(rowList.value).then(res => {
|
||||
picEChart.value = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: res.data.map((item: any) => item.orgName)
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '数据完整性',
|
||||
type: 'bar',
|
||||
|
||||
data: res.data.map((item: any) => item.integrityRate),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '在线率',
|
||||
type: 'bar',
|
||||
data: res.data.map((item: any) => item.onLineRate),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '超标监测点占比',
|
||||
type: 'bar',
|
||||
data: res.data.map((item: any) => item.outOfStandardRate),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'loadType') {
|
||||
return loadTypeArr.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||
} else if (row.column.field == 'voltageScale') {
|
||||
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||
} else {
|
||||
return row.cellValue
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
tableData.value = []
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<!-- 变电站 -->
|
||||
<el-dialog draggable title="变电站详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>趋势分析</span>
|
||||
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||
<el-option label="年" value="1" />
|
||||
<el-option label="月" value="3" />
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>污染告警</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>变电站详细列表</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="name" title="电站名称" />
|
||||
<vxe-column field="powerCompany" title="所属区域" />
|
||||
<vxe-column field="voltageLevel" title="电压等级" :formatter="formatter" />
|
||||
<vxe-column field="data" title="谐波电压" :formatter="formatter" />
|
||||
<vxe-column field="dataV" title="谐波电流" :formatter="formatter" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getPollutionAlarmPageData, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const rowList: any = ref({})
|
||||
const trendEChart: any = ref({})
|
||||
const tableData: any = ref([])
|
||||
|
||||
const picEChart: any = ref([{}, {}, {}, {}, {}])
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = {
|
||||
deviceInfoParam: {
|
||||
...row
|
||||
},
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
...row
|
||||
}
|
||||
analysis(1)
|
||||
// 污染
|
||||
getPollutionAlarmData(rowList.value).then(res => {
|
||||
let data = []
|
||||
|
||||
let a1 = 0
|
||||
let a2 = 0
|
||||
let a3 = 0
|
||||
let a4 = 0
|
||||
let a5 = 0
|
||||
if (row.isUpToGrid == 0) {
|
||||
data = res.data.info
|
||||
} else {
|
||||
data = res.data.gwInfo
|
||||
}
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i] >= 0 || data[i] < 1) {
|
||||
a1++
|
||||
} else if (data[i] >= 1 || data[i] < 1.2) {
|
||||
a2++
|
||||
} else if (data[i] >= 1.2 || data[i] < 1.6) {
|
||||
a3++
|
||||
} else if (data[i] >= 1.6 || data[i] < 2) {
|
||||
a4++
|
||||
} else if (data[i] >= 2) {
|
||||
a5++
|
||||
}
|
||||
}
|
||||
|
||||
let list = [
|
||||
{
|
||||
value: ((a1 / data.length) * 100).toFixed(2),
|
||||
name: `无污染：${a1}座`
|
||||
},
|
||||
{
|
||||
value: ((a2 / data.length) * 100).toFixed(2),
|
||||
name: `轻微污染：：${a2}座`
|
||||
},
|
||||
{
|
||||
value: ((a3 / data.length) * 100).toFixed(2),
|
||||
name: `轻度污染：${a3}座`
|
||||
},
|
||||
{
|
||||
value: ((a4 / data.length) * 100).toFixed(2),
|
||||
name: `中度污染：${a4}座`
|
||||
},
|
||||
{
|
||||
value: ((a5 / data.length) * 100).toFixed(2),
|
||||
name: `重度污染：${a5}座`
|
||||
}
|
||||
]
|
||||
const color = ['#00B07D', '#FFAF00', '#FF7D00', '#B90000', '#62298B']
|
||||
|
||||
list.forEach((item, i) => {
|
||||
picEChart.value[i] = {
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: '10%'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
center: ['50%', '80%'],
|
||||
radius: '135%',
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
progress: {
|
||||
show: true,
|
||||
width: 15,
|
||||
itemStyle: {
|
||||
color: color[i]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
color: [[1, '#f4f4f4']]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 5,
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
formatter: function (value: any) {
|
||||
if (value === 0 || value === 100) {
|
||||
return value + '%'
|
||||
}
|
||||
}
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
showAbove: false,
|
||||
size: 25,
|
||||
itemStyle: {
|
||||
borderWidth: 60
|
||||
}
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, '20%'],
|
||||
fontSize: 14
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
color: color[i],
|
||||
fontWeight: 'bold',
|
||||
offsetCenter: [0, '-20%'],
|
||||
formatter: function (value: any) {
|
||||
return '{a|占比} ' + '\n' + value + '{a|%}'
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
lineHeight: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [item]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
// 列表
|
||||
getPollutionAlarmPageData(rowList.value).then(res => {
|
||||
tableData.value = res.data.records
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const analysis = (e: any) => {
|
||||
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||
// 分析
|
||||
getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||
let name = []
|
||||
let data = []
|
||||
for (let k in res.data) {
|
||||
name.push(k)
|
||||
data.push(res.data[k])
|
||||
}
|
||||
|
||||
trendEChart.value = {
|
||||
title: {
|
||||
text: '变电站接入数量'
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
data: name
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: '座'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '接入',
|
||||
type: 'line',
|
||||
data: data,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'dataV') {
|
||||
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||||
} else if (row.column.field == 'data') {
|
||||
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||||
} else if (row.column.field == 'voltageLevel') {
|
||||
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||
} else {
|
||||
return row.cellValue
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
tableData.value = []
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.pie {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.MyEChart {
|
||||
height: 130px;
|
||||
width: 30%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="14">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" size="mini" ref="vxeRef" height="260px" :data="tableData">
|
||||
<vxe-column field="devName" width="110px" />
|
||||
|
||||
<vxe-colgroup title="500kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="220kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="110kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="35kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="其他">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
<!-- <div style="height: 260px" ref="chartRef" /> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估详细列表</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="变电站名称" />
|
||||
<vxe-column field="devName" title="超标天数" />
|
||||
<vxe-column field="devName" title="超标差值" />
|
||||
<vxe-column field="devName" title="在线监测点数量(个)" />
|
||||
<vxe-column field="devName" title="超标监测点数量(个)" />
|
||||
<vxe-column field="devName" title="超标监测点占比(%)" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts.ts'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
const chartRef = ref()
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
|
||||
const trendEChart = ref({
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
data: ['1月', '2月', '3月']
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
radar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: '评率偏差',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '闪变',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '电压总谐波畸变率',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '三相电压不平衡度',
|
||||
max: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '1月',
|
||||
// type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [9, 16, 16, 15, 12]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const echart = () => {
|
||||
let chart = echarts.init(chartRef.value)
|
||||
var dataname = ['评率偏差', '电压偏差', '闪变', '电压总谐波畸变率', '三相电压不平衡度']
|
||||
var datamax = [20, 20, 20, 20, 20, 20]
|
||||
var datavaule = [9, 16, 16, 15, 12, 8]
|
||||
var datavaule1 = [6, 8, 10, 6, 5, 8]
|
||||
var datavaule2 = [19, 19, 19, 19, 19, 19]
|
||||
|
||||
var indicator = []
|
||||
for (var i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: datamax[i]
|
||||
})
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: ['1月', '2月', '3月'],
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
top: 'center',
|
||||
itemGap: 30,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '1月',
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule]
|
||||
},
|
||||
{
|
||||
name: '2月',
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule1]
|
||||
},
|
||||
{
|
||||
name: '3月',
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule2]
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
}
|
||||
// echart()
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!-- 技术 -->
|
||||
<template>
|
||||
<el-dialog draggable title="技术监督管理详情" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" />
|
||||
<vxe-column field="devName" title="异常问题总数" />
|
||||
<vxe-column field="devName" title="已关联工单数" />
|
||||
<vxe-column field="devName" title="工单转换率(%)" />
|
||||
<vxe-column field="devName" title="工单总数" />
|
||||
<vxe-column field="devName" title="已处理工单数" />
|
||||
<vxe-column field="devName" title="工单处置率(%)" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div style="height: 300px; margin-top: 10px">
|
||||
<MyEChart style="height: 300px" :options="picEChart" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
|
||||
const picEChart = ref({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: ['技术监督计划', '用户投诉', '谐波普测问题', '在线率问题']
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '问题个数',
|
||||
type: 'bar',
|
||||
data: [12, 12, 12, 12]
|
||||
},
|
||||
{
|
||||
name: '已处理',
|
||||
type: 'bar',
|
||||
|
||||
data: [12, 12, 12, 12]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!-- 暂态 -->
|
||||
<template>
|
||||
<el-dialog draggable title="暂态电能质量水平评价详情" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="所属区域" />
|
||||
<vxe-column field="devName" title="暂态评估得分" />
|
||||
<vxe-column field="devName" title="暂态指标" />
|
||||
<vxe-column field="devName" title="暂降次数" />
|
||||
<vxe-column field="devName" title="暂降原因" />
|
||||
<vxe-column field="devName" title="暂降类型" />
|
||||
<vxe-column field="devName" title="暂态事件个数" />
|
||||
<vxe-colgroup title="暂态严重度占比">
|
||||
<vxe-column field="devName" title="SARFI-90" />
|
||||
<vxe-column field="devName" title="SARFI-50" />
|
||||
<vxe-column field="devName" title="SARFI-20" />
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div style="height: 300px; margin-top: 10px; display: flex">
|
||||
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
|
||||
const picEChart = ref({
|
||||
legend: {
|
||||
orient: 'vertical'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
|
||||
center: ['50%', '50%'],
|
||||
radius: '50%',
|
||||
label: {
|
||||
formatter: function (e: any) {
|
||||
let {
|
||||
data: { value, name }
|
||||
} = e
|
||||
return `${name}：${value}`
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
name: '其他',
|
||||
value: 53.4,
|
||||
itemStyle: {
|
||||
color: '#ff0000'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '大型感应电动机启动',
|
||||
value: 3.4
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="终端统计详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>趋势分析</span>
|
||||
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||
<el-option label="年" value="1" />
|
||||
<el-option label="月" value="3" />
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>分布统计</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
|
||||
<el-table size="small" height="260px" style="width: 240px" :data="picList">
|
||||
<el-table-column prop="orgName" width="80px" align="center"></el-table-column>
|
||||
<el-table-column prop="onlineEvaluate" label="终端评价" align="center">
|
||||
<template #default="scope">
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
scope.row.onlineEvaluate < 60
|
||||
? 'red'
|
||||
: scope.row.onlineEvaluate < 90
|
||||
? 'orange'
|
||||
: 'green'
|
||||
}"
|
||||
>
|
||||
{{
|
||||
scope.row.onlineEvaluate < 60
|
||||
? '差'
|
||||
: scope.row.onlineEvaluate < 90
|
||||
? '良'
|
||||
: '优'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devCount" label="数量" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>终端统计细列表</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="终端名称" />
|
||||
<vxe-column field="areaName" title="所属区域" />
|
||||
<vxe-column field="bdName" title="所属变电站" />
|
||||
<vxe-column field="devType" title="终端型号" />
|
||||
<vxe-column field="loginTime" title="投运时间" />
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.runFlag == '投运' ? 'success' : 'danger'">
|
||||
{{ scope.row.runFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.comFlag == '正常' ? 'success' : 'danger'">
|
||||
{{ scope.row.comFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateTime" title="最新数据时间" />
|
||||
<vxe-column field="onlineEvaluate" title="终端在线率(%)" :formatter="formatter" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getGridDiagramDevTendency, getGridDiagramDevData, getRuntimeData } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
const rowList: any = ref({})
|
||||
const tableData: any = ref()
|
||||
|
||||
const picList = ref([])
|
||||
|
||||
const trendEChart: any = ref({})
|
||||
|
||||
const picEChart = ref()
|
||||
const open = async (row: any) => {
|
||||
rowList.value = {
|
||||
deviceInfoParam: {
|
||||
...row
|
||||
},
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
...row
|
||||
}
|
||||
// 趋势分析
|
||||
analysis(1)
|
||||
dialogVisible.value = true
|
||||
//分布统计
|
||||
getGridDiagramDevData(rowList.value).then(res => {
|
||||
picList.value = res.data
|
||||
let picData: any = []
|
||||
res.data.forEach((item: any) => {
|
||||
picData.push({
|
||||
value: item.devCount,
|
||||
name: `${item.orgName}：${item.devCount}台`,
|
||||
itemStyle: {
|
||||
color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
picEChart.value = {
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 360,
|
||||
center: ['50%', '50%'],
|
||||
radius: ['25%', '35%'],
|
||||
endAngle: 0,
|
||||
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 5
|
||||
},
|
||||
|
||||
data: picData
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
// 列表
|
||||
getRuntimeData({
|
||||
...row,
|
||||
serverName: 'pqs-common',
|
||||
runFlag: [],
|
||||
comFlag: [],
|
||||
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
||||
statisticalType: {}
|
||||
}).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const analysis = (e: any) => {
|
||||
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||
|
||||
getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||
let name = []
|
||||
let data = []
|
||||
for (let k in res.data) {
|
||||
name.push(k)
|
||||
data.push(res.data[k])
|
||||
}
|
||||
|
||||
trendEChart.value = {
|
||||
title: {
|
||||
text: '终端接入数量'
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
data: name
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: '台'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '接入',
|
||||
type: 'line',
|
||||
data: data,
|
||||
smooth: true,
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'onlineEvaluate') {
|
||||
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue * 100
|
||||
} else {
|
||||
return row.cellValue
|
||||
}
|
||||
}
|
||||
const handleClose = () => {
|
||||
tableData.value = []
|
||||
dialogVisible.value = false
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user