<!DOCTYPE html>
|
<html>
|
<head>
|
<div th:replace="common/header.html"></div>
|
<script th:src="@{'/static/js/tuopu/jtopo-0.4.8-min.js'}"></script>
|
<script th:src="@{'/static/js/tuopu/toolbar.js'}"></script>
|
|
|
</head>
|
<body th:class="${application.sidebarCollapse}">
|
|
<div class="wrapper">
|
|
<div th:replace="common/navbar.html"></div>
|
|
<div th:replace="common/aside.html"></div>
|
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper">
|
<div id="content">
|
<canvas id="canvas" width="1800" height="1020" style="border:1px solid rgb(68,68,68); cursor:default;background-color:rgb(338,338,338)"></canvas>
|
</div>
|
|
|
</div>
|
|
<div th:replace="common/footer.html"></div>
|
|
</div>
|
<!-- ./wrapper -->
|
|
<script th:inline="javascript">
|
|
var licenseState = [[${session.LICENSE_STATE}]];
|
|
$(document).ready(function(){
|
function node(x, y, img){
|
var node = new JTopo.Node();
|
node.setImage('/tssw/static/js/tuopu/img/' + img, true);
|
node.setLocation(x, y);
|
scene.add(node);
|
return node;
|
}
|
function node2(img){
|
var node = new JTopo.Node();
|
node.setImage('/tssw/static/js/tuopu/img/' + img, true);
|
// node.setLocation(x, y);
|
scene.add(node);
|
return node;
|
}
|
function linkNode(nodeA, nodeZ, f){
|
var link;
|
if(f){
|
link = new JTopo.FoldLink(nodeA, nodeZ);
|
}else{
|
link = new JTopo.Link(nodeA, nodeZ);
|
}
|
link.direction = 'vertical';
|
link.strokeColor = "128,64,64";
|
scene.add(link);
|
return link;
|
}
|
|
|
var canvas = document.getElementById('canvas');
|
var stage = new JTopo.Stage(canvas);
|
//显示工具栏
|
showJTopoToobar(stage);
|
var scene = new JTopo.Scene(stage);
|
//设置背景
|
scene.backgroundColor="#C8C8C8";
|
//scene.background = './img/bg.jpg';
|
|
var web_server = node(760, 520, 'server_database.png');
|
web_server.text='server服务端';
|
web_server.font= "20px Consolas";
|
web_server.fontColor = '555,555,0';
|
|
|
var nodeListJson =[[${nodeList}]];
|
for(var i = 0; i < nodeListJson.length; i++){
|
var imgStr = 'server.png';
|
if(nodeListJson[i].type == '2'){
|
imgStr = 'st.png';
|
}
|
var s1 = node(nodeListJson[i].x, nodeListJson[i].y, imgStr);
|
s1.text = nodeListJson[i].hostname; // 文字
|
s1.fontColor = '219,118,39';
|
linkNode(web_server, s1);
|
|
if(nodeListJson[i].state == '2'){
|
s1.alarm="已下线";
|
/*setInterval(function(){
|
if(s1.alarm == '已下线'){
|
s1.alarm = null;
|
}else{
|
s1.alarm = '已下线'
|
}
|
}, 2000);*/
|
}
|
|
}
|
|
|
|
|
// linkNode(h1, r1);
|
|
// JTopo.layout.layoutNode(scene, r1, true);
|
|
}
|
);
|
|
</script>
|
</body>
|
</html>
|
