wasteInfo.vue 3.4 KB
<script src="../../permission.js"></script>
<template>
  <div class="app-body">
    <div class="content">
      <table>
        <tr>
          <th colspan="4" style="margin:0 auto;text-align: center">危险废物</th>
        </tr>
        <tr>
          <td colspan="2">废物名称:{{ wasteData.wasteName }}</td>
          <td rowspan="6">
            <div style="display: flex;flex-direction: column;align-items: center;height: 100%;">
              <div style="font-size: 1rem;">危险特性</div>
              <img style="width: 15vw;" src="../../assets/waste2.png" alt=""/>
              <img style="width: 15vw;margin: 5px 0;" src="../../assets/waste3.png" alt=""/>
              <img v-if="type=='1'" style="width: 15vw;" src="../../assets/waste1.png" alt=""/>
            </div>
          </td>
        </tr>

        <tr>
          <td>废物类别: {{ wasteData.wasteType }}</td>
        </tr>
        <tr>
          <td>废物代码: {{ wasteData.wasteCode }}</td>
        </tr>
        <tr>
          <td>废物形态: {{ wasteData.wasteForm }}</td>
        </tr>
        <tr style="word-break:break-all;overflow:hidden;">
          <td>主要成分: <br/>{{ wasteData.mainComponent }}</td>
        </tr>
        <tr style="word-break:break-all;overflow:hidden;">
          <td>有害成分: <br/>{{ wasteData.harmfulIngredient }}</td>
        </tr>
        <tr style="word-break:break-all;overflow:hidden;">
          <td colspan="4">注意事项: <br/>{{ wasteData.announcements }}</td>
        </tr>
        <tr style="word-break:break-all;overflow:hidden;">
          <td colspan="4">数字识别码: {{ wasteData.numericIdentificationCode }}</td>
        </tr>
        <tr>
          <td colspan="4">产生/收集单位 : {{ wasteData.produceUnit }}</td>
        </tr>
        <tr>
          <td colspan="4">
            联系人:{{ wasteData.contactPerson }}<br/>
            联系方式:{{ wasteData.contactPhone }}
          </td>
        </tr>
        <tr>
          <td colspan="4">产生日期:{{ wasteData.createTime }}</td>
        </tr>
        <tr>
          <td colspan="4">废物重量: {{ wasteData.wasteWeight }}/kg</td>
        </tr>
        <tr style="word-break:break-all;overflow:hidden;">
          <td colspan="4">备注: {{ wasteData.remark }}</td>
        </tr>
        <tr style="height: 80px;word-break:break-all;overflow:hidden;">
          <td colspan="4">转出记录: <br/>{{ wasteData.details }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import {getWasteInfo} from '@/api/api';

export default {
  name: "wasteInfo",
  data() {
    return {
      id: '',
      type: '',
      wasteData: []
    }
  },
  created() {
    var params = {};
    location.search.substr(1).split('&').forEach(function (item) {
      var s = item.split('=');
      params[s[0]] = s[1];
      params[s[1]] = s[2];
    });
    this.id = params.id
    this.type = params.type
    let params2 = {
      'id': this.id
    }
    getWasteInfo(params2).then(res => {
      this.wasteData = res.result;
    })
  }
}
</script>

<style scoped>
.app-body {
  width: 100%;
  height: 100%;
}

.content {
  width: 99.1%;
  height: 100%;
  border: 1px solid yellowgreen;
  margin: 0 auto;
  background-color: #ec9627;
}

body {
  font-size: 1rem;
}

table,
td,
th {
  border-collapse: collapse;
  border-spacing: 0;
}

table {
  width: 100%;
  margin-top: 10px;
}

td,
th {
  border: 2px solid #000000;
  padding: 5px 10px;
}
</style>