SMAirports/src/views/newFlightView/index.vue

<template>
  <div class="newFlightView">
    <div class="newFlightView-left">
      <div class="newFlightView-left-top">
        <div class="newFlightView-left-top-top">
          <div class="newFlightView-left-top-top-title flex-wrap">
            <div class="newFlightView-left-top-top-title-info">航班基本信息</div>
            <div class="newFlightView-left-top-top-title-no">{{ flightObj.flightNo }}</div>
          </div>
          <div class="newFlightView-left-top-top-status">
            <el-scrollbar style="height: 100%">
              <el-checkbox-group @change="checkChange" class="flex-wrap" v-model="checkList">
                <Item v-for="(item,index) in checkStates" :key="index" :total="checkStates" :index="index+1" :item="item" />
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="起飞机场简称">{{ infoObj.takeoff_airport_name }}</el-descriptions-item>
            <el-descriptions-item label="起飞机场三字码">{{ infoObj.depStation_iataCd }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="日期">{{ formatTime(infoObj.actualTakeOffTime,infoObj.estimateTakeOffTime,infoObj.scheduleTakeOffTime) }}</el-descriptions-item>
            <el-descriptions-item label="登机口">{{ infoObj.gateCd }}</el-descriptions-item>
            <el-descriptions-item label="停机位"> {{ infoObj.depstandCd }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="降落机场简称">{{ infoObj.target_airport_name }}</el-descriptions-item>
            <el-descriptions-item label="降落机场三字码">{{ infoObj.arrStation_iataCd }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="日期">{{ formatTime(infoObj.actualLandInTime,infoObj.estimateLandInTime,infoObj.scheduleLandInTime) }}</el-descriptions-item>
            <el-descriptions-item label="提取转盘">{{infoObj.arrcarouselCd}}</el-descriptions-item>
            <el-descriptions-item label="停机位"> {{ infoObj.arrstandCd }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="newFlightView-left-top-list">
          <el-descriptions :column="2">
            <el-descriptions-item label="航班状态">{{ infoObj.normalState }}</el-descriptions-item>
            <el-descriptions-item label="托运旅客数">{{ infoObj.checked_passengers_number }}</el-descriptions-item>
            <el-descriptions-item label="中转行李数">{{ infoObj.transfer_baggage_number }}</el-descriptions-item>
            <el-descriptions-item label="终点行李数">{{ infoObj.destination_bags_number }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="newFlightView-left-bottom">
        <Table :tableTag="table1" tableName="容器列表" />
      </div>
    </div>
    <div class="newFlightView-right">
      <div class="newFlightView-right-top flex">
        <div class="newFlightView-right-top-left flex-wrap">
          <div class="manageTitle">航班行李列表</div>
          <div class="newFlightView-right-top-left-select">快捷筛选
            <el-select style="margin-left: 8px;border-radius: 4px;" size="small" v-model="value" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="newFlightView-right-top-right">
          <TimeZoneSelector />
          <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航班行李列表')" />
        </div>
      </div>
      <div class="newFlightView-right-bottom">
        <Table :tableTag="table2" ref="table" :btnStyle="{top:'-52px'}" :istableCol="true" tableName="航班行李列表" />
      </div>
    </div>
  </div>
</template>

<script>
import Table from '@/views/newQuery/components/table.vue'
import TimeZoneSelector from "@/components/TimeZoneSelector"
import { throttledExportToExcel } from "@/utils/table"
import { combine } from '@/utils'
import pf from '@/layout/mixin/publicFunc'
import Item from './item.vue'
export default {
  components: { Table, TimeZoneSelector, Item },
  mixins: [pf],
  data () {
    return {
      radio: '1',
      options: [],
      value: '',
      dataContent: {},
      flightObj: {},
      infoObj: {},
      checkList: [],
      checkStates: [],
      table1: {},
      table2: {},
      showObj: {},
      deArrs: [],
      deArrsNum: []
    }
  },
  async created () {
    const query = this.$route.query
    const { flightNo, flightDate } = query
    this.flightObj = query
    this.dataContent = query
    const res = await this.getViewInfo(query)
    this.infoObj = res[0]
    const sts = await this.getViewInfo({ flightNo, flightDate })
    if (sts && sts.length) {
      for (const p of sts) {
        const { depStation_iataCd, arrStation_iataCd } = p
        this.deArrs.push({
          depStation_iataCd,
          arrStation_iataCd
        })
      }
    }
    const newDatas = _.cloneDeep(this.deArrs)
    if (newDatas && newDatas.length) {
      const m = combine(newDatas, 'depStation_iataCd', 'arrStation_iataCd')
      m.forEach((item, index) => {
        const obj = {
          item,
          index
        }
        this.deArrsNum.push(obj)
      })
      this.checkStates = m
    }
  },
  mounted () {
    this.table1 = this.dataContent
    this.table2 = this.dataContent
  },
  methods: {
    // 获取基本信息
    async getViewInfo (dataContent = this.dataContent) {
      const { code, returnData } = await this.getQueryList(SERVICE_ID.bagViewId, dataContent)
      if (code == 0) {
        return returnData
      } else {
        return []
      }
    },
    // 显示日期
    formatTime (t1, t2, t3) {
      return t1 ? t1 : t2 ? t2 : t3 ? t3 : ''
    },
    // 导出
    exportHandler (refName, tableName) {
      const { flightNo, flightDate, depStation_iataCd, arrStation_iataCd } = this.flightObj
      const table = this.$refs[refName].$el.cloneNode(true);
      const fileName = `${tableName}-${flightNo}-${flightDate}-${depStation_iataCd}-${arrStation_iataCd}.xlsx`;
      throttledExportToExcel(table, tableName, fileName);
    },
    // 选中
    async checkChange (arr) {
      const datas = []
      const result = [...arr]
      if (result && result.length) {
        const c1 = result.join('-')
        const c2 = c1.split('-')
        const c3 = _.uniq(c2)
        this.deArrsNum.forEach(item => {
          c3.forEach(p => {
            if (item.item == p) {
              const obj = {
                name: item.item,
                index: item.index
              }
              datas.push(obj)
            }
          })
        })
        const caps = datas.sort((a, b) => a.index - b.index)
        const c4 = caps[0].name //起飞
        const c5 = caps[caps.length - 1].name //降落
        const newPrams = _.cloneDeep(this.dataContent)
        newPrams.depStation_iataCd = c4
        newPrams.arrStation_iataCd = c5
        this.table1 = newPrams
        this.table2 = newPrams
        const res = await this.getViewInfo(newPrams)
        if (res && res.length) {
          this.infoObj = res[0]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.newFlightView {
  height: calc(100vh - 80px);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  &-left {
    width: 408px;
    margin-right: 8px;
    &-top {
      height: 505px;
      background-color: #fff;
      &-top {
        padding: 25px 16px;
        border-bottom: 1px solid #c8cfdb;
        &-title {
          line-height: 23px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #101116;
          margin-bottom: 25px;
          &-info {
            margin-right: 16px;
          }
        }
        &-status {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #101116;
          ::v-deep .el-checkbox-group {
            font-size: initial;
            .el-checkbox__inner {
              border-radius: 50%;
            }
            .el-checkbox__label {
              display: none;
            }
          }
        }
      }
      &-list {
        padding: 25px 16px 13px 16px;
        border-bottom: 1px solid #c8cfdb;
        &:last-child {
          border-bottom: none;
        }
      }
    }
    &-bottom {
      height: calc(100% - 515px);
      margin-top: 8px;
    }
  }
  &-right {
    flex: 1;
    height: 100%;
    width: calc(100% - 416px);
    &-top {
      padding: 18px 0;
      &-left {
        line-height: 30px;
      }
      &-right {
        padding-right: 70px;
        .btn-img {
          margin-left: 10px;
        }
      }
    }
    &-bottom {
      height: calc(100% - 68px);
    }
  }
}
</style>