foster-pc-vue/src/views/warningHome/index.vue

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <div class="content">
            <div class="warning-l left">
                <div class="warning-top">
                    <div class="top-l yes-events">
                        <div>
                            <el-cascader
                                style="width: 184px"
                                :show-all-levels="false"
                                v-model="areaVal"
                                :props="props1"
                                :options="areaListOptions"
                                @change="toggleArea"
                                popper-class="area-cascader"
                            />
                            <!-- <el-select
                                v-model="areaVal"
                                placeholder=""
                                style="width: 184px"
                                popper-class="area-select"
                                @change="toggleArea"
                                >
                                <el-option label="广东省" :value="3" />
                                <el-option label="广东省-从化" :value="3186" />
                            </el-select> -->
                        </div>
                        <div class="type-box"><img src="@/assets/images/warningHome/lz.png" /></div>
                    </div>
                    <div class="top-r yes-events">
                        <div class="data-box" @click="toggleBox('面积')" :class="{ active: activeBoxName === '面积' }">
                            <div class="data-value"><span>{{areaVal.includes('3186') ? 31.2 : 419.89}}</span>万亩</div>
                            <div class="data-name">种植面积</div>
                        </div>
                        <div
                            class="data-box"
                            v-if="areaVal.includes('3186')"
                            @click="toggleBox('从化荔枝')"
                            :class="{ active: activeBoxName === '从化荔枝' }"
                        >
                            <div class="data-value"><span>11.9</span>万亩</div>
                            <div class="data-name">疑似失管面积</div>
                        </div>
                        <div class="data-box" @click="toggleBox('产量')" :class="{ active: activeBoxName === '产量' }">
                            <div class="data-value"><span>{{areaVal.includes('3186') ? 10.4 : 192.12}}</span>万吨</div>
                            <div class="data-name">预估产量</div>
                        </div>
                    </div>
                </div>
                <div class="warning-alarm yes-events">
                    <alarm-list></alarm-list>
                </div>
                <div class="time-wrap yes-events">
                    <time-line></time-line>
                </div>
            </div>
            <div class="warning-r right yes-events">
                <album></album>

                <!-- 地图图例 -->
                <div class="map-legend" v-if="legendImg">
                    <img :src="legendImg" />
                </div>
            </div>
            <div class="warning-search yes-events">
                <img src="@/assets/images/warningHome/search-img.png" />
                <!-- <div class="focus-farm">
                    <el-select
                        v-model="farmVal"
                        placeholder="我的关注农场"
                        style="width: 189px"
                        popper-class="focus-farm-select"
                        @change="toggleFarm"
                    >
                        <el-option label="荔博园" :value="1" />
                        <el-option label="井冈红糯基地" :value="2" />
                    </el-select>
                </div> -->
            </div>
        </div>
    </div>
    <div ref="mapRef" class="bottom-map"></div>
    <div id="popup" class="ol-popup-warning">
        <div class="warning-info-title">
            <div class="icon">
                <img src="@/assets/images/common/chart-icon.png" />
            </div>
            <div id="popup-title"></div>
            <div class="close" @click="destroyPopup">
                <img src="@/assets/images/warningHome/close-btn.png" />
            </div>
        </div>
        <div id="popup-content" class="info-content"></div>
    </div>
</template>

<script setup>
import "./map/mockFarmLayer";
import { onMounted, ref } from "vue";
import fnHeader from "@/components/fnHeader.vue";
import WarningMap from "./warningMap";
import AlarmLayer from "./map/alarmLayer";
import album from "./components/album.vue";
import alarmList from "./components/alarmList.vue";
import timeLine from "./components/timeLine.vue";
import { useRouter } from "vue-router";
import eventBus from "@/api/eventBus";
import { areaListOptions } from "./area";
import { useStore } from "vuex";
let store = useStore();

let warningMap = new WarningMap();
let alarmLayer = null;
const router = useRouter();

const areaVal = ref(["3"]);
const mapRef = ref();

const legendImg = ref("");
const warningLayers = ref({})
onMounted(() => {
    warningMap.initMap(store.getters.userinfo.location, mapRef.value);
    alarmLayer = new AlarmLayer(warningMap.kmap);

    // 图例数据
    eventBus.on("alarmList:warningLayers", (data) => {
        warningLayers.value = data
    });

    eventBus.on("alarmList:changeMapLayer", ({name}) => {
        legendImg.value = warningLayers.value[`${name}图例`];
    });
});

const destroyPopup = () => {
    eventBus.emit("map:destroyPopup");
};

const props1 = {
    checkStrictly: true,
};

const toggleArea = (v) => {
    activeBoxName.value = null;
    const val = v[v.length - 1];
    if (val === "3" || val === "3186") {
        eventBus.emit("warningHome:toggleArea", val);
    }
};

