话不多说,先上model。
前端页面:
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[ Logic ]</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link th:href="@{/libs/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<style type="text/css">
* {margin: 0;padding: 0;}
nav {height: 26px;padding: 15px 0;}
nav div {height: 100%;}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
.btn-group > .btn:last-child:not(:first-child) {
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.Q-Tooltip{
padding:0px;margin:0px;
background: radial-gradient(at 50% 100%,#32a1cb 10%,#1d629d 60%);
border: 1px solid #1d629d;
border-radius: 5px;
}
.Q-Tooltip td{
padding:2px 10px;
}
</style>
</head>
<body style="background-color: #000;">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #000;padding: 0;">
<div class="container-fluid">
<div class="navbar-form navbar-left fl">
<button id="btnAreaIndex" class="btn"
style="background-color:#428bca;border-color:#357ebd;color:#fff;margin-bottom: 15px;">厂站分布图</button>
<span> </span>
<div class="btn-group">
<button id="btnStation1" class="btn btn-success btn-abnormal" style="margin: 0 12px;">站内主接线图</button>
<button id="btnStation2" class="btn btn-success btn-abnormal">站内装置分布图</button>
</div>
<span> </span>
<button id="btnDeviceIndex" class="btn btn-success" style="margin-bottom: 15px;">虚端子图</button>
<button id="btnLogicIndex" class="btn btn-success" style="margin-bottom: 15px;">逻辑回路图</button>
<button id="btnStIndex" class="btn btn-danger" style="margin-bottom: 15px;" disabled>实回路图</button>
</div>
</div>
</nav>
<div id="canvas" class="container-fluid" style="margin-top:60px;">
</div>
<script th:src="@{/js/qcore.js}"></script>
<script th:src="@{/js/qxare.js}"></script>
<script th:src="@{/js/bayst.js}"></script>
<script type="text/javascript">
//按钮事件
var stId='[[${stId}]]';
var devid = '[[${devId}]]';
function mainLoad(btn){
var btnId=$(btn).attr('id');
if(btnId.indexOf('Area')>-1){
window.open('/function/wf/area_layer/'+parent.window.userArea,'_self');
}else if(btnId.indexOf('Station1')>-1){
window.open('/function/wf/station_graph/'+stId,'_self');
}else if(btnId.indexOf('Station2')>-1){
window.open('/function/wf/station_layer/'+stId,'_self');
}else if(btnId.indexOf('Device')>-1){
window.open('/function/wf/vlxx/'+devid,'_self');
}else if(btnId.indexOf('Logic')>-1){
window.open('/function/wf/logic/'+devid,'_self');
}
}
$(document).ready(function(){
//菜单
$('#btnAreaIndex,#btnStation1,#btnStation2,#btnDeviceIndex,#btnLogicIndex').click(function(){
mainLoad(this);
});
requestDataFromXML();
});
//定义线条默认颜色
var color = "#5FB878";
var st;
var layers = [];
var lines = [];
//入口
function requestDataFromXML(){
$.ajax({
type: "GET",
url: "/function/wf/requestStData",
async:false,
data:{"devId":devid},
//dataType: "jsonp",
//jsonp:"callback",
success: function(data){
layers = data.layers;
lines = data.lines;
st = new St(layers,lines);
},
error:function(data){
alert("ajax请求错误");
return ;
}
});
$('.Q-Graph-ScrollPane').css('position','');
$('.Q-Graph-ScrollPane').css('display','none');
$('.Q-Graph-ScrollPane').empty();
}
</script>
</body>
</html>
js代码:
- 获取qunee对象
var graph = new Q.Graph('canvas');
graph.html.style.backgroundColor = '#000000';
graph.html.style.zIndex = 1;
$('.Q-Canvas').eq(1).hide();
2.封装方法,画线,画框
2.1、画固定宽高的框
主要看方法:Q.Shapes.getShape(Q.Consts.SHAPE_RECT, width, height);
还可以画固定大小的其他图形:
function drawBigRect(device,ied,x,y,width,height,color){
var name = device.name;
name = name.substring(0,name.length/2) + "\n" + name.substring(name.length/2);
var ied = device.ied;
height = device_height;
var shape = Q.Shapes.getShape(Q.Consts.SHAPE_RECT, width, height);
var node = graph.createNode("",x,y);
node.image = shape;
node.setStyle(Q.Styles.SHAPE_FILL_COLOR,color);
node.setStyle(Q.Styles.SHAPE_STROKE, 2);
node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#e9e9e9");
node.setStyle(Q.Styles.LABEL_OFFSET_Y,-75);
node.setStyle(Q.Styles.LABEL_COLOR,"white");
node.setStyle(Q.Styles.LABEL_FONT_SIZE,20);
node.movable = false;//禁止移动
node.name=name;
var tooltip = "<table style='color:white'><tr><td colspan='2'>装置描述</td></tr>";
tooltip += "<tr><td>IED描述:</td><td>"+ ied +"</td></tr>";
tooltip += "<tr><td>NAME描述:</td><td>"+ name+"</td></tr>";
tooltip += "</table>";
node.tooltip = tooltip;
}
上述方法中,第一个参数是个对象,可以用其他的参数代替,这样更有通用性
2.2、画的框的宽高,跟label的长短有关
function ractNode(text,x,y,width,height,fontsize,background_color,zindex,ied,name){
if (text.length != 0){
text = "\t\t\t\t" + text
text += "\t\t\t\t";
}
var node = graph.createText(text, x, y);
node.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(width, height));
node.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, background_color);
node.setStyle(Q.Styles.LABEL_COLOR, "#FFFFFF");
node.setStyle(Q.Styles.LABEL_BORDER, 1);
node.setStyle(Q.Styles.LABEL_PADDING, 1);
node.setStyle(Q.Styles.LABEL_BORDER_STYLE, "white");
node.setStyle(Q.Styles.LABEL_RADIUS, 0);
node.setStyle(Q.Styles.LABEL_FONT_SIZE, fontsize);
node.movable = false;//禁止移动
node.zIndex=zindex;
//node.name = ied;
//node.id = "1111111";
var tooltip = "<table style='color:white'><tr><td colspan='2'>装置描述:</td></tr>";
tooltip += "<tr><td>IED描述:</td><td>"+ ied +"</td></tr>";
tooltip += "<tr><td>NAME描述:</td><td>"+ name+"</td></tr>";
tooltip += "</table>";
node.tooltip = tooltip;
node.clickable = false;
return node;
}
方块的宽度跟text的长短有关。
2.3、画直线
function edgenodash(text,node1,node2,warning,name1,name2,direct,inorout){
var edge = graph.createEdge(text,node1,node2);
edge.setStyle(Q.Styles.EDGE_COLOR, '#5FB878');
edge.setStyle(Q.Styles.EDGE_WIDTH, 1.5);
//edge.setStyle(Q.Styles.ARROW_FROM, "floatingcircle");
edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
//edge.setStyle(Q.Styles.LABEL_OFFSET_Y, 1.2*smalRactHeight);
//edge.setStyle(Q.Styles.LABEL_OFFSET_X, edge_length/4);
edge.setStyle(Q.Styles.ARROW_FROM, Q.Consts.SHAPE_CIRCLE);
edge.setStyle(Q.Styles.ARROW_FROM_SIZE, 3);
edge.setStyle(Q.Styles.ARROW_TO_SIZE, 4);
edge.setStyle(Q.Styles.LABEL_FONT_SIZE, 8);
edge.setStyle(Q.Styles.LABEL_COLOR, "#00CDCD");
//edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);
edge.setStyle(Q.Styles.EDGE_FROM_AT_EDGE, true);
edge.setStyle(Q.Styles.EDGE_TO_AT_EDGE, true);
edge.movable = false;//禁止移动
edge.zIndex = 3;
//这里加入定时器动态效果
edge.setStyle(Q.Styles.EDGE_LINE_DASH_OFFSET, 0);
var tooltip = "<table style='color:white;z-index:100;'><tr><td colspan='2'>线路描述:</td></tr>";
tooltip += "<tr><td>起始端描述:</td><td>"+ name1 +"</td></tr>";
tooltip += "<tr><td>终止端描述:</td><td>"+ name2+"</td></tr>";
tooltip += "<tr><td>控制块描述:</td><td>"+gid+"</td></tr>";
tooltip += "</table>";
edge.tooltip = tooltip;
return edge;
}
2.4、画折线
function drawLine(stDot,endDot,ly,edge){
var temp1x = stDot.x;
var temp1y = ly;
var temp2x = endDot.x;
var temp2y = ly;
var line = graph.createShapeNode("");
line.moveTo(stDot.x,stDot.y);
line.lineTo(temp1x,temp1y);
line.lineTo(temp2x,temp2y);
line.lineTo(endDot.x,endDot.y);
//line.closePath(); //会将线的起点与终点连接起来
line.setStyle(Q.Styles.SHAPE_STROKE_STYLE, color);
line.setStyle(Q.Styles.SHAPE_STROKE, 1);
line.setStyle(Q.Styles.LINE_CAP, "round");
//选中样式
// line.setStyle(Q.Styles.SELECTION_SHADOW_BLUR, 5);
// line.setStyle(Q.Styles.SELECTION_COLOR, 'white');
// line.setStyle(Q.Styles.SELECTION_BORDER, 10);
// line.setStyle(Q.Styles.SELECTION_SHADOW_OFFSET_X, 5);
// line.setStyle(Q.Styles.SELECTION_SHADOW_OFFSET_Y, );
line.setStyle(Q.Styles.ARROW_FROM, Q.Consts.SHAPE_CIRCLE);
line.setStyle(Q.Styles.ARROW_TO, Q.Consts.SHAPE_ARROW_5);
line.setStyle(Q.Styles.ARROW_FROM_FILL_COLOR, color);
line.setStyle(Q.Styles.ARROW_FROM_FILL_GRADIENT, Q.Gradient.LINEAR_GRADIENT_HORIZONTAL);
line.setStyle(Q.Styles.ARROW_FROM_SIZE, {width: 3, height: 3});
line.movable = false;//禁止移动
line.zIndex = -1;
line.clickable = true;
line.dblclickable = true;
line.longpressable = true;
var tooltip = "<table style='color:white;z-index:100;'><tr><td colspan='2'>线路描述:</td></tr>";
tooltip += "<tr><td>起始端口描述:</td><td>"+ stDot.name +"</td></tr>";
tooltip += "<tr><td>终止端口描述:</td><td>"+ endDot.name+"</td></tr>";
tooltip += "</table>";
line.tooltip = tooltip;
return line;
}
3、增加交互事件
graph.addCustomInteraction({
onclick: function(evt, graph){
Q.log("click");
var element = graph.getElementByMouseEvent(evt);
if(element && element.clickable){
// alert("Clicked at - '" + element.name + "'");
element.zIndex = 10000;
element.setStyle(Q.Styles.SHAPE_STROKE, 5);
}
},
ondblclick: function(evt, graph){
Q.log("dblclick");
var element = graph.getElementByMouseEvent(evt);
if(element && element.dblclickable){
alert("Double Clicked at - '" + element.name + "'");
}
},
onlongpress: function(evt, graph){
Q.log("hold");
var element = graph.getElementByMouseEvent(evt);
if(element && element.longpressable){
element.zIndex = -1;
element.setStyle(Q.Styles.SHAPE_STROKE, 1);
}
}
对象中需要设置下:
line.clickable = true;
line.dblclickable = true;
line.longpressable = true;