CKQ/src/views/goaf/info/components/detail.vue

<template>
  <el-drawer
    title="采空区信息详情"
    :modal-append-to-body="false"
    :modal="false"
    :wrapper-closable="false"
    size="50%"
    :visible.sync="dialogVisible"
  >
    <div class="descriptions-body">
      <table class="descriptions">
        <tr>
          <td class="lable">矿带</td>
          <td class="cont">{{ NumConvertLM(viewData.goafOrebelt) | isEmpty }}</td>
          <td class="lable">矿体</td>
          <td class="cont">{{ NumConvertLM(viewData.goafOrebody) | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">中段</td>
          <td class="cont">{{ viewData.goafOreheight | isEmpty }}</td>
          <td class="lable">采空区编号</td>
          <td class="cont">{{ viewData.goafName | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">水平断面均暴露面积（㎡）</td>
          <td class="cont">{{ viewData.goafAvexArea | isEmpty }}</td>
          <td class="lable">平均倾向宽度</td>
          <td class="cont">{{ viewData.goafAvinWidth | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">平均暴露高度（m）</td>
          <td class="cont">{{ viewData.goafAvexHeight==0?'已填充':viewData.goafAvexHeight | isEmpty }}</td>
          <td class="lable">体积（m³）</td>
          <td class="cont">{{ viewData.goafVoidVolume==0?'已填充':viewData.goafVoidVolume | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">倾向（度）</td>
          <td class="cont">{{ viewData.goafKeyTrend | isEmpty }}</td>
          <td class="lable">倾角（度）</td>
          <td class="cont">{{ viewData.goafKeyDipangle | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">顶板矿柱厚度（m）</td>
          <td class="cont">{{ viewData.goafRoofpillarThickness | isEmpty }}</td>
          <td class="lable">保安间柱平均厚度（m）</td>
          <td class="cont">{{ viewData.goafIncoavThickness | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">勘探位置</td>
          <td class="cont">{{ viewData.goafExpLocation | isEmpty }}</td>
          <td class="lable">围岩岩性</td>
          <td class="cont">{{ viewData.goafRockLithology | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">围岩稳定性</td>
          <td class="cont">{{ viewData.goafRockStability | isEmpty }}</td>
          <td class="lable">形成时间</td>
          <td class="cont">{{ viewData.goafFormationTime | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">可充填体积（m³）</td>
          <td class="cont">{{ viewData.goafCanfillVolume | isEmpty }}</td>
          <td class="lable">剩余可充填体积（m³）</td>
          <td class="cont">{{ viewData.goafRemainVolume | isEmpty }}</td>
        </tr>
        <tr>
          <td class="lable">充填方式</td>
          <td class="cont">{{ viewData.goafFillMethod==0?'废石':'尾矿' }}</td>
          <td class="lable">是否充填</td>
          <td class="cont">{{ viewData.goafIsFill==0?'是':'否' }}</td>
        </tr>
        <tr>
          <td class="lable">备注</td>
          <td class="cont">{{ viewData.goafInfoRemak | isEmpty }}</td>
        </tr>
      </table>
    </div>
  </el-drawer>
</template>
<script>
import { NumConvertLM, isEmpty } from '@/utils'
export default {
  name: 'GoafInfoDetail',
  filters: {
    isEmpty(val) {
      if (isEmpty(val)) {
        return '--'
      }
      return val
    }
  },
  data() {
    return {
      dialogVisible: false,
      viewData: {
        'goafOrebelt': '',
        'goafOrebody': '',
        'goafOreheight': '',
        'goafName': '',
        'goafAvexArea': '',
        'goafAvinWidth': '',
        'goafAvexHeight': '',
        'goafVoidVolume': '',
        'goafKeyTrend': '',
        'goafKeyDipangle': '',
        'goafRoofpillarThickness': '',
        'goafIncoavThickness': '',
        'goafExpLocation': '',
        'goafRockLithology': '',
        'goafRockStability': '',
        'goafFormationTime': '',
        'goafCanfillVolume': '',
        'goafRemainVolume': '',
        'goafFillMethod': '',
        'goafIsFill': '',
        'goafInfoRemak': ''
      }
    }
  },
  methods: {
    NumConvertLM,
    showDetailModel(data) {
      this.dialogVisible = true
      this.viewData = data
    }
  }
}
</script>
<style lang="scss" sc>
.descriptions-body{
    padding: 20px;
    table{
      width: 100%;
      color: #fff;
      border-collapse:collapse;
      &.descriptions{
        .lable{
          width: 25%;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.2);
          border-width: 1px 0px 0px 1px;
          border-style: solid;
          border-color: rgba(255, 255, 255, 0.08);
          line-height: 40px;
          padding-left: 8px;
        }
        .cont{
          width: 25%;
          box-sizing: border-box;
          border: 1px solid rgba(255, 255, 255, 0.08);
          line-height: 40px;
          padding-left: 8px;
        }
      }
    }
}
</style>