foster-pc-vue/src/components/navigation.vue

<template>
    <div class="navigation yes-events">
        <el-select class="select" v-model="areaId" size="large" @change="changeSelect" popper-class="focus-farm-select">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <div class="tabs" v-for="(ele, idx) in list" :key="idx">
            <div
                class="tab-item"
                @click="handleTab(item)"
                :class="{ active: active === item.id }"
                v-for="(item, index) in ele"
                :key="index"
            >
                {{ item.name }}
            </div>
        </div>
        <el-checkbox-group
            v-show="childrenData.length"
            class="checkbox-group"
            v-model="checkedChildren"
            @change="handleCheckedChange"
            :min="1"
        >
            <el-checkbox v-for="item in childrenData" :key="item" :label="item" :value="item">
                {{ item }}
            </el-checkbox>
        </el-checkbox-group>
        <!-- <div class="btn" @click="toPage">农场确权</div> -->
        <!-- 对比 -->
        <el-checkbox-group
            class="checkbox-group compare-btn"
            v-model="checkedCompareChildren"
            @change="handleCompareChange"
        >
            <el-checkbox label="指标对比" value="1">
                指标对比
            </el-checkbox>
        </el-checkbox-group>

        <div class="compare-tips" v-show="checkedCompareChildren.length">
            <span>提示：</span>请在底图上点选 <span>两棵树</span>，才可以进行对比
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, onUnmounted, ref } from "vue";
import eventBus from "@/api/eventBus";
const router = useRouter();

const areaId = ref("");
const options = ref([]);
eventBus.off('garden:organId', gardenOrganId)
eventBus.on('garden:organId',gardenOrganId)

const organId = ref(null)
function gardenOrganId(farmId){
    organId.value = farmId
    VE_API.region.list({farmId}).then(res =>{
        options.value = res.data
        // options.value.unshift({
        //     id:0,
        //     name:'全部区域'
        // })
        areaId.value = res.data[0].id
        eventBus.emit('area:id',{areaId:areaId.value,farmId})
        sessionStorage.setItem('regionId',areaId.value)
    })
}

const changeSelect = (e) =>{
    eventBus.emit('area:id',{areaId:areaId.value,farmId:organId.value})
    sessionStorage.setItem('regionId',e)
}

onMounted(()=>{
    gardenOrganId(sessionStorage.getItem('farmId')*1)
    eventBus.on('handleActive',handleActive)
})

onUnmounted(()=>{
    eventBus.off('handleActive',handleActive)
})

const emit = defineEmits(["handleTab","handleTabItem"])

const checkedChildren = ref([]);
const childrenData = ref([]);
const handleCheckedChange = (e) => {
    if(e.length){
        checkedChildren.value = [e[e.length -1]];
        emit('handleTabItem',checkedChildren.value[0])
        eventBus.emit('handleTabItem',checkedChildren.value[0])
    }
};

function handleActive({name,key}){
    childrenData.value = []
    const arr = list.value[0].filter(item =>item.name===key)
    active.value = arr[0].id;
    childrenData.value = arr[0].children
    checkedChildren.value = [name]

    emit('handleTab',{name:arr[0].name,id:active.value,isUpdate:true,params:name})
}

const active = ref(0);
const handleTab = ({ id, name,children }) => {
    active.value = id;
    childrenData.value = []
    if(children){
        childrenData.value = children;
        checkedChildren.value = [children[0]];
    }
    emit('handleTab',{name,id})
    eventBus.emit('handleTab',name)
};

const list = ref([
    [
        {
            name: "异常总览",
            id: 0,
        },
        {
            name: "基本指标",
            id: 1,
            children: ["树高", "冠幅"],
        },
        {
            name: "物候指标",
            id: 2,
            children: ["花穗长度", "单树花穗率"],
        },
        {
            name: "生态指标",
            id: 3,
            children: ["通风率", "清园程度","益草覆盖度"],
        },
        {
            name: "生长指标",
            id: 4,
            children: ["生长缓慢", "花量大","花带叶"],
        },
        {
            name: "病虫指标",
            id: 5,
            children: ["病害比例", "虫害比例"],
        },
    ],
    [
        {
            name: "处方图",
            id: 6,
        },
    ],
]);

const toPage = () => {
    router.push("/authentic");
};

// 对比
const checkedCompareChildren = ref([]);
function handleCompareChange(v) {
    if (checkedCompareChildren.value.length) {
        // 对比
        eventBus.emit("compareTree", checkedCompareChildren.value.length > 0 ? true : false)
    }
}
</script>

<style lang="scss" scoped>
.navigation {
    position: fixed;
    top: 34px;
    // left: calc(50% - 470px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 430px * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    .select{
        // width: 120px;
        width: 226px;
        height: 50px;
        margin-right: 21px;
        ::v-deep{
            .el-select__wrapper{
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                box-shadow: 0 0 0 1px #F7BE5A;
                border-radius: 2px;
                text-align: center;
            }
            .el-select__placeholder{
                color: #F7BE5A;
                font-size: 20px;
                font-family: "PangMenZhengDao";
            }
            .el-select__caret{
                color: #F7BE5A;
                font-size: 20px;
            }
        }
    }
    .tabs {
        background: rgba(35, 35, 35, 0.8);
        border: 1px solid #555555;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        .tab-item {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            padding: 7px 12px 9px 12px;
            font-family: "PangMenZhengDao";
            cursor: pointer;
            &.active {
                background: #ffd489;
                color: #1d1d1d;
                border-radius: 4px;
            }
        }
        .tab-item + .tab-item {
            margin-left: 25px;
        }
    }
    .tabs + .tabs {
        margin-left: 12px;
    }

    .checkbox-group {
        position: absolute;
        top: 74px;
        right: 160px;
        background: rgba(35, 35, 35, 0.8);
        border-radius: 8px;
        border: 1px solid #555555;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        &.compare-btn {
            right: 26px;
        }
        ::v-deep {
            .el-checkbox {
                margin-right: 0;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #ffd489;
            }
            .el-checkbox__input.is-checked .el-checkbox__inner {
                background-color: #ffd489;
                border-color: #ffd489;
                &::after {
                    border-color: #1d1d1d;
                }
            }
            .el-checkbox__label {
                color: #fff;
            }
        }
    }

    .compare-tips {
        position: absolute;
        top: 96px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(4, 3, 0, 0.6);
        border-radius: 40px;
        padding: 6px 34px;
        font-family: 'PangMenZhengDao';
        font-size: 20px;
        span {
            color: #F3C11D;
        }
    }

    .btn {
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        border-radius: 5px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.5);
    }
}
</style>