修改

public/config.js

@@ -5,6 +5,7 @@ window.SERVICE_ID = {
   serTableDataId: 4, //服务设置-算法配置-获取数据源名称
   sysUserAuthId: 5, //用户数据权限获取
   getUserTableId: 9, //根据账号组获取账号
+  getAirpotId: 14, //获取机场三字码
   getJqId: 10023, //获取机器维护列表
   getTableColumnId: 18122, //获取表头
   authTreeId: 18126, //获取表头

src/getMenu.js

@@ -137,7 +137,7 @@ function parseMenu (arr) {
     ? newMenus.sort((a, b) => a.meta.show_index - b.meta.show_index)
     : []
   allMenus.map(item => {
-    item.children = item.children.sort((a, b) => a.meta.show_index - b.meta.show_index)
+    item.children = item.children ?? item.children.sort((a, b) => a.meta.show_index - b.meta.show_index)
   })
   allMenus.push({
     path: '/:pathMatch(.*)',

src/store/modules/auths.js

@@ -7,7 +7,7 @@
  * @FilePath: \Foshan4A2.0\src\store\modules\auths.js
  */
 const state = {
-  authMsg: [],
+  authMsg: sessionStorage.getItem('tableColumns') ? JSON.parse(sessionStorage.getItem('tableColumns')) : [],
   authArrs: [], //新增-权限规则数据
   authList: [], //编辑-初始化数据
   authStatus: [], //删除规则-缓存

src/views/newArrival/index.vue

@@ -0,0 +1,300 @@
+<!--
+ * @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="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="结束日期" @change="dateChange" :picker-options="dateRangePickerOptions" />
+          </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%" :btnStyle="{ 'top':'-43px','right':'8px' }" :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: {}
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+    ...mapGetters(["timeZone"]),
+  },
+  created () {
+    this.getAirPortData()
+  },
+  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['arrStation_iataCd'] = 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' ? 'flightDate' : key == 'endDate' ? 'flightDate' : key
+          const r = {
+            left: '(',
+            column: column,
+            comparator,
+            value: val,
+            right: ')',
+            connector: 'and'
+          }
+          datas.push(r)
+        }
+      }
+      return datas
+    },
+    async getAirPortData (type = 1) {
+      try {
+        const res = await this.getQueryList(SERVICE_ID.getAirpotId)
+        if (Number(res.code) === 0) {
+          this.AirportList = res.returnData;
+          if (type) {
+            this.formData.currentAirport = "PEK";
+          }
+          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();
+    },
+    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>
+.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>

src/views/newArrival/mixins/form.js

@@ -0,0 +1,265 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 14:45:03
+ * @LastEditTime: 2022-06-16 10:51:52
+ * @LastEditors: your name
+ * @Description: 航站视图通用表单部分
+ * have a nice day!
+ */
+
+import { parseTime } from '@/utils'
+// const defaultStartTime = new Date(new Date(new Date().toLocaleDateString()).getTime())
+// const defaultEndTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
+const defaultDate = parseTime(new Date(), '{y}-{m}-{d}')
+const dateValidator = (rule, value, callback) => {
+  if (value && value[0] && value[1]) {
+    callback()
+  } else {
+    callback(new Error('请选择航班日期'))
+  }
+}
+
+export default {
+  data () {
+    return {
+      formData: {
+        // 搜索表单数据
+        currentAirport: [],
+        relatedAirport: [],
+        inboundCarrier: [],
+        outgoingAirline: [],
+        craftType: [],
+        flightAttr: [],
+        flightDate: [defaultDate, defaultDate],
+        // startDate: defaultDate,
+        // endDate: defaultDate,
+        search: ''
+      },
+      dateRangePickerOptions: {
+        onPick: this.dateRangePickHandler,
+        disabledDate: this.dateRangeDisabled
+      },
+      currentAirportList: [],
+      relatedAirportList: [],
+      carrierList: [],
+      craftTypeList: [],
+      flightAttrList: [],
+      currentAirportProps: {
+        // multiple: true,
+        checkStrictly: true,
+        expandTrigger: 'hover',
+        value: 'code3',
+        label: 'name',
+        children: 'builds'
+      },
+      relatedAirportProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      carrierProps: {
+        multiple: true,
+        value: 'code2',
+        label: 'name'
+      },
+      craftTypeProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      flightAttrProps: {
+        multiple: true,
+        value: 'code',
+        label: 'name'
+      },
+      // 表单规则
+      rules: {
+        currentAirport: [{ required: true, message: '请选择当前机场', trigger: ['change', 'blur'] }],
+        // startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        // endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
+        flightDate: [{ validator: dateValidator, trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  computed: {
+    currentAirport () {
+      return this.getSingleData(this.formData.currentAirport)
+    },
+    relatedAirport () {
+      return this.formData.relatedAirport.map(item => item[0])
+    },
+    inboundCarrier () {
+      return this.formData.inboundCarrier.map(item => item[0])
+    },
+    outgoingAirline () {
+      return this.formData.outgoingAirline.map(item => item[0])
+    },
+    craftType () {
+      return this.formData.craftType.map(item => item[0])
+    },
+    flightAttr () {
+      return this.formData.flightAttr.map(item => item[0])
+    },
+    startDate () {
+      // return parseTime(this.formData.startDate).split(' ')[0]
+      // return this.formData.startDate
+      return this.formData.flightDate[0]
+    },
+    endDate () {
+      // return parseTime(this.formData.endDate).split(' ')[0]
+      // return this.formData.endDate
+      return this.formData.flightDate[1]
+    }
+  },
+  watch: {
+    'formData.flightDate': {
+      handler (val) {
+
+        if (val === null) {
+          this.formData.flightDate = ['', '']
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    dateRangePickHandler ({ maxDate, minDate }) {
+      if (!maxDate) {
+        this.pickedDate = minDate
+      } else {
+        this.pickedDate = null
+      }
+    },
+    dateRangeDisabled (date) {
+      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
+    },
+    // 机场数据处理（多选）
+    getMultipleData (arr) {
+      const newArr = []
+      arr.length &&
+        arr.forEach(airport => {
+          const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === airport[0]))
+          if (temp) {
+            temp.builds = airport[1] ? [{ name: airport[1] }] : []
+            const item = newArr.find(item => item.code3 === temp.code3)
+            if (item) {
+              item.builds.push(...temp.builds)
+            } else {
+              newArr.push(temp)
+            }
+          }
+        })
+      return newArr
+    },
+    // 机场数据处理（单选）
+    getSingleData (arr) {
+      const newArr = []
+      if (arr.length > 0) {
+        const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === arr[0]))
+        if (temp) {
+          temp.builds = arr[1] ? [{ name: arr[1] }] : []
+          newArr.push(temp)
+        }
+      }
+      return newArr
+    },
+    // 清除表单数据
+    formClear (range) {
+      if (range === 'all') {
+        this.formData.currentAirport = []
+        this.currentAirportList = []
+      }
+      this.formData.relatedAirport = []
+      this.relatedAirportList = []
+      this.formData.inboundCarrier = []
+      this.formData.outgoingAirline = []
+      this.carrierList = []
+      this.formData.craftType = []
+      this.craftTypeList = []
+      this.formData.flightAttr = []
+      this.flightAttrList = []
+    },
+    // 当前机场变更
+    setCurrentAirport (data) {
+      this.formClear()
+      if (data.length === 0) {
+        return
+      }
+      const params = {
+        currentAirport: this.currentAirport,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }
+      this.getFormData(params)
+    },
+    // 日期限制
+    // startDateChangeHandler(val) {
+    //   if (!val || !this.endDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(val)
+    //   const endDate = new Date(this.endDate)
+    //   if (startDate > endDate) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('结束时间不能早于开始时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // endDateChangeHandler(val) {
+    //   if (!val || !this.startDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(this.startDate)
+    //   const endDate = new Date(val)
+    //   if (startDate > endDate) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('开始时间不能晚于结束时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // 搜索
+    onSubmit () {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const az = /^[a-zA-Z]+$/
+          const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
+          // const top2 = /^[a-zA-Z]{2}\w*$/
+          const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
+          const num = /^[0-9]+$/
+          const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
+          const queryData = {
+            startDate: this.startDate,
+            endDate: this.endDate
+          }
+          queryData['landAirport'] = this.formData.currentAirport
+          if (azNum.test(this.formData.search) && top2.test(this.formData.search) && this.formData.search.length < 8) {
+            // 字母加数字且前两位为字母则为航班号
+            queryData['carrierFlights'] = this.formData.search
+          } else if ((num.test(this.formData.search) && this.formData.search.length === 10) || ((bagNo.test(this.formData.search) && this.formData.search.length > 7))) {
+            // 纯数字且位数等于10则为行李牌号
+            queryData['luggageNum'] = this.formData.search
+          } else {
+            // this.$message.error('请输入有效查询信息如航班号、行李牌号')
+            // return
+          }
+          this.$router.push({
+            path: '/newQuery',
+            query: {
+              ...queryData,
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}

src/views/newArrival/mixins/tableCols.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:50:22
+ * @LastEditTime: 2022-03-15 17:56:34
+ * @LastEditors: your name
+ * @Description: 航站视图表格通用部分
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      // 筛选后表头
+      tableColsCopy: [],
+      // 列设置弹框选中
+      checkedKeys: [],
+      checkedKeysTemp: [],
+      halfCheckedKeys: [],
+      // 列设置弹框开关
+      dialogFlag: false
+    }
+  },
+  created() {
+    this.initTableCols()
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table?.doLayout()
+    })
+  },
+  computed: {
+    colsCheckClass() {
+      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
+    }
+  },
+  methods: {
+    // 列设置-初始化
+    initTableCols() {
+      const that = this
+      function setTableCols(cols) {
+        for (const col of cols) {
+          col.index = that.checkedKeys.length
+          that.checkedKeys.push(that.checkedKeys.length)
+          if (col.children?.length) {
+            setTableCols(col.children)
+          }
+        }
+      }
+      setTableCols(this.tableCols)
+      this.tableColsCopy = this._.cloneDeep(this.tableCols)
+      this.checkedKeysTemp = [...this.checkedKeys]
+    },
+    // 列设置-确定
+    handleCheck(data, checked) {
+      this.checkedKeysTemp = [...checked.checkedKeys]
+      this.halfCheckedKeys = [...checked.halfCheckedKeys]
+    },
+    onCheck(tableDataName = 'tableData') {
+      if (this.dialogFlag === false) {
+        return
+      }
+      this.loading = true
+      const tableDataTemp = this._.cloneDeep(this[tableDataName])
+      this[tableDataName] = []
+      this.dialogFlag = false
+      this.checkedKeys = [...this.checkedKeysTemp]
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      setTimeout(() => {
+        if (!this[tableDataName].length) {
+          this[tableDataName] = tableDataTemp
+        }
+        this.loading = false
+      }, 500)
+    },
+    colsFilter(cols) {
+      const temp = cols.filter(col => {
+        if (this.halfCheckedKeys.includes(col.index)) {
+          col.children = this.colsFilter(col.children)
+          return true
+        } else if (this.checkedKeys.includes(col.index)) {
+          return true
+        }
+        return false
+      })
+      return temp
+    },
+    // 弹框展开
+    show() {
+      this.dialogFlag = true
+    },
+    // 弹框关闭
+    hide() {
+      this.dialogFlag = false
+      this.checkedKeysTemp = [...this.checkedKeys]
+    }
+  }
+}

src/views/newArrival/mixins/terminal.js

@@ -0,0 +1,420 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:41:55
+ * @LastEditTime: 2022-08-26 15:32:54
+ * @LastEditors: your name
+ * @Description: 航站视图通用部分
+ * have a nice day!
+ */
+
+import { mapGetters } from 'vuex'
+import { commonTableCellClass } from '@/utils/table'
+
+export default {
+  data() {
+    return {
+      // 表格数据
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      spanArr: [],
+      pos: 0,
+      loading: false,
+      computedTableHeight: undefined,
+      debounceTime: 300
+    }
+  },
+  created() {
+    this.setFilterAndSort(this.tableCols)
+  },
+  updated() {
+    this.resizeHandler()
+  },
+  activated() {
+    this.resizeHandler()
+    this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
+    window.addEventListener('resize', this.debouncedResizeHandler)
+  },
+  deactivated() {
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(String(item[key]))) {
+            flag = false
+          }
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
+    }
+  },
+  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['flightNO'] === arr[index - 1]['flightNO'] &&
+              item['flightDate'] === arr[index - 1]['flightDate']
+            ) {
+              this.spanArr[contactDot] += 1
+              this.spanArr.push(0)
+            } else {
+              this.spanArr.push(1)
+              contactDot = index
+            }
+          }
+        })
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 设置表格高度
+    resizeHandler() {
+      const headerHeight = 80
+      const bottomBlankHeight = 41
+      const formWrapHeight = this.$refs['formWrap'].offsetHeight
+      this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)`
+      this.$refs.table?.doLayout()
+    },
+    // 设置筛选和排序
+    setFilterAndSort(tableCols) {
+      const self = this
+      Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => {
+        if (children) {
+          self.setFilterAndSort(children)
+        } else {
+          if (filterable) {
+            self.$set(self.tableDataFilters, prop, [])
+            self.$set(self.filterValues, prop, [])
+          }
+          if (sortable) {
+            self.$set(self.tableDataSortRules, prop, '')
+          }
+        }
+      })
+    },
+    // 合计行
+    summaryMethod({ columns, data }) {
+      const sums = []
+      if (columns.length > 0) {
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+          } else if (index === 1) {
+            sums[index] = '航班数：' + this.tableData.length
+          } else if (
+            // 需要计算的列
+            [
+              'passagernum',
+              'checkNumber',
+              'not_actived',
+              'expect_load',
+              'security_all',
+              'sortNumber',
+              'loadNumber',
+              'boardID',
+              'toUnload',
+              'OFFCount',
+              'delbag',
+              'noBSM',
+              'reach',
+              'did_not_arrive',
+              'special',
+              'claim',
+              'uninstalled',
+              'terminateArrive',
+              'terminatedNotArrived',
+              'delivered',
+              'not_shipped',
+              'container',
+              'bulk',
+              'checkInTravellerNumber',
+              'checkInNumber',
+              'unActive',
+              'preLoad',
+              'noCheckInNumber',
+              'midIn',
+              'checkIns',
+              'projectedLoad',
+              'loadedQuantity',
+              'numberOfDestinationArrivals',
+              'endPointNotReached',
+              'specialQuantity',
+              'numberOfClaims',
+              'numberToBeUninstalled',
+              'terminateArrivalQuantity',
+              'terminateUnreachedQuantity',
+              'quantityShipped',
+              'undeliveredQuantity',
+              'numberOfContainers',
+              'numberOfBulk',
+              'inTransferBaggageCount',
+              'inTransferredBaggageCount',
+              'outTransferBaggageCount',
+              'outTransferredBaggageCount',
+              'exceptions',
+              'warning'
+            ].includes(column.property)
+          ) {
+            const values = data.map(item => Number(item[column.property]))
+            if (values.some(value => !isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return Number(prev) + Number(curr)
+                } else {
+                  return Number(prev)
+                }
+              }, 0)
+            } else {
+              sums[index] = 0
+            }
+          } else {
+            // 过滤某些字段不参与计算
+            sums[index] = '-'
+          }
+        })
+      }
+      return sums
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = commonTableCellClass({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      })
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === this.$route.name &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      if (column.property === 'toUnload' && row[column.property]) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        const path = `${this.$route.path}/flightView`
+        const query = {}
+        switch (column.property) {
+          case 'flightNO':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate
+            })
+            break
+          case 'preFlightNO':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate
+            })
+            break
+          case 'inTransferBaggageCount':
+          case 'outTransferBaggageCount':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate,
+              fastFilter: `transferFlightNO,${row.flightNO}`
+            })
+            break
+          case 'inTransferredBaggageCount':
+          case 'outTransferredBaggageCount':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: `inFlightNO,${row.preFlightNO}`
+            })
+            break
+          case 'warning':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: row['warningState'] === 1 ? 'warning' : 'alarm'
+            })
+            break
+          default: {
+            const reflect = {
+              toUnload: 'toUnload', // 装车或装机后，isDEL为'DEL'，waitOFF为1
+              OFFCount: 'unloaded', // 装车或装机后，isDEL为'DEL'，waitOFF为0
+              unActive: 'unActive', // STATUS为'I'
+              preLoad: 'preLoad', // STATUS不为'I'，isDEL不为'del'
+              projectedLoad: 'preLoad',
+              midIn: 'inFlightNO',
+              noCheckInNumber: 'canceled', // isDEL为'DEL'
+              noBSM: 'NOBSM', // 1/0
+              checkInNumber: 'checkInTime',
+              checkNumber: 'securityTime',
+              sortNumber: 'sortTime',
+              loadNumber: 'loadTime',
+              boardID: 'inflTime',
+              checkIns: 'checkInTime',
+              numberOfDestinationArrivals: 'arrivedID', // 1/0
+              uninstalled: 'unloadID', // 1/0
+              loadedQuantity: 'loaded', // 'loadTime'不为空，isDEL不为'DEL'
+              terminateArrivalQuantity: 'destination', // 'arrivedID'为1，transferFlightNO为null
+              numberOfContainers: 'inContainer', // 有容器ID
+              numberOfBulk: 'FBULK' // 容器ID为'FBULK'
+            }
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: reflect[column.property]
+            })
+            break
+          }
+        }
+        switch (this.$route.path.split('/').at(-1)) {
+          case 'departure':
+            Object.assign(query, {
+              departureAirport: this.formData.currentAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          case 'arrival':
+            Object.assign(query, {
+              departureAirport: row.departureAirport ?? '',
+              landingAirport: this.formData.currentAirport ?? ''
+            })
+            break
+          case 'transferDeparture':
+          case 'transferArrival':
+            Object.assign(query, {
+              departureAirport: row.preAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          default:
+            break
+        }
+        this.$router.push({
+          path,
+          query
+        })
+      }
+    }
+  }
+}

src/views/newArrival/mixins/timeZone.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-05-17 17:04:32
+ * @LastEditTime: 2022-05-27 15:04:44
+ * @LastEditors: your name
+ * @Description: 时区相关
+ * have a nice day!
+ */
+import { timeInZone } from '@/utils/table'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters(['timeZone'])
+  },
+  methods: {
+    // 表格数据格式化
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'arrivalTime':
+        case 'planDepartureTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone)
+        case 'actualDepartureTime':
+        case 'actualLandingTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone).replace(' ', '\n')
+        case 'checkInTime':
+        case 'securityTime':
+        case 'sortTime':
+        case 'loadTime':
+        case 'inflTime':
+          return cellValue ? `${timeInZone(cellValue.split(',')[0], this.timeZone)}\n${cellValue.split(',')[1]}` : ''
+        // return `${cellValue ?? ''}\n${getTimeInZone(row['checkInTime'], this.timeZone)}`
+        // case 'DealInfo':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['DealTime'], this.timeZone)}`
+        // case 'sortLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['sortDealTime'], this.timeZone)}`
+        // case 'loadLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['loadDealTime'], this.timeZone)}`
+        // case 'inflLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['inflLoadDealTime'], this.timeZone)}`
+        case 'timeDifference':
+          return cellValue <= -120 ? '-2h+' : cellValue >= 120 ? '2h+' : cellValue
+        default:
+          return cellValue ?? ''
+      }
+    }
+  }
+}

