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="handleHomeTab(item)"
                :class="{ active: active === item.name }"
                v-for="(item, index) in ele"
                :key="index"
            >
                {{ item.name }}
            </div>
        </div>
        <el-checkbox-group
            v-show="childrenData && 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>
</template>

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

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

const organId = ref()
function gardenOrganId(farmId){
    organId.value = farmId
    console.log('organId.value', 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) =>{
    console.log('changeSelect', e);
    eventBus.emit('area:id',{areaId:areaId.value,farmId:organId.value})
    sessionStorage.setItem('regionId',e)
    eventBus.emit('handleTab',)
    active.value = "果园总览"
}

onMounted(()=>{
    gardenOrganId(sessionStorage.getItem('farmId')*1)
    eventBus.on('handleActive',handleActive)
})
const mainMenuArr = computed(() => store.state.home.mainMenu);

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

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

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

function handleActive({name,key}){
    childrenData.value = []
    const menuItem = mainMenuArr.value.find(item =>item.name===key)
    active.value = menuItem.name;
    childrenData.value = menuItem.btnGroup
    checkedChildren.value = [name]

    emit('handleTab',{name:menuItem.name,id:active.value,isUpdate:true,params:name, legend: menuItem?.legend, colorObj: menuItem?.colorObj})
}

const active = ref("");
const handleHomeTab = ({ id, name }) => {
    active.value = name;
    childrenData.value = []
    const menuItem = mainMenuArr.value.find(item =>item.name===name)
    console.log('menuItem', menuItem);
    if(menuItem){
        childrenData.value = menuItem.btnGroup
        checkedChildren.value = [menuItem.btnGroup[0]];
    }
    emit('handleTab',{name,id, legend: menuItem?.legend, colorObj: menuItem?.colorObj})
    // eventBus.emit("changePointType", {legend: menuItem?.legend, colorObj: menuItem?.colorObj})
    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: 1,
        },
    ],
    // [
    //     {
    //         name: "指标对比",
    //         id: 11,
    //     },
    // ],
]);

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


</script>

<style lang="scss" scoped>
.navigation {
    position: fixed;
    top: 34px;
    left: 50%;
    // left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 430px * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    .select{
        // width: 120px;
        width: 166px;
        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: 26px;
        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;
            top: 0px;
        }
        ::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>