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

<template>
  <div class="flight-view">
    <div class="flight-view-top">
      <div class="flight-info-wrapper">
        <div class="air-line">{{ airLine }}</div>
        <div class="flight-info-box-wrapper">
          <template v-for="(group, index) in flightInfoItems" :key="index">
            <div class="info-box">
              <div v-for="(item, i) in group" :key="i" class="info-item">
                <div class="info-item-label">{{ item.label }}：</div>
                <div class="info-item-content">
                  <OverflowTooltip
                    :content="computedFlightInfo(item)"
                    effect="light"
                  />
                </div>
              </div>
            </div>
            <div v-if="index < flightInfoItems.length - 1" class="icon-box">
              <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
            </div>
          </template>
        </div>
      </div>
      <div v-if="name.includes('Departure')" class="container-list">
        <SimpleTable
          :data="containerTableData"
          :columns="containerTableColumns"
          scrollbar-always-on
          :row-class-name="flightContainerRowClass"
          :cell-class-name="flightContainerCellClass"
          :column-props="{ formatter: tableFormatter }"
          sequence
          @cell-click="flightContainerCellClickHandler"
        />
      </div>
    </div>
    <div class="waybill-list-wrapper">
      <div class="waybill-list-header">
        <!-- <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" /> -->
        <!-- <el-button
          class="button-sqaure"
          :icon="Refresh"
          color="#ac014d"
          @click="refreshHandler"
        /> -->
        <el-button class="button-sqaure" color="#ac014d" @click="exportHandler">
          <i class="icon-export" />
        </el-button>
        <ColumnSet
          class="button-sqaure"
          :table-columns="waybillTableColumns"
          @checked-submit="columnChecked"
        />
        <Search @search="search" @clear="clear" />
      </div>
      <div class="waybill-list">
        <SimpleTable
          ref="waybillTableRef"
          :data="waybillTableData"
          :columns="waybillTableColumns"
          :row-class-name="flightWaybillRowClass"
          :cell-class-name="flightWaybillCellClass"
          :column-props="{ formatter: tableFormatter }"
          sequence
          @cell-click="flightWaybillCellClickHandler"
        />
      </div>
    </div>
    <ContainerWaybillDialog
      v-model:flag="dialogFlag"
      :name="name"
      :data-content="containerWaybillDataContent"
    />
  </div>
</template>
<script setup lang="ts">
import OverflowTooltip from '@/components/OverflowTooltip/index.vue'
import Search from '@/components/search/index.vue'
import { CaretRight } from '@element-plus/icons-vue'
import ContainerWaybillDialog from './ContainerWaybillDialog.vue'
import SimpleTable from '@/components/SimpleTable/index.vue'
// import CommonSwitch from '../../components/CommonSwitch/index.vue'
import ColumnSet from '@/components/ColumnSet/index.vue'
import { useTable } from '../../hooks/useTable'
import { useTableColumnSet } from '@/hooks/useTableColumnSet'
import { useTableExport } from '../../hooks/useTableExport'
import { useTableStyle } from '../../hooks/useTableStyle'
import { useTableCellClick } from '../../hooks/useTableCellClick'
import { useFlightInfo } from './useFlightInfo'
import { useLoop } from '@/hooks/useLoop'
import { CommonTableFormatter, CommonValue } from '~/common'
import { datetimeToTime } from '@/utils/validate'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const route = useRoute()
const {
  flightNO,
  flightDate,
  // departureAirport,
  // landingAirport
} = route.query
// if (!flightNO || !flightDate) {
//   router.push('/')
// }
const dataContent = [
  flightDate,
  flightNO,
  // departureAirport,
  // landingAirport,
] as string[]

const {
  flightInfoItems,
  flightInfo,
  computedFlightInfo,
  getFlightInfo,
} = useFlightInfo(props.name, dataContent)

const airLine = toRef(flightInfo, 'flightinfo')

const {
  tableColumns: containerTableColumns,
  tableData: containerTableData,
  getTableData: getContainerTableData,
} = useTable(`${props.name}Container`, Array(3).fill(dataContent).flat())

const {
  tableColumns: waybillTableColumns,
  tableData: waybillTableData,
  getTableData: getWaybillTableData,
} = useTable(`${props.name}Waybill`, dataContent)