src/views/newBagDetails/components/baggageView.vue

@@ -8,21 +8,21 @@
               <div class="title">
                 <div class="fightNo">{{ item.carrierFlights || item.inflightNo }}</div>
                 <div class="fightDate">{{ item.carrierFlightsDate || item.inflightDate }}</div>
-                <div class="fightLine">{{ item.outAirport }}{{ item.takeoff_terminal }} -- {{item.andAirport}}{{ item.target_terminal }}</div>
-                <div class="fightTime">08:22 -- 10:22</div>
+                <div class="fightLine">{{ item.outAirport }}{{ item.takeoff_terminal }} -- {{item.landAirport}}{{ item.target_terminal }}</div>
+                <div class="fightTime">{{ item.takeoff_time }} -- {{ item.land_time }}</div>
               </div>
               <div class="baggage-track-chart">
                 <div class="step-line">
-                  <div v-for="(line, index) in 6" :key="index" :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]"></div>
+                  <div v-for="(line, index) in 6" :key="index" :class="['step-line-segment', { 'step-line-active': activeStepLine(index,item.bagStatus) }]"></div>
                 </div>
                 <div v-for="(p, index) in item.bagStatus" :key="index" :class="{ 'step-item': true, 'active-item': p.timeValue }">
                   <div class="step-circle">
                     <span class="step-name">{{ p.nodeName }}</span>
                   </div>
