From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug

---
 src/pages/vindicate/views/updateSettings.vue |  476 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 374 insertions(+), 102 deletions(-)

diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 73b3fe4..0756a4a 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -17,25 +17,52 @@
       </div>
       <div class="cluster-right">
         <div class="net-set" v-if="activePage == 0">
-          <el-radio-group
+          <!-- <el-radio-group
             v-model="radio2"
             size="medium"
             fill="rgba(61, 104, 225, 1)"
           >
             <el-radio-button label="妫�鏌ユ洿鏂�"></el-radio-button>
             <el-radio-button label="涓婁紶鏇存柊"></el-radio-button>
-          </el-radio-group>
+          </el-radio-group> -->
+
+          <div class="button-group">
+            <div class="bottom">
+              <div class="top" :class="{ toggle: radio2 !== '妫�鏌ユ洿鏂�' }"></div>
+              <div
+                class="label-left"
+                :class="{ toggle: radio2 == '妫�鏌ユ洿鏂�' }"
+                @click="radio2 = '妫�鏌ユ洿鏂�'"
+              >
+                妫�鏌ユ洿鏂�
+              </div>
+              <div
+                class="label-right"
+                :class="{ toggle: radio2 !== '妫�鏌ユ洿鏂�' }"
+                @click="radio2 = '涓婁紶鏇存柊'"
+              >
+                涓婁紶鏇存柊
+              </div>
+            </div>
+          </div>
 
           <div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'">
-            <span v-if="hasNewVersion||checking"
-              class="icon iconfont spin-bg"
+            <img
+              v-if="(!upgrading && hasNewVersion) || checking"
+              class="spin-bg"
+              src="/images/vindicate/妫�娴嬪姞杞�.png"
               :class="upgrading || checking ? 'spin-bg-rot' : ''"
-              >&#xe6fb;</span
-            >
-            <span v-else
-              class="icon iconfont spin-bg"
-              >&#xe701;</span
-            >
+            />
+            <img
+              v-if="upgrading && hasNewVersion"
+              class="spin-bg"
+              src="/images/vindicate/鍔犺浇.png"
+            />
+            <img
+              v-if="!checking && !hasNewVersion"
+              class="spin-bg"
+              src="/images/vindicate/宸叉槸鏈�鏂扮増鏈�.png"
+            />
             <div class="desc" v-if="checking && !upgrading">
               姝ｅ湪妫�娴嬬増鏈洿鏂扳�︹��
             </div>
@@ -47,8 +74,16 @@
             <div class="desc desc-suc" v-if="!checking && !hasNewVersion">
               褰撳墠宸茬粡鏄渶鏂扮増鏈�
             </div>
+
+            <div
+              class="text-desc"
+              v-if="hasNewVersion && !checking && !upgrading"
+            >
+              {{ verText }}
+            </div>
+
             <el-button
-              v-if="hasNewVersion && !checking"
+              v-if="hasNewVersion && !checking && !upgrading"
               :loading="upgrading"
               type="primary"
               style="width: 150px"
@@ -56,32 +91,47 @@
               @click="upgradeNewVersion"
               >鏇存柊</el-button
             >
-
-            <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
-              {{verText}}
-            </div>
           </div>
+
           <div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
+            <div class="upload-info">
+              <img src="/images/vindicate/閾炬帴 1.png" style="width: 14px" />
+              涓婁紶瀹夎杞欢
+            </div>
             <div class="upload-top">
-              <el-upload
-                class="upload-demo"
-                drag
-                action
-                v-show="!shengjiing"
-                :http-request="uploadPkg"
-                :limit="1"
-              >
-                <i class="el-icon-upload"></i>
-                <div
-                  class="el-upload__text"
-                  v-loading="upgrading"
-                  element-loading-text="涓婁紶涓紝璇风◢鍚�"
-                  element-loading-spinner="el-icon-loading"
-                >
-                  灏� .zip 鏇存柊鏂囦欢鎷栧埌姝ゅ锛屾垨 <em> 鐐瑰嚮涓婁紶 </em>
+              <div class="upload-container">
+                <div class="upload-fail" v-if="upStatus === 0">
+                  <i class="icon iconfont upload-icon"> &#xe71c; </i>
+                  <p>涓婁紶澶辫触锛岃閲嶆柊涓婁紶銆�</p>
                 </div>
