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

<!-- 稳态 -->
<template>
    <!-- 终端 -->
    <el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
        <el-row style="height: 300px" :gutter="20">
            <el-col :span="12">
                <div class="title">
                    <span>稳态电能质量水平评估</span>
                </div>
                <div class="boxSteps">
                    <el-steps>
                        <template v-for="(item, i) in Voltage">
                            <el-step :class="active == i ? 'highlight' : ''" :title="item.name"
                                @click="handleClick(i)"></el-step>
                        </template>
                    </el-steps>
                </div>
                <div v-for="(item, i) in evaluationData" class="evaluationData">
                    <el-row style="width: 100%">
                        <el-col :span="12" style="display: flex">
                            <img :src="url[i]" />
                            <span>{{ item.targetName }}</span>
                        </el-col>
                        <el-col :span="12" style="display: flex">
                            <div style="width: 150px">
                                均值：
                                <span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
                            </div>
                            <div>
                                标准差：
                                <span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <span>稳态电能质量超标占比环比变化</span>
                </div>
                <div class="pie">
                    <div style="height: 250px; width: 100%" ref="chartRef"></div>
                </div>
            </el-col>
        </el-row>
        <div>
            <div class="title">
                <span>区域稳态电能质量水平评估</span>
            </div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
                <vxe-column field="deptName" title="区域" />
                <vxe-column sortable field="onlineNum" title="在线监测点数量(个)" />
                <vxe-column sortable field="overNum" title="超标监测点数量(个)" />
                <vxe-column sortable field="overRatio" title="超标监测点占比(%)" />

                <vxe-colgroup :title="item" v-for="(item, i) in title">
                    <vxe-column title="监测点数	" field="overNum">
                        <template #default="scope">
                            <span>{{ scope.row.list[i].overNum }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column title="天数" field="overDay">
                        <template #default="scope">
                            <span>{{ scope.row.list[i].overDay }}</span>
                        </template>
                    </vxe-column>
                </vxe-colgroup>
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import echarts from '@/components/echarts/echarts'
import { useDictData } from '@/stores/dictData'
import { color } from '@/components/echarts/color'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
const dialogVisible: any = ref(false)
const rowList = ref({})
const active: any = ref(1)
const evaluationData: any = ref([])

const dictData = useDictData()
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
    if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
        return item
    }
})

const chartRef = ref<HTMLDivElement>()
const url: any = [
    new URL(`@/assets/img/PLPC.png`, import.meta.url),
    new URL(`@/assets/img/DYPC.png`, import.meta.url),
    new URL(`@/assets/img/JBL.png`, import.meta.url),
    new URL(`@/assets/img/SXDY.png`, import.meta.url),
    new URL(`@/assets/img/SB.png`, import.meta.url)
]
const tableData: any = ref([])
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']

const echart = (row: any) => {
    let maxList: any = []
    row.forEach((item: any) => {
        maxList.push(...(item.ratioList || [0]))
    })
    let max = Math.max(...maxList) > 50 ? 100 : 50

    let chart = echarts.init(chartRef.value as HTMLDivElement)

    let dataname = ['频率偏差(Hz)',
        '电压偏差(%)',
        '电压总谐波畸变率(%)',
        '三相电压不平衡度(%)',
        '闪变',
        '谐波电压(%)',
        '谐波电流(%)',
        '间谐波电压(%)',
        '负序电流(A)']
    // let datamax = [100, 100, 100, 100, 100, 100]
    let indicator = []
    for (let i = 0; i < dataname.length; i++) {
        indicator.push({
            name: dataname[i],
            max: max
        })
    }

    let option: any = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow',
                label: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                opacity: 0.35,
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.55)',
            borderWidth: 0,
            position: 'bottom'
        },
        legend: {
            data: row.map((item: any) => item.time),
            type: 'scroll',
            orient: 'vertical',
            icon: 'roundRect',
            right: '20',

            itemGap: 10,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
                fontSize: '15',
                color: '#656565'
            }
        },
        radar: {
            center: ['50%', '60%'],
            radius: '60%',
            startAngle: 90,
            splitNumber: 5,
            splitArea: {
                areaStyle: {
                    color: ['#FFFFFF', '#F5F9FF'].reverse()
                }
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            name: {
                formatter: '{value}',
                textStyle: {
                    color: '#656565',
                    fontSize: 15
                }
            },
            indicator: indicator
        },

        series: []
    }

    row.forEach((item: any, i: any) => {
        option.series.push({
            name: item.time,
            type: 'radar',
            symbol: 'none',
            areaStyle: {
                normal: {
                    color: color[i + 1]
                }
            },
            itemStyle: {
                color: color[i + 1]
            },
            data: [item.ratioList]
        })
    })

    chart.setOption(option)
}

const open = async (row: any) => {
    rowList.value = row
    dialogVisible.value = true
    // 稳态电能质量水平评估
    handleClick(0)
    //环比
    evaluationRatio(row).then(res => {
        echart(res.data)
    })
    // 稳态电能质量水平评估详细列表
    evaluationDetail(row).then(res => {
        tableData.value = res.data
    })
}
// 点击电压等级
const handleClick = (i: any) => {
    active.value = i
    getEvaluationData({
        ...rowList.value,
        voltageLevel: Voltage[i].id
    }).then(res => {
        evaluationData.value = res.data
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    min-width: 80px;
}

.title {
    display: flex;
    justify-content: space-between;
    margin: 10px;

    span {
        font-weight: 550;
        font-size: 18px;
    }
}

.pie {
    display: flex;
    justify-content: space-around;
}

.evaluationData {
    height: 33px;
    margin: 8px 30px;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #e8e3e3;
    display: flex;
    font-size: 18px;
    line-height: 35px;

    img {
        height: 25px;
        width: 25px;
        margin: 4px 20px 0px 30px;
    }
}

.el-steps {
    margin-top: 5px;
}

:deep(.el-step__icon) {
    border: none;
    background: #ccc;
    margin-top: 5px;
    width: 15px;
    height: 15px;
}

:deep(.el-step__icon-inner) {
    display: none;
}

:deep(.boxSteps) {
    border-radius: 50px;
    width: 60%;
    height: 25px;
    margin: auto;
    margin-top: 30px;

    .el-step__title {
        line-height: 18px;
        font-size: 16px;
        margin-left: -10px;
        font-weight: 500;
        color: #000 !important;
        position: relative;
        top: -50px;
    }
}

:deep(.highlight) {
    .el-step__icon {
        background: var(--el-color-primary);
    }

    .el-step__title {
        font-weight: 700 !important;
        color: var(--el-color-primary) !important;
    }

    // .is-wait {
    //     color: var(--el-color-primary) !important;
    // }
}

:deep(.el-dialog__body) {
    max-height: none !important;
}
</style>