<template>
|
<div class="tools-entry">
|
<div class="entry-wrap">
|
<div class="app-list clearFix">
|
<div
|
class="app"
|
v-for="dock in this.$store.state.desktop.docks"
|
:key="dock.id"
|
@click="dockClick(dock)"
|
>
|
<div class="wrap">
|
<div class="app-icon">
|
<img :src="dock.src" :alt="dock.alt" />
|
</div>
|
<div class="app-name">{{dock.title}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="logo">
|
<img :src="`${publicPath}images/desktop/desk-logo.png`" alt="">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'toolsEntry',
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
}
|
},
|
mounted() {
|
window.addEventListener('message', e => {
|
console.log('msg')
|
if (e.data && e.data.msg) {
|
let msg = e.data.msg;
|
// token 不合法, 退出
|
if (msg === "logout") {
|
location.assign("/");
|
return;
|
}
|
|
// 打开检索, toSearch?showType=findByPic&targetId=108ba0bc-b0a1-433d-8e1e-d5d2e712b53b&picSmUrl=192.168.20.10:6700/47628,7cc869f3a9c714&compType=1
|
if (msg.indexOf("toSearch") >= 0) {
|
console.log('msg,search')
|
let params = msg.substring(7);
|
this.addFrameByName("search", params)
|
}
|
}
|
})
|
},
|
methods: {
|
dockClick(dock) {
|
if (dock.type === '1') {
|
window.open(dock.url);
|
} else if (dock.type === '2' && !dock.isOpen) {
|
|
this.$store.dispatch('desktop/addFrame', {
|
id: dock.id,
|
icon: dock.src,
|
title: dock.title,
|
url: dock.url
|
});
|
this.$store.commit('desktop/addMinDock', {
|
id: dock.id,
|
src: dock.src,
|
alt: dock.title,
|
type: "3",
|
highlight: true,
|
url: dock.url,
|
screenshot: ''
|
});
|
//打开应用后异步抓拍,之后的抓拍采用这张固定的
|
//if(dock.name=='cameraVideo'||dock.name=='search'||dock.name=='library'||dock.name=='cameraAccess'||dock.name=='dataStack'){
|
setTimeout(()=>{
|
this.$parent.screenShot(dock);
|
},1500)
|
//}
|
} else if (dock.type === '2' && dock.isOpen) {
|
this.$store.commit('desktop/resetMinFrame', dock.id);
|
}
|
},
|
resetDockItem() {
|
const dockItems = document.getElementsByClassName('dock-item');
|
const dockMask = document.getElementsByClassName('dock-mask')[0];
|
for (let i = 0; i < dockItems.length; i++) {
|
dockItems[i].width = 60;
|
if (dockItems[i].parentNode.nextElementSibling) {
|
dockItems[i].parentNode.nextElementSibling.style.marginLeft = "-35px";
|
}
|
}
|
dockMask.style.width = dockItems.length * 60 + 40 + 'px';
|
},
|
addFrameByName(name, params) {
|
|
let dock = null;
|
this.$store.state.desktop.docks.forEach(app => {
|
if (app.name === name) {
|
dock = app;
|
}
|
});
|
|
if (dock.isOpen) {
|
this.$store.dispatch('desktop/closeFrame', dock);
|
}
|
this.$store.dispatch('desktop/addFrame', {
|
id: dock.id,
|
icon: dock.src,
|
title: dock.title,
|
url: dock.url + "?" + params
|
});
|
this.$store.commit('desktop/addMinDock', {
|
id: dock.id,
|
src: dock.src,
|
alt: dock.title,
|
type: "3",
|
highlight: true,
|
url: dock.url,
|
screenshot: ''
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.tools-entry {
|
//margin-top: 130px;
|
position: absolute;
|
top: 142px;
|
left: 50%;
|
transform: translateX(-50%);
|
.entry-wrap {
|
width: 1180px;
|
padding: 0 60px;
|
margin: 0 auto;
|
.app-list {
|
.app {
|
width: 16.6%;
|
margin-bottom: 54px;
|
float: left;
|
.wrap {
|
.app-icon {
|
text-align: center;
|
line-height: 110px;
|
width: 110px;
|
height: 110px;
|
margin: auto;
|
img {
|
vertical-align: middle;
|
margin-right: -3px;
|
}
|
}
|
.app-name {
|
padding-top: 10px;
|
text-align: center;
|
font: Bold 16px/16px Microsoft JhengHei;
|
color: #fff;
|
}
|
}
|
|
&:hover {
|
.app-icon {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
}
|
}
|
}
|
.logo{
|
text-align: right;
|
padding-right: 50px;
|
}
|
}
|
}
|
</style>
|
