国际视图

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

@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table :tableHeader="tableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
   </div>
 </template>

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

@@ -20,7 +20,6 @@
         <div class="title flex-wrap">
           <div class="title-list">航班号CA1001</div>
           <div class="title-list">出港: 深圳机场</div>
-          <div class="title-list">日期：2022/09/10</div>
         </div>
         <Steps :datas="datas" />
       </div>
@@ -32,7 +31,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table :tableHeader="tableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
     </div>
   </div>
 </template>
@@ -142,6 +141,7 @@ const tableHeader = [
   { label: "操作人", key: "offBoard1" },
   { label: "发往位置", key: "installEquipment" },
   { label: "发往位置描述", key: "unloading" },
+  { label: "集装器编号", key: "demo" },
 ];
 const tableData = [
   {
@@ -152,7 +152,7 @@ const tableData = [
     dwon1: "PEK-14:35",
     return: "机下交接",
     receipt: "A03",
-    securityCheck: "停机位E24",
+    securityCheck: "A区03闸口",
     tally: "2022/09/10 07:10",
     dwon2: "通过",
     waitingArea: "人工扫描",
@@ -160,6 +160,7 @@ const tableData = [
     offBoard1: "张伯伦",
     installEquipment: "B12",
     unloading: "货站B12闸口",
+    demo: "DOU2329U2",
   },
   {
     id: 2,
@@ -169,7 +170,7 @@ const tableData = [
     dwon1: "PEK-14:35",
     return: "机下交接",
     receipt: "A03",
-    securityCheck: "停机位E24",
+    securityCheck: "A区03闸口",
     tally: "2022/09/10 07:10",
     dwon2: "通过",
     waitingArea: "人工扫描",
@@ -177,6 +178,7 @@ const tableData = [
     offBoard1: "张伯伦",
     installEquipment: "B12",
     unloading: "货站B12闸口",
+    demo: "DOU2329U2",
   },
   {
     id: 3,
@@ -186,7 +188,7 @@ const tableData = [
     dwon1: "PEK-14:35",
     return: "机下交接",
     receipt: "A03",
-    securityCheck: "停机位E24",
+    securityCheck: "A区03闸口",
     tally: "2022/09/10 07:10",
     dwon2: "通过",
     waitingArea: "人工扫描",
@@ -194,6 +196,7 @@ const tableData = [
     offBoard1: "张伯伦",
     installEquipment: "B12",
     unloading: "货站B12闸口",
+    demo: "DOU2329U2",
   },
 ];
 const search = (val) => {

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

@@ -1,7 +1,272 @@
 <template>
-  <div></div>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">货物基本信息</div>
+      <div class="station-head-content flex-wrap">
+        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">货物跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "货物编码",
+    value: "56888829",
+  },
+  {
+    id: 2,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 3,
+    name: "运单类型",
+    value: "国际普货",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "理货",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "待运区",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "货站交接",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "入园",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "装机",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "卸机",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "入园",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "货站交接",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    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" },
+  { 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: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+    &-content {
+      &-list {
+        margin-right: 100px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      flex: 1;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

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

@@ -1,7 +1,357 @@
 <template>
-  <div></div>
+  <div class="station scroll-y">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 0,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 1,
+    name: "运单类型",
+    value: "国际普货",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "航班号", key: "fightNo" },
+  { label: "货物编码", key: "goodsNo" },
+  { label: "中转", key: "dwon1" },
+  { label: "退运", key: "containerNo" },
+  { 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",
+  },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "Y",
+    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",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "Y",
+    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",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "Y",
+    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",
+  },
+  {
+    id: 4,
+    fightNo: "CA1001",
+    containerNo: "Y",
+    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}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 10px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      flex: 1;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6 !important;
+    }
+    .scoreColumn2 {
+      background: #d6e6f3 !important;
+    }
+  }
+}
+</style>

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

@@ -1,7 +1,274 @@
 <template>
-  <div></div>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">货物基本信息</div>
+      <div class="station-head-content flex-wrap">
+        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">货物跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "货物编码",
+    value: "56888829",
+  },
+  {
+    id: 2,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 3,
+    name: "运单类型",
+    value: "国际普货",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "理货",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "待运区",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "货站交接",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "入园",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "装机",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "卸机",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "入园",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "货站交接",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    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" },
+  { 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" },
+  { label: "集装器编号", key: "demo" },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "2022/9/10",
+    goodsNo: "SZX-11:35",
+    dwon1: "PEK-14:35",
+    return: "入园",
+    receipt: "A03",
+    securityCheck: "A区03闸口",
+    tally: "2022/09/10 07:10",
+    dwon2: "通过",
+    waitingArea: "人工扫描",
+    goodSstation1: "56",
+    offBoard1: "张伯伦",
+    installEquipment: "B12",
+    unloading: "货站B12闸口",
+    demo: "DOU2329U2",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+    &-content {
+      &-list {
+        margin-right: 100px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      flex: 1;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

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

@@ -1,7 +1,381 @@
 <template>
-  <div></div>
+  <div class="station scroll-y">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 0,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 1,
+    name: "运单类型",
+    value: "国际普货",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    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",
+    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: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "机下交接",
+    key: "offBoard2",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+  {
+    label: "提取",
+    key: "goodSstation2",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+  },
+];
+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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 10px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      flex: 1;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6 !important;
+    }
+    .scoreColumn2 {
+      background: #d6e6f3 !important;
+    }
+  }
+}
+</style>