优化可视化功能

一、可优化点:

创新互联建站2013年至今，是专业互联网技术服务公司，拥有项目网站设计制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元岚山做网站,已为上家服务,为岚山各地企业和个人服务,联系电话:13518219792

1.有向图展示各进程偏序关系

2.可自定义进程之间的关系，并将其可视化

二、方案:

1.之前是用填充颜色的div来表示进程，进程进度也是用细长的div表示。现要改为有向图表示，因此我采用了svg来画出图形。

2.自定义进程的信息用xml储存，网页通过读取解析xml文件，用js创建进程对象数组来保存进程信息;再定义一个运行对象数组，遍历进程数组，将父进程对象加入运行进程数组。定义run函数，定时器每秒运行一次run函数。在run函数中遍历运行进程数组，每次画出各进程的图形。当前置进程运行完后将后续进程加入运行进程中，如此循环。

三、界面简介:

1.圆形表示进程，内有进程名称

2.直线表示运行进度

3.小圆点表示终点(运行方向)

四、代码:

1.custom.xml

 //进程名

  //前置进程

  //后续进程

 //运行时间

 //是否完成

 //画图坐标

 //画图坐标

]>

Father

Father

A B

300

1

0

500

A

Father

C

300

0

0

0

B

Father

C D

480

0

0

0

C

A B

D

180

0

0

0

D

C B

D

300

0

0

0

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

五、界面及运行过程: