国内航站视图修改

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

@@ -1,7 +1,104 @@
 <template>
-  <div></div>
+  <div class="station-view">
+    <div class="station-header">
+      <StationForm />
+      <div class="station-count">
+        <CountBox
+          :count-number="tableDataCount.waybillCount"
+          label="预计装载总运单数"
+        />
+        <CountBox
+          v-if="goodsCountFlag"
+          :count-number="tableDataCount.goodsCount"
+          label="预计装载总件数"
+        />
+      </div>
+      <div class="station-settings">
+        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
+        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
+        <ColumnSet
+          :table-columns="tableColumns"
+          @checked-submit="columnChecked"
+        />
+      </div>
+    </div>
+    <div class="station-table">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="filteredColumns"
+            :data="tableData"
+            :width="width"
+            :height="height"
+            :footer-height="60"
+            :row-class="rowClass"
+            fixed
+          >
+            <template #cell="slot: CellSlotProps">
+              <div :class="cellClass(slot)">
+                <span class="cell-text">{{
+                  slot.rowData[slot.column.dataKey]
+                }}</span>
+                <div class="cell-background" />
+              </div>
+            </template>
+            <template #footer>
+              <div class="table-footer">
+                <span class="table-footer-count"
+                  >航班总数：{{ tableDataCount.flightCount }}</span
+                >
+                <span class="table-footer-count"
+                  >货运航班总数：{{ tableDataCount.freightFlightCount }}</span
+                >
+                <span class="table-footer-count"
+                  >已装机总数：{{ tableDataCount.loadCount }}</span
+                >
+                <span class="table-footer-count"
+                  >已起飞总数：{{ tableDataCount.takeOffCount }}</span
+                >
+              </div>
+            </template>
+          </el-table-v2>
+        </template>
+      </el-auto-resizer>
+    </div>
+  </div>
 </template>
+<script lang="ts" setup>
+import type { CellSlotProps } from '../../hooks/useTableStyle'
+import StationForm from '../../components/StationForm/index.vue'
+import ColumnSet from '../../components/ColumnSet/index.vue'
+import CountBox from '../../components/CountBox/index.vue'
+import TableSwitch from '../../components/TableSwitch/index.vue'
+import useTableColumnSet from '../../hooks/useTableColumnSet'
+import useTableData from '../../hooks/useTableData'
+import useTableStyle from '../../hooks/useTableStyle'
 
-<script setup lang="ts"></script>
+const goodsCountFlag = ref(true)
+const UTCFlag = ref(true)
 
-<style scoped lang="scss"></style>
+const { tableColumns, tableData } = useTableData('arrival')
+const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
+
+const tableDataCount = reactive({
+  waybillCount: 0,
+  goodsCount: 0,
+  flightCount: 0,
+  freightFlightCount: 0,
+  loadCount: 0,
+  takeOffCount: 0,
+})
+watch(tableData, records => {
+  tableDataCount.waybillCount = records.length
+  tableDataCount.goodsCount = records.length
+  tableDataCount.flightCount = records.length
+  tableDataCount.freightFlightCount = records.length
+  tableDataCount.loadCount = records.length
+  tableDataCount.takeOffCount = records.length
+})
+
+const { rowClass, cellClass } = useTableStyle()
+</script>
+<style lang="scss" scoped>
+@import '../../style/station.scss';
+</style>

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

@@ -13,20 +13,33 @@
     @reset-form="dialogHide"
   >
     <div class="dialog-content">
