cdia/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop-3' of http://git.int.it2000.com.cn/airport-chengdu/airport-chengdu-web into develop-3

Browse Source
This commit is contained in:
714943302@qq.com
2018-11-16 14:15:30 +08:00
parent 65ff66f2bb 5b29727f7f
commit 6f75265ca8
36 changed files with 1184 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
angular.json
+6 -2
View File
@@ -35,11 +35,15 @@
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.scss"
"src/styles.scss",
"node_modules/ztree/css/zTreeStyle/zTreeStyle.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/ztree/js/jquery.ztree.core.min.js",
"node_modules/ztree/js/jquery.ztree.excheck.min.js",
"node_modules/ztree/js/jquery.ztree.exhide.min.js"
]
},
"configurations": {
package-lock.json
Generated
+5
View File
@@ -6546,6 +6546,11 @@
"tslib": "1.9.3"
}
},
"ngx-color-picker": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-7.0.1.tgz",
"integrity": "sha512-QPv4LA0OE8fWBguM06mMMILufBvV2KbROT5CvFPNxW1Z1TwOuE6nixXHi0k2aPSszHKsjppxZlVc2kXOmv5voQ=="
},
"nice-try": {
"version": "1.0.5",
"resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
package.json
+4 -2
View File
@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
@@ -25,8 +25,10 @@
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ng-zorro-antd": "^1.8.0",
"ngx-color-picker": "^7.0.1",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
"zone.js": "^0.8.26",
"ztree": "^3.5.24"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.1",
proxy.conf.json
+10
View File
@@ -0,0 +1,10 @@
{
"/sysapi":{
"target": "http://130.120.3.231:91",
"secure": false,
"changeOrigin": true,
"ws": true
}
}
src/app/pages/basic-data-service.ts
+48
View File
@@ -0,0 +1,48 @@
import { Injectable } from '@angular/core';
import { HttpClientService } from '../services/http-client.service';
import { Subject } from 'rxjs'
@Injectable()
export class BasicDataService{
public checkin_group;
public checkin_group_subject = new Subject<any>();
public gate;
public gate_subject = new Subject<any>();
public terminal;
public terminal_subject = new Subject<any>();
public chut;
public chut_subject = new Subject<any>();
public stand;
public stand_subject = new Subject<any>();
public carousel;
public carousel_subject = new Subject<any>();
public checkin_desk;
public checkin_desk_subject = new Subject<any>();
public airport;
public airport_subject = new Subject<any>();
public city;
public city_subject = new Subject<any>();
public aircraft_type;
public aircraft_type_subject = new Subject<any>();
public aircraft;
public aircraft_subject = new Subject<any>();
public terminal_area;
public terminal_area_subject = new Subject<any>();
public airline;
public airline_subject = new Subject<any>();
constructor(
private httpClient:HttpClientService
){}
loadBasicData(){
console.log('---')
this.httpClient.get('/adminapi/basicdata/checkinGroups').subscribe(
data=>{
console.log(data)
}
)
}
}
src/app/pages/main.scss
+42
View File
@@ -0,0 +1,42 @@
.system-main-container {
padding: 20px 20px;
width: 100%;
height: 100%;
min-height: 300px;
background-color: #f0f0f0;
.system-main-body{
height: 100%;
width: 100%;
}
}
.card{
height: 100%;
background: #fff;
padding: 20px;
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
}
.tree-box{
float: left;
padding: 20px;
height: 100%;
background: #fff;
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
}
/* 目录树样式 */
:host /deep/ ul.tree{
padding-left: 25px;
line-height: 30px;
list-style: none;
}
:host /deep/ .node-value{
display: inline-block;
padding: 0 10px;
border-radius:3px;
cursor: pointer;
}
:host /deep/ .node-selected{
background-color: #dcdcdc
}
src/app/pages/main/main.component.html
+30 -12
View File
@@ -7,14 +7,14 @@
<option value="">选择列名</option>
</select>
<label class="radio-inline custom-radio nowrap mr-4">
<input type="radio" [(ngModel)]="filterItems.FLT_POS" [value]="1" name="filter-position">
<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)]="filterItems.FLT_POS" [value]="2" name="filter-position">
<input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
<span>查找定位</span>
</label>
<input class="form-control" [(ngModel)]="filterItems.SEARCH" type="text">
<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>
@@ -33,7 +33,7 @@
</div>
<div class="input-container mr-4">
<label for="">航线类别：&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.FLIN" class="form-control">
<select [(ngModel)]="filterItems.FLIN" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="D">国内</option>
<option value="I">国际</option>
@@ -43,7 +43,7 @@
</div>
<div class="input-container mr-4">
<label for="">航班类别：&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.FLTY" class="form-control">
<select [(ngModel)]="filterItems.FLTY" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="">客机</option>
<option value="">货机</option>
@@ -59,7 +59,7 @@
</div> -->
<div class="input-container mr-4">
<label for="">到达/出发：</label>
<select [(ngModel)]="filterItems.MVIN" class="form-control">
<select [(ngModel)]="filterItems.MVIN" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="A">到达</option>
<option value="D">离港</option>
@@ -73,7 +73,7 @@
</div>
<div class="input-container mr-4">
<label for="">航站楼：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<select [(ngModel)]="filterItems.TRML" class="form-control">
<select [(ngModel)]="filterItems.TRML" (ngModelChange)="selectChange()" class="form-control">
<option value=""></option>
<option value="T1">T1</option>
<option value="T2">T2</option>
@@ -135,8 +135,8 @@
</div>
</div>
<div class="airline-table">
<div class="table-container">
<table class="table table-bordered table-striped">
<div id="table-container" class="table-container">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
@@ -145,14 +145,32 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow($event,i)"
[ngClass]="{'active':row_state===i}">
<td>{{i+1}}</td>
<tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
<td>{{i+1}}</td>
<td></td>
<td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr>
</tbody>
</table>
<!-- <nz-table #nzTable nzBordered [nzData]="render_data" [nzFrontPagination]="false" [nzScroll]="{ y: '700px' }">
<thead>
<tr>
<th nzWidth="50px">序号</th>
<th nzWidth="80px">重要提示</th>
<th nzWidth="80px" *ngFor="let airline_col of col_lists">{{airline_col.COL_CN}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let airline_row of nzTable.data;let i = index" (click)="selectRow(airline_row)"
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
<td>{{i+1}}</td>
<td></td>
<td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
</tr>
</tbody>
</nz-table> -->
</div>
</div>
</div>
src/app/pages/main/main.component.scss
+8 -3
View File
@@ -1,6 +1,7 @@
.main-page {
width: 100%;
height: calc(100% - 66px);
height: 100%;
overflow-y: scroll;
padding: 15px 10px;
background-color: #fff;
.page-content {
@@ -31,15 +32,19 @@
// border: 1px solid #ccc;
width: 100%;
height: 700px;
overflow: scroll;
overflow: auto;
box-shadow: 0 0 1px .5px #ddd;
table{
width: max-content;
tr{
cursor: pointer;
&.active{
&.selected{
background: rgb(181, 215, 255);
}
}
th{
background-color: #ddd;
}
th,td{
// border: none;
text-align: center;
src/app/pages/main/main.component.ts
+270 -33
View File
@@ -2,12 +2,15 @@ import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { HttpClientService } from '../../services/http-client.service';
import {BasicDataService} from '../basic-data-service'
import dateFormatter from '../../utils/data-formatter';
import routeType from '../../utils/route-type';
import flightType from '../../utils/flight-type';
import arriDept from '../../utils/arri-dept';
import { HttpParams } from '@angular/common/http';
import * as $ from 'jquery';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
@@ -16,21 +19,29 @@ import arriDept from '../../utils/arri-dept';
export class MainComponent implements OnInit {
constructor(
private basicDataService:BasicDataService,
private httpCilent: HttpClientService,
private changeDetectorRef: ChangeDetectorRef
) { }
) {
this.basicDataService.checkin_group_subject.subscribe(val=>{
console.log(val)
})
}
public raw_data: Array<object> = []; //原始数据，即航班计划
public combined_data: Array<object> = []; //组合数据，即链接航班，显示信息等组合好之后的数据
// public filter_data:Array<object> = []; //用于过滤和定位的数据
public render_data: Array<object> = []; //显示数据，即需要显示的数据
public col_lists: Array<object>; //列数据
public airline_color: Array<object> = [];
public row_state: number;
public row_state: any = { renderFlight: {} };
public TOP_1 = 1000000000000;
@@ -48,9 +59,14 @@ export class MainComponent implements OnInit {
public TOP_13 = 13000000000000;
public TOP_14 = 14000000000000;
// 搜索条件
SEARCH = ''; //手动输入条件
FLT_POS = 1; //过滤还是定位
SEL_COL = ''; //选择列名
public filterItems = {
SEARCH: '', //手动输入条件
FLT_POS: 1, //过滤还是定位
ALCD: '', //航空公司
FLIN: '', //航线类别
FLTY: '', //航班类别
@@ -80,9 +96,9 @@ export class MainComponent implements OnInit {
}
selectRow($event, i) {
selectRow(i) {
this.row_state = i;
alert(i)
this.changeDetectorRef.detectChanges();
}
getColor(col_CODE) {
@@ -112,7 +128,7 @@ export class MainComponent implements OnInit {
this.raw_data.push(JSON.parse(element.value));
});
let combined_linked_data = this.raw_data
let combined_linked_data = this.raw_data;
// this.combined_data = this.raw_data
//查找链接航班并将其组合成一条数据
@@ -129,7 +145,6 @@ export class MainComponent implements OnInit {
}
}
}
combined_linked_data.forEach(element => {
let row_flights = {};
let render_flight = {};
@@ -162,16 +177,16 @@ export class MainComponent implements OnInit {
let key = this.col_lists[i]['COL_CODE']
if (this.formatter.hasOwnProperty(key)) {
if (typeof (this.formatter[key]) === 'function') {
render_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1);
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key](row_flights['preFlight'][key], 1)) : (this.formatter[key](row_flights['preFlight'][key], 1) + '/' + this.formatter[key](row_flights['reaFlight'][key], 1));
render_pre_flight[key] = this.formatter[key](row_flights['preFlight'][key], 1);
render_rea_flight[key] = this.formatter[key](row_flights['reaFlight'][key], 1);
} else {
render_flight[key] = this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]];
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (this.formatter[key][row_flights['preFlight'][key]]) : (this.formatter[key][row_flights['preFlight'][key]] + '/' + this.formatter[key][row_flights['reaFlight'][key]]);
render_pre_flight[key] = this.formatter[key][row_flights['preFlight'][key]];
render_rea_flight[key] = this.formatter[key][row_flights['reaFlight'][key]];
}
} else {
render_flight[key] = row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key];
render_flight[key] = (row_flights['preFlight'][key] === row_flights['reaFlight'][key]) ? (row_flights['preFlight'][key]) : (row_flights['preFlight'][key] + '/' + row_flights['reaFlight'][key]);
render_pre_flight[key] = row_flights['preFlight'][key];
render_rea_flight[key] = row_flights['reaFlight'][key];
}
@@ -183,43 +198,265 @@ export class MainComponent implements OnInit {
this.combined_data.push(row_flights)
})
//排序
this.combined_data.forEach(element => {
element['ORDER'] = this.sequence(element)
// element['ORDER'] = '+' + element['order']
})
this.combined_data.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = this.combined_data
this.changeDetectorRef.detectChanges();
this.doSequence(this.combined_data);
}
)
/**
* 固定表头
*/
var tableCont = document.querySelector('#table-container')
function scrollHandle (){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
}
/**
* 过滤机定位
* @param filterItems
* @return
* 执行排序并渲染
*/
doSequence(sequenceData) {
sequenceData.forEach(element => {
element['ORDER'] = this.sequence(element);
})
fliter(filterItems, render_data) {
if(filterItems.FLT_POS===1){
//过滤
}else{
//定位
}
sequenceData.sort(function (a, b) {
return (a['ORDER'] - b['ORDER']);
})
this.render_data = sequenceData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
/**
* 过滤及定位
* @param filterItems
* @return
*/
//输入框回车事件
inputEnter() {
if (this.FLT_POS === 1) {
this.selectChange()
} else {
this.selectChange()
this.inputPosition(this.render_data)
}
}
//下拉框选择筛选
selectChange() {
let filter_data = [];
let filterItems = this.filterItems;
this.combined_data.forEach(item => {
filter_data.push(Object.assign({}, item));
})
//下拉框筛选
filter_data = filter_data.filter(item => {
if (this.isArriFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} else if (this.isDeptFlight(item)) {
let is_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
is_satis = true;
continue;
} else {
is_satis = false;
break;
}
}
}
return is_satis;
} else {
let pre_satis = true;
let rea_satis = true;
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['preFlight'][key] === filterItems[key]) {
pre_satis = true;
continue;
} else {
pre_satis = false;
break;
}
}
}
for (const key in filterItems) {
if (filterItems.hasOwnProperty(key) && filterItems[key]) {
if (item['reaFlight'][key] === filterItems[key]) {
rea_satis = true;
continue;
} else {
rea_satis = false;
break;
}
}
}
if (pre_satis && !rea_satis) {
item['renderFlight'] = item['renderPreFlight'];
return pre_satis;
} else if (!pre_satis && rea_satis) {
item['renderFlight'] = item['renderReaFlight'];
return rea_satis;
} else if (pre_satis && rea_satis) {
return pre_satis && rea_satis;
} else {
return false;
}
}
})
if (this.FLT_POS === 1) {
this.inputFilter(filter_data);
} else {
this.render_data = filter_data;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
// this.inputPosition(this.render_data);
this.changeDetectorRef.detectChanges();
}
}
//输入框筛选
inputFilter(filterData) {
if (this.SEARCH) {
if (this.SEL_COL) {
let sel_col = this.SEL_COL;
filterData = filterData.filter(item => {
if (item['renderFlight'][sel_col]) {
if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
return true;
}
} else {
if (this.SEARCH) {
return false;
} else {
return true;
}
}
})
} else {
filterData = filterData.filter(item => {
let is_satis = false;
for (const key in item['renderFlight']) {
if (item['renderFlight'].hasOwnProperty(key)) {
if (item['renderFlight'][key]) {
if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
is_satis = true;
break;
} else {
is_satis = false;
continue;
}
} else {
if (this.SEARCH) {
is_satis = false;
continue;
} else {
is_satis = true;
break;
}
}
} else {
continue;
}
}
return is_satis;
})
}
}
this.render_data = filterData;
this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
this.changeDetectorRef.detectChanges();
}
positionArray: Array<any> = [];
positionArrayIndex: number = 0;
//输入框定位
inputPosition(filterData) {
let transArray = []
if (this.SEL_COL) {
let sel_col = this.SEL_COL;
filterData.forEach(element => {
if (element['renderFlight'][sel_col]) {
if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
}
} else {
if (!this.SEARCH) {
transArray.push(element)
}
}
});
} else {
filterData.forEach(element => {
for (const key in element['renderFlight']) {
if (element['renderFlight'].hasOwnProperty(key)) {
if (element['renderFlight'][key]) {
if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
transArray.push(element)
break;
} else {
continue;
}
} else {
if (this.SEARCH) {
continue;
} else {
transArray.push(element)
break;
}
}
} else {
continue;
}
}
});
}
if (transArray.length > 0) {
if (transArray.toString() == this.positionArray.toString()) {
this.positionArrayIndex++;
if (this.positionArrayIndex === this.positionArray.length) {
this.positionArrayIndex = 0;
}
this.row_state = this.positionArray[this.positionArrayIndex];
} else {
this.positionArray = transArray;
this.positionArrayIndex = 0;
this.row_state = this.positionArray[this.positionArrayIndex];
}
} else {
alert('没有搜索到相关数据');
}
this.changeDetectorRef.detectChanges();
let tr = $(".selected");
let objTr = tr[0];
$("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
}
/**
* 行排序规则方法
src/app/pages/main/main.module.ts
+6 -1
View File
@@ -1,18 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgZorroAntdModule } from 'ng-zorro-antd'
import { PipesModule } from '../../pipes/pipes.module';
import { MainComponent } from './main.component';
import { MainRoutingModule } from './main-routing.module'
import {BasicDataService} from '../basic-data-service'
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
NgZorroAntdModule,
PipesModule,
MainRoutingModule
],
declarations: [MainComponent]
declarations: [MainComponent],
providers:[BasicDataService]
})
export class MainModule { }
src/app/pages/pages.component.html
+14 -11
View File
@@ -1,15 +1,9 @@
<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">
<div class="header-wrapper">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand">
航班信息查询系统
</a>
<a class="navbar-brand">
<i class=" fa fa-dedent"></i>
</a>
@@ -61,7 +55,16 @@
</ul>
</div>
</nav>
<router-outlet></router-outlet>
</div>
<div class="content-wrapper">
<div class="left-wrapper">
<div class="left-menu">
<app-sidebar-menu [data]="menuData"></app-sidebar-menu>
</div>
</div>
<div class="right-wrapper">
<router-outlet></router-outlet>
</div>
</div>
</div>
src/app/pages/pages.component.scss
+39 -32
View File
@@ -3,37 +3,8 @@
.wrapper {
width: 100%;
height: 100%;
.left-wrapper {
height: 100%;
width: 235px;
position: fixed;
top: 0;
left: 0;
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;
overflow: hidden;
.header-wrapper {
.navbar {
height: 66px;
background-color: rgb(46, 59, 76) !important;
@@ -45,7 +16,7 @@
cursor: pointer;
}
// .bg-dark{
// }
.nav-icon {
padding: 0.1rem 0.75rem;
@@ -95,4 +66,40 @@
}
}
}
.content-wrapper {
height: 100%;
.left-wrapper {
height: calc(100% - 66px);
width: 235px;
position: fixed;
top: 66px;
left: 0;
background-color: rgb(46, 59, 76);
padding-bottom: 30px;
overflow-y: scroll;
.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 {
height: calc(100% - 66px);
margin-left: 235px;
}
}
}
src/app/pages/pages.component.ts
+11 -19
View File
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { BasicDataService } from './basic-data-service'
import { map, filter, mergeMap } from 'rxjs/operators';
import { pipe } from 'rxjs'
@@ -39,7 +40,7 @@ export class PagesComponent implements OnInit {
"name": "基础数据",
"icon": 'fa-database',
"isExpend": false,
"children":[
"children": [
{
"name": "值机岛",
"icon": "fa-eercast",
@@ -184,28 +185,20 @@ export class PagesComponent implements OnInit {
}]
constructor(
private router: Router,
private basicDataService:BasicDataService,
private activatedRoute: ActivatedRoute
) { }
) {
this.basicDataService.loadBasicData();
}
ngOnInit() {
let activeRoute = this.router.url;
this.selectActiveMenu(this.menuData,activeRoute);
this.selectActiveMenu(this.menuData, activeRoute);
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
// map(() => this.activatedRoute),
// map(route => {
// console.log(route)
// while (route.firstChild) route = route.firstChild;
// console.log('-----')
// return route;
// }),
// filter(route => route.outlet === 'primary'),
// mergeMap(route => route.data)
).subscribe((event) => {
// console.log(event['urlAfterRedirects'])
this.selectActiveMenu(this.menuData,event['urlAfterRedirects'])
this.selectActiveMenu(this.menuData, event['urlAfterRedirects'])
});
}
@@ -218,7 +211,7 @@ export class PagesComponent implements OnInit {
return !item.children || !item.children.length;
}
selectActiveMenu(menuData,activeRoute) {
selectActiveMenu(menuData, activeRoute) {
menuData.forEach(item => {
if (this.isLeaf(item)) {
if (item.path === activeRoute) {
@@ -226,9 +219,8 @@ export class PagesComponent implements OnInit {
} else {
item.isActive = false;
}
}else{
// item.isExpend = !item.isExpend;
this.selectActiveMenu(item.children,activeRoute)
} else {
this.selectActiveMenu(item.children, activeRoute)
}
})
}
src/app/pages/pages.module.ts
+4 -1
View File
@@ -5,12 +5,15 @@ import { PagesRoutingModule } from './pages-routing.module'
import { ComponentsModule } from '../components/components.module'
import { BasicDataService } from './basic-data-service'
@NgModule({
imports: [
CommonModule,
ComponentsModule,
PagesRoutingModule,
],
declarations: [PagesComponent]
declarations: [PagesComponent],
providers: [BasicDataService]
})
export class PagesModule { }
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html
+11
View File
@@ -0,0 +1,11 @@
<div class="color-settings-container">
<div class="data-list-box" *ngFor='let item of DataList'>
<div class="text-box" [ngStyle]="{'background-color':item.bgColor}">航班时间</div>
<button [colorPicker]="color" (colorPickerChange)="colorPicker($event,item)" class="setting-bg-color" nz-button nzType="default"><i nz-icon type="setting" theme="outline"></i>设置背景</button>
<button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</button>
</div>
<div class="color-picker-box">
<button (click)='save()' nzTitle="保存设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancel()' nzTitle="取消设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss
+29
View File
@@ -0,0 +1,29 @@
.color-settings-container{
max-width: 800px;
.data-list-box{
display: inline-block;
.text-box{
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 444px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 2px;
}
.setting-bg-color{
margin-right: 10px;
}
}
.color-picker-box{
display: inline-block;
position: relative;
top: 40px;
left: 50%;
transform:translate(-50%,0);
button:first-child{
margin-right: 20px;
}
}
}
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ColorSettingsComponent } from './color-settings.component';
describe('ColorSettingsComponent', () => {
let component: ColorSettingsComponent;
let fixture: ComponentFixture<ColorSettingsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ColorSettingsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ColorSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts
+57
View File
@@ -0,0 +1,57 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-color-settings',
templateUrl: './color-settings.component.html',
styleUrls: ['./color-settings.component.scss']
})
export class ColorSettingsComponent implements OnInit {
cmykColor:any;
color:any;
list:any=[]; //源数据
DataList:any=[]; //临时项目列表，如果保存就传改变量，如果取消，则重置为list的源数据
constructor() { }
ngOnInit() {
this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ] ;
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.DataList.push(option);
})
}
//设置颜色 1设置字体颜色 2设置背景颜色 3重置字体颜色
colorPicker(event,item){
item.bgColor=event;
}
//背景色恢复默认值
resetBgColor(item){
item.bgColor='#fafafa';
}
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//保存
save(){
console.log(this.list)
console.log(this.DataList)
}
//取消
cancel(){
this.DataList=[];
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.DataList.push(option);
})
}
}
src/app/pages/system-management/personal-settings/flight-agency/flight-agency.component.html
+15
View File
@@ -0,0 +1,15 @@
<div class="flight-agency-container">
<p>请选择需要提示的航班代理</p>
<div class="radio-group-box">
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio nzValue="1">全部代理</label>
<label nz-radio nzValue="2">机场代理</label>
<label nz-radio nzValue="3">国航代理</label>
<label nz-radio nzValue="4">川航代理</label>
</nz-radio-group>
</div>
<div class="self-row-footer">
<button (click)='save()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancel()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
src/app/pages/system-management/personal-settings/flight-agency/flight-agency.component.scss
+15
View File
@@ -0,0 +1,15 @@
.flight-agency-container{
.radio-group-box{
}
.self-row-footer{
display: inline-block;
position: relative;
margin-left: 46%;
margin-top: 100px;
transform:translate(-50%,0);
button:first-child {
margin-right: 20px;
}
}
}
src/app/pages/system-management/personal-settings/flight-agency/flight-agency.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FlightAgencyComponent } from './flight-agency.component';
describe('FlightAgencyComponent', () => {
let component: FlightAgencyComponent;
let fixture: ComponentFixture<FlightAgencyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FlightAgencyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FlightAgencyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/system-management/personal-settings/flight-agency/flight-agency.component.ts
+23
View File
@@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-flight-agency',
templateUrl: './flight-agency.component.html',
styleUrls: ['./flight-agency.component.scss']
})
export class FlightAgencyComponent implements OnInit {
public radioValue='1';
constructor() { }
ngOnInit() {
}
//保存
save(){
}
//取消
cancel(){
}
}
src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html
+35
View File
@@ -0,0 +1,35 @@
<div class="msg-alert-main-container">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列（{{sourceList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(sourceList.length>0)">暂无数据</div>
</ul>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveCross(3)' nzTitle="全部右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(sourceList.length>0)' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(1)' nzTitle="右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableRight||sourceList.length==0' nzType="primary"><i nz-icon type="right" theme="outline"></i></button>
<button (click)='moveCross(2)' nzTitle="左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledLeft||targetList.length==0' nzType="primary"><i nz-icon type="left" theme="outline"></i></button>
<button (click)='moveCross(4)' nzTitle="全部左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(targetList.length>0)' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列（{{targetList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(targetList.length>0)">暂无数据</div>
</ul>
</div>
</div>
</div>
<div class="self-row-footer">
<button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
</div>
src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.scss
+42
View File
@@ -0,0 +1,42 @@
.msg-alert-main-container{
.self-row-box{
display: inline-block;
.self-row-footer{
display: inline-block;
position: relative;
margin-left: 50%;
margin-top: 40px;
transform:translate(-50%,0);
button:first-child {
margin-right: 20px;
}
}
.self-row-content{
.ant-transfer-list{
width: 300px;
height: 500px;
.self-row-tips{
text-align: center;
position: relative;
top: 190px;
}
.ant-transfer-list-header{
font-weight: bold;
}
}
.move-btn-box{
display: inline-block;
margin: 0 10px;
position: relative;
top: 60px;
.move-btn{
display: block;
margin-bottom: 8px
}
}
}
}
}
.bg{
background-color: #e6f7ff;
}
src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MsgAlertWarningComponent } from './msg-alert-warning.component';
describe('MsgAlertWarningComponent', () => {
let component: MsgAlertWarningComponent;
let fixture: ComponentFixture<MsgAlertWarningComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MsgAlertWarningComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MsgAlertWarningComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.ts
+105
View File
@@ -0,0 +1,105 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-msg-alert-warning',
templateUrl: './msg-alert-warning.component.html',
styleUrls: ['./msg-alert-warning.component.scss']
})
export class MsgAlertWarningComponent implements OnInit {
public list: any[] = []; //原始数据项
public sourceList: any[] = []; //临时数据项-可选项
public targetList:any=[]; //临时数据项-已选项
public disableRight:any=true; //单个右移控制按钮可选状态 true 禁止选择 false可选择
public disabledLeft:any=true; //单个左移控制按钮可选状态 true 禁止选择 false可选择
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
public moveIndex:any='false';
constructor() { }
ngOnInit() {
this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ]
/*
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
*/
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
}
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//左右选择项目 type 1右移 2左移 3全部右移 4全部左移
moveCross(type){
let index=this.moveIndex;
if(type==1){
let item=this.sourceList[index];
this.sourceList.splice(index,1)
this.targetList.push(item);
if(this.sourceList.length==0){
this.disableRight=true;
}
}else if(type==2){
let item=this.targetList[index];
this.targetList.splice(index,1)
this.sourceList.push(item);
if(this.targetList.length==0){
this.disabledLeft=true;
}
}else if(type==3){
this.sourceList.forEach(item=>{
this.targetList.push(item)
})
this.sourceList=[];
}else if(type==4){
this.targetList.forEach(item=>{
this.sourceList.push(item)
})
this.targetList=[];
}
this.moveIndex='false';
this.selectedType='';
this.disabledLeft=true;
this.disableRight=true;
}
//选中选框中的项 type 1可选框的项 2已选框的项
selectNode(item,index,type){
this.selectedType=type;
this.moveIndex=index;
if(type==1){
this.disabledLeft=true;
this.disableRight=false;
}else if(type==2){
this.disableRight=true;
this.disabledLeft=false;
}
}
//保存-自定义列显示保存
saveSelf(){
console.log(this.targetList);
console.log(this.sourceList);
}
//重置数据
cancelSelf(){
this.sourceList=[];
//等后台接口出来后，重置this.sourceList this.targetList
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
this.targetList=[];
}
}
src/app/pages/system-management/personal-settings/personal-settings.component.html
+52 -57
View File
@@ -1,64 +1,59 @@
<div class="main-container">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<nz-tab nzTitle="自定义显示列">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!sourceList.length>0">暂无数据</div>
</ul>
<div class="system-main-container">
<div class="card">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<nz-tab nzTitle="自定义显示列">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列（{{sourceList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(sourceList.length>0)">暂无数据</div>
</ul>
</div>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveCross(3)' class="move-btn" nz-button nzSize="large" [disabled]='!sourceList.length>0' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(1)' class="move-btn" nz-button nzSize="large" [disabled]='disableRight||sourceList.length==0' nzType="primary"><i nz-icon type="right" theme="outline"></i></button>
<button (click)='moveCross(2)' class="move-btn" nz-button nzSize="large" [disabled]='disabledLeft||targetList.length==0' nzType="primary"><i nz-icon type="left" theme="outline"></i></button>
<button (click)='moveCross(4)' class="move-btn" nz-button nzSize="large" [disabled]='!targetList.length>0' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!targetList.length>0">暂无数据</div>
</ul>
<div class="move-btn-box">
<button (click)='moveCross(3)' nzTitle="全部右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(sourceList.length>0)' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(1)' nzTitle="右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableRight||sourceList.length==0' nzType="primary"><i nz-icon type="right" theme="outline"></i></button>
<button (click)='moveCross(2)' nzTitle="左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledLeft||targetList.length==0' nzType="primary"><i nz-icon type="left" theme="outline"></i></button>
<button (click)='moveCross(4)' nzTitle="全部左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(targetList.length>0)' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列（{{targetList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(targetList.length>0)">暂无数据</div>
</ul>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveUpDown(3)' nzTitle="置顶" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledUpTop' nzType="primary"><i nz-icon type="arrow-up" theme="outline"></i></button>
<button (click)='moveUpDown(1)' nzTitle="上移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableUp' nzType="primary"><i nz-icon type="up" theme="outline"></i></button>
<button (click)='moveUpDown(2)' nzTitle="下移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableDown' nzType="primary"><i nz-icon type="down" theme="outline"></i></button>
<button (click)='moveUpDown(4)' nzTitle="置底" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledDownBtm' nzType="primary"><i nz-icon type="arrow-down" theme="outline"></i></button>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveUpDown(3)' class="move-btn" nz-button nzSize="large" [disabled]='disabledUpTop' nzType="primary"><i nz-icon type="arrow-up" theme="outline"></i></button>
<button (click)='moveUpDown(1)' class="move-btn" nz-button nzSize="large" [disabled]='disableUp' nzType="primary"><i nz-icon type="up" theme="outline"></i></button>
<button (click)='moveUpDown(2)' class="move-btn" nz-button nzSize="large" [disabled]='disableDown' nzType="primary"><i nz-icon type="down" theme="outline"></i></button>
<button (click)='moveUpDown(4)' class="move-btn" nz-button nzSize="large" [disabled]='disabledDownBtm' nzType="primary"><i nz-icon type="arrow-down" theme="outline"></i></button>
<div class="self-row-footer">
<button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
<div class="self-row-footer">
<button (click)='saveSelf()' nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
</nz-tab>
<nz-tab nzTitle="消息警示提醒">
消息警示提醒
</nz-tab>
<nz-tab nzTitle="消息声音提醒">
消息声音提醒
</nz-tab>
<nz-tab nzTitle="航班代理">
航班代理
</nz-tab>
<nz-tab nzTitle="ORMS启动路径">
ORMS启动路径
</nz-tab>
<nz-tab nzTitle="颜色配置">
颜色配置
</nz-tab>
<nz-tab nzTitle="刷新设置">
刷新设置
</nz-tab>
</nz-tabset>
</nz-tab>
<nz-tab nzTitle="消息警示提醒">
<app-msg-alert-warning></app-msg-alert-warning>
</nz-tab>
<nz-tab nzTitle="消息声音提醒">
<app-msg-alert-warning></app-msg-alert-warning>
</nz-tab>
<nz-tab nzTitle="航班代理">
<app-flight-agency></app-flight-agency>
</nz-tab>
<nz-tab nzTitle="颜色配置">
<app-color-settings></app-color-settings>
</nz-tab>
</nz-tabset>
</div>
</div>
src/app/pages/system-management/personal-settings/personal-settings.component.scss
+33 -32
View File
@@ -1,38 +1,39 @@
.main-container{
padding: 30px 20px;
width: 100%;
height: 100%;
background-color: #fff;
.self-row-box{
display: inline-block;
.self-row-footer{
.system-main-container{
.ant-tabs{
.self-row-box{
display: inline-block;
position: relative;
margin-left: 46%;
margin-top: 40px;
transform:translate(-50%,0);
button:first-child {
margin-right: 20px;
}
}
.self-row-content{
.ant-transfer-list{
width: 300px;
height: 500px;
.self-row-tips{
text-align: center;
position: relative;
top: 190px;
.self-row-footer{
display: inline-block;
position: relative;
margin-left: 46%;
margin-top: 40px;
transform:translate(-50%,0);
button:first-child {
margin-right: 20px;
}
}
.move-btn-box{
display: inline-block;
margin: 0 10px;
position: relative;
top: 60px;
.move-btn{
display: block;
margin-bottom: 8px
.self-row-content{
.ant-transfer-list{
width: 300px;
height: 500px;
.self-row-tips{
text-align: center;
position: relative;
top: 190px;
}
.ant-transfer-list-header{
font-weight: bold;
}
}
.move-btn-box{
display: inline-block;
margin: 0 10px;
position: relative;
top: 60px;
.move-btn{
display: block;
margin-bottom: 8px
}
}
}
}
src/app/pages/system-management/personal-settings/personal-settings.component.ts
+59 -14
View File
@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
@Component({
selector: 'app-personal-settings',
templateUrl: './personal-settings.component.html',
styleUrls: ['./personal-settings.component.scss']
styleUrls: ['./personal-settings.component.scss','../../main.scss'],
providers:[HttpClientService]
})
export class PersonalSettingsComponent implements OnInit {
public list: any[] = []; //原始数据项
@@ -16,23 +19,38 @@ export class PersonalSettingsComponent implements OnInit {
public disabledUpTop:any=true; //置顶控制按钮可选状态 true 禁止选择 false可选择
public disabledDownBtm:any=true; //最低控制按钮可选状态 true 禁止选择 false可选择
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
public moveIndex:any='false';
public search:any={
page_index:'1',
page_size:'10',
role_name:'',
}
moveIndex:any='false';
constructor() { }
constructor(
private http:HttpClientService,
) { }
ngOnInit() {
//备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
this.sourceList=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ]
this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ]
/*
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
*/
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
this.queryTable();
}
//保存-自定义列显示保存
saveSelf(){
console.log(this.targetList);
}
//重置数据
cancelSelf(){
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
moveUpDown(type){
@@ -135,6 +153,33 @@ export class PersonalSettingsComponent implements OnInit {
this.disabledUpTop=true;
}
//保存-自定义列显示保存
saveSelf(){
console.log(this.targetList);
console.log(this.sourceList);
}
//重置数据
cancelSelf(){
this.sourceList=[];
//等后台接口出来后，重置this.sourceList this.targetList
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
this.targetList=[];
}
//获取列表
queryTable():void{
console.log(1111)
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){
console.log(2222)
}else{
alert(json.err_msg)
}
})
}
}
src/app/pages/system-management/system-management.module.ts
+17 -5
View File
@@ -1,5 +1,7 @@
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ColorPickerModule } from 'ngx-color-picker';
import { SystemManagementComponent } from './system-management.component';
import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
import { RoleManagementComponent } from './role-management/role-management.component';
@@ -8,22 +10,26 @@ import { DepartmentManagementComponent } from './department-management/departmen
import { OperationLogsComponent } from './operation-logs/operation-logs.component';
import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
import { SystemManagementRouting } from './system-management-routing.module'
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component';
import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/msg-alert-warning.component';
import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component';
@NgModule({
imports: [
CommonModule,
SystemManagementRouting,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
NgZorroAntdModule,
ColorPickerModule,
ReactiveFormsModule,
FormsModule
],
/** 配置 ng-zorro-antd 国际化 **/
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
declarations: [
SystemManagementComponent,
PersonalSettingsComponent,
@@ -31,6 +37,12 @@ registerLocaleData(zh);
UserManagementComponent,
DepartmentManagementComponent,
OperationLogsComponent,
DataSynchronizeComponent]
DataSynchronizeComponent,
ColorSettingsComponent,
MsgAlertWarningComponent,
FlightAgencyComponent,
],
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
})
export class SystemManagementModule { }
src/app/pages/system-management/user-management/user-management.component.html
+10 -3
View File
@@ -1,3 +1,10 @@
<p>
user-management works!
</p>
<div class="system-main-container">
<div class="user-manage">
<div class="tree-box">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="card">
</div>
</div>
</div>
src/app/pages/system-management/user-management/user-management.component.scss
+5
View File
@@ -0,0 +1,5 @@
.user-manage{
.card{
}
}
src/app/pages/system-management/user-management/user-management.component.ts
+87 -4
View File
@@ -1,15 +1,98 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import 'ztree';
declare var $: any;
declare var jQuery: any;
@Component({
selector: 'app-user-management',
templateUrl: './user-management.component.html',
styleUrls: ['./user-management.component.scss']
styleUrls: ['./user-management.component.scss','../../main.scss']
})
export class UserManagementComponent implements OnInit {
treeSelected:any; //树模型-当前选中项
public search:any={
page_index:'1',
page_size:'10',
real_name:'',
login_name:'',
orgId:'',
}
parentNode:any;
parentName:any;
isTreeTop:any=false; //判断是否为树最顶层
constructor() { }
constructor(
private http:HttpClientService,
) { }
ngOnInit() {
}
ngOnInit() {
this.initTree();
}
//树模型参数设置
public zNodes: any[];
setting = {
data: {
simpleData: {
enable: true
}
},
view: {
showLine: false,
dblClickExpand: false,
showIcon:true
},
callback: {
//节点点击事件
onClick: (event, treeId, treeNode, clickFlag) => {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
this.treeSelected=treeNode;
this.search.orgId=this.treeSelected.id;
this.parentNode=this.treeSelected.getParentNode();
if(!this.parentNode){
this.isTreeTop=true;
}else{
this.isTreeTop=false;
}
},
//节点展开事件
onExpand: (event, treeId, treeNode) => {
}
},
};
//新树模型
initTree(){
//获取目录列表
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
if(json.is_success&&json.body){
let children=[];
for(var i=0;i<json.body.length;i++){
let option=json.body[i];
option.name=option.organization;
if(option.pid){
option.pId=option.pid;
}else{
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
}
}
json.body.push({
name:"全部机构",
isParent:true,
open:true,
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
})
}
this.zNodes=json.body;
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
let node = zTree.getNodes();
})
}
}
src/app/services/http-client.service.ts
+15 -3
View File
@@ -60,15 +60,27 @@ export class HttpClientService {
* @param url
* @param options
*/
get(url: string, options: {
get(url: string,params?:object, options?: {
headers?: HttpHeaders | { [header: string]: string | string[] },
observe?: HttpObserve,
params?: HttpParams | { [param: string]: string | string[] },
reportProgress?: boolean,
responseType?: 'arraybuffer' | 'blob' | 'json' | 'text',
withCredentials?: boolean,
} = {}): Observable<any> {
return this.commonProcess(this.httpClient.get(url, options = {}));
} ): Observable<any> {
let paramsString = [];
url = url + '?'
let t = Math.random();
if (params&&params) {
for (const key in params) {
if (params[key] !== '') {
paramsString.push([key, params[key]].join('='))
}
}
return this.commonProcess(this.httpClient.get(encodeURI(url + paramsString.join('&') + '&t=' + t), options = {}));
}else{
return this.commonProcess(this.httpClient.get(url + 't=' + t, options = {}));
}
}
/**
src/app/theme/scss/base.scss
+1 -1
View File
@@ -5,7 +5,7 @@ body {
height: 100%;
font-size: 14px !important;
font-family: "Roboto", sans-serif !important;
background-color: #1190d6 !important;
background-color: #fff !important;
// color: rgb(0, 0, 0) !important;
}
/*添加手形*/
src/assets/mock-data/airline-col_code.json
+1 -6
View File
@@ -2,7 +2,7 @@
{
"COL_CODE":"FLNO",
"COL_CN":"航班号",
"COL_ORDER":"10"
"COL_ORDER":"1"
},
{
"COL_CODE":"ALCD",
@@ -53,10 +53,5 @@
"COL_CODE":"STND",
"COL_CN":"停机位",
"COL_ORDER":"16"
},
{
"COL_CODE":"ORDER",
"COL_CN":"排序",
"COL_ORDER":"17"
}
]