|
@@ -1,265 +1,296 @@
|
|
|
<template>
|
|
|
- <div class="breadCrumbPanel">
|
|
|
- <div class="contentClass">
|
|
|
- <el-breadcrumb separator="/">
|
|
|
- <transition-group name="breadcrumb">
|
|
|
- <el-breadcrumb-item v-for="(item, index) in list" :key="item.path + item.name">
|
|
|
- <router-link v-if="!disabledRoutes.includes(item.name)" @click="console.log(item)" :to="
|
|
|
- item.name !== $route.name
|
|
|
- ? item.fullPath
|
|
|
- ? item.fullPath
|
|
|
- : item.path
|
|
|
- ? item.path
|
|
|
- : '/'
|
|
|
- : $route.fullPath
|
|
|
- ">
|
|
|
- <i class="el-icon-folder-opened" v-if="index > 0 && index === list.length - 1"></i>
|
|
|
- {{ item.meta.tabname }}
|
|
|
- </router-link>
|
|
|
- <span v-else style="line-height: 20px">{{
|
|
|
- item.meta.tabname
|
|
|
- }}</span>
|
|
|
- </el-breadcrumb-item>
|
|
|
- </transition-group>
|
|
|
- </el-breadcrumb>
|
|
|
- </div>
|
|
|
+ <div class="breadCrumbPanel">
|
|
|
+ <div class="contentClass">
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
+ <transition-group name="breadcrumb">
|
|
|
+ <el-breadcrumb-item
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="item.path + item.name"
|
|
|
+ >
|
|
|
+ <router-link
|
|
|
+ v-if="!disabledRoutes.includes(item.name)"
|
|
|
+ @click="console.log(item)"
|
|
|
+ :to="
|
|
|
+ item.name !== $route.name
|
|
|
+ ? item.fullPath
|
|
|
+ ? item.fullPath
|
|
|
+ : item.path
|
|
|
+ ? item.path
|
|
|
+ : '/'
|
|
|
+ : $route.fullPath
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-folder-opened"
|
|
|
+ v-if="index > 0 && index === list.length - 1"
|
|
|
+ ></i>
|
|
|
+ {{ item.meta.tabname }}
|
|
|
+ </router-link>
|
|
|
+ <span v-else style="line-height: 20px">{{
|
|
|
+ item.meta.tabname
|
|
|
+ }}</span>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </transition-group>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="nameBox">
|
|
|
- <div>{{ $store.state.username }}</div>
|
|
|
- <div class="el-icon-switch-button exit" @click="exit"></div>
|
|
|
- </div>
|
|
|
+ <div class="nameBox">
|
|
|
+ <div>{{ $store.state.username }}</div>
|
|
|
+ <div class="el-icon-switch-button exit" @click="exit"></div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState } from "vuex";
|
|
|
+import { mapState } from 'vuex'
|
|
|
export default {
|
|
|
- name: "breadCrumb",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 相关页面只为占位,页面是空白,无法展示
|
|
|
- disabledRoutes: [
|
|
|
- "modelLibrary",
|
|
|
- "algorithmsLibrary",
|
|
|
- "sceneLibrary",
|
|
|
- "systemManagement",
|
|
|
- "workManagement",
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- exit() {
|
|
|
- this.$confirm("是否确定退出系统?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- localStorage.clear();
|
|
|
- // let loginUrl = window.location.origin + "/login";
|
|
|
- // window.location.href = loginUrl;
|
|
|
- this.$router.push({
|
|
|
- path: "/login",
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
- },
|
|
|
+ name: 'breadCrumb',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 相关页面只为占位,页面是空白,无法展示
|
|
|
+ disabledRoutes: [
|
|
|
+ 'modelLibrary',
|
|
|
+ 'algorithmsLibrary',
|
|
|
+ 'sceneLibrary',
|
|
|
+ 'systemManagement',
|
|
|
+ 'workManagement',
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ exit() {
|
|
|
+ this.$confirm('是否确定退出系统?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ localStorage.clear()
|
|
|
+ // let loginUrl = window.location.origin + "/login";
|
|
|
+ // window.location.href = loginUrl;
|
|
|
+ this.$router.push({
|
|
|
+ path: '/login',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapState([
|
|
|
- "projectInfoTabname", "taskInfoTabname", "vehicleConfigurationDetailTabName",
|
|
|
- "exportAlgorithmsTabName", "gitAlgorithmsTabName", "gradingRuleDetailTabName",
|
|
|
- "scenePacketListTabName", "parameterDetailTabName", "clusteringDetailTabName",
|
|
|
- "scenePacketDetailTabName", "scenePacketDistributionDetailTabName", "editAccountTabName",
|
|
|
- "vehicleModelDetailTabName",
|
|
|
- ]),
|
|
|
- list() {
|
|
|
- // console.log(this.$route);
|
|
|
- let isMainPage = false;
|
|
|
- this.$route.matched.filter((item) => {
|
|
|
- // 项目详情和任务详情的tabname需要动态获取
|
|
|
- if (item.name === "projectInfo") {
|
|
|
- item.meta.tabname =
|
|
|
- this.projectInfoTabname ||
|
|
|
- localStorage.getItem("projectInfoTabname") ||
|
|
|
- "项目详情";
|
|
|
- }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState([
|
|
|
+ 'projectInfoTabname',
|
|
|
+ 'taskInfoTabname',
|
|
|
+ 'vehicleConfigurationDetailTabName',
|
|
|
+ 'exportAlgorithmsTabName',
|
|
|
+ 'gitAlgorithmsTabName',
|
|
|
+ 'gradingRuleDetailTabName',
|
|
|
+ 'scenePacketListTabName',
|
|
|
+ 'parameterDetailTabName',
|
|
|
+ 'clusteringDetailTabName',
|
|
|
+ 'scenePacketDetailTabName',
|
|
|
+ 'scenePacketDistributionDetailTabName',
|
|
|
+ 'editAccountTabName',
|
|
|
+ 'vehicleModelDetailTabName',
|
|
|
+ 'evaluateTabname'
|
|
|
+ ]),
|
|
|
+ list() {
|
|
|
+ let isMainPage = false
|
|
|
+ this.$route.matched.filter((item) => {
|
|
|
+ if (item.name === 'simulationEdit') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.evaluateTabname ||
|
|
|
+ localStorage.getItem('evaluateTabname') ||
|
|
|
+ '多模式仿真详情'
|
|
|
+ }
|
|
|
|
|
|
- if (item.name === "taskInfo") {
|
|
|
- item.meta.tabname =
|
|
|
- this.taskInfoTabname ||
|
|
|
- localStorage.getItem("taskInfoTabname") ||
|
|
|
- "任务详情";
|
|
|
- }
|
|
|
+ if (item.name === 'simulationEvaluate') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.evaluateTabname ||
|
|
|
+ localStorage.getItem('evaluateTabname') ||
|
|
|
+ '多模式仿真评价'
|
|
|
+ }
|
|
|
|
|
|
- if (item.name === "vehicleConfigurationDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.vehicleConfigurationDetailTabName ||
|
|
|
- localStorage.getItem("vehicleConfigurationDetailTabName") ||
|
|
|
- "车辆配置详情";
|
|
|
- } else if (item.name === "exportAlgorithms") {
|
|
|
- item.meta.tabname =
|
|
|
- this.exportAlgorithmsTabName ||
|
|
|
- localStorage.getItem("exportAlgorithmsTabName") ||
|
|
|
- "导入算法";
|
|
|
- } else if (item.name === "gitAlgorithms") {
|
|
|
- item.meta.tabname =
|
|
|
- this.gitAlgorithmsTabName ||
|
|
|
- localStorage.getItem("gitAlgorithmsTabName") ||
|
|
|
- "仓库算法";
|
|
|
- } else if (item.name === "gradingRuleDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.gradingRuleDetailTabName ||
|
|
|
- localStorage.getItem("gradingRuleDetailTabName") ||
|
|
|
- "评分规则详情";
|
|
|
- } else if (item.name === "scenePacketList") {
|
|
|
- item.meta.tabname =
|
|
|
- this.scenePacketListTabName ||
|
|
|
- localStorage.getItem("scenePacketListTabName") ||
|
|
|
- "场景测试包";
|
|
|
- } else if (item.name === "parameterDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.parameterDetailTabName ||
|
|
|
- localStorage.getItem("parameterDetailTabName") ||
|
|
|
- "编辑参数配置";
|
|
|
- } else if (item.name === "clusteringDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.clusteringDetailTabName ||
|
|
|
- localStorage.getItem("clusteringDetailTabName") ||
|
|
|
- "编辑集群配置";
|
|
|
- } else if (item.name === "scenePacketDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.scenePacketDetailTabName ||
|
|
|
- localStorage.getItem("scenePacketDetailTabName") ||
|
|
|
- "场景包详情";
|
|
|
- } else if (item.name === "scenePacketDistributionDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.scenePacketDistributionDetailTabName ||
|
|
|
- localStorage.getItem("scenePacketDistributionDetailTabName") ||
|
|
|
- "场景包分配详情";
|
|
|
- } else if (item.name === "editAccount") {
|
|
|
- item.meta.tabname =
|
|
|
- this.editAccountTabName ||
|
|
|
- localStorage.getItem("editAccountTabName") ||
|
|
|
- "编辑账户";
|
|
|
- } else if (item.name === "vehicleModelDetail") {
|
|
|
- item.meta.tabname =
|
|
|
- this.vehicleModelDetailTabName ||
|
|
|
- localStorage.getItem("vehicleModelDetailTabName") ||
|
|
|
- "车辆设置详情";
|
|
|
- }
|
|
|
+ // 项目详情和任务详情的tabname需要动态获取
|
|
|
+ if (item.name === 'projectInfo') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.projectInfoTabname ||
|
|
|
+ localStorage.getItem('projectInfoTabname') ||
|
|
|
+ '项目详情'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.name === 'taskInfo') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.taskInfoTabname ||
|
|
|
+ localStorage.getItem('taskInfoTabname') ||
|
|
|
+ '任务详情'
|
|
|
+ }
|
|
|
|
|
|
- if (item.name === this.$route.name) {
|
|
|
- item.fullPath = this.$route.fullPath;
|
|
|
- }
|
|
|
+ if (item.name === 'vehicleConfigurationDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.vehicleConfigurationDetailTabName ||
|
|
|
+ localStorage.getItem('vehicleConfigurationDetailTabName') ||
|
|
|
+ '车辆配置详情'
|
|
|
+ } else if (item.name === 'exportAlgorithms') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.exportAlgorithmsTabName ||
|
|
|
+ localStorage.getItem('exportAlgorithmsTabName') ||
|
|
|
+ '导入算法'
|
|
|
+ } else if (item.name === 'gitAlgorithms') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.gitAlgorithmsTabName ||
|
|
|
+ localStorage.getItem('gitAlgorithmsTabName') ||
|
|
|
+ '仓库算法'
|
|
|
+ } else if (item.name === 'gradingRuleDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.gradingRuleDetailTabName ||
|
|
|
+ localStorage.getItem('gradingRuleDetailTabName') ||
|
|
|
+ '评分规则详情'
|
|
|
+ } else if (item.name === 'scenePacketList') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.scenePacketListTabName ||
|
|
|
+ localStorage.getItem('scenePacketListTabName') ||
|
|
|
+ '场景测试包'
|
|
|
+ } else if (item.name === 'parameterDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.parameterDetailTabName ||
|
|
|
+ localStorage.getItem('parameterDetailTabName') ||
|
|
|
+ '编辑参数配置'
|
|
|
+ } else if (item.name === 'clusteringDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.clusteringDetailTabName ||
|
|
|
+ localStorage.getItem('clusteringDetailTabName') ||
|
|
|
+ '编辑集群配置'
|
|
|
+ } else if (item.name === 'scenePacketDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.scenePacketDetailTabName ||
|
|
|
+ localStorage.getItem('scenePacketDetailTabName') ||
|
|
|
+ '场景包详情'
|
|
|
+ } else if (item.name === 'scenePacketDistributionDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.scenePacketDistributionDetailTabName ||
|
|
|
+ localStorage.getItem('scenePacketDistributionDetailTabName') ||
|
|
|
+ '场景包分配详情'
|
|
|
+ } else if (item.name === 'editAccount') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.editAccountTabName ||
|
|
|
+ localStorage.getItem('editAccountTabName') ||
|
|
|
+ '编辑账户'
|
|
|
+ } else if (item.name === 'vehicleModelDetail') {
|
|
|
+ item.meta.tabname =
|
|
|
+ this.vehicleModelDetailTabName ||
|
|
|
+ localStorage.getItem('vehicleModelDetailTabName') ||
|
|
|
+ '车辆设置详情'
|
|
|
+ }
|
|
|
|
|
|
- if (item.name === "mainPage") {
|
|
|
- isMainPage = true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (isMainPage) {
|
|
|
- // 如果跳转首页,会有 / 需要去掉
|
|
|
- return this.$route.matched.slice(0, 1);
|
|
|
- } else {
|
|
|
- // 不要第一个显示首页的
|
|
|
- return this.$route.matched.slice(1);
|
|
|
- }
|
|
|
- },
|
|
|
+ if (item.name === this.$route.name) {
|
|
|
+ item.fullPath = this.$route.fullPath
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.name === 'mainPage') {
|
|
|
+ isMainPage = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (isMainPage) {
|
|
|
+ // 如果跳转首页,会有 / 需要去掉
|
|
|
+ return this.$route.matched.slice(0, 1)
|
|
|
+ } else {
|
|
|
+ // 不要第一个显示首页的
|
|
|
+ return this.$route.matched.slice(1)
|
|
|
+ }
|
|
|
},
|
|
|
-};
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.breadCrumbPanel {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 150px;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 666;
|
|
|
- height: 50px;
|
|
|
- line-height: 48px;
|
|
|
- border-bottom: 2px solid #f5f7fa;
|
|
|
- background-color: #ffffff;
|
|
|
- overflow: hidden;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 150px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 666;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 48px;
|
|
|
+ border-bottom: 2px solid #f5f7fa;
|
|
|
+ background-color: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .contentClass {
|
|
|
- // width: 1100px;
|
|
|
- // margin: 0 auto;
|
|
|
- // flex: 1;
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 12px;
|
|
|
+ .contentClass {
|
|
|
+ // width: 1100px;
|
|
|
+ // margin: 0 auto;
|
|
|
+ // flex: 1;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 12px;
|
|
|
|
|
|
- // .breadcrumb {
|
|
|
- // height: 30px;
|
|
|
- // border-radius: 4px;
|
|
|
- // margin-bottom: 0px;
|
|
|
- // position: relative;
|
|
|
- // }
|
|
|
+ // .breadcrumb {
|
|
|
+ // height: 30px;
|
|
|
+ // border-radius: 4px;
|
|
|
+ // margin-bottom: 0px;
|
|
|
+ // position: relative;
|
|
|
+ // }
|
|
|
|
|
|
- /deep/ .el-breadcrumb {
|
|
|
-
|
|
|
- >span {
|
|
|
- display: block;
|
|
|
- width: 3000px;
|
|
|
- }
|
|
|
- }
|
|
|
+ /deep/ .el-breadcrumb {
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ width: 3000px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /deep/ .el-breadcrumb__inner a {
|
|
|
- color: #333;
|
|
|
- font-weight: normal;
|
|
|
- user-select: none;
|
|
|
- line-height: 20px;
|
|
|
+ /deep/ .el-breadcrumb__inner a {
|
|
|
+ color: #333;
|
|
|
+ font-weight: normal;
|
|
|
+ user-select: none;
|
|
|
+ line-height: 20px;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: @themeColor;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ color: @themeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
|
|
- .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
|
|
|
- .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
|
|
|
- .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
|
|
|
- /*font-weight: 700;*/
|
|
|
- color: @themeColor;
|
|
|
- user-select: none;
|
|
|
- line-height: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
|
|
+ .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
|
|
|
+ .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
|
|
|
+ .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
|
|
|
+ /*font-weight: 700;*/
|
|
|
+ color: @themeColor;
|
|
|
+ user-select: none;
|
|
|
+ line-height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
|
|
|
- /deep/ .el-breadcrumb__separator[class*="el-icon-arrow-right"] {
|
|
|
- margin: 0px 3px 0px 1px;
|
|
|
- }
|
|
|
+ /deep/ .el-breadcrumb__separator[class*='el-icon-arrow-right'] {
|
|
|
+ margin: 0px 3px 0px 1px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .nameBox {
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- // right: 20px;
|
|
|
- right: 0;
|
|
|
- z-index: 669;
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
- padding: 0 20px;
|
|
|
- background-color: #ffffff;
|
|
|
+ .nameBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ // right: 20px;
|
|
|
+ right: 0;
|
|
|
+ z-index: 669;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
|
- div {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
+ div {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
|
|
|
- .exit {
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .exit {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
|
|
|
- .exit:hover {
|
|
|
- color: @themeColor;
|
|
|
- }
|
|
|
+ .exit:hover {
|
|
|
+ color: @themeColor;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- /* .avatarBox {
|
|
|
+ /* .avatarBox {
|
|
|
position: absolute;
|
|
|
top: 4px;
|
|
|
right: 20px;
|