SMAirports/src/views/newDeparture/index.vue

<!--
 * @Author: zk
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-06-22 17:39:49
 * @LastEditors: your name
 * @Description: 离港01
-->
<template>
  <div class="departure-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="company">
            <el-select v-model="formData.company" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择航班属性" @change="airPortChange">
              <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item prop="currentAirport">
            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.IATACode" :value="item.IATACode" />
            </el-select>
          </el-form-item>
          <el-form-item prop="flightDate" label="航班日期">
            <el-date-picker v-model="formData.flightDate" :clearable="false" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChange" />
          </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(0)">
          <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(0)">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <TimeZoneSelector />
          </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 class="terminal-table">
      <Table style="height:100%" :pageSize="9999" :btnStyle="{ 'top':'-43px','right':'8px' }" @tableLoad="tableLoad" :istableCol="true" :tableTag="tableTag" ref="table" />
    </div>
  </div>
</template>

<script>
import Dialog from "@/layout/components/Dialog";
import TimeZoneSelector from "@/components/TimeZoneSelector";
import { throttledExportToExcel } from "@/utils/table";
import pf from '@/layout/mixin/publicFunc'
import { mapGetters } from "vuex";
import formMixin from "./mixins/form";
import Table from '@/views/newQuery/components/table.vue'
export default {
  name: "DepartureTerminalView",
  components: { Dialog, TimeZoneSelector, Table },
  mixins: [formMixin, pf],
  data () {
    return {
      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
      popoverVisible: false,
      // 初始表头
      tableCols: [],
      tableDataSortRules: {
        flightCanceled: "ascending",
      },
      loading: false,
      AirportList: [],
      tableTag: {},
      timer: null
    };
  },
  computed: {
    singleDay () {
      return this.startDate === this.endDate;
    },
    ...mapGetters(["timeZone"]),
  },
  created () {
    this.getAirPortData()
  },
  mounted () {
    this.timer = setInterval(() => {
      this.getAirPortData()
    }, LOOP_INTERVAL.departureTable)
  },
  destroyed () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    airPortChange (val) {
      this.formData.currentAirport = val
      this.getAirPortData(0)
    },
    dateChange () {
      this.getAirPortData(0)
    },
    formatParams () {
      const datas = []
      const queryData = {
        startDate: this.startDate,
        endDate: this.endDate
      }
      queryData['outAirport'] = this.formData.currentAirport
      for (const key in queryData) {
        if (Object.hasOwnProperty.call(queryData, key)) {
          const val = queryData[key]
          const comparator = key == 'startDate' ? '>=' : key == 'endDate' ? '<=' : '='
          const column = key == 'startDate' ? 'carrierFlightsDate' : key == 'endDate' ? 'carrierFlightsDate' : key
          const r = {
            left: '(',
            column: column,
            comparator,
            value: val,
            right: ')',
            connector: 'and'
          }
          datas.push(r)
        }
      }
      return datas
    },
    async getAirPortData (type = 1) {
      try {
        let res = null
        res = this.TauthId ? await this.getQueryListAuth(this.TqueryId || SERVICE_ID.getAirpotId, {}, 1, 999, this.TauthId) : await this.getQueryList(SERVICE_ID.getAirpotId)
        if (Number(res.code) === 0) {
          this.AirportList = res.returnData;
          if (type) {
            const flag = res.returnData.filter(item => item.IATACode == 'CAN');
            this.formData.currentAirport = this.TauthId && flag.length ? 'CAN' : res.returnData[0].IATACode;
          }
          this.tableTag = {
            filter: this.formatParams()
          }
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        this.$message.error("失败");
      }
    },
    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();
    },
    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}%)`;
      }
    },
    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);
    },
    tableLoad (arr) {
      let num = 0
      arr.forEach(item => {
        num += Number(item.estimated_load_number)
      })
      this.toOrderNum(num)
    }
  },
};
</script>

<style lang="scss" scoped>
.departure-one {
  height: calc(100vh - 80px);
}
.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;
      }
      &:last-child {
        margin-right: 45px;
      }
    }
    .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%;
  height: calc(100% - 61px);
}
</style>