web/apsDashboard-1.git

parent: 95fc6657 | 补丁 | 提交 | ignore whitespace

hanbaoshan

2020-07-23 0187673aed8ba72058ee74fbb7538cf040a43606

桌面添加交互(打开/最小化应用,显示桌面最小化已打开的应用,显示隐藏通知)

4个文件已添加

7个文件已修改

	public/favicon.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/index.html	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/algorithmManage/index/store/index.ts	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/algorithmManage/index/store/modules/algorithm.js	79 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/App.vue	11 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/components/DFrame.vue	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/components/NotificationCenter.vue	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/components/Tools.vue	115 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/components/ToolsEntry.vue	35 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/mock/userData-copy.json	69 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/desktop/index/mock/userData.json	139 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 public/favicon.png


 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>

 src/pages/algorithmManage/index/store/index.ts


 src/pages/algorithmManage/index/store/modules/algorithm.js

New file
@@ -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

}

 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) {

    // });

 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 {

 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;
}


 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>&nbsp;</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>

 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>


 src/pages/desktop/index/mock/userData-copy.json

New file
@@ -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"
      }
    ]
  }
}

 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": "系统维护"
      }
    ]
  }

			@@ -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>

New file
			@@ -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
			}

			@@ -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) {

			// });

			@@ -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 {

			@@ -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;
			}

			@@ -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>

			@@ -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>

New file
			@@ -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"
			}
			]
			}
			}

			@@ -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": "系统维护"
			}
			]
			}