airport-chengdu-web/src/app/pages/historical-data/historical-data.component.html

<div class="main-page">
  <div class="page-content">
      <div class="search-filter mb-3">
          <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 value="">航班号</option>
                      <option value="">飞机号</option>
                      <option value="">航线</option>
                      <option value="">前站起飞时间</option>
                      <option value="">计划到达/出发</option>
                      <option value="">预计到达/出发</option>
                      <option value="">实际到达/出发</option>
                      <option value="">机型</option>
                      <option value="">停机位</option>
                      <option value="">登机门</option>
                      <option value="">商调完成</option>
                      <option value="">值机打开</option>
                      <option value="">值机关闭</option>
                      <option value="">登机开始</option>
                      <option value="">登机结束</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-1">
                  <!-- <button type="button" class="btn btn-info mr-3">打印</button>
                        <button type="button" class="btn btn-info mr-3">航班延误信息修订</button>-->
                  <button type="button" class="btn btn-info mr-3">刷新</button>
              </div>
          </div>

        <div class="second-condition mb-3 row">
          <div class="input-container mr-4">
            <label for="airlineId">航空公司：&nbsp;&nbsp;</label>
            <select  class="form-control"  (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.TT" (ngModelChange)="selectChange()">
                  <option value=""></option>
                  <option value="D">国内</option>
                  <option value="I">国际</option>
                  <option value="M">混合</option>
                  <option value="R">地区</option>
                  <!-- <option *ngFor="let item of seasonals" [value]="item.routeType">{{item.routeType}}</option> -->
              </select>
          </div>
          <div class="input-container mr-4">
            <label for="flightTask">航班任务：&nbsp;&nbsp;</label>
            <select  class="form-control" [(ngModel)]="filterItems.flightTask" (ngModelChange)="selectChange()">
                <option value=""></option>
                <option value="S">正班</option>
                <option value="N">包机</option>
                <option value="E">急救</option>
                <option value="B">专机</option>
                <option value="G">通用</option>
                <option value="J">加班</option>
                <option value="M">军用</option>
                <option value="Q">补班</option>
                <option value="X">其他</option>
                <option value="A">计划外</option>
                <!-- <option *ngFor="let item of seasonals" [value]="item.flightTask">{{item.flightTask}}</option> -->
            </select>
        </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>
                <!-- <option *ngFor="let item of seasonals" [value]="item.arriOrDept">{{item.arriOrDept}}</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 value="T">国航代理</option>
                <option value="G">川航代理</option>
                <!-- <option *ngFor="let item of seasonals" [value]="item.flightTypeCode">{{item.flightTypeCode}}</option> -->
            </select>
        </div>
        <div class="input-container mr-4">
            <label for="">异常状态：&nbsp;&nbsp;</label>
            <select  class="form-control" (ngModelChange)="selectChange()">
                <option value=""></option>
                <!-- <option *ngFor="let item of seasonals" [value]="item.arriOrDept">{{item.arriOrDept}}</option> -->
            </select>
        </div>
      </div>
      <div class="third-condition row">
        <label class="radio-inline custom-checkbox nowrap mr-4">
            <input type="checkbox">
            <span>航班关联信息</span>
        </label>
        <label class="radio-inline custom-checkbox nowrap mr-4">
            <input type="checkbox">
            <span>详细信息</span>
        </label>
        <label class="radio-inline custom-checkbox nowrap mr-4">
            <input type="checkbox">
            <span>保障信息</span>
        </label>
        <label class="radio-inline custom-checkbox nowrap mr-4">
            <input type="checkbox">
            <span>航班VIP信息</span>
        </label>
        <label class="radio-inline custom-checkbox nowrap mr-4">
            <input type="checkbox">
            <span>航班特服信息</span>
        </label>
    </div>
      </div>

      <div class="airline-table">
          <div id="table-container" class="table-container">
              <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>
                          <th>航班任务</th>
                          <th>到达/出发</th>
                          <th>航班代理</th>
                          <th>异常状态</th>-->
                          <th *ngFor="let airline_col of historical_lists">{{airline_col.COL_CN}}</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr *ngFor="let historical of render_data;let i = index" (click)="selectRow(historical)"
                          [ngClass]="{'selected':row_state['renderFlight']===historical['renderFlight']}">
                          <td>{{i+1}}</td>
                          <!--<td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td>
                          <td>{{historical.}}</td> -->
                          <td *ngFor="let airline_col of historical_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{historical['renderFlight'][airline_col.COL_CODE]}}</td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </div>
  </div>
</div>