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