|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: zk
|
|
|
* @Date: 2022-01-17 10:39:22
|
|
|
- * @LastEditTime: 2022-06-10 10:21:34
|
|
|
+ * @LastEditTime: 2022-06-21 17:51:56
|
|
|
* @LastEditors: your name
|
|
|
* @Description: 中转进港
|
|
|
-->
|
|
|
@@ -61,7 +61,7 @@
|
|
|
collapse-tags
|
|
|
clearable
|
|
|
filterable
|
|
|
- @change="getTableData"
|
|
|
+ @change="resetLoopEvent"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="outgoingAirline">
|
|
|
@@ -76,7 +76,7 @@
|
|
|
collapse-tags
|
|
|
clearable
|
|
|
filterable
|
|
|
- @change="getTableData"
|
|
|
+ @change="resetLoopEvent"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item prop="startDate">
|
|
|
@@ -115,6 +115,7 @@
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
:picker-options="dateRangePickerOptions"
|
|
|
+ @change="dateChangeHandler"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
@@ -153,20 +154,10 @@
|
|
|
placeholder="请输入内容"
|
|
|
prefix-icon="el-icon-search"
|
|
|
clearable
|
|
|
- @clear="inputClear"
|
|
|
@focus="popoverVisible = true"
|
|
|
@blur="popoverVisible = false"
|
|
|
/>
|
|
|
</el-popover>
|
|
|
- <!-- <el-input
|
|
|
- v-model="formData.search"
|
|
|
- style="width: 240px; margin-left: 105px"
|
|
|
- size="small"
|
|
|
- placeholder="请输入内容"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- clearable
|
|
|
- @clear="inputClear"
|
|
|
- /> -->
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button
|
|
|
@@ -214,6 +205,7 @@
|
|
|
:summary-method="summaryMethod"
|
|
|
:span-method="arraySpanMethod"
|
|
|
:header-cell-class-name="headerCellClass"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
:cell-class-name="cellClass"
|
|
|
border
|
|
|
stripe
|
|
|
@@ -449,12 +441,14 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
],
|
|
|
+ loading: false,
|
|
|
AirportList: [],
|
|
|
carrierProps: [],
|
|
|
carrierPropsop: [],
|
|
|
loopEvent: null,
|
|
|
- leaveCount: 0,
|
|
|
+ arrivalCount: 0,
|
|
|
baggageCount: 0,
|
|
|
+ hasSetTableScroll: false,
|
|
|
spanArr: [],
|
|
|
contactDot: 0,
|
|
|
flag: 0
|
|
|
@@ -477,15 +471,32 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$refs['form'].validateField('FlightDate')
|
|
|
- const that = this
|
|
|
- this.loopEvent = setInterval(function () {
|
|
|
- that.getTableData()
|
|
|
- }, 3000)
|
|
|
+ this.getAirPortData()
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- clearInterval(this.loopEvent)
|
|
|
+ if (this.loopEvent) {
|
|
|
+ clearInterval(this.loopEvent)
|
|
|
+ this.loopEvent = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ singleDay() {
|
|
|
+ return this.startDate === this.endDate
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ resetLoopEvent() {
|
|
|
+ this.loading = true
|
|
|
+ this.hasSetTableScroll = false
|
|
|
+ if (this.loopEvent) {
|
|
|
+ clearInterval(this.loopEvent)
|
|
|
+ }
|
|
|
+ this.getTableData()
|
|
|
+ const that = this
|
|
|
+ this.loopEvent = setInterval(function () {
|
|
|
+ that.getTableData()
|
|
|
+ }, 3000)
|
|
|
+ },
|
|
|
headerCellClass({ row, column }) {
|
|
|
const classes = []
|
|
|
const rule = this.tableDataSortRules[column.property]
|
|
|
@@ -494,6 +505,16 @@ export default {
|
|
|
}
|
|
|
return classes.join(' ')
|
|
|
},
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ const classes = []
|
|
|
+ if (row.hasArrived) {
|
|
|
+ classes.push('bgl-hui')
|
|
|
+ if (rowIndex === this.arrivalCount - 1) {
|
|
|
+ classes.push('redBorder')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return classes.join(' ')
|
|
|
+ },
|
|
|
changeView() {
|
|
|
const query = {
|
|
|
...this.formData,
|
|
|
@@ -509,7 +530,12 @@ export default {
|
|
|
airPortChange() {
|
|
|
this.getAviationData()
|
|
|
this.upAviationData()
|
|
|
- // this.getTableData();
|
|
|
+ this.resetLoopEvent()
|
|
|
+ },
|
|
|
+ dateChangeHandler() {
|
|
|
+ this.getAviationData()
|
|
|
+ this.upAviationData()
|
|
|
+ this.resetLoopEvent()
|
|
|
},
|
|
|
// 选择机场
|
|
|
async getAirPortData() {
|
|
|
@@ -523,7 +549,7 @@ export default {
|
|
|
this.formData.currentAirport = 'PEK'
|
|
|
this.getAviationData()
|
|
|
this.upAviationData()
|
|
|
- this.getTableData()
|
|
|
+ this.resetLoopEvent()
|
|
|
} else {
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
@@ -540,7 +566,6 @@ export default {
|
|
|
})
|
|
|
if (Number(res.code) === 0) {
|
|
|
this.carrierProps = res.returnData
|
|
|
- // this.getTableData();
|
|
|
} else {
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
@@ -557,7 +582,6 @@ export default {
|
|
|
})
|
|
|
if (Number(res.code) === 0) {
|
|
|
this.carrierPropsop = res.returnData
|
|
|
- // this.getTableData();
|
|
|
} else {
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
@@ -565,24 +589,6 @@ export default {
|
|
|
console.log('出错了', error)
|
|
|
}
|
|
|
},
|
|
|
- tableRowClassName({ row, rowIndex }) {
|
|
|
- if (row.hasTakenOff === 0) {
|
|
|
- if (rowIndex === this.leaveCount - 1) {
|
|
|
- return 'bgl-hui redBorder'
|
|
|
- } else {
|
|
|
- return 'bgl-hui'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- tableCellClassName({ row, column }) {
|
|
|
- if (
|
|
|
- column.property === 'transfer_all' ||
|
|
|
- column.property === 'departureAnomaly' ||
|
|
|
- column.property === 'riskWarning'
|
|
|
- ) {
|
|
|
- return 'bgl-huang'
|
|
|
- }
|
|
|
- },
|
|
|
// 获取表单下拉框数据
|
|
|
// getFormData(params) {
|
|
|
// this.relatedAirportQuery({
|
|
|
@@ -621,28 +627,29 @@ export default {
|
|
|
dataContent: [...arr]
|
|
|
})
|
|
|
if (Number(res.code) === 0) {
|
|
|
- // this.tableData = this._.sortBy(res.returnData, [
|
|
|
- // "FlightDate",
|
|
|
- // "PlanDepartureTime",
|
|
|
- // ]);
|
|
|
this.initTableData(res.returnData)
|
|
|
} else {
|
|
|
console.log(res.message)
|
|
|
}
|
|
|
+ this.loading = false
|
|
|
} catch (error) {
|
|
|
- clearInterval(this.loopEvent)
|
|
|
+ if (this.loopEvent) {
|
|
|
+ clearInterval(this.loopEvent)
|
|
|
+ this.loopEvent = null
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
console.log('出错了', error)
|
|
|
}
|
|
|
},
|
|
|
initTableData(tableData) {
|
|
|
- // this.leaveCount = 0
|
|
|
+ this.arrivalCount = 0
|
|
|
// this.baggageCount = 0
|
|
|
- // tableData.forEach(item => {
|
|
|
- // if (item.hasTakenOff === 0) {
|
|
|
- // this.leaveCount++
|
|
|
- // }
|
|
|
- // this.baggageCount = this.baggageCount + item.preLoad
|
|
|
- // })
|
|
|
+ tableData.forEach(item => {
|
|
|
+ if (this.hasArrived(item)) {
|
|
|
+ this.arrivalCount++
|
|
|
+ }
|
|
|
+ // this.baggageCount = this.baggageCount + item.preLoad
|
|
|
+ })
|
|
|
this.tableData = this._.sortBy(tableData, [
|
|
|
'PreFlightDate',
|
|
|
'ActualLandingTime',
|
|
|
@@ -655,6 +662,36 @@ export default {
|
|
|
// this.baggageCount = this.baggageCount+1;
|
|
|
// // 这里输入数字即可调用
|
|
|
// }, 2000);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setTableScroll()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hasArrived(flight) {
|
|
|
+ const now = new Date()
|
|
|
+ const ActualLandingTime = new Date(flight.ActualLandingTime.replace('T', ' '))
|
|
|
+ flight['hasArrived'] = now > ActualLandingTime && !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
|
|
|
+ }
|
|
|
+ const lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount - 1]
|
|
|
+ setTimeout(() => {
|
|
|
+ const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
|
|
|
+ const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
|
|
|
+ console.log(scrollMid, scrollMax)
|
|
|
+ if (scrollMid > 0) {
|
|
|
+ const scrollHeight = Math.min(scrollMid, scrollMax)
|
|
|
+ scrollParent.scrollTo(0, scrollHeight)
|
|
|
+ }
|
|
|
+ }, 0)
|
|
|
+ this.hasSetTableScroll = true
|
|
|
},
|
|
|
setNumberTransform() {
|
|
|
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
|
|
|
@@ -679,38 +716,6 @@ export default {
|
|
|
}
|
|
|
this.setNumberTransform()
|
|
|
},
|
|
|
- tableSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
- if (
|
|
|
- [
|
|
|
- 'PreFlightNO',
|
|
|
- 'PreFlightDate',
|
|
|
- 'PreAirport',
|
|
|
- 'ActualLandingTime',
|
|
|
- 'LandingBuild',
|
|
|
- 'Carousel',
|
|
|
- 'StandForLanding'
|
|
|
- // 'inTransferBaggageCount',
|
|
|
- // 'inTransferredBaggageCount',
|
|
|
- // 'FlightNO',
|
|
|
- // 'FlightDate',
|
|
|
- // 'ActualDepartureTime',
|
|
|
- // 'TargetAirport',
|
|
|
- // 'DepartureBuild',
|
|
|
- // 'BordingGate',
|
|
|
- // 'StandForDepartrue',
|
|
|
- // 'outTransferBaggageCount',
|
|
|
- // 'outTransferredBaggageCount',
|
|
|
- // 'timeDifference'
|
|
|
- ].includes(column['property'])
|
|
|
- ) {
|
|
|
- const _row = this.spanArr[rowIndex]
|
|
|
- const _col = _row > 0 ? 1 : 0
|
|
|
- return {
|
|
|
- rowspan: _row,
|
|
|
- colspan: _col
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
for (let i = 0; i < 7; i++) {
|
|
|
if (columnIndex === i) {
|
|
|
@@ -722,21 +727,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // if (columnIndex === 0) {
|
|
|
- // if (rowIndex == 0) {
|
|
|
- // return [3, 1];
|
|
|
- // } else if (rowIndex >= 3) {
|
|
|
- // return [1, 2];
|
|
|
- // } else {
|
|
|
- // return [0, 0];
|
|
|
- // }
|
|
|
- // } else if (columnIndex == 1) {
|
|
|
- // // 第二列的大于3行的清除，避免影响样式
|
|
|
-
|
|
|
- // if (rowIndex >= 3) {
|
|
|
- // return [0, 0];
|
|
|
- // }
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -893,7 +883,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .el-table__body-wrapper {
|
|
|
+ .el-table__body-wrapper,
|
|
|
+ .el-table__fixed-body-wrapper {
|
|
|
tr.bgl-hui {
|
|
|
background: #d2d6df;
|
|
|
td {
|
