From 401524fb5661d57ffb2229d683fe4de85b65fd1c Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 31 八月 2023 17:54:24 +0800
Subject: [PATCH] 生产管理看板+删不需要的文件
---
src/pages/desktop/index/components/ToolsEntry.vue | 450 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 369 insertions(+), 81 deletions(-)
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index 55084be..63730ea 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -1,125 +1,413 @@
<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-name">{{dock.name}}</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>
+ </el-carousel-item>
+ </el-carousel>
+
+ <div class="logo">
+ <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',
- 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:'绯荤粺缁存姢'}
- // ]
- }
+ loading: true,
+ showVideo: false,
+ localApps: [],
+ installedSdk: [],
+ videoUrl: "",
+ sdkList: [
+
+ ],
+ };
},
- methods:{
-
+ 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() {
+ this.getAllSdk();
+ //this.carousels =
+ window.addEventListener("message", (e) => {
+ if (e.data && e.data.msg) {
+ let msg = e.data.msg;
+ // token 涓嶅悎娉�, 閫�鍑�
+ if (msg === "logout") {
+ location.assign("/");
+ return;
+ }
+ if (msg.indexOf("toSearch") >= 0) {
+ let params = msg.substring(7);
+ 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') {
- debugger
- this.$store.dispatch('desktop/addFrame', {
+ } else if (dock.type === "2" && !dock.isOpen) {
+ this.$store.dispatch("desktop/addFrame", {
id: dock.id,
icon: dock.src,
- title: dock.name,
- url: dock.url
+ title: dock.title,
+ url: dock.url,
});
- } else if (dock.type === '3') {
- this.$store.commit('desktop/resetMinFrame', dock.id);
- this.resetDockItem();
+ 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);
+ }
+ },
+ 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) => {
+ 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: "",
+ });
+ },
+ 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">
- .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;
- }
+.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;
+ 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;
+ position: relative;
+ border-radius: 10px;
+ img {
+ vertical-align: middle;
+ margin-right: -3px;
+ width: 82px;
+ // height: 82px;
}
- .app-name{
- padding-top: 10px;
- text-align: center;
- font: Bold 16px/16px Microsoft JhengHei;
+ .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;
}
}
-
- &:hover{
- .app-icon{
- background: rgba(0,0,0,.4);
- }
+ .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;
+ 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;
+ 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