绘制离线地图

src/views/pqs/harmonicMonitoring/runManage/quantitativeStatistics/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="default-main">
+
+        <TableHeader area>
+            <template #select>
+ <el-form-item label="监测点性质:">
+                    <el-select v-model="tableStore.table.params.powerFlag" filterable multiple collapse-tags clearable
+                        placeholder="请选择监测点性质">
+                        <el-option v-for="item in terminalstatus" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="电压等级:">
+                    <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
+                        placeholder="请选择电压等级" value-key="id">
+                        <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+               
+                <el-form-item label="终端厂家:">
+                    <el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
+                        clearable placeholder="请选择终端厂家" value-key="id">
+                        <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
+                        placeholder="请选择干扰源类型" value-key="id">
+                        <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+
+
+
+
+                <el-form-item label="上报类型:">
+                    <el-select v-model="tableStore.table.params.monitorFlag" filterable multiple collapse-tags clearable
+                        placeholder="请选择上报类型">
+                        <el-option v-for="item in communicationstatus" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+
+
+            </template>
+
+        </TableHeader>
+        <Table ref="tableRef" />
+
+
+
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import { useDictData } from '@/stores/dictData'
+import TableHeader from '@/components/table/header/index.vue'
+const dictData = useDictData()
+defineOptions({
+    name: 'harmonic-boot/run/devicemessage'
+})
+const view = ref(true)
+const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+//上报类型
+const communicationstatus = [
+    { value: 2, label: "全部" },
+    { value: 1, label: "灿能上报" },
+    { value: 0, label: "非灿能上报" },
+]
+//终端状态
+const terminalstatus = [
+    { value: 2, label: "全部" },
+    { value: 1, label: "非电网侧" },
+    { value: 0, label: "电网侧" },
+]
+
+
+const tableStore = new TableStore({
+    url: '/device-boot/runManage/getTerminalLedger',
+    method: 'POST',
+    isWebPaging: true,
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'areaName', title: '区域' },
+        { field: 'gdName', title: '地级区' },
+        {
+            field: 'bdName',
+            title: '供电公司',
+            minWidth: 100
+        },
+        { field: 'objName', title: '监测点对象名称', minWidth: 240 },
+        { field: 'manufacturer', title: '厂家', minWidth: 100 },
+        { field: 'scale', title: '电压等级', minWidth: 100 },
+        { field: 'businessType', title: '行业类型', minWidth: 100 },
+
+        { field: 'devName', title: '终端名称', minWidth: 80 },
+        { field: 'ip', title: '网络参数', minWidth: 100 },
+        { field: 'lineName', title: '监测点名称', minWidth: 100 },
+        { field: 'loadType', title: '干扰源类型', minWidth: 100 },
+
+
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data.map((item: any) => {
+            item.onlineEvaluate == 3.14159 ? item.onlineEvaluate = '/' : item.onlineEvaluate <= 0.6 ? item.onlineEvaluate = '差' : item.onlineEvaluate <= 0.9 ? item.onlineEvaluate = '良' : item.onlineEvaluate <= 1 ? item.onlineEvaluate = '优' : '/'
+        })
+    }
+})
+tableStore.table.params.statisticalType = classificationData[0]
+tableStore.table.params.serverName = "harmonic-boot"
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = '2'
+tableStore.table.params.evaluate = ''
+tableStore.table.params.powerFlag = 2
+
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+const wp = ref({})
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+
+
+
+
+
+</script>

src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue

@@ -8,6 +8,7 @@
                         <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
                         </el-option>
                     </el-select>
+                    
                 </el-form-item> -->
                 <el-form-item label="电压等级:">
                     <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable

src/views/pqs/panorama/components/city/exceeded.vue

@@ -0,0 +1,286 @@
+<!-- 稳态 -->
+<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 = ['频率偏差(Hz)', '电压偏差(%)', '电压总谐波畸变率(%)', '三相电压不平衡度(%)', '闪变']
+    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.55)',
+            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>

src/views/pqs/panorama/components/city/statistics.vue

@@ -0,0 +1,48 @@
+<template>
+    <!-- 综合评估详情 -->
+    <el-dialog draggable title="指标合格率统计" v-model="dialogVisible" width="1500px">
+        <div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="600px" :data="tableData">
+                <vxe-column field="substationName" title="变电站名称" />
+                <vxe-column field="lineName" title="监测点名称" />
+                <vxe-colgroup title="各指标合格率">
+                    <vxe-column field="freqDev" sortable title="	频率偏差" :formatter="formatter" />
+                    <vxe-column field="vdev" sortable title="电压偏差"  :formatter="formatter" />
+                    <vxe-column field="vthd" sortable title="电压总谐波畸变率" width="180" :formatter="formatter" />
+                    <vxe-column field="ubalance" sortable title="三相电压不平衡度" width="180" :formatter="formatter" />
+                    <vxe-column field="plt" sortable title="闪变" :formatter="formatter" />
+                    <vxe-column field="uharm" sortable title="谐波电压(%)" :formatter="formatter" />
+                    <vxe-column field="iharm" sortable title="谐波电流(%)" :formatter="formatter" />
+                    <vxe-column field="inuHarm" sortable title="间谐波电压(%)" width="180" :formatter="formatter" />
+                    <vxe-column field="ineg" sortable title="负序电流(A)" :formatter="formatter" />
+                </vxe-colgroup>
+            </vxe-table>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { qualifiedDetail } from '@/api/device-boot/panorama'
+const dialogVisible: any = ref(false)
+
+const tableData: any = ref([])
+
+const open = async (row: any) => {
+    qualifiedDetail(row).then(res => {
+        tableData.value = res.data
+    })
+    dialogVisible.value = true
+}
+const formatter = (row: any) => {
+    if (row.cellValue == 3.14159) {
+        return '/'
+    } else {
+        return row.cellValue
+    }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/panorama/components/cityMapL.vue

@@ -0,0 +1,595 @@
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 监测规模 -->
+            <div class="mb10" :style="`height:250px);`">
+                <div class="title">
+                    <span>监测规模</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div style="display: flex">
+                    <div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
+                        <div class="card">
+                            <span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
+                            <span :style="`color: ${item.color[0]}; cursor:pointer`"
+                                @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
+                                {{ item.list[4].numOne }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 监测规模 列表 -->
+                <div>
+                    <div class="vcl mt5">
+                        <p v-for="(item, i) in vList"
+                            :style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
+                            {{ item }}
+                        </p>
+                    </div>
+
+                    <div v-for="(item, i) in list" class="vcl">
+                        <p style="width: 60px">
+                            {{ item.title }}
+                            <!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
+                                详情
+                            </span> -->
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
+                            {{ item.list[0].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
+                            {{ item.list[1].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
+                            {{ item.list[2].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
+                            {{ item.list[3].numOne }}
+                        </p>
+                        <!-- <p
+                            style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
+                            @click.stop="open(i)"
+                        >
+                            详情
+                        </p> -->
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} + 50px)`">
+                <div class="title">
+                    <span>监测点指标统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
+                    <div v-for="item in countList">
+                        <div class="title mt5" style="font-weight: 500">
+                            <img src="@/assets/img/TJ.png" />
+                            {{ item.title }}
+                        </div>
+                        <div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
+                            v-for="val in item.children">
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">{{ val.title }}</span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(val.numList, [], 0)">
+                                    投运:
+                                    <span>{{ val.num }}</span>
+                                </div>
+                                <div @click="LookMap(val.onLineNumList, [], 0)">
+                                    在线:
+                                    <span style="color: #2dcd28">{{ val.onLineNum }}</span>
+                                </div>
+                                <div>
+                                    数据完整性:
+                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 55px)`">
+                <div class="title">
+                    <span>监测运行统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+
+                <div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
+                    <div class="card-Box" v-for="item in linList">
+                        <div>
+                            <span class="line"></span>
+                            <span class="vol">{{ item.title[0] }}</span>
+                        </div>
+                        <div class="num">
+                            <div>
+                                {{ item.title[1] }}:
+                                <span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
+                                    {{ item.lineNumOne || 0 }}
+                                </span>
+                            </div>
+                            <div>
+                                {{ item.title[2] }}:
+                                <span style="color: #cc0000" @click="LookMap([], item.lineListTwo, 1)">
+                                    {{ item.lineNumTwo || 0 }}
+                                </span>
+                            </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, View } 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,
+    getGridDiagramStatistics,
+    getGridDiagramRunData
+} 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: '变电站',
+        color: ['#000', '#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: []
+            }
+        ]
+    },
+    {
+        title: '监测终端',
+        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: []
+            }
+        ]
+    },
+    {
+        title: '监测点',
+
+        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: []
+            }
+        ]
+    }
+])
+const countList: any = ref([
+    {
+        title: '冀北',
+        children: [
+            {
+                title: '电网侧监测点',
+                num: 0,
+                onLineNum: 0,
+                integrityRate: 0
+            },
+            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+        ]
+    },
+    {
+        title: '上送网公司',
+        children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    }
+])
+const linList: any = ref([
+    {
+        title: ['运行状态', '合格', '告警']
+    },
+    {
+        title: ['通讯状态', '在线', '离线']
+    },
+
+    {
+        title: ['数据完整性', '≥90%', '<90%']
+    },
+    {
+        title: ['电能质量指标', '未超标', '超标']
+    }
+])
+const vList = ['', '500kV', '220kV', '110kV', '35kV',]
+const formRow: any = ref({})
+const height = mainHeight(30)
+const boxHeight = mainHeight(290, 2)
+
+// 详情
+const open = (e: any) => {
+    if (e == 0) {
+        standRef.value.open(formRow.value)
+    } else if (e == 1) {
+        terminalRef.value.open(formRow.value)
+    } else if (e == 2) {
+        pointRef.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
+    }
+    countList.value[0].title = row.areaName
+    formRow.value = form
+
+    // 变电站
+    getSubLineGiveAnAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[0].list = data[0].data
+    })
+    // 终端
+    getGridDiagramDev(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[1].list = data[0].data
+    })
+    // 监测点
+    await getGridDiagramMonitor(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+
+        list.value[2].list = data[0].data.map((item: any) => {
+            return {
+                numOne: item.num,
+                numTwo: item.onLineNum,
+                numOneList: item.numList,
+                numTwoList: item.onLineNumList
+            }
+        })
+
+        list.value[2].list.push({
+            numOne: 0,
+            numOneList: []
+        })
+    })
+    // 监测点指标统计
+    getGridDiagramStatistics(form).then(res => {
+        countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
+        countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
+        countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
+    })
+    // 监测运行统计
+    getGridDiagramRunData(form).then(res => {
+        res.data[0].title = ['运行状态', '合格', '告警']
+        res.data[1].title = ['通讯状态', '在线', '离线']
+        res.data[2].title = ['数据完整性', '≥90%', '<90%']
+        res.data[3].title = ['电能质量指标', '未超标', '超标']
+
+        linList.value = res.data
+    })
+}
+// 点击
+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, 3)
+}
+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;
+    flex: 1;
+
+    .card {
+        justify-content: center;
+        margin-top: 15px;
+        margin-right: 2%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        font-size: 16px;
+
+        span:nth-child(2) {
+            font-weight: 550;
+        }
+    }
+}
+
+.vcl {
+    display: flex;
+    border-bottom: 2px solid #fff;
+    background-color: #edededc0;
+    border-radius: 5px;
+    font-size: 14px;
+
+    p {
+        text-align: center;
+        margin: 6px;
+        line-height: 30px;
+    }
+
+    .numOne {
+        flex: 1;
+        font-weight: 550;
+        cursor: pointer;
+    }
+
+    &:nth-child(1) {
+        background-color: #fff;
+    }
+
+    &:nth-child(2) {
+        .numOne {
+            color: #00bff5;
+        }
+    }
+
+    &:nth-child(3) {
+        .numOne {
+            color: #008000;
+        }
+    }
+
+    &:nth-child(4) {
+        .numOne {
+            color: #0000ff;
+        }
+    }
+}
+
+.title {
+    // height: ;
+    // display: flex;
+    // justify-content: space-between;
+    font-size: 15px;
+    line-height: 23px;
+    padding-left: 5px;
+    width: 100%;
+    font-weight: 550;
+    display: flex;
+    align-items: center;
+
+    span:nth-child(1) {
+        cursor: pointer;
+    }
+
+    .info {
+        font-weight: normal;
+        display: flex;
+        font-size: 12px;
+        cursor: pointer;
+        color: #757575;
+    }
+
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+}
+
+.card-Box {
+    // display: grid;
+    // grid-template-rows: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    // align-items: center;
+    margin: 0 5px 5px;
+    padding: 10px;
+    background-color: #edededc0;
+    border-radius: 10px;
+    min-height: 60px;
+    max-height: 120px;
+
+    .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 1.5fr;
+        font-size: 14px;
+
+        span {
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 550;
+        }
+    }
+}
+
+.BoxA {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    // grid-template-rows: 80px;
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.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>

src/views/pqs/panorama/components/cityMapL1.vue

@@ -0,0 +1,338 @@
+<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 { getGridDiagramAreaData, 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
+    // 变电站
+    getGridDiagramAreaData(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].subNum,
+                            res.data[0].deviceNum,
+                            res.data[0].lineNum
+                        ],
+                        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) => {
+                    let title = item.orgName.replace(/\(\d+\)/g, '')
+                    // return title.length > 5
+                    return title.length > 6
+                        ? title.length > 11
+                            ? title.slice(0, 5) + '\n ' + title.slice(5, 10) + '\n ' + title.slice(10)
+                            : title.slice(0, 5) + '\n ' + title.slice(5)
+                        : title
+                }),
+                axisLabel: {
+                    color: '#000',
+                    fontSize: 12,
+                    interval: 0
+                }
+            },
+            yAxis: {
+                name: '%',
+                min: 0,
+                max: 100
+            },
+            grid: {
+                top: '30px',
+                left: '0px',
+                right: '20px',
+                bottom: 0
+            },
+            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.1s 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;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/cityMapR.vue

