航班视图、行李视图适配小屏

src/components/TimeZoneSelector/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-05-17 15:56:46
- * @LastEditTime: 2022-05-26 17:52:37
+ * @LastEditTime: 2022-05-27 17:02:16
  * @LastEditors: your name
  * @Description: 时区下拉选择菜单
  * have a nice day!

src/styles/index.scss

@@ -575,6 +575,7 @@ li {
 }
 
 .btn-shadow {
+  cursor: pointer;
   box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
   &.btn-img,
   &.btn-square {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 16:25:06
+ * @LastEditTime: 2022-05-27 17:02:36
  * @LastEditors: your name
  * @Description: 进港01
 -->
@@ -599,7 +599,6 @@ export default {
       }
     }
     .btn-img {
-      cursor: pointer;
       position: relative;
       top: 6px;
     }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 18:09:44
+ * @LastEditTime: 2022-05-27 19:21:21
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -747,6 +747,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     .part2_info {
+      flex: 1;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
@@ -755,12 +756,12 @@ export default {
         font-size: 18px;
         font-weight: bold;
         color: #303133;
-        margin-right: 42px;
+        margin-right: 20px;
       }
       .type {
         font-size: 18px;
         font-weight: bold;
-        margin-right: 80px;
+        margin-right: 20px;
       }
       .warn {
         color: #df3559;
@@ -769,8 +770,9 @@ export default {
         color: #519f6b;
       }
       .step {
+        flex: 1;
         height: 80px;
-        width: 1430px;
+        max-width: 1430px;
         position: relative;
         .baggage-track-chart {
           display: flex;
@@ -913,7 +915,6 @@ export default {
     .btn-square {
       margin-left: 10px;
       width: 30px;
-      cursor: pointer;
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 16:24:00
+ * @LastEditTime: 2022-05-27 17:02:39
  * @LastEditors: your name
  * @Description: 离港01
 -->
@@ -549,7 +549,6 @@ export default {
       }
     }
     .btn-img {
-      cursor: pointer;
       position: relative;
       top: 6px;
     }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 09:36:44
+ * @LastEditTime: 2022-05-27 19:10:44
  * @LastEditors: your name
  * @Description: 航班视图
 -->
@@ -16,47 +16,43 @@
         <div class="part1_info">
           <div class="part1_info_box">
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>起飞机场简称：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.departureName }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>起飞机场三字码：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.PlanDepartureApt }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>起飞机场航站楼：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.DepartureBuild }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>
                   日期：
                   {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[0] }}
                 </span>
               </el-col>
-              <el-col :span="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 :span="12">
                 <span>登机口：{{ flightInfo.BordingGate }}</span>
@@ -75,7 +71,6 @@
                 <span>{{ flightInfo.FlightNO }}</span>
               </el-col>
             </el-row>
-
             <el-row>
               <el-col :span="12">
                 <span>航班状态：</span>
@@ -84,82 +79,77 @@
                 <span>{{ flightInfo.FlightStatus === null ? '正常' : flightInfo.FlightStatus }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>托运旅客数：</span>
-              </el-col>
-              <el-col :span="12">
                 <span>{{ flightInfo.count1 }}</span>
               </el-col>
+              <el-col :xs="24" :sm="24" :xl="12">
+                <span>终点行李数：</span>
+                <span>{{ flightInfo.count2 }}</span>
+              </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
-                <span>终点行李数：</span>
+              <el-col :xs="18" :sm="18" :xl="12">
+                <span>中转进行李数：</span>
               </el-col>
-              <el-col :span="12">
-                <span>{{ flightInfo.count2 }}</span>
+              <el-col :xs="6" :sm="6" :xl="12">
+                <span>{{ flightInfo.count4 }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
-                <span>中转进行李数：</span><span>{{ flightInfo.count4 }}</span>
+              <el-col :xs="18" :sm="18" :xl="12">
+                <span>中转出行李数：</span>
               </el-col>
-              <el-col :span="12">
-                <span>中转出行李数：</span><span>{{ flightInfo.count3 }}</span>
+              <el-col :xs="6" :sm="6" :xl="12">
+                <span>{{ flightInfo.count3 }}</span>
               </el-col>
             </el-row>
           </div>
           <div class="part1_info_box">
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>降落机场简称：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.landingName }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>降落机场三字码：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.PlanLandingApt }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>降落机场航站楼：</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>{{ flightInfo.LandingBuild }}</span>
               </el-col>
             </el-row>
-
             <el-row>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>
                   日期：
                   {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[0] }}
                 </span>
               </el-col>
-              <el-col :span="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 :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>提取转盘：{{ flightInfo.Carousel }}</span>
               </el-col>
-              <el-col :span="12">
+              <el-col :xs="24" :sm="24" :xl="12">
                 <span>停机位：{{ flightInfo.StandForLanding }}</span>
               </el-col>
             </el-row>
@@ -185,7 +175,7 @@
             v-for="col in containerTableColumn"
             :key="col.id"
             :prop="col.prop"
-            :label="col.name"
+            :label="col.label"
             :align="col.align || 'center'"
             :show-overflow-tooltip="true"
           />
@@ -214,7 +204,7 @@
             v-for="col in transferInTableColumn"
             :key="col.id"
             :prop="col.prop"
-            :label="col.name"
+            :label="col.label"
             :align="col.align || 'center'"
             :show-overflow-tooltip="true"
           />
@@ -243,7 +233,7 @@
             v-for="col in transferOutTableColumn"
             :key="col.id"
             :prop="col.prop"
-            :label="col.name"
+            :label="col.label"
             :align="col.align || 'center'"
             :show-overflow-tooltip="true"
           />
@@ -288,7 +278,7 @@
           :data="filteredTableData"
           border
           style="width: 100%"
-          height="320"
+          height="calc(100vh - 80px - 16px - 16px - 344px - 8px - 204px - 62px)"
           stripe
           size="mini"
           show-summary
@@ -302,17 +292,18 @@
             v-for="col in tableColsCopy"
             :key="col.index"
             :prop="col.prop"
-            :label="col.name"
+            :label="col.label"
             :align="col.align || 'center'"
             :width="col.width"
+            :fixed="col.fixed"
             :formatter="tableFormat"
           >
             <template #header>
               <div class="table-header-cell">
-                <span>{{ col.name }}</span>
+                <span>{{ col.label }}</span>
                 <template v-if="flightBaggageTableFilters[col.prop]">
                   <TableHeaderCellWithFilter
-                    :label="col.name"
+                    :label="col.label"
                     :filter-options="flightBaggageTableFilters[col.prop]"
                     :filter-value.sync="filterValues[col.prop]"
                   />
@@ -338,7 +329,7 @@
             node-key="index"
             :default-expand-all="true"
             :props="{
-              label: 'name',
+              label: 'label',
               children: 'children'
             }"
             :default-checked-keys="checkedKeysTemp"
