<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.name}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name:'toolsEntry',
|
data(){
|
return {
|
publicPath: process.env.BASE_URL,
|
// applist:[
|
// {src: `/images/app-mid/camera-access.png`, name:'摄像机接入'},
|
// {src: `/images/app-mid/datastack-config.png`, name:'数据栈配置'},
|
// {src: `/images/app-mid/DVR-access.png`, name:'硬盘录像机接入'},
|
// {src: `/images/app-mid/data-push.png`, name:'数据推送'},
|
// {src: `/images/app-mid/GB-config.png`, name:'GB28281配置'},
|
// {src: `/images/app-mid/scene-config.png`, name:'场景配置'},
|
// {src: `/images/app-mid/library.png`, name:'比对库管理'},
|
// {src: `/images/app-mid/poll.png`, name:'轮询管理'},
|
// {src: `/images/app-mid/algorithm-manage.png`, name:'算法管理'},
|
// {src: `/images/app-mid/algorithm-store.png`, name:'算法商城'},
|
// {src: `/images/app-mid/hashrate-manage.png`, name:'算力管理'},
|
// {src: `/images/app-mid/monitor.png`, name:'实时监控-在线播放'},
|
// {src: `/images/app-mid/search.png`, name:'检索-统计查询'},
|
// {src: `/images/app-mid/360.png`, name:'全景视频'},
|
// {src: `/images/app-mid/log-manage.png`, name:'日志管理'},
|
// {src: `/images/app-mid/device.png`, name:'设备管理'},
|
// {src: `/images/app-mid/settings.png`, name:'系统设置'},
|
// {src: `/images/app-mid/vindicate.png`, name:'系统维护'}
|
// ]
|
}
|
},
|
methods:{
|
|
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);
|
this.resetDockItem();
|
}
|
},
|
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';
|
},
|
}
|
};
|
</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,.4);
|
}
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
