航站视图、高级查询适配小屏幕

src/styles/index.scss

@@ -581,3 +581,7 @@ li {
     border-radius: 8px;
   }
 }
+
+.el-table .el-table__body-wrapper::-webkit-scrollbar {
+  height: 8px;
+}

src/views/advancedQuery/views/advancedHome.vue

@@ -61,13 +61,13 @@
         border
         stripe
         fit
-        height="calc(100vh - 155px)"
+        height="calc(100vh - 158px)"
         style="width: 100%"
         show-summary
-        :cell-class-name="cellClass"
         :summary-method="summaryRow(tableData.length)"
-        :span-method="objectSpanMethod"
+        :cell-class-name="cellClass"
         :header-cell-class-name="headerCellClass"
+        :span-method="objectSpanMethod"
         @cell-click="cellClickHandler"
       >
         <el-table-column
@@ -76,6 +76,7 @@
           :prop="col.prop"
           :label="col.label"
           :width="col.width"
+          :fixed="col.fixed"
         >
           <template #header>
             <div class="table-header-cell">
@@ -377,11 +378,13 @@ export default {
       tableCols: [
         {
           prop: 'FlightNO',
-          label: '航班号'
+          label: '航班号',
+          fixed: 'left'
         },
         {
           prop: 'FlightDate',
-          label: '航班日期'
+          label: '航班日期',
+          fixed: 'left'
         },
         {
           prop: 'DepartureTime',
@@ -404,6 +407,7 @@ export default {
         {
           prop: 'BagSN',
           label: '行李牌号',
+          width: 110,
           sortable: true
         },
         {

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

@@ -1,14 +1,17 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 17:56:26
+ * @LastEditTime: 2022-05-27 16:25:06
  * @LastEditors: your name
  * @Description: 进港01
 -->
 <template>
   <div class="arrival-one">
     <!--功能区-表单-->
-    <div class="arrival-form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
       <el-form
         ref="form"
         :inline="true"
@@ -16,8 +19,9 @@
         :rules="rules"
         class="form"
       >
-        <el-form-item prop="currentAirport">
-          <!-- <el-cascader
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
             v-model="formData.currentAirport"
             style="width:144px;margin-left:10px"
             placeholder="全部机场"
@@ -29,66 +33,67 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-          <el-select
-            v-model="formData.currentAirport"
-            class="input-shadow"
-            size="small"
-            filterable
-            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="setStartDate"
-          />
-        </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="setEndDate"
-          />
-        </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) }"
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              filterable
+              placeholder="请选择机场"
+              @change="airPortChange"
             >
-              <span v-if="!isNaN(item)">
-                <i ref="numberItem">0123456789</i>
-              </span>
-              <span
-                v-else
-                class="comma"
-              >{{ item }}</span>
-            </li>
-          </div>
-        </el-form-item>
+              <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="setStartDate"
+            />
+          </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="setEndDate"
+            />
+          </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
-          style="float: right"
+          class="form-right"
           @keyup.enter="onSubmit(1)"
         >
           <el-form-item prop="search">
@@ -144,7 +149,7 @@
     <!--表格-->
     <div
       v-loading="loading"
-      class="arrival-table"
+      class="terminal-table"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -152,9 +157,9 @@
       <el-table
         ref="table"
         class="table"
-        height="calc(100vh - 177px)"
+        :height="computedTableHeight"
         :data="filteredTableData"
-        :header-cell-class-name="headerCellClassName"
+        :header-cell-class-name="headerCellClass"
         :row-class-name="tableRowClassName"
         :cell-class-name="cellClass"
         show-summary
@@ -169,6 +174,8 @@
           :key="col.prop"
           :prop="col.prop"
           :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
         >
           <el-table-column
             v-for="childCol in col.children"
@@ -260,6 +267,8 @@ export default {
         {
           prop: 'flightInfo',
           label: '航班信息',
+          width: 185,
+          fixed: 'left',
           children: [
             {
               prop: 'FlightNO',
@@ -473,14 +482,15 @@ export default {
         }
       }
     },
-    headerCellClassName({ row, column }) {
-      if (
-        column.property === 'transfer_all' ||
-        column.property === 'departureAnomaly' ||
-        column.property === 'riskWarning'
-      ) {
-        return 'bgl-huang'
+    headerCellClass({ row, column }) {
+      const classes = []
+      if (['transfer_all', 'departureAnomaly', 'riskWarning'].includes(column.property)) {
+        classes.push('bgl-huang')
+      }
+      if (column.property === 'flightInfo') {
+        classes.push('fixed-header-cell')
       }
+      return classes.join(' ')
     },
     // 获取表单下拉框数据
     // getFormData(params) {
@@ -558,10 +568,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.arrival-form {
+.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 498px;
+    }
     .el-form-item {
       margin-bottom: 0px;
       margin-right: 8px;
@@ -588,7 +606,7 @@ export default {
   }
   .box-item {
     position: relative;
-    height: 32px;
+    height: 50px;
     font-size: 18px;
     line-height: 32px;
     text-align: center;
@@ -669,7 +687,7 @@ export default {
     margin-right: 0;
   }
 }
-.arrival-table {
+.terminal-table {
   width: 100%;
   ::v-deep .table {
     width: 100%;
@@ -720,6 +738,9 @@ export default {
         }
       }
     }
+    .el-table__cell.is-hidden.fixed-header-cell > * {
+      visibility: visible;
+    }
   }
 }
 </style>

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

@@ -1,14 +1,17 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 09:16:42
+ * @LastEditTime: 2022-05-27 16:24:00
  * @LastEditors: your name
  * @Description: 离港01
 -->
 <template>
   <div class="departure-one">
     <!--功能区-表单-->
-    <div class="departure-form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
       <el-form
         ref="form"
         :inline="true"
@@ -16,8 +19,9 @@
         :rules="rules"
         class="form"
       >
-        <el-form-item prop="currentAirport">
-          <!-- <el-cascader
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
             v-model="formData.currentAirport"
             style="width:144px;margin-left:10px"
             placeholder="全部机场"
@@ -29,67 +33,68 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-          <el-select
-            v-model="formData.currentAirport"
-            class="input-shadow"
-            size="small"
-            filterable
-            placeholder="请选择机场"
-            @change="airPortChange"
-          >
-            <el-option
-              v-for="(item,index) in AirportList"
-              :key="index"
-              :label="item.PlanDepartureApt"
-              :value="item.PlanDepartureApt"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="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="setStartDate"
-          />
-        </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="setEndDate"
-          />
-        </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) }"
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              filterable
+              placeholder="请选择机场"
+              @change="airPortChange"
             >
-              <span v-if="!isNaN(item)">
-                <i ref="numberItem">0123456789</i>
-              </span>
-              <span
-                v-else
-                class="comma"
-              >{{ item }}</span>
-            </li>
-          </div>
-        </el-form-item>
+              <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="setStartDate"
+            />
+          </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="setEndDate"
+            />
+          </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
-          style="float:right"
-          @keyup.enter="onSubmit(0)"
+          class="form-right"
+          @keyup.enter="onSubmit(1)"
         >
           <el-form-item prop="search">
             <el-popover
@@ -146,7 +151,7 @@
     <!--表格-->
     <div
       v-loading="loading"
-      class="departure-table"
+      class="terminal-table"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -154,9 +159,9 @@
       <el-table
         ref="table"
         class="table"
-        height="calc(100vh - 177px)"
+        :height="computedTableHeight"
         :data="filteredTableData"
-        :header-cell-class-name="headerCellClassName"
+        :header-cell-class-name="headerCellClass"
         :row-class-name="tableRowClassName"
         show-summary
         :summary-method="summaryMethod"
@@ -172,6 +177,7 @@
           :prop="col.prop"
           :label="col.label"
           :width="col.width"
+          :fixed="col.fixed"
           :formatter="tableFormat"
         >
           <template #header>
@@ -257,12 +263,14 @@ export default {
         {
           prop: 'FlightNO',
           label: '航班号',
-          width: 80
+          width: 80,
+          fixed: 'left'
         },
         {
           prop: 'FlightDate',
           label: '执飞日期',
-          width: 105
+          width: 105,
+          fixed: 'left'
         },
         {
           prop: 'PlanDepartureTime',
@@ -428,7 +436,7 @@ export default {
         }
       }
     },
-    headerCellClassName({ row, column }) {
+    headerCellClass({ row, column }) {
       if (['riskWarning', 'departureAnomaly', 'midIn'].includes(column.property)) {
         return 'bgl-huang'
       }
@@ -510,10 +518,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.departure-form {
+.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 498px;
+    }
     .el-form-item {
       margin-bottom: 0px;
       margin-right: 8px;
@@ -540,7 +556,7 @@ export default {
   }
   .box-item {
     position: relative;
-    height: 32px;
+    height: 50px;
     font-size: 18px;
     line-height: 32px;
     text-align: center;
@@ -621,7 +637,7 @@ export default {
     margin-right: 0;
   }
 }
-.departure-table {
+.terminal-table {
   width: 100%;
   ::v-deep .table {
     width: 100%;

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

@@ -1,14 +1,17 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 18:06:21
+ * @LastEditTime: 2022-05-27 16:32:50
  * @LastEditors: your name
  * @Description: 中转进港
 -->
 <template>
-  <div class="departure-one">
+  <div class="transfer-in">
     <!--功能区-表单-->
-    <div class="departure-form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
       <el-form
         ref="form"
         :inline="true"
@@ -16,8 +19,9 @@
         :rules="rules"
         class="form"
       >
-        <el-form-item prop="currentAirport">
-          <!-- <el-cascader
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
             v-model="formData.currentAirport"
             style="width:144px;margin-left:10px"
             placeholder="全部机场"
@@ -29,76 +33,77 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-          <el-select
-            v-model="formData.currentAirport"
-            class="input-shadow"
-            size="small"
-            filterable
-            placeholder="请选择机场"
-            @change="airPortChange"
-          >
-            <el-option
-              v-for="(item, index) in AirportList"
-              :key="index"
-              :label="item.PlanDepartureApt"
-              :value="item.PlanDepartureApt"
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              filterable
+              placeholder="请选择机场"
+              @change="airPortChange"
+            >
+              <el-option
+                v-for="(item, index) in AirportList"
+                :key="index"
+                :label="item.PlanDepartureApt"
+                :value="item.PlanDepartureApt"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="inboundCarrier">
+            <el-cascader
+              v-model="formData.inboundCarrier"
+              class="input-shadow"
+              style="width: 164px"
+              size="small"
+              :options="carrierProps"
+              :props="optionProps"
+              placeholder="进港承运航司"
+              collapse-tags
+              clearable
+              filterable
+              @change="getTableData"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="inboundCarrier">
-          <el-cascader
-            v-model="formData.inboundCarrier"
-            class="input-shadow"
-            style="width: 164px"
-            size="small"
-            :options="carrierProps"
-            :props="optionProps"
-            placeholder="进港承运航司"
-            collapse-tags
-            clearable
-            filterable
-            @change="getTableData"
-          />
-        </el-form-item>
-        <el-form-item prop="outgoingAirline">
-          <el-cascader
-            v-model="formData.outgoingAirline"
-            class="input-shadow"
-            style="width: 164px"
-            size="small"
-            :options="carrierPropsop"
-            :props="optionPropser"
-            placeholder="离港承运航司"
-            collapse-tags
-            clearable
-            filterable
-            @change="getTableData"
-          />
-        </el-form-item>
-        <el-form-item prop="startDate">
-          <el-date-picker
-            v-model="formData.startDate"
-            class="input-shadow"
-            style="width: 216px"
-            size="small"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="开始时间"
-            @change="setStartDate"
-          />
-        </el-form-item>
-        <el-form-item prop="endDate">
-          <el-date-picker
-            v-model="formData.endDate"
-            class="input-shadow"
-            style="width: 216px"
-            size="small"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="结束时间"
-            @change="setEndDate"
-          />
-        </el-form-item>
+          </el-form-item>
+          <el-form-item prop="outgoingAirline">
+            <el-cascader
+              v-model="formData.outgoingAirline"
+              class="input-shadow"
+              style="width: 164px"
+              size="small"
+              :options="carrierPropsop"
+              :props="optionPropser"
+              placeholder="离港承运航司"
+              collapse-tags
+              clearable
+              filterable
+              @change="getTableData"
+            />
+          </el-form-item>
+          <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="setStartDate"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="setEndDate"
+            />
+          </el-form-item>
+        </div>
         <!-- <el-form-item>
           <div class="box-item">
             <p>预计装载总数：</p>
@@ -115,7 +120,7 @@
           </div>
         </el-form-item> -->
         <div
-          style="float: right"
+          class="form-right"
           @keyup.enter="onSubmit(1)"
         >
           <el-form-item prop="search">
@@ -129,7 +134,7 @@
                 slot="reference"
                 v-model="formData.search"
                 class="input-shadow"
-                style="width: 240px; margin-left: 105px"
+                style="width: 240px;"
                 size="small"
                 placeholder="请输入内容"
                 prefix-icon="el-icon-search"
@@ -181,7 +186,7 @@
     <!--表格-->
     <div
       v-loading="loading"
-      class="departure-table"
+      class="terminal-table"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -190,10 +195,11 @@
         ref="table"
         class="table"
         :data="filteredTableData"
-        height="calc(100vh - 177px)"
+        :height="computedTableHeight"
         show-summary
         :summary-method="summaryMethod"
         :span-method="arraySpanMethod"
+        :header-cell-class-name="headerCellClass"
         :cell-class-name="cellClass"
         border
         stripe
@@ -205,6 +211,8 @@
           :key="col.prop"
           :prop="col.prop"
           :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
         >
           <el-table-column
             v-for="childCol in col.children"
@@ -306,6 +314,8 @@ export default {
         {
           prop: 'arrivalInfo',
           label: '进港航班',
+          width: 180,
+          fixed: 'left',
           children: [
             {
               prop: 'PreFlightNO',
@@ -328,7 +338,8 @@ export default {
             },
             {
               prop: 'LandingBuild',
-              label: '降落航站楼'
+              label: '降落航站楼',
+              width: 98
             },
             {
               prop: 'Carousel',
@@ -336,7 +347,8 @@ export default {
             },
             {
               prop: 'StandForLanding',
-              label: '降落停机位'
+              label: '降落停机位',
+              width: 98
             },
             {
               prop: 'inTransferBaggageCount',
@@ -374,15 +386,18 @@ export default {
             },
             {
               prop: 'DepartureBuild',
-              label: '起飞航站楼'
+              label: '起飞航站楼',
+              width: 98
             },
             {
               prop: 'BordingGate',
-              label: '起飞登机口'
+              label: '起飞登机口',
+              width: 98
             },
             {
               prop: 'StandForDepartrue',
-              label: '起飞停机位'
+              label: '起飞停机位',
+              width: 98
             },
             {
               prop: 'outTransferBaggageCount',
@@ -502,6 +517,13 @@ export default {
   //   },
   // },
   methods: {
+    headerCellClass({ row, column }) {
+      const classes = []
+      if (column.property === 'arrivalInfo') {
+        classes.push('fixed-header-cell')
+      }
+      return classes.join(' ')
+    },
     changeView() {
       this.$router.replace({
         path: '/transfer/departure',
@@ -742,10 +764,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.departure-form {
+.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 488px;
+    }
     .el-form-item {
       margin-bottom: 0px;
       margin-right: 8px;
@@ -853,7 +883,7 @@ export default {
     margin-right: 0;
   }
 }
-.departure-table {
+.terminal-table {
   width: 100%;
   ::v-deep .table {
     width: 100%;
@@ -904,6 +934,9 @@ export default {
         }
       }
     }
+    .el-table__cell.is-hidden.fixed-header-cell > * {
+      visibility: visible;
+    }
   }
 }
 </style>

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

@@ -1,14 +1,17 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 18:06:20
+ * @LastEditTime: 2022-05-27 16:36:10
  * @LastEditors: your name
  * @Description: 中转离港
 -->
 <template>
-  <div class="departure-one">
+  <div class="transfer-out">
     <!--功能区-表单-->
-    <div class="departure-form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
       <el-form
         ref="form"
         :inline="true"
@@ -16,8 +19,9 @@
         :rules="rules"
         class="form"
       >
-        <el-form-item prop="currentAirport">
-          <!-- <el-cascader
+        <div class="form-left">
+          <el-form-item prop="currentAirport">
+            <!-- <el-cascader
             v-model="formData.currentAirport"
             style="width:144px;margin-left:10px"
             placeholder="全部机场"
@@ -29,76 +33,77 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-          <el-select
-            v-model="formData.currentAirport"
-            class="input-shadow"
-            size="small"
-            filterable
-            placeholder="请选择机场"
-            @change="airPortChange"
-          >
-            <el-option
-              v-for="(item, index) in AirportList"
-              :key="index"
-              :label="item.PlanDepartureApt"
-              :value="item.PlanDepartureApt"
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              filterable
+              placeholder="请选择机场"
+              @change="airPortChange"
+            >
+              <el-option
+                v-for="(item, index) in AirportList"
+                :key="index"
+                :label="item.PlanDepartureApt"
+                :value="item.PlanDepartureApt"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="inboundCarrier">
+            <el-cascader
+              v-model="formData.inboundCarrier"
+              class="input-shadow"
+              style="width: 164px"
+              size="small"
+              :options="carrierProps"
+              :props="optionProps"
+              placeholder="进港承运航司"
+              collapse-tags
+              clearable
+              filterable
+              @change="getTableData"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="inboundCarrier">
-          <el-cascader
-            v-model="formData.inboundCarrier"
-            class="input-shadow"
-            style="width: 164px"
-            size="small"
-            :options="carrierProps"
-            :props="optionProps"
-            placeholder="进港承运航司"
-            collapse-tags
-            clearable
-            filterable
-            @change="getTableData"
-          />
-        </el-form-item>
-        <el-form-item prop="outgoingAirline">
-          <el-cascader
-            v-model="formData.outgoingAirline"
-            class="input-shadow"
-            style="width: 164px"
-            size="small"
-            :options="carrierPropsop"
-            :props="optionPropser"
-            placeholder="离港承运航司"
-            collapse-tags
-            clearable
-            filterable
-            @change="getTableData"
-          />
-        </el-form-item>
-        <el-form-item prop="startDate">
-          <el-date-picker
-            v-model="formData.startDate"
-            class="input-shadow"
-            style="width: 216px"
-            size="small"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="开始时间"
-            @change="setStartDate"
-          />
-        </el-form-item>
-        <el-form-item prop="endDate">
-          <el-date-picker
-            v-model="formData.endDate"
-            class="input-shadow"
-            style="width: 216px"
-            size="small"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="结束时间"
-            @change="setEndDate"
-          />
-        </el-form-item>
+          </el-form-item>
+          <el-form-item prop="outgoingAirline">
+            <el-cascader
+              v-model="formData.outgoingAirline"
+              class="input-shadow"
+              style="width: 164px"
+              size="small"
+              :options="carrierPropsop"
+              :props="optionPropser"
+              placeholder="离港承运航司"
+              collapse-tags
+              clearable
+              filterable
+              @change="getTableData"
+            />
+          </el-form-item>
+          <el-form-item prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间"
+              @change="setStartDate"
+            />
+          </el-form-item>
+          <el-form-item prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              class="input-shadow"
+              style="width: 216px"
+              size="small"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间"
+              @change="setEndDate"
+            />
+          </el-form-item>
+        </div>
         <!-- <el-form-item>
           <div class="box-item">
             <p>预计装载总数：</p>
@@ -114,11 +119,11 @@
             </li>
           </div>
         </el-form-item> -->
-        <div style="float: right">
-          <el-form-item
-            prop="search"
-            @keyup.enter="onSubmit(0)"
-          >
+        <div
+          class="form-right"
+          @keyup.enter="onSubmit(0)"
+        >
+          <el-form-item prop="search">
             <el-popover
               :value="popoverVisible"
               placement="bottom"
@@ -129,7 +134,7 @@
                 slot="reference"
                 v-model="formData.search"
                 class="input-shadow"
-                style="width: 240px; margin-left: 105px"
+                style="width: 240px;"
                 size="small"
                 placeholder="请输入内容"
                 prefix-icon="el-icon-search"
@@ -171,7 +176,7 @@
     <!--表格-->
     <div
       v-loading="loading"
-      class="departure-table"
+      class="terminal-table"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -179,11 +184,12 @@
       <el-table
         ref="table"
         class="table"
-        height="calc(100vh - 177px)"
+        :height="computedTableHeight"
         :data="filteredTableData"
         show-summary
         :summary-method="summaryMethod"
         :span-method="arraySpanMethod"
+        :header-cell-class-name="headerCellClass"
         :cell-class-name="cellClass"
         border
         stripe
@@ -195,6 +201,8 @@
           :key="col.prop"
           :prop="col.prop"
           :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
         >
           <el-table-column
             v-for="childCol in col.children"
@@ -296,6 +304,8 @@ export default {
         {
           prop: 'departureInfo',
           label: '离港航班',
+          width: 180,
+          fixed: 'left',
           children: [
             {
               prop: 'FlightNO',
@@ -318,15 +328,18 @@ export default {
             },
             {
               prop: 'DepartureBuild',
-              label: '起飞航站楼'
+              label: '起飞航站楼',
+              width: 98
             },
             {
               prop: 'BordingGate',
-              label: '起飞登机口'
+              label: '起飞登机口',
+              width: 98
             },
             {
               prop: 'StandForDepartrue',
-              label: '起飞停机位'
+              label: '起飞停机位',
+              width: 98
             },
             {
               prop: 'outTransferBaggageCount',
@@ -369,7 +382,8 @@ export default {
             },
             {
               prop: 'LandingBuild',
-              label: '降落航站楼'
+              label: '降落航站楼',
+              width: 98
             },
             {
               prop: 'Carousel',
@@ -377,7 +391,8 @@ export default {
             },
             {
               prop: 'StandForLanding',
-              label: '降落停机位'
+              label: '降落停机位',
+              width: 98
             },
             {
               prop: 'inTransferBaggageCount',
@@ -482,6 +497,13 @@ export default {
     clearInterval(this.loopEvent)
   },
   methods: {
+    headerCellClass({ row, column }) {
+      const classes = []
+      if (column.property === 'departureInfo') {
+        classes.push('fixed-header-cell')
+      }
+      return classes.join(' ')
+    },
     changeView() {
       this.$router.replace({
         path: '/transfer/arrival',
@@ -704,10 +726,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.departure-form {
+.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 488px;
+    }
     .el-form-item {
       margin-bottom: 0px;
       margin-right: 8px;
@@ -815,7 +845,7 @@ export default {
     margin-right: 0;
   }
 }
-.departure-table {
+.terminal-table {
   width: 100%;
   ::v-deep .table {
     width: 100%;
@@ -868,6 +898,9 @@ export default {
         }
       }
     }
+    .el-table__cell.is-hidden.fixed-header-cell > * {
+      visibility: visible;
+    }
   }
 }
 </style>

src/views/baggageManagement/mixins/form.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-03-04 14:45:03
- * @LastEditTime: 2022-05-26 18:01:48
+ * @LastEditTime: 2022-05-27 15:26:58
  * @LastEditors: your name
  * @Description: 航站视图通用表单部分
  * have a nice day!
@@ -94,16 +94,6 @@ export default {
       // return parseTime(this.formData.endDate).split(' ')[0]
       return this.formData.endDate
     }
-    // computedTableHeight() {
-    //   const { relatedAirport, inboundCarrier, outgoingAirline, craftType, flightAttr } = this.formData
-    //   return relatedAirport.length ||
-    //     inboundCarrier.length ||
-    //     outgoingAirline.length ||
-    //     craftType.length ||
-    //     flightAttr.length
-    //     ? 'calc(100vh - 191px)'
-    //     : 'calc(100vh - 177px)'
-    // }
   },
   methods: {
     // 机场数据处理（多选）

src/views/baggageManagement/mixins/terminal.js

@@ -1,22 +1,12 @@
 /*
  * @Author: Badguy
  * @Date: 2022-03-04 11:41:55
- * @LastEditTime: 2022-05-27 09:49:24
+ * @LastEditTime: 2022-05-27 15:48:17
  * @LastEditors: your name
  * @Description: 航站视图通用部分
  * have a nice day!
  */
 
-import { queryMap, myQuery } from '@/api/dataIntegration'
-// import {
-//   CurrentAirportQuery,
-//   RelatedAirportQuery,
-//   AirCompanyQuery,
-//   CraftTypeQuery,
-//   FlightAttrQuery,
-//   IntegratedQuery,
-//   IntegratedQueryTransfer
-// } from '@/api/flight'
 import { mapGetters } from 'vuex'
 import { commonTableCellClass } from '@/utils/table'
 
@@ -27,51 +17,20 @@ export default {
       tableData: [],
       spanArr: [],
       pos: 0,
-      loading: false
+      loading: false,
+      computedTableHeight: 0
     }
   },
-  // created() {
-  //   this.currentAirportQuery()
-  // },
-  mounted() {
-    // this.queryDepartureAirport()
+  updated() {
+    const headerHeight = 80
+    const bottomBlankHeight = 41
+    const formWrapHeight = this.$refs['formWrap'].offsetHeight
+    this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)`
   },
   computed: {
-    ...mapGetters(['clickedCells']),
-    dates() {
-      return [this.startDate, this.endDate]
-    },
-    flightQueryParams() {
-      return [
-        this.startDate,
-        this.endDate,
-        this.departureAirPort,
-        this.departureAirPort,
-        this.landingAirport,
-        this.landingAirport,
-        this.carrier,
-        this.carrier,
-        this.craftType,
-        this.craftType,
-        this.flightAttr,
-        this.flightAttr,
-        this.search,
-        this.search
-      ]
-    }
+    ...mapGetters(['clickedCells'])
   },
   methods: {
-    // 数据处理
-    formatData(arr) {
-      arr.forEach(item => {
-        item['name'] = item['name'] + item['code3']
-        item.builds &&
-          item.builds.forEach(p => {
-            p['code3'] = p.name
-          })
-      })
-      return arr
-    },
     // 合计行
     summaryMethod({ columns, data }) {
       const sums = []
@@ -348,188 +307,6 @@ export default {
         default:
           break
       }
-    },
-    // // 全部机场查询
-    // async currentAirportQuery() {
-    //   const params = {
-    //     startDate: this.startDate,
-    //     endDate: this.endDate
-    //   }
-    //   try {
-    //     const res = await CurrentAirportQuery(params)
-    //     if (res.code === 0) {
-    //       if (res.returnData.length) {
-    //         const datas = this.formatData(res.returnData)
-    //         const datasCopy = this._.cloneDeep(datas)
-    //         this.currentAirportList = datas
-    //         const defaultData = datasCopy[0]
-    //         // this.formData.currentAirport = [[defaultData.code3, defaultData.builds[0].code3]]
-    //         // this.formData.currentAirport = [[defaultData.code3]]
-    //         this.formData.currentAirport = [defaultData.code3]
-    //         params.currentAirport = this.currentAirport
-    //         this.getFormData(params)
-    //         this.getTableData({
-    //           ...params,
-    //           world: this.formData.search
-    //         })
-    //       }
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 目的站/始飞站查询
-    // async relatedAirportQuery(params = {}) {
-    //   try {
-    //     const res = await RelatedAirportQuery(params)
-    //     if (res.code === 0) {
-    //       const datas = this.formatData(res.returnData)
-    //       this.relatedAirportList = datas
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 航司查询
-    // async inboundCarrierQuery(params = {}) {
-    //   try {
-    //     const res = await AirCompanyQuery({
-    //       ...params,
-    //       type: 'IN'
-    //     })
-    //     if (res.code === 0) {
-    //       this.carrierList = res.returnData
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 航司查询
-    // async outgoingAirlineQuery(params = {}) {
-    //   try {
-    //     const res = await AirCompanyQuery({
-    //       ...params,
-    //       type: 'OUT'
-    //     })
-    //     if (res.code === 0) {
-    //       this.carrierList = res.returnData
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 机型查询
-    // async craftTypeQuery(params = {}) {
-    //   try {
-    //     const res = await CraftTypeQuery(params)
-    //     if (res.code === 0) {
-    //       this.craftTypeList = res.returnData.map(item => ({
-    //         code3: item,
-    //         name: item
-    //       }))
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 航线查询
-    // async flightAttrQuery(params = {}) {
-    //   try {
-    //     const res = await FlightAttrQuery(params)
-    //     if (res.code === 0) {
-    //       this.flightAttrList = res.returnData
-    //     } else {
-    //       this.$message.error(res.message)
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //   }
-    // },
-    // // 综合查询
-    // async integratedQuery(params = {}) {
-    //   try {
-    //     this.loading = true
-    //     const res = await IntegratedQuery(params)
-    //     if (res.code === 0) {
-    //       const tableData = res.returnData
-    //       this.initTableData(tableData)
-    //       this.loading = false
-    //     } else {
-    //       this.$message.error(res.message)
-    //       this.loading = false
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //     this.loading = false
-    //   }
-    // },
-    // // 中转综合查询
-    // async integratedQueryTransfer(params = {}) {
-    //   try {
-    //     this.loading = true
-    //     const res = await IntegratedQueryTransfer(params)
-    //     if (res.code === 0) {
-    //       const tableData = res.returnData
-    //       this.initTableData(tableData)
-    //       this.loading = false
-    //     } else {
-    //       this.$message.error(res.message)
-    //       this.loading = false
-    //     }
-    //   } catch (error) {
-    //     console.log('出错了', error)
-    //     this.loading = false
-    //   }
-    // },
-    // 查询起飞机场 id: 31
-    queryDepartureAirport() {
-      return myQuery(queryMap.departureAirPort, ...this.dates)
-    },
-    // 查询降落机场 id: 32
-    queryLandingAirport() {
-      return myQuery(queryMap.landingAirport, ...this.dates)
-    },
-    // 按照降落机场查询起飞机场 id: 33
-    queryDepartureAirportByLandingAirport() {
-      return myQuery(queryMap.departureAirPortBylandingAirport, this.currentAirport, ...this.dates)
-    },
-    // 按照起飞机场查询降落机场 id: 34
-    queryLandingAirportByDepartureAirport() {
-      return myQuery(queryMap.landingAirportBydepartureAirPort, this.currentAirport, ...this.dates)
-    },
-    // 查询航司 id: 35
-    queryCarrier() {
-      return myQuery(queryMap.carrier, ...this.dates)
-    },
-    // 查询机型 id: 36
-    queryCraftType() {
-      return myQuery(queryMap.craftType, ...this.dates)
-    },
-    // 查询航线 id: 37
-    queryAirline() {
-      return myQuery(queryMap.flightAttr, ...this.dates)
-    },
-    // 查询进港航班 id: 38
-    queryLandingFlight() {
-      return myQuery(queryMap.landingFlight, ...this.flightQueryParams)
-    },
-    // 查询离港航班 id: 39
-    queryDepartureFlight() {
-      return myQuery(queryMap.departureFlight, ...this.flightQueryParams)
-    },
-    // 查询中转航班 id: 40
-    queryTrasferFlight() {
-      return myQuery(queryMap.transferFlight, ...this.flightQueryParams)
     }
   }
 }

src/views/baggageManagement/mixins/timeZone.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-05-17 17:04:32
- * @LastEditTime: 2022-05-26 14:54:12
+ * @LastEditTime: 2022-05-27 15:04:44
  * @LastEditors: your name
  * @Description: 时区相关
  * have a nice day!
@@ -28,7 +28,7 @@ export default {
           return timeInZone(cellValue, this.timeZone)
         case 'ActualDepartureTime':
         case 'ActualLandingTime':
-          return timeInZone(cellValue.replace('T', ' '), this.timeZone).replace(' ', '\n')
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone).replace(' ', '\n')
         case 'checkIn':
           return `${cellValue ?? ''}\n${getTimeInZone(row['checkInTime'], this.timeZone)}`
         case 'DealInfo':

src/views/baggageManagement/style/transfer.scss

@@ -1,73 +0,0 @@
-/*
- * @Author: Badguy
- * @Date: 2022-02-11 16:50:42
- * @LastEditTime: 2022-05-11 15:39:26
- * @LastEditors: your name
- * @Description: 中转进港离港通用样式
- * have a nice day!
- */
-
-.terminal-form {
-  padding-top: 11px;
-  ::v-deep .form {
-    .el-form-item {
-      margin-bottom: 0px;
-      margin-right: 8px;
-      button,
-      input,
-      optgroup,
-      select,
-      textarea {
-        font-family: Helvetica, 'Microsoft YaHei';
-        font-size: 14px;
-      }
-      .el-form-item__error {
-        z-index: 10;
-      }
-      .checkTime {
-        margin-left: 24px;
-        margin-right: 16px;
-      }
-      .msgImg {
-        cursor: pointer;
-        position: relative;
-        top: 6px;
-      }
-    }
-  }
-}
-.terminal-table {
-  width: calc(100vw - 60px);
-  ::v-deep .table {
-    width: 100%;
-    .cell {
-      padding: 0;
-      text-align: center;
-      font-size: 14px;
-      color: #303133;
-      letter-spacing: 0;
-    }
-    .el-table__header-wrapper {
-      th {
-        background-color: #fafcff;
-      }
-      .cell {
-        font-weight: bold;
-        color: #101116;
-      }
-    }
-    .el-table__body-wrapper {
-      .el-table__cell {
-        padding: 0;
-        height: 38px;
-        line-height: 38px;
-      }
-      tr.bgl-hui {
-        background-color: #f0f3f7;
-        td {
-          background-color: #f0f3f7;
-        }
-      }
-    }
-  }
-}