<!--
|
* @Description: 头部导航
|
* @Author: 王旭
|
* @Date: 2022-03-01 15:49:47
|
* @LastEditTime: 2023-05-06 11:34:57
|
* @LastEditors: Andy
|
-->
|
<template>
|
<div class="header_box" :style="styleVar">
|
<el-menu
|
:default-active="`${pathName}`"
|
class="el-menu-demo"
|
:background-color="styleVar['--header-color']"
|
mode="horizontal"
|
active-text-color="#2bb8de"
|
router
|
>
|
<el-menu-item class="logo_box">
|
<div>
|
<el-image
|
:src="url"
|
fit="cover"
|
style="width: 33px; height: 33px"
|
></el-image>
|
<span class="appName"> {{ appName }}</span>
|
</div>
|
</el-menu-item>
|
<!-- <el-menu-item index="/developcenter">
|
<span class="menu_title">全息展示</span>
|
</el-menu-item> -->
|
<el-submenu index="1">
|
<template slot="title" index=""
|
><span class="menu_title">资源中心</span></template
|
>
|
<el-menu-item index="/developcenter"
|
><span class="menu_title">全息展示</span></el-menu-item
|
>
|
<el-menu-item index="/mysource"
|
><span class="menu_title">我的资源</span></el-menu-item
|
>
|
<!-- <el-menu-item index="/cimdata"><span class="menu_sub_title">CIM成果库</span></el-menu-item>
|
<el-menu-item index="/spacetime"><span class="menu_sub_title">时空数据</span></el-menu-item>
|
<el-menu-item index="/iotdata"><span class="menu_sub_title">物联感知</span></el-menu-item>
|
<el-menu-item index="/engineerdata"><span class="menu_sub_title">工程项目</span></el-menu-item>
|
<el-menu-item index="/plandata"><span class="menu_sub_title">规划管理</span></el-menu-item>
|
<el-menu-item index="/surveydata"><span class="menu_sub_title">资源调查</span></el-menu-item>
|
<el-menu-item index="/publicdata"><span class="menu_sub_title">公共专题</span></el-menu-item> -->
|
</el-submenu>
|
<el-menu-item index="/servicesmanager">
|
<span class="menu_title">服务中心</span>
|
</el-menu-item>
|
<el-menu-item index="/appusecenter">
|
<span class="menu_title">应用中心</span>
|
</el-menu-item>
|
<!-- <el-menu-item index="/sysmanager">
|
<span class="menu_title">运维中心</span>
|
</el-menu-item> -->
|
<el-submenu index="3">
|
<template slot="title" index=""
|
><span class="help_title">运维中心</span></template
|
>
|
<el-menu-item index="/usermanager"
|
><span class="menu_sub_title">用户管理</span></el-menu-item
|
>
|
<el-menu-item index="/rolemanager"
|
><span class="menu_sub_title">角色管理</span></el-menu-item
|
>
|
<el-menu-item index="/devmanager"
|
><span class="menu_sub_title">部门管理</span></el-menu-item
|
>
|
</el-submenu>
|
<el-submenu index="2">
|
<template slot="title" index=""
|
><span class="help_title">开发中心</span></template
|
>
|
<el-menu-item index="/demosource"
|
><span class="menu_sub_title">开发示例</span></el-menu-item
|
>
|
<el-menu-item index="/apidoc"
|
><span class="menu_sub_title">接口文档</span></el-menu-item
|
>
|
</el-submenu>
|
<!-- <el-menu-item index="/demosource">
|
<span class="menu_title">开发中心</span>
|
</el-menu-item> -->
|
|
<div class="nav_box">
|
<el-menu-item>
|
<!-- 用户信息 -->
|
<el-dropdown @command="handleCommand" trigger="click">
|
<span class="menu_title el-icon-user-solid"
|
>{{ user.username
|
}}<i class="el-icon-arrow-down el-icon--right"></i
|
></span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item icon="el-icon-error" command="1"
|
>退出登陆</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-menu-item>
|
</div>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
import { removeToken } from "@/utils/auth";
|
import { mapState } from "vuex";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
user: {
|
type: Object,
|
default: () => {
|
return { username: "admin" };
|
},
|
},
|
},
|
data() {
|
//这里存放数据
|
return {
|
styleVar: {
|
"--color": "rgba(14, 22, 32, 0.65)",
|
"--header-color": "#fff",
|
"--background-hover": "transparent",
|
},
|
pathName: "",
|
url: require("../assets/img/firstpage/logo.png"),
|
testData: {},
|
imgUrl:
|
"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
|
};
|
},
|
watch: {
|
// 监听,当路由发生变化的时候执行
|
$route(to, from) {
|
this.UPstyle(to.path);
|
this.pathName = to.path;
|
},
|
appName(val, newVal) {
|
console.log('xxxxx',val, newVal)
|
}
|
},
|
//方法集合
|
methods: {
|
// 退出登录
|
handleCommand(command) {
|
if (command == 1) {
|
this.$confirm("确认要退出系统么?", "退出", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
removeToken();
|
this.$router.push("/login");
|
// this.$router.go(0);
|
})
|
.catch(() => {});
|
}
|
},
|
//修改样式
|
UPstyle(e) {
|
if (e == "/firstpage") {
|
this.styleVar["--header-color"] = "#0d1b2e";
|
this.styleVar["--color"] = "rgba(240, 250, 254, 0.85)";
|
} else {
|
this.styleVar["--header-color"] = "#fff";
|
this.styleVar["--color"] = "rgba(14, 22, 32, 0.65)";
|
}
|
},
|
},
|
computed: {
|
...mapState(["appName", "headerColor"]),
|
},
|
created() {
|
this.pathName = this.$route.path;
|
this.UPstyle(this.$route.path);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.appName {
|
font-size: 26px;
|
font-weight: 500;
|
color: #00a6e2;
|
}
|
|
.el-menu-demo {
|
border-bottom: 0 !important;
|
}
|
|
.el-menu-item {
|
color: var(--color);
|
}
|
|
.nav_box {
|
display: flex;
|
justify-content: flex-end;
|
|
.menu_title {
|
font-weight: 600;
|
font-size: 16px;
|
}
|
}
|
|
.el-menu-item:hover {
|
background-color: var(--background-hover) !important;
|
outline: 0 !important;
|
color: #2bb8de !important;
|
}
|
|
.el-menu-item.is-active {
|
border-bottom: 3px solid #2bb8de !important;
|
background-color: var(--background-hover) !important;
|
}
|
|
.logo_box {
|
background: url("../assets/img/firstpage/heardlogo.png") no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
</style>
|