const tableFormatter: CommonTableFormatter = (
  row,
  column,
  cellValue,
  index
) => {
  const value = String(cellValue ?? '').trim()
  if (column.property === 'execResult') {
    // const execResult = Number(cellValue)
    // if (Number.isNaN(execResult)) {
    //   return cellValue
    // }
    // return execResult ? '通过' : '未通过'
    return '通过'
  }
  if (column.property.includes('Time')) {
    return datetimeToTime(value, flightDate as CommonValue)
  }
  if (
    [
      'tally',
      'pull',
      'wait',
      'stowage',
      'depot',
      'resure',
      'planeDown',
      'loadPlane',
      'pullSure',
      'dlv',
      'jxjj',
      'hzjj',
      'unload',
      'anjian',
    ].includes(column.property)
  ) {
    const splitValue = value.split('_')
    if (splitValue.length === 2) {
      const [count, datetime] = splitValue
      return `${count ? `${count}\n` : ''}${datetimeToTime(
        datetime,
        flightDate as CommonValue
      )}`
    } else {
      return datetimeToTime(value, flightDate as CommonValue)
    }
  }
  if (column.property === 'nodeCode') {
    if (
      props.name.includes('International') &&
      props.name.includes('Departure') &&
      value === 'LS_CARGO'
    ) {
      return '实配'
    }
    return NODE_CODE[value] ?? value
  }
  if (column.property === 'typeCode' && props.name.includes('International')) {
    return value || '拼货'
  }
  return value
}

useLoop([getFlightInfo, getContainerTableData, getWaybillTableData], 'flight')

// const UTCFlag = ref(true)

const { columnChecked } = useTableColumnSet(waybillTableColumns)

const waybillTableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
const { exportToExcel } = useTableExport()
//点击下载按钮
const exportHandler = () => {
  const table = waybillTableRef.value!.table!
  exportToExcel({ table })
}

//清空搜索
const clear = () => {}

//点击搜索按钮
const search = (text: string) => {
  console.log(text)
}

const {
  rowClass: flightContainerRowClass,
  cellClass: flightContainerCellClass,
} = useTableStyle(`${props.name}Container`)
const {
  rowClass: flightWaybillRowClass,
  cellClass: flightWaybillCellClass,
} = useTableStyle(`${props.name}Waybill`)

const {
  cellClickHandler: flightContainerCellClickHandler,
  dialogFlag,
  containerNO,
} = useTableCellClick(`${props.name}Container`)
const containerWaybillDataContent = computed(
  () => [flightDate, flightNO, unref(containerNO)] as string[]
)
const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
  `${props.name}Waybill`
)
</script>
<style lang="scss" scoped>
.flight-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .flight-view-top {
    width: 100%;
    height: 345px;
    display: flex;
    .flight-info-wrapper {
      min-width: 1040px;
      flex: 1;
      height: 100%;
      background: #410425;
      box-sizing: border-box;
      padding: 18px 32px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .air-line {
        height: 22px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        width: 100%;
        margin-bottom: 16px;
      }
      .flight-info-box-wrapper {
        width: 100%;
        max-width: 976px;
        flex: 1;
        display: flex;
        justify-content: flex-start;
        justify-items: center;
        .info-box {
          width: calc(33.3% - 10px);
          background: #561638;
          padding: 10px 15px;
          .info-item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            &-content {
              width: 0;
              flex: 1;
            }
          }
        }
        .icon-box {
          display: flex;
          flex-direction: column;
          width: 60px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .container-list {
      width: 0;
      flex: 1;
      height: 100%;
      margin-left: 16px;
      .el-table :deep {
        .el-table__body .el-table__row {
          &.row-warning .el-table__cell {
            background-color: #f0c579;
          }
        }
      }
    }
  }
  .waybill-list-wrapper {
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    .waybill-list-header :deep {
      height: 72px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .button-sqaure {
        margin-left: 24px;
        width: 30px;
        height: 30px;
        border-radius: 4px;
        font-size: 16px;
        &:last-of-type {
          margin-right: 48px;
        }
      }
    }
    .waybill-list {
      height: 0;
      flex: 1;
      .el-table :deep {
        .el-table__body .el-table__row {
          &.row-warning .el-table__cell {
            background-color: #f0c579;
          }
          &.row-alarm .el-table__cell {
            background-color: #f38080;
          }
        }
      }
    }
  }
}
</style>