-      <div v-for="columnGroup in columnGroups" :key="columnGroup.title">
-        <div class="group-title">{{ columnGroup.title }}</div>
-        <el-checkbox-group
-          v-model="checkedGroups[columnGroup.title]"
-          size="large"
-        >
+      <template v-if="inGroup">
+        <div v-for="columnGroup in columnGroups" :key="columnGroup.title">
+          <div class="group-title">{{ columnGroup.title }}</div>
+          <el-checkbox-group
+            v-model="checkedGroups[columnGroup.title]"
+            size="large"
+          >
+            <el-checkbox
+              v-for="column in columnGroup.columns"
+              :key="column.dataKey"
+              :label="column.dataKey"
+              >{{ column.title.replace('\n', '') }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+      </template>
+      <template v-else>
+        <el-checkbox-group v-model="checkedKeys" size="large">
           <el-checkbox
-            v-for="tableColumn in columnGroup.columns"
-            :key="tableColumn.dataKey"
-            :label="tableColumn.dataKey"
-            >{{ tableColumn.title }}</el-checkbox
+            v-for="column in tableColumns"
+            :key="column.dataKey"
+            :label="column.dataKey"
           >
+            {{ column.title?.replace('\n', '') }}
+          </el-checkbox>
         </el-checkbox-group>
-      </div>
+      </template>
     </div>
   </Dialog>
 </template>
@@ -36,10 +49,11 @@ import { Tools } from '@element-plus/icons-vue'
 import Dialog from '@/components/dialog/index.vue'
 import type { Column } from 'element-plus'
 
-export type KeyType = string|number| symbol
+export type KeyType = string | number | symbol
 
 export interface tableColumnInGroup<T = any> extends Column<T> {
   dataKey: KeyType
+  title: string
   groupTitle: string
 }
 export interface tableColumnGroup {
@@ -49,11 +63,15 @@ export interface tableColumnGroup {
 
 const props = defineProps({
   tableColumns: {
-    type: Array<tableColumnInGroup>,
+    type: Array<tableColumnInGroup | Column>,
     required: true,
   }
 })
 
+const inGroup = computed(() => {
+  return 'groupTitle' in props.tableColumns[0]
+})
+
 const emits = defineEmits(['checkedSubmit'])
 
 const dialogFlag = ref(false)
@@ -64,34 +82,49 @@ const dialogHide = () => {
   dialogFlag.value = false
 }
 
-const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnGroup[], curr) => {
-  const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
-  if (theGroup) {
-    theGroup.columns.push(curr)
+const columnGroups = computed(() => {
+  if (inGroup.value) {
+    return (props.tableColumns as tableColumnInGroup[]).reduce((pre: tableColumnGroup[], curr) => {
+      const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
+      if (theGroup) {
+        theGroup.columns.push(curr)
+      } else {
+        pre.push({
+          title: curr.groupTitle,
+          columns: [curr]
+        })
+      }
+      return pre
+    }, [])
   } else {
-    pre.push({
-      title: curr.groupTitle,
-      columns: [curr]
-    })
+    return []
   }
-  return pre
-}, []))
+})
 
-const checkedGroups = ref<string[]>([])
+const checkedGroups = ref<any>({})
+const checkedKeys = ref<KeyType[]>([])
+  const checkedColumnKeys = computed<KeyType[]>(() => {
+  if (inGroup.value) {
+    return Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat()
+  } else {
+    return checkedKeys.value
+  }
+})
 watch(() => props.tableColumns, columns => {
-  checkedGroups.value = []
-  columns.forEach(({ dataKey, groupTitle }) => {
-    if (checkedGroups.value[groupTitle] && checkedGroups.value[groupTitle] instanceof Array) {
-      checkedGroups.value[groupTitle].push(dataKey)
-    } else {
-      checkedGroups.value[groupTitle] = [dataKey]
-    }
-  })
+  if (inGroup.value) {
+    checkedGroups.value = {}
+    columns.forEach(({ dataKey, groupTitle }) => {
+      if (checkedGroups.value[groupTitle] && checkedGroups.value[groupTitle] instanceof Array) {
+        checkedGroups.value[groupTitle].push(dataKey)
+      } else {
+        checkedGroups.value[groupTitle] = [dataKey]
+      }
+    })
+  } else {
+    checkedKeys.value = columns.map(({ dataKey }) => dataKey as KeyType)
+  }
   emits('checkedSubmit', checkedColumnKeys.value)
 })
-const checkedColumnKeys = computed<string[]>(() =>
-  Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat()
-)
 
 const submitHandler = () => {
   emits('checkedSubmit', checkedColumnKeys.value)
@@ -115,7 +148,18 @@ const submitHandler = () => {
     font-family: Helvetica, Microsoft YaHei;
     font-weight: bold;
     color: #303133;
-    margin-bottom: 22px;
+    margin: 22px 0;
+  }
+
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+
+    .el-checkbox {
+      width: 20%;
+      margin: 0;
+    }
   }
 }
 </style>

