修改高级查询

src/views/advancedQuery/views/advancedHome.vue

@@ -25,43 +25,17 @@
             @change="endDateChangeHandler"
           />
         </div> -->
-        <el-date-picker
-          v-model="flightDate"
-          size="small"
-          type="daterange"
-          value-format="yyyy-MM-dd"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="dateRangePickerOptions"
-          :clearable="false"
-        />
+        <el-date-picker v-model="flightDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" />
       </div>
-      <Search
-        ref="search"
-        class="advanced-search"
-        :is-title="false"
-        :is-slot="true"
-        :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'"
-        @getSearchData="getSearchData"
-        @clearSearchData="clearSearchData"
-      >
+      <Search ref="search" class="advanced-search" :is-title="false" :is-slot="true" :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'" @getSearchData="getSearchData" @clearSearchData="clearSearchData">
         <div class="flex-wrap">
-          <button
-            class="btnAn"
-            @click="dialogShow"
-          >
+          <button class="btnAn" @click="dialogShow">
             高级查询
           </button>
-          <button
-            class="btnAn"
-            @click="exportHandler('table', '高级查询结果')"
-          >
+          <button class="btnAn" @click="exportHandler('table', '高级查询结果')">
             导出
           </button>
-          <button
-            class="btnAn"
-            @click="toNewAdvance"
-          >
+          <button class="btnAn" @click="toNewAdvance">
             切换
           </button>
           <!-- <div
@@ -72,53 +46,12 @@
       </Search>
     </div>
     <!--表格-->
-    <div
-      v-loading="loading"
-      element-loading-text="拼命加载中"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-      class="advance__table"
-    >
-      <el-table
-        ref="table"
-        v-el-table-infinite-scroll="load"
-        max-height="100%"
-        class="table"
-        :data="dealedTableData"
-        border
-        stripe
-        fit
-        height="calc(100vh - 158px)"
-        style="width: 100%"
-        show-summary
-        :summary-method="summaryRow(dealedTableData.length)"
-        :header-cell-class-name="headerCellClass"
-        :row-class-name="tableRowClassName"
-        :cell-class-name="cellClass"
-        :span-method="objectSpanMethod"
-        @cell-click="cellClickHandler"
-      >
-        <el-table-column
-          v-for="col in tableCols"
-          :key="col.prop"
-          :prop="col.prop"
-          :label="col.label"
-          :width="col.width"
-          :fixed="col.fixed"
-          :formatter="tableFormat"
-        >
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="advance__table">
+      <el-table ref="table" v-el-table-infinite-scroll="load" max-height="100%" class="table" :data="dealedTableData" border stripe fit height="calc(100vh - 158px)" style="width: 100%" show-summary :summary-method="summaryRow(dealedTableData.length)" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" :span-method="objectSpanMethod" @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableCols" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
           <template #header>
-            <el-tooltip
-              :content="col.desc || col.label"
-              placement="top"
-            >
-              <TableHeaderCell
-                :label="col.label"
-                :filter-options="tableDataFilters[col.prop]"
-                :filter-values.sync="filterValues[col.prop]"
-                :sortable="col.sortable"
-                :sort-rule.sync="tableDataSortRules[col.prop]"
-              />
+            <el-tooltip :content="col.desc || col.label" placement="top">
+              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
             </el-tooltip>
           </template>
         </el-table-column>
@@ -161,176 +94,59 @@
       </div>
     </Dialog> -->
     <!--高级查询-->
-    <Dialog
-      width="900px"
-      :flag="gjFlag"
-    >
-      <div
-        ref="dialog"
-        class="advanced-dialog"
-        :tabindex="0"
-        @keyup.enter="advancedSubmitHandler(false)"
-        @keyup.self.esc="gjFlag = false"
-      >
+    <Dialog width="900px" :flag="gjFlag">
+      <div ref="dialog" class="advanced-dialog" :tabindex="0" @keyup.enter="advancedSubmitHandler(false)" @keyup.self.esc="gjFlag = false">
         <div class="title">高级查询</div>
         <div class="content">
-          <el-form
-            ref="form"
-            :model="form"
-            :rules="rules"
-            label-width="100px"
-          >
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
             <el-row :gutter="20">
-              <el-col
-                v-for="item in formItems"
-                :key="item.prop"
-                :span="item.span || 8"
-              >
-                <el-form-item
-                  :label="item.label"
-                  :prop="item.prop"
-                >
+              <el-col v-for="item in formItems" :key="item.prop" :span="item.span || 8">
+                <el-form-item :label="item.label" :prop="item.prop">
                   <template v-if="item.prop === 'flightDate'">
-                    <el-date-picker
-                      v-model="flightDate"
-                      size="small"
-                      type="daterange"
-                      value-format="yyyy-MM-dd"
-                      start-placeholder="开始日期"
-                      end-placeholder="结束日期"
-                      :picker-options="dateRangePickerOptions"
-                      :clearable="false"
-                      @keyup.esc.native="dialogFocus"
-                    />
+                    <el-date-picker v-model="flightDate" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" :clearable="false" @keyup.esc.native="dialogFocus" />
                   </template>
                   <template v-else-if="item.prop === 'status'">
-                    <el-select
-                      v-model="form.status"
-                      size="small"
-                      filterable
-                      default-first-option
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        v-for="(option, index) in statusList"
-                        :key="index"
-                        :label="option.statusName"
-                        :value="option.statusCode"
-                      />
+                    <el-select v-model="form.status" size="small" filterable default-first-option clearable @keyup.esc.native="dialogFocus">
+                      <el-option v-for="(option, index) in statusList" :key="index" :label="option.statusName" :value="option.statusCode" />
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'specialType'">
-                    <el-select
-                      v-model="form.specialType"
-                      size="small"
-                      class="multiple-select"
-                      multiple
-                      collapse-tags
-                      filterable
-                      allow-create
-                      default-first-option
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        v-for="option in baggageTypeList"
-                        :key="option.specialType"
-                        :label="option.specialType"
-                        :value="option.specialType"
-                      />
+                    <el-select v-model="form.specialType" size="small" class="multiple-select" multiple collapse-tags filterable allow-create default-first-option clearable @keyup.esc.native="dialogFocus">
+                      <el-option v-for="option in baggageTypeList" :key="option.specialType" :label="option.specialType" :value="option.specialType" />
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'unLoad'">
-                    <el-select
-                      v-model="form.unLoad"
-                      size="small"
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        label="已翻减"
-                        :value="1"
-                      />
-                      <el-option
-                        label="待翻减"
-                        :value="0"
-                      />
+                    <el-select v-model="form.unLoad" size="small" clearable @keyup.esc.native="dialogFocus">
+                      <el-option label="已翻减" :value="1" />
+                      <el-option label="待翻减" :value="0" />
                     </el-select>
                   </template>
-                  <template
-                    v-else-if="
+                  <template v-else-if="
                       ['checkIn', 'active', 'transferIn', 'canceled'].includes(
                         item.prop
                       )
-                    "
-                  >
-                    <el-select
-                      v-model="form[item.prop]"
-                      size="small"
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        label="是"
-                        :value="1"
-                      />
-                      <el-option
-                        label="否"
-                        :value="0"
-                      />
+                    ">
+                    <el-select v-model="form[item.prop]" size="small" clearable @keyup.esc.native="dialogFocus">
+                      <el-option label="是" :value="1" />
+                      <el-option label="否" :value="0" />
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'noBSM'">
-                    <el-select
-                      v-model="form.noBSM"
-                      size="small"
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        label="是"
-                        :value="0"
-                      />
-                      <el-option
-                        label="否"
-                        :value="1"
-                      />
+                    <el-select v-model="form.noBSM" size="small" clearable @keyup.esc.native="dialogFocus">
+                      <el-option label="是" :value="0" />
+                      <el-option label="否" :value="1" />
                     </el-select>
                   </template>
                   <template v-else-if="item.prop === 'loadType'">
-                    <el-select
-                      v-model="form.loadType"
-                      size="small"
-                      clearable
-                      @keyup.esc.native="dialogFocus"
-                    >
-                      <el-option
-                        label="容器"
-                        :value="0"
-                      />
-                      <el-option
-                        label="散装"
-                        :value="1"
-                      />
+                    <el-select v-model="form.loadType" size="small" clearable @keyup.esc.native="dialogFocus">
+                      <el-option label="容器" :value="0" />
+                      <el-option label="散装" :value="1" />
                     </el-select>
                   </template>
                   <template v-else>
-                    <el-popover
-                      v-model="item.hintVisible"
-                      placement="right"
-                      trigger="manual"
-                    >
+                    <el-popover v-model="item.hintVisible" placement="right" trigger="manual">
                       <span>{{ item.hintText }}</span>
-                      <el-input
-                        :ref="'input-' + item.prop"
-                        slot="reference"
-                        v-model="form[item.prop]"
-                        size="small"
-                        @focus="item.hintVisible = true"
-                        @blur="item.hintVisible = false"
-                        @keyup.esc.native="dialogFocus"
-                      />
+                      <el-input :ref="'input-' + item.prop" slot="reference" v-model="form[item.prop]" size="small" @focus="item.hintVisible = true" @blur="item.hintVisible = false" @keyup.esc.native="dialogFocus" />
                     </el-popover>
                   </template>
                 </el-form-item>
@@ -339,18 +155,8 @@
           </el-form>
         </div>
         <div class="foot right t30">
