echarts的resize修改，谐波在线监测点重新布局

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

@@ -1,38 +1,53 @@
 <template>
-    <div class='default-main' style='position: relative'>
-        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
-            <el-tab-pane label='导航' name='1' :style='height' lazy>
-                <Navigation @changeTab='changeTab' />
-            </el-tab-pane>
-            <el-tab-pane label='稳态综合评估' name='2' lazy :style='height' v-if='!isReload'>
-                <Wentaizonghepinggu />
-            </el-tab-pane>
-            <el-tab-pane label='稳态指标合格率' name='3' lazy :style='height' v-if='!isReload'>
-                <Wentaizhibiaohegelv />
-            </el-tab-pane>
-            <el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
-                <Wentaishujufenxi />
-            </el-tab-pane>
-            <el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
-                <Xiebopingpu />
-            </el-tab-pane>
-            <el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
-                <Gaojingshujutongji />
-            </el-tab-pane>
-            <el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
-                <Yunxingzhuangtai />
-            </el-tab-pane>
-            <el-tab-pane label='实时数据' name='8' lazy :style='height' v-if='!isReload'>
-                <Shishishuju />
-            </el-tab-pane>
-        </el-tabs>
-        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
+    <div class="default-main" style="padding: 10px">
+        <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
+            <pane :size="size">
+                <PointTree
+                    :default-expand-all="false"
+                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
+                    :current-node-key="monitoringPoint.state.lineId"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
+            </pane>
+            <pane>
+                <div style="position: relative; height: 100%">
+                    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
+                        <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
+                            <Wentaizonghepinggu />
+                        </el-tab-pane>
+                        <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
+                            <Wentaizhibiaohegelv />
+                        </el-tab-pane>
+                        <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
+                            <Wentaishujufenxi />
+                        </el-tab-pane>
+                        <el-tab-pane label="谐波频普" name="4" lazy v-if="!isReload">
+                            <Xiebopingpu />
+                        </el-tab-pane>
+                        <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload">
+                            <Gaojingshujutongji />
+                        </el-tab-pane>
+                        <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
+                            <Yunxingzhuangtai />
+                        </el-tab-pane>
+                        <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
+                            <Shishishuju />
+                        </el-tab-pane>
+                    </el-tabs>
+                    <div class="monitoring-point">当前位置：{{ monitoringPoint.state.lineName }}</div>
+                </div>
+            </pane>
+        </splitpanes>
     </div>
 </template>
-<script setup lang='ts'>
-import { defineOptions, nextTick, ref, watch } from 'vue'
+<script setup lang="ts">
+import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import PointTree from '@/components/tree/pms/pointTree.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { mainHeight } from '@/utils/layout'
-import Navigation from './navigation/index.vue'
 import Wentaizonghepinggu from './wentaizonghepinggu/index.vue'
 import Wentaizhibiaohegelv from './wentaizhibiaohegelv/index.vue'
 import Wentaishujufenxi from './wentaishujufenxi/index.vue'
@@ -40,18 +55,28 @@ import Xiebopingpu from './xiebopingpu/index.vue'
 import Gaojingshujutongji from './gaojingshujutongji/index.vue'
 import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
 import Shishishuju from './shishishuju/index.vue'
-
-
 import router from '@/router'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
 
 defineOptions({
     name: 'harmonic-boot/monitor/online'
 })
-const isReload = ref(false)
+
 const monitoringPoint = useMonitoringPoint()
-const height = mainHeight(82)
+const size = ref(0)
+const isReload = ref(false)
+const height = mainHeight(40)
 const activeName = ref('2')
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = Math.round((280 / dom.offsetHeight) * 100)
+    }
+})
+const handleNodeClick = (data: any, node: any) => {
+    if (data.level === 6) {
+        monitoringPoint.setValue('lineId', data.id)
+    }
+}
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {
@@ -62,18 +87,24 @@ watch(
     },
     { immediate: true }
 )
-watch(() => monitoringPoint.state.lineId, () => {
-    //  刷新页面
-    isReload.value = true
-    nextTick(() => {
-        isReload.value = false
-    })
-})
+watch(
+    () => monitoringPoint.state.lineId,
+    () => {
+        //  刷新页面
+        isReload.value = true
+        nextTick(() => {
+            isReload.value = false
+        })
+    }
+)
 const changeTab = (e: string) => {
     activeName.value = e
 }
 </script>
-<style lang='scss'>
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
 .monitoring-point {
     position: absolute;
     top: 12px;