摘 要：科技计划项目管理平台是一个针对科技项目网络在线申报的系统，程序设计根据当前山西省科技计划项目管理办法进行设计。系统支持项目申报、查重、评审、签订、中期检查、结题、科技报告编写和各维度的可视化展示等。
关键词：科技计划项目；申报；评审；管理；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.
