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

2018-12-06 11:11:25 +08:00
parent 47d5d8b223
commit 611227ba5c
12 changed files with 746 additions and 448 deletions
@@ -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>
@@ -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;
+            }
+        }
+    }
+}
@@ -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,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>
@@ -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 && !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() {
+    }
+
+}
@@ -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>
@@ -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%;
            }
        }
    }
@@ -13,27 +13,34 @@ export class SeasonalPlanComponent implements OnInit {
    constructor(
        private httpCilent: HttpClientService,
        private basicDataService: BasicDataService
-) { }
+    ) { }

-// 搜索条件
-SEARCH = '';    //手动输入条件
-FLT_POS = 1;    //过滤还是定位
-SEL_COL = '';   //选择列名
+    //勾选复选框
+    public checkboxGroup = {
+        'related': false,
+        'detail': false
+    }

-public filterItems = {
+    // 搜索条件
+    SEARCH = '';    //手动输入条件
+    FLT_POS = 1;    //过滤还是定位
+    SEL_COL = '';   //选择列名
+
+    public filterItems = {
        airlineId: '',    //航空公司
        routeType: '',  //航线类别
        flightTypeCode: '',  //航班类别
        arriOrDept: '', //到达/出发
        flightTask: '',    //航班任务
-}
+    }
+    public tabClose: boolean = true;

-seasonals : Array<any>; 
-airlines : Array<any>; //航空公司
-public row_state: any = { renderFlight: {} };
-public render_data: Array<object> = [];  //显示数据，即需要显示的数据
-public return_data: Array<object> = []; //下拉框显示数据
-ngOnInit() {
+    seasonals : Array<any>; 
+    airlines : Array<any>; //航空公司
+    public row_state: any = { renderFlight: {} };
+    public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+    public return_data: Array<object> = []; //下拉框显示数据
+    ngOnInit() {
        /* 获取季度计划信息 */
        this.httpCilent.get('/adminapi/schedule/flightSchdSeasons').subscribe(
            data => {
@@ -156,42 +163,66 @@ ngOnInit() {
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        tableCont.addEventListener('scroll',scrollHandle);
-}
-//航空公司名称数据转换处理
-basicDataTransHandle() {
+    }
+    //航空公司名称数据转换处理
+    basicDataTransHandle() {
        this.render_data.forEach(item => {
            let airlineLinkIndex = this.airlines.findIndex(val => val.airlineId === item['airlineId']);
            item['airlineChnName'] = this.airlines[airlineLinkIndex].airlineName;
        })
-}
+    }

-/**
+    /**
+     * 复选框勾选事件
+     */
+    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() {
+        
+    }
+
+    /**
     * 刷新
     */
-refresh() {
+    refresh() {
        this.render_data.reverse();
-}
+    }

-/**
+    /**
     * 选中某行
     * @param i 
     */
-selectRow(i) {
+    selectRow(i) {
        this.row_state = i;
-}
+    }

-//输入框回车事件
-inputEnter() {
+    //输入框回车事件
+    inputEnter() {
        if (this.FLT_POS === 1) {
            this.inputFilter(this.seasonals)
        } else {
            this.inputFilter(this.seasonals)
            this.inputPosition(this.seasonals)
        }
-}
+    }

-//下拉框选择筛选
-selectChange() {
+    //下拉框选择筛选
+    selectChange() {
        this.return_data = this.seasonals.filter(item=>{
            let is_satis = true;
            if(item['routeType'] == '国内'){
@@ -373,10 +404,10 @@ selectChange() {
            }
        });
        this.render_data = this.return_data;
-}
+    }

-//输入框筛选
-inputFilter(filterData) {
+    //输入框筛选
+    inputFilter(filterData) {
        if (this.SEARCH) {
            if (this.SEL_COL) {
                let sel_col = this.SEL_COL;
@@ -426,12 +457,12 @@ inputFilter(filterData) {
        }
        this.render_data = filterData;
        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-}
+    }

-positionArray: Array<any> = [];
-positionArrayIndex: number = 0;
-//输入框定位
-inputPosition(filterData) {
+    positionArray: Array<any> = [];
+    positionArrayIndex: number = 0;
+    //输入框定位
+    inputPosition(filterData) {
        let transArray = []
        if (this.SEL_COL) {
            let sel_col = this.SEL_COL;
@@ -490,7 +521,9 @@ inputPosition(filterData) {
        }
            let tr = $(".selected");
            let objTr = tr[0];
+            if (objTr) {
                $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
            }
+        }

-}
+    }
@@ -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 { }