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

<!--
 * @Author: zk
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-05-16 15:59:28
 * @LastEditors: your name
 * @Description: 离港01
-->
<template>
  <div class="departure-one">
    <!--功能区-表单-->
    <div class="departure-form">
      <el-form
        ref="form"
        :inline="true"
        :model="formData"
        :rules="rules"
        class="form"
      >
        <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"
            size="small"
            filterable
            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"
            style="width: 164px"
            size="small"
            :options="carrierProps"
            :props="optionProps"
            placeholder="进港承运航司"
            collapse-tags
            clearable
            filterable
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item prop="outgoingAirline">
          <el-cascader
            v-model="formData.outgoingAirline"
            style="width: 164px"
            size="small"
            :options="carrierPropsop"
            :props="optionPropser"
            placeholder="离港承运航司"
            collapse-tags
            clearable
            filterable
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item prop="startDate">
          <el-date-picker
            v-model="formData.startDate"
            style="width: 216px"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            @change="setStartDate"
          />
        </el-form-item>
        <el-form-item prop="endDate">
          <el-date-picker
            v-model="formData.endDate"
            style="width: 216px"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            @change="setEndDate"
          />
        </el-form-item>
        <!-- <el-form-item>
          <div class="box-item">
            <p>预计装载总数：</p>
            <li
              :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item, index) in orderNum"
              :key="index"
            >
              <span v-if="!isNaN(item)">
                <i ref="numberItem">0123456789</i>
              </span>
              <span class="comma" v-else>{{ item }}</span>
            </li>
          </div>
        </el-form-item> -->
        <div
          style="float: right"
          @keyup.enter="onSubmit(1)"
        >
          <el-form-item prop="search">
            <el-input
              v-model="formData.search"
              style="width: 240px; margin-left: 105px"
              size="small"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              @clear="inputClear"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="onSubmit(1)"
            >搜索</el-button>
          </el-form-item>
          <el-form-item v-is="['ti_showTransit']">
            <el-button
              size="small"
              type="primary"
              @click="changeView"
            >切换视角</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-switch
              v-model="formData.switch"
              style="margin-left: 40px"
              active-text="显示中转"
            />
          </el-form-item> -->
          <el-form-item v-is="['i_timeIcon']">
            <el-dropdown>
              <img
                class="checkTime msgImg"
                src="../../../../assets/departure/ic_time.png"
              >
              <el-dropdown-menu
                slot="dropdown"
                class="time-zone"
              >
                <el-dropdown-item>国内Local/国际UTC</el-dropdown-item>
                <el-dropdown-item>Local</el-dropdown-item>
                <el-dropdown-item>UTC</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <img
              class="msgImg"
              src="../../../../assets/departure/ic_setting.png"
              @click="show"
            >
          </el-form-item>
          <!-- <el-form-item>
            <el-button
              class="btn-square setBtn"
              type="primary"
              icon="el-icon-s-tools"
              size="mini"
              @click="show"
            />
          </el-form-item> -->
        </div>
      </el-form>
    </div>
    <!--表格-->
    <div
      v-loading="loading"
      class="departure-table"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        ref="table"
        :data="tableData"
        class="table"
        max-height="100%"
        :height="computedTableHeight"
        show-summary
        :summary-method="summaryMethod"
        :span-method="arraySpanMethod"
        :cell-class-name="cellClass"
        border
        stripe
        fit
        @cell-click="cellClick"
      >
        <el-table-column
          v-for="(item, index) in tableColsCopy"
          :key="index"
          :prop="item.statCode"
          :label="item.statName"
        >
          <el-table-column
            v-for="(p, i) in item.children"
            :key="i"
            :prop="p.statCode"
            :label="p.statName"
            :width="p.width"
            :formatter="tableFormat"
          >
            <template slot="header">
              <el-tooltip :content="p.statName" placement="top"><span>{{ p.statName }}</span></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: 'statName',
              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 terminalMixin from '../../mixins/terminal'
import formMixin from '../../mixins/form'
import tableColsMixin from '../../mixins/tableCols'
import { getQuery } from '@/api/flight'
import { commonTableCellClass } from '@/utils/table'

