From a06593cbd2902b2c5d63680df1e3b7d7264d2da6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Wed, 21 Feb 2024 11:02:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=8E=8B=E6=9A=82=E9=99=8D=E5=9C=B0?=
 =?UTF-8?q?=E7=90=86=E4=BF=A1=E6=81=AF=E5=9B=BE=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device-boot/device.ts                 |  10 +
 src/api/event-boot/areaInfo.ts                |  18 +
 src/layouts/admin/components/navMenus.vue     |   2 +-
 src/views/pms/voltage-sags/overview.vue       | 293 ---------------
 .../analyse/eventCorrelation/index.vue        |   3 +
 src/views/pms/voltageSags/overview/index.vue  | 337 ++++++++++++++++++
 .../pms/voltageSags/overview/popupEvent.vue   |  36 ++
 src/views/pms/voltageSags/overview/right.vue  |  92 +++++
 8 files changed, 497 insertions(+), 294 deletions(-)
 create mode 100644 src/api/device-boot/device.ts
 delete mode 100644 src/views/pms/voltage-sags/overview.vue
 create mode 100644 src/views/pms/voltageSags/analyse/eventCorrelation/index.vue
 create mode 100644 src/views/pms/voltageSags/overview/index.vue
 create mode 100644 src/views/pms/voltageSags/overview/popupEvent.vue
 create mode 100644 src/views/pms/voltageSags/overview/right.vue

diff --git a/src/api/device-boot/device.ts b/src/api/device-boot/device.ts
new file mode 100644
index 00000000..434f06dc
--- /dev/null
+++ b/src/api/device-boot/device.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获取区域中断设备
+export function getAreaOffDev(data) {
+    return request({
+        url: "/device-boot/device/getAreaOffDev",
+        method: "post",
+        data
+    });
+}
\ No newline at end of file
diff --git a/src/api/event-boot/areaInfo.ts b/src/api/event-boot/areaInfo.ts
index 98e710f0..36427ce2 100644
--- a/src/api/event-boot/areaInfo.ts
+++ b/src/api/event-boot/areaInfo.ts
@@ -8,3 +8,21 @@ export function getAreaLineInfo(data: any) {
         data
     })
 }
