| | |
| | | <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>
|
| | |
| | | timer: null,
|
| | | probeSum: 0,
|
| | | cronText: "",
|
| | | loading:false,
|
| | | loadingText:"智能计算节点正在重启,请耐心等待......",
|
| | | loading: false,
|
| | | loadingText: "智能计算节点正在重启,请耐心等待......",
|
| | | cronValueObj: {
|
| | | min: "*",
|
| | | hour: "*",
|
| | |
| | | },
|
| | | restart() {
|
| | | const h = this.$createElement;
|
| | | const icon = this.$msgbox( {
|
| | | const icon = this.$msgbox({
|
| | | title: "",
|
| | | message: h(
|
| | | "div",
|
| | |
| | | cancelButtonText: "取消",
|
| | | }).then(() => {
|
| | | this.loading = true;
|
| | | this.loadingText = "智能计算节点正在重启,请耐心等待..."
|
| | | this.loadingText = "智能计算节点正在重启,请耐心等待...";
|
| | | rebootServer()
|
| | | .then((rsp) => {
|
| | | this.probeServer(this.reLogin);
|
| | |
| | | <style lang="scss">
|
| | | .all {
|
| | | width: 100%;
|
| | | background-color: #FBFAFF;
|
| | | background-color: #fbfaff;
|
| | | }
|
| | | .restart {
|
| | | margin: 0 auto;
|
| | |
| | | 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;
|
| | |
| | | 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;
|
| | |
| | | .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;
|
| | |
| | | }
|
| | |
|
| | | .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>
|