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

<!--
 * @Author: zk
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-06-21 17:52:33
 * @LastEditors: your name
 * @Description: 进港01
-->
<template>
  <div class="arrival-one">
    <!--功能区-表单-->
    <div
      ref="formWrap"
      class="terminal-form-wrap"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="formData"
        :rules="rules"
        class="form"
      >
        <div class="form-left">
          <el-form-item prop="currentAirport">
            <!-- <el-cascader
            v-model="formData.currentAirport"
            style="width:144px;margin-left:10px"
            placeholder="全部机场"
            size="small"
            :options="currentAirportList"
            :props="currentAirportProps"
            collapse-tags
            clearable
            filterable
            @change="setCurrentAirport"
          /> -->
            <el-select
              v-model="formData.currentAirport"
              class="input-shadow"
              size="small"
              style="width: 150px;"
              filterable
              placeholder="请选择机场"
              @change="airPortChange"
            >
              <el-option
                v-for="(item, index) in AirportList"
                :key="index"
                :label="item.planLandingApt"
                :value="item.planLandingApt"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="startDate">
            <el-date-picker
              v-model="formData.startDate"
              class="input-shadow"
              style="width: 216px"
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间"
              @change="startDateChangeHandler"
            />
          </el-form-item>
          <el-form-item prop="endDate">
            <el-date-picker
              v-model="formData.endDate"
              class="input-shadow"
              style="width: 216px"
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间"
              @change="endDateChangeHandler"
            />
          </el-form-item> -->
          <el-form-item
            prop="flightDate"
            label="航班日期"
          >
            <el-date-picker
              v-model="formData.flightDate"
              size="small"
              style="width: 300px;"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="dateRangePickerOptions"
              @change="dateChangeHandler"
            />
          </el-form-item>
          <el-form-item>
            <div class="box-item">
              <p>预计装载总数：</p>
              <li
                v-for="(item, index) in orderNum"
                :key="index"
                :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              >
                <span v-if="!isNaN(item)">
                  <i ref="numberItem">0123456789</i>
                </span>
                <span
                  v-else
                  class="comma"
                >{{ item }}</span>
              </li>
            </div>
          </el-form-item>
        </div>
        <div
          class="form-right"
          @keyup.enter="onSubmit(1)"
        >
          <el-form-item prop="search">
            <el-popover
              :value="popoverVisible"
              placement="bottom"
              trigger="manual"
            >
              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
              <el-input
                slot="reference"
                v-model="formData.search"
                class="input-shadow"
                style="width: 240px; margin-left: 105px"
                size="small"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                clearable
                @focus="popoverVisible = true"
                @blur="popoverVisible = false"
              />
            </el-popover>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-shadow"
              size="mini"
              type="primary"
              @click="onSubmit(1)"
            >搜索</el-button>
          </el-form-item>
          <el-form-item v-is="['is_timeIcon']">
            <TimeZoneSelector />
          </el-form-item>
          <el-form-item v-is="['is_columnSettings']">
            <img
              class="btn-img btn-shadow"
              src="../../../../assets/baggage/ic_setting.png"
              title="列设置"
              @click="show"
            >
          </el-form-item>
          <el-form-item v-is="['dm_dt_columnSettings']">
            <img
              class="btn-img btn-shadow"
              src="../../../../assets/baggage/ic_export.png"
              title="导出"
              @click="exportHandler('table', '航站进港列表')"
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!--表格-->
    <div
      v-loading="loading"
      class="terminal-table"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        ref="table"
        class="table"
        :height="computedTableHeight"
        :data="dealedTableData"
        :header-cell-class-name="headerCellClass"
        :row-class-name="tableRowClassName"
        :cell-class-name="cellClass"
        show-summary
        :summary-method="summaryMethod"
        border
        stripe
        fit
        @cell-click="cellClickHandler"
      >
        <el-table-column
          v-for="col in tableColsCopy"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :fixed="col.fixed"
        >
          <el-table-column
            v-for="childCol in col.children"
            :key="childCol.prop"
            :prop="childCol.prop"
            :label="childCol.label"
            :width="childCol.width"
            :formatter="tableFormat"
          >
            <template #header>
              <el-tooltip
                :content="childCol.desc || childCol.label"
                placement="top"
              >
                <TableHeaderCell
                  :label="childCol.label"
                  :filter-options="tableDataFilters[childCol.prop]"
                  :filter-values.sync="filterValues[childCol.prop]"
                  :sortable="childCol.sortable"
                  :sort-rule.sync="tableDataSortRules[childCol.prop]"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </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: 'label',
              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'
