实时视图-对接口ing

components.d.ts

@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./src/components/search/index.vue')['default']
+    SimpleTable: typeof import('./src/components/SimpleTable/index.vue')['default']
     Steps: typeof import('./src/components/steps/index.vue')['default']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']

public/demo.js

@@ -105,49 +105,51 @@ const DATACONTENT_ID = {
   sysServiceaddId: 8013, //新增预警报警场景
   sysServiceStrategyaddId: 8014, //新增预警报警策略
   /***-----进港管理------***/
-  arrivalAirId: 67, //进港管理-机场选择
-  arrivalTableId: 38, //进港管理-表格
-
-  /***-----离港管理------***/
-  departureAirMainId: 65, //离港管理-机场选择
-  departureTableMainId: 66, //离港管理-表格
-  departureWarningId: 18040, //离港管理-报警策略
-
-  /***-----中转进港------***/
-  departureAirId: 72, // 中转进港-机场选择
-  departureAviJoinId: 71, // 中转进港-进港承运航司
-  departureAviLeaveId: 74, // 中转进港-离港承运航司
-  departureTableId: 69, // 中转进港-表格
-
-  /***-----中转离港------***/
-  departureAirLtId: 72, // 中转离港-机场选择
-  departureAviJoinLtId: 71, // 中转离港-进港承运航司
-  departureAviLeaveLtId: 74, // 中转离港-离港承运航司
-  departureTableLtId: 68, // 中转离港-表格
-
-  /***-----航班视图------***/
-  flightAirline: 1141, // 航班-航段
-  flightInfo: 1142, // 航班-基础信息
-  flightContainer: 41, // 航班-容器
-  flightBaggage: 1144, // 航班-行李列表
-  abnormalBaggageInfo: 1145,
-
-  /***-----行李视图------***/
-  baggageBasicInfo: 255, // 行李-基础信息
-  baggageAirline: 18009, // 行李-航段
-  baggageTrack: 18010, // 行李-追踪节点
-  baggageDetails: 44, // 行李-详情列表
-  baggageMessage: 3066, // 行李-原始报文
-
-  /***-----容器视图------***/
-  containerHistory: 18026,
-  containerBaggage: 18027,
+  // arrivalAirId: 67, //进港管理-机场选择
+  // arrivalTableId: 38, //进港管理-表格
+
+  // /***-----离港管理------***/
+  // departureAirMainId: 65, //离港管理-机场选择
+  // departureTableMainId: 66, //离港管理-表格
+  // departureWarningId: 18040, //离港管理-报警策略
+
+  // /***-----中转进港------***/
+  // departureAirId: 72, // 中转进港-机场选择
+  // departureAviJoinId: 71, // 中转进港-进港承运航司
+  // departureAviLeaveId: 74, // 中转进港-离港承运航司
+  // departureTableId: 69, // 中转进港-表格
+
+  // /***-----中转离港------***/
+  // departureAirLtId: 72, // 中转离港-机场选择
+  // departureAviJoinLtId: 71, // 中转离港-进港承运航司
+  // departureAviLeaveLtId: 74, // 中转离港-离港承运航司
+  // departureTableLtId: 68, // 中转离港-表格
+
+  // /***-----航班视图------***/
+  // flightAirline: 1141, // 航班-航段
+  // flightInfo: 1142, // 航班-基础信息
+  // flightContainer: 41, // 航班-容器
+  // flightBaggage: 1144, // 航班-行李列表
+  // abnormalBaggageInfo: 1145,
+
+  // /***-----行李视图------***/
+  // baggageBasicInfo: 255, // 行李-基础信息
+  // baggageAirline: 18009, // 行李-航段
+  // baggageTrack: 18010, // 行李-追踪节点
+  // baggageDetails: 44, // 行李-详情列表
+  // baggageMessage: 3066, // 行李-原始报文
+
+  // /***-----容器视图------***/
+  // containerHistory: 18026,
+  // containerBaggage: 18027,
 
   /***-----综合可视化------***/
   departureAirport: 1803446, // 国内出港航站
   internationalDepartureAirport: 1803447, // 国际出港航站
   arrivalAirport: 1803448, // 国内进港航站
   internationalArrivalAirport: 1803449, // 国际进港航站
+  flightInfo: 100001, // 航班基础信息
+  flightContainer: 100002,
 
   /***-----统计分析------***/
   stOrderId: 18012,

src/api/webApi.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/axiosReq'
 import { CommonQueryResult } from '~/common'
 
-export function Query(params): Promise<CommonQueryResult> {
+export function Query<T = any>(params): Promise<CommonQueryResult<T>> {
   return request({
     url: '/openApi/query',
     method: 'post',

src/components/SimpleTable/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <el-table
+    ref="table"
+    v-bind="tableProps"
+    :data="dealedTableData"
+    @cell-click="(...args:any[]) => { emit('cellClick', ...args) }"
+    @cell-contextmenu="(...args:any[]) => { emit('cellContextmenu', ...args) }"
+    @cell-dblclick="(...args:any[]) => { emit('cellDblclick', ...args) }"
+    @cell-mouse-enter="(...args:any[]) => { emit('cellMouseEnter', ...args) }"
+    @cell-mouse-leave="(...args:any[]) => { emit('cellMouseLeave', ...args) }"
+    @current-change="(...args:any[]) => { emit('currentChange', ...args) }"
+    @expand-change="(...args:any[]) => { emit('expandChange', ...args) }"
+    @filter-change="(...args:any[]) => { emit('filterChange', ...args) }"
+    @header-click="(...args:any[]) => { emit('headerClick', ...args) }"
+    @header-contextmenu="(...args:any[]) => { emit('headerContextmenu', ...args) }"
+    @header-dragend="(...args:any[]) => { emit('headerDragend', ...args) }"
+    @row-click="(...args:any[]) => { emit('rowClick', ...args) }"
+    @row-contextmenu="(...args:any[]) => { emit('rowContextmenu', ...args) }"
+    @row-dblclick="(...args:any[]) => { emit('rowDblclick', ...args) }"
+    @select="(...args:any[]) => { emit('select', ...args) }"
+    @select-all="(...args:any[]) => { emit('selectAll', ...args) }"
+    @selection-change="(...args:any[]) => { emit('selectionChange', ...args) }"
+    @sort-change="(...args:any[]) => { emit('sortChange', ...args) }"
+  >
+    <el-table-column
+      v-for="column in tableColumns"
+      :key="column.columnName"
+      v-bind="{ ...columnProps, ...column }"
+    >
+      <template #header>
+        <TableHeaderCell
+          v-model:filter-values="filterValueMap[column.columnName]"
+          v-model:sort-rule="tableDataSortRuleMap[column.columnName]"
+          :label="column.columnLabel"
+          :filter-options="filterOptionMap[column.columnName]"
+          :sortable="!!column.needSort"
+          filter-style="arrow"
+        />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
+import type { CSSProperties, VNode } from 'vue'
+import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
+import { CommonData, CommonTableColumn } from '~/common'
+import useTableFilterAndSort from '@/hooks/useTableFilterAndSort'
+import { ElTable } from 'element-plus'
+
+type SummaryMethod<T> = (data: {
+  columns: TableColumnCtx<T>[]
+  data: T[]
+}) => string[]
+type ColumnCls<T> = string | ((data: { row: T; rowIndex: number }) => string)
+type ColumnStyle<T> =
+  | CSSProperties
+  | ((data: { row: T; rowIndex: number }) => CSSProperties)
+type CellCls<T> =
+  | string
+  | ((data: {
+      row: T
+      rowIndex: number
+      column: TableColumnCtx<T>
+      columnIndex: number
+    }) => string)
+type CellStyle<T> =
+  | CSSProperties
+  | ((data: {
+      row: T
+      rowIndex: number
+      column: TableColumnCtx<T>
+      columnIndex: number
+    }) => CSSProperties)
+type Sort = {
+  prop: string
+  order: 'ascending' | 'descending'
+  init?: any
+  silent?: any
+}
+type TreeNode = {
+  expanded?: boolean
+  loading?: boolean
+  noLazyChildren?: boolean
+  indent?: number
+  level?: number
+  display?: boolean
+}
+type Layout = 'fixed' | 'auto'
+type TableColumnProps<T> = {
+  type?: string
+  index?: number | ((index: number) => number)
+  columnKey?: string
+  width?: string | number
+  minWidth?: string | number
+  fixed?: boolean | string
+  renderHeader?: (data: { column: TableColumnCtx<T>; $index: number }) => VNode
+  resizable?: boolean
+  formatter?: (
+    row: T,
+    column: TableColumnCtx<T>,
+    cellValue: any,
+    index: number
+  ) => VNode | string
+  showOverflowTooltip?: boolean
+  align?: string
+  headerAlign?: string
+  className?: string
+  labelClassName?: string
+  selectable?: (row: T, index: number) => boolean
+  reserveSelection?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    data: CommonData[]
+    size?: string
+    width?: string | number
+    height?: string | number
+    maxHeight?: string | number
+    fit?: boolean
+    stripe?: boolean
+    border?: boolean
+    rowKey?: string | ((row: CommonData) => string)
+    showHeader?: boolean
+    showSummary?: boolean
+    sumText?: string
+    summaryMethod?: SummaryMethod<CommonData>
+    rowClassName?: ColumnCls<CommonData>
+    rowStyle?: ColumnStyle<CommonData>
+    cellClassName?: CellCls<CommonData>
+    cellStyle?: CellStyle<CommonData>
+    headerRowClassName?: ColumnCls<CommonData>
+    headerRowStyle?: ColumnStyle<CommonData>
+    headerCellClassName?: CellCls<CommonData>
+    headerCellStyle?: CellStyle<CommonData>
+    highlightCurrentRow?: boolean
+    currentRowKey?: string | number
+    emptyText?: string
+    expandRowKeys?: any[]
+    defaultExpandAll?: boolean
+    defaultSort?: Sort
+    tooltipEffect?: string
+    spanMethod?: (data: {
+      row: CommonData
+      rowIndex: number
+      column: TableColumnCtx<CommonData>
+      columnIndex: number
+    }) =>
+      | number[]
+      | {
+          rowspan: number
+          colspan: number
+        }
+      | undefined
+    selectOnIndeterminate?: boolean
+    indent?: number
+    treeProps?: {
+      hasChildren?: string
+      children?: string
+    }
+    lazy?: boolean
+    load?: (
+      row: CommonData,
+      treeNode: TreeNode,
+      resolve: (data: CommonData[]) => void
+    ) => void
+    className?: string
+    style?: CSSProperties
+    tableLayout?: Layout
+    flexible?: boolean
+    columnProps?: TableColumnProps<CommonData>
+    columns: (CommonTableColumn & TableColumnProps<CommonData>)[]
+  }>(),
+  {
+    size: 'small',
+    height: '100%',
+    maxHeight: '100%',
+    stripe: true,
+    border: true,
+    fit: true,
+    showHeader: true,
+  }
+)
+
+const defaultSummaryMethod = ({ columns, data }) => {
+  const sums: string[] = []
+  columns.forEach((column, index) => {
+    tableColumns.value.forEach(col => {
+      if (column.property === col.columnName && col.needCount) {
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = String(
+            values.reduce((prev, curr) => {
+              const value = Number(curr)
+              if (!isNaN(value)) {
+                return prev + curr
+              } else {
+                return prev
+              }
+            }, 0)
+          )
+        }
+      }
+    })
+  })
+  sums[0] = '合计：' + (sums[0] ?? '')
+  return sums
+}
+
+const tableProps = computed(() => {
+  const rawProps = toRaw(props)
+  const result: { [x: string]: any } = {}
+  Object.entries(rawProps).forEach(([key, value]) => {
+    if (!['columnProps', 'columns'].includes(key) && (value ?? '') !== '') {
+      result[key] = value
+    }
+    if (props.columns.some(column => column.needCount)) {
+      result.showSummary = true
+    }
+    if (!result.summaryMethod) {
+      result.summaryMethod = defaultSummaryMethod
+    }
+  })
+  return result
+})
+
+const tableColumns = ref<CommonTableColumn[]>([])
+const tableData = ref<CommonData[]>([])
+watchEffect(() => {
+  tableColumns.value = props.columns.map(column => ({
+    label: column.columnLabel,
+    prop: column.columnName,
+    ...column,
+  }))
+  tableData.value = props.data
+})
+
+const {
+  filterOptionMap,
+  filterValueMap,
+  tableDataSortRuleMap,
+  dealedTableData,
+} = useTableFilterAndSort(tableColumns, tableData)
+
+const emit = defineEmits([
+  'select',
+  'selectAll',
+  'selectionChange',
+  'cellMouseEnter',
+  'cellMouseLeave',
+  'cellClick',
+  'cellDblclick',
+  'cellContextmenu',
+  'rowClick',
+  'rowContextmenu',
+  'rowDblclick',
+  'headerClick',
+  'headerContextmenu',
+  'sortChange',
+  'filterChange',
+  'currentChange',
+  'headerDragend',
+  'expandChange',
+])
+
+const table = ref<InstanceType<typeof ElTable> | null>(null)
+defineExpose({
+  table,
+})
+</script>
+
+<style scoped lang="scss">
+:deep.el-table {
+  .el-table__header .el-table__cell {
+    background: #ffffff;
+    font-weight: bold;
+    .cell {
+      height: 100%;
+    }
+  }
+  .el-table__body {
+    .el-table__row--striped .el-table__cell {
+      background-color: #f0f3f7;
+    }
+    .el-table__cell.cell-click {
+      color: #2d67e3;
+      cursor: pointer;
+    }
+  }
+  .el-table__cell {
+    padding: 0;
+    height: 40px;
+    font-size: 14px;
+    color: #101116;
+    .cell {
+      padding: 0;
+    }
+  }
+}
+</style>

src/components/TableHeaderCell/index.vue

@@ -3,6 +3,7 @@
     :class="[
       'table-header-cell',
       'el-table-v2__header-cell-text',
+      'el-table__header-cell-text',
       {
         'table-header-cell-space-between':
           (filterable && filterStyle === 'arrow') || sortable,
@@ -10,12 +11,13 @@
     ]"
   >
     <template v-if="filterable && filterStyle === 'underline'">
-      <span
-        ref="buttonRef"
-        v-click-outside="clickOutsideHandler"
-        :class="['filter-button', { 'filter-button-active': active }]"
-      >
-        <span class="filter-button-text">{{ label }}</span>
+      <span :class="['filter-button-wrapper']">
+        <span
+          :class="['filter-button', { 'filter-button-active': active }]"
+          ref="buttonRef"
+          v-click-outside="clickOutsideHandler"
+          >{{ label }}</span
+        >
       </span>
     </template>
     <template v-else>
@@ -154,10 +156,10 @@ const sortChange = () => {
   &.table-header-cell-space-between {
     justify-content: space-between;
   }
-  .filter-button {
+  .filter-button-wrapper {
     flex: 1;
     cursor: pointer;
-    &-text {
+    .filter-button {
       position: relative;
       &::after {
         content: '';
@@ -168,14 +170,14 @@ const sortChange = () => {
         left: -2px;
         border-bottom: 1px solid #101116;
       }
-    }
-    &:hover {
-      color: #2d7cff;
-    }
-    &-active,
-    &:hover {
-      .filter-button-text::after {
-        border-bottom: 2px solid #2d7cff;
+      &:hover {
+        color: #2d7cff;
+      }
+      &-active,
+      &:hover {
+        &::after {
+          border-bottom: 2px solid #2d7cff;
+        }
       }
     }
   }

src/components/tableTemp/index.vue

@@ -254,13 +254,8 @@ const cellClickHandler = (row, column, cell, event) => {
   emit('cellClick', row, column, cell, event)
 }
 
-// 这里的参数是proxy代理对象，用toRaw获取原始对象
 const selectHandler = (selection, row) => {
-  emit(
-    'select',
-    selection.map(row => toRaw(row)),
-    toRaw(row)
-  )
+  emit('select', selection, row)
 }
 
 const table = ref<InstanceType<typeof ElTable> | null>(null)

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

@@ -12,7 +12,7 @@ const ActualTimeRoutes = {
     {
       path: '/realTime/departure',
       name: 'Departure',
-      redirect: '/realTime/departure/station',
+      redirect: '/realTime/departure/airport',
       meta: {
         title: '国内出港',
         elSvgIcon: 'Fold',
@@ -23,8 +23,8 @@ const ActualTimeRoutes = {
       },
       children: [
         {
-          path: '/realTime/departure/station',
-          name: 'DepartureStation',
+          path: '/realTime/departure/airport',
+          name: 'DepartureAirport',
           meta: {
             title: '国内出港航站视图',
             breadcrumb: false,
@@ -34,10 +34,10 @@ const ActualTimeRoutes = {
           },
           children: [
             {
-              path: '/realTime/departure/station',
-              name: 'DepartureStationView',
+              path: '/realTime/departure/airport',
+              name: 'DepartureAirportView',
               component: () =>
-                import('@/views/realTime/departure/station/index.vue'),
+                import('@/views/realTime/departure/airport/index.vue'),
             },
             {
               path: '/realTime/departure/flight',
@@ -53,7 +53,8 @@ const ActualTimeRoutes = {
                   path: '/realTime/departure/flight',
                   name: 'DepartureFlightView',
                   component: () =>
-                    import('@/views/realTime/departure/flight/index.vue'),
+                    // import('@/views/realTime/departure/flight/index.vue'),
+                    import('@/views/realTime/departure/flight/test.vue'),
                 },
                 {
                   path: '/realTime/departure/waybill',
@@ -97,7 +98,7 @@ const ActualTimeRoutes = {
     {
       path: '/realTime/internationalDeparture',
       name: 'InternationalDeparture',
-      redirect: '/realTime/internationalDeparture/station',
+      redirect: '/realTime/internationalDeparture/airport',
       meta: {
         title: '国际出港',
         elSvgIcon: 'Fold',
@@ -109,19 +110,19 @@ const ActualTimeRoutes = {
       },
       children: [
         {
-          path: '/realTime/internationalDeparture/station',
-          name: 'InternationalDepartureStation',
+          path: '/realTime/internationalDeparture/airport',
+          name: 'InternationalDepartureAirport',
           meta: { title: '国际出港航站视图' },
           component: {
             render: () => h(resolveComponent('router-view')),
           },
           children: [
             {
-              path: '/realTime/internationalDeparture/station',
-              name: 'InternationalDepartureStationView',
+              path: '/realTime/internationalDeparture/airport',
+              name: 'InternationalDepartureAirportView',
               component: () =>
                 import(
-                  '@/views/realTime/internationalDeparture/station/index.vue'
+                  '@/views/realTime/internationalDeparture/airport/index.vue'
                 ),
             },
             {
@@ -188,7 +189,7 @@ const ActualTimeRoutes = {
     {
       path: '/realTime/arrival',
       name: 'Arrival',
-      redirect: '/realTime/arrival/station',
+      redirect: '/realTime/arrival/airport',
       meta: {
         title: '国内进港',
         elSvgIcon: 'Fold',
@@ -200,18 +201,18 @@ const ActualTimeRoutes = {
       },
       children: [
         {
-          path: '/realTime/arrival/station',
-          name: 'ArrivalStation',
+          path: '/realTime/arrival/airport',
+          name: 'ArrivalAirport',
           meta: { title: '国内进港航站视图' },
           component: {
             render: () => h(resolveComponent('router-view')),
           },
           children: [
             {
-              path: '/realTime/arrival/station',
-              name: 'ArrivalStationView',
+              path: '/realTime/arrival/airport',
+              name: 'ArrivalAirportView',
               component: () =>
-                import('@/views/realTime/arrival/station/index.vue'),
+                import('@/views/realTime/arrival/airport/index.vue'),
             },
             {
               path: '/realTime/arrival/flight',
@@ -271,7 +272,7 @@ const ActualTimeRoutes = {
     {
       path: '/realTime/internationalArrival',
       name: 'InternationalArrival',
-      redirect: '/realTime/internationalArrival/station',
+      redirect: '/realTime/internationalArrival/airport',
       meta: {
         title: '国际进港',
         elSvgIcon: 'Fold',
@@ -283,19 +284,19 @@ const ActualTimeRoutes = {
       },
       children: [
         {
-          path: '/realTime/internationalArrival/station',
-          name: 'InternationalArrivalStation',
+          path: '/realTime/internationalArrival/airport',
+          name: 'InternationalArrivalAirport',
           meta: { title: '国际进港航站视图' },
           component: {
             render: () => h(resolveComponent('router-view')),
           },
           children: [
             {
-              path: '/realTime/internationalArrival/station',
-              name: 'InternationalArrivalStationView',
+              path: '/realTime/internationalArrival/airport',
+              name: 'InternationalArrivalAirportView',
               component: () =>
                 import(
-                  '@/views/realTime/internationalArrival/station/index.vue'
+                  '@/views/realTime/internationalArrival/airport/index.vue'
                 ),
             },
             {

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

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

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

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

src/views/realTime/components/StationForm/index.vue → src/views/realTime/components/AirportView/AirportForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="formData" inline class="station-form">
+  <el-form :model="formData" inline class="airport-form">
     <el-form-item :prop="formData.startDate" style="width: 172px">
       <el-date-picker
         v-model="formData.startDate"
@@ -152,7 +152,7 @@ const waybillTypeOptions = ref([
 </script>
 
 <style scoped lang="scss">
-.station-form :deep {
+.airport-form :deep {
   .el-form-item {
     margin: 0;
     &:not(:last-of-type) {

src/views/realTime/style/station.scss → src/views/realTime/components/AirportView/index.scss

@@ -1,16 +1,16 @@
-.station-view {
+.airport-view {
   width: calc(100% + calc(var(--app-main-padding) * 2) - 8px);
   height: 100%;
   margin-left: calc(var(--app-main-padding) * -1 + 8px);
   margin-right: calc(var(--app-main-padding) * -1);
-  .station-header {
+  .airport-header {
     padding-right: 32px;
     display: flex;
     margin-bottom: 16px;
-    .station-form {
+    .airport-form {
       margin-right: 30px;
     }
-    .station-count {
+    .airport-count {
       flex: 1;
       display: flex;
       align-items: center;
@@ -18,15 +18,15 @@
         flex: 1;
       }
     }
-    .station-settings {
+    .airport-settings {
       display: flex;
       align-items: center;
-      .station-switch {
+      .common-switch {
         margin-right: 24px;
       }
     }
   }
-  .station-table {
+  .airport-table {
     width: 100%;
     height: calc(100% - 32px - 16px);
     :deep .el-table-v2 {

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="station-view">
-    <div class="station-header">
-      <StationForm
+  <div class="airport-view">
+    <div class="airport-header">
+      <AirportForm
         :international="international"
         @form-data-change="formDataChangeHandler"
       />
-      <div class="station-count">
+      <div class="airport-count">
         <CountBox
           :count-number="tableDataCount.waybillCount"
           label="预计装载总运单数"
@@ -16,16 +16,16 @@
           label="预计装载总件数"
         />
       </div>
-      <div class="station-settings">
-        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
-        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
+      <div class="airport-settings">
+        <CommonSwitch v-model:flag="goodsCountFlag" label="显示件数" />
+        <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
         <ColumnSet
           :table-columns="tableColumns"
           @checked-submit="columnChecked"
         />
       </div>
     </div>
-    <div class="station-table">
+    <div class="airport-table">
       <el-auto-resizer>
         <template #default="{ height, width }">
           <el-table-v2
@@ -34,7 +34,7 @@
             :width="width"
             :height="height"
             :footer-height="60"
-            :row-class="rowClass"
+            :row-class="rowClassV2"
           >
             <template #header-cell="slot: HeaderCellSlotProps">
               <TableHeaderCell
@@ -47,7 +47,7 @@
               />
             </template>
             <template #cell="slot: CellSlotProps">
-              <div :class="cellClass(slot)" @click="cellClickHandler(slot)">
+              <div :class="cellClassV2(slot)" @click="cellClickHandlerV2(slot)">
                 <span class="cell-text">
                   {{ slot.rowData[slot.column.columnName] }}
                 </span>
@@ -79,35 +79,35 @@
 <script lang="ts" setup>
 import { PropType } from 'vue'
 import type { CellSlotProps } from '../../type'
-import StationForm from '../../components/StationForm/index.vue'
+import AirportForm from './AirportForm.vue'
 import ColumnSet from '../../components/ColumnSet/index.vue'
 import CountBox from '../../components/CountBox/index.vue'
-import TableSwitch from '../../components/TableSwitch/index.vue'
+import CommonSwitch from '../../components/CommonSwitch/index.vue'
 import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
 import useTableColumnSet from '../../hooks/useTableColumnSet'
-import useTableData from '../../hooks/useTableData'
+import useAirportTable from './useAirportTable'
 import useTableStyle from '../../hooks/useTableStyle'
 import useTableCellClick from '../../hooks/useTableCellClick'
-import useTableFilterAndSort from '../../hooks/useTableFilterAndSort'
+import useTableFilterAndSort from '@/hooks/useTableFilterAndSort'
 import { HeaderCellSlotProps } from 'element-plus'
 import { CommonData } from '~/common'
 
-type StationViewName =
+type AirportViewName =
   | 'departure'
   | 'arrival'
   | 'internationalDeparture'
   | 'internationalArrival'
 
 const props = defineProps({
-  stationViewName: {
-    type: String as PropType<StationViewName>,
+  airportViewName: {
+    type: String as PropType<AirportViewName>,
     required: true,
   },
 })
 
 const international = computed(() =>
   ['internationalDeparture', 'internationalArrival'].includes(
-    props.stationViewName
+    props.airportViewName
   )
 )
 const formData = reactive<CommonData>({})
@@ -118,13 +118,13 @@ const formDataChangeHandler = (data: CommonData) => {
 const goodsCountFlag = ref(true)
 const UTCFlag = ref(true)
 
-const { tableColumns, tableData } = useTableData(
-  props.stationViewName,
+const { tableColumns, tableData } = useAirportTable(
+  props.airportViewName,
   formData,
   international
 )
 const { columnChecked } = useTableColumnSet(tableColumns)
-const { rowClass, cellClass } = useTableStyle()
+const { rowClassV2, cellClassV2 } = useTableStyle()
 
 const tableDataCount = computed(() => ({
   waybillCount: tableData.value.length,
@@ -135,7 +135,7 @@ const tableDataCount = computed(() => ({
   takeOffCount: tableData.value.length,
 }))
 
-const { cellClickHandler } = useTableCellClick()
+const { cellClickHandlerV2 } = useTableCellClick()
 
 const {
   filterOptionMap,
@@ -145,5 +145,5 @@ const {
 } = useTableFilterAndSort(tableColumns, tableData)
 </script>
 <style lang="scss" scoped>
-@import '../../style/station.scss';
+@import './index.scss';
 </style>

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

@@ -0,0 +1,596 @@
+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 = {
+  departure: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '8/536',
+      C10: '8/536',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '4/243',
+      C10: '8/536',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '8/536',
+      C10: '5/357',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+  ],
+  arrival: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '0/6',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+  ],
+  internationalDeparture: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '8/536',
+      C10: '8/536',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '4/243',
+      C10: '8/536',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      planDepartureTime: '22/09/10 12:01',
+      landingAirport: '-NGK-PEK',
+      takeOffStand: '84',
+      inFlightNO: 'HU2451',
+      planLandingTime: '2022/09/10 11:01',
+      C1: '锂2/冷1',
+      C2: '365/536',
+      C3: '1/2',
+      C4: '',
+      C5: '364/534/1254KG',
+      C6: '0/7',
+      C7: '364/534',
+      C8: '8/365/536/1254KG',
+      C9: '8/536',
+      C10: '5/357',
+      C11: '11:45',
+      C12: '8/536',
+      C13: '8/536',
+      C14: '8/536',
+      C15: '8/536',
+      C16: '0/358/5',
+      C17: '0/5',
+    },
+  ],
+  internationalArrival: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '0/6',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      planLandingTime: '22/09/10 12:01',
+      landingAirport: 'NKG-PEK-',
+      landingStand: '84',
+      C1: '锂2/冷1',
+      C2: '363/543',
+      C3: '',
+      C4: '',
+      C5: '8/8/8',
+      C6: '8/8/8',
+      C7: '8/8/8',
+      C8: '8/363/537/1254KG',
+      C9: '3/363/537',
+    },
+  ],
+}
+const headerClassMap = ['bg-yellow', 'bg-green', 'bg-cyan']
+
+const computedWidth = (text: string) => {
+  let width = 0
+  text.split('\n').forEach(line => {
+    const len = line.length
+    let realLength = 0
+    for (let i = 0; i < len; i++) {
+      realLength += line.charCodeAt(i) > 255 ? 2 : 1
+    }
+    if (width < (realLength + 2) * 10) {
+      width = (realLength + 2) * 10
+    }
+  })
+  if (['航班号', '目的站'].includes(text)) {
+    width += 10
+  }
+  return width
+}
+
+export default function useAirportTable(
+  viewName:
+    | 'departure'
+    | 'arrival'
+    | 'internationalDeparture'
+    | 'internationalArrival',
+  formData: CommonData,
+  international: Ref<boolean>
+) {
+  const tableColumns = ref<CommonTableColumn[]>([])
+  const tableData = ref<CommonData[]>([])
+  const getTableColumns = () => {
+    const groups = ['departure', 'internationalDeparture'].includes(viewName)
+      ? departureColumnGroups
+      : arrivalColumnGroups
+    tableColumns.value = groups.reduce(
+      (columns: CommonTableColumn[], group, groupIndex) => {
+        group.children.forEach(({ columnName, columnLabel }) => {
+          columns.push({
+            key: columnName,
+            dataKey: columnName,
+            title: columnLabel,
+            columnName,
+            columnLabel,
+            columnDescribe: '',
+            dataType: '',
+            listqueryTemplateID: null,
+            needCount: null,
+            needFilters: ['航班号', '目的站'].includes(columnLabel) ? 1 : 0,
+            needGroup: null,
+            needSearch: null,
+            needShow: 1,
+            needSort: null,
+            orderNumber: null,
+            queryTemplateColumnSetID: null,
+            queryTemplateID: null,
+            width: computedWidth(columnLabel),
+            flexGrow: 1,
+            align: 'center',
+            headerClass: headerClassMap[groupIndex],
+            groupName: group.groupName,
+          })
+        })
+        return columns
+      },
+      []
+    )
+  }
+  const getTableData = async () => {
+    try {
+      const {
+        startDate,
+        endDate,
+        flightStatus,
+        flightWarning,
+        waybillType,
+      } = formData
+      const dataContent = [startDate, endDate, flightStatus, flightWarning]
+      if (international.value) {
+        dataContent.push(waybillType)
+      }
+      const {
+        code,
+        returnData: { columnSet, listValues },
+        message,
+      } = await Query<CommonData>({
+        id: DATACONTENT_ID[`${viewName}Airport`],
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message || '失败')
+      }
+      // tableColumns.value = columnSet.map(column => ({
+      //   key: column.columnName,
+      //   dataKey: column.columnName,
+      //   title: column.columnLabel,
+      //   width: column.columnLabel.length * 50,
+      //   flexGrow: 1,
+      //   align: 'center',
+      //   ...column,
+      // }))
+      tableData.value = listValues
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getSimulateTableData = () => {
+    tableData.value = simulateTableData[viewName]
+  }
+  let queryLoop: number | null = null
+  const startQuery = async () => {
+    await getTableData()
+    queryLoop = window.setTimeout(
+      startQuery,
+      LOOP_INTERVAL[`${viewName}Airport`]
+    )
+  }
+  const stopQuery = () => {
+    if (queryLoop) {
+      clearTimeout(queryLoop)
+      queryLoop = null
+    }
+  }
+
+  // watch(formData, data => {
+  //   stopQuery()
+  //   if (data.startDate && data.endDate) {
+  //     startQuery()
+  //   }
+  // })
+  // onUnmounted(stopQuery)
+
+  onMounted(() => {
+    getTableColumns()
+    getSimulateTableData()
+  })
+
+  return {
+    tableColumns,
+    tableData,
+  }
+}

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

@@ -1,5 +1,6 @@
 <template>
   <el-button
+    v-bind="$attrs"
     :icon="Tools"
     color="#ac014d"
     class="column-set-button"
@@ -20,24 +21,29 @@
             v-model="tempGroups[columnGroup.title]"
             size="large"
           >
-            <el-checkbox
+            <div
               v-for="column in columnGroup.columns"
               :key="column.columnName"
-              :label="column.columnName"
-              >{{ column.title.replace('\n', '') }}</el-checkbox
+              class="checkbox-wrapper"
             >
+              <el-checkbox :label="column.columnName">{{
+                column.columnLabel?.replace('\n', '')
+              }}</el-checkbox>
+            </div>
           </el-checkbox-group>
         </div>
       </template>
       <template v-else>
         <el-checkbox-group v-model="tempKeys" size="large">
-          <el-checkbox
+          <div
             v-for="column in needShowColumns"
             :key="column.columnName"
-            :label="column.columnName"
+            class="checkbox-wrapper"
           >
-            {{ column.title?.replace('\n', '') }}
-          </el-checkbox>
+            <el-checkbox :label="column.columnName">
+              {{ column.columnLabel?.replace('\n', '') }}
+            </el-checkbox>
+          </div>
         </el-checkbox-group>
       </template>
     </div>
@@ -169,8 +175,7 @@ watch(needShowColumns, columns => {
     display: flex;
     flex-wrap: wrap;
     align-content: center;
-
-    .el-checkbox {
+    .checkbox-wrapper {
       width: 20%;
       margin: 0;
     }

src/views/realTime/components/TableSwitch/index.vue → src/views/realTime/components/CommonSwitch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="station-switch">
+  <div class="common-switch switch-wrapper">
     <el-switch
       v-model="flag"
       size="default"
@@ -29,7 +29,7 @@ const updateFlag = (val: boolean) => {
 </script>
 
 <style scoped lang="scss">
-.station-switch {
+.switch-wrapper {
   height: 32px;
   .switch-label {
     padding-left: 4px;

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

@@ -0,0 +1,283 @@
+<template>
+  <div class="flight-view">
+    <div class="flight-view-top">
+      <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>
+        </div>
+      </div>
+      <div v-if="isDeparture" class="container-list">
+        <SimpleTable
+          :data="containerTableData"
+          :columns="containerTableColumns"
+        />
+      </div>
+    </div>
+    <div class="waybill-list-wrapper">
+      <div class="waybill-list-header">
+        <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
+        <el-button
+          class="button-sqaure"
+          :icon="Refresh"
+          color="#ac014d"
+          @click="refreshHandler"
+        />
+        <el-button
+          class="button-sqaure"
+          :icon="Download"
+          color="#ac014d"
+          @click="downloadHandler"
+        />
+        <ColumnSet
+          class="button-sqaure"
+          :table-columns="waybillTableColumns"
+          @checked-submit="columnChecked"
+        />
+        <Search @search="search" @clear="clear" />
+      </div>
+      <div class="waybill-list">
+        <SimpleTable
+          ref="waybillTableRef"
+          :data="waybillTableData"
+          :columns="filteredWaybillColumns"
+          :row-class-name="rowClass"
+          :cell-class-name="cellClass"
+          @click="cellClickHandler"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Search from '@/components/search/index.vue'
+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'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+})
+
+const router = useRouter()
+const route = useRoute()
+const { flightNO, flightDate, departureAirport, landingAirport } = route.query
+if (!flightNO || !flightDate) {
+  router.push('/')
+}
+const dataContent = [
+  flightNO,
+  flightDate,
+  departureAirport,
+  landingAirport,
+] as string[]
+
+const airLine = ref('SZX - CA4120 - NKG')
+const flightInfo = reactive<CommonData>({
+  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',
+})
+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 {
+  tableColumns: containerTableColumns,
+  tableData: containerTableData,
+} = useTable('flightContainer', dataContent)
+
+const {
+  tableColumns: waybillTableColumns,
+  tableData: waybillTableData,
+} = useTable('flightWaybill', dataContent)
+
+const UTCFlag = ref(true)
+
+const refreshHandler = () => {}
+
+const {
+  filteredColumns: filteredWaybillColumns,
+  columnChecked,
+} = useTableColumnSet(waybillTableColumns)
+
+//点击刷新按钮
+const refresh = data => {
+  console.log(data)
+}
+
+const waybillTableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
+const { exportToExcel } = useTableExport()
+//点击下载按钮
+const downloadHandler = () => {
+  const table = waybillTableRef.value!.table!
+  exportToExcel({ table })
+}
+
+//清空搜索
+const clear = data => {
+  console.log(data)
+}
+
+//点击搜索按钮
+const search = data => {
+  console.log(data)
+}
+
+const { rowClass, cellClass } = useTableStyle('flightWaybill')
+
+const { cellClickHandler } = useTableCellClick('flightWaybill')
+</script>
+<style lang="scss" scoped>
+.flight-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .flight-view-top {
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flight-info-wrapper {
+      flex: 0 1 1040px;
+      height: 100%;
+      background: #410425;
+      box-sizing: border-box;
+      padding: 18px 32px;
+      .air-line {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .flight-info-box-wrapper {
+        width: 100%;
+        max-width: 976px;
+        display: flex;
+        justify-content: flex-start;
+        justify-items: center;
+        .info-box {
+          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-list {
+      flex: 1;
+      height: 100%;
+      margin-left: 16px;
+    }
+  }
+  .waybill-list-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .waybill-list-header :deep {
+      height: 72px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .button-sqaure {
+        margin-left: 24px;
+        width: 30px;
+        height: 30px;
+        border-radius: 4px;
+        font-size: 16px;
+        &:last-of-type {
+          margin-right: 48px;
+        }
+      }
+    }
+    .waybill-list {
+      flex: 1;
+    }
+  }
+}
+</style>

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

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

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

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

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

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

src/views/realTime/hooks/useTable.ts

@@ -0,0 +1,175 @@
+import { Query } from '@/api/webApi'
+import { CommonValue, CommonData, CommonTableColumn } from '~/common'
+
+const tableColumnsMap: {
+  [tableName: string]: ({
+    columnLabel: string
+    columnName: string
+  } & CommonData)[]
+} = {
+  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' },
+  ],
+  flightWaybill: [
+    { columnLabel: '运单号', columnName: 'C0', width: '120px' },
+    { columnLabel: '集装器数量', columnName: 'C1', needCount: 1 },
+    { columnLabel: '品名', columnName: 'C2' },
+    { columnLabel: '特货信息', columnName: 'C3' },
+    { columnLabel: '货物件数', columnName: 'C4', needCount: 1 },
+    { columnLabel: '拉下件数', columnName: 'C5', needCount: 1 },
+    { columnLabel: '退运件数', columnName: 'C6', needCount: 1 },
+    { columnLabel: '最新节点', columnName: 'C7' },
+    { columnLabel: '最新位置', columnName: 'C8' },
+    { columnLabel: '处理结果', columnName: 'C9' },
+    { columnLabel: '处理时间', columnName: 'C10', width: '130px' },
+    { columnLabel: '中转进航班号', columnName: 'C11' },
+    { columnLabel: '中转航班降落时间', columnName: 'C12', width: '130px' },
+    { columnLabel: '装载序号', columnName: 'C13' },
+  ],
+}
+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',
+    },
+  ],
+  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',
+    },
+  ],
+}
+
+export default function useTable(
+  tableName: string,
+  dataContent?: CommonValue[]
+) {
+  const tableColumns = ref<CommonTableColumn[]>([])
+  const tableData = ref<CommonData[]>([])
+  const getTableColumns = () => {
+    tableColumns.value = tableColumnsMap[tableName].map(column => ({
+      columnDescribe: '',
+      dataType: '',
+      listqueryTemplateID: null,
+      needCount: null,
+      needFilters: null,
+      needGroup: null,
+      needSearch: null,
+      needShow: 1,
+      needSort: null,
+      orderNumber: null,
+      queryTemplateColumnSetID: null,
+      queryTemplateID: null,
+      align: 'center',
+      ...column,
+    }))
+  }
+  const getTableData = async () => {
+    try {
+      const {
+        code,
+        returnData: { columnSet, listValues },
+        message,
+      } = await Query<CommonData>({
+        id: DATACONTENT_ID[tableName],
+        dataContent,
+      })
+      if (Number(code) !== 0) {
+        throw new Error(message || '失败')
+      }
+      tableData.value = listValues
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  const getSimulateTableData = () => {
+    tableData.value = simulateTableDataMap[tableName]
+  }
+
+  onMounted(() => {
+    if (tableColumnsMap[tableName]) {
+      getTableColumns()
+      // getTableData()
+      getSimulateTableData()
+    }
+  })
+
+  return {
+    tableColumns,
+    tableData,
+  }
+}

src/views/realTime/hooks/useTableCellClick.ts

@@ -1,9 +1,29 @@
 import type { CellSlotProps } from '../type'
 
-export default function useTableCellClick() {
+export default function useTableCellClick(tableName?: string) {
   const router = useRouter()
   const route = useRoute()
-  const cellClickHandler = ({ column, rowData }: CellSlotProps) => {
+  const cellClickHandler = (row, column, cell, event) => {
+    switch (tableName) {
+      case 'flightWaybill':
+        switch (column.columnName) {
+          case 'C0':
+            router.push({
+              path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+              query: {
+                waybillNo: row.C0,
+              },
+            })
+            break
+          default:
+            break
+        }
+        break
+      default:
+        break
+    }
+  }
+  const cellClickHandlerV2 = ({ column, rowData }: CellSlotProps) => {
     switch (column.columnName) {
       case 'flightNO':
         router.push({
@@ -21,5 +41,6 @@ export default function useTableCellClick() {
 
   return {
     cellClickHandler,
+    cellClickHandlerV2
   }
 }

src/views/realTime/hooks/useTableColumnSet.ts

@@ -5,16 +5,25 @@ export default function useTableColumnSet(
   tableColumns: Ref<CommonTableColumn[]>
 ) {
   const filterColumnKeys = ref<string[]>([])
+  const filteredColumns = ref<CommonTableColumn[]>([])
   watchEffect(() => {
-    tableColumns.value.forEach(column => {
-      column.hidden =
-        !column.needShow || !filterColumnKeys.value.includes(column.columnName)
+    filteredColumns.value = tableColumns.value.filter(column => {
+      if (
+        column.needShow &&
+        filterColumnKeys.value.includes(column.columnName)
+      ) {
+        column.hidden = false
+        return column
+      } else {
+        column.hidden = true
+      }
     })
   })
   const columnChecked = (checkedColumnKeys: string[]) => {
     filterColumnKeys.value = checkedColumnKeys
   }
   return {
+    filteredColumns,
     columnChecked,
   }
 }

src/views/realTime/hooks/useTableData.ts

@@ -1,588 +0,0 @@
-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: 'takeOffTime',
-        columnLabel: '起飞时间',
-      },
-      {
-        columnName: 'desitination',
-        columnLabel: '目的站',
-      },
-      {
-        columnName: 'gate',
-        columnLabel: '停机位',
-      },
-      {
-        columnName: 'preFlightNO',
-        columnLabel: '前序航班',
-      },
-      {
-        columnName: 'landingTime',
-        columnLabel: '实际降落\n时间',
-      },
-    ],
-  },
-  {
-    groupName: '货站相关',
-    children: [
-      {
-        columnName: 'special',
-        columnLabel: '特货信息',
-      },
-      {
-        columnName: 'projectLoad',
-        columnLabel: '预计装载数\n(运单/件)',
-      },
-      {
-        columnName: 'transferIn',
-        columnLabel: '中转进\n(运单/件)',
-      },
-      {
-        columnName: 'cancel',
-        columnLabel: '退运\n(板卡/件)',
-      },
-    ],
-  },
-  {
-    groupName: '地服相关',
-    children: [
-      {
-        columnName: 'receive',
-        columnLabel: '收运核单\n(运单/件/重量)',
-      },
-      {
-        columnName: 'check',
-        columnLabel: '查验\n(拒运/查验)',
-      },
-      {
-        columnName: 'security',
-        columnLabel: '安检\n(运单/件)',
-      },
-      {
-        columnName: 'add',
-        columnLabel: '加货\n(运单/板卡/件/重量)',
-      },
-      {
-        columnName: 'wait',
-        columnLabel: '待运区\n(板卡/件)',
-      },
-      {
-        columnName: 'stowage',
-        columnLabel: '配载\n(板卡/件)',
-      },
-      {
-        columnName: 'handOverTime',
-        columnLabel: '计划交接\n时间',
-      },
-      {
-        columnName: 'stationHandOver',
-        columnLabel: '货站交接\n(板卡/件)',
-      },
-      {
-        columnName: 'recheck',
-        columnLabel: '运输前复核\n(板卡/件)',
-      },
-      {
-        columnName: 'flightHandOver',
-        columnLabel: '机下交接\n(板卡/件)',
-      },
-      {
-        columnName: 'load',
-        columnLabel: '装机\n(板卡/件)',
-      },
-      {
-        columnName: 'goodsRegister',
-        columnLabel: '拉货登记\n(板卡/件)',
-      },
-      {
-        columnName: 'pullBack',
-        columnLabel: '拉回确认\n(板卡/件)',
-      },
-    ],
-  },
-]
-
-const arrivalColumnGroups = [
-  {
-    groupName: '航班相关',
-    children: [
-      {
-        columnName: 'flightNO',
-        columnLabel: '航班号',
-      },
-      {
-        columnName: 'flightDate',
-        columnLabel: '执飞日期',
-      },
-      {
-        columnName: 'landingTime',
-        columnLabel: '降落时间',
-      },
-      {
-        columnName: 'desitination',
-        columnLabel: '目的站',
-      },
-      {
-        columnName: 'gate',
-        columnLabel: '停机位',
-      },
-    ],
-  },
-  {
-    groupName: '货站相关',
-    children: [
-      {
-        columnName: 'special',
-        columnLabel: '特货信息',
-      },
-      {
-        columnName: 'projectUnload',
-        columnLabel: '预计卸载数\n(运单/件)',
-      },
-      {
-        columnName: 'transferOut',
-        columnLabel: '中转出\n(运单/件)',
-      },
-      {
-        columnName: 'difference',
-        columnLabel: '收货差异\n(板卡/件)',
-      },
-    ],
-  },
-  {
-    groupName: '地服相关',
-    children: [
-      {
-        columnName: 'unload',
-        columnLabel: '卸机\n(板/箱/卡)',
-      },
-      {
-        columnName: 'flightHandOver',
-        columnLabel: '机下交接\n(板/箱/卡)',
-      },
-      {
-        columnName: 'stationHandOver',
-        columnLabel: '货站交接\n(板/箱/卡)',
-      },
-      {
-        columnName: 'settle',
-        columnLabel: '理货\n(板卡/运单/件/重量)',
-      },
-      {
-        columnName: 'outCargo',
-        columnLabel: '出库\n(批/运单/件)',
-      },
-    ],
-  },
-]
-
-const testTableDatas = {
-  departure: [
-    {
-      flightNO: 'ZH3423',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '8/536',
-      stowage: '8/536',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-    {
-      flightNO: 'CA1512',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '4/243',
-      stowage: '8/536',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-    {
-      flightNO: 'ZH3456',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '8/536',
-      stowage: '5/357',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-  ],
-  arrival: [
-    {
-      flightNO: 'ZH3423',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '0/6',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-    {
-      flightNO: 'CA1512',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-    {
-      flightNO: 'ZH3456',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-  ],
-  internationalDeparture: [
-    {
-      flightNO: 'ZH3423',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '8/536',
-      stowage: '8/536',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-    {
-      flightNO: 'CA1512',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '4/243',
-      stowage: '8/536',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-    {
-      flightNO: 'ZH3456',
-      flightDate: '2022/09/10',
-      takeOffTime: '22/09/10 12:01',
-      desitination: '-NGK-PEK',
-      gate: '84',
-      preFlightNO: 'HU2451',
-      landingTime: '2022/09/10 11:01',
-      special: '锂2/冷1',
-      projectLoad: '365/536',
-      transferIn: '1/2',
-      cancel: '',
-      receive: '364/534/1254KG',
-      check: '0/7',
-      security: '364/534',
-      add: '8/365/536/1254KG',
-      wait: '8/536',
-      stowage: '5/357',
-      handOverTime: '11:45',
-      stationHandOver: '8/536',
-      recheck: '8/536',
-      flightHandOver: '8/536',
-      load: '8/536',
-      goodsRegister: '0/358/5',
-      pullBack: '0/5',
-    },
-  ],
-  internationalArrival: [
-    {
-      flightNO: 'ZH3423',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '0/6',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-    {
-      flightNO: 'CA1512',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-    {
-      flightNO: 'ZH3456',
-      flightDate: '2022/09/10',
-      landingTime: '22/09/10 12:01',
-      desitination: 'NKG-PEK-',
-      gate: '84',
-      special: '锂2/冷1',
-      projectUnload: '363/543',
-      transferOut: '',
-      difference: '',
-      unload: '8/8/8',
-      flightHandOver: '8/8/8',
-      stationHandOver: '8/8/8',
-      settle: '8/363/537/1254KG',
-      outCargo: '3/363/537',
-    },
-  ],
-}
-const headerClassMap = ['bg-yellow', 'bg-green', 'bg-cyan']
-export default function useTableData(
-  tableType:
-    | 'departure'
-    | 'arrival'
-    | 'internationalDeparture'
-    | 'internationalArrival',
-  formData: CommonData,
-  international: Ref<boolean>
-) {
-  const tableColumns = ref<CommonTableColumn[]>([])
-  const tableData = ref<CommonData[]>([])
-  const getTableData = async () => {
-    try {
-      const {
-        startDate,
-        endDate,
-        flightStatus,
-        flightWarning,
-        waybillType,
-      } = formData
-      const dataContent = [startDate, endDate, flightStatus, flightWarning]
-      if (international.value) {
-        dataContent.push(waybillType)
-      }
-      const {
-        code,
-        returnData: { columnSet, listValues },
-        message,
-      } = await Query({
-        id: DATACONTENT_ID[`${tableType}Airport`],
-        dataContent,
-      })
-      if (Number(code) !== 0) {
-        throw new Error(message || '失败')
-      }
-      tableColumns.value = columnSet.map(column => ({
-        key: column.columnName,
-        dataKey: column.columnName,
-        title: column.columnLabel,
-        width: column.columnLabel.length * 50,
-        flexGrow: 1,
-        align: 'center',
-        ...column,
-      }))
-      tableData.value = listValues
-    } catch (error) {
-      console.error(error)
-    }
-  }
-  let queryLoop: number | null = null
-  const startQuery = async () => {
-    await getTableData()
-    queryLoop = window.setTimeout(
-      startQuery,
-      LOOP_INTERVAL[`${tableType}Airport`]
-    )
-  }
-  const stopQuery = () => {
-    if (queryLoop) {
-      clearTimeout(queryLoop)
-      queryLoop = null
-    }
-  }
-  // watch(formData, data => {
-  //   stopQuery()
-  //   if (data.startDate && data.endDate) {
-  //     startQuery()
-  //   }
-  // })
-  // onUnmounted(stopQuery)
-
-  const computedWidth = (text: string) => {
-    let width = 0
-    text.split('\n').forEach(line => {
-      const len = line.length
-      let realLength = 0
-      for (let i = 0; i < len; i++) {
-        realLength += line.charCodeAt(i) > 255 ? 2 : 1
-      }
-      if (width < (realLength + 2) * 10) {
-        width = (realLength + 2) * 10
-      }
-    })
-    if (['航班号', '目的站'].includes(text)) {
-      width += 10
-    }
-    return width
-  }
-
-  onMounted(() => {
-    const groups = ['departure', 'internationalDeparture'].includes(tableType)
-      ? departureColumnGroups
-      : arrivalColumnGroups
-    tableColumns.value = groups.reduce(
-      (columns: CommonTableColumn[], group, groupIndex) => {
-        group.children.forEach(({ columnName, columnLabel }) => {
-          columns.push({
-            key: columnName,
-            dataKey: columnName,
-            title: columnLabel,
-            columnName,
-            columnLabel,
-            columnDescribe: '',
-            dataType: '',
-            listqueryTemplateID: null,
-            needCount: null,
-            needFilters: ['航班号', '目的站'].includes(columnLabel) ? 1 : 0,
-            needGroup: null,
-            needSearch: null,
-            needShow: 1,
-            needSort: null,
-            orderNumber: null,
-            queryTemplateColumnSetID: null,
-            queryTemplateID: null,
-            width: computedWidth(columnLabel),
-            flexGrow: 1,
-            align: 'center',
-            headerClass: headerClassMap[groupIndex],
-            groupName: group.groupName,
-          })
-        })
-        return columns
-      },
-      []
-    )
-    tableData.value = testTableDatas[tableType]
-  })
-
-  return {
-    tableColumns,
-    tableData,
-  }
-}

src/views/realTime/hooks/useTableExport.ts

@@ -11,9 +11,9 @@ export default function useTableExport() {
     headerRowNumber = 1,
   }) => {
     try {
-      const tableNode = (('$el' in table
-        ? table.$el
-        : table.value.$el) as HTMLElement).cloneNode(true) as HTMLElement
+      const tableNode = (unref(table).$el as HTMLElement).cloneNode(
+        true
+      ) as HTMLElement
       // 设置了列的fixed属性后会有两个table元素，导出数据会重复，需要去掉一个table
       const fixedTable = tableNode.querySelector('.el-table__fixed')
       fixedTable && tableNode.removeChild(fixedTable)

src/views/realTime/hooks/useTableStyle.ts

@@ -9,28 +9,44 @@ type RowClassGetter = (param: {
 
 type CellClassGetter = (param: CellSlotProps) => string
 
-const defaultCellClass = 'el-table-v2__cell-text'
+const defaultCellClassV2 = 'el-table-v2__cell-text'
 
-export default function useTableStyle() {
-  const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
+export default function useTableStyle(tableName?: string) {
+  const rowClass = ({ row, rowIndex }) => {
     const classes: string[] = []
-    if (rowIndex <= 1) {
-      classes.push('bg-gray')
-    }
-    if (rowIndex === 1) {
-      classes.push('underline-red')
+    return classes.join(' ')
+  }
+
+  const cellClass = ({ row, column, rowIndex, columnIndex }) => {
+    const classes: string[] = []
+    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
     }
     return classes.join(' ')
   }
 
-  const cellClass: CellClassGetter = ({
+  const cellClassV2: CellClassGetter = ({
     column,
     columns,
     columnIndex,
     rowData,
     rowIndex,
   }) => {
-    const classes: string[] = [defaultCellClass]
+    const classes: string[] = [defaultCellClassV2]
     if (['4/243', '0/6'].includes(rowData[column.columnName])) {
       classes.push('cell-warning')
     }
@@ -46,5 +62,7 @@ export default function useTableStyle() {
   return {
     rowClass,
     cellClass,
+    rowClassV2,
+    cellClassV2,
   }
 }

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

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

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

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

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

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

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

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

src/views/realTime/type.d.ts

@@ -1,14 +1,14 @@
 import type { Ref, CSSProperties } from 'vue'
-import { TableInstance, Column } from 'element-plus'
-import { CommonTableColumn } from '~/common'
+import { ElTable } from 'element-plus'
+import { CommonTableColumn, MaybeRef } from '~/common'
 
 interface tableColumnGroup {
   title: string
   columns: CommonTableColumn[]
 }
 type CellSlotProps = {
-  column: TableColumn | TableColumnInGroup
-  columns: TableColumn[] | TableColumnInGroup[]
+  column: CommonTableColumn
+  columns: CommonTableColumn[]
   columnIndex: number
   depth: number
   style: CSSProperties
@@ -23,8 +23,8 @@ type CellSlotProps = {
       }
     | undefined
 }
-interface ExportOptions {
-  table: TableInstance | Ref<TableInstance>
+type ExportOptions = {
+  table: MaybeRef<InstanceType<typeof ElTable>>
   sheetName?: string
   fileName?: string
   headerRowNumber?: number

typings/common.d.ts

@@ -1,5 +1,7 @@
 //common type file, you can not export the type in common.d.ts
 //not export can use
+import { Ref } from 'vue'
+
 interface ObjTy {
   [propName: string]: any
 }
@@ -73,8 +75,9 @@ interface CommonTableColumn {
   [propName: string]: any
 }
 
+type CommonValue = string | number | null
 interface CommonData {
-  [x: string]: string | number | null
+  [x: string]: CommonValue
 }
 
 interface SelectOption {
@@ -90,11 +93,13 @@ interface CommonQueryResult<T = any> {
   returnData: {
     columnSet: CommonTableColumn[]
     listValues: Array<T>
+    submitID?: number
   }
   message?: string
   needPage?: number
-  submitID?: number
   [propName: string]: any
 }
 
 type SelectOptionQueryResult = CommonQueryResult<SelectOption>
+
+type MaybeRef<T> = Ref<T> | T