实时视图-时间格式修改、航站视图-已起飞/已降落筛选

src/hooks/useTableFilterAndSort.ts

@@ -1,12 +1,12 @@
 import { Ref } from 'vue'
 import _ from 'lodash'
-import { CommonData, CommonTableColumn } from '~/common'
+import { CommonData, CommonTableColumn, MaybeRef } from '~/common'
 
 export function useTableFilterAndSort(
   tableColumns: Ref<CommonTableColumn[]>,
   tableData: Ref<CommonData[]>,
-  defaultFilterValueMap: { [x: string]: string[] } = {},
-  defaultSortRuleMap: { [x: string]: string } = {}
+  defaultFilterValueMap: MaybeRef<{ [x: string]: string[] }> = {},
+  defaultSortRuleMap: MaybeRef<{ [x: string]: string }> = {}
 ) {
   watch([tableColumns, tableData], ([columns, records]) => {
     const tempSets = {}
@@ -32,23 +32,19 @@ export function useTableFilterAndSort(
   })
 
   const filterOptionMap = reactive({})
-  const filterValueMap: { [x: string]: string[] } = reactive(
-    defaultFilterValueMap
-  )
-  const tableDataSortRuleMap: { [x: string]: string } = reactive(
-    defaultSortRuleMap
-  )
+  const filterValueMap = reactive(defaultFilterValueMap)
+  const tableDataSortRuleMap = reactive(defaultSortRuleMap)
   const dealedTableData = computed(() => {
     const filtered = tableData.value.filter(item => {
       let flag = true
-      Object.entries(filterValueMap).forEach(([key, arr]) => {
+      Object.entries(unref(filterValueMap)).forEach(([key, arr]) => {
         if (arr.length && !arr.includes(String(item[key]))) {
           flag = false
         }
       })
       return flag
     })
-    const sortRules = Object.entries(tableDataSortRuleMap).reduce(
+    const sortRules = Object.entries(unref(tableDataSortRuleMap)).reduce(
       (pre: [string[], ('asc' | 'desc')[]], [key, value]) => {
         if (value) {
           pre[0].push(key)

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

@@ -24,14 +24,14 @@
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.flightStatus" style="width: 104px">
+    <el-form-item :prop="formData.flightState" style="width: 104px">
       <el-select
-        v-model="formData.flightStatus"
+        v-model="formData.flightState"
         size="default"
         :clearable="false"
       >
         <el-option
-          v-for="option in flightStatusOptions"
+          v-for="option in flightStateOptions"
           :key="option.value"
           :label="option.label"
           :value="option.value"
@@ -92,7 +92,7 @@ const defaultEndTime = `${parseTime(new Date(), '{y}-{m}-{d}')} 23:59`
 const formData = reactive({
   startDate: defaultStartTime,
   endDate: defaultEndTime,
-  flightStatus: '',
+  flightState: '',
   flightWarning: '',
   waybillType: '',
 })
@@ -131,18 +131,18 @@ const datePreTitle = (title: string) => {
   return <div class="date-pre-title">{title}：</div>
 }
 
-const flightStatusOptions = ref([
+const flightStateOptions = ref([
   {
     label: '全部航班',
     value: '',
   },
   {
-    label: '已起飞',
-    value: 'hasTakenOff',
+    label: props.name.includes('Departure') ? '已起飞' : '已降落',
+    value: props.name.includes('Departure') ? 'hasTakenOff' : 'hasLanded',
   },
   {
-    label: '未起飞',
-    value: 'hasNotTakenOff',
+    label: props.name.includes('Departure') ? '未起飞' : '未降落',
+    value: props.name.includes('Departure') ? 'hasNotTakenOff' : 'hasNotLanded',
   },
   {
     label: '取消',

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

@@ -83,7 +83,7 @@ import { useAirportTable } from './useAirportTable'
 import { useTableStyle } from '../../hooks/useTableStyle'
 import { useTableCellClick } from '../../hooks/useTableCellClick'
 import { useTableFilterAndSort } from '@/hooks/useTableFilterAndSort'
-import { useCount } from './useCount'
+import { useFormatter } from './useFormatter'
 import { ElTableV2, RowEventHandlers, TableV2Instance } from 'element-plus'
 import { CommonData } from '~/common'
 import type { HeaderRenderProps, CellRenderProps, RowClassGetter, ScrollParams } from '../../type'
@@ -143,7 +143,7 @@ const customRendererColumns = computed(() =>
 )
 
 const countFlag = ref(true)
-const { tableColumnFormatter, tableDataFormatter } = useCount(countFlag)
+const { tableColumnFormatter, tableDataFormatter } = useFormatter(countFlag)
 
 const UTCFlag = ref(true)
 
@@ -216,6 +216,22 @@ const tableDataCount = computed(() =>
 
 const { cellClickHandlerV2 } = useTableCellClick(props.name)
 
+const flightStateFilter = computed<{} | { [x: string]: string[] }>(() => {
+  switch (formData.flightState) {
+    case 'hasTakenOff':
+      return { hasTakenOff: ['Y'] }
+    case 'hasNotTakenOff':
+      return { hasTakenOff: ['N'] }
+    case 'hasLanded':
+      return { hasLanded: ['Y'] }
+    case 'hasNotLanded':
+      return { hasLanded: ['N'] }
+    case 'canceled':
+      return { flightState: ['CAN'] }
+    default:
+      return {}
+  }
+})
 const {
   filterOptionMap,
   filterValueMap,
@@ -224,7 +240,7 @@ const {
 } = useTableFilterAndSort(
   tableColumns,
   tableData,
-  {},
+  flightStateFilter,
   { [props.name.includes('Departure') ? 'planDepartureTime' : 'planLandingTime']: 'ascending' }
 )
 
@@ -259,8 +275,10 @@ const getPermission = (type?: string) => {
 }
 
 const hasSetTableScroll = ref(false)
-watch(formData, () => {
-  hasSetTableScroll.value = false
+watch(formData, (newData, oldData) => {
+  if (newData.startDate !== oldData.startDate || newData.endDate !== oldData.endDate) {
+    hasSetTableScroll.value = false
+  }
 })
 watch(tableData, async rows => {
   dealedCount.value = 0
@@ -271,8 +289,10 @@ watch(tableData, async rows => {
         (row.planDepartureTime as string).replace('T', ' ')
       ).getTime()
       if (now >= departureTime) {
-        row.hasTakenOff = 1
+        row.hasTakenOff = 'Y'
         dealedCount.value++
+      } else {
+        row.hasTakenOff = 'N'
       }
     }
     if (props.name.includes('ArrivalAirport') && row.planLandingTime) {
@@ -280,8 +300,10 @@ watch(tableData, async rows => {
         (row.planLandingTime as string).replace('T', ' ')
       ).getTime()
       if (now >= landingTime) {
-        row.hasLanded = 1
+        row.hasLanded = 'Y'
         dealedCount.value++
+      } else {
+        row.hasLanded = 'N'
       }
     }
   })

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

@@ -749,14 +749,14 @@ export function useAirportTable(name: string, formData: CommonData) {
       const {
         startDate,
         endDate,
-        flightStatus,
+        flightState,
         flightWarning,
         waybillType,
       } = formData
       const dataContent = [
         startDate,
         endDate,
-        // flightStatus,
+        // flightState,
         // flightWarning
       ]
       // if (name.includes('International')) {

src/views/realTime/components/AirportView/useCount.ts → src/views/realTime/components/AirportView/useFormatter.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { CellRenderProps } from '../../type'
 
-export function useCount(flag: Ref<boolean>) {
+export function useFormatter(flag: Ref<boolean>) {
   const tableColumnFormatter = (columnLabel: string) => {
     return unref(flag) ? columnLabel : columnLabel.replace('/件', '')
   }
@@ -28,7 +28,7 @@ export function useCount(flag: Ref<boolean>) {
       }
     }
     if (columnName.includes('Time') && typeof cellData === 'string') {
-      return cellData.replace('T', '\n')
+      return cellData.slice(5, -3).replace('T', '\n')
     }
     return cellData
   }

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

@@ -32,6 +32,7 @@
           scrollbar-always-on
           :row-class-name="flightContainerRowClass"
           :cell-class-name="flightContainerCellClass"
+          :column-props="{ formatter: tableFormatter }"
           @cell-click="flightContainerCellClickHandler"
         />
       </div>
@@ -65,7 +66,7 @@
           :columns="filteredWaybillColumns"
           :row-class-name="flightWaybillRowClass"
           :cell-class-name="flightWaybillCellClass"
-          :column-props="{ formatter: waybillTableFormatter }"
+          :column-props="{ formatter: tableFormatter }"
           @cell-click="flightWaybillCellClickHandler"
         />
       </div>
@@ -130,12 +131,6 @@ const {
   tableData: containerTableData,
   getTableData: getContainerTableData,
 } = useTable(`${props.name}Container`, Array(3).fill(dataContent).flat())
-const waybillTableFormatter = (row, column, cellValue, index) => {
-  if (column.property.includes('Time') && typeof cellValue === 'string') {
-    return cellValue.replace('T', '\n')
-  }
-  return String(cellValue ?? '')
-}
 
 const {
   tableColumns: waybillTableColumns,
@@ -143,6 +138,13 @@ const {
   getTableData: getWaybillTableData,
 } = useTable(`${props.name}Waybill`, dataContent)
 
+const tableFormatter = (row, column, cellValue, index) => {
+  if (column.property.includes('Time') && typeof cellValue === 'string') {
+    return cellValue.slice(5, -3).replace('T', '\n')
+  }
+  return String(cellValue ?? '')
+}
+
 useLoop([getFlightInfo, getContainerTableData, getWaybillTableData], 'flight')
 
 const UTCFlag = ref(true)

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

@@ -198,7 +198,7 @@ const tableData = computed(() =>
 const formatter = (row, column, cellValue, index) => {
   const value = String(cellValue ?? '').split('\n')
   if (value[2]) {
-    value[2] = value[2].split('T')[1]
+    value[2] = value[2].split('T')[1].slice(0, -3)
   }
   return value.join('\n')
 }

src/views/realTime/hooks/useTrackData.ts

@@ -233,7 +233,9 @@ export function useTrackData(name: string, trackData: MaybeRef<CommonData[]>) {
             String(execPosition ?? ''),
             String(ConsignmentItemPackagingQuantityQuantity ?? ''),
             execResult ? '通过' : '未通过',
-            String(execTime ?? '').split('T')[1] ?? '',
+            String(execTime ?? '')
+              .split('T')[1]
+              ?.slice(0, -3) ?? '',
           ],
         }
         const nodeList = trackNodesMap[