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

<template>
    <div class="base-container no-events">
        <div class="content">
            <!-- <navigation @handleTab="handleTab"></navigation> -->
            <div class="left yes-events">
                <component :is="components[currentComponent]" @backHome="backHome" />
            </div>

            <div class="right yes-events">
                <div class="list adopt-list-wrap">
                    <chart-box name="果树管理" arrow="" color="yellow">
                        <el-tabs v-model="activeName" class="demo-tabs">
                            <el-tab-pane label="果树列表" name="果树列表">
                                <adopt-list></adopt-list>
                            </el-tab-pane>
                            <el-tab-pane label="待分配" name="待分配">
                                <template #label>
                                    <span class="custom-tabs-label">
                                        <span>待分配</span>
                                        <span class="count-text" v-if="listCount">{{ listCount }}</span>
                                    </span>
                                </template>
                                <client-list
                                    :checkDistributeShow="checkDistributeShow"
                                    :startReloadList="startReloadList"
                                    @update:checkDistributeShow="hanldeDistributeCheck"
                                    @update:checkData="handlCheckChange"
                                    @update:listCount="updateListCount"
                                    ></client-list>
                            </el-tab-pane>
                            <el-tab-pane label="已分配" name="已分配">
                                <apply-list
                                    :startReloadList="startReloadList"
                                    @update:userList="updateUser"
                                ></apply-list>
                            </el-tab-pane>
                            <!-- <el-tab-pane label="确认地址" name="确认地址">
                                <address-list></address-list>
                            </el-tab-pane> -->
                        </el-tabs>
                    </chart-box>
                </div>
            </div>

            <!-- 图例 -->
            <div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
                <div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
                    <span class="legend-block" :style="{ background: legend.color }"></span>
                    {{ legend.name }}
                </div>
            </div>
            <div v-else class="map-bg map-legend yes-events">
                <div class="item" v-show="!checkDistributeShow">
                    <img src="@/assets/images/map/status/wry.png" alt="" />
                    未开放
                </div>
                <div class="item" v-show="!checkShow">
                    <img src="@/assets/images/map/status/dry.png" alt="" />
                    待守护
                </div>
                <!-- <div class="item" v-show="!checkShow">
                    <img src="@/assets/images/map/status/yry.png" alt="" />
                    已守护
                </div> -->
                <div class="item selected-item" v-show="checkShow || checkDistributeShow">
                    <img src="@/assets/images/map/status/selected.png" alt="" />
                    已选择
                </div>
            </div>

            <div class="tips" v-show="checkShow">
                <div class="text">
                    <span>提示：</span>请在底图上点选 <span>未开放的果树</span>，或按住 Ctrl 框选
                    <span>开放守护的区域</span>
                </div>
            </div>
            <div class="tips" v-show="checkDistributeShow">
                <div class="text">
                    <span>提示：</span>请在底图上点选 <span>待守护的果树</span>，或按住 Ctrl 框选
                    <span>分配的区域</span>
                </div>
            </div>

            <div v-show="!checkShow && !checkDistributeShow" class="right-button yes-events" @click="hanldeCheck">
                新增守护区域
            </div>
            <div v-show="checkShow" class="center-button">
                <div class="cancel yes-events" @click="handleCancel">取消</div>
                <div class="yes-events" @click="saveEdit">确认开放守护权限</div>
            </div>
            <div v-show="checkDistributeShow" class="center-button">
                <div class="cancel yes-events" @click="handleCancel">取消分配</div>
                <div class="yes-events" @click="saveDistributeEdit" :class="{'disabled': (!selectedTree.length || !selectedTels.length) || selectedTree.length < selectedTels.length}">
                    确认分配<span class="select-text">(已选{{selectedTree.length}}/<span class="select-total">{{ selectedTels.length }}</span>)</span>
                </div>
            </div>
        </div>
    </div>
    <custom-map class="bottom-map" ref="mapRef" @update:selectedTree="handleSelectedTree"></custom-map>

    <!-- 图片弹窗 -->
    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
    <PdfDialog title="果园报告"></PdfDialog>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import config from "@/api/config.js";
