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

<template>
    <div :class="show ? 'show' : 'noshow'">
        <div class="boxLeft" :style="height">
            <!-- 指标合格率统计 -->
            <div :style="`height:calc(${boxHeight.height} - 40px)`">
                <div class="title">
                    <span>指标合格率统计</span>
                    <span class="info" @click="open(0)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <MyEChart :style="`height:calc(${EchHeight.height} - 40px)`" :options="passingCharts" />
            </div>

            <!-- 稳态指标超标占比 -->
            <div :style="`height:calc(${boxHeight.height} + 40px)`">
                <div class="title">
                    <span>稳态指标超标占比</span>
                    <span class="info" @click="open(1)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div>
                    <div class="monitoringPoints">
                        <div>在线监测点数：{{ monitorList.onlineNum }}</div>
                        <div>超标监测点数：{{ monitorList.overNum }}</div>
                        <div>超标监测点占比：{{ monitorList.overRatio }}</div>
                    </div>

                    <MyEChart :style="`height:calc(${EchHeight.height} + 10px)`" :options="exceededCharts" />
                </div>
            </div>

            <!-- 暂态事件统计 -->
            <div :style="`height:calc(${boxHeight.height} - 10px)`">
                <div class="title">
                    <span>暂态事件统计</span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <MyEChart :style="`height:calc(${EchHeight.height} - 10px)`" :options="statisticsCharts" />
            </div>

            <!-- 稳态电能质量指标水平评估 -->
            <div>
                <div class="title">
                    <span>技术监督管理</span>
                    <!-- <span class="info" @click="open(3)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span> -->
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div style="height: 150px" class="boxR">
                    <el-segmented v-model="active" :options="Voltage" block />
                    <el-row
                        style="height: calc(100% - 45px); display: flex; justify-content: space-around"
                        class="ml10 mr10 mt5"
                    >
                        <el-col :span="11" class="col pt10">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">60%</span>
                            </div>
                        </el-col>
                        <el-col :span="11" class="col pt10" :offset="0.5">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">60%</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- 指标合格率统计 -->
            <statistics ref="statisticsRef" />
            <!-- 稳态指标超标占比 -->
            <exceeded ref="exceededRef" />
        </div>
        <img
            class="imgR"
            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import statistics from '../components/city/statistics.vue'
import exceeded from '../components/city/exceeded.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'

import { ArrowRight } from '@element-plus/icons-vue'
import { getAssessDetail, evaluationDetail, getGeneralSituation } from '@/api/device-boot/panorama'

const dictData = useDictData()
const height = mainHeight(30)
const show = ref(false)
const boxHeight: any = mainHeight(220, 3)
const EchHeight: any = mainHeight(320, 3)
const statisticsRef = ref()
const exceededRef = ref()
const formRow: any = ref({})
const monitorList: any = ref({})
const statisticsCharts: any = ref({})

const passingCharts = ref()
const exceededCharts = ref()

const Voltage: any = [
    {
        label: '技术监督计划',
        value: '0'
    },
    {
        label: '在线监测',
        value: '1'
    },
    {
        label: '用户投诉',
        value: '2'
    },
    {
        label: '谐波普测',
        value: '3'
    }
]

const active: any = ref(Voltage[0].value)

