<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}" @mouseover="screenShot(dock)">
|
<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 @click.native='toLogout'>
|
退出登录
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import html2canvas from 'html2canvas';
|
import {logout} from "@/api/login";
|
export default {
|
name: "Tools",
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
notificationCenterVisible: false,
|
notificationCenterMessageCount: 0,
|
maxOrder: 0,
|
maxOrderOne: ''
|
};
|
},
|
created() {
|
let _that = this;
|
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){
|
// debugger;
|
// n.forEach((item,index) => {
|
// if(item.order >= this.maxOrder){
|
// this.maxOrderOne = item.id;
|
// }
|
// });
|
// }
|
// },
|
// deep: true
|
// }
|
// },
|
|
|
methods: {
|
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");
|
//显示桌面,最小化已打开的应用
|
debugger;
|
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) {
|
debugger
|
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置顶并高亮
|
debugger
|
this.$store.commit("desktop/refreshFrame", dock);
|
}
|
},
|
screenShot(dock){
|
debugger
|
//找到当前的iframe
|
let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(dock.url) >= 0);
|
//保存当前应用快照
|
html2canvas(curIframe.contentWindow.document.body, {
|
dpi: window.devicePixelRatio * 4,
|
logging: true, //查看html2canvas内部执行流程
|
removeContainer: true,
|
imageTimeout: 0,
|
useCORS: true, //开启跨域配置
|
//allowTaint: true
|
}).then(canvas => {
|
let shotSrc = canvas.toDataURL();
|
// this.$store.commit('desktop/addMinDock', {
|
// id: dock.id,
|
// src: dock.icon,
|
// alt: dock.title,
|
// type: "3",
|
// screenshot: shotSrc
|
// });
|
this.$store.commit('desktop/shotscreen', {id:dock.id, src:shotSrc});
|
|
}).catch(e => {
|
this.$store.commit('desktop/shotscreen', {id:dock.id, src:''});
|
});
|
},
|
toLogout(){
|
this.$confirm("提示：确定退出吗？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
}).then(_ => {
|
logout().then(res => {
|
if (res === "退出成功") {
|
sessionStorage.removeItem("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: 200px;
|
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 .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;
|
}
|
</style>
|