import timeLine from "@/components/timeLine.vue";
import PicturePreview from "@/components/PicturePreview.vue";
import navigation from "@/components/navigation.vue";
import chartBox from "@/components/chartBox.vue";
import leftTabs from "./components/leftTabs/index.vue";
import treeDetail from "./components/treeDetail.vue";
import adoptList from "./components/adoptList.vue";
import clientList from "./components/clientList.vue";
import customMap from "./homeMap.vue";
import applyList from "./components/applyList.vue";
import addressList from "./components/addressList.vue";
import { convertPointToArray } from "@/utils/index";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import eventBus from "@/api/eventBus";
import PdfDialog from "../../components/PdfDialog";
import { ElMessage } from "element-plus";
let store = useStore();
const components = {
    leftTabs,
    treeDetail,
};

const route = useRoute();
const mapRef = ref(null);

const activeName = ref("果树列表");

const currentFarmId = store.getters.userinfo.curFarmId
// const currentFarmId = sessionStorage.getItem('userinfo').curFarmId

onMounted(() => {
    //区域切换监听事件
    eventBus.on("area:id", areaId);
    areaId({ areaId: 0, farmId: currentFarmId });

    // 修改单棵树信息后刷新地图数据
    eventBus.off("refreshMapData", getPointList);
    eventBus.on("refreshMapData", getPointList);
    if (route.query.acitveName) {
        activeName.value = route.query.acitveName
    }
});

onUnmounted(() => {
    if (mapRef.value) {
        mapRef.value.destroy(); // 确保在自定义地图组件中实现了destroy方法
    }
    eventBus.off("area:id", areaId);
    eventBus.off("changePointLegend", toggleLegend);
    eventBus.off("clickMapPoint", toggleLeftComponet);
});

const getPointList = () => {
    VE_API.manage_interface.fetchSampleList({ farmId: organId.value }).then(({ data }) => {
        if (mapRef.value) {
            nextTick(() => {
                mapRef.value.addCluster(data);
                // mapRef.value.initData(arr)
                // mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))
            });
        }
    });
};

const regionData = ref([]);
function getBlueRegionList() {
    VE_API.manage_interface.fetchRegionList({ farmId: organId.value }).then(({ data }) => {
        regionData.value = data;
        mapRef.value.initAreaMap(data);
    });
}

const checkShow = ref(false);
const hanldeCheck = () => {
    checkShow.value = true;
    mapRef.value.enableBoxSelect();
};

// 分配果树
const checkDistributeShow = ref(false); 
const startReloadList = ref(false); 
const hanldeDistributeCheck = () => {
    checkDistributeShow.value = true;
    mapRef.value.enableDistributeBoxSelect();
};

// 分配果树勾选值变化事件
const selectedTels = ref([]);
const handlCheckChange = (val) => {
    selectedTels.value = val;
};

const listCount = ref(null)
function updateListCount(count) {
    listCount.value = count
}

// 地图--选树时抛出的事件
const selectedTree = ref([]);
const handleSelectedTree = (data) => {
    selectedTree.value = data;
}

const handleCancel = () => {
    checkShow.value = false;
    checkDistributeShow.value = false;
    selectedTree.value = []
    selectedTels.value = []
    // mapRef.value.clearSelection()
    mapRef.value.stopBoxSelect();
};

const saveEdit = () => {
    mapRef.value.saveSelect(() => {
        getPointList();
    });
    checkShow.value = false;
    checkDistributeShow.value = false;
};

const saveDistributeEdit = () => {
    if (!selectedTree.value.length || !selectedTels.value.length || selectedTree.value.length < selectedTels.value.length) {
        return
    }
    // mapRef.value.saveDistributeSelect(() => {
    //     getPointList();
    // });
    const params = {
        farmId: currentFarmId,
        sampleIds: selectedTree.value,
        tels: selectedTels.value,
    };
    VE_API.manage_interface.saveTreeUser(params).then(({code}) => {
        if (code === 0) {
            ElMessage.success("分配成功");
            startReloadList.value = !startReloadList.value // 触发重新加载列表
            activeName.value = "已分配"
            handleCancel()
            return;
        }
    })
};

// 图例
const legendArr = ref([]);

const organId = ref("");
const regionId = ref(null);
eventBus.off("changePointLegend", toggleLegend);
eventBus.on("changePointLegend", toggleLegend);
function toggleLegend({ colorObj }) {
    legendArr.value = colorObj?.list;
}

//区域切换监听事件
function areaId({ areaId, farmId }) {
    organId.value = farmId;
    regionId.value = areaId;

    // 树点位
    getPointList();
    // 分区
    if (!regionData.value.length) {
        // 全部区域
        getBlueRegionList();
    }
}

const urls = ref([]);
const urlsIndex = ref(0);

const currentComponent = ref("leftTabs");