-                <div class="el-upload__tip" slot="tip"></div>
-              </el-upload>
+
+                <div class="upload-success" v-if="upStatus === 1">
+                  <i class="icon iconfont upload-icon"> &#xe71d; </i>
+                  <p>涓婁紶鎴愬姛锛岃鐐瑰嚮鏇存柊鎸夐挳寮�濮嬫洿鏂般��</p>
+                </div>
+
+                <el-upload
+                  ref="myUpload"
+                  class="upload-demo"
+                  drag
+                  action
+                  v-show="!shengjiing && upStatus === ''"
+                  :http-request="uploadPkg"
+                  :limit="1"
+                  accept=".zip,.tar,.gz,.tar.gz"
+                >
+                  <i class="el-icon-upload"></i>
+                  <div
+                    class="el-upload__text"
+                    v-loading="upgrading"
+                    element-loading-text="涓婁紶涓紝璇风◢鍚�"
+                    element-loading-spinner="el-icon-loading"
+                  >
+                    灏� .zip 鏇存柊鏂囦欢鎷栧埌姝ゅ锛屾垨 <em> 鐐瑰嚮涓婁紶 </em>
+                  </div>
+                  <div class="el-upload__tip" slot="tip"></div>
+                </el-upload>
+              </div>
 
               <span
                 class="icon iconfont spin-bg"
@@ -91,6 +141,7 @@
               >
               <div class="desc" v-if="shengjiing">姝ｅ湪杩涜鏇存柊鈥︹��</div>
               <el-button
+                v-if="!upgrading"
                 type="primary"
                 style="width: 150px; font-size: 15px"
                 @click="upgrade"
