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

src/views/warningHome/components/alarmList.vue

@@ -110,6 +110,10 @@ const toggleAlarm = (item, type) => {
         .alarm-tag {
             position: relative;
             left: -8px;
+            img{
+                width: 94px;
+                height: 32px;
+            }
         }
         .alarm-item-wrap {
             padding: 0 12px;

src/views/warningHome/components/mapLegend.vue

@@ -1,33 +1,48 @@
 <template>
     <div class="map-legend">
-        <div
-            v-for="item in legendList"
-            :key="item.label"
-            class="legend-item"
-        >
-            <span class="legend-dot" :style="{ backgroundColor: item.color }"></span>
+        <div v-for="item in legendObj[type]" :key="item.label" class="legend-item">
+            <span class="legend-dot" v-if="item.color" :style="{ backgroundColor: item.color }"></span>
+            <img class="legend-icon" v-else :src="item.icon" alt="">
             <span class="legend-label">{{ item.label }}</span>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
+import legendIcon1 from "@/assets/images/common/legend-icon-1.png";
+import legendIcon2 from "@/assets/images/common/legend-icon-2.png";
 
-const legendImg = ref('');
+const props = defineProps({
+    type: {
+        type: String,
+        default: "作物分布",
+    },
+});
 
-const legendList = ref([
-    { label: '抽穗期', color: '#E17C00' },
-    { label: '拔节期', color: '#985300' },
-    { label: '孕穗期', color: '#512D00' }
-]);
+const legendObj = {
+    "物候期分布": [
+        { label: "抽穗期", color: "#E17C00" },
+        { label: "拔节期", color: "#985300" },
+        { label: "孕穗期", color: "#512D00" },
+    ],
+    "预警分布": [
+        { label: "干旱等级Ⅰ级", color: "#BD231E" },
+        { label: "干旱等级Ⅰ级", color: "#FF6600" },
+        { label: "干旱等级Ⅰ级", color: "#FFCD00" },
+    ],
+    "农场分布": [
+        { label: "冷链冷库", icon: legendIcon1 },
+        { label: "加工厂", icon: legendIcon2 },
+    ],
+}
 </script>
 
 <style lang="scss" scoped>
 .map-legend {
     position: fixed;
     bottom: 18px;
-    right: 460px;
+    right: 440px;
     padding: 6px 20px;
     display: flex;
     align-items: center;
@@ -46,8 +61,10 @@ const legendList = ref([
             border-radius: 50%;
             background: #f2a038; // 默认颜色，实际由内联样式覆盖
         }
+        .legend-icon{
+            width: 20px;
+            height: 20px;
+        }
     }
 }
-
-
-</style>
+</style>

src/views/warningHome/index.vue

@@ -71,7 +71,8 @@
                 <farmInfoGroup></farmInfoGroup>
             </div>
             <!-- 地图图例 -->
-            <map-legend></map-legend>
+            <map-legend :type="activeBaseTab"></map-legend>
+            <!-- 地图搜索 -->
             <div class="warning-search yes-events">
                 <el-select
                     v-model="locationVal"