@@ -0,0 +1,623 @@
+<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>
+                            <span class="line"></span>
+                            在线监测点数：{{ monitorList.onlineNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点数：{{ monitorList.overNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点占比：{{ monitorList.overRatio }}
+                        </div>
+                    </div>
+
+                    <MyEChart :style="`height:calc(${EchHeight.height} + 15px)`" :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">{{ technology[active]?.abnormalNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已关联工单数：</span>
+                                <span style="color: #81b337">{{ technology[active]?.associatedNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单转换率：</span>
+                                <span style="color: #338dff">{{ technology[active]?.conversionNum || 0 }}%</span>
+                            </div>
+                        </el-col>
+                        <el-col :span="11" class="col pt10" :offset="0.5">
+                            <div>
+                                <span>工单总数：</span>
+                                <span style="color: #2dcd28">{{ technology[active]?.workNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已处理工单数：</span>
+                                <span style="color: #81b337">{{ technology[active]?.processedNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单处置率：</span>
+                                <span style="color: #338dff">{{ technology[active]?.disposalNum || 0 }}%</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 { getSupervisionCityDetailsData } from '@/api/device-boot/panorama'
+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({})
+import { useConfig } from '@/stores/config'
+const config = useConfig()
+const passingCharts = ref()
+const exceededCharts = ref()
+const technology: any = ref({})
+
+const Voltage: any = [
+    {
+        label: '技术监督计划',
+        value: 'survey'
+    },
+    {
+        label: '在线监测',
+        value: 'onLine'
+    },
+    {
+        label: '用户投诉',
+        value: 'user'
+    },
+    {
+        label: '试运行问题',
+        value: 'trialRun'
+    }
+]
+
+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 || 0 + '%'),
+                value: res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData
+            },
+            {
+                name:
+                    '频率偏差：' +
+                    (res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData || 0 + '%'),
+                value: res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData
+            },
+            {
+                name:
+                    '电压总谐波畸变率：' +
+                    (res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData || 0 + '%'),
+                value: res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData
+            },
+            {
+                name:
+                    '闪变：' +
+                    (res.data[0]?.flickerQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.flickerQualifyData || 0 + '%'),
+                value: res.data[0]?.flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.flickerQualifyData
+            },
+            {
+                name:
+                    '三相电压不平衡度：' +
+                    (res.data[0]?.unbalanceQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.unbalanceQualifyData || 0 + '%'),
+                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: []
+            }
+            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 || 0,
+                            name: data[i].name
+                        },
+                        {
+                            value: 100 - (data[i].value || 0),
+                            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: {},
+            color: [config.layout.elementUiPrimary[0], '#FFBF00'],
+            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: 10
+                }
+            },
+            grid: {
+                top: '35px',
+                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: 10,
+                            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: 10,
+                            formatter: function (params: any) {
+                                return `${params.value == 3.14159 ? '' : params.value}`
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    })
+    // 稳态电能质量指标水平评估
+
+    getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
+        let data = [
+            {
+                name: '电压暂升',
+                value: res.data[0].upCount - 0
+            },
+            {
+                name: '电压暂降',
+                value: res.data[0].sagsCount - 0
+            },
+            {
+                name: '短时中断',
+                value: res.data[0].breakCount - 0
+            }
+        ]
+        statisticsCharts.value = {
+            title: {
+                text: '总数：' + (data[0].value + data[1].value + data[2].value),
+                left: '23%',
+                top: '45%',
+                textStyle: {
+                    // fontWeight: 600,
+                    fontSize: 12
+                }
+                // 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: ['50%', '70%'],
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+
+                        data: data
+                    }
+                ]
+            }
+        }
+    })
+    // 技术监督
+    getSupervisionCityDetailsData(form).then(res => {
+        technology.value = res.data
+    })
+}
+
+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;
+    align-items: 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.1s 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;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    // grid-template-columns: 1fr 1fr 1fr;
+    margin-top: 10px;
+    margin-bottom: 3px;
+    .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;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/details/evaluate.vue

@@ -0,0 +1,299 @@
+<template>
+    <!-- 综合评估详情 -->
+    <el-dialog draggable title="综合评估统计" v-model="dialogVisible" width="1400px">
+        <div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
+                <vxe-column field="deptName" title="地市" />
+                <vxe-column field="assessLevel" title="综合评估结论">
+                    <template #default="scope">
+                        <!-- class="conclusion"
+                            :class="
+                                scope.row.assessLevel == '特质'
+                                    ? 'background1'
+                                    : scope.row.assessLevel == '较差'
+                                    ? 'background2'
+                                    : scope.row.assessLevel == '极差'
+                                    ? 'background3'
+                                    : ''
+                            " -->
+                        <span>
+                            {{ scope.row.assessData }}
+                        </span>
+                    </template>
+                </vxe-column>
+                <vxe-column field="qualifyData" title="指标合格率(%)" />
+
+                <!-- <vxe-colgroup title="评估结论">
+                    <vxe-column field="vdevAssessLevel" title="电压偏差">
+                        <template #default="scope">
+                            <span
+                                class="conclusion"
+                                :class="
+                                    scope.row.vdevAssessLevel == '特质'
+                                        ? 'background1'
+                                        : scope.row.vdevAssessLevel == '较差'
+                                        ? 'background2'
+                                        : scope.row.vdevAssessLevel == '极差'
+                                        ? 'background3'
+                                        : ''
+                                "
+                            >
+                                {{ scope.row.vdevAssessLevel }}
+                            </span>
+                        </template>
+                    </vxe-column>
+
+                    <vxe-column field="freqAssessLevel" title="频率偏差">
+                        <template #default="scope">
+                            <span
+                                class="conclusion"
+                                :class="
+                                    scope.row.freqAssessLevel == '特质'
+                                        ? 'background1'
+                                        : scope.row.freqAssessLevel == '较差'
+                                        ? 'background2'
+                                        : scope.row.freqAssessLevel == '极差'
+                                        ? 'background3'
+                                        : ''
+                                "
+                            >
+                                {{ scope.row.freqAssessLevel }}
+                            </span>
+                        </template>
+                    </vxe-column>
+
+                    <vxe-column field="harmAssessLevel" title="电压总谐波畸变率">
+                        <template #default="scope">
+                            <span
+                                class="conclusion"
+                                :class="
+                                    scope.row.harmAssessLevel == '特质'
+                                        ? 'background1'
+                                        : scope.row.harmAssessLevel == '较差'
+                                        ? 'background2'
+                                        : scope.row.harmAssessLevel == '极差'
+                                        ? 'background3'
+                                        : ''
+                                "
+                            >
+                                {{ scope.row.harmAssessLevel }}
+                            </span>
+                        </template>
+                    </vxe-column>
+
+                    <vxe-column field="flickerAssessLevel" title="电压闪变">
+                        <template #default="scope">
+                            <span
+                                class="conclusion"
+                                :class="
+                                    scope.row.flickerAssessLevel == '特质'
+                                        ? 'background1'
+                                        : scope.row.flickerAssessLevel == '较差'
+                                        ? 'background2'
+                                        : scope.row.flickerAssessLevel == '极差'
+                                        ? 'background3'
+                                        : ''
+                                "
+                            >
+                                {{ scope.row.flickerAssessLevel }}
+                            </span>
+                        </template>
+                    </vxe-column>
+
+                    <vxe-column field="unbalanceAssessLevel" title="三相电压不平衡度">
+                        <template #default="scope">
+                            <span
+                                class="conclusion"
+                                :class="
+                                    scope.row.unbalanceAssessLevel == '特质'
+                                        ? 'background1'
+                                        : scope.row.unbalanceAssessLevel == '较差'
+                                        ? 'background2'
+                                        : scope.row.unbalanceAssessLevel == '极差'
+                                        ? 'background3'
+                                        : ''
+                                "
+                            >
+                                {{ scope.row.unbalanceAssessLevel }}
+                            </span>
+                        </template>
+                    </vxe-column>
+                </vxe-colgroup> -->
+            </vxe-table>
+        </div>
+        <div style="height: 300px; margin-top: 10px; position: relative" v-loading="loading">
+            <!-- <el-select
+                v-model="time"
+                size="small"
+               
+                @change="analysis"
+            >
+                <el-option label="年" value="1" />
+                <el-option label="月" value="3" />
+            </el-select> -->
+            <div style="position: absolute; width: 100px; top: 0px; right: 0px; z-index: 1">
+                <el-radio-group v-model="city" size="small" @change="analysis">
+                    <el-radio-button label="0">省</el-radio-button>
+                    <el-radio-button label="1">市</el-radio-button>
+                </el-radio-group>
+                <el-radio-group v-model="type" size="small" @change="analysis">
+                    <el-radio-button label="1">年</el-radio-button>
+                    <el-radio-button label="3">月</el-radio-button>
+                </el-radio-group>
+            </div>
+
+            <MyEChart style="height: 300px" :options="picEChart" />
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getAssessDetail, getAssessTrend } from '@/api/device-boot/panorama'
+const dialogVisible: any = ref(false)
+const rowList: any = ref({})
+const type = ref('1')
+const city = ref('0')
+const loading = ref(false)
+const tableData: any = ref([])
+
+const picEChart = ref()
+const open = async (row: any) => {
+    getAssessDetail(row).then(res => {
+        tableData.value = res.data
+    })
+    rowList.value = row
+    analysis()
+    dialogVisible.value = true
+}
+const analysis = () => {
+    loading.value = true
+    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
+    getAssessTrend({ ...rowList.value, searchBeginTime: time, type: type.value, areaType: city.value }).then(res => {
+        picEChart.value = {
+            title: {
+                text: '各地市综合评估趋势对比'
+            },
+            legend: {
+                right: 120,
+                top: 20
+            },
+            // tooltip: {
+            //     formatter: function (params: any) {
+            //         // console.log(123, params)
+
+            //         var tips = ''
+
+            //         for (var i = 0; i < params.length; i++) {
+            //             console.log('🚀 ~ getAssessTrend ~ params[i].value:', params[i].value)
+
+            //             tips +=
+            //                 params[i].seriesName +
+            //                 ':' +
+            //                 `<span style="color:${
+            //                     params[i].value > 4.5
+            //                         ? ''
+            //                         : params[i].value > 4
+            //                         ? ''
+            //                         : params[i].value > 3
+            //                         ? ''
+            //                         : params[i].value > 2
+            //                         ? '#97017e'
+            //                         : params[i].value > 0
+            //                         ? '#cc0000'
+            //                         : ''
+            //                 }">
+            //                     ${
+            //                         params[i].value > 4.5
+            //                             ? '优质'
+            //                             : params[i].value > 4
+            //                             ? '良好'
+            //                             : params[i].value > 3
+            //                             ? '一般'
+            //                             : params[i].value > 2
+            //                             ? '较差'
+            //                             : params[i].value > 0
+            //                             ? '极差'
+            //                             : ''
+            //                     }
+            //                     </span>` +
+            //                 '</br>'
+            //         }
+            //         return tips
+            //     }
+            // },
+            xAxis: {
+                name: '时间',
+                data: res.data[0].children.map((item: any) => item.dataTime)
+            },
+
+            grid: {
+                bottom: '10px',
+                top: '60px'
+            },
+
+            yAxis: {
+                name: ''
+            },
+            options: {
+                dataZoom: false,
+                series: []
+            }
+        }
+
+        let list: any = []
+        let time: any = []
+        let mun: any = []
+        res.data.forEach((item: any, num: any) => {
+            time.push(item.deptName)
+            list.push([])
+            item.children.forEach((val: any, i: any) => {
+                mun.push(val.score == 3.14159 ? null : val.score)
+                list[num].push(val.score == 3.14159 ? null : val.score)
+            })
+        })
+
+        list.forEach((item: any, i: any) => {
+            picEChart.value.options.series.push({
+                name: time[i],
+                type: 'line',
+                data: item
+            })
+        })
+        picEChart.value.yAxis.min = Math.min(...mun) < 1 ? 0 : (Math.min(...mun) - 0.5).toFixed(2)
+        picEChart.value.yAxis.max = Math.max(...mun) > 4.5 ? 5 : (Math.max(...mun) + 0.5).toFixed(2)
+        loading.value = false
+    })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+.conclusion {
+    display: inline-block;
+    padding: 0 10px;
+    height: 24px;
+    line-height: 24px;
+
+    border-radius: 4px;
+}
+.background1 {
+    background-color: #339966;
+    color: #fff;
+}
+.background2 {
+    background-color: #97017e;
+    color: #fff;
+}
+.background3 {
+    background-color: #cc0000;
+    color: #fff;
+}
+:deep(.el-select) {
+    min-width: 80px !important;
+}
+</style>

src/views/pqs/panorama/components/details/point.vue

@@ -0,0 +1,232 @@
+<template>
+    <!-- 监测点详情 -->
+    <el-dialog draggable title="监测点统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
+        <el-row style="height: 300px" :gutter="20">
+            <el-col :span="12">
+                <div class="title">
+                    <span>趋势分析</span>
+                    <!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
+                        <el-option label="年" value="1" />
+                        <el-option label="月" value="3" />
+                    </el-select> -->
+                    <el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
+                        <el-radio-button label="1">年</el-radio-button>
+                        <el-radio-button label="3">月</el-radio-button>
+                    </el-radio-group>
+                </div>
+                <MyEChart style="height: 260px" :options="trendEChart" />
+            </el-col>
+            <el-col :span="12">
+                <div class="title">
+                    <span>分布统计</span>
+                    <el-select
+                        v-model="statisticalType"
+                        value-key="id"
+                        style="width: 120px; margin-right: 80px"
+                        @change="statiStics"
+                    >
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
+                    </el-select>
+                </div>
+                <div class="pie">
+                    <MyEChart style="height: 260px" :options="picEChart" />
+                </div>
+            </el-col>
+        </el-row>
+        <div>
+            <div class="title">
+                <span>区域监测点统计</span>
+            </div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
+                <vxe-column field="orgName" title="区域" :formatter="formatter" />
+                <vxe-column field="num" title="监测点个数" sortable :formatter="formatter" />
+                <vxe-column field="integrityRate" sortable title="完整率(%)" />
+                <vxe-column field="onLineRate" sortable title="在线率(%)" />
+                <vxe-column field="outOfStandardRate" sortable title="超标监测点占比(%)" />
+            </vxe-table>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { useDictData } from '@/stores/dictData'
+import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
+const dictData = useDictData()
+const dialogVisible: any = ref(false)
+
+const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
+const tableData: any = ref([])
+const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network'])
+const time = ref('1')
+const statisticalType = ref(options[0])
+const loadTypeArr = dictData.getBasicData('Interference_Source')
+
+const rowList: any = ref({})
+const trendEChart: any = ref()
+
+const picEChart = ref()
+const open = async (row: any) => {
+    time.value = '1'
+    rowList.value = {
+        deviceInfoParam: {
+            ...row
+        },
+        pageNum: 1,
+        pageSize: 1000,
+        ...row
+    }
+    analysis(1)
+    // 统计
+    statiStics()
+    // 监测点列表
+    getGridDiagramLineData({
+        ...rowList.value,
+        statisticalType: rowList.value.deviceInfoParam.statisticalType
+    }).then((res: any) => {
+        tableData.value = res.data
+    })
+
+    dialogVisible.value = true
+}
+// 分析
+const analysis = (e: any) => {
+    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
+    // 分析
+    getGridDiagramLineTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
+        let name = []
+        let data = []
+        let num = 0
+        for (let k in res.data) {
+            name.push(k)
+            // num = num + res.data[k]
+            data.push(res.data[k])
+        }
+
+        trendEChart.value = {
+            title: {
+                text: '在线监测点总数量'
+            },
+            xAxis: {
+                name: '时间',
+                data: name
+            },
+            legend: {
+                show: false
+            },
+            yAxis: {
+                name: '个'
+            },
+
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '接入',
+                        type: 'line',
+                        data: data,
+                        smooth: true,
+
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    }
+                ]
+            }
+        }
+    })
+}
+// 统计
+const statiStics = () => {
+    getGridDiagramLineData({ ...rowList.value, statisticalType: statisticalType.value }).then(res => {
+        picEChart.value = {
+            title: {
+                text: ''
+            },
+            xAxis: {
+                data: res.data.map((item: any) => item.orgName)
+            },
+            yAxis: {
+                name: '%',
+                min: 0,
+                max: 100
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '数据完整性',
+                        type: 'bar',
+
+                        data: res.data.map((item: any) => item.integrityRate),
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    },
+                    {
+                        name: '在线率',
+                        type: 'bar',
+                        data: res.data.map((item: any) => item.onLineRate),
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    },
+                    {
+                        name: '超标监测点占比',
+                        type: 'bar',
+                        data: res.data.map((item: any) => item.outOfStandardRate),
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    }
+                ]
+            }
+        }
+    })
+}
+const formatter = (row: any) => {
+    if (row.column.field == 'orgName') {
+        return row.cellValue.match(/[\u4e00-\u9fa5]+/g).join('')
+    } else if (row.column.field == 'num') {
+        return row.row.orgName.match(/\(([^]+)\)/)[1]
+    } else {
+        return row.cellValue
+    }
+}
+const handleClose = () => {
+    tableData.value = []
+    dialogVisible.value = false
+}
+
+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;
+}
+:deep(.el-table thead) {
+    color: #000;
+}
+</style>

