update

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

@@ -20,14 +20,14 @@
 </div>
 <div nz-row [nzGutter]="4" class="search-form">
     <div nz-col nzSpan="3">
-        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList($event)">
+        <nz-select style="width: 100%;"   nzPlaceHolder="选择分组" [(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="3">
-        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
+        <nz-select style="width: 100%;"   nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
             <ng-container *ngFor="let item of hostList;">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
             </ng-container>
@@ -57,7 +57,7 @@
         ></nz-date-picker>
     </div>
 </div>
-<div echarts [options]="chartOption" style="height: 420px;width: 100%"></div>
+<div echarts [options]="chartOption" style="height: 400px;width: 100%"></div>
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
     <nz-tab  nzTitle="接收流量排行">
         <nz-table #nzTable [nzData]="inList" [nzLoading]="inLoading" [nzFrontPagination]="false" [nzTotal]="inTotalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="inChnagePage($event)">
@@ -71,7 +71,7 @@
             </thead>
             <tbody>
             <ng-container *ngFor="let item of inList">
-                <tr (click)="getEcharts(item)">
+                <tr (click)="getEcharts(item.itemid)">
                     <td>{{item.itemName}}</td>
                     <td>{{item.max}}</td>
                     <td>{{item.min}}</td>
@@ -93,12 +93,14 @@
             </tr>
             </thead>
             <tbody>
-            <tr *ngFor="let data of outList">
+            <ng-container *ngFor="let data of outList">
+                <tr (click)="getEcharts(data.itemid)">
                     <td>{{data.itemName}}</td>
                     <td>{{data.max}}</td>
                     <td>{{data.min}}</td>
                     <td>{{data.avg}}</td>
                 </tr>
+            </ng-container>
             </tbody>
         </nz-table>
     </nz-tab>

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

@@ -48,7 +48,6 @@ export class FlowTrendComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.getGroup();
         const today = new Date().getTime();
         this.obj.startTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 00:00:00";
         this.obj.endTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 23:59:59";
@@ -66,9 +65,9 @@ export class FlowTrendComponent implements OnInit {
     }
 
     //查询主机
-    onchange(e) {
+    onchange() {
         const data = {
-            'groupids': [e],
+            'groupids': [this.obj.groupid],
             'hostExtend': {
                 'superiorHostid': null
             }
@@ -77,22 +76,32 @@ export class FlowTrendComponent implements OnInit {
             (res) => {
                 if (res.errCode == 10000) {
                     this.hostList = res.data;
+                    this.obj.hostid = this.hostList[0].hostList;
+                    this.getEcharts(null);
                 }
             }
         );
     }
 
     //获取图标数据
-    getEcharts(item) {
+    getEcharts(itemid) {
         const  data= {
-            itemid: item.itemid,
+            itemid: itemid,
             endTime: this.obj.endTime,
-            startTime: this.obj.startTime
+            startTime: this.obj.startTime,
+            hostid:this.obj.hostid,
+            groupid:this.obj.groupid,
+            type:'in',
         };
         this.topologySer.findTrendData(data).subscribe(
             (res) => {
                 if(res.errCode == 10000){
+                    data.type = "out";
+                    this.topologySer.findTrendData(data).subscribe(
+                        (res)=>{
                             this.setEacharts();
+                        }
+                    )
                 }else{
                     this.message.warning(res.errMsg);
                 }
@@ -183,9 +192,9 @@ export class FlowTrendComponent implements OnInit {
     }
 
     //获取流量
-    getList(e) {
+    getList() {
         this.obj.hostid = null;
-        this.onchange(e);
+        this.onchange();
         this.getInList();
         this.getOutList();
     }
@@ -304,6 +313,7 @@ export class FlowTrendComponent implements OnInit {
           this.obj.startTime = this.datePipe.transform(this.timeBegin,'yyyy-MM-dd HH:mm:ss');
           this.obj.endTime = this.datePipe.transform(this.timeEnd,'yyyy-MM-dd HH:mm:ss');
       }
+      this.getEcharts(null);
       this.getInList();
       this.getOutList();
     }

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

@@ -26,7 +26,6 @@
                 <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
             </ng-container>
         </nz-select>
-         <!--<span (click)="edit()">编辑</span>-->
     </div>
     <div nz-col nzSpan="12" class="text-right">
         <button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus"></i>添加</button>
@@ -40,7 +39,7 @@
     <div class="layui-header layui-bg-gray" style="line-height: 60px">
         设备：<span (click)="addDevice()">添加</span>
         <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
-        监测点：<span (click)="addCheck()">添加</span> <span>移除</span>
+        监测点：<span (click)="addCheck()">添加</span>
         <span (click)="showAddImg()">添加图片</span>
         <!-- 顶部工具栏 -->
         <div class="layui-nav layui-layout-right" >
@@ -72,8 +71,8 @@
                         您的浏览器不支持HTML5!
                     </canvas>
                     <div class="checkList">
-                        <p *ngFor="let item of checkJson">
-                            <span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span>
+                        <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>
@@ -110,7 +109,7 @@
             <div class="layui-inline">
                 <label class="layui-form-label">线条颜色</label>
                 <div class="layui-input-block">
-                    <input type="color" name="lineColor" required  autocomplete="off" class="layui-input">
+                    <input style="width: 100px;" type="color" name="lineColor" required  autocomplete="off" class="layui-input">
                 </div>
             </div>
         </div>

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

@@ -41,6 +41,16 @@ declare var layui: any;
                 color: #666666;
                 font-size: 20px;
             }
+            .layui-form-label{
+                width: 110px;
+            }
+            .minus{
+                vertical-align: middle;
+                color: red;
+                font-size: 15px;
+                margin-left: 12px;
+                cursor: pointer;
+            }
         `
     ]
 })
@@ -53,8 +63,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
     dataSet;
     isVisible = false;
     image;
+
     topoId;
     name;
+    refreshRete;
 
     checkJson = [];
     fileList: UploadFile[] = [];
@@ -109,7 +121,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
 
     //获取设备图片
     setImg(e){
-        console.log(e);
         editor.utils.addNode(e[0].icon,'图片');
     }
 
@@ -135,6 +146,8 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         let data = {
             id: this.topoId,
             json: JSON.stringify(json),
+            refreshRete:this.refreshRete,
+            name:this.name
         };
         this.topologySer.update(data).subscribe(
             (res) => {
@@ -160,14 +173,28 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
                         this.checkJson = json.check;
                     }
                     this.name = res.data.name;
+                    this.refreshRete = res.data.refreshRete;
                     this.topoId = res.data.id;
                     editor.utils.editTopology();
+                    this.findItemStatus();
                 }
             }
         );
     }
 
     //查询监控点状态
+    findItemStatus(){
+        const data = {
+            httpTestIds:this.checkJson.map(e=>{
+                return e.id;
+            })
+        };
+        this.topologySer.findElementStatus(data).subscribe(
+            (res)=>{
+
+            }
+        )
+    }
 
     //删除拓扑图
     deleteTopo() {
@@ -205,9 +232,13 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         this.checkJson.push(JSON.parse(event));
     }
 
+    //删除监测点
+    deleteCheck(index){
+        this.checkJson.splice(index,1);
+    }
+
     //load
     loadCanvas() {
-
         // 节点树中每个节点的拖放动作定义给拓扑图编辑器
         let nodes = $('[topo-div-type=\'topo-node\']');
         let nodeLength = nodes.length;

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

@@ -158,7 +158,7 @@ function TopologyEditor() {
         linkShadow: false,                   // 是否显示连线阴影
         linkShadowColor: 'rgba(0,0,0,0.5)',
         linkFont: '12px Consolas',           // 节点字体
-        linkFontColor: 'black',              // 连线文字颜色,如"255,255,0"
+        linkFontColor: 'red',              // 连线文字颜色,如"255,255,0"
         linkArrowsRadius: 0,                 // 线条箭头半径
         linkDefaultWidth: 3,                 // 连线宽度
         linkOffsetGap: 40,                   // 折线拐角处的长度
@@ -610,31 +610,30 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
 
         // 只处理双击节点事件
         if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
-            console.log(event.target)
+            return false;
             // 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.text;
-                    self.currentNode.textPosition = param.textPosition;
-                    self.currentNode.setLocation(param.x, param.y);
-                    $("#node-dialog").css("display","none")
-                },
-                btn2: function () {
-                    editor.utils.deleteNode(self.currentNode);
-                },
-                cancel:function () {
-                    $("#node-dialog").css("display","none")
-                }
-            });
+            // 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.text;
+            //         self.currentNode.textPosition = param.textPosition;
+            //         self.currentNode.setLocation(param.x, param.y);
+            //         $("#node-dialog").css("display","none")
+            //     },
+            //     btn2: function () {
+            //         editor.utils.deleteNode(self.currentNode);
+            //     },
+            //     cancel:function () {
+            //         $("#node-dialog").css("display","none")
+            //     }
+            // });
         } else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
-            console.log("编辑线");
             layer.open({
                 title: "编辑线",
                 type: 1,
@@ -643,9 +642,9 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
                 btn: ["应用", "删除", "取消"],
                 yes: function(index, layero){
                     var param = getParam("link-form");
+                    console.log(param);
                     self.currentNode.text = param.lineName;
-                    self.currentNode.textPosition = param.textPosition;
-                    self.currentNode.setLocation(param.x, param.y);
+                    self.currentNode.fontColor = param.lineColor;
                     $('#link-dialog').css('display', 'none')
                     layer.close(index);
                 },