Skip to content

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

update

parent 7d72f113
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 263 deletions
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ c768a812
......@@ -41,6 +41,7 @@
设备：<span (click)="addDevice()">添加</span>
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
监测点：<span (click)="addCheck()">添加</span> <span>移除</span>
<span (click)="showAddImg()">添加图片</span>
<!-- 顶部工具栏 -->
<div class="layui-nav layui-layout-right" >
<span aria-hidden="true" title="全屏查看"
......@@ -61,266 +62,6 @@
</div>
<div class="container">
<div class="layui-row">
<!--<div class="layui-col-md2">-->
<!--<div class="layui-side-scroll">-->
<!--<div class="layui-collapse" lay-accordion>-->
<!--<div class="layui-colla-item">-->
<!--<h2 class="layui-colla-title">连线</h2>-->
<!--<div class="layui-colla-content">-->
<!--<table width="100%">-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="line"-->
<!--draggable="false" onclick="editor.lineType='line'">-->
<!--<img class="link-icon-style" id="link-line"-->
<!--src="../../../content/javascript/jtopo/img/line.png"/>-->
<!--<br><span>连线</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="foldline"-->
<!--draggable="false"-->
<!--onclick="editor.lineType='foldLine';editor.config.direction='horizontal';">-->
<!--<img class="link-icon-style" id="link-foldline-h"-->
<!--src="../../../content/javascript/jtopo/img/foldline_horizontal.png"/>-->
<!--<br><span>折线(横向)</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="foldline"-->
<!--draggable="false"-->
<!--onclick="editor.lineType='foldLine';editor.config.direction='vertical';">-->
<!--<img class="link-icon-style" id="link-foldline-v"-->
<!--src="../../../content/javascript/jtopo/img/foldline_vertical.png"/>-->
<!--<br><span>折线(纵向)</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="flexline"-->
<!--draggable="false"-->
<!--onclick="editor.lineType='flexLine';editor.config.direction='horizontal';">-->
<!--<img class="link-icon-style" id="link-flexline-h"-->
<!--src="../../../content/javascript/jtopo/img/flexline_horizontal.png"/>-->
<!--<br><span>二次折线(横向)</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="flexline"-->
<!--draggable="false"-->
<!--onclick="editor.lineType='flexLine';editor.config.direction='vertical';">-->
<!--<img class="link-icon-style" id="link-flexline-v"-->
<!--src="../../../content/javascript/jtopo/img/flexline_vertical.png"/>-->
<!--<br><span>二次折线(纵向)</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-link" topo-linktype="curveline"-->
<!--draggable="false"-->
<!--onclick="editor.lineType='curveLine'">-->
<!--<img class="link-icon-style" id="link-curveline"-->
<!--src="../../../content/javascript/jtopo/img/curveline.png"/>-->
<!--<br><span>曲线</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-colla-item">-->
<!--<h2 class="layui-colla-title">虚拟网络设备</h2>-->
<!--<div class="layui-colla-content">-->
<!--<table width="100%">-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"-->
<!--title="这是一个交换机">-->
<!--<img class="node-icon-style" data-src="icon_switcher.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_switcher.png"/>-->
<!--<br><span>交换机</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"-->
<!--title="这是一个路由器">-->
<!--<img class="node-icon-style" data-src="icon_router.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_router.png"/>-->
<!--<br><span>路由器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"-->
<!--title="使用一台VM主机安装多个网卡进行子网的互通,充当路由控制器">-->
<!--<img class="node-icon-style" data-src="icon_route_controller.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_route_controller.png"/>-->
<!--<br><span>VM路由控制器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VE" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_firewall.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_firewall.png"/>-->
<!--<br><span>防火墙</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VE" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_balancer.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_balancer.png"/>-->
<!--<br><span>负载均衡</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-colla-item">-->
<!--<h2 class="layui-colla-title">虚拟主机</h2>-->
<!--<div class="layui-colla-content">-->
<!--<table width="100%">-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_virtual_host.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_virtual_host.png"/>-->
<!--<br><span>虚拟主机</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_client.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_client.png"/>-->
<!--<br><span>客户机</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_server.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_server.png"/>-->
<!--<br><span>服务器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_webserver.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_webserver.png"/>-->
<!--<br><span>Web服务器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_mailserver.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_mailserver.png"/>-->
<!--<br><span>邮件服务器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_fileserver.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_fileserver.png"/>-->
<!--<br><span>文件服务器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-colla-item">-->
<!--<h2 class="layui-colla-title">物理网络设备</h2>-->
<!--<div class="layui-colla-content">-->
<!--<table width="100%">-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_physical_host.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_physical_host.png"/>-->
<!--<br><span>物理主机</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="PM">-->
<!--<img class="node-icon-style"-->
<!--src="../../../content/javascript/jtopo/img/icon_physical_switcher.png"/>-->
<!--<br><span>物理交换机</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_firewall.png" src="../../../content/javascript/jtopo/img/icon_firewall.png"/>-->
<!--<br><span>物理防火墙</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_physical_router.png"-->
<!--src="../../../content/javascript/jtopo/img/icon_physical_router.png"/>-->
<!--<br><span>物理路由器</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-colla-item">-->
<!--<h2 class="layui-colla-title">位置图形</h2>-->
<!--<div class="layui-colla-content">-->
<!--<table width="100%">-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="CL" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_cloud.png" src="../../../content/javascript/jtopo/img/icon_cloud.png"/>-->
<!--<br><span>云</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td width="100%" align="center">-->
<!--<div topo-div-type="topo-node" topo-nodetype="HO" draggable="true">-->
<!--<img class="node-icon-style" data-src="icon_house.png" src="../../../content/javascript/jtopo/img/icon_house.png"/>-->
<!--<br><span>房屋</span>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="layui-col-md12">
<div id="topology-body" class="topology-context">
<!-- 节点右键菜单 -->
......@@ -633,6 +374,25 @@
</form>
</div>
<!--添加图片-->
<nz-modal [(nzVisible)]="isVisible" 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">
<nz-upload
[nzBeforeUpload]="beforeUpload"
[(nzFileList)]="fileList">
<button nz-button>
<i class="anticon anticon-upload"></i><span>上传</span>
</button>
</nz-upload>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!--添加拓扑图-->
<smart-topology #smartTopology (done)="getList()"></smart-topology>
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ c768a812
import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
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';
......@@ -58,13 +58,13 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
topoType = '只读模式';
checkJson = [];
fileList: UploadFile[] = [];
constructor(private topologySer: TopologyService, private message: NzMessageService,
private sanitizer: DomSanitizer, private modalSer: NzModalService) {
}
ngOnInit() {
this.loadCanvas();
this.getList();
}
......@@ -73,6 +73,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
let element = layui.element;
element.init();
});
this.loadCanvas();
}
//新增拓扑图
......@@ -299,4 +300,45 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
editor.loadTopology('', 'img/backimg.png');
}
//添加图片-----start
showAddImg(){
this.isVisible = true;
}
beforeUpload = (file: UploadFile): boolean => {
const isLt2M = file.size / 1024 < 300;
if (!isLt2M) {
this.message.error('图标必须小于300kb!');
}else{
this.fileList.push(file);
}
return false;
};
handleCancel(){
this.isVisible = false;
}
handleOk(){
if(this.fileList.length == 0){
this.message.error("请选择图片");
return false;
}
const formData = new FormData();
this.fileList.forEach((file:any)=>{
formData.append('file',file);
})
this.topologySer.addPic(formData).subscribe(
(res)=>{
if(res.errCode == 10000){
this.isVisible = false;
editor.utils.addNode(res.data,'text');
}else{
this.message.error("添加失败")
}
}
)
}
// end
}
src/main/webapp/app/netTopology/topology.service.ts
View file @ c768a812
......@@ -68,4 +68,9 @@ export class TopologyService {
findDefaultIcon(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/icon/findDefaultIcon',data);
}
//添加图片
addPic(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmapJson/addPic',data);
}
}
src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js
View file @ c768a812
......@@ -1071,7 +1071,8 @@ editor.utils = {
var node = new JTopo.Node()
node.fontColor = editor.config.nodeFontColor
// 节点坐标
node.setBound(20, 20, 50, 50)
node.setBound(320, -200, 50, 50);
console.log(node);
// 默认节点图片
node.setImage(topoImgPath + img)
// 节点数据
......
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