airport-chengdu-web/src/app/pages/main/main.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" name="" id="">
                        <option value="">选择列名</option>
                    </select>
                    <label class="radio-inline custom-radio nowrap mr-4">
                        <input type="radio" value="" name="filter-position">
                        <span>过滤</span>
                    </label>
                    <label class="radio-inline custom-radio nowrap mr-4">
                        <input type="radio" value="" name="filter-position">
                        <span>查找定位</span>
                    </label>
                    <input class="form-control" type="text">
                </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>
                    <!-- <button type="button" class="btn btn-info">航班动态信息</button> -->
                </div>
            </div>

            <div class="second-condition mb-3 row">
                <div class="input-container mr-4">
                    <label for="">航空公司：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">航线类别：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">航班类别：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <!-- <div class="input-container mr-4">
                    <label for="">航班任务：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div> -->
                <div class="input-container mr-4">
                    <label for="">到达/出发：</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">运营状态：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">航站楼：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">异常状态：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">机坪代理：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">旅客代理：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></option>
                    </select>
                </div>
                <div class="input-container mr-4">
                    <label for="">维护代理：&nbsp;&nbsp;</label>
                    <select class="form-control" name="" id="">
                        <option value=""></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>航班VIP信息</span>
                </label>
                <label class="radio-inline custom-checkbox nowrap mr-4">
                    <input type="checkbox">
                    <span>保障信息</span>
                </label>
                <label class="radio-inline custom-checkbox nowrap">
                    <input type="checkbox">
                    <span>航班特服信息</span>
                </label>
            </div>
        </div>
        <div class="airline-table">
            <div class="table-container">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>重要提示</th>
                            <th *ngFor="let airline_col of airline_col_lists">{{airline_col.COL_CN}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let airline_row of airline_row_lists;let i = index" (click)="selectRow($event,i)"
                            [ngClass]="{'active':row_state===i}">
                            <td>{{i+1}}</td>
                            <td></td>
                            <td *ngFor="let airline_col of airline_col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_col.COL_CODE|dataFormatter:airline_row}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>