From 355de6d28489e9ff3d17138575c2fef32266930e Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 15 十月 2020 16:13:08 +0800
Subject: [PATCH] 应用中心未安装算法图标修复,集群节点展示组件更新
---
src/pages/ai/index/App.vue | 541 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 367 insertions(+), 174 deletions(-)
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 5334d41..c6cc3ad 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -25,15 +25,16 @@
<div class="flex-list">
<div class="wrap-box" v-for="item in ungradeList" :key="item.id">
<div class="list-choose-item-left">
- <div class="mask">
+ <div class="mask flex-center">
+ <div class="info-onmask">
+ <div>褰撳墠鐗堟湰:{{item.version}}</div>
+ <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+ </div>
<el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button>
</div>
<div class="list-complete-item-handle">
<div class="svg-wrap">
- <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">
- <use :xlink:href="`#${item.icon}`" />
- </svg>-->
<img
class="baseImg"
:src="`data:image/png;base64,${item.iconBlob}`"
@@ -50,26 +51,13 @@
</div>
<div class="wrap-box" v-for="(item) in installedList" :key="item.id">
<div class="list-choose-item-left">
- <!-- <div class="mask" v-if="!item.isEdit">
- <el-button
- @click="commandAlgLib(item)"
- type="primary"
- class="bot-btn"
- >缂栬緫鍚嶇О</el-button>
- </div>-->
<div class="list-complete-item-handle">
- <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->
<div class="svg-wrap">
- <div class="mask" v-if="!item.isEdit">
- <el-button
- @click="commandAlgLib(item)"
- type="primary"
- class="bot-btn"
- >缂栬緫鍚嶇О</el-button>
+ <div class="mask flex-center" v-if="!item.isEdit">
+ <div class="info-onmask">
+ <div>褰撳墠鐗堟湰:{{item.version}}</div>
+ </div>
</div>
- <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">
- <use :xlink:href="`#${item.icon}`" />
- </svg>-->
<img
class="baseImg"
:src="`data:image/png;base64,${item.iconBlob}`"
@@ -109,7 +97,7 @@
<div class="svg-wrap">
<img
class="baseImg"
- :src="`data:image/png;base64,${item.iconBlob}`"
+ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
alt
/>
</div>
@@ -125,34 +113,81 @@
<p class="src-title">搴旂敤杞欢</p>
<div class="flex-list">
<div class="wrap-box" v-for="(item) in installedApps" :key="item.id">
- <div class="list-choose-item-left">
- <div class="list-complete-item-handle">
- <div class="svg-wrap" v-loading="item.unloadLoading" element-loading-text="鍗歌浇涓�" element-loading-background="rgba(0,0,0,.8)">
- <div class="mask" v-if="!item.isDefault">
- <el-button
- v-if="!item.isDefault"
- @click="unLoad(item)"
- type="primary"
- class="bot-btn"
- >鍗歌浇</el-button>
- </div>
- <img class="baseImg" :src="`${item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon}`" alt />
+ <div class="list-choose-item-left">
+ <div class="list-complete-item-handle">
+ <div
+ class="svg-wrap"
+ v-loading="item.unloadLoading"
+ element-loading-text="鍗歌浇涓�"
+ element-loading-background="rgba(0,0,0,.8)"
+ >
+ <div class="mask" v-if="!item.isDefault">
+ <el-button
+ v-if="!item.isDefault"
+ @click="unLoad(item)"
+ type="primary"
+ class="bot-btn"
+ >鍗歌浇</el-button>
</div>
- <div class="alg-name">
- <div style="padding:0px 10px 0px 10px;">
- <span v-if="!item.isEdit">{{ item.name }}</span>
- <el-input
- size="small"
- v-model="item.sdk_name"
- v-if="item.isEdit"
- v-focus
- :maxlength="15"
- @blur="inputBlur(item)"
- ></el-input>
- </div>
+ <img
+ class="baseImg"
+ :src="`${item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon}`"
+ alt
+ />
+ </div>
+ <div class="alg-name">
+ <div style="padding:0px 10px 0px 10px;">
+ <span v-if="!item.isEdit">{{ item.name }}</span>
+ <el-input
+ size="small"
+ v-model="item.sdk_name"
+ v-if="item.isEdit"
+ v-focus
+ :maxlength="15"
+ @blur="inputBlur(item)"
+ ></el-input>
</div>
</div>
</div>
+ </div>
+ </div>
+ <div class="wrap-box" v-for="item in storeApps" :key="item.id">
+ <div class="list-choose-item-left">
+ <div class="list-complete-item-handle uninstall">
+ <div
+ class="svg-wrap"
+ v-loading="item.installLoading"
+ element-loading-text="瀹夎涓�"
+ element-loading-background="rgba(0,0,0,.8)"
+ >
+ <div class="mask">
+ <el-button
+ type="primary"
+ class="bot-btn"
+ @click="downloadApp(item)"
+ >瀹夎</el-button>
+ </div>
+ <img
+ class="baseImg"
+ :src="item.iconBlob? 'data:image/png;base64,'+item.iconBlob:item.icon"
+ alt
+ />
+ </div>
+ <div class="alg-name">
+ <div style="padding:0px 10px 0px 10px;">
+ <span v-if="!item.isEdit">{{ item.name }}</span>
+ <el-input
+ size="small"
+ v-model="item.name"
+ v-if="item.isEdit"
+ v-focus
+ :maxlength="15"
+ @blur="inputBlur(item)"
+ ></el-input>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -185,7 +220,7 @@
<div class="list-choose-item-left">
<div class="list-complete-item-handle">
<div class="alg-icon svg-wrap">
- <div class="mask" @click="actSdk(item.id)">
+ <div class="mask" @click="actSdkOrApp(item.id)">
<span
class="iconfont iconyunxiazai"
style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
@@ -216,16 +251,19 @@
</div>
<p class="src-title">搴旂敤杞欢</p>
<div class="app-list flex-list">
- <div class="wrap-box" v-for="item in storeApps" :key="item.id">
+ <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id">
<div class="list-choose-item-left">
<div class="list-complete-item-handle">
- <div class="svg-wrap" v-loading="item.installLoading" element-loading-text="瀹夎涓�" element-loading-background="rgba(0,0,0,.8)">
- <div class="mask">
- <el-button type="primary" class="bot-btn" @click="downloadApp(item)">瀹夎</el-button>
+ <div class="alg-icon svg-wrap">
+ <div class="mask" @click="actSdkOrApp(item.id,'app')">
+ <span
+ class="iconfont iconyunxiazai"
+ style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
+ ></span>
</div>
<img
class="baseImg"
- :src="item.iconBlob? 'data:image/png;base64,'+item.iconBlob:item.icon"
+ :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
alt
/>
</div>
@@ -246,7 +284,6 @@
</div>
</div>
</div>
-
</div>
<el-drawer title="涓嬭浇" :visible.sync="actDrawerShow" :direction="direction">
<div class="drawer-content">
@@ -274,23 +311,23 @@
<ul class="desc">
<li>
<label>婵�娲荤爜:</label>
- <span>{{activedSdk.activateCode}}</span>
+ <span>{{activedSdkOrApp.activateCode}}</span>
</li>
<li>
<label>浜у搧鍚嶇О:</label>
- <span>{{activedSdk.productName}}</span>
+ <span>{{activedSdkOrApp.productName}}</span>
</li>
<li>
<label>閰嶇疆璇︽儏:</label>
- <span>{{activedSdk.setting}}</span>
+ <span>{{activedSdkOrApp.setting}}</span>
</li>
<li>
<label>鏈嶅姟鍒版湡鏃�:</label>
- <span>{{activedSdk.expireTime}}</span>
+ <span>{{activedSdkOrApp.expireTime}}</span>
</li>
<li>
<label>璁稿彲璇�:</label>
- <span>{{activedSdk.licence}}</span>
+ <span>{{activedSdkOrApp.licence}}</span>
</li>
<!-- <li>
<label>璁惧ID:</label>
@@ -310,6 +347,52 @@
</div>
</div>
</div>
+ <el-dialog
+ title="瀹夎鍖呬俊鎭�"
+ :visible.sync="installDialogVisible"
+ width="40%"
+ :close-on-click-modal="false"
+ >
+ <div class="installInfo">
+ <template v-if="installAppPackage != null">
+ <div>
+ <div>
+ <span>瀹夎鍖呭悕绉帮細</span>
+ <span>{{installAppPackage.productName}}</span>
+ </div>
+ <div>
+ <span>瀹夎鐗堟湰锛�</span>
+ <span>{{installAppPackage.version}}</span>
+ </div>
+ <div>
+ <span>鏇存柊鍐呭锛�</span>
+ <span>{{installAppPackage.installContent}}</span>
+ </div>
+ </div>
+ </template>
+ <template v-if="installSdkPackage != null">
+ <div>
+ <div>
+ <span>瀹夎鍖呭悕绉帮細</span>
+ <span>{{installSdkPackage.productName}}</span>
+ </div>
+ <div>
+ <span>瀹夎鐗堟湰锛�</span>
+ <span>{{installSdkPackage.version}}</span>
+ </div>
+ <div>
+ <span>鏇存柊鍐呭锛�</span>
+ <span>{{installSdkPackage.installContent}}</span>
+ </div>
+ </div>
+ </template>
+ <p>纭畾瀹夎锛�</p>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="installDialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="offlineInstall">瀹� 瑁�</el-button>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
@@ -330,10 +413,11 @@
findByType,
getTagList,
downloadSdk,
- installSdk
+ installSdk,
+ getInstallInfo
} from "./api";
-import { getApps,installApp,removeApp } from "@/api/app";
-import { getUnActivedSdk, actPageAlg } from "@/api/app";
+import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
+
import FileUploader from "@/components/subComponents/FileUpload/index";
import TaskManage from "@/Pool/TaskMange";
import VideoManageData from "@/Pool/VideoManageData";
@@ -429,10 +513,17 @@
sceneSdks: [],
sceneRuleList: "",
isInstall: false,
+ installDialogVisible: false,
+ installPackage: {},
+ installAppPackage: null,
+ installSdkPackage: null,
installPercentage: 0,
unActivedSDKList: [],
- actSdkId: '',
- activedSdk: {
+ unActivedAppList: [],
+ //actSdkId: '',
+ actType: '',
+ actId: '',
+ activedSdkOrApp: {
activateCode: '',
productName: '',
setting: '',
@@ -442,8 +533,9 @@
},
// unloadLoading: false,
// installLoading: false,
- installedApps:[],
- storeApps:[]
+ installedApps: [],
+ storeApps: [],
+ installFile: {}
}
},
watch: {
@@ -477,73 +569,110 @@
this.findAll();
this.getUser();
this.getUnActivedList();
+ this.getUnActivedAppList();
// this.TaskMange.findAllSdk();
// this.TaskMange.findByType();
this.VideoManageData.init();
},
methods: {
- downloadApp(app){
+ offlineInstall () {
+ this.installDialogVisible = false;
+ this.isInstall = true;
+ //瀹夎
+ installSdk(this.installFile).then(res => {
+ debugger
+ if (res.success) {
+ this.isInstall = false;
+ this.$message({
+ type: 'success',
+ message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�'
+ });
+ setTimeout(() => {
+ this.findAllSdk();
+ this.getAllApps();
+ this.activeName = 'myAlgorithm';
+ }, 3000)
+ }
+
+ }).catch(e => {
+ console.log(e)
+ this.isInstall = false;
+ this.$message({
+ type: 'error',
+ message: e.data
+ });
+ })
+ },
+ downloadApp (app) {
app.installLoading = true;
let _this = this;
- installApp(app).then(res=>{
- if(res && res.success){
- setTimeout(()=>{
+ installApp({ path: app.id }).then(res => {
+ if (res && res.success) {
+ setTimeout(() => {
app.installLoading = false;
_this.getAllApps();
window.parent.postMessage({
msg: "AppUpdate"
}, '*')
- },3000);
+ }, 3000);
}
})
},
- getAllApps(){
+ getAllApps () {
let _this = this;
_this.installedApps = [];
_this.storeApps = [];
- getApps().then(res=>{
- if(res && res.success){
+ getApps().then(res => {
+ if (res && res.success) {
//_this.storeApps = res.data;
- res.data.forEach(item=>{
- if(item.installed){
- let obj = Object.assign({unloadLoading:false},item)
+ res.data.forEach(item => {
+ if (item.installed) {
+ let obj = Object.assign({ unloadLoading: false }, item)
_this.installedApps.push(obj)
- }else{
- let obj = Object.assign({installLoading:false},item)
+ } else {
+ let obj = Object.assign({ installLoading: false }, item)
_this.storeApps.push(obj)
}
});
- console.log('_this.installedApps',_this.installedApps);
- console.log('_this.storeApps',_this.storeApps);
+ console.log('_this.installedApps', _this.installedApps);
+ console.log('_this.storeApps', _this.storeApps);
}
})
},
//鍗歌浇搴旂敤
- unLoad(app){
+ unLoad (app) {
app.unloadLoading = true;
let _this = this;
- removeApp({appId:app.id}).then(res=>{
-
- if(res && res.success){
- setTimeout(()=>{
+ removeApp({ appId: app.id }).then(res => {
+
+ if (res && res.success) {
+ setTimeout(() => {
app.unloadLoading = false;
_this.getAllApps();
window.parent.postMessage({
msg: "AppUpdate"
}, '*')
- },3000);
+ }, 3000);
}
})
},
- actSdk (id) {
- this.actSdkId = id;
+ // actSdk (id) {
+ // this.actSdkId = id;
+ // this.actDrawerShow = true;
+ // this.actStep = 0;
+ // this.activeCode = '';
+ // this.activedSdkOrApp = this.newActInfo()
+ // },
+ actSdkOrApp (id, type = 'sdk') {
+ this.actType = type;
+ this.actId = id;
this.actDrawerShow = true;
this.actStep = 0;
this.activeCode = '';
- this.activedSdk = this.newActInfo()
+ this.activedSdkOrApp = this.newActInfo()
},
- newActInfo(){
+ newActInfo () {
return {
activateCode: '',
productName: '',
@@ -561,26 +690,54 @@
})
},
+ getUnActivedAppList () {
+ getUnActivedApp().then(res => {
+ if (res.code == 200) {
+ this.unActivedAppList = res.data;
+ }
+ });
+ },
+
installFormat (percentage) {
return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`;
},
actived () {
let _this = this;
- actPageAlg(this.actSdkId, this.activeCode).then(res => {
- if (res.data.isSuccess) {
- _this.activedSdk = res.data.successMsg;
- _this.actStep++;
- _this.getUnActivedList();
- _this.findAllSdk();
- }else{
- _this.$notify({
- type:'error',
- message:res.data.failMsg.failMsg
- });
- }
- }).catch(e => {
- console.log(e)
- })
+ if (this.actType == 'sdk') {
+ //婵�娲荤畻娉�
+ actPageAlg(this.actId, this.activeCode).then(res => {
+ if (res.data.isSuccess) {
+ _this.activedSdkOrApp = res.data.successMsg;
+ _this.actStep++;
+ _this.getUnActivedList();
+ _this.findAllSdk();
+ } else {
+ _this.$notify({
+ type: 'error',
+ message: res.data.failMsg.failMsg
+ });
+ }
+ }).catch(e => {
+ console.log(e)
+ });
+ } else if (this.actType == 'app') {
+ //婵�娲诲簲鐢�
+ actApp(this.actId, this.activeCode).then(res => {
+ if (res.data.isSuccess) {
+ _this.activedSdkOrApp = res.data.successMsg;
+ _this.actStep++;
+ _this.getUnActivedAppList();
+ _this.getAllApps();
+ } else {
+ _this.$notify({
+ type: 'error',
+ message: res.data.failMsg.failMsg
+ });
+ }
+ }).catch(e => {
+ console.log(e)
+ });
+ }
},
getCodeDetail () { },
checkMyAlgorith () {
@@ -592,6 +749,79 @@
this.patchFile = { ...file };
this.fileAdded = true;
const h = this.$createElement;
+ //涓婁紶瀹屾垚鑾峰彇瀹夎淇℃伅
+ let _this = this;
+ getInstallInfo(file).then(res => {
+ _this.installFile = file;
+ if (res.success) {
+ _this.installDialogVisible = true;
+ debugger
+ if (res.data.apps.length > 0) {
+ _this.installAppPackage = {
+ appId: res.data.apps[0].appId,
+ version: res.data.apps[0].version,
+ productName: res.data.productName,
+ installContent: res.data.apps[0].installContent
+ }
+ }
+ if (res.data.sdks.length > 0) {
+ _this.installSdkPackage = {
+ appId: res.data.sdks[0].sdkId,
+ version: res.data.sdks[0].version,
+ productName: res.data.productName,
+ installContent: res.data.sdks[0].installContent
+ }
+ }
+
+ // this.$confirm('', '绠楁硶淇℃伅', {
+ // message: `<div class="installInfo">
+ // <div><span>绠楁硶鍚嶇О锛�</span><span>${file.filename}</span></div>
+ // <div><span>瀹夎鐗堟湰锛�</span><span></span></div>
+ // <div><span>鏇存柊鍐呭锛�</span><span></span></div>
+ // <p>纭畾瀹夎姝ょ畻娉曪紵</p>
+ // </div>`,
+ // confirmButtonText: '瀹夎',
+ // cancelButtonText: '鍙栨秷',
+ // dangerouslyUseHTMLString: true,
+ // type: ''
+ // }).then(() => {
+ // this.isInstall = true;
+ // //瀹夎
+ // installSdk(file).then(res => {
+ // debugger
+ // if (res.success) {
+ // this.isInstall = false;
+ // //this.$refs['progressBar'].style.width = 100%
+ // //this.installPercentage = 100%
+ // this.$message({
+ // type: 'success',
+ // message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�'
+ // });
+ // setTimeout(() => {
+ // this.findAllSdk();
+ // this.activeName = 'myAlgorithm';
+ // }, 3000)
+ // }
+
+ // }).catch(e => {
+ // console.log(e)
+ // this.isInstall = false;
+ // this.$message({
+ // type: 'error',
+ // message: e.data
+ // });
+ // })
+ // }).catch(() => {
+ // console.log('鍙栨秷瀹夎');
+
+ // })
+ }
+ }).catch(e => {
+ this.$message({
+ type: 'error',
+ message: e.data
+ });
+ })
// this.$msgbox({
// title: '绠楁硶淇℃伅',
// message: h('div', null, [
@@ -622,39 +852,7 @@
// });
// });
- this.$confirm('', '绠楁硶淇℃伅', {
- message: `<div class="installInfo">
- <div><span>绠楁硶鍚嶇О锛�</span><span>${file.filename}</span></div>
- <div><span>瀹夎鐗堟湰锛�</span><span></span></div>
- <div><span>鏇存柊鍐呭锛�</span><span></span></div>
- <p>纭畾瀹夎姝ょ畻娉曪紵</p>
- </div>`,
- confirmButtonText: '瀹夎',
- cancelButtonText: '鍙栨秷',
- dangerouslyUseHTMLString: true,
- type: ''
- }).then(() => {
- this.isInstall = true;
- //瀹夎
- installSdk(file).then(res => {
- if (res.success) {
-
- this.isInstall = false;
- //this.$refs['progressBar'].style.width = 100%
- //this.installPercentage = 100%
- this.$message({
- type: 'success',
- message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�'
- });
- setTimeout(() => {
- this.findAllSdk();
- this.activeName = 'myAlgorithm';
- }, 3000)
- }
- });
- }).catch(() => {
- console.log('鍙栨秷瀹夎')
- })
+
},
@@ -1352,32 +1550,31 @@
color: #606266;
cursor: pointer;
}
-.el-loading-mask .el-loading-spinner{
- top: 40px!important;
+.el-loading-mask .el-loading-spinner {
+ top: 40px !important;
}
-.el-loading-mask .el-loading-spinner svg{
- transform: none!important;
- top: 20px!important;
- left: 40%!important;
+.el-loading-mask .el-loading-spinner svg {
+ transform: none !important;
+ top: 20px !important;
+ left: 40% !important;
}
-.el-loading-mask .el-loading-spinner p.el-loading-text{
- display: block!important;
- text-align: center!important;
- bottom: 10px!important;
- top: 80px!important;
+.el-loading-mask .el-loading-spinner p.el-loading-text {
+ display: block !important;
+ text-align: center !important;
+ bottom: 10px !important;
+ top: 80px !important;
right: 0 !important;
color: #78adf7;
}
-.el-loading-mask .el-loading-spinner .path{
+.el-loading-mask .el-loading-spinner .path {
stroke: #78adf7;
}
.installInfo {
text-indent: 2em;
font-size: 14px;
- color: #777;
+ line-height: 26px;
p {
text-align: center;
- color: #666;
}
}
.src-title {
@@ -1658,7 +1855,8 @@
}
}
}
- .store-list,.app-list {
+ .store-list,
+ .app-list {
display: flex;
flex-wrap: wrap;
.wrap-box {
@@ -1812,7 +2010,9 @@
z-index: 1;
border-radius: 3px;
display: none;
-
+ .info-onmask {
+ color: #8ecaff;
+ }
i {
color: #fff;
position: relative;
@@ -1876,28 +2076,9 @@
cursor: pointer;
position: relative;
font-size: 14px;
- // display: inline-block;
- // @media screen and(min-width: 1895px) {
- // //margin: 20px 25px 20px 20px;
- // margin: 20px 30px 20px 20px;
- // }
- // @media screen and(min-width: 1695px) and(max-width:1895px ) {
- // margin: 20px 10px 20px 15px;
- // }
- // @media screen and(min-width: 1460px) and(max-width: 1695px) {
- // margin: 20px 25px 20px 20px;
- // }
- // @media screen and(max-width: 1460px) {
- // margin: 20px 15px 20px 10px;
- // }
- // width: 126px;
- // height: 120px;
- // width: 220px;
- // height: 214px;
+
transition: all 1s;
background: #ffffff;
- //border: 1px solid #e2e2e2;
- //box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
border-radius: 4px;
p {
display: none;
@@ -1920,6 +2101,10 @@
top: 0;
.bot-btn {
flex: 1;
+ }
+ &.flex-center {
+ align-items: center;
+ justify-content: center;
}
}
}
@@ -2096,6 +2281,14 @@
max-height: 106px;
}
}
+ &.uninstall {
+ .svg-wrap {
+ background-color: #ddd;
+ }
+ .alg-name {
+ color: darkgray;
+ }
+ }
}
.dragAreaR {
height: 100%;
--
Gitblit v1.8.0