From 28c0c2dcec08b4932a4fc5bfd6bcf0dc036edb23 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期五, 23 十月 2020 20:15:01 +0800 Subject: [PATCH] 应用中心-算法软件实时显示安装/升级进度 --- src/pages/ai/index/App.vue | 202 ++++++++++++++++++++++++++++++++++---------------- 1 files changed, 136 insertions(+), 66 deletions(-) diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index 03c0690..fa7e202 100644 --- a/src/pages/ai/index/App.vue +++ b/src/pages/ai/index/App.vue @@ -23,10 +23,16 @@ <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'"> <p class="src-title">绠楁硶杞欢</p> <div class="flex-list"> - <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id"> + <!-- <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id"> <div class="list-choose-item-left"> <div class="list-complete-item-handle"> - <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> + <div + class="svg-wrap" + :class="{willUpGrade:item.isUpgrade}" + v-loading="item.upgradeLoading" + :element-loading-text="item.progressMsg" + element-loading-background="rgba(0,0,0,.8)" + > <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> <div class="mask"> <div class="info-onmask"> @@ -42,9 +48,6 @@ >鍗囩骇</el-button> </div> </div> - - <!-- <div class="list-complete-item-handle"> --> - <!-- <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> --> <img v-if="item.iconBlob" class="baseImg" @@ -60,14 +63,43 @@ </div> </div> </div> - </div> + </div> --> <div class="wrap-box" v-for="(item) in installedList" :key="item.id"> <div class="list-choose-item-left"> <div class="list-complete-item-handle"> - <div class="svg-wrap"> - <div class="mask flex-center" v-if="!item.isEdit"> + <div + class="svg-wrap" + :class="{willUpGrade:item.isUpgrade}" + v-loading="item.upgradeLoading" + :element-loading-text="item.progressMsg" + element-loading-background="rgba(0,0,0,.8)" + > + <!-- <div class="mask flex-center"> <div class="info-onmask"> <div>褰撳墠鐗堟湰:{{item.version}}</div> + </div> + </div> --> + <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> + <div class="mask" v-if="!item.isDefault || item.isUpgrade"> + <div class="info-onmask"> + <div>褰撳墠鐗堟湰:{{item.version}}</div> + <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div> + </div> + <div class="mask-btn"> + <!-- <el-button + v-if="!item.isDefault" + @click="unLoad(item)" + type="primary" + size="small" + class="bot-btn" + >鍗歌浇</el-button> --> + <el-button + v-if="item.isUpgrade" + @click="donwload(item)" + type="warning" + size="small" + class="bot-btn" + >鍗囩骇</el-button> </div> </div> <img @@ -448,24 +480,27 @@ FileUploader }, computed: { - notInstalledList() { - return this.sdkList.filter(sdk => { - return sdk.installed === false; - }); - }, - installedList() { - return this.sdkList.filter(sdk => { - return sdk.installed === true && !sdk.isUpgrade; - }); - }, - ungradeList() { - // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀� - //return []; - return this.sdkList.filter(sdk => { - return sdk.isUpgrade === true; - }); - }, - isAdmin() { + // notInstalledList () { + // return this.sdkList.filter(sdk => { + // return sdk.installed === false; + // }); + // }, + // installedList () { + // return this.sdkList.filter(sdk => { + // return sdk.installed === true && !sdk.isUpgrade; + // }); + // }, + // ungradeList () { + // // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀� + // let arr = this.sdkList.filter(sdk => { + // return sdk.isUpgrade === true; + // }); + // arr.forEach(sdk => { + // sdk.upgradeLoading = false; + // }); + // return arr; + // }, + isAdmin () { if ( sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "" @@ -477,9 +512,12 @@ return false; }, }, - data() { + data () { return { sdkList: [], + installedList: [], + ungradeList: [], + notInstalledList: [], buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], activeName: "myAlgorithm", patchUpdateStatus: "", @@ -525,7 +563,7 @@ } } }, - mounted() { + mounted () { // 鑾峰彇鎵�鏈夊簲鐢� this.getAllSdk(); this.getAllApps(); @@ -534,11 +572,11 @@ this.getUnActivedAppList(); }, methods: { - isShow(authority) { + isShow (authority) { return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 }, //绂荤嚎瀹夎 - offlineInstall() { + offlineInstall () { this.installDialogVisible = false; this.isInstall = true; //瀹夎 @@ -568,7 +606,7 @@ }); }) }, - downloadApp(app, action) { + downloadApp (app, action) { if (action == 'upgrade') { app.upgradeLoading = true; } else { @@ -611,7 +649,7 @@ this.appUpgreading = true; this.startAutoFresh(); }, - async getAllApps() { + async getAllApps () { let iArry = [] let sArry = [] @@ -637,19 +675,19 @@ this.storeApps = sArry; }, //鍗歌浇搴旂敤 - unLoad(app) { + unLoad (app) { app.unloadLoading = true; let _this = this; removeApp({ appId: app.id }).then(res => { if (res && res.success) { - setTimeout(() => { - app.unloadLoading = false; - _this.getAllApps(); - window.parent.postMessage({ - msg: "AppUpdate" - }, '*') - }, 3000); + //setTimeout(() => { + app.unloadLoading = false; + _this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + //}, 3000); } }).catch(e => { console.log(e); @@ -664,7 +702,7 @@ // this.activeCode = ''; // this.activedSdkOrApp = this.newActInfo() // }, - actSdkOrApp(id, type = 'sdk') { + actSdkOrApp (id, type = 'sdk') { this.actType = type; this.actId = id; this.actDrawerShow = true; @@ -672,7 +710,7 @@ this.activeCode = ''; this.activedSdkOrApp = this.newActInfo() }, - newActInfo() { + newActInfo () { return { activateCode: '', productName: '', @@ -682,7 +720,7 @@ devIds: '' } }, - getUnActivedList() { + getUnActivedList () { getUnActivedSdk().then(res => { if (res.code == 200) { this.unActivedSDKList = res.data; @@ -690,14 +728,14 @@ }) }, - getUnActivedAppList() { + getUnActivedAppList () { getUnActivedApp().then(res => { if (res.code == 200) { this.unActivedAppList = res.data; } }); }, - actived() { + actived () { let _this = this; if (this.actType == 'sdk') { //婵�娲荤畻娉� @@ -735,12 +773,12 @@ }); } }, - getCodeDetail() { }, - checkMyAlgorith() { + getCodeDetail () { }, + checkMyAlgorith () { this.actDrawerShow = false; this.activeName = "myAlgorithm"; }, - onFileUpload(file) { + onFileUpload (file) { //this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪畨瑁�</span>`; this.patchFile = { ...file }; this.fileAdded = true; @@ -778,22 +816,50 @@ }, - onFileAdded(f) { + onFileAdded (f) { this.patchUpdateStatus = ""; }, - async getAllSdk() { + async getAllSdk () { + let installedList = []; + let unInstalledList = []; let res = await findAllSdk(); if (res && res.success) { - this.sdkList = res.data.map((i, index) => { - this.$set(i, "isEdit", false); - return i; + + res.data.forEach(item => { + let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item) + if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") { + obj.upgradeLoading = true; + + this.appUpgreading = true; + this.startAutoFresh(); + } + + //绠楁硶杞欢 宸插畨瑁呭叾涓寘鍚緟鍗囩骇 鏈畨瑁� + item.installed ? installedList.push(obj) : unInstalledList.push(obj) + }); + + + // this.sdkList = res.data.map((i, index) => { + // if (i.progressMsg !== "" && i.progressMsg !== "宸插畨瑁�") { + // i.upgradeLoading = true; + + // this.appUpgreading = true; + // this.startAutoFresh(); + // } + // this.$set(i, "isEdit", false); + // return i; + // }); } + this.installedList = installedList; + this.notInstalledList = unInstalledList; }, - donwload(item) { - this.downloading = true; + donwload (item) { + debugger + item.upgradeLoading = true; + //this.downloading = true; this.downloadItem = item.id; downloadSdk({ path: item.id }) @@ -802,7 +868,8 @@ type: "success", message: "绠楁硶宸插畨瑁�" }); - this.downloading = false; + item.upgradeLoading = false; + //this.downloading = false; this.downloadItem = ""; this.getAllSdk(); }) @@ -811,19 +878,22 @@ type: "warning", message: err.data }); - - this.downloading = false; + item.upgradeLoading = false; + //this.downloading = false; this.downloadItem = ""; }); + // 寮�鍚嚜鍔ㄥ埛鏂� + this.appUpgreading = true; + this.startAutoFresh(); }, - inputBlur(item) { + inputBlur (item) { // console.log(item, '淇敼鍚嶇О') this.$set(item, "isEdit", false); }, - handleTabClick() { + handleTabClick () { }, - startAutoFresh() { + startAutoFresh () { if (this.freshTimer) { clearTimeout(this.freshTimer) } @@ -906,7 +976,7 @@ .src-title { //color: #bfbfbf; color: #bbcee8; - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC"; + font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; font-weight: 650; font-style: normal; height: 36px; @@ -931,7 +1001,7 @@ position: absolute; top: 50%; left: 50%; - background: url("/images/algo/green.gif"); + background: url('/images/algo/green.gif'); overflow: hidden; transform: translate(-50%, -50%); .inner-bar { @@ -1093,16 +1163,16 @@ } } .drawer-content { - font-family: "PingFangSC-Regular"; + font-family: 'PingFangSC-Regular'; .el-step__title.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; - font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; + font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-step__head.is-process { border-color: #3d68e1 !important; color: #3d68e1 !important; - font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif; + font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif; } .el-input { width: 100%; -- Gitblit v1.8.0