优化可视化功能
一、可优化点:
创新互联建站2013年至今,是专业互联网技术服务公司,拥有项目网站设计制作、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元岚山做网站,已为上家服务,为岚山各地企业和个人服务,联系电话:13518219792
1.有向图展示各进程偏序关系
2.可自定义进程之间的关系,并将其可视化
二、方案:
1.之前是用填充颜色的div来表示进程,进程进度也是用细长的div表示。现要改为有向图表示,因此我采用了svg来画出图形。
2.自定义进程的信息用xml储存,网页通过读取解析xml文件,用js创建进程对象数组来保存进程信息;再定义一个运行对象数组,遍历进程数组,将父进程对象加入运行进程数组。定义run函数,定时器每秒运行一次run函数。在run函数中遍历运行进程数组,每次画出各进程的图形。当前置进程运行完后将后续进程加入运行进程中,如此循环。
三、界面简介:
1.圆形表示进程,内有进程名称
2.直线表示运行进度
3.小圆点表示终点(运行方向)
四、代码:
1.custom.xml
//进程名
//前置进程
//后续进程
//运行时间
//是否完成
//画图坐标
//画图坐标
]>
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
//创建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 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 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].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 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); } 五、界面及运行过程:
文章标题:优化可视化功能
本文URL:http://scyanting.com/article/igjgcs.html