系统维护v0

ZZJ

2021-09-28 0cfab2b97c0913d2f5ccd55760f8768316f91138

 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>磁盘可用: {{ percent }}%</span>

          </div>

       </div>



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

    </div>





    <div class="clear-list">

      <span class="t">请选择要清理的数据范围</span>

      <el-date-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,72 @@
<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;

  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;

  
  &: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;

    }



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

      border: none;

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

        
      }

    }

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

      line-height: 26px;

    svg {

      width: 70px;

      height: 70px;

    }

    .el-progress__text {

      display: none !important;

    }

  }

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

      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;

        }

      }

      .cap-text {

        text-align: right;

        height: 25px;    
        text-align: right;

        line-height: 25px;

        font-size: 12px;

      }

    }

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

      }

    }

  }

  
}

}





</style>