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

src/components/echarts/MyEchart.vue

@@ -15,6 +15,8 @@ const chartRef = ref<HTMLDivElement>()
 const props = defineProps(['options'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if(chartRef.value!.offsetHeight == 0) return
     chart.getZr().painter.getViewportRoot().style.display = 'none'
     requestAnimationFrame(() => {
         chart.resize()
@@ -197,13 +199,25 @@ const handlerXAxis = () => {
         }
     }
 }
+let throttle: ReturnType<typeof setTimeout>
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
 onMounted(() => {
     initChart()
-    window.addEventListener('resize', resizeHandler)
+    resizeObserver.observe(chartRef.value!)
 })
 defineExpose({ initChart })
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeHandler)
+    resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()
 })
 watch(

src/components/tree/pms/pointTree.vue

@@ -1,25 +1,25 @@
 <template>
-    <div class='point-tree' style='height: 100%; width: 100%; display: flex; flex-direction: column'>
+    <div class="point-tree">
         <el-select
-            v-model='formData.statisticalType'
-            placeholder='请选择'
-            style='min-width: unset; padding: 10px 10px 0'
-            @change='loadData'
+            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'
+                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'  v-bind='$attrs' />
+        <div style="flex: 1; overflow: hidden">
+            <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
         </div>
     </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { nextTick, onMounted, ref, useAttrs } from 'vue'
 import Tree from '../index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
@@ -67,7 +67,7 @@ const loadData = () => {
                         item4.icon = 'fa-solid fa-tower-observation'
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
-                            if ((!attrs['current-node-key']) && !nodeKey) {
+                            if (!attrs['current-node-key'] && !nodeKey) {
                                 nodeKey = item5.id
                                 emit('init', item5)
                             }
@@ -96,3 +96,13 @@ const loadData = () => {
 }
 loadData()
 </script>
+<style lang="scss">
+.point-tree {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid var(--el-border-color);
+}
+</style>