修改样式

src/components/steps/index.vue

@@ -10,7 +10,10 @@
       <div :style="{width:item.labelWidth ? item.labelWidth + 'px' : 80 + 'px',transform:`translateX(-${Math.floor(item.labelWidth ? item.labelWidth / 3 : 80 / 3)+3}px)`}" class="node-cap">
         <div class="node-name">{{item.name}}</div>
         <div class="node-info">
-          <div class="node-info-list" v-for="(p,i) in item.children" :key="i">{{p}}</div>
+          <span class="node-info-list" v-for="(p,i) in item.children" :key="i">{{p}}
+            <br v-if="i == 1" />
+            <i v-if="i % 2 == 0">/</i>
+          </span>
         </div>
       </div>
     </div>
@@ -44,13 +47,14 @@ const { datas } = props;
     }
     &-cap {
       text-align: center;
-      margin-top: 15px;
+      margin-top: 10px;
       .node-info-list {
         font-size: 12px;
         font-family: Helvetica;
         font-weight: 400;
         color: #101116;
         margin-top: 3px;
+        display: inline;
       }
     }
   }

src/views/baggageManagement/arrival/goods/index.vue

@@ -26,8 +26,7 @@
       </div>
       <div class="station-list-right">
         <div class="title flex-wrap">
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
+          <div class="title-list">进港: 深圳机场</div>
         </div>
         <Steps :datas="datas1" />
       </div>
@@ -71,32 +70,32 @@ const datas = [
   },
   {
     id: 3,
-    name: "安检",
+    name: "理货",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 4,
-    name: "安检",
+    name: "待运区",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 5,
-    name: "安检",
+    name: "货站交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 6,
-    name: "安检",
-    flag: false,
+    name: "机下交接",
+    flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 7,
-    name: "安检安检",
-    flag: false,
+    name: "装机",
+    flag: true,
     labelWidth: 100,
     children: ["A32", "534件", "通过", "10:25"],
   },
