foster-pc-vue/src/views/warningHome/components/alarmList.vue

<template>
    <div class="alarm-wrap">
        <div class="alarm-t">
            <div class="alarm-tag">
                <img src="@/assets/images/warningHome/alarm-bg.png" />
            </div>
            <div class="alarm-item-wrap">
                <div class="item-wrap">
                    <div
                        class="alarm-item"
                        v-for="(item, index) in alarmList"
                        :key="index"
                        @click="toggleAlarm(item, index)"
                        :class="{ active: activeAlarm === item.id }"
                    >
                        {{ item.name }}
                        <div class="active-arrow" v-if="activeAlarm === item.id">
                            <img src="@/assets/images/warningHome/alarm-active-arrow.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alarm-t alarm-b">
            <div class="alarm-tag">
                <img src="@/assets/images/warningHome/alarm-bg2.png" />
            </div>
            <div class="alarm-item-wrap">
                <div class="item-wrap">
                    <div
                        class="alarm-item"
                        v-for="(item, index) in alarmFactorList"
                        :key="index"
                        @click="toggleAlarm(item, index)"
                        :class="{ active: activeAlarm === item.id }"
                    >
                        {{ item.name }}
                        <div class="active-arrow" v-if="activeAlarm === item.id">
                            <img src="@/assets/images/warningHome/alarm-active-arrow.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { onMounted, ref } from "vue";

const alarmList = ref([
    { name: "低温冻害", id: 1 },
    { name: "干旱缺水", id: 2 },
    { name: "冲梢风险", id: 3 },
    { name: "病虫风险", id: 4 },
]);
const alarmFactorList = ref([
    { name: "温度因子", id: 21 },
    { name: "土壤水分", id: 22 },
    { name: "阴坡阳坡", id: 23 },
]);

const mapLayerList = ref({})
onMounted(() => {
    VE_API.warning.fetchWarningLayer({
        k: "risk_map",
        resultType: "json",
    }).then(({data}) => {
        mapLayerList.value = data
        eventBus.emit("alarmList:warningLayers", data)
    })
});

const activeAlarm = ref(1);
const toggleAlarm = (item, index) => {
    activeAlarm.value = item.id;
    eventBus.emit("alarmList:changeMapLayer", mapLayerList.value[item.name])
};
</script>

<style lang="scss" scoped>
.alarm-wrap {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #9f9f9f;
    border-radius: 8px;
    width: 87px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .alarm-t {
        width: 100%;
        padding-top: 18px;
        .alarm-tag {
            position: relative;
            left: -8px;
        }
        .alarm-item-wrap {
            padding: 0 12px;
            .item-wrap {
                padding: 12px 0 24px 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                .alarm-item {
                    cursor: pointer;
                    background: #232323;
                    width: 62px;
                    padding: 7px 10px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    font-family: "PangMenZhengDao";
                    border-radius: 4px;
                    &.active {
                        margin-bottom: 34px;
                        position: relative;
                        color: #ffd489;
                        background: url("@/assets/images/warningHome/alarm-active.png") no-repeat center center / cover;
                    }
                    .active-arrow {
                        position: absolute;
                        bottom: -30px;
                    }
                    &:last-child {
                        &.active {
                            margin-bottom: 14px;
                        }
                    }
                }
                .alarm-item + .alarm-item {
                    margin-top: 8px;
                }
            }
        }
    }
}
</style>