import TimeZoneSelector from '@/components/TimeZoneSelector'
import terminalMixin from '../../mixins/terminal'
import formMixin from '../../mixins/form'
import tableColsMixin from '../../mixins/tableCols'
import timeZoneMixin from '../../mixins/timeZone'
import { getQuery } from '@/api/flight'
import TableHeaderCell from '@/components/TableHeaderCell'
import { setTableFilters, throttledExportToExcel } from '@/utils/table'

export default {
  name: 'DepartureTerminalView',
  components: { Dialog, TimeZoneSelector, TableHeaderCell },
  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
  data() {
    return {
      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
      popoverVisible: false,
      // 初始表头
      tableCols: [
        {
          prop: 'flightInfo',
          label: '航班信息',
          width: 185,
          fixed: 'left',
          children: [
            {
              prop: 'flightNO',
              label: '航班号',
              desc: '指航班编号',
              width: 80,
              filterable: true,
              sortable: true
            },
            {
              prop: 'flightDate',
              label: '执飞日期',
              desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
              width: 105,
              filterable: true,
              sortable: true
            },
            {
              prop: 'arrivalTime',
              label: '到港时间',
              desc: '指航班预计降落时间，数据是变化的，仅显示最新结果',
              width: 150,
              filterable: true,
              sortable: true
            },
            {
              prop: 'departureAirport',
              label: '起飞航站',
              desc: '指航班执飞航段的起飞航站，以航站三字码显示',
              width: 85,
              filterable: true,
              sortable: true
            },
            {
              prop: 'arrivalTerminal',
              label: '到达航站楼',
              desc: '指航班执飞航段的目的航站的航站楼代码',
              width: 100,
              filterable: true,
              sortable: true
            },
            {
              prop: 'luggageCarousel',
              label: '行李转盘',
              desc: '指航班进港，旅客提取行李转盘的代码',
              width: 85,
              filterable: true,
              sortable: true
            },
            {
              prop: 'parkingSpace',
              label: '停机位',
              desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
              filterable: true,
              sortable: true
            }
          ]
        },
        {
          prop: 'originAirportBaggageInfo',
          label: '始飞站行李信息',
          children: [
            {
              prop: 'checkIns',
              label: '值机',
              desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活'
            },
            {
              prop: 'projectedLoad',
              label: '预计装载',
              desc: '指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活'
            },
            {
              prop: 'loadedQuantity',
              label: '已装载',
              desc: '指实际装机完成的行李数量，不包含取消托运的行李数量'
            }
          ]
        },
        {
          prop: 'arrvivalBaggageInfo',
          label: '到达行李信息',
          children: [
            {
              prop: 'numberOfDestinationArrivals',
              label: '到达',
              desc: '指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'endPointNotReached',
              label: '未到达',
              desc: '指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'specialQuantity',
              label: '特殊',
              desc: '指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项',
              width: 65
            },
            {
              prop: 'numberOfClaims',
              label: '理赔',
              desc: '指航班收到旅客申请理赔的行李数量',
              width: 65
            }
          ]
        },
        {
          prop: 'uninstallInfo',
          label: '卸载状态',
          children: [
            {
              prop: 'uninstalled',
              label: '已卸载',
              desc: '指卸机的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'numberToBeUninstalled',
              label: '待卸载',
              desc: '指仍未卸机的行李数量，数据是变化的，仅显示最新信息'
            }
          ]
        },
        {
          prop: 'terminationdBaggageInfo',
          label: '终止行李',
          children: [
            {
              prop: 'terminateArrivalQuantity',
              label: '到达',
              desc: '指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'terminateUnreachedQuantity',
              label: '未到达',
              desc: '指未到达目的站的行李数量，数据是变化的，仅显示最新信息'
            }
          ]
        },
        {
          prop: 'transferBaggageInfo',
          label: '转运行李',
          children: [
            {
              prop: 'quantityShipped',
              label: '已转运',
              desc: '指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'undeliveredQuantity',
              label: '未转运',
              desc: '指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息'
            }
          ]
        },
        {
          prop: 'baggageDistributionInfo',
          label: '行李分布',
          children: [
            {
              prop: 'numberOfContainers',
              label: '容器',
              desc: '指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息'
            },
            {
              prop: 'numberOfBulk',
              label: '散装',
              desc: '指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息',
              width: 65
            }
          ]
        }
      ],
      tableDataSortRules: {
        flightCanceled: 'ascending'
      },
      loading: false,
      AirportList: [],
      loopEvent: null,
      arrivalCount: 0,
      baggageCount: 0,
      hasSetTableScroll: false,
      table: null
    }
  },
  computed: {
    singleDay() {
      return this.startDate === this.endDate
    }
  },
  mounted() {
    this.getAirPortData()
    this.table = this.$refs.table.bodyWrapper
    const that = this
    this.table.addEventListener('scroll', () => {
      that.scrollTop = this.table.scrollTop
    })
  },
  activated() {
    this.table.scrollTop = this.scrollTop
    this.getTableData()
    const that = this
    this.loopEvent = setInterval(function () {
      that.getTableData()
    }, 3000)
  },
  deactivated() {
    if (this.loopEvent) {
      clearInterval(this.loopEvent)
      this.loopEvent = null
    }
  },
  beforeDestroy() {
    if (this.loopEvent) {
      clearInterval(this.loopEvent)
      this.loopEvent = null
    }
  },
  methods: {
    resetLoopEvent() {
      this.loading = true
      this.hasSetTableScroll = false
      if (this.loopEvent) {
        clearInterval(this.loopEvent)
      }
      this.getTableData()
      const that = this
      this.loopEvent = setInterval(function () {
        that.getTableData()
      }, 3000)
    },
    airPortChange() {
      this.resetLoopEvent()
    },
    dateChangeHandler() {
      this.resetLoopEvent()
    },
    // 选择机场
    async getAirPortData() {
      try {
        const res = await getQuery({
          id: DATACONTENT_ID.arrivalAirId,
          dataContent: []
        })
        if (Number(res.code) === 0) {
          this.AirportList = this._.orderBy(res.returnData.listValues, o => o.planLandingApt)
          this.formData.currentAirport = 'PEK'
          this.resetLoopEvent()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      const classes = []
      if (row.flightStatus === 'DLY') {
        classes.push('bgl-delayed')
      }
      if (row.flightStatus === 'CAN') {
        classes.push('bgl-canceled')
      }
      if (row.hasArrived) {
        classes.push('bgl-hui')
        if (rowIndex === this.arrivalCount - 1) {
          classes.push('redBorder')
        }
      }
      return classes.join(' ')
    },
    headerCellClass({ row, column }) {
      const classes = []
      const rule = this.tableDataSortRules[column.property]
      if (rule) {
        classes.push(rule)
      }
      return classes.join(' ')
    },
    // 获取表单下拉框数据
    // getFormData(params) {
    //   this.relatedAirportQuery({
    //     ...params,
    //     type: 'OUT'
    //   })
    //   this.outgoingAirlineQuery(params)
    //   this.craftTypeQuery(params)
    //   this.flightAttrQuery(params)
    // },
    // 获取表格数据
    async getTableData() {
      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
        return
      }
      const arr = [this.formData.currentAirport, this.startDate, this.endDate]
      try {
        const res = await getQuery({
          id: DATACONTENT_ID.arrivalTableId,
          dataContent: [...arr, ...arr, ...arr]
        })
        if (Number(res.code) === 0) {
          this.initTableData(res.returnData.listValues)
        } else {
          console.log(res.message)
        }
        this.loading = false
      } catch (error) {
        if (this.loopEvent) {
          clearInterval(this.loopEvent)
          this.loopEvent = null
        }
        this.loading = false
        console.log('出错了', error.message || error)
      }
    },
    initTableData(tableData) {
      this.arrivalCount = 0
      this.baggageCount = 0
      tableData.forEach(item => {
        item['flightCanceled'] = item['flightStatus'] === 'CAN' ? 1 : 0
        if (this.hasArrived(item)) {
          this.arrivalCount++
        }
        this.baggageCount = this.baggageCount + item.projectedLoad
      })
      this.tableData = this._.orderBy(tableData, ['hasArrived', 'arrivalTime'], ['desc', 'asc'])
      setTableFilters(this.tableData, this.tableDataFilters)
      this.toOrderNum(this.baggageCount)
      // setInterval(() => {
      //   this.baggageCount = this.baggageCount+1;
      //    // 这里输入数字即可调用
      // }, 2000);
      this.$nextTick(() => {
        this.setTableScroll()
      })
    },
    hasArrived(flight) {
      if (flight.arrivalTime) {
        const now = new Date()
        const arrivalTime = new Date(flight.arrivalTime)
        flight['hasArrived'] = now > arrivalTime && !flight['flightCanceled']
      } else {
        flight['hasArrived'] = false
      }
      return flight['hasArrived']
    },
    setTableScroll() {
      if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
        return
      }
      const table = this.$refs['table'].$el
      const scrollParent = table.querySelector('.el-table__body-wrapper')
      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
        return
      }
      const lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount - 1]
      setTimeout(() => {
        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
        if (scrollMid > 0) {
          const scrollHeight = Math.min(scrollMid, scrollMax)
          scrollParent.scrollTo(0, scrollHeight)
        }
      }, 0)
      this.hasSetTableScroll = true
    },
    setNumberTransform() {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },

    toOrderNum(num) {
      num = num.toString()
      if (num.length < 6) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length >= 6) {
        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大')
      }
      this.setNumberTransform()
    },
    exportHandler(refName, tableName) {
      if (this.loading) {
        return
      }
      const table = this.$refs[refName].$el.cloneNode(true)
      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`
      throttledExportToExcel(table, tableName, fileName)
    }
  }
}
</script>

<style lang="scss" scoped>
.terminal-form-wrap {
  padding-top: 11px;
  padding-left: 5px;
  ::v-deep .form {
    display: flex;
    justify-content: space-between;
    .form-left {
      flex: 1;
    }
    .form-right {
      flex: 0 1 auto;
    }
    .el-form-item {
      margin-bottom: 0px;
      margin-right: 8px;
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: Helvetica, 'Microsoft YaHei';
        font-size: 14px;
      }
      .el-switch__label {
        color: #303133;
      }
      .el-form-item__error {
        z-index: 10;
      }
    }
    .btn-img {
      position: relative;
      top: 6px;
    }
  }
  .box-item {
    position: relative;
    height: 50px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    list-style: none;
    color: #2d7cff;
    writing-mode: vertical-lr;
    text-orientation: upright;
    /*文字禁止编辑*/
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    /* overflow: hidden; */
    p {
      line-height: 32px;
      writing-mode: horizontal-tb !important;
      text-orientation: none !important;
      /*文字禁止编辑*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
      margin-top: 5px;
    }
  }
  /* 默认逗号设置 */
  .mark-item {
    width: 10px;
    height: 32px;
    margin-right: 5px;
    line-height: 10px;
    font-size: 18px;
    position: relative;
    & > span {
      position: absolute;
      width: 100%;
      bottom: 0;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  }
  /*滚动数字设置*/
  .number-item {
    width: 41px;
    height: 42px;
    /* 背景图片 */
    // background: url('/images/text-bg-blue.png') no-repeat center center;
    // background-size: 100% 100%;
    // background: #ccc;
    list-style: none;
    margin-right: 5px;
    // background:rgba(250,250,250,1);
    border-radius: 4px;
    border: 3px solid rgb(221, 221, 221);
    & > span {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > i {
        font-style: normal;
        position: absolute;
        top: 11px;
        left: 50%;
        transform: translate(-50%, -1%);
        transition: transform 1s ease-in-out;
        letter-spacing: 10px;
      }
    }
  }
  .number-item:last-child {
    margin-right: 0;
  }
}
.terminal-table {
  width: 100%;
  ::v-deep .table {
    width: 100%;
    .cell {
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: Helvetica, 'Microsoft YaHei';
      letter-spacing: 0;
    }
    .cell-click {
      cursor: pointer;
      color: #2d7cff;
      &.cell-clicked {
        color: purple;
      }
    }
    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
      }
      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }
    .el-table__body-wrapper,
    .el-table__fixed-body-wrapper {
      tr.bgl-hui {
        background: #d2d6df;
        td {
          background: #d2d6df;
        }
        &.redBorder {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #e83f82;
          }
        }
      }
      tr.bgl-delayed td {
        background: #fcf0b1;
      }
      tr.bgl-canceled td {
        background: #f7babe;
      }
    }
    .el-table__cell.is-hidden > * {
      visibility: visible;
    }
  }
}
</style>