BCA/src/views/baggageManagementTemp/components/transferArrival/index.vue

<!--
 * @Author: zk
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-06-28 10:04:17
 * @LastEditors: your name
 * @Description: 中转进港
-->
<template>
  <div class="transfer-in">
    <!--功能区-表单-->
    <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: 100px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
            </el-select>
          </el-form-item>
          <el-form-item prop="inboundCarrier">
            <el-cascader v-model="formData.inboundCarrier" class="input-shadow" style="width: 140px" size="small" :options="carrierProps" :props="optionProps" placeholder="进港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
          </el-form-item>
          <el-form-item prop="outgoingAirline">
            <el-cascader v-model="formData.outgoingAirline" class="input-shadow" style="width: 140px" size="small" :options="carrierPropsop" :props="optionPropser" placeholder="离港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
          </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" :clearable="false" size="small" style="width: 280px" 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" 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>
            <el-button class="btn-shadow" size="mini" type="primary" @click="changeView">切换视角</el-button>
          </el-form-item>
          <!-- <el-form-item v-is="['ti_timeIcon']">
            <TimeZoneSelector />
          </el-form-item> -->
          <el-form-item>
            <TimeZoneSelector />
          </el-form-item>
          <!-- <el-form-item v-is="['ti_columnSettings']">
            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
          </el-form-item> -->
          <el-form-item>
            <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> -->
          <el-form-item>
            <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" :data="dealedTableData" :height="computedTableHeight" show-summary :summary-method="summaryMethod" :span-method="arraySpanMethod" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" 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-group">
      <div class="dialog-wrapper">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree ref="columnSetTree" :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 pf from '@/layout/mixin/publicFunc'
