系统设置/维护v0

ZZJ

2021-09-29 46b274e6b5d0bd7f2afe46a8adeac4faaa446dc9

 src/pages/vindicate/views/systemClean.vue

@@ -1,11 +1,28 @@
<template>

  <div class="clear" v-loading="loading" :element-loading-text="loadingText">

    <div class="head">

    <div class="clear-list">

        <div class="cap">

          <div class="cap-bar">

          <!-- <div class="inner-bar" :style="`width: ${100-percent}%;`"></div> -->

          <el-progress v-if="percent>25" type="circle" :percentage="100-percent" stroke-width="10"></el-progress>

          <el-progress v-if="percent<=25&&percent>0" type="circle" :percentage="100-percent" status="warning" stroke-width="10"></el-progress>

          <el-progress v-if="percent == 0" type="circle" :percentage="100-percent" status="exception" stroke-width="10"></el-progress>

        </div>

        <div class="cap-text">

            <span class="useable">磁盘可用: {{ percent }}%</span>

          </div>

       </div>



    <el-button type="primary" @click="deleteData">数据清理</el-button>

    </div>





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

        value-format="yyyy-MM-dd"

        type="daterange" 

        align="right"

        size="small"

@@ -14,28 +31,11 @@
        end-placeholder="结束日期"

        :picker-options="pickerOptions"

      ></el-date-picker>

    </div>

    </div>      


    <div class="desc">

      <div class="disk-img">

        <span class="icon iconfont">{{"\ue8b1"}}</span>



      </div>

      <div class="cap">

        <div class="cap-text">

          <span>磁盘可用: {{ percent }}%</span>

        </div>

        <div class="cap-bar">

          <div class="inner-bar" :style="`width: ${100-percent}%;`"></div>

        </div>

      </div>



      <el-button type="primary" @click="deleteData">数据清理</el-button>



      <div class="warm">

    <div class="warm">

        <i class="iconfont icontishi-zhuyi"></i>

        <span class="text">请注意，按以上日期范围删除的数据不可恢复，立即生效，请谨慎操作!</span>

      </div>

    </div>

  </div>

</template>

@@ -103,95 +103,135 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

}

.container {

 background-color: #FBFAFF;

}



.clear {

  margin: 0 auto;

  padding: 20px;

  .head {

    height: 50px;

    background-color: rgba(248, 248, 248, 1);

    border-radius: 10px;

  position: relative;

  padding: 10px;

  border-top:2px solid #E1E0E6 ;

  border-left:2px solid #E1E0E6 ; 


  .clear-list {

  background: #F2F2F7;

  border-radius: 8px;

  height: 114px;

  display: flex;

  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;

  }



  .cap {

    display: flex;

    align-items: center;

    justify-content: space-around;

    box-sizing: border-box;

    padding: 0 20px;

    width: 560px;

    margin: 0 auto;

    .t {

      font-size: 14px;

      min-width: 175px;

      text-align: left;



    .cap-bar {

    width: 70px;

    height: 70px;

    div {

      width: 100%;

      height: 100%;

      .el-progress-circle {

       width: 100% !important;

       height: 100% !important;

      }

      &::after {

        position: relative;

        top: -68%;

        content: '\e6e8';

        width: 25px;

        height: 25px;

        display: inline-block;

        margin: auto;

        font-family: "iconfont" !important;

        font-size: 25px;

        font-style: normal;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        
      }

    }

    svg {

      width: 70px;

      height: 70px;

    }

    .el-progress__text {

      display: none !important;

    }

    }



    .el-range-editor--small.el-input__inner {

      border: none;

    }

    .el-range-editor--small .el-range-separator {

      line-height: 26px;

    }

  }

  .desc {

    margin-top: 50px;

    .disk-img {

      height: 100px;

      width: 100px;

      margin: 0 auto;

      margin-bottom: 10px;

      // background-color: aquamarine;

      .iconfont{

        font-size: 82px;

        color: #3a8120;

    .cap-text {

      color: #333333;

      font-weight: bold;

      font-size: 16px;

      .useable {

      margin-left:20px ;

      }

    }

    .cap {

      height: 50px;

      margin: 0 auto;

      width: 160px;

      margin-bottom: 20px;

      .cap-bar {

        height: 10px;

        background: rgb(239, 240, 236);

        //

        margin: 0 auto;

        border-radius: 2px;

      
        .inner-bar {

          background: #3a8120;

          height: 100%;

          border-radius: 2px;

        }

     }

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

      }

      .cap-text {

        text-align: right;

        height: 25px;    
        text-align: right;

        line-height: 25px;

      }

      .el-range-separator{

        line-height: 41px;

      }

      input {

        width: 127px;

        height: 32px;

        font-size: 12px;

        background: #F2F2F7;

        border-radius: 20px;

      }

    }

    .el-button--primary {

      width: 200px;

      font-size: 15px;

    }

    .warm {

      line-height: 30px;

      height: 30px;

      margin-top: 10px;

      display: flex;

      align-items: center;

      justify-content: center;

      .iconfont {

        font-size: 16px;



        color: #e99038;

        margin-right: 5px;

      }

      .text {

        color: rgb(175, 175, 175);

        font-size: 14px;

      }

    }

   
  .t {

    height: 22px;

    width: 242px;

  }

}



.warm {

  position: absolute;

  bottom: 60px;

  left: 50%;

  width: 420px;

  transform:translateX(-50%) ;

  .icontishi-zhuyi {

    margin-right:10px ;

    color: red;

  }

}

}





</style>