From 0187673aed8ba72058ee74fbb7538cf040a43606 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 23 七月 2020 20:09:07 +0800
Subject: [PATCH] 桌面添加交互(打开/最小化应用,显示桌面最小化已打开的应用,显示隐藏通知)
---
public/index.html | 2
src/pages/desktop/index/components/NotificationCenter.vue | 3
src/pages/desktop/index/components/ToolsEntry.vue | 35 ++++
src/pages/desktop/index/mock/userData-copy.json | 69 ++++++++
public/favicon.png | 0
src/pages/desktop/index/components/DFrame.vue | 12
src/pages/desktop/index/App.vue | 11
src/pages/desktop/index/components/Tools.vue | 115 ++++++++++---
src/pages/algorithmManage/index/store/modules/algorithm.js | 79 +++++++++
src/pages/desktop/index/mock/userData.json | 139 +++++++++++++---
src/pages/algorithmManage/index/store/index.ts | 0
11 files changed, 392 insertions(+), 73 deletions(-)
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..39454d9
--- /dev/null
+++ b/public/favicon.png
Binary files differ
diff --git a/public/index.html b/public/index.html
index fb92cd4..d11d0ca 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.png" sizes="32x32" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
diff --git a/src/pages/algorithmManage/index/store/index.ts b/src/pages/algorithmManage/index/store/index.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/algorithmManage/index/store/index.ts
diff --git a/src/pages/algorithmManage/index/store/modules/algorithm.js b/src/pages/algorithmManage/index/store/modules/algorithm.js
new file mode 100644
index 0000000..e7735dc
--- /dev/null
+++ b/src/pages/algorithmManage/index/store/modules/algorithm.js
@@ -0,0 +1,79 @@
+const state = {
+ list1 = [],
+ list2 = [
+ {
+ id: "001",
+ name: "浠诲姟1",
+ child: [
+ {
+ id: "1",
+ sdk_name: "浜鸿劯妫�娴�",
+ isSelect: false
+ },
+ {
+ id: "2",
+ sdk_name: "浜鸿劯瀵规瘮",
+ isSelect: false
+ }
+ ],
+ isSetting: false,
+ isShowSetAlgo: false
+ }
+ ],
+ argsList : [],
+ baseObject : {
+ id: '',
+ algoId: '',
+ options1: [],
+ options2: [],
+ options3: [],
+ value1: '',
+ value2: '',
+ value3: '',
+ unit: ''
+ },
+ currentAlgoId : '',
+ currentTaskId : ''
+};
+
+const getters = {};
+
+const mutations = {
+ findAllSdk(state, data){
+ state.list1 = data;
+ },
+ findByType(state, data){
+ state.baseObject.options2 = data;
+ }
+};
+const actions = {
+ findAllSdk({commit},params) {
+ let res = await findAllSdk({});
+ if (res && res.success) {
+ commit('findAllSdk',res.data)
+ }
+ },
+
+ findByType({commit},params) {
+ let res = await findByType({});
+ console.log(res,'findByType')
+ if (res && res.success) {
+ let list = res.data.RULECOMPUTEBETWEEN.map((i) => {
+ let obj = {}
+ obj.name = i.name
+ obj.value = i.value
+ return obj
+ })
+ //this.baseObject.options2 = [...list]
+ commit('findByType',[...list]);
+ }
+ },
+
+
+};
+export default{
+ state,
+ getters,
+ actions,
+ mutations
+}
\ No newline at end of file
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index aaa21d5..d87fecd 100644
--- a/src/pages/desktop/index/App.vue
+++ b/src/pages/desktop/index/App.vue
@@ -1,10 +1,9 @@
<template>
<div id="app">
<tools></tools>
- <preference></preference>
<desktop></desktop>
- <tools-entry></tools-entry>
- <dock ref="dock_model"></dock>
+ <tools-entry ref="dock_model"></tools-entry>
+ <!-- <dock ref="dock_model"></dock> -->
<notice-tip ref="notice_tip_model"></notice-tip>
<notification-center></notification-center>
</div>
@@ -35,9 +34,9 @@
});
}
- setTimeout(function () {
- _that.$refs.dock_model.initDockItem();
- }, 100);
+ // setTimeout(function () {
+ // _that.$refs.dock_model.initDockItem();
+ // }, 100);
// axios.get(process.env.VUE_APP_USER_DATA_URL).then(function (res) {
// });
diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue
index 7e78066..ae56e08 100644
--- a/src/pages/desktop/index/components/DFrame.vue
+++ b/src/pages/desktop/index/components/DFrame.vue
@@ -57,7 +57,7 @@
alt: this.data.title,
type: "3"
});
- this.refreshDock();
+ //this.refreshDock();
},
refreshDock: function () {
setTimeout(function () {
@@ -66,7 +66,7 @@
for (let i = 0; i < dockItems.length; i++) {
dockItems[i].width = 60;
}
- dockMask.style.width = dockItems.length * 60 + 40 + 'px';
+ //dockMask.style.width = dockItems.length * 60 + 40 + 'px';
}, 10);
}
},
@@ -170,15 +170,17 @@
}
.d-frame-title-content img {
- width: 25px;
- height: 25px;
+ width: auto;
+ height: 18px;
position: relative;
top: 3px;
+ margin-right: 6px;
}
.d-frame-title-content span {
position: relative;
- top: -3px;
+ top: -1px;
+ /* font-family: '榛戜綋'; */
}
.d-frame-content {
diff --git a/src/pages/desktop/index/components/NotificationCenter.vue b/src/pages/desktop/index/components/NotificationCenter.vue
index 777175a..32e2fdb 100644
--- a/src/pages/desktop/index/components/NotificationCenter.vue
+++ b/src/pages/desktop/index/components/NotificationCenter.vue
@@ -74,10 +74,11 @@
.notification-center {
position: absolute;
right: 0;
- top: 30px;
+ top: 40px;
height: calc(100% - 30px);
width: 300px;
background-color: rgba(200, 200, 200, 0.7);
+ box-shadow: -1px 1px 2px rgba(0,0,0,.3);
z-index: 140;
}
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 385e1d2..a874279 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -3,44 +3,52 @@
<div class="center">
<div class="tools-left">
<div
- :class="['tools-icon', {clicked:this.$store.state.desktop.preferenceVisiable}]"
+ :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
@click="togglePreference()"
>
<img class="system" :src="`${publicPath}images/header-icon/system.png`" />
<!-- <span class="fa fa-apple"></span> -->
</div>
- <div class="tools-icon" @click="openSafari()">
+ <div class="tools-icon" >
<!-- <span class="fa fa-safari"></span> -->
- <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt="">
+ <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt />
</div>
</div>
- <div class="tools-middle"></div>
+ <div class="tools-middle">
+ <div
+ v-for="dock in this.$store.state.desktop.minDocks"
+ :key="dock.id"
+ class="dock-item-wrap"
+
+ >
+ <a @click="dockClick(dock)">
+ <img class="dock-item" :src="dock.src" :alt="dock.alt" />
+ </a>
+ </div>
+ </div>
<div class="tools-right">
<div class="tools-icon">
<!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/search.png`" alt="">
+ <img :src="`${publicPath}images/header-icon/search.png`" alt />
</div>
<div class="tools-icon">
<!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/help.png`" alt="">
+ <img :src="`${publicPath}images/header-icon/help.png`" alt />
+ </div>
+ <div class="tools-icon" @click="notificationCenterClick()">
+ <!-- <span class="fa fa-battery-full"></span> -->
+ <img :src="`${publicPath}images/header-icon/notice.png`" alt />
</div>
<div class="tools-icon">
<!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/notice.png`" alt="">
- </div>
- <div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/user.png`" alt="">
+ <img :src="`${publicPath}images/header-icon/user.png`" alt />
</div>
<!-- <timer></timer> -->
- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
+ <!-- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
<span
:class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
></span>
- </div>
- <div class="tools-icon tools-show-desktop">
- <span> </span>
- </div>
+ </div> -->
</div>
</div>
</div>
@@ -89,11 +97,33 @@
!this.notificationCenterNoMessage()
);
},
- openSafari: function() {
- this.$store.commit("desktop/openSafari");
+
+ 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"
+ });
+ })
},
- togglePreference: function() {
- this.$store.commit("desktop/togglePreference");
+ 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);
+ }
}
}
};
@@ -121,16 +151,49 @@
height: 100%;
float: left;
margin-left: 8px;
-
}
-
+.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;
+}
+.tools .tools-middle .dock-item-wrap:hover,
+.tools .tools-middle .dock-item-wrap.clicked{
+ color: white;
+ background-color: #98aabe;
+ border-color: #40C3FF;
+ cursor: pointer;
+}
+.dock-item-wrap a {
+ height: 100%;
+}
+.dock-item-wrap img {
+ width: auto;
+ height: 70%;
+}
.tools-icon {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
line-height: 56px;
- margin-right: 28px;
+ padding: 0 15px;
}
.tools .tools-icon:hover,
@@ -143,11 +206,5 @@
.tools .tools-right {
float: right;
height: 100%;
-}
-
-.tools .tools-right .tools-show-desktop {
- border-left: grey 1px solid;
- width: 5px;
- margin-left: 3px;
}
</style>
\ No newline at end of file
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index adbba7c..ea7b7cd 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -2,12 +2,12 @@
<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="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="item.src" alt="">
+ <img :src="dock.src" :alt="dock.alt">
</div>
- <div class="app-name">{{item.name}}</div>
+ <div class="app-name">{{dock.name}}</div>
</div>
</div>
</div>
@@ -42,6 +42,35 @@
{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>
diff --git a/src/pages/desktop/index/mock/userData-copy.json b/src/pages/desktop/index/mock/userData-copy.json
new file mode 100644
index 0000000..c5040fd
--- /dev/null
+++ b/src/pages/desktop/index/mock/userData-copy.json
@@ -0,0 +1,69 @@
+{
+ "code": "0000",
+ "success": true,
+ "data": {
+ "docks": [
+ {
+ "id": "1",
+ "src": "../../images/finder.png",
+ "alt": "finder",
+ "type": "0"
+ },
+ {
+ "id": "2",
+ "src": "../../images/launchpad.png",
+ "alt": "launchpad",
+ "type": "0"
+ },
+ {
+ "id": "3",
+ "src": "../../images/gitee.png",
+ "alt": "gitee",
+ "type": "1",
+ "url": "https://gitee.com/justlive1"
+ },
+ {
+ "id": "4",
+ "src": "../../images/github.png",
+ "alt": "github",
+ "type": "1",
+ "url": "https://github.com/justlive1"
+ },
+ {
+ "id": "5",
+ "src": "../../images/maps.png",
+ "alt": "maps",
+ "type": "2",
+ "url": "https://map.baidu.com"
+ },
+ {
+ "id": "6",
+ "src": "../../images/blog.png",
+ "alt": "blog",
+ "type": "2",
+ "url": "http://www.justlive.vip/blog"
+ },
+ {
+ "id": "7",
+ "src": "../../images/iBooks.png",
+ "alt": "GB28181",
+ "type": "2",
+ "url": "/view/gb28181"
+ },
+ {
+ "id": "8",
+ "src": "../../images/frost.png",
+ "alt": "鍒嗗竷寮忚皟搴�",
+ "type": "2",
+ "url": "http://www.justlive.vip/center/"
+ },
+ {
+ "id": "9",
+ "src": "../../images/gitee.png",
+ "alt": "绠楁硶绠＄悊",
+ "type": "2",
+ "url": "/view/algorithmManage"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json
index c5040fd..6630892 100644
--- a/src/pages/desktop/index/mock/userData.json
+++ b/src/pages/desktop/index/mock/userData.json
@@ -5,64 +5,147 @@
"docks": [
{
"id": "1",
- "src": "../../images/finder.png",
- "alt": "finder",
- "type": "0"
+ "src": "../../images/app-mid/camera-access.png",
+ "alt": "camera-access",
+ "type": "2",
+ "url": "/view/camera",
+ "name":"鎽勫儚鏈烘帴鍏�"
},
{
"id": "2",
- "src": "../../images/launchpad.png",
- "alt": "launchpad",
- "type": "0"
+ "src": "../../images/app-mid/datastack-config.png",
+ "alt": "datastack-config",
+ "type": "2",
+ "url": "/view/datastack",
+ "name":"鏁版嵁鏍堥厤缃�"
},
{
"id": "3",
- "src": "../../images/gitee.png",
- "alt": "gitee",
- "type": "1",
- "url": "https://gitee.com/justlive1"
+ "src": "../../images/app-mid/DVR-access.png",
+ "alt": "DVR",
+ "type": "2",
+ "url": "/view/DVR",
+ "name": "纭洏褰曞儚鏈烘帴鍏�"
},
{
"id": "4",
- "src": "../../images/github.png",
- "alt": "github",
- "type": "1",
- "url": "https://github.com/justlive1"
+ "src": "../../images/app-mid/data-push.png",
+ "alt": "data-push",
+ "type": "2",
+ "url": "/view/datapush",
+ "name": "鏁版嵁鎺ㄩ��"
},
{
"id": "5",
- "src": "../../images/maps.png",
- "alt": "maps",
+ "src": "../../images/app-mid/GB-config.png",
+ "alt": "GB28281閰嶇疆",
"type": "2",
- "url": "https://map.baidu.com"
+ "url": "/view/gb28181",
+ "name": "GB28281閰嶇疆"
},
{
"id": "6",
- "src": "../../images/blog.png",
- "alt": "blog",
+ "src": "../../images/app-mid/scene-config.png",
+ "alt": "鍦烘櫙閰嶇疆",
"type": "2",
- "url": "http://www.justlive.vip/blog"
+ "url": "/view/scene",
+ "name": "鍦烘櫙閰嶇疆"
},
{
"id": "7",
- "src": "../../images/iBooks.png",
- "alt": "GB28181",
+ "src": "../../images/app-mid/library.png",
+ "alt": "姣斿搴撶鐞�",
"type": "2",
- "url": "/view/gb28181"
+ "url": "/view/gb28181",
+ "name": "姣斿搴撶鐞�"
},
{
"id": "8",
- "src": "../../images/frost.png",
- "alt": "鍒嗗竷寮忚皟搴�",
+ "src": "../../images/app-mid/poll.png",
+ "alt": "杞绠＄悊",
"type": "2",
- "url": "http://www.justlive.vip/center/"
+ "url": "/view/poll",
+ "name": "杞绠＄悊"
},
{
"id": "9",
- "src": "../../images/gitee.png",
+ "src": "../../images/app-mid/algorithm-manage.png",
"alt": "绠楁硶绠＄悊",
"type": "2",
- "url": "/view/algorithmManage"
+ "url": "/view/algorithmManage",
+ "name": "绠楁硶绠＄悊"
+ },
+ {
+ "id": "10",
+ "src": "../../images/app-mid/algorithm-store.png",
+ "alt": "绠楁硶鍟嗗煄",
+ "type": "2",
+ "url": "/view/algorithmStore",
+ "name": "绠楁硶鍟嗗煄"
+ },
+ {
+ "id": "11",
+ "src": "../../images/app-mid/hashrate-manage.png",
+ "alt": "绠楀姏绠＄悊",
+ "type": "2",
+ "url": "/view/hashrateManage",
+ "name": "绠楀姏绠＄悊"
+ },
+ {
+ "id": "12",
+ "src": "../../images/app-mid/monitor.png",
+ "alt": "瀹炴椂鐩戞帶-鍦ㄧ嚎鎾斁",
+ "type": "2",
+ "url": "/view/monitor",
+ "name": "瀹炴椂鐩戞帶-鍦ㄧ嚎鎾斁"
+ },
+ {
+ "id": "13",
+ "src": "../../images/app-mid/search.png",
+ "alt": "妫�绱�-缁熻鏌ヨ",
+ "type": "2",
+ "url": "/view/search",
+ "name": "妫�绱�-缁熻鏌ヨ"
+ },
+ {
+ "id": "14",
+ "src": "../../images/app-mid/360.png",
+ "alt": "鍏ㄦ櫙瑙嗛",
+ "type": "2",
+ "url": "/view/panoramicVideo",
+ "name": "鍏ㄦ櫙瑙嗛"
+ },
+ {
+ "id": "14",
+ "src": "../../images/app-mid/log-manage.png",
+ "alt": "鏃ュ織绠＄悊",
+ "type": "2",
+ "url": "/view/logManage",
+ "name": "鏃ュ織绠＄悊"
+ },
+ {
+ "id": "14",
+ "src": "../../images/app-mid/device.png",
+ "alt": "璁惧绠＄悊",
+ "type": "2",
+ "url": "/view/device",
+ "name": "璁惧绠＄悊"
+ },
+ {
+ "id": "15",
+ "src": "../../images/app-mid/settings.png",
+ "alt": "绯荤粺璁剧疆",
+ "type": "2",
+ "url": "/view/settings",
+ "name": "绯荤粺璁剧疆"
+ },
+ {
+ "id": "16",
+ "src": "../../images/app-mid/vindicate.png",
+ "alt": "绯荤粺缁存姢",
+ "type": "2",
+ "url": "/view/vindicate",
+ "name": "绯荤粺缁存姢"
}
]
}
--
Gitblit v1.8.0