src/views/baggageManagement/components/StationForm/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form :model="formData" inline class="station-form">
-    <el-form-item :prop="formData.startDate" style="width: 184px">
+    <el-form-item :prop="formData.startDate" style="width: 176px">
       <el-date-picker
         v-model="formData.startDate"
         type="datetime"
@@ -10,7 +10,7 @@
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.endDate" style="width: 184px">
+    <el-form-item :prop="formData.endDate" style="width: 176px">
       <el-date-picker
         v-model="formData.endDate"
         type="datetime"
@@ -20,7 +20,7 @@
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.flightStatus" style="width: 104px">
+    <el-form-item :prop="formData.flightStatus" style="width: 96px">
       <el-select
         v-model="formData.flightStatus"
         size="default"
@@ -34,7 +34,7 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item :prop="formData.flightWarning" style="width: 104px">
+    <el-form-item :prop="formData.flightWarning" style="width: 96px">
       <el-select
         v-model="formData.flightWarning"
         size="default"
@@ -51,7 +51,7 @@
     <el-form-item
       v-if="international"
       :prop="formData.waybillType"
-      style="width: 104px"
+      style="width: 96px"
     >
       <el-select
         v-model="formData.waybillType"
@@ -80,8 +80,8 @@ interface selectOptions {
 const props = defineProps({
   international: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const formData = reactive({
@@ -103,6 +103,19 @@ const waybillTypeOptions = ref<selectOptions[]>([])
     &:not(:last-of-type) {
       margin-right: 8px;
     }
+    .el-input__wrapper {
+      padding: 1px 8px;
+      .el-input__inner {
+        font-size: 14px;
+        font-family: Helvetica, Microsoft YaHei;
+        color: #303133;
+        &::-webkit-input-placeholder {
+          font-size: 14px;
+          font-family: Helvetica, Microsoft YaHei;
+          color: #303133;
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -77,7 +77,7 @@ import useTableStyle from '../../hooks/useTableStyle'
 const goodsCountFlag = ref(true)
 const UTCFlag = ref(true)
 
-const { tableColumns, tableData } = useTableData()
+const { tableColumns, tableData } = useTableData('departure')
 const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
 
 const tableDataCount = reactive({

src/views/baggageManagement/hooks/useTableColumnSet.ts

@@ -1,10 +1,16 @@
 import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import type { KeyType } from '../components/ColumnSet/index.vue'
 import { Ref } from 'vue'
+import { Column } from 'element-plus'
 
-export default function useTableColumnSet(tableColumns: Ref<tableColumnInGroup[]>) {
-  const filterColumnKeys = ref<string[]>([])
+export default function useTableColumnSet(
+  tableColumns: Ref<tableColumnInGroup[] | Column[]>
+) {
+  const filterColumnKeys = ref<KeyType[]>([])
   const filteredColumns = computed(() =>
-    tableColumns.value.filter(({ dataKey }) => filterColumnKeys.value.includes(dataKey))
+    tableColumns.value.filter(({ dataKey }) =>
+      filterColumnKeys.value.includes(dataKey as KeyType)
+    )
   )
   const columnChecked = (checkedColumnKeys: string[]) => {
     filterColumnKeys.value = checkedColumnKeys

src/views/baggageManagement/hooks/useTableData.ts

@@ -1,15 +1,16 @@
+import { Column } from 'element-plus'
 import type { KeyType } from '../components/ColumnSet/index.vue'
 import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
 
-type tableColumnsGroups = {
+type tableColumnsGroup = {
   groupTitle: string
   children: {
     key: KeyType
     title: string
     width?: number
-    headerClass: string
+    headerClass?: string
   }[]
-}[]
+}
 
 enum Alignment {
   LEFT = 'left',
@@ -17,26 +18,408 @@ enum Alignment {
   RIGHT = 'right',
 }
 
-const gourpNumber = 3
-const groupColumnNumber = 6
 const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']
 
-export default function useTableData() {
-  const tableColumns = ref<tableColumnInGroup[]>([])
+const groupsObj = {
+  departure: [
+    {
+      groupTitle: '航班相关',
+      children: [
+        {
+          key: 'flightNO',
+          title: '航班号',
+        },
+        {
+          key: 'flightDate',
+          title: '执飞日期',
+        },
+        {
+          key: 'takeOffTime',
+          title: '起飞时间',
+        },
+        {
+          key: 'desitination',
+          title: '目的站',
+        },
+        {
+          key: 'gate',
+          title: '停机位',
+        },
+        {
+          key: 'preFlightNO',
+          title: '前序航班',
+        },
+        {
+          key: 'landingTime',
+          title: '实际降落\n时间',
+        },
+      ],
+    },
+    {
+      groupTitle: '货站相关',
+      children: [
+        {
+          key: 'special',
+          title: '特货信息',
+        },
+        {
+          key: 'projectLoad',
+          title: '预计装载数\n(运单/件)',
+          width: 100,
+        },
+        {
+          key: 'transferIn',
+          title: '中转进\n(运单/件)',
+          width: 100,
+        },
+        {
+          key: 'cancel',
+          title: '退运\n(板卡/件)',
+          width: 100,
+        },
+      ],
+    },
+    {
+      groupTitle: '地服相关',
+      children: [
+        {
+          key: 'receive',
+          title: '收运核单\n(运单/件/重量)',
+          width: 140,
+        },
+        {
+          key: 'check',
+          title: '查验\n(拒运/查验)',
+          width: 120,
+        },
+        {
+          key: 'security',
+          title: '安检\n(运单/件)',
+          width: 100,
+        },
+        {
+          key: 'add',
+          title: '加货\n(运单/板卡/件/重量)',
+          width: 160,
+        },
+        {
+          key: 'wait',
+          title: '待运区\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'stowage',
+          title: '配载\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'handOverTime',
+          title: '计划交接\n时间',
+        },
+        {
+          key: 'stationHandOver',
+          title: '货站交接\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'recheck',
+          title: '运输前复核\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'flightHandOver',
+          title: '机下交接\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'load',
+          title: '装机\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'goodsRegister',
+          title: '拉货登记\n(板卡/件)',
+          width: 100,
+        },
+        {
+          key: 'pullBack',
+          title: '拉回确认\n(板卡/件)',
+          width: 100,
+        },
+      ],
+    },
+  ],
+  arrival: [
+    {
+      groupTitle: '航班相关',
+      children: [
+        {
+          key: 'flightNO',
+          title: '航班号',
+        },
+        {
+          key: 'flightDate',
+          title: '执飞日期',
+          width: 100,
+        },
+        {
+          key: 'landingTime',
+          title: '降落时间',
+          width: 100,
+        },
+        {
+          key: 'desitination',
+          title: '目的站',
+          width: 100,
+        },
+        {
+          key: 'gate',
+          title: '停机位',
+        },
+      ],
+    },
+    {
+      groupTitle: '货站相关',
+      children: [
+        {
+          key: 'special',
+          title: '特货信息',
+          width: 100,
+        },
+        {
+          key: 'projectUnload',
+          title: '预计卸载数\n(运单/件)',
+          width: 100,
+        },
+        {
+          key: 'transferOut',
+          title: '中转出\n(运单/件)',
+          width: 100,
+        },
+        {
+          key: 'difference',
+          title: '收货差异\n(板卡/件)',
+          width: 100,
+        },
+      ],
+    },
+    {
+      groupTitle: '地服相关',
+      children: [
+        {
+          key: 'unload',
+          title: '卸机\n(板/箱/卡)',
+          width: 160,
+        },
+        {
+          key: 'flightHandOver',
+          title: '机下交接\n(板/箱/卡)',
+          width: 160,
+        },
+        {
+          key: 'stationHandOver',
+          title: '货站交接\n(板/箱/卡)',
+          width: 160,
+        },
+        {
+          key: 'settle',
+          title: '理货\n(板卡/运单/件/重量)',
+          width: 160,
+        },
+        {
+          key: 'outCargo',
+          title: '出库\n(批/运单/件)',
+          width: 160,
+        },
+      ],
+    },
+  ],
+}
+
+const tableDatas = {
+  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',
+    },
+  ],
+}
+
+export default function useTableData(stationType: string = 'dearture') {
+  const tableColumns = ref<tableColumnInGroup[] | Column[]>([])
   const tableData = ref<{}[]>([])
   const getTableData = () => {
-    const groups: tableColumnsGroups = Array.from({ length: gourpNumber }).map(
-      (_, groupIndex) => ({
-        groupTitle: `group${groupIndex + 1}`,
-        children: Array.from({ length: groupColumnNumber }).map(
-          (_, columnIndex) => ({
-            key: `group${groupIndex}-column${columnIndex}`,
-            title: `${groupIndex + 1}组-${columnIndex + 1}列`,
-            width: 100,
-            headerClass: headerClassReflect[groupIndex] || '',
-          })
-        ),
-      })
+    if (stationType === 'test') {
+      tableColumns.value = [
+        {
+          key: 'flightNO',
+          title: '航班号',
+        },
+        {
+          key: 'flightDate',
+          title: '执飞日期',
+        },
+        {
+          key: 'takeOffTime',
+          title: '起飞时间',
+        },
+        {
+          key: 'desitination',
+          title: '目的站',
+        },
+        {
+          key: 'gate',
+          title: '停机位',
+        },
+        {
+          key: 'preFlightNO',
+          title: '前序航班',
+        },
+        {
+          key: 'landingTime',
+          title: '实际降落\n时间',
+        },
+      ].map(({ key, title }) => ({
+        key,
+        dataKey: key,
+        title,
+        width: 80,
+        align: Alignment.CENTER,
+      }))
+      tableData.value = tableDatas.arrival
+      return
+    }
+    const groups: tableColumnsGroup[] = groupsObj[stationType].map(
+      (group: tableColumnsGroup, groupIndex: number) => {
+        group.children.forEach(column => {
+          column.headerClass = headerClassReflect[groupIndex]
+        })
+        return group
+      }
     )
     tableColumns.value = groups.reduce(
       (columns: tableColumnInGroup[], group) => {
@@ -56,15 +439,7 @@ export default function useTableData() {
       []
     )
 
-    tableData.value = Array.from({ length: 20 }).map((_, rowIndex) =>
-      tableColumns.value.reduce((rowData, column, columnIndex) => {
-        rowData[column.dataKey] = `${rowIndex + 1}行-${
-          Math.floor(columnIndex / groupColumnNumber) + 1
-        }组-${(columnIndex % groupColumnNumber) + 1}列`
-
-        return rowData
-      }, {})
-    )
+    tableData.value = tableDatas[stationType]
   }
   onMounted(() => {
     getTableData()

src/views/baggageManagement/hooks/useTableStyle.ts

@@ -32,10 +32,10 @@ const defaultCellClass = 'el-table-v2__cell-text'
 export default function useTableStyle() {
   const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
     const classes: string[] = []
-    if (rowIndex <= 2) {
+    if (rowIndex <= 1) {
       classes.push('bg-gray')
     }
-    if (rowIndex === 2) {
+    if (rowIndex === 1) {
       classes.push('underline-red')
     }
     return classes.join(' ')
@@ -49,10 +49,10 @@ export default function useTableStyle() {
     rowIndex,
   }) => {
     const classes: string[] = [defaultCellClass]
-    if (rowData[column.dataKey] === '4行-2组-6列') {
+    if (['4/243', '0/6'].includes(rowData[column.dataKey])) {
       classes.push('cell-warning')
     }
-    if (rowData[column.dataKey] === '5行-3组-3列') {
+    if (['5/357'].includes(rowData[column.dataKey])) {
       classes.push('cell-error')
     }
     return classes.join(' ')

src/views/baggageManagement/style/station.scss

@@ -5,23 +5,21 @@
     display: flex;
     margin-bottom: 16px;
     .station-form {
-      margin-right: 43px;
+      margin-right: 30px;
     }
     .station-count {
-      margin-right: 24px;
       flex: 1;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      .count-box {
+        flex: 1;
+      }
     }
     .station-settings {
       display: flex;
       align-items: center;
       .station-switch {
-        margin-right: 28px;
-        &:nth-child(2) {
-          margin-right: 24px;
-        }
+        margin-right: 24px;
       }
     }
   }