季度计划-勾选复选框“详细信息”、“航班关联信息”

src/app/pages/seasonal-plan/detail-tab/detail-tab.component.html

@@ -0,0 +1,20 @@
+<div class="tab-container">
+    <!-- <div class="hr-line">描述类 -----------------------------------------</div> -->
+    <div class="message-container">
+        <p class="mt-2"><label>航班号：</label>{{flight.flightNumber}}</p>
+        <p><label>航班季度：</label>{{flight.seasonRecId}}</p>
+        <p><label>国际代码：</label>{{flight.internationalCode}}</p>
+        <p><label>航空公司：</label>{{flight.airlineChnName}}</p>
+        <p><label>航线类别：</label>{{flight.routeType}}</p>
+        <p><label>航班类别：</label>{{flight.flightTypeCode}}</p>
+        <p><label>航班任务：</label>{{flight.flightTask}}</p>
+        <p><label>运营日：</label>{{flight.operationDays}}</p>
+        <p><label>开始日期：</label>{{flight.startDate}}</p>
+        <p><label>结束日期：</label>{{flight.endDate}}</p>
+        <p><label>航线：</label>{{flight.startAirport}}</p>
+        <p><label>到达/出发：</label>{{flight.arriOrDept}}</p>
+        <p><label>到达时间：</label>{{flight.arrivalTime}}</p>
+        <p><label>出发时间：</label>{{flight.departureTime}}</p>
+        <p><label>机型：</label>{{flight.aircraftTypeCode}}</p>
+    </div>
+</div>

src/app/pages/seasonal-plan/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: 80px;
+                text-align: right;
+            }
+        }
+    }
+}

src/app/pages/seasonal-plan/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();
+  });
+});

src/app/pages/seasonal-plan/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() {
+    }
+
+}

src/app/pages/seasonal-plan/related-tab/related-tab.component.html

@@ -0,0 +1,19 @@
+<div class="tab-container">
+    <div class="mb-4 fieldset-card">
+        <fieldset>
+            <legend>共享航班代码</legend>
+            <div>
+                <p>共享航班号：{{lines.flightNumber}}</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>

src/app/pages/seasonal-plan/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;
+            }
+        }
+    }
+}

src/app/pages/seasonal-plan/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();
+  });
+});

src/app/pages/seasonal-plan/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 && !this.lines) {
+            this.airports = this.lines.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(this.lines[i].departureTime), scat: timeFormatter(this.lines[i].arrivalTime) }
+            }
+        } else if (!this.lines && this.lines) {
+            this.airports = this.lines.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(this.lines[i].departureTime), scat: timeFormatter(this.lines[i].arrivalTime) }
+            }
+        } else {
+            // this.lines[this.lines.length - 1] = this.lines[0];
+            // let concatArray =  this.lines.arrivalTime.slice(1);
+            // let linkAirport = this.lines.arrivalTime.concat(concatArray)
+            this.airports = this.lines.startAirport.split(' - ');
+            for (let i = 0; i < this.airports.length; i++) {
+                this.airports[i] = { airport: this.airports[i], scdt: timeFormatter(this.lines.departureTime), scat: timeFormatter(this.lines.arrivalTime) }
+            }
+        }
+
+    };
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/pages/seasonal-plan/seasonal-plan.component.html

@@ -22,7 +22,7 @@
                       <option value="aircraftTypeCode">机型</option>
                       <option value="flyingDistance">飞行距离(千米)</option>
                       <option value="flyingTime">飞行时间(分钟)</option>
-                      <!-- <option *ngFor="let seasonal of seasonal_lists" [value]="seasonal.COL_CODE">{{seasonal.COL_CN}}</option> -->
+                     <!--  <option *ngFor="let col of col_lists" [value]="col.col_code">{{col.col_chn}}</option> -->
                   </select>
                   <label class="radio-inline custom-radio nowrap mr-4">
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
@@ -105,18 +105,18 @@
         </div>
         <div class="third-condition row">
           <label class="radio-inline custom-checkbox nowrap mr-4">
-              <input type="checkbox">
+              <input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
               <span>航班关联信息</span>
           </label>
           <label class="radio-inline custom-checkbox nowrap mr-4">
-              <input type="checkbox">
+              <input type="checkbox" [(ngModel)]="checkboxGroup.detail" (ngModelChange)="checkboxChange()">
               <span>详细信息</span>
           </label>
       </div>
       </div>
 
       <div class="airline-table">
-          <div id="table-container" class="table-container">
+          <div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                 <table id="table" class="table table-bordered table-striped">
                   <thead>
                       <tr>
