添加航站视图

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-end_of_line = lf
+end_of_line = crlf
 insert_final_newline = true
 trim_trailing_whitespace = true
 

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

@@ -1,4 +1,5 @@
 import Layout from "@/layout";
+import { h, resolveComponent } from 'vue'
 
 const HomeRoutes = {
   path: "/baggageManagement",
@@ -9,10 +10,15 @@ const HomeRoutes = {
   meta: { title: "综合可视化", elSvgIcon: "Fold" },
   children: [
     {
-      path: "/baggageManagement/departure/station",
+      path: "/baggageManagement/departure",
       name: "InternalDeparture",
+      redirect: '/baggageManagement/departure/station',
       meta: { title: "国内出港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departure/station/index.vue"),
+      component: {
+        render() {
+          return h(resolveComponent('router-view'))
+        }
+      },
       children: [
         {
           path: "/baggageManagement/departure/station",
@@ -46,7 +52,7 @@ const HomeRoutes = {
     },
     {
       path: "/baggageManagement/departure",
-      name: "DepartureC",
+      name: "InternationalDeparture",
       meta: { title: "国际出港", elSvgIcon: "Fold", icon: "table" },
       component: () => import("@/views/baggageManagement/departureC/index.vue"),
     },

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

@@ -21,9 +21,9 @@
         >
           <el-checkbox
             v-for="tableColumn in columnGroup.columns"
-            :key="tableColumn.columnProp"
-            :label="tableColumn.columnProp"
-            >{{ tableColumn.columnName }}</el-checkbox
+            :key="tableColumn.dataKey"
+            :label="tableColumn.dataKey"
+            >{{ tableColumn.title }}</el-checkbox
           >
         </el-checkbox-group>
       </div>
@@ -34,20 +34,22 @@
 <script setup lang="ts">
 import { Tools } from '@element-plus/icons-vue'
 import Dialog from '@/components/dialog/index.vue'
+import type { Column } from 'element-plus'
 
-export interface tableColumn {
-  columnName: string
-  columnProp: string
+export type KeyType = string|number| symbol
+
+export interface tableColumnInGroup<T = any> extends Column<T> {
+  dataKey: KeyType
   groupTitle: string
 }
 export interface tableColumnGroup {
   title: string
-  columns: tableColumn[]
+  columns: tableColumnInGroup[]
 }
 
 const props = defineProps({
   tableColumns: {
-    type: Array<tableColumn>,
+    type: Array<tableColumnInGroup>,
     required: true,
   }
 })
@@ -62,17 +64,6 @@ const dialogHide = () => {
   dialogFlag.value = false
 }
 
-const checkedGroups = computed(() => {
-  const groups = {}
-  props.tableColumns.forEach(({ columnProp, groupTitle }) => {
-    if (groups[groupTitle] && groups[groupTitle] instanceof Array) {
-      groups[groupTitle].push(columnProp)
-    } else {
-      groups[groupTitle] = [columnProp]
-    }
-  })
-  return groups
-})
 const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnGroup[], curr) => {
   const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
   if (theGroup) {
@@ -85,10 +76,25 @@ const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnG
   }
   return pre
 }, []))
-const checkedColumnProps = computed<string[]>(() => Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat())
+
+const checkedGroups = ref<string[]>([])
+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]
+    }
+  })
+  emits('checkedSubmit', checkedColumnKeys.value)
+})
+const checkedColumnKeys = computed<string[]>(() =>
+  Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat()
+)
 
 const submitHandler = () => {
-  emits('checkedSubmit', checkedColumnProps.value)
+  emits('checkedSubmit', checkedColumnKeys.value)
   dialogHide()
 }
 </script>
