实时视图缓存

src/components/KeepAliveRouterView/index.tsx

@@ -1,18 +1,24 @@
-import { KeepAlive } from 'vue'
+import { KeepAlive, Transition } from 'vue'
 import { RouterView } from 'vue-router'
+import { useKeepAlive } from '@/store/keepAlive'
 
 export default function (name: string) {
   return defineComponent({
     name,
     setup() {
+      const { cachedViews } = useKeepAlive()
       return () => (
-        <RouterView>
-          {({ Component }) => (
-            <KeepAlive>
-              <Component />
-            </KeepAlive>
-          )}
-        </RouterView>
+        <div key={name} style="width: 100%; height: 100%">
+          <RouterView>
+            {({ Component }) => (
+              <Transition name="fade-transform" mode="out-in">
+                <KeepAlive include={cachedViews}>
+                  <Component />
+                </KeepAlive>
+              </Transition>
+            )}
+          </RouterView>
+        </div>
       )
     },
   })

src/layout/components/AppMain.vue

@@ -28,7 +28,9 @@ const settings = computed(() => {
   return appStore.settings
 })
 
-const key = computed(() => route.fullPath)
+const key = computed(() =>
+  route.matched[0].name === 'RealTime' ? 'RealTime' : route.path
+)
 
 const cachedViews = computed(() => {
   return appStore.cachedViews
@@ -48,89 +50,75 @@ const removeDeepChildren = deepOldRouter => {
 }
 
 watch(
-  route,
-  (to, from) => {
-    if (from?.matched[0].name === 'RealTime') {
-      if (to.matched[1].name !== from.matched[1].name) {
-        appStore.M_DEL_CACHED_VIEW_ALL()
-      } else if (to.matched.length < from.matched.length) {
-        appStore.M_DEL_CACHED_VIEW(from.name)
-      }
-    }
-    if (to.matched[0].name === 'RealTime') {
-      if (to.meta.keepAlive) {
-        // appStore.M_ADD_CACHED_VIEW_ALL(to.matched.map(route => route.name))
-        appStore.M_ADD_CACHED_VIEW(to.name)
-      }
-    } else {
-      const routerLevel = route.matched.length
-      //二级路由处理
-      if (routerLevel === 2) {
-        if (deepOldRouter?.name) {
-          if (
-            deepOldRouter.meta?.leaveRmCachePage &&
-            deepOldRouter.meta?.cachePage
-          ) {
-            appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
-            //remove the deepOldRouter‘s children component
-            removeDeepChildren(deepOldRouter)
-          }
-        } else {
-          if (oldRoute?.name) {
-            if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
-              appStore.M_DEL_CACHED_VIEW(oldRoute.name)
-            }
+  () => route.name,
+  () => {
+    const routerLevel = route.matched.length
+    //二级路由处理
+    if (routerLevel === 2) {
+      if (deepOldRouter?.name) {
+        if (
+          deepOldRouter.meta?.leaveRmCachePage &&
+          deepOldRouter.meta?.cachePage
+        ) {
+          appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
+          //remove the deepOldRouter‘s children component
+          removeDeepChildren(deepOldRouter)
+        }
+      } else {
+        if (oldRoute?.name) {
+          if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
+            appStore.M_DEL_CACHED_VIEW(oldRoute.name)
           }
         }
+      }
 
-        if (route.name) {
-          if (route.meta?.cachePage) {
-            appStore.M_ADD_CACHED_VIEW(route.name)
-          }
+      if (route.name) {
+        if (route.meta?.cachePage) {
+          appStore.M_ADD_CACHED_VIEW(route.name)
         }
-        deepOldRouter = null
       }
+      deepOldRouter = null
+    }
 
-      //三级路由处理
-      if (routerLevel === 3) {
-        //三级时存储当前路由对象的上一级
-        const parentRoute = route.matched[1]
-        //deepOldRouter不为空，且deepOldRouter不是当前路由的父对象，则需要清除deepOldRouter缓存
-        //一般为三级路由跳转三级路由的情况
-        if (deepOldRouter?.name && deepOldRouter.name !== parentRoute.name) {
-          if (
-            deepOldRouter.meta?.leaveRmCachePage &&
-            deepOldRouter.meta?.cachePage
-          ) {
-            appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
-            //remove the deepOldRouter‘s children component
-            removeDeepChildren(deepOldRouter)
-          }
-        } else {
-          //否则走正常两级路由处理流程
-          if (oldRoute?.name) {
-            if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
-              appStore.M_DEL_CACHED_VIEW_DEEP(oldRoute.name)
-            }
+    //三级路由处理
+    if (routerLevel === 3) {
+      //三级时存储当前路由对象的上一级
+      const parentRoute = route.matched[1]
+      //deepOldRouter不为空，且deepOldRouter不是当前路由的父对象，则需要清除deepOldRouter缓存
+      //一般为三级路由跳转三级路由的情况
+      if (deepOldRouter?.name && deepOldRouter.name !== parentRoute.name) {
+        if (
+          deepOldRouter.meta?.leaveRmCachePage &&
+          deepOldRouter.meta?.cachePage
+        ) {
+          appStore.M_DEL_CACHED_VIEW(deepOldRouter.name)
+          //remove the deepOldRouter‘s children component
+          removeDeepChildren(deepOldRouter)
+        }
+      } else {
+        //否则走正常两级路由处理流程
+        if (oldRoute?.name) {
+          if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
+            appStore.M_DEL_CACHED_VIEW_DEEP(oldRoute.name)
           }
         }
+      }
 
-        //取的是第二级的name
-        if (parentRoute.name && parentRoute.meta?.cachePage) {
-          deepOldRouter = parentRoute
-          appStore.M_ADD_CACHED_VIEW(deepOldRouter.name)
-          if (route.name) {
-            if (route.meta?.cachePage) {
-              //和第三级的name进行缓存
-              appStore.M_ADD_CACHED_VIEW_DEEP(route.name)
-            }
+      //取的是第二级的name
+      if (parentRoute.name && parentRoute.meta?.cachePage) {
+        deepOldRouter = parentRoute
+        appStore.M_ADD_CACHED_VIEW(deepOldRouter.name)
+        if (route.name) {
+          if (route.meta?.cachePage) {
+            //和第三级的name进行缓存
+            appStore.M_ADD_CACHED_VIEW_DEEP(route.name)
           }
         }
       }
-      oldRoute = JSON.parse(
-        JSON.stringify({ name: route.name, meta: route.meta })
-      )
     }
+    oldRoute = JSON.parse(
+      JSON.stringify({ name: route.name, meta: route.meta })
+    )
   },
   { immediate: true }
 )

src/router/index.ts

@@ -7,7 +7,8 @@ import routesThree from './routes/routes-file-three'
 import routesFour from './routes/routes-file-four'
 import routesFive from './routes/routes-file-five'
 import routesSix from './routes/routes-file-six'
-import { Page, useKeepAlive } from '@/store/keepAlive'
+import { Route, useKeepAlive } from '@/store/keepAlive'
+
 const routesPush = (arr, routes) => {
   if (!Array.isArray(arr)) return '请传入数组格式路由表'
   for (let i = 0; i < arr.length; i++) {
@@ -73,8 +74,22 @@ const router: Router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  const { savedPages, savePage } = useKeepAlive()
+  const {
+    savedRoutes,
+    saveRoute,
+    // cachedViews,
+    addCachedViewAll,
+    // delCachedView,
+    delCachedViewAll,
+    delCachedViewUntil,
+  } = useKeepAlive()
   if (from.matched?.[0]?.name === 'RealTime') {
+    if (to.matched[0].name !== from.matched[0].name) {
+      delCachedViewAll()
+    } else if (to.matched.length < from.matched.length) {
+      delCachedViewUntil(to.name as string)
+    }
+
     if (
       typeof from.name === 'string' &&
       ((from.name.includes('FlightView') &&
@@ -82,20 +97,26 @@ router.beforeEach((to, from, next) => {
         from.query.flightDate) ||
         (from.name.includes('WaybillView') && from.query.waybillNO))
     ) {
-      savePage(from as Page)
+      saveRoute(from as Route)
     }
   }
 
   if (to.matched?.[0]?.name === 'RealTime') {
+    if (to.meta.keepAlive) {
+      addCachedViewAll(to.matched.map(route => route.name) as string[])
+    }
+
     if (
       typeof to.name === 'string' &&
       ((to.name.includes('FlightView') &&
         (!to.query.flightNO || !to.query.flightDate)) ||
         (to.name.includes('WaybillView') && !to.query.waybillNO))
     ) {
-      const savedPage = savedPages.find(savedPage => savedPage.name === to.name)
-      if (savedPage) {
-        next(savedPage.fullPath)
+      const savedRoute = savedRoutes.find(
+        savedRoute => savedRoute.name === to.name
+      )
+      if (savedRoute) {
+        next(savedRoute.fullPath)
       }
     }
   }

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

@@ -86,77 +86,67 @@ const ActualTimeRoutes = {
       ],
     },
     {
-      path: '/realTime/internationalDeparture',
-      name: 'InternationalDeparture',
+      path: '/realTime/arrival',
+      name: 'Arrival',
       meta: {
-        title: '国际出港',
-        roles: ['view_of_international_departure_terminal_page'],
+        title: '国内进港',
+        roles: ['view_of_domestic_inbound_termina_page'],
         breadcrumb: false,
       },
-      component: KeepAliveRouterView('InternationalDeparture'),
+      component: KeepAliveRouterView('Arrival'),
       children: [
         {
-          path: '/realTime/internationalDeparture/airport',
-          name: 'InternationalDepartureAirport',
-          meta: { title: '国际出港航站视图' },
-          component: KeepAliveRouterView('InternationalDepartureAirport'),
+          path: '/realTime/arrival/airport',
+          name: 'ArrivalAirport',
+          meta: { title: '国内进港航站视图' },
+          component: KeepAliveRouterView('ArrivalAirport'),
           children: [
             {
-              path: '/realTime/internationalDeparture/airport',
-              name: 'InternationalDepartureAirportView',
+              path: '/realTime/arrival/airport',
+              name: 'ArrivalAirportView',
               meta: { keepAlive: true },
               component: () =>
-                import(
-                  '@/views/realTime/internationalDeparture/airport/index.vue'
-                ),
+                import('@/views/realTime/arrival/airport/index.vue'),
             },
             {
-              path: '/realTime/internationalDeparture/flight',
-              name: 'InternationalDepartureFlight',
+              path: '/realTime/arrival/flight',
+              name: 'ArrivalFlight',
               meta: {
-                title: '国际出港航班视图',
+                title: '国内进港航班视图',
               },
-              component: KeepAliveRouterView('InternationalDepartureFlight'),
+              component: KeepAliveRouterView('ArrivalFlight'),
               children: [
                 {
-                  path: '/realTime/internationalDeparture/flight',
-                  name: 'InternationalDepartureFlightView',
+                  path: '/realTime/arrival/flight',
+                  name: 'ArrivalFlightView',
                   meta: { keepAlive: true },
                   component: () =>
-                    import(
-                      '@/views/realTime/internationalDeparture/flight/index.vue'
-                    ),
+                    import('@/views/realTime/arrival/flight/index.vue'),
                 },
                 {
-                  path: '/realTime/internationalDeparture/waybill',
-                  name: 'InternationalDepartureWaybill',
+                  path: '/realTime/arrival/waybill',
+                  name: 'ArrivalWaybill',
                   meta: {
-                    title: '国际出港运单视图',
+                    title: '国内进港运单视图',
                   },
-                  component: KeepAliveRouterView(
-                    'InternationalDepartureWaybill'
-                  ),
+                  component: KeepAliveRouterView('ArrivalWaybill'),
                   children: [
                     {
-                      path: '/realTime/internationalDeparture/waybill',
-                      name: 'InternationalDepartureWaybillView',
+                      path: '/realTime/arrival/waybill',
+                      name: 'ArrivalWaybillView',
                       meta: { keepAlive: true },
                       component: () =>
-                        import(
-                          '@/views/realTime/internationalDeparture/waybill/index.vue'
-                        ),
+                        import('@/views/realTime/arrival/waybill/index.vue'),
                     },
                     {
-                      path: '/realTime/internationalDeparture/goods',
-                      name: 'InternationalDepartureGoods',
+                      path: '/realTime/arrival/goods',
+                      name: 'ArrivalGoods',
                       meta: {
-                        title: '国际出港货物视图',
+                        title: '国内进港货物视图',
                         keepAlive: true,
                       },
                       component: () =>
-                        import(
-                          '@/views/realTime/internationalDeparture/goods/index.vue'
-                        ),
+                        import('@/views/realTime/arrival/goods/index.vue'),
                     },
                   ],
                 },
@@ -167,67 +157,77 @@ const ActualTimeRoutes = {
       ],
     },
     {
-      path: '/realTime/arrival',
-      name: 'Arrival',
+      path: '/realTime/internationalDeparture',
+      name: 'InternationalDeparture',
       meta: {
-        title: '国内进港',
-        roles: ['view_of_domestic_inbound_termina_page'],
+        title: '国际出港',
+        roles: ['view_of_international_departure_terminal_page'],
         breadcrumb: false,
       },
-      component: KeepAliveRouterView('Arrival'),
+      component: KeepAliveRouterView('InternationalDeparture'),
       children: [
         {
-          path: '/realTime/arrival/airport',
-          name: 'ArrivalAirport',
-          meta: { title: '国内进港航站视图' },
-          component: KeepAliveRouterView('ArrivalAirport'),
+          path: '/realTime/internationalDeparture/airport',
+          name: 'InternationalDepartureAirport',
+          meta: { title: '国际出港航站视图' },
+          component: KeepAliveRouterView('InternationalDepartureAirport'),
           children: [
             {
-              path: '/realTime/arrival/airport',
-              name: 'ArrivalAirportView',
+              path: '/realTime/internationalDeparture/airport',
+              name: 'InternationalDepartureAirportView',
               meta: { keepAlive: true },
               component: () =>
-                import('@/views/realTime/arrival/airport/index.vue'),
+                import(
+                  '@/views/realTime/internationalDeparture/airport/index.vue'
+                ),
             },
             {
-              path: '/realTime/arrival/flight',
-              name: 'ArrivalFlight',
+              path: '/realTime/internationalDeparture/flight',
+              name: 'InternationalDepartureFlight',
               meta: {
-                title: '国内进港航班视图',
+                title: '国际出港航班视图',
               },
-              component: KeepAliveRouterView('ArrivalFlight'),
+              component: KeepAliveRouterView('InternationalDepartureFlight'),
               children: [
                 {
-                  path: '/realTime/arrival/flight',
-                  name: 'ArrivalFlightView',
+                  path: '/realTime/internationalDeparture/flight',
+                  name: 'InternationalDepartureFlightView',
                   meta: { keepAlive: true },
                   component: () =>
-                    import('@/views/realTime/arrival/flight/index.vue'),
+                    import(
+                      '@/views/realTime/internationalDeparture/flight/index.vue'
+                    ),
                 },
                 {
-                  path: '/realTime/arrival/waybill',
-                  name: 'ArrivalWaybill',
+                  path: '/realTime/internationalDeparture/waybill',
+                  name: 'InternationalDepartureWaybill',
                   meta: {
-                    title: '国内进港运单视图',
+                    title: '国际出港运单视图',
                   },
-                  component: KeepAliveRouterView('ArrivalWaybill'),
+                  component: KeepAliveRouterView(
+                    'InternationalDepartureWaybill'
+                  ),
                   children: [
                     {
-                      path: '/realTime/arrival/waybill',
-                      name: 'ArrivalWaybillView',
+                      path: '/realTime/internationalDeparture/waybill',
+                      name: 'InternationalDepartureWaybillView',
                       meta: { keepAlive: true },
                       component: () =>
-                        import('@/views/realTime/arrival/waybill/index.vue'),
+                        import(
+                          '@/views/realTime/internationalDeparture/waybill/index.vue'
+                        ),
                     },
                     {
-                      path: '/realTime/arrival/goods',
-                      name: 'ArrivalGoods',
+                      path: '/realTime/internationalDeparture/goods',
+                      name: 'InternationalDepartureGoods',
                       meta: {
-                        title: '国内进港货物视图',
+                        title: '国际出港货物视图',
                         keepAlive: true,
                       },
                       component: () =>
-                        import('@/views/realTime/arrival/goods/index.vue'),
+                        import(
+                          '@/views/realTime/internationalDeparture/goods/index.vue'
+                        ),
                     },
                   ],
                 },

src/store/app.ts

@@ -62,17 +62,6 @@ export const useAppStore = defineStore('app', {
         index > -1 && state.cachedViewsDeep.splice(index, 1)
       })
     },
-    M_ADD_CACHED_VIEW_ALL(views) {
-      views.forEach(view => {
-        this.M_ADD_CACHED_VIEW(view)
-      })
-    },
-    M_DEL_CACHED_VIEW_ALL() {
-      this.$patch(state => {
-        state.cachedViews.length = 0
-        state.cachedViewsDeep.length = 0
-      })
-    },
     A_sidebar_opened(data: boolean) {
       this.M_sidebar_opened(data)
     }

src/store/keepAlive.ts

@@ -1,29 +1,54 @@
 import { defineStore } from 'pinia'
 
-export type Page = {
+export type Route = {
   name: string
   fullPath: string
 }
 
 export const useKeepAlive = defineStore('keepAlive', () => {
-  const savedPages = ref<Page[]>(
-    JSON.parse(sessionStorage.getItem('savedPages') ?? '[]')
+  const savedRoutes = ref<Route[]>(
+    JSON.parse(sessionStorage.getItem('savedRoutes') ?? '[]')
   )
-
-  const savePage = ({ name, fullPath }: Page) => {
-    const index = savedPages.value.findIndex(
-      savedPage => savedPage.name === name
+  const saveRoute = ({ name, fullPath }: Route) => {
+    const index = savedRoutes.value.findIndex(
+      savedRoute => savedRoute.name === name
     )
     if (index > -1) {
-      savedPages.value[index] = { name, fullPath }
+      savedRoutes.value[index] = { name, fullPath }
     } else {
-      savedPages.value.push({ name, fullPath })
+      savedRoutes.value.push({ name, fullPath })
+    }
+    sessionStorage.setItem('savedRoutes', JSON.stringify(savedRoutes.value))
+  }
+
+  const cachedViews = ref<string[]>([])
+  const addCachedView = (viewName: string) => {
+    cachedViews.value.includes(viewName) || cachedViews.value.push(viewName)
+  }
+  const addCachedViewAll = (views: string[]) => {
+    views.forEach(view => addCachedView(view))
+  }
+  const delCachedView = (viewName: string) => {
+    const index = cachedViews.value.indexOf(viewName)
+    index > -1 && cachedViews.value.splice(index, 1)
+  }
+  const delCachedViewUntil = (viewName: string) => {
+    while (cachedViews.value.length && cachedViews.value.at(-1) !== viewName) {
+      cachedViews.value.pop()
     }
-    sessionStorage.setItem('savedPages', JSON.stringify(savedPages.value))
+  }
+  const delCachedViewAll = () => {
+    cachedViews.value = []
   }
 
   return {
-    savedPages,
-    savePage,
+    savedRoutes,
+    saveRoute,
+    cachedViews,
+    addCachedView,
+    addCachedViewAll,
+    delCachedView,
+    delCachedViewAll,
+    delCachedViewUntil,
   }
 })

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

@@ -2,6 +2,10 @@
   <AirportView name="ArrivalAirport" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import AirportView from '../../components/AirportView/index.vue'
+export default defineComponent({
+  name: 'ArrivalAirportView',
+  components: { AirportView },
+})
 </script>

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

@@ -2,6 +2,11 @@
   <FlightView name="ArrivalFlight" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import FlightView from '../../components/FlightView/index.vue'
+
+export default defineComponent({
+  name: 'ArrivalFlightView',
+  components: { FlightView },
+})
 </script>

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

@@ -2,8 +2,11 @@
   <GoodsView name="ArrivalGoods" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import GoodsView from '../../components/GoodsView/index.vue'
-</script>
 
-<style scoped></style>
+export default defineComponent({
+  name: 'ArrivalGoodsView',
+  components: { GoodsView },
+})
+</script>

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

@@ -2,8 +2,11 @@
   <WaybillView name="ArrivalWaybill" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import WaybillView from '../../components/WaybillView/index.vue'
-</script>
 
-<style scoped lang="scss"></style>
+export default defineComponent({
+  name: 'ArrivalWaybillView',
+  components: { WaybillView },
+})
+</script>

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

@@ -120,6 +120,7 @@ watchEffect(() => {
   formattedFormData.endDate = formData.endDate + ':59'
   emit('formDataChange', formattedFormData)
 })
+
 const disabledEndTime = endDate => {
   const start = new Date(formData.startDate + ':00').getTime()
   const end = new Date(endDate + ':59').getTime()

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

@@ -21,7 +21,10 @@
           <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
         </div>
         <div v-permission="getPermission('columnSet')">
-          <ColumnSet :table-columns="tableColumns" @checked-submit="columnChecked" />
+          <ColumnSet
+            :table-columns="tableColumns"
+            @checked-submit="columnChecked"
+          />
         </div>
       </div>
     </div>
@@ -50,7 +53,10 @@
               />
             </template>
             <template #cell="slot: CellSlotProps">
-              <div class="el-table-v2__cell-text" @click="cellClickHandlerV2(slot)">
+              <div
+                class="el-table-v2__cell-text"
+                @click="cellClickHandlerV2(slot)"
+              >
                 <!-- <el-tooltip
                   v-if="slot.column.columnName.includes('Time')"
                   :content="tableDataFormatter(slot)"
@@ -64,10 +70,18 @@
             <template #footer>
               <div class="table-footer">
                 <!-- <span class="table-footer-count">航班总数：{{ tableDataCount.flightCount }}</span> -->
-                <span class="table-footer-count">货运航班总数：{{ tableDataCount.freightFlightCount }}</span>
-                <span v-if="isDeparture" class="table-footer-count">已装机总数：{{ tableDataCount.loadCount }}</span>
-                <span v-else class="table-footer-count">已卸机总数：{{ tableDataCount.unloadCount }}</span>
-                <span class="table-footer-count">已起飞总数：{{ tableDataCount.takeOffCount }}</span>
+                <span class="table-footer-count"
+                  >货运航班总数：{{ tableDataCount.freightFlightCount }}</span
+                >
+                <span v-if="isDeparture" class="table-footer-count"
+                  >已装机总数：{{ tableDataCount.loadCount }}</span
+                >
+                <span v-else class="table-footer-count"
+                  >已卸机总数：{{ tableDataCount.unloadCount }}</span
+                >
+                <span class="table-footer-count"
+                  >已起飞总数：{{ tableDataCount.takeOffCount }}</span
+                >
               </div>
             </template>
           </el-table-v2>
@@ -99,6 +113,16 @@ const props = defineProps({
   },
 })
 
+// onMounted(() => {
+//   console.log('mounted', 'airport')
+// })
+// onActivated(() => {
+//   console.log('activated', 'airport')
+// })
+// onDeactivated(() => {
+//   console.log('deactivated', 'airport')
+// })
+
 const isDeparture = props.name.includes('Departure')
 
 const formData = reactive<CommonData>({})
@@ -127,7 +151,9 @@ const tableDataCount = computed(() =>
         counts.goodsCount += Number(String(preCount).split('/')[1])
       }
       counts.flightCount++
-      const isFreight = tableColumns.value.some(column => column.groupName === '地服相关' && current[column.columnName])
+      const isFreight = tableColumns.value.some(
+        column => column.groupName === '地服相关' && current[column.columnName]
+      )
       if (isFreight) {
         counts.freightFlightCount++
       }
@@ -153,7 +179,12 @@ const tableDataCount = computed(() =>
 
 const { cellClickHandlerV2 } = useTableCellClick(props.name)
 
-const { filterOptionMap, filterValueMap, tableDataSortRuleMap, dealedTableData } = useTableFilterAndSort(
+const {
+  filterOptionMap,
+  filterValueMap,
+  tableDataSortRuleMap,
+  dealedTableData,
+} = useTableFilterAndSort(
   tableColumns,
   tableData,
   {},
@@ -162,22 +193,26 @@ const { filterOptionMap, filterValueMap, tableDataSortRuleMap, dealedTableData }
 
 const permissionMap = {
   DepartureAirport: {
-    count: 'number_of_pieces_displayed_in_domestic_departure_terminal_view_button',
+    count:
+      'number_of_pieces_displayed_in_domestic_departure_terminal_view_button',
     UTC: 'turn_on_utc_in_view_of_domestic_departure_terminal_button',
     columnSet: 'domestic_departure_terminal_view_column_setting_button',
   },
   InternationalDepartureAirport: {
-    count: 'number_of_pieces_displayed_in_international_departure_terminal_view_button',
+    count:
+      'number_of_pieces_displayed_in_international_departure_terminal_view_button',
     UTC: 'international_departure_terminal_view_opens_utc_button',
     columnSet: 'international_departure_terminal_view_column_setting_button',
   },
   ArrivalAirport: {
-    count: 'number_of_pieces_displayed_in_domestic_inbound_terminal_view_button',
+    count:
+      'number_of_pieces_displayed_in_domestic_inbound_terminal_view_button',
     UTC: 'turn_on_utc_in_view_of_domestic_inbound_terminal_button',
     columnSet: 'domestic_inbound_terminal_view_column_setting_button',
   },
   InternationalArrivalAirport: {
-    count: 'number_of_display_pieces_of_international_inbound_terminal_view_button',
+    count:
+      'number_of_display_pieces_of_international_inbound_terminal_view_button',
     UTC: 'the_view_of_international_inbound_terminal_opens_utc_button',
     columnSet: 'view_column_setting_of_international_inbound_terminal_button',
   },

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

@@ -21,34 +21,41 @@ const columnGroupsMap: {
           columnName: 'IATACode',
           columnLabel: '航司',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'flightNO',
           columnLabel: '航班号',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'flightDate',
           columnLabel: '执飞日期',
           width: 73,
+          fixed: true,
         },
         {
           columnName: 'planDepartureTime',
           columnLabel: '起飞时间',
           width: 73,
+          fixed: true,
         },
         {
           columnName: 'target',
           columnLabel: '目的站',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'takeOffStand',
           columnLabel: '停机位',
+          fixed: true,
         },
         {
           columnName: 'lastflightNO',
           columnLabel: '前序航班',
+          fixed: true,
         },
         {
           columnName: 'acLandingTime',
@@ -217,34 +224,41 @@ const columnGroupsMap: {
           columnName: 'IATACode',
           columnLabel: '航司',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'flightNO',
           columnLabel: '航班号',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'flightDate',
           columnLabel: '执飞日期',
           width: 73,
+          fixed: true,
         },
         {
           columnName: 'planDepartureTime',
           columnLabel: '起飞时间',
           width: 73,
+          fixed: true,
         },
         {
           columnName: 'target',
           columnLabel: '目的站',
           needFilters: 1,
+          fixed: true,
         },
         {
           columnName: 'takeOffStand',
           columnLabel: '停机位',
+          fixed: true,
         },
         {
           columnName: 'lastflightNO',
           columnLabel: '前序航班',
+          fixed: true,
         },
         {
           columnName: 'acLandingTime',
@@ -671,153 +685,6 @@ const columnGroupsMap: {
   ],
 }
 
-const simulateTableDataMap = {
-  DepartureAirport: Array.from({ length: 3 }, (_, i) => ({
-    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: '0/0',
-    C5: '364/534/1254KG',
-    C5_time: '12:02',
-    C5_1: '364/534/1254KG',
-    C5_1_time: '12:02',
-    C6: '0/7',
-    C6_time: '12:02',
-    C7: '364/534',
-    C7_time: '12:02',
-    C8: '8/365/536/1254KG',
-    C8_time: '12:02',
-    C9: '8/536',
-    C9_time: '12:02',
-    C10: '8/536',
-    C10_time: '12:02',
-    C11: '11:45',
-    C12_0: '8/536',
-    C12_0_time: '12:02',
-    C12: i === 1 ? '4/243' : '8/536',
-    C12_time: '12:02',
-    C13: i === 2 ? '5/357' : '8/536',
-    C13_time: '12:02',
-    C14: '8/536',
-    C14_time: '12:02',
-    C15_0: '8/536',
-    C15_0_time: '12:02',
-    C15: '8/536',
-    C15_time: '12:02',
-    C16: '358/5',
-    C16_time: '12:02',
-    C17: '0/5',
-    C17_time: '12:02',
-  })),
-  InternationalDepartureAirport: Array.from({ length: 3 }, (_, i) => ({
-    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: '0/0',
-    C5: '364/534',
-    C5_time: '12:02',
-    C6: '364/534',
-    C6_time: '12:02',
-    C7: '364/534',
-    C7_time: '12:02',
-    C8: '0/7',
-    C8_time: '12:02',
-    C9: '8/536',
-    C9_time: '12:02',
-    C10: '8/536',
-    C10_time: '12:02',
-    C11: '8/536',
-    C11_time: '12:02',
-    C12: '8/536',
-    C12_time: '12:02',
-    C13: '8/536',
-    C13_time: '12:02',
-    C14: '8/365/536',
-    C14_time: '12:02',
-    C15: '11:45',
-    C16: '8/536',
-    C16_time: '12:02',
-    C17: '8/536',
-    C17_time: '12:02',
-    C18: '8/536',
-    C18_time: '12:02',
-    C19: '8/536',
-    C19_time: '12:02',
-    C20: '8/536',
-    C20_time: '12:02',
-    C21: '8/536',
-    C21_time: '12:02',
-    C22: '8/536',
-    C22_time: '12:02',
-    C23: '8/536',
-    C23_time: '12:02',
-    C24: '8/365/536',
-    C24_time: '12:02',
-  })),
-  ArrivalAirport: Array.from({ length: 3 }, (_, i) => ({
-    flightNO: 'ZH3423',
-    flightDate: '2022/09/10',
-    planLandingTime: '22/09/10 12:01',
-    landingAirport: 'NKG-PEK-',
-    landingStand: '84',
-    C1: '锂2/冷1',
-    C2: '363/543',
-    C3: '0/0',
-    C4: i === 0 ? '0/6' : '0/0',
-    C5_0: '8/8/8',
-    C5_0_time: '12:02',
-    C5: '8/8/8',
-    C5_time: '12:02',
-    C6: '8/8/8',
-    C6_time: '12:02',
-    C7: '8/8/8',
-    C7_time: '12:02',
-    C8: '8/363/537/1254KG',
-    C8_time: '12:02',
-    C9: '3/363/537',
-    C9_time: '12:02',
-  })),
-  InternationalArrivalAirport: Array.from({ length: 3 }, (_, i) => ({
-    flightNO: 'ZH3423',
-    flightDate: '2022/09/10',
-    planLandingTime: '22/09/10 12:01',
-    landingAirport: 'NKG-PEK-',
-    landingStand: '84',
-    C1: '锂2/冷1',
-    C2: '363/543',
-    C3: '0/0',
-    C4: i === 0 ? '0/6' : '0/0',
-    C5: '8/8/8',
-    C6: '8/8/8',
-    C6_time: '12:02',
-    C7: '8/8/8',
-    C7_time: '12:02',
-    C8: '8/8/8',
-    C8_time: '12:02',
-    C9: '8/363/537/1254KG',
-    C9_time: '12:02',
-    C10: '8/536',
-    C10_time: '12:02',
-    C11: '1/8/536',
-    C11_time: '12:02',
-    C12: '8/536',
-    C12_time: '12:02',
-  })),
-}
 const headerClassMap = ['bg-yellow', 'bg-green', 'bg-cyan']
 
 const computedWidth = (column: SimpleColumn) => {
@@ -919,11 +786,9 @@ export function useAirportTable(name: string, formData: CommonData) {
       console.error(error)
     }
   }
-  const getSimulateTableData = () => {
-    tableData.value = simulateTableDataMap[name]
-  }
   let queryLoop: number | null = null
   const startQuery = async () => {
+    queryLoop = 1 // 先赋值，表示已经在进行查询
     await getTableData()
     queryLoop = window.setTimeout(
       startQuery,
@@ -941,6 +806,11 @@ export function useAirportTable(name: string, formData: CommonData) {
     stopQuery()
     startQuery()
   })
+  onActivated(() => {
+    if (!queryLoop) {
+      startQuery()
+    }
+  })
   onDeactivated(() => {
     stopQuery()
   })

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

@@ -97,6 +97,16 @@ 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()

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

@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import AirportView from '../../components/AirportView/index.vue'
+
 export default defineComponent({
   name: 'DepartureAirportView',
   components: { AirportView },

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

@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import FlightView from '../../components/FlightView/index.vue'
+
 export default defineComponent({
   name: 'DepartureFlightView',
   components: { FlightView },

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

@@ -2,8 +2,11 @@
   <GoodsView name="DepartureGoods" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import GoodsView from '../../components/GoodsView/index.vue'
-</script>
 
-<style scoped></style>
+export default defineComponent({
+  name: 'DepartureGoodsView',
+  components: { GoodsView },
+})
+</script>

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

@@ -2,8 +2,11 @@
   <WaybillView name="DepartureWaybill" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import WaybillView from '../../components/WaybillView/index.vue'
-</script>
 
-<style scoped lang="scss"></style>
+export default defineComponent({
+  name: 'DepartureWaybillView',
+  components: { WaybillView },
+})
+</script>

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

@@ -1,7 +1,12 @@
 <template>
-  <AirportView name="InternationalArrivalAirport" />
+  <WaybillView name="InternationalArrivalWaybill" />
 </template>
 
-<script setup lang="ts">
-import AirportView from '../../components/AirportView/index.vue'
+<script lang="ts">
+import WaybillView from '../../components/WaybillView/index.vue'
+
+export default defineComponent({
+  name: 'InternationalArrivalWaybillView',
+  components: { WaybillView },
+})
 </script>

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

@@ -2,6 +2,11 @@
   <FlightView name="InternationalArrivalFlight" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import FlightView from '../../components/FlightView/index.vue'
+
+export default defineComponent({
+  name: 'InternationalArrivalFlightView',
+  components: { FlightView },
+})
 </script>

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

@@ -2,8 +2,11 @@
   <GoodsView name="InternationalArrivalGoods" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import GoodsView from '../../components/GoodsView/index.vue'
-</script>
 
-<style scoped></style>
+export default defineComponent({
+  name: 'InternationalArrivalGoodsView',
+  components: { GoodsView },
+})
+</script>

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

@@ -2,8 +2,11 @@
   <WaybillView name="InternationalArrivalWaybill" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import WaybillView from '../../components/WaybillView/index.vue'
-</script>
 
-<style scoped lang="scss"></style>
+export default defineComponent({
+  name: 'InternationalArrivalWaybillView',
+  components: { WaybillView },
+})
+</script>

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

@@ -2,6 +2,11 @@
   <AirportView name="InternationalDepartureAirport" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import AirportView from '../../components/AirportView/index.vue'
+
+export default defineComponent({
+  name: 'InternationalDepartureAirportView',
+  components: { AirportView },
+})
 </script>

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

@@ -2,6 +2,11 @@
   <FlightView name="InternationalDepartureFlight" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import FlightView from '../../components/FlightView/index.vue'
+
+export default defineComponent({
+  name: 'InternationalDepartureFlightView',
+  components: { FlightView },
+})
 </script>

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

@@ -2,8 +2,11 @@
   <GoodsView name="InternationalDepartureGoods" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import GoodsView from '../../components/GoodsView/index.vue'
-</script>
 
-<style scoped></style>
+export default defineComponent({
+  name: 'InternationalDepartureGoodsView',
+  components: { GoodsView },
+})
+</script>

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

@@ -2,8 +2,11 @@
   <WaybillView name="InternationalDepartureWaybill" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import WaybillView from '../../components/WaybillView/index.vue'
-</script>
 
-<style scoped lang="scss"></style>
+export default defineComponent({
+  name: 'InternationalDepartureWaybillView',
+  components: { WaybillView },
+})
+</script>