修改

src/views/count/index.vue

@@ -1,11 +1,11 @@
 <template>
     <HcCard ui="hc-count-card-ui" body-ui="hc-count-card">
-        <div id="hc-count-tree" class="hc-count-tree">
+        <div :id="`hc-count-tree-${left_uuid}`" class="hc-count-tree">
             <el-scrollbar>
                 <HcTreeData :is-menu="false" @nodeTap="treeNodeTap" />
             </el-scrollbar>
         </div>
-        <div id="hc-count-body" class="hc-count-body">
+        <div :id="`hc-count-body-${page_uuid}`" class="hc-count-body">
             <el-scrollbar>
                 <div class="hc-count-echarts-1">
                     <el-row :gutter="14">
@@ -79,7 +79,7 @@ import BarLabelEcharts from '~com/echarts/BarLabel.vue'
 import stackEcharts from '~com/echarts/stackEcharts.vue'
 import split from 'split.js'
 import countApi from '~api/count/index.js'
-import { getArrValue } from 'js-fast-way'
+import { getArrValue, getRandom } from 'js-fast-way'
 import { useAppStore } from '~src/store'
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId)
@@ -114,14 +114,16 @@ const getAreProgress = async () => {
      
     }
 }
+const left_uuid = getRandom(8)
+const page_uuid = getRandom(8)
 // 初始化设置拖动分割线
 const splitvar = ref(null)
 const setSplitDom = () => {
     try {
         //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
         splitvar.value = split([
-            '#hc-count-tree',
-            '#hc-count-body',
+           `#hc-count-tree-${left_uuid}`,
+           `#hc-count-body-${page_uuid}`,
         ], {
             sizes: [20, 80],
             minSize: [200, 900],

src/views/count/map.vue

@@ -1,24 +1,34 @@
 <template>
-    <HcCard ui="hc-count-card-ui" bodyUi="hc-count-card">
-        <div class="hc-count-tree" id="hc-count-tree">
+    <HcCard ui="hc-count-card-ui" body-ui="hc-count-card">
+        <div :id="`hc-count-tree-${left_uuid}`" class="hc-count-tree">
             <el-scrollbar>
-                <HcTreeData :isMenu="false" @nodeTap="treeNodeTap"/>
+                <HcTreeData :is-menu="false" @nodeTap="treeNodeTap" />
             </el-scrollbar>
         </div>
-        <div class="hc-count-body" id="hc-count-body">
+        <div :id="`hc-count-body-${page_uuid}`" class="hc-count-body">
             <HcCardItem class="hc-card-item-box info-card">
                 <div class="content">
                     <div class="item">
                         <span>户主：xxxxx</span>
                         <span class="ml-20">宗地编号：xxxxx</span>
                     </div>
-                    <div class="item">征地面积：xxxxx</div>
-                    <div class="item">征拆状态：xxxxx</div>
-                    <div class="item">结算金额：xxxxx</div>
+                    <div class="item">
+                        征地面积：xxxxx
+                    </div>
+                    <div class="item">
+                        征拆状态：xxxxx
+                    </div>
+                    <div class="item">
+                        结算金额：xxxxx
+                    </div>
                 </div>
                 <div class="btn">
-                    <el-button type="primary">查看协议书</el-button>
-                    <el-button type="primary">查看结算协议书</el-button>
+                    <el-button type="primary">
+                        查看协议书
+                    </el-button>
+                    <el-button type="primary">
+                        查看结算协议书
+                    </el-button>
                 </div>
             </HcCardItem>
             <div class="hc-count-map">
@@ -29,11 +39,12 @@
 </template>
 
 <script setup>
-import {ref, onUnmounted, onMounted} from "vue";
-import split from "split.js";
+import { onMounted, onUnmounted, ref } from 'vue'
+import split from 'split.js'
+import { getRandom } from 'js-fast-way'
 
 //树节点被点击
-const treeNodeTap = ({node, data}) => {
+const treeNodeTap = ({ node, data }) => {
 
 }
 
@@ -42,18 +53,20 @@ onMounted(() => {
     setSplitDom()
 })
 
+const left_uuid = getRandom(8)
+const page_uuid = getRandom(8)
 // 初始化设置拖动分割线
-const splitvar = ref(null);
+const splitvar = ref(null)
 const setSplitDom = () => {
     try {
         //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
         splitvar.value = split([
-            '#hc-count-tree',
-            '#hc-count-body'
+           `#hc-count-tree-${left_uuid}`,
+           `#hc-count-body-${page_uuid}`,
         ], {
             sizes: [20, 80],
             minSize: [200, 900],
-        });
+        })
     } catch (e) {
         setTimeout(() => {
             setSplitDom()