@@ -106,7 +112,7 @@ const submitHandler = () => {
 
   .group-title {
     font-size: 16px;
-    font-family: Microsoft YaHei;
+    font-family: Helvetica, Microsoft YaHei;
     font-weight: bold;
     color: #303133;
     margin-bottom: 22px;

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="count-box">
+    <span class="label">{{ props.label }}</span>
+    <li v-for="(_, index) in numberItems" :key="index" class="number-item">
+      <span class="number-box">
+        <i ref="numberBoxes" class="number-list">0123456789</i>
+      </span>
+    </li>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  countNumber: {
+    type: Number,
+    default: 0,
+  },
+  label: {
+    type: String,
+    default: '总数',
+  },
+})
+const numberBoxes = ref<HTMLInputElement[] | undefined[]>([])
+const numberItems = computed(() => {
+  let numberString = props.countNumber.toString()
+  if (numberString.length > 6) {
+    ElMessage({
+      message: `${props.label}过大`,
+      type: 'error',
+      duration: 2 * 1000,
+    })
+    numberString = '999999'
+  }
+  numberString = '000000' + numberString
+  return numberString.slice(-6).split('')
+})
+watch(numberItems, items => {
+  for (let index = 0; index < numberBoxes.value.length; index++) {
+    const box = numberBoxes.value[index]
+    if (box) {
+      box.style.transform = `translate(-50%, -${Number(items[index]) * 10}%)`
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.count-box {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  list-style: none;
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  /*文字禁止编辑*/
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+  overflow: hidden;
+  .label {
+    padding-right: 8px;
+    line-height: 32px;
+    font-family: Helvetica, Microsoft YaHei;
+    font-weight: bold;
+    color: #101116;
+    writing-mode: horizontal-tb !important;
+    text-orientation: none !important;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+  }
+  .number-item {
+    width: 32px;
+    height: 32px;
+    list-style: none;
+    margin-right: 4px;
+    background: #410425;
+    border-radius: 4px;
+    border: 1px solid #d2d6df;
+    font-family: Helvetica, Microsoft YaHei;
+    font-weight: bold;
+    color: #ffffff;
+    & > .number-box {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > .number-list {
+        font-style: normal;
+        position: absolute;
+        top: 8px;
+        left: 50%;
+        transform: translate(-50%, 0%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,283 @@
+<template>
+  <div class="station-view">
+    <div class="station-header">
+      <el-form :model="formData" inline class="station-form">
+        <el-form-item :prop="formData.startDate" style="width: 184px">
+          <el-date-picker
+            v-model="formData.startDate"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD hh:mm:ss"
+            size="default"
+            :clearable="false"
+          />
+        </el-form-item>
+        <el-form-item :prop="formData.endDate" style="width: 184px">
+          <el-date-picker
+            v-model="formData.endDate"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD hh:mm:ss"
+            size="default"
+            :clearable="false"
+          />
+        </el-form-item>
+        <el-form-item :prop="formData.flightStatus" style="width: 104px">
+          <el-select
+            v-model="formData.flightStatus"
+            size="default"
+            placeholder="全部航班"
+          >
+            <el-option
+              v-for="option in flightStatusOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :prop="formData.flightWarning" style="width: 104px">
+          <el-select
+            v-model="formData.flightWarning"
+            size="default"
+            placeholder="全部航班"
+          >
+            <el-option
+              v-for="option in flightWarningOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+          /></el-select>
+        </el-form-item>
+      </el-form>
+      <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 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'
+import { parseTime } from '@/utils/validate'
+
+interface selectOptions {
+  label: string
+  value: string | number
+}
+
+const formData = reactive({
+  startDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  endDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  flightStatus: '',
+  flightWarning: '',
+})
+const flightStatusOptions = ref<selectOptions[]>([])
+const flightWarningOptions = ref<selectOptions[]>([])
+
+const goodsCountFlag = ref(true)
+const UTCFlag = ref(true)
+
+const { tableColumns, tableData } = useTableData()
+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>
+.station-view {
+  width: 100%;
+  height: 100%;
+  .station-header {
+    display: flex;
+    margin-bottom: 16px;
+    :deep .station-form {
+      margin-right: 43px;
+      .el-form-item {
+        margin: 0;
+        &:not(:last-of-type) {
+          margin-right: 8px;
+        }
+      }
+    }
+    .station-count {
+      margin-right: 24px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .station-settings {
+      display: flex;
+      align-items: center;
+      .station-switch {
+        margin-right: 28px;
+        &:nth-child(2) {
+          margin-right: 24px;
+        }
+      }
+    }
+  }
+  .station-table {
+    width: 100%;
+    height: calc(100% - 32px - 16px);
+    :deep .el-table-v2 {
+      .el-table-v2__header-cell,
+      .el-table-v2__row-cell {
+        &:not(:last-child) {
+          border-right: 1px solid #dfe3ea;
+        }
+      }
+      .el-table-v2__header-cell-text,
+      .el-table-v2__cell-text {
+        font-size: 14px;
+        font-family: Helvetica, Microsoft YaHei;
+        font-weight: bold;
+        color: #101116;
+        white-space: pre-line;
+      }
+      .el-table-v2__header {
+        .el-table-v2__header-cell {
+          &.bg-yellow {
+            background-color: #f9f3cb;
+          }
+          &.bg-green {
+            background-color: #ace5d3;
+          }
+          &.bg-cyan {
+            background-color: #b7d5e8;
+          }
+        }
+      }
+      .el-table-v2__body {
+        .el-table-v2__row {
+          &.bg-gray {
+            background-color: #d2d6df;
+          }
+          &.underline-red {
+            border-bottom: 2px solid #e83f82;
+          }
+          .el-table-v2__row-cell {
+            position: relative;
+            .el-table-v2__cell-text {
+              .cell-text {
+                position: relative;
+                z-index: 1;
+              }
+              .cell-background {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 0;
+                background-color: transparent;
+              }
+              &.cell-warning .cell-background {
+                background-color: #f6cda5;
+              }
+              &.cell-error .cell-background {
+                background-color: #f38080;
+              }
+            }
+          }
+        }
+      }
+      .table-footer {
+        padding-left: 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        background-color: #dfe3ea;
+        &-count {
+          font-size: 16px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+          color: #303133;
+          &:not(:last-of-type) {
+            margin-right: 48px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="station-switch">
+    <el-switch
+      v-model="props.flag"
+      size="default"
+      style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
+      @change="
+        val => {
+          emit('update:flag', val)
+        }
+      "
+    />
+    <span class="switch-label">{{ props.label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  flag: {
+    type: Boolean,
+    required: true,
+  },
+  label: {
+    type: String,
+  },
+})
+const emit = defineEmits(['update:flag'])
+</script>
+
+<style scoped lang="scss">
+.station-switch {
+  height: 32px;
+  .switch-label {
+    padding-left: 4px;
+    line-height: 32px;
+  }
+}
+</style>

src/views/baggageManagement/departure/index.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="airport-view">
-    <ColumnSet :table-columns="tableColumns" @checked-submit="columnChecked" />
-  </div>
-</template>
-<script lang="ts" setup>
-import ColumnSet from '../components/ColumnSet/index.vue'
-import useTableColumns from '../hooks/useTableColumns'
-import useTableData from '../hooks/useTableData'
-
-const { tableColumns, columnChecked, filteredColumns } = useTableColumns()
-
-const { tableData } = useTableData()
-</script>
-<style lang="scss" scoped></style>

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

@@ -1,11 +1,7 @@
 <template>
-  <div></div>
+  <StationView />
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
-});
+<script lang="ts" setup>
+import StationView from '../../components/StationView/index.vue'
 </script>
 <style lang="scss" scoped></style>

src/views/baggageManagement/hooks/useTableColumnSet.ts

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

src/views/baggageManagement/hooks/useTableColumns.ts

@@ -1,31 +0,0 @@
-import { tableColumn } from '../components/ColumnSet/index.vue'
-export default function useTableColumns() {
-  const tableColumns = ref<tableColumn[]>([])
-  let filterColumnProps: string[] = []
-  const filteredColumns = computed(() =>
-    tableColumns.value.filter(({ columnProp }) =>
-      filterColumnProps.includes(columnProp)
-    )
-  )
-  const getTableColumns = () => {
-    tableColumns.value = [
-      {
-        columnName: '航班号',
-        columnProp: 'flightNO',
-        groupTitle: '航班相关',
-      },
-    ]
-  }
-  const columnChecked = checkedColumnProps => {
-    filterColumnProps = checkedColumnProps
-  }
-  onMounted(() => {
-    getTableColumns()
-  })
-  
-  return {
-    tableColumns,
-    columnChecked,
-    filteredColumns
-  }
-}

src/views/baggageManagement/hooks/useTableData.ts

@@ -1,12 +1,77 @@
+import type { KeyType } from '../components/ColumnSet/index.vue'
+import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+
+type tableColumnsGroups = {
+  groupTitle: string
+  children: {
+    key: KeyType
+    title: string
+    width?: number
+    headerClass: string
+  }[]
+}[]
+
+enum Alignment {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+}
+
+const gourpNumber = 3
+const groupColumnNumber = 6
+const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']
+
 export default function useTableData() {
-  const tableData = ref<any[]>([])
+  const tableColumns = ref<tableColumnInGroup[]>([])
+  const tableData = ref<{}[]>([])
   const getTableData = () => {
-    tableData.value = []
+    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] || '',
+          })
+        ),
+      })
+    )
+    tableColumns.value = groups.reduce(
+      (columns: tableColumnInGroup[], group) => {
+        columns.push(
+          ...group.children.map(({ key, title, width, headerClass }) => ({
+            key,
+            dataKey: key,
+            title,
+            width: width ?? 80,
+            headerClass,
+            align: Alignment.CENTER,
+            groupTitle: group.groupTitle,
+          }))
+        )
+        return columns
+      },
+      []
+    )
+
+    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
+      }, {})
+    )
   }
   onMounted(() => {
     getTableData()
   })
+
   return {
-    tableData
+    tableColumns,
+    tableData,
   }
 }

src/views/baggageManagement/hooks/useTableStyle.ts

@@ -0,0 +1,65 @@
+import type { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import type { CSSProperties } from 'vue'
+
+type RowClassGetter = (param: {
+  columns: tableColumnInGroup[]
+  rowData: any
+  rowIndex: number
+}) => string
+
+export type CellSlotProps = {
+  column: tableColumnInGroup
+  columns: tableColumnInGroup[]
+  columnIndex: number
+  depth: number
+  style: CSSProperties
+  rowData: any
+  rowIndex: number
+  isScrolling: boolean
+  expandIconProps?:
+    | {
+        rowData: any
+        rowIndex: number
+        onExpand: (expand: boolean) => void
+      }
+    | undefined
+}
+
+type CellClassGetter = (param: CellSlotProps) => string
+
+const defaultCellClass = 'el-table-v2__cell-text'
+
+export default function useTableStyle() {
+  const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
+    const classes: string[] = []
+    if (rowIndex <= 2) {
+      classes.push('bg-gray')
+    }
+    if (rowIndex === 2) {
+      classes.push('underline-red')
+    }
+    return classes.join(' ')
+  }
+
+  const cellClass: CellClassGetter = ({
+    column,
+    columns,
+    columnIndex,
+    rowData,
+    rowIndex,
+  }) => {
+    const classes: string[] = [defaultCellClass]
+    if (rowData[column.dataKey] === '4行-2组-6列') {
+      classes.push('cell-warning')
+    }
+    if (rowData[column.dataKey] === '5行-3组-3列') {
+      classes.push('cell-error')
+    }
+    return classes.join(' ')
+  }
+
+  return {
+    rowClass,
+    cellClass,
+  }
+}