<template>
  <div class="main">
    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>{{type==1?'校院通知':(type==2?'预警事件':(type==3?'工作通知':''))}}</i>
      </div>
      <div style="margin-top:30px;height:900px;padding-top:20px;">
        <div class="title" v-if="type == 1||type == 3">{{codeData.title}}</div>
        <div class="main_t_b" v-if="type == 1||type == 3">
          <p v-html="codeData.content"></p>
          <div class="unit">{{codeData.company}}</div>
          <div class="time">{{parseTime(codeData.createTime,'{y}-{m}-{d}')}}</div>
        </div>
        <div class="content-box" style="margin-top:-20px;" v-if="type == 2 || type == 4">
          <!--基础信息-->
          <div class="top-max-big-box" v-if="infoData.warnType==4">
            <p class="title-p">预警信息</p>
            <div class="text-max-box">
              <div class="text-left-box">
                <p>报警时间：</p>
                <p>{{parseTime(infoData.eventStartTime,'{y}-{m}-{d} {h}:{i}') }}{{infoData.eventEndTime?' - '+parseTime(infoData.eventEndTime,'{y}-{m}-{d} {h}:{i}'):'' }}</p>
              </div>
              <div class="text-center-box">
                <p>预警类型：</p>
                <p>预案预警</p>
              </div>
              <div class="text-right-box">
                <p>实验室负责人：</p>
                <p>{{infoData.labSubRelInfoRelVo.adminName}}</p>
              </div>
            </div>
            <div class="text-max-box">
              <div class="text-left-box">
                <p>学院：</p>
                <p>{{infoData.labSubRelInfoRelVo.deptName}}</p>
              </div>
              <div class="text-center-box">
                <p>实验室：</p>
                <p>{{infoData.labSubRelInfoRelVo.subName}}{{infoData.labSubRelInfoRelVo.roomNum?' ('+infoData.labSubRelInfoRelVo.roomNum+')':''}}</p>
              </div>
              <div class="text-right-box">
                <p>安全员：</p>
                <p>{{infoData.safeName}}</p>
              </div>
            </div>
            <div class="text-max-big-box">
              <div class="text-box">
                <p>预警事件：</p>
                <p>{{infoData.eventName}}</p>
              </div>
            </div>
            <p class="top-position-p" :class="infoData.noticeStatus != 0?'position-type':''">
              {{infoData.noticeStatus == 1?'已处理':'待处理'}}
            </p>
          </div>
          <div class="bottom-max-big-box " v-if="infoData.warnType==4">
            <p class="title-p">通知记录</p>
            <div class="table-max-big-box">
              <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border
                        :data="infoData.messageLogVoList">
                <el-table-column label="通知时间" prop="createTime" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="通知人" prop="nickRoleName" show-overflow-tooltip/>
              </el-table>
            </div>
          </div>
          <!--基础信息-->
          <div class="top-max-big-box" v-if="infoData.warnType!=4">
            <p class="title-p">预警信息</p>
            <div class="text-max-box">
              <div class="text-left-box">
                <p>报警时间：</p>
                <p>{{parseTime(infoData.warnTime,'{y}-{m}-{d} {h}:{i}') }}</p>
              </div>
              <div class="text-center-box">
                <p>预警类型：</p>
                <p>{{infoData.warnType==1?'化学品预警':(infoData.warnType==2?'气瓶预警':'算法预警')}}</p>
              </div>
              <div class="text-right-box">
                <p>实验室负责人：</p>
                <p>{{infoData.adminInfo}}</p>
              </div>
            </div>
            <div class="text-max-box">
              <div class="text-left-box">
                <p>学院：</p>
                <p>{{infoData.deptName}}</p>
              </div>
              <div class="text-center-box">
                <p>实验室：</p>
                <p>{{infoData.subName}}{{infoData.roomNum?' ('+infoData.roomNum+')':''}}</p>
              </div>
              <div class="text-right-box">
                <p>安全员：</p>
                <p>{{infoData.safeInfo}}</p>
              </div>
            </div>
            <div class="text-max-box" v-if="infoData.chemicalWarnType==6">
              <div class="text-center-box">
                <p>操作人：</p>
                <p>{{infoData.operationPerson}}</p>
              </div>
              <div class="text-right-box">
                <p>业务类型：</p>
                <p>{{infoData.alarmType}}</p>
              </div>
              <div class="text-right-box">
                <p>化学品柜：</p>
                <p>{{infoData.position}}</p>
              </div>
            </div>
            <div class="text-max-big-box">
              <div class="text-box">
                <p>预警事件：</p>
                <p>{{infoData.warnContent}}</p>
              </div>
            </div>
            <p class="top-position-p" :class="infoData.noticeStatus != 0?'position-type':''">{{infoData.noticeStatus ==
              1?'已处理':'待处理'}}</p>
          </div>
          <!--化学品预警 -->
          <div class="bottom-max-big-box" v-if="infoData.warnType==1  && infoData.chemicalWarnType!=6">
            <p class="title-p">化学品信息</p>
            <!--列表 化学品1化学品违规带离。2超时未归还-->
            <div v-if="infoData.chemicalWarnType==1 || infoData.chemicalWarnType==2">
              <div class="text-max-box">
                <div class="text-center-box">
                  <p style="width:96px;">化学品名称：</p>
                  <p>{{infoData.chemicalName}}</p>
                </div>
                <div class="text-center-box">
                  <p>编码：</p>
                  <p>{{infoData.rfidCode}}</p>
                </div>
                <div class="text-center-box">
                  <p>规格：</p>
                  <p>{{infoData.normsNum}}</p>
                </div>

              </div>
              <div class="text-max-box">
                <div class="text-left-box">
                  <p style="width:96px;">余量：</p>
                  <p>{{infoData.surplus}}</p>
                </div>
                <div class="text-center-box">
                  <p>归属人：</p>
                  <p>{{infoData.belongName}}</p>
                </div>
                <div class="text-right-box">
                  <p>存放位置：</p>
                  <p>{{infoData.position}}层</p>
                </div>
                <!--            <div class="text-center-box" v-if="infoData.chemicalWarnType==2">
                              <p>领用人：</p>
                              <p>{{infoData.collectUserName}}</p>
                            </div>-->
              </div>
            </div>
            <!--列表 化学品3化学品过期。4化学品即将过期-->
            <div class="table-max-big-box" v-if="infoData.chemicalWarnType==3 || infoData.chemicalWarnType==4">
              <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border
                        :data="infoData.chemicalExpireList">
                <el-table-column label="化学品名称" prop="chemicalName" show-overflow-tooltip/>
                <el-table-column label="编码" prop="tagCode" show-overflow-tooltip/>
                <el-table-column label="规格" prop="normsNum" width="180" show-overflow-tooltip/>
                <el-table-column label="余量" prop="surplus" width="180" show-overflow-tooltip/>
                <el-table-column label="归属人" prop="belongName" width="220" show-overflow-tooltip/>
                <el-table-column label="过期时间" prop="expireTime" width="220" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.expireTime,'{y}-{m}-{d} ') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="存放位置" prop="position" width="220" show-overflow-tooltip/>
              </el-table>
            </div>
            <!--列表 化学品3化学品过期。4化学品即将过期-->
            <div class="table-max-big-box" v-if="infoData.chemicalWarnType==5">
              <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border
                        :data="infoData.chemicalOverdueStockList">
                <el-table-column label="化学品名称" prop="chemicalName" width="280" show-overflow-tooltip/>
                <el-table-column label="编码" prop="tagCode" show-overflow-tooltip/>
                <el-table-column label="CAS" prop="casNum" width="180" show-overflow-tooltip/>
                <el-table-column label="类别" prop="chemicalCategory" width="180" show-overflow-tooltip/>
                <el-table-column label="纯度" prop="chemicalPurity" width="180" show-overflow-tooltip/>
                <el-table-column label="规格" prop="normsNum" width="180" show-overflow-tooltip/>
                <el-table-column label="数量" prop="applyNum" width="180" show-overflow-tooltip/>
                <el-table-column label="已入库数量" prop="inStockNum" width="180" show-overflow-tooltip/>
                <el-table-column label="状态" prop="isStock" width="180" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.isStock?'已入库':'超期未入库'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="归属人" prop="belongName" width="220" show-overflow-tooltip/>
                <el-table-column label="学院" prop="deptName" width="220" show-overflow-tooltip/>
                <el-table-column label="实验室" prop="subName" width="220" show-overflow-tooltip/>
                <el-table-column label="类型" prop="source" width="220" show-overflow-tooltip/>
                <el-table-column label="入库期限" prop="createTime" width="220" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!--        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==6">
                      <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border :data="infoData.chemicalTimeoutList">
                        <el-table-column label="化学品名称" prop="chemicalName"  show-overflow-tooltip/>
                        <el-table-column label="编码" prop="tagCode" width="180"  show-overflow-tooltip/>
                        <el-table-column label="CAS" prop="casNum" width="180"  show-overflow-tooltip/>
                        <el-table-column label="类别" prop="chemicalCategoryName" width="180" show-overflow-tooltip/>
                        <el-table-column label="纯度" prop="chemicalPurity" width="180"  show-overflow-tooltip/>
                        <el-table-column label="规格" prop="normsNum"  width="180"  show-overflow-tooltip/>
                        <el-table-column label="余量" prop="surplus"  width="180" show-overflow-tooltip/>
                        <el-table-column label="归属人" prop="belongName" width="220"  show-overflow-tooltip/>
                        <el-table-column label="学院" prop="deptName" width="220"  show-overflow-tooltip/>
                        <el-table-column label="存储位置" prop="position" width="220"  show-overflow-tooltip/>
                      </el-table>
                    </div>-->
          </div>
          <!--气瓶预警 -->
          <div class="bottom-max-big-box" v-if="infoData.warnType==2">
            <p class="title-p">气瓶信息</p>
            <div>
              <div class="text-max-box">
                <div class="text-left-box">
                  <p style="width:96px;">气体名称：</p>
                  <p>{{infoData.airBottleName}}</p>
                </div>
                <div class="text-center-box">
                  <p>规格：</p>
                  <p>{{infoData.normsNum}}</p>
                </div>
                <div class="text-right-box">
                  <p>存放位置：</p>
                  <p>{{infoData.position}}</p>
                </div>
              </div>
              <div class="text-max-box">
                <div class="text-left-box">
                  <p style="width:96px;">余量：</p>
                  <p>{{infoData.surplus}}</p>
                </div>
                <div class="text-center-box">
                  <p>定位状态：</p>
                  <p>{{infoData.posiStatus}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-max-big-box "v-if="infoData.warnType!=4">
            <p class="title-p">通知记录</p>
            <div class="table-max-big-box">
              <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border
                        :data="infoData.warningNoticeLogVoList">
                <el-table-column label="通知时间" prop="createTime" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.noticeTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="通知方式" prop="noticeType" width="180" show-overflow-tooltip/>
                <el-table-column label="报警级别" prop="warningLevel" width="120" show-overflow-tooltip/>
                <el-table-column label="通知人" prop="noticePreson" show-overflow-tooltip/>
              </el-table>
            </div>
          </div>
          <!--化学品/气瓶/算法-->
          <div class="bottom-max-big-box"
               v-if="infoData.noticeStatus !=3  && (infoData.warnType==1 || infoData.warnType==2)">
            <p class="title-p">预警处理</p>
            <div class="text-max-box" v-if="infoData.noticeStatus != 0">
              <div class="text-left-box">
                <p>处理方式：</p>
                <p>
                  {{infoData.handleType==1?'手动处理':(infoData.handleType==2?'归还操作':(infoData.handleType==3?'出库操作':(infoData.handleType==4?'入库操作':'')))}}</p>
              </div>
              <div class="text-center-box">
                <p>处理人：</p>
                <p>{{infoData.handlePerson}}-{{infoData.handlePersonPhone}}</p>
              </div>
              <div class="text-right-box">
                <p>处理时间：</p>
                <p>{{infoData.handleTime}}</p>
              </div>
            </div>
            <div class="text-max-big-box"
                 v-if="(infoData.warnType == 1 &&infoData.chemicalWarnType == 1) || infoData.warnType == 2">
              <div class="text-box">
                <p>处理备注：</p>
                <p>{{infoData.handleNotes}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { notifyplan } from '../../api/http'
  import Header from '@/components/header.vue'

  import {
    systemWarningNoticeDetail,
    iotCameraGetPlaybackURLs,
    laboratoryEventFindByEventId
  } from '@/api/index'

  export default {
    components: {
      Header
    },
    data() {
      return {
        type: null,
        codeData: '',
        //预警信息
        loading: false,
        showType: false,
        infoData: {},
        infoDataForm: {
          noticeId: '',
          handleNotes: ''
        }
      }
    },
    mounted() {
      this.$set(this, 'type', this.$route.query.type)
      this.$set(this, 'codeData', this.$route.query.item)
      this.$nextTick(() => {
        if (this.type == 2) {
          console.log('this.codeData',this.codeData)
          if (this.codeData.warnType == 4) {
            this.laboratoryEventFindByEventId();
          } else {
            this.systemWarningNoticeDetail()
          }
        }
      })
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      //预案详情
      laboratoryEventFindByEventId(){
        laboratoryEventFindByEventId({ eventId: this.codeData.chemicalWarnInfo }).then(response => {
          response.data.warnType=4;
          response.data.safeName='';
          for(let i=0;i<response.data.labSubRelInfoRelVo.safeInnerList.length;i++){
            if(i==0){
              response.data.safeName = response.data.safeName + response.data.labSubRelInfoRelVo.safeInnerList[i].safeName
            }else{
              response.data.safeName = response.data.safeName +','+ response.data.labSubRelInfoRelVo.safeInnerList[i].safeName
            }
          }
          this.$set(this, 'infoData', JSON.parse(JSON.stringify(response.data)))
          console.log('infoData',this.infoData)
        })
      },
      //化学品/气瓶/算法
      systemWarningNoticeDetail() {
        systemWarningNoticeDetail({ id: this.codeData.noticeId }).then(response => {
          this.$set(this, 'infoData', JSON.parse(JSON.stringify(response.data)))
          if (this.infoData.adminInfoList[0]) {
            let list = []
            this.infoData.adminInfoList.forEach(function(item) {
              list.push(item.userName + (item.mobile ? '-' + item.mobile : ''))
            })
            this.infoData.adminInfo = list.join(',')
          }
          if (this.infoData.safeInfoList[0]) {
            let list = []
            this.infoData.safeInfoList.forEach(function(item) {
              list.push(item.userName + (item.mobile ? '-' + item.mobile : ''))
            })
            this.infoData.safeInfo = list.join(',')
          }
          this.$set(this.infoDataForm, 'noticeId', this.propsData.noticeId)
        })
      }
    }

  }
</script>
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .main {
    width: 1920px;
    height: 1080px;
    /* background: url("../img/index_bg.png") no-repeat;
     background-size: 100% 100%;*/
    position: relative;
    left: 0;
    top: 0;
    z-index: 50;
    background: #062338;
    overflow: hidden;
    .main_t {
      width: 1852px;
      height: 975px;
      position: absolute;
      left: 34px;
      top: 86px;
      z-index: 200;
      .main_t_t {
        margin: 20px 0 0 18px;
        > i {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 16px;
        }
        > i:nth-of-type(1) {

        }
        > i:nth-of-type(2) {
          color: #1ED0F8;
        }
      }
      .title {
        width: 100%;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 18px;
        margin-top: 44px;
        text-align: center;
      }
      .main_t_b {
        width: 1852px;
        height: 800px;
        margin-top: 40px;
        padding: 0 390px;
        box-sizing: border-box;
        overflow-y: auto;
        > p {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
          text-indent: 2em;
        }
        .unit {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 16px;
          margin-top: 38px;
          text-align: right;
        }
        .time {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 16px;
          margin-top: 22px;
          text-align: right;
        }
      }
      .content-box {
        margin: 0 auto;
        width: 1690px;
        display: flex;
        flex-direction: column;
        height: 790px;
        overflow-x: hidden;
        overflow-y: scroll;
        .top-max-big-box, .bottom-max-big-box {
          padding: 25px 80px;
          .title-p {
            line-height: 48px;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
          }
          .text-max-box {
            color: #fff;
            display: flex;
            .text-left-box {
              width: 390px;
              display: flex;
              padding: 16px 0;
              p {
                font-size: 16px;
                line-height: 24px;
                /*单行省略号*/
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(1) {
                width: 80px;
                text-align: right;
              }
              p:nth-child(2) {
                flex: 1;
              }
            }
            .text-center-box {
              width: 410px;
              display: flex;
              padding: 16px 0;
              p {
                font-size: 16px;
                line-height: 24px;
                /*单行省略号*/
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(1) {
                width: 90px;
                text-align: right;
              }
              p:nth-child(2) {
                flex: 1;
              }
            }
            .text-right-box {
              width: 610px;
              display: flex;
              padding: 16px 0;
              p {
                font-size: 16px;
                line-height: 24px;
                /*单行省略号*/
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(1) {
                width: 120px;
                text-align: right;
              }
              p:nth-child(2) {
                flex: 1;
              }
            }
          }
          .text-max-big-box {
            display: flex;
            .text-box {
              flex: 1;
              display: flex;
              padding: 16px 0;
              color: #fff;
              p {
                font-size: 16px;
                line-height: 24px;
                /*单行省略号*/
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p:nth-child(1) {
                width: 80px;
                text-align: right;
              }
              p:nth-child(2) {
                flex: 1;
              }
            }
          }
          .img-list-box {
            padding-top: 12px;
            img {
              cursor: pointer;
              display: inline-block;
              width: 130px;
              height: 130px;
              margin-right: 10px;
              margin-bottom: 10px;
            }
          }
          .table-max-big-box {
            padding: 12px 0;
            height: 260px !important;
            display: flex;
            flex-direction: column;
            overflow: hidden;
          }
          .button-bottom-box {
            display: flex;
            p:nth-child(1) {
              flex: 1;
            }
            p:nth-child(2) {
              width: 100px;
            }
            p:nth-child(3) {
              flex: 1;
            }
          }
        }
        .top-max-big-box {
          position: relative;
          .top-position-p {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 40px;
            border-bottom-left-radius: 20px;
            background-color: #FFA200;
            color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
          }
          .position-type {
            background-color: #0183FA;
          }
        }
        .bottom-max-big-box {
          border-top: 1px solid #F5F5F5;
        }
      }
    }

  }
</style>
<style lang="scss">
  li {
    list-style: none
  }

  i, em, b {
    font-style: normal;
    font-weight: 100;
  }

  body {
    margin: 0
  }

  .table-max-big-box {
    .el-table--border {
      border-bottom: 1px solid #ddd !important;
    }
    .table-box-no-height {
      /*border-right:1px solid #DFE6EC;*/
      /*background-color: #333333;*/
      //表头
      th {
        /*background-color: #f5f5f5;*/
        .cell {
          /*color:#333;*/
          font-size: 14px;
          font-weight: 700;
          /*text-align: center;*/
          text-align: left;
        }
      }
      td {
        .cell {
          padding: 0 10px 0 12px;
        }
        div {
          font-size: 14px;
          font-weight: 500;
        }
        //勾选框
        .el-checkbox {
          display: block;
          height: 22px;
          width: 14px;
          margin: 6px auto;
          overflow: hidden;
          span {
            display: block;
            height: 24px;
            width: 14px;
            overflow: hidden;
            span {
              height: 14px;
              width: 14px;
              margin: 0 auto;
            }
          }
        }
      }
      //默认对齐方向
      .cell {
        text-align: left;
      }
      //向左对齐方向
      .is-table-left {
        .cell {
          text-align: left;
        }
      }
      //居中对齐方向
      .is-table-center {
        .cell {
          text-align: center;
        }
      }
      //向右对齐方向
      .is-table-right {
        .cell {
          text-align: right;
        }
      }
      .caret-wrapper {
        height: 20px;
      }
      .sort-caret.ascending {
        top: -3px;
      }
      .sort-caret.descending {
        bottom: -1px;
      }
      .el-table__header-wrapper {
        width: calc(100% - 9px);
        /*border-right:1px solid #F5F5F5;*/
        height: 40px;
        th, td {
          padding: 6px 0;
        }
      }

      .el-table__header-wrapper, .el-table__fixed-header-wrapper {
        th {
          word-break: break-word;
          /*background-color: #f8f8f8;*/
          /*color: #515A6E;*/
          height: 40px;
        }
      }
      .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
        /*color:#333333;*/
        /*background-color:#F5F5F5;*/
        line-height: 20px;
      }
      .el-table__body-wrapper {
        /*background-color: #FFFFFF;*/
        flex: 1;
        overflow-y: scroll !important;
        th, td {
          padding: 6px 0;
        }
        .el-button [class*="el-icon-"] + span {
          margin-left: 1px;
        }
      }
      //表格内switch按钮样式
      .el-switch {
        height: 26px;
        line-height: 26px;
      }
      .switch .el-switch__label {
        position: absolute;
        display: none;
        /*color: #fff !important;*/
      }
      .switch .el-switch__label--right {
        z-index: 1;
      }
      .switch .el-switch__label--right span {
        margin-left: 10px;
      }
      .switch .el-switch__label--left {
        z-index: 1;
      }
      .switch .el-switch__label--left span {
        margin-left: 24px;
      }
      .switch .el-switch__label.is-active {
        display: block;
      }
      .switch.el-switch .el-switch__core,
      .el-switch .el-switch__label {
        width: 64px !important;
        margin: 0;
        height: 26px;
        line-height: 26px;
        border-radius: 14px;
      }
      .el-switch__core:after {
        top: 4px;
        left: 4px;
      }
      .el-switch.is-checked .el-switch__core::after {
        margin-left: -20px;
      }
    }
    //表格滚动条样式
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #D3D7D4;
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #072F46;
      border-radius: 0;
      background: #072F46;
    }
  }
</style>
