agriculture-one-map/src/views/warningHome/index.vue

-+
<template>
    <div class="base-container no-events">
        <fnHeader showDate :autoGo="true" hideSwitch></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"
                            />
                        </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" v-show="activeBaseTab === '预警分布'">
                    <alarm-list></alarm-list>
                </div>
                <div class="time-wrap yes-events">
                    <time-line></time-line>
                </div>
            </div>
            <!-- <div class="action-legend">1</div> -->
            <div v-if="showDetail" class="warning-r right chart-wrap yes-events">
                <chart-list></chart-list>
                <!-- <farmInfoGroup></farmInfoGroup> -->
            </div>
            <div v-else class="warning-r right yes-events">
                <farmInfoGroup></farmInfoGroup>
            </div>
            <!-- 地图图例 -->
            <map-legend></map-legend>
            <div class="warning-search yes-events">
                <el-select
                    v-model="locationVal"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="搜索地区"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="handleSearchRes"
                    class="v-select"
                    popper-class="focus-farm-select"
                    style="width: 375px"
                >
                    <template #prefix>
                        <el-icon class="el-input__icon"><search /></el-icon>
                    </template>
                    <el-option
                        v-for="(item, index) in locationOptions.list"
                        :key="index"
                        :label="item.title"
                        :value="item.point"
                    >
                        <span>{{ item.title }}</span>
                        <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
                    </el-option>
                </el-select>
            </div>
            <div class="base-tabs yes-events">
                <div
                    v-for="item in baseTabs"
                    :key="item"
                    class="tab-item"
                    :class="{ active: item === activeBaseTab }"
                    @click="activeBaseTab = item"
                >
                    {{ item }}
                </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>
    <track-dialog></track-dialog>
</template>

<script setup>
import "./map/mockFarmLayer";
import StaticMapLayers from "@/components/static_map_change/Layers.js";
import StaticMapPointLayers from "@/components/static_map_change/pointLayer.js";
import { onMounted, onUnmounted, ref, reactive } from "vue";
import fnHeader from "@/components/fnHeader.vue";
import WarningMap from "./warningMap";
import AlarmLayer from "./map/alarmLayer";
import trackDialog from "./components/trackDialog.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";
import farmInfoGroup from "./components/farmInfoGroup.vue";
import mapLegend from "./components/mapLegend.vue";
import chartList from "./components/chart_components/chartList.vue";

let store = useStore();

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

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

// 顶部基础 tabs
const baseTabs = ["作物分布", "物候期分布", "预警分布", "农场分布", "农服管理"];
const activeBaseTab = ref("作物分布");

const legendImg = ref("");
const warningLayers = ref({});
onMounted(() => {
    warningMap.initMap(store.getters.userinfo.location, mapRef.value);
    alarmLayer = new AlarmLayer(warningMap.kmap);
    staticMapLayers = new StaticMapLayers(warningMap.kmap);
    staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
    // setTimeout(() => {
    //   staticMapLayers.show("testpng")
    // },2000)

    eventBus.emit("warningMap:init", warningMap.kmap);

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

    eventBus.on("alarmList:changeMapLayer", ({ name, legendUrl }) => {
        if (legendUrl) {
            legendImg.value = legendUrl;
        } else {
            legendImg.value = warningLayers.value[`${name}图例`];
            let text = "";
            if (name === "日间温度") {
                text = "从化地块日温";
            } else if (name === "夜间温度") {
                text = "从化地块夜温";
            } else if (name === "土壤水分") {
                text = "从化地块水分";
            }
            if (text !== "") {
                staticMapLayers.showSingle(text, true);
            } else {
                staticMapLayers.hideAll();
            }
        }
    });

    // ai与地图交互
    eventBus.off("chat:showMapLayer", handleMapLayer);
    eventBus.on("chat:showMapLayer", handleMapLayer);
});
sessionStorage.removeItem("farmId");

onUnmounted(() => {
    eventBus.off("alarmList:changeMapLayer");
});