src/views/pqs/panorama/components/details/stand.vue

@@ -0,0 +1,378 @@
+<template>
+    <!-- 变电站 -->
+    <el-dialog draggable title="变电站统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
+        <el-row style="height: 300px" :gutter="20">
+            <el-col :span="12">
+                <div class="title">
+                    <span>趋势分析</span>
+                    <!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
+                        <el-option label="年" value="1" />
+                        <el-option label="月" value="3" />
+                    </el-select> -->
+                    <el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
+                        <el-radio-button label="1">年</el-radio-button>
+                        <el-radio-button label="3">月</el-radio-button>
+                    </el-radio-group>
+                </div>
+                <MyEChart style="height: 260px" :options="trendEChart" />
+            </el-col>
+            <el-col :span="12">
+                <div class="title">
+                    <span>
+                        污染告警
+                        <el-popover placement="right" :width="170" trigger="hover">
+                            <template #reference>
+                                <WarningFilled class="WarningFilled" />
+                            </template>
+                            <div class="text">
+                                <span style="color: #00b07d">无污染：(0 , 1]</span>
+                                <br />
+                                <span style="color: #3399ff">轻微污染：(1 , 1.2]</span>
+                                <br />
+                                <span style="color: #ffcc33">轻度污染：(1.2 , 1.6]</span>
+                                <br />
+                                <span style="color: #ff9900">中度污染：(1.6 , 2]</span>
+                                <br />
+                                <span style="color: #cc0000">重度污染：(2 , +∞)</span>
+                            </div>
+                        </el-popover>
+                    </span>
+                    <!-- <el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select> -->
+                    <el-radio-group
+                        v-model="contaminate"
+                        style="margin-right: 50px"
+                        @change="contaminateC"
+                        size="small"
+                    >
+                        <el-radio-button v-for="item in options" :label="item.id">{{ item.name }}</el-radio-button>
+                    </el-radio-group>
+                </div>
+
+                <div class="pie">
+                    <MyEChart
+                        v-for="(item, i) in picEChart"
+                        :style="i == 3 ? `margin-left: 20%;` : ``"
+                        class="MyEChart"
+                        :options="item"
+                    />
+                </div>
+            </el-col>
+        </el-row>
+        <div>
+            <div class="title mb10">
+                <span>区域变电站统计</span>
+            </div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
+                <vxe-column field="name" title="区域" />
+                <vxe-column field="num" sortable title="变电站总数" />
+                <vxe-column field="num1" sortable title="无污染数量" :formatter="formatter" />
+                <vxe-column field="num2" sortable title="轻微污染数量" :formatter="formatter" />
+                <vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
+                <vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
+                <vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
+            </vxe-table>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+import { WarningFilled } from '@element-plus/icons-vue'
+import { getPollutionAlarmList, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
+const dictData = useDictData()
+const dialogVisible: any = ref(false)
+const time = ref('1')
+const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
+const options: any = dictData.getBasicData('Pollution_Statis').filter(item => {
+    if (item.code == 'V_Harmonic' || item.code == 'I_All') {
+        return item
+    }
+})
+const contaminate = ref(options[0].id)
+const rowList: any = ref({})
+const trendEChart: any = ref({})
+const tableData: any = ref([])
+
+const picEChart: any = ref([{}, {}, {}, {}, {}])
+
+const open = async (row: any) => {
+    time.value = '1'
+    rowList.value = {
+        deviceInfoParam: {
+            ...row
+        },
+        pageNum: 1,
+        pageSize: 1000,
+        ...row
+    }
+    analysis(1)
+    // 污染
+    contaminateC()
+    // 列表
+
+    dialogVisible.value = true
+}
+const contaminateC = () => {
+    // rowList.value.deviceInfoParam.ids=[contaminate.value]
+    getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
+        let data = []
+
+        let a1 = 0
+        let a2 = 0
+        let a3 = 0
+        let a4 = 0
+        let a5 = 0
+        if (rowList.value.isUpToGrid == 0) {
+            data = res.data.info
+        } else {
+            data = res.data.gwInfo
+        }
+        for (let i = 0; i < data.length; i++) {
+            if (data[i] >= 2) {
+                ++a5
+            } else if (data[i] >= 1.6 && data[i] < 2) {
+                ++a4
+            } else if (data[i] >= 1.2 && data[i] < 1.6) {
+                ++a3
+            } else if (data[i] >= 1 && data[i] < 1.2) {
+                ++a2
+            } else if (data[i] >= 0 && data[i] < 1) {
+                ++a1
+            }
+        }
+        // console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)
+
+        let list = [
+            {
+                value: ((a1 / data.length || 0) * 100).toFixed(2),
+                name: `无污染：${a1}座`
+            },
+            {
+                value: ((a2 / data.length || 0) * 100).toFixed(2),
+                name: `轻微污染：：${a2}座`
+            },
+            {
+                value: ((a3 / data.length || 0) * 100).toFixed(2),
+                name: `轻度污染：${a3}座`
+            },
+            {
+                value: ((a4 / data.length || 0) * 100).toFixed(2),
+                name: `中度污染：${a4}座`
+            },
+            {
+                value: ((a5 / data.length || 0) * 100).toFixed(2),
+                name: `重度污染：${a5}座`
+            }
+        ]
+        const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#cc0000']
+
+        list.forEach((item, i) => {
+            picEChart.value[i] = {
+                legend: {
+                    type: 'scroll',
+                    orient: 'vertical',
+                    left: 10,
+                    top: '10%'
+                },
+                xAxis: {
+                    show: false
+                },
+                yAxis: {
+                    show: false
+                },
+                options: {
+                    dataZoom: null,
+                    series: [
+                        {
+                            type: 'gauge',
+                            startAngle: 180,
+                            center: ['50%', '80%'],
+                            radius: '135%',
+                            endAngle: 0,
+                            min: 0,
+                            max: 100,
+                            progress: {
+                                show: true,
+                                width: 15,
+                                itemStyle: {
+                                    color: color[i]
+                                }
+                            },
+                            pointer: {
+                                show: false
+                            },
+                            axisLine: {
+                                lineStyle: {
+                                    width: 15,
+                                    color: [[1, '#f4f4f4']]
+                                }
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: false
+                                // distance: 5,
+                                // color: '#666',
+                                // fontSize: 12,
+                                // formatter: function (value: any) {
+                                //     if (value === 0 || value === 100) {
+                                //         return value + '%'
+                                //     }
+                                // }
+                            },
+                            anchor: {
+                                show: false,
+                                showAbove: false,
+                                size: 25,
+                                itemStyle: {
+                                    borderWidth: 60
+                                }
+                            },
+                            title: {
+                                show: true,
+                                offsetCenter: [0, '20%'],
+                                fontSize: 14
+                            },
+                            detail: {
+                                valueAnimation: true,
+                                fontSize: 14,
+                                lineHeight: 20,
+                                color: color[i],
+                                fontWeight: 'bold',
+                                offsetCenter: [0, '-20%'],
+                                formatter: function (value: any) {
+                                    return '{a|占比} ' + '\n' + value + '{a|%}'
+                                },
+                                rich: {
+                                    a: {
+                                        color: '#333',
+                                        fontSize: 16,
+                                        lineHeight: 30
+                                    }
+                                }
+                            },
+                            data: [item]
+                        }
+                    ]
+                }
+            }
+        })
+    })
+    getPollutionAlarmList({ ...rowList.value, ids: [contaminate.value] }).then(res => {
+        tableData.value = res.data.map((item: any) => {
+            return {
+                name: item[0],
+                num: item[1],
+                num1: item[2],
+                num2: item[3],
+                num3: item[4],
+                num4: item[5],
+                num5: item[6]
+            }
+        })
+    })
+}
+const analysis = (e: any) => {
+    let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
+    // 分析
+    getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
+        let name = []
+        let data = []
+        let num = 0
+        for (let k in res.data) {
+            name.push(k)
+            // num = num + res.data[k]
+            data.push(res.data[k])
+        }
+
+        trendEChart.value = {
+            title: {
+                text: '变电站接入总数量'
+            },
+            xAxis: {
+                name: '时间',
+                data: name
+            },
+            legend: {
+                show: false
+            },
+            yAxis: {
+                name: '座'
+            },
+
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '接入',
+                        type: 'line',
+                        data: data,
+                        smooth: true,
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    }
+                ]
+            }
+        }
+    })
+}
+const formatter = (row: any) => {
+    if (row.column.field == 'dataV') {
+        return row.cellValue == 3.14159 ? '/' : row.cellValue
+    } else if (row.column.field == 'data') {
+        return row.cellValue == 3.14159 ? '/' : row.cellValue
+    } else if (row.column.field == 'voltageLevel') {
+        return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
+    } else {
+        return row.cellValue
+    }
+}
+const handleClose = () => {
+    tableData.value = []
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+:deep(.el-select) {
+    min-width: 80px;
+}
+.title {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    span {
+        font-weight: 550;
+        font-size: 18px;
+    }
+    .WarningFilled {
+        width: 16px;
+        cursor: pointer;
+    }
+}
+.pie {
+    display: flex;
+    flex-wrap: wrap;
+    .MyEChart {
+        height: 130px;
+        width: 30%;
+        margin-right: 3%;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/details/steadyState.vue

@@ -0,0 +1,338 @@
+<!-- 稳态 -->
+<template>
+    <!-- 终端 -->
+    <el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
+        <el-row style="height: 300px" :gutter="20">
+            <el-col :span="12">
+                <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: 250px; width: 100%" ref="chartRef"></div>
+                </div>
+            </el-col>
+        </el-row>
+        <div>
+            <div class="title">
+                <span>区域稳态电能质量水平评估</span>
+            </div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
+                <vxe-column field="deptName" title="区域" />
+                <vxe-column sortable field="onlineNum" title="在线监测点数量(个)" />
+                <vxe-column sortable field="overNum" title="超标监测点数量(个)" />
+                <vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
+
+                <vxe-colgroup :title="item" v-for="(item, i) in title">
+                    <vxe-column title="监测点数	" field="overNum">
+                        <template #default="scope">
+                            <span>{{ scope.row.list[i].overNum }}</span>
+                        </template>
+                    </vxe-column>
+                    <vxe-column title="天数" field="overDay">
+                        <template #default="scope">
+                            <span>{{ scope.row.list[i].overDay }}</span>
+                        </template>
+                    </vxe-column>
+                </vxe-colgroup>
+            </vxe-table>
+        </div>
+    </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 title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
+
+const echart = (row: any) => {
+    let maxList: any = []
+    row.forEach((item: any) => {
+        maxList.push(...(item.ratioList || [0]))
+    })
+    let max = Math.max(...maxList) > 50 ? 100 : 50
+
+    let chart = echarts.init(chartRef.value as HTMLDivElement)
+
+    let dataname = ['频率偏差(Hz)',
+        '电压偏差(%)',
+        '电压总谐波畸变率(%)',
+        '三相电压不平衡度(%)',
+        '闪变',
+        '谐波电压(%)',
+        '谐波电流(%)',
+        '间谐波电压(%)',
+        '负序电流(A)']
+    // let datamax = [100, 100, 100, 100, 100, 100]
+    let indicator = []
+    for (let i = 0; i < dataname.length; i++) {
+        indicator.push({
+            name: dataname[i],
+            max: max
+        })
+    }
+
+    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.55)',
+            borderWidth: 0,
+            position: 'bottom'
+        },
+        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%', '60%'],
+            radius: '60%',
+            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)
+    //环比
+    evaluationRatio(row).then(res => {
+        echart(res.data)
+    })
+    // 稳态电能质量水平评估详细列表
+    evaluationDetail(row).then(res => {
+        tableData.value = res.data
+    })
+}
+// 点击电压等级
+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: 33px;
+    margin: 8px 30px;
+    width: 100%;
+    box-shadow: 1px 1px 1px 1px #e8e3e3;
+    display: flex;
+    font-size: 18px;
+    line-height: 35px;
+
+    img {
+        height: 25px;
+        width: 25px;
+        margin: 4px 20px 0px 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;
+    // }
+}
+
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/details/technique.vue

