联调市详情页面

This commit is contained in:
GGJ
2024-04-29 16:37:07 +08:00
parent 0c7b5ff4d6
commit 830d2017a5
20 changed files with 1295 additions and 141 deletions

View File

@@ -39,7 +39,7 @@
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getAssessDetail } from '@/api/device-boot/panorama'
import { getAssessDetail, getAssessTrend } from '@/api/device-boot/panorama'
const dialogVisible: any = ref(false)
const tableData: any = ref([])
@@ -48,50 +48,54 @@ const picEChart = ref()
const open = async (row: any) => {
getAssessDetail(row).then(res => {
tableData.value = res.data
})
getAssessTrend(row).then(res => {
picEChart.value = {
tooltip: {
formatter: function (params: any) {
let tips = ''
if (params[0].value == 3.14159) {
tips += params[0].name + ':暂无数据<br/>'
} else {
tips += params[0].name + ':' + params[0].value + '%<br/>'
}
return tips
}
},
title: {
text: ''
text: '各地市综合评估趋势对比'
},
xAxis: {
name: '(区域)',
data: res.data.map((item: any) => item.deptName)
},
grid: {
bottom: '10px'
},
yAxis: {
name: '',
min: 0,
max: 100
name: ''
},
options: {
series: [
{
name: '评估得分',
type: 'bar',
data: res.data.map((item: any) => item.assessData)
}
]
dataZoom: false,
series: []
}
}
let list: any = []
let time: any = []
res.data.forEach((item: any, num: any) => {
time = []
item.children.forEach((val: any, i: any) => {
if (num == 0) {
list.push([])
}
time.push(val.dataTime)
list[i].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
})
})
})
dialogVisible.value = true
}
const formatter = (row: any) => {
if (row.cellValue == 3.14159) {
return '暂无数据'
return '/'
} else {
return row.cellValue
}

View File

@@ -17,7 +17,7 @@
<span>分布统计</span>
<el-select
v-model="statisticalType"
:value-key='id'
value-key="id"
style="width: 120px; margin-right: 80px"
@change="statiStics"
>

View File

@@ -14,15 +14,37 @@
</el-col>
<el-col :span="12">
<div class="title">
<span>污染告警</span>
<span>
污染告警
<el-popover placement="right" :width="150" trigger="hover">
<template #reference>
<WarningFilled class="WarningFilled" />
</template>
<div class="text">
<span style="color: #00b07d">无污染(0,1]</span>
<br />
<span style="color: #3399ff">轻微污染(1,1.2]</span>
<br />
<span style="color: #ffcc33">轻度污染(1.2,1.6]</span>
<br />
<span style="color: #ff9900">中度污染(1.6,2]</span>
<br />
<span style="color: #cc0000">重度污染(2,+)</span>
</div>
</el-popover>
</span>
<el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<div class="pie">
<MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
</div>
</el-col>
</el-row>
<div>
<div class="title">
<div class="title mb10">
<span>变电站详细列表</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
@@ -40,11 +62,19 @@ import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { WarningFilled } from '@element-plus/icons-vue'
import { getPollutionAlarmPageData, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
const dictData = useDictData()
const dialogVisible: any = ref(false)
const time = ref('1')
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
const options: any = dictData.getBasicData('Pollution_Statis').filter(item => {
if (item.code == 'V_Harmonic' || item.code == 'I_All') {
return item
}
})
const contaminate = ref(options[0].id)
const rowList: any = ref({})
const trendEChart: any = ref({})
const tableData: any = ref([])
@@ -62,7 +92,16 @@ const open = async (row: any) => {
}
analysis(1)
// 污染
getPollutionAlarmData(rowList.value).then(res => {
contaminateC()
// 列表
getPollutionAlarmPageData(rowList.value).then(res => {
tableData.value = res.data.records
})
dialogVisible.value = true
}
const contaminateC = () => {
getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
let data = []
let a1 = 0
@@ -70,7 +109,7 @@ const open = async (row: any) => {
let a3 = 0
let a4 = 0
let a5 = 0
if (row.isUpToGrid == 0) {
if (rowList.value.isUpToGrid == 0) {
data = res.data.info
} else {
data = res.data.gwInfo
@@ -111,7 +150,7 @@ const open = async (row: any) => {
name: `重度污染:${a5}`
}
]
const color = ['#00B07D', '#FFAF00', '#FF7D00', '#B90000', '#62298B']
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#cc0000']
list.forEach((item, i) => {
picEChart.value[i] = {
@@ -208,15 +247,9 @@ const open = async (row: any) => {
}
})
})
// 列表
getPollutionAlarmPageData(rowList.value).then(res => {
tableData.value = res.data.records
})
dialogVisible.value = true
}
const analysis = (e: any) => {
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
// 分析
getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
let name = []
@@ -262,9 +295,9 @@ const analysis = (e: any) => {
}
const formatter = (row: any) => {
if (row.column.field == 'dataV') {
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
return row.cellValue == 3.14159 ? '/' : row.cellValue
} else if (row.column.field == 'data') {
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
return row.cellValue == 3.14159 ? '/' : row.cellValue
} else if (row.column.field == 'voltageLevel') {
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
} else {
@@ -276,7 +309,6 @@ const handleClose = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
@@ -286,10 +318,15 @@ defineExpose({ open })
.title {
display: flex;
justify-content: space-between;
position: relative;
span {
font-weight: 550;
font-size: 18px;
}
.WarningFilled {
width: 16px;
cursor: pointer;
}
}
.pie {
display: flex;

View File

@@ -57,16 +57,16 @@
<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-column title="超标天数">
<template #default="scope">
<span>{{ scope.row.list[i].overDay }}</span>
</template>
</vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
@@ -204,23 +204,6 @@ const echart = (row: any) => {
})
})
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)
}

View File

@@ -1,6 +1,6 @@
<!-- 暂态 -->
<template>
<el-dialog draggable title="暂态电能质量水平评详情" v-model="dialogVisible" width="1400px">
<el-dialog draggable title="暂态电能质量水平评详情" v-model="dialogVisible" width="1400px">
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="devName" title="所属区域" />

View File

@@ -17,8 +17,8 @@
<span>分布统计</span>
</div>
<div class="pie">
<MyEChart style="height: 260px; width: 60%" :options="picEChart" />
<el-table size="small" height="260px" style="width: 35%" :data="picList">
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
<el-table size="small" height="260px" style="width: 50%" :data="picList">
<el-table-column prop="orgName" width="80px" align="center"></el-table-column>
<el-table-column prop="onlineEvaluate" label="终端评价" align="center">
<template #default="scope">
@@ -42,7 +42,8 @@
</span>
</template>
</el-table-column>
<el-table-column prop="devCount" label="数" align="center"></el-table-column>
<el-table-column prop="devCount" label="在运终端数" align="center" />
<el-table-column prop="devCount" label="在线终端数" align="center" />
</el-table>
</div>
</el-col>
@@ -141,12 +142,12 @@ const open = async (row: any) => {
endAngle: 0,
labelLine: {
length: 8,
length2: 50,
length2: 30,
show: true
},
label: {
padding: [0, -50],
formatter: '{b}:{c}台\n\n'
padding: [0, -30],
formatter: '{b}\n\n'
},
itemStyle: {
borderColor: '#fff',
@@ -220,7 +221,7 @@ const analysis = (e: any) => {
}
const formatter = (row: any) => {
if (row.column.field == 'onlineEvaluate') {
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue * 100
return row.cellValue == 3.14159 ? '/' : row.cellValue * 100
} else {
return row.cellValue
}