雪 連,李 家

(遼寧師范大學(xué) 城市與環(huán)境學(xué)院, 遼寧 大連 116029)

基于列模板技術(shù)的雙線條甘特圖的應(yīng)用與實(shí)現(xiàn)

雪 連,李 家

(遼寧師范大學(xué) 城市與環(huán)境學(xué)院, 遼寧 大連 116029)

針對(duì)B/S模式下甘特圖交互操作性差、傳統(tǒng)的單線條甘特圖不便于對(duì)比分析項(xiàng)目的計(jì)劃和實(shí)施情況等問題，提出了利用列模板技術(shù)實(shí)現(xiàn)雙線條甘特圖的解決方案。甘特圖中包含上下兩根線條，分別代表項(xiàng)目的進(jìn)度計(jì)劃和實(shí)施情況。用戶通過簡單地點(diǎn)擊甘特圖可以對(duì)計(jì)劃進(jìn)行微調(diào)，對(duì)實(shí)施進(jìn)行記錄。使用結(jié)果表明，這種雙線條甘特圖擴(kuò)展了甘特圖的使用方式，可以直觀地對(duì)比檢查計(jì)劃和實(shí)施情況；交互操作性好，易于掌握和使用；基于通用的列模板技術(shù)，易于開發(fā)。

項(xiàng)目進(jìn)度管理;甘特圖;列模板;DevExpress ASPxGridView

0 引言

項(xiàng)目進(jìn)度控制是項(xiàng)目計(jì)劃控制的中心任務(wù)和重要內(nèi)容，它直接關(guān)系到項(xiàng)目能否按期完成，并最終影響項(xiàng)目的成功[1]。甘特圖是進(jìn)行工期計(jì)劃和控制的有效工具，它以橫坐標(biāo)表示時(shí)間，縱坐標(biāo)表示項(xiàng)目分解的各項(xiàng)工作任務(wù)， 清楚地表達(dá)了活動(dòng)的開始時(shí)間、結(jié)束時(shí)間和持續(xù)時(shí)間[2]。目前已經(jīng)可以基于B/S模式繪制甘特圖[2-5]。

以往所見的甘特圖是一條線條圖，表示在整個(gè)期間上計(jì)劃或?qū)嵤┣闆r。這種方式不能直觀表達(dá)計(jì)劃方案與實(shí)際完成情況的對(duì)比，不便于檢查和大數(shù)據(jù)挖掘。另外，受計(jì)算機(jī)軟件技術(shù)發(fā)展所限，有些以Web方式實(shí)現(xiàn)的甘特圖只能將數(shù)據(jù)顯示為圖形，不能與圖形進(jìn)行直觀的互操作，反作用于數(shù)據(jù)；有些甘特圖軟件的開發(fā)方法過于復(fù)雜，不易實(shí)現(xiàn)。

由于在使用甘特圖進(jìn)行項(xiàng)目管理系統(tǒng)開發(fā)時(shí)遇到了上述問題，因此在工作中以提高甘特圖的互操作性和直觀對(duì)比計(jì)劃和實(shí)施情況為研究目的，基于B/S模式以常用的列模板技術(shù)實(shí)現(xiàn)了甘特圖。系統(tǒng)中采用上下兩根線條表示一項(xiàng)任務(wù)的計(jì)劃和實(shí)施情況，如圖1所示。上面的計(jì)劃條如為灰色表示該時(shí)段有這項(xiàng)任務(wù)的計(jì)劃，下面的實(shí)施條如為黑色表示該時(shí)段的任務(wù)已實(shí)施。在計(jì)劃階段，用戶可以通過選擇起止日期對(duì)整個(gè)區(qū)間設(shè)定計(jì)劃，可以點(diǎn)擊某個(gè)時(shí)間段的任務(wù)塊進(jìn)行微調(diào)，取消或設(shè)定該時(shí)間段的計(jì)劃。在實(shí)施階段，用戶可以在完成某個(gè)時(shí)間段的任務(wù)后點(diǎn)擊該時(shí)間段的任務(wù)塊，使該任務(wù)塊中下面的實(shí)施條從灰變紅，表示實(shí)施了該時(shí)段的任務(wù)。系統(tǒng)擴(kuò)展了甘特圖的使用方式，提供了較好的交互操作功能和用戶體驗(yàn)，同時(shí)因采用了常用的模板技術(shù)開發(fā)而易于實(shí)現(xiàn)。

