Skip to content

S
smart
Commit 8c470159 authored by wangqinghua's avatar wangqinghua
Browse files
Options

兼容性测试

parent 5398685c
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 173 deletions
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ 8c470159
......@@ -34,73 +34,75 @@
</div>
</div>
<div nz-row class="layui-layout layui-layout-admin header-bar">
<div nz-col nzSpan="12" class="layui-header ">
<ng-container *ngIf="editType == '只读模式'">
<nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor" (ngModelChange)="changeColor()">
<nz-option nzLabel="深蓝" nzValue="#3d76ab"></nz-option>
<nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
<nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
<nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
<nz-option nzLabel="浅灰" nzValue="#c3c7c9"></nz-option>
</nz-select>
</ng-container>
<ng-container *ngIf="editType == '编辑模式'">
<span (click)="addDevice()">添加设备</span>
<!--<span (click)="addCheck()">添加监测点</span>-->
<!--<span (click)="showAddImg()">添加图片</span>-->
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
<nz-select style="width: 200px;" nzPlaceHolder="选择线条" [(ngModel)]="lineType" (ngModelChange)="changeLine($event)">
<nz-option nzLabel="直线" nzValue="1"></nz-option>
<nz-option nzLabel="折线(横向)" nzValue="2"></nz-option>
<nz-option nzLabel="折线(纵向)" nzValue="3"></nz-option>
<nz-option nzLabel="二次折线(横向)" nzValue="4"></nz-option>
<nz-option nzLabel="二次折线(纵向)" nzValue="5"></nz-option>
</nz-select>
</ng-container>
</div>
<!-- 顶部工具栏 -->
<div nz-col nzSpan="12" class="layui-nav layui-layout-right">
<ng-container *ngIf="editType == '编辑模式'">
<span aria-hidden="true" title="保存" (click)="update()">保存</span>
<span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
</ng-container>
<span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
<span aria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
<span aria-hidden="true" title="全屏查看" onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
<span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
<ng-container *ngIf="editType == '只读模式'">
<span aria-hidden="true" title="编辑" (click)="changeEdit('编辑模式')">切换编辑模式</span>
</ng-container>
<ng-container *ngIf="editType == '编辑模式'">
<span aria-hidden="true" title="只读" (click)="changeEdit('只读模式')">切换只读模式</span>
</ng-container>
<div class="canvas-topo" #canvasTopo>
<div nz-row class="layui-layout layui-layout-admin header-bar">
<div nz-col nzSpan="12" class="layui-header ">
<ng-container *ngIf="editType == '只读模式'">
<nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor"
(ngModelChange)="changeColor()">
<nz-option nzLabel="深蓝" nzValue="#3d76ab"></nz-option>
<nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
<nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
<nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
<nz-option nzLabel="浅灰" nzValue="#c3c7c9"></nz-option>
</nz-select>
</ng-container>
<ng-container *ngIf="editType == '编辑模式'">
<span (click)="addDevice()">添加设备</span>
<!--<span (click)="addCheck()">添加监测点</span>-->
<!--<span (click)="showAddImg()">添加图片</span>-->
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
<nz-select style="width: 200px;" nzPlaceHolder="选择线条" [(ngModel)]="lineType"
(ngModelChange)="changeLine($event)">
<nz-option nzLabel="直线" nzValue="1"></nz-option>
<nz-option nzLabel="折线(横向)" nzValue="2"></nz-option>
<nz-option nzLabel="折线(纵向)" nzValue="3"></nz-option>
<nz-option nzLabel="二次折线(横向)" nzValue="4"></nz-option>
<nz-option nzLabel="二次折线(纵向)" nzValue="5"></nz-option>
</nz-select>
</ng-container>
</div>
<!-- 顶部工具栏 -->
<div nz-col nzSpan="12" class="layui-nav layui-layout-right">
<ng-container *ngIf="editType == '编辑模式'">
<span aria-hidden="true" title="保存" (click)="update()">保存</span>
<span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
</ng-container>
<span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
<span aria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
<span *ngIf="!isFull" aria-hidden="true" title="全屏查看" (click)="fullCanvas()">全屏查看</span>
<span *ngIf="isFull" aria-hidden="true" title="全屏查看" (click)="exitFull()">退出全屏</span>
<span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
<ng-container *ngIf="editType == '只读模式'">
<span aria-hidden="true" title="编辑" (click)="changeEdit('编辑模式')">切换编辑模式</span>
</ng-container>
<ng-container *ngIf="editType == '编辑模式'">
<span aria-hidden="true" title="只读" (click)="changeEdit('只读模式')">切换只读模式</span>
</ng-container>
</div>
</div>
</div>
<div class="topo-container">
<div class="layui-row">
<div class="layui-col-md12">
<div #topologyBody id="topology-body" class="topology-context">
<!-- 鼠标悬浮显示节点信息 -->
<div class="node-infobox" style="display: none;">
<span>节点名称：<label name="node_name"></label></span>
<span>当前时间：<label name="current_time"></label></span>
</div>
<canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
您的浏览器不支持HTML5!
</canvas>
<div class="lineList">
{{editType}}
</div>
<div class="loading">
<nz-spin nzTip='获取拓扑图...' [nzSpinning]="isLoading">
</nz-spin>
</div>
<div class="checkList">
<p *ngFor="let item of checkJson;let i = index;">
<span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span><i (click)="deleteCheck(i)" class="minus anticon anticon-minus-circle-o"></i>
</p>
</div>
<div class="topo-container">
<div #topologyBody id="topology-body">
<!-- 鼠标悬浮显示节点信息 -->
<div class="node-infobox" style="display: none;">
<span>节点名称：<label name="node_name"></label></span>
<span>当前时间：<label name="current_time"></label></span>
</div>
<canvas class="topology-context" id="topology-canvas" width="1190" #topologyCanvas>
您的浏览器不支持HTML5!
</canvas>
<div class="lineList">
{{editType}}
</div>
<div class="loading">
<nz-spin nzTip='获取拓扑图...' [nzSpinning]="isLoading">
</nz-spin>
</div>
<div class="checkList">
<p *ngFor="let item of checkJson;let i = index;">
<span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span><i (click)="deleteCheck(i)"
class="minus anticon anticon-minus-circle-o"></i>
</p>
</div>
</div>
</div>
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ 8c470159
import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck, OnDestroy} from '@angular/core';
import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck, OnDestroy, Renderer2} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
import {DomSanitizer} from '@angular/platform-browser';
......@@ -7,6 +7,7 @@ import {CheckComponent} from '../model/check/check.component';
import {LineComponent} from '../model/line/line.component';
import {NodeComponent} from '../model/node/node.component';
import {SelectRadioGroupComponent} from '../../modal/select-radio-group/select-radio-group.component';
import {timer} from 'rxjs/observable/timer';
declare let editor: any;
......@@ -27,17 +28,20 @@ declare let editor: any;
margin-right: 15px;
cursor: pointer;
}
.header-bar{
.header-bar {
line-height: 60px;
color: #6097b7;
padding: 0 20px;
background-color: #ddd;
}
.layui-layout-right{
.layui-layout-right {
text-align: right;
color: #6097b7
}
.layui-layout-right span{
.layui-layout-right span {
margin-right: 5px;
cursor: pointer;
}
......@@ -57,7 +61,8 @@ declare let editor: any;
color: #666666;
font-size: 20px;
}
.lineList{
.lineList {
position: absolute;
top: 5px;
right: 20px;
......@@ -68,11 +73,13 @@ declare let editor: any;
.layui-form-label {
width: 110px;
}
.loading{
.loading {
position: absolute;
top: 30%;
left: 49%;
}
.minus {
vertical-align: middle;
color: red;
......@@ -80,11 +87,35 @@ declare let editor: any;
margin-left: 12px;
cursor: pointer;
}
.full-canvas {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
background: rgb(61, 118, 171);
}
.canvas-topo {
height: 100%;
}
.topo-container {
height: calc(100% - 60px);
}
#topology-body, .topology-context {
height: 100%;
}
`
]
})
export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDestroy {
@ViewChild('topologyCanvas') topologyCanvas: ElementRef;
@ViewChild('canvasTopo') canvasTopo: ElementRef;
@ViewChild('topologyBody') topologyBody: ElementRef;
@ViewChild('smartTopology') smartTopology: TopologyComponent;
@ViewChild('smartCheck') smartCheck: CheckComponent;
......@@ -101,26 +132,27 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
name;
refreshRete;
options;
lineType = "1"; //线条类型
editType = "只读模式"; //拓扑图状态
lineType = '1'; //线条类型
editType = '只读模式'; //拓扑图状态
backgroundColor; //背景色
checkJson = [];
fileList: UploadFile[] = [];
isDevice;
isFull = false;
private customerDifferLink: KeyValueDiffer<string, any>;
private customerDifferNode: KeyValueDiffer<string, any>;
node = {
value:''
value: ''
};
line = {
value:''
value: ''
};
constructor(private topologySer: TopologyService, private message: NzMessageService,
private differs: KeyValueDiffers,
private differs: KeyValueDiffers, private render: Renderer2,
private sanitizer: DomSanitizer, private modalSer: NzModalService) {
}
......@@ -135,24 +167,28 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
}
ngAfterViewInit() {
const canvasWidth = this.topologyBody.nativeElement.clientWidth;
const canvasHeight = this.topologyBody.nativeElement.clientHeight;
console.log(canvasWidth,canvasHeight)
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);
timer(500).subscribe(
()=>{
const canvasWidth = this.topologyBody.nativeElement.clientWidth;
const canvasHeight = this.topologyBody.nativeElement.clientHeight;
console.log(canvasWidth, canvasHeight);
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);
}
)
}
// 获取像素比
getPixelRatio(context){
getPixelRatio(context) {
const backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
......@@ -162,85 +198,86 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
return (window.devicePixelRatio || 1) / backingStore;
}
ngDoCheck(){
this.node.value = localStorage.getItem('node');
this.line.value = localStorage.getItem('line');
ngDoCheck() {
this.node.value = localStorage.getItem('node');
this.line.value = localStorage.getItem('line');
const changesLine = this.customerDifferLink.diff(this.line);
const changesNode = this.customerDifferNode.diff(this.node);
if (changesLine && changesLine['_appendAfter'].currentValue == "true") {
if (changesLine && changesLine['_appendAfter'].currentValue == 'true') {
const linkObj = localStorage.getItem('linkObj');
this.smartLine.showModal( JSON.parse(linkObj) );
this.smartLine.showModal(JSON.parse(linkObj));
}
if (changesNode && changesNode['_appendAfter'].currentValue == "true") {
if (changesNode && changesNode['_appendAfter'].currentValue == 'true') {
const nodeObj = localStorage.getItem('nodeObj');
this.smartNode.showModal( JSON.parse(nodeObj) );
this.smartNode.showModal(JSON.parse(nodeObj));
}
}
ngOnDestroy(){
localStorage.setItem("line",'false');
localStorage.setItem("node",'false');
ngOnDestroy() {
localStorage.setItem('line', 'false');
localStorage.setItem('node', 'false');
}
//选择线条类型
changeLine(e){
changeLine(e) {
switch (e) {
case"1":{ //直线
editor.lineType='line';
case'1': { //直线
editor.lineType = 'line';
break;
}
case"2":{ //折线(横向)
editor.lineType='foldLine';
editor.config.linkDirection='horizontal';
case'2': { //折线(横向)
editor.lineType = 'foldLine';
editor.config.linkDirection = 'horizontal';
break;
}
case"3":{ //折线(纵向)
editor.lineType='foldLine';
editor.config.linkDirection='vertical';
case'3': { //折线(纵向)
editor.lineType = 'foldLine';
editor.config.linkDirection = 'vertical';
break;
}
case"4":{ //二次折线(横向)
editor.lineType='flexLine';
editor.config.linkDirection='horizontal';
case'4': { //二次折线(横向)
editor.lineType = 'flexLine';
editor.config.linkDirection = 'horizontal';
break;
}
case"5":{ //二次折线(纵向)
editor.lineType='flexLine';
editor.config.linkDirection='vertical';
case'5': { //二次折线(纵向)
editor.lineType = 'flexLine';
editor.config.linkDirection = 'vertical';
break;
}
}
}
//改变模式
changeEdit(type){
if(type == '编辑模式'){
this.topologyCanvas.nativeElement.style.background = "url(../neweb/javascript/jtopo/img/backimg.png)";
changeEdit(type) {
if (type == '编辑模式') {
this.topologyCanvas.nativeElement.style.background = 'url(../neweb/javascript/jtopo/img/backimg.png)';
editor.utils.editTopology();
}
if(type == '只读模式'){
this.topologyCanvas.nativeElement.style.background = "";
editor.utils.normalTopology()
if (type == '只读模式') {
this.topologyCanvas.nativeElement.style.background = '';
editor.utils.normalTopology();
}
this.editType = type;
}
//改变背景色
changeColor(){
changeColor() {
this.topologyCanvas.nativeElement.style.background = this.backgroundColor;
this.canvasTopo.nativeElement.style.background = this.backgroundColor;
}
//一级分类
getTypeList(){
getTypeList() {
this.topologySer.findTreeWithWeb().subscribe(
(res)=>{
if(res.errCode == 10000){
(res) => {
if (res.errCode == 10000) {
this.options = res.data;
}else{
} else {
this.message.error(res.errMSg);
}
}
)
);
}
//新增拓扑图
......@@ -278,13 +315,13 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
//获取节点信息
setImg(e) {
const data = {
hostIds:[e]
}
hostIds: [e]
};
this.topologySer.findByHostIdOrWeb(data).subscribe(
(res)=>{
editor.utils.addNode(res.data[0].url, res.data[0].name,res.data[0].hostId);
(res) => {
editor.utils.addNode(res.data[0].url, res.data[0].name, res.data[0].hostId);
}
)
);
}
//获取列表
......@@ -328,15 +365,15 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
//查询单个
getDetail() {
this.isLoading = true;
this.topologySer.findItem( this.topoId).subscribe(
this.topologySer.findItem(this.topoId).subscribe(
(res) => {
if (res.errCode == 10000) {
if (res.data.json.length > 0) {
let json = JSON.parse(res.data.json);
if(json.topology){
if (json.topology) {
this.viewTopology(JSON.parse(json.topology));
this.checkJson = json.check;
}else{
} else {
this.isLoading = false;
editor.utils.clearTopology();
this.checkJson = [];
......@@ -356,22 +393,22 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
}
//回显拓扑图
viewTopology(topologyJson){
viewTopology(topologyJson) {
const arr = topologyJson.childs[0].childs;
const list = [];
const hostIds = [];
arr.forEach(e=>{
if(e.elementType == 'link' && e.itemId && e.itemId.length > 2){
arr.forEach(e => {
if (e.elementType == 'link' && e.itemId && e.itemId.length > 2) {
const data = {
itemIdIn:e.itemId.split(',')[0],
itemIdOut:e.itemId.split(',')[1],
linkId:e.id
itemIdIn: e.itemId.split(',')[0],
itemIdOut: e.itemId.split(',')[1],
linkId: e.id
};
list.push(data);
}
});
arr.forEach(e=>{
if(e.elementType == 'node' && e.hostId){
arr.forEach(e => {
if (e.elementType == 'node' && e.hostId) {
hostIds.push(e.hostId);
}
});
......@@ -380,62 +417,62 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
const glist = [];
//删除对象
const dlist = [];
if(hostIds.length > 0){
if (hostIds.length > 0) {
const res = {
hostIds : hostIds
hostIds: hostIds
};
this.topologySer.findElementStatus(res).subscribe(
(res)=>{
(res) => {
//status -1=未监控, 0=正常, 1=危险, 2=故障, 3=未分类
const resData = res.data;
resData.forEach(e1=>{
arr.forEach(e2=>{
if(e1.elementId == e2.hostId){
resData.forEach(e1 => {
arr.forEach(e2 => {
if (e1.elementId == e2.hostId) {
// if(e1.status == -2){
// e2.alarm = "主机被删除，请及时清理";
// e2.fontColor='0,0,0';
// e2.alarmAlpha=0.9;
// }
if(e1.status == 1){
e2.alarm = "危险";
if (e1.status == 1) {
e2.alarm = '危险';
// e2.fontColor='0,0,0';
e2.alarmColor='255,153,18';
e2.alarmAlpha=0.9;
e2.alarmColor = '255,153,18';
e2.alarmAlpha = 0.9;
}
if(e1.status == 2){
e2.alarm = "故障";
if (e1.status == 2) {
e2.alarm = '故障';
// e2.fontColor='0,0,0';
e2.alarmAlpha=0.9;
e2.alarmAlpha = 0.9;
}
}
})
});
});
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
this.isLoading = false;
}
)
);
}
//流量数据
if(list.length > 0){ //有流量监控-->查询流量监控
if (list.length > 0) { //有流量监控-->查询流量监控
const data = {
"list" : list
'list': list
};
this.topologySer.findFlow(data).subscribe(
(res)=>{
(res) => {
const response = res.data;
response.forEach(e1=>{
arr.forEach(e2=>{
if(e1.linkId == e2.id){
e2.text = "In:"+e1.fullValueIn+" Out:"+e1.fullValueOut;
response.forEach(e1 => {
arr.forEach(e2 => {
if (e1.linkId == e2.id) {
e2.text = 'In:' + e1.fullValueIn + ' Out:' + e1.fullValueOut;
}
})
});
});
this.isLoading = false;
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
}
)
}else{ //无流量监控
);
} else { //无流量监控
this.isLoading = false;
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
}
......@@ -468,8 +505,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
nzOkType: 'danger',
nzOnOk: () => {
const data = {
id:this.topoId
}
id: this.topoId
};
this.topologySer.delete(data).subscribe(
(res) => {
if (res.errCode == 10000) {
......@@ -544,4 +581,16 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
);
}
//全屏查看
fullCanvas() {
this.isFull = true;
this.render.addClass(this.canvasTopo.nativeElement, 'full-canvas');
}
//退出全屏
exitFull() {
this.isFull = false;
this.render.removeClass(this.canvasTopo.nativeElement, 'full-canvas');
}
}
src/main/webapp/content/scss/darkBlue.scss
View file @ 8c470159
......@@ -189,6 +189,6 @@ $fontColor: #b7d1f1;
}
.topology-context {
background: rgba(0, 0, 0, 0.2);
background: rgb(61, 118, 171);
}
}
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