看板增加架次太多的情况下点击省略号展示全部架次

applications/dee-mes/src/privateComponents/components/Visualization/ProductionKanban.vue

@@ -4,10 +4,11 @@
 <template>
   <div style="height:100%;width:100%">
     <div class="production-kanban">
-      <header>
+      <header v-if="!showOverlay">
         <div
-          v-for="item in sortiesData"
+          v-for="item in displayedFlights"
           :key="item.aircraftSorties.defCode"
+          class="flight-item"
           :class="
             sortiesRow.aircraftSorties.defCode === item.aircraftSorties.defCode ? 'cur' : ''
           "
@@ -15,7 +16,22 @@
         >
           {{ item.aircraftSorties.defCode }}
         </div>
+        <div v-if="hasMoreFlights" class="ellipsis" @click="toggleOverlay">···</div>
       </header>
+      <div v-else class="overlay">
+        <h2 class="allFightTitle">全部架次</h2>
+        <div
+          v-for="item in sortiesData"
+          :key="item.aircraftSorties.defCode"
+          :class="
+            sortiesRow.aircraftSorties.defCode === item.aircraftSorties.defCode ? 'cur' : ''
+          "
+          class="overlay-item"
+          @click="selectFlight(item)"
+        >
+          {{ item.aircraftSorties.defCode }}
+        </div>
+      </div>
       <div
         v-for="item in stationData"
         :key="item.serialNumber"
@@ -187,7 +203,8 @@ export default {
         }
       ],
       JobPlanExecutionQueryParams: {},
-      erd: elementResizeDetectorMaker()
+      erd: elementResizeDetectorMaker(),
+      showOverlay: false
     }
   },
   computed: {
@@ -211,6 +228,13 @@ export default {
     },
     isFullscreen() {
       return this.$store.state.storeFull.isFullscreen
+    },
+    // 默认最多展示十三个
+    displayedFlights() {
+      return this.sortiesData.slice(0, 13)
+    },
+    hasMoreFlights() {
+      return this.sortiesData.length > 13
     }
   },
   created() {},
@@ -467,6 +491,20 @@ export default {
       } else if (document.webkitExitFullscreen) {
         document.webkitExitFullscreen()
       }
+    },
+    toggleOverlay() {
+      this.showOverlay = true
+    },
+    selectFlight(flightObj) {
+      this.selectSorties(flightObj.aircraftSorties.defCode)
+      const index = this.sortiesData.findIndex(data => {
+        return data.aircraftSorties.defCode === flightObj.aircraftSorties.defCode
+      })
+      if (index > 0) {
+        this.sortiesData.splice(index, 1)
+        this.sortiesData.unshift(flightObj)
+        this.showOverlay = false
+      }
     }
   }
 }
@@ -494,9 +532,40 @@ position: relative;
 > header {
   position: absolute;
   display: flex;
-  top: 90px;
+  top: 103px;
   left: 100px;
-  > div {
+  .ellipsis{
+    width: 65px;
+    height: 65px;
+    line-height: 65px;
+    font-size: 30px;
+    font-weight: 700;
+    color:#999;
+    cursor: pointer;
+  }
+}
+  .overlay {
+    position: absolute;
+    top:60px;
+    left: 70px;
+    width: 1200px;
+    position: absolute;
+    background-color: rgba(6, 24, 26, 0.8);
+    display: flex;
+    flex-wrap: wrap;
+     align-items: flex-end;
+     z-index: 99;
+     padding-top: 10px;
+     padding-left: 30px;
+     border-radius: 6px;
+     .allFightTitle{
+      width: 100%;
+      margin-bottom: 10px;
+      font-size: 20px;
+      color:#D9EBEC;
+     }
+  }
+.flight-item,.overlay-item{
     width: 65px;
     height: 65px;
     background-image: url("../../../assets/看板/按钮灰.png");
@@ -520,7 +589,9 @@ position: relative;
       margin-right: 25px;
     }
   }
-}
+  .overlay-item{
+    margin-bottom: 20px;
+  }
 > .station {
   position: absolute;
   // width: 170px;