-                  <div v-if="p.timeValue" class="step-info">
-                    <!-- <div :class="statusClasses(item.currentResult)">{{ item.currentResult }}</div> -->
+                  <div v-if="p.timeValue || p.stateValue || p.loclValue" class="step-info">
+                    <div :class="statusClasses(p.stateValue)">{{ p.stateValue }}</div>
                     <span class="step-time">{{ p.timeValue }}</span>
-                    <!-- <div class="step-location">{{ item.locationId }}</div> -->
+                    <div class="step-location">{{ p.loclValue }}</div>
                   </div>
                   <div v-else class="step-info">无</div>
                 </div>
@@ -41,7 +41,7 @@ export default {
   name: 'BaggageView',
   mixins: [pf],
   props: {
-    query: {
+    queryObj: {
       type: Object,
       default: () => { }
     },
@@ -57,43 +57,71 @@ export default {
           nodeCode: 'CHECKIN',
           nodeName: '值机',
           timeProp: 'checkInDate',
-          timeValue: ''
+          timeValue: '',
+          loclProp: 'checkInLocation',
+          loclValue: '',
+          stateProp: 'checkState',
+          stateValue: '',
         },
         {
           nodeCode: 'SECURITY',
           nodeName: '安检',
           timeProp: 'security_check_time',
-          timeValue: ''
+          timeValue: '',
+          loclProp: 'security_location',
+          loclValue: '',
+          stateProp: 'securityInspectionResults',
+          stateValue: '',
         },
         {
           nodeCode: 'SORT',
           nodeName: '分拣',
           timeProp: 'sorting_time',
-          timeValue: ''
+          timeValue: '',
+          loclProp: 'sorting_location',
+          loclValue: '',
+          stateProp: 'sortState',
+          stateValue: '',
         },
         {
           nodeCode: 'LOAD',
           nodeName: '装车',
           timeProp: 'loading_time',
-          timeValue: ''
+          timeValue: '',
+          loclProp: 'installationAddress',
+          loclValue: '',
+          stateProp: 'loadState',
+          stateValue: '',
         },
         {
           nodeCode: 'INFL',
           nodeName: '装机',
           timeProp: 'installation_time',
-          timeValue: ''
+          timeValue: '',
+          loclProp: 'installation_location',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
         },
         {
           nodeCode: 'UNLOAD',
           nodeName: '卸机',
-          timeProp: 'sorting_time',
-          timeValue: ''
+          timeProp: 'unloadtime',
+          timeValue: '',
+          loclProp: 'unloadLocation',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
         },
         {
           nodeCode: 'ARRIVED',
           nodeName: '到达',
-          timeProp: 'sorting_time',
-          timeValue: ''
+          timeProp: 'arrivedtime',
+          timeValue: '',
+          loclProp: 'arrviedLocation',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
         }
       ],
       tableData: [],
@@ -106,12 +134,8 @@ export default {
   },
   computed: {
     activeStepLine () {
-      return function (index) {
-        if ((this.tableData[index] && this.tableData[index].bagStatus) && (this.tableData[index + 1] && this.tableData[index + 1].bagStatus)) {
-          return this.tableData[index].bagStatus[index].timeValue && this.tableData[index + 1].bagStatus[index + 1].timeValue
-        } else {
-          return false
-        }
+      return function (index, arrs) {
+        return (arrs[index].stateValue || arrs[index].loclValue || arrs[index].timeValue) && (arrs[index + 1].stateValue || arrs[index + 1].loclValue || arrs[index + 1].timeValue)
       }
     },
     statusClasses () {
@@ -136,10 +160,18 @@ export default {
         this.load()
       },
       deep: true
+    },
+    queryObj: {
+      handler (obj) {
+        this.dataContent = obj
+        this.restTable()
+        this.load()
+      },
+      deep: true
     }
   },
   created () {
-    this.dataContent = this.query
+    this.dataContent = this.queryObj
   },
   methods: {
     //获取行李信息
@@ -157,11 +189,14 @@ export default {
             item.bagStatus = this.stepNodes
           })
           this.tableData.push(...returnData);
+          this.tableData = _.uniqBy(this.tableData, 'carrierFlights')
           this.tableData.forEach(item => {
             item.bagStatus.map(p => {
-              const { timeProp } = p
-              if (item.hasOwnProperty(timeProp)) {
+              const { timeProp, loclProp, stateProp } = p
+              if (item.hasOwnProperty(timeProp) || item.hasOwnProperty(loclProp) || item.hasOwnProperty(stateProp)) {
                 p.timeValue = item[timeProp]
+                p.loclValue = item[loclProp]
+                p.stateValue = item[stateProp]
               }
             })
           })
@@ -172,6 +207,7 @@ export default {
           this.$message.error("获取表格数据失败");
         }
       } catch (error) {
+        this.loading = false;
         console.log(error)
       }
     },

src/views/newBagDetails/index.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="newBagDetails-contents-page">
-        <component ref="dataChild" :query="query" :tableDatas="tableDatas" :tagObj="tagObj" :is="componentName"></component>
+        <component ref="dataChild" :query="query" :queryObj="queryObj" :tableDatas="tableDatas" :tagObj="tagObj" :is="componentName"></component>
       </div>
     </div>
   </div>
@@ -84,7 +84,8 @@ export default {
       tagObj: {},
       tableDatas: [],
       tableDatas5Id: '',
-      loading: false
+      loading: false,
+      queryObj: {}
     }
   },
   created () {
@@ -135,6 +136,11 @@ export default {
           const datasObj = [...returnData][0]
           this.passengerName = datasObj['passengerName']
           this.PNRNO = datasObj['PNRNO']
+          const { luggageNum } = this.query
+          this.queryObj = {
+            luggageNum,
+            PNRNO: datasObj['PNRNO']
+          }
           for (const key in datasObj) {
             this.infoArrs.map(item => {
               if (item.columnName == key) {
@@ -160,11 +166,9 @@ export default {
     //获取行李号
     async getLuggageNums () {
       try {
-        const { carrierFlights, carrierFlightsDate } = this.query
         const { code, returnData } = await this.getQueryList(SERVICE_ID.bagTableId, {
           PNRNO: this.PNRNO,
-          carrierFlightsDate,
-          carrierFlights
+          passengerName: this.passengerName,
         })
         if (code == 0 && returnData && returnData.length) {
           this.detailsArr = [...returnData]

src/views/newDeparture/index.vue

@@ -0,0 +1,300 @@
+<!--
+ * @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="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%" :btnStyle="{ 'top':'-43px','right':'8px' }" :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: {}
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+    ...mapGetters(["timeZone"]),
+  },
+  created () {
+    this.getAirPortData()
+  },
+  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['depStation_iataCd'] = 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' ? 'flightDate' : key == 'endDate' ? 'flightDate' : key
+          const r = {
+            left: '(',
+            column: column,
+            comparator,
+            value: val,
+            right: ')',
+            connector: 'and'
+          }
+          datas.push(r)
+        }
+      }
+      return datas
+    },
+    async getAirPortData (type = 1) {
+      try {
+        const res = await this.getQueryList(SERVICE_ID.getAirpotId)
+        if (Number(res.code) === 0) {
+          this.AirportList = res.returnData;
+          if (type) {
+            this.formData.currentAirport = "PEK";
+          }
+          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();
+    },
+    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>
+.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>

src/views/newDeparture/mixins/form.js

@@ -0,0 +1,265 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 14:45:03
+ * @LastEditTime: 2022-06-16 10:51:52
+ * @LastEditors: your name
+ * @Description: 航站视图通用表单部分
+ * have a nice day!
+ */
+
+import { parseTime } from '@/utils'
+// const defaultStartTime = new Date(new Date(new Date().toLocaleDateString()).getTime())
+// const defaultEndTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
+const defaultDate = parseTime(new Date(), '{y}-{m}-{d}')
+const dateValidator = (rule, value, callback) => {
+  if (value && value[0] && value[1]) {
+    callback()
+  } else {
+    callback(new Error('请选择航班日期'))
+  }
+}
+
+export default {
+  data () {
+    return {
+      formData: {
+        // 搜索表单数据
+        currentAirport: [],
+        relatedAirport: [],
+        inboundCarrier: [],
+        outgoingAirline: [],
+        craftType: [],
+        flightAttr: [],
+        flightDate: [defaultDate, defaultDate],
+        // startDate: defaultDate,
+        // endDate: defaultDate,
+        search: ''
+      },
+      dateRangePickerOptions: {
+        onPick: this.dateRangePickHandler,
+        disabledDate: this.dateRangeDisabled
+      },
+      currentAirportList: [],
+      relatedAirportList: [],
+      carrierList: [],
+      craftTypeList: [],
+      flightAttrList: [],
+      currentAirportProps: {
+        // multiple: true,
+        checkStrictly: true,
+        expandTrigger: 'hover',
+        value: 'code3',
+        label: 'name',
+        children: 'builds'
+      },
+      relatedAirportProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      carrierProps: {
+        multiple: true,
+        value: 'code2',
+        label: 'name'
+      },
+      craftTypeProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      flightAttrProps: {
+        multiple: true,
+        value: 'code',
+        label: 'name'
+      },
+      // 表单规则
+      rules: {
+        currentAirport: [{ required: true, message: '请选择当前机场', trigger: ['change', 'blur'] }],
+        // startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        // endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
+        flightDate: [{ validator: dateValidator, trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  computed: {
+    currentAirport () {
+      return this.getSingleData(this.formData.currentAirport)
+    },
+    relatedAirport () {
+      return this.formData.relatedAirport.map(item => item[0])
+    },
+    inboundCarrier () {
+      return this.formData.inboundCarrier.map(item => item[0])
+    },
+    outgoingAirline () {
+      return this.formData.outgoingAirline.map(item => item[0])
+    },
+    craftType () {
+      return this.formData.craftType.map(item => item[0])
+    },
+    flightAttr () {
+      return this.formData.flightAttr.map(item => item[0])
+    },
+    startDate () {
+      // return parseTime(this.formData.startDate).split(' ')[0]
+      // return this.formData.startDate
+      return this.formData.flightDate[0]
+    },
+    endDate () {
+      // return parseTime(this.formData.endDate).split(' ')[0]
+      // return this.formData.endDate
+      return this.formData.flightDate[1]
+    }
+  },
+  watch: {
+    'formData.flightDate': {
+      handler (val) {
+
+        if (val === null) {
+          this.formData.flightDate = ['', '']
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    dateRangePickHandler ({ maxDate, minDate }) {
+      if (!maxDate) {
+        this.pickedDate = minDate
+      } else {
+        this.pickedDate = null
+      }
+    },
+    dateRangeDisabled (date) {
+      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
+    },
+    // 机场数据处理（多选）
+    getMultipleData (arr) {
+      const newArr = []
+      arr.length &&
+        arr.forEach(airport => {
+          const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === airport[0]))
+          if (temp) {
+            temp.builds = airport[1] ? [{ name: airport[1] }] : []
+            const item = newArr.find(item => item.code3 === temp.code3)
+            if (item) {
+              item.builds.push(...temp.builds)
+            } else {
+              newArr.push(temp)
+            }
+          }
+        })
+      return newArr
+    },
+    // 机场数据处理（单选）
+    getSingleData (arr) {
+      const newArr = []
+      if (arr.length > 0) {
+        const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === arr[0]))
+        if (temp) {
+          temp.builds = arr[1] ? [{ name: arr[1] }] : []
+          newArr.push(temp)
+        }
+      }
+      return newArr
+    },
+    // 清除表单数据
+    formClear (range) {
+      if (range === 'all') {
+        this.formData.currentAirport = []
+        this.currentAirportList = []
+      }
+      this.formData.relatedAirport = []
+      this.relatedAirportList = []
+      this.formData.inboundCarrier = []
+      this.formData.outgoingAirline = []
+      this.carrierList = []
+      this.formData.craftType = []
+      this.craftTypeList = []
+      this.formData.flightAttr = []
+      this.flightAttrList = []
+    },
+    // 当前机场变更
+    setCurrentAirport (data) {
+      this.formClear()
+      if (data.length === 0) {
+        return
+      }
+      const params = {
+        currentAirport: this.currentAirport,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }
+      this.getFormData(params)
+    },
+    // 日期限制
+    // startDateChangeHandler(val) {
+    //   if (!val || !this.endDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(val)
+    //   const endDate = new Date(this.endDate)
+    //   if (startDate > endDate) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('结束时间不能早于开始时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // endDateChangeHandler(val) {
+    //   if (!val || !this.startDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(this.startDate)
+    //   const endDate = new Date(val)
+    //   if (startDate > endDate) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('开始时间不能晚于结束时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // 搜索
+    onSubmit () {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const az = /^[a-zA-Z]+$/
+          const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
+          // const top2 = /^[a-zA-Z]{2}\w*$/
+          const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
+          const num = /^[0-9]+$/
+          const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
+          const queryData = {
+            startDate: this.startDate,
+            endDate: this.endDate
+          }
+          queryData['outAirport'] = this.formData.currentAirport
+          if (azNum.test(this.formData.search) && top2.test(this.formData.search) && this.formData.search.length < 8) {
+            // 字母加数字且前两位为字母则为航班号
+            queryData['carrierFlights'] = this.formData.search
+          } else if ((num.test(this.formData.search) && this.formData.search.length === 10) || ((bagNo.test(this.formData.search) && this.formData.search.length > 7))) {
+            // 纯数字且位数等于10则为行李牌号
+            queryData['luggageNum'] = this.formData.search
+          } else {
+            // this.$message.error('请输入有效查询信息如航班号、行李牌号')
+            // return
+          }
+          this.$router.push({
+            path: '/newQuery',
+            query: {
+              ...queryData
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}

src/views/newDeparture/mixins/tableCols.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:50:22
+ * @LastEditTime: 2022-03-15 17:56:34
+ * @LastEditors: your name
+ * @Description: 航站视图表格通用部分
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      // 筛选后表头
+      tableColsCopy: [],
+      // 列设置弹框选中
+      checkedKeys: [],
+      checkedKeysTemp: [],
+      halfCheckedKeys: [],
+      // 列设置弹框开关
+      dialogFlag: false
+    }
+  },
+  created() {
+    this.initTableCols()
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table?.doLayout()
+    })
+  },
+  computed: {
+    colsCheckClass() {
+      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
+    }
+  },
+  methods: {
+    // 列设置-初始化
+    initTableCols() {
+      const that = this
+      function setTableCols(cols) {
+        for (const col of cols) {
+          col.index = that.checkedKeys.length
+          that.checkedKeys.push(that.checkedKeys.length)
+          if (col.children?.length) {
+            setTableCols(col.children)
+          }
+        }
+      }
+      setTableCols(this.tableCols)
+      this.tableColsCopy = this._.cloneDeep(this.tableCols)
+      this.checkedKeysTemp = [...this.checkedKeys]
+    },
+    // 列设置-确定
+    handleCheck(data, checked) {
+      this.checkedKeysTemp = [...checked.checkedKeys]
+      this.halfCheckedKeys = [...checked.halfCheckedKeys]
+    },
+    onCheck(tableDataName = 'tableData') {
+      if (this.dialogFlag === false) {
+        return
+      }
+      this.loading = true
+      const tableDataTemp = this._.cloneDeep(this[tableDataName])
+      this[tableDataName] = []
+      this.dialogFlag = false
+      this.checkedKeys = [...this.checkedKeysTemp]
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      setTimeout(() => {
+        if (!this[tableDataName].length) {
+          this[tableDataName] = tableDataTemp
+        }
+        this.loading = false
+      }, 500)
+    },
+    colsFilter(cols) {
+      const temp = cols.filter(col => {
+        if (this.halfCheckedKeys.includes(col.index)) {
+          col.children = this.colsFilter(col.children)
+          return true
+        } else if (this.checkedKeys.includes(col.index)) {
+          return true
+        }
+        return false
+      })
+      return temp
+    },
+    // 弹框展开
+    show() {
+      this.dialogFlag = true
+    },
+    // 弹框关闭
+    hide() {
+      this.dialogFlag = false
+      this.checkedKeysTemp = [...this.checkedKeys]
+    }
+  }
+}

src/views/newDeparture/mixins/terminal.js

@@ -0,0 +1,420 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:41:55
+ * @LastEditTime: 2022-08-26 15:32:54
+ * @LastEditors: your name
+ * @Description: 航站视图通用部分
+ * have a nice day!
+ */
+
+import { mapGetters } from 'vuex'
+import { commonTableCellClass } from '@/utils/table'
+
+export default {
+  data() {
+    return {
+      // 表格数据
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      spanArr: [],
+      pos: 0,
+      loading: false,
+      computedTableHeight: undefined,
+      debounceTime: 300
+    }
+  },
+  created() {
+    this.setFilterAndSort(this.tableCols)
+  },
+  updated() {
+    this.resizeHandler()
+  },
+  activated() {
+    this.resizeHandler()
+    this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
+    window.addEventListener('resize', this.debouncedResizeHandler)
+  },
+  deactivated() {
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(String(item[key]))) {
+            flag = false
+          }
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
+    }
+  },
+  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['flightNO'] === arr[index - 1]['flightNO'] &&
+              item['flightDate'] === arr[index - 1]['flightDate']
+            ) {
+              this.spanArr[contactDot] += 1
+              this.spanArr.push(0)
+            } else {
+              this.spanArr.push(1)
+              contactDot = index
+            }
+          }
+        })
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 设置表格高度
+    resizeHandler() {
+      const headerHeight = 80
+      const bottomBlankHeight = 41
+      const formWrapHeight = this.$refs['formWrap'].offsetHeight
+      this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)`
+      this.$refs.table?.doLayout()
+    },
+    // 设置筛选和排序
+    setFilterAndSort(tableCols) {
+      const self = this
+      Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => {
+        if (children) {
+          self.setFilterAndSort(children)
+        } else {
+          if (filterable) {
+            self.$set(self.tableDataFilters, prop, [])
+            self.$set(self.filterValues, prop, [])
+          }
+          if (sortable) {
+            self.$set(self.tableDataSortRules, prop, '')
+          }
+        }
+      })
+    },
+    // 合计行
+    summaryMethod({ columns, data }) {
+      const sums = []
+      if (columns.length > 0) {
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+          } else if (index === 1) {
+            sums[index] = '航班数：' + this.tableData.length
+          } else if (
+            // 需要计算的列
+            [
+              'passagernum',
+              'checkNumber',
+              'not_actived',
+              'expect_load',
+              'security_all',
+              'sortNumber',
+              'loadNumber',
+              'boardID',
+              'toUnload',
+              'OFFCount',
+              'delbag',
+              'noBSM',
+              'reach',
+              'did_not_arrive',
+              'special',
+              'claim',
+              'uninstalled',
+              'terminateArrive',
+              'terminatedNotArrived',
+              'delivered',
+              'not_shipped',
+              'container',
+              'bulk',
+              'checkInTravellerNumber',
+              'checkInNumber',
+              'unActive',
+              'preLoad',
+              'noCheckInNumber',
+              'midIn',
+              'checkIns',
+              'projectedLoad',
+              'loadedQuantity',
+              'numberOfDestinationArrivals',
+              'endPointNotReached',
+              'specialQuantity',
+              'numberOfClaims',
+              'numberToBeUninstalled',
+              'terminateArrivalQuantity',
+              'terminateUnreachedQuantity',
+              'quantityShipped',
+              'undeliveredQuantity',
+              'numberOfContainers',
+              'numberOfBulk',
+              'inTransferBaggageCount',
+              'inTransferredBaggageCount',
+              'outTransferBaggageCount',
+              'outTransferredBaggageCount',
+              'exceptions',
+              'warning'
+            ].includes(column.property)
+          ) {
+            const values = data.map(item => Number(item[column.property]))
+            if (values.some(value => !isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return Number(prev) + Number(curr)
+                } else {
+                  return Number(prev)
+                }
+              }, 0)
+            } else {
+              sums[index] = 0
+            }
+          } else {
+            // 过滤某些字段不参与计算
+            sums[index] = '-'
+          }
+        })
+      }
+      return sums
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = commonTableCellClass({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      })
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === this.$route.name &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      if (column.property === 'toUnload' && row[column.property]) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        const path = `${this.$route.path}/flightView`
+        const query = {}
+        switch (column.property) {
+          case 'flightNO':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate
+            })
+            break
+          case 'preFlightNO':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate
+            })
+            break
+          case 'inTransferBaggageCount':
+          case 'outTransferBaggageCount':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate,
+              fastFilter: `transferFlightNO,${row.flightNO}`
+            })
+            break
+          case 'inTransferredBaggageCount':
+          case 'outTransferredBaggageCount':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: `inFlightNO,${row.preFlightNO}`
+            })
+            break
+          case 'warning':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: row['warningState'] === 1 ? 'warning' : 'alarm'
+            })
+            break
+          default: {
+            const reflect = {
+              toUnload: 'toUnload', // 装车或装机后，isDEL为'DEL'，waitOFF为1
+              OFFCount: 'unloaded', // 装车或装机后，isDEL为'DEL'，waitOFF为0
+              unActive: 'unActive', // STATUS为'I'
+              preLoad: 'preLoad', // STATUS不为'I'，isDEL不为'del'
+              projectedLoad: 'preLoad',
+              midIn: 'inFlightNO',
+              noCheckInNumber: 'canceled', // isDEL为'DEL'
+              noBSM: 'NOBSM', // 1/0
+              checkInNumber: 'checkInTime',
+              checkNumber: 'securityTime',
+              sortNumber: 'sortTime',
+              loadNumber: 'loadTime',
+              boardID: 'inflTime',
+              checkIns: 'checkInTime',
+              numberOfDestinationArrivals: 'arrivedID', // 1/0
+              uninstalled: 'unloadID', // 1/0
+              loadedQuantity: 'loaded', // 'loadTime'不为空，isDEL不为'DEL'
+              terminateArrivalQuantity: 'destination', // 'arrivedID'为1，transferFlightNO为null
+              numberOfContainers: 'inContainer', // 有容器ID
+              numberOfBulk: 'FBULK' // 容器ID为'FBULK'
+            }
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: reflect[column.property]
+            })
+            break
+          }
+        }
+        switch (this.$route.path.split('/').at(-1)) {
+          case 'departure':
+            Object.assign(query, {
+              departureAirport: this.formData.currentAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          case 'arrival':
+            Object.assign(query, {
+              departureAirport: row.departureAirport ?? '',
+              landingAirport: this.formData.currentAirport ?? ''
+            })
+            break
+          case 'transferDeparture':
+          case 'transferArrival':
+            Object.assign(query, {
+              departureAirport: row.preAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          default:
+            break
+        }
+        this.$router.push({
+          path,
+          query
+        })
+      }
+    }
+  }
+}

src/views/newDeparture/mixins/timeZone.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-05-17 17:04:32
+ * @LastEditTime: 2022-05-27 15:04:44
+ * @LastEditors: your name
+ * @Description: 时区相关
+ * have a nice day!
+ */
+import { timeInZone } from '@/utils/table'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters(['timeZone'])
+  },
+  methods: {
+    // 表格数据格式化
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'arrivalTime':
+        case 'planDepartureTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone)
+        case 'actualDepartureTime':
+        case 'actualLandingTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone).replace(' ', '\n')
+        case 'checkInTime':
+        case 'securityTime':
+        case 'sortTime':
+        case 'loadTime':
+        case 'inflTime':
+          return cellValue ? `${timeInZone(cellValue.split(',')[0], this.timeZone)}\n${cellValue.split(',')[1]}` : ''
+        // return `${cellValue ?? ''}\n${getTimeInZone(row['checkInTime'], this.timeZone)}`
+        // case 'DealInfo':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['DealTime'], this.timeZone)}`
+        // case 'sortLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['sortDealTime'], this.timeZone)}`
+        // case 'loadLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['loadDealTime'], this.timeZone)}`
+        // case 'inflLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['inflLoadDealTime'], this.timeZone)}`
+        case 'timeDifference':
+          return cellValue <= -120 ? '-2h+' : cellValue >= 120 ? '2h+' : cellValue
+        default:
+          return cellValue ?? ''
+      }
+    }
+  }
+}

src/views/newQuery/components/search.vue

@@ -231,10 +231,11 @@ export default {
           const datas = []
           const types = []
           arr.forEach(item => {
-            if (item.value.includes('-')) {
+            if (isNaN(item.value) && !isNaN(Date.parse(item.value))) {
               types.push('date')
+            } else {
+              types.push('text')
             }
-            types.push('text')
             const obj = {
               leftBrackets: item.left,
               paramKey: item.column,
@@ -245,10 +246,11 @@ export default {
             }
             datas.push(obj)
           })
-          this.paramsTableCols[3].inputType = types
+          this.queryHandler()
           setTimeout(() => {
+            this.paramsTableCols[3].inputType = types
             this.paramsForm.params = datas
-          }, 20);
+          }, 200);
         } else {
           this.paramsForm.params = []
         }
@@ -257,12 +259,7 @@ export default {
     },
   },
   mounted () {
-    const colDatas = this.authMsg
-    if (colDatas && colDatas.length) {
-      const columns = colDatas.filter(item => item.is_search == 1)
-      const datas = columns.sort((a, b) => b.orderNumber - a.orderNumber)
-      this.getColumnSet(datas)
-    }
+    this.queryHandler()
   },
   deactivated () {
     this.loading = false
@@ -271,47 +268,15 @@ export default {
     this.loading = false
   },
   methods: {
-    queryHandler (query) {
-      // let queryFlag = false
-      // const { singleJump } = query
-      // const queryEntries = Object.entries(query)
-      // if (queryEntries.length) {
-      //   this.clearForm()
-      //   queryEntries.forEach(([key, value]) => {
-      //     if ((value ?? '') !== '') {
-      //       queryFlag = true
-      //       switch (key) {
-      //         case 'singleJump':
-      //           break
-      //         case 'startDate':
-      //           this.$set(this.flightDate, 0, value)
-      //           break
-      //         case 'endDate':
-      //           this.$set(this.flightDate, 1, value)
-      //           break
-      //         case 'unLoad':
-      //         case 'checkIn':
-      //         case 'active':
-      //         case 'transferIn':
-      //         case 'canceled':
-      //           this.paramsForm.params.push({
-      //             leftBrackets: '',
-      //             paramKey: key,
-      //             comparisonOperator: '=',
-      //             paramValue: value,
-      //             rightBrackets: '',
-      //             connector: 'and'
-      //           })
-      //           break
-      //         default:
-      //           break
-      //       }
-      //     }
-      //   })
-      // }
-      // if (queryFlag) {
-      //   this.advancedQueryHandler(singleJump)
-      // }
+    queryHandler () {
+      console.log('ddd')
+      const colDatas = this.authMsg
+      console.log(colDatas)
+      if (colDatas && colDatas.length) {
+        const columns = colDatas.filter(item => item.is_search == 1)
+        const datas = columns.sort((a, b) => b.orderNumber - a.orderNumber)
+        this.getColumnSet(datas)
+      }
     },
     dateRangePickHandler ({ maxDate, minDate }) {
       if (!maxDate) {

src/views/newQuery/components/table.vue

@@ -5,7 +5,7 @@
       </el-table-column>
     </el-table>
     <template v-if="istableCol">
-      <div class="btns">
+      <div :style="btnStyle" class="btns">
         <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
       </div>
       <Dialog :flag="dialogFlag" width="600px" class="dialog-check-group">
@@ -63,7 +63,11 @@ export default {
     istableCol: {
       type: Boolean,
       default: false,
-    }
+    },
+    btnStyle: {
+      type: Object,
+      default: () => { }
+    },
   },
   data () {
     return {
@@ -133,9 +137,12 @@ export default {
         if (code == 0) {
           if (returnData && returnData.length) {
             if (!this.istableCol) {
+              sessionStorage.setItem('tableColumns', JSON.stringify(returnData))
               this.$store.dispatch('auth/changeAuthMsg', returnData)
             }
-            this.tableCols = returnData.sort((a, b) => b.orderNumber - a.orderNumber);
+            const msgDatas = returnData.sort((a, b) => b.orderNumber - a.orderNumber);
+            const msgDatasShows = msgDatas.filter((item) => item.needShow);
+            this.tableCols = _.cloneDeep(msgDatasShows);
             this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
             this.initTableCols();
           }

src/views/newQuery/index.vue

@@ -109,6 +109,36 @@ export default {
       }
     }
   },
+  mounted () {
+    const { query } = this.$route
+    if (query && Object.keys(query).length) {
+      const queryData = query
+      const datas = []
+      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)
+        }
+      }
+      this.flag = true
+      setTimeout(() => {
+        this.dataQuery = datas
+        this.tableTag = {
+          filter: datas
+        }
+      }, 50);
+    }
+  },
   methods: {
     //删除查询条件
     handleRemove (item) {