<!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="open">全部展开</div>
<div id="close">全部折叠</div> -->
<div id="box" style="display:none;">
<div id="search" class="easyui-combobox"></div>
</div>
</body>
</html>
效果图：
数据格式：
二、空调系统能源监控 svg-pan-zoom的应用
项目位置：ktxtnyjk
https://www.jianshu.com/p/24072108c7d4
