Parcourir la source

feat:优化代码

wangsisi il y a 3 jours
Parent
commit
b43f7df4ec
1 fichiers modifiés avec 191 ajouts et 202 suppressions
  1. 191 202
      src/views/warningHome/index.vue

+ 191 - 202
src/views/warningHome/index.vue

@@ -74,7 +74,11 @@
                 </el-tree>
             </div>
             <div v-if="panelType === 0" class="warning-r right chart-wrap yes-events">
-                <chart-list :activeBaseTab="activeBaseTab" :areaCode="selectedAreaCode" :areaName="selectedAreaName"></chart-list>
+                <chart-list
+                    :activeBaseTab="activeBaseTab"
+                    :areaCode="selectedAreaCode"
+                    :areaName="selectedAreaName"
+                ></chart-list>
                 <!-- <farmInfoGroup></farmInfoGroup> -->
             </div>
             <div v-if="panelType === 1" class="warning-r right yes-events">
@@ -177,7 +181,6 @@ const defaultProps = {
 import coldChainIcon from "@/assets/images/common/legend-icon-1.png";
 import factoryIcon from "@/assets/images/common/legend-icon-2.png";
 
-
 const treeActionData = ref([]);
 // 保存原始数据,用于恢复
 const originalTreeData = ref([]);
@@ -208,7 +211,7 @@ onMounted(async () => {
     distributionLayer = new DistributionLayer(warningMap.kmap);
     await getSpeciesListData();
     // 作物分布默认选中
-    handleDistributionTreeDefault()
+    handleDistributionTreeDefault();
     await handleDistributionLayer();
 
     eventBus.emit("warningMap:init", warningMap.kmap);
@@ -258,15 +261,15 @@ onMounted(async () => {
 });
 
 // 时间轴
-eventBus.on("weatherTime:changeTime", ({index, year, quarter}) => {
-    handleTimeChange(index, year, quarter)
-})
+eventBus.on("weatherTime:changeTime", ({ index, year, quarter }) => {
+    handleTimeChange(index, year, quarter);
+});
 
 const handleTimeChange = (index, year, quarter) => {
     // 更新当前选中的年份和季度
     currentYear.value = year;
     currentQuarter.value = quarter;
-    
+
     // 如果当前在作物分布或物候期分布tab,需要重新加载地图数据
     if (activeBaseTab.value === "作物分布" || activeBaseTab.value === "物候期分布") {
         // 重新获取当前选中的节点数据
@@ -277,21 +280,21 @@ const handleTimeChange = (index, year, quarter) => {
             }
         }
     }
-}
+};
 
 const getRegionCropAreaYield = async () => {
-    if (activeBaseTab.value === '作物分布') return;
+    if (activeBaseTab.value === "作物分布") return;
     const res = await VE_API.warning.fetchRegionCropAreaYield({
         adminCode: selectedAreaCode.value,
         speciesId: 1,
-        year: '',
-        quarter: '',
+        year: "",
+        quarter: "",
     });
     if (res.code === 0 && res.data) {
         // 更新区域作物数据
         regionCropData.value = {
-            plantArea: res.data.plantArea && Number(res.data.plantArea).toFixed(2) || 0, // 种植面积(亩)
-            expectYield: res.data.expectYield && Number(res.data.expectYield).toFixed(2) || 0, // 预估产量(吨)
+            plantArea: (res.data.plantArea && Number(res.data.plantArea).toFixed(2)) || 0, // 种植面积(亩)
+            expectYield: (res.data.expectYield && Number(res.data.expectYield).toFixed(2)) || 0, // 预估产量(吨)
         };
     }
 };
@@ -311,7 +314,7 @@ const initAreaDefaultValue = async () => {
             areaCodeNameMap.value.set(firstProvinceCode, firstProvinceName);
         }
     } catch (error) {
-        console.error('初始化区域默认值失败:', error);
+        console.error("初始化区域默认值失败:", error);
     }
 };
 
