Commit e1ff90e4 authored by wangqinghua's avatar wangqinghua

directive

parent bdaebc34
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="isLoading" [nzShowPagination]="false"> <nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="isLoading" [nzShowPagination]="false">
<thead> <thead>
<tr> <tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th> <th>名称</th>
<th>状态</th> <th>状态</th>
<th>关联网站</th> <th>关联网站</th>
...@@ -43,69 +42,39 @@ ...@@ -43,69 +42,39 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<ng-template ngFor let-data [ngForOf]="nzTable.data"> <ng-template ngFor let-data [ngForOf]="nzTable.data">
<ng-template ngFor let-item [ngForOf]="expandDataCache[data.host]"> <ng-template ngFor let-item [ngForOf]="expandDataCache[data.host]">
<tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)"> <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
<!--父级--> <td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand' (nzExpandChange)="getChildren(item)">
<ng-container *ngIf="!item.level"> <span (click)="showEditModal(item)" class="main-color cursor">{{item.name}}</span>
<td></td> </td>
<td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand' <td class="round-tag tag-form">
(nzExpandChange)="getChildren(item)"> <ng-container *ngIf="item.status == 0">
<span>{{item.name}}</span> <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
</td> </ng-container>
</ng-container> <ng-container *ngIf="item.status == 2 || item.status == 3">
<!--子集--> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<ng-container *ngIf="item.level"> </ng-container>
<td nzShowCheckbox [nzIndeterminate]="indeterminate" <ng-container *ngIf="item.status == 4 || item.status == 5">
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td> <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
<td class="cursor main-color" [nzIndentSize]="item.level*20"> </ng-container>
<span (click)="goDetail(item)">{{item.name}}</span> </td>
</td> <td class="cursor">
</ng-container> <span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<td class="round-tag tag-form"> <td class="handle main-color">
<ng-container *ngIf="item.status == 0"> <span (click)="showBasicEditModal(item)">添加子节点</span>
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag> <ng-container *ngIf="!item.level">
</ng-container> <span (click)="showBasicEditModal(item)">配置告警推送</span>
<ng-container *ngIf="item.status == 2 || item.status == 3"> </ng-container>
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag> <ng-container *ngIf="item.level">
</ng-container> <span (click)="editBasicModal(item)">编辑</span>
<ng-container *ngIf="item.status == 4 || item.status == 5"> <span (click)="showDeleteConfirm(item)">移除</span>
<nz-tag class="tag-red" [nzColor]="color.red"></nz-tag> </ng-container>
</ng-container> </td>
</td> </tr>
<td class="cursor"> </ng-template>
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span> </ng-template>
</td>
<td class="handle main-color">
<ng-container *ngIf="!item.level">
<span (click)="showBasicEditModal(item)">添加资源</span>
<span (click)="updateGroup(item)">编辑</span>
<span (click)="showDeleteGroupConfirm(item)">删除</span>
</ng-container>
<ng-container *ngIf="item.level">
<span (click)="showBasicCheckModal(item.hostid,item.host)">添加监测点</span>
<span (click)="editBasicModal(item)">编辑</span>
<span (click)="showDeleteConfirm(item)">删除</span>
<nz-dropdown [nzTrigger]="'click'" class="table-dropdown">
<a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
</a>
<ul nz-menu nzSelectable>
<li *ngIf="!item.monitorTask" (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
<li (click)="openHost(item)" nz-menu-item><a>
<ng-container *ngIf="item.status == 1">开启</ng-container>
<ng-container *ngIf="item.status == 0">停止</ng-container>
监控
</a></li>
<li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</ng-container>
</td>
</tr>
</ng-template>
</ng-template>
</tbody> </tbody>
</nz-table> </nz-table>
......
import {Component, OnInit, Output, ViewChild} from '@angular/core'; import {Component, OnInit, Output, ViewChild} from '@angular/core';
import {BusinessComponent} from '../modal/business/business.component'; import {BusinessComponent} from '../modal/business/business.component';
import {BusinessService} from '../business.service'; import { BusinessService } from '../business.service';
import {TreeNodeInterface} from '../../overAll/basic/basic.component'; import {TreeNodeInterface} from '../../overAll/basic/basic.component';
import {NzMessageService} from 'ng-zorro-antd'; import {NzMessageService} from 'ng-zorro-antd';
import {color} from '../../app.constants'; import {color} from '../../app.constants';
...@@ -15,6 +15,7 @@ export class BConfigComponent implements OnInit { ...@@ -15,6 +15,7 @@ export class BConfigComponent implements OnInit {
sid; //节点id sid; //节点id
color = color; color = color;
allChecked = false;
isLoading = false; //加载中 isLoading = false; //加载中
dataSet; //数据list dataSet; //数据list
...@@ -23,21 +24,7 @@ export class BConfigComponent implements OnInit { ...@@ -23,21 +24,7 @@ export class BConfigComponent implements OnInit {
constructor(private busineSer:BusinessService,private message:NzMessageService) { constructor(private busineSer:BusinessService,private message:NzMessageService) {
} }
collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void { convertTreeToList(root: any, serviceid: string, index): TreeNodeInterface[] {
if ($event === false) {
if (data.children) {
data.children.forEach(d => {
const target = array.find(a => a.host === d.host);
target.expand = false;
this.collapse(array, target, false);
});
} else {
return;
}
}
}
convertTreeToList(root: any, groupId: string, index): TreeNodeInterface[] {
const stack = []; const stack = [];
const array = []; const array = [];
const hashMap = {}; const hashMap = {};
...@@ -52,7 +39,7 @@ export class BConfigComponent implements OnInit { ...@@ -52,7 +39,7 @@ export class BConfigComponent implements OnInit {
this.visitNode(node, hashMap, array); this.visitNode(node, hashMap, array);
if (node.list) { if (node.list) {
for (let i = node.list.length - 1; i >= 0; i--) { for (let i = node.list.length - 1; i >= 0; i--) {
stack.push({...node.list[i], level: node.level + 1, expand: true, parent: node, gId: groupId, checked: false}); stack.push({...node.list[i], level: node.level + 1, expand: true,serviceid: serviceid, parent: node, checked: false});
} }
} }
} }
...@@ -69,7 +56,7 @@ export class BConfigComponent implements OnInit { ...@@ -69,7 +56,7 @@ export class BConfigComponent implements OnInit {
toTree(index) { toTree(index) {
this.dataSet.forEach(item => { this.dataSet.forEach(item => {
this.expandDataCache[item.host] = this.convertTreeToList(item, item.id, index); this.expandDataCache[item.host] = this.convertTreeToList(item, item.serviceid, index);
}); });
} }
...@@ -89,7 +76,7 @@ export class BConfigComponent implements OnInit { ...@@ -89,7 +76,7 @@ export class BConfigComponent implements OnInit {
if(res.errCode == 10000){ if(res.errCode == 10000){
this.dataSet = res.data; this.dataSet = res.data;
this.dataSet.forEach((e,index)=>{ this.dataSet.forEach((e,index)=>{
e.service = index; e.host = index;
e.checked = false; e.checked = false;
}) })
this.toTree(null); this.toTree(null);
...@@ -100,9 +87,43 @@ export class BConfigComponent implements OnInit { ...@@ -100,9 +87,43 @@ export class BConfigComponent implements OnInit {
) )
} }
//
getChildren(item){
if (item.list) {
if (item.expand) {
item.expand = false;
} else {
item.expand = true;
}
return false;
}
this.isLoading = true;
const data = {
"sid":item.serviceid,
};
this.busineSer.findChild(data).subscribe(
(res)=>{
if (res.data) {
this.dataSet[item.host].list = res.data;
this.toTree(item.host);
} else {
this.dataSet[item.host].list = [];
this.toTree(item.host);
this.message.info('该分组下无资源');
}
this.isLoading = false;
}
)
}
//添加业务 //添加业务
showAddModal() { showAddModal() {
this.smartBusiness.showModal('添加业务'); this.smartBusiness.showModal('添加业务');
} }
//编辑业务
showEditModal(item){
this.smartBusiness.showEditModal("编辑业务",item)
}
} }
...@@ -9,9 +9,20 @@ ...@@ -9,9 +9,20 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="parentid">上层服务</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-select id="parentid" formControlName="parentid" nzPlaceHolder="上层服务">
<nz-option nzValue="1" nzLabel="问题,至少有一个问题"></nz-option>
<nz-option nzValue="2" nzLabel="问题,都有问题"></nz-option>
<nz-option nzValue="0" nzLabel="不计算"></nz-option>
</nz-select>
<nz-form-explain *ngIf="validateForm.get('algorithm').dirty && validateForm.get('parentid').errors">请选择用于计算服务状态的算法!</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="algorithm">状态计算算法</nz-form-label> <nz-form-label [nzSpan]="7" nzRequired nzFor="algorithm">状态计算算法</nz-form-label>
<nz-form-control [nzSpan]="12"> <nz-form-control [nzSpan]="12">
<nz-select nzAllowClear id="algorithm" formControlName="algorithm" nzPlaceHolder="状态计算算法"> <nz-select id="algorithm" formControlName="algorithm" nzPlaceHolder="状态计算算法">
<nz-option nzValue="1" nzLabel="问题,至少有一个问题"></nz-option> <nz-option nzValue="1" nzLabel="问题,至少有一个问题"></nz-option>
<nz-option nzValue="2" nzLabel="问题,都有问题"></nz-option> <nz-option nzValue="2" nzLabel="问题,都有问题"></nz-option>
<nz-option nzValue="0" nzLabel="不计算"></nz-option> <nz-option nzValue="0" nzLabel="不计算"></nz-option>
......
...@@ -19,6 +19,7 @@ export class BusinessComponent implements OnInit { ...@@ -19,6 +19,7 @@ export class BusinessComponent implements OnInit {
validateForm: FormGroup; validateForm: FormGroup;
checked = false; //选择SLA checked = false; //选择SLA
serviceId;
groupid; groupid;
...@@ -47,8 +48,9 @@ export class BusinessComponent implements OnInit { ...@@ -47,8 +48,9 @@ export class BusinessComponent implements OnInit {
algorithm: [''], algorithm: [''],
showsla: ['99.9000'], showsla: ['99.9000'],
sortorder: ['1'], sortorder: ['1'],
parentid: ['1'],
}); });
this.validateForm.get('showsla').disable(); // this.validateForm.get('showsla').disable();
} }
showModal(title): void { showModal(title): void {
...@@ -58,8 +60,8 @@ export class BusinessComponent implements OnInit { ...@@ -58,8 +60,8 @@ export class BusinessComponent implements OnInit {
showEditModal(title,item){ showEditModal(title,item){
this.title = title; this.title = title;
this.serviceId = item.serviceid;
this.isVisiable = true; this.isVisiable = true;
this.groupid = item.groupid;
this.validateForm.patchValue(item); this.validateForm.patchValue(item);
} }
...@@ -81,7 +83,14 @@ export class BusinessComponent implements OnInit { ...@@ -81,7 +83,14 @@ export class BusinessComponent implements OnInit {
} }
create() { create() {
this.busineSer.createService(this.validateForm.value).subscribe( const data = {
algorithm:0,
name:'新增',
sortorder:0,
showsla:0,
parentid:7
}
this.busineSer.createService(data).subscribe(
(res) => { (res) => {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.message.info('添加成功'); this.message.info('添加成功');
...@@ -101,7 +110,8 @@ export class BusinessComponent implements OnInit { ...@@ -101,7 +110,8 @@ export class BusinessComponent implements OnInit {
groupid:this.groupid, groupid:this.groupid,
groupDescribe:this.validateForm.value.groupDescribe, groupDescribe:this.validateForm.value.groupDescribe,
name:this.validateForm.value.name name:this.validateForm.value.name
} };
this.busineSer.updateService(data).subscribe( this.busineSer.updateService(data).subscribe(
(res) => { (res) => {
if (res.errCode == 10000) { if (res.errCode == 10000) {
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<span>节点名称:<label name="node_name"></label></span> <span>节点名称:<label name="node_name"></label></span>
<span>当前时间:<label name="current_time"></label></span> <span>当前时间:<label name="current_time"></label></span>
</div> </div>
<canvas class="topology-context" id="topology-canvas" #topologyCanvas style="height: 580px;width: 100%"> <canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
您的浏览器不支持HTML5! 您的浏览器不支持HTML5!
</canvas> </canvas>
<div class="lineList"> <div class="lineList">
......
...@@ -124,7 +124,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -124,7 +124,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
value:'' value:''
}; };
constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage:LocalStorageService,private differs: KeyValueDiffers, constructor(private topologySer: TopologyService, private message: NzMessageService,
private differs: KeyValueDiffers,
private sanitizer: DomSanitizer, private modalSer: NzModalService) { private sanitizer: DomSanitizer, private modalSer: NzModalService) {
} }
...@@ -141,9 +142,29 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -141,9 +142,29 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
ngAfterViewInit() { ngAfterViewInit() {
const canvasWidth = this.topologyBody.nativeElement.clientWidth; const canvasWidth = this.topologyBody.nativeElement.clientWidth;
const canvasHeight = this.topologyBody.nativeElement.clientHeight; const canvasHeight = this.topologyBody.nativeElement.clientHeight;
let myCanvas = this.topologyCanvas.nativeElement;
let context = myCanvas.getContext('2d');
let ratio = this.getPixelRatio(context);
myCanvas.style.width = canvasWidth + 'px';
myCanvas.style.height = canvasHeight + 'px';
myCanvas.width = myCanvas.width * ratio;
myCanvas.height = myCanvas.height * ratio;
context.scale(ratio,ratio);
editor.loadTopology('','', 'img/backimg.png',canvasWidth,canvasHeight); editor.loadTopology('','', 'img/backimg.png',canvasWidth,canvasHeight);
} }
// 获取像素比
getPixelRatio(context){
const backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
ngDoCheck(){ ngDoCheck(){
this.node.value = localStorage.getItem('node'); this.node.value = localStorage.getItem('node');
this.line.value = localStorage.getItem('line'); this.line.value = localStorage.getItem('line');
...@@ -339,7 +360,6 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -339,7 +360,6 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
//回显拓扑图 //回显拓扑图
viewTopology(topologyJson){ viewTopology(topologyJson){
console.log(topologyJson);
const arr = topologyJson.childs[0].childs; const arr = topologyJson.childs[0].childs;
const list = []; const list = [];
const hostIds = []; const hostIds = [];
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<nz-table #nzTable [nzData]="childrenList" [nzShowPagination]="true"> <nz-table #nzTable [nzData]="childrenList" [nzShowPagination]="true" [nzLoading]="isLoading">
<thead> <thead>
<tr> <tr>
<th nzShowCheckbox [nzIndeterminate]="indeterminate" [nzChecked]="allChecked" (nzCheckedChange)="checkAll($event)"></th> <th nzShowCheckbox [nzIndeterminate]="indeterminate" [nzChecked]="allChecked" (nzCheckedChange)="checkAll($event)"></th>
......
...@@ -20,6 +20,7 @@ export class ChildAssetsComponent implements OnInit { ...@@ -20,6 +20,7 @@ export class ChildAssetsComponent implements OnInit {
childId; childId;
childrenList; childrenList;
childName; childName;
isLoading = false;
allChecked = false; allChecked = false;
selectList = []; selectList = [];
...@@ -38,7 +39,10 @@ export class ChildAssetsComponent implements OnInit { ...@@ -38,7 +39,10 @@ export class ChildAssetsComponent implements OnInit {
} }
checkAll(value: boolean): void { checkAll(value: boolean): void {
this.childrenList.forEach(data => data.checked = value); this.childrenList.forEach(data => {
data.checked = value;
this.selectList.push(data);
})
this.refreshStatus(); this.refreshStatus();
} }
...@@ -71,15 +75,18 @@ export class ChildAssetsComponent implements OnInit { ...@@ -71,15 +75,18 @@ export class ChildAssetsComponent implements OnInit {
} }
getList() { getList() {
this.isLoading = true;
this.workSer.findInventory(this.childId).subscribe( this.workSer.findInventory(this.childId).subscribe(
(res) => { (res) => {
this.childrenList = res.data; this.childrenList = res.data;
this.isLoading = false;
} }
); );
} }
//删除资产--单个 //删除资产--单个
deleteInVentory(item){ deleteInVentory(item){
this.isLoading = true;
const data = { const data = {
inventoryIds:[] inventoryIds:[]
}; };
...@@ -93,6 +100,7 @@ export class ChildAssetsComponent implements OnInit { ...@@ -93,6 +100,7 @@ export class ChildAssetsComponent implements OnInit {
}else{ }else{
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
this.isLoading = false;
} }
) )
}) })
...@@ -104,6 +112,7 @@ export class ChildAssetsComponent implements OnInit { ...@@ -104,6 +112,7 @@ export class ChildAssetsComponent implements OnInit {
this.message.warning("请选择需要删除的资产"); this.message.warning("请选择需要删除的资产");
return false; return false;
} }
this.isLoading = true;
const data = { const data = {
inventoryIds:this.selectList.map(e=>{ inventoryIds:this.selectList.map(e=>{
return e.id; return e.id;
...@@ -118,6 +127,7 @@ export class ChildAssetsComponent implements OnInit { ...@@ -118,6 +127,7 @@ export class ChildAssetsComponent implements OnInit {
}else{ }else{
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
this.isLoading = false;
} }
) )
}) })
......
...@@ -199,6 +199,9 @@ ...@@ -199,6 +199,9 @@
position: relative; position: relative;
background: #fff; background: #fff;
} }
/*#topology-canvas{*/
/*transform: scale(0.5);*/
/*}*/
/********** 顶部工具栏 **********/ /********** 顶部工具栏 **********/
.toolbar-icon { .toolbar-icon {
......
...@@ -514,9 +514,9 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson,ca ...@@ -514,9 +514,9 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson,ca
} }
this.topologyGuid = topologyGuid this.topologyGuid = topologyGuid
// 创建jTopo舞台屏幕对象 // 创建jTopo舞台屏幕对象
var canvas = document.getElementById('topology-canvas') var canvas = document.getElementById('topology-canvas');
canvas.width = canvasWidth; // canvas.width = canvasWidth;
canvas.height = canvasHeight; // canvas.height = canvasHeight;
// 加载空白的编辑器 // 加载空白的编辑器
if (topologyJson === '-1') { if (topologyJson === '-1') {
this.stage = new JTopo.Stage(canvas) // 定义舞台对象 this.stage = new JTopo.Stage(canvas) // 定义舞台对象
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment