simulation-front/src/views/page/pageMenu.vue

<template>
    <div class="pageMenu" v-bind:class="{ widthFold: menuFold }">
        <div class="panel">
            <div class="icon" v-show="!menuFold" @click="menuFoldHandle()">
                <b></b>
            </div>
            <div class="iconFold" v-show="menuFold" @click="menuFoldHandle(1)">
                <b></b>
            </div>
            <ul class="menuFold" v-show="menuFold">
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'modelLibrary' }"
                >
                    <b class="my-icon-menuA is"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'algorithmsLibrary' }"
                >
                    <b class="my-icon-menuB"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'sceneLibrary' }"
                >
                    <b class="my-icon-menuC"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'systemManagement' }"
                >
                    <b class="my-icon-menuD"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'systemManagement' }"
                >
                    <b class="my-icon-menuE"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'systemManagement' }"
                >
                    <b class="my-icon-menuF"></b>
                </li>
            </ul>

            <div class="menuList" v-show="!menuFold">
                <el-menu
                    default-active="modelLibrary"
                    class="el-menu-vertical-demo"
                    background-color="#3397FF"
                    :router="true"
                    @select="menuSel"
                >
                    <!-- active-text-color="#ffffff" -->
                    <el-submenu index="modelLibrary">
                        <template slot="title">
                            <i class="my-icon-menuA"></i>
                            <span>模型库</span>
                        </template>
                        <el-menu-item index="sensorModel"
                            >传感器模型</el-menu-item
                        >
                        <el-menu-item index="vehicleModel"
                            >车辆模型</el-menu-item
                        >
                        <el-menu-item index="vehicleConfigurationList"
                            >车辆配置</el-menu-item
                        >
                    </el-submenu>
                    <el-submenu index="algorithmsLibrary">
                        <template slot="title">
                            <i class="my-icon-menuB"></i>
                            <span>算法库</span>
                        </template>
                        <el-menu-item index="algorithmsLibraryList"
                            >算法库列表</el-menu-item
                        >
                    </el-submenu>
                    <el-submenu index="sceneLibrary">
                        <template slot="title">
                            <i class="my-icon-menuC"></i>
                            <span>场景库</span>
                        </template>
                        <el-menu-item index="naturalDrivingScenarioList"
                            >自然驾驶场景</el-menu-item
                        >
                        <el-menu-item
                            index="standardRegulationSimulationScenarioList"
                            >标准法规仿真场景</el-menu-item
                        >
                        <el-menu-item
                            index="trafficAccidentSimulationScenarioList"
                            >交通事故仿真场景</el-menu-item
                        >
                        <el-menu-item index="scenarioTestPackageManagementList"
                            >场景测试包管理</el-menu-item
                        >
                        <el-menu-item index="gradingRulesList"
                            >打分规则</el-menu-item
                        >
                    </el-submenu>
                    <el-submenu index="workManagement">
                        <template slot="title">
                            <i class="my-icon-menuD"></i>
                            <span>工作管理</span>
                        </template>
                        <el-menu-item index="manualRunProjectList"
                            >手动运行项目</el-menu-item
                        >
                    </el-submenu>
                    <!-- <el-submenu index="systemManagement">
                        <template slot="title">
                            <i class="my-icon-menuF"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="accountManagement"
                            >账户管理</el-menu-item
                        >
                    </el-submenu> -->
                </el-menu>
            </div>
        </div>
        <div class="fold" v-show="menuFold">
            <img :src="imgSrc" width="100%" height="100%" />
        </div>
        <div class="unfold" v-show="!menuFold">
            <img :src="imgSrc" width="100%" height="100%" />
        </div>
    </div>
</template>

