联调市详情页面
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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="所属区域" />
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user