admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/line/info.vue

<template>
    <div class="default-main lineInfo" :style="height">
        <DatePicker ref="datePickerRef" style="display: none" />
        <el-page-header :icon="ArrowLeft" @back="emit('back')">
            <template #content>
                <span class="text-large font-600 mr-3">{{ dropList.lineName }}详情</span>
            </template>
        </el-page-header>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    台账信息
                </h3>
                <el-descriptions title="" border :column="2">
                    <el-descriptions-item label="监测点名称" width="140px">
                        {{ dropList.lineName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
                    <el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
                    <el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
                    <el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
                    <el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
                    <el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
                    <el-descriptions-item label="通讯状态" width="140px">
                        <el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
                            {{ dropList.comFlag }}
                        </el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    告警明细 (天)
                </h3>
                <el-descriptions title="" border :column="2" size="small">
                    <el-descriptions-item width="140px" label="告警原因">
                        <span
                            style="font-weight: 550"
                            :style="TargetData.info == 0 ? 'color: #0e8780;' : 'color: #ff0000;'"
                        >
                            {{
                                TargetData.info == 1
                                    ? '超标告警'
                                    : TargetData.info == 2
                                    ? '完整性告警'
                                    : TargetData.info == 0
                                    ? '无告警'
                                    : ''
                            }}
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="频率偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="电压偏差">{{ TargetData.voltageDevOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="电压总谐波畸变率">
                        {{ TargetData.uaberranceOvertime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="闪变">{{ TargetData.flickerOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item width="140px" label="三相电压不平衡度">
                        {{ TargetData.ubalanceOvertime }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    数据质量
                </h3>
                <div style="display: flex">
                    <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
                    <MyEChart
                        :style="`height: calc(${rowHeight} - 31px)`"
                        :options="onLineCharts"
                        @click="OnlineRate"
                    />
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    监测点总体评价结论
                </h3>

                <div class="evaluationData">
                    <el-row style="width: 96%" class="row pb5">
                        <el-col :span="12" style="display: flex">
                            <span>{{ dropList.lineName }}</span>
                        </el-col>
                        <el-col :span="12" style="display: flex">
                            <div>
                                综合评估得分:
                                <span
                                    class="conclusion"
                                    :class="
                                        dropList.assessData == '特质'
                                            ? 'background1'
                                            : dropList.assessData == '较差'
                                            ? 'background2'
                                            : dropList.assessData == '极差'
                                            ? 'background3'
                                            : ''
                                    "
                                >
                                    {{ dropList.assessData }}
                                </span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
                        <el-col :span="14" style="display: flex">
                            <img :src="url[i]" />
                            <span style="line-height: 20px">{{ item.targetName }}</span>
                        </el-col>
                        <el-col :span="10" style="display: flex">
                            <div style="width: 100%">
                                评估得分：
                                <span
                                    class="conclusion"
                                    :class="
                                        item.avg == '特质'
                                            ? 'background1'
                                            : item.avg == '较差'
                                            ? 'background2'
                                            : item.avg == '极差'
                                            ? 'background3'
                                            : ''
                                    "
                                >
                                    {{ item.avg }}
                                </span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    稳态指标合格率
                </h3>
                <div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    暂态事件统计
                </h3>

                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="24">
                <h3 class="mb10 iconBox">
                    <span></span>
                    历史趋势图
                </h3>
                <history :lineId="lineId" ref="historyRef" />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
import history from './history.vue'
import { color } from '@/components/echarts/color'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import echarts from '@/components/echarts/echarts'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
import {
    getTotalIntegrityByLineIds,
    getTotalOnlineRates,
    lineQualifiedDetail,
    getLineAssess,
    getEventDetailByLineId,
    getGridDiagramTargetData
} from '@/api/device-boot/panorama'
import { formatter } from 'element-plus'

const emit = defineEmits(['back'])
const dropList: any = ref({})
const TargetData: any = ref({})
const evaluationData: any = ref([])
const incidentCharts: any = ref({})
const ComCharts: any = ref({})
const onLineCharts: any = ref({})
const datePickerRef = ref()
const chartRef = ref<HTMLDivElement>()
const historyRef = ref()
const IntegrityNum = ref(0)
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 lineId: any = ref('')
const height = mainHeight(20)
const rowHeight = mainHeight(190, 3).height

// 查询
const open = async (id: string) => {
    let form = {
        comFlag: 1,
        endTime: datePickerRef.value.timeValue[1],
        lineIds: [id],

        ids: [id],
        searchValue: '',
        startTime: datePickerRef.value.timeValue[0]
    }
    lineId.value = id
    const { data } = await getLineDetailData({ id: id })
    dropList.value = data
    // 运行状态

    // 完整性
    getTotalIntegrityByLineIds(form).then((res: any) => {
        let num = (res.data || 0) / 100
        IntegrityNum.value = res.data
        ComCharts.value = {
            title: {
                text: '完整性',
                bottom: '10%',
                left: 'center',
                textStyle: {
                    fontSize: 16
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        //第二个球的填充
                        type: 'liquidFill',
                        radius: '65%',
                        center: ['50%', '40%'], //中心点
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#2aa1e3'
                                    }
                                ],
                                globalCoord: false
                            }
                        ],
                        data: [num, num], // data个数代表波浪数
                        backgroundStyle: {
                            borderWidth: 1,
                            color: '#f7f8fc'
                        },
                        label: {
                            normal: {
                                formatter: () => {
                                    return (num * 100).toFixed(2) + '%'
                                },
                                textStyle: {
                                    fontSize: 20,
                                    color: '#000'
                                }
                            }
                        },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }
                    }
                ]
            }
        }
        // 稳态指标合格率
    })
    // 在线率
    getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
        let num = (res.data || 0) / 100
        onLineCharts.value = {
            title: {
                text: '在线率',
                bottom: '10%',
                left: 'center',
                textStyle: {
                    fontSize: 16
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        //第二个球的填充
                        type: 'liquidFill',
                        radius: '65%',
                        center: ['50%', '40%'], //中心点
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#67c23a'
                                    }
                                ],
                                globalCoord: false
                            }
                        ],
                        data: [num, num], // data个数代表波浪数
                        backgroundStyle: {
                            color: '#f7f8fc'
                        },
                        label: {
                            normal: {
                                formatter: () => {
                                    return (num * 100).toFixed(2) + '%'
                                },
                                textStyle: {
                                    fontSize: 20,
                                    color: '#000'
                                }
                            }
                        },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }
                    }
                ]
            }
        }
    })

    // 监测点总体评价结论
    getLineAssess({
        lineId: id,
        startTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1]
    }).then((res: any) => {
        dropList.value.assessData = res.data.assessLevel
        evaluationData.value = [
            {
                targetName: '频率偏差',
                avg: res.data.freqAssessLevel,
                sd: res.data.freqQualifyData
            },
            {
                targetName: '电压偏差',
                avg: res.data.vdevAssessLevel,
                sd: res.data.vdevQualifyData
            },
            {
                targetName: '电压总谐波畸变率',
                avg: res.data.harmAssessLevel,
                sd: res.data.harmQualifyData
            },
            {
                targetName: '三相电压不平衡度',
                avg: res.data.unbalanceAssessLevel,
                sd: res.data.unbalanceQualifyData
            },
            {
                targetName: '闪变',
                avg: res.data.flickerAssessLevel,
                sd: res.data.flickerQualifyData
            }
        ]
    })
    // 稳态指标合格率

    lineQualifiedDetail({
        lineId: id,
        startTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1]
    }).then(res => {
        echart([
            {
                time: datePickerRef.value.timeValue[0].substring(0, 7),
                targetList: ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变'],
                ratioList: [
                    res.data.freqDev == 3.14159 ? null : res.data.freqDev,
                    res.data.vdev == 3.14159 ? null : res.data.vdev,
                    res.data.vthd == 3.14159 ? null : res.data.vthd,
                    res.data.ubalance == 3.14159 ? null : res.data.ubalance,
                    res.data.plt == 3.14159 ? null : res.data.plt
                ]
            }
        ])
    })

    // 暂态事件统计
    getEventDetailByLineId({
        id: id,
        startTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1],
        type: datePickerRef.value.interval
    }).then((res: any) => {
        let data = [
            {
                name: '电压暂升',
                value: res.data?.swellTimes || 0
            },
            {
                name: '电压暂降',
                value: res.data?.sagTimes || 0
            },
            {
                name: '电压中断',
                value: res.data?.interruptTimes || 0
            }
        ]
        incidentCharts.value = {
            title: {
                text: ' ' + (data[0].value + data[1].value + data[2].value),
                left: '41%',
                top: '40%',
                textStyle: {
                    fontWeight: 600,
                    fontSize: 16
                },
                subtext: '总数',
                subtextStyle: {
                    fontWeight: 550,
                    fontSize: 14
                }
            },

            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'center',
                right: '10%',
                formatter: function (e: any) {
                    return e + '   ' + data.filter(item => item.name == e)[0].value + '条'
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        center: ['45%', '50%'],
                        radius: ['60%', '80%'],
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },

                        data: data
                    }
                ]
            }
        }
    })

    // 告警明细
    getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
        TargetData.value = res.data
        let num = 0
        let flag = 0
        for (let k in res.data) {
            if (k != 'lineId') {
                flag += res.data[k]
            }
        }
        // console.log('🚀 ~ getGridDiagramTargetData ~ flag:', flag)

        if (IntegrityNum.value == 0) {
            num = 2 //完整性告警
        } else {
            if (flag > 0) {
                num = 1 //超标告警
            } else {
                num = 0 //无告警
            }
        }

        TargetData.value.info = num
    })
}
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: '#2a9fe069'
                }
            },
            itemStyle: {
                color: '#2a9fe0'
            },
            data: [item.ratioList]
        })
    })

    chart.setOption(option)
}
// 跳转
const Integrity = () => {
    router.push({
        name: 'harmonic-boot/harmonic/getIntegrityData'
    })
}
const OnlineRate = () => {
    router.push({
        name: 'harmonic-boot/area/OnlineRate'
    })
}

onMounted(() => {
    // open('4c87b7dff2281254fc55c25a4da31506')
})
defineExpose({ open })
</script>

<style lang="scss" scoped>
.lineInfo {
    padding: 0 10px 10px 10px;
}
:deep(.el-page-header__header) {
    height: 45px;
    border-bottom: 1px solid #f1eded;
}
:deep(.el-descriptions__header) {
    margin-bottom: 10px;
}
.evaluationData {
    display: grid;
    grid-template-rows: repeat(5, auto);
    .row {
        margin: 4px 2% 0;
        width: 100%;
        box-shadow: 1px 1px 1px 1px #e8e3e3;
    }
    img {
        width: 6%;
        margin: 0px 15px;
    }
}
.iconBox {
    display: flex;
    span {
        display: inline-block;
        width: 3px;
        height: 18px;
        background: var(--el-color-primary);
        margin-right: 5px;
        margin-left: 3px;
    }
}
.conclusion {
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
}
.background1 {
    background-color: #339966;
    color: #fff;
}
.background2 {
    background-color: #97017e;
    color: #fff;
}
.background3 {
    background-color: #cc0000;
    color: #fff;
}
</style>