实时视图对接口

public/demo.js

@@ -149,7 +149,16 @@ const DATACONTENT_ID = {
   arrivalAirport: 1803448, // 国内进港航站
   internationalArrivalAirport: 1803449, // 国际进港航站
   flightInfo: 100001, // 航班基础信息
-  flightContainer: 100002,
+  flightContainer: 100002, // 航班容器列表
+  flightWaybill: 100003, // 航班运单列表
+  waybillInfo: 100004, // 运单基础信息
+  waybillAirline: 100005, // 运单航段
+  waybillTrack: 100006, // 运单节点跟踪
+  waybillGoods: 100007, // 运单货物列表
+  goodsInfo: 100008, // 货物基础信息
+  goodsAirline: 100009, // 货物航段
+  goodsTrack: 100010, // 货物节点跟踪
+  goodsFlight: 100011, // 货物航班跟踪
 
   /***-----统计分析------***/
   stOrderId: 18012,

src/components/SimpleTable/index.vue

@@ -25,7 +25,7 @@
     <el-table-column
       v-for="column in tableColumns"
       :key="column.columnName"
-      v-bind="{ ...columnProps, ...column }"
+      v-bind="computedColumnProps(column)"
     >
       <template #header>
         <TableHeaderCell
@@ -226,6 +226,17 @@ const tableProps = computed(() => {
   return result
 })
 
+const computedColumnProps = computed(() => {
+  const defaultColumnProps: TableColumnProps<CommonData> = {
+    align: 'center',
+  }
+  return (column: CommonTableColumn & TableColumnProps<CommonData>) => ({
+    ...defaultColumnProps,
+    ...props.columnProps,
+    ...column,
+  })
+})
+
 const tableColumns = ref<CommonTableColumn[]>([])
 const tableData = ref<CommonData[]>([])
 watchEffect(() => {
@@ -272,7 +283,48 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-:deep.el-table {
+.el-table :deep {
+  .el-table__cell {
+    padding: 0;
+    height: 40px;
+    &.cell-filter {
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 1;
+      }
+      &.cell-filter-yellow::before {
+        opacity: 0.47;
+        background-color: #eef3d6;
+      }
+      &.cell-filter-green::before {
+        opacity: 0.73;
+        background-color: #eef3d6;
+      }
+      &.cell-filter-cyan::before {
+        opacity: 0.73;
+        background-color: #d6e6f3;
+      }
+      .cell {
+        position: relative;
+        z-index: 2;
+      }
+    }
+    .cell {
+      padding: 0;
+      font-size: 14px;
+      color: #101116;
+      font-family: Helvetica, Microsoft YaHei;
+      &:not(.el-tooltip) {
+        white-space: pre-line;
+      }
+    }
+  }
   .el-table__header .el-table__cell {
     background: #ffffff;
     font-weight: bold;
@@ -284,19 +336,10 @@ defineExpose({
     .el-table__row--striped .el-table__cell {
       background-color: #f0f3f7;
     }
-    .el-table__cell.cell-click {
+    .el-table__cell.cell-click .cell {
       color: #2d67e3;
       cursor: pointer;
     }
   }
-  .el-table__cell {
-    padding: 0;
-    height: 40px;
-    font-size: 14px;
-    color: #101116;
-    .cell {
-      padding: 0;
-    }
-  }
 }
 </style>

src/components/steps/index.vue

@@ -1,18 +1,36 @@
 <template>
   <div class="steps flex">
-    <div v-for="(item,index) in datas" :key="index" class="node">
-      <div v-if="item.flag" class="node-status-success">
+    <div v-for="(step, index) in steps" :key="index" class="node">
+      <div v-if="step.flag" class="node-status-success">
         <span class="icon"></span>
       </div>
       <div v-else class="node-status-default"></div>
-      <div v-if="item.flag && datas.length != index+1" class="node-status-success-line"></div>
-      <div v-if="!item.flag && datas.length != index+1" class="node-status-default-line"></div>
-      <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
+        v-if="step.flag && steps.length != index + 1"
+        class="node-status-success-line"
+      ></div>
+      <div
+        v-if="!step.flag && steps.length != index + 1"
+        class="node-status-default-line"
+      ></div>
+      <div
+        :style="{
+          width: step.labelWidth ? step.labelWidth + 'px' : 60 + 'px',
+          transform: `translateX(-${
+            step.labelWidth ? step.labelWidth / 3 : 60 / 3
+          }px)`,
+        }"
+        class="node-cap"
+      >
+        <div class="node-name">{{ step.name }}</div>
         <div class="node-info">
-          <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
+            class="node-info-list"
+            v-for="(p, i) in step.descriptions"
+            :key="i"
+            >{{ p }}<br />
+            <!-- <br v-if="i == 1" /> -->
+            <!-- <i v-if="i % 2 == 0">/</i> -->
           </span>
         </div>
       </div>
@@ -21,13 +39,21 @@
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+
+type StepData = {
+  name: string
+  flag: boolean
+  labelWidth?: number
+  descriptions: string[]
+}
+
 const props = defineProps({
-  datas: {
-    type: Array,
+  steps: {
+    type: Array as PropType<StepData[]>,
     default: () => [],
   },
-});
-const { datas } = props;
+})
 </script>
 
 <style lang="scss" scoped>
@@ -48,13 +74,16 @@ const { datas } = props;
     &-cap {
       text-align: center;
       margin-top: 10px;
-      .node-info-list {
-        font-size: 12px;
-        font-family: Helvetica;
-        font-weight: 400;
-        color: #101116;
-        margin-top: 3px;
-        display: inline;
+      .node-info {
+        display: flex;
+        flex-direction: column;
+        &-list {
+          font-size: 12px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: 400;
+          color: #101116;
+          margin-top: 8px;
+        }
       }
     }
   }
@@ -106,4 +135,4 @@ const { datas } = props;
     z-index: 1;
   }
 }
-</style>
+</style>

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

@@ -53,8 +53,7 @@ const ActualTimeRoutes = {
                   path: '/realTime/departure/flight',
                   name: 'DepartureFlightView',
                   component: () =>
-                    // import('@/views/realTime/departure/flight/index.vue'),
-                    import('@/views/realTime/departure/flight/test.vue'),
+                    import('@/views/realTime/departure/flight/index.vue'),
                 },
                 {
                   path: '/realTime/departure/waybill',

src/views/realTime/arrival/airport/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AirportView airport-view-name="arrival" />
+  <AirportView name="arrival" />
 </template>
 
 <script setup lang="ts">

src/views/realTime/arrival/flight/index copy.vue

@@ -0,0 +1,420 @@
+<template>
+  <div class="pageBody">
+    <div class="pageTop">
+      <div class="flightInfo">
+        <div class="airLine">{{ airLine }}</div>
+        <div class="info">
+          <div class="infoBox">
+            <div>起飞机场简称：南京机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 19 : 30 : 25</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>特货信息/货物数：</div>
+            <div>卸载运单数/货物数：</div>
+            <div>中转进运单/货物数：</div>
+            <div>已卸载运单/货物数：</div>
+            <div>卸载数量（板/箱/卡）：</div>
+            <div>货站交接数量（板/箱/卡）：</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>降落机场简称： 深圳机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+            <div>停机位：012</div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="container">
+        <tableTemp
+          ref="domeTable"
+          :tableHeader="state.tableHeader"
+          :tableProperty="{ rowKey: 'ID',showSummary:true }"
+          :tableData="tableData"
+          @load="loadMore"
+          @cellClass="test"
+        ></tableTemp>
+      </div> -->
+    </div>
+    <div class="tableTopBtn">
+      <TBtnGroup
+        v-model:flag="state.UTCFlag"
+        @columnSet="columnSet"
+        @downLoad="downLoad"
+        @refresh="refresh"
+      ></TBtnGroup>
+      <Search @clear="clear" @search="search" />
+    </div>
+    <div class="waybillList">
+      <tableTemp
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
+    </div>
+    <tableColumnSet
+      :dialogVisible="state.dialogVisible"
+      :columnList="state.waybillTableHeader"
+      @setColumn="setColumn"
+      @closeDialog="closeDialog"
+    ></tableColumnSet>
+  </div>
+</template>
+<script setup lang="ts">
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
+import { Query } from '@/api/webApi'
+
+const state = reactive({
+  tableHeader: [
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px' },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+  ],
+  waybillTableHeader: [
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
+  ],
+  listLoading: true,
+  UTCFlag: true,
+  dialogVisible: false,
+})
+
+const waybilltableData = ref([
+  {
+    waybillNo: '32535234445',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '未通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+])
+
+const airLine = ref('SZX - CA4120 - NKG')
+const tableData = ref([
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+])
+
+const setError = () => {
+  waybilltableData.value.map(item => {
+    if (item.cljg == '未通过') {
+      item['rowClass'] = 'alarm'
+    }
+  })
+}
+
+const domeTable = ref(null)
+const test = row => {
+  if (row.column.property === 'score' && row.row.score > 80) {
+    domeTable.value.cellClass = 'warn'
+  } else {
+    domeTable.value.cellClass = ''
+  }
+}
+
+const loadMore = data => {
+  // setError()
+  // queryData()
+  // console.log(data)
+}
+
+//清空搜索
+const clear = data => {
+  console.log(data)
+}
+
+//点击搜索按钮
+const search = data => {
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh = data => {
+  console.log(data)
+}
+
+//点击下载按钮
+const downLoad = data => {
+  console.log(data)
+}
+
+//点击列设置按钮
+const columnSet = data => {
+  state.dialogVisible = true
+}
+
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
+}
+
+const closeDialog = data => {
+  state.dialogVisible = false
+}
+
+const queryData = async () => {
+  return new Promise((resolve, reject) => {
+    let data = {
+      dataContent: [],
+      id: 16,
+    }
+    Query(data)
+      .then(res => {
+        if (res.code === 200) {
+          //commit('SET_Token', res.data?.jwtToken)
+          console.log(res)
+        } else {
+          reject(res)
+        }
+      })
+      .catch((error: any) => {
+        reject(error)
+      })
+  })
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'waybillNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+        query: {
+          waybillNo: row.waybillNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageTop {
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flightInfo {
+      height: 100%;
+      flex: 1;
+      background: #410425;
+      box-sizing: border-box;
+      padding: 18px 32px;
+      display: flex;
+      flex-direction: column;
+      .airLine {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        justify-items: center;
+        width: 100%;
+        max-width: 1050px;
+        flex: 1;
+        .infoBox {
+          width: calc(33.3% - 10px);
+          background: #561638;
+          padding: 10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 30px;
+        }
+        .iconBox {
+          display: flex;
+          flex-direction: column;
+          width: 60px;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .container {
+      width: 760px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+  .tableTopBtn {
+    height: 72px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .waybillList {
+    width: 100%;
+    flex: 1;
+  }
+}
+:deep.el-table .nodeHeader {
+  background: #eef3d6;
+}
+:deep.el-table .columnClassName {
+  background: #eef3d6 !important;
+}
+:deep.el-table .alarm {
+  background: #f38080 !important;
+}
+</style>

src/views/realTime/arrival/flight/index.vue

@@ -1,420 +1,7 @@
 <template>
-  <div class="pageBody">
-    <div class="pageTop">
-      <div class="flightInfo">
-        <div class="airLine">{{ airLine }}</div>
-        <div class="info">
-          <div class="infoBox">
-            <div>起飞机场简称：南京机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 19 : 30 : 25</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>特货信息/货物数：</div>
-            <div>卸载运单数/货物数：</div>
-            <div>中转进运单/货物数：</div>
-            <div>已卸载运单/货物数：</div>
-            <div>卸载数量（板/箱/卡）：</div>
-            <div>货站交接数量（板/箱/卡）：</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>降落机场简称： 深圳机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 22 : 25 : 25</div>
-            <div>停机位：012</div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="container">
-        <tableTemp
-          ref="domeTable"
-          :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID',showSummary:true }"
-          :tableData="tableData"
-          @load="loadMore"
-          @cellClass="test"
-        ></tableTemp>
-      </div> -->
-    </div>
-    <div class="tableTopBtn">
-      <TBtnGroup
-        v-model:flag="state.UTCFlag"
-        @columnSet="columnSet"
-        @downLoad="downLoad"
-        @refresh="refresh"
-      ></TBtnGroup>
-      <Search @clear="clear" @search="search" />
-    </div>
-    <div class="waybillList">
-      <tableTemp
-        ref="domeTable"
-        :tableHeader="state.waybillTableHeader"
-        :tableProperty="{ showSummary: true }"
-        :tableData="waybilltableData"
-        @load="loadMore"
-        @cellClass="test"
-        @cell-click="cellClickHandler"
-      ></tableTemp>
-    </div>
-    <tableColumnSet
-      :dialogVisible="state.dialogVisible"
-      :columnList="state.waybillTableHeader"
-      @setColumn="setColumn"
-      @closeDialog="closeDialog"
-    ></tableColumnSet>
-  </div>
+  <FlightView name="ArrivalFlight" />
 </template>
-<script setup lang="ts">
-import tableTemp from '@/components/tableTemp/index.vue'
-import TBtnGroup from '@/components/TBtnGroup/index.vue'
-import tableColumnSet from '@/components/tableColumnSet/index.vue'
-import Search from '@/components/search/index.vue'
-import { CaretRight } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
-import { Query } from '@/api/webApi'
-
-const state = reactive({
-  tableHeader: [
-    {
-      columnLabel: '集装器编号',
-      columnName: 'containerNo',
-      width: '120px',
-      needShow: true,
-    },
-    {
-      columnLabel: '运单数',
-      columnName: 'waybillCount',
-      width: '60px',
-      needShow: true,
-    },
-    { columnLabel: '件数', columnName: 'count', width: '60px' },
-    {
-      columnLabel: '理货',
-      columnName: 'lh',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '拉下',
-      columnName: 'lx',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '待运区',
-      columnName: 'dyq',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '货站交接',
-      columnName: 'hzjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '机下交接',
-      columnName: 'jxjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '装机',
-      columnName: 'zj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-  ],
-  waybillTableHeader: [
-    {
-      columnLabel: '运单号',
-      columnName: 'waybillNo',
-      width: '120px',
-      needShow: true,
-      columnClassName: 'cell-click',
-    },
-    { columnLabel: '品名', columnName: 'pm', needShow: true },
-    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
-    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
-    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
-    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
-    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
-    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
-    {
-      columnLabel: '处理时间',
-      columnName: 'clsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
-    {
-      columnLabel: '中转航班降落时间',
-      columnName: 'zzhbsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
-  ],
-  listLoading: true,
-  UTCFlag: true,
-  dialogVisible: false,
-})
-
-const waybilltableData = ref([
-  {
-    waybillNo: '32535234445',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '未通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-])
-
-const airLine = ref('SZX - CA4120 - NKG')
-const tableData = ref([
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-])
-
-const setError = () => {
-  waybilltableData.value.map(item => {
-    if (item.cljg == '未通过') {
-      item['rowClass'] = 'alarm'
-    }
-  })
-}
-
-const domeTable = ref(null)
-const test = row => {
-  if (row.column.property === 'score' && row.row.score > 80) {
-    domeTable.value.cellClass = 'warn'
-  } else {
-    domeTable.value.cellClass = ''
-  }
-}
-
-const loadMore = data => {
-  // setError()
-  // queryData()
-  // console.log(data)
-}
-
-//清空搜索
-const clear = data => {
-  console.log(data)
-}
 
-//点击搜索按钮
-const search = data => {
-  console.log(data)
-}
-
-//点击刷新按钮
-const refresh = data => {
-  console.log(data)
-}
-
-//点击下载按钮
-const downLoad = data => {
-  console.log(data)
-}
-
-//点击列设置按钮
-const columnSet = data => {
-  state.dialogVisible = true
-}
-
-const setColumn = data => {
-  state.waybillTableHeader = data
-  state.dialogVisible = false
-}
-
-const closeDialog = data => {
-  state.dialogVisible = false
-}
-
-const queryData = async () => {
-  return new Promise((resolve, reject) => {
-    let data = {
-      dataContent: [],
-      id: 16,
-    }
-    Query(data)
-      .then(res => {
-        if (res.code === 200) {
-          //commit('SET_Token', res.data?.jwtToken)
-          console.log(res)
-        } else {
-          reject(res)
-        }
-      })
-      .catch((error: any) => {
-        reject(error)
-      })
-  })
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'waybillNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
-        query: {
-          waybillNo: row.waybillNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+<script setup lang="ts">
+import FlightView from '../../components/FlightView/index.vue'
 </script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  .pageTop {
-    width: 100%;
-    height: 345px;
-    display: flex;
-    .flightInfo {
-      height: 100%;
-      flex: 1;
-      background: #410425;
-      box-sizing: border-box;
-      padding: 18px 32px;
-      display: flex;
-      flex-direction: column;
-      .airLine {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        width: 100%;
-        margin-bottom: 16px;
-      }
-      .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        justify-items: center;
-        width: 100%;
-        max-width: 1050px;
-        flex: 1;
-        .infoBox {
-          width: calc(33.3% - 10px);
-          background: #561638;
-          padding: 10px 15px;
-          box-sizing: border-box;
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 30px;
-        }
-        .iconBox {
-          display: flex;
-          flex-direction: column;
-          width: 60px;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-    .container {
-      width: 760px;
-      height: 100%;
-      margin-left: 16px;
-    }
-  }
-  .tableTopBtn {
-    height: 72px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .waybillList {
-    width: 100%;
-    flex: 1;
-  }
-}
-:deep.el-table .nodeHeader {
-  background: #eef3d6;
-}
-:deep.el-table .columnClassName {
-  background: #eef3d6 !important;
-}
-:deep.el-table .alarm {
-  background: #f38080 !important;
-}
-</style>

src/views/realTime/arrival/goods/index copy.vue

@@ -0,0 +1,298 @@
+<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 flex-wrap">
+        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
+        <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>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import TBtnGroup from "@/components/TBtnGroup/index.vue";
+import tableColumnSet from "@/components/tableColumnSet/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: 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 = ref([
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
+]);
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    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: "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: "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 groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const dialogVisible = ref(false);
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+const setColumn = (data) => {
+  tableHeader.value = data;
+  dialogVisible.value = false;
+};
+
+const closeDialog = (data) => {
+  dialogVisible.value = false;
+};
+
+//点击列设置按钮
+const columnSet = (data) => {
+  dialogVisible.value = true;
+};
+</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/realTime/arrival/goods/index.vue

@@ -1,298 +1,9 @@
 <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 flex-wrap">
-        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
-        <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>
-        <Steps :datas="datas1" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
-    </div>
-    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
-  </div>
+  <GoodsView />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import TBtnGroup from "@/components/TBtnGroup/index.vue";
-import tableColumnSet from "@/components/tableColumnSet/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: 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 = ref([
-  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
-  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
-  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
-  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
-  { columnLabel: "节点名称", columnName: "return", needShow: true },
-  { columnLabel: "位置码", columnName: "receipt", needShow: true },
-  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
-  { columnLabel: "处理时间", columnName: "tally", needShow: true },
-  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
-  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
-  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
-  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
-  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
-  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
-]);
-const tableData = [
-  {
-    id: 1,
-    fightNo: "CA1001",
-    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: "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: "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 groupSet = {
-  isUtc: false,
-  isRefresh: false,
-  isDownLoad: true,
-  isColumnSet: true,
-};
-const dialogVisible = ref(false);
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
-const clear = () => {
-  ElMessage.success(`清除`);
-};
-const setColumn = (data) => {
-  tableHeader.value = data;
-  dialogVisible.value = false;
-};
-
-const closeDialog = (data) => {
-  dialogVisible.value = false;
-};
-
-//点击列设置按钮
-const columnSet = (data) => {
-  dialogVisible.value = true;
-};
+import GoodsView from '../../components/GoodsView/index.vue'
 </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>
+<style scoped></style>

src/views/realTime/arrival/waybill/index copy.vue

@@ -0,0 +1,462 @@
+<template>
+  <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 flex-wrap">
+        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
+        <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="datas1" />
+      </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="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 class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </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="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
+    </div>
+    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import TBtnGroup from "@/components/TBtnGroup/index.vue";
+import tableColumnSet from "@/components/tableColumnSet/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+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 = ref([
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
+  { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
+  { columnLabel: "拉下", columnName: "dwon1", needShow: true },
+  { columnLabel: "退运", columnName: "return", needShow: true },
+  {
+    columnLabel: "卸机",
+    columnName: "unloading",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+    needShow: true,
+  },
+  {
+    columnLabel: "机下交接",
+    columnName: "offBoard2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+    needShow: true,
+  },
+  {
+    columnLabel: "货站交接",
+    columnName: "goodSstation2",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+    needShow: true,
+  },
+  {
+    columnLabel: "提取",
+    columnName: "extract",
+    lableClass: "scoreColumn2",
+    columnClassName: "scoreColumn2",
+    needShow: true,
+  },
+  {
+    columnLabel: "收货核单",
+    columnName: "receipt",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "安检",
+    columnName: "securityCheck",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "理货",
+    columnName: "tally",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "拉下",
+    columnName: "dwon2",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "待运区",
+    columnName: "waitingArea",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "货站交接",
+    columnName: "goodSstation1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "机下交接",
+    columnName: "offBoard1",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+  {
+    columnLabel: "装机",
+    columnName: "installEquipment",
+    lableClass: "scoreColumn",
+    columnClassName: "scoreColumn",
+    needShow: true,
+  },
+]);
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 4,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+];
+const groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const dialogVisible = ref(false);
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+const setColumn = (data) => {
+  tableHeader.value = data;
+  dialogVisible.value = false;
+};
+
+const closeDialog = (data) => {
+  dialogVisible.value = false;
+};
+
+//点击列设置按钮
+const columnSet = (data) => {
+  dialogVisible.value = true;
+};
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch(column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</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;
+    }
+  }
+  &-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 {
+      width: 1090px;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6 !important;
+    }
+    .scoreColumn2 {
+      background: #d6e6f3 !important;
+    }
+  }
+}
+</style>

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

@@ -1,462 +1,9 @@
 <template>
-  <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 flex-wrap">
-        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
-        <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="datas1" />
-      </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="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 class="title-list">日期：2022/09/10</div>
-        </div>
-        <Steps :datas="datas1" />
-      </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="datas" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table height="calc(100vh - 700px)" :tableHeader="tableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
-    </div>
-    <tableColumnSet :dialogVisible="dialogVisible" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
-  </div>
+  <WaybillView />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import TBtnGroup from "@/components/TBtnGroup/index.vue";
-import tableColumnSet from "@/components/tableColumnSet/index.vue";
-import { ElMessage } from "element-plus";
-const dataInfo = [
-  {
-    id: 1,
-    name: "运单",
-    value: "FA56888829",
-  },
-  {
-    id: 2,
-    name: "货代公司",
-    value: "深圳市联运通货有限公司",
-  },
-  {
-    id: 3,
-    name: "品名",
-    value: "电路板、手机外壳",
-  },
-  {
-    id: 4,
-    name: "特货信息",
-    value: "特",
-  },
-  {
-    id: 5,
-    name: "始发机场",
-    value: "SZX",
-  },
-  {
-    id: 6,
-    name: "目的机场",
-    value: "CTU",
-  },
-  {
-    id: 7,
-    name: "货物数量",
-    value: "7件",
-  },
-  {
-    id: 8,
-    name: "货物总重",
-    value: "82KG",
-  },
-];
-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 = ref([
-  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
-  { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
-  { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
-  { columnLabel: "拉下", columnName: "dwon1", needShow: true },
-  { columnLabel: "退运", columnName: "return", needShow: true },
-  {
-    columnLabel: "卸机",
-    columnName: "unloading",
-    lableClass: "scoreColumn2",
-    columnClassName: "scoreColumn2",
-    needShow: true,
-  },
-  {
-    columnLabel: "机下交接",
-    columnName: "offBoard2",
-    lableClass: "scoreColumn2",
-    columnClassName: "scoreColumn2",
-    needShow: true,
-  },
-  {
-    columnLabel: "货站交接",
-    columnName: "goodSstation2",
-    lableClass: "scoreColumn2",
-    columnClassName: "scoreColumn2",
-    needShow: true,
-  },
-  {
-    columnLabel: "提取",
-    columnName: "extract",
-    lableClass: "scoreColumn2",
-    columnClassName: "scoreColumn2",
-    needShow: true,
-  },
-  {
-    columnLabel: "收货核单",
-    columnName: "receipt",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "安检",
-    columnName: "securityCheck",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "理货",
-    columnName: "tally",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "拉下",
-    columnName: "dwon2",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "待运区",
-    columnName: "waitingArea",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "货站交接",
-    columnName: "goodSstation1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "机下交接",
-    columnName: "offBoard1",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-  {
-    columnLabel: "装机",
-    columnName: "installEquipment",
-    lableClass: "scoreColumn",
-    columnClassName: "scoreColumn",
-    needShow: true,
-  },
-]);
-const tableData = [
-  {
-    id: 1,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 2,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 3,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 4,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-];
-const groupSet = {
-  isUtc: false,
-  isRefresh: false,
-  isDownLoad: true,
-  isColumnSet: true,
-};
-const dialogVisible = ref(false);
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
-const clear = () => {
-  ElMessage.success(`清除`);
-};
-const setColumn = (data) => {
-  tableHeader.value = data;
-  dialogVisible.value = false;
-};
-
-const closeDialog = (data) => {
-  dialogVisible.value = false;
-};
-
-//点击列设置按钮
-const columnSet = (data) => {
-  dialogVisible.value = true;
-};
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch(column.property) {
-    case 'goodsNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
-        query: {
-          goodsNo: row.goodsNo
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+import WaybillView from '../../components/WaybillView/index.vue'
 </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;
-    }
-  }
-  &-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 {
-      width: 1090px;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    margin-top: 16px;
-    .scoreColumn {
-      background: #eef3d6 !important;
-    }
-    .scoreColumn2 {
-      background: #d6e6f3 !important;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/views/realTime/components/AirportView/AirportForm.vue

@@ -116,6 +116,10 @@ const flightStatusOptions = ref([
     label: '未起飞',
     value: 'hasNotTakenOff',
   },
+  {
+    label: '取消',
+    value: 'canceled',
+  },
 ])
 const flightWarningOptions = ref([
   {

src/views/realTime/components/AirportView/index.scss

@@ -29,7 +29,7 @@
   .airport-table {
     width: 100%;
     height: calc(100% - 32px - 16px);
-    :deep .el-table-v2 {
+    .el-table-v2 :deep {
       .el-table-v2__header-cell,
       .el-table-v2__row-cell {
         padding: 0;

src/views/realTime/components/AirportView/index.vue

@@ -92,22 +92,22 @@ import useTableFilterAndSort from '@/hooks/useTableFilterAndSort'
 import { HeaderCellSlotProps } from 'element-plus'
 import { CommonData } from '~/common'
 
-type AirportViewName =
+type ViewName =
   | 'departure'
   | 'arrival'
   | 'internationalDeparture'
   | 'internationalArrival'
 
 const props = defineProps({
-  airportViewName: {
-    type: String as PropType<AirportViewName>,
+  name: {
+    type: String as PropType<ViewName>,
     required: true,
   },
 })
 
 const international = computed(() =>
   ['internationalDeparture', 'internationalArrival'].includes(
-    props.airportViewName
+    props.name
   )
 )
 const formData = reactive<CommonData>({})
@@ -119,12 +119,12 @@ const goodsCountFlag = ref(true)
 const UTCFlag = ref(true)
 
 const { tableColumns, tableData } = useAirportTable(
-  props.airportViewName,
+  props.name,
   formData,
   international
 )
 const { columnChecked } = useTableColumnSet(tableColumns)
-const { rowClassV2, cellClassV2 } = useTableStyle()
+const { rowClassV2, cellClassV2 } = useTableStyle('airport')
 
 const tableDataCount = computed(() => ({
   waybillCount: tableData.value.length,

src/views/realTime/components/FlightView/index.vue

@@ -37,6 +37,9 @@
         <SimpleTable
           :data="containerTableData"
           :columns="containerTableColumns"
+          :row-class-name="flightContainerRowClass"
+          :cell-class-name="flightContainerCellClass"
+          @cell-click="flightContainerCellClickHandler"
         />
       </div>
     </div>
@@ -67,9 +70,9 @@
           ref="waybillTableRef"
           :data="waybillTableData"
           :columns="filteredWaybillColumns"
-          :row-class-name="rowClass"
-          :cell-class-name="cellClass"
-          @click="cellClickHandler"
+          :row-class-name="flightWaybillRowClass"
+          :cell-class-name="flightWaybillCellClass"
+          @cell-click="flightWaybillCellClickHandler"
         />
       </div>
     </div>
@@ -97,12 +100,11 @@ const props = defineProps({
   },
 })
 
-const router = useRouter()
 const route = useRoute()
 const { flightNO, flightDate, departureAirport, landingAirport } = route.query
-if (!flightNO || !flightDate) {
-  router.push('/')
-}
+// if (!flightNO || !flightDate) {
+//   router.push('/')
+// }
 const dataContent = [
   flightNO,
   flightDate,
@@ -153,13 +155,12 @@ const getFlightInfo = async () => {
 // })
 
 const isDeparture = computed(() =>
-  ['departureFlight', 'internationalDepartureFlight'].includes(props.name)
+  ['DepartureFlight', 'InternationalDepartureFlight'].includes(props.name)
 )
 const {
   tableColumns: containerTableColumns,
   tableData: containerTableData,
 } = useTable('flightContainer', dataContent)
-
 const {
   tableColumns: waybillTableColumns,
   tableData: waybillTableData,
@@ -188,18 +189,28 @@ const downloadHandler = () => {
 }
 
 //清空搜索
-const clear = data => {
-  console.log(data)
-}
+const clear = () => {}
 
 //点击搜索按钮
-const search = data => {
-  console.log(data)
+const search = (text: string) => {
+  console.log(text)
 }
 
-const { rowClass, cellClass } = useTableStyle('flightWaybill')
+const {
+  rowClass: flightContainerRowClass,
+  cellClass: flightContainerCellClass,
+} = useTableStyle('flightContainer')
+const {
+  rowClass: flightWaybillRowClass,
+  cellClass: flightWaybillCellClass,
+} = useTableStyle('flightWaybill')
 
-const { cellClickHandler } = useTableCellClick('flightWaybill')
+const { cellClickHandler: flightContainerCellClickHandler } = useTableCellClick(
+  'flightContainer'
+)
+const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
+  'flightWaybill'
+)
 </script>
 <style lang="scss" scoped>
 .flight-view {
@@ -217,6 +228,7 @@ const { cellClickHandler } = useTableCellClick('flightWaybill')
       background: #410425;
       box-sizing: border-box;
       padding: 18px 32px;
+      overflow: hidden;
       .air-line {
         font-size: 18px;
         font-weight: bold;
@@ -253,9 +265,17 @@ const { cellClickHandler } = useTableCellClick('flightWaybill')
       flex: 1;
       height: 100%;
       margin-left: 16px;
+      .el-table :deep {
+        .el-table__body .el-table__row {
+          &.row-warning .el-table__cell {
+            background-color: #f0c579;
+          }
+        }
+      }
     }
   }
   .waybill-list-wrapper {
+    height: 0;
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -276,7 +296,18 @@ const { cellClickHandler } = useTableCellClick('flightWaybill')
       }
     }
     .waybill-list {
+      height: 0;
       flex: 1;
+      .el-table :deep {
+        .el-table__body .el-table__row {
+          &.row-warning .el-table__cell {
+            background-color: #f0c579;
+          }
+          &.row-alarm .el-table__cell {
+            background-color: #f38080;
+          }
+        }
+      }
     }
   }
 }

src/views/realTime/components/GoodsView/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="goods">
+    <div class="goods-info">
+      <div class="goods-info-title">运单基本信息</div>
+      <div class="goods-info-content">
+        <div v-for="item in goodsInfoItems" :key="item.key" class="info-item">
+          {{ item.label }}：{{ goodsInfo[item.key] }}
+        </div>
+      </div>
+    </div>
+    <div class="goods-header flex">
+      <div class="goods-header-title flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="goods-header-operate flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button
+          class="button-sqaure"
+          :icon="Download"
+          color="#ac014d"
+          @click="downloadHandler"
+        />
+        <ColumnSet
+          class="button-sqaure"
+          :table-columns="tableColumns"
+          @checked-submit="columnChecked"
+        />
+      </div>
+    </div>
+    <div
+      :style="{
+        maxHeight: trackAirlines.length > 1 ? `${208 * 2 + 8}px` : '208px',
+      }"
+      class="goods-track"
+    >
+      <el-scrollbar always>
+        <div class="goods-track-warpper">
+          <div
+            v-for="trackAirline in trackAirlines"
+            :key="trackAirline.flightNO"
+            class="goods-track-row"
+          >
+            <div
+              v-for="(trackAirport, index) in trackAirline.airports"
+              :key="trackAirport.airport"
+              class="goods-track-box"
+              :style="trackBoxStyle(trackAirline.airports, index)"
+            >
+              <div class="title flex-wrap">
+                <span v-if="index === 0" class="title-span"
+                  >航班号：{{ trackAirline.flightNO }}</span
+                >
+                <span class="title-span">出港：{{ trackAirport.airport }}</span>
+                <span class="title-span"
+                  >日期：{{ trackAirline.flightDate }}</span
+                >
+              </div>
+              <Steps :steps="trackAirport.trackSteps" />
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="goods-list">
+      <SimpleTable
+        ref="tableRef"
+        :data="tableData"
+        :columns="filteredColumns"
+        scrollbar-always-on
+        :row-class-name="rowClass"
+        :cell-class-name="cellClass"
+        :column-props="{ formatter }"
+        @cell-click="cellClickHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Download } from '@element-plus/icons-vue'
+import Search from '@/components/search/index.vue'
+import Steps from '@/components/steps/index.vue'
+import ColumnSet from '../../components/ColumnSet/index.vue'
+import SimpleTable from '@/components/SimpleTable/index.vue'
+import { CommonData } from '~/common'
+import useTrackData from '../../hooks/useTrackData'
+import useTable from '../../hooks/useTable'
+import useTableColumnSet from '../../hooks/useTableColumnSet'
+import useTableExport from '../../hooks/useTableExport'
+import useTableStyle from '../../hooks/useTableStyle'
+import useTableCellClick from '../../hooks/useTableCellClick'
+import { Query } from '@/api/webApi'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  name: {
+    type: String,
+    // required: true,
+  },
+})
+
+const route = useRoute()
+const { goodsNO, waybillNO } = route.query
+
+const goodsInfoItems = [
+  {
+    label: '货物编码',
+    key: 'C0',
+  },
+  {
+    label: '运单',
+    key: 'C1',
+  },
+]
+const goodsInfo = reactive<CommonData>({
+  C0: '56888829',
+  C1: 'FA67858990',
+})
+const getGoodsInfo = async () => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    } = await Query<CommonData>({
+      id: DATACONTENT_ID.goodsInfo,
+      dataContent: [goodsNO],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    if (!listValues.length) {
+      ElMessage.error('未查询到货物信息')
+      return
+    }
+    Object.assign(goodsInfo, listValues[0])
+  } catch (error) {
+    console.error(error)
+  }
+}
+// onMounted(() => {
+//   getGoodsInfo()
+// })
+
+interface Airline {
+  C0: string // 航班号
+  C1: string // 机场
+  C2: string // 航班日期
+  C3: number // 起飞/降落
+}
+const goodsAirlines = ref<Airline[]>([])
+const getGoodsAirlines = async () => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    } = await Query<Airline>({
+      id: DATACONTENT_ID.goodsAirline,
+      dataContent: [goodsNO],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    goodsAirlines.value = listValues
+  } catch (error) {
+    console.error(error)
+  }
+}
+// onMounted(() => {
+//   getGoodsAirlines()
+// })
+
+const trackDataContentList = computed(() =>
+  goodsAirlines.value.map(({ C0, C1, C2, C3 }) => ({
+    flightNO: C0,
+    airport: C1,
+    flightDate: C2,
+    isDeparture: C3,
+    dataContent: [waybillNO, goodsNO] as string[],
+  }))
+)
+const { trackAirlines, trackBoxStyle } = useTrackData(
+  'goodsTrack',
+  trackDataContentList
+)
+
+const dataContent = [waybillNO, goodsNO] as string[]
+const { tableColumns, tableData } = useTable('goodsFlight', dataContent)
+
+const search = (text: string) => {
+  console.log(text)
+}
+const clear = () => {}
+
+const tableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
+const { exportToExcel } = useTableExport()
+const downloadHandler = () => {
+  const table = tableRef.value!.table!
+  exportToExcel({ table })
+}
+const formatter = (row, column, cellValue, index) => {
+  if (column.property === 'C7') {
+    return String(cellValue ?? '').replace(' ', '\n')
+  }
+  return cellValue
+}
+
+const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)
+
+const { rowClass, cellClass } = useTableStyle('goodsFlight')
+
+const { cellClickHandler } = useTableCellClick('goodsFlight')
+</script>
+
+<style lang="scss" scoped>
+.goods {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &-info {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+    &-content {
+      display: flex;
+      .info-item:not(:last-child) {
+        margin-right: 100px;
+      }
+    }
+  }
+  &-header :deep {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+    .el-button {
+      background-color: #d5327b;
+      border: none;
+    }
+    .button-sqaure {
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      font-size: 16px;
+      margin-left: 24px;
+      &:first-of-type {
+        margin-left: 35px;
+      }
+    }
+  }
+  &-track {
+    height: 0;
+    flex: 1.5;
+    &-row {
+      height: 208px;
+      display: flex;
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
+    }
+    &-box {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+      .title {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #101116;
+        margin-bottom: 10px;
+        &-span {
+          margin-right: 50px;
+        }
+      }
+    }
+  }
+  .goods-list :deep {
+    margin-top: 16px;
+    height: 0;
+    flex: 1;
+    .el-table__cell {
+      .cell {
+        padding: 4px 8px;
+      }
+    }
+  }
+}
+</style>

src/views/realTime/components/WaybillView/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="waybill">
+    <div class="waybill-info">
+      <div class="waybill-info-title">运单基本信息</div>
+      <div class="waybill-info-content flex">
+        <div v-for="item in waybillInfoItems" :key="item.key">
+          {{ item.label }}：{{ waybillInfo[item.key] }}
+        </div>
+      </div>
+    </div>
+    <div class="waybill-header flex">
+      <div class="waybill-header-title flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="waybill-header-operate flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button
+          class="button-sqaure"
+          :icon="Download"
+          color="#ac014d"
+          @click="downloadHandler"
+        />
+        <ColumnSet
+          class="button-sqaure"
+          :table-columns="tableColumns"
+          @checked-submit="columnChecked"
+        />
+      </div>
+    </div>
+    <div
+      :style="{
+        maxHeight: trackAirlines.length > 1 ? `${208 * 2 + 8}px` : '208px',
+      }"
+      class="waybill-track"
+    >
+      <el-scrollbar always>
+        <div class="waybill-track-warpper">
+          <div
+            v-for="trackAirline in trackAirlines"
+            :key="trackAirline.flightNO"
+            class="waybill-track-row"
+          >
+            <div
+              v-for="(trackAirport, index) in trackAirline.airports"
+              :key="trackAirport.airport"
+              class="waybill-track-box"
+              :style="trackBoxStyle(trackAirline.airports, index)"
+            >
+              <div class="title flex-wrap">
+                <span v-if="index === 0" class="title-span"
+                  >航班号：{{ trackAirline.flightNO }}</span
+                >
+                <span class="title-span">出港：{{ trackAirport.airport }}</span>
+                <span class="title-span"
+                  >日期：{{ trackAirline.flightDate }}</span
+                >
+              </div>
+              <Steps :steps="trackAirport.trackSteps" />
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="goods-list">
+      <SimpleTable
+        ref="tableRef"
+        :data="tableData"
+        :columns="filteredColumns"
+        scrollbar-always-on
+        :row-class-name="rowClass"
+        :cell-class-name="cellClass"
+        @cell-click="cellClickHandler"
+        :column-props="{ formatter }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Download } from '@element-plus/icons-vue'
+import Search from '@/components/search/index.vue'
+import Steps from '@/components/steps/index.vue'
+import ColumnSet from '../../components/ColumnSet/index.vue'
+import SimpleTable from '@/components/SimpleTable/index.vue'
+import { CommonData } from '~/common'
+import useTrackData from '../../hooks/useTrackData'
+import useTable from '../../hooks/useTable'
+import useTableColumnSet from '../../hooks/useTableColumnSet'
+import useTableExport from '../../hooks/useTableExport'
+import useTableStyle from '../../hooks/useTableStyle'
+import useTableCellClick from '../../hooks/useTableCellClick'
+import { Query } from '@/api/webApi'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  name: {
+    type: String,
+    // required: true,
+  },
+})
+
+const route = useRoute()
+const {
+  waybillNO,
+  flightNO,
+  flightDate,
+  departureAirport,
+  landingAirport,
+} = route.query
+
+const waybillInfoItems = [
+  {
+    label: '运单',
+    key: 'C0',
+  },
+  {
+    label: '货代公司',
+    key: 'C1',
+  },
+  {
+    label: '品名',
+    key: 'C3',
+  },
+  {
+    label: '特货信息',
+    key: 'C4',
+  },
+  {
+    label: '始发机场',
+    key: 'C5',
+  },
+  {
+    label: '目的机场',
+    key: 'C6',
+  },
+  {
+    label: '货物数量',
+    key: 'C7',
+  },
+  {
+    label: '货物总重',
+    key: 'C8',
+  },
+]
+const waybillInfo = reactive<CommonData>({
+  C0: 'FA56888829',
+  C1: '深圳市联运通货有限公司',
+  C3: '电路板、手机外壳',
+  C4: '特',
+  C5: 'SZX',
+  C6: 'CTU',
+  C7: '7件',
+  C8: '82KG',
+})
+const getWaybillInfo = async () => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    } = await Query<CommonData>({
+      id: DATACONTENT_ID.waybillInfo,
+      dataContent: [waybillNO],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    if (!listValues.length) {
+      ElMessage.error('未查询到运单信息')
+      return
+    }
+    Object.assign(waybillInfo, listValues[0])
+  } catch (error) {
+    console.error(error)
+  }
+}
+// onMounted(() => {
+//   getWaybillInfo()
+// })
+
+interface Airline {
+  C0: string // 航班号
+  C1: string // 机场
+  C2: string // 航班日期
+  C3: number // 起飞/降落
+}
+const waybillAirlines = ref<Airline[]>([])
+const getWaybillAirlines = async () => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    } = await Query<Airline>({
+      id: DATACONTENT_ID.waybillAirline,
+      dataContent: [waybillNO],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    waybillAirlines.value = listValues
+  } catch (error) {
+    console.error(error)
+  }
+}
+// onMounted(() => {
+//   getWaybillAirlines()
+// })
+
+const trackDataContentList = computed(() =>
+  waybillAirlines.value.map(({ C0, C1, C2, C3 }) => ({
+    flightNO: C0,
+    airport: C1,
+    flightDate: C2,
+    isDeparture: C3,
+    dataContent: [waybillNO as string, C0, C1, C2],
+  }))
+)
+const { trackAirlines, trackBoxStyle } = useTrackData(
+  'waybillTrack',
+  trackDataContentList
+)
+
+const dataContent = [
+  waybillNO,
+  flightNO,
+  flightDate,
+  departureAirport,
+  landingAirport,
+] as string[]
+const { tableColumns, tableData } = useTable('waybillGoods', dataContent)
+
+const formatter = (row, column, cellValue, index) => {
+  const array = Array.from({ length: 12 }).map((_, i) => `C${i + 5}`)
+  if (array.includes(column.property)) {
+    return String(cellValue ?? '').replaceAll('-', '\n')
+  } else {
+    return cellValue
+  }
+}
+
+const search = (text: string) => {
+  console.log(text)
+}
+const clear = () => {}
+
+const tableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
+const { exportToExcel } = useTableExport()
+const downloadHandler = () => {
+  const table = tableRef.value!.table!
+  exportToExcel({ table })
+}
+
+const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)
+
+const { rowClass, cellClass } = useTableStyle('waybillGoods')
+
+const { cellClickHandler } = useTableCellClick('waybillGoods')
+</script>
+
+<style lang="scss" scoped>
+.waybill {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &-info {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-header :deep {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+    .el-button {
+      background-color: #d5327b;
+      border: none;
+    }
+    .button-sqaure {
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      font-size: 16px;
+      margin-left: 24px;
+      &:first-of-type {
+        margin-left: 35px;
+      }
+    }
+  }
+  &-track {
+    height: 0;
+    flex: 1.5;
+    &-row {
+      height: 208px;
+      display: flex;
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
+    }
+    &-box {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+      .title {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #101116;
+        margin-bottom: 10px;
+        &-span {
+          margin-right: 50px;
+        }
+      }
+    }
+  }
+  .goods-list :deep {
+    margin-top: 16px;
+    height: 0;
+    flex: 1;
+    .el-table__body .el-table__cell .cell {
+      padding: 4px 8px;
+    }
+  }
+}
+</style>

src/views/realTime/departure/airport/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AirportView airport-view-name="departure" />
+  <AirportView name="departure" />
 </template>
 
 <script setup lang="ts">

src/views/realTime/departure/flight/index copy.vue

@@ -0,0 +1,403 @@
+<template>
+  <div class="pageBody">
+    <div class="pageTop">
+      <div class="flightInfo">
+        <div class="airLine">{{ airLine }}</div>
+        <div class="info">
+          <div class="infoBox">
+            <div>起飞机场简称：深圳机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 19 : 30 : 25</div>
+            <div>停机位：012</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>特货信息/货物数：</div>
+            <div>托运运单数/货物数：</div>
+            <div>中转进运单/货物数：</div>
+            <div>已配载集装器：</div>
+            <div>货站已交接集装器：</div>
+            <div>已装载集装器/运单/货物数：</div>
+            <div>拉下集装器/运单/货物数：</div>
+            <div>集装器数量：</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>降落机场简称： 南京机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <tableTemp
+          ref="domeTable"
+          :tableHeader="state.tableHeader"
+          :tableProperty="{ rowKey: 'ID', showSummary: true }"
+          :tableData="tableData"
+          @load="loadMore"
+        ></tableTemp>
+      </div>
+    </div>
+    <div class="tableTopBtn">
+      <TBtnGroup
+        v-model:flag="state.UTCFlag"
+        @columnSet="columnSet"
+        @downLoad="downLoad"
+        @refresh="refresh"
+      ></TBtnGroup>
+      <Search @clear="clear" @search="search" />
+    </div>
+    <div class="waybillList">
+      <tableTemp
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
+    </div>
+    <tableColumnSet
+      :dialogVisible="state.dialogVisible"
+      :columnList="state.waybillTableHeader"
+      @setColumn="setColumn"
+      @closeDialog="closeDialog"
+    ></tableColumnSet>
+  </div>
+</template>
+<script setup lang="ts">
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import Search from '@/components/search/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { Ref, ref } from 'vue'
+import useTableExport from '../../hooks/useTableExport'
+import { TableInstance } from 'element-plus'
+
+const state = reactive({
+  tableHeader: [
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+  ],
+  waybillTableHeader: [
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
+  ],
+  listLoading: true,
+  UTCFlag: true,
+  dialogVisible: false,
+})
+
+const waybilltableData = ref([
+  {
+    waybillNo: '32535234445',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '未通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+])
+
+const airLine = ref('SZX - CA4120 - NKG')
+const tableData = ref([
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+])
+
+const setError = () => {
+  waybilltableData.value.map(item => {
+    if (item.cljg == '未通过') {
+      item['rowClass'] = 'alarm'
+    }
+  })
+}
+
+const loadMore = data => {
+  setError()
+  console.log(data)
+}
+
+//清空搜索
+const clear = data => {
+  console.log(data)
+}
+
+//点击搜索按钮
+const search = data => {
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh = data => {
+  console.log(data)
+}
+
+const domeTable = ref<InstanceType<typeof tableTemp> | null>(null)
+const { exportToExcel } = useTableExport()
+//点击下载按钮
+const downLoad = data => {
+  const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
+  exportToExcel({
+    table: table as Ref<TableInstance>,
+  })
+}
+
+//点击列设置按钮
+const columnSet = data => {
+  state.dialogVisible = true
+}
+
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
+}
+
+const closeDialog = data => {
+  state.dialogVisible = false
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'waybillNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+        query: {
+          waybillNo: row.waybillNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageTop {
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flightInfo {
+      height: 100%;
+      flex: 1;
+      background: #410425;
+      box-sizing: border-box;
+      padding: 18px 32px;
+      display: flex;
+      flex-direction: column;
+      .airLine {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        justify-items: center;
+        width: 100%;
+        max-width: 1050px;
+        flex: 1;
+        .infoBox {
+          width: calc(33.3% - 10px);
+          background: #561638;
+          padding: 10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 30px;
+        }
+        .iconBox {
+          display: flex;
+          flex-direction: column;
+          width: 60px;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .container {
+      width: 760px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+  .tableTopBtn {
+    height: 72px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .waybillList {
+    width: 100%;
+    flex: 1;
+  }
+}
+:deep.el-table .nodeHeader {
+  background: #eef3d6;
+}
+:deep.el-table .columnClassName {
+  background: #eef3d6 !important;
+}
+:deep.el-table .alarm {
+  background: #f38080 !important;
+}
+</style>

src/views/realTime/departure/flight/index.vue

@@ -1,403 +1,7 @@
 <template>
-  <div class="pageBody">
-    <div class="pageTop">
-      <div class="flightInfo">
-        <div class="airLine">{{ airLine }}</div>
-        <div class="info">
-          <div class="infoBox">
-            <div>起飞机场简称：深圳机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 19 : 30 : 25</div>
-            <div>停机位：012</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>特货信息/货物数：</div>
-            <div>托运运单数/货物数：</div>
-            <div>中转进运单/货物数：</div>
-            <div>已配载集装器：</div>
-            <div>货站已交接集装器：</div>
-            <div>已装载集装器/运单/货物数：</div>
-            <div>拉下集装器/运单/货物数：</div>
-            <div>集装器数量：</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>降落机场简称： 南京机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 22 : 25 : 25</div>
-          </div>
-        </div>
-      </div>
-      <div class="container">
-        <tableTemp
-          ref="domeTable"
-          :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID', showSummary: true }"
-          :tableData="tableData"
-          @load="loadMore"
-        ></tableTemp>
-      </div>
-    </div>
-    <div class="tableTopBtn">
-      <TBtnGroup
-        v-model:flag="state.UTCFlag"
-        @columnSet="columnSet"
-        @downLoad="downLoad"
-        @refresh="refresh"
-      ></TBtnGroup>
-      <Search @clear="clear" @search="search" />
-    </div>
-    <div class="waybillList">
-      <tableTemp
-        ref="domeTable"
-        :tableHeader="state.waybillTableHeader"
-        :tableProperty="{ showSummary: true }"
-        :tableData="waybilltableData"
-        @load="loadMore"
-        @cell-click="cellClickHandler"
-      ></tableTemp>
-    </div>
-    <tableColumnSet
-      :dialogVisible="state.dialogVisible"
-      :columnList="state.waybillTableHeader"
-      @setColumn="setColumn"
-      @closeDialog="closeDialog"
-    ></tableColumnSet>
-  </div>
+  <FlightView name="DepartureFlight" />
 </template>
-<script setup lang="ts">
-import tableTemp from '@/components/tableTemp/index.vue'
-import TBtnGroup from '@/components/TBtnGroup/index.vue'
-import Search from '@/components/search/index.vue'
-import tableColumnSet from '@/components/tableColumnSet/index.vue'
-import { CaretRight } from '@element-plus/icons-vue'
-import { Ref, ref } from 'vue'
-import useTableExport from '../../hooks/useTableExport'
-import { TableInstance } from 'element-plus'
-
-const state = reactive({
-  tableHeader: [
-    {
-      columnLabel: '集装器编号',
-      columnName: 'containerNo',
-      width: '120px',
-      needShow: true,
-    },
-    {
-      columnLabel: '运单数',
-      columnName: 'waybillCount',
-      width: '60px',
-      needShow: true,
-    },
-    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
-    {
-      columnLabel: '理货',
-      columnName: 'lh',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '拉下',
-      columnName: 'lx',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '待运区',
-      columnName: 'dyq',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '货站交接',
-      columnName: 'hzjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '机下交接',
-      columnName: 'jxjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '装机',
-      columnName: 'zj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-  ],
-  waybillTableHeader: [
-    {
-      columnLabel: '运单号',
-      columnName: 'waybillNo',
-      width: '120px',
-      needShow: true,
-      columnClassName: 'cell-click',
-    },
-    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
-    { columnLabel: '品名', columnName: 'pm', needShow: true },
-    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
-    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
-    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
-    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
-    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
-    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
-    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
-    {
-      columnLabel: '处理时间',
-      columnName: 'clsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
-    {
-      columnLabel: '中转航班降落时间',
-      columnName: 'zzhbsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
-  ],
-  listLoading: true,
-  UTCFlag: true,
-  dialogVisible: false,
-})
-
-const waybilltableData = ref([
-  {
-    waybillNo: '32535234445',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '未通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-])
-
-const airLine = ref('SZX - CA4120 - NKG')
-const tableData = ref([
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-])
-
-const setError = () => {
-  waybilltableData.value.map(item => {
-    if (item.cljg == '未通过') {
-      item['rowClass'] = 'alarm'
-    }
-  })
-}
-
-const loadMore = data => {
-  setError()
-  console.log(data)
-}
-
-//清空搜索
-const clear = data => {
-  console.log(data)
-}
 
-//点击搜索按钮
-const search = data => {
-  console.log(data)
-}
-
-//点击刷新按钮
-const refresh = data => {
-  console.log(data)
-}
-
-const domeTable = ref<InstanceType<typeof tableTemp> | null>(null)
-const { exportToExcel } = useTableExport()
-//点击下载按钮
-const downLoad = data => {
-  const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
-  exportToExcel({
-    table: table as Ref<TableInstance>,
-  })
-}
-
-//点击列设置按钮
-const columnSet = data => {
-  state.dialogVisible = true
-}
-
-const setColumn = data => {
-  state.waybillTableHeader = data
-  state.dialogVisible = false
-}
-
-const closeDialog = data => {
-  state.dialogVisible = false
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'waybillNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
-        query: {
-          waybillNo: row.waybillNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
-</script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  .pageTop {
-    width: 100%;
-    height: 345px;
-    display: flex;
-    .flightInfo {
-      height: 100%;
-      flex: 1;
-      background: #410425;
-      box-sizing: border-box;
-      padding: 18px 32px;
-      display: flex;
-      flex-direction: column;
-      .airLine {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        width: 100%;
-        margin-bottom: 16px;
-      }
-      .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        justify-items: center;
-        width: 100%;
-        max-width: 1050px;
-        flex: 1;
-        .infoBox {
-          width: calc(33.3% - 10px);
-          background: #561638;
-          padding: 10px 15px;
-          box-sizing: border-box;
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 30px;
-        }
-        .iconBox {
-          display: flex;
-          flex-direction: column;
-          width: 60px;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-    .container {
-      width: 760px;
-      height: 100%;
-      margin-left: 16px;
-    }
-  }
-  .tableTopBtn {
-    height: 72px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .waybillList {
-    width: 100%;
-    flex: 1;
-  }
-}
-:deep.el-table .nodeHeader {
-  background: #eef3d6;
-}
-:deep.el-table .columnClassName {
-  background: #eef3d6 !important;
-}
-:deep.el-table .alarm {
-  background: #f38080 !important;
-}
-</style>
+<script setup lang="ts">
+import FlightView from '../../components/FlightView/index.vue'
+</script>

src/views/realTime/departure/flight/test.vue

@@ -1,7 +0,0 @@
-<template>
-  <FlightView name="departureFlight" />
-</template>
-
-<script setup lang="ts">
-import FlightView from '../../components/FlightView/index.vue'
-</script>

src/views/realTime/departure/goods/index copy.vue

@@ -0,0 +1,301 @@
+<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">
+        <div class="station-status-search flex-wrap">
+          <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
+          <Search @clear="clear" @search="search" />
+        </div>
+      </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 class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">进港: 深圳机场</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+    <tableColumnSet :dialogVisible="cloumnFlag" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import TBtnGroup from "@/components/TBtnGroup/index.vue";
+import tableColumnSet from "@/components/tableColumnSet/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: 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 = ref([
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
+  { columnLabel: "集装器编号", columnName: "demo", needShow: true },
+]);
+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 groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+const cloumnFlag = ref(false);
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+const columnSet = () => {
+  cloumnFlag.value = true;
+};
+const setColumn = (data) => {
+  tableHeader.value = data;
+  cloumnFlag.value = false;
+};
+
+const closeDialog = (data) => {
+  cloumnFlag.value = false;
+};
+</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/realTime/departure/goods/index.vue

@@ -1,301 +1,9 @@
 <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">
-        <div class="station-status-search flex-wrap">
-          <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
-          <Search @clear="clear" @search="search" />
-        </div>
-      </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 class="station-list-right">
-        <div class="title flex-wrap">
-          <div class="title-list">进港: 深圳机场</div>
-        </div>
-        <Steps :datas="datas1" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
-    </div>
-    <tableColumnSet :dialogVisible="cloumnFlag" :columnList="tableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
-  </div>
+  <GoodsView />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import TBtnGroup from "@/components/TBtnGroup/index.vue";
-import tableColumnSet from "@/components/tableColumnSet/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: 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 = ref([
-  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
-  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
-  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
-  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
-  { columnLabel: "节点名称", columnName: "return", needShow: true },
-  { columnLabel: "位置码", columnName: "receipt", needShow: true },
-  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
-  { columnLabel: "处理时间", columnName: "tally", needShow: true },
-  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
-  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
-  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
-  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
-  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
-  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
-  { columnLabel: "集装器编号", columnName: "demo", needShow: true },
-]);
-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 groupSet = {
-  isUtc: false,
-  isRefresh: false,
-  isDownLoad: true,
-  isColumnSet: true,
-};
-const cloumnFlag = ref(false);
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
-const clear = () => {
-  ElMessage.success(`清除`);
-};
-const columnSet = () => {
-  cloumnFlag.value = true;
-};
-const setColumn = (data) => {
-  tableHeader.value = data;
-  cloumnFlag.value = false;
-};
-
-const closeDialog = (data) => {
-  cloumnFlag.value = false;
-};
+import GoodsView from '../../components/GoodsView/index.vue'
 </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>
+<style scoped></style>

src/views/realTime/departure/waybill/index copy.vue

@@ -0,0 +1,543 @@
+<template>
+  <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 flex-wrap">
+        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
+        <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-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 height="calc(100vh - 700px)" :tableHeader="state.waybillTableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
+    </div>
+    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import TBtnGroup from "@/components/TBtnGroup/index.vue";
+import tableColumnSet from "@/components/tableColumnSet/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+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 groupSet = {
+  isUtc: false,
+  isRefresh: false,
+  isDownLoad: true,
+  isColumnSet: true,
+};
+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: "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 = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+  {
+    id: 4,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "A203-未通过-15:40",
+    securityCheck: "A203-未通过-15:40",
+    tally: "A203-未通过-15:40",
+    dwon2: "A203-未通过-15:40",
+    waitingArea: "A203-未通过-15:40",
+    goodSstation1: "A203-未通过-15:40",
+    offBoard1: "A203-未通过-15:40",
+    installEquipment: "A203-未通过-15:40",
+    unloading: "A203-未通过-15:40",
+    offBoard2: "A203-未通过-15:40",
+    goodSstation2: "A203-未通过-15:40",
+    extract: "A203-未通过-15:40",
+  },
+];
+const state = reactive({
+  dialogVisible: false,
+  waybillTableHeader: [
+    { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+    { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
+    { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
+    { columnLabel: "拉下", columnName: "dwon1", needShow: true },
+    { columnLabel: "退运", columnName: "return", needShow: true },
+    {
+      columnLabel: "收货核单",
+      columnName: "receipt",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "安检",
+      columnName: "securityCheck",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "理货",
+      columnName: "tally",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "拉下",
+      columnName: "dwon2",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "待运区",
+      columnName: "waitingArea",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "货站交接",
+      columnName: "goodSstation1",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "机下交接",
+      columnName: "offBoard1",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "装机",
+      columnName: "installEquipment",
+      lableClass: "scoreColumn",
+      columnClassName: "scoreColumn",
+      needShow: true,
+    },
+    {
+      columnLabel: "卸机",
+      columnName: "unloading",
+      lableClass: "scoreColumn2",
+      columnClassName: "scoreColumn2",
+      needShow: true,
+    },
+    {
+      columnLabel: "机下交接",
+      columnName: "offBoard2",
+      lableClass: "scoreColumn2",
+      columnClassName: "scoreColumn2",
+      needShow: true,
+    },
+    {
+      columnLabel: "货站交接",
+      columnName: "goodSstation2",
+      lableClass: "scoreColumn2",
+      columnClassName: "scoreColumn2",
+      needShow: true,
+    },
+    {
+      columnLabel: "提取",
+      columnName: "extract",
+      lableClass: "scoreColumn2",
+      columnClassName: "scoreColumn2",
+      needShow: true,
+    },
+  ],
+});
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+const setColumn = (data) => {
+  state.waybillTableHeader = data;
+  state.dialogVisible = false;
+};
+
+const closeDialog = (data) => {
+  state.dialogVisible = false;
+};
+
+//点击列设置按钮
+const columnSet = (data) => {
+  state.dialogVisible = true;
+};
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch(column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</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;
+    }
+  }
+  &-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;
+      width: 1090px;
+      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/realTime/departure/waybill/index.vue

@@ -1,543 +1,9 @@
 <template>
-  <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 flex-wrap">
-        <TBtnGroup @columnSet="columnSet" :groupSet="groupSet" />
-        <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-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 height="calc(100vh - 700px)" :tableHeader="state.waybillTableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
-    </div>
-    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
-  </div>
+  <WaybillView/>
 </template>
 
 <script setup lang="ts">
-import { reactive } from "vue";
-import Search from "@/components/search/index.vue";
-import Steps from "@/components/steps/index.vue";
-import Table from "@/components/tableTemp/index.vue";
-import TBtnGroup from "@/components/TBtnGroup/index.vue";
-import tableColumnSet from "@/components/tableColumnSet/index.vue";
-import { ElMessage } from "element-plus";
-const dataInfo = [
-  {
-    id: 1,
-    name: "运单",
-    value: "FA56888829",
-  },
-  {
-    id: 2,
-    name: "货代公司",
-    value: "深圳市联运通货有限公司",
-  },
-  {
-    id: 3,
-    name: "品名",
-    value: "电路板、手机外壳",
-  },
-  {
-    id: 4,
-    name: "特货信息",
-    value: "特",
-  },
-  {
-    id: 5,
-    name: "始发机场",
-    value: "SZX",
-  },
-  {
-    id: 6,
-    name: "目的机场",
-    value: "CTU",
-  },
-  {
-    id: 7,
-    name: "货物数量",
-    value: "7件",
-  },
-  {
-    id: 8,
-    name: "货物总重",
-    value: "82KG",
-  },
-];
-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 groupSet = {
-  isUtc: false,
-  isRefresh: false,
-  isDownLoad: true,
-  isColumnSet: true,
-};
-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: "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 = [
-  {
-    id: 1,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 2,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 3,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-  {
-    id: 4,
-    fightNo: "CA1001",
-    containerNo: "DOU2424U2",
-    goodsNo: "56888829",
-    dwon1: "Y",
-    return: "Y",
-    receipt: "A203-未通过-15:40",
-    securityCheck: "A203-未通过-15:40",
-    tally: "A203-未通过-15:40",
-    dwon2: "A203-未通过-15:40",
-    waitingArea: "A203-未通过-15:40",
-    goodSstation1: "A203-未通过-15:40",
-    offBoard1: "A203-未通过-15:40",
-    installEquipment: "A203-未通过-15:40",
-    unloading: "A203-未通过-15:40",
-    offBoard2: "A203-未通过-15:40",
-    goodSstation2: "A203-未通过-15:40",
-    extract: "A203-未通过-15:40",
-  },
-];
-const state = reactive({
-  dialogVisible: false,
-  waybillTableHeader: [
-    { columnLabel: "航班号", columnName: "fightNo", needShow: true },
-    { columnLabel: "集装器编号", columnName: "containerNo", needShow: true },
-    { columnLabel: "货物编码", columnName: "goodsNo", needShow: true, columnClassName: 'cell-click' },
-    { columnLabel: "拉下", columnName: "dwon1", needShow: true },
-    { columnLabel: "退运", columnName: "return", needShow: true },
-    {
-      columnLabel: "收货核单",
-      columnName: "receipt",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "安检",
-      columnName: "securityCheck",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "理货",
-      columnName: "tally",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "拉下",
-      columnName: "dwon2",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "待运区",
-      columnName: "waitingArea",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "货站交接",
-      columnName: "goodSstation1",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "机下交接",
-      columnName: "offBoard1",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "装机",
-      columnName: "installEquipment",
-      lableClass: "scoreColumn",
-      columnClassName: "scoreColumn",
-      needShow: true,
-    },
-    {
-      columnLabel: "卸机",
-      columnName: "unloading",
-      lableClass: "scoreColumn2",
-      columnClassName: "scoreColumn2",
-      needShow: true,
-    },
-    {
-      columnLabel: "机下交接",
-      columnName: "offBoard2",
-      lableClass: "scoreColumn2",
-      columnClassName: "scoreColumn2",
-      needShow: true,
-    },
-    {
-      columnLabel: "货站交接",
-      columnName: "goodSstation2",
-      lableClass: "scoreColumn2",
-      columnClassName: "scoreColumn2",
-      needShow: true,
-    },
-    {
-      columnLabel: "提取",
-      columnName: "extract",
-      lableClass: "scoreColumn2",
-      columnClassName: "scoreColumn2",
-      needShow: true,
-    },
-  ],
-});
-const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
-};
-const clear = () => {
-  ElMessage.success(`清除`);
-};
-const setColumn = (data) => {
-  state.waybillTableHeader = data;
-  state.dialogVisible = false;
-};
-
-const closeDialog = (data) => {
-  state.dialogVisible = false;
-};
-
-//点击列设置按钮
-const columnSet = (data) => {
-  state.dialogVisible = true;
-};
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch(column.property) {
-    case 'goodsNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
-        query: {
-          goodsNo: row.goodsNo
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+import WaybillView from '../../components/WaybillView/index.vue'
 </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;
-    }
-  }
-  &-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;
-      width: 1090px;
-      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>
+<style scoped lang="scss"></style>

src/views/realTime/hooks/useTable.ts

@@ -5,23 +5,52 @@ const tableColumnsMap: {
   [tableName: string]: ({
     columnLabel: string
     columnName: string
-  } & CommonData)[]
+  } & { [x: string]: any })[]
 } = {
   flightContainer: [
-    { columnLabel: '集装器编号', columnName: 'C0', width: '120px' },
-    { columnLabel: '运单数', columnName: 'C1', width: '60px', needCount: 1 },
-    { columnLabel: '件数', columnName: 'C2', width: '60px', needCount: 1 },
-    { columnLabel: '理货', columnName: 'C3' },
-    { columnLabel: '拉下', columnName: 'C4' },
-    { columnLabel: '待运区', columnName: 'C5' },
-    { columnLabel: '货站交接', columnName: 'C6' },
-    { columnLabel: '机下交接', columnName: 'C7' },
-    { columnLabel: '装机', columnName: 'C8' },
+    { columnLabel: '集装器编号', columnName: 'C0', width: 120 },
+    { columnLabel: '运单数', columnName: 'C1', width: 60, needCount: 1 },
+    { columnLabel: '件数', columnName: 'C2', width: 60, needCount: 1 },
+    {
+      columnLabel: '理货',
+      columnName: 'C3',
+      className: 'cell-filter cell-filter-yellow',
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'C4',
+      className: 'cell-filter cell-filter-yellow',
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'C5',
+      className: 'cell-filter cell-filter-yellow',
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'C6',
+      className: 'cell-filter cell-filter-yellow',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C7',
+      className: 'cell-filter cell-filter-yellow',
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'C8',
+      className: 'cell-filter cell-filter-yellow',
+    },
   ],
   flightWaybill: [
-    { columnLabel: '运单号', columnName: 'C0', width: '120px' },
+    { columnLabel: '运单号', columnName: 'C0', width: 120 },
     { columnLabel: '集装器数量', columnName: 'C1', needCount: 1 },
-    { columnLabel: '品名', columnName: 'C2' },
+    {
+      columnLabel: '品名',
+      columnName: 'C2',
+      width: 160,
+      showOverflowTooltip: true,
+    },
     { columnLabel: '特货信息', columnName: 'C3' },
     { columnLabel: '货物件数', columnName: 'C4', needCount: 1 },
     { columnLabel: '拉下件数', columnName: 'C5', needCount: 1 },
@@ -29,11 +58,95 @@ const tableColumnsMap: {
     { columnLabel: '最新节点', columnName: 'C7' },
     { columnLabel: '最新位置', columnName: 'C8' },
     { columnLabel: '处理结果', columnName: 'C9' },
-    { columnLabel: '处理时间', columnName: 'C10', width: '130px' },
+    { columnLabel: '处理时间', columnName: 'C10', width: 130 },
     { columnLabel: '中转进航班号', columnName: 'C11' },
-    { columnLabel: '中转航班降落时间', columnName: 'C12', width: '130px' },
+    { columnLabel: '中转航班降落时间', columnName: 'C12', width: 130 },
     { columnLabel: '装载序号', columnName: 'C13' },
   ],
+  waybillGoods: [
+    { columnLabel: '航班号', columnName: 'C0', needFilters: 1 },
+    { columnLabel: '集装器编号', columnName: 'C1', width: 120, needFilters: 1 },
+    { columnLabel: '货物编码', columnName: 'C2', needFilters: 1 },
+    { columnLabel: '拉下', columnName: 'C3', needFilters: 1 },
+    { columnLabel: '退运', columnName: 'C4', needFilters: 1 },
+    {
+      columnLabel: '收货核单',
+      columnName: 'C5',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '安检',
+      columnName: 'C6',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '理货',
+      columnName: 'C7',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'C8',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'C9',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'C10',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C11',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'C12',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '卸机',
+      columnName: 'C13',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C14',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'C15',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      columnLabel: '提取',
+      columnName: 'C16',
+      className: 'cell-filter cell-filter-cyan',
+    },
+  ],
+  goodsFlight: [
+    { columnLabel: '航班号', columnName: 'C0' },
+    { columnLabel: '航班日期', columnName: 'C1' },
+    { columnLabel: '起飞航站\n预计起飞时间', columnName: 'C2' },
+    { columnLabel: '目的航站\n预计降落时间', columnName: 'C3' },
+    { columnLabel: '节点名称', columnName: 'C4' },
+    { columnLabel: '位置码', columnName: 'C5' },
+    { columnLabel: '位置描述', columnName: 'C6' },
+    { columnLabel: '处理时间', columnName: 'C7' },
+    { columnLabel: '处理结果', columnName: 'C8' },
+    { columnLabel: '数据来源', columnName: 'C9' },
+    { columnLabel: '设备ID', columnName: 'C10' },
+    { columnLabel: '操作人', columnName: 'C11' },
+    { columnLabel: '发往位置', columnName: 'C12' },
+    { columnLabel: '发往位置描述', columnName: 'C13' },
+    { columnLabel: '集装器编号', columnName: 'C14' },
+  ],
 }
 const simulateTableDataMap: {
   [tableName: string]: CommonData[]
@@ -112,6 +225,137 @@ const simulateTableDataMap: {
       C13: '3',
     },
   ],
+  waybillGoods: [
+    {
+      C0: 'CA1001',
+      C1: 'DOU2424U2',
+      C2: '56888829',
+      C3: 'Y',
+      C4: 'Y',
+      C5: 'A203-未通过-15:40',
+      C6: 'A203-未通过-15:40',
+      C7: 'A203-未通过-15:40',
+      C8: 'A203-未通过-15:40',
+      C9: 'A203-未通过-15:40',
+      C10: 'A203-未通过-15:40',
+      C11: 'A203-未通过-15:40',
+      C12: 'A203-未通过-15:40',
+      C13: 'A203-未通过-15:40',
+      C14: 'A203-未通过-15:40',
+      C15: 'A203-未通过-15:40',
+      C16: 'A203-未通过-15:40',
+    },
+    {
+      C0: 'CA1001',
+      C1: 'DOU2424U2',
+      C2: '56888829',
+      C3: 'Y',
+      C4: 'Y',
+      C5: 'A203-未通过-15:40',
+      C6: 'A203-未通过-15:40',
+      C7: 'A203-未通过-15:40',
+      C8: 'A203-未通过-15:40',
+      C9: 'A203-未通过-15:40',
+      C10: 'A203-未通过-15:40',
+      C11: 'A203-未通过-15:40',
+      C12: 'A203-未通过-15:40',
+      C13: 'A203-未通过-15:40',
+      C14: 'A203-未通过-15:40',
+      C15: 'A203-未通过-15:40',
+      C16: 'A203-未通过-15:40',
+    },
+    {
+      C0: 'CA1001',
+      C1: 'DOU2424U2',
+      C2: '56888829',
+      C3: 'Y',
+      C4: 'Y',
+      C5: 'A203-未通过-15:40',
+      C6: 'A203-未通过-15:40',
+      C7: 'A203-未通过-15:40',
+      C8: 'A203-未通过-15:40',
+      C9: 'A203-未通过-15:40',
+      C10: 'A203-未通过-15:40',
+      C11: 'A203-未通过-15:40',
+      C12: 'A203-未通过-15:40',
+      C13: 'A203-未通过-15:40',
+      C14: 'A203-未通过-15:40',
+      C15: 'A203-未通过-15:40',
+      C16: 'A203-未通过-15:40',
+    },
+    {
+      C0: 'CA1001',
+      C1: 'DOU2424U2',
+      C2: '56888829',
+      C3: 'Y',
+      C4: 'Y',
+      C5: 'A203-未通过-15:40',
+      C6: 'A203-未通过-15:40',
+      C7: 'A203-未通过-15:40',
+      C8: 'A203-未通过-15:40',
+      C9: 'A203-未通过-15:40',
+      C10: 'A203-未通过-15:40',
+      C11: 'A203-未通过-15:40',
+      C12: 'A203-未通过-15:40',
+      C13: 'A203-未通过-15:40',
+      C14: 'A203-未通过-15:40',
+      C15: 'A203-未通过-15:40',
+      C16: 'A203-未通过-15:40',
+    },
+  ],
+  goodsFlight: [
+    {
+      C0: 'CA1001',
+      C1: '2022/9/10',
+      C2: 'SZX-11:35',
+      C3: 'PEK-14:35',
+      C4: '机下交接',
+      C5: 'A03',
+      C6: 'A区03闸口',
+      C7: '2022/09/10 07:10',
+      C8: '通过',
+      C9: '人工扫描',
+      C10: '56',
+      C11: '张伯伦',
+      C12: 'B12',
+      C13: '货站B12闸口',
+      C14: 'DOU2329U2',
+    },
+    {
+      C0: 'CA1001',
+      C1: '2022/9/10',
+      C2: 'SZX-11:35',
+      C3: 'PEK-14:35',
+      C4: '机下交接',
+      C5: 'A03',
+      C6: 'A区03闸口',
+      C7: '2022/09/10 07:10',
+      C8: '通过',
+      C9: '人工扫描',
+      C10: '56',
+      C11: '张伯伦',
+      C12: 'B12',
+      C13: '货站B12闸口',
+      C14: 'DOU2329U2',
+    },
+    {
+      C0: 'CA1001',
+      C1: '2022/9/10',
+      C2: 'SZX-11:35',
+      C3: 'PEK-14:35',
+      C4: '机下交接',
+      C5: 'A03',
+      C6: 'A区03闸口',
+      C7: '2022/09/10 07:10',
+      C8: '通过',
+      C9: '人工扫描',
+      C10: '56',
+      C11: '张伯伦',
+      C12: 'B12',
+      C13: '货站B12闸口',
+      C14: 'DOU2329U2',
+    },
+  ],
 }
 
 export default function useTable(
@@ -134,7 +378,6 @@ export default function useTable(
       orderNumber: null,
       queryTemplateColumnSetID: null,
       queryTemplateID: null,
-      align: 'center',
       ...column,
     }))
   }
@@ -142,7 +385,7 @@ export default function useTable(
     try {
       const {
         code,
-        returnData: { columnSet, listValues },
+        returnData: { listValues },
         message,
       } = await Query<CommonData>({
         id: DATACONTENT_ID[tableName],

src/views/realTime/hooks/useTableCellClick.ts

@@ -6,7 +6,7 @@ export default function useTableCellClick(tableName?: string) {
   const cellClickHandler = (row, column, cell, event) => {
     switch (tableName) {
       case 'flightWaybill':
-        switch (column.columnName) {
+        switch (column.property) {
           case 'C0':
             router.push({
               path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
@@ -19,6 +19,20 @@ export default function useTableCellClick(tableName?: string) {
             break
         }
         break
+      case 'waybillGoods':
+        switch (column.property) {
+          case 'C2':
+            router.push({
+              path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+              query: {
+                waybillNo: row.C2,
+              },
+            })
+            break
+          default:
+            break
+        }
+        break
       default:
         break
     }
@@ -41,6 +55,6 @@ export default function useTableCellClick(tableName?: string) {
 
   return {
     cellClickHandler,
-    cellClickHandlerV2
+    cellClickHandlerV2,
   }
 }

src/views/realTime/hooks/useTableStyle.ts

@@ -14,11 +14,47 @@ const defaultCellClassV2 = 'el-table-v2__cell-text'
 export default function useTableStyle(tableName?: string) {
   const rowClass = ({ row, rowIndex }) => {
     const classes: string[] = []
+    switch (tableName) {
+      case 'flightContainer':
+        if (rowIndex === 1) {
+          classes.push('row-warning')
+        }
+        break
+      case 'flightWaybill':
+        if (rowIndex === 0) {
+          classes.push('row-alarm')
+        }
+        if (rowIndex === 1) {
+          classes.push('row-warning')
+        }
+        break
+      default:
+        break
+    }
     return classes.join(' ')
   }
 
   const cellClass = ({ row, column, rowIndex, columnIndex }) => {
     const classes: string[] = []
+    switch (tableName) {
+      case 'flightWaybill':
+        if (['C0', 'C1'].includes(column.property)) {
+          classes.push('cell-click')
+        }
+        break
+      case 'flightContainer':
+        if (['C1'].includes(column.property)) {
+          classes.push('cell-click')
+        }
+        break
+      case 'waybillGoods':
+        if (['C2'].includes(column.property)) {
+          classes.push('cell-click')
+        }
+        break
+      default:
+        break
+    }
     return classes.join(' ')
   }
 

src/views/realTime/hooks/useTrackData.ts

@@ -0,0 +1,215 @@
+import { ComputedRef, CSSProperties } from 'vue'
+import { CommonValue } from '~/common'
+import { Query } from '@/api/webApi'
+
+interface TrackNode {
+  name: string
+  flag: boolean
+  labelWidth?: number
+  descriptions: string[]
+}
+interface TrackAirport {
+  airport: string
+  isDeparture: number
+  trackSteps: TrackNode[]
+}
+interface TrackAirline {
+  flightNO: string
+  flightDate: string
+  airports: TrackAirport[]
+}
+interface TrackDataContent {
+  flightNO: string
+  flightDate: string
+  airport: string
+  isDeparture: number
+  dataContent: CommonValue[]
+}
+interface TrackNodeData {
+  C0: CommonValue // 节点名称
+  C1: CommonValue // 节点编号
+  C2: CommonValue // 总件数
+  C3: CommonValue // 时间
+}
+
+const simulateDepartureTrackNodes = [
+  {
+    id: 1,
+    name: '收货核单',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 2,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 3,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 4,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 5,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 6,
+    name: '安检',
+    flag: false,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 7,
+    name: '安检安检',
+    flag: false,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+]
+const simulateArrivalTrackNodes = [
+  {
+    id: 1,
+    name: '收货核单',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 2,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 3,
+    name: '安检',
+    flag: true,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+  {
+    id: 4,
+    name: '安检',
+    flag: false,
+    descriptions: ['A32', '534件', '通过', '10:25'],
+  },
+]
+
+export default function useTrackData(
+  trackName: string,
+  trackDataContentList: ComputedRef<TrackDataContent[]>
+) {
+  const trackAirlines = ref<TrackAirline[]>([])
+  const getTrackAirlines = async () => {
+    try {
+      trackAirlines.value = await trackDataContentList.value.reduce(
+        async (
+          pre,
+          { flightNO, airport, flightDate, isDeparture, dataContent }
+        ) => {
+          const airlines = await pre
+          const trackNodeList = await getTrackData(
+            DATACONTENT_ID[trackName],
+            dataContent
+          )
+          const trackAirport = {
+            airport,
+            isDeparture,
+            trackSteps: trackNodeList.map(({ C0, C1, C2, C3 }) => ({
+              name: String(C0 ?? ''),
+              flag: Boolean(C1 && C2 && C3),
+              descriptions: [
+                String(C1 ?? ''),
+                String(C2 ?? ''),
+                String(C3 ?? ''),
+              ],
+            })),
+          }
+          const airline = airlines.find(
+            airline =>
+              airline.flightNO === flightNO && airline.flightDate === flightDate
+          )
+          if (airline) {
+            airline.airports.push(trackAirport)
+          } else {
+            airlines.push({
+              flightNO,
+              flightDate,
+              airports: [trackAirport],
+            })
+          }
+          return airlines
+        },
+        Promise.resolve([] as TrackAirline[])
+      )
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getTrackData = async (id: number, dataContent: CommonValue[]) => {
+    try {
+      const {
+        code,
+        returnData: { listValues },
+        message,
+      } = await Query<TrackNodeData>({
+        id,
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message || '失败')
+      }
+      return listValues
+    } catch (error) {
+      return Promise.reject(error)
+    }
+  }
+
+  // watch(trackDataContentList, () => {
+  //   getTrackAirlines()
+  // })
+
+  const getSimulateTrackData = () => {
+    const length = trackName === 'waybillTrack' ? 2 : 1
+    trackAirlines.value = Array.from({ length }).map((_, index) => ({
+      flightNO: index < 1 ? 'CA1001' : 'CA1003',
+      flightDate: '2022/09/10',
+      airports: Array.from({ length: 2 }).map((_, i) => ({
+        airport: i < 1 ? '深圳机场' : '南京机场',
+        isDeparture: i < 1 ? 1 : 0,
+        trackSteps:
+          i < 1 ? simulateDepartureTrackNodes : simulateArrivalTrackNodes,
+      })),
+    }))
+  }
+  onMounted(() => {
+    getSimulateTrackData()
+  })
+
+  const trackBoxStyle = computed(
+    () => (airports: TrackAirport[], index: number) => {
+      const style: CSSProperties = {}
+      const totalLength = airports.reduce((pre, current) => {
+        return pre + current.trackSteps.length - 1
+      }, 0)
+      style.width = totalLength
+        ? `calc((100% - ${airports.length - 1} * 8px) * ${
+            (airports[index].trackSteps.length - 1) / totalLength
+          })`
+        : '100%'
+      return style
+    }
+  )
+  return {
+    trackAirlines,
+    trackBoxStyle,
+  }
+}

src/views/realTime/internationalArrival/airport/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AirportView airport-view-name="internationalArrival" />
+  <AirportView name="internationalArrival" />
 </template>
 
 <script setup lang="ts">

src/views/realTime/internationalArrival/flight/index copy.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="pageBody">
+    <div class="pageTop">
+      <div class="flightInfo">
+        <div class="airLine">{{ airLine }}</div>
+        <div class="info">
+          <div class="infoBox">
+            <div>起飞机场简称：首尔机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 19 : 30 : 25</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>特货信息/货物数：</div>
+            <div>卸载运单数/货物数：</div>
+            <div>中转进运单/货物数：</div>
+            <div>已卸载运单/货物数：</div>
+            <div>卸载数量（板/箱/卡）：</div>
+            <div>货站交接数量（板/箱/卡）：</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>降落机场简称： 深圳机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+            <div>停机位：012</div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="container">
+        <tableTemp
+          ref="domeTable"
+          :tableHeader="state.tableHeader"
+          :tableProperty="{ rowKey: 'ID',showSummary:true }"
+          :tableData="tableData"
+          @load="loadMore"
+          @cellClass="test"
+        ></tableTemp>
+      </div> -->
+    </div>
+    <div class="tableTopBtn">
+      <TBtnGroup
+        v-model:flag="state.UTCFlag"
+        @columnSet="columnSet"
+        @downLoad="downLoad"
+        @refresh="refresh"
+      ></TBtnGroup>
+      <Search @clear="clear" @search="search" />
+    </div>
+    <div class="waybillList">
+      <tableTemp
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
+    </div>
+    <tableColumnSet
+      :dialogVisible="state.dialogVisible"
+      :columnList="state.waybillTableHeader"
+      @setColumn="setColumn"
+      @closeDialog="closeDialog"
+    ></tableColumnSet>
+  </div>
+</template>
+<script setup lang="ts">
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
+
+const state = reactive({
+  tableHeader: [
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px' },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+  ],
+  waybillTableHeader: [
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click'
+    },
+    { columnLabel: '运单类型', columnName: 'waybilltype', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    {
+      columnLabel: '装载序号',
+      columnName: 'zzxh',
+      width: '80px',
+      needShow: true,
+    },
+  ],
+  listLoading: true,
+  UTCFlag: true,
+  dialogVisible: false,
+})
+
+const waybilltableData = ref([
+  {
+    waybillNo: '32535234445',
+    waybilltype: '国际普货',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '5',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '未通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+])
+
+const airLine = ref('SZX - CA4120 - NKG')
+const tableData = ref([
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+])
+
+const setError = () => {
+  waybilltableData.value.map(item => {
+    if (item.cljg == '未通过') {
+      item['rowClass'] = 'alarm'
+    }
+  })
+}
+
+const domeTable = ref(null)
+const test = row => {
+  if (row.column.property === 'score' && row.row.score > 80) {
+    domeTable.value.cellClass = 'warn'
+  } else {
+    domeTable.value.cellClass = ''
+  }
+}
+
+const loadMore = data => {
+  setError()
+  console.log(data)
+}
+
+//清空搜索
+const clear = data => {
+  console.log(data)
+}
+
+//点击搜索按钮
+const search = data => {
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh = data => {
+  console.log(data)
+}
+
+//点击下载按钮
+const downLoad = data => {
+  console.log(data)
+}
+
+//点击列设置按钮
+const columnSet = data => {
+  state.dialogVisible = true
+}
+
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
+}
+
+const closeDialog = data => {
+  state.dialogVisible = false
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'waybillNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+        query: {
+          waybillNo: row.waybillNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageTop {
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flightInfo {
+      height: 100%;
+      flex: 1;
+      background: #410425;
+      box-sizing: border-box;
+      padding: 18px 32px;
+      display: flex;
+      flex-direction: column;
+      .airLine {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        justify-items: center;
+        width: 100%;
+        max-width: 1050px;
+        flex: 1;
+        .infoBox {
+          width: calc(33.3% - 10px);
+          background: #561638;
+          padding: 10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 30px;
+        }
+        .iconBox {
+          display: flex;
+          flex-direction: column;
+          width: 60px;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .container {
+      width: 760px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+  .tableTopBtn {
+    height: 72px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .waybillList {
+    width: 100%;
+    flex: 1;
+  }
+}
+:deep.el-table .nodeHeader {
+  background: #eef3d6;
+}
+:deep.el-table .columnClassName {
+  background: #eef3d6 !important;
+}
+:deep.el-table .alarm {
+  background: #f38080 !important;
+}
+</style>

src/views/realTime/internationalArrival/flight/index.vue

@@ -1,404 +1,7 @@
 <template>
-  <div class="pageBody">
-    <div class="pageTop">
-      <div class="flightInfo">
-        <div class="airLine">{{ airLine }}</div>
-        <div class="info">
-          <div class="infoBox">
-            <div>起飞机场简称：首尔机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 19 : 30 : 25</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>特货信息/货物数：</div>
-            <div>卸载运单数/货物数：</div>
-            <div>中转进运单/货物数：</div>
-            <div>已卸载运单/货物数：</div>
-            <div>卸载数量（板/箱/卡）：</div>
-            <div>货站交接数量（板/箱/卡）：</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>降落机场简称： 深圳机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 22 : 25 : 25</div>
-            <div>停机位：012</div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="container">
-        <tableTemp
-          ref="domeTable"
-          :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID',showSummary:true }"
-          :tableData="tableData"
-          @load="loadMore"
-          @cellClass="test"
-        ></tableTemp>
-      </div> -->
-    </div>
-    <div class="tableTopBtn">
-      <TBtnGroup
-        v-model:flag="state.UTCFlag"
-        @columnSet="columnSet"
-        @downLoad="downLoad"
-        @refresh="refresh"
-      ></TBtnGroup>
-      <Search @clear="clear" @search="search" />
-    </div>
-    <div class="waybillList">
-      <tableTemp
-        ref="domeTable"
-        :tableHeader="state.waybillTableHeader"
-        :tableProperty="{ showSummary: true }"
-        :tableData="waybilltableData"
-        @load="loadMore"
-        @cellClass="test"
-        @cell-click="cellClickHandler"
-      ></tableTemp>
-    </div>
-    <tableColumnSet
-      :dialogVisible="state.dialogVisible"
-      :columnList="state.waybillTableHeader"
-      @setColumn="setColumn"
-      @closeDialog="closeDialog"
-    ></tableColumnSet>
-  </div>
+  <FlightView name="InternationalArrivalFlight" />
 </template>
-<script setup lang="ts">
-import tableTemp from '@/components/tableTemp/index.vue'
-import TBtnGroup from '@/components/TBtnGroup/index.vue'
-import tableColumnSet from '@/components/tableColumnSet/index.vue'
-import Search from '@/components/search/index.vue'
-import { CaretRight } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
-
-const state = reactive({
-  tableHeader: [
-    {
-      columnLabel: '集装器编号',
-      columnName: 'containerNo',
-      width: '120px',
-      needShow: true,
-    },
-    {
-      columnLabel: '运单数',
-      columnName: 'waybillCount',
-      width: '60px',
-      needShow: true,
-    },
-    { columnLabel: '件数', columnName: 'count', width: '60px' },
-    {
-      columnLabel: '理货',
-      columnName: 'lh',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '拉下',
-      columnName: 'lx',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '待运区',
-      columnName: 'dyq',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '货站交接',
-      columnName: 'hzjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '机下交接',
-      columnName: 'jxjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '装机',
-      columnName: 'zj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-  ],
-  waybillTableHeader: [
-    {
-      columnLabel: '运单号',
-      columnName: 'waybillNo',
-      width: '120px',
-      needShow: true,
-      columnClassName: 'cell-click'
-    },
-    { columnLabel: '运单类型', columnName: 'waybilltype', needShow: true },
-    { columnLabel: '品名', columnName: 'pm', needShow: true },
-    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
-    { columnLabel: '进港报文货物件数', columnName: 'hwjs', needShow: true },
-    { columnLabel: '进港实际货物件数', columnName: 'laxjs', needShow: true },
-    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
-    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
-    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
-    {
-      columnLabel: '处理时间',
-      columnName: 'clsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '中转出航班号', columnName: 'zzhbh', needShow: true },
-    {
-      columnLabel: '中转航班降落时间',
-      columnName: 'zzhbsj',
-      width: '130px',
-      needShow: true,
-    },
-    {
-      columnLabel: '装载序号',
-      columnName: 'zzxh',
-      width: '80px',
-      needShow: true,
-    },
-  ],
-  listLoading: true,
-  UTCFlag: true,
-  dialogVisible: false,
-})
-
-const waybilltableData = ref([
-  {
-    waybillNo: '32535234445',
-    waybilltype: '国际普货',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '5',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '未通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-])
-
-const airLine = ref('SZX - CA4120 - NKG')
-const tableData = ref([
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-])
-
-const setError = () => {
-  waybilltableData.value.map(item => {
-    if (item.cljg == '未通过') {
-      item['rowClass'] = 'alarm'
-    }
-  })
-}
-
-const domeTable = ref(null)
-const test = row => {
-  if (row.column.property === 'score' && row.row.score > 80) {
-    domeTable.value.cellClass = 'warn'
-  } else {
-    domeTable.value.cellClass = ''
-  }
-}
-
-const loadMore = data => {
-  setError()
-  console.log(data)
-}
-
-//清空搜索
-const clear = data => {
-  console.log(data)
-}
 
-//点击搜索按钮
-const search = data => {
-  console.log(data)
-}
-
-//点击刷新按钮
-const refresh = data => {
-  console.log(data)
-}
-
-//点击下载按钮
-const downLoad = data => {
-  console.log(data)
-}
-
-//点击列设置按钮
-const columnSet = data => {
-  state.dialogVisible = true
-}
-
-const setColumn = data => {
-  state.waybillTableHeader = data
-  state.dialogVisible = false
-}
-
-const closeDialog = data => {
-  state.dialogVisible = false
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'waybillNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
-        query: {
-          waybillNo: row.waybillNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+<script setup lang="ts">
+import FlightView from '../../components/FlightView/index.vue'
 </script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  .pageTop {
-    width: 100%;
-    height: 345px;
-    display: flex;
-    .flightInfo {
-      height: 100%;
-      flex: 1;
-      background: #410425;
-      box-sizing: border-box;
-      padding: 18px 32px;
-      display: flex;
-      flex-direction: column;
-      .airLine {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        width: 100%;
-        margin-bottom: 16px;
-      }
-      .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        justify-items: center;
-        width: 100%;
-        max-width: 1050px;
-        flex: 1;
-        .infoBox {
-          width: calc(33.3% - 10px);
-          background: #561638;
-          padding: 10px 15px;
-          box-sizing: border-box;
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 30px;
-        }
-        .iconBox {
-          display: flex;
-          flex-direction: column;
-          width: 60px;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-    .container {
-      width: 760px;
-      height: 100%;
-      margin-left: 16px;
-    }
-  }
-  .tableTopBtn {
-    height: 72px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .waybillList {
-    width: 100%;
-    flex: 1;
-  }
-}
-:deep.el-table .nodeHeader {
-  background: #eef3d6;
-}
-:deep.el-table .columnClassName {
-  background: #eef3d6 !important;
-}
-:deep.el-table .alarm {
-  background: #f38080 !important;
-}
-</style>

src/views/realTime/internationalArrival/goods/index copy.vue

@@ -0,0 +1,272 @@
+<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>
+        <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">
+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 = [
+  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
+  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
+  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
+  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
+  { columnLabel: "节点名称", columnName: "return", needShow: true },
+  { columnLabel: "位置码", columnName: "receipt", needShow: true },
+  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
+  { columnLabel: "处理时间", columnName: "tally", needShow: true },
+  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
+  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
+  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
+  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
+  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
+  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
+];
+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 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/realTime/internationalArrival/goods/index.vue

@@ -1,272 +1,9 @@
 <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>
-        <Steps :datas="datas" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table height="calc(100vh - 540px)" :tableHeader="tableHeader" :tableData="tableData" />
-    </div>
-  </div>
+  <GoodsView />
 </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",
-  },
-  {
-    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 = [
-  { columnLabel: "航班号", columnName: "fightNo", needShow: true },
-  { columnLabel: "航班日期", columnName: "containerNo", needShow: true },
-  { columnLabel: "起飞航站-预计起飞时间", columnName: "goodsNo", needShow: true },
-  { columnLabel: "目的航站-预计降落时间", columnName: "dwon1", needShow: true },
-  { columnLabel: "节点名称", columnName: "return", needShow: true },
-  { columnLabel: "位置码", columnName: "receipt", needShow: true },
-  { columnLabel: "位置描述", columnName: "securityCheck", needShow: true },
-  { columnLabel: "处理时间", columnName: "tally", needShow: true },
-  { columnLabel: "处理结果", columnName: "dwon2", needShow: true },
-  { columnLabel: "数据来源", columnName: "waitingArea", needShow: true },
-  { columnLabel: "设备ID", columnName: "goodSstation1", needShow: true },
-  { columnLabel: "操作人", columnName: "offBoard1", needShow: true },
-  { columnLabel: "发往位置", columnName: "installEquipment", needShow: true },
-  { columnLabel: "发往位置描述", columnName: "unloading", needShow: true },
-];
-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(`清除`);
-};
+import GoodsView from '../../components/GoodsView/index.vue'
 </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;
-      flex: 1;
-    }
-    &-right {
-      flex: 1;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    margin-top: 16px;
-    .scoreColumn {
-      background: #eef3d6;
-    }
-  }
-}
-</style>
+<style scoped></style>

src/views/realTime/internationalArrival/waybill/index copy.vue

@@ -0,0 +1,392 @@
+<template>
+  <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"
+        @cell-click="cellClickHandler"
+      />
+    </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: 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 = [
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  {
+    columnLabel: '货物编码',
+    columnName: 'goodsNo',
+    needShow: true,
+    columnClassName: 'cell-click',
+  },
+  { columnLabel: '中转', columnName: 'dwon1', needShow: true },
+  { columnLabel: '退运', columnName: 'containerNo', needShow: true },
+  { columnLabel: '海关异常', columnName: 'return', needShow: true },
+  {
+    columnLabel: '卸机',
+    columnName: 'receipt',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '机下交接',
+    columnName: 'securityCheck',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '货站交接',
+    columnName: 'tally',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '理货',
+    columnName: 'dwon2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '海关',
+    columnName: 'waitingArea',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '出库',
+    columnName: 'goodSstation1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '退运',
+    columnName: 'offBoard1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+]
+const tableData = [
+  {
+    id: 1,
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 2,
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 3,
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 4,
+    fightNo: 'CA1001',
+    containerNo: 'Y',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+]
+const search = val => {
+  ElMessage.success(`搜索成功：${val}`)
+}
+const clear = () => {
+  ElMessage.success(`清除`)
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</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;
+    }
+  }
+  &-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;
+    }
+    &-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/realTime/internationalArrival/waybill/index.vue

@@ -1,392 +1,9 @@
 <template>
-  <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"
-        @cell-click="cellClickHandler"
-      />
-    </div>
-  </div>
+  <WaybillView/>
 </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: 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 = [
-  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
-  {
-    columnLabel: '货物编码',
-    columnName: 'goodsNo',
-    needShow: true,
-    columnClassName: 'cell-click',
-  },
-  { columnLabel: '中转', columnName: 'dwon1', needShow: true },
-  { columnLabel: '退运', columnName: 'containerNo', needShow: true },
-  { columnLabel: '海关异常', columnName: 'return', needShow: true },
-  {
-    columnLabel: '卸机',
-    columnName: 'receipt',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '机下交接',
-    columnName: 'securityCheck',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '货站交接',
-    columnName: 'tally',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '理货',
-    columnName: 'dwon2',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '海关',
-    columnName: 'waitingArea',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '出库',
-    columnName: 'goodSstation1',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '退运',
-    columnName: 'offBoard1',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-]
-const tableData = [
-  {
-    id: 1,
-    fightNo: 'CA1001',
-    containerNo: 'Y',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 2,
-    fightNo: 'CA1001',
-    containerNo: 'Y',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 3,
-    fightNo: 'CA1001',
-    containerNo: 'Y',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 4,
-    fightNo: 'CA1001',
-    containerNo: 'Y',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-]
-const search = val => {
-  ElMessage.success(`搜索成功：${val}`)
-}
-const clear = () => {
-  ElMessage.success(`清除`)
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'goodsNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
-        query: {
-          goodsNo: row.goodsNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+import WaybillView from '../../components/WaybillView/index.vue'
 </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;
-    }
-  }
-  &-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;
-    }
-    &-right {
-      flex: 1;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    margin-top: 16px;
-    .scoreColumn {
-      background: #eef3d6 !important;
-    }
-    .scoreColumn2 {
-      background: #d6e6f3 !important;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/views/realTime/internationalDeparture/airport/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AirportView airport-view-name="internationalDeparture" />
+  <AirportView name="internationalDeparture" />
 </template>
 
 <script setup lang="ts">

src/views/realTime/internationalDeparture/flight/index copy.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="pageBody">
+    <div class="pageTop">
+      <div class="flightInfo">
+        <div class="airLine">{{ airLine }}</div>
+        <div class="info">
+          <div class="infoBox">
+            <div>起飞机场简称：深圳机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 19 : 30 : 25</div>
+            <div>停机位：012</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>特货信息/货物数：</div>
+            <div>托运运单数/货物数：</div>
+            <div>中转进运单/货物数：</div>
+            <div>已配载集装器：</div>
+            <div>货站已交接集装器：</div>
+            <div>已装载集装器/运单/货物数：</div>
+            <div>拉下集装器/运单/货物数：</div>
+            <div>集装器数量：</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>降落机场简称： 南京机场</div>
+            <div>日期 ： 2021-12-24</div>
+            <div>时间： 22 : 25 : 25</div>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <tableTemp
+          ref="domeTable"
+          :tableHeader="state.tableHeader"
+          :tableProperty="{ rowKey: 'ID', showSummary: true }"
+          :tableData="tableData"
+          @load="loadMore"
+          @cellClass="test"
+        ></tableTemp>
+      </div>
+    </div>
+    <div class="tableTopBtn">
+      <TBtnGroup
+        v-model:flag="state.UTCFlag"
+        @columnSet="columnSet"
+        @downLoad="downLoad"
+        @refresh="refresh"
+      ></TBtnGroup>
+      <Search @clear="clear" @search="search" />
+    </div>
+    <div class="waybillList">
+      <tableTemp
+        ref="domeTable"
+        :tableHeader="state.waybillTableHeader"
+        :tableProperty="{ showSummary: true }"
+        :tableData="waybilltableData"
+        @load="loadMore"
+        @cellClass="test"
+        @cell-click="cellClickHandler"
+      ></tableTemp>
+    </div>
+    <tableColumnSet
+      :dialogVisible="state.dialogVisible"
+      :columnList="state.waybillTableHeader"
+      @setColumn="setColumn"
+      @closeDialog="closeDialog"
+    ></tableColumnSet>
+  </div>
+</template>
+<script setup lang="ts">
+import tableTemp from '@/components/tableTemp/index.vue'
+import TBtnGroup from '@/components/TBtnGroup/index.vue'
+import tableColumnSet from '@/components/tableColumnSet/index.vue'
+import Search from '@/components/search/index.vue'
+import { CaretRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
+
+const state = reactive({
+  tableHeader: [
+    {
+      columnLabel: '集装器编号',
+      columnName: 'containerNo',
+      width: '120px',
+      needShow: true,
+    },
+    {
+      columnLabel: '运单数',
+      columnName: 'waybillCount',
+      width: '60px',
+      needShow: true,
+    },
+    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
+    {
+      columnLabel: '理货',
+      columnName: 'lh',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '拉下',
+      columnName: 'lx',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '待运区',
+      columnName: 'dyq',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'hzjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'jxjj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'zj',
+      lableClass: 'nodeHeader',
+      columnClassName: 'columnClassName',
+      needShow: true,
+    },
+  ],
+  waybillTableHeader: [
+    {
+      columnLabel: '运单号',
+      columnName: 'waybillNo',
+      width: '120px',
+      needShow: true,
+      columnClassName: 'cell-click',
+    },
+    { columnLabel: '运单类型', columnName: 'waybillType', needShow: true },
+    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
+    { columnLabel: '品名', columnName: 'pm', needShow: true },
+    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
+    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
+    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
+    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
+    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
+    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
+    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
+    {
+      columnLabel: '处理时间',
+      columnName: 'clsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
+    {
+      columnLabel: '中转航班降落时间',
+      columnName: 'zzhbsj',
+      width: '130px',
+      needShow: true,
+    },
+    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
+  ],
+  listLoading: true,
+  UTCFlag: true,
+  dialogVisible: false,
+})
+
+const waybilltableData = ref([
+  {
+    waybillNo: '32535234445',
+    waybillType: '国际普货',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+  {
+    waybillNo: '32535234445',
+    jzqCount: '5',
+    pm: '手机、充电器',
+    thxx: '特',
+    hwjs: '5',
+    laxjs: '2',
+    tyjs: '2',
+    zxjd: '待运区',
+    zxwz: 'A13',
+    cljg: '未通过',
+    clsj: '2022/9/10 10:01',
+    zzhbh: 'ZH5466',
+    zzhbsj: '2022/9/10 16:01',
+    zzxh: '3',
+  },
+])
+
+const airLine = ref('SZX - CA4120 - NKG')
+const tableData = ref([
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+  {
+    containerNo: 'DOU29800001',
+    waybillCount: '5',
+    count: '50',
+    lh: 'C24  11:01',
+    lx: 'F24  12:05',
+    dyq: 'D32  11:25',
+    hzjj: 'E24  11:40',
+    jxjj: 'F24  12:01',
+    zj: 'G32  12:25',
+  },
+])
+
+const setError = () => {
+  waybilltableData.value.map(item => {
+    if (item.cljg == '未通过') {
+      item['rowClass'] = 'alarm'
+    }
+  })
+}
+
+const domeTable = ref(null)
+const test = row => {
+  if (row.column.property === 'score' && row.row.score > 80) {
+    domeTable.value.cellClass = 'warn'
+  } else {
+    domeTable.value.cellClass = ''
+  }
+}
+
+const loadMore = data => {
+  setError()
+  console.log(data)
+}
+
+//清空搜索
+const clear = data => {
+  console.log(data)
+}
+
+//点击搜索按钮
+const search = data => {
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh = data => {
+  console.log(data)
+}
+
+//点击下载按钮
+const downLoad = data => {
+  console.log(data)
+}
+
+//点击列设置按钮
+const columnSet = data => {
+  state.dialogVisible = true
+}
+
+const setColumn = data => {
+  state.waybillTableHeader = data
+  state.dialogVisible = false
+}
+
+const closeDialog = data => {
+  state.dialogVisible = false
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'waybillNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+        query: {
+          waybillNo: row.waybillNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pageBody {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageTop {
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flightInfo {
+      height: 100%;
+      flex: 1;
+      background: #410425;
+      box-sizing: border-box;
+      padding: 18px 32px;
+      display: flex;
+      flex-direction: column;
+      .airLine {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        justify-items: center;
+        width: 100%;
+        max-width: 1050px;
+        flex: 1;
+        .infoBox {
+          width: calc(33.3% - 10px);
+          background: #561638;
+          padding: 10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 30px;
+        }
+        .iconBox {
+          display: flex;
+          flex-direction: column;
+          width: 60px;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .container {
+      width: 760px;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+  .tableTopBtn {
+    height: 72px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .waybillList {
+    width: 100%;
+    flex: 1;
+  }
+}
+:deep.el-table .nodeHeader {
+  background: #eef3d6;
+}
+:deep.el-table .columnClassName {
+  background: #eef3d6 !important;
+}
+:deep.el-table .alarm {
+  background: #f38080 !important;
+}
+</style>

src/views/realTime/internationalDeparture/flight/index.vue

@@ -1,409 +1,7 @@
 <template>
-  <div class="pageBody">
-    <div class="pageTop">
-      <div class="flightInfo">
-        <div class="airLine">{{ airLine }}</div>
-        <div class="info">
-          <div class="infoBox">
-            <div>起飞机场简称：深圳机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 19 : 30 : 25</div>
-            <div>停机位：012</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>特货信息/货物数：</div>
-            <div>托运运单数/货物数：</div>
-            <div>中转进运单/货物数：</div>
-            <div>已配载集装器：</div>
-            <div>货站已交接集装器：</div>
-            <div>已装载集装器/运单/货物数：</div>
-            <div>拉下集装器/运单/货物数：</div>
-            <div>集装器数量：</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="infoBox">
-            <div>降落机场简称： 南京机场</div>
-            <div>日期 ： 2021-12-24</div>
-            <div>时间： 22 : 25 : 25</div>
-          </div>
-        </div>
-      </div>
-      <div class="container">
-        <tableTemp
-          ref="domeTable"
-          :tableHeader="state.tableHeader"
-          :tableProperty="{ rowKey: 'ID', showSummary: true }"
-          :tableData="tableData"
-          @load="loadMore"
-          @cellClass="test"
-        ></tableTemp>
-      </div>
-    </div>
-    <div class="tableTopBtn">
-      <TBtnGroup
-        v-model:flag="state.UTCFlag"
-        @columnSet="columnSet"
-        @downLoad="downLoad"
-        @refresh="refresh"
-      ></TBtnGroup>
-      <Search @clear="clear" @search="search" />
-    </div>
-    <div class="waybillList">
-      <tableTemp
-        ref="domeTable"
-        :tableHeader="state.waybillTableHeader"
-        :tableProperty="{ showSummary: true }"
-        :tableData="waybilltableData"
-        @load="loadMore"
-        @cellClass="test"
-        @cell-click="cellClickHandler"
-      ></tableTemp>
-    </div>
-    <tableColumnSet
-      :dialogVisible="state.dialogVisible"
-      :columnList="state.waybillTableHeader"
-      @setColumn="setColumn"
-      @closeDialog="closeDialog"
-    ></tableColumnSet>
-  </div>
+  <FlightView name="InternationalDepartureFlight" />
 </template>
-<script setup lang="ts">
-import tableTemp from '@/components/tableTemp/index.vue'
-import TBtnGroup from '@/components/TBtnGroup/index.vue'
-import tableColumnSet from '@/components/tableColumnSet/index.vue'
-import Search from '@/components/search/index.vue'
-import { CaretRight } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
-
-const state = reactive({
-  tableHeader: [
-    {
-      columnLabel: '集装器编号',
-      columnName: 'containerNo',
-      width: '120px',
-      needShow: true,
-    },
-    {
-      columnLabel: '运单数',
-      columnName: 'waybillCount',
-      width: '60px',
-      needShow: true,
-    },
-    { columnLabel: '件数', columnName: 'count', width: '60px', needShow: true },
-    {
-      columnLabel: '理货',
-      columnName: 'lh',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '拉下',
-      columnName: 'lx',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '待运区',
-      columnName: 'dyq',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '货站交接',
-      columnName: 'hzjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '机下交接',
-      columnName: 'jxjj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-    {
-      columnLabel: '装机',
-      columnName: 'zj',
-      lableClass: 'nodeHeader',
-      columnClassName: 'columnClassName',
-      needShow: true,
-    },
-  ],
-  waybillTableHeader: [
-    {
-      columnLabel: '运单号',
-      columnName: 'waybillNo',
-      width: '120px',
-      needShow: true,
-      columnClassName: 'cell-click',
-    },
-    { columnLabel: '运单类型', columnName: 'waybillType', needShow: true },
-    { columnLabel: '集装器数量', columnName: 'jzqCount', needShow: true },
-    { columnLabel: '品名', columnName: 'pm', needShow: true },
-    { columnLabel: '特货信息', columnName: 'thxx', needShow: true },
-    { columnLabel: '货物件数', columnName: 'hwjs', needShow: true },
-    { columnLabel: '拉下件数', columnName: 'laxjs', needShow: true },
-    { columnLabel: '退运件数', columnName: 'tyjs', needShow: true },
-    { columnLabel: '最新节点', columnName: 'zxjd', needShow: true },
-    { columnLabel: '最新位置', columnName: 'zxwz', needShow: true },
-    { columnLabel: '处理结果', columnName: 'cljg', needShow: true },
-    {
-      columnLabel: '处理时间',
-      columnName: 'clsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '中转进航班号', columnName: 'zzhbh', needShow: true },
-    {
-      columnLabel: '中转航班降落时间',
-      columnName: 'zzhbsj',
-      width: '130px',
-      needShow: true,
-    },
-    { columnLabel: '装载序号', columnName: 'zzxh', needShow: true },
-  ],
-  listLoading: true,
-  UTCFlag: true,
-  dialogVisible: false,
-})
-
-const waybilltableData = ref([
-  {
-    waybillNo: '32535234445',
-    waybillType: '国际普货',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-  {
-    waybillNo: '32535234445',
-    jzqCount: '5',
-    pm: '手机、充电器',
-    thxx: '特',
-    hwjs: '5',
-    laxjs: '2',
-    tyjs: '2',
-    zxjd: '待运区',
-    zxwz: 'A13',
-    cljg: '未通过',
-    clsj: '2022/9/10 10:01',
-    zzhbh: 'ZH5466',
-    zzhbsj: '2022/9/10 16:01',
-    zzxh: '3',
-  },
-])
-
-const airLine = ref('SZX - CA4120 - NKG')
-const tableData = ref([
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-  {
-    containerNo: 'DOU29800001',
-    waybillCount: '5',
-    count: '50',
-    lh: 'C24  11:01',
-    lx: 'F24  12:05',
-    dyq: 'D32  11:25',
-    hzjj: 'E24  11:40',
-    jxjj: 'F24  12:01',
-    zj: 'G32  12:25',
-  },
-])
-
-const setError = () => {
-  waybilltableData.value.map(item => {
-    if (item.cljg == '未通过') {
-      item['rowClass'] = 'alarm'
-    }
-  })
-}
-
-const domeTable = ref(null)
-const test = row => {
-  if (row.column.property === 'score' && row.row.score > 80) {
-    domeTable.value.cellClass = 'warn'
-  } else {
-    domeTable.value.cellClass = ''
-  }
-}
-
-const loadMore = data => {
-  setError()
-  console.log(data)
-}
-
-//清空搜索
-const clear = data => {
-  console.log(data)
-}
 
-//点击搜索按钮
-const search = data => {
-  console.log(data)
-}
-
-//点击刷新按钮
-const refresh = data => {
-  console.log(data)
-}
-
-//点击下载按钮
-const downLoad = data => {
-  console.log(data)
-}
-
-//点击列设置按钮
-const columnSet = data => {
-  state.dialogVisible = true
-}
-
-const setColumn = data => {
-  state.waybillTableHeader = data
-  state.dialogVisible = false
-}
-
-const closeDialog = data => {
-  state.dialogVisible = false
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'waybillNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
-        query: {
-          waybillNo: row.waybillNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+<script setup lang="ts">
+import FlightView from '../../components/FlightView/index.vue'
 </script>
-<style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  .pageTop {
-    width: 100%;
-    height: 345px;
-    display: flex;
-    .flightInfo {
-      height: 100%;
-      flex: 1;
-      background: #410425;
-      box-sizing: border-box;
-      padding: 18px 32px;
-      display: flex;
-      flex-direction: column;
-      .airLine {
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        width: 100%;
-        margin-bottom: 16px;
-      }
-      .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        justify-items: center;
-        width: 100%;
-        max-width: 1050px;
-        flex: 1;
-        .infoBox {
-          width: calc(33.3% - 10px);
-          background: #561638;
-          padding: 10px 15px;
-          box-sizing: border-box;
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 30px;
-        }
-        .iconBox {
-          display: flex;
-          flex-direction: column;
-          width: 60px;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-    .container {
-      width: 760px;
-      height: 100%;
-      margin-left: 16px;
-    }
-  }
-  .tableTopBtn {
-    height: 72px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .waybillList {
-    width: 100%;
-    flex: 1;
-  }
-}
-:deep.el-table .nodeHeader {
-  background: #eef3d6;
-}
-:deep.el-table .columnClassName {
-  background: #eef3d6 !important;
-}
-:deep.el-table .alarm {
-  background: #f38080 !important;
-}
-</style>

src/views/realTime/internationalDeparture/goods/index copy.vue

@@ -0,0 +1,288 @@
+<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>
+        <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">
+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 = [
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  { columnLabel: '航班日期', columnName: 'containerNo', needShow: true },
+  {
+    columnLabel: '起飞航站-预计起飞时间',
+    columnName: 'goodsNo',
+    needShow: true,
+  },
+  { columnLabel: '目的航站-预计降落时间', columnName: 'dwon1', needShow: true },
+  { columnLabel: '节点名称', columnName: 'return', needShow: true },
+  { columnLabel: '位置码', columnName: 'receipt', needShow: true },
+  { columnLabel: '位置描述', columnName: 'securityCheck', needShow: true },
+  { columnLabel: '处理时间', columnName: 'tally', needShow: true },
+  { columnLabel: '处理结果', columnName: 'dwon2', needShow: true },
+  { columnLabel: '数据来源', columnName: 'waitingArea', needShow: true },
+  { columnLabel: '设备ID', columnName: 'goodSstation1', needShow: true },
+  { columnLabel: '操作人', columnName: 'offBoard1', needShow: true },
+  { columnLabel: '发往位置', columnName: 'installEquipment', needShow: true },
+  { columnLabel: '发往位置描述', columnName: 'unloading', needShow: true },
+  { columnLabel: '集装器编号', columnName: 'demo', needShow: true },
+]
+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 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/realTime/internationalDeparture/goods/index.vue

@@ -1,288 +1,9 @@
 <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>
-        <Steps :datas="datas" />
-      </div>
-    </div>
-    <div class="station-table">
-      <Table
-        height="calc(100vh - 540px)"
-        :tableHeader="tableHeader"
-        :tableData="tableData"
-      />
-    </div>
-  </div>
+  <GoodsView />
 </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',
-  },
-  {
-    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 = [
-  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
-  { columnLabel: '航班日期', columnName: 'containerNo', needShow: true },
-  {
-    columnLabel: '起飞航站-预计起飞时间',
-    columnName: 'goodsNo',
-    needShow: true,
-  },
-  { columnLabel: '目的航站-预计降落时间', columnName: 'dwon1', needShow: true },
-  { columnLabel: '节点名称', columnName: 'return', needShow: true },
-  { columnLabel: '位置码', columnName: 'receipt', needShow: true },
-  { columnLabel: '位置描述', columnName: 'securityCheck', needShow: true },
-  { columnLabel: '处理时间', columnName: 'tally', needShow: true },
-  { columnLabel: '处理结果', columnName: 'dwon2', needShow: true },
-  { columnLabel: '数据来源', columnName: 'waitingArea', needShow: true },
-  { columnLabel: '设备ID', columnName: 'goodSstation1', needShow: true },
-  { columnLabel: '操作人', columnName: 'offBoard1', needShow: true },
-  { columnLabel: '发往位置', columnName: 'installEquipment', needShow: true },
-  { columnLabel: '发往位置描述', columnName: 'unloading', needShow: true },
-  { columnLabel: '集装器编号', columnName: 'demo', needShow: true },
-]
-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(`清除`)
-}
+import GoodsView from '../../components/GoodsView/index.vue'
 </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;
-      flex: 1;
-    }
-    &-right {
-      flex: 1;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    margin-top: 16px;
-    .scoreColumn {
-      background: #eef3d6;
-    }
-  }
-}
-</style>
+<style scoped></style>

src/views/realTime/internationalDeparture/waybill/index copy.vue

@@ -0,0 +1,420 @@
+<template>
+  <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"
+        @cell-click="cellClickHandler"
+      />
+    </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: 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 = [
+  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
+  { columnLabel: '集装器编号', columnName: 'containerNo', needShow: true },
+  {
+    columnLabel: '货物编码',
+    columnName: 'goodsNo',
+    needShow: true,
+    columnClassName: 'cell-click',
+  },
+  { columnLabel: '拉下', columnName: 'dwon1', needShow: true },
+  { columnLabel: '退运', columnName: 'return', needShow: true },
+  {
+    columnLabel: '入园',
+    columnName: 'receipt',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '海关',
+    columnName: 'securityCheck',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '运抵',
+    columnName: 'tally',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '安检',
+    columnName: 'dwon2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '收运核单',
+    columnName: 'waitingArea',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '理货',
+    columnName: 'goodSstation1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '拉下',
+    columnName: 'offBoard1',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '待运区',
+    columnName: 'installEquipment',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '货站交接',
+    columnName: 'unloading',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '机下交接',
+    columnName: 'offBoard2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+  {
+    columnLabel: '提取',
+    columnName: 'goodSstation2',
+    lableClass: 'scoreColumn',
+    columnClassName: 'scoreColumn',
+    needShow: true,
+  },
+]
+const tableData = [
+  {
+    id: 1,
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 2,
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 3,
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+  {
+    id: 4,
+    fightNo: 'CA1001',
+    containerNo: 'DOU2424U2',
+    goodsNo: '56888829',
+    dwon1: 'Y',
+    return: 'Y',
+    receipt: 'A203-未通过-15:40',
+    securityCheck: 'A203-未通过-15:40',
+    tally: 'A203-未通过-15:40',
+    dwon2: 'A203-未通过-15:40',
+    waitingArea: 'A203-未通过-15:40',
+    goodSstation1: 'A203-未通过-15:40',
+    offBoard1: 'A203-未通过-15:40',
+    installEquipment: 'A203-未通过-15:40',
+    unloading: 'A203-未通过-15:40',
+    offBoard2: 'A203-未通过-15:40',
+    goodSstation2: 'A203-未通过-15:40',
+    extract: 'A203-未通过-15:40',
+  },
+]
+const search = val => {
+  ElMessage.success(`搜索成功：${val}`)
+}
+const clear = () => {
+  ElMessage.success(`清除`)
+}
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch (column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo,
+        },
+      })
+      break
+    default:
+      break
+  }
+}
+</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;
+    }
+  }
+  &-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;
+    }
+    &-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/realTime/internationalDeparture/waybill/index.vue

@@ -1,420 +1,9 @@
 <template>
-  <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"
-        @cell-click="cellClickHandler"
-      />
-    </div>
-  </div>
+  <WaybillView />
 </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: 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 = [
-  { columnLabel: '航班号', columnName: 'fightNo', needShow: true },
-  { columnLabel: '集装器编号', columnName: 'containerNo', needShow: true },
-  {
-    columnLabel: '货物编码',
-    columnName: 'goodsNo',
-    needShow: true,
-    columnClassName: 'cell-click',
-  },
-  { columnLabel: '拉下', columnName: 'dwon1', needShow: true },
-  { columnLabel: '退运', columnName: 'return', needShow: true },
-  {
-    columnLabel: '入园',
-    columnName: 'receipt',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '海关',
-    columnName: 'securityCheck',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '运抵',
-    columnName: 'tally',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '安检',
-    columnName: 'dwon2',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '收运核单',
-    columnName: 'waitingArea',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '理货',
-    columnName: 'goodSstation1',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '拉下',
-    columnName: 'offBoard1',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '待运区',
-    columnName: 'installEquipment',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '货站交接',
-    columnName: 'unloading',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '机下交接',
-    columnName: 'offBoard2',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-  {
-    columnLabel: '提取',
-    columnName: 'goodSstation2',
-    lableClass: 'scoreColumn',
-    columnClassName: 'scoreColumn',
-    needShow: true,
-  },
-]
-const tableData = [
-  {
-    id: 1,
-    fightNo: 'CA1001',
-    containerNo: 'DOU2424U2',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 2,
-    fightNo: 'CA1001',
-    containerNo: 'DOU2424U2',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 3,
-    fightNo: 'CA1001',
-    containerNo: 'DOU2424U2',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-  {
-    id: 4,
-    fightNo: 'CA1001',
-    containerNo: 'DOU2424U2',
-    goodsNo: '56888829',
-    dwon1: 'Y',
-    return: 'Y',
-    receipt: 'A203-未通过-15:40',
-    securityCheck: 'A203-未通过-15:40',
-    tally: 'A203-未通过-15:40',
-    dwon2: 'A203-未通过-15:40',
-    waitingArea: 'A203-未通过-15:40',
-    goodSstation1: 'A203-未通过-15:40',
-    offBoard1: 'A203-未通过-15:40',
-    installEquipment: 'A203-未通过-15:40',
-    unloading: 'A203-未通过-15:40',
-    offBoard2: 'A203-未通过-15:40',
-    goodSstation2: 'A203-未通过-15:40',
-    extract: 'A203-未通过-15:40',
-  },
-]
-const search = val => {
-  ElMessage.success(`搜索成功：${val}`)
-}
-const clear = () => {
-  ElMessage.success(`清除`)
-}
-
-const router = useRouter()
-const route = useRoute()
-const cellClickHandler = (row, column, cell, event) => {
-  switch (column.property) {
-    case 'goodsNo':
-      router.push({
-        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
-        query: {
-          goodsNo: row.goodsNo,
-        },
-      })
-      break
-    default:
-      break
-  }
-}
+import WaybillView from '../../components/WaybillView/index.vue'
 </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;
-    }
-  }
-  &-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;
-    }
-    &-right {
-      flex: 1;
-      background: #ffffff;
-      padding: 24px 24px 12px 24px;
-    }
-  }
-  :deep &-table {
-    margin-top: 16px;
-    .scoreColumn {
-      background: #eef3d6 !important;
-    }
-    .scoreColumn2 {
-      background: #d6e6f3 !important;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>