添加航班tab栏

2018-11-26 18:53:23 +08:00
parent b8f0b8f5f1
commit 5470628d7f
25 changed files with 435 additions and 92 deletions
@@ -84,7 +84,6 @@ export class BasicDataService {
                terminalAreaRes,
                airlineRes
            ]) => {
-                console.log('---')
                this.flightStatus = flightStatusRes.body;
                this.flightStatus_subject.next(flightStatusRes.body);
                this.checkin_group = checkinGroupRes.body;
@@ -0,0 +1,34 @@
+<div class="tab-container">
+    <div class="hr-line">描述类 -----------------------------------------</div>
+    <div class="message-container">
+        <p class="mt-2"><label>航班号：</label>{{flight.renderFlight.FLNO}}</p>
+        <p><label>航空公司：</label>{{flight.renderFlight.ALCD}}</p>
+        <p><label>航线类别：</label>{{flight.renderFlight.FLIN}}</p>
+        <p><label>航班类别：</label>{{flight.renderFlight.FLTY}}</p>
+        <!-- <p><label>航班任务：</label>{{flight.}}</p> -->
+        <p><label>航线：</label>{{flight.renderFlight.ERUT}}</p>
+        <p><label>航班机型：</label>{{flight.renderFlight.ACFT}}</p>
+        <p><label>到达/出发：</label>{{flight.renderFlight.MVIN}}</p>
+        <p><label>飞机号：</label>{{flight.renderFlight.RENO}}</p>
+        <p><label>当前状态：</label>{{flight.renderFlight.FTSS}}</p>
+    </div>
+    <div class="hr-line">资源类 -----------------------------------------</div>
+    <div class="message-container">
+        <p class="mt-2"><label>停机位：</label>{{flight.renderFlight.STND}}</p>
+        <p><label>登机门：</label>{{flight.renderFlight.GATE}}</p>
+        <p><label>值机柜台：</label>{{flight.renderFlight.CHKC}}</p>
+        <p><label>行李传送带：</label>{{flight.renderFlight.CHUT}}</p>
+    </div>
+    <div class="hr-line">时间类 -----------------------------------------</div>
+    <div class="message-container">
+        <p class="mt-2"><label>计划到达/出发：</label>{{flight.renderFlight.SODT}}</p>
+        <p><label>预计到达/出发：</label>{{flight.renderFlight.ESTT}}</p>
+        <p><label>实际到达/出发：</label>{{flight.renderFlight.ACTT}}</p>
+        <p><label>上轮档：</label>{{flight.renderFlight.CHTM_ON}}</p>
+        <p><label>下轮档：</label>{{flight.renderFlight.CHTM_OFF}}</p>
+        <p><label>值机开始：</label>{{flight.renderFlight.COTM}}</p>
+        <p><label>值机结束：</label>{{flight.renderFlight.CCTM}}</p>
+        <p><label>开始登机：</label>{{flight.renderFlight.BOTM}}</p>
+        <p><label>登机结束：</label>{{flight.renderFlight.GCTM}}</p>
+    </div>
+</div>
@@ -0,0 +1,19 @@
+.tab-container{
+    padding: 10px;
+    height: 635px;
+    overflow: auto;
+    border: 1px solid #ccc;
+    .hr-line{
+        font-weight: bold;
+    }
+    .message-container{
+        padding: 5px 10px 5px 10px;
+        p{
+            margin: 0;
+            label{
+                width: 120px;
+                text-align: right;
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailTabComponent } from './detail-tab.component';
+
+describe('DetailTabComponent', () => {
+  let component: DetailTabComponent;
+  let fixture: ComponentFixture<DetailTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-detail-tab',
+    templateUrl: './detail-tab.component.html',
+    styleUrls: ['./detail-tab.component.scss']
+})
+export class DetailTabComponent implements OnInit {
+    @Input() flight;
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
@@ -0,0 +1,3 @@
+<p>
+  guarantee-tab works!
+</p>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuaranteeTabComponent } from './guarantee-tab.component';
+
+describe('GuaranteeTabComponent', () => {
+  let component: GuaranteeTabComponent;
+  let fixture: ComponentFixture<GuaranteeTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GuaranteeTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GuaranteeTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-guarantee-tab',
+  templateUrl: './guarantee-tab.component.html',
+  styleUrls: ['./guarantee-tab.component.scss']
+})
+export class GuaranteeTabComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
@@ -119,7 +119,7 @@
                </label>
                <label class="radio-inline custom-checkbox nowrap mr-4">
                    <input type="checkbox">
-                    <span>航线类别</span>
+                    <span>详细信息</span>
                </label>
                <label class="radio-inline custom-checkbox nowrap mr-4">
                    <input type="checkbox">
@@ -146,32 +146,31 @@
                        </tr>
                    </thead>
                    <tbody>
-                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
+                        <tr *ngFor="let airline_row of render_data;let i = index;last as isLast" (click)="selectRow(airline_row)"
                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                            <td>{{i+1}}</td>
-                            <td></td>
+                            <td>{{isLast}}</td>
                            <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                            <span *ngIf="getLast(isLast)"></span>
                        </tr>
                    </tbody>
                </table>
-
-                <!-- <nz-table #nzTable nzBordered [nzData]="render_data" [nzFrontPagination]="false" [nzScroll]="{ y: '700px' }">
-                    <thead>
-                        <tr>
-                            <th nzWidth="50px">序号</th>
-                            <th nzWidth="80px">重要提示</th>
-                            <th nzWidth="80px" *ngFor="let airline_col of col_lists">{{airline_col.COL_CN}}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let airline_row of nzTable.data;let i = index" (click)="selectRow(airline_row)"
-                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
-                            <td>{{i+1}}</td>
-                            <td></td>
-                            <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
-                        </tr>
-                    </tbody>
-                </nz-table> -->
+            </div>
+            <div class="airline-message">
+                <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
+                    <nz-tab nzTitle="关联信息" (nzClick)="nzClick()">
+                        <app-related-tab [flight]="row_state"></app-related-tab>
+                    </nz-tab>
+                    <nz-tab nzTitle="详细信息" (nzClick)="nzClick()">
+                        <app-detail-tab [flight]="row_state"></app-detail-tab>
+                    </nz-tab>
+                    <nz-tab nzTitle="保障信息" (nzClick)="nzClick()">
+                        <app-guarantee-tab></app-guarantee-tab>
+                    </nz-tab>
+                    <nz-tab nzTitle="VIP信息" (nzClick)="nzClick()">
+                        <app-vip-tab></app-vip-tab>
+                    </nz-tab>
+                </nz-tabset>
            </div>
        </div>
    </div>
@@ -29,8 +29,9 @@
        }
        .airline-table{
            .table-container{
+                display: inline-block;
                // border: 1px solid #ccc;
-                width: 100%;
+                width: 75%;
                height: 700px;
                overflow: auto;
                box-shadow: 0 0 1px .5px #ddd;
@@ -51,6 +52,26 @@
                    }
                }
            }
+            .airline-message{
+                display: inline-block;
+                // box-shadow: 0 0 1px .5px #ddd;
+                vertical-align: top;
+                width: 24%;
+                margin-left: 1%;
+                height: 700px;
+                /deep/ .ant-tabs-bar{
+                    border-bottom: 10px solid skyblue;
+                    .ant-tabs-tab{
+                        padding: 0 5px;
+                        &.ant-tabs-tab-active{
+                            background: skyblue;
+                            /* border-color: skyblue; */
+                            color: rgba(0,0,0,0.65);
+                            padding-bottom: 0; 
+                        }
+                    }
+                }
+            }
        }
    }
 }
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';

