bug修复

ZZJ

2022-01-26 c7298c0ad9c728f55618ad4f924f723f7d2d0a38

 src/pages/vindicate/views/updateSettings.vue

@@ -28,26 +28,41 @@


          <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 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 == '检查更新'">

            <img v-if="!upgrading&&hasNewVersion||checking"

            <img

              v-if="(!upgrading && hasNewVersion) || checking"

              class="spin-bg"

              src="/images/vindicate/检测加载.png"

              :class="upgrading || checking ? 'spin-bg-rot' : ''"

              />

             <img v-if="upgrading&&hasNewVersion"

            />

            <img

              v-if="upgrading && hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/加载.png"

              /> 
            <img v-if="!checking&&!hasNewVersion"

            />

            <img

              v-if="!checking && !hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/已是最新版本.png"

              />

            />

            <div class="desc" v-if="checking && !upgrading">

              正在检测版本更新……

            </div>

@@ -59,14 +74,16 @@
            <div class="desc desc-suc" v-if="!checking && !hasNewVersion">

              当前已经是最新版本

            </div>

            


            <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">

              {{verText}}

            <div

              class="text-desc"

              v-if="hasNewVersion && !checking && !upgrading"

            >

              {{ verText }}

            </div>



            <el-button

              v-if="hasNewVersion && !checking&&!upgrading"

              v-if="hasNewVersion && !checking && !upgrading"

              :loading="upgrading"

              type="primary"

              style="width: 150px"

@@ -76,50 +93,45 @@
            >

          </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-info">

              <img src="/images/vindicate/链接 1.png" style="width: 14px" />

              上传安装软件

            </div>

            <div class="upload-top">



              <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="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"

               >

                <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-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"

                >

                  <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"

                :class="shengjiing ? 'spin-bg-rot' : ''"

@@ -198,7 +210,8 @@
      activePage: 0,

      patchUpdateStatus: "",

      probeSum: 0,

      timer: null,verText:"",

      timer: null,

      verText: "",

      patchFile: {},

      fileAdded: false,

      curVersionName: "",

@@ -207,7 +220,7 @@
      checking: true,

      newVersionName: "",

      hasNewVersion: false,

      upStatus:'',

      upStatus: "",

      sysSetList: [

        { title: "自动清理软件包缓存", val: false, name: "sys_auto_clean" },

        { title: "更新提醒", val: false, name: "sys_update_notice" },

@@ -227,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();

@@ -261,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;

@@ -287,21 +300,23 @@
      let param = new FormData();

      param.append("archive", params.file);

      this.upgrading = true;

      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);

      })

      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() {

      this.shengjiing = true;

@@ -364,14 +379,13 @@
        }

      });

    },

    
  },

};

</script>

<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

  background-color: #fbfaff;

}

.update-set-content {

  height: 100%;

@@ -380,8 +394,8 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  border-top:4px solid rgb(242, 242, 247) ;

  border-left:4px solid rgb(242, 242, 247) ;

  border-top: 4px solid rgb(242, 242, 247);

  border-left: 4px solid rgb(242, 242, 247);

  .cluster-center {

    height: 100%;

    width: 300px;

@@ -396,7 +410,7 @@
      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 56px;

      box-sizing: border-box;   
      box-sizing: border-box;

      cursor: pointer;

      padding: 0 15px;

      display: flex;

@@ -412,21 +426,21 @@
        }

        .menu-text {

          font-size: 16px;

           font-weight: 700;

          font-weight: 700;

        }

      }

    }

    .menu-item-active {     
    .menu-item-active {

      background-color: var(--colorCard) !important;

       .iconfont {

          color: #fff !important;

        }

        .menu-text {

           color: #fff;

        }

      .iconfont {

        color: #fff !important;

      }

      .menu-text {

        color: #fff;

      }

    }

    .menu-item:hover {   
      background-color: #F2F2F7;

    .menu-item:hover {

      background-color: #f2f2f7;

    }

  }

  .cluster-right {

@@ -506,7 +520,7 @@
        .bottom {

          position: relative;

          height: 100%;

          background: #F2F2F7;

          background: #f2f2f7;

          border-radius: 20px;

          cursor: pointer;

          .top {

@@ -515,9 +529,9 @@
            left: 0;

            width: 84px;

            height: 28px;

            background: #4E94FF;

            background: var(--colorCard);

            border-radius: 20px;

            transition: all .2s linear;

            transition: all 0.2s linear;

            &.toggle {

              left: 84px;

            }

@@ -533,9 +547,9 @@
            line-height: 28px;

            font-weight: 700;

            color: #333333;

             &.toggle {

               color: #fff;

             }

            &.toggle {

              color: #fff;

            }

          }

          .label-right {

            position: absolute;

@@ -549,8 +563,8 @@
            font-weight: 700;

            color: #333333;

            &.toggle {

               color: #fff;

             }

              color: #fff;

            }

          }

        }

      }

