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

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <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="">
                        <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="客户列表">
                                <client-list></client-list>
                            </el-tab-pane>
                            <el-tab-pane label="认养申请" name="认养申请">
                                <apply-list></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">
                    <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">
                    <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 v-show="!checkShow" 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="handleCancel">确认开放认养权限</div>
            </div>
        </div>
    </div>
    <custom-map class="bottom-map" ref="mapRef"></custom-map>

    <!-- 图片弹窗 -->
    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
    <album-carousel></album-carousel>
    <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 fnHeader from "@/components/fnHeader.vue";
import navigation from "@/components/navigation.vue";
import chartBox from "@/components/chartBox.vue";
import homePage from "./components/homePage.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 { useRouter } from "vue-router";
import { useStore } from "vuex";
import eventBus from "@/api/eventBus";
import AlbumCarousel from "./album_compoents/albumCarousel.vue";
import PdfDialog from "../../components/PdfDialog";
let store = useStore();
const components = {
    homePage,
    treeDetail,
};

const router = useRouter();
const mapRef = ref(null);

const activeName = ref('认养列表')
// 用户角色
store.commit("home/SET_USER_ROLE", 2);
onMounted(() => {
    //区域切换监听事件
    eventBus.on("area:id", areaId);
});

onUnmounted(() => {
    eventBus.off("area:id", areaId);
});

const getPointList = () =>{
    VE_API.variety.pointList({ farmId:organId.value, selectAll:1 }).then(({ data }) => {
        // const arr = data.map(item =>{
        //     return{
        //         ...item,
        //         color: item.fosterStatus === 0 ? "transprent" : (item.fosterStatus === 1 ? "#EEEEEE" : (item.fosterStatus === 2 ? "#F0AC37" : "transprent")),
        //         lnglat:convertPointToArray(item.point)
        //     }
        // })
        if(mapRef.value){
            nextTick(() => {
                data[0].icon = "123"
                data[1].icon = "123"
                data[100].icon = "123"
                data[170].icon = "123"
                data[190].icon = "123"
                data[10].icon = "123"
                data[20].icon = "123"
                data[30].icon = "123"
                mapRef.value.addCluster(data)
                // mapRef.value.initData(arr)
                // mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))
            })
        }
    })
}

function getBlueRegionList() {
    VE_API.region.list({farmId: organId.value}).then(({data}) =>{
        mapRef.value.initAreaMap(data);
    })
}

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

const handleCancel = () =>{
    checkShow.value = false
    // mapRef.value.clearSelection()
    mapRef.value.stopBoxSelect()
}

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

const organId = ref("");
const regionId = ref(null);
const tabName = ref("");
const tabId = ref(0);
eventBus.off("changePointLegend", toggleLegend)
eventBus.on("changePointLegend", toggleLegend)
function toggleLegend({colorObj}) {
    legendArr.value = colorObj?.list
}
//选项卡事件监听
const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
    eventBus.emit("changePointType", {legend, colorObj})
    legendArr.value = colorObj?.list
    tabName.value = name;
    tabId.value = id;
    // if (id === 0) {
    // }
};

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

    // 树点位
    getPointList()
    // 分区
    getBlueRegionList();
}

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

const currentComponent = ref("homePage");

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

function backHome() {
    console.log('home');
    currentComponent.value = "homePage"
}
</script>

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

    .content {
        width: 100%;
        height: calc(100% - 74px - 48px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left,
        .right {
            width: 376px;
            height: 100%;
            margin-top: 10px;
            box-sizing: border-box;
            display: flex;
            position: relative;
        }
        .left {
            background: #101010;
            border-radius: 4px;
            border: 1px solid #444444;
            margin-left: 25px;
            .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;
            }
        }
        .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;
                    }
                    .el-tabs__active-bar {
                        background-color: #FFFFFF;
                        height: 1px;
                    }
                    .el-tabs__item.is-active {
                        color: #fff;
                    }
                    .el-tabs__nav-wrap:after {
                        height: 1px;
                        background-color: rgba(127, 127, 127, 0.3);
                    }
                    .el-tabs__nav {
                        left: 50%;
                        transform: translateX(-50%) !important;
                    }
                    .el-tab-pane {
                        height: 100%;
                    }
                }
            }
            .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;
            }
        }
        .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: 100vh;
    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>