雪連,李家

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

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

　　關(guān)鍵詞：項(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á)了活動的開始時(shí)間、結(jié)束時(shí)間和持續(xù)時(shí)間［2］。目前已經(jīng)可以基于B/S模式繪制甘特圖［25］。

　　以往所見的甘特圖是一條線條圖，表示在整個(gè)期間上計(jì)劃或?qū)嵤┣闆r。這種方式不能直觀表達(dá)計(jì)劃方案與實(shí)際完成情況的對比，不便于檢查和大數(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í)遇到了上述問題，因此在工作中以提高甘特圖的互操作性和直觀對比計(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ì)劃階段，用戶可以通過選擇起止日期對整個(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系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

　?。?）將數(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ù)庫中的存儲

　　系統(tǒng)中需將每項(xiàng)任務(wù)的起止日期、計(jì)劃、實(shí)施情況記錄到數(shù)據(jù)庫中。本系統(tǒng)中以半天作為最小時(shí)間段，為節(jié)省存儲空間，沒有為每個(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ì)劃并存儲的主要代碼為：

　　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中對應(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í)對應(yīng)的任務(wù)塊圖片名稱為 “10.png”，該圖片的計(jì)劃條為灰色，實(shí)施條為淺灰色；“11”對應(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í)間段字段列顯示為與該列字段值對應(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í)自動調(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)識某個(gè)時(shí)段的任務(wù)已執(zhí)行，如圖4所示。這需要對每個(gè)任務(wù)塊超鏈的客戶端點(diǎn)擊事件給出響應(yīng)函數(shù)，以便在客戶端改動任務(wù)塊圖片的計(jì)劃條或?qū)嵤l的顏色，同時(shí)改動該任務(wù)塊對應(yīng)于計(jì)劃字段或?qū)嵤┳侄巫址械哪莻€(gè)字符的值。

　　為此，在上述代碼“為超鏈增加客戶端點(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í)施字段中對應(yīng)字符的下標(biāo)。onLinkClick為超鏈的客戶端Click事件的響應(yīng)函數(shù)，響應(yīng)函數(shù)中傳入了該列所在的行數(shù)和該列在計(jì)劃和實(shí)施字段中對應(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(indexInValueArray + 1);

　　}

　　代碼中e.htmlElement為事件中鼠標(biāo)所點(diǎn)超鏈，n為擴(kuò)展名“.png”在該超鏈的innerHTML中的位置。如果在計(jì)劃階段點(diǎn)擊“微調(diào)”按鈕修改計(jì)劃（見圖3），則w=-2，s1對應(yīng)圖片名中的第一個(gè)字符即計(jì)劃字符；如果點(diǎn)擊“執(zhí)行任務(wù)”或“結(jié)束任務(wù)”按鈕（見圖4），則w=-1,s1對應(yīng)圖片名的第二個(gè)字符即實(shí)施字符。s1 的值為跟頭鍵值，原來為“0”則變?yōu)椤?”，原來為“1”則變?yōu)椤?”。改動了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í)間段對應(yīng)的字符也要相應(yīng)地改為s1的值，臨時(shí)記錄在客戶端，點(diǎn)擊“更新”按鈕時(shí)再一起更新到數(shù)據(jù)庫中。

2結(jié)論

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

參考文獻(xiàn)

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

　?。?］ 梁海燕,趙嵩正. 基于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.

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

　?。?］ 安思,張菹,葉鑫. 基于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.