// ai与地图交互
const hideChatMapLayer = ref(true);
const handleMapLayer = ({ mapName, isHome }) => {
    if (!isHome) {
        hideChatMapLayer.value = false;
    }
    staticMapPointLayers.hidePoint();
    staticMapLayers.hideAll();

    // 重置时间轴
    // eventBus.emit("map_click_alarm")
    if (mapName === "植保机") {
        staticMapLayers.show("分散种植", true);
        staticMapPointLayers.showPoint();
    } else if (mapName) {
        // staticMapLayers.show("作物种类")
        if (isHome) {
            staticMapLayers.show(mapName, true);
        } else {
            staticMapLayers.showSingle(mapName, true);
        }
    }
};

const toggleChatMapLayer = () => {
    hideChatMapLayer.value = true;
    eventBus.emit("chat:hideMapLayer");
    staticMapLayers.hideAll();
};

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);
};

// 搜索
const locationVal = ref("");
const loading = ref(false);
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const handleSearchRes = (v) => {
    warningMap.setMapCenter(v);
    // onRest();
};

const locationOptions = reactive({
    list: [],
});
const remoteMethod = async (keyword) => {
    if (keyword) {
        locationOptions.list = [];
        loading.value = true;
        const params = {
            key: MAP_KEY,
            keyword,
            //   location: location.value,
            location: "22.574540836684672,113.1093017627431",
        };
        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
            if (data && data.length) {
                data.forEach((item) => {
                    item.point = item.location.lat + "," + item.location.lng;
                    locationOptions.list.push(item);
                });
            }
        });
        VE_API.old_mini_map.search(params).then(({ data }) => {
            loading.value = false;
            data.forEach((item) => {
                item.point = item.location.lat + "," + item.location.lng;
                locationOptions.list.push(item);
            });
        });
    } else {
        locationOptions.list = [];
    }
};
</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: 16px 20px 0 27px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        position: relative;
        .left,
        .right {
            width: calc(376px + 54px);
            height: 100%;
            box-sizing: border-box;
            // display: flex;
        }
        .right {
            // width: 395px;
            width: 376px;
            overflow: auto;
            position: relative;
            .list {
                width: 100%;
                height: 100%;
            }
        }
        .chart-wrap {
            padding: 8px;
            background: #101010;
            border: 1px solid #444444;
        }
        .warning-r {
            .map-legend {
                position: absolute;
                bottom: -33px;
                left: -360px;
                width: 340px;
                img {
                    width: 340px;
                    opacity: 0.6;
                }
            }
            .chat-legend {
                bottom: -12px;
            }
        }
        .base-tabs {
            position: fixed;
            top: 32px;
            left: 390px;
            display: flex;
            align-items: center;
            .tab-item {
                padding: 7px 12px 9px;
                margin-right: 28px;
                text-align: center;
                font-family: "PangMenZhengDao";
                font-size: 16px;
                color: #fff;
                background: rgba(28, 36, 41, 0.8);
                border-radius: 4px;
                cursor: pointer;
                border: 1px solid transparent;
                &.active {
                    color: #ffdf9a;
                    background: rgba(19, 22, 16, 0.8);
                    border: 1px solid #ffd489;
                }
            }
        }
        .warning-search {
            position: fixed;
            right: 207px;
            top: 28px;
            display: flex;
            align-items: center;
            .focus-farm {
                padding-left: 15px;
            }
            ::v-deep {
                .el-select__wrapper {
                    background: #1d1d1d;
                    box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
                    height: 50px;
                    line-height: 50px;
                    .el-select__caret,
                    .el-select__prefix {
                        color: rgba(255, 212, 137, 0.6);
                    }
                }
                .el-select__input {
                    color: rgba(255, 212, 137, 0.6);
                }
                .el-select__placeholder {
                    color: rgba(255, 212, 137, 0.6);
                    font-size: 20px;
                    font-family: "PangMenZhengDao";
                    // text-align: center;
                }
            }
        }
        .warning-top {
            display: flex;
            width: max-content;
            align-items: center;
            .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: 435px;
    bottom: 13px;
    .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>