集群管理搜索集群

heyujie

2022-01-26 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d

 src/pages/vindicate/views/restartSettings.vue

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

  <div class="restart" 
   v-loading="loading"

   :element-loading-text="loadingText"

   element-loading-spinner="restart-loading"

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

  <div

    class="restart"

    v-loading="loading"

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

@@ -111,8 +112,8 @@
      timer: null,

      probeSum: 0,

      cronText: "",

      loading:false,

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

      loading: false,

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

      cronValueObj: {

        min: "*",

        hour: "*",

@@ -201,7 +202,7 @@
    },

    restart() {

      const h = this.$createElement;

      const icon = this.$msgbox( {

      const icon = this.$msgbox({

        title: "",

        message: h(

          "div",

@@ -220,7 +221,7 @@
        cancelButtonText: "取消",

      }).then(() => {

        this.loading = true;

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

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

        rebootServer()

          .then((rsp) => {

            this.probeServer(this.reLogin);

@@ -338,7 +339,7 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #FBFAFF;

  background-color: #fbfaff;

}

.restart {

  margin: 0 auto;

@@ -351,18 +352,18 @@
  border-left: 4px solid #f2f2f7;

  .t {

    height: 48px;

    background: #F2F2F7;

    background: #f2f2f7;

    box-sizing: border-box;

    text-align: left;

    width: 100%;

    padding: 10px 20px;

    line-height: 32px;

    border-radius:8px ;

    border-radius: 8px;

  }

  .bar {

    height: 50px;

    width: 100%;

    background: #F2F2F7;

    background: #f2f2f7;

    min-width: 300px;

    display: flex;

    justify-content: space-between;

@@ -373,16 +374,16 @@
    margin-top: 4px;

    margin-bottom: 4px;

    .reset-btn {

     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;

      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;

    }

    


    .name {

      min-width: 150px;

      text-align: left;

@@ -404,32 +405,30 @@
    .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;

      }

    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;

      }

    input {

      background: #fbfaff !important;

      border-radius: 20px !important;

      text-align: center;

    }



      .el-input__prefix {

        left: 215px !important;

      } 
    .el-input__prefix {

      left: 215px !important;

    }

  }

  .save-btn {

    width: 251px;

@@ -442,105 +441,104 @@
}



.restartTimePicker {

    width: 509px !important;

    background-color: #FBFAFF !important;

    margin-top:8px !important;

   /*  .popper__arrow::after {

  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;

  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;

  }

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

    }

    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;

    &:hover {

      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;

  }

  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;

    }

  }

}



  
@keyframes rotate{

   0%{

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

   }

   100%{

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

   }

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