航站视图表格滚动到红线处

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-06-14 10:44:04
+ * @LastEditTime: 2022-06-15 14:00:22
  * @LastEditors: your name
  * @Description: 进港01
 -->
@@ -85,6 +85,7 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :picker-options="dateRangePickerOptions"
+              @change="dateChangeHandler"
             />
           </el-form-item>
           <el-form-item>
@@ -438,25 +439,42 @@ export default {
       AirportList: [],
       loopEvent: null,
       arrivalCount: 0,
-      baggageCount: 0
+      baggageCount: 0,
+      hasSetTableScroll: false
     }
   },
-  created() {
-    this.getAirPortData()
-  },
   mounted() {
-    const that = this
-    this.loopEvent = setInterval(function () {
-      that.getTableData()
-    }, 3000)
+    this.getAirPortData()
   },
   beforeDestroy() {
-    clearInterval(this.loopEvent)
-    this.loopEvent = null
+    if (this.loopEvent) {
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
+    }
+  },
+  computed: {
+    singleDay() {
+      return this.startDate === this.endDate
+    }
   },
   methods: {
-    airPortChange() {
+    resetLoopEvent() {
+      if (this.loopEvent) {
+        clearInterval(this.loopEvent)
+      }
       this.getTableData()
+      const that = this
+      this.loopEvent = setInterval(function () {
+        that.getTableData()
+      }, 3000)
+    },
+    airPortChange() {
+      this.hasSetTableScroll = false
+      this.resetLoopEvent()
+    },
+    dateChangeHandler() {
+      this.hasSetTableScroll = false
+      this.resetLoopEvent()
     },
     // 选择机场
     async getAirPortData() {
@@ -468,7 +486,7 @@ export default {
         if (Number(res.code) === 0) {
           this.AirportList = this._.orderBy(res.returnData, o => o.PlanLandingApt)
           this.formData.currentAirport = 'PEK'
-          this.getTableData()
+          this.resetLoopEvent()
         } else {
           this.$message.error(res.message)
         }
@@ -477,19 +495,20 @@ export default {
       }
     },
     tableRowClassName({ row, rowIndex }) {
+      const classes = []
       if (row.flightStatus === 'DLY') {
-        return 'bgl-delayed'
+        classes.push('bgl-delayed')
       }
       if (row.flightStatus === 'CAN') {
-        return 'bgl-canceled'
+        classes.push('bgl-canceled')
       }
-      if (row.hasTakenOff === 0) {
+      if (row.hasArrived) {
+        classes.push('bgl-hui')
         if (rowIndex === this.arrivalCount - 1) {
-          return 'bgl-hui redBorder'
-        } else {
-          return 'bgl-hui'
+          classes.push('redBorder')
         }
       }
+      return classes.join(' ')
     },
     headerCellClass({ row, column }) {
       const classes = []
@@ -529,7 +548,10 @@ export default {
           console.log(res.message)
         }
       } catch (error) {
-        clearInterval(this.loopEvent)
+        if (this.loopEvent) {
+          clearInterval(this.loopEvent)
+          this.loopEvent = null
+        }
         console.log('出错了', error)
       }
     },
@@ -537,25 +559,49 @@ export default {
       this.arrivalCount = 0
       this.baggageCount = 0
       tableData.forEach(item => {
-        // if (this.hasArrived(item)) {
-        //   this.arrivalCount++
-        // }
         item['flightCanceled'] = item['flightStatus'] === 'CAN' ? 1 : 0
+        if (this.hasArrived(item)) {
+          this.arrivalCount++
+        }
         this.baggageCount = this.baggageCount + item.projectedLoad
       })
-      this.tableData = this._.sortBy(tableData, ['hasArrived', 'arrivalTime'])
+      this.tableData = this._.orderBy(tableData, ['hasArrived', 'arrivalTime'], ['desc', 'asc'])
       setTableFilters(this.tableData, this.tableDataFilters)
       this.toOrderNum(this.baggageCount)
       // setInterval(() => {
       //   this.baggageCount = this.baggageCount+1;
       //    // 这里输入数字即可调用
       // }, 2000);
+      this.$nextTick(() => {
+        this.setTableScroll()
+      })
     },
     hasArrived(flight) {
       const now = new Date()
       const arrivalTime = new Date(flight.arrivalTime)
-        flight['hasArrived'] = now > arrivalTime
-        return flight['hasArrived']
+      flight['hasArrived'] = now > arrivalTime && !flight['flightCanceled']
+      return flight['hasArrived']
+    },
+    setTableScroll() {
+      if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
+        return
+      }
+      const table = this.$refs['table'].$el
+      const scrollParent = table.querySelector('.el-table__body-wrapper')
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return
+      }
+      let lastRow
+      if (this.arrivalCount === this.tableData.length) {
+        lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount - 1]
+      } else {
+        lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount]
+      }
+      setTimeout(() => {
+        const scrollTop = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight
+        scrollParent.scrollTo(0, scrollTop)
+      }, 0)
+      this.hasSetTableScroll = true
     },
     setNumberTransform() {
       const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
@@ -735,7 +781,8 @@ export default {
         }
       }
     }
