From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 九月 2023 16:10:37 +0800
Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加
---
src/pages/desktop/index/components/ToolsEntry.vue | 334 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 284 insertions(+), 50 deletions(-)
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index 36a0fc3..4e9b703 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -1,39 +1,143 @@
<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" />
+ <el-carousel
+ :height="rowSize == 3 ? '600px' : '770px'"
+ :autoplay="false"
+ arrow="never"
+ :indicator-position="carousels.length == 1 ? 'none' : ''"
+ >
+ <el-carousel-item v-for="(carousel, index) in carousels" :key="index">
+ <div class="app-list clearFix sdk-list">
+ <!-- <draggable v-model="carousel" @start="drag=true" @end="drag=false"> -->
+ <div v-for="item in carousel" :key="item.id">
+ <div
+ class="app"
+ v-if="item.url && !item.sdk_name"
+ @click="dockClick(item)"
+ >
+ <div class="wrap">
+ <div class="app-icon">
+ <div
+ class="badge"
+ v-if="item.name == 'algorithmManage' && badgeNum > 0"
+ >
+ {{ badgeNum }}
+ </div>
+ <img :src="item.src" :alt="item.alt" />
+ </div>
+ <div class="app-name">{{ item.title }}</div>
+ </div>
+ </div>
+ <div
+ class="app sdk"
+ v-if="item.sdk_name"
+ @click="openSdkVideo(item)"
+ >
+ <div class="wrap">
+ <div class="app-icon">
+ <img
+ :src="
+ item.iconBlob.indexOf(',') > 0
+ ? item.iconBlob
+ : `data:image/png;base64,${item.iconBlob}`
+ "
+ />
+ </div>
+ <div class="app-name">{{ item.sdk_name }}</div>
+ </div>
+ </div>
</div>
- <div class="app-name">{{dock.title}}</div>
</div>
- </div>
- </div>
+ </el-carousel-item>
+ </el-carousel>
+
<div class="logo">
- <img :src="`${publicPath}images/desktop/desk-logo.png`" alt="">
+ <img :src="`${publicPath}images/desktop/desk-logo.png`" alt />
+ </div>
+ </div>
+
+ <div class="videolist_appbox" v-if="showVideo">
+ <div class="video_t">
+ <video
+ width="1164"
+ height="655"
+ :src="videoUrl"
+ type="video/mp4"
+ poster=""
+ controls="controls"
+ preload="none"
+ autoplay="autoplay"
+ controlslist="nodownload"
+ ></video>
+ </div>
+ <!-- <div class="mask"></div> -->
+ <div class="video_close" @click="showVideo = false">
+ <!-- <img src="../../assets/img/about_dot18.png"> -->
+ <!-- <span class="icon iconfont"></span> -->
+ <i class="el-icon-close"></i>
+
+
</div>
</div>
</div>
</template>
<script>
+import draggable from "vuedraggable";
+import { findAllSdk } from "@/api/taskMange";
+import { chunkArr } from "@/scripts/util";
+import bus from "@/plugin/bus";
export default {
- name: 'toolsEntry',
+ name: "toolsEntry",
data() {
return {
publicPath: process.env.BASE_URL,
- }
+ loading: true,
+ showVideo: false,
+ localApps: [],
+ installedSdk: [],
+ videoUrl: "",
+ sdkList: [
+
+ ],
+ };
+ },
+ computed: {
+ stateDocks() {
+ return this.$store.state.desktop.docks;
+ },
+ carousels() {
+ let pages = 0;
+ let tempArr = this.stateDocks.concat(this.installedSdk);
+ let upgradeArr = tempArr.filter((item) => item.isUpgrade);
+ let arr = null;
+ //鏍规嵁灞忓箷楂樺害鏉ュ垽鏂槸灞曠ず3鎺掕繕鏄�4鎺� 闃堝��:970
+ if (window.innerHeight >= 930) {
+ //this.rowSize = 4;
+ arr = this.chunk(tempArr, 24);
+ } else {
+ //this.rowSize = 3;
+ arr = this.chunk(tempArr, 18);
+ }
+ return arr;
+ },
+ badgeNum() {
+ let tempArr = this.stateDocks.concat(this.installedSdk);
+ return tempArr.filter((item) => item.isUpgrade).length;
+ },
+ rowSize() {
+ if (window.innerHeight >= 930) {
+ return 4;
+ } else {
+ return 3;
+ }
+ },
},
mounted() {
- window.addEventListener('message', e => {
- console.log('msg')
+ this.getAllSdk();
+ //this.carousels =
+ window.addEventListener("message", (e) => {
if (e.data && e.data.msg) {
let msg = e.data.msg;
// token 涓嶅悎娉�, 閫�鍑�
@@ -41,91 +145,151 @@
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)
+ this.addFrameByName("search", params);
+ }
+ if (msg.indexOf("toCluster") >= 0) {
+ let params = msg.substring(8);
+ this.addFrameByName("searchForCluster", params);
+ }
+
+ if (msg.indexOf("toOpenApp") >= 0) {
+ let id = msg.substring(10);
+ console.log(id);
+ this.addFrameByID(id);
}
}
- })
+ });
},
methods: {
+ chunk(arr, size) {
+ size = Math.max(size, 0);
+ const len = arr == null ? 0 : arr.length;
+ if (!len || size < 1) {
+ return [];
+ }
+ let index = 0;
+ let resIndex = 0;
+ const result = new Array(Math.ceil(len / size));
+ while (index < len) {
+ result[resIndex++] = arr.slice(index, (index += size));
+ }
+ return result;
+ },
+ getAllSdk() {
+ findAllSdk()
+ .then((res) => {
+ this.installedSdk = res.data.filter((item) => item.installed);
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ },
dockClick(dock) {
- if (dock.type === '1') {
+ if (dock.type === "1") {
window.open(dock.url);
- } else if (dock.type === '2' && !dock.isOpen) {
-
- this.$store.dispatch('desktop/addFrame', {
+ } else if (dock.type === "2" && !dock.isOpen) {
+ if(dock.url== "/view/debuggTool/"){
+ return true;
+ }
+ this.$store.dispatch("desktop/addFrame", {
id: dock.id,
icon: dock.src,
title: dock.title,
- url: dock.url
+ url: dock.url,
});
- this.$store.commit('desktop/addMinDock', {
+ this.$store.commit("desktop/addMinDock", {
id: dock.id,
src: dock.src,
alt: dock.title,
type: "3",
highlight: true,
url: dock.url,
- screenshot: ''
+ screenshot: "",
});
//鎵撳紑搴旂敤鍚庡紓姝ユ姄鎷�,涔嬪悗鐨勬姄鎷嶉噰鐢ㄨ繖寮犲浐瀹氱殑
//if(dock.name=='cameraVideo'||dock.name=='search'||dock.name=='library'||dock.name=='cameraAccess'||dock.name=='dataStack'){
- setTimeout(()=>{
- this.$parent.screenShot(dock);
- },1500)
+ setTimeout(() => {
+ this.$parent.screenShot(dock);
+ }, 1500);
//}
- } else if (dock.type === '2' && dock.isOpen) {
- this.$store.commit('desktop/resetMinFrame', dock.id);
+ } else if (dock.type === "2" && dock.isOpen) {
+ this.$store.commit("desktop/resetMinFrame", dock.id);
+ }
+ },
+ openSdkVideo(dock) {
+ if (dock.url && dock.sdk_name) {
+ this.videoUrl = dock.url;
+ this.showVideo = true;
}
},
resetDockItem() {
- const dockItems = document.getElementsByClassName('dock-item');
- const dockMask = document.getElementsByClassName('dock-mask')[0];
+ 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';
+ dockMask.style.width = dockItems.length * 60 + 40 + "px";
},
addFrameByName(name, params) {
-
let dock = null;
- this.$store.state.desktop.docks.forEach(app => {
+ 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/closeFrame", dock);
}
- this.$store.dispatch('desktop/addFrame', {
+ this.$store.dispatch("desktop/addFrame", {
id: dock.id,
icon: dock.src,
title: dock.title,
- url: dock.url + "?" + params
+ url: dock.url + "?" + params,
});
- this.$store.commit('desktop/addMinDock', {
+ this.$store.commit("desktop/addMinDock", {
id: dock.id,
src: dock.src,
alt: dock.title,
type: "3",
highlight: true,
url: dock.url,
- screenshot: ''
+ screenshot: "",
});
- }
- }
+ },
+ addFrameByID(id, params) {
+ let dock = null;
+ let toClose = null;
+ this.$store.state.desktop.docks.forEach((app) => {
+ if (app.id == id) {
+ dock = app;
+ }
+ if (app.name == "algorithmManage") {
+ toClose = app;
+ }
+ });
+ this.dockClick(dock);
+ },
+ },
};
</script>
<style lang="scss">
+.el-carousel__arrow--left {
+ left: 0 !important;
+}
+.el-carousel__arrow--right {
+ right: 0 !important;
+}
+.el-carousel__button {
+ width: 12px !important;
+ height: 12px !important;
+ border-radius: 50% !important;
+}
.tools-entry {
//margin-top: 130px;
position: absolute;
@@ -148,10 +312,41 @@
width: 110px;
height: 110px;
margin: auto;
+ position: relative;
+ border-radius: 10px;
img {
vertical-align: middle;
margin-right: -3px;
+ width: 82px;
+ // height: 82px;
}
+ .badge {
+ position: absolute;
+ top: 13px;
+ right: 8px;
+ width: 22px;
+ height: 22px;
+ font-size: 14px;
+ background-color: red;
+ border-radius: 50%;
+ color: #fff;
+ line-height: 22px;
+ text-align: center;
+ }
+ }
+ .el-loading-mask {
+ border-radius: 8px;
+ }
+ .el-loading-spinner {
+ top: 20px;
+ }
+ .el-loading-spinner .path {
+ stroke: #78adf7;
+ }
+ .el-loading-spinner .el-loading-text {
+ line-height: 1;
+ margin-top: -30px;
+ color: #78adf7;
}
.app-name {
padding-top: 10px;
@@ -168,15 +363,54 @@
}
}
}
- .logo{
+ .logo {
text-align: right;
padding-right: 50px;
user-select: none;
- img{
+ margin-top: -74px;
+ img {
user-select: none;
-webkit-user-drag: none;
}
}
}
+ .videolist_appbox {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 9999999;
+ }
+
+ .videolist_appbox .video_t {
+ z-index: 2;
+
+ }
+
+ .videolist_appbox .mask {
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+ .video_close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ z-index: 3;
+ color: #fff;
+ background: lightgray;
+ padding: 10px;
+ border-radius: 20px;
+ i{
+ font-size: 20px;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0