vent-template/src/views/vent/monitorManager/deviceMonitor/staticSheets/dustSheet.vue

<template>
  <div class="sheet-bg">
    <div class="sheet-bg-inner">
      <table class="sheet-content">
        <colgroup>
          <col width="16" style="width: 9.75pt" span="28" />
          <col width="31" style="width: 18.9pt" />
          <col width="16" style="width: 9.75pt" span="23" />
        </colgroup>
        <tbody>
          <tr height="30">
            <td colspan="52" class="et29 bg0">防尘参数</td>
          </tr>
          <tr height="30">
            <td colspan="3" rowspan="6" class="bg1">煤尘有爆炸性</td>
            <td colspan="15" class="et21">掘进除尘</td>
            <td colspan="34" class="et21">ZGJFH30、ZGJFH55煤矿井下自动隔爆装置</td>
          </tr>
          <tr height="30">
            <td colspan="4" class="et22">除尘箱</td>
            <td colspan="11" class="et22">KCG-350/500D</td>
            <td colspan="10" class="et22">安装位置</td>
            <td colspan="12" class="et22">工作原理</td>
            <td colspan="12" rowspan="5" class="et22">ZGJFH30：Z-装置、G-隔爆、J-机械式、F-粉剂、H-巷道、30-粉剂量30KG</td>
          </tr>
          <tr height="30">
            <td colspan="4" class="et22">风机</td>
            <td colspan="11" class="et22">2×30/37KW</td>
            <td colspan="10" rowspan="2" class="et22">盘区大巷、工作面顺槽</td>
            <td colspan="12" rowspan="4" class="et3">爆炸冲击波冲击触发装置，启动主体装置喷射干粉灭火剂扑灭火焰。</td>
          </tr>
          <tr height="30">
            <td colspan="15" rowspan="3" class="et3">KCG-500D：K-矿用、C-除尘、G-干式、500-处理风量、D-电动。</td>
          </tr>
          <tr height="30">
            <td colspan="10" rowspan="2" class="et22">采掘工作面60~200m内</td>
          </tr>
          <tr height="20"> </tr>
        </tbody>
      </table>
      <table class="sheet-content">
        <colgroup>
          <col width="190" style="width: 114pt" />
          <col width="205" style="width: 123pt" />
          <col width="262" style="width: 157.5pt" />
          <col width="305" style="width: 183pt" />
        </colgroup>
        <tbody>
          <tr height="50">
            <td class="et2 bg1">掘进队名称</td>
            <td class="et2 bg1">除尘风箱型号</td>
            <td class="et2 bg1">除尘风机型号</td>
            <td class="et2 bg1">压入式风机型号</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚一队</td>
            <td class="et2">KCG500D</td>
            <td class="et2">FBCD.NO.6.7-2×37</td>
            <td class="et2">FBD--NO.8.0-2×75</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚二队</td>
            <td class="et2">KCG500D</td>
            <td class="et2">FBCD.NO.6.7-2×37</td>
            <td class="et2">FBDY--NO.7.1-2×45</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚三队</td>
            <td class="et2">KCG350D</td>
            <td class="et2">FBCD.NO.6.7-2×37</td>
            <td class="et2">FBD--NO.7.5-2×45</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚五队</td>
            <td class="et2">KCG500D</td>
            <td class="et2">FBCD.NO.6.7-2×37</td>
            <td class="et2">FBDY--NO.7.1-2×45</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚六队</td>
            <td class="et2">KCG500D</td>
            <td class="et2">FBCD.NO.7.1-2×30</td>
            <td class="et2">FBDY--NO.7.1-2×45</td>
          </tr>
          <tr height="50">
            <td class="et2">掘锚七队</td>
            <td class="et2">KCG350D</td>
            <td class="et2">FBCD.NO.7.1-2×37</td>
            <td class="et2">FBDY--NO.7.1-2×45</td>
          </tr>
          <tr height="50">
            <td class="et2">综掘六队</td>
            <td colspan="2" class="et2">KCS1000DZ</td>
            <td class="et2">FBDY--NO.6.3-2×30</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // 转换工具 https://www.lingdaima.com/table/
</script>
<style lang="less" scoped>
  @import url('/@/design/theme.less');
  @{theme-green} {
    .sheet-bg {
      --sheet-bg: url(/@/assets/images/themify/green/vent/sheet-bg.png);
      --sheet-header: url(/@/assets/images/themify/green/vent/sheet-header.png);
    }
  }
  @{theme-deepblue} {
    .sheet-bg {
      --sheet-bg: url(/@/assets/images/themify/deepblue/vent/sheet-bg.png);
      --sheet-header: url(/@/assets/images/themify/deepblue/vent/sheet-header.png);
    }
  }

  .sheet-bg {
    --sheet-bg: url(/@/assets/images/vent/sheet-bg.png);
    --sheet-header: url(/@/assets/images/vent/sheet-header.png);
    width: 100%;
    height: 92%;
    background-image: var(--sheet-bg);
    background-size: 98% 98%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    padding: 50px 0;
  }
  .sheet-bg-inner {
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
  }
  .sheet-content {
    width: 1260px;
    border-spacing: 0;
    color: #fff;
    margin: 0 auto;
    text-align: center;
  }
  .bg0 {
    width: 100%;
    height: 73px;
    font-size: 20px;
    background-image: var(--sheet-header);
    background-size: 100% 73px;
    background-repeat: no-repeat;
    border: none;
  }
  .bg1 {
    background-image: @vent-configurable-dropdown;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: @vent-table-action-link;
  }
  .bg2 {
    width: 100%;
    height: 93px;
    font-size: 20px;
    background-image: var(--sheet-header);
    background-size: 100% 73px;
    background-repeat: no-repeat;
    background-position: bottom;
    border: none;
    padding-top: 20px;
  }
  table td {
    border: 1px solid @vent-gas-tab-border;
    font-size: 13px;
    padding: 5px;
  }
</style>