admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/city/exceeded.vue

<!-- 稳态 -->
<template>
    <!-- 终端 -->
    <el-dialog draggable title="稳态指标超标占比统计" v-model="dialogVisible" width="800">
        <el-row style="height: 330px" :gutter="20">
            <el-col :span="23">
                <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: 260px; width: 100%" ref="chartRef"></div>
                </div>
            </el-col> -->
        </el-row>
    </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 echart = (row: any) => {
    let chart = echarts.init(chartRef.value as HTMLDivElement)

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

    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.35)',
            borderWidth: 0
        },
        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%', '50%'],
            radius: '65%',
            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)
}
// 点击电压等级
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: 40px;
    margin: 8px 30px;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #e8e3e3;
    display: flex;
    font-size: 18px;
    line-height: 40px;
    img {
        height: 30px;
        width: 30px;
        margin: 5px 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;
    // }
}
</style>