圖1 雙線條的甘特圖

1 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)的實(shí)現(xiàn)方法如下：

(1)確定計(jì)劃和實(shí)施值在數(shù)據(jù)庫中存儲(chǔ)方式。因時(shí)間段很多，不能為每個(gè)時(shí)間段建立一個(gè)字段，各時(shí)間段的計(jì)劃和實(shí)施值在數(shù)據(jù)庫要分別合并存儲(chǔ)為一個(gè)字符串；

(2)將數(shù)據(jù)庫中的表取到程序中后，自動(dòng)增加各時(shí)間段的字段，以便用戶可以對(duì)每一個(gè)時(shí)間段中的任務(wù)塊進(jìn)行交互處理；

(3)將數(shù)據(jù)表每條記錄中的計(jì)劃和實(shí)施值轉(zhuǎn)換為各時(shí)間段字段的值；

(4)將步驟(2)～(3)改造后的數(shù)據(jù)表綁定到ASPxGridView后，將各時(shí)間字段的值表現(xiàn)為任務(wù)塊圖片；

(5)為每個(gè)任務(wù)塊圖片的鼠標(biāo)點(diǎn)擊事件給出客戶端響應(yīng)函數(shù)，改變圖片的顏色。

1.1 計(jì)劃、實(shí)施數(shù)據(jù)在數(shù)據(jù)庫中的存儲(chǔ)

系統(tǒng)中需將每項(xiàng)任務(wù)的起止日期、計(jì)劃、實(shí)施情況記錄到數(shù)據(jù)庫中。本系統(tǒng)中以半天作為最小時(shí)間段，為節(jié)省存儲(chǔ)空間，沒有為每個(gè)時(shí)間段建立一個(gè)字段，而是將所有時(shí)間段的計(jì)劃值和實(shí)施值分別記錄在一個(gè)字符串字段中，用“1”或“0”表示該時(shí)間段是否有值，每個(gè)字符在串中的位置隱含了其代表的時(shí)間段。例如，圖2中，第一條記錄中，計(jì)劃字段中的第一個(gè)字符“1”表示9月6日上午有方案制定任務(wù)，實(shí)施字段中的第三個(gè)字符“1”表示9月7日上午實(shí)施了方案制定任務(wù)。

程序中制定計(jì)劃并存儲(chǔ)的主要代碼為：

string plan = "", real = "";

for (DateTime date1 = (DateTime)newValues["起始日期"]; date1 <= (DateTime)newValues["截止日期"]; date1 = date1.AddDays(1))

{

plan += "11";

real += "00";

}

row["計(jì)劃"] = plan;

row["實(shí)施"] = real;

代碼中newValues["起始日期"]和newValues["截止日期"]為用戶在為某項(xiàng)任務(wù)制定計(jì)劃界面上輸入的起止日期，row為在數(shù)據(jù)表中為該任務(wù)新增的一條記錄，制定計(jì)劃時(shí)每天的計(jì)劃值為“11”，實(shí)施值為“00”，將其累加后賦給row中對(duì)應(yīng)的字段值，更新到數(shù)據(jù)庫中。

1.2 增加時(shí)間段字段

圖2中的數(shù)據(jù)的前兩行在系統(tǒng)中的顯示結(jié)果如圖1所示。圖1中各時(shí)間段字段不是數(shù)據(jù)庫中已有字段，而是將數(shù)據(jù)取到程序中后，根據(jù)起止日期為數(shù)據(jù)表中增加的字段。主要代碼如下：

TimeSpan ts = date2 - date1;

string[] fields = new string[(ts.Days + 1) * 2];

for (int i = 0; i < fields.Length; date1 = date1.AddHours(12), i++)

{

string s = date1.Year.ToString().Substring(2) + "-" + date1.Month + "-" + date1.Day;

if (date1.Hour < 12)

s += "上午";

else

s += "下午";

fields[i] = s;

table.Columns.Add(s);

}

