Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map

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]})

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";
@@ -285,8 +285,6 @@ onMounted(() => {
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
-    // 添加 10 个测试点位（从 warningMap 中调用）
-    warningMap.addTestPointsAroundCenter();
     // setTimeout(() => {
     //   staticMapLayers.show("testpng")
     // },2000)
@@ -298,9 +296,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 = "";
@@ -312,9 +320,9 @@ onMounted(() => {
                 text = "从化地块水分";
             }
             if (text !== "") {
-                staticMapLayers.showSingle(text, true);
+                staticMapLayers && staticMapLayers.showSingle(text, true);
             } else {
-                staticMapLayers.hideAll();
+                staticMapLayers && staticMapLayers.hideAll();
             }
         }
     });
@@ -323,6 +331,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(() => {

src/views/warningHome/map/distributionLayer.js

@@ -15,7 +15,7 @@ class DistributionLayer {
         this.distributionLayer = new KMap.VectorLayer("distributionLayer", 99, {
             source: new VectorSource({}),
             style: function (f) {
-                let style2 = vectorStyle.getPolygonStyle(f.get("color") + "30", f.get("fillColor"), 2)
+                let style2 = vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("color"), 2)
                 return [style2]
             }
         });

src/views/warningHome/warningMap.js

@@ -1,17 +1,10 @@
-import config from "@/api/config.js";
 import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
-import Point from "ol/geom/Point.js";
-import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector.js";
-import WKT from "ol/format/WKT.js";
 import ScaleLine from "ol/control/ScaleLine";
-import { useRouter } from "vue-router";
 import Overlay from "ol/Overlay";
 import eventBus from "@/api/eventBus";
 import Style from "ol/style/Style";
-import Icon from "ol/style/Icon";
-import { newPoint } from "@/utils/map.js";
 /**
  * @description 地图层对象
  */
@@ -21,7 +14,6 @@ class HomeMap {
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
     that.address = "";
-    this.testPointLayer = null;
   }
 
   initMap(location, target) {
@@ -36,48 +28,6 @@ class HomeMap {
     this.kmap.addControl(scaleLine);
   }
 
-  /**
-   * 在当前地图中心生成并展示 10 个测试点位
-   */
-  addTestPointsAroundCenter() {
-    if (!this.kmap || !this.kmap.map) return;
-    const center = this.kmap.map.getView().getCenter();
-    if (!center || center.length < 2) return;
-    const [lon, lat] = center;
-
-    // 首次创建测试点图层
-    if (!this.testPointLayer) {
-      const vecLayer = new KMap.VectorLayer("testPointLayer", 1200, {
-        visible: true,
-        style: () =>
-          new Style({
-            image: new Icon({
-              src: "/src/assets/images/warningHome/chat/fly-point.png",
-              scale: 0.6,
-            }),
-          }),
-      });
-      this.kmap.addLayer(vecLayer.layer);
-      this.testPointLayer = vecLayer;
-    }
-
-    // 以当前中心为基准生成 10 个随机偏移点位（小范围散点）
-    const points = [];
-    for (let i = 0; i < 10; i++) {
-      const dx = (Math.random() - 0.5) * 0.2;
-      const dy = (Math.random() - 0.5) * 0.2;
-      points.push({
-        id: `test-${i + 1}`,
-        wkt: `POINT(${lon + dx} ${lat + dy})`,
-      });
-    }
-
-    points.forEach((item) => {
-      const feature = newPoint(item);
-      this.testPointLayer.addFeature(feature);
-    });
-  }
-
   addMapListen() {
     let that = this
     // 监听地图点击事件