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 { }
|
||||
@@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core'
|
||||
import { RouterModule, Routes } from '@angular/router'
|
||||
|
||||
import { PagesComponent } from './pages.component'
|
||||
|
||||
const pagesRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PagesComponent,
|
||||
children:[
|
||||
{
|
||||
path:'',
|
||||
redirectTo:'main',
|
||||
pathMatch:'full'
|
||||
},
|
||||
{
|
||||
path:'main',
|
||||
loadChildren:'./main/main.module#MainModule'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(pagesRoutes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
export class PagesRoutingModule { }
|
||||
@@ -0,0 +1,67 @@
|
||||
<div class="wrapper">
|
||||
<div class="left-wrapper">
|
||||
<div class="left-header">
|
||||
<!-- <img src="/assets/images/logo.png" /> -->
|
||||
<h3>航班信息查询系统</h3>
|
||||
</div>
|
||||
<div class="left-menu">
|
||||
<app-sidebar-menu [data]="menuData"></app-sidebar-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<a class="navbar-brand">
|
||||
<i class=" fa fa-dedent"></i>
|
||||
</a>
|
||||
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav ml-auto mr-4">
|
||||
<li class="nav-item dropdown mr-2">
|
||||
<a class="nav-icon nav-link" data-toggle="dropdown" id="messagesDropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<div class="icon-container">
|
||||
<i class="fa fa-bell-o"></i>
|
||||
<span>7</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown mr-2">
|
||||
<a class="nav-icon nav-link" data-toggle="dropdown" id="alertsDropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<div class="icon-container">
|
||||
<i class="fa fa-envelope-o"></i>
|
||||
<span style="background:#0cc2aa">4</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link user-info" data-toggle="dropdown" id="userDropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<div class="user-container">
|
||||
<span class="mr-2">Chris Wood</span>
|
||||
<img src="/assets/images/Vlad.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,95 @@
|
||||
@import "../theme/scss/variables";
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.left-wrapper {
|
||||
height: 100%;
|
||||
width: 235px;
|
||||
background-color: rgb(46, 59, 76);
|
||||
float: left;
|
||||
.left-header {
|
||||
height: 66px;
|
||||
border-bottom: 1px solid $gray-900;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
h3 {
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-wrapper {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 235px;
|
||||
.navbar {
|
||||
height: 66px;
|
||||
background-color: rgb(46, 59, 76) !important;
|
||||
.navbar-brand {
|
||||
font-size: 24px;
|
||||
padding: 3px 10px !important;
|
||||
font-weight: normal !important;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
// .bg-dark{
|
||||
|
||||
// }
|
||||
.nav-icon {
|
||||
padding: 0.1rem 0.75rem;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
transition: color 0.1s ease-in-out, color 0.1s ease-in-out;
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
.icon-container {
|
||||
> span {
|
||||
top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-container {
|
||||
position: relative;
|
||||
> span {
|
||||
background: $red;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -8px;
|
||||
text-align: center;
|
||||
transition: top 0.1s ease-out;
|
||||
font-size: 0.675rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
cursor: pointer;
|
||||
.user-container {
|
||||
> img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-top: -15px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PagesComponent } from './pages.component';
|
||||
|
||||
describe('PagesComponent', () => {
|
||||
let component: PagesComponent;
|
||||
let fixture: ComponentFixture<PagesComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PagesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PagesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pages',
|
||||
templateUrl: './pages.component.html',
|
||||
styleUrls: ['./pages.component.scss']
|
||||
})
|
||||
export class PagesComponent implements OnInit {
|
||||
|
||||
menuData = [
|
||||
{
|
||||
"name": "航班动态",
|
||||
"icon": 'fa-plane',
|
||||
"isExpend": false,
|
||||
"path": "/main"
|
||||
},
|
||||
{
|
||||
"name": "季度计划",
|
||||
"icon": 'fa-cube',
|
||||
"isExpend": false,
|
||||
|
||||
},
|
||||
{
|
||||
"name": "历史数据",
|
||||
"icon": 'fa-history',
|
||||
"isExpend": false,
|
||||
},
|
||||
{
|
||||
"name": "基础数据",
|
||||
"icon": 'fa-database',
|
||||
"isExpend": false,
|
||||
},
|
||||
{
|
||||
"name": "系统管理",
|
||||
"icon": "fa-window-restore",
|
||||
"isExpend": false,
|
||||
"children": [
|
||||
{
|
||||
"name": "个人设置",
|
||||
"icon": "fa-cog",
|
||||
},
|
||||
{
|
||||
"name": "角色管理",
|
||||
"icon": "fa-users",
|
||||
},
|
||||
{
|
||||
"name": "用户管理",
|
||||
"icon": "fa-user",
|
||||
},
|
||||
{
|
||||
"name": "部门管理",
|
||||
"icon": "fa-street-view",
|
||||
},
|
||||
{
|
||||
"name": "操作日志",
|
||||
"icon": "fa-sticky-note",
|
||||
},
|
||||
{
|
||||
"name": "数据同步",
|
||||
"icon": "fa-refresh",
|
||||
},
|
||||
]
|
||||
}]
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { PagesModule } from './pages.module';
|
||||
|
||||
describe('PagesModule', () => {
|
||||
let pagesModule: PagesModule;
|
||||
|
||||
beforeEach(() => {
|
||||
pagesModule = new PagesModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(pagesModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { PagesComponent } from './pages.component';
|
||||
import { PagesRoutingModule } from './pages-routing.module'
|
||||
|
||||
import { ComponentsModule } from '../components/components.module'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ComponentsModule,
|
||||
PagesRoutingModule,
|
||||
],
|
||||
declarations: [PagesComponent]
|
||||
})
|
||||
export class PagesModule { }
|
||||
Reference in New Issue
Block a user