代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title> <script src="../../js/lib/jquery.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>
<script type="text/javascript">
mxBasePath = '../../js/lib/mxgraph';
</script> <script type="text/javascript" src="../../js/lib/mxgraph/js/mxClient.js"></script> <script type="text/javascript">
var xml = null;
var graph = null; function createGraph(container)
{
var graph = new mxGraph(container);
graph.setTooltips(true);
graph.setEnabled(true); // Disables folding
graph.isCellFoldable = function(cell, collapse)
{
return false;
}; // Creates the stylesheet for the process display
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_STROKECOLOR] = 'black';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FILLCOLOR] = 'white';
//style[mxConstants.STYLE_GRADIENTCOLOR] = '#F0F0F0';
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_SHADOW] = true;
style[mxConstants.STYLE_FONTSTYLE] = 1;
style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_STROKECOLOR] = 'black';
style[mxConstants.STYLE_ROUNDED] = true; return graph;
}; //加载数据
function loadData() {
location=location;//刷新页面
} $(function () { var pid = $('#name').val();
$.ajax({
type:"POST",
async:false,
url:"../../index.php/?action=ticket&method=getProcess",
data:{
pid:pid
},
success:function(data){
$('#txt').val(data);
}
}); xml = $('#txt').val(); //绘图
var container = document.getElementById('graphContainer');
graph = createGraph(container);
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel()); //定时刷新页面
setTimeout(function () {
setInterval(loadData, 10000);
}, 1000); }); </script>
</head> <!-- Page passes the container and control to the main function -->
<body> <!-- Acts as a container for the graph -->
<div id="graphContainer" style="overflow:hidden;position:relative;cursor:default;">
</div> <input type='hidden' id='name' value=" <?php echo $_REQUEST['uid']; ?> "></input> <input type='hidden' type='text' id='txt'></input>
<br>
</body>
</html>