ZZJ
2021-09-29 46b274e6b5d0bd7f2afe46a8adeac4faaa446dc9
系统设置/维护v0
4个文件已修改
573 ■■■■ 已修改文件
src/pages/vindicate/index/App.vue 269 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/vindicate/views/restartSettings.vue 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/vindicate/views/systemClean.vue 67 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/vindicate/views/updateSettings.vue 236 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/vindicate/index/App.vue
@@ -1,5 +1,5 @@
<template>
  <div class="container">
  <div class="container" v-if="!showWelcome">
    <div class="container-left">
      <div
        class="left-card"
@@ -13,11 +13,61 @@
        <span class="card-text">{{ item.name }}</span>
      </div>
    </div>
    <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></systemClean>
    <updateSettings v-if="activePage == 0" style="width: 100%"></updateSettings>
    <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer" ref="view_1"></systemClean>
    <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings>
    <!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
    <restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings>
    <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
    <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings>
    <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
  </div>
    <div class="welcome-page" v-else ref="curPage">
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
      @click.stop
    >
      <!-- @blur="showRecomand = false" -->
      <el-input
        class="search-input"
        placeholder="查找设置"
        size="mini"
        @focus="showRecomand = true"
        clearable
        @input="filterRecomand"
        :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
        v-model="searchText"
      >
      </el-input>
      <div class="search-res" v-if="showRecomand">
        <div
          class="res-bar"
          v-for="(item, index) in searchArrForShow"
          :key="index"
          @click="pickQuick(item.addr)"
        >
          {{ item.name }}
        </div>
        <div class="no-res-bar" v-if="searchArrForShow.length == 0">
          没有找到与 {{ searchText }} 相关的结果
        </div>
      </div>
      <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
    </div>
    <div class="nav-items">
      <div
        class="nav-child"
        @click="openWelcome(i)"
        v-for="(item, i) in menuArr"
        :key="i"
      >
        <div class="child-info">
          <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
          <img :src="item.img_black" alt="" />
          <span class="welcome-title">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -47,9 +97,19 @@
        { name: "重启设置" ,img_black:"/images/vindicate/重启设置-黑.png", img_white:"/images/vindicate/重启设置-白.png",},
        { name: "系统信息" ,img_black:"/images/vindicate/系统信息-黑.png", img_white:"/images/vindicate/系统信息-白.png",},
      ],
      searchArr: [
        { name: "系统设置", addr: [0] },
        { name: "系统更新", addr: [0, 0] },
        { name: "更新设置", addr: [0, 1] },
        { name: "系统清理", addr: [1] },
        { name: "重启设置", addr: [2] },
        { name: "系统信息", addr: [3] },
      ],
      activePage: 0,
      free: 0,
      full: 0,
      showWelcome:true,
      searchText:'',
    };
  },
  created() {
@@ -78,10 +138,190 @@
        this.full = res.data.all
      })
    },
    pickQuick(addr) {
      if (addr.length == 1) {
        this.openWelcome(addr[0]);
      } else {
        this.openWelcome(addr[0]);
        this.$nextTick(() => {
          if (addr[0] == 1) {
            // addr[1] == 0
            //   ? this.changeSwitch("isNtp")
            //   : this.changeSwitch("isManual");
            return;
          }
          this.$refs[`view_${addr[0]}`].openRight(addr[1]);
        });
      }
  },
    openWelcome(i) {
      this.showWelcome = false;
      this.openMenu(1,i);
    },
  },
  computed:{
     searchArrForShow() {
      if (this.searchText == "") {
        return this.searchArr;
      } else {
        return this.searchArr.filter((item) => {
          return item.name.indexOf(this.searchText.toUpperCase()) > -1;
        });
      }
    },
  }
};
</script>
<style lang="scss">
.welcome-page {
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  padding: 145px 32px 50px 32px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  .border-change {
    border-radius: 20px !important;
  }
  .search-box {
    width: 332px;
    z-index: 999;
    // margin: 55px auto;
    position: fixed;
    left: calc(50% - 166px);
    top: 50px;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #4e94ff;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    border-radius: 40px;
    .search-input {
      font-size: 14px;
      .el-input--mini .el-input__inner {
        height: 36px;
        line-height: 36px;
      }
      .el-input--suffix .el-input__inner {
        padding-right: 40px;
      }
      .el-input__inner {
        background-color: #fff;
        background-image: none;
        border-radius: 40px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        outline: 0;
        padding: 0 20px;
        -webkit-transition: border-color 0.2s
          cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
        font-weight: bold;
      }
      .el-input__suffix {
        display: flex;
        align-items: center;
        padding-right: 10px;
        .el-input__suffix-inner {
          border-color: none;
          .el-icon-circle-close:before {
            content: "\e79d" !important;
            font-size: 17px;
          }
          .el-icon-search {
            color: #2f2d3d;
            font-weight: bold;
            font-size: 17px;
          }
        }
      }
    }
    .search-res {
      max-height: 240px;
      overflow: auto;
      .res-bar {
        height: 40px;
        line-height: 40px;
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        font-size: 14px;
        cursor: pointer;
      }
      .no-res-bar {
        height: 40px;
        line-height: 40px;
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        font-size: 14px;
      }
      .res-bar:hover {
        background: #f5f5f6 10%;
        font-weight: bold;
        color: #4e94ff;
      }
      // .res-bar:last-child {
      //   border-radius: 0 0 20px 20px;
      // }
    }
  }
  .nav-items {
    .nav-child {
      box-sizing: border-box;
      background-color: rgba(251, 251, 255, 0.1);
      backdrop-filter: blur(4px);
      float: left;
      width: 46%;
      height: 190px;
      margin: 0 15px;
      margin-bottom: 30px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
      .child-info {
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        height: 100%;
        .welcome-icon {
          font-size: 72px;
        }
        img {
          width: 64px;
          margin: 0 auto;
          margin-top: 65px;
          height: 50px;
        }
        .welcome-title {
          font-size: 16px;
          font-weight: bold;
          margin-top: 24px;
          color: #333333;
        }
      }
    }
    .nav-child:hover {
      // box-shadow: 4px 4px 12px rgb(218, 218, 218);
      // transform: translate3d(0, -1px, 0);
      // transition: all 0.3s;
    }
  }
}
.container {
  height: 100%;
  width: 100%;
@@ -99,6 +339,7 @@
    padding: 17px 10px 0 10px;
    box-sizing: border-box;
    background: #fff;
    border-top:2px solid #E1E0E6 ;
    .left-card {
      position: relative;
      width: 224px;
@@ -107,7 +348,7 @@
      border-radius: 8px;
      margin-bottom: 4px;
      display: flex;    
      background-color: #F2F2F7;
      background-color: #fff;
      align-items: center;
      .icon_white {
        position: absolute;
@@ -131,7 +372,7 @@
    }
    .left-card-active {
      color: #fff;
      background-color: var(--colorCard);
      background-color: var(--colorCard) !important;
      .icon_black {
      visibility: hidden;
      }
@@ -145,18 +386,8 @@
    }
   
    .left-card:hover {
      background-color: var(--colorCard);
      color: #fff;
      .iconfont {
        color: #333333;
        background-color: #fff;
      }
      .icon_black {
      visibility: hidden;
      }
      .icon_white{
        visibility: visible;
      }
      background-color: #F2F2F7;
    }
  }
src/pages/vindicate/views/restartSettings.vue
@@ -343,6 +343,7 @@
.restart {
  margin: 0 auto;
  padding: 10px;
  width: 74% !important;
  font-size: 16px;
  color: #333;
  font-weight: 700;
src/pages/vindicate/views/systemClean.vue
@@ -9,7 +9,7 @@
          <el-progress v-if="percent == 0" type="circle" :percentage="100-percent" status="exception" stroke-width="10"></el-progress>
        </div>
        <div class="cap-text">
            <span>磁盘可用: {{ percent }}%</span>
            <span class="useable">磁盘可用: {{ percent }}%</span>
          </div>
       </div>
@@ -19,7 +19,7 @@
    <div class="clear-list">
      <span class="t">请选择要清理的数据范围</span>
      <el-date-picker
      <el-date-picker popper-class="clean-time-picker"
        style="width: 100%"
        v-model="dataRange"
        value-format="yyyy-MM-dd"
@@ -110,6 +110,7 @@
}
.clear {
  position: relative;
  padding: 10px;
  border-top:2px solid #E1E0E6 ;
  border-left:2px solid #E1E0E6 ; 
@@ -122,6 +123,9 @@
  align-items: center;
  justify-content: space-between;
  padding: 0 45px;
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  
  &:first-child {
    border-bottom: 1px solid #E1E0E6;
@@ -165,8 +169,67 @@
      display: none !important;
    }
  }
    .cap-text {
      color: #333333;
      font-weight: bold;
      font-size: 16px;
      .useable {
      margin-left:20px ;
      }
    }
     }
   .el-button.el-button--primary {
      width: 150px !important;
      height: 30px !important;
      line-height: 7px !important;
      font-size: 14px !important;
      color: #fff !important;
      background: var(--colorCard) !important;
      border-radius: 25px !important;
      border: none !important;
  }
  
    .el-date-editor.el-range-editor {
      height: 48px;
      width: 361px !important;
      border-radius: 8px;
      .el-input__icon.el-range__icon.el-icon-date {
      margin:0 15px ;
      &::before {
      line-height: 40px;
      font-size: 20px;
      color: #333;
      }
      }
      .el-range-separator{
        line-height: 41px;
      }
      input {
        width: 127px;
        height: 32px;
        font-size: 12px;
        background: #F2F2F7;
        border-radius: 20px;
      }
    }
  .t {
    height: 22px;
    width: 242px;
  }
}
.warm {
  position: absolute;
  bottom: 60px;
  left: 50%;
  width: 420px;
  transform:translateX(-50%) ;
  .icontishi-zhuyi {
    margin-right:10px ;
    color: red;
  }
}
}
src/pages/vindicate/views/updateSettings.vue
@@ -47,8 +47,14 @@
            <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,13 +62,29 @@
              @click="upgradeNewVersion"
              >更新</el-button
            >
          </div>
            <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
              {{verText}}
            </div>
          </div>
          <div class="upload-center" v-if="radio2 == '上传更新'">
            <div class="upload-info"><span class="icon iconfont">&#xe66e;</span> 上传安装软件</div>
            <div class="upload-top">
              <div class="upload-container">
               <div class="upload-fail " v-if="upStatus===0">
                 <i class="icon iconfont upload-icon">
                &#xe6f1;
               </i>
               <p>上传失败,请重新上传。</p>
               </div>
               <div class="upload-success"  v-if="upStatus===1">
               <i class="icon iconfont upload-icon">
                &#xe6f1;
               </i>
               <p>上传成功,请点击更新按钮开始更新。</p>
               </div>
              <el-upload
                class="upload-demo"
                drag