eventBus.on("clickMapPoint", toggleLeftComponet);
function toggleLeftComponet() {
    currentComponent.value = "treeDetail";
}

function backHome() {
    currentComponent.value = "leftTabs";
    mapRef.value.resetCurrentTree();
}

function setReload() {
    startReloadList.value = !startReloadList.value
}

function updateUser() {
    activeName.value = "待分配"
    setReload()
}
</script>

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

    .content {
        width: 100%;
        height: calc(100% - 36px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left,
        .right {
            width: 376px;
            height: calc(100% - 10px);
            margin-top: 10px;
            box-sizing: border-box;
            display: flex;
            position: relative;
        }
        .left {
            background: #fff;
            border-radius: 8px;
            margin-left: 25px;
            padding: 0 10px 10px;
            .arrow {
                position: absolute;
                right: -16px;
                top: calc(50% - 40px);
                background: #fff;
                width: 16px;
                height: 80px;
                line-height: 80px;
                border-radius: 0 5px 5px 0;
                text-align: center;
                cursor: pointer;
            }
            ::v-deep {
                .el-tabs__item {
                    outline: none;
                }
            }
        }
        .right {
            width: 376px;
            margin-right: 25px;
            .adopt-list-wrap {
                ::v-deep {
                    .el-tabs {
                        height: 100%;
                    }
                    .el-tabs__content {
                        height: calc(100% - 40px - 15px);
                        position: static;
                    }
                    .el-tabs__item {
                        color: #727272;
                        width: 100px;
                    }
                    .el-tabs__active-bar {
                        background-color: #2199f8;
                        height: 1px;
                    }
                    .el-tabs__item.is-active {
                        color: #2199f8;
                    }
                    .el-tabs__nav-wrap:after {
                        height: 1px;
                        background-color: rgba(127, 127, 127, 0.1);
                    }
                    .el-tabs__nav {
                        left: 50%;
                        transform: translateX(-50%) !important;
                    }
                    .el-tab-pane {
                        height: 100%;
                    }
                }
                .custom-tabs-label {
                    position: relative;
                    .count-text {
                        position: absolute;
                        top: -7px;
                        right: -20px;
                        width: 16px;
                        height: 16px;
                        background: #E04C4C;
                        color: #fff;
                        text-align: center;
                        line-height: 16px;
                        border-radius: 50%;
                        font-size: 10px;
                    }
                }
            }
            .list {
                width: 100%;
                height: 100%;
                overflow: auto;
                .btn-wrap {
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    div {
                        width: 48%;
                        height: 100%;
                        color: #ffd489;
                        border: 1px solid rgba(255, 213, 137, 0.6);
                        border-radius: 2px;
                        text-align: center;
                        font-size: 12px;
                        cursor: pointer;
                        &.active {
                            background: #ffd489;
                            color: #000;
                        }
                    }
                }
                .img-box {
                    width: 100%;
                    height: calc(100% - 35px);
                    overflow: auto;
                }
                .img-box1 {
                    width: 100%;
                    height: calc(100% - 10px);
                    overflow: auto;
                    margin-top: 10px;
                }
                .img-box2 {
                    width: 100%;
                    height: calc(100% - 45px);
                    overflow: auto;
                    margin-top: 10px;
                }
                img {
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                    margin-bottom: 12px;
                    cursor: pointer;
                }
                .mt {
                    margin-top: -12px;
                }
            }
        }
        .overflow {
            overflow: auto;
        }
        .legend {
            position: fixed;
            bottom: 8px;
            right: 64px;
            height: 20px;
        }
        .map-bg {
            position: fixed;
            z-index: 2;
            background: rgba(35, 35, 35, 0.8);
            border-radius: 18px;
            padding: 7px 16px;
            left: 460px;
        }
        .tips {
            position: fixed;
            z-index: 2;
            top: 105px;
            width: 100%;
            display: flex;
            justify-content: center;
            .text {
                font-size: 20px;
                padding: 6px 16px;
                font-family: "PangMenZhengDao";
                background: rgba(4, 3, 0, 0.6);
                border-radius: 20px;
                span {
                    color: #ffd489;
                }
            }
        }
        .right-button {
            position: fixed;
            z-index: 2;
            right: 460px;
            bottom: 36px;
            font-size: 24px;
            font-family: "PangMenZhengDao";
            padding: 16px 32px 20px 32px;
            cursor: pointer;
            background: url("@/assets/images/foster-home/btn-bg.png") no-repeat center center / 100% 100%;
        }
        .center-button {
            position: fixed;
            z-index: 2;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 116px;
            div {
                cursor: pointer;
                width: 248px;
                text-align: center;
                padding: 15px;
                font-family: "PangMenZhengDao";
                color: #000;
                font-size: 20px;
                background: linear-gradient(0deg, #ffd887, #ed9e1e);
                border: 2px solid rgba(255, 255, 255, 0.61);
                border-radius: 12px;
            }
            .cancel {
                margin-right: 20px;
                background: #eeeeee;
            }
            .disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
        }
        .select-text {
            padding-left: 4px;
            font-size: 16px;
            .select-total {
                color: rgba(29, 29, 29, 0.5);
            }
        }
        .map-btn {
            top: 19px;
            cursor: pointer;
        }
        .map-legend {
            bottom: 36px;
            display: flex;
            align-items: center;
            .item {
                display: flex;
                align-items: center;
                font-size: 14px;
                img {
                    width: 16px;
                    margin-right: 6px;
                }
                .legend-block {
                    width: 16px;
                    height: 16px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    margin-right: 6px;
                }
            }
            .selected-item {
                img {
                    width: 24px;
                }
            }
            .legend-title {
                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
            }
            .item + .item {
                padding-left: 12px;
            }
        }
    }
}
.bottom-map {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

.compare-start-btn {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    bottom: 106px;
    // right: 445px;
    img {
        height: 55px;
    }
}
</style>

<style lang="less">
.file-wrap {
    &.map-file {
        width: 367px;
        position: relative;
        background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
        margin-left: 12px;
        padding: 12px;
        .file-title {
            font-size: 20px;
            color: #ffd489;
            .tag {
                border: 1px solid #ffd489;
                border-radius: 4px;
                font-size: 12px;
                display: inline-block;
                width: 44px;
                height: 20px;
                text-align: center;
                line-height: 18px;
                margin-left: 8px;
                padding: 1px 4px;
            }
        }
        .overview-file {
            padding-top: 20px;
            .box-title {
                font-size: 16px;
                padding-left: 13px;
                margin-bottom: 16px;
                position: relative;
                display: flex;
                justify-content: space-between;
                color: #fff;
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 3px;
                    width: 3px;
                    height: 16px;
                    background: #fff;
                    border-radius: 11px;
                }
            }
            .title {
                color: #f3c11d;
                font-size: 16px;
                font-family: "PangMenZhengDao";
                margin-bottom: 20px;
                .big {
                    width: 13px;
                    height: 13px;
                    margin: -10px 0 0 4px;
                }
                .small {
                    width: 7px;
                    height: 7px;
                    margin-left: -3px;
                }
            }
            .base-data {
                background: rgba(207, 207, 207, 0.1);
                border-radius: 4px;
                padding: 6px 0;
                display: flex;
                .base-item {
                    flex: 1;
                    text-align: center;
                    .label {
                        font-size: 12px;
                        color: #666666;
                    }
                    .value {
                        padding-top: 2px;
                        font-size: 16px;
                        color: #ffffff;
                    }
                }
                .base-item + .base-item {
                    border-left: 1px solid rgba(102, 102, 102, 0.42);
                }
            }
            .list {
                margin-top: 15px;
                width: max-content;
                font-size: 14px;
                .list-item {
                    color: #bbbbbb;
                    display: flex;
                    margin-bottom: 8px;
                    .list-name {
                        color: #f3c11d;
                        margin-right: 6px;
                        img {
                            width: 17px;
                            height: 13px;
                        }
                    }
                }
            }
        }
        .overview-file + .overview-file {
            margin-top: 8px;
        }
        .box-wrap {
            display: flex;
            .box-item {
                // flex: 1;
                min-width: 109px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 6px;
                box-sizing: border-box;
                background: rgba(207, 207, 207, 0.1);
                border-radius: 4px;
                border: 1px solid rgba(207, 207, 207, 0.1);
                cursor: pointer;
                .item-name {
                    font-size: 12px;
                    color: #666666;
                    width: max-content;
                }
                .item-val {
                    font-size: 18px;
                    color: #fff;
                    width: max-content;
                    padding-top: 3px;
                }
                &.active {
                    background: rgba(255, 212, 137, 0.16);
                    border: 1px solid #ffd489;
                    .item-name {
                        color: #bbbbbb;
                    }
                }
            }
            .box-item + .box-item {
                margin-left: 8px;
            }
        }
    }
}
</style>