1

src/views/securityCheck/components/securityCheckTable.vue

@@ -6,12 +6,12 @@
   >
     <a-table
       ref="table"
-      :data="data"
-      stripe
-      fit
-      border
+      :data-source="tableData"
+      :columns="tableCols"
+      stripeed
+      fited
+      bordered
       height="100%"
-      :show-summary="showSummary"
     >
       <template v-if="withSelection">
         <a-table-column type="selection" width="35" />
@@ -112,6 +112,12 @@ export default {
 <style lang="scss" scoped>
 .security-check-table-wrapper {
   width: 100%;
+  ::v-deep .ant-table-column-title {
+    font-size: 14px;
+    font-family: Helvetica, "Microsoft YaHei";
+    color: #101116;
+    font-weight: bold;
+  }
   ::v-deep .ant-table {
     width: 100%;
     .ant-table__cell {

src/views/securityCheck/views/cargoRelevanceTable.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="table-wrapper">
-    <header
-      ref="tableWrapperHeader"
-      class="table-header-wrapper"
-    >
+    <header ref="tableWrapperHeader" class="table-header-wrapper">
       <SecurityCheckHeader
         title="航空货物关联统计"
         @change="changeHandler"
@@ -22,163 +19,191 @@
 </template>
 
 <script>
-import SecurityCheckHeader from '../components/securityCheckHeader.vue'
-import SecurityCheckTable from '../components/securityCheckTable.vue'
+import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import SecurityCheckTable from "../components/securityCheckTable.vue";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      tableHeight: '50vh',
+      tableHeight: "50vh",
       tableCols: [
         {
-          prop: 'destination',
-          label: '目的地'
+          title: "目的地",
+          dataIndex: "destination",
+          key: "destination",
         },
         {
-          prop: 'totalCount',
-          label: '总件数'
+          dataIndex: "totalCount",
+          key: "totalCount",
+          title: "总件数",
         },
         {
-          prop: 'highRisk',
-          label: '高风险货物等级',
+          dataIndex: "highRisk",
+          key: "highRisk",
+          title: "高风险货物等级",
           children: [
             {
-              prop: 'highRiskCount',
-              label: '件数'
+              dataIndex: "highRiskCount",
+              key: "highRiskCount",
+              title: "件数",
             },
             {
-              prop: 'highRiskRatio',
-              label: '占比'
-            }
-          ]
+              dataIndex: "highRiskRatio",
+              key: "highRiskRatio",
+              title: "占比",
+            },
+          ],
         },
         {
-          prop: 'lowRisk',
-          label: '低风险货物等级',
+          dataIndex: "lowRisk",
+          key: "lowRisk",
+          label: "低风险货物等级",
           children: [
             {
-              prop: 'lowRiskCount',
-              label: '件数'
+              dataIndex: "lowRiskCount",
+              key: "lowRiskCount",
+              title: "件数",
             },
             {
-              prop: 'lowRiskRatio',
-              label: '占比'
-            }
-          ]
+              dataIndex: "lowRiskRatio",
+              key: "lowRiskRatio",
+              title: "占比",
+            },
+          ],
         },
         {
-          prop: 'priority',
-          label: '优先级',
+          dataIndex: "priority",
+          key: "priority",
+          prop: "priority",
+          title: "优先级",
           children: [
             {
-              prop: 'priorityCount',
-              label: '件数'
+              dataIndex: "priorityCount",
+              key: "priorityCount",
+              prop: "priorityCount",
+              title: "件数",
             },
             {
-              prop: 'priorityRatio',
-              label: '占比'
-            }
-          ]
+              dataIndex: "priorityRatio",
+              key: "priorityRatio",
+              prop: "priorityRatio",
+              title: "占比",
+            },
+          ],
         },
         {
-          prop: 'normal',
-          label: '普通级',
+          dataIndex: "normal",
+          key: "normal",
+          prop: "normal",
+          title: "普通级",
           children: [
             {
-              prop: 'normalCount',
-              label: '件数'
+              dataIndex: "normalCount",
+              key: "normalCount",
+              prop: "normalCount",
+              title: "件数",
             },
             {
-              prop: 'normalRatio',
-              label: '占比'
-            }
-          ]
+              dataIndex: "normalRatio",
+              key: "normalRatio",
+              prop: "normalRatio",
+              title: "占比",
+            },
+          ],
         },
         {
-          prop: 'strict',
-          label: '严控级',
+          dataIndex: "strict",
+          key: "strict",
+          prop: "strict",
+          title: "严控级",
           children: [
             {
-              prop: 'strictCount',
-              label: '件数'
+              dataIndex: "strictCount",
+              key: "strictCount",
+              prop: "strictCount",
+              title: "件数",
             },
             {
-              prop: 'strictRatio',
-              label: '占比'
-            }
-          ]
-        }
+              dataIndex: "strictRatio",
+              key: "strictRatio",
+              prop: "strictRatio",
+              title: "占比",
+            },
+          ],
+        },
       ],
       tableData: [
         {
-          destination: 'CTU',
+          destination: "CTU",
           totalCount: 20000,
           highRiskCount: 14000,
-          highRiskRatio: '70%',
+          highRiskRatio: "70%",
           lowRiskCount: 1000,
-          lowRiskRatio: '5%',
+          lowRiskRatio: "5%",
           priorityCount: 2000,
-          priorityRatio: '10%',
+          priorityRatio: "10%",
           normalCount: 2000,
-          normalRatio: '10%',
+          normalRatio: "10%",
           strictCount: 1000,
-          strictRatio: '5%'
+          strictRatio: "5%",
         },
         {
-          destination: 'PEK',
+          destination: "PEK",
           totalCount: 20000,
           highRiskCount: 14000,
-          highRiskRatio: '70%',
+          highRiskRatio: "70%",
           lowRiskCount: 1000,
-          lowRiskRatio: '5%',
+          lowRiskRatio: "5%",
           priorityCount: 2000,
-          priorityRatio: '10%',
+          priorityRatio: "10%",
           normalCount: 2000,
-          normalRatio: '10%',
+          normalRatio: "10%",
           strictCount: 1000,
-          strictRatio: '5%'
+          strictRatio: "5%",
         },
         {
-          destination: 'NZH',
+          destination: "NZH",
           totalCount: 20000,
           highRiskCount: 14000,
-          highRiskRatio: '70%',
+          highRiskRatio: "70%",
           lowRiskCount: 1000,
-          lowRiskRatio: '5%',
+          lowRiskRatio: "5%",
           priorityCount: 2000,
-          priorityRatio: '10%',
+          priorityRatio: "10%",
           normalCount: 2000,
-          normalRatio: '10%',
+          normalRatio: "10%",
           strictCount: 1000,
-          strictRatio: '5%'
-        }
-      ]
-    }
+          strictRatio: "5%",
+        },
+      ],
+    };
   },
   mounted() {
-    this.setTableHeight()
-    window.addEventListener('resize', this.setTableHeight)
+    this.setTableHeight();
+    window.addEventListener("resize", this.setTableHeight);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setTableHeight)
+    window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
     changeHandler() {
       this.$router.push({
-        path: './cargoCharts'
-      })
+        path: "./cargoCharts",
+      });
     },
     searchHandler(arr) {
-      console.log(arr)
+      console.log(arr);
     },
     setTableHeight() {
-      const topBarHeight = 80
-      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
-      const footerBlackHeight = 24
-      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
-    }
-  }
-}
+      const topBarHeight = 80;
+      const headerHeight = this.$refs["tableWrapperHeader"].offsetHeight;
+      const footerBlackHeight = 24;
+      this.tableHeight = `calc(100vh - ${
+        topBarHeight + headerHeight + footerBlackHeight
+      }px)`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/securityCheck/views/cargoTable.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="table-wrapper">
-    <header
-      ref="tableWrapperHeader"
-      class="table-header-wrapper"
-    >
+    <header ref="tableWrapperHeader" class="table-header-wrapper">
       <SecurityCheckHeader
         title="航空货物综合统计"
         @change="changeHandler"
