实现行李转送带数据展示

This commit is contained in:
714943302@qq.com
2018-11-13 17:23:44 +08:00
parent 3e7771735e
commit 805b774054
5 changed files with 747 additions and 6 deletions
@@ -1,3 +1,47 @@
<p>
chut works!
</p>
<div class="main-page">
<div class="page-content">
<div class="search-filter mb-3">
<div class="first-condition row">
<div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
<select class="mr-4 form-control" name="" id="">
<option value="">选择列名</option>
</select>
<label class="radio-inline custom-radio nowrap mr-4">
<input type="radio" [value]="1" name="filter-position">
<span>过滤</span>
</label>
<label class="radio-inline custom-radio nowrap mr-4">
<input type="radio" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" type="text">
</div>
<div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
<!-- <button type="button" class="btn btn-info mr-3">行李传送带编辑</button>
<button type="button" class="btn btn-info mr-3">打印</button> -->
<button type="button" class="btn btn-info mr-3">刷新</button>
</div>
</div>
</div>
<div class="airline-table">
<div class="table-container">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th *ngFor="let airline_col of chut_lists">{{airline_col.COL_CN}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow($event,i)"
[ngClass]="{'active':row_state===i}">
<td>{{i+1}}</td>
<td *ngFor="let airline_col of chut_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
@@ -0,0 +1,63 @@
.main-page {
width: 100%;
height: calc(100% - 66px);
padding: 15px 10px;
background-color: #fff;
.page-content {
border: 1px solid #ccc;
padding: 10px 20px;
.search-filter {
padding: 0 15px;
.first-condition {
.line-operator-right {
text-align: right;
padding: 0;
.btn-info {
background-color: rgb(122, 156, 204);
border-color: rgb(122, 156, 204);
}
}
}
.input-container {
padding: 0;
> .form-control {
width: 180px;
display: inline-block;
}
}
}
.airline-table{
.table-container{
// border: 1px solid #ccc;
width: 100%;
height: 700px;
overflow: scroll;
table{
width: max-content;
tr{
cursor: pointer;
&.active{
background: rgb(181, 215, 255);
}
}
th,td{
// border: none;
text-align: center;
}
}
}
}
}
}
@media screen and (max-width: 991px) {
.line-operator-right {
text-align: left !important;
}
}
// @media screen and (min-width: 1200px){
// .line-operator-right{
// text-align: left;
// }
// }
+454 -3
View File
@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import dateFormatter from '../../../utils/data-formatter';
@Component({
selector: 'app-chut',
templateUrl: './chut.component.html',
@@ -7,9 +9,458 @@ import { Component, OnInit } from '@angular/core';
})
export class ChutComponent implements OnInit {
constructor() { }
constructor(
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
) { }
ngOnInit() {
public raw_data: Array<object> = []; //原始数据,即航班计划
public combined_data: Array<object> = []; //组合数据,即链接航班,显示信息等组合好之后的数据
public render_data: Array<object> = []; //显示数据,即需要显示的数据
public chut_lists: Array<object>; //列数据
public row_state: number;
public TOP_1 = 1000000000000;
public TOP_2 = 2000000000000;
public TOP_3 = 3000000000000;
public TOP_4 = 4000000000000;
public TOP_5 = 5000000000000;
public TOP_6 = 6000000000000;
public TOP_7 = 7000000000000;
public TOP_8 = 8000000000000;
public TOP_9 = 9000000000000;
public TOP_10 = 10000000000000;
public TOP_11 = 11000000000000;
public TOP_12 = 12000000000000;
public TOP_13 = 13000000000000;
public TOP_14 = 14000000000000;
public filterItems = {
SEARCH: '', //手动输入条件
FLT_POS: 1, //过滤还是定位
/* ALCD: '', //航空公司
FLIN: '', //航线类别
FLTY: '', //航班类别
MVIN: '', //到达/出发
TRML: '', //航站楼
FHAG: '', //机坪代理
MHAG: '', //维护代理
PHAG: '', //旅客代理 */
}
public formatter = {
'MVIN': {
'A': '到达',
'D': '出发',
'DF': '其他'
},
'FLIN': {
'D': '国内',
'I': '国际',
'M': '混合',
'R': '地区',
'DF': '其他'
},
'SODT': dateFormatter,
'ESTT': dateFormatter,
'ACTT': dateFormatter
}
selectRow($event, i) {
this.row_state = i;
alert(i)
}
getColor(col_CODE) {
if (col_CODE === 'SODT') {
return 'skyblue'
} else {
return null
}
}
ngOnInit() {
this.changeDetectorRef.detach();
/* 获取显示列 */
this.httpCilent.get('/assets/mock-data/chut-code.json').subscribe(
data => {
data.sort(function (a, b) {
return (a['COL_ORDER'] - b['COL_ORDER']);
})
this.chut_lists = data;
}
)
/* 获取行李传送带信息 */
this.httpCilent.get('/assets/mock-data/chut-data.json').subscribe(
data => {
//解析数据
data.forEach(element => {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
let render_pre_flight = {};
let render_rea_flight = {};
row_flights['preFlight'] = element;
for (let i = 0; i < this.chut_lists.length; i++) {
let key = this.chut_lists[i]['COL_CODE']
render_flight[key] = typeof (this.formatter[key]) === 'function' ? this.formatter[key](row_flights['preFlight'][key], 1) : this.formatter[key] ? this.formatter[key][row_flights['preFlight'][key]] : row_flights['preFlight'][key];
}
row_flights['renderFlight'] = render_flight;if (element['isLinked']) {
row_flights['preFlight'] = element['linkFlight'];
delete element['linkFlight'];
delete element['isLinked'];
row_flights['reaFlight'] = element;
for (let i = 0; i < this.chut_lists.length; i++) {
let key = this.chut_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1);
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]];
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key];
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
}
row_flights['renderFlight'] = render_flight;
row_flights['renderPreFlight'] = render_pre_flight;
row_flights['renderReaFlight'] = render_rea_flight;
}
this.combined_data.push(row_flights)
})
//排序
this.combined_data.forEach(element => {
element['ORDER'] = this.sequence(element)
// element['ORDER'] = '+' + element['order']
})
this.combined_data.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = this.combined_data
this.changeDetectorRef.detectChanges();
}
)
}
public sequence(flight) {
let dateTag: number = 10;
let dateToCompare = new Date().getTime();
if (!this.isCancled(flight) && !this.isDone(flight) && this.isDelayed(flight)) {
if (this.isLinked(flight)) {
if (this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_1;
}
else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_2;
}
}
else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_3;
}
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_4;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isFlying(flight) && !this.getActualDatetime(flight['preFlight'])) {
if (this.getEstimatedDatetime(flight['preFlight'])) {
dateToCompare = new Date(dateFormatter(this.getEstimatedDatetime(flight['preFlight']))).getTime();
} else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
}
dateTag = this.TOP_5;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isLinked(flight) && this.getActualDatetime(flight['preFlight']) && !this.getActualDatetime(flight['reaFlight'])) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_6;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isDeptFlight(flight) && !this.startBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_7;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && this.isArriFlight(flight) && this.isDone(flight)) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_8;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && this.isOverBoading(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_9;
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && !this.isDone(flight) && !this.isFlying(flight)) {
if (this.isLinked(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_10;
} else if (this.isArriFlight(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
dateTag = this.TOP_11;
}
return dateToCompare + dateTag;
}
if (!this.isCancled(flight) && this.isDone(flight) && (this.isLinked(flight) || this.isDeptFlight(flight))) {
dateToCompare = new Date(dateFormatter(this.getActualDatetime(flight['reaFlight']))).getTime();
dateTag = this.TOP_12;
return dateToCompare + dateTag;
}
if (this.isCancled(flight)) {
if (this.isDeptFlight(flight)) {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['reaFlight']))).getTime();
} else {
dateToCompare = new Date(dateFormatter(this.getScheduledDatetime(flight['preFlight']))).getTime();
}
dateTag = this.TOP_13;
return dateToCompare + dateTag;
}
return this.TOP_14
}
/**
* 过滤机定位
* @param filterItems
* @return
*/
fliter(filterItems, render_data) {
if(filterItems.FLT_POS===1){
//过滤
}else{
//定位
}
}
/**
* 获取航班实际时间
* @param flight
* @return
*/
public getActualDatetime(flight) {
return flight['ACTT'];
}
/**
* 获取航班预计时间
* @param flight
* @return
*/
public getEstimatedDatetime(flight) {
return flight['ESTT']
}
/**
* 获取航班计划时间
* @param flight
* @return
*/
public getScheduledDatetime(flight) {
return flight['SODT']
}
/**
* 判断航班是否是链接航班
* @param flight
* @return
*/
public isLinked(flight) {
if (flight['preFlight'] && flight['reaFlight']) {
return true
} else {
return false
}
}
/**
* 判断航班是否是纯离港航班
* @param flight
* @return
*/
public isDeptFlight(flight) {
if (!flight['preFlight'] && flight['reaFlight']) {
return true
} else {
return false
}
}
/**
* 判断航班是否是纯到港航班
* @param flight
* @return
*/
public isArriFlight(flight) {
if (flight['preFlight'] && !flight['reaFlight']) {
return true;
} else {
return false;
}
}
/**
* 判断航班是否已经前站起飞
* @param flight
* @return
*/
public isFlying(flight) {
if (this.isArriFlight(flight) || this.isLinked(flight)) {
if (flight['preFlight']['PADT']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否取消
* @param flight
* @return
*/
public isCancled(flight) {
if (this.isArriFlight(flight)) {
if (flight['preFlight']['CNCL']) {
return true;
} else {
return false;
}
} else if (this.isDeptFlight(flight)) {
if (flight['reaFlight']['CNCL']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否延误(只针对纯离港航班或链接航班中的离港航班)
* @param flight
* @return
*/
public isDelayed(flight) {
if (this.isDeptFlight(flight) || this.isLinked(flight)) {
if (flight['reaFlight']['DELY']) {
return true
} else {
return false
}
} else {
return false;
}
}
/**
* 判断航班是否已经执行完成
* @param flight
* @return
*/
public isDone(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!this.getActualDatetime(flight['reaFlight'])) {
return false;
} else {
return true;
}
} else if (this.isArriFlight(flight)) {
if (!this.getActualDatetime(flight['preFlight'])) {
return false;
} else {
return true;
}
} else {
return false;
}
}
/**
* 判断航班是否开始登机
* @param flight
* @return
*/
public startBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!flight['reaFlight']['BOTM']) {
return false;
} else {
return true;
}
} else {
return false;
}
}
/**
* 判断航班是否正在登机中
* @param flight
* @return
*/
public isBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (flight['reaFlight']['BOTM'] && !flight['reaFlight']['GCTM']) {
return true;
} else {
return false;
}
} else {
return false;
}
}
/**
* 判断航班是否登机结束
* @param flight
* @return
*/
public isOverBoading(flight) {
if (this.isLinked(flight) || this.isDeptFlight(flight)) {
if (!flight['GCTM']) {
return false;
} else {
return true;
}
} else {
return false;
}
}
}
+12
View File
@@ -0,0 +1,12 @@
[
{
"COL_CODE":"FLNO",
"COL_CN":"行李传送带代码",
"COL_ORDER":"1"
},
{
"COL_CODE":"ALCD",
"COL_CN":"行李传送带名称",
"COL_ORDER":"2"
}
]
+171
View File
@@ -0,0 +1,171 @@
[
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1988,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083618"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
},
{
"topic": "schd",
"value": "{\"ALCD\": \"传送转盘离港\", \"FLNO\": \"CHA\"}",
"offset": 1989,
"partition": 0,
"highWaterOffset": 3975,
"key": "11083248"
}
]