一、可优化点:
1.有向图展示各进程偏序关系
2.可自定义进程之间的关系，并将其可视化
二、方案:
1.之前是用填充颜色的div来表示进程，进程进度也是用细长的div表示。现要改为有向图表示，因此我采用了svg来画出图形。
2.自定义进程的信息用xml储存，网页通过读取解析xml文件，用js创建进程对象数组来保存进程信息;再定义一个运行对象数组，遍历进程数组，将父进程对象加入运行进程数组。定义run函数，定时器每秒运行一次run函数。在run函数中遍历运行进程数组，每次画出各进程的图形。当前置进程运行完后将后续进程加入运行进程中，如此循环。
三、界面简介:
1.圆形表示进程，内有进程名称
2.直线表示运行进度
3.小圆点表示终点(运行方向)
四、代码:
1.custom.xml
<?xml version="1.0"?>
<!DOCTYPE processes[
<!ELEMENT process (name,from+,to+,execT,isfinish)>
<!ELEMENT name (#PCDATA)> //进程名
<!ELEMENT from (#PCDATA)> //前置进程
<!ELEMENT to (#PCDATA)> //后续进程
<!ELEMENT execT (#PCDATA)> //运行时间
<!ELEMENT finish (#PCDATA)> //是否完成
<!ELEMENT startx (#PCDATA)> //画图坐标
<!ELEMENT starty (#PCDATA)> //画图坐标
]>
<processes><process>
<name>Father</name>
<from>Father</from>
<to>A B</to>
<execT>300</execT>
<isfinish>1</isfinish>
<startx>0</startx>
<starty>500</starty>
</process><process>
<name>A</name>
<from>Father</from>
<to>C</to>
<execT>300</execT>
<isfinish>0</isfinish>
<startx>0</startx>
<starty>0</starty>
</process><process>
<name>B</name>
<from>Father</from>
<to>C D</to>
<execT>480</execT>
<isfinish>0</isfinish>
<startx>0</startx>
<starty>0</starty>
</process><process>
<name>C</name>
<from>A B</from>
<to>D</to>
<execT>180</execT>
<isfinish>0</isfinish>
<startx>0</startx>
<starty>0</starty>
</process><process>
<name>D</name>
<from>C B</from>
<to>D</to>
<execT>300</execT>
<isfinish>0</isfinish>
<startx>0</startx>
<starty>0</starty>
</process></processes>
2. loadxmldoc .js
//加载xml文件
function loadXMLDoc(dname)
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.async=false;
xmlDoc.load(dname);
return(xmlDoc);
}
catch(e) {alert(e.message)}
return(null);
}
3.并发任务可视化.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js"></script>
</head>
<body>
</body>
<script>
//创建svg容器
var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute("style","width:8000px;height:2000px;");
//加载xml文件
xmlDoc=loadXMLDoc("custom.xml");
//创建进程对象数组
var running=new Array();
var process_num=xmlDoc.getElementsByTagName("processes")[0].childNodes;
var direction=1;
var process=new Array();
var startx=120,starty=500;
//将xml内信息存入数组
for(var i=0;i<process_num.length;i++){
var pname=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
process[pname+""]=new Object();
process[pname+""].name=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
strfrom=xmlDoc.getElementsByTagName("from")[i].childNodes[0].nodeValue;
process[pname+""].from=new Array();
process[pname+""].from=strfrom.split(" ");
strto=xmlDoc.getElementsByTagName("to")[i].childNodes[0].nodeValue;
process[pname+""].to=new Array();
process[pname+""].to=strto.split(" ");
process[pname+""].execT=xmlDoc.getElementsByTagName("execT")[i].childNodes[0].nodeValue; process[pname+""].isfinish=xmlDoc.getElementsByTagName("isfinish")[i].childNodes[0].nodeValue; process[pname+""].startx=xmlDoc.getElementsByTagName("startx")[i].childNodes[0].nodeValue;
process[pname+""].starty=xmlDoc.getElementsByTagName("starty")[i].childNodes[0].nodeValue;
process[pname+""].cicle= addcicle();
svg.appendChild(process[pname+""].cicle);
process[pname+""].line=addline();
svg.appendChild(process[pname+""].line);
}
//将父进程信息对象放入运行对象数组
for(pname in process){
if(process[pname].from.length==1)
{
if(process[pname].from=="Father"){
process[pname].endx=0;
process[pname].endy=500;
process[pname].distancex=0;
process[pname].distancey=500;
running.push(process[pname]);
addtext(50,520,"Father");
break;
}
}
}
document.body.appendChild(svg);
//定时器
setInterval(run,10);
//运行函数
function run(){
//循环遍历运行对象数组，并将满足条件的进程加入运行数组中
for(prun in running){
var flagf=1;
for(var j=0;j<running[prun].from.length;j++){
if(process[running[prun].from[j]].isfinish==0){
flagf=0;
break;
}
}
if(flagf==1){
running[prun].cicle.setAttribute( "cx", running[prun].endx+60);
running[prun].cicle.setAttribute( "cy", running[prun].endy );
running[prun].cicle.setAttribute( "r", 60 );
running[prun].cicle.setAttribute( "style", "fill:yellow;fill-opacity:0.8;stroke-width:1;stroke:rgb(0,0,0)" );
if(running[prun].distancex<running[prun].endx){
running[prun].distancex=running[prun].distancex+running[prun].speedx;
running[prun].distancey=running[prun].distancey+running[prun].speedy;
}
else{
running[prun].distancex=running[prun].endx;
running[prun].distancey=running[prun].endy;
process[running[prun].name].isfinish=1;
running[prun].isfinish=1;
}
running[prun].line.setAttribute( "x1", running[prun].startx );
running[prun].line.setAttribute( "y1", running[prun].starty );
running[prun].line.setAttribute( "x2", running[prun].distancex);
running[prun].line.setAttribute( "y2", running[prun].distancey);
running[prun].line.setAttribute( "style","stroke:black;fill-opacity:0.5;stroke-width:2");
if(running[prun].isfinish==1){
for(var j=0;j<running[prun].to.length;j++){
var flag=1;
//alert();
for(pprun in running){
if(running[prun].to[j]==running[pprun].name){
if(running[pprun].isfinish==1){
var line=addline();
line.setAttribute( "x1", running[prun].endx+120 );
line.setAttribute( "y1", running[prun].endy );
line.setAttribute( "x2", running[pprun].endx);
line.setAttribute( "y2", running[pprun].endy);
line.setAttribute( "style","stroke:black;fill-opacity:0.5;stroke-width:1");
svg.appendChild(line);
}
flag=0;
}
}
if(flag==1){
process[running[prun].to[j]+""].startx=running[prun].endx+120;
process[running[prun].to[j]+""].starty=running[prun].endy;
process[running[prun].to[j]+""].endx=process[running[prun].to[j]+""].startx+480;
process[running[prun].to[j]+""].endy=60+280*j;
process[running[prun].to[j]+""].speedx=(process[running[prun].to[j]+""].endx-process[running[prun].to[j]+""].startx)/process[running[prun].to[j]+""].execT;
process[running[prun].to[j]+""].speedy=(process[running[prun].to[j]+""].endy-process[running[prun].to[j]+""].starty)/process[running[prun].to[j]+""].execT;
process[running[prun].to[j]+""].distancex=process[running[prun].to[j]+""].startx;
process[running[prun].to[j]+""].distancey=process[running[prun].to[j]+""].starty;
var c=addcicle();
c.setAttribute( "cx", process[running[prun].to[j]+""].endx);
c.setAttribute( "cy", process[running[prun].to[j]+""].endy);
c.setAttribute( "r", 4 );
c.setAttribute( "style", "fill:red;stroke-width:1;stroke:rgb(0,0,0)" );
svg.appendChild(c);
addtext(process[running[prun].to[j]+""].endx+50,process[running[prun].to[j]+""].endy,process[running[prun].to[j]+""].name);
running.push(process[running[prun].to[j]+""]);
}
}
}
}
}
}
function addline(){
return document.createElementNS( "http://www.w3.org/2000/svg", "line");
}
function addcicle(){
return document.createElementNS( "http://www.w3.org/2000/svg", "circle" );
}
function addtext(x,y,name){
var text = document.createElementNS( "http://www.w3.org/2000/svg", "text");
text.setAttribute( "x", x );
text.setAttribute( "y", y );
text.setAttribute( "fill", "black ");
text.innerHTML=name;
svg.appendChild(text);
}
</script>
</html>
五、界面及运行过程:
