<template>
  <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="120px">
    <el-form-item label="管网站" prop="pipelineData">
      <el-tree-select
        v-model="queryParams.pipelineData"
        :data="pipelineList"
        multiple
        collapse-tags
        :default-checked-keys="pipelineDefaultKeys"
        show-checkbox
        popper-class="dialogPopperClass"
        node-key="stCode"
        :render-after-expand="false"
        :props="{ label: 'stName', value: 'stCode' }"
        clearable
        style="width: 250px"
      />
    </el-form-item>

    <el-form-item label="积水点站" prop="waterloggingData">
      <el-select
        filterable
        v-model="queryParams.waterloggingData"
        :clearable="false"
        multiple
        collapse-tags
        placeholder="积水点站"
        popper-class="dialogPopperClass"
        style="width: 400px"
      >
        <template #header>
          <el-checkbox v-model="waterloggingCheckAll" :indeterminate="waterloggingIndeterminate" @change="handleWaterloggingCheckAll">
            <span style="font-size: 16px; color: #ffffff">全选</span>
          </el-checkbox>
        </template>
        <el-option v-for="item in waterloggingList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="雨量站" prop="rainData">
      <el-select
        filterable
        v-model="queryParams.rainData"
        multiple
        :clearable="false"
        collapse-tags
        placeholder="雨量站"
        popper-class="dialogPopperClass"
        style="width: 250px"
      >
        <template #header>
          <el-checkbox v-model="rainCheckAll" :indeterminate="rainIndeterminate" @change="handleRainCheckAll">
            <span style="font-size: 16px; color: #ffffff">全选</span>
          </el-checkbox>
        </template>
        <el-option v-for="item in rainList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
      </el-select>
    </el-form-item>
    <el-form-item label="项目站点" prop="projectData">
      <el-tree-select
        v-model="queryParams.projectData"
        :data="projectList"
        multiple
        collapse-tags
        :default-checked-keys="projectDefaultKeys"
        show-checkbox
        popper-class="dialogPopperClass"
        node-key="stCode"
        :render-after-expand="false"
        :props="{ label: 'stName', value: 'stCode' }"
        clearable
        style="width: 400px"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">下载</el-button>
    </el-form-item>
  </el-form>

  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
    <h1>开封市海绵城市监测数据分析报告</h1>
    <h4>报告时间：</h4>
    <div class="rain_content">
      <!-- 降雨情况说明 -->
      <p class="title">1.降雨情况说明</p>
      <p class="small_title">1.1.降雨情况综述</p>
      <!-- <p class="content">
        降雨等级: {{ selectDictLabel(rainfall_intensity, rainResult.rainLevel) }}。日累计降雨量在{{ rainResult.minRainfall }}-{{
          rainResult.maxRainfall
        }}mm/24h之间。{{ rainResult.minRainStation }}日累计降雨量最小：{{ rainResult.minRainfall }}mm/24h；{{ rainResult.maxRainStation
}}日累计降雨量最大：{{ rainResult.maxRainfall }}mm/24h，详见下表：
      </p>
      <p class="small_tip">各监测站点降雨情况统计表</p>
      <el-table :data="rainResult['rainTable']" class="detailDataTable" style="width:100%;margin:0 auto">
        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
        <el-table-column label="雨量站名称" prop="stName" class="pdf-details" aline="center" width="150px" />
        <el-table-column label="日累计降雨量（mm/24h ）" prop="rainTotol" class="pdf-details" aline="center" />
        <el-table-column label="小时最大降雨量（mm/h）" prop="maxRainData" class="pdf-details" aline="center" />
        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
          <template #default="{ row }">
            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="降雨总历时" prop="rainTodate" class="pdf-details" aline="center" width="130px" />
      </el-table>
      <div class="img_content flex flex-v flex-justcontent-start flex-align-start" v-for="file in rainResult['wholeFiles']">
        <img :src="file.url" class="img_box" />
      </div> -->
      <p class="small_tip">降雨强度分布图</p>
      <!-- 雨量站数据 -->
      <p class="small_title">1.2.各站点降雨情况</p>
      <!-- 雨量站数据 -->
      <div v-for="(item, index) in raindatalist">
        <!-- <p class="small_title">1.2.{{ Number(index) + 1 }}.{{ item.stName }}</p>
        <p class="small_title">1.2.{{ Number(index) + 1 }}.1监测点位置</p>
        <div class="img_content" v-for="file in item.stationFiles">
          <img :src="file.url" class="img_box" />
          <p class="small_tip">{{ item.stName }}监测点位置示意图</p>
        </div>
        <p class="small_title">1.2.{{ Number(index) + 1 }}.2雨量详情</p>
        <p class="content circle">降雨时间段{{ item.rainStartTime }}开始至{{ item.rainEndTime }}结束，总历时{{
          item.rainTodate }};</p>
        <p class="content circle">日累计降雨量{{ item.rainTotol }}mm/24h;</p>
        <p class="content circle">降雨等级: {{ selectDictLabel(rainfall_intensity, item.rainLevel) }};</p>
        <p class="content circle">最大小时降雨量：{{ item.maxRainData }}mm/h（{{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd
        }}）。</p> -->
        <!-- echarts降雨趋势图 -->
        <!-- <div :id="`chartOneBG_${item.stCode}`" class="chartOneBG rainChart"></div>
        <p class="small_tip">{{ item.stationName }}降雨趋势图</p> -->
      </div>
    </div>
    <!-- 积水点部分 -->
    <div class="logging_content">
      <p class="title">2.内涝/积水情况分析</p>
      <p class="small_title">2.1.内涝/积水情况综述</p>
      <p class="content">本场降雨，共计发生积水情况次，内涝情况次，详情见下表：</p>
      <p class="small_tip">监测点位积水情况统计表</p>
      <!-- <el-table :data="waterLoggingResultDto['waterloggingTableList']" class="detailDataTable" style="width: 100%; margin: 0 auto">
        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
        <el-table-column label="监测站点名称" prop="stName" class="pdf-details" aline="center" />
        <el-table-column label="最大积水深度（cm）" prop="maxPongdingdepth" class="pdf-details" aline="center" width="120px" />
        <el-table-column label="最大积水深度发生时刻" prop="maxPongdingTime" class="pdf-details" aline="center" />
        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
          <template #default="{ row }">
            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="累计积水时长" prop="pongdingDuration" class="pdf-details" aline="center" width="110px" />
        <el-table-column label="类型" prop="stType" class="pdf-details" aline="center" width="90px" />
      </el-table>
      <div class="img_content" v-for="file in waterLoggingResultDto['stFiles']">
        <img :src="file.url" class="img_box" />
      </div> -->
      <p class="small_tip">内涝/积水分布图</p>
      <p class="small_title">2.2.各内涝/积水情况</p>
      <!-- 易涝点数据 -->
      <div v-for="(item, index) in loggingdatalist">
        <!-- <p class="small_title">2.2.{{ Number(index) + 1 }}{{ item.stName }}</p> -->
        <!-- echarts降雨量、水位 -->
        <!-- <div :id="`LoggingJYLSWChartOneBG_${item.stCode}`" class="chartOneBG"></div>
        <p class="small_tip">降雨量/水位趋势图</p>
        <p class="content circle">最大积水深度：{{ item.maxPongdingdepth }}cm;</p>
        <p class="content circle">最大积水深度发生时刻：{{ item.maxPongdingTime }};</p>
        <p class="content circle">累计积水时长：{{ item.pongdingDuration }};</p>
        <p class="content circle">积水原因：{{ item.pongdingReason }};</p>
        <p class="content circle">解决措施：{{ item.measures }}。</p> -->
      </div>
    </div>
    <!-- 管网数据 -->
    <div class="pipeline_content">
      <p class="title">3.排水设施运行状态分析</p>
      <!-- <div class="img_content flex flex-v flex-justcontent-start flex-align-start">
        <img :src="item.url" class="img_box" v-for="item in pipePicCCLFile" />
      </div> -->

      <!-- <div v-for="(item, index) in pipeResult['totPipeAreasInfoList']"> -->
      <!-- <p class="small_title">3.{{ Number(index) + 1 }}.{{ item.areasName }}</p>
        <p class="small_title">3.1.{{ Number(index) + 1 }}.{{ item.areasName }}排水设施运行状态综述</p>
        <p class="small_title">3.1.1.{{ Number(index) + 1 }}.管网部分</p>
        <p class="content">外水汇入点位：{{ item.pipebufen.wshrCount }}处，{{ item.pipebufen.wshrStr }}</p>
        <p class="content">运行负荷过大点位：{{ item.pipebufen.yxfhdCount }}处，{{ item.pipebufen.yxfhdStr }}</p>
        <p class="content">行泄不畅点位：{{ item.pipebufen.xxbcCount }}处，{{ item.pipebufen.xxbcStr }}</p>
        <p class="content">流速过缓点位：{{ item.pipebufen.lshmCount }}处，{{ item.pipebufen.lshmStr }}</p> -->
      <p class="small_tip">管网运行状态统计表</p>
      <!-- <el-table :data="item.pipebufen.pipeTableInfoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
          <el-table-column label="监测点位" prop="stName" class="pdf-details" aline="center" />
          <el-table-column label="管径" prop="pipeDiameter" class="pdf-details" aline="center" />
          <el-table-column label="24h累计排水量（m³）" prop="sblSum24" class="pdf-details" aline="center" />
          <el-table-column label="降雨时段累计排水量（m³）" prop="rainSumDistance" class="pdf-details" aline="center" />
          <el-table-column label="降雨时段平均排水量（m³）" prop="rainAvgDistance" class="pdf-details" aline="center" />
          <el-table-column label="最大水深（m）" prop="maxZ" class="pdf-details" aline="center" />
          <el-table-column label="平均流速(m/s)" prop="avgFlow" class="pdf-details" aline="center" />
          <el-table-column label="最大流速（m/s）" prop="maxFlow" class="pdf-details" aline="center" />
          <el-table-column label="旱天水位占比" prop="clearDayRate" class="pdf-details" aline="center" />
        </el-table> -->
      <!-- <p class="small_title">2.1.2.仓程路雨水泵站设备运行日志</p>
        <p class="small_tip">表 3-2仓程路雨水泵站设备运行日志</p>
        <el-table :data="levelData" class="detailDataTable" style="width:100%;margin:0 auto">
          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
          <el-table-column label="1#泵" prop="type" class="pdf-details" aline="center" />
          <el-table-column label="2#泵" prop="24Rail" class="pdf-details" aline="center" />
          <el-table-column label="3#泵" prop="12Rail" class="pdf-details" aline="center" />
          <el-table-column label="4#泵" prop="12Rail" class="pdf-details" aline="center" />
        </el-table>
        <p class="content">
          仓程路问题点共计十处，主要问题是运行负荷过大、行泄不畅等问题，问题分布示意图详见图3-1：
        </p>
        <img src="@/assets/images/mewOneMap/haiMianJianShe/demo.jpg" class="img_box" />
        <p class="small_tip">图 3-1仓程路片区问题分布示意图</p> -->

      <p class="small_title">2.2.2.典型问题说明</p>
      <!-- <div v-for="(child, index1) in item['typicalProblems']['dxwtList']"> -->
      <!-- <p class="small_title">2.2.2.{{ Number(index1) + 1 }}.{{ child.stName }}问题说明</p> -->
      <!-- echarts 降雨量、流量 -->
      <!-- <div :id="`JYLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
      <!-- <p class="small_tip">{{ item.pipelineFlowStartTime }}至{{ item.pipelineFlowEndTime }}降雨量-流量变化过程图</p> -->
      <p class="small_tip">管网、流量情况分布图</p>
      <!-- echarts 水位、流量 -->
      <!-- <div :id="`SWLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
      <!-- <p class="small_tip">{{ item.pipelineTimeStart }}至{{ item.pipelineTimeEnd }}间水位-流量变化过程图</p> -->
      <!-- <p class="small_tip">管网流量、水位变化趋势图</p> -->
      <!-- <p class="content">24h累计排水量：{{ child.sblSum24 }}m³</p> -->
      <!-- <p class="content">降雨时段累计排水量：{{ child.rainSumDistance }}m³</p> -->
      <!-- <p class="content">平均流速:{{ child.avgFlow }}m/s</p> -->
      <!-- <p class="content">退水时长：{{ child.diffInHours }}h</p> -->
      <!-- <p class="content">管网问题：{{ child.questionDesc }}</p> -->
      <!-- <p class="content">此次降雨事件降雨量{{ item.pipelineRain }}mm，属于{{ item.pipelinerainlevel }}事件。从{{
        item.pipelineFlowStartTime }}开始，{{ item.pipelineFlowEndTime }}结束。监测期间发生产流。监测时间段内的平均流量
        为{{ item.pipelineavgflow }}m³/h，累计排水量为{{ item.pipelinedrainage }}m³。</p> -->
      <!-- </div> -->
      <!-- </div> -->
    </div>

    <!-- 项目数据 -->
    <div class="project_content">
      <p class="title">5.海绵项目及设施达标情况分析</p>
      <p class="small_title">5.1.项目</p>
      <p class="small_title">5.1.1.项目整体情况</p>
      <p class="content">监测项目目前存在管道淤积、雨污分流不彻底、安装点位导致数据不全等问题，具体分析情况如表5-1：</p>
      <p class="small_tip">各个监测项目达标情况分析表</p>
      <!-- <el-table :data="projectJlDtoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
        <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
        <el-table-column label="项目名称" prop="projectName" class="pdf-details" aline="center" />
        <el-table-column label="设计降雨量（mm）" prop="designRain" class="pdf-details" aline="center" />
        <el-table-column label="实际控制雨量（mm）" prop="trueRain" class="pdf-details" aline="center">
          <template #default="{ row }">
            <span v-if="row.trueRain == '异常'">雨前出流</span>
            <span v-else>{{ row.trueRain }}mm </span>
          </template>
        </el-table-column>
        <el-table-column label="年径流总量控制率设计值（%）" prop="ghJlzlkzl" class="pdf-details" aline="center" />
        <el-table-column label="典型降雨径流总量控制率实际值（%）" prop="jlzlkzl" class="pdf-details" aline="center" />
        <el-table-column label="分析结果" prop="conclusion" class="pdf-details" aline="center" />
      </el-table> -->

      <p class="small_title">5.1.2.数据异常项目分析</p>
      <!-- <div v-for="(item, index) in projectdatalist"> -->
      <!-- <p class="small_title">5.{{ Number(index) + 1 }}.3{{ item.stationName }}</p> -->
      <!-- <p class="content">为了解{{ item.stationName }}海绵改造项目建设成效，对{{ item.stationName }}进行监测，监测点位位置如图5-1所示： -->
      <!-- </p> -->
      <!-- <div class="img_content" v-for="file in item.fileList">
          <img :src="file.url" class="img_box" />
        </div> -->
      <!-- <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p>
        <p class="content">{{ item.stationName }}设计降雨量{{ item.designRain }}mm，降雨期间基本未出流，详见表5-2：</p>
        <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p> -->
      <div class="table_content_box">
        <div class="header">基础信息</div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">监测时间段</div>
          <!-- <div class="basic_val flex flex-1">{{ item.projectRainStartTime }}至{{ item.projectRainEndTime }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">降雨总量（mm）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.projectRain }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">项目占地面积（㎡）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.projectArea }}</div> -->
        </div>
        <div class="header">水质水量监测</div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">项目外排总径流体积（m³）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzjjtj }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">项目外排总SS负荷量（g）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzssfhl }}</div> -->
        </div>
        <div class="header">设计指标</div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">设计降雨量</div>
          <!-- <div class="basic_val flex flex-1">{{ item.designRain }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.ghJlzlkzl }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.ghJlwrxjl }}</div> -->
        </div>
        <div class="header">效果评价</div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">实际控制雨量（mm）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.trueRain }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.jlzlkzl }}</div> -->
        </div>
        <div class="basic_detail flex flex-r">
          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
          <!-- <div class="basic_val flex flex-1">{{ item.jlwrxjl }}</div> -->
        </div>
      </div>
      <p class="content">详见下图：</p>
      <!-- echarts降雨量、流量 -->
      <!-- <div :id="`projectJYLLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
      <!-- echarts 流量、悬浮物固体浓度 -->
      <!-- <div :id="`projectLLXFWChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
      <!-- echarts水位、流量 -->
      <!-- <div :id="`projectSWLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
      <!-- <p class="small_tip">{{ item.stationName }}降雨量/流量、流量/SS、水位/SS变化过程图</p> -->
      <!-- <p class="content">现场排查情况见图5-3：</p> -->
      <!-- <div class="img_content" v-for="file in item['sceneFileList']"> -->
      <!-- <img :src="file.url" class="img_box" /> -->
      <!-- </div> -->
      <p class="small_tip">总出口积水情况现场验证</p>
    </div>
    <p class="title">6.总结</p>
    <p class="content">
      此次降雨，监测到降雨等级为，发现路面积水点共计处：排水设施问题集中在管网流速过缓（水力坡度问题）、外水汇入、行泄不畅、水力停留时间过长等问题南塬来水在本次降雨情况下，对城区影响不大，海绵项目建设在补齐监测点位的情况下，需要加快海绵项目建设进度，加强海绵项目运维运维。
    </p>
  </div>
