541 lines
23 KiB
Vue
541 lines
23 KiB
Vue
<template>
|
|
<div class="default-main">
|
|
<TableHeader area datePicker ref="header">
|
|
<template v-slot:select>
|
|
<el-form-item label="电网标志">
|
|
<el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志">
|
|
<el-option v-for="item in sign" :key="item.id" :label="item.name" :value="item.algoDescribe" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
</TableHeader>
|
|
<div v-loading="tableStore.table.loading" class="pr10">
|
|
<el-row>
|
|
<el-col :span="12" class="pd10" v-if="!VITE_FLAG">
|
|
<el-tag style="background: #339966" class="tag" size="small">5级</el-tag>
|
|
<span style="color: #339966" class="text">:优秀--(4.5,5]</span>
|
|
<el-tag style="background: #3399ff" class="tag" size="small">4级</el-tag>
|
|
<span style="color: #3399ff" class="text">:良好--(4,4.5]</span>
|
|
<el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
|
|
<span style="color: #ffcc33" class="text">:合格--(3,4]</span>
|
|
<el-tag style="background: #ff9900" class="tag" size="small">2级</el-tag>
|
|
<span style="color: #ff9900" class="text">:较差--(2,3]</span>
|
|
<el-tag style="background: #a52a2a" class="tag" size="small">1级</el-tag>
|
|
<span style="color: #a52a2a" class="text">:极差--[1,2]</span>
|
|
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
|
|
<div class="cardBox">
|
|
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
|
<template #header>
|
|
<div style="cursor: pointer">
|
|
<el-tag
|
|
v-if="item.data == 3.14159 || item.data == 0"
|
|
style="background: #ccc; color: #fff"
|
|
size="small"
|
|
>
|
|
无
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
|
|
style="background: #339966; color: #fff"
|
|
size="small"
|
|
>
|
|
5级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
|
|
style="background: #3399ff; color: #fff"
|
|
size="small"
|
|
>
|
|
4级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
|
|
style="background: #ffcc33; color: #fff"
|
|
size="small"
|
|
>
|
|
3级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
|
|
style="background: #ff9900; color: #fff"
|
|
size="small"
|
|
>
|
|
4级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
|
|
style="background: #a52a2a; color: #fff"
|
|
size="small"
|
|
>
|
|
1级
|
|
</el-tag>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
<div class="card-content">
|
|
<div class="card-item" v-for="(item1, index1) in item.children" :key="index1">
|
|
<el-tag
|
|
v-if="item1.data == 3.14159 || item1.data == 0"
|
|
style="background: #ccc; color: #fff"
|
|
size="small"
|
|
>
|
|
无
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="4.5 < item1.data && item1.data <= 5 && item1.data !== 3.14159"
|
|
style="background: #339966; color: #fff"
|
|
size="small"
|
|
>
|
|
5级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="4 < item1.data && item1.data <= 4.5 && item1.data !== 3.14159"
|
|
style="background: #3399ff; color: #fff"
|
|
size="small"
|
|
>
|
|
4级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159"
|
|
style="background: #ffcc33; color: #fff"
|
|
size="small"
|
|
>
|
|
3级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159"
|
|
style="background: #ff9900; color: #fff"
|
|
size="small"
|
|
>
|
|
2级
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159"
|
|
style="background: #a52a2a; color: #fff"
|
|
size="small"
|
|
>
|
|
1级
|
|
</el-tag>
|
|
<span class="xdf">
|
|
<el-tooltip
|
|
:show-arrow="false"
|
|
:offset="-0"
|
|
:content="item1.name"
|
|
placement="bottom-start"
|
|
|
|
>
|
|
<div class="tooltipText">
|
|
{{ item1.name }}
|
|
</div>
|
|
</el-tooltip>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="VITE_FLAG ? 24 : 12">
|
|
<my-echart class="tall" :options="echartList" />
|
|
<div class="tall mb10">
|
|
<vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
|
|
<vxe-column field="name" title="名称"></vxe-column>
|
|
<vxe-column field="zc" title="综合评估值">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.data == 3.14159" style="color: #000">暂无数据</span>
|
|
<span v-if="scope.row.data !== 3.14159" style="color: #000">
|
|
{{ scope.row.data }}
|
|
</span>
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column field="monitors" title="监测点个数(个)"></vxe-column>
|
|
<vxe-column field="level" title="评估等级"></vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
|
|
import { useDictData } from '@/stores/dictData'
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
import TableStore from '@/utils/tableStore'
|
|
import { ref, onMounted, provide } from 'vue'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import * as echarts from 'echarts/core'
|
|
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
|
|
defineOptions({
|
|
name: 'harmonic-boot/area/powerAssessment'
|
|
})
|
|
const dictData = useDictData()
|
|
const echartList = ref({})
|
|
const sign = dictData.getBasicData('power_flag')
|
|
const header = ref()
|
|
const options = dictData.getBasicData('Pollution_Statis', [
|
|
'I_Neg',
|
|
'V_Inharm',
|
|
'V_Dev',
|
|
'V_Unbalance',
|
|
'Plt',
|
|
'Freq_Dev'
|
|
])
|
|
const tableStore = new TableStore({
|
|
url: '/harmonic-boot/comAccess/getComAccessData',
|
|
method: 'POST',
|
|
column: [],
|
|
loadCallback: () => {
|
|
histogram(tableStore.table.data)
|
|
header.value.areaRef.change()
|
|
}
|
|
})
|
|
provide('tableStore', tableStore)
|
|
|
|
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
|
tableStore.table.params.monitorFlag = 2
|
|
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
|
|
|
|
tableStore.table.params.statisticalType = {}
|
|
|
|
// 柱状图数据处理
|
|
const histogram = (res: any) => {
|
|
echartList.value = {
|
|
title: {
|
|
text: '区域'
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
xAxis: {
|
|
name: '区域',
|
|
data: res.map((item: any) => item.name)
|
|
},
|
|
yAxis: {
|
|
name: '等级', // 给X轴加单位
|
|
min: 0,
|
|
max: 5,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
|
|
// 这里重新定义就可以
|
|
formatter: function (value, index) {
|
|
var texts = []
|
|
if (value == 1) {
|
|
texts.push('1级')
|
|
} else if (value == 2) {
|
|
texts.push('2级')
|
|
} else if (value == 3) {
|
|
texts.push('3级')
|
|
} else if (value == 4) {
|
|
texts.push('4级')
|
|
} else if (value == 5) {
|
|
texts.push('5级')
|
|
}
|
|
return texts
|
|
}
|
|
}
|
|
},
|
|
|
|
options: {
|
|
dataZoom: null,
|
|
series: [
|
|
{
|
|
name: '评估值',
|
|
type: 'bar',
|
|
data: res.map((item: any) => {
|
|
return item.data == 3.14159 ? 0.14159 : item.data == 0 ? 0.14158 : item.data
|
|
}),
|
|
barMaxWidth: 30,
|
|
barMinHeight: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
// 随机显示
|
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
|
|
|
// 定制显示（按顺序）
|
|
color: function (params) {
|
|
if (4.5 < params.value && params.value <= 5 && params.value !== 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#339966'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (4 < params.value && params.value <= 4.5 && params.value !== 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#3399FF'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#FFCC33'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#FF9900'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (params.value >= 1 && params.value <= 2 && params.value !== 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#A52a2a'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (params.value == 0.2) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#ccc'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
} else if (params.value == 0.14158) {
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: '#ccc'
|
|
}
|
|
],
|
|
false
|
|
)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
markLine: {
|
|
silent: false,
|
|
symbol: 'circle',
|
|
lineStyle: {
|
|
color: 'red',
|
|
width: 1
|
|
},
|
|
emphasis: {
|
|
lineStyle: {
|
|
width: 1
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
name: '',
|
|
yAxis: 1,
|
|
lineStyle: {
|
|
color: '#A52a2a'
|
|
},
|
|
label: {
|
|
// position:"middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#A52a2a'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '',
|
|
yAxis: 2,
|
|
lineStyle: {
|
|
color: '#FF9900'
|
|
},
|
|
label: {
|
|
// position:"middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#FF9900'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '',
|
|
yAxis: 3,
|
|
lineStyle: {
|
|
color: '#FFCC33'
|
|
},
|
|
label: {
|
|
// position:"middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#FFCC33'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '',
|
|
yAxis: 4,
|
|
lineStyle: {
|
|
color: '#3399FF'
|
|
},
|
|
label: {
|
|
// position:"middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#3399FF'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '',
|
|
yAxis: 5,
|
|
lineStyle: {
|
|
color: '#339966'
|
|
},
|
|
label: {
|
|
// position:"middle",
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#339966'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
})
|
|
const layout = mainHeight(133) as any
|
|
const layout1 = mainHeight(93) as any
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tall {
|
|
height: calc(v-bind('layout1.height') / 2);
|
|
}
|
|
|
|
.tag {
|
|
color: #fff;
|
|
border: #fff;
|
|
margin-left: 5px;
|
|
width: 28px;
|
|
}
|
|
|
|
.text {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
:deep(.cardBox) {
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
grid-template-rows: max-content;
|
|
grid-gap: 10px;
|
|
justify-content: center;
|
|
|
|
.el-card {
|
|
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
|
font-weight: bold;
|
|
|
|
.el-card__header {
|
|
padding: 10px !important;
|
|
color: #fff;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.card-content {
|
|
height: 200px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
overflow-y: auto;
|
|
color: #000;
|
|
|
|
.card-item {
|
|
margin-bottom: 20px;
|
|
width: 50%;
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xdf {
|
|
width: 70%;
|
|
}
|
|
|
|
.tooltipText {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
// width: 50%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|