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

<template>
    <div :class="show ? 'show' : 'noshow'">
        <div class="boxLeft" :style="height">
            <!-- 在线监测规模 -->
            <div :style="boxHeight">
                <div class="title">
                    <span>在线监测规模</span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <MyEChart :style="tabHeight" :options="onlineCharts" />
            </div>
            <!-- 监测终端状态 -->
            <div :style="boxHeight">
                <div class="title">
                    <span>监测终端状态</span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div class="TJTop">
                    <img src="@/assets/img/TJ.png" />
                    终端在线率：
                    <span>{{ onlineRate }}%</span>
                </div>
                <MyEChart :style="`height: calc(${tabHeight.height} - 27px)`" :options="terminalCharts" />
            </div>
            <!-- 监测点 -->
            <div :style="boxHeight">
                <div class="title">
                    <span>监测点数据完整率</span>
                </div>

                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <MyEChart :style="tabHeight" :options="dotCharts" />
            </div>
        </div>
        <img
            class="imgL"
            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'

import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'

import { getPracticalRunDeviceInfo, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
import { useConfig } from '@/stores/config'
const config = useConfig()
const dictData = useDictData()
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
const tabHeight: any = mainHeight(150, 3)
const onlineRate = ref(0)
const show = ref(false)
const formRow: any = ref({})
const terminalCharts: any = ref({})

const dotCharts = ref()

const onlineCharts = ref()

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
    }
    let loadType = dictData.getBasicData('Statistical_Type').find(item => item.code == 'Load_Type')

    formRow.value = form
    // 变电站
    getPracticalRunDeviceInfo(form).then(res => {
        onlineCharts.value = {
            tooltip: {},
            yAxis: {
                type: 'value',
                name: '个'
            },

            xAxis: {
                type: 'category',
                data: ['变电站', '监测终端', '监测点'],
                axisLabel: {
                    color: '#000',
                    fontSize: 12
                }
            },
            grid: {
                top: '30px',
                left: '10px',
                right: '20px'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '个数',
                        type: 'bar',
                        data: [
                            res.data[0].subIndexes.length,
                            res.data[0].deviceIndexes.length,
                            res.data[0].lineIndexes.length
                        ],
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 10
                        }
                    }
                ]
            }
        }
    })
    // 终端
    getGridDiagramCityDev({ ...form, deviceInfoParam: form, pageNum: 1, pageSize: 1000 }).then(res => {
        onlineRate.value = res.data[1]
        let data = [
            {
                name: '运行',
                value: res.data[0] - 0
            },
            {
                name: '检修',
                value: res.data[2] - 0
            },
            {
                name: '退役',
                value: res.data[4] - 0
            }
        ]

        terminalCharts.value = {
            title: {
                text: data[0].value + data[1].value + data[2].value,
                left: '26%',
                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
            },
            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        center: ['30%', '50%'],
                        radius: ['40%', '60%'],
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },

                        data: data
                    }
                ]
            }
        }
    })

    // 监测点
    getGridDiagramLineData({ ...form, statisticalType: loadType }).then(res => {
        dotCharts.value = {
            title: {
                text: ''
            },
            // str.replace(/\(\d+\)/, "\n$&");
            xAxis: {
                data: res.data.map((item: any) => {
                    return item.orgName.length > 4
                        ? item.orgName.slice(0, 4) + '\n ' + item.orgName.slice(4)
                        : item.orgName
                }),
                axisLabel: {
                    color: '#000',
                    fontSize: 12
                }
            },
            yAxis: {
                name: '%',
                min: 0,
                max: 100
            },
            grid: {
                top: '30px',
                left: '0px',
                right: '20px'
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        name: '数据完整率',
                        type: 'bar',

                        data: res.data.map((item: any) => item.integrityRate),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 10
                        }
                    }
                ]
            }
        }
    })
}

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;
}

.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;
    }
}

.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;
}
.TJTop {
    margin-top: 10px;
    display: flex;
    img {
        height: 1.2rem;
        width: 1.2rem;
        margin-right: 5px;
    }
    span {
        color: #2dcd28;
    }
}
</style>