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-11-01 11:17:12 +08:00
parent 0645462ab8
commit bb67f6e06b
6 changed files with 828 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<el-dialog v-model="dialogVisible" :title="title" width="70%">
<vxe-table height="400px" auto-resize :data="tableData" v-loading="loading" v-bind="defaultAttribute"
:key="key">
<vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="powerCompany" title="供电公司" v-if="voltageLevelFlag"></vxe-column>
<vxe-column field="substation" title="变电站" v-if="voltageLevelFlag"></vxe-column>
<vxe-column field="busBar" title="母线" v-if="voltageLevelFlag"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"
v-if="statisticalName == '谐波电压(%)' && !voltageLevelFlag"></vxe-column>
<vxe-column field="data" :title="statisticalName">
<template #default="scope">
<span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
<span v-if="scope.row.data !== -1" type="primary" size="small">
{{ scope.row.data }}
</span>
</template>
</vxe-column>
<vxe-column field="zd" title="评估">
<template #default="scope">
<span v-if="
0 <= scope.row.data &&
scope.row.data < 1 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #339966;">
无污染
</span>
<span v-if="
1 <= scope.row.data &&
scope.row.data < 1.2 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #3399ff;">
轻微污染
</span>
<span v-if="
1.2 <= scope.row.data &&
scope.row.data < 1.6 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #ffcc33;">
轻度污染
</span>
<span v-if="
1.6 <= scope.row.data &&
scope.row.data < 2 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #ff9900;">
中度污染
</span>
<span v-if="
2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
" style=" font-weight: bold;color: #cc0000;">
重度污染
</span>
<span v-if="scope.row.data == 3.14159" style="color: #000;">
暂无评估
</span>
</template>
</vxe-column>
</vxe-table>
</el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getSubstationInfoById, getLineInfoById } from '@/api/harmonic-boot/area'
const dialogVisible = ref(false)
const loading = ref(false)
const voltageLevelFlag = ref(false)
const tableData = ref([])
const title = ref('')
const key = ref(0)
const statisticalName = ref('')
const open = (row: any, flag: boolean, params: any) => {
voltageLevelFlag.value = flag
loading.value = true
title.value = row.name + '详情'
statisticalName.value = params.statisticalType.name + '(%)'
tableData.value = []
if (flag) {
getLineInfoById({ ...params, deptIndex: row.pid, id: row.id }).then((res: any) => {
tableData.value = res.data
loading.value = false
}).catch(() => {
loading.value = false
})
} else {
getSubstationInfoById({ ...params, deptIndex: row.id }).then((res: any) => {
tableData.value = res.data
loading.value = false
}).catch(() => {
loading.value = false
})
}
key.value += 1
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

291
src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/ranking.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<el-dialog v-model="dialogVisible" title="排名前10的监测点" width="1200">
<div style="height: 500px">
<my-echart class="tall" :options="echartList" />
</div>
</el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getLineRank } from '@/api/harmonic-boot/area'
import * as echarts from 'echarts/core'
const dialogVisible = ref(false)
const echartList = ref({})
const open = (row: any,) => {
getLineRank({ ...row, reportFlag: 3, id: '' }).then((res: any) => {
echartList.value = {
title: {
text: '区域'
},
tooltip: {
formatter: function (params: any) {
// console.log(params);
var tips = ''
for (var i = 0; i < params.length; i++) {
tips += params[i].name + '</br/>'
tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
}
return tips
}
},
xAxis: {
name: '监测点',
data: res.data.map((item: any) => item.name),
axisLabel: {
fontFamily: 'dinproRegular',
color: '#000',
fontSize: '12',
rotate: 30,
}
},
yAxis: {
name: '等级',// 给X轴加单位
min: 0,
max: 2,
interval: 0.2,
splitLine: {
show: false
},
axisLabel: {
show: true,
// 这里重新定义就可以
formatter: function (value, index) {
var texts = []
if (value === 1) {
texts.push('1级')
} else if (value === 1.2) {
texts.push('2级')
} else if (value === 1.4) {
texts.push('3级')
} else if (value === 1.6) {
texts.push('4级')
} else if (value === 2) {
texts.push('5级')
}
return texts
}
},
},
options: {
dataZoom: null,
series: [
{
type: 'bar',
data: res.data.map((item: any) => {
return item.data == 3.14159 ? 0.14159 : item.data
}),
barMaxWidth: 30,
itemStyle: {
normal: {
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function (params) {
if (params.value == 0 || params.value == 0.14159) {
return '#ccc'
} else if (params.value > 2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#CC0000'
}
],
false
)
} else if (1.6 < params.value && params.value <= 2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#FF9900'
}
],
false
)
} else if (1.2 < params.value && params.value <= 1.6) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#FFCC33'
}
],
false
)
} else if (1 < params.value && params.value <= 1.2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#3399FF'
}
],
false
)
} else if (
0 < params.value &&
params.value <= 1 &&
params.value >= 0 &&
params.value !== 0.05
) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#339966'
}
],
false
)
} else if (params.value == 0.05) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#999999'
}
],
false
)
}
}
}
},
markLine: {
silent: false,
symbol: 'circle',
lineStyle: {
color: 'red',
width: 1
},
emphasis: {
lineStyle: {
width: 1
}
},
data: [
{
name: '',
yAxis: 1,
lineStyle: {
color: '#339966'
},
label: {
//position: "middle",
formatter: '{b}',
textStyle: {
color: '#339966'
}
}
},
{
name: '',
yAxis: 1.2,
lineStyle: {
color: '#3399FF'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#3399FF'
}
}
},
{
name: '',
yAxis: 1.4,
lineStyle: {
color: '#FFCC33'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#FFCC33'
}
}
},
{
name: '',
yAxis: 1.6,
lineStyle: {
color: '#FF9900'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#FF9900'
}
}
},
{
name: '',
yAxis: 2,
lineStyle: {
color: '#CC0000'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#CC0000'
}
}
}
]
},
}
]
}
}
})
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

