From c9ae51e141dd7df0e7ba03c273be68098f127ef7 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 16:41:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=9B=91=E6=B5=8B=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  41 +++
 src/api/device-boot/terminalTree.ts           |  10 +
 src/components/tree/index.vue                 |   5 +-
 src/components/tree/pms/pointTree.vue         | 116 +++++++
 .../eventStatistics/ITICquxianfenxi/index.vue |  10 +
 .../eventStatistics/SEMIF47fenxi/index.vue    |  10 +
 .../chixushijiangailvfenbu/index.vue          |  10 +
 .../dianyazanjiangbiaojimidu/index.vue        |  10 +
 .../online/eventStatistics/index.vue          |  20 ++
 .../zanjiangfenbutongji/index.vue             |  10 +
 .../zanjiangfuzhigailvfenbu/index.vue         |  10 +
 .../online/eventStudy/index.vue               |  10 +
 .../monitoringPoint/online/index.vue          |  33 ++
 .../online/navigation/index.vue               |  32 ++
 .../monitoringPoint/online/navigation/map.vue | 299 ++++++++++++++++++
 .../online/runningCondition/index.vue         |  10 +
 17 files changed, 637 insertions(+), 1 deletion(-)
 create mode 100644 src/api/device-boot/terminalTree.ts
 create mode 100644 src/components/tree/pms/pointTree.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue
 create mode 100644 src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue

diff --git a/package.json b/package.json
index 430727d1..604122da 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "screenfull": "^6.0.2",
+    "splitpanes": "^3.1.5",
     "use-element-plus-theme": "^0.0.5",
     "vue": "^3.3.11",
     "vue-baidu-map-3x": "^1.0.35",
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.5",
+    "@types/splitpanes": "^2.2.6",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "sass": "^1.69.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b4a37743..159f23fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,6 +55,9 @@ dependencies:
   screenfull:
     specifier: ^6.0.2
     version: 6.0.2
+  splitpanes:
+    specifier: ^3.1.5
+    version: 3.1.5
   use-element-plus-theme:
     specifier: ^0.0.5
     version: 0.0.5(@types/node@20.10.5)(typescript@5.3.3)(vite@5.0.10)
@@ -84,6 +87,9 @@ devDependencies:
   '@types/node':
     specifier: ^20.10.5
     version: 20.10.5
+  '@types/splitpanes':
+    specifier: ^2.2.6
+    version: 2.2.6
   '@vitejs/plugin-vue':
     specifier: ^4.5.2
     version: 4.5.2(vite@5.0.10)(vue@3.3.13)
@@ -978,6 +984,12 @@ packages:
     dependencies:
       undici-types: 5.26.5
 
+  /@types/splitpanes@2.2.6:
+    resolution: {integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ==}
+    dependencies:
+      vue: 2.7.16
+    dev: true
+
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -1107,6 +1119,16 @@ packages:
       '@vue/compiler-core': 3.3.13
       '@vue/shared': 3.3.13
 
+  /@vue/compiler-sfc@2.7.16:
+    resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
+    dependencies:
+      '@babel/parser': 7.23.6
+      postcss: 8.4.32
+      source-map: 0.6.1
+    optionalDependencies:
+      prettier: 2.8.8
+    dev: true
+
   /@vue/compiler-sfc@3.3.13:
     resolution: {integrity: sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==, tarball: https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz}
     dependencies:
@@ -2204,6 +2226,14 @@ packages:
     resolution: {integrity: sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==}
     dev: false
 
+  /prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -2324,6 +2354,9 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+
+  /splitpanes@3.1.5:
+    resolution: {integrity: sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==}
     dev: false
 
   /sprintf-js@1.0.3:
@@ -2595,6 +2628,14 @@ packages:
       semver: 7.5.4
       typescript: 5.3.3
 
