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

<template>
    <div class="base-container no-events">
        <fnHeader :hideShadow="true"></fnHeader>
        <div class="content">
            <div class="warning-l left">
                <div class="warning-top">
                    <div class="back-icon yes-events" v-if="!hideChatMapLayer" @click="toggleChatMapLayer">
                        <img src="@/assets/images/common/back-icon.png" />
                        返回
                    </div>
                    <div class="top-l yes-events">
                            <!-- <el-cascader
                                style="width: 184px"
                                :show-all-levels="false"
                                v-model="areaVal"
                                :props="props1"
                                :options="areaListOptions"
                                @change="toggleArea"
                                popper-class="area-cascader"
                            /> -->
                            <div class="select-wrap">
                                <el-select
                                    v-model="areaVal"
                                    placeholder="请选择"
                                    style="width: 180px"
                                    >
                                    <el-option
                                        v-for="item in areaOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </div>
                            <div class="select-wrap">
                                <el-select
                                    v-model="typeVal"
                                    placeholder="请选择"
                                    style="width: 180px"
                                    >
                                    <el-option
                                        v-for="item in typeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </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="hideChatMapLayer">
                    <alarm-list></alarm-list>
                </div>
                <!-- <div class="time-wrap yes-events">
                    <time-line></time-line>
                </div> -->
            </div>
            <div class="warning-c yes-events">
                <div class="center-content">
                    <div class="warning-item">
                        <div class="item-val">
                            526
                            <span class="unit">亩</span>
                        </div>
                        <div class="item-text">种植面积</div>
                    </div>
                    <div class="warning-item">
                        <div class="item-val">
                            526
                            <span class="unit">户</span>
                        </div>
                        <div class="item-text">种植户数</div>
                    </div>
                    <div class="warning-item">
                        <div class="item-val">
                            526
                            <span class="unit">亩</span>
                        </div>
                        <div class="item-text">种植产量</div>
                    </div>
                </div>
                <img class="center-title-bg" src="@/assets/images/warningHome/center-title.png" alt="">
            </div>
            <div class="warning-r right yes-events">
                <!-- <album></album> -->
                <chat></chat>

                <!-- 地图图例 -->
                <div class="map-legend" v-if="legendImg">
                    <img :src="legendImg" />
                </div>
                <div class="map-legend chat-legend" v-show="!legendImg">
                    <StaticMapLegend></StaticMapLegend>
                </div>

                <!-- 农场确权 -->
                <div class="authentic-btn yes-events PangMenZhengDao-FONT" @click="toAuthentic">
                    农场确权
                    <el-icon class="right-icon" size="18"><CaretRight /></el-icon>
                </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>
    <track-dialog></track-dialog>
</template>

<script setup>
import "./map/mockFarmLayer";
import StaticMapLayers from "@/components/static_map_change/Layers.js"
import StaticMapLegend from "@/components/static_map_change/legend.vue"
import StaticMapPointLayers from "@/components/static_map_change/pointLayer.js"
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 trackDialog from "./components/trackDialog.vue";
import chat from "./components/chat_components/index.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;
let staticMapLayers = null;
let staticMapPointLayers = null;
const router = useRouter();

const areaVal = ref(1);
const areaOptions = ref([
    {label: "百色",value: 1}
])
const typeVal = ref(1);
const typeOptions = ref([
    {label: "八角",value: 1},
    {label: "油茶",value: 2},
])
const mapRef = ref();

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

    // 图例数据
    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}图例`];
      }
    });

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

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

    // 重置时间轴
    // eventBus.emit("map_click_alarm")
    if (mapName === "植保机") {
        staticMapLayers.show("分散种植", true)
        staticMapPointLayers.showPoint()
    } else if (mapName) {
        // staticMapLayers.show("作物种类")
        staticMapLayers.show(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);
};

function toAuthentic() {
    router.push('/authentic')
}
</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;
            width: 500px;
            position: relative;
            .list {
                width: 100%;
                height: 100%;
            }
        }
        .warning-c {
            width: 600px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            .center-content {
                position: relative;
                width: 600px;
                display: flex;
                justify-content: space-around;
                z-index: 2;
            }
            .center-title-bg {
                position: absolute;
                top: -100px;
            }
            .warning-item {
                height: 78px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .item-text {
                    color: #55E5C8;
                    font-size: 20px;
                }
                .item-val {
                    font-family: "PangMenZhengDao";
                    font-size: 36px;
                    background: linear-gradient(180deg, #9CFFF3, #FFFFFF);
                    -webkit-background-clip: text;
                    color: transparent;
                    .unit {
                        font-size: 17px;
                    }
                }
            }
        }
        .warning-r {
            .map-legend {
                position: absolute;
                bottom: -33px;
                left: -352px;
                width: 340px;
                img {
                    width: 340px;
                    opacity: 0.6;
                }
            }
            .chat-legend {
                bottom: -12px;
            }

            .authentic-btn {
                position: absolute;
                top: -34px;
                left: 78px;
                width: 200px;
                height: 40px;
                background: url('@/assets/images/warningHome/select-bg-right.png') no-repeat center;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
            }
        }
        .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: #55E5C6;
                    }
                }
                .el-select__placeholder {
                    color: #55E5C6;
                    font-size: 20px;
                    font-family: "PangMenZhengDao";
                    text-align: center;
                }
            }
        }
        .warning-top {
            display: flex;
            width: max-content;
            align-items: center;
            .back-icon {
                cursor: pointer;
                margin-right: 20px;
                height: 50px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                border: 1px solid rgba(255, 255, 255, 0.6);
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                img {
                    width: 17px;
                    margin-right: 10px;
                }
            }
            .top-l {
                display: flex;
                // flex-direction: column;
                align-items: center;
                position: relative;
                top: -40px;
                .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;
                }

                .select-wrap {
                    background: url("@/assets/images/warningHome/select-bg.png") no-repeat center;
                    width: 200px;
                }

                ::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: #55E5C6;
                            font-size: 20px;
                            font-family: "PangMenZhengDao";
                            text-align: center;
                        }
                    }
                    .el-select__wrapper {
                        background: transparent;
                        box-shadow: none;
                        height: 40px;
                        line-height: 40px;
                        .el-select__caret {
                            color: #fff;
                        }
                    }
                    .el-select__placeholder {
                        color: #fff;
                        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: #55E5C6;
                            padding-right: 2px;
                        }
                    }
                    .data-name {
                        color: #cecece;
                        font-size: 16px;
                    }
                }
            }
        }
        .warning-alarm {
            width: 88px;
            padding-top: calc(40%);
        }
        .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(9, 243, 200, 0.6);
        }
        .el-select-dropdown__item.is-selected {
            background: rgba(255, 212, 137, 0.2);
            color: #55E5C6;
        }
    }
    &.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(9, 243, 200, 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: #55E5C6;
            background: transparent;
        }
        .el-radio__input.is-checked .el-radio__inner {
            background: #55E5C6;
            border-color: #55E5C6;
        }
        .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(9, 243, 200, 0.6);
    }
    &.el-popper.is-light .el-popper__arrow:before {
        background: #232323;
        border-color: rgba(255, 212, 137, 0.3);
    }
}
</style>