|
|
|
|
@ -1,28 +1,19 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="header">
|
|
|
|
|
<!-- 折叠按钮 -->
|
|
|
|
|
<!-- <div class="collapse-btn" @click="collapseChage">
|
|
|
|
|
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
|
|
|
|
<i v-else class="el-icon-s-unfold"></i>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="logo">可视化智能管控系统</div>
|
|
|
|
|
<v-sidebar></v-sidebar>
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
<div class="header-user-con">
|
|
|
|
|
<el-select v-model="colorValue" value-key="value" @change="changeTheme">
|
|
|
|
|
<el-select v-model="colorValue" @change="changeTheme">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in colorList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
></el-option>
|
|
|
|
|
<!-- <el-option label="红色" value="红色"></el-option>
|
|
|
|
|
<el-option label="绿色" value="绿色"></el-option>
|
|
|
|
|
<el-option label="橙色" value="橙色"></el-option> -->
|
|
|
|
|
</el-select>
|
|
|
|
|
<!-- 全屏显示 -->
|
|
|
|
|
|
|
|
|
|
<div class="btn-fullscreen" @click="handleFullScreen">
|
|
|
|
|
<!-- <div class="btn-fullscreen" @click="handleFullScreen">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
effect="dark"
|
|
|
|
|
:content="fullscreen ? `取消全屏` : `全屏`"
|
|
|
|
|
@ -30,8 +21,7 @@
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-rank"></i>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- 用户头像 -->
|
|
|
|
|
<div class="user-avator">
|
|
|
|
|
<img src="../../assets/img/user.jpeg" />
|
|
|
|
|
@ -43,22 +33,29 @@
|
|
|
|
|
<i class="el-icon-caret-bottom"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item divided command="loginout"
|
|
|
|
|
>退出登录</el-dropdown-item
|
|
|
|
|
>
|
|
|
|
|
<el-dropdown-item command="noticeShow">公告</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<password-dialog
|
|
|
|
|
:dialogFormPsd="dialogFormPsd"
|
|
|
|
|
@psdDialogClose="psdDialogClose"
|
|
|
|
|
></password-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
// import bus from '../common/bus';
|
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
import updateElementUiTheme from "update-element-ui-theme";
|
|
|
|
|
import vSidebar from "./Sidebar.vue";
|
|
|
|
|
import passwordDialog from "@/views/components/passwordDialog.vue";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
vSidebar,
|
|
|
|
|
passwordDialog,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -81,90 +78,104 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
colorValue: "",
|
|
|
|
|
theme: {},
|
|
|
|
|
|
|
|
|
|
//collapse: false,
|
|
|
|
|
fullscreen: false,
|
|
|
|
|
name: "xinyin",
|
|
|
|
|
dialogFormPsd: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState(["username"]),
|
|
|
|
|
username() {
|
|
|
|
|
let username = localStorage.getItem("ms_username");
|
|
|
|
|
return username ? username : this.name;
|
|
|
|
|
let name = localStorage.getItem("username");
|
|
|
|
|
return name;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//修改主题色
|
|
|
|
|
changeTheme(e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
this.theme = this.colorList.find(function (i) {
|
|
|
|
|
return i.value === e;
|
|
|
|
|
changeTheme(event) {
|
|
|
|
|
console.log(event);
|
|
|
|
|
let colorTheme = {};
|
|
|
|
|
colorTheme = this.colorList.find(function (item) {
|
|
|
|
|
return item.value === event;
|
|
|
|
|
}); //在change中获取到整条对象数据
|
|
|
|
|
console.log(this.theme);
|
|
|
|
|
updateElementUiTheme({
|
|
|
|
|
theme: this.theme.value,
|
|
|
|
|
themeName: "--my-theme-name",
|
|
|
|
|
});
|
|
|
|
|
console.log(colorTheme);
|
|
|
|
|
|
|
|
|
|
const app = document.getElementById("app");
|
|
|
|
|
console.log(app);
|
|
|
|
|
if (this.theme.label === "蓝色") {
|
|
|
|
|
this.theme.value = "#20a0ff";
|
|
|
|
|
if (colorTheme.label === "蓝色") {
|
|
|
|
|
colorTheme.value = "#20a0ff";
|
|
|
|
|
app.classList.add("blueStyle");
|
|
|
|
|
app.classList.remove("redStyle", "greenStyle", "orangeStyle");
|
|
|
|
|
} else if (this.theme.label === "红色") {
|
|
|
|
|
this.theme.value = "#EE320C";
|
|
|
|
|
} else if (colorTheme.label === "红色") {
|
|
|
|
|
colorTheme.value = "#EE320C";
|
|
|
|
|
app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
|
|
|
|
|
app.classList.add("redStyle");
|
|
|
|
|
} else if (this.theme.label === "绿色") {
|
|
|
|
|
this.theme.value = "#25EE28";
|
|
|
|
|
} else if (colorTheme.label === "绿色") {
|
|
|
|
|
colorTheme.value = "#25EE28";
|
|
|
|
|
app.classList.add("greenStyle");
|
|
|
|
|
} else if (this.theme.label === "橙色") {
|
|
|
|
|
this.theme.value = "#f08200";
|
|
|
|
|
} else if (colorTheme.label === "橙色") {
|
|
|
|
|
colorTheme.value = "#f08200";
|
|
|
|
|
app.classList.remove("blueStyle", "greenStyle", "redStyle");
|
|
|
|
|
app.classList.add("orangeStyle");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updateElementUiTheme({
|
|
|
|
|
theme: colorTheme.value,
|
|
|
|
|
themeName: "--my-theme-name",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 用户名下拉菜单选择事件
|
|
|
|
|
handleCommand(command) {
|
|
|
|
|
if (command == "loginout") {
|
|
|
|
|
localStorage.removeItem("ms_username");
|
|
|
|
|
switch (command) {
|
|
|
|
|
case "noticeShow": //公告
|
|
|
|
|
console.log(command);
|
|
|
|
|
break;
|
|
|
|
|
case "changePwd": //修改密码
|
|
|
|
|
console.log(command);
|
|
|
|
|
this.dialogFormPsd = true;
|
|
|
|
|
break;
|
|
|
|
|
case "loginout": //退出登录
|
|
|
|
|
this.$store.commit("REMOVE_INFO");
|
|
|
|
|
this.$router.push("/login");
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
// if (command == "loginout") {
|
|
|
|
|
// localStorage.removeItem("ms_username");
|
|
|
|
|
// this.$router.push("/login");
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 侧边栏折叠
|
|
|
|
|
// collapseChage() {
|
|
|
|
|
// this.collapse = !this.collapse;
|
|
|
|
|
// bus.$emit('collapse', this.collapse);
|
|
|
|
|
// this.$store.commit('changeOpen', this.collapse);
|
|
|
|
|
// },
|
|
|
|
|
// 全屏事件
|
|
|
|
|
handleFullScreen() {
|
|
|
|
|
let element = document.documentElement;
|
|
|
|
|
if (this.fullscreen) {
|
|
|
|
|
if (document.exitFullscreen) {
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
} else if (document.webkitCancelFullScreen) {
|
|
|
|
|
document.webkitCancelFullScreen();
|
|
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
|
|
document.mozCancelFullScreen();
|
|
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
|
|
document.msExitFullscreen();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (element.requestFullscreen) {
|
|
|
|
|
element.requestFullscreen();
|
|
|
|
|
} else if (element.webkitRequestFullScreen) {
|
|
|
|
|
element.webkitRequestFullScreen();
|
|
|
|
|
} else if (element.mozRequestFullScreen) {
|
|
|
|
|
element.mozRequestFullScreen();
|
|
|
|
|
} else if (element.msRequestFullscreen) {
|
|
|
|
|
// IE11
|
|
|
|
|
element.msRequestFullscreen();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.fullscreen = !this.fullscreen;
|
|
|
|
|
|
|
|
|
|
//psdDialogClose 修改密码弹窗关闭
|
|
|
|
|
psdDialogClose() {
|
|
|
|
|
this.dialogFormPsd = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 全屏事件
|
|
|
|
|
// handleFullScreen() {
|
|
|
|
|
// let element = document.documentElement;
|
|
|
|
|
// if (this.fullscreen) {
|
|
|
|
|
// if (document.exitFullscreen) {
|
|
|
|
|
// document.exitFullscreen();
|
|
|
|
|
// } else if (document.webkitCancelFullScreen) {
|
|
|
|
|
// document.webkitCancelFullScreen();
|
|
|
|
|
// } else if (document.mozCancelFullScreen) {
|
|
|
|
|
// document.mozCancelFullScreen();
|
|
|
|
|
// } else if (document.msExitFullscreen) {
|
|
|
|
|
// document.msExitFullscreen();
|
|
|
|
|
// }
|
|
|
|
|
// } else {
|
|
|
|
|
// if (element.requestFullscreen) {
|
|
|
|
|
// element.requestFullscreen();
|
|
|
|
|
// } else if (element.webkitRequestFullScreen) {
|
|
|
|
|
// element.webkitRequestFullScreen();
|
|
|
|
|
// } else if (element.mozRequestFullScreen) {
|
|
|
|
|
// element.mozRequestFullScreen();
|
|
|
|
|
// } else if (element.msRequestFullscreen) {
|
|
|
|
|
// // IE11
|
|
|
|
|
// element.msRequestFullscreen();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// this.fullscreen = !this.fullscreen;
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.colorValue = this.colorList[0].label;
|
|
|
|
|
|
fanluyan
2 years ago