433
src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue
View File

@@ -8,7 +8,8 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-DataAnalysis">排名前10监测点</el-button>
<el-button type="primary" icon="el-icon-DataAnalysis"
@click="rankingClick(null, true)">排名前10监测点</el-button>
</el-form-item>
</template>
</TableHeader>
@@ -29,36 +30,40 @@
<div class="mt10 cardBox">
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
<template #header>
<el-tag v-if="item.data == 3.14159 || item.data == 0"
style="background: #ccc; color: #fff" size="small">
无
</el-tag>
<el-tag v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
style="background: #339966; color: #fff" size="small">
1级
</el-tag>
<el-tag v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
style="background: #3399ff; color: #fff" size="small">
2级
</el-tag>
<el-tag v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
style="background: #ffcc33; color: #fff" size="small">
3级
</el-tag>
<el-tag v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
style="background: #ff9900; color: #fff" size="small">
4级
</el-tag>
<el-tag v-if="2 <= item.data && item.data && item.data !== 3.14159"
style="background: #cc0000; color: #fff" size="small">
5级
</el-tag>
<span>{{ item.name }}</span>
<div style="cursor: pointer;" @click="queryline(item, false)">
<el-tag v-if="item.data == 3.14159 || item.data == 0"
style="background: #ccc; color: #fff" size="small">
无
</el-tag>
<el-tag v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
style="background: #339966; color: #fff" size="small">
1级
</el-tag>
<el-tag v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
style="background: #3399ff; color: #fff" size="small">
2级
</el-tag>
<el-tag v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
style="background: #ffcc33; color: #fff" size="small">
3级
</el-tag>
<el-tag v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
style="background: #ff9900; color: #fff" size="small">
4级
</el-tag>
<el-tag v-if="2 <= item.data && item.data && item.data !== 3.14159"
style="background: #cc0000; color: #fff" size="small">
5级
</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"
@click="queryline(item1.id, item1.pid, item1.name)">
@click="queryline(item1, true)">
<el-tag v-if="item1.data == 3.14159 || item1.data == 0"
style="background: #ccc; color: #fff" size="small">
无
@@ -84,9 +89,9 @@
5级
</el-tag>
<span class="xdf">
<el-tooltip :open-delay="3000" effect="light" show-arrow
:content="item1.name" popper-class="atooltip" placement="bottom-start">
<el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
popper-class="atooltip" placement="bottom-start">
<div class="tooltipText">
{{ item1.name }}
</div>
@@ -105,26 +110,69 @@
<el-col :span="12">
<my-echart class="tall" :options="echartList" />
<div class="tall">
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
>
<vxe-column field="qy" :title="titleA == '电压等级'
? '电压等级'
: titleA == '终端厂家'
? '终端厂家'
: titleA == '干扰源类型'
? '干扰源类型'
: titleA == '电网拓扑'
? '区域'
: ''
" show-overflow-tooltip></vxe-column>
<vxe-column field="jcd" title="监测点数(个数)"></vxe-column>
<vxe-column field="zc" title="通讯正常(个数)" sortable></vxe-column>
<vxe-column field="zd" title="通讯中断(个数)" sortable></vxe-column>
<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="zd" title="评估">
<template #default="scope">
<span v-if="
0 <= scope.row.data &&
scope.row.data < 1 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #339966;">
无污染
</span>
<span v-if="
1 <= scope.row.data &&
scope.row.data < 1.2 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #3399ff;">
轻微污染
</span>
<span v-if="
1.2 <= scope.row.data &&
scope.row.data < 1.6 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #ffcc33;">
轻度污染
</span>
<span v-if="
1.6 <= scope.row.data &&
scope.row.data < 2 &&
scope.row.data !== 3.14159
" style=" font-weight: bold;color: #ff9900;">
中度污染
</span>
<span v-if="
2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
" style=" font-weight: bold;color: #cc0000;">
重度污染
</span>
<span v-if="scope.row.data == 3.14159" style="color: #000;">
暂无评估
</span>
</template>
</vxe-column>
</vxe-table>
</div>
</el-col>
</el-row>
</div>
<!-- 详情 -->
<provinceDetails ref="provinceDetailsRef" />
<!-- 排名前10的监测点 -->
<ranking ref="rankingRef" />
</div>
</template>
<script setup lang="ts">
@@ -132,32 +180,34 @@ import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import provinceDetails from './components/provinceDetails.vue'
import ranking from './components/ranking.vue'
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'
defineOptions({
name: 'Region/distribution'
})
const dictData = useDictData()
const echartList = ref({})
const titleA = ref('')
const provinceDetailsRef = ref()
const rankingRef = ref()
const header = ref()
const distributionData: any = 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/PollutionSubstation/deptSubstationRelations',
method: 'POST',
column: [],
loadCallback: () => {
titleA.value = tableStore.table.params.statisticalType.name
header.value.areaRef.change()
// 处理地图数据
map(tableStore.table.data)
histogram(tableStore.table.data)
header.value.areaRef.change()
}
})
@@ -167,35 +217,28 @@ tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = options[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.reportFlag = 2
tableStore.table.params.reportFlag = 3
tableStore.table.params.serverName = 'event-boot'
// 地图数处理
const map = (res: any) => {
const rankingClick = () => {
rankingRef.value.open(tableStore.table.params)
}
const queryline = (id: any, pid: any, name: any) => {
const queryline = (row: any, flag: boolean) => {
provinceDetailsRef.value.open(row, flag, tableStore.table.params)
}
// 表格数据处理
// 柱状图数据处理
const histogram = (res: any) => {
console.log(123);
echartList.value = {
title: {
text:
titleA.value == '电压等级'
? '电压等级'
: titleA.value == '终端厂家'
? '终端厂家'
: titleA.value == '干扰源类型'
? '干扰源类型'
: titleA.value == '电网拓扑'
? header.value.areaRef.areaName
: '' // 给X轴加单位
text: '区域'
},
tooltip: {
formatter: function (params: any) {
@@ -203,49 +246,245 @@ const histogram = (res: any) => {
var tips = ''
for (var i = 0; i < params.length; i++) {
tips += params[i].name + '</br/>'
tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
}
return tips
}
},
xAxis: {
name:
titleA.value == '电压等级'
? '(电压\n等级)'
: titleA.value == '终端厂家'
? '(终端\n厂家)'
: titleA.value == '干扰源类型'
? '(干扰\n源类型)'
: titleA.value == '电网拓扑'
? '(区域)'
: '', // 给X轴加单位
data: distributionData.value.map((item: any) => item.qy)
name: '区域',
data: res.map((item: any) => item.name)
},
yAxis: {
name: '监测点数（个）' // 给X轴加单位
name: '等级',// 给X轴加单位
min: 0,
max: 2,
interval: 0.2,
splitLine: {
show: false
},
axisLabel: {
show: true,
// 这里重新定义就可以
formatter: function (value, index) {
var texts = []
if (value === 1) {
texts.push('1级')
} else if (value === 1.2) {
texts.push('2级')
} else if (value === 1.4) {
texts.push('3级')
} else if (value === 1.6) {
texts.push('4级')
} else if (value === 2) {
texts.push('5级')
}
return texts
}
},
},
options: {
dataZoom: null,
series: [
{
// name: '暂降次数',
type: 'bar',
data: distributionData.value.map((item: any) => item.jcd),
data: res.map((item: any) => {
return item.data == 3.14159 ? 0.14159 : item.data
}),
barMaxWidth: 30,
itemStyle: {
normal: {
color: '#07CCCA'
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function (params) {
if (params.value == 0 || params.value == 0.14159) {
return '#ccc'
} else if (params.value > 2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#CC0000'
}
],
false
)
} else if (1.6 < params.value && params.value <= 2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#FF9900'
}
],
false
)
} else if (1.2 < params.value && params.value <= 1.6) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#FFCC33'
}
],
false
)
} else if (1 < params.value && params.value <= 1.2) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#3399FF'
}
],
false
)
} else if (
0 < params.value &&
params.value <= 1 &&
params.value >= 0 &&
params.value !== 0.05
) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#339966'
}
],
false
)
} else if (params.value == 0.05) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: '#999999'
}
],
false
)
}
}
}
},
label: {
show: true,
position: 'top',
textStyle: {
//数值样式
color: '#000'
markLine: {
silent: false,
symbol: 'circle',
lineStyle: {
color: 'red',
width: 1
},
fontSize: 12
}
emphasis: {
lineStyle: {
width: 1
}
},
data: [
{
name: '',
yAxis: 1,
lineStyle: {
color: '#339966'
},
label: {
//position: "middle",
formatter: '{b}',
textStyle: {
color: '#339966'
}
}
},
{
name: '',
yAxis: 1.2,
lineStyle: {
color: '#3399FF'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#3399FF'
}
}
},
{
name: '',
yAxis: 1.4,
lineStyle: {
color: '#FFCC33'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#FFCC33'
}
}
},
{
name: '',
yAxis: 1.6,
lineStyle: {
color: '#FF9900'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#FF9900'
}
}
},
{
name: '',
yAxis: 2,
lineStyle: {
color: '#CC0000'
},
label: {
// position: "middle",
formatter: '{b}',
textStyle: {
color: '#CC0000'
}
}
}
]
},
}
]
}
@@ -294,8 +533,12 @@ const layout1 = mainHeight(93) as any
.el-card__header {
padding: 10px !important;
color: #fff;
display: flex;
justify-content: space-between;
div {
display: flex;
justify-content: space-between;
}
}
.el-card__body {
@@ -314,6 +557,7 @@ const layout1 = mainHeight(93) as any
margin-bottom: 20px;
width: 50%;
display: flex;
cursor: pointer;
}
@@ -337,5 +581,4 @@ const layout1 = mainHeight(93) as any
}
}
</style>