</template>
<script setup>
const showLoading = ref(false);
const loadingText = ref('正在加载中...');
const queryParams = ref({
  pipelineData: [],
  waterloggingData: [],
  rainData: [],
  projectData: [],
});
const Formrules = reactive({
  pipelineData: [{ required: true, message: '请至少选择一个管网站', trigger: ['change'] }],
  waterloggingData: [{ required: true, message: '请至少选择一个积水点站', trigger: ['change'] }],
  rainData: [{ required: true, message: '请至少选择一个雨量站', trigger: ['change'] }],
  projectData: [{ required: true, message: '请至少选择一个项目站点', trigger: ['change'] }],
});
onMounted(() => {});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.reportDetail {
  width: 100%;
  background: #fff;
  color: #333;
  margin-bottom: 30px;

  .waterlogImg {
    flex-wrap: wrap;

    .part {
      width: 18%;
      margin-left: 10px;
      margin-bottom: 10px;
      text-align: center;

      img {
        width: 100%;
        height: 150px;
      }

      p {
        line-height: 20px;
      }
    }
  }

  #chartOneBG,
  .chartOneBG,
  #chartOneBG2,
  #chartOneBG3,
  #chartOneBG4 {
    width: 100%;
    height: 300px;
  }

  h1 {
    text-align: center;
    color: #c03639;
    font-size: 28px;
    letter-spacing: 5px;
  }

  h4 {
    color: #c03639;
    border-bottom: 3px solid #c03639;
    padding: 10px 0px;
    text-align: right;
  }

  .title {
    font-weight: bold;
    margin: 10px 0px;
    font-size: 21px;
    font-family: '宋体', 'SimSun', sans-serif;
  }

  .small_title {
    font-weight: bold;
    margin: 10px 0px;
    font-size: 15px;
    font-family: '宋体', 'SimSun', sans-serif;
  }

  .content {
    text-indent: 28px;
    font-size: 14px;
    line-height: 30px;
    font-family: '宋体', 'SimSun', sans-serif;
  }

  .circle {
    position: relative;

    &:after {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      content: '';
      background: #7b7b7b;
      left: 8px;
      top: 50%;
    }
  }

  .small_tip {
    text-align: center;
    font-weight: bold;
    margin: 10px 0px;
  }
}

