From 5470628d7f1761b8b96e735bb9d1e17e628d4183 Mon Sep 17 00:00:00 2001
From: zhouyuejun <505127606@qq.com>
Date: Mon, 26 Nov 2018 18:53:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=88=AA=E7=8F=ADtab?=
 =?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/pages/basic-data-service.ts           |  1 -
 .../main/detail-tab/detail-tab.component.html | 34 +++++++
 .../main/detail-tab/detail-tab.component.scss | 19 ++++
 .../detail-tab/detail-tab.component.spec.ts   | 25 +++++
 .../main/detail-tab/detail-tab.component.ts   | 15 +++
 .../guarantee-tab.component.html              |  3 +
 .../guarantee-tab.component.scss              |  0
 .../guarantee-tab.component.spec.ts           | 25 +++++
 .../guarantee-tab/guarantee-tab.component.ts  | 15 +++
 src/app/pages/main/main.component.html        | 41 ++++----
 src/app/pages/main/main.component.scss        | 23 ++++-
 src/app/pages/main/main.component.ts          | 99 +++++++------------
 src/app/pages/main/main.module.ts             | 17 +++-
 .../related-tab/related-tab.component.html    | 36 +++++++
 .../related-tab/related-tab.component.scss    | 22 +++++
 .../related-tab/related-tab.component.spec.ts | 25 +++++
 .../main/related-tab/related-tab.component.ts | 41 ++++++++
 .../special-tab/special-tab.component.html    |  3 +
 .../special-tab/special-tab.component.scss    |  0
 .../special-tab/special-tab.component.spec.ts | 25 +++++
 .../main/special-tab/special-tab.component.ts | 15 +++
 .../pages/main/vip-tab/vip-tab.component.html |  3 +
 .../pages/main/vip-tab/vip-tab.component.scss |  0
 .../main/vip-tab/vip-tab.component.spec.ts    | 25 +++++
 .../pages/main/vip-tab/vip-tab.component.ts   | 15 +++
 25 files changed, 435 insertions(+), 92 deletions(-)
 create mode 100644 src/app/pages/main/detail-tab/detail-tab.component.html
 create mode 100644 src/app/pages/main/detail-tab/detail-tab.component.scss
 create mode 100644 src/app/pages/main/detail-tab/detail-tab.component.spec.ts
 create mode 100644 src/app/pages/main/detail-tab/detail-tab.component.ts
 create mode 100644 src/app/pages/main/guarantee-tab/guarantee-tab.component.html
 create mode 100644 src/app/pages/main/guarantee-tab/guarantee-tab.component.scss
 create mode 100644 src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts
 create mode 100644 src/app/pages/main/guarantee-tab/guarantee-tab.component.ts
 create mode 100644 src/app/pages/main/related-tab/related-tab.component.html
 create mode 100644 src/app/pages/main/related-tab/related-tab.component.scss
 create mode 100644 src/app/pages/main/related-tab/related-tab.component.spec.ts
 create mode 100644 src/app/pages/main/related-tab/related-tab.component.ts
 create mode 100644 src/app/pages/main/special-tab/special-tab.component.html
 create mode 100644 src/app/pages/main/special-tab/special-tab.component.scss
 create mode 100644 src/app/pages/main/special-tab/special-tab.component.spec.ts
 create mode 100644 src/app/pages/main/special-tab/special-tab.component.ts
 create mode 100644 src/app/pages/main/vip-tab/vip-tab.component.html
 create mode 100644 src/app/pages/main/vip-tab/vip-tab.component.scss
 create mode 100644 src/app/pages/main/vip-tab/vip-tab.component.spec.ts
 create mode 100644 src/app/pages/main/vip-tab/vip-tab.component.ts

diff --git a/src/app/pages/basic-data-service.ts b/src/app/pages/basic-data-service.ts
index 50cee09..38477d0 100644
--- a/src/app/pages/basic-data-service.ts
+++ b/src/app/pages/basic-data-service.ts
@@ -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;
diff --git a/src/app/pages/main/detail-tab/detail-tab.component.html b/src/app/pages/main/detail-tab/detail-tab.component.html
new file mode 100644
index 0000000..a307a76
--- /dev/null
+++ b/src/app/pages/main/detail-tab/detail-tab.component.html
@@ -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>
\ No newline at end of file
diff --git a/src/app/pages/main/detail-tab/detail-tab.component.scss b/src/app/pages/main/detail-tab/detail-tab.component.scss
new file mode 100644
index 0000000..0987231
--- /dev/null
+++ b/src/app/pages/main/detail-tab/detail-tab.component.scss
@@ -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;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/pages/main/detail-tab/detail-tab.component.spec.ts b/src/app/pages/main/detail-tab/detail-tab.component.spec.ts
new file mode 100644
index 0000000..354e6c6
--- /dev/null
+++ b/src/app/pages/main/detail-tab/detail-tab.component.spec.ts
@@ -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();
+  });
+});
diff --git a/src/app/pages/main/detail-tab/detail-tab.component.ts b/src/app/pages/main/detail-tab/detail-tab.component.ts
new file mode 100644
index 0000000..0d070f8
--- /dev/null
+++ b/src/app/pages/main/detail-tab/detail-tab.component.ts
@@ -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() {
+    }
+
+}
diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.html b/src/app/pages/main/guarantee-tab/guarantee-tab.component.html
new file mode 100644
index 0000000..6c7ac1e
--- /dev/null
+++ b/src/app/pages/main/guarantee-tab/guarantee-tab.component.html
@@ -0,0 +1,3 @@
+<p>
+  guarantee-tab works!
+</p>
diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.scss b/src/app/pages/main/guarantee-tab/guarantee-tab.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts b/src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts
new file mode 100644
index 0000000..939dd2f
--- /dev/null
+++ b/src/app/pages/main/guarantee-tab/guarantee-tab.component.spec.ts
@@ -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();
+  });
+});
diff --git a/src/app/pages/main/guarantee-tab/guarantee-tab.component.ts b/src/app/pages/main/guarantee-tab/guarantee-tab.component.ts
new file mode 100644
index 0000000..6bc3b03
--- /dev/null
+++ b/src/app/pages/main/guarantee-tab/guarantee-tab.component.ts
@@ -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() {
+  }
+
+}
diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html
index f378930..d477413 100644
--- a/src/app/pages/main/main.component.html
+++ b/src/app/pages/main/main.component.html
@@ -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>
diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss
index dba3c39..b399af6 100644
--- a/src/app/pages/main/main.component.scss
+++ b/src/app/pages/main/main.component.scss
@@ -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; 
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts
index b420765..b58528c 100644
--- a/src/app/pages/main/main.component.ts
+++ b/src/app/pages/main/main.component.ts
@@ -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();
     }
 