// import { TempQuery } from '@/api/temp'
import { GeneralDataReception } from '@/api/temp'
import TableHeaderCell from '@/components/TableHeaderCell'
import { setTableFilters, exportToExcel, timeInZone } from '@/utils/table'
import { parseTime } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'DepartureTerminalView',
  components: { Dialog, TimeZoneSelector, TableHeaderCell },
  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin, pf],
  data () {
    return {
      optionProps: {
        value: 'inAicompanyCode2',
        label: 'inAicompanyCode2'
      },
      optionPropser: {
        value: 'outAicompanyCode2',
        label: 'outAicompanyCode2'
      },
      popoverVisible: false,
      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
      // 初始表头
      tableCols: [
        {
          prop: 'arrivalInfo',
          label: '进港航班',
          width: 180,
          fixed: 'left',
          children: [
            {
              prop: 'preFlightNO',
              label: '航班号',
              desc: '进港航班编号',
              width: 80,
              filterable: true,
              sortable: true
            },
            {
              prop: 'preFlightDate',
              label: '航班日期',
              desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
              width: 100
            },
            {
              prop: 'preAirport',
              label: '起飞航站',
              desc: '指进港航班的起飞机场三字码',
              width: 100,
              filterable: true,
              sortable: true
            },
            {
              prop: 'actualLandingTime',
              label: '降落时间',
              desc: '根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间',
              width: 100
            },
            {
              prop: 'landingBuild',
              label: '降落航站楼',
              desc: '指航班降落后位于机场的哪个航站楼',
              width: 98,
              filterable: true,
              sortable: true
            },
            {
              prop: 'carousel',
              label: '行李转盘',
              desc: '指航班到达后行李提取的地方，仅显示最新信息',
              width: 100,
              filterable: true,
              sortable: true
            },
            {
              prop: 'standForLanding',
              label: '降落停机位',
              desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
              width: 98,
              filterable: true,
              sortable: true
            },
            {
              prop: 'inTransferBaggageCount',
              label: '中转行李数',
              desc: '指航班在本航站预计需要中转至对应航班的行李数量'
            }
          ]
        },
        {
          prop: 'departureInfo',
          label: '离港航班',
          children: [
            {
              prop: 'inTransferredBaggageCount',
              label: '已中转行李数',
              desc: '指航班在本航站实际已经中转至对应航班的行李数量',
              width: 100
            },
            {
              prop: 'flightNO',
              label: '航班号',
              desc: '指航班编号',
              width: 80,
              filterable: true,
              sortable: true
            },
            {
              prop: 'flightDate',
              label: '航班日期',
              desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
              width: 100
            },
            {
              prop: 'actualDepartureTime',
              label: '起飞时间',
              desc: '指航班预计起飞时间，数据是变化的，仅显示最新结果',
              width: 100
            },
            {
              prop: 'targetAirport',
              label: '目的站',
              desc: '指航班执飞航段的目的航站，以航站三字码+航站简称显示',
              filterable: true,
              sortable: true
            },
            {
              prop: 'departureBuild',
              label: '起飞航站楼',
              desc: '指航班执飞航段的起飞航站的航站楼',
              width: 98,
              filterable: true,
              sortable: true
            },
            {
              prop: 'bordingGate',
              label: '起飞登机口',
              desc: '指航班的登机口代码，数据是变化的，仅显示最新信息',
              width: 98,
              filterable: true,
              sortable: true
            },
            {
              prop: 'standForDepartrue',
              label: '起飞停机位',
              desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
              width: 98,
              filterable: true,
              sortable: true
            },
            // {
            //   prop: 'outTransferBaggageCount',
            //   label: '中转进行李数',
            //   desc: '指其它航班预计中转至本航班的行李数量',
            //   width: 100
            // },
            // {
            //   prop: 'outTransferredBaggageCount',
            //   label: '已中转进行李数',
            //   desc: '指其它航班实际已中转至本航班的行李数量',
            //   width: 120
            // },
            {
              prop: 'timeDifference',
              label: '转运时间',
              desc: '指中转动作完成时间'
            }
          ]
        }
      ],
      loading: false,
      AirportList: [],
      carrierProps: [],
      carrierPropsop: [],
      loopEvent: null,
      arrivalCount: 0,
      baggageCount: 0,
      hasSetTableScroll: false,
      spanArr: [],
      contactDot: 0,
      flag: 0,
      table: null,
      WarningData: []
    }
  },
  computed: {
    singleDay () {
      return this.startDate === this.endDate
    },
    ...mapGetters(['timeZone'])
  },
  watch: {
    dealedTableData: {
      handler (val) {
        this.spanArr = []
        let contactDot = this.contactDot
        val.forEach((item, index, arr) => {
          if (index === 0) {
            this.spanArr.push(1)
          } else {
            if (
              item['preFlightNO'] === arr[index - 1]['preFlightNO'] &&
              item['preFlightDate'] === arr[index - 1]['preFlightDate']
            ) {
              this.spanArr[contactDot] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              contactDot = index
            }
          }
        })
      },
      deep: true
    }
  },
  created () {
    // this.getAirPortData()
  },
  mounted () {
    this.$refs['form'].validateField('flightDate')
    this.getAirPortData()
    this.table = this.$refs.table.bodyWrapper
    const that = this
    this.table.addEventListener('scroll', () => {
      that.scrollTop = this.table.scrollTop
    })
  },
  activated () {
    const { currentAirport, startDate, endDate } = this.$route.query
    if ((currentAirport ?? '') !== '') {
      this.formData.currentAirport = currentAirport
    }
    if ((startDate ?? '') !== '') {
      this.formData.flightDate[0] = startDate
    }
    if ((endDate ?? '') !== '') {
      this.formData.flightDate[1] = endDate
    }
    this.table.scrollTop = this.scrollTop
    this.getTableData()
    this.getWarningData()
    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferArrivalTable)
  },
  deactivated () {
    if (this.loopEvent) {
      clearInterval(this.loopEvent)
      this.loopEvent = null
    }
  },
  beforeDestroy () {
    if (this.loopEvent) {
      clearInterval(this.loopEvent)
      this.loopEvent = null
    }
  },
  methods: {
    async getWarningData () {
      try {
        // const res = await TempQuery({
        //   id: SERVICE_ID.departureWarningId,
        //   dataContent: []
        // })
        const res = await this.getQueryList(SERVICE_ID.departureWarningId, {}, 1, 999)
        if (Number(res.code) === 0) {
          const { listValues } = res.returnData
          this.WarningData = listValues
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
    resetLoopEvent () {
      this.loading = true
      this.hasSetTableScroll = false
      this.loopEvent && clearInterval(this.loopEvent)
      this.getTableData()
      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferArrivalTable)
    },
    headerCellClass ({ row, column }) {
      const classes = []
      const rule = this.tableDataSortRules[column.property]
      if (rule) {
        classes.push(rule)
      }
      return classes.join(' ')
    },
    tableRowClassName ({ row, rowIndex }) {
      const classes = []
      if (row.hasArrived) {
        classes.push('bgl-hui')
        if (rowIndex === this.arrivalCount - 1) {
          classes.push('redBorder')
        }
      }
      return classes.join(' ')
    },
    changeView () {
      const query = {
        currentAirport: this.formData.currentAirport,
        startDate: this.startDate,
        endDate: this.endDate
      }
      this.$router.push({
        path: '/transfer/departure',
        query
      })
    },
    airPortChange () {
      this.getAviationData()
      this.upAviationData()
      this.resetLoopEvent()
    },
    dateChangeHandler () {
      this.getAviationData()
      this.upAviationData()
      this.resetLoopEvent()
    },
    // 选择机场
    async getAirPortData () {
      try {
        const res = await this.getQueryListAuth(SERVICE_ID.departureAirId, {}, 1, 9999, 280)
        if (Number(res.code) === 0) {
          if (res.returnData?.listValues?.length) {
            this.AirportList = this._.orderBy(res.returnData.listValues, o => o.planDepartureApt)
            if (!this.formData.currentAirport) {
              const defaultAirport = 'CAN'
              let currentAirport = res.returnData.listValues[0].planDepartureApt
              if (res.returnData.listValues.some(item => item.planDepartureApt === defaultAirport)) {
                currentAirport = defaultAirport
              }
              this.formData.currentAirport = currentAirport
            }
            this.getAviationData()
            this.upAviationData()
            this.resetLoopEvent()
          } else {
            this.$message.warning('无航站数据权限')
          }
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 选择航司
    async getAviationData () {
      try {
        // const res = await TempQuery({
        //   id: SERVICE_ID.departureAviJoinId,
        //   dataContent: [this.formData.currentAirport]
        // })
        const res = await this.getQueryListAuth(SERVICE_ID.departureAviJoinId, {}, 1, 9999, 281)
        if (Number(res.code) === 0) {
          this.carrierProps = res.returnData.listValues
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 选择航司
    async upAviationData () {
      try {
        // const res = await TempQuery({
        //   id: SERVICE_ID.departureAviLeaveId,
        //   dataContent: [this.formData.currentAirport]
        // })
        const res = await this.getQueryListAuth(SERVICE_ID.departureAviLeaveId, {}, 1, 9999, 281)
        if (Number(res.code) === 0) {
          this.carrierPropsop = res.returnData.listValues
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 获取表单下拉框数据
    // 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 arrs1 = [this.formData.inboundCarrier.length === 0 ? '' : this.formData.inboundCarrier[0]]
      // const arrs2 = [this.formData.outgoingAirline.length === 0 ? '' : this.formData.outgoingAirline[0]]
      // const arr = [
      //   this.formData.currentAirport,
      //   this.startDate,
      //   this.endDate,
      //   ...arrs1,
      //   ...arrs1,
      //   ...arrs1,
      //   ...arrs2,
      //   ...arrs2,
      //   ...arrs2
      //   // this.formData.inboundCarrier,
      //   // this.formData.outgoingAirline,
      //   // JSON.stringify(this.formData.inboundCarrier),
      //   // JSON.stringify(this.formData.outgoingAirline),
      // ]
      try {
        // const res = await TempQuery({
        //   id: SERVICE_ID.departureTableId,
        //   dataContent: [...arr]
        // })
        const res = await this.getQueryList(SERVICE_ID.departureTableId, { departureAirport: this.formData.currentAirport, flightDateStart: this.startDate, flightDateEnd: this.endDate, inFlightNO: null, flightNO: null }, 1, 9999)
        if (Number(res.code) === 0) {
          this.initTableData(res.returnData.listValues)
        } else {
        }
        this.loading = false
      } catch (error) {
        if (this.loopEvent) {
          clearInterval(this.loopEvent)
          this.loopEvent = null
        }
        this.loading = false
      }
    },
    initTableData (tableData) {
      const currentTime = new Date()
      const curTime = this.formatTime(currentTime)
      this.baggageCount = 0
      tableData.forEach(item => {
        if (item['actualLandingTime'] && !item['flightCanceled']) {
          const now = new Date()
          const actualLandingTime = new Date(item['actualLandingTime'].replace('T', ' '))
          if (now > actualLandingTime) {
            item['hasArrived'] = true
          } else {
            item['hasArrived'] = false
          }
        } else {
          item['hasArrived'] = false
        }
        const o1 = item['inTransferBaggageCount']
        const o2 = item['inTransferredBaggageCount']
        const out1 = o1 != undefined || o1 != null ? o1 : 0
        const out2 = o2 != undefined || o2 != null ? o2 : 0
        if (item['hasArrived'] && out1 - out2 > 0) {
          this.WarningData.forEach(p => {
            const startTime = this.formatTime(timeInZone((p.startDate ?? '').replace('T', ' '), this.timeZone), 2)
            const endTime = this.formatTime(timeInZone((p.endDate ?? '').replace('T', ' '), this.timeZone), 2)
            const planTime = this.formatTime(
              timeInZone((item.actualDepartureTime ?? '').replace('T', ' '), this.timeZone),
              2
            )
            const capTime = Math.ceil((planTime - curTime) / (1000 * 60))
            if (Number(startTime) - Number(curTime) < 0 && Number(endTime) - Number(curTime) > 0) {
              const newItem = _.cloneDeep(item)
              if (p.flightNO != '' && p.flightNO == item.flightNO) {
                if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
                  item['warningState'] = 1
                  const returnedTarget = Object.assign(newItem, p)
                  this.sendLog(returnedTarget)
                }
                if (p.alarmDuration && capTime - p.alarmDuration < 0) {
                  item['warningState'] = 2
                  const returnedTarget = Object.assign(newItem, p)
                  this.sendLog(returnedTarget)
                }
              } else if (p.flightNO == '' && p.IATACode != '') {
                if (item.flightNO.substring(0, 2) == p.IATACode) {
                  if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
                    item['warningState'] = 1
                    const returnedTarget = Object.assign(newItem, p)
                    this.sendLog(returnedTarget)
                  }
                  if (p.alarmDuration && capTime - p.alarmDuration < 0) {
                    item['warningState'] = 2
                    const returnedTarget = Object.assign(newItem, p)
                    this.sendLog(returnedTarget)
                  }
                }
              }
            }
          })
        }
        this.baggageCount = this.baggageCount + Number(item.inTransferBaggageCount)
      })
      this.tableData = this._.sortBy(tableData, ['actualLandingTime', 'preFlightNO', 'actualDepartureTime', 'flightNO'])
      setTableFilters(this.tableData, this.tableDataFilters)
      this.toOrderNum(this.baggageCount)
      this.$nextTick(() => {
        this.setTableScroll()
      })
    },
    formatTime (date, type = 1) {
      let time = null
      if (type == 1) {
        time = parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
      } else {
        time = date
      }
      const newTimt = new Date(time)
      return newTimt.getTime()
    },
    async sendLog (obj) {
      try {
        const newObj = {
          logTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
          logInfo: JSON.stringify(obj),
          flightNO: obj.flightNO,
          flightDate: obj.flightDate,
          luggageSN: '',
          strategyUseID: obj.alarmStrategyID,
          event: 1
        }
        await GeneralDataReception({
          serviceId: SERVICE_ID.departureScId,
          dataContent: JSON.stringify(newObj)
        })
      } catch (error) {
        this.$message.error('失败')
      }
    },
    setTableScroll () {
      this.arrivalCount = 0
      this.dealedTableData.forEach(row => {
        if (row['hasArrived']) {
          this.arrivalCount++
        }
      })
      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()
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < 7; i++) {
        if (columnIndex === i) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
    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`
      exportToExcel(table, tableName, fileName, 2)
    }
  }
}
</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: #2f3480;
    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: #2f3480;
      &.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;
          }
        }
      }
    }
    td.cell-toUnload {
      background: lightcoral !important;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 2px dashed red;
      }
    }
    td.cell-toUnloadNew {
      background: #fcf0b1 !important;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 2px dashed #e28913;
      }
    }
    .el-table__cell.is-hidden > * {
      visibility: visible;
    }
  }
}
</style>