const open = (e: number) => {
    if (e == 0) {
        statisticsRef.value.open(formRow.value)
    } else if (e == 1) {
        exceededRef.value.open(formRow.value)
    }
}
const info = (row: any) => {
    let form = {
        ...row,
        id: row.orgNo,
        deptIndex: row.orgNo,
        orgId: row.orgNo,
        ids: [],
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
        isUpToGrid: row.isUpToGrid,
        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
    }
    formRow.value = form
    // 指标合格率统计
    getAssessDetail(form).then(res => {
        let data = [
            {
                name:
                    '电压偏差：' +
                    (res.data[0].vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0].vdevQualifyData + '%'),
                value: res.data[0].vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0].vdevQualifyData
            },
            {
                name:
                    '频率偏差：' +
                    (res.data[0].freqQualifyData == 3.14159 ? '暂无数据' : res.data[0].freqQualifyData + '%'),
                value: res.data[0].freqQualifyData == 3.14159 ? '暂无数据' : res.data[0].freqQualifyData
            },
            {
                name:
                    '电压总谐波畸变率：' +
                    (res.data[0].harmQualifyData == 3.14159 ? '暂无数据' : res.data[0].harmQualifyData + '%'),
                value: res.data[0].harmQualifyData == 3.14159 ? '暂无数据' : res.data[0].harmQualifyData
            },
            {
                name:
                    '闪变：' +
                    (res.data[0].flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0].flickerQualifyData + '%'),
                value: res.data[0].flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0].flickerQualifyData
            },
            {
                name:
                    '三相电压不平衡度：' +
                    (res.data[0].unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0].unbalanceQualifyData + '%'),
                value: res.data[0].unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0].unbalanceQualifyData
            }
        ]

        let optionData = getData(data)
        passingCharts.value = {
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: '{b}'
            },
            xAxis: {
                show: false
            },

            yAxis: {
                show: false
            },

            legend: {
                data: data.map((item: any) => item.name),
                type: 'scroll',
                orient: 'vertical',
                icon: 'roundRect',
                right: '10',

                itemGap: 15,
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: '0.85rem'
                }
            },

            options: {
                dataZoom: null,
                series: optionData.series
            }
        }

        function getData(data: any) {
            var res: any = {
                series: [],
                yAxis: []
            }
            for (let i = 0; i < data.length; i++) {
                res.series.push({
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },

                    data: [
                        {
                            value: data[i].value,
                            name: data[i].name
                        },
                        {
                            value: 100 - data[i].value,
                            name: '',
                            itemStyle: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 0
                            },
                            tooltip: {
                                show: false
                            },
                            hoverAnimation: true
                        }
                    ]
                })
                res.series.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },

                    data: [
                        {
                            value: 7.5,
                            itemStyle: {
                                color: '#E3F0FF',
                                borderWidth: 0
                            },
                            tooltip: {
                                show: false
                            },
                            hoverAnimation: false
                        }
                    ]
                })
            }
            return res
        }
    })
    // 稳态指标超标占比

    evaluationDetail(form).then(res => {
        monitorList.value = res.data[0]
        exceededCharts.value = {
            tooltip: {},
            yAxis: {
                name: '%',
                type: 'value',
                max: 100
            },
            legend: {
                data: ['超标监测点数', '超标天数']
            },
            xAxis: {
                type: 'category',
                data: res.data[0].list?.map((item: any) => {
                    return item.targetName.length > 4
                        ? item.targetName.slice(0, 4) + '\n ' + item.targetName.slice(4)
                        : item.targetName
                }),
                axisLabel: {
                    color: '#000',
                    fontSize: 12,
                    interval:0
                }
            },
            grid: {
                top: '30px',
                left: '10px',
                right: '20px'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '超标监测点数',
                        type: 'bar',
                        data: res.data[0].list?.map((item: any) => item.overNum),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12,
                            formatter: function (params: any) {
                                return `${params.value == 3.14159 ? '' : params.value}`
                            }
                        }
                    },
                    {
                        name: '超标天数',
                        type: 'bar',
                        data: res.data[0].list?.map((item: any) => item.overDay),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12,
                            formatter: function (params: any) {
                                return `${params.value == 3.14159 ? '' : params.value}`
                            }
                        }
                    }
                ]
            }
        }
    })
    // 稳态电能质量指标水平评估

    getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
        statisticsCharts.value = {
            tooltip: {},
            yAxis: {
                type: 'value'
            },
            legend: {
                show: false
            },
            xAxis: {
                type: 'category',
                data: ['电压暂升', '电压暂降', '短时中断']
            },
            grid: {
                top: '30px',
                left: '10px',
                right: '20px'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '暂态个数',
                        type: 'bar',
                        data: [res.data[0].upCount, res.data[0].sagsCount, res.data[0].breakCount],
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    }
                ]
            }
        }
    })
}

defineExpose({ info, show })
</script>

<style lang="scss" scoped>
.boxLeft {
    background-color: #fff;
    width: 100%;
    padding: 10px 10px 10px 10px;
    font-size: 13px;
    overflow: hidden;
    border-radius: 5px;
}

.title {
    // height: ;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    line-height: 23px;
    padding-left: 5px;
    width: 100%;
    font-weight: 550;

    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
        color: #757575;
    }
}
.TJTop {
    display: flex;
    img {
        height: 1.2rem;
        width: 1.2rem;
        margin-right: 5px;
    }
}
.evaluate {
    margin: 10px 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    .line {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background: var(--el-color-primary);
        margin-right: 2px;
        margin-bottom: 1px;
    }
}
.boxR {
    margin: 10px 0 0 0;

    .num {
        color: #2478f2;
    }
    .top {
        display: flex;
        justify-content: space-between;
    }
    .bottom {
        margin: 0;
        border: 0px;
    }

    .harmonic {
        display: grid;
        .progress {
            display: flex;
            align-items: center;
            .text {
                width: 50px;
                font-size: 12px;
            }
            .el-progress {
                flex: 1;
            }
        }
    }
}
:deep(.el-select) {
    min-width: 120px;
}
.col {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    text-align: center;
    background-color: #edededc0;
}
.imgR {
    position: absolute;
    padding: 10px;
    top: calc(50% - 80px);
    left: -23px;

    height: 200px;
    cursor: pointer;
}
.show {
    width: 0px;
    transition: all 0.3s ease;
    .boxLeft {
        padding: 0;
    }
}
.noshow {
    width: 25%;
    transition: all 0.3s ease;
    .boxLeft {
        padding: 10px 10px 10px 10px;
    }
}
:deep(.el-progress__text) {
    font-size: 0.8rem !important    ;
}
.monitoringPoints {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>