export default {
  name: 'DepartureTerminalView',
  components: { Dialog },
  mixins: [terminalMixin, formMixin, tableColsMixin],
  data() {
    return {
      optionProps: {
        value: 'inAicompanyCode2',
        label: 'inAicompanyCode2'
      },
      optionPropser: {
        value: 'outAicompanyCode2',
        label: 'outAicompanyCode2'
      },

      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
      // 初始表头
      tableCols: [
        {
          statCode: 'arrivalInfo',
          statName: '进港航班',
          children: [
            {
              statCode: 'PreFlightNO',
              statName: '航班号',
              width: 80
            },
            {
              statCode: 'PreFlightDate',
              statName: '航班日期',
              width: 100
            },
            {
              statCode: 'PreAirport',
              statName: '起飞机场'
            },
            {
              statCode: 'ActualLandingTime',
              statName: '降落时间',
              width: 100
            },
            {
              statCode: 'LandingBuild',
              statName: '降落航站楼'
            },
            {
              statCode: 'Carousel',
              statName: '行李转盘'
            },
            {
              statCode: 'StandForLanding',
              statName: '降落停机位'
            },
            {
              statCode: 'inTransferBaggageCount',
              statName: '中转行李数'
            },
            {
              statCode: 'inTransferredBaggageCount',
              statName: '已中转行李数',
              width: 100
            }
          ]
        },
        {
          statCode: 'departureInfo',
          statName: '离港航班',
          children: [
            {
              statCode: 'FlightNO',
              statName: '航班号',
              width: 80
            },
            {
              statCode: 'FlightDate',
              statName: '航班日期',
              width: 100
            },
            {
              statCode: 'ActualDepartureTime',
              statName: '起飞时间',
              width: 100
            },
            {
              statCode: 'TargetAirport',
              statName: '目的站'
            },
            {
              statCode: 'DepartureBuild',
              statName: '起飞航站楼'
            },
            {
              statCode: 'BordingGate',
              statName: '起飞登机口'
            },
            {
              statCode: 'StandForDepartrue',
              statName: '起飞停机位'
            },
            {
              statCode: 'outTransferBaggageCount',
              statName: '中转进行李数',
              width: 100
            },
            {
              statCode: 'outTransferredBaggageCount',
              statName: '已中转进行李数',
              width: 120
            },
            {
              statCode: 'timeDifference',
              statName: '转运时间'
            }
          ]
        }
      ],
      AirportList: [],
      carrierProps: [],
      carrierPropsop: [],
      tableDataFilters: {
        FlightNO: [],
        FlightDate: [],
        PlanDepartureTime: [],
        TargetAirport: [],
        BordingGate: [],
        StandForDepartrue: [],
        DepartureBuild: []
      },
      loopEvent: null,
      leaveCount: 0,
      baggageCount: 0,
      spanArr: [],
      contactDot: 0,
      flag: 0,
      position: 0
    }
  },
  created() {
    // this.getAviationData();
    // this.upAviationData();
    this.getAirPortData()
  },
  // watch: {
  //   formData() {
  //     this.getAviationData();
  //     this.upAviationData();
  //   },
  // },
  methods: {
    cellClass({ row, column, rowIndex, columnIndex }) {
      let classString = commonTableCellClass({ row, column, rowIndex, columnIndex })
      if (['FlightNO', 'PreFlightNO', 'inTransferBaggageCount'].includes(column.property)) {
        classString += '' + 'clickCell'
      }
      return classString
    },
    cellClick(row, column, cell, event) {
      switch (column.property) {
        case 'FlightNO':
          this.$router.push({ path: '/transfer/arrival/flightView', query: row })
          break
        case 'PreFlightNO': {
          const row2 = this._.cloneDeep(row)
          row2.FlightNO = row2.PreFlightNO
          this.$router.push({ path: '/transfer/arrival/flightView', query: row2 })
          break
        }
        case 'inTransferBaggageCount':
          this.$router.push({
            path: '/advance',
            query: {
              FlightNO: row.FlightNO,
              transferArrival: row.PreFlightNO,
              startDate: row.FlightDate,
              endDate: row.FlightDate
            }
          })
          break
        default:
          break
      }
    },
    changeView() {
      this.$router.replace({
        path: '/transfer/departure'
      })
    },
    airPortChange() {
      this.getAviationData()
      this.upAviationData()
      // this.getTableData();
    },
    //选择机场
    async getAirPortData() {
      try {
        const res = await getQuery({
          id: 72,
          dataContent: []
        })
        if (res.code == 0) {
          this.AirportList = res.returnData
          this.formData.currentAirport = 'PEK'
          this.getAviationData()
          this.upAviationData()
          this.getTableData()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    //选择航司
    async getAviationData() {
      try {
        const res = await getQuery({
          id: 71,
          dataContent: [this.formData.currentAirport]
        })
        if (res.code == 0) {
          this.carrierProps = res.returnData
          // this.getTableData();
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    //选择航司
    async upAviationData() {
      try {
        const res = await getQuery({
          id: 74,
          dataContent: [this.formData.currentAirport]
        })
        if (res.code == 0) {
          this.carrierPropsop = res.returnData
          // this.getTableData();
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.hasTakenOff == 0) {
        if (rowIndex == this.leaveCount - 1) {
          return 'bgl-hui redBorder'
        } else {
          return 'bgl-hui'
        }
      }
    },
    tableCellClassName({ row, column }) {
      if (
        column.property === 'transfer_all' ||
        column.property === 'departureAnomaly' ||
        column.property === 'riskWarning'
      ) {
        return 'bgl-huang'
      }
    },
    // 获取表单下拉框数据
    // getFormData(params) {
    //   this.relatedAirportQuery({
    //     ...params,
    //     type: 'OUT'
    //   })
    //   this.outgoingAirlineQuery(params)
    //   this.craftTypeQuery(params)
    //   this.flightAttrQuery(params)
    // },
    // 获取表格数据
    async getTableData() {
      if (!this.currentAirport) {
        return
      }
      let arrs1 = [this.formData.inboundCarrier.length == 0 ? '' : this.formData.inboundCarrier[0]]
      let arrs2 = [this.formData.outgoingAirline.length == 0 ? '' : this.formData.outgoingAirline[0]]
      let arr = [
        this.formData.currentAirport,
        this.formData.startDate,
        this.formData.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 getQuery({
          id: 69,
          dataContent: [...arr]
        })
        if (res.code == 0) {
          // this.tableData = this._.sortBy(res.returnData, [
          //   "FlightDate",
          //   "PlanDepartureTime",
          // ]);
          this.tableData = res.returnData
          let contactDot = this.contactDot
          this.spanArr = []
          this.tableData.forEach((item, index) => {
            item.index = index
            if (index === 0) {
              this.spanArr.push(1)
            } else {
              if (item.PreFlightNO === this.tableData[index - 1].PreFlightNO) {
                this.spanArr[contactDot] += 1
                this.spanArr.push(0)
              } else {
                this.spanArr.push(1)
                contactDot = index
              }
            }
          })
          //this.initTableData(res.returnData);
        } else {
          console.log(res.message)
        }
      } catch (error) {
        clearInterval(this.loopEvent)
        console.log('出错了', error)
      }
    },
    initTableData(tableData) {
      this.leaveCount = 0
      this.baggageCount = 0
      tableData.forEach(item => {
        if (item.hasTakenOff == 0) {
          this.leaveCount++
        }
        // item["waitfanj"] = item["noCheckInNumber"] - item["unLoad"];
        this.baggageCount = this.baggageCount + item.preLoad
      })
      this.tableData = this._.sortBy(tableData, ['PreFlightNO', 'PreFlightDate'])
      // this.setTableFilters();
      // this.toOrderNum(this.baggageCount);
      // setInterval(() => {
      //   this.baggageCount = this.baggageCount+1;
      //    // 这里输入数字即可调用
      // }, 2000);
    },
    // 表格添加过滤条件
    setTableFilters(tableData = this.tableData, filters = this.tableDataFilters) {
      const tempSets = {}
      Object.keys(filters).forEach(key => {
        tempSets[key] = new Set()
      })
      tableData.forEach(item => {
        Object.keys(tempSets).forEach(key => {
          (item[key] ?? '') !== '' && tempSets[key].add(item[key])
        })
      })
      Object.keys(tempSets).forEach(key => {
        filters[key] = this._.orderBy(
          [...tempSets[key]].map(value => ({
            text: value,
            value
          })),
          o => o.value
        )
      })
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    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()
    },
    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        [
          'PreFlightNO',
          'PreFlightDate',
          'PreAirport',
          'ActualLandingTime',
          'LandingBuild',
          'Carousel',
          'StandForLanding',
          'inTransferBaggageCount',
          'inTransferredBaggageCount',
          'FlightNO',
          'FlightDate',
          'ActualDepartureTime',
          'TargetAirport',
          'DepartureBuild',
          'BordingGate',
          'StandForDepartrue',
          'outTransferBaggageCount',
          'outTransferredBaggageCount',
          'timeDifference'
        ].includes(column['property'])
      ) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < 9; i++) {
        if (columnIndex === i) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
      // if (columnIndex === 0) {
      //   if (rowIndex == 0) {
      //     return [3, 1];
      //   } else if (rowIndex >= 3) {
      //     return [1, 2];
      //   } else {
      //     return [0, 0];
      //   }
      // } else if (columnIndex == 1) {
      //   // 第二列的大于3行的清除，避免影响样式

      //   if (rowIndex >= 3) {
      //     return [0, 0];
      //   }
      // }
    }
  },
  mounted() {
    // this.arraySpanMethod();
    let that = this
    this.loopEvent = setInterval(function () {
      // console.log(this.contactDot)
      that.getTableData()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.loopEvent)
  }
}
</script>

<style lang="scss" scoped>
.departure-form {
  padding-top: 11px;
  padding-left: 5px;
  ::v-deep .form {
    .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;
      }
      .el-button {
        &.btn-square {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 5px;
        }
      }
    }
    .checkTime {
      margin: 0 16px;
    }
    .msgImg {
      cursor: pointer;
      position: relative;
      top: 6px;
    }
  }
  .box-item {
    position: relative;
    height: 32px;
    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;
  }
}
.departure-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;
    }
    .clickCell {
      cursor: pointer;
      color: #2d7cff;
    }
    .el-table__header-wrapper {
      .cell {
        font-weight: bold;
        color: #101116;
      }
      .has-gutter {
        tr {
          .bgl-huang {
            background: #fcf0b1;
          }
        }
      }
    }
    .el-table__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;
          }
        }
      }
    }
  }
}
</style>