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">
          <div class="info-box">
            <div>起飞机场简称：{{ flightInfo.C0 }}</div>
            <div>日期：{{ flightInfo.C1 }}</div>
            <div>时间：{{ flightInfo.C2 }}</div>
            <div>停机位：{{ flightInfo.C3 }}</div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="info-box">
            <div>特货信息/货物数：{{ flightInfo.C4 }}</div>
            <div>托运运单数/货物数：{{ flightInfo.C5 }}</div>
            <div>中转进运单/货物数：{{ flightInfo.C6 }}</div>
            <div>已配载集装器：{{ flightInfo.C7 }}</div>
            <div>货站已交接集装器：{{ flightInfo.C7 }}</div>
            <div>已装载集装器/运单/货物数：{{ flightInfo.C7 }}</div>
            <div>拉下集装器/运单/货物数：{{ flightInfo.C8 }}</div>
            <div>集装器数量：{{ flightInfo.C9 }}</div>
          </div>
          <div class="iconBox">
            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
          </div>
          <div class="info-box">
            <div>降落机场简称：{{ flightInfo.C10 }}</div>
            <div>日期：{{ flightInfo.C11 }}</div>
            <div>时间：{{ flightInfo.C12 }}</div>
          </div>
        </div>
      </div>
      <div v-if="isDeparture" 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 { CommonData } from '~/common'
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 { Query } from '@/api/webApi'
import { ElMessage } from 'element-plus'

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 = [
  flightNO,
  flightDate,
  departureAirport,
  landingAirport,
] as string[]

const airLine = ref('SZX - CA4120 - NKG')
const flightInfo = reactive<CommonData>({
  C0: '深圳机场',
  C1: '2021-12-24',
  C2: '19 : 30 : 25',
  C3: '012',
  C4: '0',
  C5: '0',
  C6: '0',
  C7: '0',
  C8: '0',
  C9: '0',
  C10: '南京机场',
  C11: '2021-12-24',
  C12: '22 : 25 : 25',
})
const getFlightInfo = async () => {
  try {
    const {
      code,
      returnData: { listValues },
      message,
    } = await Query({
      id: DATACONTENT_ID.flightInfo,
      dataContent,
    })
    if (Number(code) !== 0) {
      throw new Error(message ?? '失败')
    }
    if (!listValues.length) {
      ElMessage.error('未查询到航班信息')
      return
    }
    Object.assign(flightInfo, listValues[0])
  } catch (error) {
    console.error(error)
  }
}
// onMounted(() => {
//   getFlightInfo()
// })

const isDeparture = computed(() =>
  ['DepartureFlight', 'InternationalDepartureFlight'].includes(props.name)
)
const {
  tableColumns: containerTableColumns,
  tableData: containerTableData,
} = useTable('flightContainer', dataContent)
const {
  tableColumns: waybillTableColumns,
  tableData: waybillTableData,
} = useTable('flightWaybill', dataContent)

const UTCFlag = ref(true)

const refreshHandler = () => {}

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

//点击刷新按钮
const refresh = data => {
  console.log(data)
}

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('flightContainer')
const {
  rowClass: flightWaybillRowClass,
  cellClass: flightWaybillCellClass,
} = useTableStyle('flightWaybill')

const { cellClickHandler: flightContainerCellClickHandler } = useTableCellClick(
  'flightContainer'
)
const { cellClickHandler: flightWaybillCellClickHandler } = useTableCellClick(
  'flightWaybill'
)
</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: 0 1 1040px;
      height: 100%;
      background: #410425;
      box-sizing: border-box;
      padding: 18px 32px;
      overflow: hidden;
      .air-line {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        width: 100%;
        margin-bottom: 16px;
      }
      .flight-info-box-wrapper {
        width: 100%;
        max-width: 976px;
        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;
        }
        .iconBox {
          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>