feat:对接农场列表接口

src/views/warningHome/components/chart_components/chartList.vue

@@ -59,7 +59,7 @@
 import chartBox from "@/components/chartBox.vue";
 import pieChart from "./pieChart.vue";
 import lineChart from "./lineChart.vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { pieOption } from "./chartOption.js";
 import barChart from "./barChart.vue";
 
@@ -154,7 +154,7 @@ const initData = () => {
         threeTitle.value = `${props.areaName}小麦预告产量统计`;
         fetchStatPhenologyRatio();
         fetchStatRegionYieldRatio();
-    } else {
+    } else if (props.activeBaseTab === "作物分布") {
         twoTitle.value = `${props.areaName}作物区域占比`;
         threeTitle.value = `${props.areaName}作物预估产量对比`;
         fetchStatSpeciesAreaYield();

src/views/warningHome/components/farmInfoGroup.vue

@@ -18,7 +18,7 @@
                 <!-- 右侧信息区域 -->
                 <div class="info-right">
                     <div class="info-item farm-code">
-                        <span class="info-label">{{ !farmList.length ? '农场编号：GZ86770' : item.name }}</span>
+                        <span class="info-label">{{ !farmList.length ? '农场编号：GZ86770' : item.farmName }}</span>
                         <div class="tags">
                             <span class="tag">荔枝</span>
                             <span class="tag">井岗红糯</span>
@@ -26,7 +26,7 @@
                     </div>
                     <div class="info-item">
                         <span class="info-label">农场面积:</span>
-                        <span class="info-value">58亩</span>
+                        <span class="info-value">{{ item.plantArea && item.plantArea.toFixed(2) || 0 }}亩</span>
                     </div>
                     <div class="info-item">
                         <span class="info-label">农场位置:</span>

src/views/warningHome/index.vue

@@ -73,14 +73,14 @@
                     </template>
                 </el-tree>
             </div>
-            <div v-if="panelType === 0" class="warning-r right chart-wrap yes-events">
+            <div v-show="panelType === 0" class="warning-r right chart-wrap yes-events">
                 <chart-list :activeBaseTab="activeBaseTab" :areaCode="selectedAreaCode" :areaName="selectedAreaName"></chart-list>
                 <!-- <farmInfoGroup></farmInfoGroup> -->
             </div>
-            <div v-if="panelType === 1" class="warning-r right yes-events">
+            <div v-show="panelType === 1" class="warning-r right yes-events">
                 <farmInfoGroup></farmInfoGroup>
             </div>
-            <div v-if="panelType === 2" class="warning-r right yes-events">
+            <div v-show="panelType === 2" class="warning-r right yes-events">
                 <service-list></service-list>
             </div>
             <!-- 地图图例 -->
@@ -396,7 +396,6 @@ const getCommonMapData = async (firstCategory) => {
         const promises = lastLevelIds.map((id) => getDistributionData(id));
         const results = await Promise.all(promises);
         const finalMapData = results.flat();
-        
         distributionLayer.initData(finalMapData);
     }
 }
@@ -505,52 +504,25 @@ const handleTabClick = (item) => {
             break;
         case "农场分布":
             panelType.value = 1;
-            const cropData = [
-                {
-                    id: 4,
-                    label: "荔枝-物候期",
-                    color: "#2199F8",
-                    farmName: "荔博园",
-                    imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E8%8D%94%E6%9E%9D.png",
-                    imgName: lz,
-                    wktArr: [
-                        "POINT(113.33722309500006 23.204074978290652)",
-                        "POINT(113.53593237057355 23.188789823486065)",
-                        "POINT(113.36970447853234 23.064596505297875)",
-                    ],
-                },
-                {
-                    id: 55,
-                    label: "荔枝-秋梢期",
-                    color: "#FF8E1C",
-                    farmName: "荔博园",
-                    imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E7%B3%96.png",
-                    imgName: lz,
-                    wktArr: [
-                        "POINT(113.29900983080294 22.949956545068478)",
-                        "POINT(113.22640444442656 22.90983245840535)",
-                    ],
-                },
-            ];
-
-            // 设施图层测试数据
-            const facilityData = [
-                {
-                    id: 201,
-                    label: "冷链冷库",
-                    imgName: coldChainIcon,
-                    wktArr: ["POINT(113.35 23.10)"],
-                },
-                {
-                    id: 202,
-                    label: "加工厂",
-                    imgName: factoryIcon,
-                    wktArr: ["POINT(113.25 23.02)"],
-                },
-            ];
-
-            distributionLayer.initData(cropData);
-            distributionLayer.initFacilityData(facilityData);
+            fetchFarmList();
+
+            // // 设施图层测试数据
+            // const facilityData = [
+            //     {
+            //         id: 201,
+            //         label: "冷链冷库",
+            //         imgName: coldChainIcon,
+            //         wktArr: ["POINT(113.35 23.10)"],
+            //     },
+            //     {
+            //         id: 202,
+            //         label: "加工厂",
+            //         imgName: factoryIcon,
+            //         wktArr: ["POINT(113.25 23.02)"],
+            //     },
+            // ];
+
+            // distributionLayer.initFacilityData(facilityData);
             break;
         case "农服管理":
             panelType.value = 2;
@@ -665,6 +637,36 @@ const props1 = {
     },
 };
 
+const fetchFarmList = () => {
+    VE_API.warning.fetchFarmList().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');
+        } else {
+            // 接口返回空数据时，清空地图
+            distributionLayer.initData([]);
+        }
+    }).catch((error) => {
+        // 错误时也清空地图
+        distributionLayer.initData([]);
+    });
+};
+
 const selectedAreaCode = ref(null);
 const selectedAreaName = ref(null);
 const cascaderRef = ref(null);