@@ -104,109 +103,97 @@ const datas = [
 const datas1 = [
   {
     id: 1,
-    name: "收货核单",
+    name: "卸机",
     flag: true,
     labelWidth: 100,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 2,
-    name: "安检",
+    name: "机下交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 3,
-    name: "安检",
+    name: "货站交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 4,
-    name: "安检",
-    flag: false,
+    name: "提取",
+    flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
 ];
 const tableHeader = [
   { label: "航班号", key: "fightNo" },
-  { label: "集装器编号", key: "containerNo" },
-  { label: "货物编码", key: "goodsNo" },
-  { label: "拉下", key: "dwon1" },
-  { label: "退运", key: "return" },
-  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
-  { label: "安检", key: "securityCheck" },
-  { label: "理货", key: "tally" },
-  { label: "拉下", key: "dwon2" },
-  { label: "待运区", key: "waitingArea" },
-  { label: "货站交接", key: "goodSstation1" },
-  { label: "机下交接", key: "offBoard1" },
-  { label: "装机", key: "installEquipment" },
-  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
-  { label: "机下交接", key: "offBoard2" },
-  { label: "货站交接", key: "goodSstation2" },
-  { label: "提取", key: "extract" },
+  { label: "航班日期", key: "containerNo" },
+  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
+  { label: "目的航站-预计降落时间", key: "dwon1" },
+  { label: "节点名称", key: "return" },
+  { label: "位置码", key: "receipt" },
+  { label: "位置描述", key: "securityCheck" },
+  { label: "处理时间", key: "tally" },
+  { label: "处理结果", key: "dwon2" },
+  { label: "数据来源", key: "waitingArea" },
+  { label: "设备ID", key: "goodSstation1" },
+  { label: "操作人", key: "offBoard1" },
+  { label: "发往位置", key: "installEquipment" },
+  { label: "发往位置描述", key: "unloading" },
 ];
 const tableData = [
   {
     id: 1,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
   {
     id: 2,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
   {
     id: 3,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
 ];
 const search = (val) => {

src/views/baggageManagement/arrival/waybill/index.vue

@@ -50,7 +50,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 800px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
   </div>
 </template>
@@ -181,18 +181,78 @@ const tableHeader = [
   { label: "货物编码", key: "goodsNo" },
   { label: "拉下", key: "dwon1" },
   { label: "退运", key: "return" },
-  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
-  { label: "安检", key: "securityCheck" },
-  { label: "理货", key: "tally" },
-  { label: "拉下", key: "dwon2" },
-  { label: "待运区", key: "waitingArea" },
-  { label: "货站交接", key: "goodSstation1" },
-  { label: "机下交接", key: "offBoard1" },
-  { label: "装机", key: "installEquipment" },
-  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
-  { label: "机下交接", key: "offBoard2" },
-  { label: "货站交接", key: "goodSstation2" },
-  { label: "提取", key: "extract" },
+  {
+    label: "卸机",
+    key: "unloading",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "机下交接",
+    key: "offBoard2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "货站交接",
+    key: "goodSstation2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "提取",
+    key: "extract",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "收货核单",
+    key: "receipt",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "安检",
+    key: "securityCheck",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "理货",
+    key: "tally",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "拉下",
+    key: "dwon2",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "待运区",
+    key: "waitingArea",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "货站交接",
+    key: "goodSstation1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "机下交接",
+    key: "offBoard1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "装机",
+    key: "installEquipment",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
 ];
 const tableData = [
   {
@@ -210,7 +270,7 @@ const tableData = [
     goodSstation1: "101",
     offBoard1: "102",
     installEquipment: "103",
-    unloading: "104",
+    unloading: "A203/未通过/15:40",
     offBoard2: "105",
     goodSstation2: "106",
     extract: "107",
@@ -255,6 +315,26 @@ const tableData = [
     goodSstation2: "106",
     extract: "107",
   },
+  {
+    id: 4,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
 ];
 const search = (val) => {
   ElMessage.success(`搜索成功：${val}`);
@@ -298,7 +378,7 @@ const clear = () => {
       font-family: Microsoft YaHei;
       font-weight: bold;
       color: #101116;
-      margin-bottom: 28px;
+      margin-bottom: 10px;
       &-list {
         margin-right: 50px;
       }
@@ -316,8 +396,12 @@ const clear = () => {
     }
   }
   :deep &-table {
+    margin-top: 16px;
     .scoreColumn {
-      background: #eef3d6;
+      background: #eef3d6 !important;
+    }
+    .scoreColumn2 {
+      background: #d6e6f3 !important;
     }
   }
 }

src/views/baggageManagement/departure/goods/index.vue

@@ -26,8 +26,7 @@
       </div>
       <div class="station-list-right">
         <div class="title flex-wrap">
-          <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
+          <div class="title-list">进港: 深圳机场</div>
         </div>
         <Steps :datas="datas1" />
       </div>
@@ -71,32 +70,32 @@ const datas = [
   },
   {
     id: 3,
-    name: "安检",
+    name: "理货",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 4,
-    name: "安检",
+    name: "待运区",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 5,
-    name: "安检",
+    name: "货站交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 6,
-    name: "安检",
-    flag: false,
+    name: "机下交接",
+    flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 7,
-    name: "安检安检",
-    flag: false,
+    name: "装机",
+    flag: true,
     labelWidth: 100,
     children: ["A32", "534件", "通过", "10:25"],
   },
@@ -104,109 +103,97 @@ const datas = [
 const datas1 = [
   {
     id: 1,
-    name: "收货核单",
+    name: "卸机",
     flag: true,
     labelWidth: 100,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 2,
-    name: "安检",
+    name: "机下交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 3,
-    name: "安检",
+    name: "货站交接",
     flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
   {
     id: 4,
-    name: "安检",
-    flag: false,
+    name: "提取",
+    flag: true,
     children: ["A32", "534件", "通过", "10:25"],
   },
 ];
 const tableHeader = [
   { label: "航班号", key: "fightNo" },
-  { label: "集装器编号", key: "containerNo" },
-  { label: "货物编码", key: "goodsNo" },
-  { label: "拉下", key: "dwon1" },
-  { label: "退运", key: "return" },
-  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
-  { label: "安检", key: "securityCheck" },
-  { label: "理货", key: "tally" },
-  { label: "拉下", key: "dwon2" },
-  { label: "待运区", key: "waitingArea" },
-  { label: "货站交接", key: "goodSstation1" },
-  { label: "机下交接", key: "offBoard1" },
-  { label: "装机", key: "installEquipment" },
-  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
-  { label: "机下交接", key: "offBoard2" },
-  { label: "货站交接", key: "goodSstation2" },
-  { label: "提取", key: "extract" },
+  { label: "航班日期", key: "containerNo" },
+  { label: "起飞航站-预计起飞时间", key: "goodsNo" },
+  { label: "目的航站-预计降落时间", key: "dwon1" },
+  { label: "节点名称", key: "return" },
+  { label: "位置码", key: "receipt" },
+  { label: "位置描述", key: "securityCheck" },
+  { label: "处理时间", key: "tally" },
+  { label: "处理结果", key: "dwon2" },
+  { label: "数据来源", key: "waitingArea" },
+  { label: "设备ID", key: "goodSstation1" },
+  { label: "操作人", key: "offBoard1" },
+  { label: "发往位置", key: "installEquipment" },
+  { label: "发往位置描述", key: "unloading" },
 ];
 const tableData = [
   {
     id: 1,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
   {
     id: 2,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
   {
     id: 3,
     fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "66",
-    securityCheck: "77",
-    tally: "88",
-    dwon2: "99",
-    waitingArea: "100",
-    goodSstation1: "101",
-    offBoard1: "102",
-    installEquipment: "103",
-    unloading: "104",
-    offBoard2: "105",
-    goodSstation2: "106",
-    extract: "107",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "机下交接",
+    receipt: "A03",
+    securityCheck: "停机位E24",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
   },
 ];
 const search = (val) => {

src/views/baggageManagement/departure/waybill/index.vue

@@ -50,7 +50,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 800px)" :tableHeader="tableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
   </div>
 </template>
@@ -181,18 +181,78 @@ const tableHeader = [
   { label: "货物编码", key: "goodsNo" },
   { label: "拉下", key: "dwon1" },
   { label: "退运", key: "return" },
-  { label: "收货核单", key: "receipt", lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "安检", key: "securityCheck" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "理货", key: "tally" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "拉下", key: "dwon2" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "待运区", key: "waitingArea" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "货站交接", key: "goodSstation1" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "机下交接", key: "offBoard1" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "装机", key: "installEquipment" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
-  { label: "卸机", key: "unloading", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2"},
-  { label: "机下交接", key: "offBoard2", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
-  { label: "货站交接", key: "goodSstation2", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
-  { label: "提取", key: "extract", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
+  {
+    label: "收货核单",
+    key: "receipt",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "安检",
+    key: "securityCheck",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "理货",
+    key: "tally",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "拉下",
+    key: "dwon2",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "待运区",
+    key: "waitingArea",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "货站交接",
+    key: "goodSstation1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "机下交接",
+    key: "offBoard1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "装机",
+    key: "installEquipment",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "卸机",
+    key: "unloading",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "机下交接",
+    key: "offBoard2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "货站交接",
+    key: "goodSstation2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
+  {
+    label: "提取",
+    key: "extract",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+  },
 ];
 const tableData = [
   {
@@ -255,6 +315,26 @@ const tableData = [
     goodSstation2: "106",
     extract: "107",
   },
+  {
+    id: 4,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
 ];
 const search = (val) => {
   ElMessage.success(`搜索成功：${val}`);
@@ -298,7 +378,7 @@ const clear = () => {
       font-family: Microsoft YaHei;
       font-weight: bold;
       color: #101116;
-      margin-bottom: 28px;
+      margin-bottom: 10px;
       &-list {
         margin-right: 50px;
       }
@@ -316,11 +396,12 @@ const clear = () => {
     }
   }
   :deep &-table {
+    margin-top: 16px;
     .scoreColumn {
-      background: #eef3d6!important;
+      background: #eef3d6 !important;
     }
-    .scoreColumn2{
-      background: #D6E6F3!important;
+    .scoreColumn2 {
+      background: #d6e6f3 !important;
     }
   }
 }