233 lines
7.9 KiB
Vue
233 lines
7.9 KiB
Vue
<template>
|
||
<!-- 综合评估详情 -->
|
||
<el-dialog draggable title="稳态电能质量水平评估" v-model="dialogVisible" width="1400px">
|
||
<div style="display: flex">
|
||
<div style="width: 400px">
|
||
<vxe-table
|
||
v-bind="defaultAttribute"
|
||
ref="tableRef"
|
||
@cell-click="currentChangeEvent"
|
||
height="250px"
|
||
:row-config="{ isCurrent: true, isHover: true }"
|
||
:data="tableData"
|
||
style="cursor: pointer"
|
||
>
|
||
<vxe-column field="deptName" title="地市" />
|
||
<vxe-column field="score" title="污染值" sortable>
|
||
<template #default="scope">
|
||
<span
|
||
:style="{
|
||
color: setColor(scope.row.score)
|
||
}"
|
||
>
|
||
{{ scope.row.score }}
|
||
</span>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
</div>
|
||
<div class="ml10" style="width: 990px">
|
||
<vxe-table
|
||
v-bind="defaultAttribute"
|
||
@cell-click="clickAttribute"
|
||
v-loading="loadingTab"
|
||
ref="vxeRef"
|
||
height="250px"
|
||
:data="subdata"
|
||
style="cursor: pointer"
|
||
>
|
||
<vxe-column type="seq" width="70" title="序号"></vxe-column>
|
||
<vxe-column field="subName" title="变电站名称" min-width="120"></vxe-column>
|
||
<vxe-column field="lineName" title="监测点名称" align="center" min-width="120"></vxe-column>
|
||
<vxe-column field="objName" title="监测对象名称" align="center" min-width="100"></vxe-column>
|
||
<vxe-column field="loadType" title="干扰源类型" align="center" min-width="100"></vxe-column>
|
||
<vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
|
||
<vxe-column field="vharmonicValue" title="污染值" sortable min-width="80">
|
||
<template #default="scope">
|
||
<span
|
||
:style="{
|
||
color: setColor(scope.row.vharmonicValue)
|
||
}"
|
||
>
|
||
{{ scope.row.vharmonicValue }}
|
||
</span>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
</div>
|
||
</div>
|
||
<div style="height: 300px; margin-top: 10px; position: relative" v-loading="loading">
|
||
<!-- <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>
|
||
</el-radio-group>
|
||
<el-radio-group v-model="type" size="small" @change="analysis">
|
||
<el-radio-button label="1">年</el-radio-button>
|
||
<el-radio-button label="3">月</el-radio-button>
|
||
</el-radio-group>
|
||
</div> -->
|
||
|
||
<MyEChart style="height: 300px" :options="picEChart" @echartClick="echartClick" />
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, nextTick } from 'vue'
|
||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { getAssessDetail, getAssessTrend, downPollutionSensitiveUser } from '@/api/device-boot/panorama'
|
||
import { useRoute } from 'vue-router'
|
||
const router = useRouter()
|
||
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 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`
|
||
downPollutionSensitiveUser({ ...rowList.value, ids: [PollutionList[0].id], deptId: rowList.value.id }).then(res => {
|
||
const first10Items = res.data.slice(0, 10)
|
||
picEChart.value = {
|
||
title: {
|
||
text: '污染值排名前十敏感及重要用户'
|
||
},
|
||
|
||
xAxis: {
|
||
name: '',
|
||
data: first10Items.map((item: any) => item.projectName.split('(')[0].trim()),
|
||
axisLabel: {
|
||
rotate: 20 // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
|
||
}
|
||
},
|
||
grid: {
|
||
bottom: 10
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
yAxis: {
|
||
name: ''
|
||
},
|
||
options: {
|
||
dataZoom: false,
|
||
series: [
|
||
{
|
||
// name: time[i],
|
||
name: '污染值',
|
||
type: 'bar',
|
||
data: first10Items.map((item: any) => item.subValue),
|
||
itemStyle: {
|
||
color: function (params) {
|
||
// params.value 是当前柱子的数值
|
||
const value = params.value
|
||
return setColor(value)
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
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'
|
||
: ''
|
||
}
|
||
const echartClick = (res: any) => {
|
||
router.push({
|
||
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
|
||
query: {
|
||
type: '4',
|
||
name: res.name,
|
||
t: Date.now()
|
||
}
|
||
})
|
||
}
|
||
const clickAttribute = (row: any) => {
|
||
router.push({
|
||
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
|
||
query: {
|
||
type: '1',
|
||
name: row.row.lineName,
|
||
t: Date.now()
|
||
}
|
||
})
|
||
}
|
||
defineExpose({ open })
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-dialog__body) {
|
||
max-height: none !important;
|
||
}
|
||
.conclusion {
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
|
||
border-radius: 4px;
|
||
}
|
||
.background1 {
|
||
background-color: #339966;
|
||
color: #fff;
|
||
}
|
||
.background2 {
|
||
background-color: #97017e;
|
||
color: #fff;
|
||
}
|
||
.background3 {
|
||
background-color: #a52a2a;
|
||
color: #fff;
|
||
}
|
||
:deep(.el-select) {
|
||
min-width: 80px !important;
|
||
}
|
||
</style>
|