Merge branch 'feature-v1.0.0' of http://gitlab.datameta.com/project/water/data-board-2025 into feature-v1.0.0

src/views/Main/Map/components/Legend.vue

@@ -1,57 +1,79 @@
 <template>
   <div class="legend-comp">
-    <div class="row">
-      <img class="icon" src="@/assets/map/reservoir_big.png" alt="" />
-      <span>大型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/reservoir_normal.png" alt="" />
-      <span>中型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/reservoir_small.png" alt="" />
-      <span>小型水库</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/dike_one.png" alt="" />
-      <span>一级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/dike_two_three.png" alt="" />
-      <span>二三级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/dike_four.png" alt="" />
-      <span>四级堤防</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/sluice_big.png" alt="" />
-      <span>大型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/sluice_middle.png" alt="" />
-      <span>中型水闸</span>
-    </div>
-    <div class="row">
-      <img class="icon" src="@/assets/map/sluice_small.png" alt="" />
-      <span>小型水闸</span>
+    <div class="row" v-for="(item, index) in legendList" :key="index">
+      <img class="icon" :src="item.icon" alt="" />
+      <span>{{ item.name }}</span>
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {};
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import RB from "@/assets/map/reservoir_big.png";
+import RN from "@/assets/map/reservoir_normal.png";
+import RS from "@/assets/map/reservoir_small.png";
+import DO from "@/assets/map/dike_one.png";
+import DTT from "@/assets/map/dike_two_three.png";
+import DF from "@/assets/map/dike_four.png";
+import SB from "@/assets/map/sluice_big.png";
+import SM from "@/assets/map/sluice_middle.png";
+import SS from "@/assets/map/sluice_small.png";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+let legendList: any = ref([]);
+const defaultList = [
+  {
+    name: "大型水库",
+    icon: RB,
   },
-  created() {},
-  methods: {},
-};
+  {
+    name: "中型水库",
+    icon: RN,
+  },
+  {
+    name: "小型水库",
+    icon: RS,
+  },
+  {
+    name: "一级堤防",
+    icon: DO,
+  },
+  {
+    name: "二三级堤防",
+    icon: DTT,
+  },
+  {
+    name: "四级堤防",
+    icon: DF,
+  },
+  {
+    name: "大型水闸",
+    icon: SB,
+  },
+  {
+    name: "中型水闸",
+    icon: SM,
+  },
+  {
+    name: "小型水闸",
+    icon: SS,
+  },
+];
+onMounted(() => {
+  legendList.value = props.data?.length ? props.data : defaultList;
+});
 </script>
 <style scoped lang="scss">
 .legend-comp {
+  display: flex;
   width: 100%;
   max-height: 150px;
   overflow-y: auto;
+  flex-direction: column;
+  gap: 12px;
   .row {
     display: flex;
     align-items: center;