@@ -0,0 +1,78 @@
+<!-- 技术 -->
+<template>
+    <el-dialog draggable title="技术监督统计" v-model="dialogVisible" width="1400px">
+        <div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
+                <vxe-column field="orgName" title="区域" />
+                <vxe-column field="abnormalNum" title="异常问题总数" />
+                <vxe-column field="workNum" title="工单总数" />
+                <!-- <vxe-column field="num" title="已关联工单数" /> -->
+                <vxe-column field="conversionNum" title="工单转换率(%)" />
+
+                <vxe-column field="processedNum" title="已处理工单数" />
+                <vxe-column field="disposalNum" title="工单处置率(%)" />
+            </vxe-table>
+        </div>
+        <div style="height: 300px; margin-top: 10px">
+            <MyEChart style="height: 300px" :options="picEChart" />
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getSupervisionDetailsData, getSupervisionCityDetailsData } from '@/api/device-boot/panorama'
+const dialogVisible: any = ref(false)
+
+const tableData: any = ref([])
+
+const picEChart = ref({})
+const open = async (row: any) => {
+    dialogVisible.value = true
+    getSupervisionDetailsData(row).then(res => {
+        tableData.value = res.data
+    })
+    getSupervisionCityDetailsData(row).then(res => {
+        picEChart.value = {
+            title: {
+                text: ''
+            },
+            xAxis: {
+                name: '',
+                data: ['技术监督计划', '用户投诉', '在线监测问题','试运行问题']
+            },
+
+            yAxis: {
+                name: '',
+                min: 0,
+                max: 100
+            },
+
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '问题个数',
+                        type: 'bar',
+                        data: [res.data.survey.abnormalNum, res.data.user.abnormalNum, res.data.onLine.abnormalNum, res.data.trialRun.abnormalNum]
+                    },
+                    {
+                        name: '已处理',
+                        type: 'bar',
+
+                        data: [res.data.survey.processedNum, res.data.user.processedNum, res.data.onLine.processedNum, res.data.trialRun.processedNum]
+                    }
+                ]
+            }
+        }
+    })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/details/temporaryState.vue

