航站视图-滚动到已起飞/降落、拉下颜色提示、航班状态颜色提示

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

@@ -29,7 +29,7 @@
   .airport-table {
     width: 100%;
     height: calc(100% - 32px - 16px);
-    .el-table-v2 :deep {
+    :deep(.el-table-v2) {
       .el-table-v2__header-cell,
       .el-table-v2__row-cell {
         padding: 0;
@@ -62,14 +62,18 @@
         .el-table-v2__row {
           &.bg-gray {
             background-color: #d2d6df;
-            & + :not(.bg-gray) {
-              border-top: 2px solid #e83f82;
-            }
+            // & + :not(.bg-gray) {
+            //   border-top: 2px solid #e83f82;
+            // }
+          }
+          &.underline-red {
+            border-bottom: 2px solid #e83f82;
           }
           &.is-selected {
             background-color: var(--el-table-current-row-bg-color);
           }
           .el-table-v2__row-cell {
+            flex-direction: column;
             &.cell-warning {
               background-color: #f6cda5;
             }
@@ -80,6 +84,12 @@
               color: #2d67e3;
               cursor: pointer;
             }
+            .flight-state-cancel {
+              color: #f38080;
+            }
+            .flight-state-delay {
+              color: #d89834;
+            }
           }
         }
         .el-virtual-scrollbar {

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

@@ -123,12 +123,21 @@ const customRendererColumns = computed(() =>
       />
     ),
     cellRenderer: (cell: CellRenderProps) => (
-      <div
-        class="el-table-v2__cell-text"
-        onClick={() => cellClickHandlerV2(cell)}
-      >
-        {tableDataFormatter(cell)}
-      </div>
+      <>
+        <div
+          class="el-table-v2__cell-text"
+          onClick={() => cellClickHandlerV2(cell)}
+        >
+          {tableDataFormatter(cell)}
+        </div>
+        {
+          cell.column.columnName === 'flightNO' &&
+          (
+            cell.rowData.flightState === 'DLY' && <div class="flight-state-delay">延误</div> ||
+            cell.rowData.flightState === 'CAN' && <div class="flight-state-cancel">取消</div>
+          )
+        }
+      </>
     ),
   }))
 )
@@ -144,9 +153,21 @@ const { rowClassV2, cellClassV2 } = useTableStyle(props.name)
 const cellPropsGetter = params => ({
   class: cellClassV2(params),
 })
+const dealedCount = ref(0)
 const rowClass: RowClassGetter = (params) => {
-  const selectedRowClass = (selectedRowKey.value && params.rowData.rowKey === selectedRowKey.value) ? 'is-selected' : ''
-  return `${rowClassV2(params)} ${selectedRowClass}`
+  const { rowData, rowIndex } = params
+  const classes: string[] = []
+  if (rowData.hasTakenOff || rowData.hasLanded) {
+    classes.push('bg-gray')
+    if (dealedCount.value < tableData.value.length && rowIndex === dealedCount.value - 1) {
+      classes.push('underline-red')
+    }
+  }
+  if (selectedRowKey.value && params.rowData.rowKey === selectedRowKey.value) {
+    classes.push('is-selected')
+  }
+
+  return `${rowClassV2(params)} ${classes.join(' ')}`
 }
 const selectedRowKey = ref('')
 watch(formData, () => {
@@ -237,6 +258,41 @@ const getPermission = (type?: string) => {
   return [permissionMap[props.name][type]]
 }
 
+const hasSetTableScroll = ref(false)
+watch(formData, () => {
+  hasSetTableScroll.value = false
+})
+watch(tableData, async rows => {
+  dealedCount.value = 0
+  const now = new Date().getTime()
+  rows.forEach((row, rowIndex) => {
+    if (props.name.includes('DepartureAirport') && row.planDepartureTime) {
+      const departureTime = new Date(
+        (row.planDepartureTime as string).replace('T', ' ')
+      ).getTime()
+      if (now >= departureTime) {
+        row.hasTakenOff = 1
+        dealedCount.value++
+      }
+    }
+    if (props.name.includes('ArrivalAirport') && row.planLandingTime) {
+      const landingTime = new Date(
+        (row.planLandingTime as string).replace('T', ' ')
+      ).getTime()
+      if (now >= landingTime) {
+        row.hasLanded = 1
+        dealedCount.value++
+      }
+    }
+  })
+  if (hasSetTableScroll.value || !dealedCount.value) {
+    return
+  }
+  await nextTick()
+  tableRef.value?.scrollToRow(dealedCount.value - 1, 'start')
+  hasSetTableScroll.value = true
+})
+
 // 因为使用了keepalive，需要记录下滚动位置，返回时先滚动到初始位置，再滚动到记录的位置，不然表格会变成空白
 const tableRef = ref<TableV2Instance | null>(null)
 const visibility = ref<'visible' | 'hidden'>('visible')
@@ -249,21 +305,21 @@ const tableScrollHandler = ({ scrollLeft, scrollTop }: ScrollParams) => {
   scrollPosition.y = scrollTop
 }
 onActivated(() => {
-  visibility.value = 'hidden'
   const { x, y } = scrollPosition
+  if (x > 0 || y > 0) {
+  visibility.value = 'hidden'
   tableRef.value?.scrollTo({ scrollLeft: 0, scrollTop: 0 })
   // 不加延迟的话横向滚动会出错
   // 等待滚动完成再显示，一定要使用visibility，使用v-show或者说display: none一样会变空白
   setTimeout(() => {
-    if (x > 0 || y > 0) {
       tableRef.value?.scrollTo({
         scrollLeft: x,
         scrollTop: y,
       })
-    }
-    visibility.value = 'visible'
-  }, 0)
-})
+      visibility.value = 'visible'
+    }, 0)
+  }
+  })
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

src/views/realTime/hooks/useTableStyle.ts

@@ -62,23 +62,6 @@ export function useTableStyle(tableName?: string) {
 
   const rowClassV2: RowClassGetter = ({ columns, rowData, rowIndex }) => {
     const classes: string[] = []
-    const now = new Date().getTime()
-    if (tableName?.includes('DepartureAirport') && rowData.planDepartureTime) {
-      const departureTime = new Date(
-        (rowData.planDepartureTime as string).replace('T', ' ')
-      ).getTime()
-      if (now >= departureTime) {
-        classes.push('bg-gray')
-      }
-    }
-    if (tableName?.includes('ArrivalAirport') && rowData.planLandingTime) {
-      const landingTime = new Date(
-        (rowData.planLandingTime as string).replace('T', ' ')
-      ).getTime()
-      if (now >= landingTime) {
-        classes.push('bg-gray')
-      }
-    }
     return classes.join(' ')
   }
 
@@ -97,9 +80,16 @@ export function useTableStyle(tableName?: string) {
     // if ((['5/357'] as any).includes(cellData)) {
     //   classes.push('cell-alarm')
     // }
-    if ((['flightNO'] as any).includes(column.dataKey)) {
+    if ((['flightNO'] as any[]).includes(column.dataKey)) {
       classes.push('cell-click')
     }
+    if (
+      column.dataKey === 'register' &&
+      typeof cellData === 'string' &&
+      cellData.split('/').some(char => Number(char) > 0)
+    ) {
+      classes.push('cell-warning')
+    }
     return classes.join(' ')
   }