Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map

src/api/modules/species.js

@@ -5,4 +5,19 @@ export default {
         url: config.one_map_url + "species/botany_type/list",
         type: "get",
     },
+    // 省级列表
+    provinceList: {
+        url: config.one_map_url + "province/list",
+        type: "get",
+    },
+    // 市级列表
+    cityList: {
+        url: config.one_map_url + "city/list/{provCode}",
+        type: "get",
+    },
+    // 区级列表
+    districtList: {
+        url: config.one_map_url + "district/listByCityCode/{cityCode}",
+        type: "get",
+    },
 }

src/views/warningHome/index.vue

@@ -11,14 +11,13 @@
                                 :show-all-levels="false"
                                 v-model="areaVal"
                                 :props="props1"
-                                :options="areaListOptions"
                                 @change="toggleArea"
                                 popper-class="area-cascader"
                             />
                         </div>
                     </div>
                     <div class="top-r yes-events">
-                        <div class="data-box" @click="toggleBox('面积')" :class="{ active: activeBoxName === '面积' }">
+                        <div class="data-box" :class="{ active: activeBoxName === '面积' }">
                             <div class="data-value">
                                 <span>{{ regionCropData.plantArea }}</span
                                 >万亩
@@ -28,13 +27,12 @@
                         <div
                             class="data-box"
                             v-if="areaVal.includes('3186')"
-                            @click="toggleBox('从化荔枝')"
                             :class="{ active: activeBoxName === '从化荔枝' }"
                         >
                             <div class="data-value"><span>11.9</span>万亩</div>
                             <div class="data-name">疑似失管面积</div>
                         </div>
-                        <div class="data-box" @click="toggleBox('产量')" :class="{ active: activeBoxName === '产量' }">
+                        <div class="data-box" :class="{ active: activeBoxName === '产量' }">
                             <div class="data-value">
                                 <span>{{ regionCropData.expectYield }}</span
                                 >万吨
