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]" />
            </div>
            <!-- <div class="home-bottom">
                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
                    <home-file></home-file>
                    <div class="arrow" @click="handleShrink('bottom')">
                        <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                    </div>
                </div>
            </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/status-bh.png" alt="" />
                    病害异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
                    虫害异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
                    正常
                </div>
                <!-- <div class="item">
                    <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
                    无照片
                </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 { 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 fileBar from "@/components/fileBar.vue";
import homePage from "./components/homePage.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,
};

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

const activeName = ref('认养列表')
onMounted(() => {
    //区域切换监听事件
    eventBus.on("area:id", areaId);

    getPointList()
});

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

const pointList = ref([])
const getPointList = () =>{
    VE_API.variety.pointList({ farmId:766, selectAll:1 }).then(({ data }) => {
        const arr = data.map(item =>{
            return{
                ...item,
                lngLat:convertPointToArray(item.point)
            }
        })
        if(mapRef.value){
            mapRef.value.initData(arr)
        }
    })
}

const blueList = ref([]);
const getBlueRegionList = (callback) => {
    let selectAll = undefined;
    if (regionId.value === 0) {
        selectAll = 1;
    }
    const areaId = selectAll ? undefined : regionId.value;
    VE_API.farm.blueRegionList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
        blueList.value = data.map((item) => {
            let color = "rgba(255, 255, 255, 0.5)"; //失效区域
            if (item.status === 2) {
                //物候期风险
                // color = "rgba(63, 255, 53, 0.5)";
                color = "#2BFE00";
            }
            if (item.status === 3) {
                //生长异常
                // color = "rgba(255, 252, 61, 0.5)";
                color = "#FF7410";
            }
            if (item.status === 4) {
                //病虫害
                // color = "rgba(255, 73, 73, 0.5)";
                color = "#F82121";
            }
            return {
                ...item,
                color,
            };
        });
        // blueRegionLayer.initData(blueList.value);
        callback && callback();
    });
};
// 图例
const legendArr = ref([])

const organId = ref(null);
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) {
        getBlueRegionList();
    }
};

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

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

const currentComponent = ref("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;
        }
        .home-bottom {
            display: flex;
            align-items: flex-end;
            width: calc(100% - 60px - 376px * 2);
            height: 152px;
            align-self: flex-end;
            .time-wrap {
                height: 85px;
            }
            .fly-icon {
                width: 148px;
                height: 100%;
                margin-left: 27px;
            }
            .log-box {
                height: 34%;
                width: calc(100% - 340px - 28px);
                margin-right: 28px;
                .box-name {
                    width: 89px;
                    height: 22px;
                    text-align: center;
                    line-height: 22px;
                    border-radius: 20px;
                    margin: 10px 0 5px 6px;
                    cursor: pointer;
                    background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
                }
                .log-content {
                    font-size: 12px;
                    line-height: 1.5;
                    padding: 0 18px;
                }
                .chart-wrap {
                    width: 100%;
                    height: calc(100% - 50px);
                    .line {
                        margin-top: 10px;
                        margin-bottom: 12px;
                    }
                    img {
                        width: 100%;
                        margin-bottom: 10px;
                    }
                }
            }

            .garden-file {
                position: relative;
                top: 10px;
                // height: 30%;
                // min-height: 210px;
                // width: 640px;
                transition: all 0.3s;
                width: 800px;
                height: 320px;
                overflow: hidden;
                &.isShrink {
                    height: 66px;
                    width: 450px;
                    overflow: hidden;
                    .arrow {
                        .icon {
                            transform: rotate(90deg);
                        }
                    }
                }
                .arrow {
                    position: absolute;
                    right: 56px;
                    top: 36px;
                    background: #fff;
                    height: 16px;
                    width: 80px;
                    line-height: 16px;
                    border-radius: 0 0 5px 5px;
                    text-align: center;
                    cursor: pointer;
                    .icon {
                        transform: rotate(270deg);
                    }
                }
            }

            .file-box {
                height: 25%;
                min-height: 210px;
                width: 340px;
                position: relative;
                img {
                    width: 100%;
                    margin-top: 12px;
                }
                .arrow-icon {
                    top: -32px;
                    left: 50%;
                    position: absolute;
                    background: #fff;
                    width: 16px;
                    height: 80px;
                    line-height: 80px;
                    border-radius: 5px 0 0 5px;
                    text-align: center;
                    transform: translateX(-50%) rotate(270deg);
                }
                .edit-btn {
                    padding: 2px 24px;
                    background: #ffd489;
                    border-radius: 4px;
                    color: #000;
                }
            }
        }
        .legend {
            position: fixed;
            bottom: 8px;
            right: 64px;
            // width: 525px;
            height: 20px;
        }
        .map-bg {
            position: fixed;
            z-index: 2;
            background: rgba(35, 35, 35, 0.8);
            border-radius: 18px;
            padding: 7px 16px;
            right: 460px;
        }
        .map-btn {
            top: 19px;
            cursor: pointer;
        }
        .map-legend {
            bottom: 34px;
            .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;
                }
            }
            .legend-title {
                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
            }
            .item + .item {
                padding-top: 10px;
            }
        }
    }
}
.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>