airport-chengdu-web/src/app/pages/seasonal-plan/seasonal-plan.component.html

<div class="main-page" #mainPage>
    <div class="page-content">
        <div class="search-filter mb-3" #searchFilter>
            <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" [(ngModel)]="SEL_COL" name="" id="">
                        <option value="">选择列名</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">
                        <span>过滤</span>
                    </label>
                    <label class="radio-inline custom-radio nowrap mr-4">
                        <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
                        <span>查找定位</span>
                    </label>
                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
                </div>
                <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
                    <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
                    <button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
                </div>
            </div>

            <div class="second-condition mb-3 row" [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}">
                <div class="input-container mr-4">
                    <label for="airlineId">航空公司：&nbsp;&nbsp;</label>
                    <select class="form-control" [(ngModel)]="filterItems.airlineId" (ngModelChange)="selectChange()">
                        <option value=""></option>
                        <option *ngFor="let item of airlines" [value]="item.airlineId">{{item.airlineName}}</option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="routeType">航线类别：&nbsp;&nbsp;</label>
                    <select class="form-control" [(ngModel)]="filterItems.routeType" (ngModelChange)="selectChange()">
                        <option value=""></option>
                        <option value="D">国内</option>
                        <option value="I">国际</option>
                        <option value="M">混合</option>
                        <option value="R">地区</option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="flightTypeCode">航班类别：&nbsp;&nbsp;</label>
                    <select class="form-control" [(ngModel)]="filterItems.flightTypeCode" (ngModelChange)="selectChange()">
                        <option value=""></option>
                        <option *ngFor="let item of flightTypes" [value]="item.flightTypeCode">{{item.flightTypeNameCn}}</option>
                    </select>
                </div>
                <!-- <div class="input-container mr-4">
                    <label for="startDate">查询年份：&nbsp;&nbsp;</label>
                    <input readonly type="text" id="startDate" class="form-control" style="background:transparent;cursor: pointer">
                </div> -->
                <div class="input-container mr-4">
                    <label for="arriOrDept">到达/出发：&nbsp;&nbsp;</label>
                    <select class="form-control" [(ngModel)]="filterItems.arriOrDept" (ngModelChange)="selectChange()">
                        <option value=""></option>
                        <option value="A">到达</option>
                        <option value="D">出发</option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="arriOrDept">查询年份：&nbsp;&nbsp;</label>
                    <select class="form-control" [(ngModel)]="filterYear" (ngModelChange)="selectYearChange($event)">
                        <option *ngFor="let year of yearLists" [value]="year">{{year}}</option>
                    </select>
                </div>
            </div>
            <div class="third-condition row" [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}">
                <label class="radio-inline custom-checkbox nowrap mr-4">
                    <input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
                    <span>航班关联信息</span>
                </label>
                <label class="radio-inline custom-checkbox nowrap mr-4">
                    <input type="checkbox" [(ngModel)]="checkboxGroup.detail" (ngModelChange)="checkboxChange()">
                    <span>详细信息</span>
                </label>
            </div>
        </div>

        <div class="airline-table">
            <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>航班号</th>
                            <th>航班季度</th>
                            <th>国际代码</th>
                            <th>航空公司</th>
                            <th>航线类别</th>
                            <th>航班类别</th>
                            <!-- <th>航班任务</th> -->
                            <th>运营日</th>
                            <th>开始日期</th>
                            <th>结束日期</th>
                            <th>航线</th>
                            <th>进/出港</th>
                            <th>到达时间</th>
                            <th>出发时间</th>
                            <th>机型</th>
                            <th>飞行距离(千米)</th>
                            <th>飞行时间(分钟)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let seasonal of render_data;let i = index" (click)="selectRow(seasonal)" [ngClass]="{'selected':row_state.seasonflightId===seasonal.seasonflightId}">
                            <td>{{i+1}}{{seasonal.seasonflightId}}</td>
                            <td>{{seasonal.flightNumber}}</td>
                            <td>{{seasonal.seasonRecIdChn}}</td>
                            <td>{{seasonal.internationalCode}}</td>
                            <td>{{seasonal.airlineChnName}}</td>
                            <td>{{seasonal.routeTypeChn}}</td>
                            <td>{{seasonal.flightTypeChnName}}</td>
                            <!-- <td>{{seasonal.flightTask}}</td> -->
                            <td>{{seasonal.operationDays}}</td>
                            <td>{{seasonal.startDate}}</td>
                            <td>{{seasonal.endDate}}</td>
                            <td>{{seasonal.AirportChn}}</td>
                            <td>{{seasonal.arriOrDeptChn}}</td>
                            <td>{{seasonal.arrivalTimeTra}}</td>
                            <td>{{seasonal.departureTimeTra}}</td>
                            <td>{{seasonal.aircraftTypeName}}</td>
                            <td>{{seasonal.flyingDistance}}</td>
                            <td>{{seasonal.flyingTime}}</td>
                        </tr>
                    </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>