From fbf765d5c363f4ccec60fe9d73875099ffe544ff Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 17 十月 2020 10:26:56 +0800
Subject: [PATCH] 应用中心应用添加升级交互

---
 src/pages/ai/index/App.vue |  283 ++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 183 insertions(+), 100 deletions(-)

diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 653f3cc..aa0dbb2 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -23,25 +23,35 @@
                 <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="item.id">
+                    <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id">
                       <div class="list-choose-item-left">
-                        <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">
+                          <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}">
+                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
+                            <div class="mask">
+                              <div class="info-onmask">
+                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
+                                <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                              </div>
+                              <div class="mask-btn">
+                                <el-button
+                                  type="warning"
+                                  class="bot-btn"
+                                  size="small"
+                                  @click="donwload(item)"
+                                >鍗囩骇</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"
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -66,7 +76,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -105,7 +115,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -123,17 +133,33 @@
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            v-loading="item.unloadLoading"
-                            element-loading-text="鍗歌浇涓�"
+                            :class="{willUpGrade:item.isUpgrade}"
+                            v-loading="item.unloadLoading||item.upgradeLoading"
+                            :element-loading-text="item.unloadLoading?'鍗歌浇涓�':'鍗囩骇涓�'"
                             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>
+                            <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="downloadApp(item,'upgrade')"
+                                  type="warning"
+                                  size="small"
+                                  class="bot-btn"
+                                >鍗囩骇</el-button>
+                              </div>
                             </div>
                             <img
                               v-if="item.iconBlob"
@@ -141,7 +167,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -164,8 +190,8 @@
                         <div class="list-complete-item-handle uninstall">
                           <div
                             class="svg-wrap"
-                            v-loading="item.installLoading"
-                            element-loading-text="瀹夎涓�"
+                            v-loading="item.installLoading||item.upgradeLoading"
+                            :element-loading-text="item.installLoading?'瀹夎涓�':'鍗囩骇涓�'"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
                             <div class="mask">
