agriculture-one-map/src/views/warningHome/components/mapLegend.vue

<template>
    <div class="map-legend-container">
        <div class="map-legend">
            <div v-for="(item, index) in legendArr" :key="`${type}-${item.name}-${index}`" 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.name }}</span>
            </div>
        </div>
        <div class="map-legend">
            <div v-for="(item, index) in legendArr2" :key="`${type}-${item.name}-${index}`" 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.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import legendIcon1 from "@/assets/images/common/legend-icon-1.png";
import legendIcon2 from "@/assets/images/common/legend-icon-2.png";
import legendIcon3 from "@/assets/images/common/legend-icon-3.png";
import { ref, onMounted } from "vue";

const props = defineProps({
    type: {
        type: String,
        default: "作物分布",
    },
});

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 },
    ],
    农服管理: [{ label: "冷链仓库", icon: legendIcon3 }],
};

const legendArr = ref([]);
const legendArr2 = ref([]);
onMounted(() => {
    fetchMapLegend();
    fetchLandTypes();
});

const fetchMapLegend = () => {
    VE_API.warning.fetchMapLegend().then((res) => {
        if (res.code === 0 && res.data && res.data.length > 0) {
            legendArr.value = res.data;
        }
    });
};

const fetchLandTypes = () => {
    VE_API.warning.fetchLandTypes().then((res) => {
        if (res.code === 0 && res.data && res.data.length > 0) {
            legendArr2.value = res.data;
        }
    });
};
</script>

<style lang="scss" scoped>
.map-legend-container {
    display: flex;
    gap: 10px;
    position: fixed;
    bottom: 40px;
    right: 430px;
}
.map-legend {
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    z-index: 9;
    color: #ffffff;
    font-size: 16px;
    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        .legend-dot {
            width: 15px;
            height: 15px;
            // border-radius: 50%;
            background: #f2a038; // 默认颜色，实际由内联样式覆盖
        }
        .legend-icon {
            width: 20px;
            height: 20px;
        }
    }
}
</style>