提交箱分布

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

@@ -1,23 +1,99 @@
 <template>
-  <div class="app-container"><el-button type="primary" @click="getList">主要按钮</el-button></div>
+  <div class="app-container">
+    <table class="altrowstable">
+      <tr>
+        <th rowspan="2">港口</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>TK</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>{{item.twentygp}}</td>
+        <td>{{item.twentyrf}}</td>
+        <td>{{item.twentyot}}</td>
+        <td>{{item.twentyfr}}</td>
+        <td>{{item.twentytk}}</td>
+        <td>{{item.fortygp}}</td>
+        <td>{{item.fortyhc}}</td>
+        <td>{{item.fortyhr}}</td>
+        <td>{{item.fortyot}}</td>
+        <td>{{item.fortyfr}}</td>
+        <td>{{item.fortytk}}</td>
+        <td>{{item.unit}}</td>
+        <td>{{item.teu}}</td>
+      </tr>
+    </table>
+  </div>
 </template>
 
 <script>
-import { listCorps } from '@/api/kaihe/boxDistributionStatistics'
+import {listCorps} from '@/api/kaihe/boxDistributionStatistics'
+
 export default {
   name: "index",
-  data(){
-    return{
-
+  data() {
+    return {
+      tableData: [],
+      list:[],
     }
   },
-  created(){
+  created() {
     this.getList()
   },
-  methods:{
-    getList(){
-      listCorps().then(res =>{
+  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){
+              console.log(this.list[item].haven)
+              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,
+                teu: this.list[item].boxAddressMessages[li].boxMessages[i].teu,
+                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,
+              })
+            }
+          }
+        }
+        console.log(this.tableData)
       })
     },
   }
@@ -25,5 +101,36 @@ export default {
 </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>

src/views/kaihe/containerNews/boxInformation/index.vue

@@ -522,7 +522,8 @@
               <span>
                 <el-select v-model="form.fBoxTurtleMonth" slot="prepend" style="width: 80%;" placeholder="请选择" :disabled="doNot">
                 <el-option
-                    v-for="(item) in month"
+                    v-for="(item,index) in month"
+                    :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
               </el-select>
@@ -780,6 +781,12 @@
             :show-overflow-tooltip="true"
             label="箱损描述">
         </el-table-column>
+        <el-table-column
+            prop="portName"
+            align="center"
+            :show-overflow-tooltip="true"
+            label="港口名称">
+        </el-table-column>
       </el-table>
       <span slot="footer" class="dialog-footer">
     <el-button @click="importDynamicsopen = false">取 消</el-button>
@@ -1214,6 +1221,8 @@ export default {
       if (file.code === 200){
         this.importDynamicsopen = true
         this.tableData = file.data
+      }else if (file.code === 500) {
+        this.$message.error(file.msg);
       }
     },
     downloadBoxTemplate(){