修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/vindicate/index/App.vue

@@ -1,508 +1,526 @@
<template>
  <el-tabs
    id="systemMaintenance"
    v-model="activeName"
    v-loading="loading"
    :element-loading-text="loadingText"
  <div class="container vindicate" v-if="!showWelcome">
    <div class="container-left">
      <div
        class="left-card"
        v-for="(item, i) in menuArr"
        :key="i"
        :class="activePage == i ? 'left-card-active' : ''"
        @click="openMenu(item, i)"
      >
        <img :src="item.img_black" class="icon iconfont icon_black" />
        <img :src="item.img_white" class="icon iconfont icon_white" />
        <span class="card-text">{{ item.name }}</span>
      </div>
    </div>
    <systemClean
      v-if="activePage == 1"
      style="width: 100%"
      :free="free"
      :full="full"
      @refreshPercent="getLeftPer"
      ref="view_1"
    ></systemClean>
    <updateSettings
      v-if="activePage == 0"
      style="width: 100%"
      ref="view_0"
    ></updateSettings>
    <back-up v-if="activePage == 3" style="width: 100%"></back-up>
    <restartSettings
      v-if="activePage == 2"
      style="width: 100%"
      ref="view_2"
    ></restartSettings>
    <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo>
  </div>

  <div
    class="welcome-page"
    v-else
    ref="curPage"
    @click="showRecomand = false"
    @mouseup="mouseDownIndex = ''"
  >
    <el-tab-pane label="设备维护" name="first">
      <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="search-box"
      :class="showRecomand ? 'border-change' : ''"
      @click.stop
    >
      <!-- @blur="showRecomand = false" -->
      <el-input
        class="search-input"
        placeholder="查找设置"
        size="mini"
        @focus="showRecomand = true"
        clearable
        @input="filterRecomand"
        :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
        v-model="searchText"
      >
      </el-input>

          <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 class="search-res" v-if="showRecomand">
        <div
          class="res-bar"
          v-for="(item, index) in searchArrForShow"
          :key="index"
          @click="pickQuick(item.addr)"
        >
          {{ item.name }}
        </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="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 class="no-res-bar" v-if="searchArrForShow.length == 0">
          没有找到与 {{ searchText }} 相关的结果
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="数据库维护" name="second">
      <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 class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
    </div>
    <div class="nav-items">
      <div
        class="nav-child"
        @click="openWelcome(i)"
        v-for="(item, i) in menuArr"
        :key="i"
        @mousedown="mouseDownIndex = i"
        :class="mouseDownIndex === i ? 'nav-child-active' : ''"
      >
        <div class="child-info">
          <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
          <img :src="item.img_welcome" alt="" />
          <span class="welcome-title">{{ item.name }}</span>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
    </div>
  </div>
</template>

<script>
import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system"
import VueCron from "@/components/subComponents/VueCron"
import FileUploader from "@/components/subComponents/FileUpload/index"