代碼中date1、date2為要顯示的時(shí)間段的起止日期，fields為根據(jù)起止日期建立的時(shí)間字段名數(shù)組，循環(huán)中根據(jù)起止日期生成每個(gè)時(shí)間段字段的名稱，最后增加到數(shù)據(jù)表table的列中。

1.3 確定記錄中時(shí)間段字段的值

時(shí)間段字段中的值是在程序中根據(jù)計(jì)劃、實(shí)施字段值生成的，代碼為：

row[s1] = "" + row["計(jì)劃"].ToString()[k] + row["實(shí)施"].ToString()[k];

代碼中row為某一條任務(wù)記錄，s1為某一個(gè)時(shí)間段的字段名，row["計(jì)劃"].ToString()[k]為計(jì)劃字段中從起始日期開始第k個(gè)半天的值，row["實(shí)施"].ToString()[k]為實(shí)施字段中第k個(gè)半天的值，row[s1]為計(jì)算后得到的s1字段的值，它可能的值為：“00”、“01”、“10”、“11”。以其中兩例說明：“10”值采用列模板技術(shù)顯示在界面中時(shí)對(duì)應(yīng)的任務(wù)塊圖片名稱為 “10.png”，該圖片的計(jì)劃條為灰色，實(shí)施條為淺灰色；“11”對(duì)應(yīng)的任務(wù)塊圖片名稱為 “11.png”，該圖片的計(jì)劃條灰色，實(shí)施條為黑色。

1.4 利用列模板將時(shí)間字段值表現(xiàn)為任務(wù)塊圖片

ASP.NET為了更精確地控制列的內(nèi)容和布局，在DataGrid中支持綁定列和模板列的定義，該模板列可創(chuàng)建HTML文本和服務(wù)器控件的組合，以便為列設(shè)計(jì)自定義布局[6]。這種列模板技術(shù)易于掌握，為表現(xiàn)復(fù)雜的頁面提供了方便的工具。本系統(tǒng)利用DevExpress 的ASP.NET 控件庫ASPxGridView中的列模板表現(xiàn)甘特圖。

程序中取到數(shù)據(jù)表增加時(shí)間段字段并為每條記錄的時(shí)間段字段賦值后，綁定到ASPxGridView中，利用ASPxGridView的列模板將表中每行中每個(gè)時(shí)間段字段列顯示為與該列字段值對(duì)應(yīng)的任務(wù)塊圖片。代碼為：

(ASPxGridView1.Columns[i]as GridViewDataColumn). DataItemTemplate = new scheduleItemTemplateG( ASPxGridView1.Columns[i].FieldName);

代碼中Columns[i]為某一時(shí)間段列，DataItemTemplate為該列的數(shù)據(jù)模板屬性，scheduleItemTemplateG為自定義的模板類，在該類中為每行每列的值顯示相應(yīng)的圖片。主要代碼如下：

public class scheduleItemTemplateG : System.Web.UI.Page, ITemplate

{

string field;

public scheduleItemTemplateG(string field)

{

this.field = field;

}

public void InstantiateIn(Control container)

{

…

GridViewDataItemTemplateContainer gridContainer = (GridViewDataItem TemplateContainer)container;

ASPxHyperLink link = new ASPxHyperLink();

link.ImageUrl = imgPath + gridContainer.Text + ".png";

…//為超鏈增加客戶端點(diǎn)擊事件處理函數(shù)

gridContainer.Controls.Add(link);

}

}

代碼中在該類的構(gòu)造函數(shù)中傳入了該列時(shí)間字段的名稱，記錄在field成員中。InstantiateIn函數(shù)在該行該列顯示時(shí)自動(dòng)調(diào)用，傳來了該行該列中的控件容器。函數(shù)中imgPath為圖片所在路徑，gridContainer.Text為控件中顯示的字符串，其值為該列的計(jì)劃字符+實(shí)施字符，imgPath + gridContainer.Text + ".png"為包含路徑在內(nèi)的圖片名稱，將其賦給新建超鏈link的ImageUrl屬性，以便在超鏈中顯示該圖片。最后將超鏈加入到該控件容器中，顯示為圖片。

