fix: 默认选中第一项

src/views/warningHome/index.vue

@@ -57,8 +57,8 @@
                     :data="treeActionData"
                     show-checkbox
                     node-key="id"
-                    :default-expanded-keys="[2]"
-                    :default-checked-keys="[5]"
+                    :default-expanded-keys="defaultExpandedKeys"
+                    :default-checked-keys="defaultCheckedKeys"
                     :props="defaultProps"
                     @check="getTreeChecks"
                 >
@@ -170,9 +170,9 @@ const areaVal = ref(["3"]);
 const mapRef = ref(null);
 const showDetail = ref(false);
 const defaultProps = {
-  children: 'children',
-  label: 'label',
-}
+    children: "children",
+    label: "label",
+};
 
 import lz from "@/assets/images/map/type/荔枝.png";
 import ly from "@/assets/images/map/type/龙眼.png";
@@ -270,7 +270,14 @@ const treeActionData = ref([
       },
     ],
   },
-])
+]);
+
+// 树的默认展开与默认选中（展开/选中第一个“果类”及其子节点）
+const defaultExpandedKeys = ref([treeActionData.value[0]?.id]);
+const defaultCheckedKeys = ref([
+    treeActionData.value[0]?.id,
+    ...(treeActionData.value[0]?.children?.map((c) => c.id) || []),
+]);
 
 // 顶部基础 tabs
 const baseTabs = ["作物分布", "物候期分布", "预警分布", "农场分布", "农服管理"];
@@ -285,9 +292,8 @@ onMounted(() => {
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
-    // setTimeout(() => {
-    //   staticMapLayers.show("testpng")
-    // },2000)
+    // 作物分布默认选中
+    handleDistributionLayer()
 
     eventBus.emit("warningMap:init", warningMap.kmap);
 
@@ -352,6 +358,16 @@ onUnmounted(() => {
     eventBus.off("alarmList:changeMapLayer");
 });
 
+// 作物分布默认选中并展开第一个节点，在地图上显示对应分布图层
+const handleDistributionLayer = () => {
+    // 默认选中并展开第一个“果类”节点，在地图上显示对应分布图层
+    const firstCategory = treeActionData.value[0];
+    if (firstCategory) {
+        const defaultNodes = [firstCategory, ...(firstCategory.children || [])];
+        distributionLayer.initData(defaultNodes);
+    }
+}
+
 // ai与地图交互
 const hideChatMapLayer = ref(true);
 const handleMapLayer = ({ mapName, isHome }) => {
@@ -449,9 +465,9 @@ const remoteMethod = async (keyword) => {
 };
 
 const getTreeChecks = (node, data) => {
-    console.log('getCheckedNodes', data.checkedNodes);
     distributionLayer.initData(data.checkedNodes);
 }
+
 </script>
 
 <style lang="scss" scoped>