+import { ToastService } from '../../components/toast/toast.service';
+import { ToastConfig, ToastType } from '../../components/toast/toast-model';
+
 import { HttpClientService } from '../../services/http-client.service';
 import { BasicDataService } from '../basic-data-service'

@@ -42,8 +45,11 @@ export class MainComponent implements OnInit {
    constructor(
        private basicDataService: BasicDataService,
        private httpCilent: HttpClientService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) { }
+        private changeDetectorRef: ChangeDetectorRef,
+        private toastService: ToastService,
+    ) {
+        console.log(new Date().getTime())
+     }

    //各项基础数据
    public flightStatus: Array<any>;
@@ -209,6 +215,15 @@ export class MainComponent implements OnInit {
                if (this.airports && this.airports.length > 0) {
                    this.basicDataTransHandle();
                } else {
+                    setTimeout(() => {
+                        if (this.airports && this.airports.length > 0) {
+
+                        } else {
+                            const toastCfg = new ToastConfig(ToastType.ERROR, '', '基础数据获取失败！', 3000);
+                            this.toastService.toast(toastCfg);
+                            this.doSequence(this.combined_data);
+                        }
+                    }, 5000);
                    this.basicDataService.flightStatus_subject.subscribe(
                        val => this.flightStatus = val
                    );
@@ -240,70 +255,12 @@ export class MainComponent implements OnInit {
        tableCont.addEventListener('scroll', scrollHandle)
    }

-    /**
-     * 获取基础数据
-     */
-    // getBasicData() {
-    //     this.checkin_group = this.basicDataService.checkin_group;
-    //     this.basicDataService.checkin_group_subject.subscribe(
-    //         val => this.checkin_group = val
-    //     );
-    //     this.gate = this.basicDataService.gate;
-    //     this.basicDataService.gate_subject.subscribe(
-    //         val => this.gate = val
-    //     );
-    //     this.terminals = this.basicDataService.terminal;
-    //     this.basicDataService.terminal_subject.subscribe(
-    //         val => {
-    //             this.terminals = val;
-    //             this.changeDetectorRef.detectChanges();
-    //         }
-    //     );
-    //     this.chut = this.basicDataService.chut;
-    //     this.basicDataService.chut_subject.subscribe(
-    //         val => this.chut = val
-    //     );
-    //     this.stand = this.basicDataService.stand;
-    //     this.basicDataService.stand_subject.subscribe(
-    //         val => this.stand = val
-    //     );
-    //     this.carousel = this.basicDataService.carousel;
-    //     this.basicDataService.carousel_subject.subscribe(
-    //         val => this.carousel = val
-    //     );
-    //     this.checkin_desk = this.basicDataService.checkin_desk;
-    //     this.basicDataService.checkin_desk_subject.subscribe(
-    //         val => this.checkin_desk = val
-    //     );
-    //     this.airports = this.basicDataService.airport;
-    //     this.basicDataService.airport_subject.subscribe(
-    //         val => this.airports = val
-    //     );
-    //     this.citys = this.basicDataService.city;
-    //     this.basicDataService.city_subject.subscribe(
-    //         val => this.citys = val
-    //     );
-    //     this.aircraft_type = this.basicDataService.aircraft_type;
-    //     this.basicDataService.aircraft_type_subject.subscribe(
-    //         val => this.aircraft_type = val
-    //     );
-    //     this.aircraft = this.basicDataService.aircraft;
-    //     this.basicDataService.aircraft_subject.subscribe(
-    //         val => this.aircraft = val
-    //     );
-    //     this.terminal_area = this.basicDataService.terminal_area;
-    //     this.basicDataService.terminal_area_subject.subscribe(
-    //         val => this.terminal_area = val
-    //     );
-    //     this.airlines = this.basicDataService.airline;
-    //     this.basicDataService.airline_subject.subscribe(
-    //         val => {
-    //             this.airlines = val;
-    //             this.changeDetectorRef.detectChanges();
-    //         }
-    //     );
-    //     this.changeDetectorRef.detectChanges();
-    // }
+    getLast(isLast){
+        if(isLast){
+            console.log('666666');
+        }
+    }
+

    basicDataTransHandle() {
        this.combined_data.forEach(item => {
@@ -392,6 +349,13 @@ export class MainComponent implements OnInit {

        this.render_data = sequenceData;
        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+        console.log(new Date().getTime() +'---');
+        this.changeDetectorRef.detectChanges();
+        console.log(new Date().getTime() +'---');
+         
+    }
+
+    nzClick(){
        this.changeDetectorRef.detectChanges();
    }

@@ -431,6 +395,7 @@ export class MainComponent implements OnInit {
     * 下拉框选择筛选
     */
    selectChange() {
+        console.log(new Date().getTime() + '-----');
        let filter_data = [];
        let filterItems = this.filterItems;
        this.combined_data.forEach(item => {
@@ -573,6 +538,7 @@ export class MainComponent implements OnInit {
        this.render_data = filterData;
        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
        this.changeDetectorRef.detectChanges();
+        console.log(new Date().getTime() + '=====');
    }

    /**
@@ -956,6 +922,7 @@ export class MainComponent implements OnInit {
     */
    selectRow(i) {
        this.row_state = i;
+        // console.log(i)
        this.changeDetectorRef.detectChanges();
    }

@@ -5,8 +5,12 @@ import { NgZorroAntdModule } from 'ng-zorro-antd'

 import { PipesModule } from '../../pipes/pipes.module';
 import { MainComponent } from './main.component';
-import { MainRoutingModule } from './main-routing.module'
-// import {BasicDataService} from '../basic-data-service'
+import { MainRoutingModule } from './main-routing.module';
+import { RelatedTabComponent } from './related-tab/related-tab.component';
+import { DetailTabComponent } from './detail-tab/detail-tab.component';
+import { GuaranteeTabComponent } from './guarantee-tab/guarantee-tab.component';
+import { VipTabComponent } from './vip-tab/vip-tab.component';
+import { SpecialTabComponent } from './special-tab/special-tab.component';

@NgModule({
    imports: [
@@ -17,7 +21,14 @@ import { MainRoutingModule } from './main-routing.module'
        PipesModule,
        MainRoutingModule
    ],
-    declarations: [MainComponent],
+    declarations: [
+        MainComponent, 
+        RelatedTabComponent, 
+        DetailTabComponent, 
+        GuaranteeTabComponent, 
+        VipTabComponent, 
+        SpecialTabComponent
+    ],
    providers:[]
 })
 export class MainModule { }
@@ -0,0 +1,36 @@
+<div class="tab-container">
+    <div class="mb-4 fieldset-card">
+        <fieldset>
+            <legend>共享航班代码</legend>
+            <div>
+                <p>共享航班号：{{lines['renderFlight'].CSFT}}</p>
+            </div>
+        </fieldset>
+    </div>
+    <div class="mb-4 fieldset-card">
+        <fieldset>
+            <legend>经停机场</legend>
+            <div>
+                <p *ngFor="let airport of airports"><label>{{airport.airport}}</label>（到达 &nbsp;&nbsp;{{airport.scat?airport.scat:'__ : __'}} &nbsp;&nbsp;| &nbsp;&nbsp;出发 &nbsp;&nbsp;{{airport.scdt?airport.scdt:'__ : __'}}）</p>
+                
+            </div>
+        </fieldset>
+    </div>
+    <div class="mb-4 fieldset-card">
+        <fieldset>
+            <legend>资源使用安排</legend>
+            <div>
+                <p><label>登机门：</label>{{lines['renderFlight'].GATE}}</p>
+                <p><label>停机位：</label>{{lines['renderFlight'].STND}}</p>
+                <p><label>值机柜台：</label>{{lines['renderFlight'].CHKC}}</p>
+                <p><label>行李转盘：</label>{{lines['renderFlight'].BELT}}</p>
+            </div>
+        </fieldset>
+    </div>
+    <div class="mb-4 fieldset-card">
+        <fieldset>
+            <legend>航班状态记录</legend>
+            <p>{{lines['renderFlight'].FTSS}}</p>
+        </fieldset>
+    </div>
+</div>
@@ -0,0 +1,22 @@
+.tab-container {
+    padding: 10px 10px;
+    height: 635px;
+    overflow: auto;
+    border: 1px solid #ccc;
+    .fieldset-card {
+        fieldset {
+            padding: 5px 10px 20px 10px;
+            border: 1px solid #ccc;
+            legend {
+                width: auto;
+                padding: 0 5px;
+                margin: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            p{
+                margin: 0;
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RelatedTabComponent } from './related-tab.component';
+
+describe('RelatedTabComponent', () => {
+  let component: RelatedTabComponent;
+  let fixture: ComponentFixture<RelatedTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RelatedTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RelatedTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,41 @@
+import { Component, OnInit, Input } from '@angular/core';
+import timeFormatter from '../../../utils/time-formatter';
+
+@Component({
+    selector: 'app-related-tab',
+    templateUrl: './related-tab.component.html',
+    styleUrls: ['./related-tab.component.scss']
+})
+export class RelatedTabComponent implements OnInit {
+    public lines;
+    public airports;
+    @Input() set flight(flight) {
+        this.lines = Object.assign({}, flight);
+        if (this.lines.preFlight && !this.lines.reaFlight) {
+            this.airports = this.lines.renderFlight.ERUT.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(this.lines.preFlight.ERUT[i].SCDT), scat: timeFormatter(this.lines.preFlight.ERUT[i].SCAT) }
+            }
+        } else if (!this.lines.preFlight && this.lines.reaFlight) {
+            this.airports = this.lines.renderFlight.ERUT.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(this.lines.reaFlight.ERUT[i].SCDT), scat: timeFormatter(this.lines.reaFlight.ERUT[i].SCAT) }
+            }
+        } else {
+            this.lines.preFlight.ERUT[this.lines.preFlight.ERUT.length - 1]['SCDT'] = this.lines.reaFlight.ERUT[0]['SCDT'];
+            let concatArray =  this.lines.reaFlight.ERUT.slice(1);
+            let linkAirport = this.lines.preFlight.ERUT.concat(concatArray)
+            this.airports = this.lines.renderFlight.ERUT.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(linkAirport[i].SCDT), scat: timeFormatter(linkAirport[i].SCAT) }
+            }
+        }
+
+    };
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
@@ -0,0 +1,3 @@
+<p>
+  special-tab works!
+</p>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpecialTabComponent } from './special-tab.component';
+
+describe('SpecialTabComponent', () => {
+  let component: SpecialTabComponent;
+  let fixture: ComponentFixture<SpecialTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpecialTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpecialTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-special-tab',
+  templateUrl: './special-tab.component.html',
+  styleUrls: ['./special-tab.component.scss']
+})
+export class SpecialTabComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
@@ -0,0 +1,3 @@
+<p>
+  vip-tab works!
+</p>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VipTabComponent } from './vip-tab.component';
+
+describe('VipTabComponent', () => {
+  let component: VipTabComponent;
+  let fixture: ComponentFixture<VipTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VipTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VipTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-vip-tab',
+  templateUrl: './vip-tab.component.html',
+  styleUrls: ['./vip-tab.component.scss']
+})
+export class VipTabComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}