lemonBeans_ui/src/views/kaihe/containerNews/boxDistributionStatistics/index.vue

<template>
  <div class="app-container">
    <table class="altrowstable">
      <tr>
        <th rowspan="2" @click="getList">港口</th>
        <th rowspan="2">堆场</th>
        <th></th>
        <th colspan="5">20</th>
        <th colspan="6">40</th>
        <th colspan="2">TOTAL</th>
      </tr>
      <tr>
        <td></td>
        <td>GP</td>
        <td>RF</td>
        <td>OT</td>
        <td>FR</td>
        <td>HC</td>
        <td>GP</td>
        <td>HC</td>
        <td>HR</td>
        <td>OT</td>
        <td>FR</td>
        <td>TK</td>
        <td>UNIT</td>
        <td>TEU</td>
      </tr>
      <tr v-for="(item,index) in tableData" :key="index">
        <td :rowspan="item.number" v-if="item.haven !== false">{{item.haven}}</td>
        <td :rowspan="item.numberSize" v-if="item.address !== false">{{item.address}}</td>
        <td>{{item.opcTnStatus}}</td>
        <td :style="{color:item.twentygp != 0?'red':'#000',fontWeight:item.twentygp != 0?'900':'100'}">{{item.twentygp}}</td>
        <td :style="{color:item.twentyrf != 0?'red':'#000',fontWeight:item.twentyrf != 0?'900':'100'}">{{item.twentyrf}}</td>
        <td :style="{color:item.twentyot != 0?'red':'#000',fontWeight:item.twentyot != 0?'900':'100'}">{{item.twentyot}}</td>
        <td :style="{color:item.twentyfr != 0?'red':'#000',fontWeight:item.twentyfr != 0?'900':'100'}">{{item.twentyfr}}</td>
        <td :style="{color:item.twentytk != 0?'red':'#000',fontWeight:item.twentytk != 0?'900':'100'}">{{item.twentytk}}</td>
        <td :style="{color:item.fortygp != 0?'red':'#000',fontWeight:item.fortygp != 0?'900':'100'}">{{item.fortygp}}</td>
        <td :style="{color:item.fortyhc != 0?'red':'#000',fontWeight:item.fortyhc != 0?'900':'100'}">{{item.fortyhc}}</td>
        <td :style="{color:item.fortyhr != 0?'red':'#000',fontWeight:item.fortyhr != 0?'900':'100'}">{{item.fortyhr}}</td>
        <td :style="{color:item.fortyot != 0?'red':'#000',fontWeight:item.fortyot != 0?'900':'100'}">{{item.fortyot}}</td>
        <td :style="{color:item.fortyfr != 0?'red':'#000',fontWeight:item.fortyfr != 0?'900':'100'}">{{item.fortyfr}}</td>
        <td :style="{color:item.fortytk != 0?'red':'#000',fontWeight:item.fortytk != 0?'900':'100'}">{{item.fortytk}}</td>
        <td :style="{color:item.unit != 0?'red':'#000',fontWeight:item.unit != 0?'900':'100'}">{{item.unit}}</td>
        <td :style="{color:item.teu != 0?'red':'#000',fontWeight:item.teu != 0?'900':'100'}">{{item.teu}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import {listCorps} from '@/api/kaihe/boxDistributionStatistics'

export default {
  name: "index",
  data() {
    return {
      tableData: [],
      list:[],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //查询所有箱信息
    getList() {
      listCorps().then(res => {
        // console.log(res)
        this.list = res.rows
        for (let item in this.list){
          for(let li in this.list[item].boxAddressMessages){
            for (let i in this.list[item].boxAddressMessages[li].boxMessages){
              this.tableData.push({
                haven: i==0&&li==0?this.list[item].haven:false,
                number: i==0&&li==0?this.list[item].number:false,
                numberSize: this.list[item].boxAddressMessages[li].boxMessages.length,
                address: i==0?this.list[item].boxAddressMessages[li].address:false,
                fortyfr: this.list[item].boxAddressMessages[li].boxMessages[i].fortyfr,
                fortygp: this.list[item].boxAddressMessages[li].boxMessages[i].fortygp,
                fortyhc: this.list[item].boxAddressMessages[li].boxMessages[i].fortyhc,
                fortyhr: this.list[item].boxAddressMessages[li].boxMessages[i].fortyhr,
                fortyot: this.list[item].boxAddressMessages[li].boxMessages[i].fortyot,
                fortytk: this.list[item].boxAddressMessages[li].boxMessages[i].fortytk,
                opcTnStatus: this.list[item].boxAddressMessages[li].boxMessages[i].opcTnStatus,
                twentyfr: this.list[item].boxAddressMessages[li].boxMessages[i].twentyfr,
                twentygp: this.list[item].boxAddressMessages[li].boxMessages[i].twentygp,
                twentyot: this.list[item].boxAddressMessages[li].boxMessages[i].twentyot,
                twentyrf: this.list[item].boxAddressMessages[li].boxMessages[i].twentyrf,
                twentytk: this.list[item].boxAddressMessages[li].boxMessages[i].twentytk,
                unit: this.list[item].boxAddressMessages[li].boxMessages[i].unit,
                teu: this.list[item].boxAddressMessages[li].boxMessages[i].teu
              })
            }
          }
        }
      })
    },
  }
}
</script>

<style scoped>
table.altrowstable {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #a9c6c9;
  border-collapse: collapse;
}

table.altrowstable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #a9c6c9;
}

table.altrowstable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  text-align: center;
  border-color: #a9c6c9;
}

.oddrowcolor {
  background-color: #d4e3e5;
}

.evenrowcolor {
  background-color: #c3dde0;
}
</style>