实时视图修改

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

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

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

@@ -51,7 +51,7 @@
       </el-select>
     </el-form-item>
     <el-form-item
-      v-if="international"
+      v-if="name.includes('International')"
       :prop="formData.waybillType"
       style="width: 104px"
     >
@@ -75,9 +75,9 @@
 import { parseTime } from '@/utils/validate'
 
 const props = defineProps({
-  international: {
-    type: Boolean,
-    default: false,
+  name: {
+    type: String,
+    required: true,
   },
 })
 

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

@@ -87,7 +87,7 @@
                 display: block;
                 background-color: #f6cda5;
               }
-              &.cell-error .cell-background {
+              &.cell-alarm .cell-background {
                 display: block;
                 background-color: #f38080;
               }

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

@@ -1,10 +1,7 @@
 <template>
   <div class="airport-view">
     <div class="airport-header">
-      <AirportForm
-        :international="international"
-        @form-data-change="formDataChangeHandler"
-      />
+      <AirportForm :name="name" @form-data-change="formDataChangeHandler" />
       <div class="airport-count">
         <CountBox
           :count-number="tableDataCount.waybillCount"
@@ -77,7 +74,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { PropType } from 'vue'
 import type { CellSlotProps } from '../../type'
 import AirportForm from './AirportForm.vue'
 import ColumnSet from '../../components/ColumnSet/index.vue'
@@ -92,24 +88,13 @@ import useTableFilterAndSort from '@/hooks/useTableFilterAndSort'
 import { HeaderCellSlotProps } from 'element-plus'
 import { CommonData } from '~/common'
 
-type ViewName =
-  | 'departure'
-  | 'arrival'
-  | 'internationalDeparture'
-  | 'internationalArrival'
-
 const props = defineProps({
   name: {
-    type: String as PropType<ViewName>,
+    type: String,
     required: true,
   },
 })
 
-const international = computed(() =>
-  ['internationalDeparture', 'internationalArrival'].includes(
-    props.name
-  )
-)
 const formData = reactive<CommonData>({})
 const formDataChangeHandler = (data: CommonData) => {
   Object.assign(formData, data)
@@ -118,13 +103,9 @@ const formDataChangeHandler = (data: CommonData) => {
 const goodsCountFlag = ref(true)
 const UTCFlag = ref(true)
 
-const { tableColumns, tableData } = useAirportTable(
-  props.name,
-  formData,
-  international
-)
+const { tableColumns, tableData } = useAirportTable(props.name, formData)
 const { columnChecked } = useTableColumnSet(tableColumns)
-const { rowClassV2, cellClassV2 } = useTableStyle('airport')
+const { rowClassV2, cellClassV2 } = useTableStyle(props.name)
 
 const tableDataCount = computed(() => ({
   waybillCount: tableData.value.length,
@@ -135,7 +116,7 @@ const tableDataCount = computed(() => ({
   takeOffCount: tableData.value.length,
 }))
 
-const { cellClickHandlerV2 } = useTableCellClick()
+const { cellClickHandlerV2 } = useTableCellClick(props.name)
 
 const {
   filterOptionMap,

src/views/realTime/components/AirportView/useAirportTable.ts

@@ -1,197 +1,197 @@
-import { Ref } from 'vue'
 import { Query } from '@/api/webApi'
 import { CommonData, CommonTableColumn } from '~/common'
 
-const departureColumnGroups = [
-  {
-    groupName: '航班相关',
-    children: [
-      {
-        columnName: 'flightNO',
-        columnLabel: '航班号',
-      },
-      {
-        columnName: 'flightDate',
-        columnLabel: '执飞日期',
-      },
-      {
-        columnName: 'planDepartureTime',
-        columnLabel: '起飞时间',
-      },
-      {
-        columnName: 'landingAirport',
-        columnLabel: '目的站',
-      },
-      {
-        columnName: 'takeOffStand',
-        columnLabel: '停机位',
-      },
-      {
-        columnName: 'inFlightNO',
-        columnLabel: '前序航班',
-      },
-      {
-        columnName: 'planLandingTime',
-        columnLabel: '实际降落\n时间',
-      },
-    ],
-  },
-  {
-    groupName: '货站相关',
-    children: [
-      {
-        columnName: 'C1',
-        columnLabel: '特货信息',
-      },
-      {
-        columnName: 'C2',
-        columnLabel: '预计装载数\n(运单/件)',
-      },
-      {
-        columnName: 'C3',
-        columnLabel: '中转进\n(运单/件)',
-      },
-      {
-        columnName: 'C4',
-        columnLabel: '退运\n(板卡/件)',
-      },
-    ],
-  },
-  {
-    groupName: '地服相关',
-    children: [
-      {
-        columnName: 'C5',
-        columnLabel: '收运核单\n(运单/件/重量)',
-      },
-      {
-        columnName: 'C6',
-        columnLabel: '查验\n(拒运/查验)',
-      },
-      {
-        columnName: 'C7',
-        columnLabel: '安检\n(运单/件)',
-      },
-      {
-        columnName: 'C8',
-        columnLabel: '加货\n(运单/板卡/件/重量)',
-      },
-      {
-        columnName: 'C9',
-        columnLabel: '待运区\n(板卡/件)',
-      },
-      {
-        columnName: 'C10',
-        columnLabel: '配载\n(板卡/件)',
-      },
-      {
-        columnName: 'C11',
-        columnLabel: '计划交接\n时间',
-      },
-      {
-        columnName: 'C12',
-        columnLabel: '货站交接\n(板卡/件)',
-      },
-      {
-        columnName: 'C13',
-        columnLabel: '运输前复核\n(板卡/件)',
-      },
-      {
-        columnName: 'C14',
-        columnLabel: '机下交接\n(板卡/件)',
-      },
-      {
-        columnName: 'C15',
-        columnLabel: '装机\n(板卡/件)',
-      },
-      {
-        columnName: 'C16',
-        columnLabel: '拉货登记\n(板卡/件)',
-      },
-      {
-        columnName: 'C17',
-        columnLabel: '拉回确认\n(板卡/件)',
-      },
-    ],
-  },
-]
-
-const arrivalColumnGroups = [
-  {
-    groupName: '航班相关',
-    children: [
-      {
-        columnName: 'flightNO',
-        columnLabel: '航班号',
-      },
-      {
-        columnName: 'flightDate',
-        columnLabel: '执飞日期',
-      },
-      {
-        columnName: 'planLandingTime',
-        columnLabel: '降落时间',
-      },
-      {
-        columnName: 'landingAirport',
-        columnLabel: '目的站',
-      },
-      {
-        columnName: 'landingStand',
-        columnLabel: '停机位',
-      },
-    ],
-  },
-  {
-    groupName: '货站相关',
-    children: [
-      {
-        columnName: 'C1',
-        columnLabel: '特货信息',
-      },
-      {
-        columnName: 'C2',
-        columnLabel: '预计卸载数\n(运单/件)',
-      },
-      {
-        columnName: 'C3',
-        columnLabel: '中转出\n(运单/件)',
-      },
-      {
-        columnName: 'C4',
-        columnLabel: '收货差异\n(板卡/件)',
-      },
-    ],
-  },
-  {
-    groupName: '地服相关',
-    children: [
-      {
-        columnName: 'C5',
-        columnLabel: '卸机\n(板/箱/卡)',
-      },
-      {
-        columnName: 'C6',
-        columnLabel: '机下交接\n(板/箱/卡)',
-      },
-      {
-        columnName: 'C7',
-        columnLabel: '货站交接\n(板/箱/卡)',
-      },
-      {
-        columnName: 'C8',
-        columnLabel: '理货\n(板卡/运单/件/重量)',
-      },
-      {
-        columnName: 'C9',
-        columnLabel: '出库\n(批/运单/件)',
-      },
-    ],
-  },
-]
-
-const simulateTableData = {
+const columnGroupsMap = {
   departure: [
+    {
+      groupName: '航班相关',
+      children: [
+        {
+          columnName: 'flightNO',
+          columnLabel: '航班号',
+        },
+        {
+          columnName: 'flightDate',
+          columnLabel: '执飞日期',
+        },
+        {
+          columnName: 'planDepartureTime',
+          columnLabel: '起飞时间',
+        },
+        {
+          columnName: 'landingAirport',
+          columnLabel: '目的站',
+        },
+        {
+          columnName: 'takeOffStand',
+          columnLabel: '停机位',
+        },
+        {
+          columnName: 'inFlightNO',
+          columnLabel: '前序航班',
+        },
+        {
+          columnName: 'planLandingTime',
+          columnLabel: '实际降落\n时间',
+        },
+      ],
+    },
+    {
+      groupName: '货站相关',
+      children: [
+        {
+          columnName: 'C1',
+          columnLabel: '特货信息',
+        },
+        {
+          columnName: 'C2',
+          columnLabel: '预计装载数\n(运单/件)',
+        },
+        {
+          columnName: 'C3',
+          columnLabel: '中转进\n(运单/件)',
+        },
+        {
+          columnName: 'C4',
+          columnLabel: '退运\n(板卡/件)',
+        },
+      ],
+    },
+    {
+      groupName: '地服相关',
+      children: [
+        {
+          columnName: 'C5',
+          columnLabel: '收运核单\n(运单/件/重量)',
+        },
+        {
+          columnName: 'C6',
+          columnLabel: '查验\n(拒运/查验)',
+        },
+        {
+          columnName: 'C7',
+          columnLabel: '安检\n(运单/件)',
+        },
+        {
+          columnName: 'C8',
+          columnLabel: '加货\n(运单/板卡/件/重量)',
+        },
+        {
+          columnName: 'C9',
+          columnLabel: '待运区\n(板卡/件)',
+        },
+        {
+          columnName: 'C10',
+          columnLabel: '配载\n(板卡/件)',
+        },
+        {
+          columnName: 'C11',
+          columnLabel: '计划交接\n时间',
+        },
+        {
+          columnName: 'C12',
+          columnLabel: '货站交接\n(板卡/件)',
+        },
+        {
+          columnName: 'C13',
+          columnLabel: '运输前复核\n(板卡/件)',
+        },
+        {
+          columnName: 'C14',
+          columnLabel: '机下交接\n(板卡/件)',
+        },
+        {
+          columnName: 'C15',
+          columnLabel: '装机\n(板卡/件)',
+        },
+        {
+          columnName: 'C16',
+          columnLabel: '拉货登记\n(板卡/件)',
+        },
+        {
+          columnName: 'C17',
+          columnLabel: '拉回确认\n(板卡/件)',
+        },
+      ],
+    },
+  ],
+  arrival: [
+    {
+      groupName: '航班相关',
+      children: [
+        {
+          columnName: 'flightNO',
+          columnLabel: '航班号',
+        },
+        {
+          columnName: 'flightDate',
+          columnLabel: '执飞日期',
+        },
+        {
+          columnName: 'planLandingTime',
+          columnLabel: '降落时间',
+        },
+        {
+          columnName: 'landingAirport',
+          columnLabel: '目的站',
+        },
+        {
+          columnName: 'landingStand',
+          columnLabel: '停机位',
+        },
+      ],
+    },
+    {
+      groupName: '货站相关',
+      children: [
+        {
+          columnName: 'C1',
+          columnLabel: '特货信息',
+        },
+        {
+          columnName: 'C2',
+          columnLabel: '预计卸载数\n(运单/件)',
+        },
+        {
+          columnName: 'C3',
+          columnLabel: '中转出\n(运单/件)',
+        },
+        {
+          columnName: 'C4',
+          columnLabel: '收货差异\n(板卡/件)',
+        },
+      ],
+    },
+    {
+      groupName: '地服相关',
+      children: [
+        {
+          columnName: 'C5',
+          columnLabel: '卸机\n(板/箱/卡)',
+        },
+        {
+          columnName: 'C6',
+          columnLabel: '机下交接\n(板/箱/卡)',
+        },
+        {
+          columnName: 'C7',
+          columnLabel: '货站交接\n(板/箱/卡)',
+        },
+        {
+          columnName: 'C8',
+          columnLabel: '理货\n(板卡/运单/件/重量)',
+        },
+        {
+          columnName: 'C9',
+          columnLabel: '出库\n(批/运单/件)',
+        },
+      ],
+    },
+  ],
+}
+
+const simulateTableDataMap = {
+  DepartureAirport: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -271,7 +271,7 @@ const simulateTableData = {
       C17: '0/5',
     },
   ],
-  arrival: [
+  ArrivalAirport: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -321,7 +321,7 @@ const simulateTableData = {
       C9: '3/363/537',
     },
   ],
-  internationalDeparture: [
+  InternationalDepartureAirport: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -401,7 +401,7 @@ const simulateTableData = {
       C17: '0/5',
     },
   ],
-  internationalArrival: [
+  InternationalArrivalAirport: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -472,21 +472,12 @@ const computedWidth = (text: string) => {
   return width
 }
 
-export default function useAirportTable(
-  viewName:
-    | 'departure'
-    | 'arrival'
-    | 'internationalDeparture'
-    | 'internationalArrival',
-  formData: CommonData,
-  international: Ref<boolean>
-) {
+export default function useAirportTable(name: string, formData: CommonData) {
   const tableColumns = ref<CommonTableColumn[]>([])
   const tableData = ref<CommonData[]>([])
   const getTableColumns = () => {
-    const groups = ['departure', 'internationalDeparture'].includes(viewName)
-      ? departureColumnGroups
-      : arrivalColumnGroups
+    const groups =
+      columnGroupsMap[name.includes('Departure') ? 'departure' : 'arrival']
     tableColumns.value = groups.reduce(
       (columns: CommonTableColumn[], group, groupIndex) => {
         group.children.forEach(({ columnName, columnLabel }) => {
@@ -530,7 +521,7 @@ export default function useAirportTable(
         waybillType,
       } = formData
       const dataContent = [startDate, endDate, flightStatus, flightWarning]
-      if (international.value) {
+      if (name.includes('International')) {
         dataContent.push(waybillType)
       }
       const {
@@ -538,7 +529,7 @@ export default function useAirportTable(
         returnData: { columnSet, listValues },
         message,
       } = await Query<CommonData>({
-        id: DATACONTENT_ID[`${viewName}Airport`],
+        id: DATACONTENT_ID[name.slice(0, 1).toLowerCase() + name.slice(1)],
         dataContent,
       })
       if (Number(code) !== 0) {
@@ -559,14 +550,14 @@ export default function useAirportTable(
     }
   }
   const getSimulateTableData = () => {
-    tableData.value = simulateTableData[viewName]
+    tableData.value = simulateTableDataMap[name]
   }
   let queryLoop: number | null = null
   const startQuery = async () => {
     await getTableData()
     queryLoop = window.setTimeout(
       startQuery,
-      LOOP_INTERVAL[`${viewName}Airport`]
+      LOOP_INTERVAL[name.slice(0, 1).toLowerCase() + name.slice(1)]
     )
   }
   const stopQuery = () => {

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

@@ -4,36 +4,19 @@
       <div class="flight-info-wrapper">
         <div class="air-line">{{ airLine }}</div>
         <div class="flight-info-box-wrapper">
-          <div class="info-box">
-            <div>起飞机场简称：{{ flightInfo.C0 }}</div>
-            <div>日期：{{ flightInfo.C1 }}</div>
-            <div>时间：{{ flightInfo.C2 }}</div>
-            <div>停机位：{{ flightInfo.C3 }}</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="info-box">
-            <div>特货信息/货物数：{{ flightInfo.C4 }}</div>
-            <div>托运运单数/货物数：{{ flightInfo.C5 }}</div>
-            <div>中转进运单/货物数：{{ flightInfo.C6 }}</div>
-            <div>已配载集装器：{{ flightInfo.C7 }}</div>
-            <div>货站已交接集装器：{{ flightInfo.C7 }}</div>
-            <div>已装载集装器/运单/货物数：{{ flightInfo.C7 }}</div>
-            <div>拉下集装器/运单/货物数：{{ flightInfo.C8 }}</div>
-            <div>集装器数量：{{ flightInfo.C9 }}</div>
-          </div>
-          <div class="iconBox">
-            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
-          </div>
-          <div class="info-box">
-            <div>降落机场简称：{{ flightInfo.C10 }}</div>
-            <div>日期：{{ flightInfo.C11 }}</div>
-            <div>时间：{{ flightInfo.C12 }}</div>
-          </div>
+          <template v-for="(group, index) in flightInfoItems" :key="index">
+            <div class="info-box">
+              <div v-for="(item, i) in group" :key="i">
+                {{ item.label }}：{{ flightInfo[item.key] }}
+              </div>
+            </div>
+            <div v-if="index < flightInfoItems.length - 1" class="icon-box">
+              <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+            </div>
+          </template>
         </div>
       </div>
-      <div v-if="isDeparture" class="container-list">
+      <div v-if="name.includes('Departure')" class="container-list">
         <SimpleTable
           :data="containerTableData"
           :columns="containerTableColumns"
@@ -84,14 +67,13 @@ import { CaretRight, Download, Refresh } from '@element-plus/icons-vue'
 import SimpleTable from '@/components/SimpleTable/index.vue'
 import CommonSwitch from '../../components/CommonSwitch/index.vue'
 import ColumnSet from '../../components/ColumnSet/index.vue'
-import { CommonData } from '~/common'
 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'
+import useFlightInfo from './useFlightInfo'
 
 const props = defineProps({
   name: {
@@ -113,58 +95,17 @@ const dataContent = [
 ] as string[]
 
 const airLine = ref('SZX - CA4120 - NKG')
-const flightInfo = reactive<CommonData>({
-  C0: props.name.includes('Departure') ? '深圳机场' : '南京机场',
-  C1: '2021-12-24',
-  C2: '19 : 30 : 25',
-  C3: '012',
-  C4: '0',
-  C5: '0',
-  C6: '0',
-  C7: '0',
-  C8: '0',
-  C9: '0',
-  C10: props.name.includes('Departure') ? '南京机场' : '深圳机场',
-  C11: '2021-12-24',
-  C12: '22 : 25 : 25',
-})
-const getFlightInfo = async () => {
-  try {
-    const {
-      code,
-      returnData: { listValues },
-      message,
-    } = await Query({
-      id: DATACONTENT_ID.flightInfo,
-      dataContent,
-    })
-    if (Number(code) !== 0) {
-      throw new Error(message ?? '失败')
-    }
-    if (!listValues.length) {
-      ElMessage.error('未查询到航班信息')
-      return
-    }
-    Object.assign(flightInfo, listValues[0])
-  } catch (error) {
-    console.error(error)
-  }
-}
-// onMounted(() => {
-//   getFlightInfo()
-// })
 
-const isDeparture = computed(() =>
-  ['DepartureFlight', 'InternationalDepartureFlight'].includes(props.name)
-)
+const { flightInfoItems, flightInfo } = useFlightInfo(props.name, dataContent)
+
 const {
   tableColumns: containerTableColumns,
   tableData: containerTableData,
-} = useTable('flightContainer', dataContent)
+} = useTable(`${props.name}Container`, dataContent)
 const {
   tableColumns: waybillTableColumns,
   tableData: waybillTableData,
-} = useTable('flightWaybill', dataContent)
+} = useTable(`${props.name}Waybill`, dataContent)
 
 const UTCFlag = ref(true)
 
@@ -196,17 +137,17 @@ const search = (text: string) => {
 const {
   rowClass: flightContainerRowClass,
   cellClass: flightContainerCellClass,
-} = useTableStyle('flightContainer')
+} = useTableStyle(`${props.name}Container`)
 const {
   rowClass: flightWaybillRowClass,
   cellClass: flightWaybillCellClass,
-} = useTableStyle('flightWaybill')
+} = useTableStyle(`${props.name}Waybill`)
 
 const { cellClickHandler: flightContainerCellClickHandler } = useTableCellClick(
-  'flightContainer'
+  `${props.name}Container`
 )
 const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
-  'flightWaybill'
+  `${props.name}Waybill`
 )
 </script>
 <style lang="scss" scoped>
@@ -226,6 +167,8 @@ const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
       box-sizing: border-box;
       padding: 18px 32px;
       overflow: hidden;
+      display: flex;
+      flex-direction: column;
       .air-line {
         font-size: 18px;
         font-weight: bold;
@@ -236,6 +179,7 @@ const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
       .flight-info-box-wrapper {
         width: 100%;
         max-width: 976px;
+        flex: 1;
         display: flex;
         justify-content: flex-start;
         justify-items: center;
@@ -249,7 +193,7 @@ const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
           color: #ffffff;
           line-height: 30px;
         }
-        .iconBox {
+        .icon-box {
           display: flex;
           flex-direction: column;
           width: 60px;

src/views/realTime/components/FlightView/useFlightInfo.ts

@@ -0,0 +1,218 @@
+import { CommonData, CommonValue } from '~/common'
+import { Query } from '@/api/webApi'
+import { ElMessage } from 'element-plus'
+
+const flightInfoItemsMap = {
+  departure: [
+    [
+      {
+        label: '起飞机场简称',
+        key: 'C0',
+      },
+      {
+        label: '日期',
+        key: 'C1',
+      },
+      {
+        label: '时间',
+        key: 'C2',
+      },
+      {
+        label: '停机位',
+        key: 'C3',
+      },
+    ],
+    [
+      {
+        label: '特货信息/货物数',
+        key: 'C4',
+      },
+      {
+        label: '托运运单数/货物数',
+        key: 'C5',
+      },
+      {
+        label: '中转进运单/货物数',
+        key: 'C6',
+      },
+      {
+        label: '已配载集装器',
+        key: 'C7',
+      },
+      {
+        label: '货站已交接集装器',
+        key: 'C7',
+      },
+      {
+        label: '已装载集装器/运单/货物数',
+        key: 'C7',
+      },
+      {
+        label: '拉下集装器/运单/货物数',
+        key: 'C8',
+      },
+      {
+        label: '集装器数量',
+        key: 'C9',
+      },
+    ],
+    [
+      {
+        label: '降落机场简称',
+        key: 'C10',
+      },
+      {
+        label: '日期',
+        key: 'C11',
+      },
+      {
+        label: '时间',
+        key: 'C12',
+      },
+    ],
+  ],
+  arrival: [
+    [
+      {
+        label: '起飞机场简称',
+        key: 'C0',
+      },
+      {
+        label: '日期',
+        key: 'C1',
+      },
+      {
+        label: '时间',
+        key: 'C2',
+      },
+    ],
+    [
+      {
+        label: '特货信息/货物数',
+        key: 'C3',
+      },
+      {
+        label: '卸载运单数/货物数',
+        key: 'C4',
+      },
+      {
+        label: '中转进运单/货物数',
+        key: 'C5',
+      },
+      {
+        label: '已卸载集装器',
+        key: 'C6',
+      },
+      {
+        label: '卸载数量（板/箱/卡）',
+        key: 'C7',
+      },
+      {
+        label: '货站交接数量（板/箱/卡）',
+        key: 'C8',
+      },
+    ],
+    [
+      {
+        label: '降落机场简称',
+        key: 'C9',
+      },
+      {
+        label: '日期',
+        key: 'C10',
+      },
+      {
+        label: '时间',
+        key: 'C11',
+      },
+      {
+        label: '停机位',
+        key: 'C12',
+      },
+    ],
+  ],
+}
+const simulateFlightInfoMap = {
+  departure: {
+    C0: '深圳机场',
+    C1: '2021-12-24',
+    C2: '19 : 30 : 25',
+    C3: '012',
+    C4: '0',
+    C5: '0',
+    C6: '0',
+    C7: '0',
+    C8: '0',
+    C9: '0',
+    C10: '南京机场',
+    C11: '2021-12-24',
+    C12: '22 : 25 : 25',
+  },
+  arrival: {
+    C0: '南京机场',
+    C1: '2021-12-24',
+    C2: '19 : 30 : 25',
+    C3: '0',
+    C4: '0',
+    C5: '0',
+    C6: '0',
+    C7: '0',
+    C8: '0',
+    C9: '深圳机场',
+    C10: '2021-12-24',
+    C11: '19 : 30 : 25',
+    C12: '012',
+  },
+}
+
+export default function useFlightInfo(
+  name: string,
+  dataContent: CommonValue[]
+) {
+  const flightInfoItems = ref<{ label: string; key: string }[][]>([])
+  const getFlightInfoItems = () => {
+    flightInfoItems.value =
+      flightInfoItemsMap[name.includes('Departure') ? 'departure' : 'arrival']
+  }
+  getFlightInfoItems()
+
+  const flightInfo = reactive<CommonData>({})
+  const getFlightInfo = async () => {
+    try {
+      const {
+        code,
+        returnData: { listValues },
+        message,
+      } = await Query({
+        id: DATACONTENT_ID.flightInfo,
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message ?? '失败')
+      }
+      if (!listValues.length) {
+        ElMessage.error('未查询到航班信息')
+        return
+      }
+      Object.assign(flightInfo, listValues[0])
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getSimulateFlightInfo = () => {
+    const simulateFlightInfo =
+      simulateFlightInfoMap[
+        name.includes('Departure') ? 'departure' : 'arrival'
+      ]
+    Object.assign(flightInfo, simulateFlightInfo)
+  }
+  onMounted(() => {
+    // getFlightInfo()
+    getSimulateFlightInfo()
+  })
+
+  return {
+    flightInfoItems,
+    flightInfo,
+  }
+}

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

@@ -96,6 +96,7 @@ import useTableStyle from '../../hooks/useTableStyle'
 import useTableCellClick from '../../hooks/useTableCellClick'
 import { Query } from '@/api/webApi'
 import { ElMessage } from 'element-plus'
+import useGoodsInfo from './useGoodsInfo'
 
 const props = defineProps({
   name: {
@@ -107,45 +108,9 @@ const props = defineProps({
 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()
-// })
+const { goodsInfoItems, goodsInfo } = useGoodsInfo(props.name, [
+  goodsNO as string,
+])
 
 interface Airline {
   C0: string // 航班号
@@ -191,7 +156,7 @@ const { trackAirlines, trackBoxStyle } = useTrackData(
 )
 
 const dataContent = [waybillNO, goodsNO] as string[]
-const { tableColumns, tableData } = useTable('goodsFlight', dataContent)
+const { tableColumns, tableData } = useTable(`${props.name}Flight`, dataContent)
 
 const search = (text: string) => {
   console.log(text)
@@ -213,9 +178,9 @@ const formatter = (row, column, cellValue, index) => {
 
 const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)
 
-const { rowClass, cellClass } = useTableStyle('goodsFlight')
+const { rowClass, cellClass } = useTableStyle(`${props.name}Flight`)
 
-const { cellClickHandler } = useTableCellClick('goodsFlight')
+const { cellClickHandler } = useTableCellClick(`${props.name}Flight`)
 </script>
 
 <style lang="scss" scoped>

src/views/realTime/components/GoodsView/useGoodsInfo.ts

@@ -0,0 +1,92 @@
+import { CommonData, CommonValue } from '~/common'
+import { Query } from '@/api/webApi'
+import { ElMessage } from 'element-plus'
+
+const goodsInfoItemsMap = {
+  internal: [
+    {
+      label: '货物编码',
+      key: 'C0',
+    },
+    {
+      label: '运单',
+      key: 'C1',
+    },
+  ],
+  international: [
+    {
+      label: '货物编码',
+      key: 'C0',
+    },
+    {
+      label: '运单',
+      key: 'C1',
+    },
+    {
+      label: '运单类型',
+      key: 'C2',
+    },
+  ],
+}
+
+const simulateGoodsInfoMap = {
+  internal: {
+    C0: '56888829',
+    C1: 'FA67858990',
+  },
+  international: {
+    C0: '56888829',
+    C1: 'FA67858990',
+    C2: '国际普货',
+  },
+}
+
+export default function useGoodsInfo(name: string, dataContent: CommonValue[]) {
+  const goodsInfoItems = ref<{ label: string; key: string }[]>([])
+  const getGoodsInfoItems = () => {
+    goodsInfoItems.value =
+      goodsInfoItemsMap[
+        name.includes('International') ? 'international' : 'internal'
+      ]
+  }
+  getGoodsInfoItems()
+
+  const goodsInfo = reactive<CommonData>({})
+  const getGoodsInfo = async () => {
+    try {
+      const {
+        code,
+        returnData: { listValues },
+        message,
+      } = await Query<CommonData>({
+        id: DATACONTENT_ID.goodsInfo,
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message || '失败')
+      }
+      if (!listValues.length) {
+        ElMessage.error('未查询到货物信息')
+        return
+      }
+      Object.assign(goodsInfo, listValues[0])
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getSimulateGoodsInfo = () => {
+    const simulateGoodsInfo =
+      simulateGoodsInfoMap[
+        name.includes('International') ? 'international' : 'internal'
+      ]
+    Object.assign(goodsInfo, simulateGoodsInfo)
+  }
+  onMounted(() => {
+    // getGoodsInfo()
+    getSimulateGoodsInfo()
+  })
+  return {
+    goodsInfoItems,
+    goodsInfo,
+  }
+}

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

@@ -96,6 +96,7 @@ import useTableStyle from '../../hooks/useTableStyle'
 import useTableCellClick from '../../hooks/useTableCellClick'
 import { Query } from '@/api/webApi'
 import { ElMessage } from 'element-plus'
+import useWaybillInfo from './useWaybillInfo'
 
 const props = defineProps({
   name: {
@@ -113,75 +114,9 @@ const {
   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: 'NKG',
-  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()
-// })
+const { waybillInfoItems, waybillInfo } = useWaybillInfo(props.name, [
+  waybillNO as string,
+])
 
 interface Airline {
   C0: string // 航班号
@@ -233,10 +168,10 @@ const dataContent = [
   departureAirport,
   landingAirport,
 ] as string[]
-const { tableColumns, tableData } = useTable('waybillGoods', dataContent)
+const { tableColumns, tableData } = useTable(`${props.name}Goods`, dataContent)
 
 const formatter = (row, column, cellValue, index) => {
-  const array = Array.from({ length: 12 }).map((_, i) => `C${i + 5}`)
+  const array = Array.from({ length: 12 }, (_, i) => `C${i + 5}`)
   if (array.includes(column.property)) {
     return String(cellValue ?? '').replaceAll('-', '\n')
   } else {
@@ -258,9 +193,9 @@ const downloadHandler = () => {
 
 const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)
 
-const { rowClass, cellClass } = useTableStyle('waybillGoods')
+const { rowClass, cellClass } = useTableStyle(`${props.name}Goods`)
 
-const { cellClickHandler } = useTableCellClick('waybillGoods')
+const { cellClickHandler } = useTableCellClick(`${props.name}Goods`)
 </script>
 
 <style lang="scss" scoped>

src/views/realTime/components/WaybillView/useWaybillInfo.ts

@@ -0,0 +1,145 @@
+import { CommonData, CommonValue } from '~/common'
+import { Query } from '@/api/webApi'
+import { ElMessage } from 'element-plus'
+
+const waybillInfoItemsMap = {
+  internal: [
+    {
+      label: '运单',
+      key: 'C0',
+    },
+    {
+      label: '货代公司',
+      key: 'C1',
+    },
+    {
+      label: '品名',
+      key: 'C3',
+    },
+    {
+      label: '特货信息',
+      key: 'C4',
+    },
+    {
+      label: '始发机场',
+      key: 'C5',
+    },
+    {
+      label: '目的机场',
+      key: 'C6',
+    },
+    {
+      label: '货物数量',
+      key: 'C7',
+    },
+    {
+      label: '货物总重',
+      key: 'C8',
+    },
+  ],
+  international: [
+    {
+      label: '运单',
+      key: 'C0',
+    },
+    {
+      label: '运单类型',
+      key: 'C1',
+    },
+    {
+      label: '货代公司',
+      key: 'C2',
+    },
+    {
+      label: '品名',
+      key: 'C3',
+    },
+    {
+      label: '特货信息',
+      key: 'C4',
+    },
+    {
+      label: '始发机场',
+      key: 'C5',
+    },
+    {
+      label: '目的机场',
+      key: 'C6',
+    },
+  ],
+}
+
+const simulateWaybillInfoMap = {
+  internal: {
+    C0: 'FA56888829',
+    C1: '深圳市联运通货有限公司',
+    C3: '电路板、手机外壳',
+    C4: '特',
+    C5: 'SZX',
+    C6: 'NKG',
+    C7: '7件',
+    C8: '82KG',
+  },
+  international: {
+    C0: 'FA56888829',
+    C1: '国际普货',
+    C2: '深圳市联运通货有限公司',
+    C3: '电路板、手机外壳',
+    C4: '特',
+    C5: 'SZX',
+    C6: 'NKG',
+  },
+}
+
+export default function useWaybillInfo(
+  name: string,
+  dataContent: CommonValue[]
+) {
+  const waybillInfoItems = ref<{ label: string; key: string }[]>([])
+  const getWaybillInfoItems = () => {
+    waybillInfoItems.value =
+      waybillInfoItemsMap[
+        name.includes('International') ? 'international' : 'internal'
+      ]
+  }
+  getWaybillInfoItems()
+
+  const waybillInfo = reactive<CommonData>({})
+  const getWaybillInfo = async () => {
+    try {
+      const {
+        code,
+        returnData: { listValues },
+        message,
+      } = await Query<CommonData>({
+        id: DATACONTENT_ID.waybillInfo,
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message || '失败')
+      }
+      if (!listValues.length) {
+        ElMessage.error('未查询到运单信息')
+        return
+      }
+      Object.assign(waybillInfo, listValues[0])
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getSimulateWaybillInfo = () => {
+    const simulateWaybillInfo =
+      simulateWaybillInfoMap[
+        name.includes('International') ? 'international' : 'internal'
+      ]
+    Object.assign(waybillInfo, simulateWaybillInfo)
+  }
+  onMounted(() => {
+    // getWaybillInfo()
+    getSimulateWaybillInfo()
+  })
+  return {
+    waybillInfoItems,
+    waybillInfo,
+  }
+}

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

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

src/views/realTime/hooks/useTable.ts

@@ -7,7 +7,7 @@ const tableColumnsMap: {
     columnName: string
   } & { [x: string]: any })[]
 } = {
-  flightContainer: [
+  DepartureFlightContainer: [
     { columnLabel: '集装器编号', columnName: 'C0', width: 120 },
     { columnLabel: '运单数', columnName: 'C1', width: 60, needCount: 1 },
     { columnLabel: '件数', columnName: 'C2', width: 60, needCount: 1 },
@@ -42,7 +42,7 @@ const tableColumnsMap: {
       className: 'cell-filter cell-filter-yellow',
     },
   ],
-  flightWaybill: [
+  DepartureFlightWaybill: [
     { columnLabel: '运单号', columnName: 'C0', width: 120 },
     { columnLabel: '集装器数量', columnName: 'C1', needCount: 1 },
     {
@@ -63,7 +63,7 @@ const tableColumnsMap: {
     { columnLabel: '中转航班降落时间', columnName: 'C12', width: 130 },
     { columnLabel: '装载序号', columnName: 'C13' },
   ],
-  waybillGoods: [
+  DepartureWaybillGoods: [
     { columnLabel: '航班号', columnName: 'C0', needFilters: 1 },
     { columnLabel: '集装器编号', columnName: 'C1', width: 120, needFilters: 1 },
     { columnLabel: '货物编码', columnName: 'C2', needFilters: 1 },
@@ -130,7 +130,7 @@ const tableColumnsMap: {
       className: 'cell-filter cell-filter-cyan',
     },
   ],
-  goodsFlight: [
+  DepartureGoodsFlight: [
     { columnLabel: '航班号', columnName: 'C0' },
     { columnLabel: '航班日期', columnName: 'C1' },
     { columnLabel: '起飞航站\n预计起飞时间', columnName: 'C2' },
@@ -147,216 +147,548 @@ const tableColumnsMap: {
     { columnLabel: '发往位置描述', columnName: 'C13' },
     { columnLabel: '集装器编号', columnName: 'C14' },
   ],
-}
-const simulateTableDataMap: {
-  [tableName: string]: CommonData[]
-} = {
-  flightContainer: [
-    {
-      C0: 'DOU29800001',
-      C1: '5',
-      C2: '50',
-      C3: 'C24  11:01',
-      C4: 'F24  12:05',
-      C5: 'D32  11:25',
-      C6: 'E24  11:40',
-      C7: 'F24  12:01',
-      C8: 'G32  12:25',
-    },
-    {
-      C0: 'DOU29800001',
-      C1: '5',
-      C2: '50',
-      C3: 'C24  11:01',
-      C4: 'F24  12:05',
-      C5: 'D32  11:25',
-      C6: 'E24  11:40',
-      C7: 'F24  12:01',
-      C8: 'G32  12:25',
+  ArrivalFlightWaybill: [
+    { columnLabel: '运单号', columnName: 'C0', width: 120 },
+    {
+      columnLabel: '品名',
+      columnName: 'C1',
+      width: 160,
+      showOverflowTooltip: true,
+    },
+    { columnLabel: '特货信息', columnName: 'C2', needCount: 1 },
+    { columnLabel: '进港报文货物件数', columnName: 'C3', needCount: 1 },
+    { columnLabel: '进港实际货物件数', columnName: 'C4', needCount: 1 },
+    { columnLabel: '最新节点', columnName: 'C5' },
+    { columnLabel: '最新位置', columnName: 'C6' },
+    { columnLabel: '处理结果', columnName: 'C7' },
+    { columnLabel: '处理时间', columnName: 'C8', width: 130 },
+    { columnLabel: '中转出航班号', columnName: 'C9' },
+    { columnLabel: '中转航班降落时间', columnName: 'C10', width: 130 },
+    { columnLabel: '装载序号', columnName: 'C11' },
+  ],
+  ArrivalWaybillGoods: [
+    { 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-cyan',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C6',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'C7',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      columnLabel: '提取',
+      columnName: 'C8',
+      className: 'cell-filter cell-filter-cyan',
+    },
+    {
+      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-green',
+    },
+    {
+      columnLabel: '货站交接',
+      columnName: 'C14',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C15',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '装机',
+      columnName: 'C16',
+      className: 'cell-filter cell-filter-green',
+    },
+  ],
+  ArrivalGoodsFlight: [
+    { 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' },
+  ],
+  InternationalDepartureFlightContainer: [
+    { 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',
+    },
+  ],
+  InternationalDepartureFlightWaybill: [
+    { columnLabel: '运单号', columnName: 'C0', width: 120 },
+    { columnLabel: '运单类型', columnName: 'C1', needCount: 1 },
+    { columnLabel: '集装器数量', columnName: 'C2', needCount: 1 },
+    {
+      columnLabel: '品名',
+      columnName: 'C3',
+      width: 160,
+      showOverflowTooltip: true,
     },
+    { columnLabel: '特货信息', columnName: 'C4' },
+    { columnLabel: '货物件数', columnName: 'C5', needCount: 1 },
+    { columnLabel: '拉下件数', columnName: 'C6', needCount: 1 },
+    { columnLabel: '退运件数', columnName: 'C7', needCount: 1 },
+    { columnLabel: '最新节点', columnName: 'C8' },
+    { columnLabel: '最新位置', columnName: 'C9' },
+    { columnLabel: '处理结果', columnName: 'C10' },
+    { columnLabel: '处理时间', columnName: 'C11', width: 130 },
+    { columnLabel: '中转进航班号', columnName: 'C12' },
+    { columnLabel: '中转航班降落时间', columnName: 'C13', width: 130 },
+    { columnLabel: '装载序号', columnName: 'C14' },
   ],
-  flightWaybill: [
-    {
-      C0: '32535234445',
-      C1: '5',
-      C2: '手机、充电器',
-      C3: '特',
-      C4: '5',
-      C5: '2',
-      C6: '2',
-      C7: '待运区',
-      C8: 'A13',
-      C9: '通过',
-      C10: '2022/9/10 10:01',
-      C11: 'ZH5466',
-      C12: '2022/9/10 16:01',
-      C13: '3',
-    },
-    {
-      C0: '32535234445',
-      C1: '5',
-      C2: '手机、充电器',
-      C3: '特',
-      C4: '5',
-      C5: '2',
-      C6: '2',
-      C7: '待运区',
-      C8: 'A13',
-      C9: '通过',
-      C10: '2022/9/10 10:01',
-      C11: 'ZH5466',
-      C12: '2022/9/10 16:01',
-      C13: '3',
-    },
-    {
-      C0: '32535234445',
-      C1: '5',
-      C2: '手机、充电器',
-      C3: '特',
-      C4: '5',
-      C5: '2',
-      C6: '2',
-      C7: '待运区',
-      C8: 'A13',
-      C9: '未通过',
-      C10: '2022/9/10 10:01',
-      C11: 'ZH5466',
-      C12: '2022/9/10 16:01',
-      C13: '3',
+  InternationalDepartureWaybillGoods: [
+    { 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-green',
+    },
+    {
+      columnLabel: '机下交接',
+      columnName: 'C14',
+      className: 'cell-filter cell-filter-green',
+    },
+    {
+      columnLabel: '提取',
+      columnName: 'C15',
+      className: 'cell-filter cell-filter-green',
+    },
+  ],
+  InternationalDepartureGoodsFlight: [
+    { 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' },
   ],
-  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',
+  InternationalArrivalFlightWaybill: [
+    { columnLabel: '运单号', columnName: 'C0', width: 120 },
+    { columnLabel: '运单类型', columnName: 'C1' },
+    {
+      columnLabel: '品名',
+      columnName: 'C2',
+      width: 160,
+      showOverflowTooltip: true,
     },
+    { columnLabel: '特货信息', columnName: 'C3' },
+    { columnLabel: '进港报文货物件数', columnName: 'C4', needCount: 1 },
+    { columnLabel: '进港实际货物件数', columnName: 'C5', needCount: 1 },
+    { columnLabel: '最新节点', columnName: 'C6' },
+    { columnLabel: '最新位置', columnName: 'C7' },
+    { columnLabel: '处理结果', columnName: 'C8' },
+    { columnLabel: '处理时间', columnName: 'C9', width: 130 },
+    { columnLabel: '中转出航班号', columnName: 'C10' },
+    { columnLabel: '中转航班起飞时间', columnName: 'C11', width: 130 },
+    { columnLabel: '装载序号', columnName: 'C12' },
   ],
-  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',
+  InternationalArrivalWaybillGoods: [
+    { columnLabel: '航班号', columnName: 'C0', needFilters: 1 },
+    { columnLabel: '货物编码', columnName: 'C1', 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',
+    },
+  ],
+  InternationalArrivalGoodsFlight: [
+    { 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' },
   ],
 }
+const simulateTableDataMap: {
+  [tableName: string]: CommonData[]
+} = {
+  DepartureFlightContainer: Array.from({ length: 2 }, () => ({
+    C0: 'DOU29800001',
+    C1: '5',
+    C2: '50',
+    C3: 'C24  11:01',
+    C4: 'F24  12:05',
+    C5: 'D32  11:25',
+    C6: 'E24  11:40',
+    C7: 'F24  12:01',
+    C8: 'G32  12:25',
+  })),
+  DepartureFlightWaybill: Array.from({ length: 3 }, () => ({
+    C0: '32535234445',
+    C1: '5',
+    C2: '手机、充电器',
+    C3: '特',
+    C4: '5',
+    C5: '2',
+    C6: '2',
+    C7: '待运区',
+    C8: 'A13',
+    C9: '通过',
+    C10: '2022/9/10 10:01',
+    C11: 'ZH5466',
+    C12: '2022/9/10 16:01',
+    C13: '3',
+  })),
+  DepartureWaybillGoods: Array.from({ length: 4 }, () => ({
+    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',
+  })),
+  DepartureGoodsFlight: Array.from({ length: 3 }, () => ({
+    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',
+  })),
+  ArrivalFlightWaybill: Array.from({ length: 3 }, () => ({
+    C0: '32535234445',
+    C1: '手机、充电器',
+    C2: '特',
+    C3: '5',
+    C4: '5',
+    C5: '待运区',
+    C6: 'A13',
+    C7: '通过',
+    C8: '2022/9/10 10:01',
+    C9: 'ZH5466',
+    C10: '2022/9/10 16:01',
+    C11: '3',
+  })),
+  ArrivalWaybillGoods: Array.from({ length: 4 }, () => ({
+    C0: 'CA1001',
+    C1: '56888829',
+    C2: 'Y',
+    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',
+  })),
+  ArrivalGoodsFlight: Array.from({ length: 3 }, () => ({
+    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',
+  })),
+  InternationalDepartureFlightContainer: Array.from({ length: 2 }, () => ({
+    C0: 'DOU29800001',
+    C1: '5',
+    C2: '50',
+    C3: 'C24  11:01',
+    C4: 'F24  12:05',
+    C5: 'D32  11:25',
+    C6: 'E24  11:40',
+    C7: 'F24  12:01',
+    C8: 'G32  12:25',
+  })),
+  InternationalDepartureFlightWaybill: Array.from({ length: 3 }, () => ({
+    C0: '32535234445',
+    C1: '国际普货',
+    C2: '5',
+    C3: '手机、充电器',
+    C4: '特',
+    C5: '5',
+    C6: '2',
+    C7: '2',
+    C8: '待运区',
+    C9: 'A13',
+    C10: '通过',
+    C11: '2022/9/10 10:01',
+    C12: 'ZH5466',
+    C13: '2022/9/10 16:01',
+    C14: '3',
+  })),
+  InternationalDepartureWaybillGoods: Array.from({ length: 4 }, () => ({
+    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',
+  })),
+  InternationalDepartureGoodsFlight: Array.from({ length: 3 }, () => ({
+    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',
+  })),
+  InternationalArrivalFlightWaybill: Array.from({ length: 3 }, () => ({
+    C0: '32535234445',
+    C1: '国际普货',
+    C2: '手机、充电器',
+    C3: '特',
+    C4: '5',
+    C5: '2',
+    C6: '理货',
+    C7: 'A13',
+    C8: '通过',
+    C9: '2022/9/10 10:01',
+    C10: 'ZH5466',
+    C11: '2022/9/10 16:01',
+    C12: '3',
+  })),
+  InternationalArrivalWaybillGoods: Array.from({ length: 4 }, () => ({
+    C0: 'CA1001',
+    C1: '56888829',
+    C2: 'Y',
+    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',
+  })),
+  InternationalArrivalGoodsFlight: Array.from({ length: 3 }, () => ({
+    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闸口',
+  })),
+}
 
 export default function useTable(
   tableName: string,

src/views/realTime/hooks/useTableCellClick.ts

@@ -5,61 +5,93 @@ export default function useTableCellClick(tableName?: string) {
   const router = useRouter()
   const route = useRoute()
   const cellClickHandler = (row, column, cell, event) => {
-    switch (tableName) {
-      case 'flightWaybill':
-        switch (column.property) {
-          case 'C0':
-            router.push({
-              path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
-              query: {
-                waybillNo: row.C0,
-              },
-            })
-            break
-          case 'C1':
-            ElMessage.info('开发中')
-            break
-          default:
-            break
-        }
-        break
-      case 'flightContainer':
-        switch (column.property) {
-          case 'C0':
-            ElMessage.info('开发中')
-        }
-        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
+    if (tableName?.includes('FlightWaybill')) {
+      switch (column.property) {
+        case 'C0':
+          router.push({
+            path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+            query: {
+              waybillNO: row.C0,
+            },
+          })
+          break
+        default:
+          break
+      }
+    }
+    if (tableName === 'DepartureFlightWaybill') {
+      switch (column.property) {
+        case 'C1':
+          ElMessage.info('开发中')
+          break
+        default:
+          break
+      }
+    }
+    if (tableName === 'InternationalDepartureFlightWaybill') {
+      switch (column.property) {
+        case 'C2':
+          ElMessage.info('开发中')
+          break
+        default:
+          break
+      }
+    }
+    if (tableName?.includes('FlightContainer')) {
+      switch (column.property) {
+        case 'C0':
+          ElMessage.info('开发中')
+          break
+        default:
+          break
+      }
+    }
+    if (tableName?.includes('DepartureWaybillGoods')) {
+      switch (column.property) {
+        case 'C2':
+          router.push({
+            path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+            query: {
+              waybillNO: route.query.waybillNO,
+              goodsNO: row.C2,
+            },
+          })
+          break
+        default:
+          break
+      }
+    }
+    if (tableName?.includes('ArrivalWaybillGoods')) {
+      switch (column.property) {
+        case 'C1':
+          router.push({
+            path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+            query: {
+              waybillNO: route.query.waybillNO,
+              goodsNO: row.C1,
+            },
+          })
+          break
+        default:
+          break
+      }
     }
   }
   const cellClickHandlerV2 = ({ column, rowData }: CellSlotProps) => {
-    switch (column.columnName) {
-      case 'flightNO':
-        router.push({
-          path: `${route.path.split('/').slice(0, -1).join('/')}/flight`,
-          query: {
-            flightNO: rowData.flightNO,
-            flightDate: rowData.flightDate,
-          },
-        })
-        break
-      default:
-        break
+    if (tableName?.includes('Airport')) {
+      switch (column.columnName) {
+        case 'flightNO':
+          router.push({
+            path: `${route.path.split('/').slice(0, -1).join('/')}/flight`,
+            query: {
+              flightNO: rowData.flightNO,
+              flightDate: rowData.flightDate,
+            },
+          })
+          break
+        default:
+          break
+      }
     }
   }
 

src/views/realTime/hooks/useTableStyle.ts

@@ -14,63 +14,66 @@ 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
+    if (tableName?.includes('FlightContainer')) {
+      if (rowIndex === 1) {
+        classes.push('row-warning')
+      }
+    }
+    if (tableName?.includes('FlightWaybill')) {
+      if (rowIndex === 0) {
+        classes.push('row-alarm')
+      }
+      if (rowIndex === 1) {
+        classes.push('row-warning')
+      }
     }
     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 (['C0'].includes(column.property)) {
-          classes.push('cell-click')
-        }
-        break
-      case 'waybillGoods':
-        if (['C2'].includes(column.property)) {
-          classes.push('cell-click')
-        }
-        break
-      default:
-        break
+    if (tableName?.includes('FlightContainer')) {
+      if (['C0'].includes(column.property)) {
+        classes.push('cell-click')
+      }
+    }
+    if (tableName?.includes('FlightWaybill')) {
+      if (['C0'].includes(column.property)) {
+        classes.push('cell-click')
+      }
+    }
+    if (tableName === 'DepartureFlightWaybill') {
+      if (['C1'].includes(column.property)) {
+        classes.push('cell-click')
+      }
+    }
+    if (tableName === 'InternationalDepartureFlightWaybill') {
+      if (['C2'].includes(column.property)) {
+        classes.push('cell-click')
+      }
+    }
+    if (tableName?.includes('DepartureWaybillGoods')) {
+      if (['C2'].includes(column.property)) {
+        classes.push('cell-click')
+      }
+    }
+    if (tableName?.includes('ArrivalWaybillGoods')) {
+      if (['C1'].includes(column.property)) {
+        classes.push('cell-click')
+      }
     }
     return classes.join(' ')
   }
 
   const rowClassV2: RowClassGetter = ({ columns, rowData, rowIndex }) => {
     const classes: string[] = []
-    switch (tableName) {
-      case 'airport':
-        if (rowIndex <= 1) {
-          classes.push('bg-gray')
-        }
-        if (rowIndex === 1) {
-          classes.push('underline-red')
-        }
-        break
-      default:
-        break
+    if (tableName?.includes('Airport')) {
+      if (rowIndex <= 1) {
+        classes.push('bg-gray')
+      }
+      if (rowIndex === 1) {
+        classes.push('underline-red')
+      }
     }
     return classes.join(' ')
   }
@@ -87,7 +90,7 @@ export default function useTableStyle(tableName?: string) {
       classes.push('cell-warning')
     }
     if (['5/357'].includes(rowData[column.columnName])) {
-      classes.push('cell-error')
+      classes.push('cell-alarm')
     }
     if (['flightNO'].includes(column.columnName)) {
       classes.push('cell-click')

src/views/realTime/hooks/useTrackData.ts

@@ -181,27 +181,30 @@ export default function useTrackData(
 
   const getSimulateTrackData = () => {
     const length = trackName.endsWith('Waybill') ? 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: trackName.includes('Departure')
-          ? i < 1
-            ? 1
-            : 0
-          : i < 1
-          ? 0
-          : 1,
-        trackSteps: trackName.includes('Departure')
-          ? i < 1
-            ? simulateDepartureTrackNodes
-            : simulateArrivalTrackNodes
-          : i < 1
-          ? simulateArrivalTrackNodes
-          : simulateDepartureTrackNodes,
-      })),
-    }))
+    trackAirlines.value = Array.from({ length }, (_, index) => {
+      const length = trackName.includes('International') ? 1 : 2
+      return {
+        flightNO: index < 1 ? 'CA1001' : 'CA1003',
+        flightDate: '2022/09/10',
+        airports: Array.from({ length }, (_, i) => ({
+          airport: i < 1 ? '深圳机场' : '南京机场',
+          isDeparture: trackName.includes('Departure')
+            ? i < 1
+              ? 1
+              : 0
+            : i < 1
+            ? 0
+            : 1,
+          trackSteps: trackName.includes('Departure')
+            ? i < 1
+              ? simulateDepartureTrackNodes
+              : simulateArrivalTrackNodes
+            : i < 1
+            ? simulateArrivalTrackNodes
+            : simulateDepartureTrackNodes,
+        })),
+      }
+    })
   }
   onMounted(() => {
     getSimulateTrackData()

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

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

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

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