联调全景展示 省级 详情页
This commit is contained in:
@@ -2,43 +2,47 @@
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="14">
|
||||
<el-row style="height: 330px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<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>
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step
|
||||
:class="active == i ? 'highlight' : ''"
|
||||
:title="item.name"
|
||||
@click="handleClick(i)"
|
||||
></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
<!-- <div style="height: 260px" ref="chartRef" /> -->
|
||||
<div style="height: 260px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -47,153 +51,97 @@
|
||||
<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-column field="deptName" title="区域名称" />
|
||||
<vxe-column field="onlineNum" title="在线监测点数量(个)" />
|
||||
<vxe-column field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="超标天数">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="超标监测点数 ">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</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 { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const chartRef = ref()
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
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 dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
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++) {
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差', '频率偏差', '电压总谐波畸变率', '闪变', '三相电压不平衡度']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
|
||||
let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: datamax[i]
|
||||
})
|
||||
}
|
||||
|
||||
let option = {
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
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)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: ['1月', '2月', '3月'],
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
top: 'center',
|
||||
itemGap: 30,
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
@@ -236,77 +184,69 @@ const echart = () => {
|
||||
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]
|
||||
}
|
||||
]
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time + 1,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
// echart()
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
@@ -328,7 +268,60 @@ defineExpose({ open })
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
.evaluationData {
|
||||
height: 40px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 5px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user