<script>
export default {
    name: "pageMenu",
    data() {
        return {
            menuFold: false, // menu是否折叠
            opened: false,
            imgSrc: require("@/assets/common/image/photoF.png"),
        };
    },
    methods: {
        menuFoldHandle(val) {
            if (val) {
                this.menuFold = false;
            } else {
                this.menuFold = true;
            }
            this.$emit("menuFold", this.menuFold);
        },
        menuSel(index, indexPath) {
            // console.log(index, indexPath);
            this.opened = indexPath[0];
        },
    },
    created() {
        localStorage.setItem(
            "Authorization",
            "Bearer 9882c634-9af6-4647-89dc-8ad53c04a56b"
        );
        // document.cookie = 'Authorization=Bearer 52de2c22-c2f9-4307-b49d-5b5593792352'
        // console.log(this.$route);
        /* let { code, ticket } = this.$route.query;
        if (code && ticket) {
            this.$axios({
                method: "post",
                url: this.$api.common.single,
                data: { code, ticket },
            }).then((res) => {
                if (res.code == 200 && !!res.info.access_token) {
                    localStorage.setItem(
                        "Authorization",
                        "Bearer " + res.info.access_token
                    );
                } else {
                    alert(res);
                }
            });
        } else {
            console.log(66);
        } */
    },
};
</script>

<style scoped lang="less">
.pageMenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 150px;
    height: 100%;

    [class^="my-icon-"] {
        vertical-align: middle;
        text-align: center;
        font-size: 18px;
        background-size: contain;
    }
}

.widthFold {
    width: 60px;
}

.panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: @themeColor;
}

.icon,
.iconFold {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 61px;
    border-bottom: 1px solid #ffffff;
    cursor: pointer;

    b {
        display: block;
        background-size: contain;
    }
}

.iconFold {
    width: 60px;
    b {
        width: 28px;
        height: 38px;
        background: url("../../assets/common/image/menu/iconFold.png") center
            no-repeat;
    }
}

.icon {
    width: 150px;
    b {
        width: 98px;
        height: 27px;
        background: url("../../assets/common/image/menu/icon.png") center
            no-repeat;
    }
}

.el-submenu [class^="my-icon-"] {
    width: 24px;
    height: 18px;
    margin-right: 5px;
}

.my-icon-menuA {
    background: url("../../assets/common/image/menu/menuA.png") center no-repeat;
}

.my-icon-menuB {
    background: url("../../assets/common/image/menu/menuB.png") center no-repeat;
}

.my-icon-menuC {
    background: url("../../assets/common/image/menu/menuC.png") center no-repeat;
}

.my-icon-menuD {
    background: url("../../assets/common/image/menu/menuD.png") center no-repeat;
}

.my-icon-menuE {
    background: url("../../assets/common/image/menu/menuE.png") center no-repeat;
}

.my-icon-menuF {
    background: url("../../assets/common/image/menu/menuF.png") center no-repeat;
}

.menuFold {
    li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        margin-top: 20px;
        cursor: pointer;

        b {
            display: block;
            width: 20px;
            height: 20px;
        }
    }

    .isOpened {
        background-color: #2979cc;
    }
}

.el-menu {
    // background: @themeColor;

    /deep/ .el-submenu__title,
    .el-menu-item {
        color: #D7E7FE;

        &.is-active {
            color: #ffffff;
            font-weight: bold;
        }
    }

    /deep/ .el-submenu__title {
        padding-left: 15px !important;
        padding-right: 10px;

        span {
            color: #ffffff;
        }
    }

    /deep/ .el-submenu__icon-arrow {
        right: 10px;
    }

    /deep/ .el-submenu__title i,
    /deep/ .el-menu-item i {
        color: #ffffff;
    }

    /deep/ .el-submenu .el-menu-item {
        min-width: auto;
        width: 100%;
        padding: 0;
        padding-left: 30px !important;
    }
}

.el-submenu.is-active {
    /deep/ .el-submenu__title {
        background-color: #2979cc !important;
    }
}

.el-submenu.is-active.is-opened {
    /deep/ .el-submenu__title {
        background-color: @themeColor !important;
    }
}

.el-submenu.is-opened {
    .el-menu,
    .el-menu-item {
        background-color: #2979cc !important;
    }
}

.hasList {
    // /deep/ .el-submenu__title
    /deep/ .el-menu-item {
        color: #d7e7fe;
    }

    /deep/ .is-active {
        background-color: #3982eb !important;
        color: #ffffff;
    }
}

.userIcon {
    > div {
        position: fixed;
        bottom: 30px;
    }
}

.fold,
.unfold {
    position: fixed;
    bottom: 30px;
    z-index: 12;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}
.fold {
    width: 36px;
    height: 36px;
    left: 12px;
}

.unfold {
    width: 60px;
    height: 60px;
    left: 35px;
}
</style>