`
wtj_jeson
  • 浏览: 10818 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

flex gannt

 
阅读更多

//生成甘特图
 private function renderGanttChart():void
 {
  this.clearGanttChart(); //清除甘特图
  
  var startDate:Date = this.taskList.getItemAt(0).plannedStartDate;
  var endDate:Date = this.taskList.getItemAt(0).plannedEndDate;
  var leaf:String = this.taskList.getItemAt(0).leaf;
  var duration:Number = this.taskList.getItemAt(0).duration;
  
  
  //甘特图开始日期(周日)
  var beginSunday:Date = this.getStartDate4GanttChart(startDate);
  //甘特图结束日期(周六)
  var endSaturday:Date = this.getEndDate4GanttChart(endDate);
  //计算起止两个周日的间隔天数(一定为7的倍数)
  var intervalBetweenSundays:Number = this.getDateInterval(beginSunday, new Date(endSaturday.getFullYear(), endSaturday.getMonth(), endSaturday.getDate() + 1));
  //计算起止两个周日间隔的周数
  var numberOfWeeks:Number = intervalBetweenSundays / 7;
  
  //绘制甘特图标题栏的上部区域
  //注意:前面多显示一周,后面多显示一周
  for(var i:Number = -1; i <= numberOfWeeks; ++i)
  {
   var hbox:HBox = new HBox();
   hbox.height = 20;
   hbox.width = 140;
   hbox.setStyle("borderStyle", "solid");
   hbox.setStyle("borderThickness", "1");
   hbox.setStyle("borderColor","black");
   hbox.setStyle("horizontalAlign","center");
   hbox.setStyle("backgroundColor", "0XD7D7D7");
   
   if(-1 != i)
   {
    hbox.setStyle("borderSides", "top right bottom"); //从第二个开始不显示左边框
   }
   
   var label:Label = new Label();
   label.text = this.getDateByIndexOfWeek(i, beginSunday);
   
   hbox.addChild(label);
   
   this.upper.addChild(hbox);
  }
  
  //绘制甘特图下部区域
  for(var i:Number = 0; i < intervalBetweenSundays + 14; ++i)
  {
   var hbox:HBox = new HBox();
   hbox.height = 20;
   hbox.width = 20;
   hbox.setStyle("borderStyle", "solid");
   hbox.setStyle("borderThickness", "1");
   hbox.setStyle("borderColor","black");
   hbox.setStyle("horizontalAlign","center");
   hbox.setStyle("backgroundColor", "0XD7D7D7");
   hbox.setStyle("borderSides", "left right bottom");
   
   if(0 != i)
   {
    hbox.setStyle("borderSides", "right bottom");
   }
   
   var label:Label = new Label();
   label.text = this.getDayByIndex(i);
   
   hbox.addChild(label);
   
   this.lower.addChild(hbox);
  }
  
  //绘制星期分割线
  this.canvas.graphics.lineStyle(1, 0X0000FF);
  
  for(var i:Number = 0; i < numberOfWeeks + 2; ++i)
  {
   var startPoint:Point = new Point(140 * i, 0);
   var endPoint:Point = new Point(140 * i, 300); //此处的变量y需要替换掉
   
   var maxDistance:Number = Point.distance(startPoint, endPoint);
   
   var stepper:Number = 0;
   var p1:Point = null;
   var p2:Point = null;
   
   while(stepper < maxDistance)
   {
    p1 = Point.interpolate(endPoint, startPoint, stepper/maxDistance);
    
    stepper += 5;
    
    if(stepper > maxDistance)
    {
     stepper = maxDistance;
    }
    
    p2 = Point.interpolate(endPoint, startPoint, stepper/maxDistance);
    
    this.canvas.graphics.moveTo(p1.x, p1.y);
    this.canvas.graphics.lineTo(p2.x, p2.y);
    
    stepper += 5;
   }
  }
  
  //绘制项目根节点甘特图
  this.canvas.graphics.lineStyle(1, 0X000000);
  this.canvas.graphics.beginFill(0X000000); //填充黑色
  
  for(var i:Number = 0; i < this.taskList.length; ++i)
  {
   var task:Task = this.taskList.getItemAt(i) as Task;
   
   var startDate:Date = task.plannedStartDate;
   var duration:Number = task.duration;
   var leaf:String = task.leaf;
   
   var interval:Number = this.getDateInterval(beginSunday, startDate);
   
   var startX:Number = 20 * (7 + interval);     //20 * (7 + startDate.getDay());
   var startY:Number = 8 + 20 * i;
   var endX:Number = startX + 20 * duration;
   var endY:Number = startY + 8;
   
   if("true" == leaf) //根节点是叶子节点
   {
    this.canvas.graphics.drawRect(startX, startY, 20 * duration, 8);
   }
   else //根节点不是叶子节点
   {
    this.canvas.graphics.drawRect(startX - 4, startY, 20 * duration + 8, 8);
    
    //开始处
    this.canvas.graphics.moveTo(startX - 4, startY + 8);
    this.canvas.graphics.lineTo(startX + 4, startY + 8);
    this.canvas.graphics.lineTo(startX, startY + 8 + 4);
    this.canvas.graphics.lineTo(startX - 4, startY + 8);
    
    //结束处
    this.canvas.graphics.moveTo(endX - 4, endY);
    this.canvas.graphics.lineTo(endX + 4, endY);
    this.canvas.graphics.lineTo(endX, endY + 4);
    this.canvas.graphics.lineTo(endX - 4, endY);
   }
  }
  
  this.canvas.graphics.endFill();
 }
 
 
 //甘特图处理相关方法
 
 private function clearGanttChart():void
 {
  this.upper.removeAllChildren(); //清除甘特图标题栏的上部
  this.lower.removeAllChildren(); //清除甘特图标题栏的下部
  this.canvas.graphics.clear(); //清除甘特图
 }
 
 
 //获得两个日期之间的间隔天数
 private function getDateInterval(startDate:Date, endDate:Date):Number
 {
  var interval:Number = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24 );
  
  return interval;
 }
 
 //计算甘特图的开始日期
 private function getStartDate4GanttChart(startDate:Date):Date
 {
  var day:Number = startDate.getDay(); //获得开始日期为周几
  
  var startDate4GanttChart:Date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - day);
  
  return startDate4GanttChart;
 }
 
 //计算甘特图的结束日期
 private function getEndDate4GanttChart(endDate:Date):Date
 {
  var day:Number = endDate.getDay(); //获得开始日期为周几
  
  var endDate4GanttChart:Date = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + (6 - day));
  
  return endDate4GanttChart;
 }
 
 //根据索引获取每周的周日
 private function getDateByIndexOfWeek(index:Number, beginSunday:Date):String
 {
  var someSunday:Date = new Date(beginSunday.getFullYear(), beginSunday.getMonth(), beginSunday.getDate() + 7 * index);
  
  var year:Number = someSunday.getFullYear();
  var month:Number = someSunday.getMonth() + 1;
  var date:Number = someSunday.getDate();
  
  var month2String:String = month.toString();
  var date2String:String = date.toString();
  
  if(month < 10)
  {
   month2String = "0" + month;
  }
  if(date < 10)
  {
   date2String = "0" + date;
  }
  
  var result:String = year + "-" + month2String + "-" + date2String;
  
  return result;
 }
 
 //根据索引计算每天为星期几
 private function getDayByIndex(index:Number):String
 {
  var compIndex:Number = index % 7;
  
  switch(compIndex)
  {
   case 0:
    return "日";
   case 1:
    return "一";
   case 2:
    return "二";
   case 3:
    return "三";
   case 4:
    return "四";
   case 5:
    return "五";
   case 6:
    return "六";
   default:
    return null;
  }
 }
 
 
 
 
 //切换项目,显示根节点
 private function switchProject(xml:String):void
 {
  this.showViewProjectView();
  this.treeData = new XML(xml);
  
  this.taskList.removeAll(); //清空任务列表
  
  var id:Number = Number(this.treeData.@id);
  var name:String = this.treeData.@label;
  var startDate:Date = new Date(this.treeData.@startYear, this.treeData.@startMonth, this.treeData.@startDate);
  var endDate:Date = new Date(this.treeData.@endYear, this.treeData.@endMonth, this.treeData.@endDate);
  var leaf:String = this.treeData.@leaf;
  var duration:Number = this.getDateInterval(startDate, endDate);
  
  var task:Task = new Task();
  task.id = id;
  task.name = name;
  task.plannedStartDate = startDate;
  task.plannedEndDate = endDate;
  task.duration = duration;
  task.leaf = leaf;
  
  this.taskList.addItem(task); // 将根节点放到集合中
  
  this.renderGanttChart();
 }
  
 //创建任务
 private function createTask():void
 {
  if(null == this.projectTree.selectedItem)
  {
   Alert.show("请选择父节点");
   return;
  }
  
  this.selectedItem = this.projectTree.selectedItem as XML; 
  
  var parentId:Number = Number(this.selectedItem.attribute("id")); 
  
  var addTaskWindow:AddTaskWindow = new AddTaskWindow();
  addTaskWindow.parentWindow = this;
  addTaskWindow.callbackFunction = createSubTaskHandler;
  addTaskWindow.parentId = parentId;
  
  PopUpManager.addPopUp(addTaskWindow,this,true);
  PopUpManager.centerPopUp(addTaskWindow); // 弹出窗口居中显示
  
 }
 
 //创建任务的回调,来自于子窗口
 private function createSubTaskHandler(taskId:Number, name:String):void
 {
  if(!this.isExpanded || 1 == this.selectedItem.child("mock").length()
    || 0 == this.selectedItem.children().length())
  {
   this.selectedItem4Open = this.selectedItem;
   
   var length:int = this.selectedItem4Open.children().length(); //首先获取子元素的数量
  
   for(var i:int = 0; i < length; ++i) //删除子元素
   {
    delete this.selectedItem4Open.children()[0];
   }
   
   this.openedItemId = this.selectedItem4Open.@id;
   this.openedItemName = this.selectedItem4Open.@label;
   
   this.taskTreeService.send();
  }
  else
  {
   var xml:XML = <task></task>
   xml.@id = taskId;
   xml.@label = name;
  
   this.selectedItem.appendChild(xml);
  }
 }
 
 //显示查看项目视图
 private function showViewProjectView():void
 {
  this.mainViewContainer.selectedIndex = 1;
 }
 
 //显示创建项目视图
 private function showCreateProjectView():void
 {
  this.mainViewContainer.selectedIndex = 0;
 }
 
 
 
 //创建项目
 private function createProject():void
 {
  this.createProjectService.send();
 }
 
 //创建项目回调
 private function addTaskHandler(event:ResultEvent):void
 {
  var returnedData:String = String(event.result);
  var returnedObject:Object = JSON.decode(returnedData);
  
  var projectId:int = returnedObject.id;
  var name:String = returnedObject.name;
  
  ExternalInterface.call("parent.addProjectNode", projectId, name);//调用外部的js方法
 }
 
 //判断节点展开或是回调
 private function doItemOpening(event:TreeEvent):void
 {
  if(event.opening) //展开
  {
   this.doItemOpen(event);
  }
  else //关闭
  {
   this.doItemClose(event);
  }
  
 }
 
 //处理节点展开事件
 private function doItemOpen(event:TreeEvent):void
 {
  this.selectedItem4Open = event.item as XML; //获取被展开的节点
  
  var length:int = this.selectedItem4Open.children().length(); //首先获取子元素的数量
  
  for(var i:int = 0; i < length; ++i) //删除子元素
  {
   delete this.selectedItem4Open.children()[0];
  }
  
  this.openedItemId = this.selectedItem4Open.@id;
  this.openedItemName = this.selectedItem4Open.@label;
  
  this.equipTaskIds(); //构造ids信息
  
  this.taskTreeService.send();
 }
 
 //处理节点关闭事件
 private function doItemClose(event:TreeEvent):void
 {
  this.isExpanded = false;
  
  var xml:XML = event.item as XML;
  
  var taskDescendantsSize:int = xml.descendants("task").length()
  
  for(var i:int = 0; i < this.taskList.length; ++i)
  {
   if(this.taskList.getItemAt(i).id == xml.@id)
   {
    for(var j:int = 0; j < taskDescendantsSize; ++j)
    {
     this.taskList.removeItemAt(i + 1);//注意,此处为i + 1
    }
    
    break;
   }
  }
  
  //从树中删除关闭的节点
  var length:int = xml.children().length();
  
  for(var i:int = 0; i < length; ++i)
  {
   delete xml.children()[0];
  }
  
  xml.appendChild(<mock/>);
  
  this.renderGanttChart();
 }
 
 
 
 private function equipTaskIds():void
 {
  //首先清空以前保存的id信息
  this.taskIds = "";
  
  for(var i:int = 0; i < this.taskList.length; ++i)
  {
   this.taskIds += this.taskList.getItemAt(i).id + "@";
  }
 }
 
 
 
 
 
 // 展开树节点的回调
 private function taskTreeServiceHandler(event:ResultEvent):void
 {
  this.isExpanded = true; //节点被展开
  
  var xml:XML = new XML(event.result); // 服务端返回的数据
  
  //首先处理已经显示的节点的信息
  for(var i:int = 0; i < xml.child("existedTask").length(); ++i)
  {
   this.taskList.getItemAt(i).plannedStartDate = new Date(xml.child("existedTask")[i].@startYear, xml.child("existedTask")[i].@startMonth, xml.child("existedTask")[i].@startDate);
   this.taskList.getItemAt(i).plannedEndDate = new Date(xml.child("existedTask")[i].@endYear, xml.child("existedTask")[i].@endMonth, xml.child("existedTask")[i].@endDate);
   this.taskList.getItemAt(i).duration = this.getDateInterval(this.taskList.getItemAt(i).plannedStartDate, this.taskList.getItemAt(i).plannedEndDate);
  }
  
  //处理节点展开的信息
  for(var i:int = 0; i < xml.child("task").length(); ++i)
  {
   this.selectedItem4Open.appendChild(xml.child("task")[i]); //附加子节点
  }
  
  //将新展开的节点插入到taskList列表中
  for(var i:int = 0; i < this.taskList.length; ++i)
  {
   if(this.taskList.getItemAt(i).id == this.openedItemId)
   {
    for(var j:int = 0; j < xml.child("task").length(); ++j)
    {
     var id:Number = Number(xml.child("task")[j].@id);
     var name:String = String(xml.child("task")[j].@label);
     var startDate:Date = new Date(xml.child("task")[j].@startYear, xml.child("task")[j].@startMonth, xml.child("task")[j].@startDate);
     var endDate:Date = new Date(xml.child("task")[j].@endYear, xml.child("task")[j].@endMonth, xml.child("task")[j].@endDate);
     var leaf:String = xml.child("task")[j].@leaf;
     var duration:Number = this.getDateInterval(startDate, endDate);
     
     var task:Task = new Task();
     task.id = id;
     task.name = name;
     task.plannedStartDate = startDate;
     task.plannedEndDate = endDate;
     task.duration = duration;
     task.leaf = leaf;
     
     this.taskList.addItemAt(task, i + j + 1);
    }
    
    break;
   }
  }
  
  this.projectTree.expandItem(this.selectedItem4Open, true); //指定展开哪个节点
  
  this.renderGanttChart();
 }

分享到:
评论

相关推荐

    EXCEL GANNT

    Excel甘特图是一种在项目管理中广泛使用的工具,它通过条形图的形式来展示项目的时间线,帮助用户清晰地理解各个任务的起始日期、结束日期以及相互之间的关系。在这个"EXCEL甘特图模版"中,我们可以利用Excel的强大...

    unigui_highcharts_Demo_delphi_delphiunigui_DEMO_storyxog_unigui_

    标题“unigui_highcharts_Demo_delphi_delphiunigui_DEMO_storyxog_unigui_”提及的是一个基于Delphi开发的Unigui应用示例,它整合了Highcharts图表库。这个Demo旨在展示如何在Delphi Unigui项目中使用Highcharts来...

    jqueryGannt

    甘特图最新版本,英文原版,整合外链js,去官网下载的需要翻下载js才可用。

    GANNT.rar_gantt_matlab甘特图_甘特图 matlab_甘特图matlab_甘特图源代码

    MATLAB画甘特图的源代码

    甘特图 div+javascript绘制

    div js javascript 甘特图 gantt gannt div js javascript 甘特图 gantt gannt

    DevExpress 甘特图Demo

    DevExpress是一款知名的软件开发工具提供商,其产品覆盖了多种平台和技术,包括Windows Forms、WPF、ASP.NET等。在本案例中,"DevExpress 甘特图Demo"是一个展示DevExpress甘特图控件功能的实例项目。...

    ext-gantt java破解版

    ext-gantt破解版,jsp+hibernate+servlet+extjsgantt已破解,开发语言java,有所需sql(本案例mysql数据库),ext-gantt文档及api,只需简单移植就可复用到你的项目中,启动此项目后,在浏览器中打开WebRoot/ext-...

    甘特图+jquery实现可右键修改数据的甘特图.rar

    甘特图是一种流行的数据可视化工具,常用于项目管理中,以直观展示任务的开始时间、结束时间以及进度。在IT领域,特别是在软件开发和项目规划中,甘特图是不可或缺的一部分。结合jQuery库,我们可以创建交互性强、...

    qt实现甘特图源码

    QT是一种流行的开源C++图形用户界面库,广泛用于开发跨平台的应用程序,包括桌面、移动和嵌入式设备。甘特图是一种图表形式,用于表示项目的时间表和任务进度,通常用于项目管理中。在QT中实现甘特图,可以为用户...

    Ext Gantt Pro 4.2.7(甘特图) + extjs6.0.0演示程序

    extjs gantt pro 4.2.7组件演示,上传的文件是eclipse的动态WEB项目,直接引入eclipse, 在WINDOWS下,打开命令行窗口,转到该项目下的WebContent目录,执行sencha app watch, 然后打开浏览器,输入localhost:1841,...

    【75B的那个资源是个空文件夹,这个不是】matlab 甘特图

    标题提到的“75B的那个资源是个空文件夹,这个不是”,可能是指一个错误或误导性的链接,而GANNT.m文件可能是正确提供甘特图功能的MATLAB脚本。 甘特图的核心在于它能清晰地显示各个任务的开始时间、结束时间以及...

    WBS_x64_x86.3.39.zip

    标签"Excel Gannt Chart 甘特图"进一步确认了这个压缩包的内容,即一个与Excel相关的甘特图插件或者模板。用户可以通过这些文件在Excel中便捷地创建和管理甘特图,以追踪项目进度。 在压缩包的子文件列表中: 1. ...

    (2021-2022年)专题资料完美版基于过程控制的计划管理.pptx

    GANNT图(甘特图)显示任务的开始和结束日期,RBS(责任分配矩阵)明确了团队成员的责任,PERT图(计划评审技术)用于估计活动的预期持续时间。 课程中,张永杰讲师还强调了识别干系人及其需求的重要性,通过角色与...

    k-gantt:基于 frappe-gantt 二次开发的一个gantt库

    k-Gantt是一款基于Frappe Gantt进行二次开发的甘特图库,主要适用于JavaScript环境。这个库旨在提供更丰富的功能和定制性,以便在Web应用程序中更好地展示项目进度、任务管理和时间线视图。Frappe Gantt是原生的...

    工程项目进度计划甘特图(visio导出).pdf

    13. Gannt Chart Software:Gannt Chart Software是指用于创建甘特图的软件,例如Visio、Microsoft Project等。这类软件可以用来创建甘特图,并且可以与其他项目管理工具集成。 14. 项目计划软件:项目计划软件是指...

    软件设计师历年试题上午.pptx

    5. Gannt图是项目管理中的重要工具,用于展示活动的顺序、并行性、起始时间和进度。描述不正确的是(D. 图表现了各个活动完成的进度),因为Gannt图通常不直接显示活动的完成进度,而是通过条形图的填充程度来表示。 ...

    react-timeline-gantt:具有虚拟渲染的React Timeline组件

    React甘特时间轴 React时间轴甘特图组件。 关于 React-timeline-gantt是一个用于显示和管理日历甘特图的组件。 它使用虚拟渲染来有效地做出React。 该组件具有以下功能: 可以处理十万条记录。...

    一个可拖拽列宽表格实例演示

    代码如下: &lt;DOCTYPE&gt; &lt;... &lt;head&gt;... } #gannt_left{ width:500px; } #left-scroll-panel{ width:520px; height:100px; overflow-y: auto; } table{ table-layout:fixed; border-collapse: colla

    WBS模板经典汇总.ppt

    在项目管理中,WBS模板还可以与其他项目管理工具结合使用,例如 Gannt 图、网络图、 Earned Value Management(EVM)等。这些工具可以相互结合,形成一个完整的项目管理系统,以便更好地规划、执行和控制项目。 WBS...

Global site tag (gtag.js) - Google Analytics