@@ -167,6 +167,16 @@
                   </tbody>
               </table>
           </div>
+          <div class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
+            <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
+                <nz-tab nzTitle="关联信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.related">
+                    <app-related-tab [flight]="row_state"></app-related-tab>
+                </nz-tab>
+                <nz-tab nzTitle="详细信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.detail">
+                    <app-detail-tab [flight]="row_state"></app-detail-tab>
+                </nz-tab>
+            </nz-tabset>
+        </div>
       </div>
   </div>
 </div>

src/app/pages/seasonal-plan/seasonal-plan.component.scss

@@ -1,7 +1,8 @@
 .main-page {
+    position: relative;
     width: 100%;
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
@@ -29,6 +30,7 @@
         }
         .airline-table{
             .table-container{
+                display: inline-block;
                 // border: 1px solid #ccc;
                 width: 100%;
                 height: 700px;
@@ -45,11 +47,70 @@
                     th{
                         background-color: #ddd;
                     }
-                    th,td{
+                    /* th,td{
                         // border: none;
                         text-align: center;
+                    } */
+                }
+                &::-webkit-scrollbar {
+                    width: 15px;
+                    height: 15px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    /*滚动条里面小方块*/
+                    background: rgba(165, 207, 222, 1);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    background: rgba(0, 0, 0, 0.06);
+                    border-radius: 10px;
                 }
             }
+            .airline-message {
+                display: inline-block;
+                // box-shadow: 0 0 1px .5px #ddd;
+                vertical-align: top;
+                width: 0;
+                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;
+                        }
+                    }
+                }
+                &::-webkit-scrollbar {
+                    width: 15px;
+                    height: 15px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    /*滚动条里面小方块*/
+                    background: rgba(165, 207, 222, 1);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    background: rgba(0, 0, 0, 0.06);
+                    border-radius: 10px;
+                }
+            }
+            .table-c {
+                width: 75%;
+            }
+            .table-o {
+                width: 100%;
+            }
+            .tab-c {
+                width: 0;
+                display: none;
+            }
+            .tab-o {
+                width: 24%;
             }
         }
     }

src/app/pages/seasonal-plan/seasonal-plan.component.ts

@@ -15,6 +15,12 @@ export class SeasonalPlanComponent implements OnInit {
         private basicDataService: BasicDataService
     ) { }
 
+    //勾选复选框
+    public checkboxGroup = {
+        'related': false,
+        'detail': false
+    }
+
     // 搜索条件
     SEARCH = '';    //手动输入条件
     FLT_POS = 1;    //过滤还是定位
@@ -27,6 +33,7 @@ public filterItems = {
         arriOrDept: '', //到达/出发
         flightTask: '',    //航班任务
     }
+    public tabClose: boolean = true;
 
     seasonals : Array<any>; 
     airlines : Array<any>; //航空公司
@@ -165,6 +172,30 @@ basicDataTransHandle() {
         })
     }
 
+    /**
+     * 复选框勾选事件
+     */
+    checkboxChange() {
+        for (const key in this.checkboxGroup) {
+            if (this.checkboxGroup.hasOwnProperty(key)) {
+                if (this.checkboxGroup[key]) {
+                    this.tabClose = false;
+                    break;
+                } else {
+                    this.tabClose = true;
+                    continue;
+                }
+            }
+        }
+    }
+
+    /**
+     * tab项切换事件
+     */
+    nzClick() {
+        
+    }
+
     /**
      * 刷新
      */
@@ -490,7 +521,9 @@ inputPosition(filterData) {
         }
             let tr = $(".selected");
             let objTr = tr[0];
+            if (objTr) {
                 $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
             }
+        }
 
     }

src/app/pages/seasonal-plan/seasonal-plan.module.ts

@@ -3,12 +3,20 @@ import { CommonModule } from '@angular/common';
 import { SeasonalPlanComponent } from './seasonal-plan.component';
 import { SeasonalPlanRouting } from './seasonal-plan-routing.module'
 import { FormsModule } from '@angular/forms';
+import { NgZorroAntdModule } from 'ng-zorro-antd'
+import { RelatedTabComponent } from './related-tab/related-tab.component';
+import { DetailTabComponent } from './detail-tab/detail-tab.component';
 @NgModule({
     imports: [
         CommonModule,
         SeasonalPlanRouting,
+        NgZorroAntdModule,
         FormsModule
     ],
-    declarations: [SeasonalPlanComponent]
+    declarations: [
+        RelatedTabComponent,
+        DetailTabComponent,
+        SeasonalPlanComponent
+    ]
 })
 export class SeasonalPlanModule { }