@@ -564,10 +578,9 @@
      }



      .spin-bg {

       
       width: 60px;

        width: 60px;

        margin-top: 60px;

        margin-bottom:15px ;

        margin-bottom: 15px;

      }

      .spin-bg-rot {

        animation: spin 0.8s linear infinite;

@@ -595,25 +608,25 @@
          background: var(--colorCard) !important;

          border: none !important;

          &:hover {

          color: white !important;

            color: white !important;

          }

        }

        .text-desc{

        .text-desc {

          width: 90%;

          height: 150px;

          margin-top: 20px;

          background-color: #F2F2F7;

          background-color: #f2f2f7;

          padding: 20px 30px;

          color: #333;

          text-align: left;

          font-size: 12px;

          border-radius:8px ;

          border-radius: 8px;

        }

      }

      .upload-center {

        margin-top:44px ;

        margin-top: 44px;

        .upload-info {

          margin-bottom:20px ;

          margin-bottom: 20px;

          text-align: left;

          font-weight: bold;

          font-size: 14px;

@@ -626,16 +639,16 @@
          background-color: #fff;

          border-radius: 8px;



          .upload-fail .iconfont{

          .upload-fail .iconfont {

            color: rgb(254, 109, 104);

          }



          .upload-success .iconfont{

          .upload-success .iconfont {

            color: rgb(78, 148, 255);

          }

          
            
          .upload-success,.upload-fail {



          .upload-success,

          .upload-fail {

            position: absolute;

            z-index: 1;

            width: 100%;

@@ -654,7 +667,7 @@
          .upload-icon {

            display: block;

            margin-top: 32px;

            margin-bottom:42px ;

            margin-bottom: 42px;

            font-size: 50px;

          }

        }

@@ -682,8 +695,8 @@
            background: var(--colorCard) !important;

            border: none !important;

            &:hover {

            color: white !important;

          }

              color: white !important;

            }

          }

          .el-button--small {

            font-size: 14px;

@@ -697,25 +710,25 @@
          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;

            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__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 {

@@ -730,13 +743,13 @@
            width: 150px;

            height: 40px;

            margin-top: 158px;

            margin-bottom:25px ;

            margin-bottom: 25px;

            background: var(--colorCard) !important;

            border: none !important;

            border-radius: 25px !important;

            &:hover {

            color: white !important;

          }

              color: white !important;

            }

          }

        }

        .up-text {

@@ -766,11 +779,11 @@
        display: flex;

        align-items: center;

        height: 50px;

        background-color: #F2F2F7;

        background-color: #f2f2f7;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 4px;

        padding-left:20px ;

        padding-left: 20px;

        .name {

          font-size: 14px;

          font-weight: 700;

@@ -780,10 +793,10 @@
        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;

@@ -798,14 +811,14 @@
          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

       }

      .is-checked .el-switch__core {

        background-color: var(--colorCard) !important;

        border: 1px solid var(--colorCard) !important;

        &::after {

          margin-left: 16px;

        }

      }

    }



@@ -818,14 +831,12 @@
      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

       background: var(--colorCard) !important;

          border: none !important;

          &:hover {

          color: white !important;

          }

      background: var(--colorCard) !important;

      border: none !important;

      &:hover {

        color: white !important;

      }

    }

  }



}



</style>