+  /vue@2.7.16:
+    resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
+    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
+    dependencies:
+      '@vue/compiler-sfc': 2.7.16
+      csstype: 3.1.3
+    dev: true
+
   /vue@3.3.13(typescript@5.3.3):
     resolution: {integrity: sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==, tarball: https://registry.npmmirror.com/vue/-/vue-3.3.13.tgz}
     peerDependencies:
diff --git a/src/api/device-boot/terminalTree.ts b/src/api/device-boot/terminalTree.ts
new file mode 100644
index 00000000..f21a5194
--- /dev/null
+++ b/src/api/device-boot/terminalTree.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获取区域中断设备
+export function getTerminalTreeForFive(data:any) {
+    return request({
+        url: '/device-boot/terminalTree/getTerminalTreeForFive',
+        method: 'post',
+        data: data,
+    })
+}
\ No newline at end of file
diff --git a/src/components/tree/index.vue b/src/components/tree/index.vue
index e28cf57c..457232ba 100644
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -23,6 +23,7 @@
                     size="18"
                     class="fold ml10 menu-collapse"
                     style="cursor: pointer"
+                    v-if='props.canExpand'
                 />
             </div>
             <el-tree
@@ -61,10 +62,12 @@ defineOptions({
 })
 interface Props {
     width?: string
+    canExpand?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    width: '280px'
+    width: '280px',
+    canExpand: true
 })
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
diff --git a/src/components/tree/pms/pointTree.vue b/src/components/tree/pms/pointTree.vue
new file mode 100644
index 00000000..352b05ba
--- /dev/null
+++ b/src/components/tree/pms/pointTree.vue
@@ -0,0 +1,116 @@
+<template>
+    <div style='height: 100%;width: 100%;display: flex;flex-direction: column'>
+        <el-select v-model='formData.statisticalType' placeholder='请选择' style='min-width: unset;padding: 10px 10px 0'
+                   @change='loadData'>
+            <el-option v-for='item in classificationData' :key='item.id' :label='item.name'
+                       :value='item.id'></el-option>
+        </el-select>
+        <div style='flex: 1;overflow: hidden'>
+            <Tree ref='treRef' :data='tree' style='width: 100%;height: 100%' :canExpand='false' />
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { ref, nextTick } from 'vue'
+import Tree from '../index.vue'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { useDictData } from '@/stores/dictData'
+import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
+import { useConfig } from '@/stores/config'
+
+defineOptions({
+    name: 'pms/pointTree'
+})
+const emit = defineEmits(['init'])
+const adminInfo = useAdminInfo()
+const dictData = useDictData()
+const config = useConfig()
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+console.log(classificationData)
+const tree = ref()
+const treRef = ref()
+const formData = ref({
+    deptIndex: adminInfo.$state.deptIndex,
+    monitorFlag: 2,
+    powerFlag: 2,
+    loadType: null,
+    manufacturer: null,
+    serverName: 'event-boot',
+    statisticalType: classificationData[0].id,
+    scale: null
+})
+console.log(formData)
+const loadData = () => {
+    let form = JSON.parse(JSON.stringify(formData.value))
+    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
+    getTerminalTreeForFive(form).then(res => {
+        console.log(res)
+        let arr: any[] = []
+        res.data.forEach((item: any) => {
+            item.icon = 'fa-solid fa-synagogue'
+            item.color = config.getColorVal('elementUiPrimary')
+            item.children.forEach((item2: any) => {
+                item2.icon = 'fa-solid fa-city'
+                item.color = config.getColorVal('elementUiPrimary')
+                item2.children.forEach((item3: any) => {
+                    item3.icon = 'fa-solid fa-building'
+                    item3.color = config.getColorVal('elementUiPrimary')
+                    item3.children.forEach((item4: any) => {
+                        item4.icon = 'fa-solid fa-tower-observation'
+                        item4.color = config.getColorVal('elementUiPrimary')
+                        item4.children.forEach((item5: any) => {
+                            item5.icon = 'fa-solid fa-location-dot'
+                            item5.color = config.getColorVal('elementUiPrimary')
+                            if (item5.comFlag === 0) {
+                                item5.color = 'red !important'
+                            } else if (item5.comFlag === 1) {
+                                item5.color = '#00f93b !important'
+                            } else if (item5.comFlag === 2) {
+                                item5.color = '#8c8c8c !important'
+                            }
+                        })
+                    })
+                })
+            })
+        })
+        tree.value = res.data
+    })
+}
+loadData()
+// getTerminalTreeForFive().then(res => {
+//     let arr: any[] = []
+//     res.data.forEach((item: any) => {
+//         item.icon = 'el-icon-HomeFilled'
+//         item.color = config.getColorVal('elementUiPrimary')
+//         item.children.forEach((item2: any) => {
+//             item2.icon = 'el-icon-List'
+//             item.color = config.getColorVal('elementUiPrimary')
+//             item2.children.forEach((item3: any) => {
+//                 item3.icon = 'el-icon-Platform'
+//                 item3.color = config.getColorVal('elementUiPrimary')
+//                 if (item3.comFlag === 1) {
+//                     item3.color = '#e26257 !important'
+//                 }
+//                 item3.children.forEach((item4: any) => {
+//                     item4.icon = 'el-icon-LocationFilled'
+//                     arr.push(item4)
+//                 })
+//             })
+//         })
+//     })
+//     tree.value = res.data
+//     nextTick(() => {
+//         if (arr.length) {
+//             treRef.value.treeRef.setCurrentKey(arr[0].id)
+//             // 注册父组件事件
+//             emit('init', {
+//                 level: 2,
+//                 ...arr[0]
+//             })
+//         } else {
+//             emit('init')
+//         }
+//     })
+// })
+</script>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
new file mode 100644
index 00000000..bcb4e61b
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class='default-main'>
+        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
+            <el-tab-pane label='导航' name='1'>
+            </el-tab-pane>
+            <el-tab-pane label='事件统计' name='2'>
+            </el-tab-pane>
+            <el-tab-pane label='事件分析' name='3'>
+            </el-tab-pane>
+            <el-tab-pane label='运行情况' name='4'>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const activeName = ref('1')
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/index.vue
new file mode 100644
index 00000000..c6671fc2
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class='default-main'>
+        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
+            <el-tab-pane label='导航' name='1' :style='height'>
+                <Navigation />
+            </el-tab-pane>
+            <el-tab-pane label='事件统计' name='2'>
+                <EventStatistics />
+            </el-tab-pane>
+            <el-tab-pane label='事件分析' name='3'>
+                <EventStudy />
+            </el-tab-pane>
+            <el-tab-pane label='运行情况' name='4'>
+                <RunningCondition />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang='ts'>
+import { defineOptions, ref } from 'vue'
+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 { mainHeight } from '@/utils/layout'
+
+defineOptions({
+    name: 'Descentsystem/monitoringpoint'
+})
+const height = mainHeight(82)
+const activeName = ref('1')
+</script>
+<style></style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
new file mode 100644
index 00000000..d4d1f424
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
+        <pane :size='size'>
+            <PointTree></PointTree>
+        </pane>
+        <pane>
+            <Map></Map>
+        </pane>
+    </splitpanes>
+</template>
+<script setup lang='ts'>
+import { defineOptions, onMounted, ref } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import PointTree from '@/components/tree/pms/pointTree.vue'
+import Map from './map.vue'
+
+
+
+const size = ref(0)
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = parseInt(240 / dom.offsetHeight * 100)
+    }
+})
+</script>
+<style lang='scss'>
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
+</style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue b/src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue
new file mode 100644
index 00000000..88deeb72
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue
@@ -0,0 +1,299 @@
+<template>
+    <div style='position: relative; height: 100%' v-loading='loading'>
+        <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>
+        <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>
+</template>
+
+<script setup lang='ts'>
+import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
+import { ref } from 'vue'
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+
+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 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;
+    bottom: 10px;
+    right: 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/monitoringPoint/online/runningCondition/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue
new file mode 100644
index 00000000..381890af
--- /dev/null
+++ b/src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class='default-main'>
+
+    </div>
+</template>
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+</script>
+<style></style>