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 === 'mainPage' }"
                >
                    <b class="my-icon-home is"></b>
                </li>
                <!--
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'modelLibrary' }"
                >
                    <b class="my-icon-model"></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 === 'workManagement' }"
                >
                    <b class="my-icon-menuD"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{ isOpened: opened === 'systemManagement' }"
                >
                    <b class="my-icon-menuF"></b>
                </li> 
                -->
                <li
                    v-for="(item, i) in menuItems"
                    :key="i"
                    @click="menuFoldHandle(1)"
                    :class="{ isOpened: opened === item.id }"
                >
                    <b :class="item.icon"></b>
                </li>
                <li
                    @click="menuFoldHandle(1)"
                    v-bind:class="{
                        isOpened: opened === 'personalInformation',
                    }"
                >
                    <b class="el-icon-user-solid white is"></b>
                </li>
            </ul>

            <el-scrollbar id="elScrollBar" ref="scrollbar" view-class="scroll">
                <div class="menuList" v-show="!menuFold">
                    <el-menu
                        ref="menu"
                        :default-active="activeMenu"
                        class="el-menu-vertical-demo"
                        :background-color="themeColor"
                        :unique-opened="true"
                        :router="true"
                        @select="menuSel"
                    >
                        <!-- active-text-color="#ffffff" -->
                        <el-menu-item :index="menus[0]" class="indexMenu">
                            <i class="my-icon-home"></i>
                            <span>首页</span>
                        </el-menu-item>

                        <!--
                    <el-submenu :index="menus[1]">
                        <template slot="title">
                            <i class="my-icon-model"></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="menus[2]">
                        <template slot="title">
                            <i class="my-icon-algo"></i>
                            <span>算法库</span>
                        </template>
                        <el-menu-item index="/algorithmsLibraryList"
                            >算法库列表</el-menu-item
                        >
                        <el-menu-item index="/algorithmsPlatformList"
                            >算法平台</el-menu-item
                        >
                    </el-submenu>
                    <el-submenu :index="menus[3]">
                        <template slot="title">
                            <i class="my-icon-scene"></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="menus[4]">
                        <template slot="title">
                            <i class="my-icon-work"></i>
                            <span>工作管理</span>
                        </template>
                        <el-menu-item index="/manualRunProjectList"
                            >手动运行项目</el-menu-item
                        >
                    </el-submenu>
                    <el-submenu :index="menus[5]">
                        <template slot="title">
                            <i class="my-icon-system"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/accountManagement"
                            >账户管理</el-menu-item
                        >
                        <el-menu-item index="/parameterManagement"
                            >参数管理</el-menu-item
                        >    
                        <el-menu-item index="/clusteringManagement"
                            >集群管理</el-menu-item>
                    </el-submenu>
                    -->

                        <el-submenu
                            v-for="(item, i) in menuItems"
                            :index="item.id"
                            :key="i"
                        >
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item
                                v-for="(item2, i2) in item.children"
                                :index="item2.router"
                                :key="i2"
                            >
                                {{ item2.name }}
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            index="personalInformation"
                            class="indexMenu"
                        >
                            <i class="el-icon-user-solid"></i>
                            <span>个人信息</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "pageMenu",
    props: {
        menuItems: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            menuFold: false, // menu是否折叠
            opened: false,
            menus: [
                "mainPage",
                "modelLibrary",
                "algorithmsLibrary",
                "sceneLibrary",
                "workManagement",
                "systemManagement",
                "personalInformation",
            ],
            activeMenu: "mainPage", // 当前menu
            expiresTime: "",
            toExpiresTime: "",
            tokenTimer: undefined,
        };
    },
    computed: {
        ...mapState(["themeColor"]),
    },
    mounted() {
        //设置一个定时器，定时在距离过期前5min，这个定时器会发送refreshToken请求

        this.expiresTime = localStorage.getItem("expiresTime");
        if (this.expiresTime) {
            this.toExpiresTime =
                new Date(this.expiresTime).getTime() - new Date().getTime();
            let that = this;
            if (this.toExpiresTime < 5 * 60 * 1000) {
                this.refreshToken();
            } else {
                if (this.toExpiresTime < 24 * 60 * 60 * 1000) {
                    //当过期时间小于一天时才会定时执行，否则会因为过期时间过大无法执行
                    this.tokenTimer = setTimeout(function () {
                        that.refreshToken();
                    }, this.toExpiresTime - 5 * 60 * 1000);
                }
            }
        }
    },
    watch: {
        activeMenu(newV) {
            console.log(newV);
        },
    },
    methods: {
        menuFoldHandle(val) {
            if (val) {
                this.menuFold = false;
            } else {
                this.menuFold = true;
            }
            this.$emit("menuFold", this.menuFold);
        },
        menuSel(index, indexPath) {
            this.opened = indexPath[indexPath.length - 1];

            // 如果是首页or个人信息 手动关闭其他菜单
            if (index === this.menus[0] || index === this.menus[6]) {
                this.menuItems.forEach((i) => {
                    this.$refs.menu.close(i.id);
                });
            }
        },
        checkExpiresTime() {
            this.toExpiresTime =
                new Date(this.expiresTime).getTime() - new Date().getTime();
            if (this.toExpiresTime < 5 * 60 * 1000) {
                this.refreshToken();
            }
        },
        refreshToken() {
            this.$axios({
                method: "post",
                url: this.$api.common.refreshToken,
                noLoading: true,
                data: {
                    refreshToken: localStorage.getItem("refreshToken"),
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    let Authorization =
                        res.info.token_type + " " + res.info.access_token;
                    let refreshToken = res.info.refresh_token;
                    let expiresTime = res.info.expires_time;
                    localStorage.clear();
                    localStorage.setItem("Authorization", Authorization);
                    localStorage.setItem("refreshToken", refreshToken);
                    localStorage.setItem("expiresTime", expiresTime);

                    this.expiresTime = expiresTime;
                    this.toExpiresTime =
                        new Date(this.expiresTime).getTime() -
                        new Date().getTime();
                    clearTimeout(this.tokenTimer);
                    if (this.toExpiresTime < 5 * 60 * 1000) {
                        //this.refreshToken()
                    } else {
                        if (this.toExpiresTime < 24 * 60 * 60 * 1000) {
                            this.tokenTimer = setTimeout(function () {
                                let that = this;
                                that.refreshToken();
                            }, this.toExpiresTime - 5 * 60 * 1000);
                        }
                    }
                } else {
                    if (res.code == 400) {
                        //refreshToken请求返回400则跳回登录页
                        let loginUrl = window.location.origin + "/login";
                        window.location.href = loginUrl;
                    }
                }
            });
        },
    },
};
</script>

<style scoped lang="less">
.pageMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 666;
    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;
    }
}

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

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

#elScrollBar {
    width: 100%;
    height: 100%;
}

.el-scrollbar__wrap {
    overflow-y: auto;
}

.el-scrollbar__bar {
    opacity: 0.6 !important;
}
.el-scrollbar__bar:hover {
    opacity: 1 !important;
}

.menuList {
    padding-bottom: 60px;
}

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

.indexMenu {
    padding-left: 15px !important;
    padding-right: 10px !important;

    span {
        color: #ffffff !important;
    }
}

.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 {
    border-right-color: @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-menu-item {
        color: #d7e7fe;
    }

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

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

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

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

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

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

.my-icon-work {
    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-system {
    background: url("../../assets/common/image/menu/menuF.png") center no-repeat;
}
.el-icon-user-solid {
    width: 24px;
    height: 18px;
    font-size: 20px;
}
&.white {
    color: #ffffff;
}
</style>