From 21a340c24815a55a07db2dc3d2e5a19e7de440cd Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 29 八月 2020 19:27:57 +0800
Subject: [PATCH] 添加摄像机区域管理应用
---
src/pages/desktop/index/components/ToolsEntry.vue | 221 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 154 insertions(+), 67 deletions(-)
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index adbba7c..36a0fc3 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -2,14 +2,22 @@
<div class="tools-entry">
<div class="entry-wrap">
<div class="app-list clearFix">
- <div class="app" v-for="(item,index) in applist" :key="index">
- <div class="wrap">
- <div class="app-icon">
- <img :src="item.src" alt="">
- </div>
- <div class="app-name">{{item.name}}</div>
- </div>
+ <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>
@@ -17,79 +25,158 @@
<script>
export default {
- name:'toolsEntry',
- data(){
+ 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:'绯荤粺缁存姢'}
- ]
+ }
+ },
+ 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;
+.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;
}
}
-
- &:hover{
- .app-icon{
- background: rgba(0,0,0,.4);
- }
+ .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;
+ user-select: none;
+ img{
+ user-select: none;
+ -webkit-user-drag: none;
+ }
+ }
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0