import { freedisk } from "@/api/system";
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
import BackUp from "../views/backUp";
import restartSettings from "../views/restartSettings";
import sysInfo from "../views/sysInfo";
export default {
  name: "settings",
  components: {
    VueCron,
    FileUploader
    systemClean,
    updateSettings,
    BackUp,
    restartSettings,
    sysInfo,
  },
  data() {
    return {
      timer: null,
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      rebootCron: "",
      activeName: "first",
      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")
      ],
      fileUploadUrl: fileUpload,
      patchFile: {},
      pickerOptions: {
        disabledDate(time) {
          var day = new Date()
          day.setTime(day.getTime() - 24 * 60 * 60 * 1000)
          return time.getTime() > day;
      menuArr: [
        {
          name: "更新设置",
          img_black: "/images/vindicate/更新设置-黑.png",
          img_white: "/images/vindicate/更新设置-白.png",
          img_welcome: "/images/vindicate/更新设置.png",
        },
      },
      upgrading: false,
      fileAdded: false
        {
          name: "系统清理",
          img_black: "/images/vindicate/系统清理-黑.png",
          img_white: "/images/vindicate/系统清理-白.png",
          img_welcome: "/images/vindicate/系统清理.png",
        },

        {
          name: "重启设置",
          img_black: "/images/vindicate/重启设置-黑.png",
          img_white: "/images/vindicate/重启设置-白.png",
          img_welcome: "/images/vindicate/重启设置.png",
        },
        {
          name: "备份还原",
          img_black: "/images/vindicate/系统清理-黑.png",
          img_white: "/images/vindicate/系统清理-白.png",
          img_welcome: "/images/vindicate/系统清理.png",
        },
        {
          name: "系统信息",
          img_black: "/images/vindicate/系统信息-黑.png",
          img_white: "/images/vindicate/系统信息-白.png",
          img_welcome: "/images/vindicate/系统信息.png",
        },
      ],
      searchArr: [
        { name: "系统设置", addr: [0] },
        { name: "系统更新", addr: [0, 0] },
        { name: "更新设置", addr: [0, 1] },
        { name: "系统清理", addr: [1] },
        { name: "重启设置", addr: [2] },
        { name: "系统信息", addr: [3] },
      ],
      activePage: 0,
      free: 0,
      full: 0,
      showWelcome: true,
      searchText: "",
      showRecomand: false,
      mouseDownIndex: "",
    };
  },
  mounted() {
    this.getRebootCron()
    if (!this.isShow('videoSystem:sysManage:sysfix')) {
      console.log("默认显示数据库维护")
      this.activeName = "second"
  created() {
    let color = localStorage.getItem("--colorCard");
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);
    }
  },
  computed: {
    isAdmin() {
      if (
        sessionStorage.getItem('userInfo') &&
        sessionStorage.getItem('userInfo') !== ''
      ) {
        let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
        return (
          loginName === 'superadmin' || loginName === 'basic'
        )
      }
      return false;
  mounted() {
    const menu = getUrlKey("menu");
    if (menu) {
      this.activePage = this.menuArr.findIndex((x) => x.name == menu);
      // this.$nextTick(() => {
      //   this.$refs.netSettings.openRight(2);
      // });
    }
    this.getLeftPer();
    window.addEventListener("message", (e) => {
      if (e.data.msg === "changeColor") {
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
        );
      }
      if (e.data.msg === "返回系统维护") {
        this.showWelcome = true;
      }
    });
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true
      } else if (
        this.buttonAuthority.indexOf(',' + authority + ',') > -1
      ) {
        return true
    openMenu(item, i) {
      this.activePage = i;
    },
    getLeftPer() {
      freedisk().then((res) => {
        this.free = res.data.free;
        this.full = res.data.all;
      });
    },
    pickQuick(addr) {
      if (addr.length == 1) {
        this.openWelcome(addr[0]);
      } else {
        return false
        this.openWelcome(addr[0]);
        this.$nextTick(() => {
          if (addr[0] == 1) {
            // addr[1] == 0
            //   ? this.changeSwitch("isNtp")
            //   : this.changeSwitch("isManual");
            return;
          }
          this.$refs[`view_${addr[0]}`].openRight(addr[1]);
        });
      }
    },
    format(array) {
      return [
        this.$moment(array[0]).format("YYYY-MM-DD"),
        this.$moment(array[1]).format("YYYY-MM-DD")
      ];
    openWelcome(i) {
      this.showWelcome = false;
      this.openMenu(1, i);
    },
    getRebootCron() {
      getRebootTask().then(rsp => {
        this.rebootCron = rsp.data
      })
    },
    setRebootCron(value) {
      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 = "智能计算节点正在重启，请耐心等待..."
        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 = "正在删除数据，请稍候！"
        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
  },
  computed: {
    searchArrForShow() {
      if (this.searchText == "") {
        return this.searchArr;
      } else {
        return this.searchArr.filter((item) => {
          return item.name.indexOf(this.searchText.toUpperCase()) > -1;
        });
      }

      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
  },
  watch: {
    showWelcome(newVal) {
      if (newVal) {
        // 隐藏返回按按钮
        window.parent.postMessage(
          {
            msg: "hiddenBack",
          },
          "*"
        );
      } else {
        //显示返回按钮
        window.parent.postMessage(
          {
            msg: "showBack",
          },
          "*"
        );
      }
    },
    onFileAdded() {
      this.patchUpdateStatus = ""
    },
    upgrade() {
      this.upgrading = true
      this.patchUpdateStatus = `<span style="color:red">正在升级...</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">
.s-system-maintenance {
.welcome-page {
  width: 100%;
  height: 100%;
  .box-card {
    text-align: left;
    height: auto;
    margin: 10px 0px;
    .box-card-content {
      padding-bottom: 40px;
  display: -ms-flexbox;
  padding: 145px 32px 50px 32px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  .border-change {
    border-radius: 20px !important;
  }
  .search-box {
    width: 332px;
    z-index: 999;
    // margin: 55px auto;
    position: fixed;
    left: calc(50% - 166px);
    top: 50px;
    opacity: 0.8;

    border: 2px solid #4e94ff;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    border-radius: 40px;
    .search-input {
      font-size: 14px;
      .el-input--mini .el-input__inner {
        height: 36px;
        line-height: 36px;
      }
      .el-input--suffix .el-input__inner {
        padding-right: 40px;
      }
      .el-input__inner {
        background-color: #fff;
        background-image: none;
        border-radius: 40px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        outline: 0;
        padding: 0 20px;
        -webkit-transition: border-color 0.2s
          cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
        font-weight: bold;

        &::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
      }
      .el-input__suffix {
        display: flex;
        align-items: center;
        padding-right: 10px;
        .el-input__suffix-inner {
          border-color: none;
          .el-icon-circle-close:before {
            content: "\e79d" !important;
            font-size: 17px;
          }
          .el-icon-search {
            color: #2f2d3d;
            font-weight: bold;
            font-size: 17px;
          }
        }
      }
    }
    .search-res {
      max-height: 240px;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.5);
      .res-bar {
        height: 40px;
        line-height: 40px;
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        font-size: 14px;
        cursor: pointer;
      }
      .no-res-bar {
        height: 40px;
        line-height: 40px;
        text-align: left;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333333;
        font-size: 14px;
      }
      .res-bar:hover {
        background: #f5f5f6 10%;
        font-weight: bold;
        color: #4e94ff;
      }
      // .res-bar:last-child {
      //   border-radius: 0 0 20px 20px;
      // }
    }
  }
  .nav-items {
    max-width: 960px;
    margin: 0 auto;
    .nav-child {
      box-sizing: border-box;
      background-color: rgba(251, 251, 255, 0.1);
      backdrop-filter: blur(4px);
      float: left;
      width: 288px;
      height: 190px;
      margin: 0 10px;
      margin-bottom: 20px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 2px solid #f2f2f7;

      &:hover {
        background: #f2f2f7;
      }

      &-active {
        border: 2px solid #4e94ff;
      }

      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
      .child-info {
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        height: 100%;
        .welcome-icon {
          font-size: 72px;
        }
        img {
          width: 64px;
          margin: 0 auto;
          margin-top: 61px;
          height: 50px;
        }
        .welcome-title {
          font-size: 16px;
          font-weight: bold;
          margin-top: 24px;
          color: #333333;
        }
      }
    }
    // .nav-child:hover {
    // box-shadow: 4px 4px 12px rgb(218, 218, 218);
    // transform: translate3d(0, -1px, 0);
    // transition: all 0.3s;
    // }
  }
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  position: relative;

  .back {
    position: absolute;
    top: 0;
    left: 0;
  }

  .container-left {
    height: 100%;
    width: 244px;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 13px 10px 0 10px;
    box-sizing: border-box;
    background: #fff;
    .left-card {
      position: relative;
      width: 224px;
      height: 56px;
      cursor: pointer;
      border-radius: 8px;
      margin-bottom: 4px;
      display: flex;
      background-color: #fff;
      align-items: center;
      .icon_white {
        position: absolute;
        top: 8px;
        left: 0;
        visibility: hidden;
      }
      .iconfont {
        width: 40px;
        height: 40px;
        margin: 0 20px 0 20px;
        background: #333333;
        border-radius: 8px;
      }
      .card-text {
        padding: 0 30px;
        line-height: 32px;
        font-family: PingFang SC;
        font-weight: 700;
        font-size: 16px;
        line-height: 22.4px;
      }
    }
  }
    .left-card-active {
      color: #fff;
      background-color: var(--colorCard) !important;
      .icon_black {
        visibility: hidden;
      }
      .icon_white {
        visibility: visible;
      }
      .iconfont {
        color: #333333;
        background-color: #fff;
      }
    }

  .upload-icon {
    font-size: 18px;
    color: #0088ff;
  }
  .upload-msg {
    padding-left: 10px;
    text-align: left;
    span {
      line-height: 32px;
      font-size: 13px;
    .left-card:hover {
      background-color: #f2f2f7;
    }
  }
}
.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;
  }
.vindicate {
  border-top: 2px solid #e1e0e6;
}
</style>