261 lines
8.7 KiB
Vue
261 lines
8.7 KiB
Vue
<template>
|
||
<!-- 综合评估详情 -->
|
||
<el-dialog draggable title="稳态电能质量水平评估" v-model="dialogVisible" width="1400px">
|
||
<div class="title mb5">
|
||
<span>区域污染水平评估</span>
|
||
</div>
|
||
<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 pr20" style="width: 980px">
|
||
<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 class="title mb5 mt10">
|
||
<span>敏感及重要用户评估</span>
|
||
</div>
|
||
<div style="height: 265px; position: relative" v-loading="loading">
|
||
<vxe-table
|
||
v-bind="defaultAttribute"
|
||
ref="tableRef1"
|
||
@cell-click="pollutionClick"
|
||
height="265px"
|
||
:row-config="{ isCurrent: true, isHover: true }"
|
||
:data="pollutionValueList"
|
||
style="cursor: pointer"
|
||
>
|
||
<vxe-column title="序号" width="60" type="seq"></vxe-column>
|
||
<vxe-column field="gdName" title="供电公司" Width="150" />
|
||
<vxe-column field="subStationName" title="变电站" />
|
||
<vxe-column field="projectName" title="项目名称" />
|
||
<vxe-column field="subValue" title="谐波电压污染值" width="150" />
|
||
</vxe-table>
|
||
|
||
<!-- <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 pollutionValueList = 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) => {
|
||
|
||
// 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 => {
|
||
pollutionValueList.value = res.data.filter((item: any) => item.subValue != null)
|
||
// 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 pollutionClick = (res: any) => {
|
||
router.push({
|
||
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
|
||
query: {
|
||
type: '4',
|
||
name: res.row.projectName,
|
||
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;
|
||
}
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
span {
|
||
font-weight: 550;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.WarningFilled {
|
||
width: 16px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|