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

联调电网一张图

Browse Source
This commit is contained in:
GGJ
2024-04-26 09:15:20 +08:00
parent 650c42846a
commit ec21d8430f
30 changed files with 2709 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue Normal file
View File

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