Qunee学习开发体会

最新推荐文章于 2023-12-22 14:53:56 发布

panzhao007

最新推荐文章于 2023-12-22 14:53:56 发布

阅读量2.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/panzhao007/article/details/90712431

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

话不多说，先上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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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;

panzhao007

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Qunee学习开发体会

话不多说，先上model。前端页面：<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, i...
复制链接

扫一扫