系统维护v0

ZZJ

2021-09-28 0cfab2b97c0913d2f5ccd55760f8768316f91138

 src/pages/vindicate/views/restartSettings.vue

@@ -1,7 +1,9 @@
<template>

  <div class="restart" 

   v-loading="loading"

      :element-loading-text="loadingText"

   :element-loading-text="loadingText"

   element-loading-spinner="restart-loading"

   element-loading-background="rgba(0, 0, 0, 0.35)"

  >

    <div class="restart-set">

      <div class="t">重启设置</div>

@@ -76,6 +78,7 @@
      <div class="bar" v-if="every != 'close'">

        <div class="name">重启时间</div>

        <el-time-picker

          popper-class="restartTimePicker"

          v-model="time"

          :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"

          value-format="HH:mm"

@@ -83,6 +86,7 @@
          placeholder="任意时间点"

          size="small"

          @change="updateExpression"

          :popper-append-to-body="false"

        ></el-time-picker>

      </div>

    </div>

@@ -101,13 +105,14 @@
export default {

  data() {

    return {

      warnSpn: "\ue71c",

      time: "",

      saveBtn: false,

      timer: null,

      probeSum: 0,

      cronText: "",

      loading:false,

      loadingText:"",

      loadingText:"智能计算节点正在重启，请耐心等待......",

      cronValueObj: {

        min: "*",

        hour: "*",

@@ -195,10 +200,24 @@
      this.$router.push("/");

    },

    restart() {

      this.$confirm("确定要重启该节点吗?","提示", {

        type:"warning",

        cancelButtonClass: "comfirm-class-cancle",

        confirmButtonClass: "comfirm-class-sure",

      const h = this.$createElement;

     const icon = this.$msgbox( {

        title: "",

        message: h(

          "div",

          {

            style:

              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",

          },

          [

            h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),

            h("span", { class: "warn-title" }, "节点重启 "),

            h("span", { class: "warn-dec" }, "确定要重启该节点吗??"),

          ]

        ),

        showCancelButton: true,

        confirmButtonText: "确定",

        cancelButtonText: "取消",

      }).then(() => {

        this.loading = true;

        this.loadingText = "智能计算节点正在重启，请耐心等待..."

@@ -319,47 +338,57 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

}

.restart {

  margin: 0 auto;

  padding: 20px;

  padding: 10px;

  font-size: 16px;

  color: #333;

  font-weight: 700;

  vertical-align: middle;

  border-top:2px solid #E1E0E6 ;

  border-left:2px solid #E1E0E6 ;

  .t {

    height: 48px;

    background: #F2F2F7;

    box-sizing: border-box;

    text-align: left;

    width: 70%;

    margin: 0 auto;

    padding: 10px;

    font-size: 16px;

    width: 100%;

    padding: 10px 20px;

    line-height: 32px;

    border-radius:8px ;

  }

  .bar {

    height: 50px;



    width: 70%;

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

    margin: 0 auto;

    width: 100%;

    background: #F2F2F7;

    min-width: 300px;

    display: flex;

    justify-content: space-between;

    box-sizing: border-box;

    padding: 0 20px;

    padding: 0 50px;

    align-items: center;

    border-radius: 10px;

    margin-bottom: 10px;

    border-radius: 8px;

    margin-top: 4px;

    margin-bottom: 4px;

    .reset-btn {

      width: 70px;

      height: 32px;

      border-radius: 5px;

     width: 150px;

     height: 32px;

     border-radius: 20px;

     background: rgba(78, 148, 255, 0.1) !important;

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

     color: #333333;

     font-weight: bold;

     font-size: 14px;

    }

    .el-select {

      width: 100%;

    }

    
    .name {

      min-width: 150px;

      text-align: left;

      font-size: 14px;

    }

    .el-input__inner::placeholder {

      color: rgba(107, 107, 107, 1);

      color: rgba(107, 107, 107, 1) !important;

    }

    .el-input--small .el-input__inner {

      height: 32px;

@@ -375,10 +404,143 @@
    .el-date-editor.el-input__inner {

      width: 100%;

    }



    
  }

  
  .el-select {

      width: 509px;

      height: 32px;

     
      input {

         background: #FBFAFF !important;

         border-radius: 20px !important;

         text-align: center;

      }

    }

  .el-date-editor {

    width: 509px;

    height: 32px;

      input {

         background: #FBFAFF !important;

         border-radius: 20px !important;

         text-align: center;

      }



      .el-input__prefix {

        left: 215px !important;

      } 
  }

  .save-btn {

    width: 260px;

    margin-top: 50px;

    width: 251px;

    height: 40px;

    margin-top: 80px;

    background: var(--colorCard) !important;

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

    border-radius: 25px;

  }

}



.restartTimePicker {

    width: 509px !important;

    background-color: #FBFAFF !important;

    margin-top:8px !important;

   /*  .popper__arrow::after {

    display: none !important;

  } */

  }

</style>



<style lang="scss">

.warn-icon {

    color: #fe6d68;

    font-size: 40px;

    margin-top: 11px;

  }

  .warn-title {

    font-weight: bold;

    font-size: 16px;

    margin: 6px;

    line-height: 22px;

  }

  .warn-dec {

    font-weight: bold;

    font-size: 14px;

    color: #828282;

    line-height: 20px;

  }

   .el-message-box__headerbtn {

    top: 12px;

  }

  .el-message-box__headerbtn .el-message-box__close {

    color: #333333;

    font-weight: bold;

  }

  .el-message-box__btns {

    display: flex;

    justify-content: center;

    margin-top: 20px;

    .el-button:focus,

    .el-button:hover {

      background-color: none;

      border: none;

    }

    button {

      width: 175px;

      height: 40px;

      border-radius: 25px;

      span {

        font-size: 16px;

        font-weight: 700;

      }

      &:hover {

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

      }

    }

    button:first-child {

      background-color: #e0e0e0;

      span {

        color: #333333;

      }

    }

    button:last-child {

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

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

      span { 
         color: #fff;

      }

    }

   } 


   .restart  .el-loading-mask .el-loading-spinner {

     top: 40%;

   }



 .restart  .el-loading-mask .el-loading-spinner .el-loading-text {

     font-size: 16px;

     font-weight: bold;

     color: #FFFFFF;

     margin-top:20px ;

   }



  .restart .el-loading-mask .restart-loading {

    background-image: url("/images/desktop/safari.png");

    display: block;

    width: 50px;

    height: 50px;

    margin-bottom:20px ;   
    background-size:50px ;

    margin: 0 auto;

    animation: rotate 6s linear infinite;

  }



  
@keyframes rotate{

   0%{

      transform: rotateZ(0deg);/*从0度开始*/

   }

   100%{

      transform: rotateZ(360deg);/*360度结束*/

   }

}

</style>