《任务T日历视图方案》设计实现方法
????????前文介紹了基于《任務(wù)T日歷視圖方案》的總體設(shè)計(jì)結(jié)構(gòu)，對事務(wù)性項(xiàng)目工作的全過程管理總結(jié)了一套分析設(shè)計(jì)方法。本文重點(diǎn)介紹任務(wù)T日歷視圖的設(shè)計(jì)方法和實(shí)現(xiàn)內(nèi)容。
????????任務(wù)T日歷視圖主要包括五個(gè)元素，即相對天數(shù)元素、相對時(shí)間點(diǎn)元素、任務(wù)環(huán)節(jié)（或工作階段）元素、工作任務(wù)的管理和工作任務(wù)的查詢定位。在任務(wù)T日歷視圖中可實(shí)現(xiàn)對相對天數(shù)元素列的插入和刪除操作、工作階段的維護(hù)管理、工作任務(wù)的添加刪除編輯等維護(hù)功能。
一、結(jié)構(gòu)設(shè)計(jì)圖
????????任務(wù)T日歷視圖的元素結(jié)構(gòu)設(shè)計(jì)如下圖。
?????????下面將以這五個(gè)元素為主題，介紹任務(wù)T日歷視圖方案的設(shè)計(jì)實(shí)現(xiàn)方法。
二、相對天數(shù)元素
????????相對天數(shù)元素，是指相對于任務(wù)開始時(shí)間點(diǎn)（T）的天數(shù)。假設(shè)任務(wù)開始時(shí)間點(diǎn)（T）為2019年9月9日10時(shí)00分00秒，則T-1表示任務(wù)開始的前一天時(shí)間，即2019年9月8日10點(diǎn)至2019年9月9日9時(shí)59分，T+1則表示任務(wù)開始后一天，即2019年9月9日10點(diǎn)至2019年9月10日9點(diǎn)59分。
????????任務(wù)T日歷視圖主體形式為時(shí)間網(wǎng)格結(jié)構(gòu)，網(wǎng)格由行和列組成，相對天數(shù)被設(shè)計(jì)作為時(shí)間網(wǎng)格的縱列。時(shí)間網(wǎng)格列默認(rèn)設(shè)計(jì)包含T-14、T-13、……T-1、T+1到T+7 之間的全部相對天數(shù)，其他相對天數(shù)如果不包含任何工作任務(wù)，則不在時(shí)間網(wǎng)格中顯示。
1、相對天數(shù)元素的數(shù)據(jù)渲染規(guī)則
????????任務(wù)T日歷視圖的渲染需要后臺服務(wù)和WEB端配合完成，后臺服務(wù)對任務(wù)T日歷需要展示的所有數(shù)據(jù)提供檢索、過濾、排序等操作，將結(jié)果發(fā)送到WEB，WEB端負(fù)責(zé)對數(shù)據(jù)進(jìn)行解析和渲染。
????????對于滿足對應(yīng)的相對天數(shù)的數(shù)據(jù)，后臺服務(wù)將按照如下步驟進(jìn)行處理：
- 查詢工作項(xiàng)目的所有需要執(zhí)行的工作任務(wù)；
- 提取所有工作任務(wù)的計(jì)劃執(zhí)行時(shí)間，獲取相對天數(shù)；
- 將相對天數(shù)以升序排序；
- 將處理好的相對天數(shù)集合返回WEB端。
- WEB端渲染T日歷時(shí)間網(wǎng)格。
????????后臺服務(wù)按照以上步驟，將數(shù)據(jù)處理完畢，返回給WEB端，WEB端可直接將相對天數(shù)的數(shù)據(jù)集合作為時(shí)間網(wǎng)格以列的形式進(jìn)行渲染。
????????頁面渲染處理流程如下圖示：
????????T-14、……T-1和T+1到T+7之間的所有相對天數(shù)作為固定列，在任務(wù)T日歷視圖中任何情況下都會存在這些列。其他的相對天數(shù)列中若不包含任何工作任務(wù)，則無需展示。
2、添加相對天數(shù)
????????任務(wù)T日歷視圖中的時(shí)間網(wǎng)格中，相對天數(shù)列，并不一定包含工作任務(wù)周期的每一天。
????????工作任務(wù)的添加，需要將任務(wù)類型拖拽到任務(wù)T日歷視圖時(shí)間網(wǎng)格中。同時(shí)，因工作任務(wù)計(jì)劃時(shí)間的變動(dòng)，存在已初始化的日歷視圖時(shí)間列缺失，在日歷視圖全部完成之前設(shè)計(jì)上支持添加相對天數(shù)列，任務(wù)T日歷視圖頁面提供對相對天數(shù)的添加功能。
????????手工添加方法是，選中任意一個(gè)相對天數(shù)所在的網(wǎng)格單元，右鍵，彈出‘添加列’按鈕，點(diǎn)擊該按鈕可在該列前或后插入新列，支持跨日歷添加。添加相對天數(shù)列時(shí)，只需輸入相對天數(shù)，如果輸入的值已經(jīng)存在則不允許添加，如果不存在，則按照相對天數(shù)的順序，在相應(yīng)的位置插入新列。
????????除了手工添加列，系統(tǒng)還支持自動(dòng)添加相對天數(shù)列。當(dāng)在任務(wù)日歷視圖中修改工作任務(wù)時(shí)，若修改工作任務(wù)的計(jì)劃執(zhí)行時(shí)間，改變了相對天數(shù)的值，則該工作任務(wù)，自動(dòng)從原來的時(shí)間網(wǎng)格，移到新的時(shí)間網(wǎng)格中，如果時(shí)間網(wǎng)格中不存在該相對時(shí)間列，則自動(dòng)插入新列，并將工作任務(wù)移到對應(yīng)的時(shí)間網(wǎng)格中。已完成的任務(wù)，已過去的日歷不可添加。
3、刪除相對天數(shù)
????????系統(tǒng)支持刪除時(shí)間網(wǎng)格中的相對天數(shù)列，在相對天數(shù)所在的網(wǎng)格中右鍵彈出‘刪除本列’功能按鈕，點(diǎn)擊按鈕并確認(rèn)后整列被刪除，若該列中包含工作任務(wù)，則無法完成刪除操作。
????????刪除列的提示設(shè)計(jì)：點(diǎn)擊‘刪除本列’按鈕，若該列存在試驗(yàn)任務(wù)，則彈出提示框‘該列中包含試驗(yàn)任務(wù)，無法刪除’，禁止移除操作。若該列不存在試驗(yàn)任務(wù)，則彈出確認(rèn)框‘確認(rèn)刪除本列’，用戶在確認(rèn)框選擇‘確定’，完成刪除列操作，點(diǎn)擊‘取消’，不執(zhí)行刪除操作，并關(guān)閉提示框。
????????相對天數(shù)的管理界面結(jié)構(gòu)設(shè)計(jì)如下圖所示：
三、相對時(shí)間點(diǎn)元素
????????相對時(shí)間點(diǎn)是指針對事務(wù)性工作任務(wù)開始時(shí)間的相對時(shí)間點(diǎn)，假設(shè)開始時(shí)間為某日8點(diǎn)整，相對時(shí)間2小時(shí)，則表示該工作任務(wù)的開始時(shí)間為10點(diǎn)整。
????????在任務(wù)T日歷視圖中，時(shí)間點(diǎn)以小時(shí)為單位，每天24小時(shí)共設(shè)計(jì)10個(gè)時(shí)間點(diǎn)，分別是0h(h表示小時(shí))、1h、2h、4h、6h、8h、12h、16h、20h、24h，組成0h~1h、1h~2h等9個(gè)時(shí)間區(qū)間。（時(shí)間區(qū)間的設(shè)計(jì)根據(jù)實(shí)際工作任務(wù)配置，此處舉例說明。）當(dāng)然時(shí)間點(diǎn)在更細(xì)分節(jié)奏更快的應(yīng)用場景里，也可以采用10分鐘這種時(shí)間點(diǎn)單位。
? ? ? ? 每兩個(gè)連續(xù)的相對時(shí)間點(diǎn)和一個(gè)相對天數(shù)組成一個(gè)時(shí)間網(wǎng)格單元，表示一段固定的時(shí)間范圍。
四、工作任務(wù)環(huán)節(jié)（工作階段）元素
????????該部分元素的說明以醫(yī)療細(xì)分行業(yè)-臨床試驗(yàn)的工作內(nèi)容為例介紹。
????????業(yè)務(wù)方面，臨床試驗(yàn)業(yè)務(wù)是基于時(shí)間軸的分項(xiàng)任務(wù)流程化的工作過程。采用T日歷視圖方法可以較好詮釋其事務(wù)流程化的工作邏輯，通過設(shè)計(jì)全過程試驗(yàn)階段，如篩選階段、入住階段、正式試驗(yàn)階段、試驗(yàn)任務(wù)完成出組階段等，實(shí)現(xiàn)靈活定義試驗(yàn)階段，如篩選、首次入住、入住、給藥服藥、采樣、訪視、出組、隨訪、不良事件等。
????????試驗(yàn)階段主要包括試驗(yàn)階段名稱、開始時(shí)間、結(jié)束時(shí)間等信息，其中開始時(shí)間和結(jié)束時(shí)間包括相對天數(shù)和相對時(shí)間點(diǎn)范圍。在任務(wù)T日歷視圖中，試驗(yàn)階段設(shè)計(jì)作為任務(wù)圖例的存在，不同的試驗(yàn)階段圖例設(shè)計(jì)采用不相同的顏色表示，試驗(yàn)任務(wù)圖標(biāo)的標(biāo)識顏色同其所屬的試驗(yàn)階段圖例顏色保持一致，任務(wù)T日歷界面通過任務(wù)圖形顏色和試驗(yàn)階段圖例，能清晰展示各階段的任務(wù)分布情況。
1、工作階段圖形設(shè)計(jì)
????????試驗(yàn)工作階段以圖例的形式，展示在任務(wù)T日歷視圖中，設(shè)計(jì)以條形的圖形表示試驗(yàn)階段，試驗(yàn)工作階段名稱在圖形中居中展示。圖形的高度固定，其長度根據(jù)各試驗(yàn)階段名稱的長短展示，擺放方式則據(jù)試驗(yàn)工作階段的開始和結(jié)束時(shí)間順序排放。
2、工作階段圖例顏色設(shè)計(jì)
????????系統(tǒng)設(shè)計(jì)色值庫，預(yù)存30-50個(gè)顏色值庫，試驗(yàn)階段圖例的背景色從色值庫中獲取。
????????A. 創(chuàng)建工作任務(wù)階段時(shí)，系統(tǒng)將自動(dòng)為任務(wù)階段配置背景色，階段背景色的設(shè)置遵循兩個(gè)原則：
- 同一個(gè)任務(wù)的不同任務(wù)階段，背景色不重復(fù)。
- 背景色優(yōu)先使用色值庫中排序靠前的顏色值。
????????B. 配置色值的主要流程如下：
- 添加工作任務(wù)階段，系統(tǒng)啟動(dòng)自動(dòng)配色程序。
- 按照順序依次讀取色值庫中的色值。
- 用讀取的色值依次比對工作任務(wù)階段用色表中的色值，如果該色值在工作任務(wù)階段用色表中存在，表示其他階段已經(jīng)使用了該色值，則放棄使用該色值，繼續(xù)從色值庫中尋找其他色值進(jìn)行對比。若該色值在工作任務(wù)階段用色表中不存在，則使用該色值。
- 記錄試驗(yàn)階段用色，將選中的色值保存到試驗(yàn)工作階段表和試驗(yàn)工作階段用色表中。
????????C. 試驗(yàn)工作階段配置色值流程如下圖示：
3、工作階段數(shù)據(jù)存儲設(shè)計(jì)
? ? ? ? 存儲數(shù)據(jù)表設(shè)計(jì)有用色表、階段表、階段用色關(guān)系數(shù)據(jù)表，記錄每個(gè)試驗(yàn)的各試驗(yàn)階段背景色的使用情況。本小節(jié)涉及到三個(gè)表分別是色值表、階段表和階段用色表，下面是各表的主要字段。
????????A. 色值表主要字段有：
- 色值編號（主鍵）
- 色值碼（十六進(jìn)制顏色碼）
- 排序（色值的使用順序、創(chuàng)建任務(wù)階段、任務(wù)階段的背景色將從色值庫中，按順序優(yōu)先使用排序靠前的顏色）
????????B. 階段表主要字段有：
- 階段編號（主鍵）
- 工作任務(wù)編號（業(yè)務(wù)外鍵，關(guān)聯(lián)工作任務(wù)）
- 階段名稱（簡介說明）
- 開始時(shí)間相對天數(shù)：1、2、這種等
- 開始時(shí)間相對時(shí)間：時(shí)分，可為空則默認(rèn)是00:00
- 結(jié)束時(shí)間相對天數(shù)
- 結(jié)束時(shí)間相對時(shí)間
- 背景色碼（十六進(jìn)制顏色碼）
????????C. 階段用色表主要字段有：
- 階段用色編號（主鍵）
- 工作任務(wù)編碼：關(guān)聯(lián)工作任務(wù)
- 用色色值：十六進(jìn)制顏色碼
4、工作階段的維護(hù)
????????在任務(wù)T日歷視圖中，支持對試驗(yàn)工作階段的維護(hù)。
????????點(diǎn)擊試驗(yàn)工作階段圖例，打開試驗(yàn)工作階段數(shù)據(jù)頁面，可查看試驗(yàn)工作環(huán)節(jié)名稱、工作環(huán)節(jié)開始時(shí)間、工作環(huán)節(jié)結(jié)束時(shí)間等信息。
????????右鍵點(diǎn)擊試驗(yàn)工作階段圖例彈出操作功能列表，包含‘添加試驗(yàn)環(huán)節(jié)’、‘修改試驗(yàn)環(huán)節(jié)信息’和‘刪除試驗(yàn)環(huán)節(jié)’三個(gè)功能按鈕。點(diǎn)擊‘添加試驗(yàn)環(huán)節(jié)’打開試驗(yàn)環(huán)節(jié)添加頁面，點(diǎn)擊‘修改試驗(yàn)環(huán)節(jié)信息’打開試驗(yàn)環(huán)節(jié)修改頁面。試驗(yàn)環(huán)節(jié)的添加和修改頁面內(nèi)容一致，主要包括：試驗(yàn)環(huán)節(jié)名稱、開始時(shí)間和結(jié)束時(shí)間等信息。點(diǎn)擊‘刪除試驗(yàn)環(huán)節(jié)’，彈出確認(rèn)刪除提示框，確認(rèn)后刪除該試驗(yàn)環(huán)節(jié)，刪除試驗(yàn)環(huán)節(jié)時(shí)，該試驗(yàn)環(huán)節(jié)圖例使用的背景色色值，要從階段用色表中刪除。
????????試驗(yàn)工作階段是以時(shí)間為主線設(shè)計(jì)的，同一個(gè)試驗(yàn)的兩個(gè)試驗(yàn)工作環(huán)節(jié)不能有時(shí)間上的重疊，在修改工作環(huán)節(jié)信息時(shí)，若修改的時(shí)間與其他工作環(huán)節(jié)時(shí)間有重疊，則應(yīng)給出提示，且不允許保存。
?????????試驗(yàn)階段維護(hù)頁面設(shè)計(jì)如圖。
五、工作任務(wù)管理
????????任務(wù)T日歷視圖最核心的功能是提供工作任務(wù)執(zhí)行的定制和維護(hù)入口，每個(gè)工作任務(wù)都應(yīng)配置計(jì)劃執(zhí)行時(shí)間T，包括相對天數(shù)和相對時(shí)間。在任務(wù)T日歷視圖中，工作任務(wù)根據(jù)計(jì)劃執(zhí)行時(shí)間，分布在不同的時(shí)間網(wǎng)格單元中。
1、工作任務(wù)的分布方式
????????任務(wù)T日歷視圖頁面中，以相對天數(shù)為列，以相對時(shí)間為行，組成時(shí)間網(wǎng)格。工作任務(wù)則根據(jù)相對天數(shù)和相對時(shí)間兩個(gè)參數(shù)，展示到不同的時(shí)間網(wǎng)格中。時(shí)間網(wǎng)格支持收縮和展開操作，默認(rèn)處于收縮狀態(tài)。雙擊網(wǎng)格單元，展開該網(wǎng)格單元，同時(shí)其他網(wǎng)格單元收縮起來。
2、工作任務(wù)的添加
????????通過從工作任務(wù)類型樹中，將工作任務(wù)類型拖拽到任務(wù)T日歷視圖網(wǎng)格中，完成工作任務(wù)的添加操作。在添加工作任務(wù)時(shí)，根據(jù)工作任務(wù)的計(jì)劃執(zhí)行時(shí)間，將任務(wù)類型拖拽到相應(yīng)的時(shí)間網(wǎng)格中，系統(tǒng)自動(dòng)打開工作任務(wù)配置頁面。
? ? ? ? 工作任務(wù)配置頁面主要包括有工作任務(wù)名稱、相對天數(shù)、相對時(shí)間、時(shí)間窗值、任務(wù)類型、備注等信息。其中任務(wù)類型已固定，相對天數(shù)根據(jù)所在時(shí)間網(wǎng)格自動(dòng)設(shè)置，相對時(shí)間根據(jù)所在時(shí)間網(wǎng)格設(shè)定時(shí)間范圍。
????????在添加工作任務(wù)時(shí)，如果時(shí)間網(wǎng)格中缺少相對天數(shù)列，可先在時(shí)間網(wǎng)格添加相對天數(shù)列，再進(jìn)行工作任務(wù)添加操作。
3、工作任務(wù)的維護(hù)
????????在展開的網(wǎng)格中，雙擊工作任務(wù)，可以打開工作任務(wù)詳情。右鍵點(diǎn)擊工作任務(wù)項(xiàng)打開功能按鈕列表，包括‘修改’和‘刪除’。點(diǎn)擊‘修改’按鈕，打開工作任務(wù)編輯頁面，可修改工作任務(wù)配置信息。點(diǎn)擊‘刪除’按鈕，彈出確認(rèn)框，確認(rèn)后刪除該工作任務(wù)。
六、工作任務(wù)查詢定位
????????任務(wù)T日歷視圖，提供對工作任務(wù)的查詢定位功能，可通過任務(wù)名稱、任務(wù)類型、任務(wù)執(zhí)行人等三個(gè)維度對工作任務(wù)進(jìn)行查詢和搜索定位功能。輸入查詢條件，點(diǎn)擊‘查詢’按鈕或雙擊，將對任務(wù)T日歷試圖中的所有工作任務(wù)進(jìn)行查詢過濾，對符合條件的工作任務(wù)進(jìn)行定位，定位的范圍為時(shí)間網(wǎng)格單元，即網(wǎng)格內(nèi)如果包含符合條件的工作任務(wù)，則通過對該網(wǎng)格單元添加底色的方式，來標(biāo)識和定位符合條件的工作任務(wù)。
????????工作任務(wù)查詢定位主要包括三個(gè)查詢條件，其中工作任務(wù)名稱設(shè)計(jì)為文本輸入框，支持模糊查詢，任務(wù)類型和任務(wù)辦理人為選擇框，分別加載任務(wù)類型樹和工作人員列表。
：：：（后文介紹任務(wù)T日歷視圖方案的樣式設(shè)計(jì)方案及關(guān)鍵應(yīng)用技術(shù)介紹）
總結(jié)
以上是生活随笔為你收集整理的《任务T日历视图方案》设计实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 问题解决：System.TypeLoad
- 下一篇： Xilisoft Video Edito