浏览代码

fix:修改地图默认显示样式

wangsisi 1 周之前
父节点
当前提交
2943b0fd97
共有 2 个文件被更改,包括 48 次插入14 次删除
  1. 20 11
      src/views/warningHome/components/alarmList.vue
  2. 28 3
      src/views/warningHome/index.vue

+ 20 - 11
src/views/warningHome/components/alarmList.vue

@@ -64,24 +64,33 @@ const alarmFactorList = ref([
     { name: "土壤水分", id: 23 },
 ]);
 
-const mapLayerList = ref({})
+const mapLayerList = ref({});
 onMounted(() => {
     VE_API.warning.fetchWarningLayer({
         k: "risk_map",
         resultType: "json",
-    }).then(({data}) => {
-        mapLayerList.value = data
-        eventBus.emit("alarmList:warningLayers", data)
-        setTimeout(() => {
-            toggleAlarm(alarmList.value[0], 1)
-        }, 500)
-    })
+    }).then(({ data }) => {
+        mapLayerList.value = data;
+        eventBus.emit("alarmList:warningLayers", data);
+        // 页面刚进入时不主动触发任何预警图层,等待用户点击
+    });
     eventBus.on("warningHome:toggleArea", (id) => {
-        activeAlarm.value = null
-    })
+        activeAlarm.value = null;
+    });
+    // 用户从“预警分布”tab 切走时,清空当前选中项
+    eventBus.on("warningHome:clearAlarm", () => {
+        activeAlarm.value = null;
+    });
+    // 切换到“预警分布”tab 时,默认选中预警列表的第一个(阴雨沤花),并联动地图
+    eventBus.on("warningHome:activeFirstAlarmFactor", () => {
+        if (alarmList.value && alarmList.value.length) {
+            toggleAlarm(alarmList.value[0], 1);
+        }
+    });
 });
 
-const activeAlarm = ref(1);
+// 初始不选中任何预警项,避免一进页面就显示预警地图
+const activeAlarm = ref(null);
 const toggleAlarm = (item, type) => {
     activeAlarm.value = item.id;
     // eventBus.emit("alarmList:changeMapLayer", {name: item.name, url: mapLayerList.value[item.name]})

+ 28 - 3
src/views/warningHome/index.vue

@@ -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 } from "vue";
+import { onMounted, onUnmounted, ref, reactive, watch } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
@@ -260,9 +260,19 @@ onMounted(() => {
         warningLayers.value = data;
     });
 
+    // 预警分布图层联动:仅在“预警分布”tab 显示时,才在地图上显示对应图层
     eventBus.on("alarmList:changeMapLayer", ({ name, legendUrl }) => {
+        // 47 行:只在 activeBaseTab === '预警分布' 时显示预警列表
+        // 这里保持一致:只有在该 tab 下才显示地图图层,否则直接隐藏
+        if (activeBaseTab.value !== "预警分布") {
+            staticMapLayers && staticMapLayers.hideAll();
+            legendImg.value = "";
+            return;
+        }
+
         if (legendUrl) {
             legendImg.value = legendUrl;
+            staticMapLayers && staticMapLayers.showSingle(name, true);
         } else {
             legendImg.value = warningLayers.value[`${name}图例`];
             let text = "";
@@ -274,9 +284,9 @@ onMounted(() => {
                 text = "从化地块水分";
             }
             if (text !== "") {
-                staticMapLayers.showSingle(text, true);
+                staticMapLayers && staticMapLayers.showSingle(text, true);
             } else {
-                staticMapLayers.hideAll();
+                staticMapLayers && staticMapLayers.hideAll();
             }
         }
     });
@@ -285,6 +295,21 @@ onMounted(() => {
     eventBus.off("chat:showMapLayer", handleMapLayer);
     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(() => {