@@ -22,127 +19,130 @@
 </template>
 
 <script>
-import SecurityCheckHeader from '../components/securityCheckHeader.vue'
-import SecurityCheckTable from '../components/securityCheckTable.vue'
+import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import SecurityCheckTable from "../components/securityCheckTable.vue";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      tableHeight: '50vh',
+      tableHeight: "50vh",
       tableCols: [
         {
-          prop: 'index',
-          label: '序号'
+          prop: "index",
+          title: "序号",
+          key: "name",
         },
         {
-          prop: 'level',
-          label: '等级'
+          prop: "level",
+          title: "等级",
         },
         {
-          prop: 'cargoCount',
-          label: '货物件数'
+          prop: "cargoCount",
+          title: "货物件数",
         },
         {
-          prop: 'unpackCount',
-          label: '开箱件数',
+          prop: "unpackCount",
+          title: "开箱件数",
           clickHandler: () => {
             this.$router.push({
-              path: '/waybillTable'
-            })
-          }
+              path: "/waybillTable",
+            });
+          },
         },
         {
-          prop: 'unpackResult',
-          label: '开箱结果',
+          prop: "unpackResult",
+          title: "开箱结果",
           children: [
             {
-              prop: 'release',
-              label: '放行'
+              prop: "release",
+              title: "放行",
             },
             {
-              prop: 'reject',
-              label: '拒运'
+              prop: "reject",
+              title: "拒运",
             },
             {
-              prop: 'turnOver',
-              label: '移交'
-            }
-          ]
-        }
+              prop: "turnOver",
+              title: "移交",
+            },
+          ],
+        },
       ],
       tableData: [
         {
           index: 1,
-          level: '高风险等级',
+          name: "高风险等级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 2,
-          level: '严控级',
+          name: "严控级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 3,
-          level: '普通级',
+          name: "普通级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 4,
-          level: '优先级',
+          name: "优先级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 5,
-          level: '低风险等级',
+          name: "低风险等级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
-        }
-      ]
-    }
+          turnOver: 2,
+        },
+      ],
+    };
   },
   mounted() {
-    this.setTableHeight()
-    window.addEventListener('resize', this.setTableHeight)
+    this.setTableHeight();
+    window.addEventListener("resize", this.setTableHeight);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setTableHeight)
+    window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
     changeHandler() {
       this.$router.push({
-        path: './cargoStatistics'
-      })
+        path: "./cargoStatistics",
+      });
     },
     searchHandler(arr) {
-      console.log(arr)
+      console.log(arr);
     },
     setTableHeight() {
-      const topBarHeight = 80
-      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
-      const footerBlackHeight = 24
-      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
-    }
-  }
-}
+      const topBarHeight = 80;
+      const headerHeight = this.$refs["tableWrapperHeader"].offsetHeight;
+      const footerBlackHeight = 24;
+      this.tableHeight = `calc(100vh - ${
+        topBarHeight + headerHeight + footerBlackHeight
+      }px)`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>