@@ -512,7 +510,7 @@ onMounted(async () => {
     distributionLayer = new DistributionLayer(warningMap.kmap);
     await getSpeciesListData();
     // 作物分布默认选中
-    await handleDistributionTreeDefault()
+    handleDistributionTreeDefault()
     await handleDistributionLayer();
 
     eventBus.emit("warningMap:init", warningMap.kmap);
@@ -583,11 +581,9 @@ onUnmounted(() => {
 
 // 作物分布默认选中并展开第一个节点，在地图上显示对应分布图层
 const handleDistributionLayer = async () => {
-    // 默认选中并展开第一个“果类”节点，在地图上显示对应分布图层
+    // 默认选中并展开第一个"果类"节点，在地图上显示对应分布图层
     const firstCategory = treeActionData.value[0];
-    if (firstCategory) {
-        await getDistributionData(firstCategory.id);
-    }
+    getCommonMapData(firstCategory);
 };
 
 // 作物分布树形结构默认展开与默认选中
@@ -602,31 +598,7 @@ const handleDistributionTreeDefault = () => {
 // 物候期分布默认选中并展开第一个节点，在地图上显示对应分布图层
 const handlePhenologyLayer = async () => {
     const firstCategory = treeActionData.value[0].children[0];
-    if (firstCategory) {
-        // 递归查找最后一层的节点（没有子节点的叶子节点）
-        const getLastLevelNodes = (node) => {
-            const lastLevelNodes = [];
-            if ((!node.items || node.items.length === 0) && (!node.children || node.children.length === 0)) {
-                lastLevelNodes.push(node);
-            } else {
-                const children = node.items || node.children || [];
-                children.forEach((child) => {
-                    lastLevelNodes.push(...getLastLevelNodes(child));
-                });
-            }
-            return lastLevelNodes;
-        };
-        
-        const lastLevelNodes = getLastLevelNodes(firstCategory);
-        const lastLevelIds = lastLevelNodes.map((n) => n.id);
-        
-        // 并发请求所有数据
-        const promises = lastLevelIds.map((id) => getDistributionData(id));
-        const results = await Promise.all(promises);
-        const finalMapData = results.flat();
-        
-        distributionLayer.initData(finalMapData);
-    }
+    getCommonMapData(firstCategory);
 };
 
 // 物候期分布树形结构默认展开与默认选中
@@ -641,6 +613,19 @@ const handlePhenologyTreeDefault = () => {
 // 预警分布默认选中并展开第一个节点，在地图上显示对应分布图层
 const handleAlarmLayer = async () => {
     const firstCategory = treeActionData.value[0].children[0];
+    getCommonMapData(firstCategory);
+};
+
+// 预警分布树形结构默认展开与默认选中
+const handleAlarmTreeDefault = () => {
+    defaultCheckedKeys.value = [
+        treeActionData.value[0]?.children[0]?.id
+    ];
+    defaultExpandedKeys.value = [treeActionData.value[0]?.id];
+};
+
+// 处理公共获取最后一级的节点数据
+const getCommonMapData = async (firstCategory) => {
     if (firstCategory) {
         // 递归查找最后一层的节点（没有子节点的叶子节点）
         const getLastLevelNodes = (node) => {
@@ -666,15 +651,7 @@ const handleAlarmLayer = async () => {
         
         distributionLayer.initData(finalMapData);
     }
-};
-
-// 预警分布树形结构默认展开与默认选中
-const handleAlarmTreeDefault = () => {
-    defaultCheckedKeys.value = [
-        treeActionData.value[0]?.children[0]?.id
-    ];
-    defaultExpandedKeys.value = [treeActionData.value[0]?.id];
-};
+}
 
 // ai与地图交互
 const hideChatMapLayer = ref(true);
@@ -722,7 +699,6 @@ const handleTabClick = (item) => {
     staticMapLayers && staticMapLayers.hideAll();
     // 通知预警列表组件清空默认选中项
     eventBus.emit("warningHome:clearAlarm");
-    treeActionData.value = originTreeData;
     // 使用 nextTick 确保树组件数据更新后再设置选中状态
     nextTick(() => {
         if (treeRef.value) {
@@ -817,14 +793,72 @@ const getDistributionData = async (speciesId) => {
 };
 const props1 = {
     checkStrictly: true,
+    lazy: true,
+    lazyLoad(node, resolve) {
+        const { level } = node;
+        
+        if (level === 0) {
+            // 第一级：获取省级列表
+            VE_API.species.provinceList().then((res) => {
+                if (res.code === 0 && res.data) {
+                    const nodes = res.data.map((item) => ({
+                        value: item.provCode || item.code || item.id,
+                        label: item.provName || item.name,
+                        leaf: false, // 省级不是叶子节点
+                    }));
+                    resolve(nodes);
+                } else {
+                    resolve([]);
+                }
+            }).catch(() => {
+                resolve([]);
+            });
+        } else if (level === 1) {
+            // 第二级：获取市级列表，参数 provCode
+            const provCode = node.value;
+            VE_API.species.cityList({ provCode }).then((res) => {
+                if (res.code === 0 && res.data) {
+                    const nodes = res.data.map((item) => ({
+                        value: item.cityCode || item.code || item.id,
+                        label: item.cityName || item.name,
+                        leaf: false, // 市级不是叶子节点
+                    }));
+                    resolve(nodes);
+                } else {
+                    resolve([]);
+                }
+            }).catch(() => {
+                resolve([]);
+            });
+        } else if (level === 2) {
+            // 第三级：获取区级列表，参数 cityCode
+            const cityCode = node.value;
+            VE_API.species.districtList({ cityCode }).then((res) => {
+                if (res.code === 0 && res.data) {
+                    const nodes = res.data.map((item) => ({
+                        value: item.districtCode || item.code || item.id,
+                        label: item.districtName || item.name,
+                        leaf: true, // 区级是叶子节点
+                    }));
+                    resolve(nodes);
+                } else {
+                    resolve([]);
+                }
+            }).catch(() => {
+                resolve([]);
+            });
+        } else {
+            resolve([]);
+        }
+    },
 };
 
 const toggleArea = (v) => {
     activeBoxName.value = null;
-    const val = v[v.length - 1];
-    if (val === "3" || val === "3186") {
-        eventBus.emit("warningHome:toggleArea", val);
-    }
+    // const val = v[v.length - 1];
+    // if (val === "3" || val === "3186") {
+    //     eventBus.emit("warningHome:toggleArea", val);
+    // }
 };
 
 const activeBoxName = ref(null);
@@ -1170,6 +1204,9 @@ const getTreeChecks = async (nodeData, data) => {
                             font-family: "PangMenZhengDao";
                             text-align: center;
                         }
+                        .el-input__suffix {
+                            color: #f7be5a;
+                        }
                     }
                     .el-select__wrapper {
                         background: rgba(29, 29, 29, 0.54);
@@ -1340,6 +1377,9 @@ const getTreeChecks = async (nodeData, data) => {
         background-color: rgba(255, 212, 137, 0.3);
         border-color: rgba(255, 212, 137, 0.6);
     }
+    .el-radio__inner::after {
+        background: #000;
+    }
     &.el-popper.is-light .el-popper__arrow:before {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);

src/views/warningHome/map/distributionLayer.js

@@ -20,7 +20,7 @@ class DistributionLayer {
                 return [style2]
             }
         });
-        // this.kmap.addLayer(this.distributionLayer.layer)
+        this.kmap.addLayer(this.distributionLayer.layer)
 
         this.distributionPointLayer = new KMap.VectorLayer("distributionPointLayer", 99, {
             source: new VectorSource({}),
@@ -147,11 +147,11 @@ class DistributionLayer {
 
         for (let item of data) {
             // 面数据（区域多边形）
-            // if (item.geom) {
-            //     item.color = item.color || "#2199F8";
-            //     item.fillColor = item.fillColor || "rgba(0, 69, 4, 0.5)";
-            //     this.distributionLayer.source.addFeature(newPolymerFeature(item));
-            // }
+            if (item.geom) {
+                item.color = item.color || "#2199F8";
+                item.fillColor = item.fillColor || "rgba(0, 69, 4, 0.5)";
+                this.distributionLayer.source.addFeature(newPolymerFeature(item));
+            }
             if (item.centerPoint) {
                 item.color = item.color || "#2199F8";
                 item.wkt = item.centerPoint;