Browse Source

fix: 时间轴联动地图

lxf 5 days ago
parent
commit
9e34e67917

+ 4 - 4
src/components/static_map_change/Layers.js

@@ -57,10 +57,10 @@ class StaticMapLayers {
                 that.initStaticMapLayer(map,data)
                 // that.autoTest()
                 // 时间轴
-                eventBus.on("weatherTime:changeTime", ({index}) => {
-                    this.timeIndex = index
-                    this.show(this.layerName)
-                })
+                // eventBus.on("weatherTime:changeTime", ({index}) => {
+                //     this.timeIndex = index
+                //     this.show(this.layerName)
+                // })
             })
         }
     }

+ 14 - 4
src/views/warningHome/components/timeLine.vue

@@ -11,7 +11,7 @@
             <div class="active-line" :style="{ width: numList[active] + '%' }"></div>
             <div :class="['dot-item', { mr: index === list.length - 1 }]" v-for="(item, index) in list" :key="index">
                 <div :class="['dot', { active: active === index }]"></div>
-                <span :class="{ text: active === index }">{{ item }}</span>
+                <span :class="{ text: active === index }">{{ item.date }}</span>
             </div>
         </div>
     </div>
@@ -20,6 +20,7 @@
 <script setup>
 import { ref, onDeactivated,computed ,watch, onMounted} from "vue";
 import { useStore } from "vuex";
+import eventBus from "@/api/eventBus";
 const store = useStore();
 
 const isShow = ref(true)
@@ -40,12 +41,16 @@ const fetchYearQuarter = () => {
     VE_API.warning.fetchYearQuarter().then(res => {
         if (res.code === 0 && res.data && res.data.length > 0) {
             // 转换接口数据为时间轴显示格式
-            const formattedList = res.data.map((item) => 
-                formatYearQuarter(item.year, item.quarter)
-            );
+            const formattedList = res.data.map((item) => {
+                return {
+                    ...item,
+                    date: formatYearQuarter(item.year, item.quarter)
+                }
+            });
             
             // 更新时间轴列表
             list.value = formattedList;
+            eventBus.emit("weatherTime:changeTime", {index: 0, year: list.value[0].year, quarter: list.value[0].quarter});
             
             // 重置激活状态
             // restActive();
@@ -81,9 +86,11 @@ const incrementCount = (type) => {
     const maxIndex = list.value.length - 1;
     if (active.value >= maxIndex) {
         active.value = 0;
+        eventBus.emit("weatherTime:changeTime", {index: active.value, year: list.value[0].year, quarter: list.value[0].quarter});
     } else {
         if(type!=='original'){
             active.value += 1;
+            eventBus.emit("weatherTime:changeTime", {index: active.value, year: list.value[active.value].year, quarter: list.value[active.value].quarter});
         }
     }
 
@@ -108,6 +115,9 @@ const handleChange = () => {
         incrementCount('original');
     }
     isCounting.value = !isCounting.value;
+    if (isCounting.value) {
+        eventBus.emit("weatherTime:changeTime", {index: 0, year: list.value[0].year, quarter: list.value[0].quarter})
+    }
 };
 
 onDeactivated(() => {

+ 29 - 10
src/views/warningHome/index.vue

@@ -188,9 +188,13 @@ const treeActionData = ref([]);
 // 保存原始数据,用于恢复
 const originalTreeData = ref([]);
 
-// 物候期分布下,当前激活的“二级”节点(只允许一个)
+// 物候期分布下,当前激活的"二级"节点(只允许一个)
 const activePhenologySecondId = ref(null);
 
+// 当前选中的年份和季度
+const currentYear = ref(2025);
+const currentQuarter = ref(1);
+
 // 树的默认展开与默认选中(展开/选中第一个“果类”及其子节点)
 const defaultExpandedKeys = ref();
 const defaultCheckedKeys = ref();
@@ -254,18 +258,31 @@ onMounted(async () => {
     // ai与地图交互
     eventBus.off("chat:showMapLayer", handleMapLayer);
     eventBus.on("chat:showMapLayer", handleMapLayer);
-    
-    // 时间轴
-    eventBus.on("weatherTime:changeTime", ({index}) => {
-        handleTimeChange(index)
-    })
 
     // 初始化区域选择器的默认值
     initAreaDefaultValue();
 });
 
-const handleTimeChange = (index) => {
-    console.log('index', index);
+// 时间轴
+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 === "物候期分布") {
+        // 重新获取当前选中的节点数据
+        if (treeRef.value) {
+            const checkedNodes = treeRef.value.getCheckedNodes(false, true);
+            if (checkedNodes && checkedNodes.length > 0) {
+                getTreeChecks(checkedNodes[0], { checkedNodes });
+            }
+        }
+    }
 }
 
 const getRegionCropAreaYield = async () => {
@@ -308,6 +325,8 @@ sessionStorage.removeItem("farmId");
 
 onUnmounted(() => {
     eventBus.off("alarmList:changeMapLayer");
+    // 时间轴
+    eventBus.off("weatherTime:changeTime");
 });
 
 // 作物分布默认选中并展开第一个节点,在地图上显示对应分布图层
@@ -569,8 +588,8 @@ const getSpeciesListData = async () => {
 
 const getDistributionData = async (speciesId, phenologyIds) => {
     const {data} = await VE_API.agri_land_crop.queryDistribution({
-        year: 2025,
-        quarter: 1,
+        year: currentYear.value,
+        quarter: currentQuarter.value,
         speciesId,
         phenologyIds: phenologyIds || []
     });