.table_content_box {
  width: 70%;
  margin: 10px auto;
  color: #000;
  border: 1px solid #00314e !important;

  .header {
    text-align: center;
    border-bottom: 0.00521rem solid #00314e !important;
    color: #000;
    font-weight: bolder;
    border-right: none !important;
    position: static !important;
    background-color: #dee1e6 !important;
    height: 0.20833rem !important;
    line-height: 0.20833rem !important;
    font-size: 0.06771rem;
  }

  .basic_label {
    text-align: center;
    border-bottom: 1px solid #00314e !important;
    border-right: none !important;
    position: static !important;
    height: 38px;
    border-right: 1px solid #00314e !important;
  }

  .basic_val {
    text-align: center;
    border-bottom: 1px solid #00314e !important;
    border-right: none !important;
    position: static !important;
    height: 38px;
  }
}

.img_content {
  max-width: 90%;

  .img_box {
    width: 80%;
  }
}

.reportDetail {
  .detailDataTable {
    margin-bottom: 10px !important;
  }

  ::v-deep(.el-table) {
    --el-table-border-color: $mainColor1 !important;
    --el-table-bg-color: $mainColor1 !important;

    .el-table__body {
      border-bottom: 1px solid #333 !important;
    }

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        word-break: break-word;
        background-color: #dee1e6 !important;
        height: 40px !important;
        font-size: 13px;
      }
    }

    .el-table__body-wrapper {
      background-color: #004770 !important;

      .el-button [class*='el-icon-'] + span {
        margin-left: 1px;
      }

      td.el-table-fixed-column--right {
        background: #00314e !important;
      }
    }

    tr {
      background-color: #f8f8f9 !important;
    }

    tr:nth-of-type(odd) {
      background-color: #fff !important;
    }

    tr:hover > td {
      background-color: #f5f7fa !important;
    }

    th.el-table__cell,
    td.el-table__cell {
      text-align: center;
      border-bottom: 1px solid #00314e !important;
      color: #000;
      border-right: none !important;
      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
    }

    .el-table__empty-block {
      background-color: #fff !important;

      .el-table__empty-text {
        color: #c6c6c6 !important;
      }
    }

    .el-button {
      border: none !important;
      background: none !important;

      &:hover {
        background: none !important;
        transform: scale(1.01);
      }
    }
  }
}

::v-deep(.el-loading-spinner) {
  position: fixed;
  top: 420px !important;
  left: 0;
}
</style>