fix: 树形结构

src/views/warningHome/index.vue

@@ -50,7 +50,7 @@
                     <time-line></time-line>
                 </div>
             </div>
-            <div class="action-legend">
+            <div class="action-legend" v-if="activeBaseTab !== '农场分布' && activeBaseTab !== '农服管理'">
                 <el-tree
                     ref="treeRef"
                     class="yes-events"
@@ -145,7 +145,7 @@
 import "./map/mockFarmLayer";
 import StaticMapLayers from "@/components/static_map_change/Layers.js";
 import StaticMapPointLayers from "@/components/static_map_change/pointLayer.js";
-import { onMounted, onUnmounted, ref, reactive } from "vue";
+import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
@@ -488,11 +488,8 @@ const treeActionData = ref(originTreeData);
 const activePhenologySecondId = ref(null);
 
 // 树的默认展开与默认选中（展开/选中第一个“果类”及其子节点）
-const defaultExpandedKeys = ref([treeActionData.value[0]?.id]);
-const defaultCheckedKeys = ref([
-    treeActionData.value[0]?.id,
-    ...(treeActionData.value[0]?.children?.map((c) => c.id) || []),
-]);
+const defaultExpandedKeys = ref();
+const defaultCheckedKeys = ref();
 
 // 顶部基础 tabs
 const baseTabs = ["作物分布", "物候期分布", "预警分布", "农场分布", "农服管理"];
@@ -508,6 +505,7 @@ onMounted(() => {
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
     // 作物分布默认选中
+    handleDistributionTreeDefault()
     handleDistributionLayer();
 
     eventBus.emit("warningMap:init", warningMap.kmap);
@@ -569,6 +567,15 @@ const handleDistributionLayer = () => {
     }
 };
 
+// 作物分布树形结构默认展开与默认选中
+const handleDistributionTreeDefault = () => {
+    defaultExpandedKeys.value = [treeActionData.value[0]?.id];
+    defaultCheckedKeys.value = [
+        treeActionData.value[0]?.id,
+        ...(treeActionData.value[0]?.children?.map((c) => c.id) || []),
+    ];
+};
+
 // 物候期分布默认选中并展开第一个节点，在地图上显示对应分布图层
 const handlePhenologyLayer = () => {
     const firstCategory = treeActionData.value[0].children[0];
@@ -578,6 +585,34 @@ const handlePhenologyLayer = () => {
     }
 };
 
+// 物候期分布树形结构默认展开与默认选中
+const handlePhenologyTreeDefault = () => {
+    defaultCheckedKeys.value = [
+        treeActionData.value[0]?.children[0]?.id,
+        ...(treeActionData.value[0]?.children[0]?.children?.map((c) => c.id) || []),
+    ];
+    defaultExpandedKeys.value = [treeActionData.value[0]?.children[0]?.id];
+};
+
+// 预警分布默认选中并展开第一个节点，在地图上显示对应分布图层
+const handleAlarmLayer = () => {
+    const firstCategory = treeActionData.value[0].children[0];
+    console.log('firstCategory', firstCategory);
+    if (firstCategory) {
+        const defaultNodes = [firstCategory];
+        distributionLayer.initData(defaultNodes);
+    }
+};
+
+// 预警分布树形结构默认展开与默认选中
+const handleAlarmTreeDefault = () => {
+    defaultCheckedKeys.value = [
+        treeActionData.value[0]?.children[0]?.id
+    ];
+    console.log('defaultCheckedKeys', defaultCheckedKeys.value);
+    defaultExpandedKeys.value = [treeActionData.value[0]?.id];
+};
+
 // ai与地图交互
 const hideChatMapLayer = ref(true);
 const handleMapLayer = ({ mapName, isHome }) => {
@@ -620,27 +655,34 @@ const handleTabClick = (item) => {
         distributionLayer.clear();
     }
     // 所有操作前，先清空图层和选中项
-    treeActionData.value[1].children[0] = { ...treeActionData.value[1].children[0], children: [] };
     legendImg.value = "";
     staticMapLayers && staticMapLayers.hideAll();
     // 通知预警列表组件清空默认选中项
     eventBus.emit("warningHome:clearAlarm");
     treeActionData.value = originTreeData;
+    // 使用 nextTick 确保树组件数据更新后再设置选中状态
+    nextTick(() => {
+        if (treeRef.value) {
+            // 先清空所有选中项
+            treeRef.value.setCheckedKeys([]);
+            // 再设置新的选中项
+            treeRef.value.setCheckedKeys(defaultCheckedKeys.value);
+        }
+    });
 
     switch (item) {
         case "作物分布":
+            handleDistributionTreeDefault();
             handleDistributionLayer();
             break;
         case "物候期分布":
-            defaultCheckedKeys.value = [
-                treeActionData.value[0]?.children[0]?.id,
-                ...(treeActionData.value[0]?.children[0]?.children?.map((c) => c.id) || []),
-            ];
-            defaultExpandedKeys.value = [treeActionData.value[0]?.children[0]?.id];
             treeActionData.value = phenologyData;
+            handlePhenologyTreeDefault()
             handlePhenologyLayer();
             break;
         case "预警分布":
+            handleAlarmTreeDefault()
+            handleAlarmLayer();
             // 通知预警列表组件默认选中第一个（因子）项
             eventBus.emit("warningHome:activeFirstAlarmFactor");
             break;
@@ -789,7 +831,7 @@ const getTreeChecks = (nodeData, data) => {
     let finalCheckedNodes = checkedNodes;
 
     // 物候期分布：限制“二级只能选一个，三级不限个数”
-    if (activeBaseTab.value === "物候期分布" && treeRef.value) {
+    if ((activeBaseTab.value === "物候期分布" || activeBaseTab.value === "预警分布") && treeRef.value) {
         const tree = treeRef.value;
         const { level, secondId } = getNodeLevelInfo(nodeData.id);