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-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-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 } 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
        picEChart.value = {
            tooltip: {
                formatter: function (params: any) {
                    let tips = ''

                    if (params[0].value == 3.14159) {
                        tips += params[0].name + ':暂无数据<br/>'
                    } else {
                        tips += params[0].name + ':' + params[0].value + '%<br/>'
                    }

                    return tips
                }
            },
            title: {
                text: ''
            },
            xAxis: {
                name: '(区域)',
                data: res.data.map((item: any) => item.deptName)
            },
            yAxis: {
                name: '',
                min: 0,
                max: 100
            },
            options: {
                series: [
                    {
                        name: '评估得分',
                        type: 'bar',

                        data: res.data.map((item: any) => item.assessData)
                    }
                ]
            }
        }
    })

    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>