hanbaoshan
2020-10-20 98a6297b10a4b97c3022f84d3ba7908c178d9ee0
src/pages/vindicate/index/App.vue
@@ -1,139 +1,136 @@
<template>
  <div class="s-system-manage">
    <el-tabs
      id="systemMaintenance"
      v-model="activeName"
      v-loading="loading"
      :element-loading-text="loadingText"
    >
      <el-tab-pane label="设备维护" name="first" >
      <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 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-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 :span="12">
                <file-uploader
                  single
                  uploadPlaceholder="上传升级文件"
                  url="/data/api-v/sysset/patchUpdate"
                  @complete="onFileUpload"
                  @file-added="onFileAdded"
                />
              </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 :span="2">
                <el-button
                  type="primary"
                  size="small"
                  style="width:80px"
                  @click="upgrade"
                  :disabled="!fileAdded"
                  :loading="upgrading"
                >升级</el-button>
              </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 :span="16" class="upload-msg">
                <span v-html="patchUpdateStatus"></span>
              </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="6">
              <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="second" >
        <div class="box">
      <el-tab-pane label="数据库维护" name="dbvdc" v-if="isShow('vindicate:db')">
        <div class="box">
          <p class="title">
            <label>数据清理</label>
          </p>
          </p>
          <div class="range">
            <div class="left">
              <p>选择数据范围:</p>
            </div>
            </div>
            <div class="middle">
              <el-date-picker
                v-model="dataRange"
@@ -147,20 +144,20 @@
            </div>
            <div class="right">
              <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">删除数据</el-button>
            </div>
          </div>
            </div>
          </div>
          <div class="tip">
            <i class="iconfont icontishi-zhuyi"></i>
            <p class="zhuyi">请注意,按以上日期范围删除的数据不可恢复,立即生效,请谨慎操作</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade,deleteDate } from "@/api/system"
import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system"
import VueCron from "@/components/subComponents/VueCron"
import FileUploader from "@/components/subComponents/FileUpload/index"
@@ -174,7 +171,7 @@
      timer: null,
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      rebootCron: "",
      activeName: "first",
      activeName: "device",
      restartValue: "不重启",
      restartTimeValue: new Date(2019, 9, 10, 18, 40),
      loading: false,
@@ -195,14 +192,13 @@
        },
      },
      upgrading: false,
      fileAdded: false
      fileAdded: false,
    };
  },
  mounted() {
    this.getRebootCron()
    if (!this.isShow('videoSystem:sysManage:sysfix')) {
      console.log("默认显示数据库维护")
      this.activeName = "second"
    if (!this.isShow('vindicate:device')) {
      this.activeName = "dbvdc"
    }
  },
  computed: {
@@ -220,7 +216,7 @@
    }
  },
  methods: {
    isShow (authority) {
    isShow(authority) {
      if (this.isAdmin) {
        return true
      } else if (
@@ -285,8 +281,8 @@
      var timeRange = this.format(this.dataRange);
      var showStartTime = timeRange[0]
      var showEndTime = timeRange[1]
      console.log("时间:",showStartTime,showEndTime)
      this.$confirm("提示:"+showStartTime+" 至 "+showEndTime+" 产生的全部数据将被删除,此操作立即生效,不可恢复,是否删除?", {
      console.log("时间:", showStartTime, showEndTime)
      this.$confirm("提示:" + showStartTime + " 至 " + showEndTime + " 产生的全部数据将被删除,此操作立即生效,不可恢复,是否删除?", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
@@ -388,9 +384,117 @@
};
</script>
<style lang="scss">
.s-system-manage {
  width: 100% !important;
  min-width: 759px;
  box-sizing: border-box;
  padding: 10px;
  // background-color: #e9ebf2;
  background-color: #fff;
  .s-system-manage-breadcrumb {
    height: 5%;
    box-sizing: border-box;
    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;
      }
      .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;
      }
    }
  }
  .s-table {
    border: 1px solid #e8e8e9;
    margin-top: 40px;
  }
  .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;
  }
  .ui-top-title:before {
    content: " ";
    border-left: 4px solid #f53d3d;
    display: inline-block;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -13px;
  }
  .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;
@@ -417,13 +521,13 @@
    }
  }
}
.box{
.box {
  width: 50%;
  min-width: 700px;
  height: 270px;
  border: 1px solid #eee;
  .title {
    font-size:20px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding: 20px;
@@ -475,35 +579,33 @@
    }
  }
}
#systemMaintenance{
#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;
      }
    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;