重构 jtopo

src/main/webapp/app/app.main.module.ts

@@ -96,7 +96,8 @@ import {ModifyPasswordComponent} from './modal/modify-password/modify-password.c
 import {FullScreenComponent} from './modal/full-screen/full-screen.component';
 import {LookRoleComponent} from './look-role/look-role.component';
 import {ThresholdComponent} from './modal/threshold/threshold.component';
-import {JtopoComponent} from './jtopo/jtopo.component';
+import {LineComponent} from './netTopology/model/line/line.component';
+import {NodeComponent} from './netTopology/model/node/node.component';
 
 @NgModule({
     imports: [
@@ -195,7 +196,8 @@ import {JtopoComponent} from './jtopo/jtopo.component';
         LookPlanComponent,
         LookRoleComponent,
         ThresholdComponent,
-        JtopoComponent,
+        LineComponent,
+        NodeComponent
     ],
     providers:[
         OverAllService,

src/main/webapp/app/jtopo/jtopo.component.html

-
-<div class="layui-layout layui-layout-admin">
-  <div class="layui-header header-bar">
-    <span (click)="addDevice()">添加设备</span>
-    <span (click)="addCheck()">添加监测点</span>
-    <span (click)="showAddImg()">添加图片</span>
-    <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
-
-    <!-- 顶部工具栏 -->
-    <div class="layui-nav layui-layout-right" style="color: #6097b7" >
-            <span aria-hidden="true" title="全屏查看"
-                  onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
-      <span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
-      <span aria-hidden="true" title="保存" (click)="update()">保存</span>
-      <span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
-      <span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
-      <span caria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
-    </div>
-  </div>
-  <div class="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" #topologyCanvas
-                  style="height: 580px;">
-            您的浏览器不支持HTML5!
-          </canvas>
-          <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>
-    </div>
-  </div>
-</div>
-
-
-<!--添加图片-->
-<nz-modal [(nzVisible)]="isDevice" nzTitle="添加图片" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form  nz-form>
-    <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
-      <nz-form-control [nzSpan]="12">
-       <input nz-input type="text">
-      </nz-form-control>
-    </nz-form-item>
-  </form>
-</nz-modal>
-
-
-<!--添加拓扑图-->
-<smart-topology #smartTopology (done)="getList()"></smart-topology>
-
-<!--添加监测点-->
-<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
-
-<!--选择资源-->
-<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file

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

@@ -34,4 +34,81 @@
 </div>
 
 
-<smart-jtopo></smart-jtopo>
+<div class="layui-layout layui-layout-admin">
\ No newline at end of file
+    <div class="layui-header header-bar">
+        <span (click)="addDevice()">添加设备</span>
+        <span (click)="addCheck()">添加监测点</span>
+        <span (click)="showAddImg()">添加图片</span>
+        <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
+
+        <!-- 顶部工具栏 -->
+        <div class="layui-nav layui-layout-right" style="color: #6097b7" >
+            <span aria-hidden="true" title="全屏查看"
+                  onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
+            <span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
+            <span aria-hidden="true" title="保存" (click)="update()">保存</span>
+            <span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
+            <span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
+            <span caria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
+        </div>
+    </div>
+    <div class="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" #topologyCanvas  style="height: 580px;">
+                        您的浏览器不支持HTML5!
+                    </canvas>
+                    <div class="lineList">
+                        <p onclick="editor.lineType='line'">连线</p>
+                        <p onclick="editor.lineType='foldLine';editor.config.linkDirection='horizontal';">折线(横向)</p>
+                        <p onclick="editor.lineType='foldLine';editor.config.linkDirection='Vertical';">折线(纵向)</p>
+                        <p onclick="editor.lineType='flexLine';editor.config.linkDirection='horizontal';">二次折线(横向)</p>
+                        <p onclick="editor.lineType='flexLine';editor.config.linkDirection='Vertical';">二次折线(纵向)</p>
+                    </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>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+<!--添加图片-->
+<nz-modal [(nzVisible)]="isDevice" nzTitle="添加图片" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+    <form  nz-form>
+        <nz-form-item>
+            <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
+            <nz-form-control [nzSpan]="12">
+                <input nz-input type="text">
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</nz-modal>
+
+<!--流量配置-->
+<smart-line #smartLine></smart-line>
+
+<!--设备配置-->
+<smart-node #smartNode></smart-node>
+
+<!--添加拓扑图-->
+<smart-topology #smartTopology (done)="getList()"></smart-topology>
+
+<!--添加监测点-->
+<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
+
+<!--选择资源-->
+<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file

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

-import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck} from '@angular/core';
 import {TopologyService} from '../topology.service';
 import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
 import {DomSanitizer} from '@angular/platform-browser';
-import * as $ from 'jquery';
 import {TopologyComponent} from '../model/topology/topology.component';
 import {CheckComponent} from '../model/check/check.component';
 import {DeviceComponent} from '../model/device/device.component';
 import {SelectGroupComponent} from '../../modal/select-group/select-group.component';
+import {LocalStorageService} from 'ngx-webstorage';
+import {numberOfBytes} from 'ng-jhipster/src/directive/number-of-bytes';
+import {LineComponent} from '../model/line/line.component';
+import {NodeComponent} from '../model/node/node.component';
 
 declare let editor: any;
 declare var layui: any;
@@ -50,6 +53,13 @@ declare var layui: any;
                 color: #666666;
                 font-size: 20px;
             }
+            .lineList{
+                position: absolute;
+                top: 5px;
+                left: 20px;
+                color: #6097b7;
+                cursor: pointer;
+            }
 
             .layui-form-label {
                 width: 110px;
@@ -65,11 +75,13 @@ declare var layui: any;
         `
     ]
 })
-export class NeTopologyComponent implements OnInit, AfterViewInit {
+export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit {
     @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
     @ViewChild('smartTopology') smartTopology: TopologyComponent;
     @ViewChild('smartCheck') smartCheck: CheckComponent;
     @ViewChild('smartSelectGroup') smartSelectGroup: SelectGroupComponent;
+    @ViewChild('smartLine') smartLine: LineComponent;
+    @ViewChild('smartNode') smartNode: NodeComponent;
 
     dataSet;
     isVisible = false;
@@ -82,14 +94,37 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
 
     checkJson = [];
     fileList: UploadFile[] = [];
+    isDevice;
 
-    constructor(private topologySer: TopologyService, private message: NzMessageService,
+    private customerDiffer: KeyValueDiffer<string, any>;
+    local = {
+        node:'',
+        link:''
+    };
+
+    constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage:LocalStorageService,private differs: KeyValueDiffers,
                 private sanitizer: DomSanitizer, private modalSer: NzModalService) {
     }
 
     ngOnInit() {
         this.getList();
         this.getTypeList();
+        this.customerDiffer = this.differs.find(this.local).create();
+    }
+
+    ngAfterViewInit() {
+        this.loadCanvas();
+    }
+
+    ngDoCheck(){
+        this.local.node =  localStorage.getItem("node");
+        this.local.link =  localStorage.getItem("link");
+        if (this.local.node == 'true') {
+           this.smartNode.showModal();
+        }
+        if (this.local.link == 'true') {
+            this.smartLine.showModal(null);
+        }
     }
 
     //一级分类
@@ -98,10 +133,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
             (res)=>{
                 if(res.errCode == 10000){
                     this.options = res.data;
-                    layui.use('form', function() {
-                        let form = layui.form;
-                        form.render("select");
-                    });
                 }else{
                     this.message.error(res.errMSg);
                 }
@@ -109,15 +140,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         )
     }
 
-    ngAfterViewInit() {
-        layui.use('element', () => {
-            let element = layui.element;
-            element.init();
-        });
-        this.loadCanvas();
-
-    }
-
     //新增拓扑图
     addTopo() {
         this.smartTopology.showAddMOodal();
@@ -157,7 +179,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         }
         this.topologySer.findByHostIdOrWeb(data).subscribe(
             (res)=>{
-                editor.utils.addNode(res.data[0].url, '图片');
+                editor.utils.addNode(res.data[0].url, '图片',e[0]);
             }
         )
     }
@@ -200,6 +222,11 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         );
     }
 
+    //load
+    loadCanvas() {
+        editor.loadTopology('','', 'img/backimg.png');
+    }
+
     //查询单个
     getDetail(id) {
         this.topologySer.findItem(id).subscribe(
@@ -209,6 +236,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
                         let json = JSON.parse(res.data.json);
                         if(json.topology){
                             editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
+                            // this.smartJtopo.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
                             this.checkJson = json.check;
                         }else{
                             editor.utils.clearTopology();
@@ -221,9 +249,9 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
                     this.name = res.data.name;
                     this.refreshRete = res.data.refreshRete;
                     this.topoId = res.data.id;
-                    editor.utils.editTopology();
                     this.findItemStatus();
                 }
+                editor.utils.editTopology();
             }
         );
     }
@@ -286,18 +314,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         this.checkJson.splice(index, 1);
     }
 
-    //load
-    loadCanvas() {
-        // 节点树中每个节点的拖放动作定义给拓扑图编辑器
-        let nodes = $('[topo-div-type=\'topo-node\']');
-        let nodeLength = nodes.length;
-        for (let i = 0; i < nodeLength; i++) {
-            let text = $(nodes[i]).find('span').eq(0).text();
-            editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
-        }
-        editor.loadTopology('', 'img/backimg.png');
-    }
-
     //添加图片-----start
     showAddImg() {
         if (!this.topoId) {
@@ -344,6 +360,4 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         );
     }
 
-//    end
-
 }

src/main/webapp/app/netTopology/topology.service.ts

@@ -98,4 +98,14 @@ export class TopologyService {
     findElementStatus(data): Observable<any> {
         return this.http.post(SERVER_API_URL + '/sysmapJson/findElementStatus',data);
     }
+
+    //查询进出口流量
+    findFlow(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/sysmapJson/flow',data);
+    }
+
+    //根据主机id查询网卡进出口监控项
+    findFlowItemByHost(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/sysmapJson/findFlowItemByHost',data);
+    }
 }

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

@@ -56,7 +56,7 @@
                     <td></td>
                     <td>总计</td>
                     <td></td>
-                    <td>{{totalNum}}{{(nowStatus[0].response_units).toFixed(4)}}</td>
+                    <td>{{totalNum.toFixed(4)}}s</td>
                     <td></td>
                     <td></td>
                   </tr>
@@ -125,9 +125,9 @@
                 <div nz-col [nzSpan]="6" >
                       <div #chartSpeedLeft class="chart-left" *ngFor="let item of speed,let i  = index;">
                         <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
-                        <p>平均值   {{item.average}}</p>
-                        <p>最大值   {{item.max}}</p>
-                        <p>最小值   {{item.min}}</p>
+                        <p>平均值   {{item.average.toFixed(4)}}</p>
+                        <p>最大值   {{item.max.toFixed(4)}}</p>
+                        <p>最小值   {{item.min.toFixed(4)}}</p>
                       </div>
                 </div>
                 <div nz-col [nzSpan]="18">
@@ -138,7 +138,7 @@
                 <div nz-col [nzSpan]="6" >
                     <div #chartTimeLeft class="chart-left" *ngFor="let item of time,let i  = index;">
                       <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
-                      <p>平均值   {{(item.average.toFixed(4))}}</p>
+                      <p>平均值   {{(item.average).toFixed(4)}}</p>
                       <p>最大值   {{(item.max).toFixed(4)}}</p>
                       <p>最小值   {{(item.min).toFixed(4)}}</p>
                     </div>

src/main/webapp/app/shared/common/common.service.ts

@@ -125,36 +125,4 @@ export class CommonService implements OnInit {
         return usablePrefixMethod;
     }
 
-    /**
-     * 计算程序执行时间
-     * @type {{startTime: {}, timeSpan: number, start: Timer.start, stop: Timer.stop, getTimeSpan: Timer.getTimeSpan}}
-     */
-   Timer = {
-        startTime: {},
-        stoppedStatus: true,
-        start:  ()=> {
-            if (this.stoppedStatus) {
-                this.startTime = new Date()
-                this.stoppedStatus = false
-            }
-        },
-        pause:  ()=> {
-            var startTime = this.startTime
-            if (startTime) {
-                return new Date() - startTime
-            } else {
-                return -1
-            }
-        },
-        stop: function () {
-            var startTime = this.startTime
-            if (startTime) {
-                this.stoppedStatus = true
-                return new Date() - startTime
-            } else {
-                this.stoppedStatus = true
-                return -1
-            }
-        }
-    }
 }

src/main/webapp/app/shared/shared.module.ts

@@ -18,6 +18,7 @@ import {
 } from './';
 import {ReactiveFormsModule} from '@angular/forms';
 import {CommonService} from './common/common.service';
+import {UtilService} from './common/util.service';
 
 @NgModule({
     imports: [
@@ -42,6 +43,7 @@ import {CommonService} from './common/common.service';
         EmitService,
         NgbActiveModal,
         CommonService,
+        UtilService,
     ],
     entryComponents: [JhiLoginModalComponent],
     exports: [

src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js

@@ -3,7 +3,6 @@
  * designed by xwenyuan
  * github: https://github.com/xwenyuan/jtopo_topology.git
  */
-
 /**
  * 提供拓扑图面板相关操作的函数集，编辑器继承其全部功能
  */
@@ -86,6 +85,8 @@ TopologyPanel.prototype.loadTopologyByJson = function (topologyJson, backImg) {
         JTopo.replaceStageWithJson(topologyJson)
         if (editor.stage && editor.scene && editor.scene.childs && editor.scene.childs.length > 0) {
             editor.stage.centerAndZoom()
+            editor.utils.getAllNodes()[0].alarm = "告警";
+            console.log(editor.utils.getAllNodes()[0]);
         }
     } catch (e) {
         console.error(e)
@@ -161,7 +162,7 @@ function TopologyEditor() {
         linkFontColor: 'red',              // 连线文字颜色,如"255,255,0"
         linkArrowsRadius: 0,                 // 线条箭头半径
         linkDefaultWidth: 3,                 // 连线宽度
-        linkOffsetGap: 40,                   // 折线拐角处的长度
+        linkOffsetGap: 80,                   // 折线拐角处的长度
         linkDirection: 'horizontal',        // 折线的方向
         // Container属性
         containerAlpha: 1,
@@ -172,8 +173,11 @@ function TopologyEditor() {
         containerFont: '12px Consolas',
         containerFontColor: 'black',
         containerBorderColor: 'black',
-        containerBorderRadius: 30
-    }
+        containerBorderRadius: 30,
+
+        //主机属性
+        hostId:null,
+    };
     // 布局参数
     this.layout = {}
     // 绘图区属性
@@ -507,6 +511,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
 
     // 模拟告警
     if(editor.utils.getAllNodes().length > 0){
+        debugger
         editor.utils.getAllNodes()[0].alarm = "告警";
     }
 
@@ -610,52 +615,13 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
 
         // 只处理双击节点事件
         if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
-
-            // alert('双击了节点')
-            // 查询单个节点的信息, 回填数据
-            layer.open({
-                title: "编辑设备",
-                type: 1,
-                area: ['600px', '500px'],
-                content: $("#node-dialog"),
-                btn: ["应用", "删除", "取消"],
-                yes: function(index, layero){
-                    var param = getParam("node-form");
-                    self.currentNode.text = param.deviceName;   //设置文字
-                    $("#node-dialog").css("display","none");
-                    layer.close(index);
-                },
-                btn2: function () {
-                    editor.utils.deleteNode(self.currentNode);
-                },
-                cancel:function () {
-                    $("#node-dialog").css("display","none")
-                }
-            });
+            console.log(event.target)
+            localStorage.setItem("node",'true');
         } else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
-            layer.open({
-                title: "编辑线",
-                type: 1,
-                area: ['600px', '500px'],
-                content: $("#link-dialog"),
-                btn: ["应用", "删除", "取消"],
-                yes: function(index, layero){
-                    var param = getParam("link-form");
-                    console.log(param);
-                    self.currentNode.text = param.lineName;
-                    self.currentNode.fontColor = param.lineColor;
-                    $('#link-dialog').css('display', 'none')
-                    layer.close(index);
-                },
-                btn2: function () {
-                    editor.utils.deleteNode(self.currentNode);
-                },
-                cancel:function () {
-                    $('#link-dialog').css('display', 'none')
+            console.log(event.target);
+            localStorage.setItem("link",'true');
         }
     });
-        }
-    })
 
     // 清除起始节点不完整的拖放线
     this.scene.mousedown(function (e) {
@@ -1056,8 +1022,7 @@ editor.utils = {
         editor.utils.setNormalMode();
     },
     // 添加节点, 编辑模式下才能添加
-    addNode: function (img, text) {
-        console.log(editor.stageMode);
+    addNode: function (img, text, hostId) {
         if (editor.stageMode === "normal") {
             return;
         }
@@ -1071,15 +1036,17 @@ editor.utils = {
         node.fontColor = editor.config.nodeFontColor
         // 节点坐标
         node.setBound(320, -200, 50, 50);
-        console.log(node);
+
         // 默认节点图片
-        node.setImage(topoImgPath + img)
+        node.setImage(topoImgPath + img);
         // 节点数据
         node.nodeId = generateUUID()
         node.text = text
-        node.nodeImage = img
+        node.nodeImage = img;
+        node.hostId = hostId;
         editor.scene.add(node)
-        editor.currentNode = node
+        editor.currentNode = node;
+        console.log(node);
     },
     // 重新渲染节点
     reloadNode: function (node) {
@@ -1385,5 +1352,8 @@ editor.utils = {
                 }
             })
         })
+    },
+    update:function (config) {
+        editor.config = config;
     }
 }

tslint.json

@@ -27,7 +27,7 @@
             "variables-before-functions"
         ],
         "no-arg": true,
-        "no-bitwise": true,
+        "no-bitwise": false,
         "no-console": [
             true,
             "debug",