航班视图、运单视图-定时刷新

public/demo.js

@@ -10,10 +10,10 @@ const PLATFROM_CONFIG = {
 
 /* 轮询间隔 */
 const LOOP_INTERVAL = {
-  departureAirport: 30 * 1000,
-  internationalDepartureAirport: 30 * 1000,
-  arrivalAirport: 30 * 1000,
-  internationalArrivalAirport: 30 * 1000,
+  airport: 15 * 1000,
+  flight: 15 * 1000,
+  waybill: 15 * 1000,
+  goods: 15 * 1000,
 }
 
 const DATACONTENT_ID = {

src/hooks/useLoop.ts

@@ -0,0 +1,41 @@
+import { WatchSource } from 'vue'
+
+export function useLoop(
+  loopFunc: () => void | Promise<void>,
+  interval: number | string,
+  watchSources: (WatchSource | object)[] = []
+) {
+  let queryLoop: number | null = null
+  const startQuery = async () => {
+    queryLoop = 1 // 先赋值，表示已经在进行查询
+    await loopFunc()
+    queryLoop = window.setTimeout(
+      startQuery,
+      typeof interval === 'string'
+        ? LOOP_INTERVAL[interval]
+          ? LOOP_INTERVAL[interval]
+          : 5 * 1000
+        : interval
+    )
+  }
+  const stopQuery = () => {
+    if (queryLoop) {
+      clearTimeout(queryLoop)
+      queryLoop = null
+    }
+  }
+  if (watchSources.length) {
+    watch(watchSources, () => {
+      stopQuery()
+      startQuery()
+    })
+  }
+  onActivated(() => {
+    if (!queryLoop) {
+      startQuery()
+    }
+  })
+  onDeactivated(() => {
+    stopQuery()
+  })
+}

src/hooks/useTableFilterAndSort.ts

@@ -32,10 +32,10 @@ export function useTableFilterAndSort(
   })
 
   const filterOptionMap = reactive({})
-  const filterValueMap = reactive<{ [x: string]: string[] }>(
+  const filterValueMap: { [x: string]: string[] } = reactive(
     defaultFilterValueMap
   )
-  const tableDataSortRuleMap = reactive<{ [x: string]: string }>(
+  const tableDataSortRuleMap: { [x: string]: string } = reactive(
     defaultSortRuleMap
   )
   const dealedTableData = computed(() => {

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

@@ -105,6 +105,7 @@ import { useTableFilterAndSort } from '@/hooks/useTableFilterAndSort'
 import { useCount } from './useCount'
 import { HeaderCellSlotProps } from 'element-plus'
 import { CommonData } from '~/common'
+import { useLoop } from '@/hooks/useLoop'
 
 const props = defineProps({
   name: {
@@ -125,7 +126,7 @@ const props = defineProps({
 
 const isDeparture = props.name.includes('Departure')
 
-const formData = reactive<CommonData>({})
+const formData: CommonData = reactive({})
 const formDataChangeHandler = (data: CommonData) => {
   Object.assign(formData, data)
 }
@@ -135,7 +136,11 @@ const { tableColumnFormatter, tableDataFormatter } = useCount(countFlag)
 
 const UTCFlag = ref(true)
 
-const { tableColumns, tableData } = useAirportTable(props.name, formData)
+const { tableColumns, tableData, getTableData } = useAirportTable(
+  props.name,
+  formData
+)
+useLoop(getTableData, 'airport', [formData])
 const { columnChecked } = useTableColumnSet(tableColumns)
 const { rowClassV2, cellClassV2 } = useTableStyle(props.name)
 const cellPropsGetter = params => ({

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

@@ -786,42 +786,13 @@ export function useAirportTable(name: string, formData: CommonData) {
       console.error(error)
     }
   }
-  let queryLoop: number | null = null
-  const startQuery = async () => {
-    queryLoop = 1 // 先赋值，表示已经在进行查询
-    await getTableData()
-    queryLoop = window.setTimeout(
-      startQuery,
-      LOOP_INTERVAL[name.slice(0, 1).toLowerCase() + name.slice(1)]
-    )
-  }
-  const stopQuery = () => {
-    if (queryLoop) {
-      clearTimeout(queryLoop)
-      queryLoop = null
-    }
-  }
-
-  watch(formData, () => {
-    stopQuery()
-    startQuery()
-  })
-  onActivated(() => {
-    if (!queryLoop) {
-      startQuery()
-    }
-  })
-  onDeactivated(() => {
-    stopQuery()
-  })
-
   onMounted(() => {
     getTableColumns()
-    // getSimulateTableData()
   })
 
   return {
     tableColumns,
     tableData,
+    getTableData,
   }
 }

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

@@ -89,6 +89,7 @@ import { useTableExport } from '../../hooks/useTableExport'
 import { useTableStyle } from '../../hooks/useTableStyle'
 import { useTableCellClick } from '../../hooks/useTableCellClick'
 import { useFlightInfo } from './useFlightInfo'
+import { useLoop } from '@/hooks/useLoop'
 
 const props = defineProps({
   name: {
@@ -97,16 +98,6 @@ const props = defineProps({
   },
 })
 
-// onMounted(() => {
-//   console.log('mounted', 'flight')
-// })
-// onActivated(() => {
-//   console.log('activated', 'flight')
-// })
-// onDeactivated(() => {
-//   console.log('deactivated', 'flight')
-// })
-
 const isDeparture = computed(() => props.name.includes('Departure'))
 
 const route = useRoute()
@@ -126,17 +117,22 @@ const dataContent = [
   // landingAirport,
 ] as string[]
 
-const { flightInfoItems, flightInfo, computedFlightInfo } = useFlightInfo(
-  props.name,
-  dataContent
-)
+const {
+  flightInfoItems,
+  flightInfo,
+  computedFlightInfo,
+  getFlightInfo,
+} = useFlightInfo(props.name, dataContent)
+useLoop(getFlightInfo, 'flight')
 
 const airLine = toRef(flightInfo, 'flightinfo')
 
 const {
   tableColumns: containerTableColumns,
   tableData: containerTableData,
+  getTableData: getContainerTableData,
 } = useTable(`${props.name}Container`, dataContent)
+useLoop(getContainerTableData, 'flight')
 const waybillTableFormatter = (row, column, cellValue, index) => {
   if (column.property.includes('Time') && typeof cellValue === 'string') {
     return cellValue.replace('T', '\n')
@@ -147,7 +143,9 @@ const waybillTableFormatter = (row, column, cellValue, index) => {
 const {
   tableColumns: waybillTableColumns,
   tableData: waybillTableData,
+  getTableData: getWaybillTableData,
 } = useTable(`${props.name}Waybill`, dataContent)
+useLoop(getWaybillTableData, 'flight')
 
 const UTCFlag = ref(true)
 

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

@@ -181,7 +181,7 @@ export function useFlightInfo(name: string, dataContent: CommonValue[]) {
   }
   getFlightInfoItems()
 
-  const flightInfo = reactive<CommonData>({})
+  const flightInfo: CommonData = reactive({})
   const getFlightInfo = async () => {
     try {
       const {
@@ -209,7 +209,9 @@ export function useFlightInfo(name: string, dataContent: CommonValue[]) {
   }
 
   const computedFlightInfo = computed(() => item => {
-    if (item.getter) {
+    if (['departureAirportZh', 'landingAirportZh'].includes(item.key)) {
+      return airportNameZhMap[flightInfo[item.key.slice(0, -2)]!]
+    } else if (item.getter) {
       return item.getter(flightInfo)
     } else if (item.key) {
       return flightInfo[item.key]
@@ -226,6 +228,7 @@ export function useFlightInfo(name: string, dataContent: CommonValue[]) {
     Object.assign(flightInfo, simulateFlightInfo)
   }
 
+  const airportNameZhMap: { [code: string]: string } = reactive({})
   const getAirportNameZh = async (airportCode: string) => {
     try {
       const {
@@ -250,25 +253,28 @@ export function useFlightInfo(name: string, dataContent: CommonValue[]) {
     }
   }
 
-  onMounted(async () => {
-    await getFlightInfo()
+  watch(flightInfo, async () => {
     const { departureAirport, landingAirport } = flightInfo
     if (departureAirport) {
-      flightInfo.departureAirportZh = await getAirportNameZh(
-        String(departureAirport)
-      )
+      if (!airportNameZhMap[departureAirport]) {
+        airportNameZhMap[departureAirport] = await getAirportNameZh(
+          String(departureAirport)
+        )
+      }
     }
     if (landingAirport) {
-      flightInfo.landingAirportZh = await getAirportNameZh(
-        String(landingAirport)
-      )
+      if (!airportNameZhMap[landingAirport]) {
+        airportNameZhMap[landingAirport] = await getAirportNameZh(
+          String(landingAirport)
+        )
+      }
     }
-    // getSimulateFlightInfo()
   })
 
   return {
     flightInfoItems,
     flightInfo,
     computedFlightInfo,
+    getFlightInfo,
   }
 }

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

@@ -51,7 +51,7 @@ export function useGoodsInfo(name: string, dataContent: CommonValue[]) {
   }
   getGoodsInfoItems()
 
-  const goodsInfo = reactive<CommonData>({})
+  const goodsInfo: CommonData = reactive({})
   const getGoodsInfo = async () => {
     try {
       const {

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

@@ -110,6 +110,7 @@ import { useTableStyle } from '../../hooks/useTableStyle'
 import { useTableCellClick } from '../../hooks/useTableCellClick'
 import { useWaybillInfo } from './useWaybillInfo'
 import { CommonData } from '~/common'
+import { useLoop } from '@/hooks/useLoop'
 
 const props = defineProps({
   name: {
@@ -125,11 +126,16 @@ const {
   waybillInfoItems,
   waybillInfo,
   computedWaybillInfo,
+  getWaybillInfo,
 } = useWaybillInfo(props.name, [waybillNO as string])
+useLoop(getWaybillInfo, 'waybill')
 
-const { tableColumns, tableData: trackData } = useTable(`${props.name}Goods`, [
-  waybillNO as string,
-])
+const {
+  tableColumns,
+  tableData: trackData,
+  getTableData,
+} = useTable(`${props.name}Goods`, [waybillNO as string])
+useLoop(getTableData, 'waybill')
 
 const { trackAirlines, trackBoxStyle } = useTrackData(props.name, trackData)
 

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

@@ -103,7 +103,7 @@ export function useWaybillInfo(name: string, dataContent: CommonValue[]) {
   }
   getWaybillInfoItems()
 
-  const waybillInfo = reactive<CommonData>({})
+  const waybillInfo: CommonData = reactive({})
   const getWaybillInfo = async () => {
     try {
       const {
@@ -137,20 +137,17 @@ export function useWaybillInfo(name: string, dataContent: CommonValue[]) {
     }
   })
 
-  const getSimulateWaybillInfo = () => {
-    const simulateWaybillInfo =
-      simulateWaybillInfoMap[
-        name.includes('International') ? 'international' : 'internal'
-      ]
-    Object.assign(waybillInfo, simulateWaybillInfo)
-  }
-  onMounted(() => {
-    getWaybillInfo()
-    // getSimulateWaybillInfo()
-  })
+  // const getSimulateWaybillInfo = () => {
+  //   const simulateWaybillInfo =
+  //     simulateWaybillInfoMap[
+  //       name.includes('International') ? 'international' : 'internal'
+  //     ]
+  //   Object.assign(waybillInfo, simulateWaybillInfo)
+  // }
   return {
     waybillInfoItems,
     waybillInfo,
     computedWaybillInfo,
+    getWaybillInfo,
   }
 }

src/views/realTime/hooks/useTable.ts

@@ -911,7 +911,7 @@ export function useTable(tableName: string, dataContent?: CommonValue[]) {
   onMounted(() => {
     if (tableColumnsMap[tableName]) {
       getTableColumns()
-      getTableData()
+      // getTableData()
       // getSimulateTableData()
     }
   })
@@ -919,5 +919,6 @@ export function useTable(tableName: string, dataContent?: CommonValue[]) {
   return {
     tableColumns,
     tableData,
+    getTableData,
   }
 }