diff --git a/src/app/pages/main/main.module.ts b/src/app/pages/main/main.module.ts
index ca33e84..759e671 100644
--- a/src/app/pages/main/main.module.ts
+++ b/src/app/pages/main/main.module.ts
@@ -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 { }
diff --git a/src/app/pages/main/related-tab/related-tab.component.html b/src/app/pages/main/related-tab/related-tab.component.html
new file mode 100644
index 0000000..ceaee63
--- /dev/null
+++ b/src/app/pages/main/related-tab/related-tab.component.html
@@ -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>
diff --git a/src/app/pages/main/related-tab/related-tab.component.scss b/src/app/pages/main/related-tab/related-tab.component.scss
new file mode 100644
index 0000000..bf98646
--- /dev/null
+++ b/src/app/pages/main/related-tab/related-tab.component.scss
@@ -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;
+            }
+        }
+    }
+}
diff --git a/src/app/pages/main/related-tab/related-tab.component.spec.ts b/src/app/pages/main/related-tab/related-tab.component.spec.ts
new file mode 100644
index 0000000..f1a101b
--- /dev/null
+++ b/src/app/pages/main/related-tab/related-tab.component.spec.ts
@@ -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();
+  });
+});
diff --git a/src/app/pages/main/related-tab/related-tab.component.ts b/src/app/pages/main/related-tab/related-tab.component.ts
new file mode 100644
index 0000000..d675968
--- /dev/null
+++ b/src/app/pages/main/related-tab/related-tab.component.ts
@@ -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() {
+    }
+
+}
diff --git a/src/app/pages/main/special-tab/special-tab.component.html b/src/app/pages/main/special-tab/special-tab.component.html
new file mode 100644
index 0000000..3bbe68b
--- /dev/null
+++ b/src/app/pages/main/special-tab/special-tab.component.html
@@ -0,0 +1,3 @@
+<p>
+  special-tab works!
+</p>
diff --git a/src/app/pages/main/special-tab/special-tab.component.scss b/src/app/pages/main/special-tab/special-tab.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/main/special-tab/special-tab.component.spec.ts b/src/app/pages/main/special-tab/special-tab.component.spec.ts
new file mode 100644
index 0000000..62591ae
--- /dev/null
+++ b/src/app/pages/main/special-tab/special-tab.component.spec.ts
@@ -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();
+  });
+});
diff --git a/src/app/pages/main/special-tab/special-tab.component.ts b/src/app/pages/main/special-tab/special-tab.component.ts
new file mode 100644
index 0000000..567c917
--- /dev/null
+++ b/src/app/pages/main/special-tab/special-tab.component.ts
@@ -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() {
+  }
+
+}
diff --git a/src/app/pages/main/vip-tab/vip-tab.component.html b/src/app/pages/main/vip-tab/vip-tab.component.html
new file mode 100644
index 0000000..c40f570
--- /dev/null
+++ b/src/app/pages/main/vip-tab/vip-tab.component.html
@@ -0,0 +1,3 @@
+<p>
+  vip-tab works!
+</p>
diff --git a/src/app/pages/main/vip-tab/vip-tab.component.scss b/src/app/pages/main/vip-tab/vip-tab.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/main/vip-tab/vip-tab.component.spec.ts b/src/app/pages/main/vip-tab/vip-tab.component.spec.ts
new file mode 100644
index 0000000..14b2213
--- /dev/null
+++ b/src/app/pages/main/vip-tab/vip-tab.component.spec.ts
@@ -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();
+  });
+});
diff --git a/src/app/pages/main/vip-tab/vip-tab.component.ts b/src/app/pages/main/vip-tab/vip-tab.component.ts
new file mode 100644
index 0000000..fb55dae
--- /dev/null
+++ b/src/app/pages/main/vip-tab/vip-tab.component.ts
@@ -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() {
+  }
+
+}