335 lines
9.5 KiB
Vue
335 lines
9.5 KiB
Vue
|
<!-- 稳态 -->
|
||
|
|
<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>
|