gojs的应用

待我称王封你为后i 2022-03-22 08:52 496阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<title>整体能源结构图</title>
    		<%@ page contentType="text/html;charset=UTF-8"%>
    		<meta name="renderer" content="webkit">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    		<meta name="apple-mobile-web-app-capable" content="yes">
    		<meta name="format-detection" content="telephone=no">
    		<%@ include file="/WEB-INF/jsp/include/public.jsp"%>
    		<script src="${path}/js/extend/go.js" type="text/javascript"></script>
    	</head>
    	<style type="text/css">
    		*{margin:0;padding:0}
    		html{height:100%;}
    		body{background: #fff;}
    		#close{color:#fff;position: fixed;right: 100px;top: 10px;z-index: 19050707;cursor:pointer;background:#6A5ACD;width:80px;height:20px;text-align:center;border-radius:20px;line-height:20px;font-size:10px;}
    		#open{color:#fff;position: fixed;right: 10px;top: 10px;z-index: 19050707;cursor:pointer;background:#6A5ACD;width:80px;height:20px;text-align:center;border-radius:20px;line-height:20px;font-size:10px;}
    		#box{position: fixed;right:60px;top:8px;z-index: 19050707;width:250px;height:20px;}
    		#search_icon{position:fixed;right:95px;top:10px;z-index: 19050708;width:13px;height:22px;background:#fff;display:block;}
    		#close_icon{width:13px;height:22px;background:#fff;position:fixed;right:199px;top:10px;z-index: 19050708;cursor:pointer;display:none;}
    		#cirel{width:20px;height:20px;background:#d8d8d8;border-radius:20px;margin-top:1px;text-align:center;line-height:20px}
    		#cirel span{color:#666;font-size:16px;display:inline-block;}
    		:focus{outline:none;}
    	</style>
    	<script type="text/javascript">
    		var time_=localStorage.getItem("time");
    		var iframeId=window.frameElement && window.frameElement.id || '';//获取当前iframe的id
    		$("#"+iframeId,parent.document).parent().css("padding",0);
    		$(function(){
    			if(window.goSamples) goSamples();
    			var menu_id={"menu_id":localStorage.getItem("thisWebId")};
    			var myDiagramDiv=document.getElementById("myDiagramDiv");
    			var body=document.getElementById("body");
    			var $gojs = go.GraphObject.make;
    			myDiagram =$gojs(go.Diagram, "myDiagramDiv",{
    				initialContentAlignment: go.Spot.Center,//加载位置
    				"initialPosition":new go.Point(-150,-10),
    				allowDelete:false,//完全禁用删除
    				//initialAutoScale:go.Diagram.Uniform,//全屏显示树结构
    				scrollMode:go.Diagram.InfiniteScroll,//启动无限滚动，不受边界控制
    				//"animationManager.isEnabled":false,
    				"toolManager.mouseWheelBehavior":go.ToolManager.WheelZoom,//启动滚轮缩放
    				"allowMove":false,//禁止拖动
    				/*"allowSelect":false,//禁止选择 */
    				"hasHorizontalScrollbar":false,//去除水平滚动条
    				"hasVerticalScrollbar":false,//去除竖直滚动条
    				"canStart":false,
    				/* "TreeLayout.lerangement":go.TreeLayout.ArrangementVertical, */
    				grid: $gojs(go.Panel, "Grid", //网格
    					$gojs(go.Shape, "LineH", {
    						stroke: "lightgray",
    						strokeWidth: 0.5
    					}),
    					$gojs(go.Shape, "LineH", {
    						stroke: "gray",
    						strokeWidth: 0.5,
    						interval: 10
    					}),
    					$gojs(go.Shape, "LineV", {
    						stroke: "lightgray",
    						strokeWidth: 0.5
    					}),
    					$gojs(go.Shape, "LineV", {
    						stroke: "gray",
    						strokeWidth: 0.5,
    						interval: 10
    					})
    				),
    				layout:$gojs(go.TreeLayout,{
    					angle:90,
    					arrangement:go.TreeLayout.ArrangementVertical
    				})
    			});
    			myDiagram.nodeTemplate =$gojs(go.Node,"Vertical",{
    				isTreeExpanded: false,//折叠全部子节点
    				selectionObjectName: "BODY",/*"selectionAdorned":false,禁止出现矩形框*/selectionAdorned:false,
    				/*layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,展开不恢复到默认布局*/},
    		       		$gojs(go.Panel, "Auto",{name: "BODY",},
    		         		$gojs(go.Shape, "Rectangle",{fill:"white",stroke:"#6A5ACD",strokeWidth:4,name:"highlight"}
    		         	),
    		         	$gojs(go.Panel, "Vertical",
    		           		$gojs(go.TextBlock,{stretch: go.GraphObject.Horizontal,
    		             		verticalAlignment : go.Spot.Center,//垂直对齐
    		             		font: "10pt Verdana, sans-serif",
    		             		textAlign:"center",//居中对齐
    		             		background:"#6A5ACD",
    		             		stroke:"#fff",
    		             		name:"maxwidth",
    		             		/* width:250,
    		             		wrap:"none",//省略号
    		             		maxLines:1,//省略号
    		             		overflow: go.TextBlock.OverflowEllipsis,//省略号 */
    		             	},
    		             	new go.Binding("text", "name")
    		           	),
    		           	$gojs(go.Panel, "Vertical",{
    		           		stretch: go.GraphObject.Horizontal ,background:"#FFF"/* ,click:function(a,c){//绑定PanelExpanderButton点击事件
    		           			var diagram = c.diagram;
    						    if (diagram === null) return;
    						    if (diagram.isReadOnly) return;
    						    var elt = c.findTemplateBinder();
    						    if (elt === null) elt = c.part;
    						    if (elt !== null) {
    						      var pan = elt.findObject("COLLAPSIBLE");
    						      if (pan !== null) {
    						        diagram.startTransaction('Collapse/Expand Panel');
    						        pan.visible = !pan.visible;
    						        diagram.commitTransaction('Collapse/Expand Panel');
    						      }
    						    }
    		           		}, */},
    		             		$gojs(go.Panel, "Table",{
    		             			stretch: go.GraphObject.Fill,background:"white"},
    			               			$gojs(go.TextBlock,{
    			                 			font: "bold 10pt Verdana, sans-serif",
    			                 			stroke:"#6A5ACD",
    			                 			name:"width",
    			                 			margin: new go.Margin(3, 0, 0, 5),
    			                 			alignment: go.Spot.Center,
    			                 			verticalAlignment : go.Spot.Center//垂直对齐
    			                 		},new go.Binding("text", "readNum")),
    		               				/* $gojs("PanelExpanderButton","COLLAPSIBLE",{
    		               					column: 1,
    		               					alignment: go.Spot.Right,
    		               					click:function(a,c){},
    		               					"ButtonIcon.fill":"#6A5ACD",
    		               					"ButtonIcon.stroke":"#6A5ACD",
    		               				}) */
    		             		),
    		             	$gojs(go.Panel, "Table",new go.Binding("itemArray", "actions"),{
    		             		defaultAlignment: go.Spot.Left,
    		             		name:"COLLAPSIBLE",
    		             		background: "white",
    		             		margin:new go.Margin(2, 0, 0, 0),
    		             		stretch: go.GraphObject.Horizontal,
    		             		//visible:false,//默认折叠
              					itemTemplate:
              						$gojs(go.Panel, "TableRow",
    					              $gojs(go.TextBlock, new go.Binding("text", "value"),
    					                { column: 1,alignment: go.Spot.Center,stroke:"#6A5ACD",font: "bold 10pt Verdana, sans-serif"}),
    					            )
    		               	}
    		             )
    		           )
    		         ) 
    		       ),
    		       $gojs(go.Panel, // this is underneath the "BODY"
    					{
    						height: 15
    					}, // always this height, even if the TreeExpanderButton is not visible
    					$gojs("TreeExpanderButton")
    				),
    		     );
    		   myDiagram.linkTemplate =
    		     $gojs(go.Link, go.Link.Orthogonal,
    		       { deletable: false, corner: 10 },
    		       $gojs(go.Shape,
    		         { strokeWidth: 2,stroke:"#6A5ACD"}
    		       )
    		     );
    		     /* var max_width=0;
    		     myDiagram.addDiagramListener('AnimationFinished', function(){//动画完成后执行
    		     		var width_judge=true;
         				myDiagram.nodes.each (function(n) {
    			    		var p = n.findObject("maxwidth");
    			    		if(p.Oi.maxLineWidth>max_width){
    			    			max_width=p.Oi.maxLineWidth
    			    		}
    					});
    					myDiagram.nodes.each (function(n) {
    			    		var p = n.findObject("width");
    			    		if(p.Oi.maxLineWidth>max_width){
    			    			max_width=p.Oi.maxLineWidth;
    			    			width_judge=false;
    			    		}
    					});
    					if(!width_judge){
    						max_width=max_width+20;
    					}
         				if(max_width != 0){
         					myDiagram.nodes.each (function(n) {
    				    		var p = n.findObject("maxwidth");
    				    		p.width=max_width;
    						});
         				}
    		     }); */
    		   myDiagram.initialContentAlignment = go.Spot.Center;
    		   	$.ajax({
    		     	url:path + "/gplotData_meter",
    		     	dataType:"json",
    		     	data:menu_id,
    		     	success:function(data){
    		     		myDiagram.addDiagramListener("InitialLayoutCompleted",function(e){
    				         e.diagram.findTreeRoots().each(function(r){ r.expandTree(3);});
    				       });//只显示到第二级节点，其余隐藏
    		     		 myDiagram.model =$gojs(go.GraphLinksModel,{ nodeDataArray: data.nodeDataArray,linkDataArray: data.linkDataArray });
    		     		 $("#search").combobox({//搜索框赋值
    					    data:data.nodeDataArray,
    					    valueField:'name',
    					    textField:'name',
    						prompt:"搜索计量点",
    					    width:220,
    					    hasDownArrow:false,
    					    onSelect:function(data){
    					    	var model = myDiagram.model;
    							var _data=model.nodeDataArray;
    							for(var i=0;i<_data.length;i++){
    								var node_=myDiagram.findNodeForData(_data[i]);
    								var node_text= node_.findObject("highlight");
    								node_text.stroke ="#6A5ACD";
    								if(_data[i].name == data.name){
    									var _node=myDiagram.findNodeForData(_data[i]);
    									var text = _node.findObject("highlight");
    			    					text.stroke = "#fe854f";
    									myDiagram.commandHandler.scrollToPart(_node);
    								}
    							}
    					    },
    					    onChange:function(newValue, oldValue){
    					    	if(newValue != null){//搜索框不等于空的时候
    					    		$("#close_icon").css("display","block");
    					    		$("#search_icon").css("display","none");
    					    	}else{
    					    		$("#close_icon").css("display","none");
    					    		$("#search_icon").css("display","block");
    					    	}
    					    }
    					 });
    					 $("#close_icon").click(function(){
    			    		$("#search").combobox("clear");
    			    		$("#close_icon").css("display","none");
    					    $("#search_icon").css("display","block");
    			    	 });
    					 $("#_easyui_textbox_input2").blur(function(){
    					 	setTimeout(function(){
    					 		$("#search").combobox("hidePanel");
    					 	},200)
    					 });
    					  $("#_easyui_textbox_input2").focus(function(){
    					  	setTimeout(function(){
    					 		$("#search").combobox("showPanel");
    					 	},200)
    					 });
    		     	}
    		    });
    		   /* var open=document.getElementById('open');
    		   var close=document.getElementById('close');
    		   	open.onclick=function(){//全部展开
    		   		myDiagram.startTransaction();
    				myDiagram.nodes.each (function(n) {
    		    		var p = n.findObject("COLLAPSIBLE");
    		    		if (p !== null) p.visible = true;
    				});
    				myDiagram.commitTransaction("collapsed all panels");
    		 	}
    		   	close.onclick=function(){//全部折叠
    		   		myDiagram.startTransaction();
    				myDiagram.nodes.each (function(n) {
    		    		var p = n.findObject("COLLAPSIBLE");
    		    		if (p !== null) p.visible = false;
    				});
    				myDiagram.commitTransaction("collapsed all panels");
    		 	} */
    		   setInterval(function(){
    				$.ajax({
    			     	url:path + "/gplotData_meter",
    			     	dataType:"json",
    			     	data:menu_id,
    			     	success:function(data){
    			     		var model = myDiagram.model;
    						var _data=model.nodeDataArray;
    						for(var i=0;i<_data.length;i++){
    							model.setDataProperty(_data[i],"readNum",data.nodeDataArray[i].readNum);
    							model.setDataProperty(_data[i],"actions",data.nodeDataArray[i].actions);
    						}
    						model.commitTransaction("flash");
    			     	}
    			    });
    		   },30*1000);
    		  /* setInterval(function(){
    		   		$("#html").css("height","100%");
    		   		$("#body").css("height","100%");
    		   		$("#sample").css("height","100%");
    		   },1); */
    		});
    		window.document.onkeydown=function(ev){
    			var iEvent=ev||event;
    			if(iEvent.keyCode == 46){
    				return false;
    			}
    		}
      	</script>
    	<body id="body" onselectstart="javascript:return false;" style="overflow:-Scroll;overflow-x:hidden;overflow-y:hidden;height:100%;">
    		<div id="sample" onselectstart="javascript:return false;" style="overflow:-Scroll;overflow-x:hidden;overflow-y:hidden;width:100%; height:100%;">
    			<div id="myDiagramDiv" style="width:100%; height:100%;"></div>
    		</div>
    		<span id="search_icon" style="display:none;"><img src="${path}/images/search_icon.png"/></span>
    		<div id="close_icon" style="display:none;">
    			<div id="cirel">
    				<span>x</span>
    			</div>
    		</div>
    		
    		<div id="box" style="display:none;">
    			<div id="search" class="easyui-combobox"></div>
    		</div>
    	</body>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

数据格式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

二、空调系统能源监控 svg-pan-zoom的应用

项目位置：ktxtnyjk

[https://www.jianshu.com/p/24072108c7d4][https_www.jianshu.com_p_24072108c7d4]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220322/e864e8a4dc8844a8a42d68ac06710f8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20220322/c57040839ec6407a859c20424192806e.png
[https_www.jianshu.com_p_24072108c7d4]: https://www.jianshu.com/p/24072108c7d4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2]: /images/20220322/063c9161e14643959888f8fd1ce7823b.png