摘 要：科技計劃項目管理平臺是一個針對科技項目網絡在線申報的系統，程序設計根據當前山西省科技計劃項目管理辦法進行設計。系統支持項目申報、查重、評審、簽訂、中期檢查、結題、科技報告編寫和各維度的可視化展示等。
關鍵詞：科技計劃項目；申報；評審；管理；Vue；Elementui；Echarts
各類科技計劃項目作為落實科技政策和激發科技創新活力的重要載體，為研發過程中技術的創新和突破提供了資金、平臺等支持。提高科技計劃項目管理的效率和質量，對提升我國科研水平有著重要意義。面對新冠肺炎疫情突然爆發這樣的特殊背景，能夠通過互聯網開展項目管理工作，可以有效避免傳統管理方式下的諸多風險。
1 開發背景
Vue+Elementui+Echarts框架下的科技計劃項目管理平臺是一個互聯網平臺下的在線項目申報系統，平臺建設的主要依據是《山西省科技計劃（專項、基金等）及7個配套專項管理辦法》《山西省省級財政科技計劃（專項、基金等）項目管理專業機構管理暫行規定》等管理辦法，與山西省科研管理工作實際密切相關。系統支持線上項目申報、內容查重、征信管理、專家評審、項目立項、中期檢查、結題驗收等各環節的管理工作；可以為會議評審、網絡評審及實地考察等多種組織方式提供服務保障；可以利用歷史數據進行橫向縱向的數據對比提供各維度的可視化展示；可以實現對項目成果的跟蹤和相關數據分析管理。項目管理平臺真正實現了項目從申報到結題的全流程管理，發揮了以廳際聯席會議統一布局，依托專業機構管理項目，為戰略咨詢與綜合評審委員會決策提供支持的功能，確保項目管理工作科學高效、公開透明。
2 項目管理平臺技術簡介
2.1 Vue
Vue是一個構建用戶界面的框架，該開發框架是一個輕量級的MVVM（Model-View-View Model），其原理就是數據的雙向綁定，數據驅動加組件化的前端開發。Vue.js使用基于HTML的模板語法，通過簡單的API就能實現響應式的數據綁定和組合的視圖組件，可以將DOM綁定到Vue實例中的數據模板就是{{}}，用來進行數據綁定，顯示在頁面中，這種{{}}叫做Mustache語法。
2.2 Elementui
Elementui是一個為Vue而生的UI框架，Elementui是一個 ui 庫，它不依賴于 Vue，是現階段和 vue 配合做項目開發的一個較好的ui框架。Elementui遵循用戶習慣的語言和概念，所有的元素和結構需要保持一致，與現實生活的流程、邏輯保持一致，比如設計樣式、圖標和文本、元素的位置等。通過界面樣式和交互動效讓用戶可以清晰地感知自己的操作，設計簡潔直觀的操作流程，可以讓用戶自由地進行操作，包括撤銷、回退和終止當前操作等。
2.3 Echarts
Echarts 是一個使用 JavaScript 實現的開源可視化庫，可以流暢地運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀、交互豐富、可高度個性化定制的數據可視化圖表。ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，以及用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、旭日圖，多維數據可視化的平行坐標，還有用于BI的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
3 項目管理平臺的設計與實現
3.1 系統架構及數據流設計
項目管理平臺采用 Vue+Element+Echatrs+Jfinal+Ajax+Mysql+Active 技術，可以實現研究人員線上項目填報，管理人員線上項目審核以及專家線上評審，做到過程留痕。依托系統對項目數據的統計分析，可以為科研管理工作者下一步統籌管理提供依據。
用戶在瀏覽器端訪問該平臺，可以進行項目數據的錄入，數據提交到系統后，可以直接生成項目申報書。經過層層審核后，對符合形式審查要求的項目，管理人員可以通過線上盲選專家，組織開展專家評審。專家評審結果提交后，平臺可以自動對打分情況進行計算，按照項目管理者需要對打分結果進行統計和排名，通過了專家評審的項目，即可進入項目立項階段。對經確認無誤的擬立項項目，再次進入平臺進行任務書填報，對項目執行過程進行規劃，確定時間節點及目標任務，這一過程中平臺采集了項目相關的各項信息，為項目執行階段的中期管理提供了依據。按照項目管理相關規定，在項目結題前需要生成科技報告，最后才能進行項目結題，結題相關信息均可在平臺中填報和審核，如果項目通過驗收，即為項目完成。如果未通過驗收，項目可終止或者廢棄，這些過程均在平臺中清晰記錄。
在平臺進行項目管理的過程中，信息的錄入是采用了Jfinal框架，通過Form表單的POST方式進行項目信息的提交，通過 Active 工作流技術引擎進行工作流的管理，最后文字數據存儲到MySql數據庫中。管理者審核則是通過視圖層配合使用Vue+Element+Echatrs進行圖形界面的渲染，然后展示給用戶。
在 Vue+Element+Echatrs 環境下，通過后臺獲取JSON數據，可以傳入到前端手機App或者PC的Web界面中進行數據解析，然后展現到配置好的Ecahtrs圖表中和Element組件中。
3.2 關鍵技術的實現
3.2.1 Vue的引用和使用
（1）安裝nodejs，安裝成功后，在命令行"node -v"，查看版本信息。
（2）安裝vue鉸手架npm install -g @vue/cli，命令行鍵入Vue -V查看版本信息。在命令行鍵入"vue create vue-demo"創建項目。
3.2.4 Ajax前臺數據傳輸和獲取
（1）通過訪問后臺URL進行數據獲取。
（2）將獲取的數據進行清洗然后分別初始化到Ele?ment組件中和Echarts的OPtion參數中。
4 結語
闡述了山西省科技計劃管理平臺的總體設計和關鍵技術的實現方式。該平臺采用了 Vue +Element +Echarts 負責前段的數據展示，運用 Jfinal+Ajax+Mysql進行了后臺的數據錄入，運用 Active 進行了后臺模塊中審核工作流的實現。將后臺MySql數據轉換成JSON字符串傳遞給前臺進行解析后，即可實現圖標和頁面的展示。依托平臺使科技人員方便快捷地進行項目申報，詳細填寫項目申報內容，上傳各類支撐材料；使管理人員可以快速精準地統計出所需要數據維度和各類項目的具體信息，切實提升了項目申報整體的便捷性。平臺對項目信息的統計計算，為管理者決策過程提供了有力的基礎數據。本文提出的框架運用，可以作為目前科技計劃項目管理平臺的升級方案繼續進行完善，后續還可以新增電子簽章、管理信息匯總頁面的自定義等更多實用的功能。
參考文獻
［1］ 沈皎佶.Vue.js技術在移動應用可視化平臺網頁設計中的應用［J］.數碼世界，2020（9）：96-97.
［2］ 吳志霞，葉根梅，甘麗，等.基于Vue.js框架實現移動終端數據可視化研究與實踐［J］.通化師范學院學報，2020（6）：62-66.
［3］ 冀瀟，李楊.采用ECharts可視化技術實現的數據體系監控系統［J］. 計算機系統應用，2017，26（6）：72-76.