@@ -144,7 +195,6 @@
 <script>
 import {
   getDevInfo,
-  doUpgrade,
   checkNewVersion,
   upgradeNewVersion,
   uploadUpgradePkg,
@@ -160,7 +210,8 @@
       activePage: 0,
       patchUpdateStatus: "",
       probeSum: 0,
-      timer: null,verText:"",
+      timer: null,
+      verText: "",
       patchFile: {},
       fileAdded: false,
       curVersionName: "",
@@ -168,7 +219,8 @@
       upgrading: false,
       checking: true,
       newVersionName: "",
-      hasNewVersion: true,
+      hasNewVersion: false,
+      upStatus: "",
       sysSetList: [
         { title: "鑷姩娓呯悊杞欢鍖呯紦瀛�", val: false, name: "sys_auto_clean" },
         { title: "鏇存柊鎻愰啋", val: false, name: "sys_update_notice" },
@@ -188,10 +240,10 @@
   },
   mounted() {
     const isAutoUpdate = getUrlKey("autoUpdate");
-    if (isAutoUpdate==1) {
-      this.checking = false
-      this.upgradeNewVersion()
-    }else{
+    if (isAutoUpdate == 1) {
+      this.checking = false;
+      this.upgradeNewVersion();
+    } else {
       this.fetchUpgradInfo();
     }
     this.fetchSettings();
@@ -222,7 +274,7 @@
         this.newVersionName = res.data.newVersion;
         this.curVersionName = res.data.curVersion;
         this.hasNewVersion = res.data.hasNewVersion;
-        this.verText=res.data.newVersionInfo
+        this.verText = res.data.newVersionInfo;
 
         if (!this.hasNewVersion) {
           this.upgrading = false;
@@ -248,12 +300,32 @@
       let param = new FormData();
       param.append("archive", params.file);
       this.upgrading = true;
-      uploadUpgradePkg(param).then((res) => {
-        this.upgrading = false;
-        this.pkgID = res.data.id;
-      });
+      uploadUpgradePkg(param)
+        .then((res) => {
+          this.upgrading = false;
+          this.pkgID = res.data.id;
+          this.upStatus = 1;
+          setTimeout(() => {
+            this.upStatus = "";
+          }, 2000);
+        })
+        .catch(() => {
+          this.upgrading = false;
+          this.$refs.myUpload.clearFiles();
+          this.upStatus = 0;
+          setTimeout(() => {
+            this.upStatus = "";
+          }, 2000);
+        });
     },
     upgrade() {
+      if (!this.pkgID) {
+        this.$notify.error({
+          title: "澶辫触",
+          message: "璇峰厛涓婁紶鏇存柊鍖�",
+        });
+        return;
+      }
       this.shengjiing = true;
       upgradePkg({
         id: this.pkgID,
@@ -310,7 +382,7 @@
         value: item.val,
       }).then((res) => {
         if (res.code == 200) {
-          this.$notify.success("鏇存柊鎴愬姛");
+          this.$notify.success("閰嶇疆鎴愬姛");
         }
       });
     },
@@ -320,6 +392,7 @@
 <style lang="scss">
 .all {
   width: 100%;
+  background-color: #fbfaff;
 }
 .update-set-content {
   height: 100%;
@@ -328,30 +401,30 @@
   flex: 1;
   flex-basis: auto;
   box-sizing: border-box;
-  border-top: 4px solid #f8f8f8;
-  border-left: 4px solid #f8f8f8;
+  border-top: 4px solid rgb(242, 242, 247);
+  border-left: 4px solid rgb(242, 242, 247);
   .cluster-center {
     height: 100%;
     width: 300px;
     overflow: auto;
     box-sizing: border-box;
     flex-shrink: 0;
-    padding: 24px 10px 0 10px;
-    border-right: 4px solid #f8f8f8;
-
+    padding: 9px 10px 0 10px;
+    border-right: 4px solid rgb(242, 242, 247);
     .menu-item {
-      background-color: #F2F2F7;
       height: 56px;
       margin-bottom: 4px;
       border-radius: 8px;
       line-height: 56px;
-      box-sizing: border-box;   
+      box-sizing: border-box;
       cursor: pointer;
       padding: 0 15px;
       display: flex;
       justify-content: space-between;
       .con {
         .iconfont {
+          font-size: 20px;
+          line-height: 32px;
           width: 32px;
           height: 26px;
           margin-right: 10px;
@@ -359,27 +432,21 @@
         }
         .menu-text {
           font-size: 16px;
-           font-weight: 700;
+          font-weight: 700;
         }
       }
     }
-    .menu-item-active {     
-      background-color: #4E94FF;
-       .iconfont {
-          color: #fff !important;
-        }
-        .menu-text {
-           color: #fff;
-        }
+    .menu-item-active {
+      background-color: var(--colorCard) !important;
+      .iconfont {
+        color: #fff !important;
+      }
+      .menu-text {
+        color: #fff;
+      }
     }
-    .menu-item:hover {   
-      background-color: #4E94FF;
-       .iconfont {
-          color: #fff;
-        }
-        .menu-text {
-           color: #fff;
-        }
+    .menu-item:hover {
+      background-color: #f2f2f7;
     }
   }
   .cluster-right {
@@ -422,8 +489,91 @@
     .net-set {
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+      justify-content: start;
       height: 95%;
+      padding: 0 30px;
+      /* .el-radio-group {
+        margin-top:33px ;
+        .el-radio-button__inner {
+          font-size: 14px;
+          width: 84px;
+          height: 28px;
+          padding: 0;
+          border-radius: 20px;
+          text-align: center;
+          line-height: 28px;
+          background: #F2F2F7 !important;
+          border: none !important;
+          box-shadow:none !important;
+          &:hover {
+            color: var(--colorCard) !important;
+          }
+          
+        }
+        & label.is-active   .el-radio-button__inner {
+            background: var(--colorCard) !important;
+            border: none !important;
+             &:hover {
+            color: white !important;
+          }
+          }
+      } */
+      .button-group {
+        margin: 0 auto;
+        margin-top: 30px;
+        width: 168px;
+        height: 28px;
+        .bottom {
+          position: relative;
+          height: 100%;
+          background: #f2f2f7;
+          border-radius: 20px;
+          cursor: pointer;
+          .top {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 84px;
+            height: 28px;
+            background: var(--colorCard);
+            border-radius: 20px;
+            transition: all 0.2s linear;
+            &.toggle {
+              left: 84px;
+            }
+          }
+          .label-left {
+            position: absolute;
+            width: 84px;
+            height: 28px;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            font-size: 14px;
+            line-height: 28px;
+            font-weight: 700;
+            color: #333333;
+            &.toggle {
+              color: #fff;
+            }
+          }
+          .label-right {
+            position: absolute;
+            width: 84px;
+            height: 28px;
+            top: 0;
+            right: 0;
+            z-index: 1;
+            font-size: 14px;
+            line-height: 28px;
+            font-weight: 700;
+            color: #333333;
+            &.toggle {
+              color: #fff;
+            }
+          }
+        }
+      }
       @keyframes spin {
         from {
           transform: rotate(0deg);
@@ -434,20 +584,17 @@
       }
 
       .spin-bg {
-        color: rgb(206, 205, 205);
-        font-size: 100px;
-        margin-bottom: 20px;
+        width: 60px;
+        margin-top: 60px;
+        margin-bottom: 15px;
       }
       .spin-bg-rot {
         animation: spin 0.8s linear infinite;
       }
       .desc {
-        height: 20px;
-        line-height: 20px;
-        font-size: 15px;
-        color: rgb(231, 121, 58);
-        margin-bottom: 20px;
-        font-weight: 600;
+        font-weight: bold;
+        font-size: 16px;
+        color: #333333;
       }
       .update-center {
         display: flex;
@@ -455,26 +602,82 @@
         align-items: center;
 
         .desc-suc {
-          color: #3a8120;
+          color: #333;
+          border-radius: 8px;
         }
         .el-button {
-          width: 100px;
+          margin-top: 48px;
+          width: 150px;
+          height: 40px;
+          border-radius: 25px;
           font-size: 15px;
+          background: var(--colorCard) !important;
+          border: none !important;
+          &:hover {
+            color: white !important;
+          }
         }
-        .text-desc{
-          width: 260px;
+        .text-desc {
+          width: 90%;
+          height: 150px;
           margin-top: 20px;
-          background-color: rgba(250, 250, 250, 1);
-          border: 1px dashed rgba(220, 220, 220, 1);
-          height: 100px;
-          padding: 10px 20px;
-          color: rgba(94, 94, 94, 1);
+          background-color: #f2f2f7;
+          padding: 20px 30px;
+          color: #333;
           text-align: left;
-          font-size: 14px;
-          border-radius:5px ;
+          font-size: 12px;
+          border-radius: 8px;
         }
       }
       .upload-center {
+        margin-top: 44px;
+        .upload-info {
+          margin-bottom: 20px;
+          text-align: left;
+          font-weight: bold;
+          font-size: 14px;
+          color: #333333;
+        }
+        .upload-container {
+          position: relative;
+          width: 412px;
+          height: 174px;
+          background-color: #fff;
+          border-radius: 8px;
+
+          .upload-fail .iconfont {
+            color: rgb(254, 109, 104);
+          }
+
+          .upload-success .iconfont {
+            color: rgb(78, 148, 255);
+          }
+
+          .upload-success,
+          .upload-fail {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 174px;
+            top: 0;
+            left: 0;
+            background-color: #fff;
+            font-weight: bold;
+            font-size: 10px;
+
+            transition: all 1000ms linear 0;
+            -o-transition: all 1000ms linear 0; /*鍏煎parsto鍐呮牳*/
+            -moz-transition: all 1000ms linear 0; /*鍏煎gecko鍐呮牳*/
+            -webkit-transition: all 1000ms linear 0; /*鍏煎webkit鍐呮牳*/
+          }
+          .upload-icon {
+            display: block;
+            margin-top: 32px;
+            margin-bottom: 42px;
+            font-size: 50px;
+          }
+        }
+
         .update-center {
           height: 160px;
 
@@ -493,7 +696,13 @@
             margin-bottom: 10px;
           }
           .el-button {
-            width: 120px;
+            width: 150px;
+            height: 40px;
+            background: var(--colorCard) !important;
+            border: none !important;
+            &:hover {
+              color: white !important;
+            }
           }
           .el-button--small {
             font-size: 14px;
@@ -506,8 +715,47 @@
           box-sizing: border-box;
           flex-direction: column;
 
+          .el-upload {
+            width: 340px !important;
+            height: 117.87px !important;
+            margin: 28px auto;
+            .el-upload-dragger {
+              width: 100% !important;
+              height: 100% !important;
+              i {
+                display: none !important;
+              }
+              .el-upload__text {
+                color: #828282 !important;
+                margin-top: 52px !important;
+                font-size: 14px !important;
+              }
+              .el-loading-text {
+                font-size: 14px !important;
+                color: #333333 !important;
+              }
+            }
+          }
+
+          .el-upload.el-upload--text .el-upload-dragger:hover {
+            border-color: var(--colorCard) !important;
+          }
+
+          em {
+            color: var(--colorCard) !important;
+          }
+
           .uploader-btn {
-            margin-top: 15px;
+            width: 150px;
+            height: 40px;
+            margin-top: 158px;
+            margin-bottom: 25px;
+            background: var(--colorCard) !important;
+            border: none !important;
+            border-radius: 25px !important;
+            &:hover {
+              color: white !important;
+            }
           }
         }
         .up-text {
@@ -524,20 +772,24 @@
         }
       }
       .cur-version {
+        position: absolute;
+        bottom: 50px;
+        left: 50%;
+        transform: translateX(-50%);
         font-size: 14px;
       }
     }
     .wifi {
-      padding: 10px 0 0 10px;
+      padding: 10px 10px 0 10px;
       .bar {
         display: flex;
         align-items: center;
         height: 50px;
-        background-color: #f8f8f8;
+        background-color: #f2f2f7;
         justify-content: space-between;
         border-radius: 12px;
-        margin-bottom: 10px;
-        padding-left:20px ;
+        margin-bottom: 4px;
+        padding-left: 20px;
         .name {
           font-size: 14px;
           font-weight: 700;
@@ -547,21 +799,36 @@
         text-align: left;
         padding: 17px 0 17px 25px;
         font-size: 16px;
-        color:#333;
+        color: #333;
         font-weight: 700;
       }
-      .el-switch{
+      .el-switch {
         width: 40px;
         height: 14px;
         margin-right: 17px;
       }
-      .is-checked .el-switch__core{
-       background-color: #4E97FF  !important;
+
+      .el-switch__core {
+        width: 30px !important;
+        height: 14px !important;
+        &::after {
+          top: 0px !important;
+          left: 0px !important;
+          width: 12px !important;
+          height: 12px !important;
+        }
+      }
+
+      .is-checked .el-switch__core {
+        background-color: var(--colorCard) !important;
+        border: 1px solid var(--colorCard) !important;
+        &::after {
+          margin-left: 16px;
+        }
       }
     }
 
     .save-btn {
-      background-color: #3d68e1;
       width: 240px;
       height: 40px;
       margin: 0 auto;
@@ -570,6 +837,11 @@
       line-height: 40px;
       font-size: 14px;
       margin-top: 20px;
+      background: var(--colorCard) !important;
+      border: none !important;
+      &:hover {
+        color: white !important;
+      }
     }
   }
 }

--
Gitblit v1.8.0