fix: 图表内容

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

@@ -32,7 +32,7 @@
                 </div>
             </chart-box>
         </div>
-        <div class="chart-item">
+        <div class="chart-item" v-if="activeBaseTab === '作物分布'">
             <chart-box name="近三年主要作物种植面积变化趋势">
                 <div class="box-content">
                     <div class="chart-dom">
@@ -63,6 +63,12 @@ import { computed } from "vue";
 import { pieOption } from "./chartOption.js";
 import barChart from "./barChart.vue";
 
+const props = defineProps({
+    activeBaseTab: {
+        type: String,
+        default: "作物分布",
+    },
+});
 // 计算图例数据
 const legendData = computed(() => {
     const total = 3774; // 总种植面积

src/views/warningHome/index.vue

@@ -74,7 +74,7 @@
                 </el-tree>
             </div>
             <div v-if="!showDetail" class="warning-r right chart-wrap yes-events">
-                <chart-list></chart-list>
+                <chart-list :activeBaseTab="activeBaseTab"></chart-list>
                 <!-- <farmInfoGroup></farmInfoGroup> -->
             </div>
             <div v-else class="warning-r right yes-events">
@@ -144,7 +144,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, watch } from "vue";
+import { onMounted, onUnmounted, ref, reactive } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
@@ -221,20 +221,7 @@ const treeActionData = ref([
         imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E6%8C%82%E7%BB%BF.png",
         imgName: sd,
         wktArr: ["POINT(112.70843577567298 22.969169477864167)", "POINT(112.23636397199755 22.85839626464389)", "POINT(112.35889247053002 23.008153324438585)", "POINT(112.47894566011911 22.9017143340381)"],
-        // children: [
-        //   {
-        //     id: 10,
-        //     label: '拔节期',
-        //   },
-        //   {
-        //     id: 11,
-        //     label: '孕穗期',
-        //   },
-        //   {
-        //     id: 12,
-        //     label: '抽穗期',
-        //   },
-        // ],
+        
       },
       {
         id: 6,
@@ -272,6 +259,22 @@ const treeActionData = ref([
   },
 ]);
 
+// 物候期分布下，“水稻”节点的阶段子节点配置
+const phenologyChildren = [
+    {
+        id: 10,
+        label: "拔节期",
+    },
+    {
+        id: 11,
+        label: "孕穗期",
+    },
+    {
+        id: 12,
+        label: "抽穗期",
+    },
+];
+
 // 树的默认展开与默认选中（展开/选中第一个“果类”及其子节点）
 const defaultExpandedKeys = ref([treeActionData.value[0]?.id]);
 const defaultCheckedKeys = ref([
@@ -338,20 +341,6 @@ onMounted(() => {
     eventBus.on("chat:showMapLayer", handleMapLayer);
 });
 
-// 监听顶部基础 tab：
-// - 进入“预警分布”时，让预警列表默认选中第一个因子并联动地图
-// - 离开“预警分布”时，强制关闭地图上的预警图层并清空选中
-watch(activeBaseTab, (val) => {
-    if (val === "预警分布") {
-        // 通知预警列表组件默认选中第一个（因子）项
-        eventBus.emit("warningHome:activeFirstAlarmFactor");
-    } else {
-        legendImg.value = "";
-        staticMapLayers && staticMapLayers.hideAll();
-        // 通知预警列表组件清空默认选中项
-        eventBus.emit("warningHome:clearAlarm");
-    }
-});
 sessionStorage.removeItem("farmId");
 
 onUnmounted(() => {
@@ -409,29 +398,49 @@ const handleTabClick = (item) => {
     if (distributionLayer) {
         distributionLayer.clear();
     }
-
-    if (item === "农场分布") {
-        const data = [
-            {
-                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)"],
-            },
-        ]
-        distributionLayer.initData(data, true);
+    // 所有操作前，先清空图层和选中项
+    treeActionData.value[1].children[0] = {...treeActionData.value[1].children[0], children: [] };
+    legendImg.value = "";
+    staticMapLayers && staticMapLayers.hideAll();
+    // 通知预警列表组件清空默认选中项
+    eventBus.emit("warningHome:clearAlarm");
+
+    switch (item) {
+        case "作物分布":
+            handleDistributionLayer()
+            break;
+        case "物候期分布":
+            treeActionData.value[1].children[0] = {...treeActionData.value[1].children[0], children: phenologyChildren };
+            break;
+        case "预警分布":
+            // 通知预警列表组件默认选中第一个（因子）项
+            eventBus.emit("warningHome:activeFirstAlarmFactor");
+            break;
+        case "农场分布":
+            const data = [
+                {
+                    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)"],
+                },
+            ]
+            distributionLayer.initData(data, true);
+            break;
+        default:
+            break;
     }
 };