CABaggageData2.0/src/views/baggageManagement/components/flight/index.vue

<!--
 * @Author: your name
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-05-07 16:12:48
 * @LastEditors: your name
 * @Description: 航班视图
-->
<template>
  <div class="flight-view">
    <div class="flight-wrap">
      <div class="part1">
        <div class="title">
          {{ flightInfo.PlanDepartureApt }} - {{ flightInfo.FlightNO }} -
          {{ flightInfo.PlanLandingApt }}
        </div>
        <div class="part1_info">
          <div class="part1_info_box">
            <el-row>
              <el-col :span="12">
                <span>起飞机场简称：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.departureName }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>起飞机场三字码：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.PlanDepartureApt }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>起飞机场航站楼：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.DepartureBuild }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>
                  日期：
                  {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[0] }}
                </span>
              </el-col>
              <el-col :span="12">
                <span>
                  时间：
                  {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[1] }}
                </span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>登机口：{{ flightInfo.BordingGate }}</span>
              </el-col>
              <el-col :span="12">
                <span>停机位：{{ flightInfo.StandForDepartrue }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="part1_info_box">
            <el-row>
              <el-col :span="12">
                <span>航班号：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.FlightNO }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>航班状态：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.FlightStatus === null ? '正常' : flightInfo.FlightStatus }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>托运旅客数：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.count1 }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>终点行李数：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.count2 }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>中转进行李数：</span><span>{{ flightInfo.count4 }}</span>
              </el-col>
              <el-col :span="12">
                <span>中转出行李数：</span><span>{{ flightInfo.count3 }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="part1_info_box">
            <el-row>
              <el-col :span="12">
                <span>降落机场简称：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.landingName }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>降落机场三字码：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.PlanLandingApt }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>降落机场航站楼：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.LandingBuild }}</span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>
                  日期：
                  {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[0] }}
                </span>
              </el-col>
              <el-col :span="12">
                <span>
                  时间：
                  {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[1] }}
                </span>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <span>提取转盘：{{ flightInfo.Carousel }}</span>
              </el-col>
              <el-col :span="12">
                <span>停机位：{{ flightInfo.StandForLanding }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="part2">
        <el-table
          ref="containerTable"
          :data="containerTableData"
          border
          style="width: 100%"
          height="344px"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
        >
          <el-table-column
            v-for="item in containerTableColumn"
            :key="item.id"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div
        class="part3"
        style="padding-right: 4px;"
      >
        <div class="title">中转进</div>
        <el-table
          ref="transferInBaggageTable"
          :data="transferInBaggageTableData"
          border
          style="width: 100%"
          height="162"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
          @row-click="transferBaggageInTableClickHandler"
        >
          <el-table-column
            v-for="item in transferInTableColumn"
            :key="item.id"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div
        class="part3"
        style="padding-left: 4px;"
      >
        <div class="title">中转出</div>
        <el-table
          ref="transferOutBaggageTable"
          :data="transferOutBaggageTableData"
          border
          style="width: 100%"
          height="162"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
          @row-click="transferBaggageOutTableClickHandler"
        >
          <el-table-column
            v-for="item in transferOutTableColumn"
            :key="item.id"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div class="part4">
        <div class="title">
          <!-- <el-cascader
            placeholder="全部行李"
            :options="options"
            :props="props"
            collapse-tags
            size="mini"
            clearable
          /> -->
          <!-- <div class="search">
            <el-input
              v-model="keyWords"
              placeholder="请输入需要搜索姓名或行李编号"
              size="mini"
              style="width: 280px"
            />
            <el-button
              class="searchBtn"
              type="primary"
              size="mini"
            >搜索</el-button>
          </div> -->
          <el-switch
            v-model="openUTC"
            active-text="开启UTC"
          />
          <el-button
            class="btn-square"
            type="primary"
            icon="el-icon-download"
            size="mini"
          />
          <el-button
            class="btn-square setBtn"
            type="primary"
            icon="el-icon-s-tools"
            size="mini"
            @click="show"
          />
        </div>
        <el-table
          ref="flightBaggageTable"
          :data="flightBaggageTableData"
          border
          style="width: 100%"
          height="320"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryRow(flightBaggageTableData.length)"
          :header-cell-style="{ color: '#101116' }"
          @row-click="flightBaggageTableClickHandler"
        >
          <el-table-column
            v-for="item in tableColsCopy"
            :key="item.index"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :filters="flightBaggageTableFilters[item.prop]"
            :filter-method="flightBaggageTableFilters[item.prop] && filterHandler"
            filter-placement="top"
          />
        </el-table>
      </div>
    </div>
    <!--列设置-->
    <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'name',
              children: 'children'
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { queryMap, myQuery } from '@/api/dataIntegration'
import tableColsMixin from '../../mixins/tableCols'

// const arrivalBaggageTableColumn = [
//   { name: '序号', prop: 'index', align: 'center' },
//   { name: '旅客姓名', prop: 'name', align: 'center', sortable: 'custom' },
//   { name: '行李牌号', prop: 'bagNo', align: 'center' },
//   {
//     name: '特殊行李类型',
//     prop: 'specialType',
//     align: 'center',
//     sortable: 'custom'
//   },
//   {
//     name: '容器编号',
//     prop: 'containerNo',
//     align: 'center',
//     sortable: 'custom'
//   },
//   { name: '装载序号', prop: 'loadSequenceIndex', align: 'center' },
//   { name: '卸载', prop: 'uninstall', align: 'center' },
//   { name: '到达', prop: 'arrival', align: 'center' },
//   { name: '提取', prop: 'extract', align: 'center' },
//   { name: '旅客仓位', prop: 'positionNo', align: 'center' },
//   { name: '中转标志', prop: 'transitStatus', align: 'center' },
//   { name: '卷宗号', prop: 'fileNumber', align: 'center' }
// ]
const departureBaggageTableColumn = [
  // { name: '序号', prop: 'index', align: 'center' },
  { name: '旅客姓名', prop: 'PassengerNameUpcase', align: 'center', sortable: 'custom' },
  { name: '行李牌号', prop: 'BagSN', align: 'center' },
  {
    name: '特殊行李类型',
    prop: 'SpecialType',
    align: 'center',
    sortable: 'custom'
  },
  {
    name: '容器编号',
    prop: 'U_Device_ID',
    align: 'center',
    sortable: 'custom'
  },
  { name: '装载序号', prop: 'LoadSN', align: 'center' },
  { name: '值机', prop: 'checkIn', align: 'center' },
  { name: '状态', prop: 'status', align: 'center' },
  { name: '安检', prop: 'security', align: 'center' },
  { name: '分拣', prop: 'sorting', align: 'center' },
  { name: '装车', prop: 'loading', align: 'center' },
  { name: '装机', prop: 'installed', align: 'center' },
  { name: '中转标志', prop: 'transitFlag', align: 'center' },
  { name: '卷宗号', prop: 'fileNumber', align: 'center' }
]
export default {
  name: 'FlightView',
  components: {
    Dialog
  },
  mixins: [tableColsMixin],
  data() {
    return {
      queryData: {},
      flightInfo: {},
      keyWords: '',
      openUTC: true,
      props: { multiple: true },
      // options: [
      //   { value: 0, label: 'VIP行李' },
      //   { value: 0, label: 'VIP行李' }
      // ],
      containerTableColumn: [
        { name: '容器编号', prop: 'containerNumber', align: 'center' },
        { name: '类型', prop: 'style', align: 'center' },
        { name: '行李数', prop: 'numberOfBags', align: 'center' }
      ],
      transferInTableColumn: [
        { name: '航班号', prop: 'PreFlightNO', align: 'center' },
        { name: '日期', prop: 'PreFlightDate', align: 'center' },
        { name: '时间', prop: 'flightTime', align: 'center' },
        { name: '始发站', prop: 'PlanDepartureApt', align: 'center' },
        { name: '航班状态', prop: 'FlightStatus', align: 'center' },
        { name: '中转数', prop: 'totalNumber', align: 'center' }
      ],
      transferOutTableColumn: [
        { name: '航班号', prop: 'TransferFlightNO', align: 'center' },
        { name: '日期', prop: 'TransferFlightDate', align: 'center' },
        { name: '时间', prop: 'flightTime', align: 'center' },
        { name: '始发站', prop: 'PlanDepartureApt', align: 'center' },
        { name: '目的站', prop: 'PlanLandingApt', align: 'center' },
        { name: '中转数', prop: 'transferNumber', align: 'center' }
      ],
      // tableCols:
      //   this.$route.matched[0].path === '/arrival' || this.$route.matched[1].path === '/transfer/arrival'
      //     ? arrivalBaggageTableColumn
      //     : departureBaggageTableColumn,
      tableCols: departureBaggageTableColumn,
      containerTableData: [], // 容器统计
      transferInBaggageTableData: [], // 中转进
      transferOutBaggageTableData: [], // 中转出
      flightBaggageTableData: [], // 行李列表
      flightBaggageTableFilters: {
        PassengerNameUpcase: [],
        BagSN: [],
        SpecialType: [],
        U_Device_ID: []
      }
    }
  },
  created() {
    this.queryData = this._.cloneDeep(this.$route.query)
    // console.log(this.queryData)
    const queryData = [this.queryData.FlightNO, this.queryData.FlightDate]
    this.queryAll(queryData)
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['containerTable'].doLayout()
      this.$refs['transferInBaggageTable'].doLayout()
      this.$refs['transferOutBaggageTable'].doLayout()
      this.$refs['flightBaggageTable'].doLayout()
    })
  },
  methods: {
    // 合计行
    summaryMethod({ columns, data }) {
      const sums = []
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
          } else if (
            // 需要计算的列
            ['numberOfBags', 'totalNumber', 'transferNumber'].includes(column.property)
          ) {
            const values = data.map(item => Number(item[column.property]))
            if (values.some(value => !isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return Number(prev) + Number(curr)
                } else {
                  return Number(prev)
                }
              }, 0)
            } else {
              sums[index] = 0
            }
          } else {
            // 过滤某些字段不参与计算
            sums[index] = '-'
          }
        })
      }
      return sums
    },
    // 统计行数
    summaryRow(num) {
      return function () {
        return ['合计', `共${num}件`]
      }
    },
    // 表格添加过滤条件
    setTableFilters(tableData, filters) {
      const tempFilters = {}
      const tempArrays = {}
      Object.keys(filters).forEach(key => {
        tempFilters[key] = []
        tempArrays[key] = []
      })
      tableData.forEach(item => {
        Object.keys(tempFilters).forEach(key => {
          if ((item[key] ?? '') !== '' && !tempArrays[key].includes(item[key])) {
            tempArrays[key].push(item[key])
            tempFilters[key].push({
              text: item[key],
              value: item[key]
            })
          }
        })
      })
      Object.keys(tempFilters).forEach(key => {
        filters[key] = this._.orderBy(tempFilters[key], o => o.value)
      })
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    // async getBaggageSearchIOAll(data) {
    //   const getNodeInfo = node => `${node.locationPointDescribe ? node.locationPointDescribe : node.locationPoint}\n
    //         ${node.realTime}`
    //   try {
    //     const result = await baggageSearchIOAll(data)
    //     this.flightBaggageTableData = result.returnData.map(element => {
    //       element['nodeInfos'].forEach(node => {
    //         switch (node.nodeCode) {
    //           case 'CHECKIN':
    //             element['checkIn'] = getNodeInfo(node)
    //             break
    //           case 'SECURITY':
    //             element['security'] = getNodeInfo(node)
    //             break
    //           case 'SORT':
    //             element['sorting'] = getNodeInfo(node)
    //             break
    //           case 'LOAD':
    //             element['loading'] = getNodeInfo(node)
    //             break
    //           case 'INF':
    //             element['installed'] = getNodeInfo(node)
    //             break
    //           case 'UNLOAD':
    //             element['security'] = getNodeInfo(node)
    //             element['arrival'] = getNodeInfo(node)
    //             break
    //           case 'TiQu':
    //             element['extract'] = getNodeInfo(node)
    //             break
    //           default:
    //             break
    //         }
    //       })
    //       return element
    //     })
    //     // result.returnData.forEach(element => {
    //     //   element['checkIn'] = element.checkInLocation + '\n' + element.checkInTime
    //     //   element['security'] = element.securityStatus + '\n' + element.securityTime
    //     //   element['sorting'] = element.sortingNo + '\n' + element.sortingTime
    //     //   element['loading'] = element.loadingNumber + '\n' + element.loadingTime
    //     //   element['installed'] = element.installedNumber + '\n' + element.installedTime
    //     //   element['uninstall'] = element.uninstall + '\n' + element.uninstallTime
    //     //   element['arrival'] = element.reach + '\n' + element.timeOfArrival
    //     //   element['extract'] = element.extract + '\n' + element.extractionTime
    //     // })
    //     // this.flightBaggageTableData = this._.cloneDeep(result.returnData)
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },
    transferBaggageInTableClickHandler(row) {
      this.$router.push({
        path: '/advance',
        query: {
          FlightNO: row.PreFlightNO,
          FlightDate: row.PreFlightDate
        }
      })
    },
    transferBaggageOutTableClickHandler(row) {
      this.$router.push({
        path: '/advance',
        query: {
          FlightNO: row.TransferFlightNO,
          FlightDate: row.TransferFlightDate
        }
      })
    },
    flightBaggageTableClickHandler(row) {
      this.$router.push({
        path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
        query: {
          BagSN: row.BagSN,
          FlightNO: this.queryData.FlightNO,
          FlightDate: this.queryData.FlightDate
        }
      })
    },
    queryflightInfo(dataContent) {
      return myQuery(queryMap.flightInfo, ...dataContent)
    },
    queryContainer(dataContent) {
      return myQuery(queryMap.container, ...dataContent)
    },
    queryTrasferOutBaggage(dataContent) {
      return myQuery(queryMap.transferOutBaggage, ...dataContent)
    },
    queryTrasferInBaggage(dataContent) {
      return myQuery(queryMap.transferInBaggage, ...dataContent)
    },
    queryBaggageByFlightNO(dataContent) {
      return myQuery(queryMap.baggageByFlightNO, ...dataContent)
    },
    async queryAll(dataContent) {
      try {
        const [
          flightInfo,
          containerTableDataData,
          transferOutBaggageTableData,
          transferInBaggageTableData,
          flightBaggageTableData
        ] = await Promise.all([
          this.queryflightInfo(dataContent),
          this.queryContainer(dataContent),
          this.queryTrasferOutBaggage(dataContent),
          this.queryTrasferInBaggage(dataContent),
          this.queryBaggageByFlightNO(dataContent)
        ])
        flightInfo.length && (this.flightInfo = flightInfo[0])
        this.containerTableData = containerTableDataData
        this.transferOutBaggageTableData = transferOutBaggageTableData.map(item => {
          item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
          return item
        })
        this.transferInBaggageTableData = transferInBaggageTableData.map(item => {
          item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
          return item
        })
        this.flightBaggageTableData = flightBaggageTableData.map((item, index) => {
          item['checkIn'] = `${item['checkIn'] ?? ''} ${item['checkInTime'] ? item['checkInTime'].split('T')[1] : ''}`
          item['status'] = item['Status'] === 'DEL' ? '删除' : ''
          item['security'] = `${item['DealInfo'] ?? ''} ${item['DealTime'] ? item['DealTime'].split('T')[1] : ''}`
          item['sorting'] = `${item['sortLocationMark'] ?? ''} ${
            item['sortDealTime'] ? item['sortDealTime'].split('T')[1] : ''
          }`
          item['loading'] = `${item['loadLocationMark'] ?? ''} ${
            item['loadDealTime'] ? item['loadDealTime'].split('T')[1] : ''
          }`
          item['installed'] = `${item['inflLocationMark'] ?? ''} ${
            item['inflLoadDealTime'] ? item['inflLoadDealTime'].split('T')[1] : ''
          }`
          item['transitFlag'] = item['preFlightNO'] === 1 ? '是' : '否'
          return item
        })

        this.setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
      } catch (error) {
        console.log('错误', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flight-view {
  padding: 16px 0 44px 8px;
  overflow: hidden;
  background: #dfe3ea;
  .flight-wrap {
    padding-right: 8px;
    width: 100%;
    height: calc(100vh - 140px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
    .part1 {
      width: 71.15%;
      height: 344px;
      background: #041741;
      padding: 24px;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
      }
      .part1_info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 32px;

        .part1_info_box {
          width: calc(33.333% - 48px);
          height: 244px;
          background: #2c416d;
          position: relative;
          padding: 24px;
          display: flex;
          flex-direction: column;
          align-content: space-around;
          .el-row {
            margin-bottom: 27px;
          }
          span {
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .part1_info_box::after {
          content: '';
          border-top: 15px solid transparent;
          border-left: 10px solid transparent;
          border-bottom: 10px solid #fff;
          position: absolute;
          right: -34px;
          transform: rotate(-45deg);
          top: 50%;
          margin-top: -15px;
        }
        .part1_info_box:last-child::after {
          content: '';
          border-top: 0;
          border-left: 0;
          border-bottom: 0;
        }
      }
    }
    .part2 {
      width: calc(100% - 71.15%);
      height: 344px;
      padding-left: 16px;
    }
    .part3 {
      width: 50%;
      height: 204px;
      margin-top: 8px;
      .title {
        background: #fafcff;
        font-size: 14px;
        font-weight: bold;
        color: #101116;
        padding: 12px 0;
        text-align: center;
      }
    }
    .part4 {
      width: 100%;
      height: 384px;
      .title {
        padding: 16px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .search {
          display: flex;
          flex-direction: row;
          margin-left: 20px;
          margin-right: 10px;
        }
        .el-button {
          margin-left: 10px;
          &.btn-square {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .setBtn {
          margin-right: 30px;
        }
      }
      ::v-deep .el-table .cell {
        white-space: pre-line;
      }
      .el-table {
        .el-table__body-wrapper {
          min-height: 178px;
        }
      }
    }
  }
}
::v-deep .dialog-check-cols .el-tree {
  &.has-children .el-tree-node > .el-tree-node__children {
    display: flex;
    flex-wrap: wrap;
  }
  &.no-children {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>