一、可優化點:
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>
五、界面及運行過程:
