拓扑图增加权限

src/main/webapp/app/alarm/alarm-list/alarm-list.component.html

@@ -25,7 +25,7 @@
     </nz-select>
   </div>
   <div nz-col nzSpan="3">
-    <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
+    <nz-select style="width: 100%;" nzShowSearch nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
       <ng-container *ngFor="let item of groupList;">
         <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
       </ng-container>

src/main/webapp/app/alarm/alarm-log/alarm-log.component.html

@@ -33,8 +33,7 @@
         </nz-select>
     </div>
     <div nz-col nzSpan="7">
-        <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()"
-                        [nzButtonStyle]="'solid'">
+        <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()">
             <label nz-radio-button nzValue="1">今天</label>
             <label nz-radio-button nzValue="2">昨天</label>
             <label nz-radio-button nzValue="3">三天</label>

src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.html

@@ -20,7 +20,7 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form" >
     <div nz-col nzSpan="4">
-        <nz-select style="width: 100%;" nzPlaceHolder="所有分组" [(ngModel)]="obj.groupid">
+        <nz-select style="width: 100%;" nzPlaceHolder="所有分组" nzShowSearch [(ngModel)]="obj.groupid">
             <ng-container *ngFor="let item of groupList">
                 <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
             </ng-container>

src/main/webapp/app/analysis/resource-usabil/resource-usabil.component.html

@@ -20,7 +20,7 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form">
     <div nz-col nzSpan="4">
-        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
+        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch  [(ngModel)]="obj.groupid">
             <ng-container *ngFor="let item of groupList">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
             </ng-container>

src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html

@@ -23,14 +23,14 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form">
     <div nz-col nzSpan="6">
-        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList()">
+        <nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch [(ngModel)]="obj.groupid" (ngModelChange)="getList()">
             <ng-container *ngFor="let item of groupList">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
             </ng-container>
         </nz-select>
     </div>
     <div nz-col nzSpan="6">
-        <nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
+        <nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" nzShowSearch nzAllowClear [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
             <ng-container *ngFor="let item of hostList;">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
             </ng-container>

src/main/webapp/app/netTopology/model/topology/topology.component.html

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form [formGroup]="validateForm" nz-form>
-    <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">拓扑图名称</nz-form-label>
-      <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" formControlName="name" placeholder="名称" >
-        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入拓扑图名称</nz-form-explain>
-      </nz-form-control>
-    </nz-form-item>
-    <!--<nz-form-item>-->
-      <!--<nz-form-label [nzSpan]="7" nzRequired nzFor="refreshRete">刷新频率</nz-form-label>-->
-      <!--<nz-form-control [nzSpan]="12">-->
+    <form [formGroup]="validateForm" nz-form>
+        <nz-form-item>
+            <nz-form-label [nzSpan]="7" nzRequired nzFor="name">拓扑图名称</nz-form-label>
+            <nz-form-control [nzSpan]="12">
+                <input type="text" nz-input name="name" formControlName="name" placeholder="名称">
+                <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入拓扑图名称
+                </nz-form-explain>
+            </nz-form-control>
+        </nz-form-item>
+        <!--<nz-form-item>-->
+        <!--<nz-form-label [nzSpan]="7" nzRequired nzFor="refreshRete">刷新频率</nz-form-label>-->
+        <!--<nz-form-control [nzSpan]="12">-->
         <!--<input style="width: 100px;margin-right: 10px" type="text" nz-input formControlName="refreshRete" placeholder="名称" >分钟-->
         <!--<nz-form-explain *ngIf="validateForm.get('refreshRete').dirty && validateForm.get('refreshRete').errors">请输入刷新频率</nz-form-explain>-->
-      <!--</nz-form-control>-->
-    <!--</nz-form-item>-->
-    <!--<nz-form-item>-->
-      <!--<nz-form-label [nzSpan]="7" nzRequired nzFor="json">共享角色</nz-form-label>-->
-      <!--<nz-form-control [nzSpan]="12">-->
-        <!--<input type="text" nz-input name="json" formControlName="json" placeholder="名称" >-->
-        <!--<nz-form-explain *ngIf="validateForm.get('json').dirty && validateForm.get('json').errors">请输入分组名称</nz-form-explain>-->
-      <!--</nz-form-control>-->
-    <!--</nz-form-item>-->
-  </form>
+        <!--</nz-form-control>-->
+        <!--</nz-form-item>-->
+        <nz-form-item>
+            <nz-form-label [nzSpan]="7" nzRequired nzFor="json">共享角色</nz-form-label>
+            <nz-form-control [nzSpan]="12">
+                <div>
+                    <button (click)="add()" nz-button nzType="primary">添加</button>
+                </div>
+                <nz-row>
+                    <nz-col nzSpan="10">用户角色</nz-col>
+                    <nz-col nzSpan="10">权限</nz-col>
+                    <nz-col nzSpan="4">操作</nz-col>
+                </nz-row>
+                <nz-row *ngFor="let user of userGroup;let i = index;">
+                    <nz-col nzSpan="10">{{user.name}}</nz-col>
+                    <nz-col nzSpan="10">
+                        <nz-switch [(ngModel)]="user.permission" nzCheckedChildren="读写" [ngModelOptions]="{standalone: true}"
+                                   nzUnCheckedChildren="只读"></nz-switch>
+                    </nz-col>
+                    <nz-col nzSpan="4">
+                        <i (click)="remove(i)" class="anticon anticon-close main-color cursor"></i>
+                    </nz-col>
+                </nz-row>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
 </nz-modal>
+<!--授予角色-->
+<smart-select-role #smartSelectRole (done)="setRole($event)"></smart-select-role>

src/main/webapp/app/netTopology/model/topology/topology.component.ts

-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {TopologyService} from '../../topology.service';
 import {NzMessageService} from 'ng-zorro-antd';
