添加容器视图

src/router/routes/routes-file-five.js

@@ -57,11 +57,17 @@ const departureRoutes = {
                   component: () => import("@/views/baggageManagement/components/departure/baggage"),
                   meta: { title: "行李视图", keepAlive: true },
                 },
+                {
+                  path: "/departure/newContainerView",
+                  name: "DepartureNewContainerView",
+                  component: () => import("@/views/baggageManagement/components/departure/newContainer"),
+                  meta: { title: "容器视图", keepAlive: true },
+                },
                 {
                   path: "/departure/containerView",
                   name: "DepartureContainerView",
                   component: () => import("@/views/baggageManagement/components/departure/container"),
-                  meta: { title: "容器视图", keepAlive: true },
+                  meta: { title: "历史记录", keepAlive: true },
                 },
               ],
             },

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

@@ -0,0 +1,14 @@
+<template>
+  <ContainerView />
+</template>
+
+<script>
+import ContainerView from '../newContainer'
+
+export default {
+  name: 'NewDepartureContainerView',
+  components: {
+    ContainerView
+  }
+}
+</script>

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

@@ -14,102 +14,53 @@
         </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, index) in airlineList"
-                :key="index"
-                :value="airline.value"
-                :label="airline.label"
-              />
+            <el-select v-model="selectedAirline" size="mini" class="airline-select">
+              <el-option v-for="(airline, index) in airlineList" :key="index" :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>
               <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.planDepartureApt }}</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.departureBuild }}</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>分拣转盘：{{ flightInfo.sortCarousel }}</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.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>
@@ -125,68 +76,36 @@
                 </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>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>托运旅客数：</span>
                   <span>{{ flightInfo.count1 }}</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>终点行李数：</span>
                   <span>{{ flightInfo.count2 }}</span>
                 </el-col>
               </el-row>
               <el-row>
-                <el-col
-                  :xs="18"
-                  :sm="18"
-                  :xl="12"
-                >
+                <el-col :xs="18" :sm="18" :xl="12">
                   <span>中转进行李数：</span>
                 </el-col>
-                <el-col
-                  :xs="6"
-                  :sm="6"
-                  :xl="12"
-                >
+                <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"
-                >
+                <el-col :xs="18" :sm="18" :xl="12">
                   <span>中转出行李数：</span>
                 </el-col>
-                <el-col
-                  :xs="6"
-                  :sm="6"
-                  :xl="12"
-                >
+                <el-col :xs="6" :sm="6" :xl="12">
                   <span>{{ flightInfo.count3 }}</span>
                 </el-col>
               </el-row>
@@ -194,34 +113,18 @@
             <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>
               <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.planLandingApt }}</span>
                 </el-col>
               </el-row>
@@ -234,38 +137,22 @@
                 </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="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>提取转盘：{{ flightInfo.carousel }}</span>
                 </el-col>
-                <el-col
-                  :xs="24"
-                  :sm="24"
-                  :xl="12"
-                >
+                <el-col :xs="24" :sm="24" :xl="12">
                   <span>停机位：{{ flightInfo.standForLanding }}</span>
                 </el-col>
               </el-row>
@@ -276,36 +163,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="344px"
-          stripe
-          size="mini"
-          show-summary
-          :summary-method="summaryMethod"
-          :header-cell-style="{ color: '#101116' }"
-          :row-class-name="rowClass"
-          @row-click="containerClick"
-        >
-          <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="344px" stripe size="mini" show-summary :summary-method="summaryMethod" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" @row-click="containerClick">
+          <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
@@ -366,113 +227,40 @@
           />
         </el-table>
       </div> -->
-      <div
-        class="drag-mask"
-        :class="{ active: dragActive }"
-      />
-      <div
-        class="part4"
-        :style="draggableStyle"
-      >
-        <div
-          v-drag-height
-          class="drag-box"
-          :class="{ active: dragActive }"
-        >
+      <div class="drag-mask" :class="{ active: dragActive }" />
+      <div class="part4" :style="draggableStyle">
+        <div v-drag-height 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>
           <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
