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>{{ item.label }}：</div>
                <el-tooltip
                  v-if="computedFlightInfo(item) && item.showOverflowTooltip"
                  :content="computedFlightInfo(item)"
                  effect="light"
                >
                  <div>{{ computedFlightInfo(item) }}</div>
                </el-tooltip>
                <div v-else>{{ computedFlightInfo(item) }}</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"
          @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"
          :icon="Download"
          color="#ac014d"
          @click="downloadHandler"
        />
        <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="filteredWaybillColumns"
          :row-class-name="flightWaybillRowClass"
          :cell-class-name="flightWaybillCellClass"
          :column-props="{ formatter: waybillTableFormatter }"
          @cell-click="flightWaybillCellClickHandler"
        />
      </div>
    </div>
    <ContainerWaybillDialog
      v-model:flag="dialogFlag"
      :data-content="containerWaybillDataContent"
      :is-departure="isDeparture"
    />
  </div>
</template>
<script setup lang="ts">
import Search from '@/components/search/index.vue'
import { CaretRight, Download, Refresh } 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'

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

// 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()
const {
  flightNO,
  flightDate,
  // departureAirport,
  // landingAirport
} = route.query
// if (!flightNO || !flightDate) {
//   router.push('/')
// }
const dataContent = [
  flightDate,
  flightNO,
  // departureAirport,
  // landingAirport,
] as string[]

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

const airLine = toRef(flightInfo, 'flightinfo')

const {
  tableColumns: containerTableColumns,
  tableData: containerTableData,
} = useTable(`${props.name}Container`, dataContent)
const waybillTableFormatter = (row, column, cellValue, index) => {
  if (column.property.includes('Time') && typeof cellValue === 'string') {
    return cellValue.replace('T', '\n')
  }
  return String(cellValue ?? '')
}

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

const UTCFlag = ref(true)

// const refreshHandler = () => {
//   ElMessage.info('开发中')
// }

const {
  filteredColumns: filteredWaybillColumns,
  columnChecked,
} = useTableColumnSet(waybillTableColumns)

const waybillTableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
const { exportToExcel } = useTableExport()
//点击下载按钮
const downloadHandler = () => {
  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 {
        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;
            .el-tooltip__trigger {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .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>