@@ -0,0 +1,153 @@
+<!-- 暂态 -->
+<template>
+    <el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
+        <div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
+                <vxe-column field="name" title="区域" />
+
+                <vxe-column sortable field="sagTimes" title="暂降次数" />
+                <vxe-column sortable field="swellTimes" title="暂升次数" />
+                <vxe-column sortable field="interruptTimes" title="短时中断次数" />
+
+                <vxe-colgroup title="暂态严重度占比">
+                    <vxe-column sortable field="rate90" title="SARFI-90" />
+                    <vxe-column sortable field="rate50" title="SARFI-50" />
+                    <vxe-column sortable field="rate20" title="SARFI-20" />
+                </vxe-colgroup>
+            </vxe-table>
+        </div>
+        <div style="margin-top: 10px; display: flex">
+            <!-- 
+            -->
+            <div class="statistics-main">
+                <div class="statistics-box">
+                    <MyEChart style="height: 250px" :options="picEChart" />
+
+                    <el-table size="small" height="250px" :data="descentData">
+                        <el-table-column prop="name" label="暂降原因" width="80px" align="center" />
+                        <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
+                    </el-table>
+                </div>
+
+                <div class="statistics-box">
+                    <MyEChart style="height: 250px" :options="picEChart1" />
+                    <el-table size="small" height="250px" :data="resembleData">
+                        <el-table-column prop="name" label="暂降类型" width="80px" align="center" />
+                        <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
+                    </el-table>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
+
+const dialogVisible: any = ref(false)
+
+const tableData: any = ref([])
+const descentData = ref([])
+const resembleData = ref([])
+
+const picEChart = ref({})
+const picEChart1 = ref({})
+const open = async (row: any) => {
+    getEventDetailByList({ ...row, deviceInfoParam: row }).then((res: any) => {
+        tableData.value = res.data
+    })
+    getEventReason(row).then(res => {
+        descentData.value = res.data.reason
+        resembleData.value = res.data.type
+        picEChart.value = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                left: '10px'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['60%', '50%'],
+                        radius: '50%',
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+                        data: res.data.reason
+                    }
+                ]
+            }
+        }
+        picEChart1.value = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                left: '10px'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['60%', '50%'],
+                        radius: '50%',
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+                        data: res.data.type
+                    }
+                ]
+            }
+        }
+    })
+    dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.statistics-main {
+    // height: 300px;
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+
+    .statistics-box {
+        // height: 300px;
+        // display: flex;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/details/terminal.vue

@@ -0,0 +1,263 @@
+<template>
+    <!-- 终端 -->
+    <el-dialog draggable title="终端统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
+        <el-row style="height: 300px" :gutter="20">
+            <el-col :span="12">
+                <div class="title">
+                    <span>趋势分析</span>
+                    <!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
+                        <el-option label="年" value="1" />
+                        <el-option label="月" value="3" />
+                    </el-select> -->
+                    <el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
+                        <el-radio-button label="1">年</el-radio-button>
+                        <el-radio-button label="3">月</el-radio-button>
+                    </el-radio-group>
+                </div>
+                <MyEChart style="height: 260px" :options="trendEChart" />
+            </el-col>
+            <el-col :span="12">
+                <div class="title">
+                    <span>分布统计</span>
+                </div>
+                <div class="pie">
+                    <MyEChart style="height: 260px; width: 50%" :options="picEChart" />
+                    <el-table size="small" height="260px" style="width: 50%" :data="picList">
+                        <el-table-column prop="orgName" width="80px" align="center"></el-table-column>
+                        <el-table-column prop="onlineEvaluate" label="终端评价" align="center">
+                            <template #default="scope">
+                                <span
+                                    :style="{
+                                        color:
+                                            scope.row.onlineEvaluate < 60
+                                                ? 'red'
+                                                : scope.row.onlineEvaluate < 90
+                                                ? 'orange'
+                                                : 'green'
+                                    }"
+                                >
+                                    {{
+                                        scope.row.onlineEvaluate < 60
+                                            ? '差'
+                                            : scope.row.onlineEvaluate < 90
+                                            ? '良'
+                                            : '优'
+                                    }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="devCount" label="在运终端数" align="center" />
+                        <el-table-column prop="devOnCount" label="在线终端数" align="center" />
+                    </el-table>
+                </div>
+            </el-col>
+        </el-row>
+        <div>
+            <div class="title">
+                <span>区域终端统计</span>
+            </div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
+                <vxe-column field="orgName" title="区域" />
+                <vxe-column field="runNum" sortable title="运行个数	" />
+                <vxe-column field="overhaulNum" sortable title="检修个数	" />
+                <vxe-column field="refundNum" sortable title="退役个数" />
+                <vxe-column field="onLineRate" sortable title="终端在线率(%)" />
+            </vxe-table>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getGridDiagramDevTendency, getGridDiagramDevData, getGridDiagramDevDataList } from '@/api/device-boot/panorama'
+const dictData = useDictData()
+const dialogVisible: any = ref(false)
+const time = ref('1')
+const rowList: any = ref({})
+const tableData: any = ref()
+
+const picList = ref([])
+
+const trendEChart: any = ref({})
+
+const picEChart = ref()
+const open = async (row: any) => {
+    time.value = '1'
+    rowList.value = {
+        deviceInfoParam: {
+            ...row
+        },
+        pageNum: 1,
+        pageSize: 1000,
+        ...row
+    }
+    // 趋势分析
+    analysis(1)
+    dialogVisible.value = true
+    //分布统计
+    getGridDiagramDevData(rowList.value).then(res => {
+        picList.value = res.data
+        let picData: any = []
+        res.data.forEach((item: any) => {
+            picData.push({
+                value: item.devCount,
+                name: `${item.orgName}`,
+                itemStyle: {
+                    color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
+                }
+            })
+        })
+
+        picEChart.value = {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b} :在运终端数 {c} 台'
+            },
+            legend: {
+                show: false
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        startAngle: 360,
+                        center: ['50%', '55%'],
+                        radius: ['40%', '60%'],
+                        endAngle: 0,
+                        labelLine: {
+                            length: 8,
+                            length2: 30,
+                            show: true
+                        },
+                        label: {
+                            padding: [0, -30],
+                            formatter: '{b}\n\n'
+                        },
+                        itemStyle: {
+                            borderColor: '#fff',
+                            borderWidth: 1
+                        },
+
+                        data: picData
+                    }
+                ]
+            }
+        }
+    })
+    // 列表
+    getGridDiagramDevDataList({
+        deviceInfoParam: {
+            ...row,
+            serverName: 'pqs-common',
+            ids: [row.id],
+            runFlag: [],
+            comFlag: [],
+            manufacturer: dictData.getBasicData('Dev_Manufacturers'),
+            statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+        },
+        ...row,
+        serverName: 'pqs-common',
+        ids: [row.id],
+        runFlag: [],
+        comFlag: [],
+        manufacturer: dictData.getBasicData('Dev_Manufacturers'),
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+    }).then((res: any) => {
+        tableData.value = res.data
+    })
+}
+
+const analysis = (e: any) => {
+    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
+
+    getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
+        let name = []
+        let data = []
+        let num = 0
+        for (let k in res.data) {
+            name.push(k)
+            // num = num + res.data[k]
+            data.push(res.data[k])
+        }
+
+        trendEChart.value = {
+            title: {
+                text: '终端接入总数量'
+            },
+            xAxis: {
+                name: '时间',
+                data: name
+            },
+            legend: {
+                show: false
+            },
+            yAxis: {
+                name: '台'
+            },
+
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        name: '接入',
+                        type: 'line',
+                        data: data,
+                        smooth: true,
+
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12
+                        }
+                    }
+                ]
+            }
+        }
+    })
+}
+const formatter = (row: any) => {
+    if (row.column.field == 'onlineEvaluate') {
+        return row.cellValue == 3.14159 ? '/' : row.cellValue * 100
+    } else {
+        return row.cellValue
+    }
+}
+const handleClose = () => {
+    tableData.value = []
+    dialogVisible.value = false
+}
+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;
+}
+:deep(.el-table thead) {
+    color: #000;
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/line/info.vue

@@ -0,0 +1,742 @@
+<template>
+    <div class="default-main lineInfo" :style="height">
+        <DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
+        <el-page-header :icon="ArrowLeft" @back="emit('back')">
+            <template #content>
+                <span style="font-size: 16px">{{ dropList.lineName }}详情　</span>
+                <span style="font-weight: 500">最新数据时间：</span>
+                <span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</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;' : TargetData.info == 3 ? 'color: #000' : '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; align-items: center">
+                            <img :src="url[i]" />
+                            <span style="line-height: 20px">{{ item.targetName }}</span>
+                        </el-col>
+                        <el-col :span="10" style="display: flex; align-items: center">
+                            <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: '频率偏差(Hz)',
+                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: [
+                    '频率偏差(Hz)',
+                    '电压偏差(%)',
+                    '电压总谐波畸变率(%)',
+                    '三相电压不平衡度(%)',
+                    '闪变',
+                    '谐波电压(%)',
+                    '谐波电流(%)',
+                    '间谐波电压(%)',
+                    '负序电流(A)'
+                ],
+                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,
+
+                    res.data.uharm == 3.14159 ? null : res.data.uharm,
+                    res.data.iharm == 3.14159 ? null : res.data.iharm,
+                    res.data.inuHarm == 3.14159 ? null : res.data.inuHarm,
+                    res.data.ineg == 3.14159 ? null : res.data.ineg
+                ]
+            }
+        ])
+    })
+
+    // 暂态事件统计
+    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: '40%',
+                top: '45%',
+                textStyle: {
+                    // fontWeight: 600,
+                    fontSize: 12
+                }
+                // 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
+        let judgment = true
+        for (let k in res.data) {
+            if (k != 'lineId') {
+                if (res.data[k] != '/') {
+                    judgment = false
+                }
+                flag += (res.data[k] == '/' ? 0 : res.data[k])
+            }
+        }
+
+        if (IntegrityNum.value == 0) {
+            num = 2 //完整性告警
+        } else {
+            if (flag > 0) {
+                num = 1 //超标告警
+            } else {
+                num = 0 //无告警
+            }
+            if (judgment) {
+                num = 3
+            }
+        }
+
+        TargetData.value.info = num
+    })
+}
+const echart = (row: any) => {
+    let chart = echarts.init(chartRef.value as HTMLDivElement)
+
+    let dataname = [
+        '频率偏差(Hz)',
+        '电压偏差(%)',
+        '电压总谐波畸变率(%)',
+        '三相电压不平衡度(%)',
+        '闪变',
+        '谐波电压(%)',
+        '谐波电流(%)',
+        '间谐波电压(%)',
+        '负序电流(A)'
+    ]
+    let datamax = [100, 100, 100, 100, 100, 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.55)',
+            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);
+    height: 87%;
+
+    .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: 2px 5px;
+    height: 20px;
+    border-radius: 4px;
+}
+
+.background1 {
+    background-color: #339966;
+    color: #fff;
+}
+
+.background2 {
+    background-color: #97017e;
+    color: #fff;
+}
+
+.background3 {
+    background-color: #cc0000;
+    color: #fff;
+}
+</style>

src/views/pqs/panorama/components/map.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="default-main">
+        <DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
+        <baidu-map class="map" :style="height" @ready="initMap" @zoomend='syncCenterAndZoom'
+            :center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10" :scroll-wheel-zoom='true'>
+            <!--  线-->
+            <div v-if='zoom > 13'>
+                <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
+
+            </div>
+            <!-- 变电站-->
+            <template v-if='zoom > 13'>
+                <bm-marker :position='path' v-for='path in siteList' :key='path.subId' :icon='path.icon'
+                    @click='markerClick(path)'></bm-marker>
+            </template>
+            <!-- 点 -->
+            <BmlMarkerClusterer maxZoom='12'>
+                <bm-marker :position='path' v-for='path in areaLineInfo' :key='path.lineId' :icon='path.icon'
+                    @click='markerClick(path)'></bm-marker>
+            </BmlMarkerClusterer>
+            <!-- 行政区划 -->
+            <bm-boundary v-for="item in boundaryList" :name="item.name" :strokeWeight="2" strokeColor="#0e8780"
+                fillColor="#0e8780" fillOpacity="0.05"></bm-boundary>
+
+            <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
+                @lineupdate="updatePolygonPath" /> -->
+
+        </baidu-map>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { mainHeight } from '@/utils/layout'
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
+import { ref, reactive, onMounted } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { useDictData } from '@/stores/dictData'
+const datePickerRef = ref()
+const height = mainHeight(20)
+// 页面中直接引入就可以
+const dictData = useDictData()
+const deptIndex = ref(dictData.state.area[0].id)
+import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
+const boundaryList = ref([
+    { name: '张家口市' },
+    { name: '唐山市' },
+    { name: '秦皇岛市' },
+    { name: '承德市' },
+    { name: '廊坊市' },
+])
+
+const zoom = ref(13)
+const areaLineInfo = ref<any>([])
+const siteList = ref<any>([])
+const polyline = ref<any>([])
+const lineId = ref('')
+const center = ref({
+    lng: 0,
+    lat: 0
+}) 
+const initMap = async ({ BMap, map }: any) => {
+
+
+
+
+}
+const addMarkers = async (row?: any, key?: any, num?: any) => {
+
+    let params = {
+        deptIndex: deptIndex.value,
+        monitorFlag: 2,
+        powerFlag: 2,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1],
+        serverName: 'event-boot',
+        statisticalType: {},
+        ...row
+    }
+
+    let { data } = await getAreaLineInfo(params)
+    polyline.value=[]
+    areaLineInfo.value=[]
+    let r = 0.0035
+    let list = data.filter((item: any) => item.lng != 0)
+    list.forEach((item: any) => {
+        // 变电站图标
+        item.icon = {
+            url: new URL('@/assets/jcd.png', import.meta.url).href,
+            size: {
+                width: 40,
+                height: 40
+            }
+        }
+        if (item.children.length > 10 && item.children.length < 100) {
+            r = 0.0055
+        } else if (item.children.length >= 100) {
+            r = 0.01055
+        }
+        item.children.forEach((val: any, i: number) => {
+            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
+            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
+            // 监测点图标
+            val.icon = {
+                url: '',
+                size: {
+                    width: 40,
+                    height: 40
+                }
+            }
+            switch (val.runFlag) {
+                case 0:
+                    // 投运
+                    if (val.comFlag == 0) {
+                        // 异常
+                        if (val.noDealCount > 0) {
+                            // 异常有暂降
+                            val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
+                        } else if (val.noDealCount == 0) {
+                            // 异常无暂降
+                            val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
+                        }
+                    } else if (val.comFlag == 1) {
+                        // 正常
+                        if (val.noDealCount > 0) {
+                            // 正常有暂降
+                            val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
+                        } else if (val.noDealCount == 0) {
+                            // 正常无暂降
+                            val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
+                        }
+                    }
+                    break
+                case 1:
+                    val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
+                    break
+                case 2:
+                    val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
+                    break
+                default:
+                    break
+            }
+            polyline.value.push([
+                {
+                    lng: item.lng,
+                    lat: item.lat
+                },
+                {
+                    lng: val.lng,
+                    lat: val.lat
+                }
+            ])
+        })
+
+        areaLineInfo.value.push(...item.children)
+    })
+    siteList.value = list
+    center.value.lng = areaLineInfo.value[0].lng
+    center.value.lat = areaLineInfo.value[0].lat
+
+
+}
+const syncCenterAndZoom = (e: any) => {
+    zoom.value = e.target.getZoom()
+}
+const locatePositions = (e: any) => {
+
+    deptIndex.value = e.data.id
+    // 加载点
+    addMarkers()
+
+    // powerManageGridMap.value.drillDown({
+    //     // 判断超高压
+    //     orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
+    //     onlyDisplay: true
+    // })
+}
+const markerClick = (e: any) => {
+    // infoWindowPoint.value = e
+    // infoWindowPoint.value.show = true
+}
+const mouseover = () => {
+    console.log(123);
+
+}
+onMounted(() => {
+})
+defineExpose({ addMarkers, locatePositions })
+</script>
+<style lang="scss" scoped>
+.map {
+    width: 100%;
+
+}
+</style>

src/views/pqs/panorama/components/mapL.vue