@@ -349,13 +352,13 @@ const handlePhenologyLayer = async () => {
 const handlePhenologyTreeDefault = () => {
     const firstSecondLevel = treeActionData.value[0]?.items?.[0];
     if (!firstSecondLevel) return;
-    
+
     const secondLevelId = firstSecondLevel.id;
     const thirdLevelIds = firstSecondLevel.items?.map((c) => c.id) || [];
-    
+
     defaultCheckedKeys.value = [secondLevelId, ...thirdLevelIds];
     defaultExpandedKeys.value = [firstSecondLevel.items[0].id];
-    
+
     // 手动设置选中和展开状态
     nextTick(() => {
         if (treeRef.value) {
@@ -373,9 +376,7 @@ const handleAlarmLayer = async () => {
 
 // 预警分布树形结构默认展开与默认选中
 const handleAlarmTreeDefault = () => {
-    defaultCheckedKeys.value = [
-        treeActionData.value[0]?.items[0]?.id
-    ];
+    defaultCheckedKeys.value = [treeActionData.value[0]?.items[0]?.id];
     defaultExpandedKeys.value = [treeActionData.value[0]?.id];
 };
 
@@ -395,13 +396,13 @@ const getCommonMapData = async (firstCategory) => {
             }
             return lastLevelNodes;
         };
-        
+
         const lastLevelNodes = getLastLevelNodes(firstCategory);
         if (activeBaseTab.value === "物候期分布") {
             // 等待接口返回数据
             const lastLevelIds = lastLevelNodes.map((n) => n.originalId);
             const phenologyData = await getDistributionData(null, lastLevelIds);
-            distributionLayer.initData(phenologyData, 'phenologyName');
+            distributionLayer.initData(phenologyData, "phenologyName");
             return;
         }
         if (activeBaseTab.value === "农场分布") {
@@ -416,7 +417,7 @@ const getCommonMapData = async (firstCategory) => {
         const finalMapData = results.flat();
         distributionLayer.initData(finalMapData);
     }
-}
+};
 
 // ai与地图交互
 const hideChatMapLayer = ref(true);
@@ -467,12 +468,12 @@ const handleTabClick = (item) => {
     // 通知预警列表组件清空默认选中项
     eventBus.emit("warningHome:clearAlarm");
     // 使用 nextTick 确保树组件数据更新后再设置选中状态
-        if (treeRef.value) {
-            defaultCheckedKeys.value = [];
-            defaultExpandedKeys.value = [];
-            // 先清空所有选中项
-            treeRef.value.setCheckedKeys([]);
-        }
+    if (treeRef.value) {
+        defaultCheckedKeys.value = [];
+        defaultExpandedKeys.value = [];
+        // 先清空所有选中项
+        treeRef.value.setCheckedKeys([]);
+    }
 
     switch (item) {
         case "作物分布":
@@ -488,86 +489,21 @@ const handleTabClick = (item) => {
             handleDistributionLayer();
             break;
         case "物候期分布":
-            // 禁用农场分布点击处理
-            if (distributionLayer) {
-                distributionLayer.setFarmClickEnabled(false);
-            }
-            // 先恢复原始数据,再修改第二级 children 的 items 字段为 phenologies
-            if (originalTreeData.value.length > 0) {
-                treeActionData.value = JSON.parse(JSON.stringify(originalTreeData.value));
-            }
-            // 修改第二级 children 的 items 字段为 phenologies,不修改其他项
-            treeActionData.value = treeActionData.value.map((firstLevel) => {
-                if (firstLevel.items && Array.isArray(firstLevel.items)) {
-                    return {
-                        ...firstLevel,
-                        items: firstLevel.items.map((secondLevel) => {
-                            // 如果第二级有 phenologies 字段,将其设置为 items
-                            if (secondLevel.phenologies) {
-                                secondLevel.phenologies.forEach((phenology) => {
-                                    phenology.originalId = phenology.id;
-                                    phenology.id = 'phenology_' + phenology.id;
-                                });
-                                return {
-                                    ...secondLevel,
-                                    items: secondLevel.phenologies,
-                                };
-                            }
-                            return secondLevel;
-                        }),
-                    };
-                }
-                return firstLevel;
-            });
-            handlePhenologyTreeDefault();
-            handlePhenologyLayer();
+            handleDefaultDistributionLayer(false);
             break;
         case "预警分布":
             // 禁用农场分布点击处理
             if (distributionLayer) {
                 distributionLayer.setFarmClickEnabled(false);
             }
-            handleAlarmTreeDefault()
+            handleAlarmTreeDefault();
             handleAlarmLayer();
             // 通知预警列表组件默认选中第一个(因子)项
             eventBus.emit("warningHome:activeFirstAlarmFactor");
             break;
         case "农场分布":
             panelType.value = 1;
-            // 启用农场分布点击处理
-            if (distributionLayer) {
-                distributionLayer.setFarmClickEnabled(true);
-            }
-            // 先恢复原始数据,再修改第二级 children 的 items 字段为 phenologies
-            if (originalTreeData.value.length > 0) {
-                treeActionData.value = JSON.parse(JSON.stringify(originalTreeData.value));
-            }
-            // 修改第二级 children 的 items 字段为 phenologies,不修改其他项
-            treeActionData.value = treeActionData.value.map((firstLevel) => {
-                if (firstLevel.items && Array.isArray(firstLevel.items)) {
-                    return {
-                        ...firstLevel,
-                        items: firstLevel.items.map((secondLevel) => {
-                            // 如果第二级有 phenologies 字段,将其设置为 items
-                            if (secondLevel.phenologies) {
-                                secondLevel.phenologies.forEach((phenology) => {
-                                    phenology.originalId = phenology.id;
-                                    phenology.id = 'phenology_' + phenology.id;
-                                });
-                                return {
-                                    ...secondLevel,
-                                    items: secondLevel.phenologies,
-                                };
-                            }
-                            return secondLevel;
-                        }),
-                    };
-                }
-                return firstLevel;
-            });
-            handlePhenologyTreeDefault();
-            handlePhenologyLayer();
-
+            handleDefaultDistributionLayer(true);
             // // 设施图层测试数据
             // const facilityData = [
             //     {
@@ -598,6 +534,42 @@ const handleTabClick = (item) => {
     }
 };
 
+const handleDefaultDistributionLayer = (isFarmClickEnabled) => {
+    // 启用农场分布点击处理
+    if (distributionLayer) {
+        distributionLayer.setFarmClickEnabled(isFarmClickEnabled);
+    }
+    // 先恢复原始数据,再修改第二级 children 的 items 字段为 phenologies
+    if (originalTreeData.value.length > 0) {
+        treeActionData.value = JSON.parse(JSON.stringify(originalTreeData.value));
+    }
+    // 修改第二级 children 的 items 字段为 phenologies,不修改其他项
+    treeActionData.value = treeActionData.value.map((firstLevel) => {
+        if (firstLevel.items && Array.isArray(firstLevel.items)) {
+            return {
+                ...firstLevel,
+                items: firstLevel.items.map((secondLevel) => {
+                    // 如果第二级有 phenologies 字段,将其设置为 items
+                    if (secondLevel.phenologies) {
+                        secondLevel.phenologies.forEach((phenology) => {
+                            phenology.originalId = phenology.id;
+                            phenology.id = "phenology_" + phenology.id;
+                        });
+                        return {
+                            ...secondLevel,
+                            items: secondLevel.phenologies,
+                        };
+                    }
+                    return secondLevel;
+                }),
+            };
+        }
+        return firstLevel;
+    });
+    handlePhenologyTreeDefault();
+    handlePhenologyLayer();
+};
+
 const getSpeciesListData = async () => {
     const res = await VE_API.species.speciesList();
     treeActionData.value = res.data;
@@ -606,11 +578,11 @@ const getSpeciesListData = async () => {
 };
 
 const getDistributionData = async (speciesId, phenologyIds) => {
-    const {data} = await VE_API.agri_land_crop.queryDistribution({
+    const { data } = await VE_API.agri_land_crop.queryDistribution({
         year: currentYear.value,
         quarter: currentQuarter.value,
         speciesId,
-        phenologyIds: phenologyIds || []
+        phenologyIds: phenologyIds || [],
     });
     return data;
 };
@@ -619,84 +591,93 @@ const props1 = {
     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) => {
-                        const code = item.provCode || item.code;
-                        const name = item.provName || item.name;
-                        // 保存 code 到 name 的映射
-                        areaCodeNameMap.value.set(code, name);
-                        return {
-                            value: code, // 使用code,不使用id
-                            label: name,
-                            leaf: false, // 省级不是叶子节点
-                        };
-                    });
-                    if (nodes.length > 0) {
-                        // 设置第一个省的code
-                        const firstProvinceCode = nodes[0].value;
-                        areaVal.value = [firstProvinceCode];
-                        selectedAreaCode.value = firstProvinceCode;
-                        selectedAreaName.value = nodes[0].label;
-                        // 使用第一个省的code初始化数据
-                        getRegionCropAreaYield();
+            VE_API.species
+                .provinceList()
+                .then((res) => {
+                    if (res.code === 0 && res.data) {
+                        const nodes = res.data.map((item) => {
+                            const code = item.provCode || item.code;
+                            const name = item.provName || item.name;
+                            // 保存 code 到 name 的映射
+                            areaCodeNameMap.value.set(code, name);
+                            return {
+                                value: code, // 使用code,不使用id
+                                label: name,
+                                leaf: false, // 省级不是叶子节点
+                            };
+                        });
+                        if (nodes.length > 0) {
+                            // 设置第一个省的code
+                            const firstProvinceCode = nodes[0].value;
+                            areaVal.value = [firstProvinceCode];
+                            selectedAreaCode.value = firstProvinceCode;
+                            selectedAreaName.value = nodes[0].label;
+                            // 使用第一个省的code初始化数据
+                            getRegionCropAreaYield();
+                        }
+                        resolve(nodes);
+                    } else {
+                        resolve([]);
                     }
-                    resolve(nodes);
-                } else {
+                })
+                .catch(() => {
                     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) => {
-                        const code = item.cityCode || item.code;
-                        const name = item.cityName || item.name;
-                        // 保存 code 到 name 的映射
-                        areaCodeNameMap.value.set(code, name);
-                        return {
-                            value: code,
-                            label: name,
-                            leaf: false, // 市级不是叶子节点
-                        };
-                    });
-                    resolve(nodes);
-                } else {
+            VE_API.species
+                .cityList({ provCode })
+                .then((res) => {
+                    if (res.code === 0 && res.data) {
+                        const nodes = res.data.map((item) => {
+                            const code = item.cityCode || item.code;
+                            const name = item.cityName || item.name;
+                            // 保存 code 到 name 的映射
+                            areaCodeNameMap.value.set(code, name);
+                            return {
+                                value: code,
+                                label: name,
+                                leaf: false, // 市级不是叶子节点
+                            };
+                        });
+                        resolve(nodes);
+                    } else {
+                        resolve([]);
+                    }
+                })
+                .catch(() => {
                     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) => {
-                        const code = item.districtCode || item.code;
-                        const name = item.districtName || item.name;
-                        // 保存 code 到 name 的映射
-                        areaCodeNameMap.value.set(code, name);
-                        return {
-                            value: code,
-                            label: name,
-                            leaf: true, // 区级是叶子节点
-                        };
-                    });
-                    resolve(nodes);
-                } else {
+            VE_API.species
+                .districtList({ cityCode })
+                .then((res) => {
+                    if (res.code === 0 && res.data) {
+                        const nodes = res.data.map((item) => {
+                            const code = item.districtCode || item.code;
+                            const name = item.districtName || item.name;
+                            // 保存 code 到 name 的映射
+                            areaCodeNameMap.value.set(code, name);
+                            return {
+                                value: code,
+                                label: name,
+                                leaf: true, // 区级是叶子节点
+                            };
+                        });
+                        resolve(nodes);
+                    } else {
+                        resolve([]);
+                    }
+                })
+                .catch(() => {
                     resolve([]);
-                }
-            }).catch(() => {
-                resolve([]);
-            });
+                });
         } else {
             resolve([]);
         }
@@ -711,37 +692,40 @@ const fetchFarmList = (phenologyIds) => {
         phenologyIds: phenologyIds || [],
     };
     return new Promise((resolve, reject) => {
-        VE_API.warning.fetchFarmList(params).then(res => {
-        if (res.code === 0 && res.data && res.data.length > 0) {
-            // 将接口数据转换为地图需要的格式
-            const cropData = res.data.map((item) => {
-                // 组合作物名称和物候期名称作为 label
-                const label = item.phenologyName 
-                    ? `${item.speciesName}-${item.phenologyName}` 
-                    : item.speciesName;
-                
-                return {
-                    ...item,
-                    label: label,
-                    color: item.speciesColor || "#2199F8",
-                    centerPoint: item.point, // 使用 point 作为 centerPoint
-                };
+        VE_API.warning
+            .fetchFarmList(params)
+            .then((res) => {
+                if (res.code === 0 && res.data && res.data.length > 0) {
+                    // 将接口数据转换为地图需要的格式
+                    const cropData = res.data.map((item) => {
+                        // 组合作物名称和物候期名称作为 label
+                        const label = item.phenologyName
+                            ? `${item.speciesName}-${item.phenologyName}`
+                            : item.speciesName;
+
+                        return {
+                            ...item,
+                            label: label,
+                            color: item.speciesColor || "#2199F8",
+                            centerPoint: item.point, // 使用 point 作为 centerPoint
+                        };
+                    });
+
+                    // 渲染作物数据到地图
+                    distributionLayer.initData(cropData, "label");
+                    farmList.value = cropData;
+                    resolve(cropData);
+                } else {
+                    // 接口返回空数据时,清空地图
+                    distributionLayer.initData([]);
+                    resolve([]);
+                }
+            })
+            .catch((error) => {
+                // 错误时也清空地图
+                distributionLayer.initData([]);
+                reject(error);
             });
-            
-            // 渲染作物数据到地图
-            distributionLayer.initData(cropData, 'label');
-            farmList.value = cropData;
-            resolve(cropData);
-        } else {
-            // 接口返回空数据时,清空地图
-            distributionLayer.initData([]);
-            resolve([]);
-        }
-        }).catch((error) => {
-            // 错误时也清空地图
-            distributionLayer.initData([]);
-            reject(error);
-        });
     });
 };
 
@@ -757,14 +741,14 @@ const toggleArea = (v) => {
     // 获取选中的最后一个值(即最终的code)
     const selectedCode = v && v.length > 0 ? v[v.length - 1] : null;
     selectedAreaCode.value = selectedCode;
-    
+
     // 从映射中获取对应的 name
     if (selectedCode && areaCodeNameMap.value.has(selectedCode)) {
         selectedAreaName.value = areaCodeNameMap.value.get(selectedCode);
     } else {
         selectedAreaName.value = null;
     }
-    
+
     if (selectedCode) {
         // 调用接口更新区域作物数据
         getRegionCropAreaYield();
@@ -849,7 +833,12 @@ const getTreeChecks = async (nodeData, data) => {
     let finalCheckedNodes = checkedNodes;
 
     // 物候期分布:限制"二级只能选一个,三级不限个数"
-    if ((activeBaseTab.value === "物候期分布" || activeBaseTab.value === "预警分布" || activeBaseTab.value === "农场分布") && treeRef.value) {
+    if (
+        (activeBaseTab.value === "物候期分布" ||
+            activeBaseTab.value === "预警分布" ||
+            activeBaseTab.value === "农场分布") &&
+        treeRef.value
+    ) {
         const tree = treeRef.value;
         const { level, secondId } = getNodeLevelInfo(nodeData.id);
 
@@ -892,7 +881,7 @@ const getTreeChecks = async (nodeData, data) => {
 
     // 任意 tab 下,最终都用当前选中的节点驱动地图渲染
     // 提取最后一级节点的 id 到数组(没有子节点的叶子节点)
-    const field = (activeBaseTab.value === "物候期分布" || activeBaseTab.value === "农场分布") ? "originalId" : "id";
+    const field = activeBaseTab.value === "物候期分布" || activeBaseTab.value === "农场分布" ? "originalId" : "id";
     const lastLevelIds = finalCheckedNodes
         .filter((n) => (!n.items || n.items.length === 0) && (!n.children || n.children.length === 0))
         .map((n) => n[field]);
@@ -902,7 +891,7 @@ const getTreeChecks = async (nodeData, data) => {
     }
     if (activeBaseTab.value === "物候期分布") {
         const phenologyData = await getDistributionData(null, lastLevelIds);
-        distributionLayer.initData(phenologyData, 'phenologyName');
+        distributionLayer.initData(phenologyData, "phenologyName");
         return;
     }
     if (activeBaseTab.value === "农场分布") {
@@ -917,11 +906,11 @@ const getTreeChecks = async (nodeData, data) => {
         }
         return Promise.resolve([]);
     });
-    
+
     // 等待所有请求完成,并将结果扁平化
     const results = await Promise.all(promises);
     const finalMapData = results.flat();
-    
+
     distributionLayer.initData(finalMapData);
 };
 </script>