<template>
|
<div class="tools-entry">
|
<div class="entry-wrap">
|
<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>
|
</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() {
|
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() {
|
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") {
|
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);
|
}
|
},
|
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];
|
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: "",
|
});
|
},
|
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;
|
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;
|
}
|
.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;
|
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>
|
