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

<template>
    <div :class="show ? 'show' : 'noshow'">
        <div class="boxLeft" :style="height">
            <div v-for="(item, i) in list" :style="boxHeight">
                <div class="title">
                    <span @click="GridDiagram(i)">
                        {{ item.title }}
                        <span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
                    </span>
                    <span class="info" @click="open(i)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>

                <div class="cardBox">
                    <div class="card" style="width: 98%">
                        <div class="cor">
                            <img :src="item.img[0]" />
                            {{ item.titleT[0] }}：
                            <span
                                :style="`color: ${item.color[0]}; cursor: pointer;`"
                                @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
                            >
                                {{ item.list[4].numOne }}
                            </span>
                        </div>
                        <div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
                            <img :src="item.img[1]" />
                            {{ item.titleT[1] }}：
                            <span
                                :style="`color: ${item.color[1]}; cursor: pointer;`"
                                @click="LookMap([], item.list[4].numTwoList, i)"
                            >
                                {{ item.list[4].numTwo }}
                            </span>
                        </div>
                        <div class="cor" v-if="i == 0">
                            <img :src="item.img[2]" />
                            {{ item.titleT[2] }}：
                            <span
                                :style="`color: ${item.color[2]}; cursor: pointer;`"
                                @click="LookMap([], item.list[5].numOneList, 1)"
                            >
                                {{ item.list[5].numOne }}
                            </span>
                        </div>
                    </div>
                    <div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
                        <div class="card-Box">
                            <div>
                                <span class="line"></span>
                                <span class="vol">500kV</span>
                            </div>
                            <div class="num">
                                <div @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, i)">
                                    {{ item.titleT[0] }}:
                                    <span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
                                </div>
                                <div @click="LookMap([], item.list[0].numTwoList, i)">
                                    {{ item.titleT[1] }}:
                                    <span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-Box">
                            <div>
                                <span class="line"></span>
                                <span class="vol">220kV</span>
                            </div>
                            <div class="num">
                                <div @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, i)">
                                    {{ item.titleT[0] }}:
                                    <span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
                                </div>
                                <div @click="LookMap([], item.list[1].numTwoList, i)">
                                    {{ item.titleT[1] }}:
                                    <span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-Box">
                            <div>
                                <span class="line"></span>
                                <span class="vol">110kV</span>
                            </div>
                            <div class="num">
                                <div @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, i)">
                                    {{ item.titleT[0] }}:
                                    <span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
                                </div>
                                <div @click="LookMap([], item.list[2].numTwoList, i)">
                                    {{ item.titleT[1] }}:
                                    <span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-Box">
                            <div>
                                <span class="line"></span>
                                <span class="vol">35kV</span>
                            </div>
                            <div class="num">
                                <div @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, i)">
                                    {{ item.titleT[0] }}:
                                    <span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
                                </div>
                                <div @click="LookMap([], item.list[3].numTwoList, i)">
                                    {{ item.titleT[1] }}:
                                    <span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img
            class="imgL"
            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />

        <!-- 变电站详情 -->
        <stand ref="standRef" />
        <!-- 终端 -->
        <terminal ref="terminalRef" />
        <!-- 检测点 -->
        <point ref="pointRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import {
    getSubLineGiveAnAlarm,
    getGridDiagramMonitor,
    getGridDiagramDev,
    getGridDiagramAreaData
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
    {
        title: '监测点',
        img: [
            new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
            new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
            new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
        ],
        ratioTitle: '告警率',
        ratio: 0,
        titleT: ['总数', '当前在线', '告警'],
        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numOneList: []
            }
        ]
    },
    {
        title: '变电站',
        img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
        color: ['#000', '#bd3124'],
        ratioTitle: '告警率',
        ratio: 0,
        titleT: ['总数', '告警'],
        list: [
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            }
        ]
    },
    {
        title: '终端',
        img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
        titleT: ['总数', '在运'],
        ratioTitle: '在运率',
        ratio: 0,
        color: ['#000', '#2dcd28'],
        list: [
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            },
            {
                numOne: 0,
                numTwo: 0,
                numOneList: [],
                numTwoList: []
            }
        ]
    }
])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)

// 详情
const open = (e: any) => {
    if (e == 0) {
        pointRef.value.open(formRow.value)
    } else if (e == 1) {
        standRef.value.open(formRow.value)
    } else if (e == 2) {
        terminalRef.value.open(formRow.value)
    }
}
const info = async (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
    // 监测点
    await getGridDiagramMonitor(form).then(res => {
        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info

        list.value[0].list = data[0].data.map((item: any) => {
            return {
                numOne: item.num,
                numTwo: item.onLineNum,
                numOneList: item.numList,
                numTwoList: item.onLineNumList
            }
        })

        list.value[0].list.push({
            numOne: 0,
            numOneList: []
        })
    })
    // 监测点告警
    getGridDiagramAreaData(form).then((res: any) => {
        let numOne = 0
        let numOneList: any = []

        res.data.forEach((item: any) => {
            numOne = numOne + item.alarm
            numOneList.push(...item.alarmList)
        })

        list.value[0].list[5] = {
            numOne: numOne,
            numOneList: numOneList
        }
        list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
    })
    // 变电站
    getSubLineGiveAnAlarm(form).then(res => {
        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
        list.value[1].list = data[0].data

        list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
    })
    // 终端
    getGridDiagramDev(form).then(res => {
        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
        list.value[2].list = data[0].data
        list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
    })
}
// 点击
const LookMap = (coutList: object, alarmList: object, key?: any) => {
    // console.log('🚀 ~ LookMap ~ row:', row)
    let form = {
        coutList: coutList,
        alarmList: alarmList
    }
    emit('LookMap', form, key)
}
const GridDiagram = (k: any) => {
    emit('GridDiagram', k)
}
onMounted(() => {})
defineExpose({ info, show })
</script>

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

.cardBox {
    display: flex;
    flex-wrap: wrap;

    .card {
        margin-top: 10px;
        width: 48%;
        margin-right: 2%;
        display: flex;
        .cor {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #6d6d6d;
            span {
                font-size: 16px;
                font-weight: 550;
            }
        }
        img {
            width: 40px;
            height: 40px;
            margin: 0 5%;
        }
    }
    .BoxA {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 80px;
        .card-Box {
            display: grid;
            grid-template-rows: 1fr 1fr;

            align-items: center;
            margin: 5px;
            padding: 10px;
            background-color: #edededc0;
            border-radius: 10px;
            max-height: 80px;
            .line {
                display: inline-block;
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 0.25rem;
                background: var(--el-color-primary);
                margin-right: 5px;
                margin-bottom: 2px;
            }
            .num {
                margin-left: 10px;
                display: grid;
                text-align: center;
                grid-template-columns: 1fr 1fr;
                font-size: 12px;
                color: #6d6d6d;
                div {
                    cursor: pointer;
                }
                span {
                    font-size: 14px;
                    font-weight: 550;
                }
            }
        }
    }
}

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

    span:nth-child(1) {
        cursor: pointer;
    }
    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
        color: #757575;
    }
    .ratio {
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
    }
}

.imgL {
    position: absolute;
    padding: 10px;
    top: calc(50% - 80px);
    right: -23px;

    transform: rotate(180deg);
    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-card) {
    --el-card-padding: 10px !important;
}
:deep(.el-table thead) {
    color: #000;
}
:deep(.el-dialog__body) {
    max-height: none !important;
}
</style>