ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit d1f27305758ac6f2fba8a57c07f760418e7f8ad0 1 parent af0b9836

拓扑图优化

Inline Side-by-side
Showing 8 changed files with 22 additions and 123 deletions
... ... @@ -250,7 +250,7 @@
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script src="<%=basePath %>script/switch.js?v=20171025-2"></script>
<script src="<%=basePath %>script/switch.js?v=20171107-21"></script>
<script type="text/javascript">
$("#li_switch").addClass("active open");
... ...
... ... @@ -6,124 +6,6 @@ $(document).ready(function () {
* 展示画布 和 数据
* @param resp
*/
/*function drawData_bbbbbbbak(resp) {
var data = resp.data;
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
//显示工具栏
//showJTopoToobar(stage);
var scene = new JTopo.Scene();
stage.add(scene);
scene.background = contextPath + "img/bg.jpg";
var appNodeX = 100;
var appNodeY = 50;
var appNodeW = 30;
var appNodeH = 26;
var appNode = newNode(scene,appNodeX,appNodeY,appNodeW,appNodeH,'APP');
var askServer = newNode(scene,appNodeX+600,appNodeY+100,appNodeW,appNodeH,'问询服务器');
var link = newFoldLink(scene,appNode, askServer, '问询');
link.arrowsRadius = 10;
var awsElb = newNode(scene,appNodeX+200,appNodeY+200,appNodeW,appNodeH,'awsElb');
var awsNginx = newNode(scene,appNodeX+200,appNodeY+300,appNodeW,appNodeH,'awsNginx');
var link = newLink(scene,awsElb, awsNginx);
link.arrowsRadius = 10;
var awsGateway1 = newNode(scene,appNodeX+150,appNodeY+400,appNodeW,appNodeH,'awsGateway');
var awsGateway2 = newNode(scene,appNodeX+250,appNodeY+400,appNodeW,appNodeH,'awsGateway');
var qqElb = newNode(scene,appNodeX+400,appNodeY+200,appNodeW,appNodeH,'qqElb');
//var link = newFoldLink(scene,appNode, qqElb, '域名');
//link.arrowsRadius = 10;
var qqNginx = newNode(scene,appNodeX+400,appNodeY+300,appNodeW,appNodeH,'qqNginx');
var link = newLink(scene,qqElb, qqNginx);
link.arrowsRadius = 10;
var qqGateway1 = newNode(scene,appNodeX+350,appNodeY+400,appNodeW,appNodeH,'qqGateway');
var qqGateway2 = newNode(scene,appNodeX+450,appNodeY+400,appNodeW,appNodeH,'qqGateway');
var appServerSe1 = newNode(scene,appNodeX+100,appNodeY-100,1,1);
var appServerSe2 = newNode(scene,appNodeX+100,appNodeY+500,1,1);
newLink(scene,appServerSe1, appServerSe2,"",10);
var awsQqSe1 = newNode(scene,appNodeX+300,appNodeY-100,1,1);
var awsQqSe2 = newNode(scene,appNodeX+300,appNodeY+500,1,1);
newLink(scene,awsQqSe1, awsQqSe2,"",10);
var app = newNode(scene,appNodeX,appNodeY-50,1,1,'app');
var aws = newNode(scene,appNodeX+200,appNodeY-50,1,1,'aws');
var qq = newNode(scene,appNodeX+400,appNodeY-50,1,1,'qq');
if('aws' == data.luaType){//app全部直连到aws
var link = newLink(scene,appNode, awsElb, '直连');
link.arrowsRadius = 10;
}else if('qq' == data.luaType){//app全部直连到qq
var link = newLink(scene,appNode, qqElb, '直连');
link.arrowsRadius = 10;
}else if('aws+qq' == data.luaType){//app分散直连
var link = newLink(scene,appNode, awsElb, '直连');
link.arrowsRadius = 10;
var link = newLink(scene,appNode, qqElb, '直连');
link.arrowsRadius = 10;
}
if('aws' == data.awsApiNginx){//aws nginx 指向aws gateway
var link = newLink(scene,awsNginx, awsGateway1,"online");
link.arrowsRadius = 10;
}else{//aws nginx 指向qq gateway
var link = newLink(scene,awsNginx, qqGateway1,"online");
link.arrowsRadius = 10;
}
if('aws' == data.awsGrayNginx){//aws nginx gray 指向aws gateway
var link = newLink(scene,awsNginx, awsGateway2,"gray");
link.arrowsRadius = 10;
}else{//aws nginx 指向qq gateway
var link = newLink(scene,awsNginx, qqGateway2,"gray");
link.arrowsRadius = 10;
}
if('aws' == data.qqApiNginx){//qq nginx 指向aws gateway
var link = newLink(scene,qqNginx, awsGateway1,"online");
link.arrowsRadius = 10;
}else{//qq nginx 指向qq gateway
var link = newLink(scene,qqNginx, qqGateway1,"online");
link.arrowsRadius = 10;
}
if('aws' == data.qqGrayNginx){//qq nginx gray 指向aws gateway
var link = newLink(scene,qqNginx, awsGateway2,"gray");
link.arrowsRadius = 10;
}else{//aws nginx 指向qq gateway
var link = newLink(scene,qqNginx, qqGateway2,"gray");
link.arrowsRadius = 10;
}
if('aws' == data.defaultDns){
var link = newFoldLink(scene,appNode, awsElb, 'dns','',5);
link.arrowsRadius = 10;
}else if('qq' == data.defaultDns){
var link = newFoldLink(scene,appNode, qqElb, 'dns','',5);
link.arrowsRadius = 10;
}
//创建lua切换按钮
createLuaSwitchButton(data.luaType);
//创建入口切换按钮
createDnsSwitchButton(data.luaType);
}*/
/**
* 展示画布 和 数据
* @param resp
*/
function drawData(resp) {
var data = resp.data;
... ... @@ -145,14 +27,14 @@ function drawData(resp) {
var link = newFoldLink(scene,appNode, askServer, '问询');
link.arrowsRadius = 10;
var awsElb = newNode(scene,appNodeX+200,appNodeY+200,appNodeW,appNodeH,'awsElb');
var awsElb = newNode(scene,appNodeX+160,appNodeY+200,appNodeW,appNodeH,'awsElb');
var awsNginx = newNode(scene,appNodeX+200,appNodeY+300,appNodeW,appNodeH,'awsNginx');
var awsNginx = newNode(scene,appNodeX+165,appNodeY+300,appNodeW,appNodeH,'awsNginx');
var link = newLink(scene,awsElb, awsNginx);
link.arrowsRadius = 10;
var qqElb = newNode(scene,appNodeX+400,appNodeY+200,appNodeW,appNodeH,'qqElb');
var qqElb = newNode(scene,appNodeX+400-5,appNodeY+200,appNodeW,appNodeH,'qqElb');
//var link = newFoldLink(scene,appNode, qqElb, '域名');
//link.arrowsRadius = 10;
... ... @@ -160,7 +42,7 @@ function drawData(resp) {
var link = newLink(scene,qqElb, qqNginx);
link.arrowsRadius = 10;
var awsGateway1 = newNode(scene,appNodeX+150,appNodeY+400,appNodeW,appNodeH,'awsGateway');
var awsGateway1 = newNode(scene,appNodeX+180,appNodeY+400,appNodeW,appNodeH,'awsGateway');
//var awsGateway2 = newNode(scene,appNodeX+250,appNodeY+400,appNodeW,appNodeH,'awsGateway');
... ... @@ -247,6 +129,7 @@ function drawData(resp) {
createDnsSwitchButton(data.luaType);
}
/**
* 创建lua切换按钮
* @param luaType
... ... @@ -616,6 +499,22 @@ function newNode(scene,x, y, w, h, text) {
var node = new JTopo.Node(text);
node.setLocation(x, y);
node.setSize(w, h);
if("APP"==text){
node.setImage(contextPath + 'img/pstn/host.png', true);
}else if("问询服务器"==text){
node.setImage(contextPath + 'img/pstn/terminal.png', true);
}else if("awsElb"==text||"qqElb"==text){
node.setImage(contextPath + 'img/pstn/cloud.png', true);
node.textPosition = 'Middle_Center';// 文字居中
}else if("awsNginx"==text||"qqNginx"==text){
node.setImage(contextPath + 'img/pstn/router2.png', true);
}else if("awsGateway"==text||"qqGateway"==text){
node.setImage(contextPath + 'img/pstn/msc.png', true);
node.alarm = "";
node.alarmColor = '0,255,0';
}else if("grayGateway"==text){
node.setImage(contextPath + 'img/pstn/msc.png', true);
}
scene.add(node);
return node;
}
... ...