admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/details/evaluate.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"
                    @current-change="currentChangeEvent"
                    height="240px"
                    :row-config="{ isCurrent: true, isHover: true }"
                    :data="tableData"
                >
                    <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" v-loading="loadingTab" ref="vxeRef" height="240px" :data="subdata">
                    <vxe-column type="seq" width="70"></vxe-column>
                    <vxe-column field="devName" title="终端名称"></vxe-column>
                    <vxe-column field="lineName" title="监测点名称" />
                    <vxe-column field="powerFlag" title="电网标志" />
                    <vxe-column field="devType" title="终端型号"></vxe-column>
                    <vxe-column field="manufacturer" title="终端厂家"></vxe-column>
                    <vxe-column field="vharmonicValue" title="污染值" sortable>
                        <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" />
        </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, downPollutionSubCalc } from '@/api/device-boot/panorama'
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`
    downPollutionSubCalc({ ...rowList.value, ids: [PollutionList[0].id] }).then(res => {
        const first10Items = res.data.slice(0, 10)
        picEChart.value = {
            title: {
                text: '污染值排名前十变电站'
            },

            xAxis: {
                name: '',
                data: first10Items.map((item: any) => item.subStationName),
                axisLabel: {
                    rotate: 30, // 核心：倾斜 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.subVStationValue),
                        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'
        : ''
}
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>