@@ -372,50 +363,42 @@ import { setTableFilters } from '@/utils/table'
 import { mapGetters } from 'vuex'
 
 // const arrivalBaggageTableColumn = [
-//   { name: '序号', prop: 'index' },
-//   { name: '旅客姓名', prop: 'name', sortable: 'custom' },
-//   { name: '行李牌号', prop: 'bagNo' },
+//   { label: '序号', prop: 'index' },
+//   { label: '旅客姓名', prop: 'name', sortable: 'custom' },
+//   { label: '行李牌号', prop: 'bagNo' },
 //   {
-//     name: '特殊行李类型',
+//     label: '特殊行李类型',
 //     prop: 'specialType',
 //     sortable: 'custom'
 //   },
 //   {
-//     name: '容器编号',
+//     label: '容器编号',
 //     prop: 'containerNo',
 //     sortable: 'custom'
 //   },
-//   { name: '装载序号', prop: 'loadSequenceIndex' },
-//   { name: '卸载', prop: 'uninstall' },
-//   { name: '到达', prop: 'arrival' },
-//   { name: '提取', prop: 'extract' },
-//   { name: '旅客仓位', prop: 'positionNo' },
-//   { name: '中转标志', prop: 'transitStatus' },
-//   { name: '卷宗号', prop: 'fileNumber' }
+//   { label: '装载序号', prop: 'loadSequenceIndex' },
+//   { label: '卸载', prop: 'uninstall' },
+//   { label: '到达', prop: 'arrival' },
+//   { label: '提取', prop: 'extract' },
+//   { label: '旅客仓位', prop: 'positionNo' },
+//   { label: '中转标志', prop: 'transitStatus' },
+//   { label: '卷宗号', prop: 'fileNumber' }
 // ]
 const departureBaggageTableColumn = [
-  // { name: '序号', prop: 'index' },
-  { name: '旅客姓名', prop: 'PassengerNameUpcase', sortable: 'custom' },
-  { name: '行李牌号', prop: 'BagSN' },
-  {
-    name: '特殊行李类型',
-    prop: 'SpecialType',
-    sortable: 'custom'
-  },
-  {
-    name: '容器编号',
-    prop: 'U_Device_ID',
-    sortable: 'custom'
-  },
-  { name: '装载序号', prop: 'LoadSN' },
-  { name: '值机', prop: 'checkIn', width: 140 },
-  { name: '状态', prop: 'latestStatus' },
-  { name: '安检', prop: 'DealInfo', width: 140 },
-  { name: '分拣', prop: 'sortLocationMark', width: 140 },
-  { name: '装车', prop: 'loadLocationMark', width: 140 },
-  { name: '装机', prop: 'inflLocationMark', width: 140 },
-  { name: '中转标志', prop: 'transitFlag' },
-  { name: '卷宗号', prop: 'fileNumber' }
+  // { label: '序号', prop: 'index' },
+  { label: '旅客姓名', prop: 'PassengerNameUpcase', width: 140, fixed: 'left' },
+  { label: '行李牌号', prop: 'BagSN', width: 120, fixed: 'left' },
+  { label: '特殊行李类型', prop: 'SpecialType', width: 120 },
+  { label: '容器编号', prop: 'U_Device_ID', width: 120 },
+  { label: '装载序号', prop: 'LoadSN' },
+  { label: '值机', prop: 'checkIn', width: 140 },
+  { label: '状态', prop: 'latestStatus' },
+  { label: '安检', prop: 'DealInfo', width: 140 },
+  { label: '分拣', prop: 'sortLocationMark', width: 140 },
+  { label: '装车', prop: 'loadLocationMark', width: 140 },
+  { label: '装机', prop: 'inflLocationMark', width: 140 },
+  { label: '中转标志', prop: 'transitFlag' },
+  { label: '卷宗号', prop: 'fileNumber' }
 ]
 export default {
   name: 'FlightView',
@@ -436,25 +419,25 @@ export default {
       //   { value: 0, label: 'VIP行李' }
       // ],
       containerTableColumn: [
-        { name: '容器编号', prop: 'containerNumber' },
-        { name: '类型', prop: 'style' },
-        { name: '行李数', prop: 'numberOfBags' }
+        { label: '容器编号', prop: 'containerNumber' },
+        { label: '类型', prop: 'style' },
+        { label: '行李数', prop: 'numberOfBags' }
       ],
       transferInTableColumn: [
-        { name: '航班号', prop: 'PreFlightNO' },
-        { name: '日期', prop: 'PreFlightDate' },
-        { name: '时间', prop: 'flightTime' },
-        { name: '始发站', prop: 'PlanDepartureApt' },
-        { name: '航班状态', prop: 'FlightStatus' },
-        { name: '中转数', prop: 'totalNumber' }
+        { label: '航班号', prop: 'PreFlightNO' },
+        { label: '日期', prop: 'PreFlightDate' },
+        { label: '时间', prop: 'flightTime' },
+        { label: '始发站', prop: 'PlanDepartureApt' },
+        { label: '航班状态', prop: 'FlightStatus' },
+        { label: '中转数', prop: 'totalNumber' }
       ],
       transferOutTableColumn: [
-        { name: '航班号', prop: 'TransferFlightNO' },
-        { name: '日期', prop: 'TransferFlightDate' },
-        { name: '时间', prop: 'flightTime' },
-        { name: '始发站', prop: 'PlanDepartureApt' },
-        { name: '目的站', prop: 'PlanLandingApt' },
-        { name: '中转数', prop: 'transferNumber' }
+        { label: '航班号', prop: 'TransferFlightNO' },
+        { label: '日期', prop: 'TransferFlightDate' },
+        { label: '时间', prop: 'flightTime' },
+        { label: '始发站', prop: 'PlanDepartureApt' },
+        { label: '目的站', prop: 'PlanLandingApt' },
+        { label: '中转数', prop: 'transferNumber' }
       ],
       // tableCols:
       //   this.$route.matched[0].path === '/arrival' || this.$route.matched[1].path === '/transfer/arrival'
@@ -752,13 +735,13 @@ export default {
 
 <style lang="scss" scoped>
 .flight-view {
-  padding: 16px 0 44px 8px;
+  padding: 16px 0 16px 8px;
   overflow: hidden;
   background: #dfe3ea;
   .flight-wrap {
     padding-right: 8px;
     width: 100%;
-    height: calc(100vh - 140px);
+    height: calc(100vh - 80px - 16px - 16px);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -786,12 +769,22 @@ export default {
           height: 244px;
           background: #2c416d;
           position: relative;
-          padding: 24px;
+          padding: 24px 24px 12px;
           display: flex;
           flex-direction: column;
           align-content: space-around;
+          overflow-x: hidden;
+          overflow-y: auto;
           .el-row {
-            margin-bottom: 27px;
+            margin-bottom: 24px;
+            &:last-child {
+              margin: 0;
+            }
+            @media only screen and (max-width: 1600px) {
+              .el-col-sm-24:nth-child(2) {
+                margin-top: 24px;
+              }
+            }
           }
           span {
             display: inline-block;
@@ -839,7 +832,6 @@ export default {
     }
     .part4 {
       width: 100%;
-      height: 384px;
       .title {
         padding: 16px 0;
         display: flex;
@@ -857,17 +849,11 @@ export default {
         }
         .btn-square {
           margin-left: 20px;
-          cursor: pointer;
           &:last-child {
             margin-right: 30px;
           }
         }
       }
-      .el-table {
-        .el-table__body-wrapper {
-          min-height: 178px;
-        }
-      }
     }
   }
   ::v-deep .el-table {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 16:32:50
+ * @LastEditTime: 2022-05-27 17:02:43
  * @LastEditors: your name
  * @Description: 中转进港
 -->
@@ -795,7 +795,6 @@ export default {
       }
     }
     .btn-img {
-      cursor: pointer;
       position: relative;
       top: 6px;
     }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 16:36:10
+ * @LastEditTime: 2022-05-27 17:02:49
  * @LastEditors: your name
  * @Description: 中转离港
 -->
@@ -757,7 +757,6 @@ export default {
       }
     }
     .btn-img {
-      cursor: pointer;
       position: relative;
       top: 6px;
     }