-            :data="tableCols"
-            :class="colsCheckClass"
-            show-checkbox
-            node-key="index"
-            :default-expand-all="true"
-            :props="{
+          <el-tree :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>
@@ -493,20 +281,20 @@ export default {
   name: 'FlightView',
   directives: {
     dragHeight: {
-      inserted(el, binding, vnode) {
+      inserted (el, binding, vnode) {
         const that = vnode.context
         let mousedownY
         let dragY
         let dragHeight
         const offsetTop = el.offsetParent.offsetTop
-        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
@@ -532,7 +320,7 @@ export default {
     TableHeaderCell
   },
   mixins: [tableColsMixin, timeZoneMixin],
-  data() {
+  data () {
     return {
       fullscreenLoading: false,
       airlineList: [],
@@ -620,7 +408,7 @@ export default {
   },
   computed: {
     ...mapGetters(['clickedCells']),
-    dealedTableData() {
+    dealedTableData () {
       const filtered = this.flightBaggageTableData.filter(item => {
         let flag = true
         Object.entries(this.filterValues).forEach(([key, arr]) => {
@@ -643,12 +431,12 @@ export default {
       )
       return this._.orderBy(filtered, sortRules[0], sortRules[1])
     },
-    draggableStyle() {
+    draggableStyle () {
       return {
         height: `calc(100vh - 80px - 64px - 16px - 344px + ${this.dragHeight}px)`
       }
     },
-    dragLineStyle() {
+    dragLineStyle () {
       return {
         transform: `translateY(${this.dragHeight - this.dragY}px)`
       }
@@ -656,7 +444,7 @@ export default {
   },
   watch: {
     $route: {
-      handler({ path, query }) {
+      handler ({ path, query }) {
         if (path.includes('flightView')) {
           const { flightNO, flightDate } = query
           if (flightNO && flightDate) {
@@ -673,7 +461,7 @@ export default {
       deep: true,
       immediate: true
     },
-    fullscreenLoading(val) {
+    fullscreenLoading (val) {
       if (val) {
         this.loading = this.$loading({
           lock: true,
@@ -685,13 +473,13 @@ export default {
         this.loading?.close()
       }
     },
-    selectedAirline(val) {
+    selectedAirline (val) {
       const { flightNO, flightDate } = this.queryData
       const [departureAirport, landingAirport] = val.split('-')
       this.queryAll([flightNO, flightDate, departureAirport, landingAirport])
     }
   },
-  created() {
+  created () {
     Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
       if (filterable) {
         this.$set(this.flightBaggageTableFilters, prop, [])
@@ -702,7 +490,7 @@ export default {
       }
     })
   },
-  activated() {
+  activated () {
     this.$nextTick(() => {
       this.$refs['containerTable']?.doLayout()
       // this.$refs['transferInBaggageTable']?.doLayout()
@@ -710,7 +498,7 @@ export default {
       this.$refs['flightBaggageTable']?.doLayout()
     })
   },
-  updated() {
+  updated () {
     this.$nextTick(() => {
       this.$refs['containerTable']?.doLayout()
       // this.$refs['transferInBaggageTable']?.doLayout()
@@ -718,14 +506,14 @@ export default {
       this.$refs['flightBaggageTable']?.doLayout()
     })
   },
-  deactivated() {
+  deactivated () {
     this.loading?.close()
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.loading?.close()
   },
   methods: {
-    rowClass({ row, rowIndex }) {
+    rowClass ({ row, rowIndex }) {
       const classes = []
       if (this.warningContainers.includes(row['containerNumber']) || row['latestStatus'] === '待翻减') {
         classes.push('row-warning')
@@ -736,7 +524,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) {
@@ -744,7 +532,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(
@@ -781,7 +569,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       if (
         [
           'preFlightNO',
@@ -865,11 +653,19 @@ export default {
             break
           case 'U_Device_ID':
             this.$router.push({
-              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
+              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/newContainerView`,
               query: {
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate,
                 containerID: row.U_Device_ID
               }
             })
+            // this.$router.push({
+            //   path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
+            //   query: {
+            //     containerID: row.U_Device_ID
+            //   }
+            // })
             break
           default:
             break
@@ -877,7 +673,7 @@ export default {
       }
     },
     // 合计行
-    summaryMethod({ columns, data }) {
+    summaryMethod ({ columns, data }) {
       const sums = []
       if (columns.length > 0) {
         columns.forEach((column, index) => {
@@ -909,12 +705,12 @@ export default {
       return sums
     },
     // 统计行数
-    summaryRow(num) {
+    summaryRow (num) {
       return function () {
         return ['合计', `共${num}件`]
       }
     },
-    containerClick(row) {
+    containerClick (row) {
       if (row.containerNumber === 'FBULK') {
         this.$router.push({
           path: '/advance',
@@ -937,21 +733,21 @@ export default {
         })
       }
     },
-    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(DATACONTENT_ID.flightInfo, ...dataContent)
     },
-    queryContainer(dataContent) {
+    queryContainer (dataContent) {
       return myQuery(DATACONTENT_ID.flightContainer, ...dataContent)
     },
-    queryBaggageByFlightNO(dataContent) {
+    queryBaggageByFlightNO (dataContent) {
       return myQuery(DATACONTENT_ID.flightBaggage, ...dataContent)
     },
-    async queryAirline(dataContent) {
+    async queryAirline (dataContent) {
       try {
         const listValues = await myQuery(DATACONTENT_ID.flightAirline, ...dataContent)
         this.airlineList = listValues.map(({ departureAirport, landingAirport, departureBuild, landingBuild }) => ({
@@ -965,7 +761,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryAll(dataContent) {
+    async queryAll (dataContent) {
       this.fullscreenLoading = true
       this.flightInfo = {}
       try {

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

@@ -0,0 +1,615 @@
+<template>
+  <div class="new-container-view">
+    <div class="list">
+      <div class="title flex">
+        <div class="manageTitle">航班基本信息</div>
+        <el-button @click="toContainer" type="primary" size="small">历史记录</el-button>
+      </div>
+      <div class="part1">
+        <el-row :gutter="10">
+          <el-col :span="4">
+            <div class="grid-content bg-purple">容器编号:111</div>
+          </el-col>
+          <el-col :span="4">
+            <div class="grid-content bg-purple">容器类型:2222</div>
+          </el-col>
+          <el-col :span="4">
+            <div class="grid-content bg-purple">航班号:CA1111</div>
+          </el-col>
+          <el-col :span="5">
+            <div class="grid-content bg-purple">航班日期:2022-9-30 10:55:26</div>
+          </el-col>
+          <el-col :span="4">
+            <div class="grid-content bg-purple">舱位:11</div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="list">
+      <div class="title">
+        <div class="manageTitle">航班行李列表</div>
+      </div>
+      <div class="part2">
+        <el-table ref="flightBaggageTable" :data="dealedTableData" border style="width: 100%" height="calc(77vh - 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>
+  </div>
+</template>
+
+<script>
+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: 'NewContainerView',
+  directives: {
+    dragHeight: {
+      inserted (el, binding, vnode) {
+        const that = vnode.context
+        let mousedownY
+        let dragY
+        let dragHeight
+        const offsetTop = el.offsetParent.offsetTop
+        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)
+        }
+        el.addEventListener('mousedown', e => {
+          that.dragActive = true
+          mousedownY = e.screenY
+          dragHeight = that.dragHeight
+          that.dragY = dragHeight
+          document.addEventListener('mousemove', mousemoveHandler)
+          document.addEventListener('mouseup', mouseupHandler)
+        })
+      }
+    }
+  },
+  components: {
+    TimeZoneSelector,
+    TableHeaderCell
+  },
+  mixins: [tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      fullscreenLoading: false,
+      airlineList: [],
+      selectedAirline: '',
+      queryData: {},
+      flightInfo: {},
+      keyWords: '',
+      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: 'index' },
+        {
+          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: '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 },
+      ],
+      containerTableData: [], // 容器统计
+      transferInBaggageTableData: [], // 中转进
+      transferOutBaggageTableData: [], // 中转出
+      flightBaggageTableData: [], // 行李列表
+      flightBaggageTableFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      warningContainers: [],
+      dragHeight: 0,
+      dragY: 0,
+      dragActive: false,
+      containerID: null
+    }
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    dealedTableData () {
+      const filtered = this.flightBaggageTableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(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 - 344px + ${this.dragHeight}px)`
+      }
+    },
+    dragLineStyle () {
+      return {
+        transform: `translateY(${this.dragHeight - this.dragY}px)`
+      }
+    }
+  },
+  watch: {
+    $route: {
+      handler ({ path, query }) {
+        if (path.includes('newContainerView')) {
+          const { flightNO, flightDate, containerID } = query
+          this.containerID = containerID
+          if (flightNO && flightDate) {
+            const { flightNO: oldFlightNO, flightDate: oldFlightDate } = this.queryData
+            if (flightNO !== oldFlightNO || flightDate !== oldFlightDate) {
+              this.queryData = { flightNO, flightDate }
+              this.queryAirline([flightNO, flightDate])
+            }
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    fullscreenLoading (val) {
+      if (val) {
+        this.loading = this.$loading({
+          lock: true,
+          text: '加载中',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      } else {
+        this.loading?.close()
+      }
+    },
+    selectedAirline (val) {
+      const { flightNO, flightDate } = this.queryData
+      const [departureAirport, landingAirport] = val.split('-')
+      this.queryAll([flightNO, flightDate, departureAirport, landingAirport])
+    }
+  },
+  created () {
+    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, '')
+      }
+    })
+  },
+  activated () {
+    this.$nextTick(() => {
+      this.$refs['containerTable']?.doLayout()
+      // this.$refs['transferInBaggageTable']?.doLayout()
+      // this.$refs['transferOutBaggageTable']?.doLayout()
+      this.$refs['flightBaggageTable']?.doLayout()
+    })
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs['containerTable']?.doLayout()
+      // this.$refs['transferInBaggageTable']?.doLayout()
+      // this.$refs['transferOutBaggageTable']?.doLayout()
+      this.$refs['flightBaggageTable']?.doLayout()
+    })
+  },
+  deactivated () {
+    this.loading?.close()
+  },
+  beforeDestroy () {
+    this.loading?.close()
+  },
+  methods: {
+    rowClass ({ row, rowIndex }) {
+      const classes = []
+      if (this.warningContainers.includes(row['containerNumber']) || row['latestStatus'] === '待翻减') {
+        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 (
+        [
+          'preFlightNO',
+          'totalNumber',
+          'inFlightNO',
+          'transferFlightNO',
+          'transferNumber',
+          'PassengerNameUpcase',
+          'BagSN',
+          'U_Device_ID'
+        ].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 (
+        [
+          'preFlightNO',
+          'totalNumber',
+          'transferFlightNO',
+          'transferNumber',
+          'PassengerNameUpcase',
+          'BagSN',
+          'U_Device_ID'
+        ].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 'preFlightNO':
+            this.$router.push({
+              path: '/advance/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: '/advance/flightView',
+              query: {
+                flightNO: row.inFlightNO,
+                flightDate: row.inFlightDate
+              }
+            })
+            break
+          case 'transferFlightNO':
+            this.$router.push({
+              path: '/advance/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.$message.info('开发中')
+            break
+          case 'BagSN':
+            this.$router.push({
+              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
+              query: {
+                bagSN: row.BagSN,
+                flightNO: this.queryData.flightNO,
+                flightDate: this.queryData.flightDate
+              }
+            })
+            break
+          case 'U_Device_ID':
+            this.$router.push('/departure/newContainerView')
+            // this.$router.push({
+            //   path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
+            //   query: {
+            //     containerID: row.U_Device_ID
+            //   }
+            // })
+            break
+          default:
+            break
+        }
+      }
+    },
+    toContainer () {
+      this.$router.push({
+        path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
+        query: {
+          containerID: this.containerID
+        }
+      })
+    },
+    // 合计行
+    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}件`]
+      }
+    },
+    containerClick (row) {
+      if (row.containerNumber === 'FBULK') {
+        this.$router.push({
+          path: '/advance',
+          query: {
+            flightNO: this.queryData.flightNO,
+            startDate: this.queryData.flightDate,
+            endDate: this.queryData.flightDate,
+            loadType: 1
+          }
+        })
+      } else {
+        this.$router.push({
+          path: '/advance',
+          query: {
+            flightNO: this.queryData.flightNO,
+            startDate: this.queryData.flightDate,
+            endDate: this.queryData.flightDate,
+            U_Device_ID: row.containerNumber
+          }
+        })
+      }
+    },
+    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(DATACONTENT_ID.flightInfo, ...dataContent)
+    },
+    queryContainer (dataContent) {
+      return myQuery(DATACONTENT_ID.flightContainer, ...dataContent)
+    },
+    queryBaggageByFlightNO (dataContent) {
+      return myQuery(DATACONTENT_ID.flightBaggage, ...dataContent)
+    },
+    async queryAirline (dataContent) {
+      try {
+        const listValues = await myQuery(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) {
+          this.selectedAirline = this.airlineList[0].value
+        }
+      } catch (error) {
+        this.$message.error('失败')
+      }
+    },
+    async queryAll (dataContent) {
+      this.fullscreenLoading = 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.transferOutBaggageTableData = transferOutBaggageTableData.map(item => {
+        //   item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
+        //   return item
+        // })
+        // this.transferInBaggageTableData = transferInBaggageTableData.map(item => {
+        //   item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
+        //   return item
+        // })
+
+        this.warningContainers = []
+        this.flightBaggageTableData = flightBaggageTableData.map((item, index) => {
+          item['latestStatus'] === '待翻减' && this.warningContainers.push(item['U_Device_ID'])
+          // item['transitFlag'] = item['preFlightNO'] || item['inFlightNO'] ? '是' : '否'
+          return item
+        })
+        setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.fullscreenLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-container-view {
+  width: 100%;
+  height: calc(100vh - 81px);
+  overflow: hidden;
+  background: #dfe3ea;
+  padding: 0px 8px 16px 8px;
+  .list {
+    .title {
+      padding: 16px 0;
+    }
+    .part1 {
+      width: 100%;
+      background: #041741;
+      padding: 16px 30px;
+      color: #fff;
+    }
+    .part2 {
+      background-color: #fff;
+      ::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: red;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+