Skip to content

S
smart
Commit 1a1c0355 authored by wangqinghua's avatar wangqinghua
Browse files
Options

update

parent 8ed14360
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 51 deletions
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html
View file @ 1a1c0355
......@@ -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">
<td>{{data.itemName}}</td>
<td>{{data.max}}</td>
<td>{{data.min}}</td>
<td>{{data.avg}}</td>
</tr>
<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
View file @ 1a1c0355
......@@ -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){
this.setEacharts();
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
View file @ 1a1c0355
......@@ -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
View file @ 1a1c0355
......@@ -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
View file @ 1a1c0355
......@@ -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);
},
......
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