修改冀北现场问题
This commit is contained in:
@@ -13,8 +13,10 @@
|
||||
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
|
||||
<div class="card">
|
||||
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
|
||||
<span :style="`color: ${item.color[0]}; cursor:pointer`"
|
||||
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
|
||||
<span
|
||||
:style="`color: ${item.color[0]}; cursor:pointer`"
|
||||
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)"
|
||||
>
|
||||
{{ item.list[4].numOne }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -23,8 +25,10 @@
|
||||
<!-- 监测规模 列表 -->
|
||||
<div>
|
||||
<div class="vcl mt5">
|
||||
<p v-for="(item, i) in vList"
|
||||
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
|
||||
<p
|
||||
v-for="(item, i) in vList"
|
||||
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'"
|
||||
>
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -67,17 +71,20 @@
|
||||
</div>
|
||||
<div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
|
||||
<div v-for="item in countList">
|
||||
<div class="title mt5" style="font-weight: 500">
|
||||
<!-- <div class="title mt5" style="font-weight: 500">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
|
||||
v-for="val in item.children">
|
||||
</div> -->
|
||||
<div
|
||||
class="card-Box mt10"
|
||||
:style="`height:calc((${boxHeight.height} - 20px )/ 2);`"
|
||||
v-for="val in item.children"
|
||||
>
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">{{ val.title }}</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="num num1">
|
||||
<div @click="LookMap(val.numList, [], 0)">
|
||||
投运:
|
||||
<span>{{ val.num }}</span>
|
||||
@@ -90,6 +97,10 @@
|
||||
数据完整性:
|
||||
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
在线率:
|
||||
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,7 +130,7 @@
|
||||
</div>
|
||||
<div>
|
||||
{{ item.title[2] }}:
|
||||
<span style="color: #A52a2a" @click="LookMap([], item.lineListTwo, 1)">
|
||||
<span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
|
||||
{{ item.lineNumTwo || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -129,8 +140,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="imgL" :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
|
||||
@click="show = !show" src="@/assets/img/QH.png" />
|
||||
<img
|
||||
class="imgL"
|
||||
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
|
||||
@click="show = !show"
|
||||
src="@/assets/img/QH.png"
|
||||
/>
|
||||
|
||||
<!-- 变电站详情 -->
|
||||
<stand ref="standRef" />
|
||||
@@ -286,11 +301,11 @@ const countList: any = ref([
|
||||
},
|
||||
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '上送网公司',
|
||||
children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
|
||||
}
|
||||
// {
|
||||
// title: '上送网公司',
|
||||
// children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
|
||||
// }
|
||||
])
|
||||
const linList: any = ref([
|
||||
{
|
||||
@@ -307,7 +322,7 @@ const linList: any = ref([
|
||||
title: ['电能质量指标', '未超标', '超标']
|
||||
}
|
||||
])
|
||||
const vList = ['', '500kV', '220kV', '110kV', '35kV',]
|
||||
const vList = ['', '500kV', '220kV', '110kV', '35kV']
|
||||
const formRow: any = ref({})
|
||||
const height = mainHeight(30)
|
||||
const boxHeight = mainHeight(290, 2)
|
||||
@@ -368,7 +383,7 @@ const info = async (row: any) => {
|
||||
getGridDiagramStatistics(form).then(res => {
|
||||
countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
|
||||
countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
|
||||
countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
|
||||
// countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
|
||||
})
|
||||
// 监测运行统计
|
||||
getGridDiagramRunData(form).then(res => {
|
||||
@@ -392,7 +407,7 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
|
||||
const GridDiagram = (k: any) => {
|
||||
emit('GridDiagram', k, 3)
|
||||
}
|
||||
onMounted(() => { })
|
||||
onMounted(() => {})
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
@@ -536,6 +551,18 @@ defineExpose({ info, show })
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
.num1 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 8px;
|
||||
div {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BoxA {
|
||||
|
||||
@@ -1,137 +1,54 @@
|
||||
<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="deptName" title="地市" />
|
||||
<vxe-column field="assessLevel" title="综合评估结论">
|
||||
<template #default="scope">
|
||||
<!-- class="conclusion"
|
||||
:class="
|
||||
scope.row.assessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.assessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.assessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
" -->
|
||||
<span>
|
||||
{{ scope.row.assessData }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="qualifyData" title="指标合格率(%)" />
|
||||
|
||||
<!-- <vxe-colgroup title="评估结论">
|
||||
<vxe-column field="vdevAssessLevel" title="电压偏差">
|
||||
<el-dialog draggable title="区域污染值统计" v-model="dialogVisible" width="1400px">
|
||||
<div style="display: flex">
|
||||
<div style="width: 400px">
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
@current-change="currentChangeEvent"
|
||||
height="240px"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
:data="tableData"
|
||||
>
|
||||
<vxe-column field="deptName" title="地市" />
|
||||
<vxe-column field="score" title="污染值" sortable>
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
scope.row.vdevAssessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.vdevAssessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.vdevAssessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
color: setColor(scope.row.score)
|
||||
}"
|
||||
>
|
||||
{{ scope.row.vdevAssessLevel }}
|
||||
{{ scope.row.score }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="freqAssessLevel" title="频率偏差">
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="ml10" style="width: 990px">
|
||||
<vxe-table v-bind="defaultAttribute" v-loading="loadingTab" ref="vxeRef" height="240px" :data="subdata">
|
||||
<vxe-column type="seq" width="70"></vxe-column>
|
||||
<vxe-column field="devName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" />
|
||||
<vxe-column field="powerFlag" title="电网标志" />
|
||||
<vxe-column field="devType" title="终端型号"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="vharmonicValue" title="污染值" sortable>
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
scope.row.freqAssessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.freqAssessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.freqAssessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
color: setColor(scope.row.vharmonicValue)
|
||||
}"
|
||||
>
|
||||
{{ scope.row.freqAssessLevel }}
|
||||
{{ scope.row.vharmonicValue }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="harmAssessLevel" title="电压总谐波畸变率">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
scope.row.harmAssessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.harmAssessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.harmAssessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ scope.row.harmAssessLevel }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="flickerAssessLevel" title="电压闪变">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
scope.row.flickerAssessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.flickerAssessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.flickerAssessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ scope.row.flickerAssessLevel }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="unbalanceAssessLevel" title="三相电压不平衡度">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="conclusion"
|
||||
:class="
|
||||
scope.row.unbalanceAssessLevel == '特质'
|
||||
? 'background1'
|
||||
: scope.row.unbalanceAssessLevel == '较差'
|
||||
? 'background2'
|
||||
: scope.row.unbalanceAssessLevel == '极差'
|
||||
? 'background3'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ scope.row.unbalanceAssessLevel }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup> -->
|
||||
</vxe-table>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 300px; margin-top: 10px; position: relative" v-loading="loading">
|
||||
<!-- <el-select
|
||||
v-model="time"
|
||||
size="small"
|
||||
|
||||
@change="analysis"
|
||||
>
|
||||
<el-option label="年" value="1" />
|
||||
<el-option label="月" value="3" />
|
||||
</el-select> -->
|
||||
<div style="position: absolute; width: 100px; top: 0px; right: 0px; z-index: 1">
|
||||
<!-- <div style="position: absolute; width: 100px; top: 0px; right: 0px; z-index: 1">
|
||||
<el-radio-group v-model="city" size="small" @change="analysis">
|
||||
<el-radio-button label="0">省</el-radio-button>
|
||||
<el-radio-button label="1">市</el-radio-button>
|
||||
@@ -140,133 +57,119 @@
|
||||
<el-radio-button label="1">年</el-radio-button>
|
||||
<el-radio-button label="3">月</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<MyEChart style="height: 300px" :options="picEChart" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getAssessDetail, getAssessTrend } from '@/api/device-boot/panorama'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { getAssessDetail, getAssessTrend, downPollutionSubCalc } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const rowList: any = ref({})
|
||||
const type = ref('1')
|
||||
const city = ref('0')
|
||||
const loading = ref(false)
|
||||
const tableData: any = ref([])
|
||||
|
||||
const subdata: any = ref([])
|
||||
const picEChart = ref()
|
||||
const open = async (row: any) => {
|
||||
getAssessDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
const tableRef = ref()
|
||||
const loadingTab = ref(false)
|
||||
const PollutionList = dictData.getBasicData('Pollution_Calc').filter(item => item.name == '谐波电压')
|
||||
|
||||
const open = async (row: any, list: any) => {
|
||||
console.log('🚀 ~ open ~ list:', list)
|
||||
// getAssessDetail(row).then(res => {
|
||||
tableData.value = list
|
||||
subdata.value = tableData.value[0]?.powerFlagPollutionList || []
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
tableRef.value?.setCurrentRow(tableData.value[0])
|
||||
}, 0)
|
||||
})
|
||||
// })
|
||||
rowList.value = row
|
||||
analysis()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const currentChangeEvent = async () => {
|
||||
loadingTab.value = true
|
||||
setTimeout(() => {
|
||||
subdata.value = tableRef.value.getCurrentRecord()?.powerFlagPollutionList || []
|
||||
loadingTab.value = false
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const analysis = () => {
|
||||
loading.value = true
|
||||
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||
getAssessTrend({ ...rowList.value, searchBeginTime: time, type: type.value, areaType: city.value }).then(res => {
|
||||
downPollutionSubCalc({ ...rowList.value, ids: [PollutionList[0].id] }).then(res => {
|
||||
const first10Items = res.data.slice(0, 10)
|
||||
picEChart.value = {
|
||||
title: {
|
||||
text: '各地市综合评估趋势对比'
|
||||
text: '污染值排名前十变电站'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '',
|
||||
data: first10Items.map((item: any) => item.subStationName),
|
||||
axisLabel: {
|
||||
rotate: 30, // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
|
||||
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: 10
|
||||
},
|
||||
legend: {
|
||||
right: 120,
|
||||
top: 20
|
||||
show: false
|
||||
},
|
||||
// tooltip: {
|
||||
// formatter: function (params: any) {
|
||||
// // console.log(123, params)
|
||||
|
||||
// var tips = ''
|
||||
|
||||
// for (var i = 0; i < params.length; i++) {
|
||||
// console.log('🚀 ~ getAssessTrend ~ params[i].value:', params[i].value)
|
||||
|
||||
// tips +=
|
||||
// params[i].seriesName +
|
||||
// ':' +
|
||||
// `<span style="color:${
|
||||
// params[i].value > 4.5
|
||||
// ? ''
|
||||
// : params[i].value > 4
|
||||
// ? ''
|
||||
// : params[i].value > 3
|
||||
// ? ''
|
||||
// : params[i].value > 2
|
||||
// ? '#97017e'
|
||||
// : params[i].value > 0
|
||||
// ? '#A52a2a'
|
||||
// : ''
|
||||
// }">
|
||||
// ${
|
||||
// params[i].value > 4.5
|
||||
// ? '优质'
|
||||
// : params[i].value > 4
|
||||
// ? '良好'
|
||||
// : params[i].value > 3
|
||||
// ? '一般'
|
||||
// : params[i].value > 2
|
||||
// ? '较差'
|
||||
// : params[i].value > 0
|
||||
// ? '极差'
|
||||
// : ''
|
||||
// }
|
||||
// </span>` +
|
||||
// '</br>'
|
||||
// }
|
||||
// return tips
|
||||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
data: res.data[0].children.map((item: any) => item.dataTime)
|
||||
},
|
||||
|
||||
grid: {
|
||||
bottom: '10px',
|
||||
top: '60px'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
name: ''
|
||||
},
|
||||
options: {
|
||||
dataZoom: false,
|
||||
series: []
|
||||
series: [
|
||||
{
|
||||
// name: time[i],
|
||||
name: '污染值',
|
||||
type: 'bar',
|
||||
data: first10Items.map((item: any) => item.subVStationValue),
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
// params.value 是当前柱子的数值
|
||||
const value = params.value
|
||||
return setColor(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
let list: any = []
|
||||
let time: any = []
|
||||
let mun: any = []
|
||||
res.data.forEach((item: any, num: any) => {
|
||||
time.push(item.deptName)
|
||||
list.push([])
|
||||
item.children.forEach((val: any, i: any) => {
|
||||
mun.push(val.score == 3.14159 ? null : val.score)
|
||||
list[num].push(val.score == 3.14159 ? null : val.score)
|
||||
})
|
||||
})
|
||||
|
||||
list.forEach((item: any, i: any) => {
|
||||
picEChart.value.options.series.push({
|
||||
name: time[i],
|
||||
type: 'line',
|
||||
data: item
|
||||
})
|
||||
})
|
||||
picEChart.value.yAxis.min = Math.min(...mun) < 1 ? 0 : (Math.min(...mun) - 0.5).toFixed(2)
|
||||
picEChart.value.yAxis.max = Math.max(...mun) > 4.5 ? 5 : (Math.max(...mun) + 0.5).toFixed(2)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const setColor = val => {
|
||||
return val == 3.14159
|
||||
? ''
|
||||
: val > 10000
|
||||
? '#A52a2a'
|
||||
: val > 1000
|
||||
? '#ff9900'
|
||||
: val > 100
|
||||
? '#ffcc33'
|
||||
: val > 0
|
||||
? '#3399ff'
|
||||
: val == 0
|
||||
? '#00B07D'
|
||||
: ''
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -290,7 +193,7 @@ defineExpose({ open })
|
||||
color: #fff;
|
||||
}
|
||||
.background3 {
|
||||
background-color: #A52a2a;
|
||||
background-color: #a52a2a;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
|
||||
@@ -20,20 +20,20 @@
|
||||
<div class="title">
|
||||
<span>
|
||||
污染告警
|
||||
<el-popover placement="right" :width="170" trigger="hover">
|
||||
<el-popover placement="right" :width="190" trigger="hover">
|
||||
<template #reference>
|
||||
<WarningFilled class="WarningFilled" />
|
||||
</template>
|
||||
<div class="text">
|
||||
<span style="color: #00b07d">无污染：(0 , 1]</span>
|
||||
<span style="color: #00B07D">无污染：0</span>
|
||||
<br />
|
||||
<span style="color: #3399ff">轻微污染：(1 , 1.2]</span>
|
||||
<span style="color: #3399ff">轻微污染：(0 , 100]</span>
|
||||
<br />
|
||||
<span style="color: #ffcc33">轻度污染：(1.2 , 1.6]</span>
|
||||
<span style="color: #ffcc33">轻度污染：(100 , 1000]</span>
|
||||
<br />
|
||||
<span style="color: #ff9900">中度污染：(1.6 , 2]</span>
|
||||
<span style="color: #ff9900">中度污染：(1000 , 10000]</span>
|
||||
<br />
|
||||
<span style="color: #a52a2a">重度污染：(2 , +∞)</span>
|
||||
<span style="color: #A52a2a">重度污染：(10000</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
|
||||
@@ -13,8 +13,10 @@
|
||||
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
|
||||
<div class="card">
|
||||
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
|
||||
<span :style="`color: ${item.color[0]}; cursor:pointer`"
|
||||
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
|
||||
<span
|
||||
:style="`color: ${item.color[0]}; cursor:pointer`"
|
||||
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)"
|
||||
>
|
||||
{{ item.list[4].numOne }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -23,8 +25,10 @@
|
||||
<!-- 监测规模 列表 -->
|
||||
<div>
|
||||
<div class="vcl mt5">
|
||||
<p v-for="(item, i) in vList"
|
||||
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
|
||||
<p
|
||||
v-for="(item, i) in vList"
|
||||
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'"
|
||||
>
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -48,8 +52,10 @@
|
||||
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
|
||||
{{ item.list[3].numOne }}
|
||||
</p>
|
||||
<p style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
|
||||
@click.stop="open(i)">
|
||||
<p
|
||||
style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
|
||||
@click.stop="open(i)"
|
||||
>
|
||||
详情
|
||||
</p>
|
||||
</div>
|
||||
@@ -66,28 +72,37 @@
|
||||
<div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
|
||||
<div v-for="item in countList">
|
||||
<div class="title mt5" style="font-weight: 500">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
{{ item.title }}
|
||||
<!-- <img src="@/assets/img/TJ.png" />
|
||||
{{ item.title }} -->
|
||||
</div>
|
||||
<div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
|
||||
v-for="val in item.children">
|
||||
<div
|
||||
class="card-Box mt10"
|
||||
:style="`height:calc((${boxHeight.height} - 20px )/ 2);`"
|
||||
v-for="val in item.children"
|
||||
>
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">{{ val.title }}</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="num num1">
|
||||
<div @click="LookMap(val.numList, [], 0)">
|
||||
投运:
|
||||
<span>{{ val.num }}</span>
|
||||
</div>
|
||||
|
||||
<div @click="LookMap(val.onLineNumList, [], 0)">
|
||||
在线:
|
||||
<span style="color: #2dcd28">{{ val.onLineNum }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
数据完整性:
|
||||
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
在线率:
|
||||
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,7 +132,7 @@
|
||||
</div>
|
||||
<div>
|
||||
{{ item.title[2] }}:
|
||||
<span style="color: #A52a2a" @click="LookMap([], item.lineListTwo, 1)">
|
||||
<span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
|
||||
{{ item.lineNumTwo || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -127,8 +142,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="imgL" :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
|
||||
@click="show = !show" src="@/assets/img/QH.png" />
|
||||
<img
|
||||
class="imgL"
|
||||
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
|
||||
@click="show = !show"
|
||||
src="@/assets/img/QH.png"
|
||||
/>
|
||||
<div class="legeng">
|
||||
<div v-for="item in legengList">
|
||||
<span :style="`background-color: ${item.color};`"></span>
|
||||
@@ -290,7 +309,7 @@ const countList: any = ref([
|
||||
},
|
||||
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
|
||||
]
|
||||
},
|
||||
}
|
||||
// {
|
||||
// title: '上送网公司',
|
||||
// children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
|
||||
@@ -418,7 +437,7 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
|
||||
const GridDiagram = (k: any) => {
|
||||
emit('GridDiagram', k)
|
||||
}
|
||||
onMounted(() => { })
|
||||
onMounted(() => {})
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
@@ -537,7 +556,7 @@ defineExpose({ info, show })
|
||||
background-color: #edededc0;
|
||||
border-radius: 10px;
|
||||
min-height: 60px;
|
||||
max-height: 120px;
|
||||
// max-height: 120px;
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
@@ -562,6 +581,19 @@ defineExpose({ info, show })
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
.num1 {
|
||||
grid-template-columns: 1fr 1fr; /* 核心：改为2列，均分宽度 */
|
||||
grid-template-rows: auto auto;
|
||||
gap: 8px; /* 可选：子元素间距，提升美观度 */
|
||||
div {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
// justify-content: center;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BoxA {
|
||||
|
||||
@@ -6,20 +6,20 @@
|
||||
<div class="title">
|
||||
<span>
|
||||
稳态综合评估
|
||||
<el-popover placement="right" :width="150" trigger="hover">
|
||||
<el-popover placement="right" :width="190" trigger="hover">
|
||||
<template #reference>
|
||||
<WarningFilled class="WarningFilled" />
|
||||
</template>
|
||||
<div class="text">
|
||||
<span style="color: #00b07d">优质：(4.5 , 5]</span>
|
||||
<span style="color: #00b07d">无污染：0</span>
|
||||
<br />
|
||||
<span style="color: #2b7fd3">良好：(4 , 4.5]</span>
|
||||
<span style="color: #3399ff">轻微污染：(0 , 100]</span>
|
||||
<br />
|
||||
<span style="color: #ffcc33">合格：(3 , 4]</span>
|
||||
<span style="color: #ffcc33">轻度污染：(100 , 1000]</span>
|
||||
<br />
|
||||
<span style="color: #97017e">较差：(2 , 3]</span>
|
||||
<span style="color: #ff9900">中度污染：(1000 , 10000]</span>
|
||||
<br />
|
||||
<span style="color: #A52a2a">极差：[1 , 2]</span>
|
||||
<span style="color: #a52a2a">重度污染：(10000</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
@@ -32,7 +32,7 @@
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div class="mt10 TJTop">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
<!-- <img src="@/assets/img/TJ.png" />
|
||||
综合评估得分：
|
||||
<span
|
||||
:style="{
|
||||
@@ -53,35 +53,27 @@
|
||||
}"
|
||||
>
|
||||
{{ assessList.score == 3.14159 ? '/' : assessList.score }}
|
||||
<!-- {{ assessList.level }} -->
|
||||
</span>
|
||||
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="evaluate">
|
||||
<div v-for="item in assessList.children" style="min-width: 50px">
|
||||
<div v-for="item in assessList" style="min-width: 60px">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
{{ item.name }}
|
||||
<span
|
||||
class="line"
|
||||
:style="{
|
||||
background: setColor(item.score)
|
||||
}"
|
||||
></span>
|
||||
{{ item.deptName }}
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 5px"
|
||||
:style="{
|
||||
color:
|
||||
item.score == 3.14159
|
||||
? ''
|
||||
: item.score > 4.5
|
||||
? '#339966'
|
||||
: item.score > 4
|
||||
? '#2b7fd3'
|
||||
: item.score > 3
|
||||
? '#ffcc33'
|
||||
: item.score > 2
|
||||
? '#97017e'
|
||||
: item.score > 0
|
||||
? '#A52a2a'
|
||||
: ''
|
||||
color: setColor(item.score)
|
||||
}"
|
||||
>
|
||||
{{ item.score == 3.14159 ? '/' : item.score }}
|
||||
{{ setVal(item.score) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -259,6 +251,7 @@ import temporaryState from './details/temporaryState.vue'
|
||||
import technique from './details/technique.vue'
|
||||
import {
|
||||
getAssessOverview,
|
||||
getAreaPollution,
|
||||
getEvaluationOverview,
|
||||
getEventLevelEvaluation,
|
||||
getSupervisionData
|
||||
@@ -314,8 +307,7 @@ const options = ref([
|
||||
{
|
||||
label: '负序电流',
|
||||
value: '9'
|
||||
},
|
||||
|
||||
}
|
||||
])
|
||||
const technology: any = ref({})
|
||||
const harmonicType = ref('6')
|
||||
@@ -364,17 +356,17 @@ const JDlist = ref([
|
||||
{
|
||||
name: '试运行问题',
|
||||
value: 0
|
||||
},
|
||||
|
||||
}
|
||||
])
|
||||
const harmonicList: any = ref([])
|
||||
const harmonicLineRatio: any = ref(0)
|
||||
const WTList: any = ref([])
|
||||
const PollutionList = dictData.getBasicData('Pollution_Calc').filter(item => item.name == '谐波电压')
|
||||
|
||||
const value = ref(options1[0].id)
|
||||
const open = (e: number) => {
|
||||
if (e == 0) {
|
||||
evaluateRef.value.open(formRow.value)
|
||||
evaluateRef.value.open(formRow.value,assessList.value)
|
||||
} else if (e == 1) {
|
||||
steadyStateRef.value.open(formRow.value)
|
||||
} else if (e == 2) {
|
||||
@@ -383,6 +375,36 @@ const open = (e: number) => {
|
||||
techniqueRef.value.open(formRow.value)
|
||||
}
|
||||
}
|
||||
const setColor = val => {
|
||||
return val == 3.14159
|
||||
? ''
|
||||
: val > 10000
|
||||
? '#A52a2a'
|
||||
: val > 1000
|
||||
? '#ff9900'
|
||||
: val > 100
|
||||
? '#ffcc33'
|
||||
: val > 0
|
||||
? '#3399ff'
|
||||
: val == 0
|
||||
? '#00B07D'
|
||||
: ''
|
||||
}
|
||||
const setVal = val => {
|
||||
return val == 3.14159
|
||||
? '/'
|
||||
: val > 10000
|
||||
? '重度污染'
|
||||
: val > 1000
|
||||
? '中度污染'
|
||||
: val > 100
|
||||
? '轻度污染'
|
||||
: val > 0
|
||||
? '轻微污染'
|
||||
: val == 0
|
||||
? '无污染'
|
||||
: ''
|
||||
}
|
||||
const info = (row: any) => {
|
||||
let form = {
|
||||
...row,
|
||||
@@ -402,7 +424,7 @@ const info = (row: any) => {
|
||||
transientChange()
|
||||
// 综合评估
|
||||
setTimeout(() => {
|
||||
getAssessOverview(form).then(res => {
|
||||
getAreaPollution({ ...form, ids: [PollutionList[0].id] }).then(res => {
|
||||
assessList.value = res.data
|
||||
})
|
||||
}, 300)
|
||||
@@ -413,8 +435,7 @@ const info = (row: any) => {
|
||||
JDlist.value[1].value = res.data?.onLineNum || 0
|
||||
JDlist.value[2].value = res.data?.userNum || 0
|
||||
JDlist.value[3].value = res.data?.trialRunNum || 0
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
const harmonicChange = () => {
|
||||
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
|
||||
@@ -502,7 +523,7 @@ defineExpose({ info, show })
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--el-color-primary);
|
||||
// background: var(--el-color-primary);
|
||||
margin-right: 2px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user