admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue

<template>
    <!-- 综合评估详情 -->
    <el-dialog draggable title="综合评估统计" v-model="dialogVisible" width="1400px">
        <div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
                <vxe-column field="deptName" title="地市" />
                <vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
                <vxe-column field="qualifyData" title="指标合格率(%)" :formatter="formatter" />
                
                    <vxe-colgroup title="电压偏差">
                        <vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
                        <vxe-column field="vdevQualifyData" title="指标合格率(%)" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup title="频率偏差">
                        <vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
                        <vxe-column field="freqQualifyData" title="指标合格率(%)" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup title="电压总谐波畸变率">
                        <vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
                        <vxe-column field="harmQualifyData" title="指标合格率(%)" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup title="电压闪变">
                        <vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
                        <vxe-column field="flickerQualifyData" title="指标合格率(%)" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup title="三相电压不平衡度">
                        <vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
                        <vxe-column field="unbalanceQualifyData" title="指标合格率(%)" :formatter="formatter" />
                    </vxe-colgroup>
            
            </vxe-table>
        </div>
        <div style="height: 300px; margin-top: 10px">
            <MyEChart style="height: 300px" :options="picEChart" />
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getAssessDetail, getAssessTrend } from '@/api/device-boot/panorama'
const dialogVisible: any = ref(false)

const tableData: any = ref([])

const picEChart = ref()
const open = async (row: any) => {
    getAssessDetail(row).then(res => {
        tableData.value = res.data
    })
    getAssessTrend(row).then(res => {
        picEChart.value = {
            title: {
                text: '各地市综合评估趋势对比'
            },
            xAxis: {
                name: '时间',
                data: res.data[0].children.map((item: any) => item.dataTime)
            },
            grid: {
                bottom: '10px'
            },
            yAxis: {
                name: ''
            },
            options: {
                dataZoom: false,
                series: []
            }
        }

        let list: any = []
        let time: any = []
        res.data.forEach((item: any, num: any) => {
            time.push(item.deptName)
            list.push([])
            item.children.forEach((val: any, i: any) => {
                list[num].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 '/'
    } else {
        return row.cellValue
    }
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>