From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all

---
 src/pages/maintain/index/App.vue | 1150 ++++++++++++++++++++++++++++----------------------------
 1 files changed, 579 insertions(+), 571 deletions(-)

diff --git a/src/pages/maintain/index/App.vue b/src/pages/maintain/index/App.vue
index 1c4e7a8..1aa87ed 100644
--- a/src/pages/maintain/index/App.vue
+++ b/src/pages/maintain/index/App.vue
@@ -1,610 +1,618 @@
 <template>
-  <div class="container">
-    <div class="container-left">
-      <div
-        class="left-card"
-        v-for="(item, index) in menuArr"
-        :key="index"
-        @click="openMenu(item, index)"
-      >
-        <span class="icon iconfont">&#xe646;</span>
-        <span class="card-text">{{ item.name }}</span>
-      </div>
-    </div>
-    <systemClean v-if="activePage == '绯荤粺娓呯悊'" style="width: 100%"></systemClean>
-    <updateSettings v-if="activePage == '鏇存柊璁剧疆'" style="width: 100%"></updateSettings>
-    <back-up v-if="activePage == '澶囦唤杩樺師'" style="width: 100%"></back-up>
-    <restartSettings v-if="activePage == '閲嶅惎璁剧疆'" style="width: 100%"></restartSettings>
+  <div class="s-system-manage">
+    <el-tabs
+      id="systemMaintenance"
+      v-model="activeName"
+      v-loading="loading"
+      :element-loading-text="loadingText"
+    >
+      <el-tab-pane label="璁惧缁存姢" name="device" v-if="isShow('vindicate:device')">
+        <div class="s-system-maintenance">
+          <div class="box-card">
+            <div class="ui-top-view">
+              <div class="ui-top-title">閲嶅惎</div>
+            </div>
+            <el-divider></el-divider>
+
+            <div class="box-card-content">
+              <el-button type="primary" size="small" style="width:80px" @click="reboot">閲嶅惎</el-button>
+
+              <b class="card-text">閲嶅惎鑺傜偣</b>
+
+              <el-row style="margin-top:20px">
+                <el-col>
+                  <vue-cron :expression="rebootCron" @update="setRebootCron" />
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <!--
+          <div class="box-card">
+            <div class="ui-top-view">
+              <div class="ui-top-title">鎭㈠榛樿鍊�</div>
+            </div>
+            <el-divider></el-divider>
+
+            <div class="box-card-content">
+              <el-row>
+                <el-col :span="1">
+                  <el-button type="primary" size="small">绠�鍗曟仮澶�</el-button>
+                </el-col>
+                <el-col :span="23">
+                  <b class="card-text">绠�鍗曟仮澶嶈澶囧弬鏁�</b>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top:20px">
+                <el-col :span="1">
+                  <el-button type="primary" size="small">瀹屽叏鎭㈠</el-button>
+                </el-col>
+                <el-col :span="23">
+                  <b class="card-text">瀹屽叏鎭㈠璁惧鍙傛暟鍒板嚭鍘傝缃�</b>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          
+          <div class="box-card">
+            <div class="ui-top-view">
+              <div class="ui-top-title">鍙傛暟瀵煎叆瀵煎嚭</div>
+            </div>
+            <el-divider></el-divider>
+
+            <div class="box-card-content">
+              <el-row :gutter="4">
+                <el-col :span="1">
+                  <el-button type="info" size="small" style="width:80px">瀵煎叆</el-button>
+                </el-col>
+                <el-col :span="3" style="padding-left:30px">
+                  <el-input placeholder="涓婁紶鍙傛暟鏂囦欢" size="small" :readonly="true">
+                    <el-upload slot="suffix" action="https://jsonplaceholder.typicode.com/posts/">
+                      <el-button
+                        type="text"
+                        icon="el-icon-upload2"
+                        size="small"
+                        style="font-size:18px; color:#0088ff"
+                      ></el-button>
+                    </el-upload>
+                  </el-input>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top:20px">
+                <el-col :span="1">
+                  <el-button type="primary" size="small">璁惧鍙傛暟</el-button>
+                </el-col>
+                <el-col :span="23">
+                  <b class="card-text">鍙傛暟瀵煎嚭</b>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          -->
+          <div class="box-card">
+            <div class="ui-top-view">
+              <div class="ui-top-title">鍗囩骇</div>
+            </div>
+          </div>
+          <el-divider></el-divider>
+          <div class="box-card-content">
+            <el-row :gutter="4">
+              <el-col :span="12">
+                <file-uploader
+                  single
+                  uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢"
+                  url="/data/api-v/sysset/patchUpdate"
+                  @complete="onFileUpload"
+                  @file-added="onFileAdded"
+                />
+              </el-col>
+              <el-col :span="2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  style="width:80px"
+                  @click="upgrade"
+                  :disabled="!fileAdded"
+                  :loading="upgrading"
+                >鍗囩骇</el-button>
+              </el-col>
+              <el-col :span="16" class="upload-msg">
+                <span v-html="patchUpdateStatus"></span>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="dbvdc" v-if="isShow('vindicate:db')">
+        <div class="box">
+          <p class="title">
+            <label>鏁版嵁娓呯悊</label>
+          </p>
+          <div class="range">
+            <div class="left">
+              <p>閫夋嫨鏁版嵁鑼冨洿锛�</p>
+            </div>
+            <div class="middle">
+              <el-date-picker
+                v-model="dataRange"
+                type="daterange"
+                range-separator="鑷�"
+                start-placeholder="寮�濮嬫棩鏈�"
+                end-placeholder="缁撴潫鏃ユ湡"
+                style="height:38px"
+                :picker-options="pickerOptions"
+              ></el-date-picker>
+            </div>
+            <div class="right">
+              <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button>
+            </div>
+          </div>
+          <div class="tip">
+            <i class="iconfont icontishi-zhuyi"></i>
+            <p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import {
-  getClockInfo,
-  saveClockInfo,
-  testNTPserver,
-} from "@/api/system";
-import systemClean from "../views/systemClean";
-import updateSettings from "../views/updateSettings";
-import BackUp from "../views/backUp";
-import restartSettings from "../views/restartSettings";
+import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system"
+import VueCron from "@/components/subComponents/VueCron"
+import FileUploader from "@/components/subComponents/FileUpload/index"
+
 export default {
-  name: "settings",
   components: {
-    systemClean,
-    updateSettings,
-    BackUp,
-    restartSettings,
+    VueCron,
+    FileUploader
   },
   data() {
     return {
-      browserTimer: null,
-      menuArr: [
-        { name: "鏇存柊璁剧疆" },
-        { name: "澶囦唤杩樺師" },
-        { name: "绯荤粺娓呯悊" },
-        { name: "閲嶅惎璁剧疆" },
+      timer: null,
+      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
+      rebootCron: "",
+      activeName: "device",
+      restartValue: "涓嶉噸鍚�",
+      restartTimeValue: new Date(2019, 9, 10, 18, 40),
+      loading: false,
+      loadingText: '',
+      probeSum: 0,
+      patchUpdateStatus: "",
+      dataRange: [
+        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
+        this.$moment().format("YYYY-MM-DD HH:mm:ss")
       ],
-      jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
-      activePage: "鏇存柊璁剧疆",
-      activeIndex: 0,
-      clockTimer: null,
+      fileUploadUrl: fileUpload,
+      patchFile: {},
+      pickerOptions: {
+        disabledDate(time) {
+          var day = new Date()
+          day.setTime(day.getTime() - 24 * 60 * 60 * 1000)
+          return time.getTime() > day;
+        },
+      },
+      upgrading: false,
+      fileAdded: false,
     };
   },
-  beforeDestroy() {
-    clearTimeout(this.clockTimer);
-    clearInterval(this.browserTimer);
-  },
   mounted() {
-    const s = document.getElementsByClassName("left-card")[0];
-    s.style.backgroundColor = "rgba(61, 104, 225, 1)";
-    s.style.color = "#fff";
+    this.getRebootCron()
+    if (!this.isShow('vindicate:device')) {
+      this.activeName = "dbvdc"
+    }
+  },
+  computed: {
+    isAdmin() {
+      if (
+        sessionStorage.getItem('userInfo') &&
+        sessionStorage.getItem('userInfo') !== ''
+      ) {
+        let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
+        return (
+          loginName === 'superadmin' || loginName === 'basic'
+        )
+      }
+      return false;
+    }
   },
   methods: {
-    openMenu(item, i) {
-      const old = document.getElementsByClassName("left-card")[
-        this.activeIndex
-      ];
-      old.style.backgroundColor = "initial";
-      old.style.color = "rgba(81, 81, 81, 1)";
-
-      this.activePage = item.name;
-      this.activeIndex = i;
-      const s = document.getElementsByClassName("left-card")[i];
-      s.style.backgroundColor = "rgba(61, 104, 225, 1)";
-      s.style.color = "#fff";
+    isShow(authority) {
+      if (this.isAdmin) {
+        return true
+      } else if (
+        this.buttonAuthority.indexOf(',' + authority + ',') > -1
+      ) {
+        return true
+      } else {
+        return false
+      }
     },
-  },
+    format(array) {
+      return [
+        this.$moment(array[0]).format("YYYY-MM-DD"),
+        this.$moment(array[1]).format("YYYY-MM-DD")
+      ];
+    },
+    getRebootCron() {
+      getRebootTask().then(rsp => {
+        this.rebootCron = rsp.data
+      })
+    },
+    setRebootCron(value) {
+      debugger
+      this.rebootCron = value
+      setRebootTask({ task: value }).then(rsp => {
+        if (rsp && rsp.success) {
+          this.$notify({
+            type: "success",
+            message: "閰嶇疆鎴愬姛"
+          })
+        }
+      }).catch(err => {
+        this.$notify({
+          type: "error",
+          message: "閰嶇疆澶辫触"
+        })
+      })
+    },
+    reboot() {
+      this.$confirm('纭畾瑕侀噸鍚鑺傜偣鍚�?', {
+        center: true,
+        cancelButtonClass: 'comfirm-class-cancle',
+        confirmButtonClass: 'comfirm-class-sure'
+      }).then(() => {
+        this.loading = true;
+        this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..."
+        rebootServer().then(rsp => {
+          this.probeServer(this.reLogin)
+        }).catch(err => {
+          if (err.status == 400) {
+            this.loading = false;
+            this.$notify({
+              type: "error",
+              message: "閲嶅惎璁$畻鑺傜偣澶辫触"
+            })
+          } else {
+            this.probeServer(this.reLogin)
+          }
+        })
+      })
+    },
+    deleteData() {
+      var timeRange = this.format(this.dataRange);
+      var showStartTime = timeRange[0]
+      var showEndTime = timeRange[1]
+      console.log("鏃堕棿锛�", showStartTime, showEndTime)
+      this.$confirm("鎻愮ず锛�" + showStartTime + " 鑷� " + showEndTime + " 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵", {
+        center: true,
+        cancelButtonClass: "comfirm-class-cancle",
+        confirmButtonClass: "comfirm-class-sure"
+      }).then(() => {
+        this.loading = true
+        this.loadingText = "姝e湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒"
+        var param = {
+          startTime: showStartTime,
+          endTime: showEndTime
+        }
+        deleteDate(param).then(resp => {
+          if (resp.success) {
+            this.$message({
+              type: "success",
+              message: "鍒犻櫎鏁版嵁鎴愬姛"
+            })
+            this.loading = false
+          }
+        }).catch(err => {
+          this.$message({
+            type: "error",
+            message: "鍒犻櫎鏁版嵁澶辫触锛�"
+          })
+          this.loading = false
+        })
+
+      }).catch(() => {
+        console.log("鍙栨秷浜嗭紒")
+      })
+    },
+    reLogin() {
+      this.$router.push("/")
+    },
+    probeServer(callback) {
+      this.probeSum++;
+      let _this = this
+      if (this.probeSum > 60) {
+        this.$confirm('杩炴帴鏈嶅姟鍣ㄥけ璐�, 璇峰埛鏂伴〉闈㈡垨鑱旂郴绠$悊鍛�', '澶辫触', {
+          type: 'error',
+          cancelButtonClass: 'comfirm-class-cancle',
+          confirmButtonClass: 'comfirm-class-sure'
+        }).then(() => {
+          // _this.$router.push("/")
+          callback()
+        })
+        return
+      }
+
+      this.timer = setTimeout(() => {
+        getDevInfo().then(() => {
+          // _this.$router.push("/")
+          callback()
+        }).catch(err => {
+          _this.probeServer(callback)
+        })
+      }, 10000)
+    },
+    onFileUpload(file) {
+      this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪崌绾�</span>`
+      this.patchFile = { ...file }
+      this.fileAdded = true
+    },
+    onFileAdded() {
+      this.patchUpdateStatus = ""
+    },
+    upgrade() {
+      this.upgrading = true
+      this.patchUpdateStatus = `<span style="color:red">姝e湪鍗囩骇...</span>`
+      doUpgrade(this.patchFile).then(rsp => {
+        this.upgrading = false
+
+        if (rsp && rsp.success) {
+          clearTimeout(this.timer)
+          this.doneUpgrade()
+        }
+      }).catch(err => {
+        if (err.code) {
+          this.upgrading = false
+          this.patchUpdateStatus = `<span style="color:red">${err.data}</span>`
+          clearTimeout(this.timer)
+        } else {
+          this.probeServer(this.doneUpgrade)
+        }
+      })
+    },
+    doneUpgrade() {
+      this.upgrading = false
+      this.patchUpdateStatus = `<span style="color:green">鍗囩骇鎴愬姛</span>`
+      let _this = this
+      this.$confirm('鍗囩骇鎴愬姛, 璇烽噸鏂扮櫥褰曠郴缁�', '鎴愬姛', {
+        type: 'success',
+        cancelButtonClass: 'comfirm-class-cancle',
+        confirmButtonClass: 'comfirm-class-sure'
+      }).then(() => {
+        _this.reLogin()
+      })
+    }
+  }
 };
 </script>
 <style lang="scss">
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
+.s-system-manage {
+  width: 100% !important;
+  min-width: 759px;
   box-sizing: border-box;
-  .container-left {
-    height: 100%;
-    width: 210px;
-    overflow: auto;
+  padding: 10px;
+  // background-color: #e9ebf2;
+  background-color: #fff;
+  .s-system-manage-breadcrumb {
+    height: 5%;
     box-sizing: border-box;
-    flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid rgba(248, 248, 248, 1);
-    box-sizing: border-box;
-    .left-card {
-      height: 55px;
-      cursor: pointer;
-      border-radius: 12px;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      .iconfont {
-        margin-left: 25px;
-        margin-right: 10px;
-        font-size: 24px;
+    border: 1px solid #e4e7ed;
+    box-shadow: #e4e7ed 0px 0px 9px inset;
+    box-shadow: #e4e7ed 0px 0px 9px inset;
+    border-radius: 5px;
+  }
+
+  .el-tabs--border-card {
+    border: 0px solid #dcdfe6;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    .el-tabs__header {
+      border: 0px solid #dcdfe6;
+      .el-tabs__item {
+        padding: 5px 50px;
+        height: 50px;
+        font-family: PingFangSC-Regular;
+        font-size: 15px;
+        color: #222222;
+        text-align: center;
+        border: 0px solid transparent;
       }
-      .card-text {
+      .el-tabs__item:nth-child(2) {
+        padding-left: 50px !important;
+      }
+      .el-tabs__item:last-child {
+        padding-right: 50px !important;
+      }
+      .el-tabs__item.is-active {
+        color: #3d68e1;
+        font-weight: bold;
+        // border-right-color: #fff;
+        // border-left-color: #fff;
+      }
+      .el-tabs__item:not(.is-disabled):hover {
+        color: #3d68e1;
+      }
+    }
+  }
+  .el-tabs__content {
+    height: calc(100% - 64px);
+    width: calc(100% - 20px);
+    box-sizing: border-box;
+    overflow-y: auto;
+    padding: 10px 40px !important;
+    .el-tab-pane {
+      width: 100%;
+      .s-title {
+        text-align: left;
+        padding: 15px 0px;
         font-size: 16px;
       }
     }
-    .left-card:hover {
-      background-color: rgba(61, 104, 225, 1);
-      color: #fff;
-    }
   }
-  .container-center {
-    height: 100%;
-    width: 280px;
-    overflow: auto;
-    flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid rgba(248, 248, 248, 1);
-    box-sizing: border-box;
-    .account-left {
-      .add-account {
-        color: rgba(61, 104, 225, 1);
-        margin-top: 50px;
 
-        .iconfont {
-          cursor: pointer;
-          font-size: 32px;
-        }
-      }
-      .account-card {
-        height: 50px;
-        background-color: rgba(248, 248, 248, 1);
-        margin-bottom: 10px;
-        display: flex;
-        align-items: center;
-        padding: 0 20px;
-        box-sizing: border-box;
-        border-radius: 10px;
-        cursor: pointer;
-        .touxiang {
-          height: 35px;
-          width: 35px;
-          background-color: bisque;
-          border-radius: 17.5px;
-        }
-        .user-name {
-          margin-left: 10px;
-          font-size: 14px;
-        }
-      }
-    }
-    .datetime-left {
-      .time-card {
-        height: 105px;
-        background-color: rgba(248, 248, 248, 1);
-        margin-bottom: 30px;
-        border-radius: 10px;
-        .head {
-          height: 30px;
-          line-height: 30px;
-          text-align: left;
-          box-sizing: border-box;
-          padding: 0 10px;
-          font-size: 14px;
-          .icon {
-            margin-right: 5px;
-            color: rgba(61, 104, 225, 1);
-          }
-        }
-        .time-main {
-          height: 42px;
-          line-height: 42px;
-          font-family: Consolas;
-          font-size: 36px;
-        }
-        .date-bot {
-          height: 25px;
-          font-size: 14px;
-          line-height: 25px;
-          color: #868686;
-          display: flex;
-          justify-content: space-evenly;
-        }
-      }
-      .line {
-        display: flex;
-        align-items: center;
-        height: 50px;
-        padding: 0 25px;
-        background-color: rgba(248, 248, 248, 1);
-        justify-content: space-between;
-        border-radius: 12px;
-        margin-bottom: 10px;
-        .name {
-          font-size: 14px;
-        }
-      }
-    }
+  .s-table {
+    border: 1px solid #e8e8e9;
+    margin-top: 40px;
   }
-  .container-right {
-    flex: 1;
-    flex-basis: auto;
-    overflow: auto;
-    box-sizing: border-box;
+
+  .ui-top-title {
+    padding-bottom: 10px;
+    /* border-bottom: 1px solid #ebebeb; */
     position: relative;
+    text-align: left;
+    padding-left: 15px;
+    font-size: 16px;
+    font-weight: bold;
+  }
 
-    padding: 20px 40px;
-    .account-right {
-      .account-content {
-        .content-top {
-          height: 120px;
-          width: 350px;
-          margin: 0 auto;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 20px;
-          .touxiang-big {
-            width: 100px;
-            height: 100px;
-            background-color: bisque;
-            border-radius: 50px;
-          }
-          .user-desc {
-            height: 100px;
-            display: flex;
-            flex-direction: column;
-            align-items: baseline;
-            min-width: 200px;
-            .username {
-              margin: 5px 15px;
-              height: 30px;
-              line-height: 30px;
-              width: 90px;
-              text-align: left;
-              font-size: 15px;
-              display: flex;
-              align-items: center;
-            }
-            .nickname {
-              margin: 5px 15px;
-              font-size: 14px;
-              .input-nick {
-                width: 50px;
-                margin-right: 5px;
-              }
-              .iconfont {
-                font-size: 14px;
-                margin-left: 5px;
-              }
-            }
-          }
-        }
-        .list-btn {
-          display: flex;
+  .ui-top-title:before {
+    content: " ";
+    border-left: 4px solid #f53d3d;
+    display: inline-block;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -13px;
+  }
 
-          flex-direction: column;
-          align-items: center;
-          .item-btn {
-            width: 500px;
-            height: 45px;
-            background-color: #f0f0f0;
-            margin-bottom: 15px;
-            border-radius: 10px;
-            line-height: 45px;
-            font-size: 15px;
-            cursor: pointer;
-          }
-          .item-btn:hover {
-            color: rgba(255, 153, 102, 1);
-          }
-        }
-      }
-      .title {
-        height: 30px;
-        line-height: 30px;
-        /* background-color: aliceblue; */
-        margin-bottom: 10px;
-        font-size: 16px;
-        font-weight: 600;
-      }
-      .change-pw {
-        .p-title {
-          text-align: left;
-          font-size: 15px;
-          margin-top: 5px;
-        }
-      }
-      .el-form-item {
-        margin-bottom: 0;
-        .el-input__inner {
-          background-color: rgba(240, 240, 240, 1);
-          border: none;
-          border-radius: 12px;
-          height: 45px;
-          padding: 0 20px;
-          font-size: 15px;
-        }
-        .el-input__clear {
-          color: dimgray;
-          font-size: 17px;
-          line-height: 45px;
-        }
-        .el-input__suffix {
-          right: 1px;
-          top: -0.5px;
-          width: 45px;
-          // background-color: rgba(61, 104, 225, 1);
-          /* color: white; */
-          border-radius: 12px;
-        }
-      }
-      .permission {
-        .line {
-          display: flex;
-          align-items: center;
-          height: 50px;
-          padding: 0 25px;
-          background-color: rgba(248, 248, 248, 1);
-          justify-content: space-between;
-          border-radius: 12px;
-          margin-bottom: 10px;
-          .name {
-            font-size: 14px;
-          }
-        }
-      }
-
-      .add-account-page {
-        // background-color: lightcyan;
-        // padding: 10px 50px;
-        .upload-group {
-          height: 120px;
-          width: 350px;
-          margin: 0 auto;
-          overflow: hidden;
-          .upload-jpg {
-            height: 50px;
-            width: 50px;
-            float: left;
-            margin: 0 10px;
-            background-color: antiquewhite;
-            margin-bottom: 20px;
-            border-radius: 25px;
-          }
-        }
-        .fill-group {
-          .p-title {
-            text-align: left;
-          }
-        }
+  .el-button--text {
+    color: #3d68e1;
+    text-decoration: underline;
+  }
+}
+.s-system-maintenance {
+  width: 100%;
+  height: 100%;
+  .el-button--primary {
+    color: #ffffff;
+    background-color: #3d68e1;
+    border-color: #3d68e1;
+  }
+  .el-button--primary.is-disabled,
+  .el-button--primary.is-disabled:hover,
+  .el-button--primary.is-disabled:focus,
+  .el-button--primary.is-disabled:active {
+    color: #ffffff;
+    background-color: #9eb4f0;
+    border-color: #9eb4f0;
+  }
+  .box-card {
+    text-align: left;
+    height: auto;
+    margin: 10px 0px;
+    .box-card-content {
+      padding-bottom: 40px;
+      .card-text {
+        padding: 0 30px;
+        line-height: 32px;
       }
     }
-    .datetime-right {
-      .el-form-item.is-required:not(.is-no-asterisk)
-        > .el-form-item__label:before,
-      .el-form-item.is-required:not(.is-no-asterisk)
-        .el-form-item__label-wrap
-        > .el-form-item__label:before {
-        display: none;
-      }
-      .el-form-item {
-        margin-bottom: 10px;
-        height: 50px;
-        background: #f8f8f8;
-        padding: 4px 20px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 10px;
-        .el-form-item__label {
-          text-align: left;
-          line-height: 42px;
-        }
-      }
-      .el-form-item__content {
-        line-height: 40px;
-        position: relative;
-        font-size: 14px;
-      }
-      .ip-input-container {
-        max-width: none !important;
-      }
-      .ntp-time {
-        .right {
-          display: flex;
-          align-items: baseline;
-          .el-input-number--small {
-            width: 100%;
-          }
-          .el-button--text {
-            margin-left: 10px;
-            text-decoration: underline;
-          }
-        }
-        .ntp-bar {
-          height: 40px;
-          background-color: rgba(248, 248, 248, 1);
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 10px;
-          border-radius: 10px;
-          margin-bottom: 10px;
-          .title {
-            min-width: 70px;
-          }
-          .input-area {
-            width: 450px;
-            height: 30px;
-            background-color: rgba(240, 240, 240, 1);
-            border-radius: 10px;
-            line-height: 30px;
-            font-size: 14px;
-          }
-        }
-        .int-bar {
-          height: 40px;
-          background-color: rgba(248, 248, 248, 1);
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 10px;
-          border-radius: 10px;
-          margin-bottom: 10px;
-          .title {
-            min-width: 130px;
-          }
-          .right {
-            width: 450px;
-            display: flex;
-            align-items: center;
-            height: 30px;
+  }
 
-            .input-area {
-              // width: 410px;
-              background-color: rgba(240, 240, 240, 1);
-              border-radius: 10px;
-              line-height: 30px;
-              width: -webkit-fill-available;
-
-              font-size: 14px;
-            }
-            .test {
-              width: 40px;
-            }
-          }
-        }
-      }
-      .manual-time {
-        .clock-wrap {
-          height: 75px;
-
-          background-color: #f8f8f8;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-bottom: 10px;
-          border-radius: 10px;
-          .clock {
-            display: flex;
-            align-items: center;
-            height: 90px;
-            justify-content: space-evenly;
-            .iconfont {
-              cursor: pointer;
-              color: rgba(134, 134, 134, 1);
-            }
-            .iconfont:hover {
-              background-color: gainsboro;
-            }
-            .hour {
-              background-color: rgba(240, 240, 240, 1);
-              display: flex;
-              align-items: center;
-              width: 100px;
-              height: 50px;
-              justify-content: space-evenly;
-              border-radius: 10px;
-            }
-            .dnum {
-              width: 40px;
-              height: 40px;
-              line-height: 40px;
-              font-size: 34px;
-              font-family: Consolas;
-              display: flex;
-              align-items: center;
-              .input-box {
-                width: inherit;
-                border: none;
-                border-radius: 5px;
-                height: 35px;
-                font-size: 28px;
-                text-align: center;
-              }
-
-              .input-box:focus {
-                outline: none;
-              }
-            }
-            .control {
-              width: 20px;
-              .fanzhuan {
-                display: inline-block;
-                -moz-transform: scaleY(-1);
-                -webkit-transform: scaleY(-1);
-                -o-transform: scaleY(-1);
-                transform: scaleY(-1);
-              }
-            }
-            .sep {
-              font-family: Consolas;
-              width: 40px;
-              font-size: 34px;
-              height: 40px;
-              line-height: 40px;
-            }
-            .mins {
-              background-color: #f0f0f0;
-              display: flex;
-              align-items: center;
-              width: 110px;
-              height: 50px;
-              justify-content: space-evenly;
-              border-radius: 10px;
-            }
-          }
-        }
-        .adjust-bar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 10px;
-          border-radius: 10px;
-          height: 50px;
-          background-color: rgba(248, 248, 248, 1);
-          .middle {
-            font-size: 14px;
-          }
-          .input-box {
-            width: 80px;
-            border: none;
-            border-radius: 5px;
-            height: 25px;
-            font-size: 18px;
-            text-align: center;
-          }
-
-          .input-box:focus {
-            outline: none;
-          }
-          .minus {
-            width: 50px;
-            height: 50px;
-            background-color: #f0f0f0;
-            font-size: 35px;
-            border-radius: 10px;
-            cursor: pointer;
-            line-height: 50px;
-            color: rgba(134, 134, 134, 1);
-          }
-          .plus {
-            width: 50px;
-            height: 50px;
-            cursor: pointer;
-            background-color: #f0f0f0;
-            font-size: 35px;
-            border-radius: 10px;
-            line-height: 50px;
-            color: rgba(134, 134, 134, 1);
-          }
-        }
-      }
-    }
-    .btns {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 20px;
-
-      .cancel {
-        height: 40px;
-        width: 48%;
-        cursor: pointer;
-        border-radius: 8px;
-        background-color: rgba(240, 240, 240, 1);
-        line-height: 40px;
-        font-size: 14px;
-      }
-      .ok {
-        height: 40px;
-        width: 48%;
-        cursor: pointer;
-        border-radius: 8px;
-        background-color: rgba(61, 104, 225, 1);
-        color: #fff;
-        line-height: 40px;
-        font-size: 14px;
-      }
+  .upload-icon {
+    font-size: 18px;
+    color: #0088ff;
+  }
+  .upload-msg {
+    padding-left: 10px;
+    text-align: left;
+    span {
+      line-height: 32px;
+      font-size: 13px;
     }
   }
 }
+.box {
+  width: 50%;
+  min-width: 700px;
+  height: 270px;
+  border: 1px solid #eee;
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    text-align: left;
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+  }
+  .range {
+    width: 100%;
+    padding-top: 30px;
+    height: 38px;
+    .left {
+      width: 120px;
+      float: left;
+      text-align: right;
+      font-size: 14px;
+      p {
+        height: 38px;
+        line-height: 38px;
+        margin: 0;
+      }
+    }
+    .middle {
+      width: 50%;
+      min-width: 400px;
+      height: 38px;
+      float: left;
+    }
+    .right {
+      width: 20%;
+      height: 38px;
+      float: left;
+    }
+  }
+  .tip {
+    width: 100%;
+    padding: 30px 0px 0px 30px;
+    height: 34px;
+
+    .zhuyi {
+      font-size: 14px;
+      height: 34px;
+      line-height: 34px;
+      margin-left: 20px;
+      float: left;
+    }
+    i {
+      font-size: 32px;
+      color: #e99038;
+      float: left;
+    }
+  }
+}
+#systemMaintenance {
+  .el-tabs__header {
+    border: 0px solid #dcdfe6;
+    .el-tabs__item {
+      padding: 5px 50px;
+      height: 50px;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #222222;
+      text-align: center;
+      border: 0px solid transparent;
+    }
+    .el-tabs__item:nth-child(2) {
+      padding-left: 50px;
+    }
+    .el-tabs__item:last-child {
+      padding-right: 50px;
+    }
+    .el-tabs__item.is-active {
+      color: #ff7733;
+      font-weight: bold;
+      // border-right-color: #fff;
+      // border-left-color: #fff;
+    }
+    .el-tabs__item:not(.is-disabled):hover {
+      color: #ff7733;
+    }
+  }
+  .el-tabs__active-bar {
+    background-color: #ff7733;
+  }
+  .el-tabs__content {
+    padding-left: 15px !important;
+  }
+}
 </style>
-
-

--
Gitblit v1.8.0