update

README.md

@@ -45,8 +45,8 @@ v2.0.1  修复选择节点之后 流量查询不出来
  
   scp -r 22 build/wx root@10.10.38.99:/home/nginx/www
   
-
   git  命令：
   创建分支 git checkout -b test
   删除分支 git branch -D test
   合并分支到master上面  git checkout --patch test
+  

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

@@ -37,7 +37,8 @@
 <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-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>
@@ -50,7 +51,8 @@
             <!--<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-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>
@@ -67,7 +69,7 @@
         </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="全屏查看" (click)="toFull()">全屏查看</span>
         <span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
         <ng-container *ngIf="editType == '只读模式'">
             <span aria-hidden="true" title="编辑" (click)="changeEdit('编辑模式')">切换编辑模式</span>
@@ -77,9 +79,7 @@
         </ng-container>
     </div>
 </div>
-<div class="topo-container">
-    <div class="layui-row">
-        <div class="layui-col-md12">
+<div class="topo-container" #topoContainer>
     <div #topologyBody id="topology-body" class="topology-context">
         <!-- 鼠标悬浮显示节点信息 -->
         <div class="node-infobox" style="display: none;">
@@ -89,6 +89,9 @@
         <canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
             您的浏览器不支持HTML5!
         </canvas>
+        <div (click)="exitFull()" *ngIf="isFull" style="left: 20px;" class="lineList">
+            退出全屏
+        </div>
         <div class="lineList">
             {{editType}}
         </div>
@@ -98,12 +101,11 @@
         </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>
+                <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>
-    </div>
 </div>
 
 

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

-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';
@@ -27,17 +27,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 +60,8 @@ declare let editor: any;
                 color: #666666;
                 font-size: 20px;
             }
-            .lineList{
+
+            .lineList {
                 position: absolute;
                 top: 5px;
                 right: 20px;
@@ -68,11 +72,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,10 +86,20 @@ declare let editor: any;
                 margin-left: 12px;
                 cursor: pointer;
             }
+
+            .full-canvas {
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+            }
         `
     ]
 })
 export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDestroy {
+    @ViewChild('topoContainer') topoContainer: ElementRef;
     @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
     @ViewChild('topologyBody') topologyBody: ElementRef;
     @ViewChild('smartTopology') smartTopology: TopologyComponent;
@@ -96,13 +112,14 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
     isVisible = false;
     image;
     isLoading = false;
+    isFull = false;
 
     topoId;
     name;
     refreshRete;
     options;
-    lineType = "1";  //线条类型
-    editType = "只读模式";   //拓扑图状态
+    lineType = '1';  //线条类型
+    editType = '只读模式';   //拓扑图状态
 
     backgroundColor;   //背景色
 
@@ -113,14 +130,14 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
     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 renderer: Renderer2,
                 private sanitizer: DomSanitizer, private modalSer: NzModalService) {
 
     }
@@ -137,7 +154,7 @@ 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)
+        console.log(canvasWidth, canvasHeight);
         let myCanvas = this.topologyCanvas.nativeElement;
         let context = myCanvas.getContext('2d');
         let ratio = this.getPixelRatio(context);
@@ -146,13 +163,13 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
 
         myCanvas.width = myCanvas.width * ratio;
         myCanvas.height = myCanvas.height * ratio;
-        context.scale(ratio,ratio);
+        context.scale(ratio, ratio);
 
-        editor.loadTopology('','', 'img/backimg.png',canvasWidth,canvasHeight);
+        editor.loadTopology('', '', 'img/backimg.png', canvasWidth, canvasHeight);
     }
 
     // 获取像素比
-    getPixelRatio(context){
+    getPixelRatio(context) {
         const backingStore = context.backingStorePixelRatio ||
             context.webkitBackingStorePixelRatio ||
             context.mozBackingStorePixelRatio ||
@@ -162,85 +179,85 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
         return (window.devicePixelRatio || 1) / backingStore;
     }
 
-    ngDoCheck(){
+    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;
     }
 
     //一级分类
-    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 +295,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 +345,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 +373,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 +397,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 +485,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 +561,18 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
         );
     }
 
+    toFull() {
+        this.isFull = true;
+        this.renderer.addClass(this.topoContainer.nativeElement, 'full-canvas');
+        this.topoContainer.nativeElement.style.height = this.topologyBody.nativeElement.children[1].style.height
+            = window.screen.height + 'px';
+    }
+
+    exitFull() {
+        this.isFull = false;
+        this.topoContainer.nativeElement.style.height = this.topologyBody.nativeElement.children[1].style.height
+            = '520px';
+        this.renderer.removeClass(this.topoContainer.nativeElement, 'full-canvas');
+    }
+
 }

src/main/webapp/app/overAll/network-check/network-check.component.html

@@ -59,7 +59,7 @@
     </div>
 </div>
 <nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzTotal]="totalNum" [nzPageIndex]="pageIndex"
-          [nzPageSize]="pageSize" (nzPageIndexChange)="getwebList()" [nzFrontPagination]="false">
+          [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzFrontPagination]="false">
     <thead>
     <tr>
         <th [nzChecked]="allChecked"></th>

src/main/webapp/app/overAll/network-check/network-check.component.ts

@@ -55,6 +55,11 @@ export class NetworkCheckComponent implements OnInit {
         this.getCheckStatus();
     }
 
+    change(e){
+        this.pageIndex = e;
+        this.getwebList();
+    }
+
     //网站列表
     getwebList() {
         this.loading = true;

src/main/webapp/content/scss/darkBlue.scss

@@ -189,6 +189,6 @@ $fontColor: #b7d1f1;
   }
 
   .topology-context {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgb(61, 118, 171);
   }
 }