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">
                {{ item.label }}：{{ computedFlightInfo(item) }}
              </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"
          :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"
          @cell-click="flightWaybillCellClickHandler"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Search from '@/components/search/index.vue'
import { CaretRight, Download, Refresh } from '@element-plus/icons-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 { ElMessage } from 'element-plus'
import useFlightInfo from './useFlightInfo'

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 } = useFlightInfo(
  props.name,
  dataContent
)

const airLine = toRef(flightInfo, 'flightinfo')

const {
  tableColumns: containerTableColumns,
  tableData: containerTableData,
} = useTable(`${props.name}Container`, dataContent)
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 } = useTableCellClick(
  `${props.name}Container`
)
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 {
      flex: 1 1 1040px;
      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;
          box-sizing: border-box;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 30px;
        }
        .icon-box {
          display: flex;
          flex-direction: column;
          width: 60px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .container-list {
      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>