@@ -0,0 +1,650 @@
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 监测规模 -->
+            <div class="mb10" :style="`height:250px);`">
+                <div class="title">
+                    <span>监测规模</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div style="display: flex">
+                    <div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
+                        <div class="card">
+                            <span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
+                            <span :style="`color: ${item.color[0]}; cursor:pointer`"
+                                @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
+                                {{ item.list[4].numOne }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 监测规模 列表 -->
+                <div>
+                    <div class="vcl mt5">
+                        <p v-for="(item, i) in vList"
+                            :style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
+                            {{ item }}
+                        </p>
+                    </div>
+
+                    <div v-for="(item, i) in list" class="vcl">
+                        <p style="width: 60px">
+                            {{ item.title }}
+                            <!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
+                                详情
+                            </span> -->
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
+                            {{ item.list[0].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
+                            {{ item.list[1].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
+                            {{ item.list[2].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
+                            {{ item.list[3].numOne }}
+                        </p>
+                        <p style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
+                            @click.stop="open(i)">
+                            详情
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} + 50px)`">
+                <div class="title">
+                    <span>监测点指标统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
+                    <div v-for="item in countList">
+                        <div class="title mt5" style="font-weight: 500">
+                            <img src="@/assets/img/TJ.png" />
+                            {{ item.title }}
+                        </div>
+                        <div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
+                            v-for="val in item.children">
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">{{ val.title }}</span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(val.numList, [], 0)">
+                                    投运:
+                                    <span>{{ val.num }}</span>
+                                </div>
+                                <div @click="LookMap(val.onLineNumList, [], 0)">
+                                    在线:
+                                    <span style="color: #2dcd28">{{ val.onLineNum }}</span>
+                                </div>
+                                <div>
+                                    数据完整性:
+                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 55px)`">
+                <div class="title">
+                    <span>监测运行统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+
+                <div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
+                    <div class="card-Box" v-for="item in linList">
+                        <div>
+                            <span class="line"></span>
+                            <span class="vol">{{ item.title[0] }}</span>
+                        </div>
+                        <div class="num">
+                            <div>
+                                {{ item.title[1] }}:
+                                <span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
+                                    {{ item.lineNumOne || 0 }}
+                                </span>
+                            </div>
+                            <div>
+                                {{ item.title[2] }}:
+                                <span style="color: #cc0000" @click="LookMap([], item.lineListTwo, 1)">
+                                    {{ item.lineNumTwo || 0 }}
+                                </span>
+                            </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" />
+        <div class="legeng">
+            <div v-for="item in legengList">
+                <span :style="`background-color: ${item.color};`"></span>
+                <span>{{ item.title }}</span>
+            </div>
+        </div>
+
+        <!-- 变电站详情 -->
+        <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, View } 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,
+    getGridDiagramStatistics,
+    getGridDiagramRunData
+} 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: '变电站',
+        color: ['#000', '#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: []
+            }
+        ]
+    },
+    {
+        title: '监测终端',
+        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: []
+            }
+        ]
+    },
+    {
+        title: '监测点',
+
+        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: []
+            }
+        ]
+    }
+])
+const countList: any = ref([
+    {
+        title: '冀北',
+        children: [
+            {
+                title: '电网侧监测点',
+                num: 0,
+                onLineNum: 0,
+                integrityRate: 0
+            },
+            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+        ]
+    },
+    {
+        title: '上送网公司',
+        children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    }
+])
+const linList: any = ref([
+    {
+        title: ['运行状态', '合格', '告警']
+    },
+    {
+        title: ['通讯状态', '在线', '离线']
+    },
+
+    {
+        title: ['数据完整性', '≥90%', '<90%']
+    },
+    {
+        title: ['电能质量指标', '未超标', '超标']
+    }
+])
+const legengList = [
+    {
+        color: '#00b07d',
+        title: '优质'
+    },
+    {
+        color: '#3399ff',
+        title: '良好'
+    },
+    {
+        color: '#ffcc33',
+        title: '合格'
+    },
+    {
+        color: '#db0887',
+        title: '较差'
+    },
+    {
+        color: '#ff0000',
+        title: '极差'
+    }
+]
+const vList = ['', '500kV', '220kV', '110kV', '35kV', '']
+const formRow: any = ref({})
+const height = mainHeight(30)
+const boxHeight = mainHeight(290, 2)
+
+// 详情
+const open = (e: any) => {
+    if (e == 0) {
+        standRef.value.open(formRow.value)
+    } else if (e == 1) {
+        terminalRef.value.open(formRow.value)
+    } else if (e == 2) {
+        pointRef.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
+    }
+    countList.value[0].title = row.areaName
+    formRow.value = form
+
+    // 变电站
+    getSubLineGiveAnAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[0].list = data[0].data
+    })
+    // 终端
+    getGridDiagramDev(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[1].list = data[0].data
+    })
+    // 监测点
+    await getGridDiagramMonitor(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+
+        list.value[2].list = data[0].data.map((item: any) => {
+            return {
+                numOne: item.num,
+                numTwo: item.onLineNum,
+                numOneList: item.numList,
+                numTwoList: item.onLineNumList
+            }
+        })
+
+        list.value[2].list.push({
+            numOne: 0,
+            numOneList: []
+        })
+    })
+    // 监测点指标统计
+    getGridDiagramStatistics(form).then(res => {
+        countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
+        countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
+        countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
+    })
+    // 监测运行统计
+    getGridDiagramRunData(form).then(res => {
+        res.data[0].title = ['运行状态', '合格', '告警']
+        res.data[1].title = ['通讯状态', '在线', '离线']
+        res.data[2].title = ['数据完整性', '≥90%', '<90%']
+        res.data[3].title = ['电能质量指标', '未超标', '超标']
+
+        linList.value = res.data
+    })
+}
+// 点击
+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;
+    flex: 1;
+
+    .card {
+        justify-content: center;
+        margin-top: 15px;
+        margin-right: 2%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        font-size: 16px;
+
+        span:nth-child(2) {
+            font-weight: 550;
+        }
+    }
+}
+
+.vcl {
+    display: flex;
+    border-bottom: 2px solid #fff;
+    background-color: #edededc0;
+    border-radius: 5px;
+    font-size: 14px;
+
+    p {
+        text-align: center;
+        margin: 6px;
+        line-height: 30px;
+    }
+
+    .numOne {
+        flex: 1;
+        font-weight: 550;
+        cursor: pointer;
+    }
+
+    &:nth-child(1) {
+        background-color: #fff;
+    }
+
+    &:nth-child(2) {
+        .numOne {
+            color: #00bff5;
+        }
+    }
+
+    &:nth-child(3) {
+        .numOne {
+            color: #008000;
+        }
+    }
+
+    &:nth-child(4) {
+        .numOne {
+            color: #0000ff;
+        }
+    }
+}
+
+.title {
+    // height: ;
+    // display: flex;
+    // justify-content: space-between;
+    font-size: 15px;
+    line-height: 23px;
+    padding-left: 5px;
+    width: 100%;
+    font-weight: 550;
+    display: flex;
+    align-items: center;
+
+    span:nth-child(1) {
+        cursor: pointer;
+    }
+
+    .info {
+        font-weight: normal;
+        display: flex;
+        font-size: 12px;
+        cursor: pointer;
+        color: #757575;
+    }
+
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+}
+
+.card-Box {
+    // display: grid;
+    // grid-template-rows: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    // align-items: center;
+    margin: 0 5px 5px;
+    padding: 10px;
+    background-color: #edededc0;
+    border-radius: 10px;
+    min-height: 60px;
+    max-height: 120px;
+
+    .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 1.5fr;
+        font-size: 14px;
+
+        span {
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 550;
+        }
+    }
+}
+
+.BoxA {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    // grid-template-rows: 80px;
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.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;
+}
+
+.legeng {
+    position: absolute;
+    padding: 5px;
+    bottom: 0;
+    right: -75px;
+    width: 70px;
+    font-size: 12px;
+    height: 120px;
+    background: #fff;
+    border-radius: 5px;
+    display: grid;
+    line-height: 22px;
+    grid-template-rows: auto;
+
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span:nth-child(1) {
+            display: inline-block;
+            height: 10px;
+            border-radius: 2px;
+            width: 15px;
+            margin-right: 5px;
+        }
+    }
+}
+</style>

src/views/pqs/panorama/components/mapL1.vue

@@ -0,0 +1,516 @@
+<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>

src/views/pqs/panorama/components/mapR.vue

