|
|
|
$(document).ready(function () {
|
|
|
|
sendAjax("post", "getNgixnStatus", null, "json", drawData, errorFunc);
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 展示画布 和 数据
|
|
|
|
* @param resp
|
|
|
|
*/
|
|
|
|
function drawData(resp) {
|
|
|
|
var data = resp.data;
|
|
|
|
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
var stage = new JTopo.Stage(canvas);
|
|
|
|
|
|
|
|
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{//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{
|
|
|
|
var link = newFoldLink(scene,appNode, qqElb, 'dns','',5);
|
|
|
|
link.arrowsRadius = 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ajax请求异常回调函数
|
|
|
|
*/
|
|
|
|
function errorFunc() {
|
|
|
|
layer.msg("Token异常", {icon: 2});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 打开等待对话框
|
|
|
|
*/
|
|
|
|
function toWait() {
|
|
|
|
$("<div>").appendTo($("body")).dialog({
|
|
|
|
title: "提示",
|
|
|
|
backdrop: "static",
|
|
|
|
content: "正在切换，请稍后..."
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 发送ajax请求
|
|
|
|
* @param type 请求方法post/get
|
|
|
|
* @param url 请求url
|
|
|
|
* @param data 请求参数数据
|
|
|
|
* @param dataType 请求参数类型
|
|
|
|
* @param success 请求成功回调函数
|
|
|
|
* @param error 请求异常回调函数
|
|
|
|
*/
|
|
|
|
function sendAjax(type, url, data, dataType, success, error) {
|
|
|
|
$.ajax({
|
|
|
|
type: type,
|
|
|
|
url: url,
|
|
|
|
data: data,
|
|
|
|
dataType: dataType,
|
|
|
|
success: success,
|
|
|
|
error: error
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 节点
|
|
|
|
function newNode(scene,x, y, w, h, text) {
|
|
|
|
var node = new JTopo.Node(text);
|
|
|
|
node.setLocation(x, y);
|
|
|
|
node.setSize(w, h);
|
|
|
|
scene.add(node);
|
|
|
|
return node;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 简单连线
|
|
|
|
function newLink(scene,nodeA, nodeZ, text, dashedPattern) {
|
|
|
|
var link = new JTopo.Link(nodeA, nodeZ, text);
|
|
|
|
link.lineWidth = 3; // 线宽
|
|
|
|
link.dashedPattern = dashedPattern; // 虚线
|
|
|
|
link.bundleOffset = 60; // 折线拐角处的长度
|
|
|
|
link.bundleGap = 20; // 线条之间的间隔
|
|
|
|
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
|
|
|
|
link.strokeColor = '0,200,255';
|
|
|
|
scene.add(link);
|
|
|
|
return link;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 折线
|
|
|
|
function newFoldLink(scene,nodeA, nodeZ, text, direction, dashedPattern) {
|
|
|
|
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
|
|
|
|
link.direction = direction || 'horizontal';
|
|
|
|
link.arrowsRadius = 15; //箭头大小
|
|
|
|
link.lineWidth = 3; // 线宽
|
|
|
|
link.bundleOffset = 60; // 折线拐角处的长度
|
|
|
|
link.bundleGap = 20; // 线条之间的间隔
|
|
|
|
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
|
|
|
|
link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
|
|
|
|
link.dashedPattern = dashedPattern;
|
|
|
|
scene.add(link);
|
|
|
|
return link;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 二次折线
|
|
|
|
function newFlexionalLink(scene,nodeA, nodeZ, text, direction, dashedPattern) {
|
|
|
|
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
|
|
|
|
link.direction = direction || 'horizontal';
|
|
|
|
link.arrowsRadius = 10;
|
|
|
|
link.lineWidth = 3; // 线宽
|
|
|
|
link.offsetGap = 35;
|
|
|
|
link.bundleGap = 15; // 线条之间的间隔
|
|
|
|
link.textOffsetY = 10; // 文本偏移量（向下15个像素）
|
|
|
|
link.strokeColor = '0,250,0';
|
|
|
|
link.dashedPattern = dashedPattern;
|
|
|
|
scene.add(link);
|
|
|
|
return link;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 曲线
|
|
|
|
function newCurveLink(scene,nodeA, nodeZ, text) {
|
|
|
|
var link = new JTopo.CurveLink(nodeA, nodeZ, text);
|
|
|
|
link.lineWidth = 3; // 线宽
|
|
|
|
scene.add(link);
|
|
|
|
return link;
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