-    .el-table__body-wrapper {
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
       tr.bgl-hui {
         background: #d2d6df;
         td {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-06-13 17:56:26
+ * @LastEditTime: 2022-06-15 14:00:35
  * @LastEditors: your name
  * @Description: 离港01
 -->
@@ -85,6 +85,7 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :picker-options="dateRangePickerOptions"
+              @change="dateChangeHandler"
             />
           </el-form-item>
           <el-form-item>
@@ -389,14 +390,8 @@ export default {
       hasSetTableScroll: false
     }
   },
-  created() {
-    this.getAirPortData()
-  },
   mounted() {
-    const that = this
-    this.loopEvent = setInterval(function () {
-      that.getTableData()
-    }, 3000)
+    this.getAirPortData()
   },
   beforeDestroy() {
     if (this.loopEvent) {
@@ -404,16 +399,30 @@ export default {
       this.loopEvent = null
     }
   },
+  computed: {
+    singleDay() {
+      return this.startDate === this.endDate
+    }
+  },
   methods: {
-    airPortChange() {
+    resetLoopEvent() {
       if (this.loopEvent) {
         clearInterval(this.loopEvent)
       }
+      this.getTableData()
       const that = this
       this.loopEvent = setInterval(function () {
         that.getTableData()
       }, 3000)
     },
+    airPortChange() {
+      this.hasSetTableScroll = false
+      this.resetLoopEvent()
+    },
+    dateChangeHandler() {
+      this.hasSetTableScroll = false
+      this.resetLoopEvent()
+    },
     async getAirPortData() {
       try {
         const res = await getQuery({
@@ -423,7 +432,7 @@ export default {
         if (Number(res.code) === 0) {
           this.AirportList = this._.orderBy(res.returnData, o => o.PlanDepartureApt)
           this.formData.currentAirport = 'PEK'
-          this.getTableData()
+          this.resetLoopEvent()
         } else {
           this.$message.error(res.message)
         }
@@ -432,19 +441,20 @@ export default {
       }
     },
     tableRowClassName({ row, rowIndex }) {
+      const classes = []
       if (row.flightStatus === 'DLY') {
-        return 'bgl-delayed'
+        classes.push('bgl-delayed')
       }
       if (row.flightStatus === 'CAN') {
-        return 'bgl-canceled'
+        classes.push('bgl-canceled')
       }
       if (row.hasTakenOff === 0) {
+        classes.push('bgl-hui')
         if (rowIndex === this.leaveCount - 1) {
-          return 'bgl-hui redBorder'
-        } else {
-          return 'bgl-hui'
+          classes.push('redBorder')
         }
       }
+      return classes.join(' ')
     },
     headerCellClass({ row, column }) {
       const classes = []
@@ -509,15 +519,29 @@ export default {
       //   this.baggageCount = this.baggageCount+1;
       //    // 这里输入数字即可调用
       // }, 2000);
-      this.setTableScroll()
+      this.$nextTick(() => {
+        this.setTableScroll()
+      })
     },
     setTableScroll() {
-      if (this.hasSetTableScroll) {
+      if (!this.singleDay || this.hasSetTableScroll || this.leaveCount === 0) {
         return
       }
-      const table = this.$refs['table']
-      console.dir(table.$el)
-      // this.$refs['table'].setCurrentRow(this.tableData[this.leaveCount - 1])
+      const table = this.$refs['table'].$el
+      const scrollParent = table.querySelector('.el-table__body-wrapper')
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return
+      }
+      let lastRow
+      if (this.leaveCount === this.tableData.length) {
+        lastRow = table.querySelectorAll('.el-table__body tr')[this.leaveCount - 1]
+      } else {
+        lastRow = table.querySelectorAll('.el-table__body tr')[this.leaveCount]
+      }
+      setTimeout(() => {
+        const scrollTop = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight
+        scrollParent.scrollTo(0, scrollTop)
+      }, 0)
       this.hasSetTableScroll = true
     },
     setNumberTransform() {