const activeBoxName = ref(null);
const toggleBox = (name) => {
    activeBoxName.value = name;
    legendImg.value = warningLayers.value[`${name}图例`];
    eventBus.emit("warningHome:toggleMapLayer", name);
};
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100vh;
    color: #fff;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;

    ::v-deep {
        .focus-farm {
            top: 42px;
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 74px - 48px);
        padding: 0 20px 0 27px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        position: relative;
        .left,
        .right {
            width: calc(376px + 54px);
            height: 100%;
            padding-top: 10px;
            box-sizing: border-box;
            // display: flex;
        }
        .right {
            width: 395px;
            position: relative;
            .list {
                width: 100%;
                height: 100%;
            }
        }
        .warning-r {
            .map-legend {
                position: absolute;
                bottom: -33px;
                left: -455px;
                width: 340px;
                img {
                    width: 340px;
                    opacity: 0.6;
                }
            }
        }
        .warning-search {
            position: absolute;
            right: 400px;
            top: -34px;
            display: flex;
            align-items: center;
            .focus-farm {
                padding-left: 15px;
            }
            ::v-deep {
                .el-select__wrapper {
                    background: rgba(255, 212, 137, 0.2);
                    box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
                    height: 50px;
                    line-height: 50px;
                    .el-select__caret {
                        color: #ffd489;
                    }
                }
                .el-select__placeholder {
                    color: #f7be5a;
                    font-size: 20px;
                    font-family: "PangMenZhengDao";
                    text-align: center;
                }
            }
        }
        .warning-top {
            display: flex;
            .top-l {
                display: flex;
                flex-direction: column;
                align-items: center;
                .type-box {
                    margin-top: 10px;
                    background: rgba(29, 29, 29, 0.54);
                    border: 1px solid rgba(255, 212, 137, 0.3);
                    border-radius: 2px;
                    text-align: center;
                    line-height: 48px;
                    height: 48px;
                    width: 184px;
                }

                ::v-deep {
                    .el-input__wrapper {
                        background: rgba(29, 29, 29, 0.54);
                        box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
                        height: 50px;
                        line-height: 50px;
                        padding: 0 10px;
                        .el-input__inner {
                            color: #f7be5a;
                            font-size: 20px;
                            font-family: "PangMenZhengDao";
                            text-align: center;
                        }
                    }
                    .el-select__wrapper {
                        background: rgba(29, 29, 29, 0.54);
                        box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
                        height: 50px;
                        line-height: 50px;
                        .el-select__caret {
                            color: #ffd489;
                        }
                    }
                    .el-select__placeholder {
                        color: #f7be5a;
                        font-size: 20px;
                        font-family: "PangMenZhengDao";
                        text-align: center;
                    }
                }
            }
            .top-r {
                display: flex;
                .data-box {
                    cursor: pointer;
                    margin-left: 20px;
                    width: 200px;
                    height: 104px;
                    background: url("@/assets/images/warningHome/box-bg.png") no-repeat center center / 100% 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    &.active {
                        position: relative;
                        &::before {
                            content: "";
                            position: absolute;
                            bottom: -26px;
                            left: 0;
                            right: 0;
                            width: 35px;
                            height: 17px;
                            margin: 0 auto;
                            background: url("@/assets/images/warningHome/triangle.png") no-repeat center center / cover;
                        }
                    }
                    .data-value {
                        padding-top: 15px;
                        font-size: 20px;
                        color: rgba(255, 212, 137, 0.4);
                        font-family: "PangMenZhengDao";
                        span {
                            font-size: 38px;
                            color: #f7be5a;
                            padding-right: 2px;
                        }
                    }
                    .data-name {
                        color: #cecece;
                        font-size: 16px;
                    }
                }
            }
        }
        .warning-alarm {
            width: 88px;
            padding-top: 14px;
        }
        .time-wrap {
            position: absolute;
            bottom: -20px;
            left: 140px;
            width: 46vw;
            min-width: 700px;
            height: 71px;
        }
    }
}
.bottom-map {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
}
</style>

<style lang="less">
.ol-scale-line {
    left: auto;
    right: 430px;
    bottom: 38px;
    .ol-scale-line-inner {
        max-width: 80px;
        width: 80px !important;
        color: #fff;
        border-color: #fff;
    }
}
.focus-farm-select {
    &.el-popper.is-light {
        background: #232323;
        border-color: rgba(255, 212, 137, 0.3);
        box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
        .el-select-dropdown__item {
            background: none;
            color: rgba(255, 212, 137, 0.6);
        }
        .el-select-dropdown__item.is-selected {
            background: rgba(255, 212, 137, 0.2);
            color: #ffd489;
        }
    }
    &.el-popper.is-light .el-popper__arrow:before {
        background: #232323;
        border-color: rgba(255, 212, 137, 0.3);
    }
}
.ol-popup-warning {
    position: relative;
    width: 295px;
    background: rgb(35, 35, 35, 0.86);
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    .warning-info-title {
        display: flex;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.05);
        font-size: 18px;
        border-radius: 4px 4px 0 0;
        .icon {
            padding-right: 6px;
        }
        .close {
            position: absolute;
            right: 12px;
            top: 4px;
        }
    }
    .info-content {
        padding: 16px 20px 40px 20px;
        line-height: 26px;
        text-indent: 2em;
    }
}
.area-cascader {
    &.el-popper.is-light {
        background: #232323;
        border-color: rgba(255, 212, 137, 0.3);
        box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
        .el-cascader-menu {
            color: rgba(255, 212, 137, 0.6);
            border-color: rgba(255, 212, 137, 0.3);
        }
        .el-cascader-node.in-active-path,
        .el-cascader-node.is-active,
        .el-cascader-node.is-selectable.in-checked-path {
            color: #f7be5a;
            background: transparent;
        }
        .el-radio__input.is-checked .el-radio__inner {
            background: #f7be5a;
            border-color: #f7be5a;
        }
        .el-cascader-node:not(.is-disabled):hover,
        .el-cascader-node:not(.is-disabled):focus,
        .el-cascader-node:not(.is-disabled):hover {
            background: rgba(255, 212, 137, 0.2);
        }
    }
    .el-radio__inner {
        background-color: rgba(255, 212, 137, 0.3);
        border-color: rgba(255, 212, 137, 0.6);
    }
    &.el-popper.is-light .el-popper__arrow:before {
        background: #232323;
        border-color: rgba(255, 212, 137, 0.3);
    }
}
</style>