admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/details/evaluate.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" 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 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>