1.5 處理任務(wù)塊圖片的鼠標(biāo)點(diǎn)擊事件

在計(jì)劃制定時(shí)可以進(jìn)行微調(diào)，如圖3所示，用戶點(diǎn)擊“微調(diào)”按鈕，然后點(diǎn)擊某個(gè)時(shí)段的任務(wù)塊，就能取消或設(shè)定該時(shí)段的計(jì)劃。類似地，點(diǎn)擊“執(zhí)行任務(wù)”按鈕可以在實(shí)施時(shí)標(biāo)識(shí)某個(gè)時(shí)段的任務(wù)已執(zhí)行，如圖4所示。這需要對(duì)每個(gè)任務(wù)塊超鏈的客戶端點(diǎn)擊事件給出響應(yīng)函數(shù)，以便在客戶端改動(dòng)任務(wù)塊圖片的計(jì)劃條或?qū)嵤l的顏色，同時(shí)改動(dòng)該任務(wù)塊對(duì)應(yīng)于計(jì)劃字段或?qū)嵤┳侄巫址械哪莻€(gè)字符的值。

圖3 計(jì)劃制定界面

圖4 計(jì)劃實(shí)施界面

為此，在上述代碼“為超鏈增加客戶端點(diǎn)擊事件處理函數(shù)”注釋處增加以下代碼：

DateTime startDate = (DateTime)gridContainer.Grid.GetRowValues(gridContainer. VisibleIndex, "起始日期");

DateTime date = Convert.ToDateTime("20" + field.Replace("上午?", "").Replace("下午", ""));

int indexInValueArray = (date - startDate).Days*2 + (field.IndexOf("上午") > 0 ? 0 : 1);

link.ClientSideEvents.Click = "function(s,e){onLinkClick(e," + gridContainer. VisibleIndex + "," + indexInValueArray + ")}";

代碼中startDate為表中該行任務(wù)的起始日期，date為該列字段名(某天的上午或下午)代表的日期，indexInValueArray為該時(shí)間字段列在時(shí)間字段數(shù)組中的序數(shù)，也就是該列在計(jì)劃和實(shí)施字段中對(duì)應(yīng)字符的下標(biāo)。onLinkClick為超鏈的客戶端Click事件的響應(yīng)函數(shù)，響應(yīng)函數(shù)中傳入了該列所在的行數(shù)和該列在計(jì)劃和實(shí)施字段中對(duì)應(yīng)字符的下標(biāo)。JavaScript中onLinkClick函數(shù)的主要代碼如下：

function onLinkClick(e, rowIndex, indexInValueArray)

{

if (document.getElementById("rowIndex_button").value.indexOf("微調(diào)") > 0)

var w = -2;

else

var w = -1;

var n = e.htmlElement.innerHTML.indexOf(".png");

var s = e.htmlElement.innerHTML.substring(0, n + w) + s1 + e.htmlElement.innerHTML. substring(n + w + 1);

e.htmlElement.innerHTML = s;

…

var value = document.getElementById("valueArray").value;

document.getElementById("valueArray").value = value.substring(0, indexInValueArray) + s1 + value.substring(indexInValu eArray + 1);

}

代碼中e.htmlElement為事件中鼠標(biāo)所點(diǎn)超鏈，n為擴(kuò)展名“.png”在該超鏈的innerHTML中的位置。如果在計(jì)劃階段點(diǎn)擊“微調(diào)”按鈕修改計(jì)劃(見圖3)，則w=-2，s1對(duì)應(yīng)圖片名中的第一個(gè)字符即計(jì)劃字符；如果點(diǎn)擊“執(zhí)行任務(wù)”或“結(jié)束任務(wù)”按鈕(見圖4)，則w=-1,s1對(duì)應(yīng)圖片名的第二個(gè)字符即實(shí)施字符。s1 的值為跟頭鍵值，原來為“0”則變?yōu)椤?”，原來為“1”則變?yōu)椤?”。改動(dòng)了e.htmlElement.innerHTML中圖片名后，相應(yīng)的任務(wù)塊中的計(jì)劃條或?qū)嵤l也就改變了顏色。

