<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="./js/jpoto.js"></script>
</head>
<body>
<canvas id="canvas" width="1000" height="550"></canvas>
<script type="text/javascript">
$(document).ready(function() {
var canvas = document.getElementById("canvas");//获取dom元素
var stage = new JTopo.Stage(canvas);//创建一个舞台对象在canvas里
//显示工具栏
var scene = new JTopo.Scene();//创建一个场景
scene.background = "./img/bg.jpg"; //直接把户型图作为jtopo的背景图
function node(x, y, img) {//节点在场景中的位置 图标
var node = new JTopo.Node();//创建一个节点
node.setImage("./img/" + img, 20,20);//设置节点图标，宽度 高度
node.setLocation(x, y);// 设置节点在场景中的位置坐标
scene.add(node);//节点放到场景中
return node;//抛出节点。。。。。存疑
}
function linkNode(nodeA, nodeZ, f) { //f 为true时默认为折线
var link;
if (f) {
link = new JTopo.FoldLink(nodeA, nodeZ);//FoldLink是JTopo的折线图内置参数
} else {
link = new JTopo.Link(nodeA, nodeZ);//link是直线
}
link.direction = "vertical"; //线条的方向
scene.add(link);//场景中添加线
return link;
}
var s1 = node(305, 43, "a.jpg"); //传入节点的位置坐标，图片
s1.alarm = "2 W";//悬浮警告
var s2 = node(365, 43, "a.jpg");
var s3 = node(425, 43, "a.jpg");
var g1 = node(366, 125, "c.jpg");
linkNode(s1, g1, true);//s1父级 g1子级
linkNode(s2, g1, true);//s1父级 g1子级
linkNode(s3, g1, true);//s1父级 g1子级
var w1 = node(324, 167, "e.jpg");//
linkNode(g1, w1); //g1父级 w1子级
var c1 = node(364, 214, "f.jpg");
linkNode(w1, c1);
var cloud = node(344, 259, "k.jpg");
linkNode(c1, cloud);
var c2 = node(364, 328, "f.jpg");
linkNode(cloud, c2);
var w2 = node(324, 377, "e.jpg");
linkNode(c2, w2);
var g2 = node(366, 411, "c.jpg");
linkNode(w2, g2);//父子级依次传承
function hostLink(nodeA, nodeZ) {//节点的x y坐标点
var link = new JTopo.FlexionalLink(nodeA, nodeZ,'快乐'); //二次折线
link.shadow = false;
link.offsetGap = 44;//二次折线设置首末线的长度
link.textOffsetY = 10; // 文本偏移量（向下15个像素）
scene.add(link);//添加到场景中
return link;
}
var h1 = node(218, 520, "h.jpg");//节点的坐标位置
h1.alarm = "一次警告";
hostLink(g2, h1);
var h2 = node(292, 520, "h.jpg");//节点的坐标位置
hostLink(g2, h2);
var h3 = node(366, 520, "h.jpg");//节点的坐标位置
h3.alarm = "二级告警";
hostLink(g2, h3);
var h4 = node(447, 520, "h.jpg");//节点的坐标位置
hostLink(g2, h4);
var h5 = node(515, 520, "h.jpg");//节点的坐标位置
h5.alarm = "1M"; //弹出的提示信息
hostLink(g2, h5);//g2父节点 h5子节点
setInterval(function() {
if (h3.alarm == "二级告警") {
h3.alarm = null;
} else {
h3.alarm = "二级告警";
}
}, 600);
stage.add(scene);//最终在舞里面添加场景
});
</script>
</body>
</html>
1483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
