国内出港行李视图+

国内进港行李视图

src/router/routes/routes-file-six.ts

@@ -82,7 +82,7 @@ const HomeRoutes = {
           name: 'ArrivalGoods',
           meta: { title: '国内进港行李视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import('@/views/baggageManagement/departure/goods/index.vue'),
+            import('@/views/baggageManagement/arrival/goods/index.vue'),
         },
       ],
     },

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

@@ -0,0 +1,286 @@
+<template>
+  <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 class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </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>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
+</template>
+
+<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",
+  },
+];
+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" },
+  { 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" },
+];
+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",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
+
+<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;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

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

@@ -176,34 +176,84 @@ const datas1 = [
   },
 ];
 const tableHeader = [
-  { label: "账号组名称", key: "appName" },
-  { label: "账号组描述", key: "appDesc", lableClass: "scoreColumn" },
-  { label: "appId", key: "appId" },
+  { 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" },
 ];
 const tableData = [
   {
     id: 1,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-  {
-    id: 4,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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) => {

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

@@ -1,11 +1,286 @@
 <template>
-  <div>bbb</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 class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </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>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  setup() {},
-});
+<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",
+  },
+];
+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" },
+  { 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" },
+];
+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",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
 </script>
-<style lang="scss" scoped></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;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

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

@@ -176,34 +176,84 @@ const datas1 = [
   },
 ];
 const tableHeader = [
-  { label: "账号组名称", key: "appName" },
-  { label: "账号组描述", key: "appDesc", lableClass: "scoreColumn" },
-  { label: "appId", key: "appId" },
+  { 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" },
 ];
 const tableData = [
   {
     id: 1,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
-  },
-  {
-    id: 4,
-    appName: "11",
-    appId: "22",
-    appDesc: "33",
+    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) => {