<template>
|
<div class="tools">
|
<div class="tools-left">
|
<div
|
:class="['tools-icon', 'tools-show-desktop', { clicked: this.$store.state.desktop.preferenceVisiable }]"
|
@click.stop="togglePreference"
|
>
|
<img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
|
</div>
|
|
<div class="fast-path" :class="showFastPath ? 'fast-path-show' : ''" @click.stop>
|
<div class="top">
|
<img v-if="userInfo" :src="`data:image/png;base64,${userInfo.headpic}`" alt="" />
|
|
<span class="username">{{ userInfo && userInfo.username }}</span>
|
</div>
|
<div class="link-list">
|
<div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
|
{{ x.name }}
|
</div>
|
</div>
|
</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 my-tools-icon" @click="goToWireSet">
|
<span class="icon iconfont"></span>
|
</div>
|
<div class="tools-icon my-tools-icon" @click.stop="toggleShowWifi" v-show="wifiList.length">
|
<span class="icon iconfont"></span>
|
</div>
|
<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" v-show="false">
|
<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 && 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"
|
@close="cancelPasswordChange"
|
>
|
<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" size="small" @click="cancelPasswordChange">取 消</el-button>
|
<el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<div class="sys-remind" v-if="showSysRemind">
|
<!-- -->
|
<div class="remind-title">系统更新提醒</div>
|
|
<div class="remind-content">
|
已做好<b>系统更新</b>的准备，<span style="color: red">更新预计需要一定的时间</span
|
>，如果您未准备好，我们将在一小时后再次向您确认。
|
</div>
|
|
<div class="btns">
|
<el-button size="mini" type="primary" @click="delaySysRemind(3600 * 24)">关闭此次提醒</el-button>
|
<el-button size="mini" type="primary" @click="delaySysRemind(60 * 60)">1小时后提醒</el-button>
|
<el-button :loading="upgrading" size="mini" type="primary" @click="updateSysNow">
|
{{ upgrading ? "更新中" : "立即更新" }}</el-button
|
>
|
</div>
|
</div>
|
|
<div class="sys-remind" v-if="showAppRemind">
|
<div class="remind-title">算法/应用更新提醒</div>
|
|
<div class="remind-content">
|
发现 <b>算法/应用 </b>更新，<span style="color: red">请前往查看更新</span
|
>。如果您未准备好，我们将在一小时后再次向您确认。
|
</div>
|
|
<div class="btns">
|
<el-button size="mini" type="primary" @click="delayAppRemind(3600 * 24)">关闭此次提醒</el-button>
|
<el-button size="mini" type="primary" @click="delayAppRemind(60 * 60)">1小时后提醒</el-button>
|
<el-button :loading="upgrading" size="mini" type="primary" @click="goToUpdate"> 前往更新</el-button>
|
</div>
|
</div>
|
|
<div class="wifi-pop" :class="showWifiList ? 'wifi-pop-show' : ''">
|
<div class="top-title">
|
<div class="text">无线网络</div>
|
<el-switch v-model="isOpenWifi" active-color="rgba(61, 104, 225, 1)"> </el-switch>
|
</div>
|
|
<div class="wifi-list">
|
<div
|
class="item"
|
:class="i == activeWifi ? 'item-active' : ''"
|
v-for="(x, i) in wifiList"
|
:key="i"
|
@click="pickWifi(x, i)"
|
>
|
<!-- -->
|
<div class="top">
|
<span class="icon iconfont"></span>
|
<div class="name">
|
<span style="font-size: 14px">{{ x.name }}</span>
|
<span>安全</span>
|
</div>
|
</div>
|
<div class="bot" v-if="x.showBottom">
|
<el-checkbox v-model="x.checked">自动连接</el-checkbox>
|
<el-button size="mini">连接</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { logout, updatePwd } from "@/api/login"
|
|
import {
|
getUpgradeNotice,
|
delayUpgradeNotice,
|
getAppUpgradeNotice,
|
upgradeNewVersion,
|
delayAppNotice,
|
getWifi
|
} from "@/api/system"
|
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,
|
userInfo: {},
|
activeWifi: null,
|
wifiList: [
|
{ name: "网络1", connected: false, showBottom: false, checked: false },
|
{ name: "网络2", connected: false, showBottom: false, checked: false },
|
{ name: "网络3", connected: true, showBottom: false, checked: false }
|
],
|
linkList: [{ name: "文档中心" }, { name: "系统监控器" }, { name: "日志管理" }],
|
showPasswdForm: false,
|
showWifiList: false,
|
rules: {
|
oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
|
newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
|
checkPwd: [{ required: true, validator: validatePass2, trigger: "blur" }]
|
},
|
showFastPath: false,
|
showSysRemind: false,
|
showAppRemind: false,
|
sysTimeout: 60 * 60 * 1000,
|
sysTimer: null,
|
appTimeout: 60 * 60 * 1000,
|
upgrading: false,
|
isOpenWifi: false,
|
passwdForm: {
|
oldPwd: "",
|
newPwd: "",
|
checkPwd: ""
|
}
|
}
|
},
|
created() {
|
let _that = this
|
this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"))
|
if (window.toolIntervalArr) {
|
window.toolIntervalArr.forEach((item) => clearInterval(item))
|
}
|
window.toolIntervalArr = [
|
setInterval(function() {
|
_that.notificationCenterMessageCount += 1
|
}, 600)
|
]
|
},
|
beforeDestroy() {
|
clearTimeout(this.sysTimer)
|
this.sysTimer = null
|
},
|
mounted() {
|
document.addEventListener("click", (e) => {
|
if (this.showFastPath || this.showWifiList) {
|
this.showFastPath = false
|
this.showWifiList = false
|
}
|
})
|
this.askSysUpdate()
|
this.askAppUpdate()
|
this.askWifiConfig()
|
},
|
methods: {
|
askWifiConfig() {
|
getWifi().then((res) => {
|
this.wifiList = []
|
if (res && res.data) {
|
this.wifiList = res.data
|
}
|
})
|
},
|
askAppUpdate() {
|
getAppUpgradeNotice().then((res) => {
|
if (res.code == 200) {
|
if (res.data.NeedUpdate && res.data.NoticeStatus) {
|
if (res.data.LastNoticeTime == 0) {
|
this.showAppRemind = true
|
} else {
|
this.appTimeout = res.data.LastNoticeTime * 1000
|
this.delayAppAsk()
|
}
|
}
|
}
|
})
|
},
|
pickWifi(x, i) {
|
this.wifiList.forEach((x) => {
|
x.showBottom = false
|
})
|
x.showBottom = !x.showBottom
|
this.activeWifi = i
|
},
|
goToUpdate() {
|
this.showAppRemind = false
|
window.parent.postMessage({ msg: `toAI?activeName=更新` }, "*")
|
},
|
goToWireSet() {
|
window.parent.postMessage({ msg: `toSetting?menu=网络设置&subMenu=有线网络` }, "*")
|
},
|
updateSysNow() {
|
window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*")
|
},
|
delaySysRemind(sec) {
|
delayUpgradeNotice({
|
delaySecond: sec
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$notify.success("设置成功")
|
this.showSysRemind = false
|
this.sysTimeout = res.data.LastNoticeTime * 1000
|
this.delaySysAsk()
|
}
|
})
|
},
|
delayAppRemind(sec) {
|
delayAppNotice({
|
delay: sec
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$notify.success("设置成功")
|
this.showAppRemind = false
|
this.appTimeout = res.data.LastNoticeTime * 1000
|
this.delayAppAsk()
|
}
|
})
|
},
|
delaySysAsk() {
|
this.sysTimer = setTimeout(() => {
|
this.askSysUpdate()
|
}, this.sysTimeout)
|
},
|
delayAppAsk() {
|
this.appTimer = setTimeout(() => {
|
this.askAppUpdate()
|
}, this.appTimeout)
|
},
|
askSysUpdate() {
|
getUpgradeNotice().then((res) => {
|
if (res.data.HaveNewVersion > 0 && res.data.NoticeStatus) {
|
if (res.data.LastNoticeTime == 0) {
|
this.showSysRemind = true
|
} else {
|
this.sysTimeout = res.data.LastNoticeTime * 1000
|
this.delaySysAsk()
|
}
|
}
|
})
|
},
|
toggleShowWifi() {
|
this.notificationCenterVisible = false
|
this.showWifiList = !this.showWifiList
|
this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let json = {
|
oldPwd: this.passwdForm.oldPwd,
|
newPwd: this.passwdForm.checkPwd
|
}
|
updatePwd(json)
|
.then((res) => {
|
this.$notify({
|
type: res.success ? "success" : "error",
|
message: res.msg
|
})
|
if (res.success) {
|
this.cancelPasswordChange()
|
}
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: err.msg
|
})
|
})
|
} 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.showFastPath = !this.showFastPath
|
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)
|
}
|
},
|
clickFastPath(name) {
|
this.$emit("jumpToDock", name)
|
},
|
toLogout() {
|
let _this = this
|
this.$confirm("确定退出登录吗？", "提示", {
|
type: "warning",
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
})
|
.then((_) => {
|
logout().then((res) => {
|
if (res.success) {
|
this.$notify.success(res.msg)
|
location.assign("/view/index")
|
sessionStorage.removeItem("userInfo")
|
// 手动退出, 取消自动登录
|
sessionStorage.removeItem("autoLogin")
|
_this.userInfo = {}
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出失败!"
|
})
|
}
|
})
|
})
|
.catch((_) => {
|
console.log("退出失败")
|
})
|
},
|
cancelPasswordChange() {
|
this.showPasswdForm = false
|
this.passwdForm = {
|
oldPwd: "",
|
newPwd: "",
|
checkPwd: ""
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.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: 185px;
|
height: 100%;
|
float: left;
|
margin-left: 54px;
|
}
|
.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;
|
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: bottom;
|
|
line-height: 56px;
|
padding: 0 15px;
|
position: relative;
|
.iconfont {
|
display: block;
|
line-height: 42px;
|
font-size: 25px;
|
}
|
}
|
@keyframes move {
|
0% {
|
opacity: 0;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
.fast-path {
|
height: 188px;
|
position: absolute;
|
width: 200px;
|
top: 55px;
|
border-radius: 6px;
|
background-color: rgba(255, 255, 255, 1);
|
transition: 0.2s;
|
display: none;
|
padding-top: 5px;
|
box-sizing: border-box;
|
.top {
|
display: flex;
|
align-items: center;
|
height: 70px;
|
box-sizing: border-box;
|
padding: 0 30px;
|
img {
|
height: 50px;
|
width: 50px;
|
border-radius: 50%;
|
}
|
.username {
|
width: fit-content;
|
height: 30px;
|
line-height: 30px;
|
font-size: 16px;
|
margin-left: 15px;
|
}
|
}
|
.link-list {
|
height: 180px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.list-item {
|
display: flex;
|
width: 90%;
|
box-sizing: border-box;
|
padding: 0 20px;
|
border-radius: 5px;
|
font-size: 14px;
|
line-height: 25px;
|
height: 25px;
|
cursor: pointer;
|
margin: 5px;
|
}
|
.list-item:hover {
|
background-color: rgba(231, 231, 231, 1);
|
}
|
}
|
.bot {
|
position: absolute;
|
bottom: 0;
|
height: 60px;
|
display: flex;
|
width: 100%;
|
justify-content: space-around;
|
.set,
|
.exit {
|
display: flex;
|
align-items: center;
|
width: 28%;
|
justify-content: space-evenly;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.sys-remind {
|
background-color: white;
|
width: 400px;
|
position: absolute;
|
right: 5px;
|
top: 45px;
|
border-radius: 5px;
|
.remind-title {
|
box-sizing: border-box;
|
text-align: left;
|
padding: 0 20px;
|
border-bottom: 1px solid lightgray;
|
font-size: 16px;
|
line-height: 35px;
|
}
|
.remind-content {
|
text-align: left;
|
line-height: 20px;
|
font-size: 14px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
padding: 15px 20px;
|
}
|
.btns {
|
padding: 0px 12px 8px 12px;
|
/* background-color: antiquewhite; */
|
text-align: right;
|
}
|
}
|
|
.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;
|
}
|
|
.wifi-pop {
|
position: absolute;
|
width: 210px;
|
top: 55px;
|
height: 400px;
|
border-radius: 6px;
|
background-color: white;
|
transition: 0.2s;
|
display: none;
|
box-sizing: border-box;
|
right: 100px;
|
.top-title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 0 20px;
|
font-size: 14px;
|
border-bottom: 1px solid lightgray;
|
}
|
.wifi-list {
|
overflow: auto;
|
height: 340px;
|
.item-active {
|
background-color: rgba(66, 102, 153, 1);
|
color: white;
|
}
|
.item {
|
box-sizing: border-box;
|
cursor: pointer;
|
/* background-color: aqua; */
|
padding: 10px 20px;
|
.top {
|
display: flex;
|
.icon {
|
font-size: 20px;
|
margin-right: 10px;
|
}
|
.name {
|
display: flex;
|
flex-direction: column;
|
line-height: 20px;
|
text-align: left;
|
}
|
}
|
.bot {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.el-checkbox {
|
color: white;
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: white;
|
}
|
.el-checkbox__label {
|
padding-left: 5px;
|
font-size: 12px;
|
}
|
.el-checkbox__inner {
|
width: 12px;
|
height: 12px;
|
|
.el-checkbox__inner::after {
|
height: 6px;
|
left: 3px;
|
}
|
}
|
}
|
|
.el-button--mini,
|
.el-button--mini.is-round {
|
padding: 5px 10px;
|
}
|
}
|
}
|
}
|
}
|
.wifi-pop-show {
|
animation: move linear 0.2s 1;
|
display: block;
|
}
|
|
.fast-path-show {
|
animation: move linear 0.2s 1;
|
display: block;
|
}
|
|
.tools .tools-right {
|
float: right;
|
height: 100%;
|
margin-right: 14px;
|
}
|
|
.smart-ai {
|
height: 65%;
|
}
|
|
.el-dropdown-menu {
|
top: 40px !important;
|
}
|
</style>
|