@@ -181,7 +207,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -242,7 +268,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -279,7 +305,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -442,24 +468,24 @@
     FileUploader
   },
   computed: {
-    notInstalledList() {
+    notInstalledList () {
       return this.TaskMange.list1.filter(sdk => {
         return sdk.installed === false;
       });
     },
-    installedList() {
+    installedList () {
       return this.TaskMange.list1.filter(sdk => {
         return sdk.installed === true;
       });
     },
-    ungradeList() {
+    ungradeList () {
       // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀�
-      return [];
+      //return [];
       return this.TaskMange.list1.filter(sdk => {
         return sdk.isUpgrade === true;
       });
     },
-    isAdmin() {
+    isAdmin () {
       if (
         sessionStorage.getItem("userInfo") &&
         sessionStorage.getItem("userInfo") !== ""
@@ -471,7 +497,7 @@
       return false;
     },
   },
-  data() {
+  data () {
     return {
       TaskMange: new TaskManage,
       VideoManageData: new VideoManageData,
@@ -565,7 +591,7 @@
   },
   watch: {
     list2: {
-      handler(newVal, oldVal) {
+      handler (newVal, oldVal) {
         // window.console.log(newVal, oldVal, '鐩戝惉list2')
         if (newVal !== oldVal) {
           // window.console.log(newVal, '鐩戝惉list2')
@@ -586,7 +612,7 @@
       }
     }
   },
-  mounted() {
+  mounted () {
     this.getAllApps();
     this.findAllSdk();
     this.findByType();
@@ -599,10 +625,11 @@
     this.VideoManageData.init();
   },
   methods: {
-    isShow(authority) {
+    isShow (authority) {
       return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
     },
-    offlineInstall() {
+    //绂荤嚎瀹夎
+    offlineInstall () {
       this.installDialogVisible = false;
       this.isInstall = true;
       //瀹夎
@@ -617,8 +644,11 @@
           setTimeout(() => {
             this.findAllSdk();
             this.getAllApps();
+            window.parent.postMessage({
+              msg: "AppUpdate"
+            }, '*')
             this.activeName = 'myAlgorithm';
-          }, 3000)
+          }, 3000);
         }
 
       }).catch(e => {
@@ -630,22 +660,46 @@
         });
       })
     },
-    downloadApp(app) {
-      app.installLoading = true;
+    downloadApp (app, action) {
+      if (action == 'upgrade') {
+        app.upgradeLoading = true;
+      } else {
+        app.installLoading = true;
+      }
       let _this = this;
+
       installApp({ path: app.id }).then(res => {
         if (res && res.success) {
           setTimeout(() => {
-            app.installLoading = false;
+            if (action == 'upgrade') {
+              app.upgradeLoading = false;
+              _this.notify({
+                type:'success',
+                message:'鍗囩骇鎴愬姛'
+              });
+            } else {
+              app.installLoading = false;
+              _this.notify({
+                type:'success',
+                message:'瀹夎鎴愬姛'
+              });
+            }
             _this.getAllApps();
             window.parent.postMessage({
               msg: "AppUpdate"
             }, '*')
           }, 3000);
         }
+      }).catch(e => {
+        console.log(e);
+        if (action == 'upgrade') {
+          app.upgradeLoading = false;
+        } else {
+          app.installLoading = false;
+        }
       })
     },
-    getAllApps() {
+    getAllApps () {
       let _this = this;
       _this.installedApps = [];
       _this.storeApps = [];
@@ -654,10 +708,10 @@
           //_this.storeApps = res.data;
           res.data.forEach(item => {
             if (item.installed) {
-              let obj = Object.assign({ unloadLoading: false }, item)
+              let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
               _this.installedApps.push(obj)
             } else {
-              let obj = Object.assign({ installLoading: false }, item)
+              let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item)
               _this.storeApps.push(obj)
             }
           });
@@ -667,7 +721,7 @@
       })
     },
     //鍗歌浇搴旂敤
-    unLoad(app) {
+    unLoad (app) {
       app.unloadLoading = true;
       let _this = this;
       removeApp({ appId: app.id }).then(res => {
@@ -681,6 +735,9 @@
             }, '*')
           }, 3000);
         }
+      }).catch(e => {
+        console.log(e);
+        app.unloadLoading = false;
       })
 
     },
@@ -691,7 +748,7 @@
     //   this.activeCode = '';
     //   this.activedSdkOrApp = this.newActInfo()
     // },
-    actSdkOrApp(id, type = 'sdk') {
+    actSdkOrApp (id, type = 'sdk') {
       this.actType = type;
       this.actId = id;
       this.actDrawerShow = true;
@@ -699,7 +756,7 @@
       this.activeCode = '';
       this.activedSdkOrApp = this.newActInfo()
     },
-    newActInfo() {
+    newActInfo () {
       return {
         activateCode: '',
         productName: '',
@@ -709,7 +766,7 @@
         devIds: ''
       }
     },
-    getUnActivedList() {
+    getUnActivedList () {
       getUnActivedSdk().then(res => {
         if (res.code == 200) {
           this.unActivedSDKList = res.data;
@@ -717,7 +774,7 @@
       })
 
     },
-    getUnActivedAppList() {
+    getUnActivedAppList () {
       getUnActivedApp().then(res => {
         if (res.code == 200) {
           this.unActivedAppList = res.data;
@@ -725,10 +782,10 @@
       });
     },
 
-    installFormat(percentage) {
+    installFormat (percentage) {
       return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`;
     },
-    actived() {
+    actived () {
       let _this = this;
       if (this.actType == 'sdk') {
         //婵�娲荤畻娉�
@@ -766,12 +823,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;
@@ -883,12 +940,12 @@
 
     },
 
-    onFileAdded(f) {
+    onFileAdded (f) {
       ;
       this.patchUpdateStatus = "";
     },
     // 鏍¢獙杈撳叆鐨勬槸鍚︽槸鏁板瓧
-    valiNum(value) {
+    valiNum (value) {
       if (value) {
         let re = /[^\-?\d.]*$/;
         if (!re.test(value)) {
@@ -905,7 +962,7 @@
       }
     },
     // 宸﹁竟鎷栧姩妯″潡寰楁嫋鍔ㄧ粨鏉熷悗鐨勮Е鍙戝嚱鏁�
-    endLeft(env) {
+    endLeft (env) {
       this.dragging = false;
       let taskId = env.to.id;
       let sdkId = this.TaskMange.list1[env.oldIndex].id;
@@ -946,24 +1003,24 @@
       this.addTaskSdk(json);
     },
     // 鍙宠竟鎷栧姩妯″潡寮�濮嬫嫋鍔ㄨЕ鍙戝嚱鏁�
-    startRight(env) {
+    startRight (env) {
       this.$nextTick(() => {
         this.dragging = true;
       });
       // window.window.console.log(env, "right start");
     },
     // 鍙宠竟鎷栧姩妯″潡鎷栧姩缁撴潫瑙﹀彂鍑芥暟
-    endRight(env) {
+    endRight (env) {
       // window.window.console.log(env, "right end");
     },
-    clickSet(data) {
+    clickSet (data) {
       if (data.isSetting) {
         data.isSetting = false;
       } else {
         data.isSetting = true;
       }
     },
-    clickDel(data, Index) {
+    clickDel (data, Index) {
       this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛屾浠诲姟鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", {
         center: true,
         showConfirmButton: true,
@@ -976,7 +1033,7 @@
         })
         .catch(err => { });
     },
-    clickSetAlgo(row, data) {
+    clickSetAlgo (row, data) {
       // window.console.log(row, data, "缂栬緫浠诲姟涓煇涓�涓畻娉�");
       if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {
         row.isShowSetAlgo = false;
@@ -1042,7 +1099,7 @@
         // });
       }
     },
-    async getRulesByTaskSdk(taskId, sdkId) {
+    async getRulesByTaskSdk (taskId, sdkId) {
       let res = await getRulesByTaskSdk({
         taskId: taskId,
         sdkId: sdkId
@@ -1078,7 +1135,7 @@
         this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));
       }
     },
-    async findAllSdk() {
+    async findAllSdk () {
       let res = await findAllSdk();
       if (res && res.success) {
         this.TaskMange.list1 = res.data.map((i, index) => {
@@ -1095,7 +1152,7 @@
         });
       }
     },
-    addTask() {
+    addTask () {
       let obj = {
         id: "",
         name: "浠诲姟" + this.TaskMange.list2.length,
@@ -1111,7 +1168,7 @@
         taskArea.scrollTop = taskArea.scrollHeight;
       });
     },
-    async findAll() {
+    async findAll () {
       let res = await findAll();
       if (res && res.success) {
         if (res.data && res.data.length !== 0) {
@@ -1148,7 +1205,7 @@
         }
       }
     },
-    clickDelSdk(task, sdk) {
+    clickDelSdk (task, sdk) {
       this.$confirm(
         "鎻愮ず锛氬垹闄ゅ悗锛屾绠楁硶鍦ㄦ湰浠诲姟涓Щ闄わ紝鍚屾椂鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵",
         {
@@ -1164,7 +1221,7 @@
         })
         .catch(err => { });
     },
-    selectChange(event, type, data) {
+    selectChange (event, type, data) {
       if (type === "options1") {
         // window.window.console.log(type, data, "閫夋嫨涓嬫媺妗�");
         data.options1.map(i => {
@@ -1175,7 +1232,7 @@
       }
     },
     // 鍒犻櫎浠诲姟绠楁硶
-    async delTaskSdk(task, sdk) {
+    async delTaskSdk (task, sdk) {
       let json = {
         taskId: task.id,
         sdkId: sdk.id
@@ -1195,7 +1252,7 @@
       }
     },
     // 鍒犻櫎浠诲姟
-    async deleteTask(data, index) {
+    async deleteTask (data, index) {
       // window.console.log(data, "deleteTask");
       let res = await deleteTask({ taskId: data.id });
       // this.$toast({
@@ -1212,7 +1269,7 @@
       }
     },
     // 鏇存柊浠诲姟鐘舵��
-    async updateTaskStatus(data) {
+    async updateTaskStatus (data) {
       // window.console.log(data, '鏇存柊浠诲姟鐘舵��')
       let json = {
         taskId: data.id,
@@ -1230,7 +1287,7 @@
       });
     },
     // 鏇存柊浠诲姟鍚嶇О
-    async updateTaskName(data) {
+    async updateTaskName (data) {
       let json = {
         taskId: data.id,
         taskName: data.name
@@ -1250,7 +1307,7 @@
       }
     },
     // 鑾峰彇搴曞簱鏁版嵁
-    async getBaseList() {
+    async getBaseList () {
       // let res = await getTagList();
       // if (res && res.success) {
       //   let filter = res.data.filter(i => {
@@ -1279,7 +1336,7 @@
       ];
     },
     // 鑾峰彇绠楁硶鍙傛暟
-    async getSdkArgs(data) {
+    async getSdkArgs (data) {
       let res = await getSdkArgs({
         sdkId: data.id,
         scope: "TASKRULE"
@@ -1301,7 +1358,7 @@
       }
     },
     // 鏌ヨ瀛楀吀
-    async findByType() {
+    async findByType () {
       let res = await findByType();
       if (res && res.success) {
         let list = res.data.RULECOMPUTEBETWEEN.map(i => {
@@ -1314,17 +1371,17 @@
       }
     },
     // 绠楁硶閰嶇疆锛屾柊寤�
-    add() {
+    add () {
       this.TaskMange.argsList.push(
         JSON.parse(JSON.stringify(this.TaskMange.baseObject))
       );
     },
     // 绠楁硶閰嶇疆 鍒犻櫎
-    delRule(index) {
+    delRule (index) {
       this.TaskMange.argsList.splice(index, 1);
     },
     // 绠楁硶鍙傛暟淇濆瓨
-    async save() {
+    async save () {
       let list = this.TaskMange.argsList.map(i => {
         let obj = {};
         obj.id = i.id;
@@ -1357,7 +1414,7 @@
         }
       }
     },
-    getDefault() {
+    getDefault () {
       this.deleteTaskSdkRule(
         this.TaskMange.currentTaskId,
         this.TaskMange.currentAlgoId
@@ -1368,7 +1425,7 @@
         );
       });
     },
-    async deleteTaskSdkRule(taskId, sdkId) {
+    async deleteTaskSdkRule (taskId, sdkId) {
       let json = {
         taskId: taskId,
         sdkId: sdkId
@@ -1388,7 +1445,7 @@
       }
     },
     // 缁欎换鍔℃坊鍔犵畻娉�
-    async addTaskSdk(data) {
+    async addTaskSdk (data) {
       let res = await addTaskSdk(data);
       if (res && res.success) {
         // window.console.log(res, 'res')
@@ -1396,7 +1453,7 @@
       }
     },
     // 鏂版坊鍔犱换鍔�
-    async addTaskAsync(name) {
+    async addTaskAsync (name) {
       let res = await addTask({ taskname: name });
       // this.$toast({
       //   type: res.success ? "success" : "error",
@@ -1412,7 +1469,7 @@
         this.findAll();
       }
     },
-    cancle(row) {
+    cancle (row) {
       if (row.isShowSetAlgo) {
         row.isShowSetAlgo = false;
       }
@@ -1422,12 +1479,12 @@
         this.$set(i, "isSelect", false);
       });
     },
-    cancleTask(row) {
+    cancleTask (row) {
       if (row.isSetting) {
         row.isSetting = false;
       }
     },
-    commandAlgo(command, row, item) {
+    commandAlgo (command, row, item) {
       if (command === 1) {
         // console.log('璁剧疆绠楁硶')
         this.clickSetAlgo(row, item);
@@ -1437,13 +1494,13 @@
         this.clickDelSdk(row, item);
       }
     },
-    commandTask(command, row) {
+    commandTask (command, row) {
       if (command === 1) {
         //缂栬緫浠诲姟
         this.clickSet(row);
       }
     },
-    donwload(item) {
+    donwload (item) {
       this.downloading = true;
       this.downloadItem = item.id;
 
@@ -1467,15 +1524,15 @@
           this.downloadItem = "";
         });
     },
-    commandAlgLib(item) {
+    commandAlgLib (item) {
       this.$set(item, "isEdit", true);
     },
-    inputBlur(item) {
+    inputBlur (item) {
       // console.log(item, '淇敼鍚嶇О')
       this.$set(item, "isEdit", false);
     },
 
-    cleanTemplateForm() {
+    cleanTemplateForm () {
       this.appSceneForm.name = "";
       this.appSceneForm.desc = "";
       this.appSceneForm.rules = "";
@@ -1483,10 +1540,10 @@
 
       this.$refs.ruleEditor.cleanRule();
     },
-    handleTabClick() {
+    handleTabClick () {
 
     },
-    handleCreateScene() {
+    handleCreateScene () {
       this.sceneDialogVisible = true;
       this.dialogTitle = '鍒涘缓鍦烘櫙妯℃澘';
 
@@ -1499,10 +1556,10 @@
         this.cleanTemplateForm();
       });
     },
-    handleDialogClose() {
+    handleDialogClose () {
       this.sceneDialogVisible = false;
     },
-    handleEditScene(item) {
+    handleEditScene (item) {
       this.appSceneForm.name = item.name;
       this.appSceneForm.desc = item.desc;
 
@@ -1594,7 +1651,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;
@@ -1619,7 +1676,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 {
@@ -1707,6 +1764,13 @@
             margin: auto;
             margin-bottom: 30px;
             max-width: 200px;
+            .mask {
+              width: 100%;
+
+              .el-button + .el-button {
+                margin-left: 0 !important;
+              }
+            }
           }
         }
       }
@@ -1746,6 +1810,9 @@
               z-index: 1;
               border-radius: 3px;
               display: none;
+              .el-button + .el-button {
+                margin-left: 0 !important;
+              }
               .tool {
                 position: absolute;
                 top: 49%;
@@ -1941,16 +2008,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%;
@@ -2026,6 +2093,10 @@
       display: none;
       .info-onmask {
         color: #8ecaff;
+      }
+      .mask-btn {
+        width: 100%;
+        display: flex;
       }
       i {
         color: #fff;
@@ -2112,6 +2183,8 @@
       .mask {
         display: flex;
         align-items: flex-end;
+        flex-wrap: wrap;
+        justify-content: center;
         top: 0;
         .bot-btn {
           flex: 1;
@@ -2295,6 +2368,16 @@
           max-height: 106px;
         }
       }
+      .willUpGrade {
+        .iconupdate {
+          color: #01e667;
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          font-weight: 550;
+          font-size: 26px;
+        }
+      }
       &.uninstall {
         .svg-wrap {
           background-color: #ddd;

--
Gitblit v1.8.0