<template>
|
<div class="tools">
|
<div class="tools-left">
|
<div
|
:class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
|
@click="togglePreference()"
|
>
|
<img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
|
</div>
|
<div class="tools-icon no-hover-style">
|
<img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI-新.png`" alt />
|
</div>
|
</div>
|
<div class="tools-middle">
|
<div
|
v-for="dock in $store.state.desktop.minDocks"
|
:key="dock.id"
|
class="dock-item-wrap"
|
:class="{'actived':dock.highlight}"
|
>
|
<a @click="dockClick(dock)">
|
<img class="dock-item" :src="dock.src" :alt="dock.alt" />
|
<img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot" />
|
<!-- <iframe class="dock-shot" :src="dock.url" ></iframe> -->
|
</a>
|
</div>
|
</div>
|
<div class="tools-right">
|
<div class="tools-icon">
|
<img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
|
</div>
|
<div class="tools-icon">
|
<img :src="`${publicPath}images/desktop/header-icon/help.png`" alt />
|
</div>
|
<div class="tools-icon" @click="notificationCenterClick()">
|
<img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt />
|
</div>
|
<div class="tools-icon">
|
<el-dropdown size="small" placement="bottom">
|
<span class="el-dropdown-link">
|
<img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
|
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
|
</span>
|
<el-dropdown-menu slot="dropdown" style="top: 44px;">
|
<el-dropdown-item style="text-align:left">
|
<b>Hi {{userInfo.username}}</b>
|
</el-dropdown-item>
|
<el-dropdown-item @click.native="showPasswdForm = true">修改密码</el-dropdown-item>
|
<el-dropdown-item @click.native="toLogout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<el-dialog title="修改密码" :visible.sync="showPasswdForm" :append-to-body="true" width="500px">
|
<el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px">
|
<el-form-item label="旧密码" prop="oldPwd">
|
<el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPwd">
|
<el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="checkPwd">
|
<el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="info" @click="showPasswdForm = false" size="small">取 消</el-button>
|
<el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import html2canvas from 'html2canvas';
|
import { logout, updatePwd } from "@/api/login";
|
export default {
|
name: "Tools",
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入密码'));
|
} else {
|
if (this.passwdForm.checkPwd !== '') {
|
this.$refs.ruleForm.validateField('checkPwd');
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'));
|
} else if (value !== this.passwdForm.newPwd) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
publicPath: process.env.BASE_URL,
|
notificationCenterVisible: false,
|
notificationCenterMessageCount: 0,
|
maxOrder: 0,
|
maxOrderOne: '',
|
userInfo: {},
|
showPasswdForm: false,
|
rules: {
|
oldPwd: [
|
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
],
|
newPwd: [
|
{ required: true, validator: validatePass, trigger: 'blur' }
|
],
|
checkPwd: [
|
{ required: true, validator: validatePass2, trigger: 'blur' }
|
]
|
},
|
passwdForm: {
|
oldPwd: "",
|
newPwd: "",
|
checkPwd: ""
|
},
|
|
};
|
},
|
created() {
|
let _that = this;
|
this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"));
|
console.log(this.userInfo)
|
if (window.toolIntervalArr) {
|
window.toolIntervalArr.forEach(item => clearInterval(item));
|
}
|
|
window.toolIntervalArr = [
|
setInterval(function () {
|
_that.notificationCenterMessageCount += 1;
|
}, 600)
|
];
|
},
|
// watch:{
|
// '$store.state.desktop.frames':{
|
// handler(n,o){
|
// if(n){
|
// ;
|
// n.forEach((item,index) => {
|
// if(item.order >= this.maxOrder){
|
// this.maxOrderOne = item.id;
|
// }
|
// });
|
// }
|
// },
|
// deep: true
|
// }
|
// },
|
|
|
methods: {
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let json = {
|
oldPwd: this.passwdForm.oldPwd,
|
newPwd: this.passwdForm.checkPwd
|
}
|
updatePwd(json).then(res => {
|
console.log(res, '修改密码')
|
this.$notify({
|
type: res.success ? 'success' : 'error',
|
message: res.msg
|
})
|
if (res.success) {
|
this.showPasswdForm = false
|
// this.$nextTick(_=>{
|
// this.toLogout('修改密码成功，请重新登录！')
|
// })
|
}
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
notificationCenterClick: function () {
|
this.notificationCenterVisible = !this.notificationCenterVisible;
|
this.$store.commit(
|
"desktop/changeNotificationCenterVisible",
|
this.notificationCenterVisible
|
);
|
},
|
notificationCenterNoMessage: function () {
|
return this.$store.state.desktop.messageNotices.length === 0;
|
},
|
notificationCenterMessageFlicker: function () {
|
return (
|
this.notificationCenterMessageCount % 2 === 0 &&
|
!this.notificationCenterNoMessage()
|
);
|
},
|
|
togglePreference() {
|
//this.$store.commit("desktop/togglePreference");
|
//显示桌面,最小化已打开的应用
|
;
|
this.$store.state.desktop.frames.forEach(frame => {
|
this.$store.commit('desktop/addMinDock', {
|
id: frame.id,
|
src: frame.icon,
|
alt: frame.title,
|
type: "3",
|
screenshot: ''
|
});
|
})
|
},
|
dockClick(dock) {
|
|
if (dock.type === "1") {
|
window.open(dock.url);
|
} else if (dock.type === "2") {
|
this.$store.dispatch("desktop/addFrame", {
|
id: dock.id,
|
icon: dock.src,
|
title: dock.name,
|
url: dock.url
|
});
|
} else if (dock.type === "3") {
|
this.$store.commit("desktop/resetMinFrame", dock.id);
|
//点击的iframe置顶并高亮
|
this.$store.commit("desktop/refreshFrame", dock);
|
}
|
},
|
toolHover(dock) {
|
//this.$parent.screenShot(dock)
|
},
|
|
toLogout() {
|
let _this = this;
|
this.$confirm("提示：确定退出吗？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
}).then(_ => {
|
logout().then(res => {
|
if (res === "退出成功") {
|
sessionStorage.removeItem("userInfo");
|
// 手动退出, 取消自动登录
|
sessionStorage.removeItem("autoLogin");
|
_this.userInfo = {};
|
location.assign('/view/index');
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出成功！"
|
});
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出失败!"
|
});
|
}
|
});
|
}).catch(_ => {
|
console.log("退出失败");
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.tools {
|
width: 100%;
|
position: fixed;
|
top: 0;
|
height: 40px;
|
line-height: 40px;
|
background-color: #d9e5f1;
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
z-index: 120;
|
color: #000;
|
}
|
.tools .center {
|
width: 1300px;
|
height: 40px;
|
margin: auto;
|
}
|
.tools .tools-left {
|
width: 275px;
|
height: 100%;
|
float: left;
|
margin-left: 14px;
|
}
|
.tools .tools-middle {
|
float: left;
|
position: relative;
|
}
|
|
.tools .tools-middle::before {
|
width: 1px;
|
height: 20px;
|
content: "";
|
position: absolute;
|
top: 10px;
|
left: 0;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
.tools .tools-middle .dock-item-wrap {
|
display: inline-block;
|
padding: 0 10px;
|
height: 38px;
|
line-height: 54px;
|
margin-right: 1px;
|
border-bottom: 2px solid transparent;
|
position: relative;
|
}
|
.tools .tools-middle .dock-item-wrap:hover {
|
color: white;
|
background-color: #98aabe;
|
}
|
.tools-middle .dock-item-wrap.actived {
|
border-color: #40c3ff;
|
background-color: #98aabe;
|
}
|
.dock-item-wrap a {
|
height: 100%;
|
}
|
.dock-item-wrap img {
|
width: auto;
|
height: 70%;
|
}
|
.dock-item-wrap .dock-shot {
|
visibility: hidden;
|
/* transform: scale(0.5); */
|
width: 100px;
|
height: 46px;
|
position: absolute;
|
top: 44px;
|
left: -50%;
|
}
|
.tools .tools-middle .dock-item-wrap:hover .dock-shot,
|
.tools .tools-middle .dock-item-wrap.clicked .dock-shot {
|
visibility: visible;
|
}
|
.tools-icon {
|
text-align: center;
|
height: 100%;
|
display: inline-block;
|
vertical-align: top;
|
line-height: 56px;
|
padding: 0 15px;
|
}
|
.tools-icon img {
|
-webkit-user-drag: none;
|
}
|
.tools .tools-icon:not(.no-hover-style):hover,
|
.tools .tools-icon:not(.no-hover-style).clicked {
|
color: white;
|
background-color: #98aabe;
|
cursor: pointer;
|
}
|
|
.tools .tools-right {
|
float: right;
|
height: 100%;
|
margin-right: 14px;
|
}
|
.el-dropdown-menu {
|
top: 40px !important;
|
}
|
|
.smart-ai {
|
height: 65%;
|
}
|
</style>
|