-          <el-button
-            size="medium"
-            class="r24"
-            type="primary"
-            @click="advancedSubmitHandler(false)"
-            >确定</el-button
-          >
-          <el-button
-            size="medium"
-            @click="dialogHide"
-            >取消</el-button
-          >
+          <el-button size="medium" class="r24" type="primary" @click="advancedSubmitHandler(false)">确定</el-button>
+          <el-button size="medium" @click="dialogHide">取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -369,7 +175,7 @@ import { setTableFilters, throttledExportToExcel } from '@/utils/table'
 export default {
   name: 'AdvancedHome',
   components: { Search, Dialog, TableHeaderCell },
-  data() {
+  data () {
     return {
       loading: false,
       colDialogFlag: false,
@@ -685,7 +491,7 @@ export default {
   },
   computed: {
     ...mapGetters(['clickedCells', 'queryForm']),
-    dealedTableData() {
+    dealedTableData () {
       const filtered = this.tableData.filter(item => {
         let flag = true
         Object.entries(this.filterValues).forEach(([key, arr]) => {
@@ -711,7 +517,7 @@ export default {
   },
   watch: {
     $route: {
-      handler({ path, query }) {
+      handler ({ path, query }) {
         if (path === '/advance') {
           this.queryChangeHandler(query)
         }
@@ -719,7 +525,7 @@ export default {
       deep: true,
     },
     flightDate: {
-      handler(val) {
+      handler (val) {
         if (val === null) {
           this.flightDate = ['', '']
         }
@@ -727,7 +533,7 @@ export default {
       deep: true,
     },
     dealedTableData: {
-      handler(val) {
+      handler (val) {
         this.spanArr = []
         let contactDot = this.contactDot
         val.forEach((item, index, arr) => {
@@ -738,7 +544,7 @@ export default {
               item['flightNO'] === arr[index - 1]['flightNO'] &&
               item['flightDate'] === arr[index - 1]['flightDate'] &&
               item['passengerNameUpcase'] ===
-                arr[index - 1]['passengerNameUpcase'] &&
+              arr[index - 1]['passengerNameUpcase'] &&
               item['checkInNO'] === arr[index - 1]['checkInNO'] &&
               item['bagWeight'] === arr[index - 1]['bagWeight']
             ) {
@@ -754,7 +560,7 @@ export default {
       deep: true,
     },
   },
-  created() {
+  created () {
     Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
       if (filterable) {
         this.$set(this.tableDataFilters, prop, [])
@@ -765,7 +571,7 @@ export default {
       }
     })
   },
-  mounted() {
+  mounted () {
     this.baggageTypeQuery()
     this.queryChangeHandler(this.$route.query)
     const that = this
@@ -774,7 +580,7 @@ export default {
       that.scrollTop = this.dom.scrollTop
     })
   },
-  activated() {
+  activated () {
     this.dom.scrollTop = this.scrollTop
     // else if (this.queryForm) {
     //   Object.keys(this.form).forEach(key => {
@@ -784,16 +590,16 @@ export default {
     //   this.advancedSubmitHandler()
     // }
   },
-  updated() {
+  updated () {
     // table数据更新
     this.$nextTick(() => {
       this.$refs.table.doLayout()
     })
   },
-  deactivated() {
+  deactivated () {
     this.loading = false
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.loading = false
     //
     // if (this.$route.matched.filter(item => item.name && item.meta.title).length > 1) {
@@ -806,33 +612,33 @@ export default {
     // }
   },
   methods: {
-    load() {
+    load () {
       if (this.noMore || this.loading || this.page < 0) {
         return
       }
       this.advancedQuery(this.dataContent)
     },
-    resetTable() {
+    resetTable () {
       this.page = 0
       this.noMore = false
       this.tableData = []
     },
-    dialogShow() {
+    dialogShow () {
       this.gjFlag = true
       this.$nextTick(() => {
         this.dialogFocus()
       })
     },
-    dialogHide() {
+    dialogHide () {
       this.gjFlag = false
     },
-    toNewAdvance() {
+    toNewAdvance () {
       this.$router.push('/advance/advanceNew')
     },
-    dialogFocus() {
+    dialogFocus () {
       this.$refs['dialog'].focus()
     },
-    queryChangeHandler(query) {
+    queryChangeHandler (query) {
       let queryFlag = false
       const { startDate, endDate, singleJump } = query
       const queryEntries = Object.entries(query)
@@ -897,19 +703,19 @@ export default {
     //     this.$message.info('时间跨度不能超过三天，请重新选择')
     //   }
     // },
-    dateRangePickHandler({ maxDate, minDate }) {
+    dateRangePickHandler ({ maxDate, minDate }) {
       if (!maxDate) {
         this.pickedDate = minDate
       } else {
         this.pickedDate = null
       }
     },
-    dateRangeDisabled(date) {
+    dateRangeDisabled (date) {
       return this.pickedDate
         ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000
         : false
     },
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (['passengerNameUpcase', 'bagWeight'].includes(column.property)) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -920,7 +726,7 @@ export default {
       }
     },
     // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       const rule = this.tableDataSortRules[column.property]
       if (rule) {
@@ -928,14 +734,14 @@ export default {
       }
       return classes.join(' ')
     },
-    tableRowClassName({ row, rowIndex }) {
+    tableRowClassName ({ row, rowIndex }) {
       const classes = []
       if (row.deleted === 'DEL') {
         classes.push('bgl-deleted')
       }
       return classes.join(' ')
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    cellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
         [
@@ -965,7 +771,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       if (
         [
           'flightNO',
@@ -1046,7 +852,7 @@ export default {
         }
       }
     },
-    tableFormat(row, column, cellValue) {
+    tableFormat (row, column, cellValue) {
       switch (column.property) {
         case 'departureTime':
           return (cellValue ?? '').replace('T', ' ')
@@ -1059,7 +865,7 @@ export default {
       }
     },
     // 查询
-    getSearchData(val) {
+    getSearchData (val) {
       if (
         this.flightDate[0] === '' ||
         this.flightDate[1] === '' ||
@@ -1104,19 +910,19 @@ export default {
       }
     },
     // 清除查询
-    clearSearchData() {
+    clearSearchData () {
       this.clearForm()
       this.resetTable()
     },
     // 清除表单
-    clearForm() {
+    clearForm () {
       Object.keys(this.form).forEach(key => {
         this.form[key] = ['specialType'].includes(key) ? [] : ''
       })
     },
     // 高级查询-确定
-    advancedSubmitHandler(singleJump) {
-      function digitFormat(num) {
+    advancedSubmitHandler (singleJump) {
+      function digitFormat (num) {
         if (num) {
           num = '000' + num
           return num.slice(-3)
@@ -1124,7 +930,7 @@ export default {
           return ''
         }
       }
-      function baggageFormat(baggageNO) {
+      function baggageFormat (baggageNO) {
         // const bagNumCA = /^CA[0-9]{6}$/
         const bagNumShort = /^[0-9a-zA-Z][a-zA-Z][0-9]{6}$/
         if (
@@ -1134,8 +940,7 @@ export default {
           return Array.from(
             { length: 10 },
             (_, i) =>
-              `${i}${
-                AIRPORT_ID[baggageNO.slice(0, 2).toUpperCase()]
+              `${i}${AIRPORT_ID[baggageNO.slice(0, 2).toUpperCase()]
               }${baggageNO.slice(2)}`
           ).join()
         }
@@ -1202,7 +1007,7 @@ export default {
       this.advancedQuery(this.dataContent, singleJump)
       this.gjFlag = false
     },
-    setDataContent(...dataContent) {
+    setDataContent (...dataContent) {
       dataContent.forEach(target => {
         target = typeof target === 'string' ? target.trim() : target
         if ((target ?? '') !== '') {
@@ -1213,7 +1018,7 @@ export default {
       })
     },
     // 数据查询
-    async advancedQuery(dataContent, singleJump) {
+    async advancedQuery (dataContent, singleJump) {
       this.loading = true
       try {
         const {
@@ -1281,7 +1086,7 @@ export default {
       this.loading = false
     },
     // 特殊行李类型下拉选项查询
-    async baggageTypeQuery() {
+    async baggageTypeQuery () {
       try {
         const result = await myQuery(SERVICE_ID.baggageTypeId)
         this.baggageTypeList = result
@@ -1290,12 +1095,12 @@ export default {
       }
     },
     // 统计行数
-    summaryRow(num) {
+    summaryRow (num) {
       return function () {
         return ['合计', `共${num}件`]
       }
     },
-    exportHandler(refName, tableName) {
+    exportHandler (refName, tableName) {
       if (!this.tableData.length) {
         this.$message.info('无数据')
         return
@@ -1323,7 +1128,7 @@ export default {
       width: 32px;
       cursor: pointer;
       background-size: 100% 100%;
-      background: url('../../../assets/baggage/ic_setting.png') no-repeat;
+      background: url("../../../assets/baggage/ic_setting.png") no-repeat;
       margin-left: 12px;
       position: relative;
       top: 2px;
@@ -1350,7 +1155,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, 'Microsoft YaHei';
+      font-family: Helvetica, "Microsoft YaHei";
       letter-spacing: 0;
     }
     .cell-click {

src/views/baggageManagement copy/components/arrival/baggage.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 进港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <BaggageView />
+</template>
+
+<script>
+import BaggageView from '../baggage'
+
+export default {
+  name: 'ArrivalBaggageView',
+  components: {
+    BaggageView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/arrival/container.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 进港容器视图
+ * have a nice day!
+-->
+
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../container'
+
+export default {
+  name: 'ArrivalContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

src/views/baggageManagement copy/components/arrival/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'ArrivalContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement copy/components/arrival/flight.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:49:13
+ * @LastEditTime: 2022-03-09 11:50:43
+ * @LastEditors: your name
+ * @Description: 进港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <FlightView />
+</template>
+
+<script>
+import FlightView from '../flight'
+
+export default {
+  name: 'ArrivalFlightView',
+  components: {
+    FlightView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/arrival/index.vue

@@ -0,0 +1,738 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-06-21 17:52:33
+ * @LastEditors: your name
+ * @Description: 进港01
+-->
+<template>
+  <div class="arrival-one">
+    <!--功能区-表单-->
+    <div ref="formWrap" class="terminal-form-wrap">
+      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
+            v-model="formData.currentAirport"
+            style="width:144px;margin-left:10px"
+            placeholder="全部机场"
+            size="small"
+            :options="currentAirportList"
+            :props="currentAirportProps"
+            collapse-tags
+            clearable
+            filterable
+            @change="setCurrentAirport"
+          /> -->
+            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
+              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planLandingApt" :value="item.planLandingApt" />
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="startDateChangeHandler"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="endDateChangeHandler"
+            />
+          </el-form-item> -->
+          <el-form-item prop="flightDate" label="航班日期">
+            <el-date-picker v-model="formData.flightDate" :clearable="false" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          </el-form-item>
+          <el-form-item>
+            <div class="box-item">
+              <p>预计装载总数：</p>
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </el-form-item>
+        </div>
+        <div class="form-right" @keyup.enter="onSubmit(1)">
+          <el-form-item prop="search">
+            <el-popover :value="popoverVisible" placement="bottom" trigger="manual">
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input slot="reference" v-model="formData.search" class="input-shadow" style="width: 240px; margin-left: 105px" size="small" placeholder="请输入内容" prefix-icon="el-icon-search" clearable @focus="popoverVisible = true" @blur="popoverVisible = false" />
+            </el-popover>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="btn-shadow" size="mini" type="primary" @click="onSubmit(1)">搜索</el-button>
+          </el-form-item>
+          <!-- <el-form-item v-is="['is_timeIcon']">
+            <TimeZoneSelector />
+          </el-form-item> -->
+          <el-form-item>
+            <TimeZoneSelector />
+          </el-form-item>
+          <!-- <el-form-item v-is="['is_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item>
+          <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站进港列表')" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed">
+          <el-table-column v-for="childCol in col.children" :key="childCol.prop" :prop="childCol.prop" :label="childCol.label" :width="childCol.width" :formatter="tableFormat">
+            <template #header>
+              <el-tooltip :content="childCol.desc || childCol.label" placement="top">
+                <TableHeaderCell :label="childCol.label" :filter-options="tableDataFilters[childCol.prop]" :filter-values.sync="filterValues[childCol.prop]" :sortable="childCol.sortable" :sort-rule.sync="tableDataSortRules[childCol.prop]" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog";
+import TimeZoneSelector from "@/components/TimeZoneSelector";
+import terminalMixin from "../../mixins/terminal";
+import formMixin from "../../mixins/form";
+import tableColsMixin from "../../mixins/tableCols";
+import timeZoneMixin from "../../mixins/timeZone";
+import { getQuery } from "@/api/flight";
+import TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters, throttledExportToExcel } from "@/utils/table";
+import { getToken } from '@/utils/auth';
+
+export default {
+  name: "DepartureTerminalView",
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      popoverVisible: false,
+      // 初始表头
+      tableCols: [
+        {
+          prop: "flightInfo",
+          label: "航班信息",
+          width: 185,
+          fixed: "left",
+          children: [
+            {
+              prop: "flightNO",
+              label: "航班号",
+              desc: "指航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "flightDate",
+              label: "执飞日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 105,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "arrivalTime",
+              label: "降落时间",
+              desc: "根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间",
+              width: 150,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "departureAirport",
+              label: "起飞航站",
+              desc: "指航班执飞航段的起飞航站，以航站三字码显示",
+              width: 85,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "arrivalTerminal",
+              label: "到达航站楼",
+              desc: "指航班执飞航段的目的航站的航站楼代码",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "luggageCarousel",
+              label: "行李转盘",
+              desc: "指航班进港，旅客提取行李转盘的代码",
+              width: 85,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "parkingSpace",
+              label: "停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              filterable: true,
+              sortable: true,
+            },
+          ],
+        },
+        {
+          prop: "originAirportBaggageInfo",
+          label: "始飞站行李信息",
+          children: [
+            {
+              prop: "checkIns",
+              label: "值机",
+              desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+            },
+            {
+              prop: "projectedLoad",
+              label: "预计装载",
+              desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+            },
+            {
+              prop: "loadedQuantity",
+              label: "已装载",
+              desc: "指实际装机完成的行李数量，不包含取消托运的行李数量",
+            },
+          ],
+        },
+        {
+          prop: "arrvivalBaggageInfo",
+          label: "到达行李信息",
+          children: [
+            {
+              prop: "numberOfDestinationArrivals",
+              label: "到达",
+              desc: "指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "endPointNotReached",
+              label: "未到达",
+              desc: "指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "specialQuantity",
+              label: "特殊",
+              desc: "指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项",
+              width: 65,
+            },
+            {
+              prop: "numberOfClaims",
+              label: "理赔",
+              desc: "指航班收到旅客申请理赔的行李数量",
+              width: 65,
+            },
+          ],
+        },
+        {
+          prop: "uninstallInfo",
+          label: "卸载状态",
+          children: [
+            {
+              prop: "uninstalled",
+              label: "已卸载",
+              desc: "指卸机的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "numberToBeUninstalled",
+              label: "待卸载",
+              desc: "指仍未卸机的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "terminationdBaggageInfo",
+          label: "终止行李",
+          children: [
+            {
+              prop: "terminateArrivalQuantity",
+              label: "到达",
+              desc: "指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "terminateUnreachedQuantity",
+              label: "未到达",
+              desc: "指未到达目的站的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "transferBaggageInfo",
+          label: "转运行李",
+          children: [
+            {
+              prop: "quantityShipped",
+              label: "已转运",
+              desc: "指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "undeliveredQuantity",
+              label: "未转运",
+              desc: "指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "baggageDistributionInfo",
+          label: "行李分布",
+          children: [
+            {
+              prop: "numberOfContainers",
+              label: "容器",
+              desc: "指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "numberOfBulk",
+              label: "散装",
+              desc: "指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+              width: 65,
+            },
+          ],
+        },
+      ],
+      tableDataSortRules: {
+        flightCanceled: "ascending",
+      },
+      loading: false,
+      AirportList: [],
+      loopEvent: null,
+      arrivalCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      table: null,
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+  },
+  mounted () {
+    this.getAirPortData();
+    this.table = this.$refs.table.bodyWrapper;
+    const that = this;
+    this.table.addEventListener("scroll", () => {
+      that.scrollTop = this.table.scrollTop;
+    });
+  },
+  activated () {
+    this.table.scrollTop = this.scrollTop;
+    this.getTableData();
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+  },
+  deactivated () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  beforeDestroy () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  methods: {
+    resetLoopEvent () {
+      this.loading = true;
+      this.hasSetTableScroll = false;
+      this.loopEvent && clearInterval(this.loopEvent);
+      this.getTableData();
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+    },
+    airPortChange () {
+      this.resetLoopEvent();
+    },
+    dateChangeHandler () {
+      this.resetLoopEvent();
+    },
+    // 选择机场
+    async getAirPortData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.arrivalAirId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.AirportList = this._.orderBy(res.returnData, (o) => o.planLandingApt);
+          this.formData.currentAirport = "PEK";
+          this.resetLoopEvent();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.flightStatus === "DLY") {
+        classes.push("bgl-delayed");
+      }
+      if (row.flightStatus === "CAN") {
+        classes.push("bgl-canceled");
+      }
+      if (row.hasArrived) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.arrivalCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    // 获取表单下拉框数据
+    // getFormData(params) {
+    //   this.relatedAirportQuery({
+    //     ...params,
+    //     type: 'OUT'
+    //   })
+    //   this.outgoingAirlineQuery(params)
+    //   this.craftTypeQuery(params)
+    //   this.flightAttrQuery(params)
+    // },
+    // 获取表格数据
+    async getTableData () {
+      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
+        return;
+      }
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.arrivalTableId,
+          dataContent: {
+            departureAirport: this.formData.currentAirport,
+            startTime: this.startDate,
+            endTime: this.endDate
+          },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.initTableData(res.returnData);
+        } else {
+
+        }
+        this.loading = false;
+      } catch (error) {
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent);
+          this.loopEvent = null;
+        }
+        this.loading = false;
+
+      }
+    },
+    initTableData (tableData) {
+      this.arrivalCount = 0;
+      this.baggageCount = 0;
+      tableData.forEach((item) => {
+        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
+        if (this.hasArrived(item)) {
+          this.arrivalCount++;
+        }
+        this.baggageCount = this.baggageCount + item.projectedLoad;
+      });
+      this.tableData = this._.orderBy(tableData, ["hasArrived", "arrivalTime"], ["desc", "asc"]);
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.toOrderNum(this.baggageCount);
+      this.$nextTick(() => {
+        this.setTableScroll();
+      });
+    },
+    hasArrived (flight) {
+      if (flight.arrivalTime) {
+        const now = new Date();
+        const arrivalTime = new Date(flight.arrivalTime);
+        flight["hasArrived"] = now > arrivalTime && !flight["flightCanceled"];
+      } else {
+        flight["hasArrived"] = false;
+      }
+      return flight["hasArrived"];
+    },
+    setTableScroll () {
+      if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      const lastRow = table.querySelectorAll(".el-table__body tr")[this.arrivalCount - 1];
+      setTimeout(() => {
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index];
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+      }
+    },
+
+    toOrderNum (num) {
+      num = num.toString();
+      if (num.length < 6) {
+        num = "0" + num; // 如未满八位数，添加"0"补位
+        this.toOrderNum(num); // 递归添加"0"补位
+      } else if (num.length >= 6) {
+        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+      } else {
+        // 订单总量数字超过八位显示异常
+        this.$message.warning("总量数字过大");
+      }
+      this.setNumberTransform();
+    },
+    exportHandler (refName, tableName) {
+      if (this.loading) {
+        return;
+      }
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
+      throttledExportToExcel(table, tableName, fileName, 2);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.terminal-form-wrap {
+  padding-top: 11px;
+  padding-left: 5px;
+  ::v-deep .form {
+    display: flex;
+    justify-content: space-between;
+    .form-left {
+      flex: 1;
+    }
+    .form-right {
+      flex: 0 1 auto;
+    }
+    .el-form-item {
+      margin-bottom: 0px;
+      margin-right: 8px;
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, "Microsoft YaHei";
+        font-size: 14px;
+      }
+      .el-switch__label {
+        color: #303133;
+      }
+      .el-form-item__error {
+        z-index: 10;
+      }
+    }
+    .btn-img {
+      position: relative;
+      top: 6px;
+    }
+  }
+  .box-item {
+    position: relative;
+    height: 50px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    // background: url('/images/text-bg-blue.png') no-repeat center center;
+    // background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+    border: 3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+}
+.terminal-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-hui {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+      tr.bgl-delayed td {
+        background: #fcf0b1;
+      }
+      tr.bgl-canceled td {
+        background: #f7babe;
+      }
+    }
+    .el-table__cell.is-hidden > * {
+      visibility: visible;
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/baggage/index.vue

@@ -0,0 +1,1110 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-08-12 19:14:09
+ * @LastEditors: your name
+ * @Description: 行李视图
+-->
+<template>
+  <div class="baggage-view">
+    <div ref="basicInfo" class="part1">
+      <div class="title">
+        <span>行李基本信息</span>
+        <el-radio-group v-model="infoBtn" class="radioBtn" size="mini" fill="#FFFFFF" text-color="#28344D">
+          <el-radio-button v-for="item in infoRadios" :key="item" :label="item" />
+        </el-radio-group>
+        <!-- <BackButton /> -->
+      </div>
+      <div class="part1_info">
+        <el-row :gutter="12">
+          <el-col v-for="(item, index) in baggageBasicInfoCols" :key="index" :xl="[0, 2, 4].includes(index % 7) ? 4 : 3" :sm="6" :xs="6">
+            <span class="label">{{ item.label }}：</span><span class="content" :class="{
+                'click':
+                  item.prop === 'compensationSign' &&
+                  baggageBasicInfo[item.prop],
+              }" :title="formattedBaggageInfo(item.prop)" @click="baggageBasicInfoClickHandler(item.prop)">{{ formattedBaggageInfo(item.prop) }}</span>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div v-show="infoBtn === infoRadios[0]" class="part2">
+      <div class="part2_info">
+        <div class="title">行李跟踪信息</div>
+        <div class="type normal">
+          {{ baggageBasicInfo.BagStatus }}
+        </div>
+        <div class="airline">
+          <el-select v-model="selectedAirline" size="mini" class="airline-select">
+            <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
+          </el-select>
+        </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="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.status }">
+            <div class="step-circle">
+              <span class="step-name">{{ item.nodeName }}</span>
+            </div>
+            <div class="step-info">
+              <div :class="statusClasses(item.status)">{{ item.status }}</div>
+              <span class="step-time">{{ item.processingTime }}</span>
+              <div class="step-location">{{ item.locationId }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="btns">
+        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
+        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
+      </div>
+    </div>
+    <div v-show="infoBtn == infoRadios[0]" class="part3" :style="{
+        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 176px - 3 * 8px - 20px)`
+      }">
+      <el-table ref="table" :data="baggageTableData" height="100%" size="mini" border fit :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :cell-class-name="cellClass" :span-method="tableSpanMethod" @cell-click="cellClickHandler">
+        <el-table-column v-for="item in tableColsCopy" :key="item.index" :prop="item.prop" :label="item.name" :align="item.align || 'center'" :width="item.width" show-overflow-tooltip :fixed="item.fixed">
+          <template slot="header">
+            <div class="cell-content">{{ item.name }}</div>
+          </template>
+          <template slot-scope="scope">
+            <div class="cell-content">{{ scope.row[item.prop] }}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div v-show="infoBtn === infoRadios[1]" class="part4" :style="{
+        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 20px)`
+      }">
+      <header class="head">
+        <div class="title">行李跟踪信息</div>
+        <div class="btns">
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel">
+        </div>
+      </header>
+      <main class="main">
+        <template v-if="messageList.length">
+          <el-row :gutter="24" type="flex">
+            <el-col v-for="(message, index) in messageList" :key="index" :span="6">
+              <div class="card">
+                <div class="message-date">{{ message.date }}</div>
+                <div class="message-content">
+                  {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </template>
+        <template v-else>
+          <el-empty :image-size="1" description="暂无数据" />
+        </template>
+      </main>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'name',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck('baggageTableData')">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+// import BackButton from '@/components/BackButton'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { myQuery } from '@/api/dataIntegration'
+import { BaggageMessageQuery } from '@/api/flight'
+import tableColsMixin from '../../mixins/tableCols'
+import { throttledExportToExcel } from '@/utils/table'
+import * as XLSX from 'xlsx'
+import XLSX_STYLE from 'xlsx-style'
+import FileSaver from 'file-saver'
+import { mapGetters } from 'vuex'
+import service from '@/utils/request-new'
+
+export default {
+  name: 'BaggageView',
+  components: {
+    // BackButton,
+    Dialog
+  },
+  mixins: [tableColsMixin],
+  data () {
+    return {
+      queryData: {},
+      airlineList: [],
+      selectedAirline: '',
+      basicInfoHeight: 0,
+      debounceTime: 300,
+      baggageBasicInfoCols: [
+        {
+          label: '行李牌号',
+          prop: 'bagNo'
+        },
+        {
+          label: '航班号',
+          prop: 'flightNO'
+        },
+        {
+          label: '特殊行李类型',
+          prop: 'specialType'
+        },
+        {
+          label: 'PNR编号',
+          prop: 'PNR'
+        },
+        {
+          label: '旅客',
+          prop: 'name'
+        },
+        {
+          label: '装载序列号',
+          prop: 'loadSequenceIndex'
+        },
+        {
+          label: '总件数',
+          prop: 'totalNumber'
+        },
+        {
+          label: '总重量',
+          prop: 'totalWeight'
+        },
+        {
+          label: '尺寸',
+          prop: 'size'
+        },
+
+        {
+          label: '常旅客号',
+          prop: 'frequentFlyerNumber'
+        },
+        {
+          label: '常旅客级别',
+          prop: 'frequentFlyerClass'
+        },
+        {
+          label: '取消值机',
+          prop: 'whetherToCancelTheCheckIn'
+        },
+        {
+          label: '是否可装载',
+          prop: 'isItLoadable'
+        },
+        {
+          label: '是否可运输',
+          prop: 'isItTransportable'
+        },
+        {
+          label: '行李激活状态',
+          prop: 'activeState'
+        },
+        {
+          label: '无BSM状态',
+          prop: 'noBSM'
+        },
+        {
+          label: '中转进航班',
+          prop: 'inFlightNo'
+        },
+        {
+          label: '中转出航班',
+          prop: 'transferFlightNo'
+        },
+        {
+          label: '速运标记',
+          prop: 'expressSign'
+        },
+        {
+          label: '破损标记',
+          prop: 'brokenSign'
+        },
+        {
+          label: '投诉标记',
+          prop: 'complaintSign'
+        },
+        {
+          label: '赔偿标记',
+          prop: 'compensationSign'
+        },
+        {
+          label: '异常状态',
+          prop: 'bagExcType'
+        },
+        {
+          label: '企业或团队名称',
+          prop: 'teamOrGroup'
+        }
+      ],
+      baggageBasicInfo: {},
+      infoBtn: '',
+      infoRadios: ['跟踪信息', '跟踪报文'],
+      messageList: [],
+      stepNodes: [],
+      tableCols: [
+        { name: '航班号', prop: 'flightNO', fixed: true },
+        { name: '航班日期', prop: 'flightDate', width: 95, fixed: true },
+        { name: '起飞航站\n起飞时间', prop: 'departureInfo', width: 100 },
+        { name: '目的航站\n降落时间', prop: 'landingInfo', width: 100 },
+        { name: '旅客舱位', prop: 'passengerCompartment', width: 70 },
+        { name: '旅客座位号', prop: 'passengerSeatNumber' },
+        { name: '值机序号', prop: 'passengerCheckInNumber', width: 70 },
+        { name: '节点标识', prop: 'nodeCode', width: 100 },
+        { name: '节点名称', prop: 'nodeName', width: 70 },
+        { name: '位置标识', prop: 'locationCode' },
+        { name: '位置描述', prop: 'locationRemark' },
+        { name: '读取时间', prop: 'dealTime', width: 158 },
+        { name: '结果', prop: 'status', width: 60 },
+        { name: '次级代码', prop: 'secondaryCode', width: 70 },
+        { name: '操作人', prop: 'AgentCode', width: 90 },
+        { name: '设备ID', prop: 'DeviceCode' },
+        { name: '发往位置', prop: 'toLocation', width: 70 },
+        { name: '发往位置描述', prop: 'toLocationMark', width: 100 },
+        { name: '装载序号', prop: 'LoadSN', width: 70 },
+        { name: '容器编号', prop: 'U_Device_ID', width: 110 },
+        { name: '数据来源', prop: 'dataSource' }
+      ],
+      baggageTableData: [],
+      spanArr: [],
+      pos: 0,
+      queryLoop: null,
+      queryTrackLoop: null
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+    activeStepLine () {
+      return function (index) {
+        return this.stepNodes[index].status && this.stepNodes[index + 1].status
+      }
+    },
+    statusClasses () {
+      return function (status) {
+        const classes = ['step-status']
+        if (typeof status === 'string') {
+          if (status.includes('正常') || status.includes('通过')) {
+            classes.push('step-status-normal')
+          } else {
+            classes.push('step-status-abnormal')
+          }
+        }
+        return classes
+      }
+    },
+    formattedBaggageInfo () {
+      return function (prop) {
+        const value = this.baggageBasicInfo[prop]
+        if ((value ?? '') === '') {
+          return ''
+        } else {
+          switch (prop) {
+            case 'transitSign':
+              return Number(value) === 0 ? '非中转' : '中转'
+            case 'activeState':
+              return Number(value) === 0 ? '未激活' : '激活'
+            case 'whetherToCancelTheCheckIn':
+              return Number(value) === 1 ? '取消' : ''
+            case 'isItLoadable':
+            case 'isItTransportable':
+            case 'noBSM':
+            case 'expressSign':
+            case 'brokenSign':
+            case 'complaintSign':
+              // case 'compensationSign':
+              return Number(value) === 1 || value === 'Y' ? '是' : '否'
+            default:
+              return value
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    infoBtn: {
+      handler (val) {
+        this.stopLoopAll()
+        if (val === this.infoRadios[0]) {
+          if (this.selectedAirline) {
+            this.startQueryTrack()
+          }
+          this.startQueryDetails()
+        } else if (val === this.infoRadios[1]) {
+          this.startQueryMessage()
+        }
+      },
+      immediate: true
+    },
+    selectedAirline () {
+      this.stopQueryTrack()
+      this.startQueryTrack()
+    }
+  },
+  created () {
+    this.resetStepNodes()
+    const { flightNO, flightDate, bagSN } = this.$route.query
+    if (flightNO && flightDate && bagSN) {
+      this.queryData = { flightNO, flightDate, bagSN }
+      this.queryBasicInfo()
+      this.queryAirline()
+      this.infoBtn = this.infoRadios[0]
+    } else {
+      this.$router.push('/')
+    }
+  },
+  activated () {
+    this.resizeHandler()
+    this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
+    window.addEventListener('resize', this.debouncedResizeHandler)
+  },
+  updated () {
+    this.resizeHandler()
+  },
+  deactivated () {
+    this.stopLoopAll()
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  },
+  methods: {
+    resizeHandler () {
+      this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
+      this.$refs['table']?.doLayout()
+    },
+    baggageBasicInfoClickHandler (prop) {
+      if (prop !== 'compensationSign' || !this.baggageBasicInfo[prop]) {
+        return
+      }
+      this.$store.dispatch('app/setAbnormalBaggageQueryParams', {
+        flightNO: this.queryData.flightNO,
+        flightDate: this.queryData.flightDate,
+        bagSN: this.queryData.bagSN,
+        fileNumber: this.baggageBasicInfo[prop]
+      })
+      this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
+    },
+    startQueryDetails () {
+      this.queryDetails()
+      this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
+    },
+    startQueryTrack () {
+      this.queryTrack()
+      this.queryTrackLoop = setInterval(this.queryTrack.bind(this), LOOP_INTERVAL.baggageTrack)
+    },
+    startQueryMessage () {
+      this.queryMessage()
+      this.queryLoop = setInterval(this.queryMessage.bind(this), LOOP_INTERVAL.baggageMessage)
+    },
+    stopQueryTrack () {
+      this.queryTrackLoop && clearInterval(this.queryTrackLoop)
+      this.queryTrackLoop = null
+    },
+    stopLoopAll () {
+      this.queryLoop && clearInterval(this.queryLoop)
+      this.queryLoop = null
+      this.stopQueryTrack()
+    },
+    resetStepNodes () {
+      this.stepNodes = [
+        {
+          nodeCode: 'CHECKIN',
+          nodeName: '值机'
+        },
+        {
+          nodeCode: 'SECURITY',
+          nodeName: '安检'
+        },
+        {
+          nodeCode: 'SORT',
+          nodeName: '分拣'
+        },
+        {
+          nodeCode: 'LOAD',
+          nodeName: '装车'
+        },
+        {
+          nodeCode: 'INFL',
+          nodeName: '装机'
+        },
+        {
+          nodeCode: 'UNLOAD',
+          nodeName: '卸机'
+        },
+        {
+          nodeCode: 'ARRIVED',
+          nodeName: '到达'
+        }
+      ]
+    },
+    initTableData (tableData) {
+      const spanArr = []
+      let pos = 0
+      for (let i = 0; i < tableData.length; i++) {
+        if (i === 0) {
+          spanArr.push(1)
+        } else {
+          if (
+            tableData[i]['flightNO'] === tableData[i - 1]['flightNO'] &&
+            tableData[i]['flightDate'] === tableData[i - 1]['flightDate'] &&
+            tableData[i]['departureAirport'] === tableData[i - 1]['departureAirport'] &&
+            tableData[i]['landingAirport'] === tableData[i - 1]['landingAirport']
+          ) {
+            spanArr[pos] += 1
+            spanArr.push(0)
+          } else {
+            spanArr.push(1)
+            pos = i
+          }
+        }
+      }
+      this.spanArr = spanArr
+      this.pos = pos
+    },
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
+      if (['departureInfo', 'landingInfo'].includes(column.property)) {
+        return 'pre-line'
+      }
+    },
+    cellClass ({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        ['flightNO', 'U_Device_ID'].includes(column.property) &&
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
+      ) {
+        classes.push('cell-click')
+      }
+      if (['departureInfo', 'landingInfo'].includes(column.property)) {
+        classes.push('pre-line')
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler (row, column, cell, event) {
+      if (row[column.property] && row[column.property] !== 'FBULK') {
+        switch (column.property) {
+          case 'flightNO':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/flightView`,
+              query: {
+                flightNO: row.flightNO,
+                flightDate: row.flightDate
+              }
+            })
+            break
+          case 'U_Device_ID':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/containerView`,
+              query: {
+                flightNO: row.flightNO,
+                flightDate: row.flightDate,
+                departureAirport: row.departureAirport,
+                landingAirport: row.landingAirport,
+                containerID: row.U_Device_ID
+              }
+            })
+            break
+          default:
+            break
+        }
+      }
+    },
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (['flightNO', 'flightDate', 'departureInfo', 'landingInfo'].includes(column['property'])) {
+        const _row = this.spanArr[rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
+    exportHandler (refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const { bagSN, flightNO, flightDate } = this.queryData
+      const fileName = `${tableName}-${bagSN}-${flightNO}-${flightDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
+    },
+    exportMessageToExcel () {
+      const xlsxDatas = [['Date & Time', 'Message']]
+      xlsxDatas.push(
+        ...this.messageList.map(message => [
+          message.date,
+          message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '')
+        ])
+      )
+      const columnWidths = []
+      xlsxDatas.forEach(row => {
+        // 计算每一列宽度，考虑换行
+        row.forEach((cell, columnIndex) => {
+          const cellWidth = Math.max(
+            ...cell
+              .toString()
+              .split('\n')
+              .map(cellRow =>
+                cellRow.split('').reduce((pre, curr) => {
+                  const letterSize = curr.charCodeAt(0) > 255 ? 2 : 1
+                  return pre + letterSize
+                }, 0)
+              )
+          )
+          if ((!columnWidths[columnIndex] && cellWidth > 0) || cellWidth > columnWidths[columnIndex]) {
+            columnWidths[columnIndex] = cellWidth
+          }
+        })
+      })
+      // 生成表格数据
+      const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
+      // 添加列宽度
+      sheet['!cols'] = columnWidths.map(width => ({
+        wch: width + 2
+      }))
+      // 表格对齐、添加边框
+      const borderStyle = {
+        style: 'medium',
+        color: {
+          rgb: 'FFFFFF'
+        }
+      }
+      const reg = /^[A-Z]+([\d]+$)/
+      for (const key in sheet) {
+        const match = reg.test(key)
+        if (match) {
+          const rowIndex = reg.exec(key)[1]
+          let cellStyle = {
+            alignment: {
+              horizontal: 'center',
+              vertical: 'center',
+              wrapText: true
+            }
+          }
+          if (Number(rowIndex) === 1) {
+            cellStyle = {
+              ...cellStyle,
+              border: {
+                top: borderStyle,
+                right: borderStyle,
+                bottom: borderStyle,
+                left: borderStyle
+              },
+              font: {
+                color: {
+                  rgb: 'FFFFFF'
+                }
+              },
+              fill: {
+                fgColor: {
+                  rgb: '3366FF'
+                }
+              }
+            }
+          } else {
+            cellStyle.alignment.horizontal = 'left'
+          }
+          sheet[key].s = cellStyle
+        }
+      }
+      // 表格数据转换
+      const workBook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workBook, sheet, '行李原始报文')
+      const tableWrite = XLSX_STYLE.write(workBook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'buffer',
+        cellStyles: true
+      })
+      // 下载表格
+      const { bagSN, flightNO, flightDate } = this.queryData
+      const fileName = `行李原始报文-${bagSN}-${flightNO}-${flightDate}.xlsx`
+      FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
+    },
+    // 行李详情基础信息
+    queryBaggageBasicInfo (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.baggageBasicInfo, dataContent })
+    },
+    // 行李航段
+    queryBaggageAirline (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.baggageAirline, dataContent })
+    },
+    // 行李详情追踪链
+    queryBaggageTrack (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.baggageTrack, dataContent })
+    },
+    // 行李详情表格
+    queryBaggageDetails (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.baggageDetails, dataContent })
+    },
+    // 原始报文
+    async queryBaggageMessage (dataContent) {
+      try {
+        const { code, returnData, message } = await BaggageMessageQuery({
+          serviceId: DATACONTENT_ID.baggageMessage,
+          dataContent
+        })
+        if (Number(code) === 0) {
+          return returnData
+        } else {
+          this.$message.error(message ?? '失败')
+        }
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryBasicInfo (queryData = this.queryData) {
+      const { flightNO, flightDate, bagSN } = queryData
+      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      try {
+        const baggageBasicInfo = await this.queryBaggageBasicInfo(dataContent)
+        if (baggageBasicInfo.length) {
+          baggageBasicInfo[0].flightNO = flightNO
+          this.baggageBasicInfo = baggageBasicInfo[0]
+        }
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryDetails (queryData = this.queryData) {
+      function setDataSource (item) {
+        if (item['b_type'] !== 'BSM') {
+          const resourceCode = item['resourceFile']?.slice(-4)
+          switch (resourceCode) {
+            case '0100':
+              if (
+                (item['DeviceCode'] && item['DeviceCode'].toUpperCase() === 'STARHUB') ||
+                (!item['DeviceCode'] && !['LOAD', 'INFL'].includes(item['nodeCode']))
+              ) {
+                item['dataSource'] = 'Manual Load'
+              } else {
+                item['dataSource'] = 'BRS'
+              }
+              break
+            case '0101':
+              item['dataSource'] = 'RFID'
+              break
+            case '0102':
+              item['dataSource'] = '首都机场'
+              break
+            default:
+              break
+          }
+        }
+      }
+      const { flightNO, flightDate, bagSN } = queryData
+      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      try {
+        const baggageDetails = await this.queryBaggageDetails(dataContent)
+        this.baggageTableData = baggageDetails.map((item, index) => {
+          if (item['dealTime']) {
+            item['dealTime'] = item['dealTime'].replace('T', ' ')
+          }
+          item['departureInfo'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
+            }`
+          item['landingInfo'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
+            }`
+          setDataSource(item)
+          return item
+        })
+        this.initTableData(this.baggageTableData)
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryAirline (queryData = this.queryData) {
+      const { flightNO, flightDate, bagSN } = queryData
+      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      try {
+        const result = await this.queryBaggageAirline(dataContent)
+        this.airlineList = result.map(({ flightNO, flightDate, departureAirport, arriveAirport, luggageSN }) => ({
+          label: `${departureAirport}-${arriveAirport}`,
+          value: `${flightNO},${flightDate},${luggageSN}`,
+          flightNO,
+          flightDate
+        }))
+        if (this.airlineList.length) {
+          let currentIndex = this.airlineList.findIndex(
+            ({ flightNO, flightDate }) =>
+              flightNO === queryData.flightNO &&
+              flightDate === queryData.flightDate
+          )
+          currentIndex = currentIndex > -1 ? currentIndex : 0
+          this.selectedAirline = this.airlineList[currentIndex].value
+        } else {
+          this.selectedAirline = ''
+        }
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryTrack () {
+      function isSameStep (code1, code2) {
+        const sameStepCodes = ['ARRIVED', 'TRANSFER']
+        return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
+      }
+      try {
+        const result = await this.queryBaggageTrack(this.selectedAirline.split(','))
+        this.resetStepNodes()
+        result.forEach(({ nodeCode, nodeName, processingTime, locationId, status }) => {
+          const replaceIndex = this.stepNodes.findIndex(
+            stepNode => stepNode.nodeCode === nodeCode || isSameStep(stepNode.nodeCode, nodeCode)
+          )
+          if (replaceIndex > -1) {
+            this.stepNodes.splice(replaceIndex, 1, {
+              nodeCode,
+              nodeName,
+              processingTime: processingTime?.replace('T', '\n'),
+              locationId,
+              status
+            })
+          }
+        })
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryMessage (queryData = this.queryData) {
+      const { flightNO, flightDate, bagSN } = queryData
+      const dataContent = { flightNO, flightDate, bagSN }
+      try {
+        const result = await this.queryBaggageMessage(dataContent)
+        const messageList = result.reduce((list, message, currentIndex, arr) => {
+          const messageObject = typeof message === 'string' ? JSON.parse(message) : message
+          // 确保是当前行李的报文
+          const isCorrectBaggage = messageObject.dataContent.includes(bagSN.slice(0, 7))
+          // 相同报文去重
+          const index = arr.findIndex(testMessage => {
+            const testMessageObject = typeof testMessage === 'string' ? JSON.parse(testMessage) : testMessage
+            return (
+              messageObject.dataContent === testMessageObject.dataContent &&
+              messageObject.ssid === testMessageObject.ssid
+            )
+          })
+          if (isCorrectBaggage && currentIndex === index) {
+            return [...list, messageObject]
+          } else {
+            return list
+          }
+        }, [])
+        this.messageList = this._.sortBy(messageList, 'ssid')
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.baggage-view {
+  width: 100%;
+  height: calc(100vh - 80px);
+  overflow: hidden;
+  background: #dfe3ea;
+  padding: 8px 8px 0;
+  .part1 {
+    width: 100%;
+    // height: 232px;
+    background: #041741;
+    padding: 16px 30px;
+    ::v-deep .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #ffffff;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .radioBtn {
+        margin-left: 32px;
+        padding: 5px;
+        background: #000d2a;
+        .el-radio-button__inner {
+          background: #000d2a;
+          color: #fff;
+          border: none;
+          font-weight: bold;
+        }
+        .el-radio-button:first-child .el-radio-button__inner {
+          border: none;
+        }
+      }
+      .btn-back {
+        color: #ffffff;
+      }
+    }
+    .part1_info {
+      width: 100%;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+      > .el-row > .el-col {
+        height: 38px;
+        line-height: 38px;
+        display: flex;
+        .label {
+          flex-basis: 126px;
+          text-align: right;
+        }
+        .content {
+          flex: 1;
+          margin: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &.click {
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  .part2 {
+    margin: 8px 0;
+    width: 100%;
+    padding: 24px 30px 28px;
+    background: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    .part2_info {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-start;
+      line-height: 42px;
+
+      .title {
+        width: 120px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #303133;
+        margin-right: 20px;
+      }
+      .type {
+        font-size: 18px;
+        font-weight: bold;
+        margin-right: 20px;
+        .warn {
+          color: #df3559;
+        }
+        .normal {
+          color: #519f6b;
+        }
+      }
+      .airline {
+        width: 120px;
+        margin-right: 20px;
+      }
+      .baggage-track-chart {
+        flex: 1;
+        height: 124px;
+        max-width: 1280px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+      }
+      .step-line {
+        width: calc(100% - 80px);
+        height: 10px;
+        position: absolute;
+        top: 16px;
+        right: 0;
+        left: 0;
+        margin: auto;
+        display: flex;
+        .step-line-segment {
+          width: calc(100% / 6);
+          height: 100%;
+          background: #afb4bf;
+          &.step-line-active {
+            background: #2d67e3;
+          }
+        }
+      }
+      .step-item {
+        width: 80px;
+        height: 100%;
+        text-align: center;
+        font-size: 14px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        z-index: 1;
+        font-family: Helvetica, "Microsoft Yahei";
+        .step-circle {
+          width: 42px;
+          height: 42px;
+          border-radius: 50%;
+          background: #aaacb2;
+          .step-name {
+            color: #ffffff;
+            font-size: 14px;
+            font-weight: bold;
+          }
+        }
+        .step-info {
+          margin-top: 15px;
+          color: #101116;
+          line-height: 22px;
+          .step-status {
+            &-normal {
+              color: #4ab36f;
+            }
+            &-abnormal {
+              color: #e9af4b;
+            }
+          }
+          .step-time {
+            white-space: pre-line;
+            font-size: 12px;
+            line-height: 20px;
+          }
+        }
+        &.active-item .step-circle {
+          background: #2d67e3;
+        }
+      }
+    }
+    .btns {
+      margin-top: 6px;
+    }
+  }
+  .part3 {
+    width: 100%;
+    // header-80px、part1-232px、part2-128px、间隙3*8px、底部44px
+    // height: calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px);
+    background: #ffffff;
+    ::v-deep .el-table {
+      width: 100%;
+      // &.el-table--striped {
+      //   .el-table__body tr.el-table__row--striped td.el-table__cell,
+      //   .el-table__header .el-table__cell {
+      //     background: #ffffff;
+      //   }
+      // }
+      .el-table__cell {
+        // background: #f0f3f7;
+        padding: 0;
+        &.cell-click {
+          cursor: pointer;
+          .cell {
+            color: #2d7cff;
+          }
+        }
+        .cell {
+          padding: 0;
+          word-spacing: 0;
+          font-size: 14px;
+          font-family: Helvetica, "Microsoft YaHei";
+          font-weight: 400;
+          color: #303133;
+          width: 100% !important;
+          .cell-content {
+            padding: 6px 0;
+          }
+        }
+      }
+      .el-table__body .el-table__cell .cell {
+        padding: 6px 10px;
+        .cell-content {
+          display: inline;
+          padding: 0;
+        }
+      }
+    }
+  }
+  .part4 {
+    width: 100%;
+    // height: calc(100vh - 80px - 232px - 2 * 8px - 44px);
+    .head {
+      padding: 16px 24px 11px 30px;
+      background: transparent;
+      display: flex;
+      justify-content: space-between;
+      .title {
+        line-height: 30px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #303133;
+      }
+    }
+    .main {
+      height: calc(100% - 57px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      ::v-deep .el-row {
+        flex-wrap: wrap;
+        .card {
+          width: 100%;
+          min-height: 440px;
+          padding: 20px;
+          background: #ffffff;
+          box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
+          margin-bottom: 24px;
+          > .message-date {
+            width: 180px;
+            height: 26px;
+            line-height: 14px;
+            font-size: 14px;
+            font-family: Helvetica;
+            color: #afb4bf;
+            border-bottom: 1px solid #afb4bf;
+            margin-bottom: 18px;
+          }
+          > .message-content {
+            white-space: pre-line;
+            line-height: 24px;
+            font-size: 14px;
+            color: #303133;
+            word-break: break-all;
+          }
+        }
+      }
+    }
+  }
+  .btns {
+    height: 30px;
+    display: flex;
+    .btn-square {
+      margin-left: 10px;
+      width: 30px;
+    }
+  }
+}
+</style>
+
+<style scoped lang="scss">
+::v-deep .baggage-view {
+  .el-popover {
+    &.popover-dark {
+      background: #303133;
+      color: #ffffff;
+      border: none;
+    }
+    .pre-line {
+      white-space: pre-line;
+    }
+  }
+  .el-popper[x-placement^="top"].popover-dark .popper__arrow::after {
+    border-top-color: #303133;
+  }
+  .el-popper[x-placement^="right"].popover-dark .popper__arrow::after {
+    border-right-color: #303133;
+  }
+  .el-popper[x-placement^="bottom"].popover-dark .popper__arrow::after {
+    border-bottom-color: #303133;
+  }
+  .el-popper[x-placement^="left"].popover-dark .popper__arrow::after {
+    border-left-color: #303133;
+  }
+}
+</style>

src/views/baggageManagement copy/components/container/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <div class="container-view">
+    <div class="container-basic">
+      <div class="title">
+        <div class="manageTitle">容器基本信息</div>
+        <el-button
+          type="primary"
+          size="small"
+          @click="toContainerHistory"
+        >历史记录</el-button>
+      </div>
+      <div
+        ref="basicBox"
+        class="basic-info-box"
+      >
+        <el-row :gutter="10">
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="4"
+          >
+            <div class="grid-content">容器编号：{{ $route.query.containerID }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">容器类型：{{ $route.query.containerType }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">舱位：{{ $route.query.containerSpace }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">航班号：{{ $route.query.flightNO }}</div>
+          </el-col>
+          <el-col
+            :xs="12"
+            :sm="12"
+            :xl="5"
+          >
+            <div class="grid-content">航班日期：{{ $route.query.flightDate }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">起飞站：{{ $route.query.departureAirport }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">目的站：{{ $route.query.landingAirport }}</div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="container-table">
+      <div class="title">
+        <div class="manageTitle">容器行李列表</div>
+        <!-- <TimeZoneSelector /> -->
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_export.png"
+          title="导出"
+          @click="exportHandler('table', '容器行李列表')"
+        >
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_setting.png"
+          title="列设置"
+          @click="show"
+        >
+      </div>
+      <div class="table-wrapper">
+        <el-table
+          ref="table"
+          :data="dealedTableData"
+          :height="computedTableHeight"
+          border
+          stripe
+          size="mini"
+          show-summary
+          :summary-method="summaryRow(dealedTableData.length)"
+          :header-cell-class-name="headerCellClass"
+          :header-cell-style="{ color: '#101116' }"
+          :row-class-name="rowClass"
+          :cell-class-name="cellClass"
+          @cell-click="cellClickHandler"
+        >
+          <el-table-column
+            v-for="col in tableColsCopy"
+            :key="col.index"
+            :prop="col.prop"
+            :label="col.label"
+            :align="col.align || 'center'"
+            :width="col.width"
+            :fixed="col.fixed"
+            :formatter="tableFormat"
+          >
+            <template #header>
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="tableDataFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!--列设置-->
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree
+            ref="columnSetTree"
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
+              label: 'label',
+              children: 'children',
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
+        </div>
+        <div class="foot right t30">
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck('tableData')"
+          >确定</el-button>
+          <el-button
+            size="medium"
+            @click="hide"
+          >取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog/index.vue'
+// import TimeZoneSelector from '@/components/TimeZoneSelector'
+import { myQuery } from '@/api/dataIntegration'
+import tableColsMixin from '../../mixins/tableCols'
+// import timeZoneMixin from '../../mixins/timeZone'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { setTableFilters } from '@/utils/table'
+import { mapGetters } from 'vuex'
+import { throttledExportToExcel } from '@/utils/table'
+export default {
+  name: 'ContainerView',
+  components: {
+    // TimeZoneSelector,
+    Dialog,
+    TableHeaderCell
+  },
+  mixins: [
+    tableColsMixin
+    //  timeZoneMixin
+  ],
+  data() {
+    return {
+      loading: false,
+      queryData: {},
+      computedTableHeight: undefined,
+      tableCols: [
+        {
+          prop: 'passengerName',
+          label: '旅客姓名',
+          desc: '指旅客姓名的拼音大写',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageSN',
+          label: '行李牌号',
+          desc: '指行李的10位数字行李牌号码',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'specialType',
+          label: '特殊行李类型',
+          desc: '指有别于普通托运行李的特殊行李分类，包括（装笼动物、机组行李、易碎行李、VIP行李等），参考BSM报文.E项说明',
+          width: 120,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'isDEL',
+          label: '删除',
+          desc: '指旅客是否取消值机托运，根据BSM报文状态是否有DEL判断，已删除的行李记录为斜体灰色字体',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'activeState',
+          label: '激活',
+          desc: '指托运行李是否被激活，参照BSM报文.S项说明',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageWeight',
+          label: '重量',
+          desc: '指托运行李的重量，参照BSM报文.W项说明'
+        },
+        {
+          prop: 'lastStatus',
+          label: '最新状态',
+          desc: '指托运行李的当前查询时间所在的节点状态',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'lastLocation',
+          label: '最新位置',
+          desc: '指托运行李的当前查询时间所在的节点状态的识读位置代号',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'inFlightNO',
+          label: '中转进航班',
+          desc: '指有中转行李转出的进港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'transferFlightNO',
+          label: '中转出航班',
+          desc: '指有中转行李转入的离港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        }
+      ],
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {}
+    }
+  },
+  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: {
+    loading(val) {
+      if (val) {
+        this.fullscreenLoading = this.$loading({
+          lock: true,
+          text: '加载中',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      } else {
+        this.fullscreenLoading?.close()
+      }
+    }
+  },
+  created() {
+    const { flightNO, flightDate, departureAirport, landingAirport, containerID } = this.$route.query
+    if (flightNO && flightDate && departureAirport && landingAirport && containerID) {
+      this.queryData = { flightNO, flightDate, departureAirport, landingAirport, containerID }
+      this.queryContainerBaggage([flightNO, flightDate, departureAirport, landingAirport, containerID])
+    } else {
+      this.$router.push('/')
+    }
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.tableDataFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
+  },
+  activated() {
+    this.setTableHeight()
+  },
+  updated() {
+    this.setTableHeight()
+  },
+  deactivated() {
+    this.fullscreenLoading?.close()
+  },
+  methods: {
+    setTableHeight() {
+      const headerHeight = 80
+      const bottomBlankHeight = 16
+      const titleHeight = 64
+      const basicBoxHeight = this.$refs['basicBox'].offsetHeight
+      this.computedTableHeight = `calc(100vh - ${
+        headerHeight + bottomBlankHeight + titleHeight * 2 + basicBoxHeight
+      }px)`
+      this.$nextTick(() => {
+        this.$refs['table']?.doLayout()
+      })
+    },
+    rowClass({ row, rowIndex }) {
+      const classes = []
+      if (row['isDEL'] === 'DEL') {
+        classes.push('bgl-deleted')
+        if (row['waitOFF'] === 1) {
+          classes.push('bgl-toUnload')
+        }
+      }
+      return classes.join(' ')
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        ['checkInTime', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(
+          column.property
+        )
+      ) {
+        classes.push('pre-line')
+      }
+      if (
+        [
+          'passengerName',
+          'luggageSN'
+          // 'inFlightNO',
+          // 'transferFlightNO'
+        ].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')
+        }
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          'passengerName',
+          'luggageSN'
+          // 'inFlightNO',
+          //  'transferFlightNO'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        switch (column.property) {
+          case 'passengerName':
+            this.$store.dispatch('app/setPassengerQueryParams', {
+              flightNO: this.queryData.flightNO,
+              flightDate: this.queryData.flightDate,
+              passengerName: row.passengerName
+            })
+            this.$store.dispatch('app/togglePassengerDialogFlag', true)
+            break
+          case 'luggageSN':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/baggageView`,
+              query: {
+                bagSN: row.luggageSN,
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate
+              }
+            })
+            break
+          default:
+            break
+        }
+      }
+    },
+    toContainerHistory() {
+      this.$router.push({
+        path: `${this.$route.path.split('/').slice(0, -1).join('/')}/containerHistory`,
+        query: {
+          containerID: this.queryData.containerID
+        }
+      })
+    },
+    // 统计行数
+    summaryRow(num) {
+      return function () {
+        return ['合计', `共${num}件`]
+      }
+    },
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'isDEL':
+          return cellValue === 'DEL' ? '删除' : ''
+        case 'activeState':
+          return Number(cellValue) === 1 ? '激活' : '未激活'
+        default:
+          return cellValue ?? ''
+      }
+    },
+    exportHandler(refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${Object.values(this.queryData).join('-')}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
+    },
+    async queryContainerBaggage(dataContent) {
+      this.loading = true
+      this.tableData = []
+      try {
+        const tableData = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        this.tableData = tableData
+        setTableFilters(this.tableData, this.tableDataFilters)
+      } catch {
+        this.$message.error('失败')
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container-view {
+  width: 100%;
+  height: calc(100vh - 80px - 16px);
+  overflow: hidden;
+  background: #dfe3ea;
+  padding: 0px 8px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 0;
+    margin-right: 0;
+  }
+  .container-basic {
+    .basic-info-box {
+      width: 100%;
+      background: #041741;
+      padding: 16px 30px;
+      color: #fff;
+    }
+  }
+  .container-table {
+    .title {
+      height: 64px;
+      .manageTitle {
+        flex: 1;
+      }
+      .el-dropdown {
+        height: 30px;
+      }
+      .btn-square {
+        height: 30px;
+        margin-left: 20px;
+        &:last-child {
+          margin-right: 30px;
+        }
+      }
+    }
+    .table-wrapper {
+      background-color: #fff;
+      ::v-deep .el-table {
+        width: 100%;
+        .cell {
+          padding: 0;
+          text-align: center;
+          font-size: 14px;
+          font-family: Helvetica, 'Microsoft YaHei';
+          letter-spacing: 0;
+        }
+        .cell-click {
+          cursor: pointer;
+          color: #2d7cff;
+          &.cell-clicked {
+            color: purple;
+          }
+        }
+        .el-table__body-wrapper,
+        .el-table__fixed-body-wrapper {
+          tr.bgl-deleted {
+            background: #d2d6df;
+            td {
+              background: #d2d6df;
+              font-style: italic;
+            }
+            &.bgl-warning td {
+              background: lightcoral;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/containerHistory/index.vue

@@ -0,0 +1,489 @@
+<template>
+  <div class="container-history">
+    <div class="container-left">
+      <div class="title">
+        <span class="manageTitle">容器历史</span>
+        <!-- <BackButton /> -->
+      </div>
+      <div
+        v-loading="treeLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        class="container-tree"
+      >
+        <el-tree
+          :data="containerHistoryTree"
+          :props="defaultTreeProps"
+          node-key="index"
+          default-expand-all
+          :expand-on-click-node="false"
+          @current-change="currentChangeHandler"
+        >
+          <span
+            slot-scope="{ node, data }"
+            class="el-tree-node__label"
+          >
+            <el-tooltip
+              v-if="data.index === -1"
+              class="item"
+              effect="dark"
+              :content="msg"
+              placement="top"
+            >
+              <span>{{ node.label }}</span>
+            </el-tooltip>
+            <span v-else>{{ node.label }}</span>
+          </span>
+        </el-tree>
+      </div>
+    </div>
+    <div
+      v-loading="tableLoading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      class="container-right"
+    >
+      <el-table
+        ref="table"
+        :data="dealedTableData"
+        border
+        stripe
+        fit
+        height="calc(100vh - 80px - 17px - 20px)"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="tableRowClassName"
+        :cell-class-name="cellClass"
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="col in tableCols"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
+          :formatter="tableFormat"
+        >
+          <template #header>
+            <el-tooltip
+              :content="col.desc || col.label"
+              placement="top"
+            >
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="tableDataFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+// import BackButton from '@/components/BackButton'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { mapGetters } from 'vuex'
+import { myQuery } from '@/api/dataIntegration'
+import { setTableFilters } from '@/utils/table'
+
+export default {
+  name: 'ContainerHistory',
+  components: {
+    // BackButton,
+    TableHeaderCell
+  },
+  data() {
+    return {
+      queryData: {},
+      containerHistory: [],
+      selectedHistoryData: {},
+      defaultTreeProps: {
+        children: 'children',
+        label: 'label'
+      },
+      treeLoading: false,
+      tableLoading: false,
+      tableCols: [
+        {
+          prop: 'passengerName',
+          label: '旅客姓名',
+          desc: '指旅客姓名的拼音大写',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageSN',
+          label: '行李牌号',
+          desc: '指行李的10位数字行李牌号码',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'specialType',
+          label: '特殊行李类型',
+          desc: '指有别于普通托运行李的特殊行李分类，包括（装笼动物、机组行李、易碎行李、VIP行李等），参考BSM报文.E项说明',
+          width: 115,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'isDEL',
+          label: '删除',
+          desc: '指旅客是否取消值机托运，根据BSM报文状态是否有DEL判断，已删除的行李记录为斜体灰色字体',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'activeState',
+          label: '激活',
+          desc: '指托运行李是否被激活，参照BSM报文.S项说明',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageWeight',
+          label: '重量',
+          desc: '指托运行李的重量，参照BSM报文.W项说明'
+        },
+        {
+          prop: 'lastStatus',
+          label: '最新状态',
+          desc: '指托运行李的当前查询时间所在的节点状态',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'lastLocation',
+          label: '最新位置',
+          desc: '指托运行李的当前查询时间所在的节点状态的识读位置代号',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'inFlightNO',
+          label: '中转进航班',
+          desc: '指有中转行李转出的进港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'transferFlightNO',
+          label: '中转出航班',
+          desc: '指有中转行李转入的离港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        }
+      ],
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      msg: '容器历史默认显示最近10条历史，如果需要可联系管理员进行配置'
+    }
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    containerHistoryTree() {
+      return [
+        {
+          index: -1,
+          label: `容器历史-${this.queryData.containerID}`,
+          children: this.containerHistory.map(({ flightNO, flightDate, departureAirport, arriveAirport }, index) => ({
+            index,
+            label: [flightNO, flightDate.replaceAll('-', '/'), departureAirport, arriveAirport].join('-')
+          }))
+        }
+      ]
+    },
+    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])
+    }
+  },
+  created() {
+    const { containerID } = this.$route.query
+    if (containerID) {
+      this.queryData = { containerID }
+      this.queryContainerHistory([containerID])
+    } else {
+      this.$router.push('/')
+    }
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.tableDataFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
+  deactivated() {
+    this.treeLoading = false
+    this.tableLoading = false
+  },
+  methods: {
+    currentChangeHandler({ index }) {
+      if (index > -1) {
+        this.selectedHistoryData = this.containerHistory[index]
+        const { flightNO, flightDate, departureAirport, arriveAirport, containerID } = this.selectedHistoryData
+        const dataContent = [flightNO, flightDate, departureAirport, arriveAirport, containerID]
+        this.queryBaggageList(dataContent)
+      }
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    tableRowClassName({ row, rowIndex }) {
+      const classes = []
+      if (row.isDEL === 'DEL') {
+        classes.push('bgl-deleted')
+      }
+      return classes.join(' ')
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        [
+          'passengerName',
+          'luggageSN'
+          // 'inFlightNO',
+          // 'transferFlightNO'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === 'advance' &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          'passengerName',
+          'luggageSN'
+          // 'inFlightNO',
+          // 'transferFlightNO'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        switch (column.property) {
+          case 'passengerName':
+            this.$store.dispatch('app/setPassengerQueryParams', {
+              flightNO: this.selectedHistoryData.flightNO,
+              flightDate: this.selectedHistoryData.flightDate,
+              passengerName: row.passengerName
+            })
+            this.$store.dispatch('app/togglePassengerDialogFlag', true)
+            break
+          case 'luggageSN':
+            this.$router.push({
+              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
+              query: {
+                flightNO: this.selectedHistoryData.flightNO,
+                flightDate: this.selectedHistoryData.flightDate,
+                bagSN: row.luggageSN
+              }
+            })
+            break
+          // case 'inFlightNO':
+          //   this.$router.push({
+          //     path: '/advance/flightView',
+          //     query: {
+          //       flightNO: row.inFlightNO,
+          //       flightDate: row.preFlightDate
+          //     }
+          //   })
+          //   break
+          // case 'transferFlightNO':
+          //   this.$router.push({
+          //     path: '/advance/flightView',
+          //     query: {
+          //       flightNO: row.transferFlightNO,
+          //       flightDate: row.transferFlightDate
+          //     }
+          //   })
+          //   break
+          default:
+            break
+        }
+      }
+    },
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'isDEL':
+          return cellValue === 'DEL' ? '删除' : ''
+        case 'activeState':
+          return Number(cellValue) === 1 ? '激活' : '未激活'
+        default:
+          return cellValue ?? ''
+      }
+    },
+    async queryContainerHistory(dataContent) {
+      this.treeLoading = true
+      this.tableData = []
+      try {
+        const result = await myQuery(DATACONTENT_ID.containerHistory, ...dataContent)
+        this.containerHistory = result
+        this.msg = '容器历史默认显示最近' + this.containerHistory[0].k + '条历史，如果需要可联系管理员进行配置'
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.treeLoading = false
+    },
+    async queryBaggageList(dataContent) {
+      this.tableLoading = true
+      this.tableData = []
+      try {
+        const result = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        this.tableData = result
+        setTableFilters(this.tableData, this.tableDataFilters)
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.tableLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container-history {
+  padding: 17px 24px 20px;
+  display: flex;
+  .container-left {
+    flex: 0 1 352px;
+    margin-right: 16px;
+    background-color: #ffffff;
+    .title {
+      height: 32px;
+      .manageTitle {
+        margin-right: 0;
+      }
+    }
+    ::v-deep .el-tree {
+      height: calc(100vh - 80px - 32px - 17px - 20px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      > .el-tree-node {
+        > .el-tree-node__children {
+          display: block;
+        }
+        .el-tree-node__content {
+          height: 38px;
+          .el-tree-node__label {
+            margin-left: 0;
+            letter-spacing: 1px;
+            line-height: 38px;
+            font-size: 14px;
+            font-family: Helvetica, 'Microsoft YaHei';
+            font-weight: bold;
+            color: #101116;
+          }
+        }
+        > .el-tree-node__content {
+          > .el-tree-node__expand-icon.el-icon-caret-right:not(.is-leaf):before {
+            font-size: 16px;
+            color: #101116;
+          }
+          > .el-tree-node__label {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .container-right {
+    flex: 1;
+    ::v-deep .el-table {
+      width: 100%;
+      .cell {
+        padding: 0;
+        text-align: center;
+        font-size: 14px;
+        font-family: Helvetica, 'Microsoft YaHei';
+        letter-spacing: 0;
+      }
+      .cell-click {
+        cursor: pointer;
+        color: #2d7cff;
+        &.cell-clicked {
+          color: purple;
+        }
+      }
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        .cell {
+          font-weight: bold;
+          color: #101116;
+        }
+      }
+      .el-table__body-wrapper,
+      .el-table__fixed-body-wrapper {
+        tr.bgl-deleted {
+          background: #d2d6df;
+          td {
+            background: #d2d6df;
+            font-style: italic;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/departure/baggage.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:53:12
+ * @LastEditors: your name
+ * @Description: 离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <BaggageView />
+</template>
+
+<script>
+import BaggageView from '../baggage'
+
+export default {
+  name: 'DepartureBaggageView',
+  components: {
+    BaggageView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/departure/container.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 离港容器视图
+ * have a nice day!
+-->
+
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../container'
+
+export default {
+  name: 'DepartureContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

src/views/baggageManagement copy/components/departure/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'DepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement copy/components/departure/flight.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:49:13
+ * @LastEditTime: 2022-03-09 11:53:27
+ * @LastEditors: your name
+ * @Description: 离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <FlightView />
+</template>
+
+<script>
+import FlightView from '../flight'
+
+export default {
+  name: 'DepartureFlightView',
+  components: {
+    FlightView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/departure/index.vue

@@ -0,0 +1,805 @@
+<!--
+ * @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-cascader
+            v-model="formData.currentAirport"
+            style="width:144px;margin-left:10px"
+            placeholder="全部机场"
+            size="small"
+            :options="currentAirportList"
+            :props="currentAirportProps"
+            collapse-tags
+            clearable
+            filterable
+            @change="setCurrentAirport"
+          /> -->
+            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
+              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width:216px;"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="startDateChangeHandler"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width:216px;"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="endDateChangeHandler"
+            />
+          </el-form-item> -->
+          <el-form-item prop="flightDate" label="航班日期">
+            <el-date-picker v-model="formData.flightDate" :clearable="false" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          </el-form-item>
+          <el-form-item>
+            <div class="box-item">
+              <p>预计装载总数：</p>
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </el-form-item>
+        </div>
+        <div class="form-right" @keyup.enter="onSubmit(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 v-is="['dm_dt_timeIcon']">
+            <TimeZoneSelector />
+          </el-form-item> -->
+          <el-form-item>
+            <TimeZoneSelector />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站离港列表')" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站离港列表')" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
+          <template #header>
+            <el-tooltip :content="col.desc || childCol.label" placement="top">
+              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog";
+import TimeZoneSelector from "@/components/TimeZoneSelector";
+import terminalMixin from "../../mixins/terminal";
+import formMixin from "../../mixins/form";
+import tableColsMixin from "../../mixins/tableCols";
+import timeZoneMixin from "../../mixins/timeZone";
+import { getQuery } from "@/api/flight";
+import { GeneralDataReception } from "@/api/dataIntegration";
+import TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters, throttledExportToExcel, timeInZone } from "@/utils/table";
+import { parseTime } from "@/utils/index";
+import { mapGetters } from "vuex";
+import { getToken } from '@/utils/auth';
+
+export default {
+  name: "DepartureTerminalView",
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      popoverVisible: false,
+      // 初始表头
+      tableCols: [
+        {
+          prop: "flightNO",
+          label: "航班号",
+          desc: "指航班编号",
+          width: 80,
+          fixed: "left",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "flightDate",
+          label: "执飞日期",
+          desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+          width: 105,
+          fixed: "left",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "planDepartureTime",
+          label: "起飞时间",
+          desc: "根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间",
+          width: 150,
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "targetAirport",
+          label: "目的站",
+          desc: "指航班执飞航段的目的航站，以航站三字码显示",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "departureBuild",
+          label: "航站楼",
+          desc: "指航班执飞航段的目的航站楼",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "bordingGate",
+          label: "登机口",
+          desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "standForDepartrue",
+          label: "停机位",
+          desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "checkInTravellerNumber",
+          label: "托运旅客",
+          desc: "指航班已办理行李托运业务的旅客人数，含取消托运的旅客人数",
+        },
+        {
+          prop: "checkInNumber",
+          label: "值机数",
+          desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+        },
+        {
+          prop: "unActive",
+          label: "未激活",
+          desc: "指最后的 BSM 报文“.S”中行李状态为“I”的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "preLoad",
+          label: "预计装载",
+          desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+        },
+        {
+          prop: "checkNumber",
+          label: "安检",
+          desc: "指进行安检的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "sortNumber",
+          label: "分拣",
+          desc: "指已分拣完成的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "loadNumber",
+          label: "装车",
+          desc: "指已在分拣口装车完成的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "boardID",
+          label: "装机",
+          desc: "指装机完成的行李数量，不含取消托运的行李数量",
+        },
+        {
+          prop: "toUnload",
+          label: "待翻减",
+          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，而没有完成翻减的行李数量（须翻减总数减去已翻减数）",
+        },
+        {
+          prop: "OFFCount",
+          label: "已翻减",
+          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，且已完成翻减的行李数量",
+        },
+        {
+          prop: "noCheckInNumber",
+          label: "取消托运",
+          desc: "指旅客在办理行李托运后，又取消托运的行李总数量",
+        },
+        {
+          prop: "noBSM",
+          label: "无BSM",
+          desc: "行李有处理信息（BPM）但无值机信息(BSM)的行李数量",
+        },
+        {
+          prop: "warning",
+          label: "风险预警",
+          desc: "指依据航班信息中预计起飞时间和当前时间差，与根据分拣到停机位设置的报警阈值对比，超过阈值的为风险行李，本项显示风险预警行李数量",
+        },
+        {
+          prop: "exceptions",
+          label: "未装机行李",
+          desc: "指航班关闭货舱门后，应装而未装的行李数量",
+        },
+        {
+          prop: "midIn",
+          label: "中转进行李",
+          desc: "指从其他航班中转到当前航班的行李数量",
+        },
+      ],
+      tableDataSortRules: {
+        flightCanceled: "ascending",
+      },
+      loading: false,
+      AirportList: [],
+      loopEvent: null,
+      leaveCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      table: null,
+      WarningData: [],
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+    ...mapGetters(["timeZone"]),
+  },
+  mounted () {
+    this.getAirPortData();
+    this.table = this.$refs.table.bodyWrapper;
+    const that = this;
+    this.table.addEventListener("scroll", () => {
+      that.scrollTop = this.table.scrollTop;
+    });
+  },
+  activated () {
+    this.table.scrollTop = this.scrollTop;
+    this.getTableData();
+    this.getWarningData();
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+  },
+  deactivated () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  beforeDestroy () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  methods: {
+    resetLoopEvent () {
+      this.loading = true;
+      this.hasSetTableScroll = false;
+      this.loopEvent && clearInterval(this.loopEvent);
+      this.getTableData();
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+    },
+    airPortChange () {
+      this.resetLoopEvent();
+    },
+    dateChangeHandler () {
+      this.resetLoopEvent();
+    },
+    async getAirPortData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAirMainId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.AirportList = this._.orderBy(res.returnData, (o) => o.planDepartureApt);
+          this.formData.currentAirport = "PEK";
+          this.resetLoopEvent();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    async getWarningData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureWarningId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          const { listValues } = res.returnData;
+          this.WarningData = listValues;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.flightStatus === "DLY") {
+        classes.push("bgl-delayed");
+      }
+      if (row.flightStatus === "CAN") {
+        classes.push("bgl-canceled");
+      }
+      if (row.hasTakeOff === 1) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.leaveCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      if (["warning", "exceptions", "midIn"].includes(column.property)) {
+        classes.push("bgl-huang");
+      }
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    // 获取表单下拉框数据
+    // getFormData(params) {
+    //   this.relatedAirportQuery({
+    //     ...params,
+    //     type: 'OUT'
+    //   })
+    //   this.outgoingAirlineQuery(params)
+    //   this.craftTypeQuery(params)
+    //   this.flightAttrQuery(params)
+    // },
+    // 获取表格数据
+    async getTableData () {
+      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
+        return;
+      }
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureTableMainId,
+          dataContent: {
+            departureAirport: this.formData.currentAirport,
+            startTime: this.startDate,
+            endTime: this.endDate
+          },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.initTableData(res.returnData.listValues);
+        } else {
+        }
+        this.loading = false;
+      } catch (error) {
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent);
+          this.loopEvent = null;
+        }
+        this.loading = false;
+      }
+    },
+    initTableData (tableData) {
+      const currentTime = new Date();
+      const curTime = this.formatTime(currentTime);
+      this.leaveCount = 0;
+      this.baggageCount = 0;
+      tableData.forEach((item) => {
+        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
+        item["toUnload"] = item['tounLoad'] - item["OFFCount"];
+        item["exceptions"] = item["preLoad"] - item["boardID"];
+        if (item["hasTakeOff"] === 1 && !item["flightCanceled"]) {
+          this.leaveCount++;
+        }
+        if (item["hasTakeOff"] !== 1 && !item["flightCanceled"] && item["preLoad"] - Math.max(item.loadNumber, item.boardID) > 0) {
+          this.WarningData.forEach((p) => {
+            const startTime = this.formatTime(timeInZone((p.startDate ?? "").replace("T", " "), this.timeZone), 2);
+            const endTime = this.formatTime(timeInZone((p.endDate ?? "").replace("T", " "), this.timeZone), 2);
+            const planTime = this.formatTime(timeInZone((item.planDepartureTime ?? "").replace("T", " "), this.timeZone), 2);
+            const capTime = Math.ceil((planTime - curTime) / (1000 * 60));
+            if (Number(startTime) - Number(curTime) < 0 && Number(endTime) - Number(curTime) > 0) {
+              const newItem = _.cloneDeep(item);
+              if (p.flightNO && p.flightNO == item.flightNO) {
+                if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                  item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
+                  item["warningState"] = 1;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+                if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                  item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
+                  item["warningState"] = 2;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+              } else if (!p.flightNO && p.IATACode) {
+                if (newItem.flightNO.substring(0, 2) == p.IATACode) {
+                  if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                    item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
+                    item["warningState"] = 1;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                  if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                    item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
+                    item["warningState"] = 2;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                }
+              }
+            }
+          });
+        }
+        this.baggageCount = this.baggageCount + item.preLoad;
+      });
+      this.tableData = this._.orderBy(tableData, ["hasTakeOff", "planDepartureTime"], ["desc", "asc"]);
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.toOrderNum(this.baggageCount);
+      this.$nextTick(() => {
+        this.setTableScroll();
+      });
+    },
+    formatTime (date, type = 1) {
+      let time = null;
+      if (type == 1) {
+        time = parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+      } else {
+        time = date;
+      }
+      const newTimt = new Date(time);
+      return newTimt.getTime();
+    },
+    async sendLog (obj) {
+      try {
+        const newObj = {
+          logTime: parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
+          logInfo: JSON.stringify(obj),
+          flightNO: obj.flightNO,
+          flightDate: obj.flightDate,
+          luggageSN: "",
+          strategyUseID: obj.alarmStrategyID,
+          event: 1,
+        };
+        await GeneralDataReception({
+          serviceId: SERVICE_ID.departureScId,
+          dataContent: JSON.stringify(newObj),
+        });
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    setTableScroll () {
+      if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      const lastRow = table.querySelectorAll(".el-table__body tr")[this.leaveCount - 1];
+      setTimeout(() => {
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index];
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+      }
+    },
+
+    toOrderNum (num) {
+      num = num.toString();
+      if (num.length < 6) {
+        num = "0" + num; // 如未满八位数，添加"0"补位
+        this.toOrderNum(num); // 递归添加"0"补位
+      } else if (num.length >= 6) {
+        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+      } else {
+        // 订单总量数字超过八位显示异常
+        this.$message.warning("总量数字过大");
+      }
+      this.setNumberTransform();
+    },
+    exportHandler (refName, tableName) {
+      if (this.loading) {
+        return;
+      }
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
+      throttledExportToExcel(table, tableName, fileName);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.terminal-form-wrap {
+  padding-top: 11px;
+  padding-left: 5px;
+  ::v-deep .form {
+    display: flex;
+    justify-content: space-between;
+    .form-left {
+      flex: 1;
+    }
+    .form-right {
+      flex: 0 1 auto;
+    }
+    .el-form-item {
+      margin-bottom: 0px;
+      margin-right: 8px;
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, "Microsoft YaHei";
+        font-size: 14px;
+      }
+      .el-switch__label {
+        color: #303133;
+      }
+      .el-form-item__error {
+        z-index: 10;
+      }
+    }
+    .btn-img {
+      position: relative;
+      top: 6px;
+    }
+  }
+  .box-item {
+    position: relative;
+    height: 50px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    // background: url(/images/text-bg-blue.png) no-repeat center center;
+    // background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+    border: 3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+}
+.terminal-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-hui {
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+      tr.bgl-delayed td {
+        background: #fcf0b1;
+      }
+      tr.bgl-canceled td {
+        background: #f7babe;
+      }
+      td.cell-toUnload {
+        background: lightcoral !important;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border: 2px dashed red;
+        }
+      }
+      td.cell-toUnloadNew {
+        background: #fcf0b1 !important;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border: 2px dashed #e28913;
+        }
+      }
+      .el-table__cell.is-hidden > * {
+        visibility: visible;
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/departureC/baggage.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:53:12
+ * @LastEditors: your name
+ * @Description: 离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <BaggageView />
+</template>
+
+<script>
+import BaggageView from '../baggage'
+
+export default {
+  name: 'DepartureBaggageView',
+  components: {
+    BaggageView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/departureC/container.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 离港容器视图
+ * have a nice day!
+-->
+
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../container'
+
+export default {
+  name: 'DepartureContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

src/views/baggageManagement copy/components/departureC/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'DepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement copy/components/departureC/flight.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:49:13
+ * @LastEditTime: 2022-03-09 11:53:27
+ * @LastEditors: your name
+ * @Description: 离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <FlightView />
+</template>
+
+<script>
+import FlightView from '../flight'
+
+export default {
+  name: 'DepartureFlightView',
+  components: {
+    FlightView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/departureC/index.vue

@@ -0,0 +1,713 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-08-09 18:17:41
+ * @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-cascader
+            v-model="formData.currentAirport"
+            style="width:144px;margin-left:10px"
+            placeholder="全部机场"
+            size="small"
+            :options="currentAirportList"
+            :props="currentAirportProps"
+            collapse-tags
+            clearable
+            filterable
+            @change="setCurrentAirport"
+          /> -->
+            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
+              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="flightDate" label="航班日期">
+            <!-- <el-date-picker
+              v-model="formData.flightDate"
+              size="small"
+              style="width: 300px;"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              :picker-options="dateRangePickerOptions"
+              @change="dateChangeHandler"
+            /> -->
+            <el-date-picker v-model="formData.flightDate[0]" size="small" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" @change="dateChange"> </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group size="small">
+              <!-- <el-button type="primary" @click="getEndDate('-1')" size="small" style="padding:7px 13px">前一天</el-button> -->
+              <!-- <el-button type="primary" @click="getEndDate('-2')" size="small" style="padding:7px 13px">前两天</el-button> -->
+              <el-button type="primary" @click="getEndDate('+1')" size="small" style="padding: 7px 13px">后一天</el-button>
+              <el-button type="primary" @click="getEndDate('+2')" size="small" style="padding: 7px 13px">后两天</el-button>
+            </el-button-group>
+          </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 v-is="['dm_dt_timeIcon']">
+            <TimeZoneSelector />
+          </el-form-item> -->
+          <el-form-item>
+            <TimeZoneSelector />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站离港列表')" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站离港列表')" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
+          <template #header>
+            <el-tooltip :content="col.desc || childCol.label" placement="top">
+              <TableHeaderCell :label="col.label" :filter-options="tableDataFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog";
+import TimeZoneSelector from "@/components/TimeZoneSelector";
+import terminalMixin from "../../mixins/terminal";
+import formMixin from "../../mixins/form";
+import tableColsMixin from "../../mixins/tableCols";
+import timeZoneMixin from "../../mixins/timeZone";
+import { getQuery } from "@/api/flight";
+import TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters, throttledExportToExcel } from "@/utils/table";
+
+export default {
+  name: "DepartureTerminalView",
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      popoverVisible: false,
+      // 初始表头
+      tableCols: [
+        {
+          prop: "flightNO",
+          label: "航班号",
+          desc: "指航班编号",
+          width: 80,
+          fixed: "left",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "flightDate",
+          label: "执飞日期",
+          desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+          width: 105,
+          fixed: "left",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "planDepartureTime",
+          label: "起飞时间",
+          desc: "根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间",
+          width: 150,
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "targetAirport",
+          label: "目的站",
+          desc: "指航班执飞航段的目的航站，以航站三字码显示",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "departureBuild",
+          label: "航站楼",
+          desc: "指航班执飞航段的目的航站楼",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "bordingGate",
+          label: "登机口",
+          desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "standForDepartrue",
+          label: "停机位",
+          desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+          filterable: true,
+          sortable: true,
+        },
+        {
+          prop: "checkInTravellerNumber",
+          label: "托运旅客",
+          desc: "指航班已办理行李托运业务的旅客人数，含取消托运的旅客人数",
+        },
+        {
+          prop: "checkInNumber",
+          label: "值机数",
+          desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+        },
+        {
+          prop: "unActive",
+          label: "未激活",
+          desc: "指最后的 BSM 报文“.S”中行李状态为“I”的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "preLoad",
+          label: "预计装载",
+          desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+        },
+        {
+          prop: "checkNumber",
+          label: "安检",
+          desc: "指进行安检的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "sortNumber",
+          label: "分拣",
+          desc: "指已分拣完成的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "loadNumber",
+          label: "装车",
+          desc: "指已在分拣口装车完成的行李数量，含取消托运的行李数量",
+        },
+        {
+          prop: "boardID",
+          label: "装机",
+          desc: "指装机完成的行李数量，不含取消托运的行李数量",
+        },
+        {
+          prop: "toUnload",
+          label: "待翻减",
+          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，而没有完成翻减的行李数量（须翻减总数减去已翻减数）",
+        },
+        {
+          prop: "OFFCount",
+          label: "已翻减",
+          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，且已完成翻减的行李数量",
+        },
+        {
+          prop: "noCheckInNumber",
+          label: "取消托运",
+          desc: "指旅客在办理行李托运后，又取消托运的行李总数量",
+        },
+        {
+          prop: "noBSM",
+          label: "无BSM",
+          desc: "行李有处理信息（BPM）但无值机信息(BSM)的行李数量",
+        },
+        {
+          prop: "warning",
+          label: "风险预警",
+          desc: "指依据航班信息中预计起飞时间和当前时间差，与根据分拣到停机位设置的报警阈值对比，超过阈值的为风险行李，本项显示风险预警行李数量",
+        },
+        {
+          prop: "exceptions",
+          label: "未装机行李",
+          desc: "指航班关闭货舱门后，应装而未装的行李数量",
+        },
+        {
+          prop: "midIn",
+          label: "中转进行李",
+          desc: "指从其他航班中转到当前航班的行李数量",
+        },
+      ],
+      tableDataSortRules: {
+        flightCanceled: "ascending",
+      },
+      loading: false,
+      AirportList: [],
+      loopEvent: null,
+      leaveCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      table: null,
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+  },
+  mounted () {
+    this.getAirPortData();
+    this.table = this.$refs.table.bodyWrapper;
+    const that = this;
+    this.table.addEventListener("scroll", () => {
+      that.scrollTop = this.table.scrollTop;
+    });
+  },
+  activated () {
+    this.table.scrollTop = this.scrollTop;
+    this.getTableData();
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+  },
+  deactivated () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  beforeDestroy () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  methods: {
+    getEndDate (num) {
+      let n = parseInt(num);
+      let nd = new Date(this.formData.flightDate[0]);
+      let day = nd.getDate();
+      let setd = new Date(nd.setDate(day + n));
+      let ryear = setd.getFullYear();
+      let rmonth = setd.getMonth() + 1;
+      let rday = setd.getDate();
+      let frmonth, frday;
+      // month day + '0'
+      if (rmonth < 10) {
+        frmonth = "0" + rmonth;
+      } else {
+        frmonth = rmonth;
+      }
+      if (rday < 10) {
+        frday = "0" + rday;
+      } else {
+        frday = rday;
+      }
+      // separator
+      let sep = "-";
+      this.formData.flightDate = [this.formData.flightDate[0], ryear + sep + frmonth + sep + frday];
+      this.resetLoopEvent();
+    },
+    resetLoopEvent () {
+      this.loading = true;
+      this.hasSetTableScroll = false;
+      if (this.loopEvent) {
+        clearInterval(this.loopEvent);
+      }
+      this.getTableData();
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+    },
+    airPortChange () {
+      this.resetLoopEvent();
+    },
+    dateChangeHandler () {
+      this.resetLoopEvent();
+    },
+    dateChange () {
+      this.formData.flightDate = [this.formData.flightDate[0], this.formData.flightDate[0]];
+      this.resetLoopEvent();
+    },
+    async getAirPortData () {
+      try {
+        const res = await getQuery({
+          id: DATACONTENT_ID.departureAirMainId,
+          dataContent: [],
+        });
+        if (Number(res.code) === 0) {
+          this.AirportList = this._.orderBy(res.returnData.listValues, (o) => o.planDepartureApt);
+          this.formData.currentAirport = "PEK";
+          this.resetLoopEvent();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+this.$message.error("失败");
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.flightStatus === "DLY") {
+        classes.push("bgl-delayed");
+      }
+      if (row.flightStatus === "CAN") {
+        classes.push("bgl-canceled");
+      }
+      if (row.hasTakeOff === 1) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.leaveCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      if (["warning", "exceptions", "midIn"].includes(column.property)) {
+        classes.push("bgl-huang");
+      }
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    // 获取表单下拉框数据
+    // getFormData(params) {
+    //   this.relatedAirportQuery({
+    //     ...params,
+    //     type: 'OUT'
+    //   })
+    //   this.outgoingAirlineQuery(params)
+    //   this.craftTypeQuery(params)
+    //   this.flightAttrQuery(params)
+    // },
+    // 获取表格数据
+    async getTableData () {
+      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
+        return;
+      }
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      try {
+        const res = await getQuery({
+          id: DATACONTENT_ID.departureTableMainId,
+          dataContent: [...arr, ...arr, ...arr],
+        });
+        if (Number(res.code) === 0) {
+          this.initTableData(res.returnData.listValues);
+        } else {
+
+        }
+        this.loading = false;
+      } catch (error) {
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent);
+          this.loopEvent = null;
+        }
+        this.loading = false;
+
+      }
+    },
+    initTableData (tableData) {
+      this.leaveCount = 0;
+      this.baggageCount = 0;
+      tableData.forEach((item) => {
+        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
+        item["toUnload"] = item['tounLoad'] - item["OFFCount"];
+        if (item["hasTakeOff"] === 1 && !item["flightCanceled"]) {
+          this.leaveCount++;
+        }
+        this.baggageCount = this.baggageCount + item.preLoad;
+      });
+      this.tableData = this._.orderBy(tableData, ["hasTakeOff", "planDepartureTime"], ["desc", "asc"]);
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.toOrderNum(this.baggageCount);
+      this.$nextTick(() => {
+        this.setTableScroll();
+      });
+    },
+    setTableScroll () {
+      if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      const lastRow = table.querySelectorAll(".el-table__body tr")[this.leaveCount - 1];
+      setTimeout(() => {
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index];
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+      }
+    },
+
+    toOrderNum (num) {
+      num = num.toString();
+      if (num.length < 6) {
+        num = "0" + num; // 如未满八位数，添加"0"补位
+        this.toOrderNum(num); // 递归添加"0"补位
+      } else if (num.length >= 6) {
+        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+      } else {
+        // 订单总量数字超过八位显示异常
+        this.$message.warning("总量数字过大");
+      }
+      this.setNumberTransform();
+    },
+    exportHandler (refName, tableName) {
+      if (this.loading) {
+        return;
+      }
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
+      throttledExportToExcel(table, tableName, fileName);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.terminal-form-wrap {
+  padding-top: 11px;
+  padding-left: 5px;
+  ::v-deep .form {
+    display: flex;
+    justify-content: space-between;
+    .form-left {
+      flex: 1;
+    }
+    .form-right {
+      flex: 0 1 auto;
+    }
+    .el-form-item {
+      margin-bottom: 0px;
+      margin-right: 8px;
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, "Microsoft YaHei";
+        font-size: 14px;
+      }
+      .el-switch__label {
+        color: #303133;
+      }
+      .el-form-item__error {
+        z-index: 10;
+      }
+    }
+    .btn-img {
+      position: relative;
+      top: 6px;
+    }
+  }
+  .box-item {
+    position: relative;
+    height: 50px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    // background: url(/images/text-bg-blue.png) no-repeat center center;
+    // background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+    border: 3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+}
+.terminal-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-hui {
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+      tr.bgl-delayed td {
+        background: #fcf0b1;
+      }
+      tr.bgl-canceled td {
+        background: #f7babe;
+      }
+      td.cell-toUnload {
+        background: lightcoral !important;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border: 2px dashed red;
+        }
+      }
+      .el-table__cell.is-hidden > * {
+        visibility: visible;
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/flight/index.vue

@@ -0,0 +1,1337 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-08-12 18:59:39
+ * @LastEditors: your name
+ * @Description: 航班视图
+-->
+<template>
+  <div class="flight-view">
+    <div class="flight-wrapper">
+      <div class="part1">
+        <div class="title">
+          <span class="manageTitle">航班基本信息</span>
+          <!-- <BackButton /> -->
+        </div>
+        <div class="part1-wrapper">
+          <div class="airline">
+            {{ queryData.flightNO }}
+            <el-select v-model="selectedAirline" size="mini" class="airline-select">
+              <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
+            </el-select>
+          </div>
+          <div class="part1_info">
+            <div class="part1_info_box">
+              <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>起飞机场简称：</span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>{{ flightInfo.departureName }}</span>
+                </el-col>
+              </el-row>
+              <!-- <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>起飞机场三字码：</span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>{{ flightInfo.planDepartureApt }}</span>
+                </el-col>
+              </el-row> -->
+              <el-row>
+                <!-- <el-col :xs="24" :sm="24" :xl="12">
+                  <span>航站楼：{{ flightInfo.departureBuild }}</span>
+                </el-col> -->
+                <el-col :span="24">
+                  <span>分拣转盘：{{ flightInfo.sortCarousel }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span> 日期：{{ flightInfo.planDepartureTime && flightInfo.planDepartureTime.split('T')[0] }} </span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span> 时间：{{ flightInfo.planDepartureTime && flightInfo.planDepartureTime.split('T')[1] }} </span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>登机口：{{ flightInfo.bordingGate }}</span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>停机位：{{ flightInfo.standForDepartrue }}</span>
+                </el-col>
+              </el-row>
+            </div>
+            <i class="part1_info_arrow_right el-icon-caret-right" />
+            <div class="part1_info_box">
+              <!-- <el-row>
+                <el-col :span="12">
+                  <span>航班号：</span>
+                </el-col>
+                <el-col :span="12">
+                  <span>{{ flightInfo.flightNO }}</span>
+                </el-col>
+              </el-row> -->
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>航班状态：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <!-- <span>{{ flightInfo.flightStatus === null ? "正常" : flightInfo.flightStatus }}</span> -->
+                  <span>{{ flightInfo.flightStateCN }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>机号：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <span>{{ flightInfo.craftNo }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>托运旅客数：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <span>{{ flightInfo.count1 }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>终点行李数：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <span>{{ flightInfo.count2 }}</span>
+                </el-col>
+              </el-row>
+              <!-- <el-row>
+                <el-col :xs="18" :sm="18" :xl="12">
+                  <span>中转进行李数：</span>
+                </el-col>
+                <el-col :xs="6" :sm="6" :xl="12">
+                  <span>{{ flightInfo.count4 }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="18" :sm="18" :xl="12">
+                  <span>中转出行李数：</span>
+                </el-col>
+                <el-col :xs="6" :sm="6" :xl="12">
+                  <span>{{ flightInfo.count3 }}</span>
+                </el-col>
+              </el-row> -->
+            </div>
+            <i class="part1_info_arrow_right el-icon-caret-right" />
+            <div class="part1_info_box">
+              <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>降落机场简称：</span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>{{ flightInfo.landingName }}</span>
+                </el-col>
+              </el-row>
+              <!-- <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>降落机场三字码：</span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span>{{ flightInfo.planLandingApt }}</span>
+                </el-col>
+              </el-row> -->
+              <!-- <el-row>
+                <el-col :span="12">
+                  <span>航站楼：</span>
+                </el-col>
+                <el-col :span="12">
+                  <span>{{ flightInfo.landingBuild }}</span>
+                </el-col>
+              </el-row> -->
+              <el-row>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span> 日期：{{ flightInfo.expectLandingTime && flightInfo.expectLandingTime.split('T')[0] }} </span>
+                </el-col>
+                <el-col :xs="24" :sm="24" :xl="12">
+                  <span> 时间：{{ flightInfo.expectLandingTime && flightInfo.expectLandingTime.split('T')[1] }} </span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>提取转盘：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <span>{{ flightInfo.carousel }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :xs="16" :sm="16" :xl="12">
+                  <span>停机位：</span>
+                </el-col>
+                <el-col :xs="8" :sm="8" :xl="12">
+                  <span>{{ flightInfo.standForLanding }}</span>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="part2">
+        <div class="title">
+          <span class="manageTitle">航班容器列表</span>
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('containerTable', '航班容器列表')" />
+        </div>
+        <el-table ref="containerTable" :data="containerTableData" border style="width: 100%" height="290px" stripe size="mini" show-summary :summary-method="summaryMethod" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" :cell-class-name="cellClass" @cell-click="cellClickHandler">
+          <el-table-column v-for="col in containerTableColumn" :key="col.id" :prop="col.prop" :label="col.label" :width="col.width" :align="col.align || 'center'" :show-overflow-tooltip="true" />
+        </el-table>
+      </div>
+      <!-- <div
+        class="part3"
+        style="padding-right: 4px"
+      >
+        <div class="title">中转进</div>
+        <el-table
+          ref="transferInBaggageTable"
+          :data="transferInBaggageTableData"
+          border
+          style="width: 100%"
+          height="162"
+          stripe
+          size="mini"
+          show-summary
+          :summary-method="summaryMethod"
+          :header-cell-style="{ color: '#101116' }"
+          :cell-class-name="cellClass"
+          @cell-click="cellClickHandler"
+        >
+          <el-table-column
+            v-for="col in transferInTableColumn"
+            :key="col.id"
+            :prop="col.prop"
+            :label="col.label"
+            :align="col.align || 'center'"
+            :show-overflow-tooltip="true"
+          />
+        </el-table>
+      </div>
+      <div
+        class="part3"
+        style="padding-left: 4px"
+      >
+        <div class="title">中转出</div>
+        <el-table
+          ref="transferOutBaggageTable"
+          :data="transferOutBaggageTableData"
+          border
+          style="width: 100%"
+          height="162"
+          stripe
+          size="mini"
+          show-summary
+          :summary-method="summaryMethod"
+          :header-cell-style="{ color: '#101116' }"
+          :cell-class-name="cellClass"
+          @cell-click="cellClickHandler"
+        >
+          <el-table-column
+            v-for="col in transferOutTableColumn"
+            :key="col.id"
+            :prop="col.prop"
+            :label="col.label"
+            :align="col.align || 'center'"
+            :show-overflow-tooltip="true"
+          />
+        </el-table>
+      </div> -->
+      <div class="drag-mask" :class="{ active: dragActive }" />
+      <div class="part4" :style="draggableStyle">
+        <div ref="dragBox" class="drag-box" :class="{ active: dragActive }">
+          <i class="drag-icon el-icon-d-caret" />
+          <div class="drag-line" :style="dragLineStyle" />
+        </div>
+        <div class="title">
+          <span class="manageTitle">航班行李列表</span>
+          <div class="filter-select">
+            <span class="label">快捷筛选</span>
+            <!-- <el-select
+              v-model="selectedFilter"
+              size="mini"
+              placeholder="无"
+              clearable
+            >
+              <el-option
+                v-for="option in filterSelectOptions"
+                :key="option.value"
+                :value="option.value"
+                :label="option.label"
+              />
+            </el-select> -->
+            <el-cascader v-model="selectedFilter" :options="filterSelectOptions" :props="{ expandTrigger: 'hover', checkStrictly: true }" size="mini" placeholder="无" clearable />
+          </div>
+          <TimeZoneSelector />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('flightBaggageTable', '航班行李列表')" />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+        </div>
+        <el-table ref="flightBaggageTable" :data="dealedTableData" border style="width: 100%" height="calc(100% - 64px)" stripe size="mini" show-summary :summary-method="summaryRow(dealedTableData.length)" :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" :cell-class-name="cellClass" @cell-click="cellClickHandler">
+          <el-table-column v-for="col in tableColsCopy" :key="col.index" :prop="col.prop" :label="col.label" :align="col.align || 'center'" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
+            <template #header>
+              <TableHeaderCell :label="col.label" :filter-options="flightBaggageTableFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children'
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck('flightBaggageTableData')">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script>
+// import BackButton from '@/components/BackButton'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import TimeZoneSelector from '@/components/TimeZoneSelector'
+import { myQuery } from '@/api/dataIntegration'
+import tableColsMixin from '../../mixins/tableCols'
+import timeZoneMixin from '../../mixins/timeZone'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { setTableFilters } from '@/utils/table'
+import { mapGetters } from 'vuex'
+import { throttledExportToExcel } from '@/utils/table'
+
+export default {
+  name: 'FlightView',
+  components: {
+    Dialog,
+    TimeZoneSelector,
+    TableHeaderCell
+  },
+  mixins: [tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      loading: false,
+      airlineList: [],
+      selectedAirline: '',
+      queryData: {},
+      flightInfo: {},
+      warningRules: [],
+      debounceTime: 300,
+      containerTableColumn: [
+        { label: '容器编号', prop: 'containerNumber', width: 100 },
+        { label: '类型', prop: 'style' },
+        { label: '行李数', prop: 'numberOfBags' },
+        { label: '舱位', prop: 'containerSpace' }
+      ],
+      // transferInTableColumn: [
+      //   { label: '航班号', prop: 'preFlightNO' },
+      //   { label: '日期', prop: 'preFlightDate' },
+      //   { label: '时间', prop: 'flightTime' },
+      //   { label: '始发站', prop: 'planDepartureApt' },
+      //   { label: '航班状态', prop: 'flightStatus' },
+      //   { label: '中转数', prop: 'totalNumber' }
+      // ],
+      // transferOutTableColumn: [
+      //   { label: '航班号', prop: 'transferFlightNO' },
+      //   { label: '日期', prop: 'transferFlightDate' },
+      //   { label: '时间', prop: 'flightTime' },
+      //   { label: '始发站', prop: 'planDepartureApt' },
+      //   { label: '目的站', prop: 'planLandingApt' },
+      //   { label: '中转数', prop: 'transferNumber' }
+      // ],
+      tableCols: [
+        {
+          label: '旅客姓名',
+          prop: 'PassengerNameUpcase',
+          width: 140,
+          fixed: 'left',
+          filterable: true,
+          sortable: true
+        },
+        {
+          label: '行李牌号',
+          prop: 'BagSN',
+          width: 120,
+          fixed: 'left',
+          filterable: true,
+          sortable: true
+        },
+        {
+          label: '特殊行李类型',
+          prop: 'SpecialType',
+          width: 120,
+          filterable: true,
+          sortable: true
+        },
+        {
+          label: '容器编号',
+          prop: 'U_Device_ID',
+          width: 120,
+          filterable: true,
+          sortable: true
+        },
+        { label: '装载序号', prop: 'LoadSN' },
+        { label: '值机', prop: 'checkInTime', width: 140 },
+        {
+          label: '状态',
+          prop: 'latestStatus',
+          filterable: true,
+          sortable: true
+        },
+        { label: '安检', prop: 'securityTime', width: 140 },
+        { label: '分拣', prop: 'sortTime', width: 140 },
+        { label: '装车', prop: 'loadTime', width: 140 },
+        { label: '装机', prop: 'inflTime', width: 140 },
+        {
+          label: '中转进航班',
+          prop: 'inFlightNO',
+          filterable: true,
+          sortable: true,
+          width: 105
+        },
+        {
+          label: '中转出航班',
+          prop: 'transferFlightNO',
+          filterable: true,
+          sortable: true,
+          width: 105
+        },
+        {
+          label: '卷宗号',
+          prop: 'fileNumber',
+          filterable: true,
+          sortable: true,
+          width: 100
+        }
+      ],
+      containerTableData: [], // 容器统计
+      transferInBaggageTableData: [], // 中转进
+      transferOutBaggageTableData: [], // 中转出
+      flightBaggageTableData: [], // 行李列表
+      flightBaggageTableFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      warningContainers: [],
+      dragHeight: 0,
+      dragY: 0,
+      dragActive: false,
+      filterSelectOptions: [
+        {
+          label: '值机',
+          value: 'checkInTime'
+        },
+        {
+          label: '未激活',
+          value: 'unActive' // STATUS为'I'
+        },
+        {
+          label: '预计装载',
+          value: 'preLoad' // STATUS不为'I'，isDEL不为'del'
+        },
+        {
+          label: '已装载',
+          value: 'loaded' // 'loadTime'不为空，isDEL不为'DEL'
+        },
+        {
+          label: '安检',
+          value: 'securityTime'
+        },
+        {
+          label: '分拣',
+          value: 'sortTime'
+        },
+        {
+          label: '装车',
+          value: 'loadTime'
+        },
+        {
+          label: '装机',
+          value: 'inflTime'
+        },
+        {
+          label: '到达',
+          value: 'arrivedID' // 1/0
+        },
+        {
+          label: '卸载',
+          value: 'unloadID' // 1/0
+        },
+        {
+          label: '终点到达',
+          value: 'destination' // 'arrivedID'为1，transferFlightNO为null
+        },
+        {
+          label: '容器',
+          value: 'inContainer' // 有容器ID
+        },
+        {
+          label: '散装',
+          value: 'FBULK' // 容器ID为'FBULK'
+        },
+        {
+          label: '待翻减',
+          value: 'toUnload' // 装车或装机后，isDEL为'DEL'，waitOFF为1
+        },
+        {
+          label: '已翻减',
+          value: 'unloaded' // 装车或装机后，isDEL为'DEL'，waitOFF为0
+        },
+        {
+          label: '取消托运',
+          value: 'canceled' // isDEL为'DEL'
+        },
+        {
+          label: '无BSM',
+          value: 'NOBSM' // 1/0
+        },
+        {
+          label: '预警',
+          value: 'warning'
+        },
+        {
+          label: '报警',
+          value: 'alarm'
+        },
+        {
+          label: '中转进航班',
+          value: 'inFlightNO',
+          children: []
+        },
+        {
+          label: '中转出航班',
+          value: 'transferFlightNO',
+          children: []
+        }
+      ],
+      selectedFilter: []
+    }
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    fasterFilteredTableData () {
+      const [key, value] = this.selectedFilter
+      if (!key) {
+        return this.flightBaggageTableData
+      }
+      const that = this
+      function isWarning (row) {
+        if (row['STATUS'] === 'I' || row['loadTime'] || row['isDEL'] === 'DEL') {
+          return 0
+        }
+        const planDepartureTime = that.flightInfo.planDepartureTime
+        if (!planDepartureTime) {
+          return 0
+        }
+        const currentTime = new Date().getTime()
+        const departureTime = new Date(planDepartureTime.replace('T', ' ')).getTime()
+        if (currentTime > departureTime) {
+          return 0
+        }
+
+        let flag = 0
+        const duration = departureTime - currentTime
+        that.warningRules.some(rule => {
+          if (!rule.startDate || !rule.endDate) {
+            return false
+          }
+          const ruleStartTime = new Date(rule.startDate).getTime()
+          const ruleEndTime = new Date(rule.endDate).getTime()
+          if (currentTime < ruleStartTime || currentTime > ruleEndTime) {
+            return false
+          }
+          if (rule.alarmDuration && duration < rule.alarmDuration * 60 * 1000) {
+            flag = 1
+            return true
+          } else if (rule.warningDuration && duration < rule.warningDuration * 60 * 1000) {
+            flag = 2
+            return true
+          } else {
+            return false
+          }
+        })
+        return flag
+      }
+      return this.flightBaggageTableData.filter(row => {
+        switch (key) {
+          case 'arrivedID':
+          case 'unloadID':
+          case 'NOBSM':
+            return row[key] === 1
+          case 'unActive':
+            return row['STATUS'] === 'I'
+          case 'preLoad':
+            return row['STATUS'] !== 'I' && row['isDEL'] !== 'DEL'
+          case 'loaded':
+            return row['loadTime'] && row['isDEL'] !== 'DEL'
+          case 'destination':
+            return row['arrivedID'] === 1 && !row['transferFlightNO']
+          case 'inContainer':
+            return row['U_Device_ID'] && row['U_Device_ID'] !== 'FBULK'
+          case 'FBULK':
+            return row['U_Device_ID'] === 'FBULK'
+          case 'toUnload':
+            return (row['loadTime'] || row['inflTime']) && row['isDEL'] === 'DEL' && row['waitOFF'] === 1
+          case 'unloaded':
+            return (row['loadTime'] || row['inflTime']) && row['isDEL'] === 'DEL' && row['waitOFF'] !== 1
+          case 'canceled':
+            return row['isDEL'] === 'DEL'
+          case 'inFlightNO':
+          case 'transferFlightNO':
+            return value ? row[key] === value : (row[key] ?? '') !== ''
+          case 'warning':
+            return isWarning(row) === 2
+          case 'alarm':
+            return isWarning(row) === 1
+          default:
+            return (row[key] ?? '') !== ''
+        }
+      })
+    },
+    dealedTableData () {
+      const filtered = this.fasterFilteredTableData.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])
+    },
+    draggableStyle () {
+      return {
+        height: `calc(100vh - 80px - 64px - 16px - 290px + ${this.dragHeight}px)`
+      }
+    },
+    dragLineStyle () {
+      return {
+        transform: `translateY(${this.dragHeight - this.dragY}px)`
+      }
+    }
+  },
+  watch: {
+    loading (val) {
+      if (val) {
+        this.fullscreenLoading = this.$loading({
+          lock: true,
+          text: '加载中',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      } else {
+        this.fullscreenLoading?.close()
+      }
+    },
+    selectedAirline (val) {
+      if (!val) {
+        return
+      }
+      const { flightNO, flightDate } = this.queryData
+      const [departureAirport, landingAirport] = val.split('-')
+      this.queryAll({ flightNO, flightDate, departureAirport, arriveAirport: landingAirport })
+    },
+    selectedFilter (val) {
+      const { path, query } = this.$route
+      const newQuery = { ...query }
+      delete newQuery.fastFilter
+      if (val.length) {
+        newQuery.fastFilter = val.join(',')
+      }
+      this.$router.replace({
+        path,
+        query: newQuery
+      })
+    }
+  },
+  created () {
+    const { flightNO, flightDate, departureAirport, landingAirport } = this.$route.query
+    if (flightNO && flightDate) {
+      this.queryAirline({ flightNO, flightDate })
+      this.queryData = {
+        flightNO,
+        flightDate,
+        departureAirport,
+        landingAirport
+      }
+    } else {
+      this.$router.push('/')
+    }
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.flightBaggageTableFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
+  },
+  mounted () {
+    this.setDragBox()
+  },
+  updated () {
+    this.resizeHandler()
+  },
+  activated () {
+    const { fastFilter } = this.$route.query
+    this.selectedFilter = fastFilter ? fastFilter.split(',') : []
+    this.getWarningData()
+    this.resizeHandler()
+    this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
+    window.addEventListener('resize', this.debouncedResizeHandler)
+  },
+  deactivated () {
+    this.fullscreenLoading?.close()
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  },
+  methods: {
+    setDragBox () {
+      const dragBox = this.$refs['dragBox']
+      const offsetTop = dragBox.offsetParent.offsetTop
+      const that = this
+      let mousedownY
+      let dragY
+      let dragHeight
+      function mousemoveHandler (e) {
+        e.stopPropagation()
+        e.preventDefault()
+        dragY = dragHeight + mousedownY - e.screenY
+        dragY = dragY < 0 ? 0 : dragY > offsetTop ? offsetTop : dragY
+        that.dragY = dragY
+      }
+      function mouseupHandler (e) {
+        e.stopPropagation()
+        e.preventDefault()
+        that.dragHeight = that.dragY
+        that.dragY = 0
+        that.dragActive = false
+        document.removeEventListener('mousemove', mousemoveHandler)
+        document.removeEventListener('mouseup', mouseupHandler)
+      }
+      dragBox.addEventListener('mousedown', e => {
+        that.dragActive = true
+        mousedownY = e.screenY
+        dragHeight = that.dragHeight
+        that.dragY = dragHeight
+        document.addEventListener('mousemove', mousemoveHandler)
+        document.addEventListener('mouseup', mouseupHandler)
+      })
+    },
+    resizeHandler () {
+      this.$refs['containerTable']?.doLayout()
+      // this.$refs['transferInBaggageTable']?.doLayout()
+      // this.$refs['transferOutBaggageTable']?.doLayout()
+      this.$refs['flightBaggageTable']?.doLayout()
+    },
+    setfastFilterValues () {
+      const inFlightNOList = new Set()
+      const transferFlightNOList = new Set()
+      this.flightBaggageTableData.forEach(item => {
+        item['inFlightNO'] && inFlightNOList.add(item['inFlightNO'])
+        item['transferFlightNO'] && transferFlightNOList.add(item['transferFlightNO'])
+      })
+      this.filterSelectOptions.splice(
+        this.filterSelectOptions.length - 2,
+        2,
+        {
+          label: '中转进航班',
+          value: 'inFlightNO',
+          children: [...inFlightNOList].map(value => ({
+            label: value,
+            value
+          }))
+        },
+        {
+          label: '中转出航班',
+          value: 'transferFlightNO',
+          children: [...transferFlightNOList].map(value => ({
+            label: value,
+            value
+          }))
+        }
+      )
+    },
+    rowClass ({ row, rowIndex }) {
+      const classes = []
+      if (
+        this.warningContainers.includes(row['containerNumber']) ||
+        ((row['loadTime'] || row['inflTime']) && row['isDEL'] === 'DEL' && row['waitOFF'] === 1)
+      ) {
+        classes.push('row-warning')
+      }
+      if (row['Status'] === 'DEL') {
+        classes.push('bgl-deleted')
+      }
+      return classes.join(' ')
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    cellClass ({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        ['checkInTime', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(
+          column.property
+        )
+      ) {
+        classes.push('pre-line')
+      }
+      if (
+        [
+          'containerNumber',
+          'preFlightNO',
+          // 'totalNumber',
+          'inFlightNO',
+          'transferFlightNO',
+          // 'transferNumber',
+          'PassengerNameUpcase',
+          'BagSN',
+          'U_Device_ID',
+          'fileNumber'
+        ].includes(column.property) &&
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
+      ) {
+        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')
+        }
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler (row, column, cell, event) {
+      if (
+        [
+          'containerNumber',
+          'preFlightNO',
+          // 'totalNumber',
+          'inFlightNO',
+          'transferFlightNO',
+          // 'transferNumber',
+          'PassengerNameUpcase',
+          'BagSN',
+          'U_Device_ID',
+          'fileNumber'
+        ].includes(column.property) &&
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        switch (column.property) {
+          case 'containerNumber': {
+            const [departureAirport, landingAirport] = this.selectedAirline.split('-')
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/containerView`,
+              query: {
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate,
+                departureAirport,
+                landingAirport,
+                containerID: row.containerNumber,
+                containerType: row.style,
+                containerSpace: row.containerSpace
+              }
+            })
+            break
+          }
+          case 'preFlightNO':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/flightView`,
+              query: {
+                flightNO: row.preFlightNO,
+                flightDate: row.preFlightDate
+              }
+            })
+            break
+          // case 'totalNumber':
+          //   this.$router.push({
+          //     path: '/advance',
+          //     query: {
+          //       flightNO: this.queryData.flightNO,
+          //       startDate: this.queryData.flightDate,
+          //       endDate: this.queryData.flightDate,
+          //       transferArrival: row.preFlightNO
+          //     }
+          //   })
+          //   break
+          case 'inFlightNO':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/flightView`,
+              query: {
+                flightNO: row.inFlightNO,
+                flightDate: row.inFlightDate
+              }
+            })
+            break
+          case 'transferFlightNO':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/flightView`,
+              query: {
+                flightNO: row.transferFlightNO,
+                flightDate: row.transferFlightDate
+              }
+            })
+            break
+          // case 'transferNumber':
+          //   this.$router.push({
+          //     path: '/advance',
+          //     query: {
+          //       flightNO: this.queryData.flightNO,
+          //       startDate: this.queryData.flightDate,
+          //       endDate: this.queryData.flightDate,
+          //       transferDeparture: row.transferFlightNO
+          //     }
+          //   })
+          //   break
+          case 'PassengerNameUpcase':
+            this.$store.dispatch('app/setPassengerQueryParams', {
+              flightNO: this.queryData.flightNO,
+              flightDate: this.queryData.flightDate,
+              passengerName: row.PassengerNameUpcase
+            })
+            this.$store.dispatch('app/togglePassengerDialogFlag', true)
+            break
+          case 'BagSN':
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/baggageView`,
+              query: {
+                bagSN: row.BagSN,
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate
+              }
+            })
+            break
+          case 'U_Device_ID': {
+            const [departureAirport, landingAirport] = this.selectedAirline.split('-')
+            const container = this.containerTableData.find(({ containerNumber }) => containerNumber === row.U_Device_ID)
+            this.$router.push({
+              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/containerView`,
+              query: {
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate,
+                departureAirport,
+                landingAirport,
+                containerID: row.U_Device_ID,
+                containerType: container.style,
+                containerSpace: container.containerSpace
+              }
+            })
+            break
+          }
+          case 'fileNumber':
+            this.$store.dispatch('app/setAbnormalBaggageQueryParams', {
+              flightNO: this.queryData.flightNO,
+              flightDate: this.queryData.flightDate,
+              bagSN: row.BagSN,
+              fileNumber: row.fileNumber
+            })
+            this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
+            break
+          default:
+            break
+        }
+      }
+    },
+    // 合计行
+    summaryMethod ({ columns, data }) {
+      const sums = []
+      if (columns.length > 0) {
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+          } else if (
+            // 需要计算的列
+            [
+              'numberOfBags'
+              // 'totalNumber',
+              // 'transferNumber'
+            ].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
+    },
+    // 统计行数
+    summaryRow (num) {
+      return function () {
+        return ['合计', `共${num}件`]
+      }
+    },
+    exportHandler (refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
+    },
+    queryflightInfo (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.flightInfo, dataContent })
+    },
+    queryContainer (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.flightContainer, dataContent })
+    },
+    queryBaggageByFlightNO (dataContent) {
+      return myQuery({ serviceId: DATACONTENT_ID.flightBaggage, dataContent })
+    },
+    async queryAirline (dataContent) {
+      try {
+        this.selectedAirline = ''
+        this.flightInfo = {}
+        this.containerTableData = []
+        this.flightBaggageTableData = []
+        const listValues = await myQuery({ serviceId: DATACONTENT_ID.flightAirline, dataContent })
+        this.airlineList = listValues.map(({ departureAirport, landingAirport, departureBuild, landingBuild }) => ({
+          label: `${departureAirport}${departureBuild ? `(${departureBuild})` : ''}-${landingAirport}${landingBuild ? `(${landingBuild})` : ''
+            }`,
+          value: `${departureAirport}-${landingAirport}`
+        }))
+        if (this.airlineList.length) {
+          let currentIndex = this.airlineList.findIndex(
+            ({ value }) => value === `${this.queryData.departureAirport}-${this.queryData.landingAirport}`
+          )
+          currentIndex = currentIndex > -1 ? currentIndex : 0
+          this.selectedAirline = this.airlineList[currentIndex].value
+        } else {
+          this.$message.info('未查询到航班数据')
+        }
+      } catch (error) {
+        console.log(error)
+        this.$message.error('失败')
+      }
+    },
+    async queryAll (dataContent) {
+      this.loading = true
+      this.flightInfo = {}
+      try {
+        const [flightInfo, containerTableDataData, flightBaggageTableData] = await Promise.all([
+          this.queryflightInfo(dataContent),
+          this.queryContainer(dataContent),
+          this.queryBaggageByFlightNO(dataContent)
+        ])
+        if (flightInfo.length) {
+          this.flightInfo = flightInfo[0]
+        } else {
+          this.$message.info('未查询到航班基础数据')
+        }
+        this.containerTableData = containerTableDataData
+        this.warningContainers = []
+        this.flightBaggageTableData = flightBaggageTableData.map(item => {
+          if ((item['loadTime'] || item['inflTime']) && item['isDEL'] === 'DEL' && item['waitOFF'] === 1) {
+            this.warningContainers.push(item['U_Device_ID'])
+          }
+          return item
+        })
+        setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
+        this.setfastFilterValues()
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.loading = false
+    },
+    async getWarningData () {
+      try {
+        const listValues = await myQuery({ serviceId: DATACONTENT_ID.departureWarningId, dataContent: {} })
+        this.warningRules = listValues
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    }
+  }
+}
+</script>
+
+<style
+  lang="scss"
+  scoped
+>
+.flight-view {
+  padding: 0 0 16px 8px;
+  overflow: hidden;
+  background: #dfe3ea;
+  .flight-wrapper {
+    padding-right: 8px;
+    width: 100%;
+    height: calc(100vh - 80px - 16px);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    position: relative;
+    .title {
+      padding: 16px 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      background: #dfe3ea;
+      .manageTitle {
+        flex: 1;
+        height: 32px;
+        margin-right: 0;
+      }
+      .btn-square {
+        margin-left: 20px;
+        &:last-child {
+          margin-right: 30px;
+        }
+      }
+    }
+    .part1 {
+      width: 71.15%;
+      .title {
+        justify-content: flex-start;
+        .manageTitle {
+          flex: 0 1 auto;
+        }
+      }
+      .part1-wrapper {
+        height: 290px;
+        background: #041741;
+        padding: 24px;
+        .airline {
+          font-size: 18px;
+          font-weight: bold;
+          color: #ffffff;
+          ::v-deep .airline-select {
+            .el-input__inner {
+              width: 200px;
+              background-color: transparent;
+              font-size: 18px;
+              font-weight: bold;
+              color: #ffffff;
+            }
+            .el-select__caret {
+              color: #ffffff;
+            }
+          }
+        }
+        .part1_info {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 24px;
+
+          .part1_info_box {
+            width: calc(33.333% - 48px);
+            height: 190px;
+            background: #2c416d;
+            padding: 24px 2% 12px;
+            display: flex;
+            flex-direction: column;
+            align-content: space-around;
+            overflow-x: hidden;
+            overflow-y: auto;
+            .el-row {
+              margin-bottom: 24px;
+              &:last-child {
+                margin: 0;
+              }
+              @media only screen and (max-width: 1919px) {
+                .el-col-sm-24:nth-child(2) {
+                  margin-top: 24px;
+                }
+              }
+            }
+            span {
+              display: inline-block;
+              font-size: 16px;
+              font-weight: 400;
+              color: #ffffff;
+            }
+          }
+          .part1_info_arrow_right {
+            font-size: 32px;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .part2 {
+      width: calc(100% - 71.15%);
+      padding-left: 16px;
+      .title .btn-square:last-child {
+        margin-right: 22px;
+      }
+    }
+    .part4 {
+      width: 100%;
+      position: absolute;
+      z-index: 100;
+      bottom: 0;
+      .drag-box {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 62px;
+        z-index: 101;
+        // cursor: row-resize;
+        .drag-icon {
+          width: 60px;
+          height: 60px;
+          line-height: 60px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+          font-size: 20px;
+          text-align: center;
+          // background: #385086;
+          color: #ffffff;
+          // &:nth-child(1) {
+          //   top: 0;
+          //   border-radius: 0 0 8px 8px;
+          // }
+          // &:nth-child(2) {
+          //   bottom: 0;
+          //   border-radius: 8px 8px 0 0;
+          // }
+        }
+        &:hover,
+        &.active {
+          .drag-icon {
+            color: #2d67e3;
+          }
+        }
+        .drag-line {
+          display: none;
+          width: 100%;
+          height: 0;
+          border-top: 1px dashed #000000;
+          position: absolute;
+          top: 0;
+          z-index: 101;
+        }
+        &.active .drag-line {
+          display: block;
+        }
+      }
+      .title {
+        .manageTitle {
+          flex: 0 1 auto;
+        }
+        ::v-deep .filter-select {
+          margin-left: 24px;
+          flex: 1;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          .label,
+          .el-input__inner {
+            font-family: Helvetica, "Microsoft YaHei";
+          }
+          .label {
+            padding-right: 14px;
+          }
+          .el-cascader {
+            z-index: 102;
+          }
+        }
+        .el-dropdown {
+          height: 30px;
+          z-index: 102;
+        }
+        .btn-square {
+          z-index: 102;
+          &:last-child {
+            margin-right: 30px;
+          }
+        }
+      }
+    }
+    .drag-mask {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      z-index: 99;
+      display: none;
+      &.active {
+        display: block;
+      }
+    }
+  }
+  ::v-deep .el-table {
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-deleted {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+          font-style: italic;
+        }
+      }
+      .row-warning .el-table__cell {
+        background: lightcoral;
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/transferArrival/baggage.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-05-05 16:55:10
+ * @LastEditors: your name
+ * @Description: 中转进港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <BaggageView />
+</template>
+
+<script>
+import BaggageView from '../baggage'
+
+export default {
+  name: 'TransferArrivalBaggageView',
+  components: {
+    BaggageView
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferArrival/container.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 中转进港容器视图
+ * have a nice day!
+-->
+
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../container'
+
+export default {
+  name: 'TransferArrivalContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferArrival/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'TransferArrivalContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferArrival/flight.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:49:13
+ * @LastEditTime: 2022-03-09 11:54:06
+ * @LastEditors: your name
+ * @Description: 中转进港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <FlightView />
+</template>
+
+<script>
+import FlightView from '../flight'
+
+export default {
+  name: 'TransferArrivalFlightView',
+  components: {
+    FlightView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/transferArrival/index.vue

@@ -0,0 +1,939 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-06-28 10:04:17
+ * @LastEditors: your name
+ * @Description: 中转进港
+-->
+<template>
+  <div class="transfer-in">
+    <!--功能区-表单-->
+    <div ref="formWrap" class="terminal-form-wrap">
+      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
+            v-model="formData.currentAirport"
+            style="width:144px;margin-left:10px"
+            placeholder="全部机场"
+            size="small"
+            :options="currentAirportList"
+            :props="currentAirportProps"
+            collapse-tags
+            clearable
+            filterable
+            @change="setCurrentAirport"
+          /> -->
+            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 100px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
+              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="inboundCarrier">
+            <el-cascader v-model="formData.inboundCarrier" class="input-shadow" style="width: 150px" size="small" :options="carrierProps" :props="optionProps" placeholder="进港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
+          </el-form-item>
+          <el-form-item prop="outgoingAirline">
+            <el-cascader v-model="formData.outgoingAirline" class="input-shadow" style="width: 150px" size="small" :options="carrierPropsop" :props="optionPropser" placeholder="离港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
+          </el-form-item>
+          <!-- <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="startDateChangeHandler"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="endDateChangeHandler"
+            />
+          </el-form-item> -->
+          <el-form-item prop="flightDate" label="航班日期">
+            <el-date-picker v-model="formData.flightDate" :clearable="false" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          </el-form-item>
+          <el-form-item>
+            <div class="box-item">
+              <p>预计中转数：</p>
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </el-form-item>
+        </div>
+        <div class="form-right" @keyup.enter="onSubmit(1)">
+          <el-form-item prop="search">
+            <el-popover :value="popoverVisible" placement="bottom" trigger="manual">
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input slot="reference" v-model="formData.search" class="input-shadow" style="width: 240px" size="small" placeholder="请输入内容" prefix-icon="el-icon-search" clearable @focus="popoverVisible = true" @blur="popoverVisible = false" />
+            </el-popover>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="btn-shadow" size="mini" type="primary" @click="onSubmit(1)">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="btn-shadow" size="mini" type="primary" @click="changeView">切换视角</el-button>
+          </el-form-item>
+          <!-- <el-form-item v-is="['ti_timeIcon']">
+            <TimeZoneSelector />
+          </el-form-item> -->
+          <el-form-item>
+            <TimeZoneSelector />
+          </el-form-item>
+          <!-- <el-form-item v-is="['ti_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站中转进港列表')" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站中转进港列表')" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-table ref="table" class="table" :data="dealedTableData" :height="computedTableHeight" show-summary :summary-method="summaryMethod" :span-method="arraySpanMethod" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" border stripe fit @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed">
+          <el-table-column v-for="childCol in col.children" :key="childCol.prop" :prop="childCol.prop" :label="childCol.label" :width="childCol.width" :formatter="tableFormat">
+            <template #header>
+              <el-tooltip :content="childCol.desc || childCol.label" placement="top">
+                <TableHeaderCell :label="childCol.label" :filter-options="tableDataFilters[childCol.prop]" :filter-values.sync="filterValues[childCol.prop]" :sortable="childCol.sortable" :sort-rule.sync="tableDataSortRules[childCol.prop]" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog";
+import TimeZoneSelector from "@/components/TimeZoneSelector";
+import terminalMixin from "../../mixins/terminal";
+import formMixin from "../../mixins/form";
+import tableColsMixin from "../../mixins/tableCols";
+import timeZoneMixin from "../../mixins/timeZone";
+import { getQuery } from "@/api/flight";
+import TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters, throttledExportToExcel, timeInZone } from "@/utils/table";
+import { GeneralDataReception } from "@/api/dataIntegration";
+import { parseTime } from "@/utils/index";
+import { mapGetters } from "vuex";
+import { getToken } from '@/utils/auth';
+export default {
+  name: "DepartureTerminalView",
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      optionProps: {
+        value: "inAicompanyCode2",
+        label: "inAicompanyCode2",
+      },
+      optionPropser: {
+        value: "outAicompanyCode2",
+        label: "outAicompanyCode2",
+      },
+      popoverVisible: false,
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      // 初始表头
+      tableCols: [
+        {
+          prop: "arrivalInfo",
+          label: "进港航班",
+          width: 180,
+          fixed: "left",
+          children: [
+            {
+              prop: "preFlightNO",
+              label: "航班号",
+              desc: "进港航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "preFlightDate",
+              label: "航班日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 100,
+            },
+            {
+              prop: "preAirport",
+              label: "起飞航站",
+              desc: "指进港航班的起飞机场三字码",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "actualLandingTime",
+              label: "降落时间",
+              desc: "根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间",
+              width: 100,
+            },
+            {
+              prop: "landingBuild",
+              label: "降落航站楼",
+              desc: "指航班降落后位于机场的哪个航站楼",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "carousel",
+              label: "行李转盘",
+              desc: "指航班到达后行李提取的地方，仅显示最新信息",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "standForLanding",
+              label: "降落停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "inTransferBaggageCount",
+              label: "中转行李数",
+              desc: "指航班在本航站预计需要中转至对应航班的行李数量",
+            },
+          ],
+        },
+        {
+          prop: "departureInfo",
+          label: "离港航班",
+          children: [
+            {
+              prop: "inTransferredBaggageCount",
+              label: "已中转行李数",
+              desc: "指航班在本航站实际已经中转至对应航班的行李数量",
+              width: 100,
+            },
+            {
+              prop: "flightNO",
+              label: "航班号",
+              desc: "指航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "flightDate",
+              label: "航班日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 100,
+            },
+            {
+              prop: "actualDepartureTime",
+              label: "起飞时间",
+              desc: "指航班预计起飞时间，数据是变化的，仅显示最新结果",
+              width: 100,
+            },
+            {
+              prop: "targetAirport",
+              label: "目的站",
+              desc: "指航班执飞航段的目的航站，以航站三字码+航站简称显示",
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "departureBuild",
+              label: "起飞航站楼",
+              desc: "指航班执飞航段的起飞航站的航站楼",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "bordingGate",
+              label: "起飞登机口",
+              desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "standForDepartrue",
+              label: "起飞停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            // {
+            //   prop: 'outTransferBaggageCount',
+            //   label: '中转进行李数',
+            //   desc: '指其它航班预计中转至本航班的行李数量',
+            //   width: 100
+            // },
+            // {
+            //   prop: 'outTransferredBaggageCount',
+            //   label: '已中转进行李数',
+            //   desc: '指其它航班实际已中转至本航班的行李数量',
+            //   width: 120
+            // },
+            {
+              prop: "timeDifference",
+              label: "转运时间",
+              desc: "指中转动作完成时间",
+            },
+          ],
+        },
+      ],
+      loading: false,
+      AirportList: [],
+      carrierProps: [],
+      carrierPropsop: [],
+      loopEvent: null,
+      arrivalCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      spanArr: [],
+      contactDot: 0,
+      flag: 0,
+      table: null,
+      WarningData: [],
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+    ...mapGetters(["timeZone"]),
+  },
+  watch: {
+    dealedTableData: {
+      handler (val) {
+        this.spanArr = [];
+        let contactDot = this.contactDot;
+        val.forEach((item, index, arr) => {
+          if (index === 0) {
+            this.spanArr.push(1);
+          } else {
+            if (item["preFlightNO"] === arr[index - 1]["preFlightNO"] && item["preFlightDate"] === arr[index - 1]["preFlightDate"]) {
+              this.spanArr[contactDot] += 1;
+              this.spanArr.push(0);
+            } else {
+              this.spanArr.push(1);
+              contactDot = index;
+            }
+          }
+        });
+      },
+      deep: true,
+    },
+  },
+  created () {
+    // this.getAirPortData()
+  },
+  mounted () {
+    this.$refs["form"].validateField("flightDate");
+    this.getAirPortData();
+    this.table = this.$refs.table.bodyWrapper;
+    const that = this;
+    this.table.addEventListener("scroll", () => {
+      that.scrollTop = this.table.scrollTop;
+    });
+  },
+  activated () {
+    this.table.scrollTop = this.scrollTop;
+    this.getTableData();
+    this.getWarningData();
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferArrivalTable);
+    // const { startDate, endDate } = this.$route.query
+    // Object.entries(this.$route.query).forEach(([key, value]) => {
+    //   if ((value ?? '') !== '' && JSON.stringify(value) !== '[]') {
+    //     this.formData[key] = value
+    //   }
+    // })
+    // if (startDate !== null && startDate !== undefined) {
+    //   this.formData.flightDate[0] = startDate
+    // }
+    // if (endDate !== null && endDate !== undefined) {
+    //   this.formData.flightDate[1] = endDate
+    // }
+  },
+  deactivated () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  beforeDestroy () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  methods: {
+    async getWarningData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureWarningId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          const { returnData } = res;
+          this.WarningData = returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    resetLoopEvent () {
+      this.loading = true;
+      this.hasSetTableScroll = false;
+      this.loopEvent && clearInterval(this.loopEvent);
+      this.getTableData();
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferArrivalTable);
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.hasArrived) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.arrivalCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    changeView () {
+      // const query = {
+      //   ...this.formData,
+      //   startDate: this.startDate,
+      //   endDate: this.endDate
+      // }
+      // delete query.flightDate
+      // this.$router.replace({
+      //   path: '/transfer/departure',
+      //   query
+      // })
+      this.$router.push("/transfer/departure");
+    },
+    airPortChange () {
+      this.getAviationData();
+      this.upAviationData();
+      this.resetLoopEvent();
+    },
+    dateChangeHandler () {
+      this.getAviationData();
+      this.upAviationData();
+      this.resetLoopEvent();
+    },
+    // 选择机场
+    async getAirPortData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAirId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.AirportList = res.returnData;
+          this.formData.currentAirport = "PEK";
+          this.getAviationData();
+          this.upAviationData();
+          this.resetLoopEvent();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 选择航司
+    async getAviationData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAviJoinId,
+          dataContent: { departureAirport: this.formData.currentAirport },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.carrierProps = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 选择航司
+    async upAviationData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAviLeaveId,
+          dataContent: { departureAirport: this.formData.currentAirport },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.carrierPropsop = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 获取表单下拉框数据
+    // getFormData(params) {
+    //   this.relatedAirportQuery({
+    //     ...params,
+    //     type: 'OUT'
+    //   })
+    //   this.outgoingAirlineQuery(params)
+    //   this.craftTypeQuery(params)
+    //   this.flightAttrQuery(params)
+    // },
+    // 获取表格数据
+    async getTableData () {
+      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
+        return;
+      }
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureTableId,
+          dataContent: {
+            departureAirport: this.formData.currentAirport,
+            startTime: this.startDate,
+            endTime: this.endDate
+          },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.initTableData(res.returnData);
+        } else {
+        }
+        this.loading = false;
+      } catch (error) {
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent);
+          this.loopEvent = null;
+        }
+        this.loading = false;
+      }
+    },
+    initTableData (tableData) {
+      const currentTime = new Date();
+      const curTime = this.formatTime(currentTime);
+      this.arrivalCount = 0;
+      this.baggageCount = 0;
+      tableData.forEach((item) => {
+        const o1 = item["inTransferBaggageCount"];
+        const o2 = item["inTransferredBaggageCount"];
+        const out1 = o1 != undefined || o1 != null ? o1 : 0;
+        const out2 = o2 != undefined || o2 != null ? o2 : 0;
+        if (this.hasArrived(item)) {
+          this.arrivalCount++;
+        }
+        if (item["hasArrived"] && out1 - out2 > 0) {
+          this.WarningData.forEach((p) => {
+            const startTime = this.formatTime(timeInZone((p.startDate ?? "").replace("T", " "), this.timeZone), 2);
+            const endTime = this.formatTime(timeInZone((p.endDate ?? "").replace("T", " "), this.timeZone), 2);
+            const planTime = this.formatTime(timeInZone((item.actualDepartureTime ?? "").replace("T", " "), this.timeZone), 2);
+            const capTime = Math.ceil((planTime - curTime) / (1000 * 60));
+            if (Number(startTime) - Number(curTime) < 0 && Number(endTime) - Number(curTime) > 0) {
+              const newItem = _.cloneDeep(item);
+              if (p.flightNO != "" && p.flightNO == item.flightNO) {
+                if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                  item["warningState"] = 1;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+                if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                  item["warningState"] = 2;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+              } else if (p.flightNO == "" && p.IATACode != "") {
+                if (item.flightNO.substring(0, 2) == p.IATACode) {
+                  if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                    item["warningState"] = 1;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                  if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                    item["warningState"] = 2;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                }
+              }
+            }
+          });
+        }
+        this.baggageCount = this.baggageCount + item.inTransferBaggageCount;
+      });
+      this.tableData = this._.sortBy(tableData, ["actualLandingTime", "preFlightNO", "actualDepartureTime", "flightNO"]);
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.toOrderNum(this.baggageCount);
+      this.$nextTick(() => {
+        this.setTableScroll();
+      });
+    },
+    formatTime (date, type = 1) {
+      let time = null;
+      if (type == 1) {
+        time = parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+      } else {
+        time = date;
+      }
+      const newTimt = new Date(time);
+      return newTimt.getTime();
+    },
+    async sendLog (obj) {
+      try {
+        const newObj = {
+          logTime: parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
+          logInfo: JSON.stringify(obj),
+          flightNO: obj.flightNO,
+          flightDate: obj.flightDate,
+          luggageSN: "",
+          strategyUseID: obj.alarmStrategyID,
+          event: 1,
+        };
+        await GeneralDataReception({
+          serviceId: SERVICE_ID.departureScId,
+          dataContent: JSON.stringify(newObj),
+        });
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    hasArrived (flight) {
+      if (flight.actualLandingTime) {
+        const now = new Date();
+        const actualLandingTime = new Date(flight.actualLandingTime.replace("T", " "));
+        flight["hasArrived"] = now > actualLandingTime && !flight["flightCanceled"];
+      } else {
+        flight["hasArrived"] = false;
+      }
+      return flight["hasArrived"];
+    },
+    setTableScroll () {
+      if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      const lastRow = table.querySelectorAll(".el-table__body tr")[this.arrivalCount - 1];
+      setTimeout(() => {
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index];
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+      }
+    },
+
+    toOrderNum (num) {
+      num = num.toString();
+      if (num.length < 6) {
+        num = "0" + num; // 如未满八位数，添加"0"补位
+        this.toOrderNum(num); // 递归添加"0"补位
+      } else if (num.length >= 6) {
+        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+      } else {
+        // 订单总量数字超过八位显示异常
+        this.$message.warning("总量数字过大");
+      }
+      this.setNumberTransform();
+    },
+    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
+      for (let i = 0; i < 7; i++) {
+        if (columnIndex === i) {
+          const _row = this.spanArr[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col,
+          };
+        }
+      }
+    },
+    exportHandler (refName, tableName) {
+      if (this.loading) {
+        return;
+      }
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
+      throttledExportToExcel(table, tableName, fileName, 2);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.terminal-form-wrap {
+  padding-top: 11px;
+  padding-left: 5px;
+  ::v-deep .form {
+    display: flex;
+    justify-content: space-between;
+    .form-left {
+      flex: 1;
+    }
+    .form-right {
+      flex: 0 1 auto;
+    }
+    .el-form-item {
+      margin-bottom: 0px;
+      margin-right: 8px;
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, "Microsoft YaHei";
+        font-size: 14px;
+      }
+      .el-switch__label {
+        color: #303133;
+      }
+      .el-form-item__error {
+        z-index: 10;
+      }
+    }
+    .btn-img {
+      position: relative;
+      top: 6px;
+    }
+  }
+  .box-item {
+    position: relative;
+    height: 50px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    // background: url(/images/text-bg-blue.png) no-repeat center center;
+    // background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+    border: 3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+}
+.terminal-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-hui {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+    }
+    td.cell-toUnload {
+      background: lightcoral !important;
+      position: relative;
+      &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 2px dashed red;
+      }
+    }
+    td.cell-toUnloadNew {
+      background: #fcf0b1 !important;
+      position: relative;
+      &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 2px dashed #e28913;
+      }
+    }
+    .el-table__cell.is-hidden > * {
+      visibility: visible;
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/components/transferDeparture/baggage.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:54:15
+ * @LastEditors: your name
+ * @Description: 中转离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <BaggageView />
+</template>
+
+<script>
+import BaggageView from '../baggage'
+
+export default {
+  name: 'TransferDepartureBaggageView',
+  components: {
+    BaggageView
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferDeparture/container.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:51:26
+ * @LastEditTime: 2022-03-09 11:51:26
+ * @LastEditors: your name
+ * @Description: 中转出港容器视图
+ * have a nice day!
+-->
+
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../container'
+
+export default {
+  name: 'TransferDepartureContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferDeparture/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'TransferDepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement copy/components/transferDeparture/flight.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-09 11:49:13
+ * @LastEditTime: 2022-03-09 11:54:48
+ * @LastEditors: your name
+ * @Description: 中转离港行李视图
+ * have a nice day!
+-->
+
+<template>
+  <FlightView />
+</template>
+
+<script>
+import FlightView from '../flight'
+
+export default {
+  name: 'TransferDepartureFlightView',
+  components: {
+    FlightView
+  }
+}
+</script>
+

src/views/baggageManagement copy/components/transferDeparture/index.vue

@@ -0,0 +1,914 @@
+<!--
+ * @Author: zk
+ * @Date: 2022-01-17 10:39:22
+ * @LastEditTime: 2022-06-28 10:11:56
+ * @LastEditors: your name
+ * @Description: 中转离港
+-->
+<template>
+  <div class="transfer-out">
+    <!--功能区-表单-->
+    <div ref="formWrap" class="terminal-form-wrap">
+      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
+            v-model="formData.currentAirport"
+            style="width:144px;margin-left:10px"
+            placeholder="全部机场"
+            size="small"
+            :options="currentAirportList"
+            :props="currentAirportProps"
+            collapse-tags
+            clearable
+            filterable
+            @change="setCurrentAirport"
+          /> -->
+            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 100px" filterable placeholder="请选择机场" @change="airPortChange">
+              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planDepartureApt" :value="item.planDepartureApt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="inboundCarrier">
+            <el-cascader v-model="formData.inboundCarrier" class="input-shadow" style="width: 150px" size="small" :options="carrierProps" :props="optionProps" placeholder="进港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
+          </el-form-item>
+          <el-form-item prop="outgoingAirline">
+            <el-cascader v-model="formData.outgoingAirline" class="input-shadow" style="width: 150px" size="small" :options="carrierPropsop" :props="optionPropser" placeholder="离港承运航司" collapse-tags clearable filterable default-first-option @change="resetLoopEvent" />
+          </el-form-item>
+          <!-- <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="startDateChangeHandler"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="endDateChangeHandler"
+            />
+          </el-form-item> -->
+          <el-form-item prop="flightDate" label="航班日期">
+            <el-date-picker v-model="formData.flightDate" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          </el-form-item>
+          <el-form-item>
+            <div class="box-item">
+              <p>预计中转数：</p>
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </el-form-item>
+        </div>
+        <div class="form-right" @keyup.enter="onSubmit(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" 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 v-is="['td_showTransit']">
+            <el-button class="btn-shadow" size="mini" type="primary" @click="changeView">切换视角</el-button>
+          </el-form-item>
+          <!-- <el-form-item v-is="['td_timeIcon']">
+            <TimeZoneSelector />
+          </el-form-item> -->
+          <el-form-item>
+            <TimeZoneSelector />
+          </el-form-item>
+          <!-- <el-form-item v-is="['td_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+          </el-form-item>
+          <!-- <el-form-item v-is="['dm_dt_columnSettings']">
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站中转进港列表')" />
+          </el-form-item> -->
+          <el-form-item>
+            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站中转进港列表')" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!--表格-->
+    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-table ref="table" class="table" :data="dealedTableData" :height="computedTableHeight" show-summary :summary-method="summaryMethod" :span-method="arraySpanMethod" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" border stripe fit @cell-click="cellClickHandler">
+        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed">
+          <el-table-column v-for="childCol in col.children" :key="childCol.prop" :prop="childCol.prop" :label="childCol.label" :width="childCol.width" :formatter="tableFormat">
+            <template #header>
+              <el-tooltip :content="childCol.desc || childCol.label" placement="top">
+                <TableHeaderCell :label="childCol.label" :filter-options="tableDataFilters[childCol.prop]" :filter-values.sync="filterValues[childCol.prop]" :sortable="childCol.sortable" :sort-rule.sync="tableDataSortRules[childCol.prop]" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--列设置-->
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+              label: 'label',
+              children: 'children',
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/layout/components/Dialog";
+import TimeZoneSelector from "@/components/TimeZoneSelector";
+import terminalMixin from "../../mixins/terminal";
+import formMixin from "../../mixins/form";
+import tableColsMixin from "../../mixins/tableCols";
+import timeZoneMixin from "../../mixins/timeZone";
+import { getQuery } from "@/api/flight";
+import { GeneralDataReception } from "@/api/dataIntegration";
+import TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters, throttledExportToExcel, timeInZone } from "@/utils/table";
+import { parseTime } from "@/utils/index";
+import { mapGetters } from "vuex";
+import { getToken } from '@/utils/auth';
+export default {
+  name: "DepartureTerminalView",
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      optionProps: {
+        value: "inAicompanyCode2",
+        label: "inAicompanyCode2",
+      },
+      optionPropser: {
+        value: "outAicompanyCode2",
+        label: "outAicompanyCode2",
+      },
+      popoverVisible: false,
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      // 初始表头
+      tableCols: [
+        {
+          prop: "departureInfo",
+          label: "离港航班",
+          width: 180,
+          fixed: "left",
+          children: [
+            {
+              prop: "flightNO",
+              label: "航班号",
+              desc: "指航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "flightDate",
+              label: "航班日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 100,
+            },
+            {
+              prop: "actualDepartureTime",
+              label: "起飞时间",
+              desc: "根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间",
+              width: 100,
+            },
+            {
+              prop: "targetAirport",
+              label: "目的站",
+              desc: "指航班执飞航段的目的航站，以航站三字码+航站简称显示",
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "departureBuild",
+              label: "起飞航站楼",
+              desc: "指航班执飞航段的起飞航站的航站楼",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "bordingGate",
+              label: "起飞登机口",
+              desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "standForDepartrue",
+              label: "起飞停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "timeDifference",
+              label: "转运时间",
+              desc: "指中转动作完成时间",
+            },
+            {
+              prop: "outTransferredBaggageCount",
+              label: "已中转进行李数",
+              desc: "指其它航班实际已中转至本航班的行李数量",
+              width: 120,
+            },
+          ],
+        },
+        {
+          prop: "arrivalInfo",
+          label: "进港航班",
+          children: [
+            {
+              prop: "outTransferBaggageCount",
+              label: "中转进行李数",
+              desc: "指其它航班预计中转至本航班的行李数量",
+              width: 100,
+            },
+            {
+              prop: "preFlightNO",
+              label: "航班号",
+              desc: "进港航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "preFlightDate",
+              label: "航班日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 100,
+            },
+            {
+              prop: "preAirport",
+              label: "起飞航站",
+              desc: "指进港航班的起飞机场三字码",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "actualLandingTime",
+              label: "降落时间",
+              desc: "指航班预计到达时间，数据是变化的，仅显示最新结果",
+              width: 100,
+            },
+            {
+              prop: "landingBuild",
+              label: "降落航站楼",
+              desc: "指航班降落后位于机场的哪个航站楼",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "carousel",
+              label: "行李转盘",
+              desc: "指航班到达后行李提取的地方，仅显示最新信息",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "standForLanding",
+              label: "降落停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              width: 98,
+              filterable: true,
+              sortable: true,
+            },
+            // {
+            //   prop: 'inTransferBaggageCount',
+            //   label: '中转行李数',
+            //   desc: '指航班在本航站预计需要中转至对应航班的行李数量'
+            // },
+            // {
+            //   prop: 'inTransferredBaggageCount',
+            //   label: '已中转行李数',
+            //   desc: '指航班在本航站实际已经中转至对应航班的行李数量',
+            //   width: 100
+            // }
+          ],
+        },
+      ],
+      loading: false,
+      AirportList: [],
+      carrierProps: [],
+      carrierPropsop: [],
+      loopEvent: null,
+      leaveCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      spanArr: [],
+      contactDot: 0,
+      flag: 0,
+      table: null,
+      WarningData: [],
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+    ...mapGetters(["timeZone"]),
+  },
+  created () {
+    // this.getAirPortData()
+  },
+  mounted () {
+    this.$refs["form"].validateField("flightDate");
+    this.getAirPortData();
+    this.table = this.$refs.table.bodyWrapper;
+    const that = this;
+    this.table.addEventListener("scroll", () => {
+      that.scrollTop = this.table.scrollTop;
+    });
+  },
+  activated () {
+    this.table.scrollTop = this.scrollTop;
+    this.getWarningData();
+    this.getTableData();
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferDepartureTable);
+    // const { startDate, endDate } = this.$route.query
+    // Object.entries(this.$route.query).forEach(([key, value]) => {
+    //   if ((value ?? '') !== '' && JSON.stringify(value) !== '[]') {
+    //     this.formData[key] = value
+    //   }
+    // })
+    // if (startDate !== null && startDate !== undefined) {
+    //   this.formData.flightDate[0] = startDate
+    // }
+    // if (endDate !== null && endDate !== undefined) {
+    //   this.formData.flightDate[1] = endDate
+    // }
+  },
+  deactivated () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  beforeDestroy () {
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent);
+      this.loopEvent = null;
+    }
+  },
+  methods: {
+    async getWarningData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureWarningId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          const { returnData } = res;
+          this.WarningData = returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    resetLoopEvent () {
+      this.loading = true;
+      this.hasSetTableScroll = false;
+      this.loopEvent && clearInterval(this.loopEvent);
+      this.getTableData();
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.transferDepartureTable);
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.hasTakeOff) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.leaveCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    changeView () {
+      // const query = {
+      //   ...this.formData,
+      //   startDate: this.startDate,
+      //   endDate: this.endDate
+      // }
+      // delete query.flightDate
+      // this.$router.replace({
+      //   path: '/transfer/arrival',
+      //   query
+      // })
+      this.$router.push("/transfer/arrival");
+    },
+    airPortChange () {
+      this.getAviationData();
+      this.upAviationData();
+      this.resetLoopEvent();
+    },
+    dateChangeHandler () {
+      this.getAviationData();
+      this.upAviationData();
+      this.resetLoopEvent();
+    },
+    // 选择机场
+    async getAirPortData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAirLtId,
+          dataContent: {},
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.AirportList = res.returnData;
+          this.formData.currentAirport = "PEK";
+          this.getAviationData();
+          this.upAviationData();
+          this.resetLoopEvent();
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 选择航司
+    async getAviationData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAviJoinLtId,
+          dataContent: { departureAirport: this.formData.currentAirport },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.carrierProps = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 选择航司
+    async upAviationData () {
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureAviLeaveLtId,
+          dataContent: { departureAirport: this.formData.currentAirport },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.carrierPropsop = res.returnData;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    // 获取表单下拉框数据
+    // getFormData(params) {
+    //   this.relatedAirportQuery({
+    //     ...params,
+    //     type: 'OUT'
+    //   })
+    //   this.outgoingAirlineQuery(params)
+    //   this.craftTypeQuery(params)
+    //   this.flightAttrQuery(params)
+    // },
+    // 获取表格数据
+    async getTableData () {
+      if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
+        return;
+      }
+      try {
+        const res = await getQuery({
+          serviceId: DATACONTENT_ID.departureTableLtId,
+          dataContent: {
+            departureAirport: this.formData.currentAirport,
+            startTime: this.startDate,
+            endTime: this.endDate
+          },
+          event: '0',
+          token: getToken()
+        });
+        if (Number(res.code) === 0) {
+          this.initTableData(res.returnData);
+        } else {
+        }
+        this.loading = false;
+      } catch (error) {
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent);
+          this.loopEvent = null;
+        }
+        this.loading = false;
+      }
+    },
+    initTableData (tableData) {
+      const currentTime = new Date();
+      const curTime = this.formatTime(currentTime);
+      this.leaveCount = 0;
+      this.baggageCount = 0;
+
+      tableData.forEach((item) => {
+        if (this.hasTakeOff(item)) {
+          this.leaveCount++;
+        }
+        if (!item["hasTakeOff"] && item["outTransferBaggageCount"] - item["outTransferredBaggageCount"] > 0) {
+          this.WarningData.forEach((p) => {
+            const startTime = this.formatTime(timeInZone((p.startDate ?? "").replace("T", " "), this.timeZone), 2);
+            const endTime = this.formatTime(timeInZone((p.endDate ?? "").replace("T", " "), this.timeZone), 2);
+            const planTime = this.formatTime(timeInZone((item.actualDepartureTime ?? "").replace("T", " "), this.timeZone), 2);
+            const capTime = Math.ceil((planTime - curTime) / (1000 * 60));
+            if (Number(startTime) - Number(curTime) < 0 && Number(endTime) - Number(curTime) > 0) {
+              const newItem = _.cloneDeep(item);
+              if (p.flightNO != "" && p.flightNO == item.flightNO) {
+                if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                  item["warningState"] = 1;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+                if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                  item["warningState"] = 2;
+                  const returnedTarget = Object.assign(newItem, p);
+                  this.sendLog(returnedTarget);
+                }
+              } else if (p.flightNO == "" && p.IATACode != "") {
+                if (item.flightNO.substring(0, 2) == p.IATACode) {
+                  if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
+                    item["warningState"] = 1;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                  if (p.alarmDuration && capTime - p.alarmDuration < 0) {
+                    item["warningState"] = 2;
+                    const returnedTarget = Object.assign(newItem, p);
+                    this.sendLog(returnedTarget);
+                  }
+                }
+              }
+            }
+          });
+        }
+        this.baggageCount = this.baggageCount + item.outTransferBaggageCount;
+      });
+      this.tableData = this._.sortBy(tableData, ["actualDepartureTime", "flightNO", "actualLandingTime", "preFlightNO"]);
+      setTableFilters(this.tableData, this.tableDataFilters);
+      this.toOrderNum(this.baggageCount);
+      this.$nextTick(() => {
+        this.setTableScroll();
+      });
+    },
+    formatTime (date, type = 1) {
+      let time = null;
+      if (type == 1) {
+        time = parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+      } else {
+        time = date;
+      }
+      const newTimt = new Date(time);
+      return newTimt.getTime();
+    },
+    async sendLog (obj) {
+      try {
+        const newObj = {
+          logTime: parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
+          logInfo: JSON.stringify(obj),
+          flightNO: obj.flightNO,
+          flightDate: obj.flightDate,
+          luggageSN: "",
+          strategyUseID: obj.alarmStrategyID,
+          event: 1,
+        };
+        await GeneralDataReception({
+          serviceId: SERVICE_ID.departureScId,
+          dataContent: JSON.stringify(newObj),
+        });
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+    hasTakeOff (flight) {
+      if (flight.actualDepartureTime) {
+        const now = new Date();
+        const actualDepartureTime = new Date(flight.actualDepartureTime.replace("T", " "));
+        flight["hasTakeOff"] = now > actualDepartureTime && !flight["flightCanceled"];
+      } else {
+        flight["hasTakeOff"] = false;
+      }
+      return flight["hasTakeOff"];
+    },
+    setTableScroll () {
+      if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      const lastRow = table.querySelectorAll(".el-table__body tr")[this.leaveCount - 1];
+      setTimeout(() => {
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index];
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+      }
+    },
+
+    toOrderNum (num) {
+      num = num.toString();
+      if (num.length < 6) {
+        num = "0" + num; // 如未满八位数，添加"0"补位
+        this.toOrderNum(num); // 递归添加"0"补位
+      } else if (num.length >= 6) {
+        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+      } else {
+        // 订单总量数字超过八位显示异常
+        this.$message.warning("总量数字过大");
+      }
+      this.setNumberTransform();
+    },
+    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
+      for (let i = 0; i < 7; i++) {
+        if (columnIndex === i) {
+          const _row = this.spanArr[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col,
+          };
+        }
+      }
+    },
+    exportHandler (refName, tableName) {
+      if (this.loading) {
+        return;
+      }
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
+      throttledExportToExcel(table, tableName, fileName, 2);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.terminal-form-wrap {
+  padding-top: 11px;
+  padding-left: 5px;
+  ::v-deep .form {
+    display: flex;
+    justify-content: space-between;
+    .form-left {
+      flex: 1;
+    }
+    .form-right {
+      flex: 0 1 auto;
+    }
+    .el-form-item {
+      margin-bottom: 0px;
+      margin-right: 8px;
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, "Microsoft YaHei";
+        font-size: 14px;
+      }
+      .el-switch__label {
+        color: #303133;
+      }
+      .el-form-item__error {
+        z-index: 10;
+      }
+    }
+    .btn-img {
+      position: relative;
+      top: 6px;
+    }
+  }
+  .box-item {
+    position: relative;
+    height: 50px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    // background: url(/images/text-bg-blue.png) no-repeat center center;
+    // background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius: 4px;
+    border: 3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+}
+.terminal-table {
+  width: 100%;
+  ::v-deep .table {
+    width: 100%;
+    .cell {
+      padding: 0;
+      text-align: center;
+      font-size: 14px;
+      font-family: Helvetica, "Microsoft YaHei";
+      letter-spacing: 0;
+    }
+    .cell-click {
+      cursor: pointer;
+      color: #2d7cff;
+      &.cell-clicked {
+        color: purple;
+      }
+    }
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      .cell {
+        font-weight: bold;
+        color: #101116;
+      }
+      .has-gutter {
+        tr {
+          .bgl-huang {
+            background: #fcf0b1;
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
+      tr.bgl-hui {
+        background: #d2d6df;
+        td {
+          background: #d2d6df;
+        }
+        &.redBorder {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background: #e83f82;
+          }
+        }
+      }
+    }
+    td.cell-toUnload {
+      background: lightcoral !important;
+      position: relative;
+      &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 2px dashed red;
+      }
+    }
+    td.cell-toUnloadNew {
+      background: #fcf0b1 !important;
+      position: relative;
+      &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 2px dashed #e28913;
+      }
+    }
+    .el-table__cell.is-hidden > * {
+      visibility: visible;
+    }
+  }
+}
+</style>

src/views/baggageManagement copy/index.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-02-23 11:22:45
+ * @LastEditTime: 2022-03-09 16:17:28
+ * @LastEditors: your name
+ * @Description: 行李管理
+ * have a nice day!
+-->
+
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'BaggageManagement'
+}
+</script>

src/views/baggageManagement copy/mixins/form.js

@@ -0,0 +1,272 @@
+/*
+ * @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 (data) {
+      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
+          }
+          if (Number(data) === 1) {
+            queryData['destination'] = this.formData.currentAirport
+          } else {
+            queryData['departureStation'] = this.formData.currentAirport
+          }
+          if (az.test(this.formData.search)) {
+            // 纯字母则为旅客姓名
+            queryData['passengerName'] = this.formData.search
+          } else if (azNum.test(this.formData.search) && top2.test(this.formData.search)&&this.formData.search.length <8) {
+            // 字母加数字且前两位为字母则为航班号
+            queryData['flightNO'] = 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['baggageNO'] = this.formData.search
+          } else {
+            // this.$message.error('请输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
+          }
+          this.$router.push({
+            path: '/advance',
+            query: {
+              ...queryData,
+              singleJump: true
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}

src/views/baggageManagement copy/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/baggageManagement copy/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/baggageManagement copy/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/baggageManagement/components/arrival/index.vue

@@ -8,8 +8,17 @@
 <template>
   <div class="arrival-one">
     <!--功能区-表单-->
-    <div ref="formWrap" class="terminal-form-wrap">
-      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        class="form"
+      >
         <div class="form-left">
           <el-form-item prop="currentAirport">
             <!-- <el-cascader
@@ -24,8 +33,22 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-            <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.planLandingApt" :value="item.planLandingApt" />
+            <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.planLandingApt"
+                :value="item.planLandingApt"
+              />
             </el-select>
           </el-form-item>
           <!-- <el-form-item prop="startDate">
@@ -52,30 +75,76 @@
               @change="endDateChangeHandler"
             />
           </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="dateChangeHandler" />
+          <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="dateChangeHandler"
+            />
           </el-form-item>
           <el-form-item>
             <div class="box-item">
               <p>预计装载总数：</p>
-              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+              <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>
+                <span
+                  v-else
+                  class="comma"
+                  >{{ item }}</span
+                >
               </li>
             </div>
           </el-form-item>
         </div>
-        <div class="form-right" @keyup.enter="onSubmit(1)">
+        <div
+          class="form-right"
+          @keyup.enter="onSubmit(1)"
+        >
           <el-form-item prop="search">
-            <el-popover :value="popoverVisible" placement="bottom" trigger="manual">
+            <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-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
             </el-popover>
           </el-form-item>
           <el-form-item>
-            <el-button class="btn-shadow" size="mini" type="primary" @click="onSubmit(1)">搜索</el-button>
+            <el-button
+              class="btn-shadow"
+              size="mini"
+              type="primary"
+              @click="onSubmit(1)"
+              >搜索</el-button
+            >
           </el-form-item>
           <!-- <el-form-item v-is="['is_timeIcon']">
             <TimeZoneSelector />
@@ -87,22 +156,75 @@
             <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
           </el-form-item> -->
           <el-form-item>
-            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+            <img
+              class="btn-img btn-shadow"
+              src="@/assets/baggage/ic_setting.png"
+              title="列设置"
+              @click="show"
+            />
           </el-form-item>
           <el-form-item v-is="['dm_dt_columnSettings']">
-            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站进港列表')" />
+            <img
+              class="btn-img btn-shadow"
+              src="@/assets/baggage/ic_export.png"
+              title="导出"
+              @click="exportHandler('table', '航站进港列表')"
+            />
           </el-form-item>
         </div>
       </el-form>
     </div>
     <!--表格-->
-    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
-      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
-        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed">
-          <el-table-column v-for="childCol in col.children" :key="childCol.prop" :prop="childCol.prop" :label="childCol.label" :width="childCol.width" :formatter="tableFormat">
+    <div
+      v-loading="loading"
+      class="terminal-table"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <el-table
+        ref="table"
+        class="table"
+        :height="computedTableHeight"
+        :data="dealedTableData"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="tableRowClassName"
+        :cell-class-name="cellClass"
+        show-summary
+        :summary-method="summaryMethod"
+        border
+        stripe
+        fit
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="col in tableColsCopy"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
+        >
+          <el-table-column
+            v-for="childCol in col.children"
+            :key="childCol.prop"
+            :prop="childCol.prop"
+            :label="childCol.label"
+            :width="childCol.width"
+            :formatter="tableFormat"
+          >
             <template #header>
-              <el-tooltip :content="childCol.desc || childCol.label" placement="top">
-                <TableHeaderCell :label="childCol.label" :filter-options="tableDataFilters[childCol.prop]" :filter-values.sync="filterValues[childCol.prop]" :sortable="childCol.sortable" :sort-rule.sync="tableDataSortRules[childCol.prop]" />
+              <el-tooltip
+                :content="childCol.desc || childCol.label"
+                placement="top"
+              >
+                <TableHeaderCell
+                  :label="childCol.label"
+                  :filter-options="tableDataFilters[childCol.prop]"
+                  :filter-values.sync="filterValues[childCol.prop]"
+                  :sortable="childCol.sortable"
+                  :sort-rule.sync="tableDataSortRules[childCol.prop]"
+                />
               </el-tooltip>
             </template>
           </el-table-column>
@@ -110,18 +232,41 @@
       </el-table>
     </div>
     <!--列设置-->
-    <Dialog :flag="dialogFlag" class="dialog-check-group">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+          <el-tree
+            ref="columnSetTree"
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
               label: 'label',
-              children: 'children',
-            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+              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>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck"
+            >确定</el-button
+          >
+          <el-button
+            size="medium"
+            @click="hide"
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -129,207 +274,207 @@
 </template>
 
 <script>
-import Dialog from "@/layout/components/Dialog";
-import TimeZoneSelector from "@/components/TimeZoneSelector";
-import terminalMixin from "../../mixins/terminal";
-import formMixin from "../../mixins/form";
-import tableColsMixin from "../../mixins/tableCols";
-import timeZoneMixin from "../../mixins/timeZone";
-import { getQuery } from "@/api/flight";
-import TableHeaderCell from "@/components/TableHeaderCell";
-import { setTableFilters, throttledExportToExcel } from "@/utils/table";
-import { getToken } from '@/utils/auth';
+import Dialog from '@/layout/components/Dialog'
+import TimeZoneSelector from '@/components/TimeZoneSelector'
+import terminalMixin from '../../mixins/terminal'
+import formMixin from '../../mixins/form'
+import tableColsMixin from '../../mixins/tableCols'
+import timeZoneMixin from '../../mixins/timeZone'
+import pf from '@/layout/mixin/publicFunc'
+import { TempQuery } from '@/api/temp'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { setTableFilters, throttledExportToExcel } from '@/utils/table'
 
 export default {
-  name: "DepartureTerminalView",
+  name: 'DepartureTerminalView',
   components: { Dialog, TimeZoneSelector, TableHeaderCell },
-  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
-  data () {
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin, pf],
+  data() {
     return {
-      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       popoverVisible: false,
       // 初始表头
       tableCols: [
         {
-          prop: "flightInfo",
-          label: "航班信息",
+          prop: 'flightInfo',
+          label: '航班信息',
           width: 185,
-          fixed: "left",
+          fixed: 'left',
           children: [
             {
-              prop: "flightNO",
-              label: "航班号",
-              desc: "指航班编号",
+              prop: 'flightNO',
+              label: '航班号',
+              desc: '指航班编号',
               width: 80,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "flightDate",
-              label: "执飞日期",
-              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              prop: 'flightDate',
+              label: '执飞日期',
+              desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
               width: 105,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "arrivalTime",
-              label: "降落时间",
-              desc: "根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间",
+              prop: 'arrivalTime',
+              label: '降落时间',
+              desc: '根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间',
               width: 150,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "departureAirport",
-              label: "起飞航站",
-              desc: "指航班执飞航段的起飞航站，以航站三字码显示",
+              prop: 'departureAirport',
+              label: '起飞航站',
+              desc: '指航班执飞航段的起飞航站，以航站三字码显示',
               width: 85,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "arrivalTerminal",
-              label: "到达航站楼",
-              desc: "指航班执飞航段的目的航站的航站楼代码",
+              prop: 'arrivalTerminal',
+              label: '到达航站楼',
+              desc: '指航班执飞航段的目的航站的航站楼代码',
               width: 100,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "luggageCarousel",
-              label: "行李转盘",
-              desc: "指航班进港，旅客提取行李转盘的代码",
+              prop: 'luggageCarousel',
+              label: '行李转盘',
+              desc: '指航班进港，旅客提取行李转盘的代码',
               width: 85,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "parkingSpace",
-              label: "停机位",
-              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              prop: 'parkingSpace',
+              label: '停机位',
+              desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
               filterable: true,
-              sortable: true,
-            },
-          ],
+              sortable: true
+            }
+          ]
         },
         {
-          prop: "originAirportBaggageInfo",
-          label: "始飞站行李信息",
+          prop: 'originAirportBaggageInfo',
+          label: '始飞站行李信息',
           children: [
             {
-              prop: "checkIns",
-              label: "值机",
-              desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+              prop: 'checkIns',
+              label: '值机',
+              desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活'
             },
             {
-              prop: "projectedLoad",
-              label: "预计装载",
-              desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+              prop: 'projectedLoad',
+              label: '预计装载',
+              desc: '指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活'
             },
             {
-              prop: "loadedQuantity",
-              label: "已装载",
-              desc: "指实际装机完成的行李数量，不包含取消托运的行李数量",
-            },
-          ],
+              prop: 'loadedQuantity',
+              label: '已装载',
+              desc: '指实际装机完成的行李数量，不包含取消托运的行李数量'
+            }
+          ]
         },
         {
-          prop: "arrvivalBaggageInfo",
-          label: "到达行李信息",
+          prop: 'arrvivalBaggageInfo',
+          label: '到达行李信息',
           children: [
             {
-              prop: "numberOfDestinationArrivals",
-              label: "到达",
-              desc: "指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'numberOfDestinationArrivals',
+              label: '到达',
+              desc: '指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "endPointNotReached",
-              label: "未到达",
-              desc: "指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'endPointNotReached',
+              label: '未到达',
+              desc: '指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "specialQuantity",
-              label: "特殊",
-              desc: "指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项",
-              width: 65,
+              prop: 'specialQuantity',
+              label: '特殊',
+              desc: '指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项',
+              width: 65
             },
             {
-              prop: "numberOfClaims",
-              label: "理赔",
-              desc: "指航班收到旅客申请理赔的行李数量",
-              width: 65,
-            },
-          ],
+              prop: 'numberOfClaims',
+              label: '理赔',
+              desc: '指航班收到旅客申请理赔的行李数量',
+              width: 65
+            }
+          ]
         },
         {
-          prop: "uninstallInfo",
-          label: "卸载状态",
+          prop: 'uninstallInfo',
+          label: '卸载状态',
           children: [
             {
-              prop: "uninstalled",
-              label: "已卸载",
-              desc: "指卸机的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'uninstalled',
+              label: '已卸载',
+              desc: '指卸机的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "numberToBeUninstalled",
-              label: "待卸载",
-              desc: "指仍未卸机的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'numberToBeUninstalled',
+              label: '待卸载',
+              desc: '指仍未卸机的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "terminationdBaggageInfo",
-          label: "终止行李",
+          prop: 'terminationdBaggageInfo',
+          label: '终止行李',
           children: [
             {
-              prop: "terminateArrivalQuantity",
-              label: "到达",
-              desc: "指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'terminateArrivalQuantity',
+              label: '到达',
+              desc: '指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "terminateUnreachedQuantity",
-              label: "未到达",
-              desc: "指未到达目的站的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'terminateUnreachedQuantity',
+              label: '未到达',
+              desc: '指未到达目的站的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "transferBaggageInfo",
-          label: "转运行李",
+          prop: 'transferBaggageInfo',
+          label: '转运行李',
           children: [
             {
-              prop: "quantityShipped",
-              label: "已转运",
-              desc: "指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'quantityShipped',
+              label: '已转运',
+              desc: '指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "undeliveredQuantity",
-              label: "未转运",
-              desc: "指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'undeliveredQuantity',
+              label: '未转运',
+              desc: '指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "baggageDistributionInfo",
-          label: "行李分布",
+          prop: 'baggageDistributionInfo',
+          label: '行李分布',
           children: [
             {
-              prop: "numberOfContainers",
-              label: "容器",
-              desc: "指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'numberOfContainers',
+              label: '容器',
+              desc: '指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "numberOfBulk",
-              label: "散装",
-              desc: "指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息",
-              width: 65,
-            },
-          ],
-        },
+              prop: 'numberOfBulk',
+              label: '散装',
+              desc: '指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息',
+              width: 65
+            }
+          ]
+        }
       ],
       tableDataSortRules: {
-        flightCanceled: "ascending",
+        flightCanceled: 'ascending'
       },
       loading: false,
       AirportList: [],
@@ -337,96 +482,95 @@ export default {
       arrivalCount: 0,
       baggageCount: 0,
       hasSetTableScroll: false,
-      table: null,
-    };
+      table: null
+    }
   },
   computed: {
-    singleDay () {
-      return this.startDate === this.endDate;
-    },
+    singleDay() {
+      return this.startDate === this.endDate
+    }
   },
-  mounted () {
-    this.getAirPortData();
-    this.table = this.$refs.table.bodyWrapper;
-    const that = this;
-    this.table.addEventListener("scroll", () => {
-      that.scrollTop = this.table.scrollTop;
-    });
+  mounted() {
+    this.getAirPortData()
+    this.table = this.$refs.table.bodyWrapper
+    const that = this
+    this.table.addEventListener('scroll', () => {
+      that.scrollTop = this.table.scrollTop
+    })
   },
-  activated () {
-    this.table.scrollTop = this.scrollTop;
-    this.getTableData();
-    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+  activated() {
+    this.table.scrollTop = this.scrollTop
+    this.getTableData()
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable)
   },
-  deactivated () {
+  deactivated() {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
   methods: {
-    resetLoopEvent () {
-      this.loading = true;
-      this.hasSetTableScroll = false;
-      this.loopEvent && clearInterval(this.loopEvent);
-      this.getTableData();
-      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+    resetLoopEvent() {
+      this.loading = true
+      this.hasSetTableScroll = false
+      this.loopEvent && clearInterval(this.loopEvent)
+      this.getTableData()
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable)
     },
-    airPortChange () {
-      this.resetLoopEvent();
+    airPortChange() {
+      this.resetLoopEvent()
     },
-    dateChangeHandler () {
-      this.resetLoopEvent();
+    dateChangeHandler() {
+      this.resetLoopEvent()
     },
     // 选择机场
-    async getAirPortData () {
+    async getAirPortData() {
       try {
-        const res = await getQuery({
-          serviceId: DATACONTENT_ID.arrivalAirId,
-          dataContent: {},
-          event: '0',
-          token: getToken()
-        });
+        // const res = await TempQuery({
+        //   id: SERVICE_ID.arrivalAirId,
+        //   dataContent: []
+        // })
+        const res = await this.getQueryListAuth(SERVICE_ID.arrivalAirId, {}, 1, 9999, 278)
         if (Number(res.code) === 0) {
-          this.AirportList = this._.orderBy(res.returnData, (o) => o.planLandingApt);
-          this.formData.currentAirport = "PEK";
-          this.resetLoopEvent();
+          this.AirportList = this._.orderBy(res.returnData.listValues, o => o.planLandingApt)
+          this.formData.currentAirport = 'PEK'
+          this.resetLoopEvent()
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    tableRowClassName ({ row, rowIndex }) {
-      const classes = [];
-      if (row.flightStatus === "DLY") {
-        classes.push("bgl-delayed");
+    tableRowClassName({ row, rowIndex }) {
+      const classes = []
+      if (row.flightStatus === 'DLY') {
+        classes.push('bgl-delayed')
       }
-      if (row.flightStatus === "CAN") {
-        classes.push("bgl-canceled");
+      if (row.flightStatus === 'CAN') {
+        classes.push('bgl-canceled')
       }
       if (row.hasArrived) {
-        classes.push("bgl-hui");
+        classes.push('bgl-hui')
         if (rowIndex === this.arrivalCount - 1) {
-          classes.push("redBorder");
+          classes.push('redBorder')
         }
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
-    headerCellClass ({ row, column }) {
-      const classes = [];
-      const rule = this.tableDataSortRules[column.property];
+    headerCellClass({ row, column }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
       if (rule) {
-        classes.push(rule);
+        classes.push(rule)
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
     // 获取表单下拉框数据
     // getFormData(params) {
@@ -439,120 +583,118 @@ export default {
     //   this.flightAttrQuery(params)
     // },
     // 获取表格数据
-    async getTableData () {
+    async getTableData() {
       if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
-        return;
+        return
       }
-      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate]
       try {
-        const res = await getQuery({
-          serviceId: DATACONTENT_ID.arrivalTableId,
-          dataContent: {
-            departureAirport: this.formData.currentAirport,
-            startTime: this.startDate,
-            endTime: this.endDate
-          },
-          event: '0',
-          token: getToken()
-        });
+        // const res = await TempQuery({
+        //   id: SERVICE_ID.arrivalTableId,
+        //   dataContent: [...arr, ...arr, ...arr]
+        // })
+        const res = await this.getQueryList(SERVICE_ID.arrivalTableId, { landingAirport: arr[0], flightDateBegin: arr[1], flightDateEnd: arr[2] }, 1, 9999)
         if (Number(res.code) === 0) {
-          this.initTableData(res.returnData);
-        } else {
-
+          this.initTableData(res.returnData.listValues)
         }
-        this.loading = false;
+        this.loading = false
       } catch (error) {
         if (this.loopEvent) {
-          clearInterval(this.loopEvent);
-          this.loopEvent = null;
+          clearInterval(this.loopEvent)
+          this.loopEvent = null
         }
-        this.loading = false;
-
+        this.loading = false
       }
     },
-    initTableData (tableData) {
-      this.arrivalCount = 0;
-      this.baggageCount = 0;
-      tableData.forEach((item) => {
-        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
-        if (this.hasArrived(item)) {
-          this.arrivalCount++;
+    initTableData(tableData) {
+      this.baggageCount = 0
+      tableData.forEach(item => {
+        item['flightCanceled'] = item['flightStatus'] === 'CAN' ? 1 : 0
+        if (item['arrivalTime'] && !item['flightCanceled']) {
+          const now = new Date()
+          const arrivalTime = new Date(item['arrivalTime'])
+          if (now > arrivalTime) {
+            item['hasArrived'] = true
+          } else {
+            item['hasArrived'] = false
+          }
+        } else {
+          item['hasArrived'] = false
         }
-        this.baggageCount = this.baggageCount + item.projectedLoad;
-      });
-      this.tableData = this._.orderBy(tableData, ["hasArrived", "arrivalTime"], ["desc", "asc"]);
-      setTableFilters(this.tableData, this.tableDataFilters);
-      this.toOrderNum(this.baggageCount);
+        this.baggageCount = this.baggageCount + Number(item.projectedLoad)
+      })
+      this.tableData = this._.orderBy(tableData, ['hasArrived', 'arrivalTime'], ['desc', 'asc'])
+      setTableFilters(this.tableData, this.tableDataFilters)
+      this.toOrderNum(this.baggageCount)
       this.$nextTick(() => {
-        this.setTableScroll();
-      });
+        this.setTableScroll()
+      })
     },
-    hasArrived (flight) {
-      if (flight.arrivalTime) {
-        const now = new Date();
-        const arrivalTime = new Date(flight.arrivalTime);
-        flight["hasArrived"] = now > arrivalTime && !flight["flightCanceled"];
-      } else {
-        flight["hasArrived"] = false;
-      }
-      return flight["hasArrived"];
-    },
-    setTableScroll () {
+    setTableScroll() {
+      this.arrivalCount = 0
+      this.dealedTableData.forEach(row => {
+        if (row['hasArrived']) {
+          this.arrivalCount++
+        }
+      })
       if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
-        return;
+        return
       }
-      const table = this.$refs["table"].$el;
-      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      const table = this.$refs['table'].$el
+      const scrollParent = table.querySelector('.el-table__body-wrapper')
       if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
-        return;
+        return
       }
-      const lastRow = table.querySelectorAll(".el-table__body tr")[this.arrivalCount - 1];
+      const lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount - 1]
       setTimeout(() => {
-        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
-        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
         if (scrollMid > 0) {
-          const scrollHeight = Math.min(scrollMid, scrollMax);
-          scrollParent.scrollTo(0, scrollHeight);
+          const scrollHeight = Math.min(scrollMid, scrollMax)
+          scrollParent.scrollTo(0, scrollHeight)
         }
-      }, 0);
-      this.hasSetTableScroll = true;
+      }, 0)
+      this.hasSetTableScroll = true
     },
-    setNumberTransform () {
-      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
-      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+    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}%)`;
+        const elem = numberItems[index]
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
       }
     },
 
-    toOrderNum (num) {
-      num = num.toString();
+    toOrderNum(num) {
+      num = num.toString()
       if (num.length < 6) {
-        num = "0" + num; // 如未满八位数，添加"0"补位
-        this.toOrderNum(num); // 递归添加"0"补位
+        num = '0' + num // 如未满八位数，添加"0"补位
+        this.toOrderNum(num) // 递归添加"0"补位
       } else if (num.length >= 6) {
-        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
       } else {
         // 订单总量数字超过八位显示异常
-        this.$message.warning("总量数字过大");
+        this.$message.warning('总量数字过大')
       }
-      this.setNumberTransform();
+      this.setNumberTransform()
     },
-    exportHandler (refName, tableName) {
+    exportHandler(refName, tableName) {
       if (this.loading) {
-        return;
+        return
       }
-      const table = this.$refs[refName].$el.cloneNode(true);
-      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
-      throttledExportToExcel(table, tableName, fileName, 2);
-    },
-  },
-};
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName, 2)
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .terminal-form-wrap {
   padding-top: 11px;
   padding-left: 5px;
@@ -573,7 +715,7 @@ export default {
       optgroup,
       select,
       textarea {
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         font-size: 14px;
       }
       .el-switch__label {
@@ -679,7 +821,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, "Microsoft YaHei";
+      font-family: Helvetica, 'Microsoft YaHei';
       letter-spacing: 0;
     }
     .cell-click {
@@ -713,7 +855,7 @@ export default {
         &.redBorder {
           position: relative;
           &::after {
-            content: "";
+            content: '';
             position: absolute;
             left: 0;
             bottom: 0;

src/views/baggageManagement/components/baggage/index.vue

@@ -7,42 +7,96 @@
 -->
 <template>
   <div class="baggage-view">
-    <div ref="basicInfo" class="part1">
+    <div
+      class="part1"
+      :style="{ height: basicInfoHeight }"
+    >
       <div class="title">
         <span>行李基本信息</span>
-        <el-radio-group v-model="infoBtn" class="radioBtn" size="mini" fill="#FFFFFF" text-color="#28344D">
-          <el-radio-button v-for="item in infoRadios" :key="item" :label="item" />
+        <el-radio-group
+          v-model="infoBtn"
+          class="radioBtn"
+          size="mini"
+          fill="#FFFFFF"
+          text-color="#28344D"
+        >
+          <el-radio-button
+            v-for="item in infoRadios"
+            :key="item"
+            :label="item"
+          />
         </el-radio-group>
         <!-- <BackButton /> -->
       </div>
-      <div class="part1_info">
+      <div
+        v-show="basicInfoOpen"
+        class="part1_info"
+      >
         <el-row :gutter="12">
-          <el-col v-for="(item, index) in baggageBasicInfoCols" :key="index" :xl="[0, 2, 4].includes(index % 7) ? 4 : 3" :sm="6" :xs="6">
-            <span class="label">{{ item.label }}：</span><span class="content" :class="{
-                'click':
-                  item.prop === 'compensationSign' &&
-                  baggageBasicInfo[item.prop],
-              }" :title="formattedBaggageInfo(item.prop)" @click="baggageBasicInfoClickHandler(item.prop)">{{ formattedBaggageInfo(item.prop) }}</span>
+          <el-col
+            v-for="(item, index) in baggageBasicInfoCols"
+            :key="index"
+            :xl="[0, 2, 4].includes(index % 7) ? 4 : 3"
+            :sm="6"
+            :xs="6"
+          >
+            <span class="label">{{ item.label }}：</span>
+            <span
+              class="content"
+              :class="{
+                click: item.prop === 'compensationSign' && baggageBasicInfo[item.prop]
+              }"
+              :title="formattedBaggageInfo(item.prop)"
+              @click="baggageBasicInfoClickHandler(item.prop)"
+              >{{ formattedBaggageInfo(item.prop) }}</span
+            >
           </el-col>
         </el-row>
       </div>
+      <div
+        class="button-toggle"
+        @click="basicInfoToggle"
+      >
+        <i :class="basicInfoOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
+      </div>
     </div>
-    <div v-show="infoBtn === infoRadios[0]" class="part2">
+    <div
+      v-show="infoBtn === infoRadios[0]"
+      class="part2"
+      :style="{ height: trackListHeight }"
+    >
       <div class="part2_info">
         <div class="title">行李跟踪信息</div>
         <div class="type normal">
           {{ baggageBasicInfo.BagStatus }}
         </div>
         <div class="airline">
-          <el-select v-model="selectedAirline" size="mini" class="airline-select">
-            <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
+          <el-select
+            v-model="selectedAirline"
+            size="mini"
+            class="airline-select"
+          >
+            <el-option
+              v-for="airline in airlineList"
+              :key="airline.value"
+              :value="airline.value"
+              :label="airline.label"
+            />
           </el-select>
         </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
+              v-for="(line, index) in 6"
+              :key="index"
+              :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]"
+            />
           </div>
-          <div v-for="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.status }">
+          <div
+            v-for="(item, index) in stepNodes"
+            :key="index"
+            :class="{ 'step-item': true, 'active-item': item.status }"
+          >
             <div class="step-circle">
               <span class="step-name">{{ item.nodeName }}</span>
             </div>
@@ -55,15 +109,56 @@
         </div>
       </div>
       <div class="btns">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
-        <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_export.png"
+          title="导出"
+          @click="exportHandler('table', '行李节点列表')"
+        />
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_setting.png"
+          title="列设置"
+          @click="show"
+        />
+      </div>
+      <div
+        class="button-toggle"
+        @click="trackListToggle"
+      >
+        <i :class="trackListOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
       </div>
     </div>
-    <div v-show="infoBtn == infoRadios[0]" class="part3" :style="{
-        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 176px - 3 * 8px - 20px)`
-      }">
-      <el-table ref="table" :data="baggageTableData" height="100%" size="mini" border fit :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :cell-class-name="cellClass" :span-method="tableSpanMethod" @cell-click="cellClickHandler">
-        <el-table-column v-for="item in tableColsCopy" :key="item.index" :prop="item.prop" :label="item.name" :align="item.align || 'center'" :width="item.width" show-overflow-tooltip :fixed="item.fixed">
+    <div
+      v-show="infoBtn == infoRadios[0]"
+      class="part3"
+      :style="{
+        height: `calc(100vh - 80px - ${basicInfoHeight} - ${trackListHeight} - 3 * 8px - 20px)`
+      }"
+    >
+      <el-table
+        ref="table"
+        :data="baggageTableData"
+        height="100%"
+        size="mini"
+        border
+        fit
+        :header-cell-class-name="headerCellClass"
+        :header-cell-style="{ color: '#101116' }"
+        :cell-class-name="cellClass"
+        :span-method="tableSpanMethod"
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="item in tableColsCopy"
+          :key="item.index"
+          :prop="item.prop"
+          :label="item.name"
+          :align="item.align || 'center'"
+          :width="item.width"
+          show-overflow-tooltip
+          :fixed="item.fixed"
+        >
           <template slot="header">
             <div class="cell-content">{{ item.name }}</div>
           </template>
@@ -73,20 +168,35 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <div v-show="infoBtn === infoRadios[1]" class="part4" :style="{
-        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 20px)`
-      }">
+    <div
+      v-show="infoBtn === infoRadios[1]"
+      class="part4"
+      :style="{
+        height: `calc(100vh - 80px - ${basicInfoHeight} - 2 * 8px - 20px)`
+      }"
+    >
       <header class="head">
         <div class="title">行李跟踪信息</div>
         <div class="btns">
-          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel">
+          <img
+            class="btn-square btn-shadow"
+            src="@/assets/baggage/ic_export.png"
+            title="导出"
+            @click="exportMessageToExcel"
+          />
         </div>
       </header>
       <main class="main">
         <template v-if="messageList.length">
-          <el-row :gutter="24" type="flex">
-            <el-col v-for="(message, index) in messageList" :key="index" :span="6">
+          <el-row
+            :gutter="24"
+            type="flex"
+          >
+            <el-col
+              v-for="(message, index) in messageList"
+              :key="index"
+              :span="6"
+            >
               <div class="card">
                 <div class="message-date">{{ message.date }}</div>
                 <div class="message-content">
@@ -97,23 +207,49 @@
           </el-row>
         </template>
         <template v-else>
-          <el-empty :image-size="1" description="暂无数据" />
+          <el-empty
+            :image-size="1"
+            description="暂无数据"
+          />
         </template>
       </main>
     </div>
     <!--列设置-->
-    <Dialog :flag="dialogFlag" class="dialog-check-group">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+          <el-tree
+            ref="columnSetTree"
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
               label: 'name',
-              children: 'children',
-            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+              children: 'children'
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" type="primary" @click="onCheck('baggageTableData')">确定</el-button>
-          <el-button size="medium" @click="hide">取消</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck('baggageTableData')"
+            >确定</el-button
+          >
+          <el-button
+            size="medium"
+            @click="hide"
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -122,15 +258,14 @@
 <script>
 // import BackButton from '@/components/BackButton'
 import Dialog from '@/layout/components/Dialog/index.vue'
-import { myQuery } from '@/api/dataIntegration'
-import { BaggageMessageQuery } from '@/api/flight'
+import { myQuery } from '@/api/temp'
+import { BaggageMessageQuery } from '@/api/temp'
 import tableColsMixin from '../../mixins/tableCols'
 import { throttledExportToExcel } from '@/utils/table'
 import * as XLSX from 'xlsx'
 import XLSX_STYLE from 'xlsx-style'
 import FileSaver from 'file-saver'
 import { mapGetters } from 'vuex'
-import service from '@/utils/request-new'
 
 export default {
   name: 'BaggageView',
@@ -139,12 +274,11 @@ export default {
     Dialog
   },
   mixins: [tableColsMixin],
-  data () {
+  data() {
     return {
       queryData: {},
       airlineList: [],
       selectedAirline: '',
-      basicInfoHeight: 0,
       debounceTime: 300,
       baggageBasicInfoCols: [
         {
@@ -277,17 +411,19 @@ export default {
       spanArr: [],
       pos: 0,
       queryLoop: null,
-      queryTrackLoop: null
+      queryTrackLoop: null,
+      basicInfoOpen: true,
+      trackListOpen: false
     }
   },
   computed: {
     ...mapGetters(['sidebar']),
-    activeStepLine () {
+    activeStepLine() {
       return function (index) {
         return this.stepNodes[index].status && this.stepNodes[index + 1].status
       }
     },
-    statusClasses () {
+    statusClasses() {
       return function (status) {
         const classes = ['step-status']
         if (typeof status === 'string') {
@@ -300,7 +436,7 @@ export default {
         return classes
       }
     },
-    formattedBaggageInfo () {
+    formattedBaggageInfo() {
       return function (prop) {
         const value = this.baggageBasicInfo[prop]
         if ((value ?? '') === '') {
@@ -326,11 +462,17 @@ export default {
           }
         }
       }
+    },
+    basicInfoHeight() {
+      return this.basicInfoOpen ? '220px' : '68px'
+    },
+    trackListHeight() {
+      return this.trackListOpen ? '176px' : '81px'
     }
   },
   watch: {
     infoBtn: {
-      handler (val) {
+      handler(val) {
         this.stopLoopAll()
         if (val === this.infoRadios[0]) {
           if (this.selectedAirline) {
@@ -343,12 +485,12 @@ export default {
       },
       immediate: true
     },
-    selectedAirline () {
+    selectedAirline() {
       this.stopQueryTrack()
       this.startQueryTrack()
     }
   },
-  created () {
+  created() {
     this.resetStepNodes()
     const { flightNO, flightDate, bagSN } = this.$route.query
     if (flightNO && flightDate && bagSN) {
@@ -360,24 +502,29 @@ export default {
       this.$router.push('/')
     }
   },
-  activated () {
+  activated() {
     this.resizeHandler()
     this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
     window.addEventListener('resize', this.debouncedResizeHandler)
   },
-  updated () {
+  updated() {
     this.resizeHandler()
   },
-  deactivated () {
+  deactivated() {
     this.stopLoopAll()
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   methods: {
-    resizeHandler () {
-      this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
+    basicInfoToggle() {
+      this.basicInfoOpen = !this.basicInfoOpen
+    },
+    trackListToggle() {
+      this.trackListOpen = !this.trackListOpen
+    },
+    resizeHandler() {
       this.$refs['table']?.doLayout()
     },
-    baggageBasicInfoClickHandler (prop) {
+    baggageBasicInfoClickHandler(prop) {
       if (prop !== 'compensationSign' || !this.baggageBasicInfo[prop]) {
         return
       }
@@ -389,28 +536,28 @@ export default {
       })
       this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
     },
-    startQueryDetails () {
+    startQueryDetails() {
       this.queryDetails()
       this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
     },
-    startQueryTrack () {
+    startQueryTrack() {
       this.queryTrack()
       this.queryTrackLoop = setInterval(this.queryTrack.bind(this), LOOP_INTERVAL.baggageTrack)
     },
-    startQueryMessage () {
+    startQueryMessage() {
       this.queryMessage()
       this.queryLoop = setInterval(this.queryMessage.bind(this), LOOP_INTERVAL.baggageMessage)
     },
-    stopQueryTrack () {
+    stopQueryTrack() {
       this.queryTrackLoop && clearInterval(this.queryTrackLoop)
       this.queryTrackLoop = null
     },
-    stopLoopAll () {
+    stopLoopAll() {
       this.queryLoop && clearInterval(this.queryLoop)
       this.queryLoop = null
       this.stopQueryTrack()
     },
-    resetStepNodes () {
+    resetStepNodes() {
       this.stepNodes = [
         {
           nodeCode: 'CHECKIN',
@@ -442,7 +589,7 @@ export default {
         }
       ]
     },
-    initTableData (tableData) {
+    initTableData(tableData) {
       const spanArr = []
       let pos = 0
       for (let i = 0; i < tableData.length; i++) {
@@ -466,12 +613,12 @@ export default {
       this.spanArr = spanArr
       this.pos = pos
     },
-    headerCellClass ({ row, column, rowIndex, columnIndex }) {
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
       if (['departureInfo', 'landingInfo'].includes(column.property)) {
         return 'pre-line'
       }
     },
-    cellClass ({ row, column, rowIndex, columnIndex }) {
+    cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
         ['flightNO', 'U_Device_ID'].includes(column.property) &&
@@ -485,7 +632,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler (row, column, cell, event) {
+    cellClickHandler(row, column, cell, event) {
       if (row[column.property] && row[column.property] !== 'FBULK') {
         switch (column.property) {
           case 'flightNO':
@@ -514,7 +661,7 @@ export default {
         }
       }
     },
-    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (['flightNO', 'flightDate', 'departureInfo', 'landingInfo'].includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -524,13 +671,13 @@ export default {
         }
       }
     },
-    exportHandler (refName, tableName) {
+    exportHandler(refName, tableName) {
       const table = this.$refs[refName].$el.cloneNode(true)
       const { bagSN, flightNO, flightDate } = this.queryData
       const fileName = `${tableName}-${bagSN}-${flightNO}-${flightDate}.xlsx`
       throttledExportToExcel(table, tableName, fileName)
     },
-    exportMessageToExcel () {
+    exportMessageToExcel() {
       const xlsxDatas = [['Date & Time', 'Message']]
       xlsxDatas.push(
         ...this.messageList.map(message => [
@@ -624,30 +771,30 @@ export default {
       FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
     },
     // 行李详情基础信息
-    queryBaggageBasicInfo (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.baggageBasicInfo, dataContent })
+    queryBaggageBasicInfo(dataContent) {
+      return myQuery(SERVICE_ID.baggageBasicInfo, ...dataContent)
     },
     // 行李航段
-    queryBaggageAirline (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.baggageAirline, dataContent })
+    queryBaggageAirline(dataContent) {
+      return myQuery(SERVICE_ID.baggageAirline, ...dataContent)
     },
     // 行李详情追踪链
-    queryBaggageTrack (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.baggageTrack, dataContent })
+    queryBaggageTrack(dataContent) {
+      return myQuery(SERVICE_ID.baggageTrack, ...dataContent)
     },
     // 行李详情表格
-    queryBaggageDetails (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.baggageDetails, dataContent })
+    queryBaggageDetails(dataContent) {
+      return myQuery(SERVICE_ID.baggageDetails, ...dataContent)
     },
     // 原始报文
-    async queryBaggageMessage (dataContent) {
+    async queryBaggageMessage(dataContent) {
       try {
         const { code, returnData, message } = await BaggageMessageQuery({
-          serviceId: DATACONTENT_ID.baggageMessage,
+          id: SERVICE_ID.baggageMessage,
           dataContent
         })
         if (Number(code) === 0) {
-          return returnData
+          return returnData.listValues
         } else {
           this.$message.error(message ?? '失败')
         }
@@ -655,9 +802,9 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryBasicInfo (queryData = this.queryData) {
+    async queryBasicInfo(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
-      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      const dataContent = [flightNO, flightDate, bagSN]
       try {
         const baggageBasicInfo = await this.queryBaggageBasicInfo(dataContent)
         if (baggageBasicInfo.length) {
@@ -668,8 +815,8 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryDetails (queryData = this.queryData) {
-      function setDataSource (item) {
+    async queryDetails(queryData = this.queryData) {
+      function setDataSource(item) {
         if (item['b_type'] !== 'BSM') {
           const resourceCode = item['resourceFile']?.slice(-4)
           switch (resourceCode) {
@@ -678,7 +825,7 @@ export default {
                 (item['DeviceCode'] && item['DeviceCode'].toUpperCase() === 'STARHUB') ||
                 (!item['DeviceCode'] && !['LOAD', 'INFL'].includes(item['nodeCode']))
               ) {
-                item['dataSource'] = 'Manual Load'
+                item['dataSource'] = '星盟'
               } else {
                 item['dataSource'] = 'BRS'
               }
@@ -695,17 +842,19 @@ export default {
         }
       }
       const { flightNO, flightDate, bagSN } = queryData
-      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      const dataContent = [flightNO, flightDate, bagSN]
       try {
-        const baggageDetails = await this.queryBaggageDetails(dataContent)
+        const baggageDetails = await this.queryBaggageDetails(new Array(6).fill(dataContent).flat())
         this.baggageTableData = baggageDetails.map((item, index) => {
           if (item['dealTime']) {
             item['dealTime'] = item['dealTime'].replace('T', ' ')
           }
-          item['departureInfo'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
-            }`
-          item['landingInfo'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
-            }`
+          item['departureInfo'] = `${item['departureAirport']}\n${
+            item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
+          }`
+          item['landingInfo'] = `${item['landingAirport']}\n${
+            item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
+          }`
           setDataSource(item)
           return item
         })
@@ -714,9 +863,9 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryAirline (queryData = this.queryData) {
+    async queryAirline(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
-      const dataContent = { flightNO, flightDate, luggageSN: bagSN }
+      const dataContent = [flightNO, flightDate, bagSN]
       try {
         const result = await this.queryBaggageAirline(dataContent)
         this.airlineList = result.map(({ flightNO, flightDate, departureAirport, arriveAirport, luggageSN }) => ({
@@ -727,9 +876,7 @@ export default {
         }))
         if (this.airlineList.length) {
           let currentIndex = this.airlineList.findIndex(
-            ({ flightNO, flightDate }) =>
-              flightNO === queryData.flightNO &&
-              flightDate === queryData.flightDate
+            ({ flightNO, flightDate }) => flightNO === queryData.flightNO && flightDate === queryData.flightDate
           )
           currentIndex = currentIndex > -1 ? currentIndex : 0
           this.selectedAirline = this.airlineList[currentIndex].value
@@ -740,8 +887,8 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryTrack () {
-      function isSameStep (code1, code2) {
+    async queryTrack() {
+      function isSameStep(code1, code2) {
         const sameStepCodes = ['ARRIVED', 'TRANSFER']
         return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
       }
@@ -766,15 +913,15 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryMessage (queryData = this.queryData) {
+    async queryMessage(queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
-      const dataContent = { flightNO, flightDate, bagSN }
+      const dataContent = [flightNO, flightDate, bagSN]
       try {
         const result = await this.queryBaggageMessage(dataContent)
         const messageList = result.reduce((list, message, currentIndex, arr) => {
           const messageObject = typeof message === 'string' ? JSON.parse(message) : message
           // 确保是当前行李的报文
-          const isCorrectBaggage = messageObject.dataContent.includes(bagSN.slice(0, 7))
+          const isCorrectBaggage = messageObject.dataContent.match(/\.N\/([0-9]{10})/)?.[1] === bagSN
           // 相同报文去重
           const index = arr.findIndex(testMessage => {
             const testMessageObject = typeof testMessage === 'string' ? JSON.parse(testMessage) : testMessage
@@ -797,7 +944,10 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .baggage-view {
   width: 100%;
   height: calc(100vh - 80px);
@@ -809,6 +959,8 @@ export default {
     // height: 232px;
     background: #041741;
     padding: 16px 30px;
+    overflow: hidden;
+    position: relative;
     ::v-deep .title {
       font-size: 18px;
       font-weight: bold;
@@ -840,6 +992,9 @@ export default {
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
+      max-height: 152px;
+      overflow-x: hidden;
+      overflow-y: auto;
       > .el-row > .el-col {
         height: 38px;
         line-height: 38px;
@@ -866,11 +1021,13 @@ export default {
     margin: 8px 0;
     width: 100%;
     padding: 24px 30px 28px;
+    overflow: hidden;
     background: #ffffff;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
+    position: relative;
     .part2_info {
       flex: 1;
       display: flex;
@@ -939,7 +1096,7 @@ export default {
         align-items: center;
         justify-content: flex-start;
         z-index: 1;
-        font-family: Helvetica, "Microsoft Yahei";
+        font-family: Helvetica, 'Microsoft Yahei';
         .step-circle {
           width: 42px;
           height: 42px;
@@ -1004,7 +1161,7 @@ export default {
           padding: 0;
           word-spacing: 0;
           font-size: 14px;
-          font-family: Helvetica, "Microsoft YaHei";
+          font-family: Helvetica, 'Microsoft YaHei';
           font-weight: 400;
           color: #303133;
           width: 100% !important;
@@ -1079,10 +1236,27 @@ export default {
       width: 30px;
     }
   }
+  .button-toggle {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 20px;
+    height: 15px;
+    border-radius: 4px;
+    background-color: #2d67e3;
+    color: #ffffff;
+    cursor: pointer;
+    text-align: center;
+  }
 }
 </style>
 
-<style scoped lang="scss">
+<style
+  scoped
+  lang="scss"
+>
 ::v-deep .baggage-view {
   .el-popover {
     &.popover-dark {
@@ -1094,16 +1268,16 @@ export default {
       white-space: pre-line;
     }
   }
-  .el-popper[x-placement^="top"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='top'].popover-dark .popper__arrow::after {
     border-top-color: #303133;
   }
-  .el-popper[x-placement^="right"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='right'].popover-dark .popper__arrow::after {
     border-right-color: #303133;
   }
-  .el-popper[x-placement^="bottom"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='bottom'].popover-dark .popper__arrow::after {
     border-bottom-color: #303133;
   }
-  .el-popper[x-placement^="left"].popover-dark .popper__arrow::after {
+  .el-popper[x-placement^='left'].popover-dark .popper__arrow::after {
     border-left-color: #303133;
   }
 }

src/views/baggageManagement/components/container/index.vue

@@ -165,7 +165,7 @@
 <script>
 import Dialog from '@/layout/components/Dialog/index.vue'
 // import TimeZoneSelector from '@/components/TimeZoneSelector'
-import { myQuery } from '@/api/dataIntegration'
+import { myQuery } from '@/api/temp'
 import tableColsMixin from '../../mixins/tableCols'
 // import timeZoneMixin from '../../mixins/timeZone'
 import TableHeaderCell from '@/components/TableHeaderCell'
@@ -377,7 +377,7 @@ export default {
       }
       if (
         [
-          'passengerName',
+          // 'passengerName',
           'luggageSN'
           // 'inFlightNO',
           // 'transferFlightNO'
@@ -401,7 +401,7 @@ export default {
     cellClickHandler(row, column, cell, event) {
       if (
         [
-          'passengerName',
+          // 'passengerName',
           'luggageSN'
           // 'inFlightNO',
           //  'transferFlightNO'
@@ -414,14 +414,14 @@ export default {
           pageName: this.$route.name
         })
         switch (column.property) {
-          case 'passengerName':
-            this.$store.dispatch('app/setPassengerQueryParams', {
-              flightNO: this.queryData.flightNO,
-              flightDate: this.queryData.flightDate,
-              passengerName: row.passengerName
-            })
-            this.$store.dispatch('app/togglePassengerDialogFlag', true)
-            break
+          // case 'passengerName':
+          //   this.$store.dispatch('app/setPassengerQueryParams', {
+          //     flightNO: this.queryData.flightNO,
+          //     flightDate: this.queryData.flightDate,
+          //     passengerName: row.passengerName
+          //   })
+          //   this.$store.dispatch('app/togglePassengerDialogFlag', true)
+          //   break
           case 'luggageSN':
             this.$router.push({
               path: `${this.$route.path.split('/').slice(0, -1).join('/')}/baggageView`,
@@ -470,7 +470,7 @@ export default {
       this.loading = true
       this.tableData = []
       try {
-        const tableData = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        const tableData = await myQuery(SERVICE_ID.containerBaggage, ...dataContent)
         this.tableData = tableData
         setTableFilters(this.tableData, this.tableDataFilters)
       } catch {

src/views/baggageManagement/components/containerHistory/index.vue

@@ -90,7 +90,7 @@
 // import BackButton from '@/components/BackButton'
 import TableHeaderCell from '@/components/TableHeaderCell'
 import { mapGetters } from 'vuex'
-import { myQuery } from '@/api/dataIntegration'
+import { myQuery } from '@/api/temp'
 import { setTableFilters } from '@/utils/table'
 
 export default {
@@ -285,7 +285,7 @@ export default {
       const classes = []
       if (
         [
-          'passengerName',
+          // 'passengerName',
           'luggageSN'
           // 'inFlightNO',
           // 'transferFlightNO'
@@ -309,7 +309,7 @@ export default {
     cellClickHandler(row, column, cell, event) {
       if (
         [
-          'passengerName',
+          // 'passengerName',
           'luggageSN'
           // 'inFlightNO',
           // 'transferFlightNO'
@@ -322,14 +322,14 @@ export default {
           pageName: this.$route.name
         })
         switch (column.property) {
-          case 'passengerName':
-            this.$store.dispatch('app/setPassengerQueryParams', {
-              flightNO: this.selectedHistoryData.flightNO,
-              flightDate: this.selectedHistoryData.flightDate,
-              passengerName: row.passengerName
-            })
-            this.$store.dispatch('app/togglePassengerDialogFlag', true)
-            break
+          // case 'passengerName':
+          //   this.$store.dispatch('app/setPassengerQueryParams', {
+          //     flightNO: this.selectedHistoryData.flightNO,
+          //     flightDate: this.selectedHistoryData.flightDate,
+          //     passengerName: row.passengerName
+          //   })
+          //   this.$store.dispatch('app/togglePassengerDialogFlag', true)
+          //   break
           case 'luggageSN':
             this.$router.push({
               path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
@@ -377,7 +377,7 @@ export default {
       this.treeLoading = true
       this.tableData = []
       try {
-        const result = await myQuery(DATACONTENT_ID.containerHistory, ...dataContent)
+        const result = await myQuery(SERVICE_ID.containerHistory, ...dataContent)
         this.containerHistory = result
         this.msg = '容器历史默认显示最近' + this.containerHistory[0].k + '条历史，如果需要可联系管理员进行配置'
       } catch (error) {
@@ -389,7 +389,7 @@ export default {
       this.tableLoading = true
       this.tableData = []
       try {
-        const result = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        const result = await myQuery(SERVICE_ID.containerBaggage, ...dataContent)
         this.tableData = result
         setTableFilters(this.tableData, this.tableDataFilters)
       } catch (error) {

src/views/baggageManagement/components/departure/index.vue

@@ -117,7 +117,7 @@
         <div class="content">
           <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
               label: 'label',
-              children: 'children',
+              children: 'children'
             }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
         </div>
         <div class="foot right t30">
@@ -130,162 +130,161 @@
 </template>
 
 <script>
-import Dialog from "@/layout/components/Dialog";
-import TimeZoneSelector from "@/components/TimeZoneSelector";
-import terminalMixin from "../../mixins/terminal";
-import formMixin from "../../mixins/form";
-import tableColsMixin from "../../mixins/tableCols";
-import timeZoneMixin from "../../mixins/timeZone";
-import { getQuery } from "@/api/flight";
-import { GeneralDataReception } from "@/api/dataIntegration";
-import TableHeaderCell from "@/components/TableHeaderCell";
-import { setTableFilters, throttledExportToExcel, timeInZone } from "@/utils/table";
-import { parseTime } from "@/utils/index";
-import { mapGetters } from "vuex";
-import { getToken } from '@/utils/auth';
-
+import Dialog from '@/layout/components/Dialog'
+import TimeZoneSelector from '@/components/TimeZoneSelector'
+import terminalMixin from '../../mixins/terminal'
+import formMixin from '../../mixins/form'
+import tableColsMixin from '../../mixins/tableCols'
+import timeZoneMixin from '../../mixins/timeZone'
+import pf from '@/layout/mixin/publicFunc'
+import { TempQuery } from '@/api/temp'
+import { GeneralDataReception } from '@/api/temp'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { setTableFilters, throttledExportToExcel, timeInZone } from '@/utils/table'
+import { parseTime } from '@/utils/index'
+import { mapGetters } from 'vuex'
 export default {
-  name: "DepartureTerminalView",
+  name: 'DepartureTerminalView',
   components: { Dialog, TimeZoneSelector, TableHeaderCell },
-  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin, pf],
   data () {
     return {
-      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       popoverVisible: false,
       // 初始表头
       tableCols: [
         {
-          prop: "flightNO",
-          label: "航班号",
-          desc: "指航班编号",
+          prop: 'flightNO',
+          label: '航班号',
+          desc: '指航班编号',
           width: 80,
-          fixed: "left",
+          fixed: 'left',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "flightDate",
-          label: "执飞日期",
-          desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+          prop: 'flightDate',
+          label: '执飞日期',
+          desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
           width: 105,
-          fixed: "left",
+          fixed: 'left',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "planDepartureTime",
-          label: "起飞时间",
-          desc: "根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间",
+          prop: 'planDepartureTime',
+          label: '起飞时间',
+          desc: '根据优先级别显示时间。优先级别：1.实际起飞时间，2.预计起飞时间，3.计划起飞时间',
           width: 150,
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "targetAirport",
-          label: "目的站",
-          desc: "指航班执飞航段的目的航站，以航站三字码显示",
+          prop: 'targetAirport',
+          label: '目的站',
+          desc: '指航班执飞航段的目的航站，以航站三字码显示',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "departureBuild",
-          label: "航站楼",
-          desc: "指航班执飞航段的目的航站楼",
+          prop: 'departureBuild',
+          label: '航站楼',
+          desc: '指航班执飞航段的目的航站楼',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "bordingGate",
-          label: "登机口",
-          desc: "指航班的登机口代码，数据是变化的，仅显示最新信息",
+          prop: 'bordingGate',
+          label: '登机口',
+          desc: '指航班的登机口代码，数据是变化的，仅显示最新信息',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "standForDepartrue",
-          label: "停机位",
-          desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+          prop: 'standForDepartrue',
+          label: '停机位',
+          desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
           filterable: true,
-          sortable: true,
+          sortable: true
         },
         {
-          prop: "checkInTravellerNumber",
-          label: "托运旅客",
-          desc: "指航班已办理行李托运业务的旅客人数，含取消托运的旅客人数",
+          prop: 'checkInTravellerNumber',
+          label: '托运旅客',
+          desc: '指航班已办理行李托运业务的旅客人数，含取消托运的旅客人数'
         },
         {
-          prop: "checkInNumber",
-          label: "值机数",
-          desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+          prop: 'checkInNumber',
+          label: '值机数',
+          desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活'
         },
         {
-          prop: "unActive",
-          label: "未激活",
-          desc: "指最后的 BSM 报文“.S”中行李状态为“I”的行李数量，含取消托运的行李数量",
+          prop: 'unActive',
+          label: '未激活',
+          desc: '指最后的 BSM 报文“.S”中行李状态为“I”的行李数量，含取消托运的行李数量'
         },
         {
-          prop: "preLoad",
-          label: "预计装载",
-          desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+          prop: 'preLoad',
+          label: '预计装载',
+          desc: '指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活'
         },
         {
-          prop: "checkNumber",
-          label: "安检",
-          desc: "指进行安检的行李数量，含取消托运的行李数量",
+          prop: 'checkNumber',
+          label: '安检',
+          desc: '指进行安检的行李数量，含取消托运的行李数量'
         },
         {
-          prop: "sortNumber",
-          label: "分拣",
-          desc: "指已分拣完成的行李数量，含取消托运的行李数量",
+          prop: 'sortNumber',
+          label: '分拣',
+          desc: '指已分拣完成的行李数量，含取消托运的行李数量'
         },
         {
-          prop: "loadNumber",
-          label: "装车",
-          desc: "指已在分拣口装车完成的行李数量，含取消托运的行李数量",
+          prop: 'loadNumber',
+          label: '装车',
+          desc: '指已在分拣口装车完成的行李数量，含取消托运的行李数量'
         },
         {
-          prop: "boardID",
-          label: "装机",
-          desc: "指装机完成的行李数量，不含取消托运的行李数量",
+          prop: 'boardID',
+          label: '装机',
+          desc: '指装机完成的行李数量，不含取消托运的行李数量'
         },
         {
-          prop: "toUnload",
-          label: "待翻减",
-          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，而没有完成翻减的行李数量（须翻减总数减去已翻减数）",
+          prop: 'toUnload',
+          label: '待翻减',
+          desc: '指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，而没有完成翻减的行李数量（须翻减总数减去已翻减数）'
         },
         {
-          prop: "OFFCount",
-          label: "已翻减",
-          desc: "指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，且已完成翻减的行李数量",
+          prop: 'OFFCount',
+          label: '已翻减',
+          desc: '指旅客在办理行李托运后，旅客取消该行李的托运并且行李此时已经过装车节点，且已完成翻减的行李数量'
         },
         {
-          prop: "noCheckInNumber",
-          label: "取消托运",
-          desc: "指旅客在办理行李托运后，又取消托运的行李总数量",
+          prop: 'noCheckInNumber',
+          label: '取消托运',
+          desc: '指旅客在办理行李托运后，又取消托运的行李总数量'
         },
         {
-          prop: "noBSM",
-          label: "无BSM",
-          desc: "行李有处理信息（BPM）但无值机信息(BSM)的行李数量",
+          prop: 'noBSM',
+          label: '无BSM',
+          desc: '行李有处理信息（BPM）但无值机信息(BSM)的行李数量'
         },
         {
-          prop: "warning",
-          label: "风险预警",
-          desc: "指依据航班信息中预计起飞时间和当前时间差，与根据分拣到停机位设置的报警阈值对比，超过阈值的为风险行李，本项显示风险预警行李数量",
+          prop: 'warning',
+          label: '风险预警',
+          desc: '指依据航班信息中预计起飞时间和当前时间差，与根据分拣到停机位设置的报警阈值对比，超过阈值的为风险行李，本项显示风险预警行李数量'
         },
         {
-          prop: "exceptions",
-          label: "未装机行李",
-          desc: "指航班关闭货舱门后，应装而未装的行李数量",
+          prop: 'exceptions',
+          label: '未装机行李',
+          desc: '指航班关闭货舱门后，应装而未装的行李数量'
         },
         {
-          prop: "midIn",
-          label: "中转进行李",
-          desc: "指从其他航班中转到当前航班的行李数量",
-        },
+          prop: 'midIn',
+          label: '中转进行李',
+          desc: '指从其他航班中转到当前航班的行李数量'
+        }
       ],
       tableDataSortRules: {
-        flightCanceled: "ascending",
+        flightCanceled: 'ascending'
       },
       loading: false,
       AirportList: [],
@@ -294,118 +293,117 @@ export default {
       baggageCount: 0,
       hasSetTableScroll: false,
       table: null,
-      WarningData: [],
-    };
+      WarningData: []
+    }
   },
   computed: {
     singleDay () {
-      return this.startDate === this.endDate;
+      return this.startDate === this.endDate
     },
-    ...mapGetters(["timeZone"]),
+    ...mapGetters(['timeZone'])
   },
   mounted () {
-    this.getAirPortData();
-    this.table = this.$refs.table.bodyWrapper;
-    const that = this;
-    this.table.addEventListener("scroll", () => {
-      that.scrollTop = this.table.scrollTop;
-    });
+    this.getAirPortData()
+    this.table = this.$refs.table.bodyWrapper
+    const that = this
+    this.table.addEventListener('scroll', () => {
+      that.scrollTop = this.table.scrollTop
+    })
   },
   activated () {
-    this.table.scrollTop = this.scrollTop;
-    this.getTableData();
-    this.getWarningData();
-    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+    this.table.scrollTop = this.scrollTop
+    this.getTableData()
+    this.getWarningData()
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable)
   },
   deactivated () {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
   beforeDestroy () {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
   methods: {
     resetLoopEvent () {
-      this.loading = true;
-      this.hasSetTableScroll = false;
-      this.loopEvent && clearInterval(this.loopEvent);
-      this.getTableData();
-      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable);
+      this.loading = true
+      this.hasSetTableScroll = false
+      this.loopEvent && clearInterval(this.loopEvent)
+      this.getTableData()
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.departureTable)
     },
     airPortChange () {
-      this.resetLoopEvent();
+      this.resetLoopEvent()
     },
     dateChangeHandler () {
-      this.resetLoopEvent();
+      this.resetLoopEvent()
     },
+    // 选择机场
     async getAirPortData () {
       try {
-        const res = await getQuery({
-          serviceId: DATACONTENT_ID.departureAirMainId,
-          dataContent: {},
-          event: '0',
-          token: getToken()
-        });
+        // const res = await TempQuery({
+        //   id: SERVICE_ID.departureAirMainId,
+        //   dataContent: []
+        // })
+        const res = await this.getQueryListAuth(SERVICE_ID.departureAirMainId, {}, 1, 9999, 276)
         if (Number(res.code) === 0) {
-          this.AirportList = this._.orderBy(res.returnData, (o) => o.planDepartureApt);
-          this.formData.currentAirport = "PEK";
-          this.resetLoopEvent();
+          this.AirportList = this._.orderBy(res.returnData.listValues, o => o.planDepartureApt)
+          this.formData.currentAirport = 'PEK'
+          this.resetLoopEvent()
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
     async getWarningData () {
       try {
-        const res = await getQuery({
-          serviceId: DATACONTENT_ID.departureWarningId,
-          dataContent: {},
-          event: '0',
-          token: getToken()
-        });
+        // const res = await TempQuery({
+        //   id: SERVICE_ID.departureWarningId,
+        //   dataContent: []
+        // })
+        const res = await this.getQueryList(SERVICE_ID.departureWarningId, {}, 1, 999)
         if (Number(res.code) === 0) {
-          const { listValues } = res.returnData;
-          this.WarningData = listValues;
+          const { listValues } = res.returnData
+          this.WarningData = listValues
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
     tableRowClassName ({ row, rowIndex }) {
-      const classes = [];
-      if (row.flightStatus === "DLY") {
-        classes.push("bgl-delayed");
+      const classes = []
+      if (row.flightStatus === 'DLY') {
+        classes.push('bgl-delayed')
       }
-      if (row.flightStatus === "CAN") {
-        classes.push("bgl-canceled");
+      if (row.flightStatus === 'CAN') {
+        classes.push('bgl-canceled')
       }
       if (row.hasTakeOff === 1) {
-        classes.push("bgl-hui");
+        classes.push('bgl-hui')
         if (rowIndex === this.leaveCount - 1) {
-          classes.push("redBorder");
+          classes.push('redBorder')
         }
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
     headerCellClass ({ row, column }) {
-      const classes = [];
-      if (["warning", "exceptions", "midIn"].includes(column.property)) {
-        classes.push("bgl-huang");
+      const classes = []
+      if (['warning', 'exceptions', 'midIn'].includes(column.property)) {
+        classes.push('bgl-huang')
       }
-      const rule = this.tableDataSortRules[column.property];
+      const rule = this.tableDataSortRules[column.property]
       if (rule) {
-        classes.push(rule);
+        classes.push(rule)
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
     // 获取表单下拉框数据
     // getFormData(params) {
@@ -420,179 +418,185 @@ export default {
     // 获取表格数据
     async getTableData () {
       if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
-        return;
+        return
       }
-      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate]
       try {
-        const res = await getQuery({
-          serviceId: DATACONTENT_ID.departureTableMainId,
-          dataContent: {
-            departureAirport: this.formData.currentAirport,
-            startTime: this.startDate,
-            endTime: this.endDate
-          },
-          event: '0',
-          token: getToken()
-        });
+        // const res = await TempQuery({
+        //   id: SERVICE_ID.departureTableMainId,
+        //   dataContent: [...arr, ...arr, ...arr]
+        // })
+        const res = await this.getQueryList(SERVICE_ID.departureTableMainId, { departureAirport: arr[0], beginDate: arr[1], endDate: arr[2] }, 1, 9999)
         if (Number(res.code) === 0) {
-          this.initTableData(res.returnData.listValues);
-        } else {
+          this.initTableData(res.returnData.listValues)
         }
-        this.loading = false;
+        this.loading = false
       } catch (error) {
         if (this.loopEvent) {
-          clearInterval(this.loopEvent);
-          this.loopEvent = null;
+          clearInterval(this.loopEvent)
+          this.loopEvent = null
         }
-        this.loading = false;
+        this.loading = false
       }
     },
     initTableData (tableData) {
-      const currentTime = new Date();
-      const curTime = this.formatTime(currentTime);
-      this.leaveCount = 0;
-      this.baggageCount = 0;
-      tableData.forEach((item) => {
-        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
-        item["toUnload"] = item['tounLoad'] - item["OFFCount"];
-        item["exceptions"] = item["preLoad"] - item["boardID"];
-        if (item["hasTakeOff"] === 1 && !item["flightCanceled"]) {
-          this.leaveCount++;
-        }
-        if (item["hasTakeOff"] !== 1 && !item["flightCanceled"] && item["preLoad"] - Math.max(item.loadNumber, item.boardID) > 0) {
-          this.WarningData.forEach((p) => {
-            const startTime = this.formatTime(timeInZone((p.startDate ?? "").replace("T", " "), this.timeZone), 2);
-            const endTime = this.formatTime(timeInZone((p.endDate ?? "").replace("T", " "), this.timeZone), 2);
-            const planTime = this.formatTime(timeInZone((item.planDepartureTime ?? "").replace("T", " "), this.timeZone), 2);
-            const capTime = Math.ceil((planTime - curTime) / (1000 * 60));
+      const currentTime = new Date()
+      const curTime = this.formatTime(currentTime)
+      this.baggageCount = 0
+      tableData.forEach(item => {
+        item['flightCanceled'] = item['flightStatus'] === 'CAN' ? 1 : 0
+        item['toUnload'] = item['tounLoad'] - item['OFFCount']
+        item['exceptions'] = item['preLoad'] - item['boardID']
+        if (
+          item['hasTakeOff'] !== 1 &&
+          !item['flightCanceled'] &&
+          item['preLoad'] - Math.max(item.loadNumber, item.boardID) > 0
+        ) {
+          this.WarningData.forEach(p => {
+            const startTime = this.formatTime(timeInZone((p.startDate ?? '').replace('T', ' '), this.timeZone), 2)
+            const endTime = this.formatTime(timeInZone((p.endDate ?? '').replace('T', ' '), this.timeZone), 2)
+            const planTime = this.formatTime(
+              timeInZone((item.planDepartureTime ?? '').replace('T', ' '), this.timeZone),
+              2
+            )
+            const capTime = Math.ceil((planTime - curTime) / (1000 * 60))
             if (Number(startTime) - Number(curTime) < 0 && Number(endTime) - Number(curTime) > 0) {
-              const newItem = _.cloneDeep(item);
+              const newItem = _.cloneDeep(item)
               if (p.flightNO && p.flightNO == item.flightNO) {
                 if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
-                  item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
-                  item["warningState"] = 1;
-                  const returnedTarget = Object.assign(newItem, p);
-                  this.sendLog(returnedTarget);
+                  item['warning'] = item['preLoad'] - Math.max(item.loadNumber, item.boardID)
+                  item['warningState'] = 1
+                  const returnedTarget = Object.assign(newItem, p)
+                  this.sendLog(returnedTarget)
                 }
                 if (p.alarmDuration && capTime - p.alarmDuration < 0) {
-                  item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
-                  item["warningState"] = 2;
-                  const returnedTarget = Object.assign(newItem, p);
-                  this.sendLog(returnedTarget);
+                  item['warning'] = item['preLoad'] - Math.max(item.loadNumber, item.boardID)
+                  item['warningState'] = 2
+                  const returnedTarget = Object.assign(newItem, p)
+                  this.sendLog(returnedTarget)
                 }
               } else if (!p.flightNO && p.IATACode) {
                 if (newItem.flightNO.substring(0, 2) == p.IATACode) {
                   if (p.warningDuration && capTime - p.warningDuration < 0 && capTime - p.alarmDuration > 0) {
-                    item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
-                    item["warningState"] = 1;
-                    const returnedTarget = Object.assign(newItem, p);
-                    this.sendLog(returnedTarget);
+                    item['warning'] = item['preLoad'] - Math.max(item.loadNumber, item.boardID)
+                    item['warningState'] = 1
+                    const returnedTarget = Object.assign(newItem, p)
+                    this.sendLog(returnedTarget)
                   }
                   if (p.alarmDuration && capTime - p.alarmDuration < 0) {
-                    item["warning"] = item["preLoad"] - Math.max(item.loadNumber, item.boardID);
-                    item["warningState"] = 2;
-                    const returnedTarget = Object.assign(newItem, p);
-                    this.sendLog(returnedTarget);
+                    item['warning'] = item['preLoad'] - Math.max(item.loadNumber, item.boardID)
+                    item['warningState'] = 2
+                    const returnedTarget = Object.assign(newItem, p)
+                    this.sendLog(returnedTarget)
                   }
                 }
               }
             }
-          });
+          })
         }
-        this.baggageCount = this.baggageCount + item.preLoad;
-      });
-      this.tableData = this._.orderBy(tableData, ["hasTakeOff", "planDepartureTime"], ["desc", "asc"]);
-      setTableFilters(this.tableData, this.tableDataFilters);
-      this.toOrderNum(this.baggageCount);
+        this.baggageCount = this.baggageCount + Number(item.preLoad)
+      })
+      this.tableData = this._.orderBy(tableData, ['hasTakeOff', 'planDepartureTime'], ['desc', 'asc'])
+      setTableFilters(this.tableData, this.tableDataFilters)
+      this.toOrderNum(this.baggageCount)
       this.$nextTick(() => {
-        this.setTableScroll();
-      });
+        this.setTableScroll()
+      })
     },
     formatTime (date, type = 1) {
-      let time = null;
+      let time = null
       if (type == 1) {
-        time = parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}");
+        time = parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
       } else {
-        time = date;
+        time = date
       }
-      const newTimt = new Date(time);
-      return newTimt.getTime();
+      const newTimt = new Date(time)
+      return newTimt.getTime()
     },
     async sendLog (obj) {
       try {
         const newObj = {
-          logTime: parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
+          logTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
           logInfo: JSON.stringify(obj),
           flightNO: obj.flightNO,
           flightDate: obj.flightDate,
-          luggageSN: "",
+          luggageSN: '',
           strategyUseID: obj.alarmStrategyID,
-          event: 1,
-        };
+          event: 1
+        }
         await GeneralDataReception({
           serviceId: SERVICE_ID.departureScId,
-          dataContent: JSON.stringify(newObj),
-        });
+          dataContent: JSON.stringify(newObj)
+        })
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
     setTableScroll () {
+      this.leaveCount = 0
+      this.dealedTableData.forEach(row => {
+        if (row['hasTakeOff'] === 1 && !row['flightCanceled']) {
+          this.leaveCount++
+        }
+      })
       if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
-        return;
+        return
       }
-      const table = this.$refs["table"].$el;
-      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      const table = this.$refs['table'].$el
+      const scrollParent = table.querySelector('.el-table__body-wrapper')
       if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
-        return;
+        return
       }
-      const lastRow = table.querySelectorAll(".el-table__body tr")[this.leaveCount - 1];
+      const lastRow = table.querySelectorAll('.el-table__body tr')[this.leaveCount - 1]
       setTimeout(() => {
-        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
-        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
         if (scrollMid > 0) {
-          const scrollHeight = Math.min(scrollMid, scrollMax);
-          scrollParent.scrollTo(0, scrollHeight);
+          const scrollHeight = Math.min(scrollMid, scrollMax)
+          scrollParent.scrollTo(0, scrollHeight)
         }
-      }, 0);
-      this.hasSetTableScroll = true;
+      }, 0)
+      this.hasSetTableScroll = true
     },
     setNumberTransform () {
-      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
-      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+      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}%)`;
+        const elem = numberItems[index]
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
       }
     },
 
     toOrderNum (num) {
-      num = num.toString();
+      num = num.toString()
       if (num.length < 6) {
-        num = "0" + num; // 如未满八位数，添加"0"补位
-        this.toOrderNum(num); // 递归添加"0"补位
+        num = '0' + num // 如未满八位数，添加"0"补位
+        this.toOrderNum(num) // 递归添加"0"补位
       } else if (num.length >= 6) {
-        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
       } else {
         // 订单总量数字超过八位显示异常
-        this.$message.warning("总量数字过大");
+        this.$message.warning('总量数字过大')
       }
-      this.setNumberTransform();
+      this.setNumberTransform()
     },
     exportHandler (refName, tableName) {
       if (this.loading) {
-        return;
+        return
       }
-      const table = this.$refs[refName].$el.cloneNode(true);
-      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
-      throttledExportToExcel(table, tableName, fileName);
-    },
-  },
-};
+      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>
+<style
+  lang="scss"
+  scoped
+>
 .terminal-form-wrap {
   padding-top: 11px;
   padding-left: 5px;

src/views/baggageManagement/components/departureC/index.vue

@@ -130,7 +130,7 @@ import terminalMixin from "../../mixins/terminal";
 import formMixin from "../../mixins/form";
 import tableColsMixin from "../../mixins/tableCols";
 import timeZoneMixin from "../../mixins/timeZone";
-import { getQuery } from "@/api/flight";
+import { TempQuery } from "@/api/temp";
 import TableHeaderCell from "@/components/TableHeaderCell";
 import { setTableFilters, throttledExportToExcel } from "@/utils/table";
 
@@ -363,8 +363,8 @@ export default {
     },
     async getAirPortData () {
       try {
-        const res = await getQuery({
-          id: DATACONTENT_ID.departureAirMainId,
+        const res = await TempQuery({
+          id: SERVICE_ID.departureAirMainId,
           dataContent: [],
         });
         if (Number(res.code) === 0) {
@@ -422,8 +422,8 @@ this.$message.error("失败");
       }
       const arr = [this.formData.currentAirport, this.startDate, this.endDate];
       try {
-        const res = await getQuery({
-          id: DATACONTENT_ID.departureTableMainId,
+        const res = await TempQuery({
+          id: SERVICE_ID.departureTableMainId,
           dataContent: [...arr, ...arr, ...arr],
         });
         if (Number(res.code) === 0) {

src/views/baggageManagement/components/flight/index.vue

@@ -304,7 +304,7 @@
 // import BackButton from '@/components/BackButton'
 import Dialog from '@/layout/components/Dialog/index.vue'
 import TimeZoneSelector from '@/components/TimeZoneSelector'
-import { myQuery } from '@/api/dataIntegration'
+import { myQuery } from '@/api/temp'
 import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
 import TableHeaderCell from '@/components/TableHeaderCell'
@@ -519,7 +519,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['clickedCells']),
+    ...mapGetters(['clickedCells', 'savedTableFilterValuesMap']),
     fasterFilteredTableData () {
       const [key, value] = this.selectedFilter
       if (!key) {
@@ -652,7 +652,7 @@ export default {
       }
       const { flightNO, flightDate } = this.queryData
       const [departureAirport, landingAirport] = val.split('-')
-      this.queryAll({ flightNO, flightDate, departureAirport, arriveAirport: landingAirport })
+      this.queryAll([flightNO, flightDate, departureAirport, landingAirport])
     },
     selectedFilter (val) {
       const { path, query } = this.$route
@@ -665,12 +665,21 @@ export default {
         path,
         query: newQuery
       })
+    },
+    filterValues: {
+      handler (val) {
+        this.$store.dispatch('savedSettings/saveTableFilterValues', {
+          filterValues: val,
+          tableName: 'flightBaggage'
+        })
+      },
+      deep: true
     }
   },
   created () {
     const { flightNO, flightDate, departureAirport, landingAirport } = this.$route.query
     if (flightNO && flightDate) {
-      this.queryAirline({ flightNO, flightDate })
+      this.queryAirline([flightNO, flightDate])
       this.queryData = {
         flightNO,
         flightDate,
@@ -680,10 +689,11 @@ export default {
     } else {
       this.$router.push('/')
     }
+    const filterValues = this.savedTableFilterValuesMap[this.$route.name + '/flightBaggage']
     Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
       if (filterable) {
         this.$set(this.flightBaggageTableFilters, prop, [])
-        this.$set(this.filterValues, prop, [])
+        this.$set(this.filterValues, prop, filterValues?.[prop] ?? [])
       }
       if (sortable) {
         this.$set(this.tableDataSortRules, prop, '')
@@ -814,7 +824,7 @@ export default {
           'inFlightNO',
           'transferFlightNO',
           // 'transferNumber',
-          'PassengerNameUpcase',
+          // 'PassengerNameUpcase',
           'BagSN',
           'U_Device_ID',
           'fileNumber'
@@ -845,7 +855,7 @@ export default {
           'inFlightNO',
           'transferFlightNO',
           // 'transferNumber',
-          'PassengerNameUpcase',
+          // 'PassengerNameUpcase',
           'BagSN',
           'U_Device_ID',
           'fileNumber'
@@ -924,14 +934,14 @@ export default {
           //     }
           //   })
           //   break
-          case 'PassengerNameUpcase':
-            this.$store.dispatch('app/setPassengerQueryParams', {
-              flightNO: this.queryData.flightNO,
-              flightDate: this.queryData.flightDate,
-              passengerName: row.PassengerNameUpcase
-            })
-            this.$store.dispatch('app/togglePassengerDialogFlag', true)
-            break
+          // case 'PassengerNameUpcase':
+          //   this.$store.dispatch('app/setPassengerQueryParams', {
+          //     flightNO: this.queryData.flightNO,
+          //     flightDate: this.queryData.flightDate,
+          //     passengerName: row.PassengerNameUpcase
+          //   })
+          //   this.$store.dispatch('app/togglePassengerDialogFlag', true)
+          //   break
           case 'BagSN':
             this.$router.push({
               path: `${this.$route.path.split('/').slice(0, -1).join('/')}/baggageView`,
@@ -1021,13 +1031,13 @@ export default {
       throttledExportToExcel(table, tableName, fileName)
     },
     queryflightInfo (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.flightInfo, dataContent })
+      return myQuery(SERVICE_ID.flightInfo, ...dataContent)
     },
     queryContainer (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.flightContainer, dataContent })
+      return myQuery(SERVICE_ID.flightContainer, ...dataContent)
     },
     queryBaggageByFlightNO (dataContent) {
-      return myQuery({ serviceId: DATACONTENT_ID.flightBaggage, dataContent })
+      return myQuery(SERVICE_ID.flightBaggage, ...dataContent)
     },
     async queryAirline (dataContent) {
       try {
@@ -1035,7 +1045,7 @@ export default {
         this.flightInfo = {}
         this.containerTableData = []
         this.flightBaggageTableData = []
-        const listValues = await myQuery({ serviceId: DATACONTENT_ID.flightAirline, dataContent })
+        const listValues = await myQuery(SERVICE_ID.flightAirline, ...dataContent)
         this.airlineList = listValues.map(({ departureAirport, landingAirport, departureBuild, landingBuild }) => ({
           label: `${departureAirport}${departureBuild ? `(${departureBuild})` : ''}-${landingAirport}${landingBuild ? `(${landingBuild})` : ''
             }`,
@@ -1085,7 +1095,7 @@ export default {
     },
     async getWarningData () {
       try {
-        const listValues = await myQuery({ serviceId: DATACONTENT_ID.departureWarningId, dataContent: {} })
+        const listValues = await myQuery(SERVICE_ID.departureWarningId)
         this.warningRules = listValues
       } catch (error) {
         this.$message.error('失败')

src/views/baggageManagement/mixins/form.js

@@ -114,7 +114,6 @@ export default {
   watch: {
     'formData.flightDate': {
       handler (val) {
-
         if (val === null) {
           this.formData.flightDate = ['', '']
         }
@@ -247,10 +246,10 @@ export default {
           if (az.test(this.formData.search)) {
             // 纯字母则为旅客姓名
             queryData['passengerName'] = this.formData.search
-          } else if (azNum.test(this.formData.search) && top2.test(this.formData.search)&&this.formData.search.length <8) {
+          } else if (azNum.test(this.formData.search) && top2.test(this.formData.search) && this.formData.search.length < 8) {
             // 字母加数字且前两位为字母则为航班号
             queryData['flightNO'] = 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))) {
+          } else if ((num.test(this.formData.search) && this.formData.search.length === 10) || ((bagNo.test(this.formData.search) && this.formData.search.length > 7))) {
             // 纯数字且位数等于10则为行李牌号
             queryData['baggageNO'] = this.formData.search
           } else {

src/views/baggageManagement/mixins/tableCols.js

@@ -7,11 +7,14 @@
  * have a nice day!
  */
 
+import { mapGetters } from 'vuex'
+
 export default {
   data() {
     return {
       // 筛选后表头
       tableColsCopy: [],
+      tableColumnKeys: [],
       // 列设置弹框选中
       checkedKeys: [],
       checkedKeysTemp: [],
@@ -30,6 +33,7 @@ export default {
     })
   },
   computed: {
+    ...mapGetters(['savedHiddenColumnKeysMap']),
     colsCheckClass() {
       return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
     }
@@ -37,18 +41,30 @@ export default {
   methods: {
     // 列设置-初始化
     initTableCols() {
+      const hiddenColumnKeys = this.savedHiddenColumnKeysMap[this.$route.name]
       const that = this
+      let i = 0
       function setTableCols(cols) {
+        let anyChecked = false
         for (const col of cols) {
-          col.index = that.checkedKeys.length
-          that.checkedKeys.push(that.checkedKeys.length)
+          let childrenChecked = false
+          col.index = i++
+          that.tableColumnKeys.push(col.index)
           if (col.children?.length) {
-            setTableCols(col.children)
+            childrenChecked = setTableCols(col.children)
+          }
+          if (childrenChecked) {
+            that.halfCheckedKeys.push(col.index)
+            anyChecked = true
+          } else if (!hiddenColumnKeys || !hiddenColumnKeys.includes(col.index)) {
+            that.checkedKeys.push(col.index)
+            anyChecked = true
           }
         }
+        return anyChecked
       }
       setTableCols(this.tableCols)
-      this.tableColsCopy = this._.cloneDeep(this.tableCols)
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
       this.checkedKeysTemp = [...this.checkedKeys]
     },
     // 列设置-确定
@@ -66,6 +82,12 @@ export default {
       this.dialogFlag = false
       this.checkedKeys = [...this.checkedKeysTemp]
       this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      const hiddenColumnKeys = this.tableColumnKeys.filter(
+        key => !this.checkedKeys.includes(key) && !this.halfCheckedKeys.includes(key)
+      )
+      this.$store.dispatch('savedSettings/saveHiddenColumnKeys', {
+        keys: hiddenColumnKeys
+      })
       setTimeout(() => {
         if (!this[tableDataName].length) {
           this[tableDataName] = tableDataTemp

src/views/baggageManagement/mixins/terminal.js

@@ -40,7 +40,7 @@ export default {
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   computed: {
-    ...mapGetters(['clickedCells']),
+    ...mapGetters(['clickedCells', 'savedTableFilterValuesMap']),
     dealedTableData() {
       const filtered = this.tableData.filter(item => {
         let flag = true
@@ -88,6 +88,14 @@ export default {
         })
       },
       deep: true
+    },
+    filterValues: {
+      handler(val) {
+        this.$store.dispatch('savedSettings/saveTableFilterValues', {
+          filterValues: val
+        })
+      },
+      deep: true
     }
   },
   methods: {
@@ -101,6 +109,7 @@ export default {
     },
     // 设置筛选和排序
     setFilterAndSort(tableCols) {
+      const filterValues = this.savedTableFilterValuesMap[this.$route.name]
       const self = this
       Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => {
         if (children) {
@@ -108,7 +117,7 @@ export default {
         } else {
           if (filterable) {
             self.$set(self.tableDataFilters, prop, [])
-            self.$set(self.filterValues, prop, [])
+            self.$set(self.filterValues, prop, filterValues?.[prop] ?? [])
           }
           if (sortable) {
             self.$set(self.tableDataSortRules, prop, '')

src/views/baggageManagementTemp/components/flight/index.vue

@@ -16,34 +16,17 @@
         <div class="part1-wrapper">
           <div class="airline">
             {{ queryData.flightNO }}
-            <el-select
-              v-model="selectedAirline"
-              size="mini"
-              class="airline-select"
-            >
-              <el-option
-                v-for="airline in airlineList"
-                :key="airline.value"
-                :value="airline.value"
-                :label="airline.label"
-              />
+            <el-select v-model="selectedAirline" size="mini" class="airline-select">
+              <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
             </el-select>
           </div>
           <div class="part1_info">
             <div class="part1_info_box">
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>起飞机场简称：</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>{{ flightInfo.departureName }}</span>
                 </el-col>
               </el-row>
@@ -64,34 +47,18 @@
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span> 日期：{{ flightInfo.planDepartureTime && flightInfo.planDepartureTime.split('T')[0] }} </span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span> 时间：{{ flightInfo.planDepartureTime && flightInfo.planDepartureTime.split('T')[1] }} </span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>登机口：{{ flightInfo.bordingGate }}</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>停机位：{{ flightInfo.standForDepartrue }}</span>
                 </el-col>
               </el-row>
@@ -107,67 +74,35 @@
                 </el-col>
               </el-row> -->
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>航班状态：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <!-- <span>{{ flightInfo.flightStatus === null ? "正常" : flightInfo.flightStatus }}</span> -->
                   <span>{{ flightInfo.flightStateCN }}</span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>机号：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <span>{{ flightInfo.craftNo }}</span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>托运旅客数：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <span>{{ flightInfo.count1 }}</span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>终点行李数：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <span>{{ flightInfo.count2 }}</span>
                 </el-col>
               </el-row>
@@ -191,18 +126,10 @@
             <i class="part1_info_arrow_right el-icon-caret-right" />
             <div class="part1_info_box">
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>降落机场简称：</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>{{ flightInfo.landingName }}</span>
                 </el-col>
               </el-row>
@@ -223,50 +150,26 @@
                 </el-col>
               </el-row> -->
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span> 日期：{{ flightInfo.expectLandingTime && flightInfo.expectLandingTime.split('T')[0] }} </span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span> 时间：{{ flightInfo.expectLandingTime && flightInfo.expectLandingTime.split('T')[1] }} </span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>提取转盘：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <span>{{ flightInfo.carousel }}</span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="16"
-                  :sm="16"
-                  :xl="12"
-                >
+                <el-col :xs="16" :sm="16" :xl="12">
                   <span>停机位：</span>
                 </el-col>
-                <el-col
-                  :xs="8"
-                  :sm="8"
-                  :xl="12"
-                >
+                <el-col :xs="8" :sm="8" :xl="12">
                   <span>{{ flightInfo.standForLanding }}</span>
                 </el-col>
               </el-row>
@@ -277,37 +180,10 @@
       <div class="part2">
         <div class="title">
           <span class="manageTitle">航班容器列表</span>
-          <img
-            class="btn-square btn-shadow"
-            src="@/assets/baggage/ic_export.png"
-            title="导出"
-            @click="exportHandler('containerTable', '航班容器列表')"
-          />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('containerTable', '航班容器列表')" />
         </div>
-        <el-table
-          ref="containerTable"
-          :data="containerTableData"
-          border
-          style="width: 100%"
-          height="290px"
-          stripe
-          size="mini"
-          show-summary
-          :summary-method="summaryMethod"
-          :header-cell-style="{ color: '#101116' }"
-          :row-class-name="rowClass"
-          :cell-class-name="cellClass"
-          @cell-click="cellClickHandler"
-        >
-          <el-table-column
-            v-for="col in containerTableColumn"
-            :key="col.id"
-            :prop="col.prop"
-            :label="col.label"
-            :width="col.width"
-            :align="col.align || 'center'"
-            :show-overflow-tooltip="true"
-          />
+        <el-table ref="containerTable" :data="containerTableData" border style="width: 100%" height="290px" stripe size="mini" show-summary :summary-method="summaryMethod" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" :cell-class-name="cellClass" @cell-click="cellClickHandler">
+          <el-table-column v-for="col in containerTableColumn" :key="col.id" :prop="col.prop" :label="col.label" :width="col.width" :align="col.align || 'center'" :show-overflow-tooltip="true" />
         </el-table>
       </div>
       <!-- <div
@@ -368,24 +244,11 @@
           />
         </el-table>
       </div> -->
-      <div
-        class="drag-mask"
-        :class="{ active: dragActive }"
-      />
-      <div
-        class="part4"
-        :style="draggableStyle"
-      >
-        <div
-          ref="dragBox"
-          class="drag-box"
-          :class="{ active: dragActive }"
-        >
+      <div class="drag-mask" :class="{ active: dragActive }" />
+      <div class="part4" :style="draggableStyle">
+        <div ref="dragBox" class="drag-box" :class="{ active: dragActive }">
           <i class="drag-icon el-icon-d-caret" />
-          <div
-            class="drag-line"
-            :style="dragLineStyle"
-          />
+          <div class="drag-line" :style="dragLineStyle" />
         </div>
         <div class="title">
           <span class="manageTitle">航班行李列表</span>
@@ -404,104 +267,34 @@
                 :label="option.label"
               />
             </el-select> -->
-            <el-cascader
-              v-model="selectedFilter"
-              :options="filterSelectOptions"
-              :props="{ expandTrigger: 'hover', checkStrictly: true }"
-              size="mini"
-              placeholder="无"
-              clearable
-            />
+            <el-cascader v-model="selectedFilter" :options="filterSelectOptions" :props="{ expandTrigger: 'hover', checkStrictly: true }" size="mini" placeholder="无" clearable />
           </div>
           <TimeZoneSelector />
-          <img
-            class="btn-square btn-shadow"
-            src="@/assets/baggage/ic_export.png"
-            title="导出"
-            @click="exportHandler('flightBaggageTable', '航班行李列表')"
-          />
-          <img
-            class="btn-square btn-shadow"
-            src="@/assets/baggage/ic_setting.png"
-            title="列设置"
-            @click="show"
-          />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('flightBaggageTable', '航班行李列表')" />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
         </div>
-        <el-table
-          ref="flightBaggageTable"
-          :data="dealedTableData"
-          border
-          style="width: 100%"
-          height="calc(100% - 64px)"
-          stripe
-          size="mini"
-          show-summary
-          :summary-method="summaryRow(dealedTableData.length)"
-          :header-cell-class-name="headerCellClass"
-          :header-cell-style="{ color: '#101116' }"
-          :row-class-name="rowClass"
-          :cell-class-name="cellClass"
-          @cell-click="cellClickHandler"
-        >
-          <el-table-column
-            v-for="col in tableColsCopy"
-            :key="col.index"
-            :prop="col.prop"
-            :label="col.label"
-            :align="col.align || 'center'"
-            :width="col.width"
-            :fixed="col.fixed"
-            :formatter="tableFormat"
-          >
+        <el-table ref="flightBaggageTable" :data="dealedTableData" border style="width: 100%" height="calc(100% - 64px)" stripe size="mini" show-summary :summary-method="summaryRow(dealedTableData.length)" :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" :cell-class-name="cellClass" @cell-click="cellClickHandler">
+          <el-table-column v-for="col in tableColsCopy" :key="col.index" :prop="col.prop" :label="col.label" :align="col.align || 'center'" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
             <template #header>
-              <TableHeaderCell
-                :label="col.label"
-                :filter-options="flightBaggageTableFilters[col.prop]"
-                :filter-values.sync="filterValues[col.prop]"
-                :sortable="col.sortable"
-                :sort-rule.sync="tableDataSortRules[col.prop]"
-              />
+              <TableHeaderCell :label="col.label" :filter-options="flightBaggageTableFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
             </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
     <!--列设置-->
-    <Dialog
-      :flag="dialogFlag"
-      class="dialog-check-group"
-    >
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree
-            ref="columnSetTree"
-            :data="tableCols"
-            :class="colsCheckClass"
-            show-checkbox
-            node-key="index"
-            :default-expand-all="true"
-            :props="{
+          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
               label: 'label',
               children: 'children'
-            }"
-            :default-checked-keys="checkedKeysTemp"
-            @check="handleCheck"
-          />
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
         </div>
         <div class="foot right t30">
-          <el-button
-            size="medium"
-            class="r24"
-            type="primary"
-            @click="onCheck('flightBaggageTableData')"
-            >确定</el-button
-          >
-          <el-button
-            size="medium"
-            @click="hide"
-            >取消</el-button
-          >
+          <el-button size="medium" class="r24" type="primary" @click="onCheck('flightBaggageTableData')">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -527,7 +320,7 @@ export default {
     TableHeaderCell
   },
   mixins: [tableColsMixin, timeZoneMixin],
-  data() {
+  data () {
     return {
       loading: false,
       airlineList: [],
@@ -727,13 +520,13 @@ export default {
   },
   computed: {
     ...mapGetters(['clickedCells', 'savedTableFilterValuesMap']),
-    fasterFilteredTableData() {
+    fasterFilteredTableData () {
       const [key, value] = this.selectedFilter
       if (!key) {
         return this.flightBaggageTableData
       }
       const that = this
-      function isWarning(row) {
+      function isWarning (row) {
         if (row['STATUS'] === 'I' || row['loadTime'] || row['isDEL'] === 'DEL') {
           return 0
         }
@@ -806,7 +599,7 @@ export default {
         }
       })
     },
-    dealedTableData() {
+    dealedTableData () {
       const filtered = this.fasterFilteredTableData.filter(item => {
         let flag = true
         Object.entries(this.filterValues).forEach(([key, arr]) => {
@@ -829,19 +622,19 @@ export default {
       )
       return this._.orderBy(filtered, sortRules[0], sortRules[1])
     },
-    draggableStyle() {
+    draggableStyle () {
       return {
         height: `calc(100vh - 80px - 64px - 16px - 290px + ${this.dragHeight}px)`
       }
     },
-    dragLineStyle() {
+    dragLineStyle () {
       return {
         transform: `translateY(${this.dragHeight - this.dragY}px)`
       }
     }
   },
   watch: {
-    loading(val) {
+    loading (val) {
       if (val) {
         this.fullscreenLoading = this.$loading({
           lock: true,
@@ -853,7 +646,7 @@ export default {
         this.fullscreenLoading?.close()
       }
     },
-    selectedAirline(val) {
+    selectedAirline (val) {
       if (!val) {
         return
       }
@@ -861,7 +654,7 @@ export default {
       const [departureAirport, landingAirport] = val.split('-')
       this.queryAll([flightNO, flightDate, departureAirport, landingAirport])
     },
-    selectedFilter(val) {
+    selectedFilter (val) {
       const { path, query } = this.$route
       const newQuery = { ...query }
       delete newQuery.fastFilter
@@ -874,7 +667,7 @@ export default {
       })
     },
     filterValues: {
-      handler(val) {
+      handler (val) {
         this.$store.dispatch('savedSettings/saveTableFilterValues', {
           filterValues: val,
           tableName: 'flightBaggage'
@@ -883,7 +676,7 @@ export default {
       deep: true
     }
   },
-  created() {
+  created () {
     const { flightNO, flightDate, departureAirport, landingAirport } = this.$route.query
     if (flightNO && flightDate) {
       this.queryAirline([flightNO, flightDate])
@@ -907,13 +700,13 @@ export default {
       }
     })
   },
-  mounted() {
+  mounted () {
     this.setDragBox()
   },
-  updated() {
+  updated () {
     this.resizeHandler()
   },
-  activated() {
+  activated () {
     const { fastFilter } = this.$route.query
     this.selectedFilter = fastFilter ? fastFilter.split(',') : []
     this.getWarningData()
@@ -921,26 +714,26 @@ export default {
     this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
     window.addEventListener('resize', this.debouncedResizeHandler)
   },
-  deactivated() {
+  deactivated () {
     this.fullscreenLoading?.close()
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   methods: {
-    setDragBox() {
+    setDragBox () {
       const dragBox = this.$refs['dragBox']
       const offsetTop = dragBox.offsetParent.offsetTop
       const that = this
       let mousedownY
       let dragY
       let dragHeight
-      function mousemoveHandler(e) {
+      function mousemoveHandler (e) {
         e.stopPropagation()
         e.preventDefault()
         dragY = dragHeight + mousedownY - e.screenY
         dragY = dragY < 0 ? 0 : dragY > offsetTop ? offsetTop : dragY
         that.dragY = dragY
       }
-      function mouseupHandler(e) {
+      function mouseupHandler (e) {
         e.stopPropagation()
         e.preventDefault()
         that.dragHeight = that.dragY
@@ -958,13 +751,13 @@ export default {
         document.addEventListener('mouseup', mouseupHandler)
       })
     },
-    resizeHandler() {
+    resizeHandler () {
       this.$refs['containerTable']?.doLayout()
       // this.$refs['transferInBaggageTable']?.doLayout()
       // this.$refs['transferOutBaggageTable']?.doLayout()
       this.$refs['flightBaggageTable']?.doLayout()
     },
-    setfastFilterValues() {
+    setfastFilterValues () {
       const inFlightNOList = new Set()
       const transferFlightNOList = new Set()
       this.flightBaggageTableData.forEach(item => {
@@ -992,7 +785,7 @@ export default {
         }
       )
     },
-    rowClass({ row, rowIndex }) {
+    rowClass ({ row, rowIndex }) {
       const classes = []
       if (
         this.warningContainers.includes(row['containerNumber']) ||
@@ -1006,7 +799,7 @@ export default {
       return classes.join(' ')
     },
     // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       const rule = this.tableDataSortRules[column.property]
       if (rule) {
@@ -1014,7 +807,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    cellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
         ['checkInTime', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(
@@ -1053,7 +846,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       if (
         [
           'containerNumber',
@@ -1191,7 +984,7 @@ export default {
       }
     },
     // 合计行
-    summaryMethod({ columns, data }) {
+    summaryMethod ({ columns, data }) {
       const sums = []
       if (columns.length > 0) {
         columns.forEach((column, index) => {
@@ -1227,26 +1020,26 @@ export default {
       return sums
     },
     // 统计行数
-    summaryRow(num) {
+    summaryRow (num) {
       return function () {
         return ['合计', `共${num}件`]
       }
     },
-    exportHandler(refName, tableName) {
+    exportHandler (refName, tableName) {
       const table = this.$refs[refName].$el.cloneNode(true)
       const fileName = `${tableName}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
       throttledExportToExcel(table, tableName, fileName)
     },
-    queryflightInfo(dataContent) {
+    queryflightInfo (dataContent) {
       return myQuery(SERVICE_ID.flightInfo, ...dataContent)
     },
-    queryContainer(dataContent) {
+    queryContainer (dataContent) {
       return myQuery(SERVICE_ID.flightContainer, ...dataContent)
     },
-    queryBaggageByFlightNO(dataContent) {
+    queryBaggageByFlightNO (dataContent) {
       return myQuery(SERVICE_ID.flightBaggage, ...dataContent)
     },
-    async queryAirline(dataContent) {
+    async queryAirline (dataContent) {
       try {
         this.selectedAirline = ''
         this.flightInfo = {}
@@ -1254,9 +1047,8 @@ export default {
         this.flightBaggageTableData = []
         const listValues = await myQuery(SERVICE_ID.flightAirline, ...dataContent)
         this.airlineList = listValues.map(({ departureAirport, landingAirport, departureBuild, landingBuild }) => ({
-          label: `${departureAirport}${departureBuild ? `(${departureBuild})` : ''}-${landingAirport}${
-            landingBuild ? `(${landingBuild})` : ''
-          }`,
+          label: `${departureAirport}${departureBuild ? `(${departureBuild})` : ''}-${landingAirport}${landingBuild ? `(${landingBuild})` : ''
+            }`,
           value: `${departureAirport}-${landingAirport}`
         }))
         if (this.airlineList.length) {
@@ -1272,7 +1064,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryAll(dataContent) {
+    async queryAll (dataContent) {
       this.loading = true
       this.flightInfo = {}
       try {
@@ -1301,7 +1093,7 @@ export default {
       }
       this.loading = false
     },
-    async getWarningData() {
+    async getWarningData () {
       try {
         const listValues = await myQuery(SERVICE_ID.departureWarningId)
         this.warningRules = listValues
@@ -1495,7 +1287,7 @@ export default {
           align-items: center;
           .label,
           .el-input__inner {
-            font-family: Helvetica, 'Microsoft YaHei';
+            font-family: Helvetica, "Microsoft YaHei";
           }
           .label {
             padding-right: 14px;