+
+// 获取区域未处理暂态事件
+export function getNoDealEvents(data: any) {
+    return request({
+        url: '/event-boot/areaInfo/getNoDealEvents',
+        method: 'post',
+        data
+    })
+}
+
+// 获取监测点下未处理的暂降事件
+export function getNoDealEventsByLineId(params: any) {
+    return request({
+        url: '/event-boot/areaInfo/getNoDealEventsByLineId',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file
diff --git a/src/layouts/admin/components/navMenus.vue b/src/layouts/admin/components/navMenus.vue
index 90faa2c9..d4bd7895 100644
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -112,7 +112,7 @@ const handleCommand = (key: string) => {
             popupPwd.value.open()
             break
         case 'layout':
-            router.push({ name: 'login' })
+                router.push({ name: 'login' })
             break
         default:
             break
diff --git a/src/views/pms/voltage-sags/overview.vue b/src/views/pms/voltage-sags/overview.vue
deleted file mode 100644
index b04c2285..00000000
--- a/src/views/pms/voltage-sags/overview.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-    <div style='padding: 10px; position: relative'>
-        <div style='display: none'>
-            <DatePicker ref='datePickerRef'></DatePicker>
-        </div>
-        <div class='iconBox'>
-            <div class='div'>
-                <img src='@/assets/jcd.png' alt='' />
-                <span>变电站</span>
-            </div>
-            <div class='div'>
-                <img src='@/assets/rby.png' alt='' />
-                <span>热备用</span>
-            </div>
-            <div class='div'>
-                <img src='@/assets/ty.png' alt='' />
-                <span>停运</span>
-            </div>
-            <div class='div'>投运</div>
-            <div class='div' style='padding-left: 10px'>
-                <span>通讯正常</span>
-            </div>
-            <div class='div' style='padding-left: 20px'>
-                <img src='@/assets/txzcyzj.gif' alt='' />
-                <span>有暂降</span>
-            </div>
-            <div class='div' style='padding-left: 20px'>
-                <img src='@/assets/txzcwzj.png' alt='' />
-                <span>无暂降</span>
-            </div>
-            <div class='div' style='padding-left: 10px'>
-                <span>通讯异常</span>
-            </div>
-            <div class='div' style='padding-left: 20px'>
-                <img src='@/assets/txycyzj.gif' alt='' />
-                <span>有暂降</span>
-            </div>
-            <div class='div' style='padding-left: 20px'>
-                <img src='@/assets/txzdwzj.png' alt='' />
-                <span>无暂降</span>
-            </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>
-        </div>
-        <baidu-map
-            class='bm-view'
-            :zoom='zoom'
-            :map-click='false'
-            :scroll-wheel-zoom='true'
-            :center='center'
-            @ready='handler'
-            :style='height'
-            @zoomend='syncCenterAndZoom'
-        >
-            <bm-map-type
-                :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
-                anchor='BMAP_ANCHOR_TOP_RIGHT'
-            ></bm-map-type>
-            <!--  线-->
-            <bm-polyline :path='path' v-for='(path,index) in polyline' :key='index'></bm-polyline>
-            <!-- 变电站-->
-            <template v-if='zoom > 12'>
-                <bm-marker :position='path' v-for='(path) in siteList' :key='path.subId' :icon='path.icon'
-                           @click='markerClick(path)'>
-                </bm-marker>
-            </template>
-            <!-- 点 -->
-            <BmlMarkerClusterer>
-                <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'>
-                    <el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
-                        <el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
-                        <el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
-                        <el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
-                        <el-descriptions-item label='网络参数'>
-                            {{ infoWindowPoint.ip }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
-                        <el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
-                        <el-descriptions-item label='生产厂家'>{{ infoWindowPoint.manufacturer }}</el-descriptions-item>
-                        <el-descriptions-item label='终端状态'>
-                            {{ infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
-                            }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label='通讯状态'>{{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <el-button type='primary' size='small'>查看监测点</el-button>
-                            <el-button type='primary' size='small'>未处理事件({{ infoWindowPoint.noDealCount }})
-                            </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>
-                </bm-info-window>
-            </bm-marker>
-        </baidu-map>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
-import { ref } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import { useAdminInfo } from '@/stores/adminInfo'
-
-const height = mainHeight(20)
-const adminInfo = useAdminInfo()
-const datePickerRef = ref()
-const zoom = ref(11)
-const center = ref({
-    lng: 0,
-    lat: 0
-})
-const infoWindowPoint = ref<anyObj>({
-    lng: 0,
-    lat: 0,
-    show: false
-})
-const areaLineInfo = ref<any>([])
-const siteList = ref<any>([])
-const polyline = ref<any>([])
-const lineId = ref('')
-const handler = async ({ BMap, map }: any) => {
-    let { data } = await getAreaLineInfo({
-        deptIndex: adminInfo.$state.deptId,
-        monitorFlag: 2,
-        powerFlag: 2,
-        searchBeginTime: datePickerRef.value.timeValue[0],
-        searchEndTime: datePickerRef.value.timeValue[1],
-        serverName: 'event-boot',
-        statisticalType: {}
-    })
-    let r = 0.0035
-    data.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 = data
-    console.log(areaLineInfo.value)
-    console.log(siteList.value)
-    center.value.lng = areaLineInfo.value[0].lng
-    center.value.lat = areaLineInfo.value[0].lat
-}
-
-const syncCenterAndZoom = (e: any) => {
-    zoom.value = e.target.getZoom()
-}
-const pointChange = (val: string) => {
-    if (!val) return
-    let data = areaLineInfo.value.find((item: any) => item.lineId == val)
-    center.value.lng = data.lng
-    center.value.lat = data.lat
-    infoWindowPoint.value = data
-    infoWindowPoint.value.show = true
-    zoom.value = 15
-}
-const markerClick = (e: any) => {
-    console.log(e)
-    infoWindowPoint.value = e
-    infoWindowPoint.value.show = true
-    console.log(infoWindowPoint.value)
-}
-</script>
-<style lang='scss' scoped>
-.bm-view {
-    width: 100%;
-    height: 100%;
-}
-
-.selectBox {
-    position: absolute;
-    top: 16px;
-    left: 165px;
-    z-index: 2000;
-    width: 240px;
-}
-
-.iconBox {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    z-index: 2000;
-    width: 150px;
-    height: 260px;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.75) !important;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-    font-size: 12px;
-
-    .div {
-        display: flex;
-        margin-bottom: 5px;
-
-        img {
-            height: 20px;
-            margin-right: 5px;
-        }
-    }
-}
-</style>
diff --git a/src/views/pms/voltageSags/analyse/eventCorrelation/index.vue b/src/views/pms/voltageSags/analyse/eventCorrelation/index.vue
new file mode 100644
index 00000000..5a0c645c
--- /dev/null
+++ b/src/views/pms/voltageSags/analyse/eventCorrelation/index.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class='default-main'>关联性分析</div>
+</template>
\ No newline at end of file
diff --git a/src/views/pms/voltageSags/overview/index.vue b/src/views/pms/voltageSags/overview/index.vue
new file mode 100644
index 00000000..5c61f0c4
--- /dev/null
+++ b/src/views/pms/voltageSags/overview/index.vue
@@ -0,0 +1,337 @@
+<template>
+    <div style="padding: 10px; display: flex; height: 100%" v-loading="loading">
+        <div style="position: relative; flex: 1">
+            <div style="display: none">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </div>
+            <div class="iconBox">
+                <div class="div">
+                    <img src="@/assets/jcd.png" alt="" />
+                    <span>变电站</span>
+                </div>
+                <div class="div">
+                    <img src="@/assets/rby.png" alt="" />
+                    <span>热备用</span>
+                </div>
+                <div class="div">
+                    <img src="@/assets/ty.png" alt="" />
+                    <span>停运</span>
+                </div>
+                <div class="div">投运</div>
+                <div class="div" style="padding-left: 10px">
+                    <span>通讯正常</span>
+                </div>
+                <div class="div" style="padding-left: 20px">
+                    <img src="@/assets/txzcyzj.gif" alt="" />
+                    <span>有暂降</span>
+                </div>
+                <div class="div" style="padding-left: 20px">
+                    <img src="@/assets/txzcwzj.png" alt="" />
+                    <span>无暂降</span>
+                </div>
+                <div class="div" style="padding-left: 10px">
+                    <span>通讯异常</span>
+                </div>
+                <div class="div" style="padding-left: 20px">
+                    <img src="@/assets/txycyzj.gif" alt="" />
+                    <span>有暂降</span>
+                </div>
+                <div class="div" style="padding-left: 20px">
+                    <img src="@/assets/txzdwzj.png" alt="" />
+                    <span>无暂降</span>
+                </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>
+            </div>
+            <baidu-map
+                class="bm-view"
+                :zoom="zoom"
+                :map-click="false"
+                :scroll-wheel-zoom="true"
+                :center="center"
+                @ready="handler"
+                @zoomend="syncCenterAndZoom"
+            >
+                <bm-map-type
+                    :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
+                    anchor="BMAP_ANCHOR_TOP_RIGHT"
+                ></bm-map-type>
+                <!--  线-->
+                <bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
+                <!-- 变电站-->
+                <template v-if="zoom > 12">
+                    <bm-marker
+                        :position="path"
+                        v-for="path in siteList"
+                        :key="path.subId"
+                        :icon="path.icon"
+                        @click="markerClick(path)"
+                    ></bm-marker>
+                </template>
+                <!-- 点 -->
+                <BmlMarkerClusterer>
+                    <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">
+                        <el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId">
+                            <el-descriptions-item label="供电公司">{{ infoWindowPoint.gdName }}</el-descriptions-item>
+                            <el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</el-descriptions-item>
+                            <el-descriptions-item label="母线">{{ infoWindowPoint.voltageName }}</el-descriptions-item>
+                            <el-descriptions-item label="网络参数">
+                                {{ infoWindowPoint.ip }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="PT变化">{{ infoWindowPoint.pt2 }}</el-descriptions-item>
+                            <el-descriptions-item label="CT变化">{{ infoWindowPoint.ct2 }}</el-descriptions-item>
+                            <el-descriptions-item label="生产厂家">
+                                {{ infoWindowPoint.manufacturer }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="终端状态">
+                                {{
+                                    infoWindowPoint.runFlag == 0
+                                        ? '投运'
+                                        : infoWindowPoint.runFlag == 1
+                                        ? '热备用'
+                                        : '停运'
+                                }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="通讯状态">
+                                {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <el-button type="primary" size="small">查看监测点</el-button>
+                                <el-button type="primary" size="small" @click="lookEvent">
+                                    未处理事件({{ infoWindowPoint.noDealCount }})
+                                </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>
+                    </bm-info-window>
+                </bm-marker>
+            </baidu-map>
+        </div>
+        <div style="width: 600px; height: 100%">
+            <Right :params="params" v-if="params.deptIndex"></Right>
+        </div>
+        <PopupEvent ref="popupEvent"></PopupEvent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
+import { ref } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { useAdminInfo } from '@/stores/adminInfo'
+import Right from './right.vue'
+import PopupEvent from './popupEvent.vue'
+
+defineOptions({
+    name: 'Descentsystem/overview'
+})
+const height = mainHeight(20)
+const adminInfo = useAdminInfo()
+const datePickerRef = ref()
+const zoom = ref(11)
+const loading = ref(true)
+const popupEvent = ref()
+const params = ref({
+    deptIndex: '',
+    monitorFlag: 2,
+    powerFlag: 2,
+    searchBeginTime: '',
+    searchEndTime: '',
+    serverName: 'event-boot',
+    statisticalType: {}
+})
+const center = ref({
+    lng: 0,
+    lat: 0
+})
+const infoWindowPoint = ref<anyObj>({
+    lng: 0,
+    lat: 0,
+    show: false
+})
+const areaLineInfo = ref<any>([])
+const siteList = ref<any>([])
+const polyline = ref<any>([])
+const lineId = ref('')
+const handler = async ({ BMap, map }: any) => {
+    params.value.deptIndex = adminInfo.$state.deptId
+    params.value.searchBeginTime = datePickerRef.value.timeValue[0]
+    params.value.searchEndTime = datePickerRef.value.timeValue[1]
+    let { data } = await getAreaLineInfo(params.value)
+    let r = 0.0035
+    data.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 = data
+    center.value.lng = areaLineInfo.value[0].lng
+    center.value.lat = areaLineInfo.value[0].lat
+    infoWindowPoint.value = areaLineInfo.value[0]
+    infoWindowPoint.value.show = true
+    zoom.value = 15
+    setTimeout(() => {
+        loading.value = false
+    }, 1500)
+}
+
+const syncCenterAndZoom = (e: any) => {
+    zoom.value = e.target.getZoom()
+}
+const pointChange = (val: string) => {
+    if (!val) return
+    let data = areaLineInfo.value.find((item: any) => item.lineId == val)
+    center.value.lng = data.lng
+    center.value.lat = data.lat
+    infoWindowPoint.value = data
+    infoWindowPoint.value.show = true
+    zoom.value = 15
+}
+const markerClick = (e: any) => {
+    infoWindowPoint.value = e
+    infoWindowPoint.value.show = true
+}
+const lookEvent = (e: any) => {
+    popupEvent.value.open({
+        id: infoWindowPoint.value.lineId,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1]
+    })
+}
+</script>
+<style lang="scss" scoped>
+.bm-view {
+    width: 100%;
+    height: 100%;
+}
+
+.selectBox {
+    position: absolute;
+    top: 16px;
+    left: 165px;
+    z-index: 2000;
+    width: 240px;
+}
+
+.iconBox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2000;
+    width: 150px;
+    height: 260px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.75) !important;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+    font-size: 12px;
+
+    .div {
+        display: flex;
+        margin-bottom: 5px;
+
+        img {
+            height: 20px;
+            margin-right: 5px;
+        }
+    }
+}
+</style>
diff --git a/src/views/pms/voltageSags/overview/popupEvent.vue b/src/views/pms/voltageSags/overview/popupEvent.vue
new file mode 100644
index 00000000..1edde818
--- /dev/null
+++ b/src/views/pms/voltageSags/overview/popupEvent.vue
@@ -0,0 +1,36 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="暂降事件列表">
+        <vxe-table v-loading="loading" height="auto" auto-resize :data="tableData" v-bind="defaultAttribute">
+            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+            <vxe-column field="startTime" title="发生时间" width="200"></vxe-column>
+            <vxe-column field="duration" title="持续时间(s)" width="120"></vxe-column>
+            <vxe-column field="featureAmplitude" title="暂降(骤升)幅值(%)" width="150">
+                <template #default="{ row }">
+                    {{ (row.featureAmplitude * 100).toFixed(2) }}
+                </template>
+            </vxe-column>
+            <vxe-column field="gdName" title="供电公司" width="200"></vxe-column>
+            <vxe-column field="subName" title="变电站" min-width="200"></vxe-column>
+            <vxe-column field="lineName" title="监测点" width="200"></vxe-column>
+        </vxe-table>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getNoDealEventsByLineId } from '@/api/event-boot/areaInfo'
+
+const dialogVisible = ref(false)
+const tableData = ref([])
+const loading = ref(true)
+const open = (params:any) => {
+    dialogVisible.value = true
+    loading.value = true
+    getNoDealEventsByLineId(params).then(res => {
+        tableData.value = res.data
+        loading.value = false
+    })
+}
+defineExpose({ open })
+</script>
diff --git a/src/views/pms/voltageSags/overview/right.vue b/src/views/pms/voltageSags/overview/right.vue
new file mode 100644
index 00000000..5bfa998d
--- /dev/null
+++ b/src/views/pms/voltageSags/overview/right.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="overview-right">
+        <div class="overview-right-item">
+            <div class="overview-right-item-title">
+                <span style="font-weight: 700">离线终端</span>
+            </div>
+            <div style="flex: 1; overflow: hidden">
+                <vxe-table height="auto" auto-resize :data="tableData1" v-bind="defaultAttribute">
+                    <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <vxe-column field="updateTime" title="中断时间"></vxe-column>
+                    <vxe-column field="subName" title="变电站"></vxe-column>
+                    <vxe-column field="devName" title="装置名称"></vxe-column>
+                    <vxe-column field="devType" title="装置型号"></vxe-column>
+                    <vxe-column field="ip" title="网络参数"></vxe-column>
+                </vxe-table>
+            </div>
+        </div>
+        <div class="overview-right-item" style="padding-top: 0">
+            <div class="overview-right-item-title">
+                <div style="font-weight: 700">未处理暂态事件</div>
+                <el-button type="primary" size="small" icon="el-icon-Promotion" @click="jump">事件关联分析</el-button>
+            </div>
+            <div style="flex: 1; overflow: hidden">
+                <vxe-table height="auto" auto-resize :data="tableData" v-bind="defaultAttribute">
+                    <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <vxe-column field="startTime" title="发生时刻"></vxe-column>
+                    <vxe-column field="lineName" title="监测点"></vxe-column>
+                    <vxe-column field="featureAmplitude" title="暂降(骤升)幅值(%)" width="150"></vxe-column>
+                    <vxe-column field="duration" title="持续时间(s)" width="120"></vxe-column>
+                </vxe-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getNoDealEvents } from '@/api/event-boot/areaInfo'
+import { getAreaOffDev } from '@/api/device-boot/device'
+import router from '@/router'
+
+const props = defineProps({
+    params: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const tableData = ref([])
+const tableData1 = ref([])
+getNoDealEvents(props.params).then(res => {
+    console.log(res)
+    tableData.value = res.data
+})
+getAreaOffDev(props.params).then(res => {
+    tableData1.value = res.data
+})
+
+const jump = () => {
+    router.push({
+        name: 'Advancedanalysis/eventcorrelation'
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.overview-right {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #fff;
+    padding-bottom: 10px;
+
+    .overview-right-item {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        padding: 0 10px;
+        flex-shrink: 0;
+        overflow: hidden;
+
+        .overview-right-item-title {
+            background: #fff;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+}
+</style>