开发思路
最近,因为在做基于MES系统进行工业互联网开发的项目;其中,在做demo时,我负责工序管理的开发,其中有一个功能是通过一个物料SFC码可以追踪该物料所经历的所有工序;网上有很多插件,比如D3等,但是,我只需要一个特别简单的横向流程图,所以并没有引用插件;此处要感谢https://www.cnblogs.com/zhangym118/p/8405962.html的作者,我引用了他的代码,仅仅在他的基础上删掉不用的部分并做一点修改。
话不多说,直接上代码,因为没有采用插件,所以,横向流程图都是用H5的canvas画布去制作。
<html>
<head>
<title>经历的工序</title>
<meta name="decorator" content="default"/>
<script type="text/javascript">
$(document).ready(function() {
var len = '${length}';
var json = '${lineNames}';
json = JSON.parse(json);
console.log( Object.values(json[0])[1]);
var cont = document.getElementById("workflow").getContext("2d");
document.getElementById("workflow").width = 10 * 180;//根据数据的多少来设定画布的宽度
for (var i =0; i<len; i++){
arcTopStroke(cont,200 + i*150 ,100 ,20, i, len-1, Object.values(json[i])[1]);
}
});
//画top圆
function arcTopStroke(cont, x, y, r, i, len, hash){
cont.beginPath();
cont.arc(x, y, r, 0, 2*Math.PI);
cont.lineWidth = 5;
cont.strokeStyle = "#999999";
cont.stroke();
cont.closePath();
cont.fillText(hash, x, y-30);
if( i < len ){
cont.moveTo(x + r, y);
cont.lineTo(x + r + 110, y);
cont.lineWidth = 2;
cont.stroke();
}
}
</script>
</head>
<body>
<div class="workflow_left_content" style="width:100% ;overflow-x: auto">
<canvas id="workflow" height=300></canvas>
</div>
</body>
</html>
我相信一看代码,都会知道什么意思,比较简单,就是画圆然后用线连接,并在圆上写上字以作解释,因为要跟后台关联,所以var json = ‘${lineNames}’;这行代码就是接收后台传给页面的list集合,至于后台怎么传,我用的是Model去传,也可以采用@ResponseBody以Json形式将返回值传到前端;但是,因为我返回值为页面地址,所以只能用model去传。
model.addAttribute("lineNames", new Gson().toJson(lines));
你以为完事了,那你就错了,你要是这样做,你传给页面的是一个list集合,而到了页面接收就变成了一个字符数据,页面会把后台传的值解析为一个一个字符,那该怎么办呢?在我的代码中已经写出来了,就是
json = JSON.parse(json);
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
因为我的List集合中存储的是对象,所以需要此步来转换。
此时,才算完毕。