@@ -0,0 +1,608 @@
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 综合评估 -->
+            <div style="height: 110px">
+                <div class="title">
+                    <span>
+                        稳态综合评估
+                        <el-popover placement="right" :width="150" trigger="hover">
+                            <template #reference>
+                                <WarningFilled class="WarningFilled" />
+                            </template>
+                            <div class="text">
+                                <span style="color: #00b07d">优质：(4.5 , 5]</span>
+                                <br />
+                                <span style="color: #2b7fd3">良好：(4 , 4.5]</span>
+                                <br />
+                                <span style="color: #ffcc33">合格：(3 , 4]</span>
+                                <br />
+                                <span style="color: #97017e">较差：(2 , 3]</span>
+                                <br />
+                                <span style="color: #cc0000">极差：[1 , 2]</span>
+                            </div>
+                        </el-popover>
+                    </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>
+                <div class="mt10 TJTop">
+                    <img src="@/assets/img/TJ.png" />
+                    综合评估得分：
+                    <span
+                        :style="{
+                            color:
+                                assessList.score == 3.14159
+                                    ? ''
+                                    : assessList.score > 4.5
+                                    ? '#339966'
+                                    : assessList.score > 4
+                                    ? '#2b7fd3'
+                                    : assessList.score > 3
+                                    ? '#ffcc33'
+                                    : assessList.score > 2
+                                    ? '#97017e'
+                                    : assessList.score > 0
+                                    ? '#cc0000'
+                                    : ''
+                        }"
+                    >
+                        {{ assessList.score == 3.14159 ? '/' : assessList.score }}
+                        <!-- {{ assessList.level }} -->
+                    </span>
+                </div>
+                <div class="evaluate">
+                    <div v-for="item in assessList.children" style="min-width: 50px">
+                        <div>
+                            <span class="line"></span>
+                            {{ item.name }}
+                        </div>
+                        <div
+                            style="margin-top: 5px"
+                            :style="{
+                                color:
+                                    item.score == 3.14159
+                                        ? ''
+                                        : item.score > 4.5
+                                        ? '#339966'
+                                        : item.score > 4
+                                        ? '#2b7fd3'
+                                        : item.score > 3
+                                        ? '#ffcc33'
+                                        : item.score > 2
+                                        ? '#97017e'
+                                        : item.score > 0
+                                        ? '#cc0000'
+                                        : ''
+                            }"
+                        >
+                            {{ item.score == 3.14159 ? '/' : item.score }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 稳态电能质量水平评估 -->
+            <div>
+                <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 :style="boxHeight" class="boxR">
+                    <div class="top">
+                        <div class="TJTop">
+                            <img src="@/assets/img/TJ.png" />
+                            监测点越限占比：
+                            <span class="num">
+                                {{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
+                            </span>
+                        </div>
+
+                        <el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+                    <!-- <MyEChart :style="EchHeight" :options="harmonicList" /> -->
+                    <div :style="EchHeight" class="harmonic mt5">
+                        <div class="progress" v-for="item in harmonicList">
+                            <span class="text">{{ item.deptName }}</span>
+                            <el-progress :percentage="item.ratio" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 暂态电能质量水平评估 -->
+            <div>
+                <div class="title">
+                    <span>暂态电能质量水平评估</span>
+                    <span class="info" @click="open(2)">
+                        详情
+                        <ArrowRight style="width: 12px" />
+                    </span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="boxHeight" class="boxR">
+                    <div class="top">
+                        <div>
+                            <div class="TJTop">
+                                <img src="@/assets/img/TJ.png" />
+                                <span>暂降严重度:</span>
+                            </div>
+                            <div class="ml22" style="font-size: 12px">
+                                <span>
+                                    SARFI-90:
+                                    <span class="num">{{ transientNum[0] }} 　</span>
+                                    SARFI-50:
+                                    <span class="num">{{ transientNum[1] }}</span>
+                                </span>
+                            </div>
+                        </div>
+
+                        <el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
+                            <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </div>
+                    <!-- <MyEChart :style="EchHeight" :options="WTList" /> -->
+                    <div :style="EchHeight" class="harmonic mt5">
+                        <div class="progress" v-for="item in WTList">
+                            <span class="text">{{ item.orgName }}</span>
+                            <el-progress :percentage="item.count" :format="format" />
+                        </div>
+                    </div>
+                </div>
+            </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">
+                    <div class="evaluate bottom">
+                        <div v-for="item in JDlist" style="width: 80px">
+                            <div>{{ item.name }}</div>
+                            <div style="margin-top: 5px; font-weight: 550">{{ item.value }}</div>
+                        </div>
+                    </div>
+                    <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">{{ technology?.abnormalNum }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已关联工单数：</span>
+                                <span style="color: #81b337">{{ technology?.associatedNum }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单转换率：</span>
+                                <span style="color: #338dff">{{ technology?.conversionNum }}%</span>
+                            </div>
+                        </el-col>
+                        <el-col :span="11" class="col pt10" :offset="0.5">
+                            <div>
+                                <span>工单总数：</span>
+                                <span style="color: #2dcd28">{{ technology?.workNum }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已处理工单数：</span>
+                                <span style="color: #81b337">{{ technology?.processedNum }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单处置率：</span>
+                                <span style="color: #338dff">{{ technology?.disposalNum }}%</span>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+        </div>
+        <img
+            class="imgR"
+            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
+            @click="show = !show"
+            src="@/assets/img/QH.png"
+        />
+        <!-- <div class="legeng">
+            <div v-for="item in legengList">
+                <span :style="`background-color: ${item.color};`"></span>
+                <span>{{ item.title }}</span>
+            </div>
+        </div> -->
+        <!-- 评估 -->
+        <Evaluate ref="evaluateRef" />
+        <!-- 稳态 -->
+        <steadyState ref="steadyStateRef" />
+        <!-- 暂态 -->
+        <temporaryState ref="temporaryStateRef" />
+        <!-- 技术 -->
+        <technique ref="techniqueRef" />
+    </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 { WarningFilled } from '@element-plus/icons-vue'
+import { ArrowRight } from '@element-plus/icons-vue'
+import Evaluate from './details/evaluate.vue'
+import steadyState from './details/steadyState.vue'
+import temporaryState from './details/temporaryState.vue'
+import technique from './details/technique.vue'
+import {
+    getAssessOverview,
+    getEvaluationOverview,
+    getEventLevelEvaluation,
+    getSupervisionData
+} from '@/api/device-boot/panorama'
+const dictData = useDictData()
+const show = ref(false)
+const height = mainHeight(30)
+const boxHeight: any = mainHeight(420, 2)
+const EchHeight: any = mainHeight(490, 2)
+const evaluateRef = ref()
+const steadyStateRef = ref()
+const formRow: any = ref({})
+const temporaryStateRef = ref()
+const techniqueRef = ref()
+const mun = ref(0)
+const options = ref([
+    {
+        label: '全指标',
+        value: '0'
+    },
+    {
+        label: '电压偏差',
+        value: '1'
+    },
+    {
+        label: '频率偏差',
+        value: '2'
+    },
+    {
+        label: '电压总谐波畸变率',
+        value: '3'
+    },
+    {
+        label: '电压闪变',
+        value: '4'
+    },
+    {
+        label: '三相电压不平衡度',
+        value: '5'
+    },
+    {
+        label: '谐波电压',
+        value: '6'
+    },
+    {
+        label: '谐波电流',
+        value: '7'
+    },
+    {
+        label: '间谐波电压',
+        value: '8'
+    },
+    {
+        label: '负序电流',
+        value: '9'
+    },
+  
+])
+const technology: any = ref({})
+const harmonicType = ref('0')
+const transientNum = ref([0, 0])
+const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
+    if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
+        return item
+    }
+})
+const legengList = [
+    {
+        color: '#00b07d',
+        title: '优质'
+    },
+    {
+        color: '#3399ff',
+        title: '良好'
+    },
+    {
+        color: '#ffcc33',
+        title: '合格'
+    },
+    {
+        color: '#db0887',
+        title: '较差'
+    },
+    {
+        color: '#ff0000',
+        title: '极差'
+    }
+]
+const assessList: any = ref([])
+const JDlist = ref([
+    {
+        name: '技术监督计划',
+        value: 0
+    },
+    {
+        name: '在线监测',
+        value: 0
+    },
+    {
+        name: '用户投诉',
+        value: 0
+    },
+    {
+        name: '试运行问题',
+        value: 0
+    },
+  
+])
+const harmonicList: any = ref([])
+const harmonicLineRatio: any = ref(0)
+const WTList: any = ref([])
+
+const value = ref(options1[0].id)
+const open = (e: number) => {
+    if (e == 0) {
+        evaluateRef.value.open(formRow.value)
+    } else if (e == 1) {
+        steadyStateRef.value.open(formRow.value)
+    } else if (e == 2) {
+        temporaryStateRef.value.open(formRow.value)
+    } else if (e == 3) {
+        techniqueRef.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
+
+    // 稳态电能质量水平评估概览数据
+    harmonicChange()
+    // 暂态统计详情
+    transientChange()
+    // 综合评估
+    setTimeout(() => {
+        getAssessOverview(form).then(res => {
+            assessList.value = res.data
+        })
+    }, 300)
+    // 技术监督查询
+    getSupervisionData(form).then(res => {
+        technology.value = res.data
+        JDlist.value[0].value = res.data?.surveyNum || 0
+        JDlist.value[1].value = res.data?.onLineNum || 0
+        JDlist.value[2].value = res.data?.userNum || 0
+        JDlist.value[3].value = res.data?.trialRunNum || 0
+
+    }) 
+}
+const harmonicChange = () => {
+    getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
+        harmonicLineRatio.value = res.data.lineRatio
+        harmonicList.value = res.data.childrenList.map((item: any) => {
+            item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
+            return item
+        })
+    })
+}
+const transientChange = () => {
+    getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
+        let data = []
+        transientNum.value = [0, 0]
+        if (formRow.value.isUpToGrid == 0) {
+            data = res.data.info
+            transientNum.value = res.data.data
+        } else {
+            transientNum.value = res.data.gwData
+            data = res.data.gwInfo
+        }
+        WTList.value = []
+        mun.value = Math.max(...data.map((item: any) => item.count)) - 0
+        data.forEach((item: any) => {
+            item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2))
+        })
+        WTList.value = data
+    })
+}
+const format = (percentage: any) => (Math.round(percentage * mun.value) / 100).toFixed(0) + '条'
+
+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;
+    }
+    .WarningFilled {
+        width: 12px;
+        font-weight: 500;
+        cursor: pointer;
+    }
+}
+.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;
+        overflow-y: auto;
+        .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;
+    align-items: center;
+    background-color: #edededc0;
+}
+.imgR {
+    position: absolute;
+    padding: 10px;
+    top: calc(50% - 80px);
+    left: -23px;
+
+    height: 200px;
+    cursor: pointer;
+}
+.legeng {
+    position: absolute;
+    padding: 5px;
+    bottom: 0;
+    left: -75px;
+    width: 70px;
+    font-size: 12px;
+    height: 120px;
+    background: #fff;
+    border-radius: 5px;
+    display: grid;
+    line-height: 22px;
+    grid-template-rows: auto;
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span:nth-child(1) {
+            display: inline-block;
+            height: 10px;
+            border-radius: 2px;
+            width: 15px;
+            margin-right: 5px;
+        }
+    }
+}
+.show {
+    width: 0px;
+    transition: all 0.1s 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    ;
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>

src/views/pqs/panorama/components/style/map.scss

@@ -0,0 +1,202 @@
+.query-box-wrap {
+    position: absolute;
+    top: 10px;
+    left: calc(50% - 305px);
+    border-radius: 8px;
+    overflow: hidden;
+    .Icon {
+        width: 30px;
+        height: 30px;
+        background-image: url('@/assets/icons/网公司.svg');
+    }
+    .el-input__icon {
+        font-size: 20px;
+        color: #000;
+        cursor: pointer;
+    }
+    .el-input {
+        font-size: 16px;
+    }
+}
+.collapse {
+    top: 65px;
+    .collapse_none {
+        height: 44px;
+        width: 334px;
+        text-align: center;
+        line-height: 44px;
+        background-color: #fff;
+    }
+    .collapseBox {
+        max-height: 240px;
+        overflow-y: auto;
+        .group-list__item {
+            height: 55px;
+            padding: 5px 12px;
+            border-bottom: 1px solid #e4e7ed;
+            display: grid;
+            grid-auto-rows: 1fr 1fr;
+            cursor: pointer;
+            p:nth-child(1) {
+                font-weight: 600;
+                font-size: 14px;
+                display: inline-block;
+                width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                -webkit-box-orient: vertical;
+            }
+            p:nth-child(2) {
+                font-size: 12px;
+            }
+            &:hover {
+                background-color: #009ea81a;
+            }
+        }
+    }
+}
+:deep(.el-collapse-item__header) {
+    height: 32px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #f7fafd;
+    padding-left: 10px;
+    font-weight: 600;
+}
+
+:deep(.province-selector) {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    .distribution__body {
+        height: auto;
+    }
+    .province-selector__options {
+        height: auto;
+    }
+    .province-op {
+        width: 48%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .province-selector__button {
+        width: 100px;
+        padding: 4px 12px;
+        span {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    .province-selector__options {
+        z-index: 1;
+    }
+}
+:deep(.sgmap-canvas) {
+    width: 100% !important;
+}
+:deep(.sgmap-ctrl-bottom-right) {
+    z-index: 0 !important;
+}
+:deep(.my-popup) {
+    max-width: 400px !important;
+    .popup-box {
+        width: 300px;
+        height: 70px;
+        .popup_content {
+            display: grid;
+            grid-template-columns: 50px 1fr;
+            img {
+                width: 42px;
+                height: 42px;
+            }
+            .title {
+                font-weight: 550;
+            }
+            .state {
+                width: 45px;
+                margin-left: 5px;
+                text-align: center;
+                border-radius: 3px;
+                color: #fff;
+            }
+            .info {
+                color: #18181b99;
+                margin: 5px 0;
+                span {
+                    display: inline-block;
+                    width: 120px;
+                    height: 14px;
+                    line-height: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    -webkit-box-orient: vertical;
+                    &::after {
+                        display: inline-block;
+                        margin: 0 3px;
+                        content: ' ';
+                        width: 2px;
+                        height: 11px;
+                        background: #e5e6eb73;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+        .popup_footer {
+            padding: 5px 5px;
+            border-top: 1px solid #e5e6eb;
+            color: var(--el-color-primary);
+            span {
+                margin-right: 8px;
+                cursor: pointer;
+            }
+        }
+    }
+    .sgmap-popup-content {
+        padding: 15px 10px 10px !important;
+    }
+    .sgmap-popup-close-button {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        font-size: 16px;
+    }
+}
+:deep(.my-radiusPop) {
+    .sgmap-popup-tip {
+        display: none;
+    }
+    .sgmap-popup-content {
+        width: 200px;
+        height: 50px;
+        border-radius: 5px;
+        padding: 5px 5px !important;
+        background-color: #00000000;
+        color: #fff;
+    }
+    img {
+        height: 40px;
+        margin-right: 10px;
+    }
+    .infoBox {
+        flex: 1;
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        div {
+            cursor: pointer;
+        }
+    }
+}
+
+#nrDeviceCard {
+    position: absolute;
+    top: 11px;
+    right: 70px;
+    width: 450px;
+    z-index: 0;
+}

src/views/pqs/panorama/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="panorama" :style="height">
+        <div class="mapBox" v-show="lineInfo">
+            <DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
+            <el-form :inline="true" :model="form" class="demo-form-inline">
+                <el-form-item>
+                    <Area ref="areaRef" :show-all-levels="false" v-model="form.orgNo" style="width: 100px"
+                        @changeValue="changeValue" />
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <div class="Icon" @click="reset">
+                        <Icon name="fa fa-refresh" />
+                    </div>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 地图 -->
+        <Map v-if="VITE_FLAG" ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop"
+            @show="infoShow" />
+        <div v-show="lineInfo">
+            <!-- 省级 -->
+            <div v-show="control == 1">
+                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <mapR ref="mapRRef" class="mapR" />
+            </div>
+            <!-- 市级 -->
+            <!-- <div v-show="control == 4"> -->
+            <div v-show="control == 2">
+                <cityMapL ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <cityMapR ref="cityMapRRef" class="mapR" />
+            </div>
+        </div>
+
+        <Info v-if="!lineInfo" ref="InfoRef" @back="lineInfo = true" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, nextTick, ref, provide } from 'vue'
+import Area from '@/components/form/area/index.vue'
+import Map from './components/map.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import mapL from './components/mapL.vue'
+import mapR from './components/mapR.vue'
+import cityMapL from './components/cityMapL.vue'
+import cityMapR from './components/cityMapR.vue'
+import Info from './components/line/info.vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+const VITE_FLAG = true//import.meta.env.VITE_NAME == 'jibei'
+
+const dictData = useDictData()
+defineOptions({
+    name: 'panorama'
+})
+
+const datePickerRef = ref()
+const areaRef = ref()
+const lineInfo = ref(true)
+const mapRef = ref()
+const mapLRef = ref()
+const InfoRef = ref()
+const mapRRef = ref()
+const cityMapLRef = ref()
+const cityMapRRef = ref()
+
+// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
+const options: any = ref([
+    {
+        name: dictData.state.area[0].name,
+        id: 0
+    },
+    {
+        name: '上送网公司',
+        id: 1
+    }
+])
+const control = ref(1)
+const form: any = ref({
+    name: '',
+    orgNo: dictData.state.area[0].id,
+    areaName: dictData.state.area[0]?.name,
+    isUpToGrid: 0
+})
+
+const height = mainHeight(10)
+// 获取区域名称
+const changeValue = (e: any) => {
+    VITE_FLAG ? mapRef.value.locatePositions(e) : ''
+    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
+    form.value.areaName = e.data.name
+    options.value[0].name = e.data.areaName
+
+    control.value = e.data.level
+
+    info()
+}
+//点击监测点详情
+const drop = (id: string) => {
+    lineInfo.value = false
+    nextTick(() => {
+        InfoRef.value.open(id)
+    })
+}
+// 关闭左右数据展示
+const infoShow = (e: boolean) => {
+    mapLRef.value.show = e
+    mapRRef.value.show = e
+    cityMapLRef.value.show = e
+    cityMapRRef.value.show = e
+}
+// 地图控制图层
+const LookMap = (row: any, key?: any) => {
+    VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
+}
+const LngLat = [
+    {
+        name: '唐山',
+        LngLat: [118.335849137, 39.7513593355],
+        zoom: 8
+    },
+    {
+        name: '张家口',
+        LngLat: [115.032504679, 40.8951549951],
+        zoom: 7
+    },
+    {
+        name: '秦皇岛',
+        LngLat: [119.185113833, 40.1179119754],
+        zoom: 8.3
+    },
+    {
+        name: '承德',
+        LngLat: [117.548498365, 41.3775890632],
+        zoom: 7.3
+    },
+    {
+        name: '廊坊',
+        LngLat: [116.628004129, 39.0589378611],
+        zoom: 8
+    },
+    {
+        name: '超高压',
+        LngLat: [116.84428600000001, 40.57707185292256],
+        zoom: 6.709267680647425
+    },
+    {
+        name: '风光储',
+        LngLat: [116.84428600000001, 40.57707185292256],
+        zoom: 6.709267680647425
+    }
+]
+//区域统计展示切换
+const GridDiagram = (k?: number, num?: number) => {
+    VITE_FLAG ? mapRef.value.radiusPop(k) : ''
+    if (num == 3) {
+        // form.value.areaName
+        let value = LngLat.filter(item => item.name == form.value.areaName)[0]
+
+        if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
+    } else {
+        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425) : ''
+    }
+}
+const info = () => {
+    form.value.startTime = datePickerRef.value.timeValue[0]
+    form.value.searchBeginTime = datePickerRef.value.timeValue[0]
+    form.value.endTime = datePickerRef.value.timeValue[1]
+    form.value.searchEndTime = datePickerRef.value.timeValue[1]
+
+    form.value.type = datePickerRef.value.interval
+
+    // VITE_FLAG ? mapRef.value.grids(form.value) : ''
+    if (control.value == 1) {
+        mapLRef.value.info(form.value)
+        mapRRef.value.info(form.value)
+    } else {
+        cityMapRRef.value.info(form.value)
+        cityMapLRef.value.info(form.value)
+    }
+}
+// 重置
+const reset = () => {
+    form.value = {
+        name: '',
+        orgNo: dictData.state.area[0].id,
+        areaName: dictData.state.area[0]?.name,
+        isUpToGrid: 0
+    }
+    changeValue({ data: dictData.state.area[0] })
+}
+onMounted(() => {
+    // info()
+    changeValue({ data: dictData.state.area[0] })
+    // aaa()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.mapBox) {
+    position: absolute;
+    top: 10px;
+    left: calc(50% + 45px);
+
+    z-index: 1;
+
+    .el-select {
+        min-width: 100px;
+
+        .el-select__wrapper {
+            height: 46px !important;
+            border-radius: 8px;
+        }
+    }
+
+    .Icon {
+        height: 46px;
+        width: 46px;
+        background-color: #fff;
+        border-radius: 8px;
+        text-align: center;
+        line-height: 50px;
+        cursor: pointer;
+
+        .fa-refresh {
+            color: var(--el-color-primary) !important;
+        }
+    }
+
+    .el-input__wrapper {
+        height: 46px;
+        border-radius: 8px;
+    }
+
+    .el-form-item {
+        margin-right: 15px;
+    }
+}
+
+.mapL {
+    position: absolute;
+    top: 10px;
+    // z-index: 1;
+    left: 10px;
+}
+
+.mapR {
+    position: absolute;
+    top: 10px;
+    // z-index: 1;
+    right: 10px;
+}
+
+.panorama {
+    margin: 10px 0 0 0;
+    position: relative;
+}
+
+.el-button:focus {
+    color: var(--color);
+    background-color: #fff;
+}
+
+.el-button:hover {
+    color: var(--el-color-white);
+    border-color: var(--el-button-hover-bg-color);
+    background-color: var(--el-button-hover-bg-color);
+    outline: 0;
+}
+</style>

src/views/pqs/panorama/index1.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="default-main">
+        <DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
+        <baidu-map class="map" :style="height" @ready="initMap" :center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10"
+            :scroll-wheel-zoom='true'>
+            <bm-boundary v-for="item in boundaryList" :name="item.name" :strokeWeight="2" strokeColor="#0e8780"
+                fillColor="#0e8780" fillOpacity="0.05"></bm-boundary>
+
+            <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
+                @lineupdate="updatePolygonPath" /> -->
+
+        </baidu-map>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { mainHeight } from '@/utils/layout'
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
+import { ref, reactive ,onMounted} from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { useDictData } from '@/stores/dictData'
+const datePickerRef = ref()
+const height = mainHeight(20)
+// 页面中直接引入就可以
+const dictData = useDictData()
+import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
+const boundaryList = ref([
+    { name: '张家口市' },
+    { name: '唐山市' },
+    { name: '秦皇岛市' },
+    { name: '承德市' },
+    { name: '廊坊市' },
+])
+
+const initMap = async ({ BMap, map }: any) => {
+
+  
+
+
+}
+const addMarkers= async()=>{
+    let params = {
+        deptIndex: '0d52f9f6e43ec0ee83013cd32da93f66',
+        monitorFlag: 2,
+        powerFlag: 2,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1],
+        serverName: 'event-boot',
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
+        // ...row
+    }
+
+    let { data } = await getAreaLineInfo(params)
+
+}
+
+
+const mouseover = () => {
+    console.log(123);
+
+}
+onMounted(() => {
+    addMarkers()
+})
+</script>
+<style lang="scss" scoped>
+.map {
+    width: 100%;
+
+}
+</style>

src/views/pqs/voltageSags/monitoringPoint/online/aaa.vue

@@ -1,48 +0,0 @@
-<template>
-    <div>
-        <baidu-map class="map" @ready="initMap" :center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10"
-            :scroll-wheel-zoom='true'>
-            <bm-boundary name="北京市海淀区" :strokeWeight="2" strokeColor="blue"></bm-boundary>
-            <bm-boundary name="北京市西城区" :strokeWeight="2" strokeColor="red" fillColor="#ff0000"
-                fillOpacity="0.05"></bm-boundary>
-            <bm-boundary name="北京市东城区" :strokeWeight="2" strokeColor="green" fillColor="green"
-                fillOpacity="0.05"></bm-boundary>
-            <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
-                @lineupdate="updatePolygonPath" /> -->
-
-        </baidu-map>
-    </div>
-</template>
-
-<script setup lang='ts'>
-
-import { ref, reactive } from 'vue'
-// 页面中直接引入就可以
-import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
-const polygonPath = ref([
-    { lng: 116.412732, lat: 39.911707 },
-    { lng: 116.39455, lat: 39.910932 },
-    { lng: 116.403461, lat: 39.921336 }
-]);
-
-const initMap = async ({ BMap, map }: any) => {
-    // this.map = map
-    // let city = "北京市"
-    // let region = "丰台区"
-    // this.drawPolygon(region)
-    // this.addRegionLabel(city,region)
-
-}
-
-
-const mouseover = () => {
-    console.log(123);
-
-}
-</script>
-<style lang="scss" scoped>
-.map {
-    width: 100%;
-    height: 100vh;
-}
-</style>

src/views/pqs/voltageSags/monitoringPoint/online/index.vue

@@ -26,7 +26,7 @@ import Navigation from './navigation/index.vue'
 import EventStatistics from './eventStatistics/index.vue'
 import EventStudy from './eventStudy/index.vue'
 import RunningCondition from './runningCondition/index.vue'
-import aaa from './aaa.vue'
+
 import { mainHeight } from '@/utils/layout'
 import router from '@/router'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'

src/views/pqs/voltageSags/overview/index.vue

@@ -42,36 +42,16 @@
                 </div>
             </div>
             <div class='selectBox'>
-                <el-select
-                    @change='pointChange'
-                    :popper-append-to-body='false'
-                    filterable
-                    clearable
-                    v-model='lineId'
-                    placeholder='输入监测点名称查询'
-                >
-                    <el-option
-                        v-for='item in areaLineInfo'
-                        :key='item.lineId'
-                        :label='item.lineName'
-                        :value='item.lineId'
-                    ></el-option>
+                <el-select @change='pointChange' :popper-append-to-body='false' filterable clearable v-model='lineId'
+                    placeholder='输入监测点名称查询'>
+                    <el-option v-for='item in areaLineInfo' :key='item.lineId' :label='item.lineName'
+                        :value='item.lineId'></el-option>
                 </el-select>
             </div>
-            <baidu-map
-                class='bm-view'
-                :zoom='zoom'
-                :map-click='false'
-                :scroll-wheel-zoom='true'
-                :center='center'
-                @ready='handler'
-                :dragging="true"
-                @zoomend='syncCenterAndZoom'
-            >
-                <bm-map-type
-                    :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
-                    anchor='BMAP_ANCHOR_TOP_RIGHT'
-                ></bm-map-type>
+            <baidu-map class='bm-view' :zoom='zoom' :map-click='false' :scroll-wheel-zoom='true' :center='center'
+                @ready='handler' :dragging="true" @zoomend='syncCenterAndZoom'>
+                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
+                    anchor='BMAP_ANCHOR_TOP_RIGHT'></bm-map-type>
                 <!--  线-->
                 <div v-if='zoom > 13'>
                     <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
@@ -79,23 +59,13 @@
                 </div>
                 <!-- 变电站-->
                 <template v-if='zoom > 13'>
-                    <bm-marker
-                        :position='path'
-                        v-for='path in siteList'
-                        :key='path.subId'
-                        :icon='path.icon'
-                        @click='markerClick(path)'
-                    ></bm-marker>
+                    <bm-marker :position='path' v-for='path in siteList' :key='path.subId' :icon='path.icon'
+                        @click='markerClick(path)'></bm-marker>
                 </template>
                 <!-- 点 -->
                 <BmlMarkerClusterer maxZoom='12'>
-                    <bm-marker
-                        :position='path'
-                        v-for='path in areaLineInfo'
-                        :key='path.lineId'
-                        :icon='path.icon'
-                        @click='markerClick(path)'
-                    ></bm-marker>
+                    <bm-marker :position='path' v-for='path in areaLineInfo' :key='path.lineId' :icon='path.icon'
+                        @click='markerClick(path)'></bm-marker>
                 </BmlMarkerClusterer>
                 <bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
                     <bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
@@ -130,12 +100,8 @@
                                 </el-button>
                             </el-descriptions-item>
                         </el-descriptions>
-                        <el-descriptions
-                            :title='infoWindowPoint.subName'
-                            :column='1'
-                            v-else-if='infoWindowPoint.subId'
-                            style='padding-top: 10px'
-                        ></el-descriptions>
+                        <el-descriptions :title='infoWindowPoint.subName' :column='1' v-else-if='infoWindowPoint.subId'
+                            style='padding-top: 10px'></el-descriptions>
                     </bm-info-window>
                 </bm-marker>
             </baidu-map>