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

个人设置-颜色设置

Browse Source
This commit is contained in:
liweijin
2018-11-13 09:48:48 +08:00
parent b4cfe1108b
commit d299e0ee1d
10 changed files with 157 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+5
View File
@@ -6546,6 +6546,11 @@
"tslib": "1.9.3" "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": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz", "resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
package.json
+1
View File
@@ -25,6 +25,7 @@
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"ng-zorro-antd": "^1.8.0", "ng-zorro-antd": "^1.8.0",
"ngx-color-picker": "^7.0.1",
"rxjs": "^6.0.0", "rxjs": "^6.0.0",
"zone.js": "^0.8.26" "zone.js": "^0.8.26"
}, },
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 list'>
<div class="text-box"
[colorPicker]="color"
(colorPickerChange)="item.color=$event;item.bgColor=$event" [ngStyle]="{'background-color':item.bgColor,'color':item.color}">航班时间</div>
</div>
<div class="color-picker-box">
<button (click)='colorPicker(1)' class="setting-font" nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 设置字体</button>
<button (click)='colorPicker(2)' 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
+22
View File
@@ -0,0 +1,22 @@
.color-settings-container{
.data-list-box{
display: inline-block;
.text-box{
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
}
.color-picker-box{
margin: 0 auto;
margin-top: 40px;
.setting-font{
margin-right: 10px;
}
}
}
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
+28
View File
@@ -0,0 +1,28 @@
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=[];
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=>{
item.color='#333';
item.bgColor='#fafafa';
})
}
//设置颜色
colorPicker(type){
}
}
src/app/pages/system-management/personal-settings/personal-settings.component.html
+13 -13
View File
@@ -5,7 +5,7 @@
<div class="self-row-content"> <div class="self-row-content">
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列</div> <div class="ant-transfer-list-header">可选列（{{sourceList.length}}）</div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content"> <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> <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>
@@ -14,13 +14,13 @@
</div> </div>
</div> </div>
<div class="move-btn-box"> <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(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)' 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(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)' 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(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)' class="move-btn" nz-button nzSize="large" [disabled]='!targetList.length>0' nzType="primary"><i nz-icon type="double-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>
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列</div> <div class="ant-transfer-list-header">已选列（{{targetList.length}}）</div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content"> <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> <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>
@@ -30,15 +30,15 @@
</div> </div>
</div> </div>
<div class="move-btn-box"> <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(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)' class="move-btn" nz-button nzSize="large" [disabled]='disableUp' nzType="primary"><i nz-icon type="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)' class="move-btn" nz-button nzSize="large" [disabled]='disableDown' nzType="primary"><i nz-icon type="down" 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)' class="move-btn" nz-button nzSize="large" [disabled]='disabledDownBtm' nzType="primary"><i nz-icon type="arrow-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> </div>
<div class="self-row-footer"> <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)='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()' nz-button nzSize="large" nzType="default"><i class="fa fa-times" 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> </div>
</nz-tab> </nz-tab>
@@ -55,7 +55,7 @@
ORMS启动路径 ORMS启动路径
</nz-tab> </nz-tab>
<nz-tab nzTitle="颜色配置"> <nz-tab nzTitle="颜色配置">
颜色配置 <app-color-settings></app-color-settings>
</nz-tab> </nz-tab>
<nz-tab nzTitle="刷新设置"> <nz-tab nzTitle="刷新设置">
刷新设置 刷新设置
src/app/pages/system-management/personal-settings/personal-settings.component.scss
+34 -27
View File
@@ -2,37 +2,44 @@
padding: 30px 20px; padding: 30px 20px;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 300px;
background-color: #fff; background-color: #fff;
.self-row-box{ .ant-tabs{
display: inline-block; height: 100%;
.self-row-footer{ .self-row-box{
display: inline-block; display: inline-block;
position: relative; .self-row-footer{
margin-left: 46%; display: inline-block;
margin-top: 40px; position: relative;
transform:translate(-50%,0); margin-left: 46%;
button:first-child { margin-top: 40px;
margin-right: 20px; 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;
} }
} }
.move-btn-box{ .self-row-content{
display: inline-block; .ant-transfer-list{
margin: 0 10px; width: 300px;
position: relative; height: 500px;
top: 60px; .self-row-tips{
.move-btn{ text-align: center;
display: block; position: relative;
margin-bottom: 8px 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
+11 -5
View File
@@ -22,17 +22,23 @@ export class PersonalSettingsComponent implements OnInit {
constructor() { } constructor() { }
ngOnInit() { 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.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"} ] /*
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
*/
this.sourceList=[...this.list];
} }
//保存-自定义列显示保存 //保存-自定义列显示保存
saveSelf(){ saveSelf(){
console.log(this.targetList); console.log(this.targetList);
console.log(this.sourceList);
} }
//重置数据 //重置数据
cancelSelf(){ cancelSelf(){
//等后台接口出来后，重置this.sourceList this.targetList
this.sourceList=this.list;
this.targetList=[];
} }
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断 //上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
moveUpDown(type){ moveUpDown(type){
src/app/pages/system-management/system-management.module.ts
+7 -2
View File
@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ColorPickerModule } from 'ngx-color-picker';
import { SystemManagementComponent } from './system-management.component'; import { SystemManagementComponent } from './system-management.component';
import { PersonalSettingsComponent } from './personal-settings/personal-settings.component'; import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
import { RoleManagementComponent } from './role-management/role-management.component'; import { RoleManagementComponent } from './role-management/role-management.component';
@@ -14,13 +15,15 @@ import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
registerLocaleData(zh); registerLocaleData(zh);
import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
SystemManagementRouting, SystemManagementRouting,
/** 导入 ng-zorro-antd 模块 **/ /** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule NgZorroAntdModule,
ColorPickerModule
], ],
/** 配置 ng-zorro-antd 国际化 **/ /** 配置 ng-zorro-antd 国际化 **/
providers : [ { provide: NZ_I18N, useValue: zh_CN } ], providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
@@ -31,6 +34,8 @@ registerLocaleData(zh);
UserManagementComponent, UserManagementComponent,
DepartmentManagementComponent, DepartmentManagementComponent,
OperationLogsComponent, OperationLogsComponent,
DataSynchronizeComponent] DataSynchronizeComponent,
ColorSettingsComponent,
]
}) })
export class SystemManagementModule { } export class SystemManagementModule { }