+import {SelectRoleComponent} from '../../../modal/select-role/select-role.component';
 
 @Component({
     selector: 'smart-topology',
@@ -9,34 +10,38 @@ import {NzMessageService} from 'ng-zorro-antd';
     styles: []
 })
 export class TopologyComponent implements OnInit {
+    @ViewChild('smartSelectRole') smartSelectRole: SelectRoleComponent;
     @Output() done = new EventEmitter();
 
     isVisible = false;
     title: string;
-    validateForm:FormGroup;
+    validateForm: FormGroup;
     topoId;
 
     pageNum;
     pageCount;
 
-    constructor(private fb:FormBuilder,private topologySer:TopologyService,
-                private message:NzMessageService) {
+    userGroup = [];  //用户角色组
+
+    constructor(private fb: FormBuilder, private topologySer: TopologyService,
+                private message: NzMessageService) {
     }
 
     ngOnInit() {
         this.initForm();
     }
 
-    initForm(){
+    initForm() {
         this.validateForm = this.fb.group(
             {
-                name:['',[Validators.required]],
-                refreshRete:[''],
-                json:[''],
-                users:[[]],
-                userGroups:[[]]
+                name: ['', [Validators.required]],
+                refreshRete: [''],
+                json: [''],
+                users: [[]],
+                userGroups: [[]]
             }
-        )
+        );
+        this.userGroup = [];
     }
 
     showAddMOodal() {
@@ -51,59 +56,81 @@ export class TopologyComponent implements OnInit {
         this.topologySer.findItem(id).subscribe(
             (res) => {
                 if (res.errCode == 10000) {
-                   this.validateForm.patchValue(res.data);
-                }else{
-                    this.message.create('error',`${res.errMsg}`);
+                    this.validateForm.patchValue(res.data);
+                    res.data.userGroups.forEach(r => {
+                        const data = {
+                            userGroupId: r.userGroupId,
+                            name: r.name,
+                            permission: r.permission === 3,
+                        };
+                        this.userGroup.push(data);
+                    });
+
+                } else {
+                    this.message.create('error', `${res.errMsg}`);
                 }
             }
         );
     }
 
-    handleOk(){
-        for(let i  in this.validateForm.controls){
+    //permission 2=只读， 3=读写
+    handleOk() {
+        for (let i  in this.validateForm.controls) {
             this.validateForm.controls[i].markAsDirty();
             this.validateForm.controls[i].updateValueAndValidity();
         }
-        if(this.validateForm.invalid){
+        if (this.validateForm.invalid) {
             return false;
         }
-        if(this.title == "添加拓扑图"){
+        const userGroup = [];
+        this.userGroup.forEach(e => {
+            const data = {
+                userGroupId: e.userGroupId,
+                name: e.name,
+                permission: e.permission == true ? 3 : 2,
+            };
+            userGroup.push(data);
+        });
+        this.validateForm.patchValue({
+            userGroups: userGroup
+        });
+        if (this.title == '添加拓扑图') {
             this.create();
         }
-        if(this.title == "编辑拓扑图"){
+        if (this.title == '编辑拓扑图') {
             this.update();
         }
     }
 
-    create(){
+    create() {
         this.topologySer.create(this.validateForm.value).subscribe(
-            (res)=>{
-                if(res.errCode == 10000){
+            (res) => {
+                if (res.errCode == 10000) {
                     this.initForm();
                     this.message.create('success', `创建成功`);
                     this.isVisible = false;
                     this.done.emit();
-                }else{
+                } else {
                     this.message.create('error', `${res.errMsg}`);
                 }
             }
-        )
+        );
     }
 
-    update(){
-        this.validateForm.addControl('id',new FormControl(this.topoId));
+    update() {
+        this.validateForm.addControl('id', new FormControl(this.topoId));
         this.topologySer.update(this.validateForm.value).subscribe(
-            (res)=>{
-                if(res.errCode == 10000){
+            (res) => {
+                if (res.errCode == 10000) {
                     this.initForm();
                     this.message.create('success', `编辑成功`);
                     this.done.emit();
                     this.isVisible = false;
-                }else{
+                } else {
                     this.message.create('error', `${res.errMsg}`);
                 }
             }
-        )
+        );
     }
 
     handleCancel() {
@@ -111,4 +138,31 @@ export class TopologyComponent implements OnInit {
         this.initForm();
     }
 
+    //选择角色
+    add() {
+        this.smartSelectRole.showModal('选择角色', null);
+    }
+
+    //移除
+    remove(index) {
+        this.userGroup.splice(index, 1);
+    }
+
+    //permission 2=只读， 3=读写
+    setRole(e) {
+        const idArr = this.userGroup.map(m => {
+            return m.userGroupId;
+        });
+        e.forEach(f => {
+            if (idArr.indexOf(f.id) == -1) {
+                const data = {
+                    userGroupId: f.id,
+                    name: f.name,
+                    permission: false,
+                };
+                this.userGroup.push(data);
+            }
+        });
+    }
+
 }

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html

@@ -39,7 +39,7 @@
         <ng-container *ngIf="editType == '只读模式'">
             <nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor"
                        (ngModelChange)="changeColor()">
-                <nz-option nzLabel="深蓝" nzValue="#132c4c"></nz-option>
+                <nz-option nzLabel="深蓝" nzValue="#003880"></nz-option>
                 <nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
                 <nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
                 <nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>

src/main/webapp/app/system/modal/user/user.component.ts

@@ -24,7 +24,7 @@ export class UserComponent implements OnInit {
     validateForm:FormGroup;
     userId;
     genderList = [{value:1,label:'男'},{value:0,label:'女'}];
-    positionList = [{value:1,label:'组长'},{value:2,label:'组员'}];
+    positionList = [{value:1,label:'组长'},{value:0,label:'组员'}];
 
     constructor(private fb:FormBuilder,private systemSer:SystemService,
                 private message:NzMessageService) {

src/main/webapp/content/scss/white.scss

@@ -4,6 +4,11 @@
     border-bottom: 1px solid #eeeeee;
 
   }
+  nz-header {
+    background: #ffffff;
+    padding: 0 16px;
+  }
+
 
   //自己写的
   //主机详情