init commit
This commit is contained in:
zhouyuejun
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core'
|
||||
import { RouterModule, Routes } from '@angular/router'
|
||||
|
||||
import { MainComponent } from './main.component'
|
||||
const mainRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MainComponent
|
||||
}
|
||||
]
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(mainRoutes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
export class MainRoutingModule { }
|
||||
@@ -0,0 +1,126 @@
|
||||
<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="">航空公司： </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="">航班类别： </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="">到达/出发：</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="">运营状态： </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="">异常状态： </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-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 [ngStyle]="{'background-color':''}" *ngFor="let airline_col of airline_col_lists">{{airline_row[airline_col.COL_CODE]}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,63 @@
|
||||
.main-page {
|
||||
width: 100%;
|
||||
height: calc(100% - 66px);
|
||||
padding: 15px 10px;
|
||||
background-color: #fff;
|
||||
.page-content {
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px 20px;
|
||||
.search-filter {
|
||||
padding: 0 15px;
|
||||
.first-condition {
|
||||
.line-operator-right {
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
.btn-info {
|
||||
background-color: rgb(122, 156, 204);
|
||||
border-color: rgb(122, 156, 204);
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-container {
|
||||
padding: 0;
|
||||
> .form-control {
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.airline-table{
|
||||
.table-container{
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
overflow: scroll;
|
||||
table{
|
||||
width: auto;
|
||||
tr{
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: rgb(181, 215, 255);
|
||||
}
|
||||
}
|
||||
th,td{
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.line-operator-right {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 1200px){
|
||||
// .line-operator-right{
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainComponent } from './main.component';
|
||||
|
||||
describe('MainComponent', () => {
|
||||
let component: MainComponent;
|
||||
let fixture: ComponentFixture<MainComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MainComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { HttpClientService } from '../../services/http-client.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main',
|
||||
templateUrl: './main.component.html',
|
||||
styleUrls: ['./main.component.scss']
|
||||
})
|
||||
export class MainComponent implements OnInit {
|
||||
public airline_col_lists: Array<object>;
|
||||
public airline_row_lists: Array<object> = [];
|
||||
public airline_color: Array<object> = [];
|
||||
public row_state: number;
|
||||
|
||||
|
||||
constructor(
|
||||
private httpCilent: HttpClientService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
/* 获取显示列 */
|
||||
this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
|
||||
data => {
|
||||
data.sort(function (a, b) {
|
||||
return (a['COL_ORDER'] - b['COL_ORDER']);
|
||||
})
|
||||
this.airline_col_lists = data;
|
||||
}
|
||||
)
|
||||
/* 获取航班动态信息 */
|
||||
this.httpCilent.get('/assets/mock-data/airline-data.json').subscribe(
|
||||
data => {
|
||||
this.airline_row_lists = []
|
||||
data.forEach(element => {
|
||||
this.airline_row_lists.push(JSON.parse(element.value));
|
||||
});
|
||||
}
|
||||
)
|
||||
/* 获取颜色数据 */
|
||||
// this.httpCilent.get('/assets/mock-data/airline-color.json').subscribe(
|
||||
// data => {
|
||||
// this.airline_color = data;
|
||||
// console.log(data);
|
||||
// }
|
||||
// )
|
||||
}
|
||||
|
||||
selectRow($event, i) {
|
||||
this.row_state = i;
|
||||
}
|
||||
|
||||
findColor(items,marryItem){
|
||||
// console.log(items,marryItem);
|
||||
let index = items.findIndex(element=>{
|
||||
element.COL_CODE === marryItem;
|
||||
})
|
||||
console.log(index)
|
||||
if(index===-1){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { MainModule } from './main.module';
|
||||
|
||||
describe('MainModule', () => {
|
||||
let mainModule: MainModule;
|
||||
|
||||
beforeEach(() => {
|
||||
mainModule = new MainModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(mainModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MainComponent } from './main.component';
|
||||
import { MainRoutingModule } from './main-routing.module'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MainRoutingModule
|
||||
],
|
||||
declarations: [MainComponent]
|
||||
})
|
||||
export class MainModule { }
|
||||
Reference in New Issue
Block a user