document.getElementById("valueArray").value為鼠標(biāo)所在行中計(jì)劃列或?qū)嵤┝械淖址担?dāng)用戶點(diǎn)擊“微調(diào)”、“執(zhí)行任務(wù)”或“結(jié)束任務(wù)”按鈕時(shí)取得，保存在客戶端hidden標(biāo)簽valueArray中。在鼠標(biāo)點(diǎn)擊事件中，該值中鼠標(biāo)所點(diǎn)時(shí)間段對(duì)應(yīng)的字符也要相應(yīng)地改為s1的值，臨時(shí)記錄在客戶端，點(diǎn)擊“更新”按鈕時(shí)再一起更新到數(shù)據(jù)庫中。

2 結(jié)論

本系統(tǒng)基于DevExpress ASPxGridView控件的列模板技術(shù)實(shí)現(xiàn)，已用于房地產(chǎn)評(píng)估項(xiàng)目管理系統(tǒng)中。使用結(jié)果表明，這種雙線條甘特圖可以直觀地對(duì)比檢查計(jì)劃和實(shí)施情況，打破了傳統(tǒng)的單線條甘特圖的使用方式，表現(xiàn)力更豐富；通過簡單點(diǎn)擊就可以對(duì)每個(gè)任務(wù)塊進(jìn)行交互操作，克服了以往B/S模式下的甘特圖只能看不能交互操作的弊?。桓鶕?jù)本文給出的實(shí)現(xiàn)方法，可以很容易地采用ASP.NET 中的Gridview中的模板技術(shù)實(shí)現(xiàn)，或利用其他開發(fā)平臺(tái)中的相關(guān)技術(shù)實(shí)現(xiàn)。

[1] 肖偉,趙嵩正. 基于OLE技術(shù)的項(xiàng)目甘特圖設(shè)計(jì)與實(shí)現(xiàn)[J]. 微型電腦應(yīng)用, 2003,19(10):20-22.

[2] 梁海燕,趙嵩正. 基于JSP技術(shù)工程項(xiàng)目甘特圖的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)應(yīng)用與軟件, 2006,23(8):43-44,59.

[3] 夏臻,陳建勛. 基于SVG技術(shù)的甘特圖繪制組件設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)工程與設(shè)計(jì), 2010,31(10):2354-2357.

[4] 王俊,楊濤. 基于JSP技術(shù)的項(xiàng)目甘特圖設(shè)計(jì)與實(shí)現(xiàn)[J]. 現(xiàn)代制造工程,2008(2):80-83.

[5] 安思,張菹,葉鑫. 基于AMT算法的時(shí)間序列數(shù)據(jù)在甘特圖中的應(yīng)用[J]. 計(jì)算機(jī)與數(shù)字工程, 2011,39(6):146-149.

[6] 李林靜. 基于DataGrid模板列的分析及應(yīng)用[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2009,18(3):57-61.

Application and implementation of Gantt chart with two bar based on template column technology

Xue Lian, LiJia

(School of Urban and Environmental Sciences, Liaoning Normal University, Dalian 116029 ,China)

This paper put forward a new application of Gantt chart for poor interaction and not easy to contrast plan and implementation with traditional Gantt chart in B/S mode. The Gantt chart is displayed as two bars, the top expresses plan and the bottom expresses implementation. User can adjust plan and record implementation by clicking it. The results of application of the new Gantt chart show that it can contrast the plan and implementation intuitively and can be operated easily. It is based on general technology of column template, so it can be implemented easily.

project schedule management; Gantt chart; column template; DevExpress ASPxGridView

TP393.0

A

1674-7720(2016)04-0091-04

雪連，李家．基于列模板技術(shù)的雙線條甘特圖的應(yīng)用與實(shí)現(xiàn)[J] .微型機(jī)與應(yīng)用，2016，35(4)：91-94.

2015-11-20)

雪連(1990-)，通訊作者，女，碩士研究生，主要研究方向：地理信息系統(tǒng)集成開發(fā)。E-mail：1076631594@qq.com。

李家(1957-)，男，本科，副教授，主要研究方向：地理信息系統(tǒng)集成開發(fā)。