@@ -83,6 +105,8 @@
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
              </div>
              <span
                class="icon iconfont spin-bg"
                :class="shengjiing ? 'spin-bg-rot' : ''"
@@ -91,6 +115,7 @@
              >
              <div class="desc" v-if="shengjiing">正在进行更新……</div>
              <el-button
                v-if="!upgrading"
                type="primary"
                style="width: 150px; font-size: 15px"
                @click="upgrade"
@@ -168,7 +193,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" },
@@ -251,7 +277,16 @@
      uploadUpgradePkg(param).then((res) => {
        this.upgrading = false;
        this.pkgID = res.data.id;
      });
        this.upStatus = 1
        setTimeout(() => {
        this.upStatus =''
      }, 2000);
      }).catch(()=>{
        this.upStatus = 0
        setTimeout(() => {
        this.upStatus =''
      }, 2000);
      })
    },
    upgrade() {
      this.shengjiing = true;
@@ -314,6 +349,7 @@
        }
      });
    },
  },
};
</script>
@@ -341,7 +377,6 @@
    border-right: 4px solid #f8f8f8;
    .menu-item {
      background-color: #F2F2F7;
      height: 56px;
      margin-bottom: 4px;
      border-radius: 8px;
@@ -365,7 +400,7 @@
      }
    }
    .menu-item-active {     
      background-color: var(--colorCard);
      background-color: var(--colorCard) !important;
       .iconfont {
          color: #fff !important;
        }
@@ -374,13 +409,7 @@
        }
    }
    .menu-item:hover {   
      background-color: var(--colorCard);
       .iconfont {
          color: #fff;
        }
        .menu-text {
           color: #fff;
        }
      background-color: #F2F2F7;
    }
  }
  .cluster-right {
@@ -423,8 +452,35 @@
    .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;
          }
          }
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
@@ -436,19 +492,17 @@
      .spin-bg {
        color: rgb(206, 205, 205);
        font-size: 100px;
        margin-bottom: 20px;
        font-size: 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;
@@ -456,26 +510,72 @@
        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;
          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-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;
@@ -494,7 +594,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;
@@ -507,8 +613,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 {
@@ -525,6 +670,10 @@
        }
      }
      .cur-version {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }
    }
@@ -537,7 +686,7 @@
        background-color: #f8f8f8;
        justify-content: space-between;
        border-radius: 12px;
        margin-bottom: 10px;
        margin-bottom: 4px;
        padding-left:20px ;
        .name {
          font-size: 14px;
@@ -557,12 +706,12 @@
        margin-right: 17px;
      }
      .is-checked .el-switch__core{
       background-color: #4E97FF  !important;
       background-color: var(--colorCard)  !important;
       border: 1px solid var(--colorCard) !important;
      }
    }
    .save-btn {
      background-color: #3d68e1;
      width: 240px;
      height: 40px;
      margin: 0 auto;
@@ -571,7 +720,14 @@
      line-height: 40px;
      font-size: 14px;
      margin-top: 20px;
       background: var(--colorCard) !important;
          border: none !important;
          &:hover {
          color: white !important;
    }
  }
}
}
</style>