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="assessLevel" title="综合评估结论">
                    <template #default="scope">
                        <!-- class="conclusion"
                            :class="
                                scope.row.assessLevel == '特质'
                                    ? 'background1'
                                    : scope.row.assessLevel == '较差'
                                    ? 'background2'
                                    : scope.row.assessLevel == '极差'
                                    ? 'background3'
                                    : ''
                            " -->
                        <span>
                            {{ scope.row.assessData }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="qualifyData" title="指标合格率(%)" />

                <!-- <vxe-colgroup title="评估结论">
                    <vxe-column field="vdevAssessLevel" title="电压偏差">
                        <template #default="scope">
                            <span
                                class="conclusion"
                                :class="
                                    scope.row.vdevAssessLevel == '特质'
                                        ? 'background1'
                                        : scope.row.vdevAssessLevel == '较差'
                                        ? 'background2'
                                        : scope.row.vdevAssessLevel == '极差'
                                        ? 'background3'
                                        : ''
                                "
                            >
                                {{ scope.row.vdevAssessLevel }}
                            </span>
                        </template>
                    </vxe-column>

                    <vxe-column field="freqAssessLevel" title="频率偏差">
                        <template #default="scope">
                            <span
                                class="conclusion"
                                :class="
                                    scope.row.freqAssessLevel == '特质'
                                        ? 'background1'
                                        : scope.row.freqAssessLevel == '较差'
                                        ? 'background2'
                                        : scope.row.freqAssessLevel == '极差'
                                        ? 'background3'
                                        : ''
                                "
                            >
                                {{ scope.row.freqAssessLevel }}
                            </span>
                        </template>
                    </vxe-column>

                    <vxe-column field="harmAssessLevel" title="电压总谐波畸变率">
                        <template #default="scope">
                            <span
                                class="conclusion"
                                :class="
                                    scope.row.harmAssessLevel == '特质'
                                        ? 'background1'
                                        : scope.row.harmAssessLevel == '较差'
                                        ? 'background2'
                                        : scope.row.harmAssessLevel == '极差'
                                        ? 'background3'
                                        : ''
                                "
                            >
                                {{ scope.row.harmAssessLevel }}
                            </span>
                        </template>
                    </vxe-column>

                    <vxe-column field="flickerAssessLevel" title="电压闪变">
                        <template #default="scope">
                            <span
                                class="conclusion"
                                :class="
                                    scope.row.flickerAssessLevel == '特质'
                                        ? 'background1'
                                        : scope.row.flickerAssessLevel == '较差'
                                        ? 'background2'
                                        : scope.row.flickerAssessLevel == '极差'
                                        ? 'background3'
                                        : ''
                                "
                            >
                                {{ scope.row.flickerAssessLevel }}
                            </span>
                        </template>
                    </vxe-column>

                    <vxe-column field="unbalanceAssessLevel" title="三相电压不平衡度">
                        <template #default="scope">
                            <span
                                class="conclusion"
                                :class="
                                    scope.row.unbalanceAssessLevel == '特质'
                                        ? 'background1'
                                        : scope.row.unbalanceAssessLevel == '较差'
                                        ? 'background2'
                                        : scope.row.unbalanceAssessLevel == '极差'
                                        ? 'background3'
                                        : ''
                                "
                            >
                                {{ scope.row.unbalanceAssessLevel }}
                            </span>
                        </template>
                    </vxe-column>
                </vxe-colgroup> -->
            </vxe-table>
        </div>
        <div style="height: 300px; margin-top: 10px; position: relative" v-loading="loading">
            <!-- <el-select
                v-model="time"
                size="small"
               
                @change="analysis"
            >
                <el-option label="年" value="1" />
                <el-option label="月" value="3" />
            </el-select> -->
            <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 } 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 rowList: any = ref({})
const type = ref('1')
const city = ref('0')
const loading = ref(false)
const tableData: any = ref([])

const picEChart = ref()
const open = async (row: any) => {
    getAssessDetail(row).then(res => {
        tableData.value = res.data
    })
    rowList.value = row
    analysis()
    dialogVisible.value = true
}
const analysis = () => {
    loading.value = true
    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
    getAssessTrend({ ...rowList.value, searchBeginTime: time, type: type.value, areaType: city.value }).then(res => {
        picEChart.value = {
            title: {
                text: '各地市综合评估趋势对比'
            },
            legend: {
                right: 120,
                top: 20
            },
            // tooltip: {
            //     formatter: function (params: any) {
            //         // console.log(123, params)

            //         var tips = ''

            //         for (var i = 0; i < params.length; i++) {
            //             console.log('🚀 ~ getAssessTrend ~ params[i].value:', params[i].value)

            //             tips +=
            //                 params[i].seriesName +
            //                 ':' +
            //                 `<span style="color:${
            //                     params[i].value > 4.5
            //                         ? ''
            //                         : params[i].value > 4
            //                         ? ''
            //                         : params[i].value > 3
            //                         ? ''
            //                         : params[i].value > 2
            //                         ? '#97017e'
            //                         : params[i].value > 0
            //                         ? '#A52a2a'
            //                         : ''
            //                 }">
            //                     ${
            //                         params[i].value > 4.5
            //                             ? '优质'
            //                             : params[i].value > 4
            //                             ? '良好'
            //                             : params[i].value > 3
            //                             ? '一般'
            //                             : params[i].value > 2
            //                             ? '较差'
            //                             : params[i].value > 0
            //                             ? '极差'
            //                             : ''
            //                     }
            //                     </span>` +
            //                 '</br>'
            //         }
            //         return tips
            //     }
            // },
            xAxis: {
                name: '时间',
                data: res.data[0].children.map((item: any) => item.dataTime)
            },

            grid: {
                bottom: '10px',
                top: '60px'
            },

            yAxis: {
                name: ''
            },
            options: {
                dataZoom: false,
                series: []
            }
        }

        let list: any = []
        let time: any = []
        let mun: any = []
        res.data.forEach((item: any, num: any) => {
            time.push(item.deptName)
            list.push([])
            item.children.forEach((val: any, i: any) => {
                mun.push(val.score == 3.14159 ? null : val.score)
                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
            })
        })
        picEChart.value.yAxis.min = Math.min(...mun) < 1 ? 0 : (Math.min(...mun) - 0.5).toFixed(2)
        picEChart.value.yAxis.max = Math.max(...mun) > 4.5 ? 5 : (Math.max(...mun) + 0.5).toFixed(2)
        loading.value = false
    })
}

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>