欢迎添加微信互相交流学习哦！
 
 
项目源码：https://gitee.com/oklongmm/biye
 
目  录
 摘要    1
 关键词    1
 Abstract    1
 Key words    1
 1 引言    2
 1.1 研究背景及意义    2
 1.2 OA系统的发展    2
 1.3 研究内容    3
 2系统分析与建模    3
 2.1系统总体目标    3
 2.2 需求分析    3
 2.3 主要技术介绍    4
 2.3.1 Struts2    4
 2.3.2 Hibernate    4
 2.3.3 Spring    4
 2.3.4 Activiti5    5
 3系统设计    5
 3.1 解决方案设计    5
 3.2 功能权限流程设计    5
 3.3 数据库设计    8
 3.3.1 概念结构设计    8
 3.3.2 物理结构设计    9
 4系统实现    10
 4.1 开发环境    13
 4.2 主要业务功能实现    13
 4.2.1 个人办公模块    14
 4.2.2 系统管理模块    14
 4.2.3 网上交流模块    15
 4.2.4 审批流转模块    17
 4.3 基于角色的权限设计与实现    18
 5系统测试    19
 5.1 系统测试的原则    19
 5.2 系统测试用例    19
 6总结    21
 致谢    22
 参考文献    22
 
 
 基于B/S架构的OA系统的设计与实现
 软件工程专业    xxx
 指导教师    xxx
 摘要：一个企业实现办公自动化的程度是衡量其实现现代化管理的标准。办公自动化(OA： OFFICE AUTOMATION)就是采用Internet技术，基于工作流的概念，使企业内部人员方便快捷地共享信息，高效协同工作。本文采用结构化与原型法结合的系统开发方法。整个系统分为用户登录验证模块、员工信息管理模块、日程管理模块、论坛模块、审批流转模块等。该系统的应用改变了过去复杂、低效的手工办公方式，实现迅速、全方位的信息采集、信息处理，为企业的管理和决策提供科学的依据。
 关键词：办公自动化 SSH Activiti5
 Design and Implementation of OA System Based on B/S
 Student majoring in Software Engineering    xxxxx
 Tutor    xxxxx
 Abstract：The extent of an enterprise's realization of office automation is the standard of its realization of the modernization management. AUTOMATION OA： (OFFICE) is the use of Internet technology, based on the concept of workflow, so that the enterprise internal personnel to quickly and easily share information, and efficiently work together. In this paper, the structure and the prototype method of the system development method. The whole system is divided into user login verification module, employee information management module, schedule management module, forum module, approval and transfer module, etc.. The application of this system has changed the complicated and inefficient manual office methods, and realized the information collection and information processing, which can provide scientific basis for the management and decision of enterprise.
 Key words：Office automation; SSH;Activiti5
 
1 引言
 1.1 研究背景及意义
 OA系统，它利用先进计算机网络的技术，使人的各种办公业务活动逐步由各种设备、各种人、机信息系统来协助完成，达到充分利用信息，从而提高工作效率、工作质量。信息自动化由70年代末80年代初在我国提出，到现在已有近二十年的发展历史。信息自动化技术的发展速度不断提高，办公自动化新产品越来越多，办公自动化有越来越多的新含义。
 办公软件给办公职员带来的方便是毋庸置疑的，现在的办公软件已经不仅仅减轻员工的工作量，更重要的是将员工从繁琐的事务性工作中解放出来，把重心放到最重要的事情上去，提高整体员工的工作效率，提高企业的效率，增强企业实力。在这种软件的协同下，企业的组织结构更简化，各部门之间的信息交流更方便、快捷、准确，企业的战略决策可以更好更快的跟进。从这些意义上讲，在市场竞争越来越激烈的今天，办公自动化己经不再是一种手段、一种工具，而成为决定企业生存发展的命脉。
 办公自动化是信息社会的一种新型办公方式，它将现代化办公和计算机网络功能结合。随着信息技术的发展，办公自动化在行政企事业单位的管理、经营活动中发挥着日益重要的作用。通过网络，组织机构内部的员工可跨越时间、地点协同工作。通过办公自动化系统所实施的交换式网络应用，使信息的传递更加快捷和方便，从而极大地扩展了管理手段，实现了运营的高效。
 1.2 OA系统的发展
 第一代OA：数据处理自动化阶段。自80年代中期开始，伴随传统MIS（管理信息系统）的兴起与发展，OA进入以数据处理自动化为标志的第一代OA阶段。它的最大特点是应用基于文件系统和关系型数据库系统,以结构化数据为存储和处理对象,强调对数据的计算和统计能力。
 第二代OA：C/S(Client/Server)架构下的工作流自动化阶段。伴随企业内部局域网的兴起和发展，第二代OA开始关注并实施企业不同部门间工作流程的自动化。不同部门及各员工间的协作大大加强，从而使企业办公的效率得到较大的提高。因此这是真正意义上"办公自动化"的开始。
 第三代OA：无障碍工作流自动化阶段。90年代中期开始，随着互联网（Internet）的兴起与发展，办公自动化管理模式获得极大的突破。以Internet为基础，第三代OA实现了移动办公，企业资源不再受到通讯技术的限制。然而，由于受到企业传统的文化环境、管理模式和业务流程的束缚，协同工作的模式难以建立，工作流程自动化的效益也难以全部实现。
 第四代OA：协同工作型办公自动化（KM1代）。90年代末期开始，随着协同管理思想（Collaboration）的兴起，旨在实现项目团队协同、部门之间协同、业务流程与办公流程协同、跨越时空协同的第5代协同工作型OA开始兴起。第四代OA的核心是KM（知识管理），实现方式是Workflow（办公流程自动化）及KM（知识管理）相结合的信息系统。
 第五代OA：协同发展型办公自动化（KM2代）。第五代OA已经超越了传统办公的狭义范畴，它是一种领先的企业管理思想。在实现方式上，它仍然以工作流程自动化Workflow（办公流程自动化）及KM（知识管理）为核心。从两者的关系来看，工作流程自动化是实现协同的重要手段。而KM仍然是OA的核心。但与第4代OA中的KM（KM1代）相比较，KM2代的涵义发生了重大的变化。KM2代的优势在于，其注重知识的收集、积累与继承，最终目标是要实现企业及员工的协同发展，而不是关注办公事务本身与企业本身的短期利益。
 1.3 研究内容
 本系统采用ssh，activiti5等技术，完成了OA系统的设计。主要实现了系统管理、个人办公、网上交流、审批流转等功能。系统管理主要分为部门管理、用户管理、角色管理等功能；个人办公主要实现了日程管理等功能；网上交流主要实现了论坛、邮件等功能；审批流转主要实现了用户请假等功能。本系统经过多次开发、修改及测试后，功能基本满足企业的正常使用。
 2系统分析与建模
 2.1系统总体目标
 在当前很多企业中，存在下列情况：有的工作流程不清晰、不建全；员工、部门之间沟通与协作效率较低；业务动态进展监控难；审批周期长，遇领导出差或事务繁忙审批效率低；缺少多层次沟通平台，通知、公告、领导随机交办的临时事件等信息，传达不顺畅；多项目同时运作，跨部门、跨地域协调成本高，集中管控难度大等等其他实际工作中存在的问题。
 利用OA系统实现协同办公，可以在任何地点、任何时间、以任何方式协同处理任何人的事件，领导出差在外、采购人员外出办业务、人力专员参加招聘会等情况，虽然本人不在办公室，均可随时、随地登录协同平台，处理公务，如：领导签字审批、查看通知、发送邮件，全体人员共享一个办公平台，缩短办事时间、大大提高工作效率。
 2.2 需求分析
 为适应企业的协同办公，增强领导、员工之间的交流，方便员工使用，充分发挥办公系统的优越性，本系统实现了日程管理，员工管理，论坛管理，审批管理等模块。本系统主要有2种用户角色，管理员和普通用户。
 管理员具有系统管理，在线用户管理，论坛后台管理等功能。用例图如图1所示。
 
 
 
图1 管理员用例图
 
 用户具有基本的查看公司基本信息功能，如公司员工，部门等，可以有自己的日程功能，记录基本的日程，可以在论坛发表自己的主题，讨论工作上的技术难题，可以发送邮件，请假等。用例图如图2所示。
  
 图2 用户用例图
 2.3 主要技术介绍
 本系统主要采用了struts2，hibernate4，spring4来搭建开发框架，使用c3p0连接池，log4j日志记录工具，activiti5等技术。表现层上使用了fullcalendar来做日程管理模块，用treeview插件进行权限的树状显示，ajax局部刷新，js验证用户输入，确保客户端数据库的合理，并且使用bootstrap进行页面的响应式设计。
 2.3.1 Struts2
  Struts2是一个具有很好实用价值的Web MVC框架，它减少了直接运用MVC模式来开发Web应用的周期。重要的是它是一个开源框架，方便开发者深入研究了解其机制，越来越广泛的接受和应用。而且它提供一个好的控制器和一套定制的标签库Taglib，着力在控制器和视图上的应用，完美的体现了MVC设计思想。提供集中统一的权限控制、国际化提示和消息、输入校验和日志记录等技术支持。另外，它对其他技术和框架具有良好的融合性。如能与EJB、JDBC和Hibernate等数据库访问技术相结合，利用集成技术减少数据库的工作量。
 2.3.2 Hibernate
 Hibernate是轻量级Java EE应用的持久层解决方案，是流行的ORM框架，它对JDBC进行了非常轻量级的对象封装，使得Java程序员可以用面向对象的方式来操纵数据库。Hibernate不仅管理Java类到数据库表的映射，还提供数据查询和获取数据的操作，可以减少人工使用SQL和JDBC处理数据的时间。
 Hibernate实际上是一个提供数据库服务的中间件。Hibernate的持久化解决方案将用户从繁琐的JDBC访问中解脱出来，底层数据库连接获取，数据访问的实现、事务控制都无须用户关心，这种体系结构，将应用层从底层的JDBC／JTA API中抽象出来。
 2.3.3 Spring
 Spring是从实际开发中抽取出来的开源框架，为企业的开发提供一个轻量级的解决方案。该解决方案包括：基于IOC(控制反转)的核心机制，以及AOP(面向切面编程)的思想，能与多种持久层技术的整合，是优秀的Web MVC框架等。Spring致力于Java EE应用各层的解决方案而不是仅仅专注于某一层的方案，它贯穿表现层、业务层、持久层，降低各层组件的耦合度，实现软件各层的解耦。
 2.3.4 Activiti5
 Activiti项目是一项新的基于Apache许可的开源BPM平台，从基础开始构建，旨在提供支持新的BPMN 2.0标准，包括支持对象管理组（OMG），面对新技术的机遇，诸如互操作性和云架构，提供技术实现。
 Activiti 流程引擎重点关注在系统开发的易用性和轻量性上。每一项 BPM 业务功能 Activiti 流程引擎都以服务的形式提供给开发人员。通过使用这些服务，开发人员能够构建出功能丰富、轻便且高效的 BPM 应用程序。
 3系统设计
 3.1 解决方案设计
 本系统采用Java EE的三层架构设计，分为表示层，业务逻辑层，数据访问层。表示层包括jsp，html，servlet，jquery，bootstrap等；业务逻辑层包括spring，service，pojo等；数据访问层包括jdbc，hibernate，mybatis等。SSH的系统架构图如图3所示。
  
 图3 SSH架构图
 
3.2功能权限流程设计
 由于系统是具有多种角色身份的用户使用，所以必须对用户身份进行验证。拥有不同角色身份的用户可以看见不同的视图，使用不同的功能。在整个系统中，用户登录系统首先进行身份（普通用户和管理员）的验证，当身份验证成功后，分别进入不同的界面进行不同的操作，具体的流程图如图4所示。
  
 图4登录验证流程图
 
在管理员进入系统后，可以执行系统的所有功能，拥有最高的权限，具体的流程图如图5所示。
  
 图5 管理员权限流程图
 
在普通用户进入系统时，会根据对应的角色查询所拥有的具体功能，最普通的用户功能如流程图6所示。
  
 图6 用户权限流程图
 
3.3 数据库设计
 3.3.1 概念结构设计
 E-R方法是“实体-联系方法”（Entity-Relationship Approach）的简称。它是描述现实世界概念结构模型的有效方法。是表示概念模型的一种方式，用矩形表示实体型，矩形框写明实体名；用椭圆表示实体的属性，并用无向边将其与相应的实体型连接起来；用菱形表示实体型之间的联系，在菱形框内写明联系名，并用无向边分别与有关实体型连接起来，同时在无向边旁标上联系的类型（1：1,1：n或m：n）。系统的E-R图，如图7所示。
 

  
 
图7系统E-R图
 3.3.2 物理结构设计
 合理的数据库结构设计可以提高数据储存效率，保证数据的完整性和一致性。设计数据库系统时应该首先充分了解用户各个方面的需求，包括现有的以及将来可能增加的需求。
 部门表：用于系统保存部门基本信息。表结构如表1所示。
 表1 部门表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    部门主键
 name    varchar    50                部门名称
 note    varchar    50                部门简介
 managerid    bigint    20                部门经理id
 
员工表：用于系统保存员工基本信息。表结构如表2所示。
 表2员工表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 loginname    varchar    50                登录名
 password    varchar    50                密码
 realname    bigint    20                真实姓名
 gender    varchar    50                性别
 phonenumber    varchar    50                电话号码
 email    varchar    50                邮箱
 age    int    11                年龄
 imageaddress    varchar    50                头像地址
 education    varchar    50                学历
 note    varchar    200                备注
 departmentid    bigint    20                部门id
 
角色表：用于系统保存角色基本信息。表结构如表3所示。
 表3 角色表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 name    varchar    50                名称
 note    varchar    100                简介
 
员工-角色表：用于系统保存员工-角色对应信息。表结构如表4所示。
 表4 员工-角色表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 userid    bigint    20    √    √        员工外键
 roleid    bigint    20    √    √        角色外键
 
日程表：用于系统保存日程基本信息。表结构如表5所示。
 

 表5日程表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 userid    bigint    20                用户id
 title    varchar    50                内容
 start    varchar    50                开始时间
 end    varchar    50                结束时间
 allday    int    11                全天
 color    varchar    50                背景颜色
 
权限表：用于系统保存权限基本信息。表结构如表6所示。
 表6权限表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 url    varchar    100                访问地址
 name    varchar    50                名称
 icon    varchar    50                图标
 parentid    bigint    50                父权限id
 
角色-权限表：用于系统保存角色-权限对应信息。表结构如表7所示。
 表7角色-权限表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 roleid    bigint    20    √    √        角色id
 privilegeid    bigint    20    √    √        权限id
 
论坛表：用于系统保存论坛基本信息。表结构如表8所示。
 表8 论坛表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 name    varchar    50                名称
 note    varchar    200                内容
 imagename    varchar    50                图片地址
 position    int    11                位置
 topiccount    int    11                主题数量
 articlecount    int    11                文章数量
 lasttopicid    bigint    20                最后发表主题id
 
主题表：用于系统保存论坛主题基本信息。表结构如表9所示。
 

 表9 主题表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 title    varchar    50                标题
 content    longtext                    内容
 faceicon    varchar    50                头像
 posttime    datetime                    发表时间
 ipddr    varchar    50                ip地址
 type    int    11                主题类型
 replycount    int    11                回复数量
 lastupdatetime    datetime                    最后更新时间
 authorid    bigint    20                用户id
 forumid    bigint    20                版块id
 lastreplyid    bigint    20                最后回复id
 
回复表：用于系统保存主题回复基本信息。表结构如表10所示。
 表10 回复表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 title    varchar    50                标题
 content    longtext                    内容
 faceicon    varchar    50                头像
 posttime    datetime                    回复时间
 ipddr    varchar    50                ip地址
 authorid    bigint    20                用户id
 topicid    bigint    20                主题id
 
邮件表：用于系统保存邮件基本信息。表结构如表11所示。
 表11邮件表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 username    varchar    50                发件人用户名
 password    varchar    50                发件人密码
 server    varchar    50                邮件服务器
 mailfrom    varchar    50                发件邮箱
 mailto    varchar    50                收件邮箱
 subject    varchar    50                主题
 content    content    50                内容
 date    datetime                    发送时间
 userid    bigint    20                用户id
                         
 

 请假表：用于系统保存请假单基本信息。表结构如表12所示。
 表12 请假表
 列名    数据类型    长度    主键？    非空？    自增？    注释
 id    bigint    20    √    √    √    主键
 days    int    11                请假天数
 content    varchar    200                请假内容
 leavedate    datetime                    离开时间
 note    varchar    200                备注
 state    int    11                请假审批状态
 userid    bigint    20                用户id
 4系统实现
 4.1 开发环境
 操作系统：Windows 7
 网站服务器：Tomcat7.x 
 数据库管理系统：MySQL5.x 
 开发工具：jdk7.x  myEclipse
 4.2 主要业务功能实现
 用户登录时，密码会进行md5加密，在数据库中验证，用户输入的验证码提交到后台，会与存储在session中的验证码进行比较，验证成功后则登录成功。登录界面如图8所示。
  
 图8 登录页面图
 
baseDao的公共代码抽取项目中会用到很多实体，其中会涉及到很多的增删改查，可以通过反射技术将公共代码提取出来，核心代码如下：  
  protected Class<T> clazz; 
  public BaseDaoImpl() {        
      ParameterizedType pt = 
      (ParameterizedType)this.getClass().getGenericSuperclass();
  this.clazz = (Class) pt.getActualTypeArguments()[0];
  }
 4.2.1 个人办公模块
 本模块主要是日程管理功能，使用jquery的FullCalendar插件实现，通过查看FullCalendar的官方文档，大体理解开发步骤。首先导入需要的FullCalendar的js，css文件，jquery.js文件。在fullCalendar中方法中进行日历的初始化及相应的算法操作。header：初始化日历头部信息，events：执行查询,dayClick：执行新建,eventClick：执行修改,eventDrop：执行拖动,eventResize：执行缩放。效果如图9所示。
  
 图9日程管理图
 4.2.2 系统管理模块
 本模块包含基本的部门管理，管理员可以进行增删改查操作，通过系统的权限拦截，普通用户只有查看的权限。用户管理中，通过ajax技术检验用户名是否可用，通过js代码对所添加的各项信息进行正则验证，只有全部通过后才能向服务器提交数据，头像上传功能，使用apache commons-io的FileUtils.copyFile方法。用户列表显示界面，通过struts的迭代标签进行显示，效果如图10所示。
  
 图10 用户列表图
 
岗位管理中，管理员有个设置权限功能，可以给用户分配相应的权限，受保护的权限采用jquery的treeview插件进行树形显示。效果如图11所示。
  
 图11权限菜单图
 
具体细节：选中一个权限时,应该选中他的所有直系上级权限，选中他的所有直系下级；取消选择一个权限时，应该取消选择他的所有直系下级；如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并向上做这个操作；全选/取消全选；默认选中当前岗位已有的权限。
 权限选择时的判断代码如下：
 $("[name=privilegeIds]").click(function(){
         $(this).siblings("ul").find("input").prop("checked",this.checked);        
         if (this.checked) {
         $(this).parents("li").children("input").prop("checked",true);
         }else {
             if ($(this).parent().siblings("li").children("input：checked")
           .size() == 0) {            
        $(this).parent().parent().siblings("input").prop("checked", false);
        var start = $(this).parent().parent();
        if (start.parent().siblings("li").children("input：checked").size() == 0) {    
         start.parent().parent().siblings("input").prop("checked", false);
                 }
             }
         }
     });
 4.2.3 网上交流模块
 本模块主要实现了论坛功能和邮件功能如下：
 （1）论坛功能，管理员可以实现版块的上下移动，实现思路：每个Forum的position都要有值，取本条数据的id值;显示数据时按position排序（升序）;上下移动就是交换position的值，然后在重新排序。
 由于主题都有引用，删除时不直接删除回复，而是做一个已删除的标记，显示时还有此楼，不过把内容显示为“此帖已被管理员删除”。
 楼层显示策略：在显示回复列表时实时的计算出楼层。方式为：
 ${(page.currentPage-1)*page.size+status.count}楼,根据楼层数值进行楼主，沙发，板凳，地板的显示主题排序策略：根据置顶帖，精华帖，普通帖和最后回复时间进行排序，对应hql语句为：from Topic t where t.forum=? order by (case t.type when 2 then 2 else 0 end) desc,t.lastUpdateTime desc。
 用户查看主题时，效果如图12所示。
  
 图12 主题显示图
 
论坛会涉及到特殊属性的维护，如表13所示。
 表13论坛属性维护表
         说明    发表新主题    发表新回复
 
Forum    topicCount    主题总数    加1    
     articleCount    文章总数    加1    加1
     lastTopic    最后回复主题    更新为当前的新主题    
 
Topic    replyCount    回复总数    0    
     lastReply    最后回复    null    更新为当前的新回复
     lastUpdateTime    最后更新时间    本主题的发表时间    更新为当前的新回复的    发表时间
 
发表主题，回复时使用fckeditor插件，增加用户的体验效果。关键代码如下：
 var oFCKeditor = new FCKeditor( 'content' ) ; 
 oFCKeditor.BasePath    = "fckeditor/" ;     
 oFCKeditor.ToolbarSet = "bbs" ;
 oFCKeditor.ReplaceTextarea();
 （2）邮件发送，SMTP协议－发邮件协议，全称为Simple Mail Transfer Protocol（简单邮件传输协议），它定义了邮件客户端软件与SMTP服务器之间、以及两台SMTP服务器之间的通讯规则。端口一般为25。
 POP3协议－收邮件协议：全称为Post Office Protocol（邮局协议），它定义了邮件客户端软件与POP3服务器的通讯规则。端口一般为110。
 Session用于设置服务器，协议类型和密码等。表示会话，是JavaMailApi的最高层入口类。Session对像从Properties中获取信息，如IP、协议、用户名密码等。
 Javax.mail.Message类，它的一个重要子类为MimeMessage。Message类表示电子邮件的正文部分。一封电子邮件包含以下内容：地址信息、标题、日期、正文。
 Java.mail.Address：收件人地址，表示邮件的地址。常用的子类为：javax.mail.internet.InternetAddress。
 Javax.mail.Transport：负责发送邮件，指定邮件发送的协议。通常为SMTP。它的静态方法send(Message)负责发送邮件。
 4.2.4 审批流转模块
 通过myeclipse集成activiti5的    Activiti BPMN 2.0 designer，绘制请假流程图，并部署流程图到activiti5的工作流引擎中。部署一次会生成一个版本号，启动流程实例时，会启动最新的版本号，部署一次，可以执行多次请假。
 员工请假时先填写请假单，当申请时，会首先启动流程实例，通过startProcessInstanceByKey(pdkey,businessKey,user)启动，每个businessKey只能启动一次流程实例,所以businessKey可以通过pdkey和请假单id来组合。启动流程实例后，工作流引擎中就会生成流程实例，会生成相应的Task,通过piid和user可以获得对应的任务，在通过processEngine.getTaskService().complete()完成请假任务。请假任务完成后，首先更改请假单状态为正在审批，流程会执行到部门经理审批，由于部门经理是动态的，在绘图时指定一个ManagerTaskListener，这样流程到达时会触发此监听器，从而获得部门经理，执行审批流程。
 部门经理审批时，需要查询待办任务列表，获得所有的待办任务，通过Task可以获得piid,通过piid和办理人则可以确定申请人，请假单，首先在前端页面进行请假信息的回显，部门经理可以添加自己的审批信息，并提交。审批信息会保存到act_hi_comment表中，后台完成任务的同时，添加批注： 
 processEngine.getTaskService().addComment(task.getId(),processInstance.getId(), 
 manageNote);流程执行到总经理审批。
 总经理审批时，需要获得请假单信息，部门经理审批结果等信息，并添加自己的审批结果，后台处理完后，更新请假单状态为审批完成。总经理审批界面如图13所示。
 
 
 图13 总经理审批图
 
在请假单审批过程中，员工可以通过查看流程图，来查看审批进度；可以查看审批结果看申请是否通过。员工在查看流程图时，后台会根据请假单id得到businessKey,从而得到pdid，piid，在获得当前的执行节点：
 ProcessDefinitionEntity processDefinitionEntity=(ProcessDefinitionEntity) processEngine.getRepositoryService().
 getProcessDefinition(pi.getProcessDefinitionId());
 ActivityImpl actImpl=processDefinitionEntity.findActivity(pi.getActivityId());
 jsp页面上通过pdid获得图片输出流，div标签对当前节点进行加上红色边框：
 <img src="leaveApply_getProcessPic?procDefId=${procDefId}"    
 style="position：absolute; left：0px; top：0px;">         
 <div style="position：absolute; border：2px solid   
 red;left：${coordinateObj.x-1 }px;top：${coordinateObj.y-1 }px;width：${
 coordinateObj.width }px;height：${coordinateObj.height }px;"></div>
 员工在查看流程图时，效果如图14所示。
  
 图14查看流程图
 
    员工在查看审批结果时，后台会根据businessKey获得HistoricProcessInstance，再获得HistoricActivityInstance，通过HistoricActivityInstance获得Task，最终获得所有的Comment，员工通过查看页面的审批结果，可得知自己请假是否被批准。  
 4.3 基于角色的权限设计与实现
 项目中会涉及到用户，部门经理，管理员等多个角色，所以必须基于角色提供一个左侧的动态树形菜单，在添加用户时为其赋予相应的角色，在用户登录时，通过其对应的角色相关联的权限进行菜单的显示。为了提高效率，减少对数据库的访问次数，项目中使用缓存技术，在项目启动时将所有的权限集合查询出来缓存在项目中，以后用户登录时直接在缓存中查找即可。
 左侧菜单中只显示到2级菜单，3级菜单中的权限通过tag替换技术实现显示与否，重写struts的s：a标签,在项目下添加org.apache.struts2.views.jsp.ui.AnchorTag，这样在项目启动后会加载自定义的struts标签了，标签判断权限关键代码：
 public int doEndTag() throws JspException {        
         User user=(User) pageContext.getSession().getAttribute("user");       
         String privilegeUrl;
         if(action!=null){            
              privilegeUrl=action;
         }else{
              privilegeUrl=includeParams;            
         }
         int pos=privilegeUrl.indexOf("?");
         if(pos>-1){
             privilegeUrl=privilegeUrl.substring(0,pos);
         }
         if(user.hasPrivilegeByUrl(privilegeUrl)){            
             return super.doEndTag();
         }else {            
             return EVAL_PAGE;
         }
     }
 为了系统的安全，静态页面放入WEB-INF目录下，受servlet的安全机制保护，不可以输入地址直接访问，但是还需要对action进行访问拦截。拦截器需要继承AbstractInterceptor，通过ActionInvocation获得访问地址，判断当前用户是否登录，若没登录，返回登录界面；若用户已经登录，则需判断是否有改url的访问权限，若有，让其访问，若无，让其返回原始页面。
 5系统测试
 系统测试，英文是System Testing。是将已经确认的软件、计算机硬件、外设、网络等其他元素结合在一起，进行信息系统的各种组装测试和确认测试，系统测试是针对整个产品系统进行的测试，目的是验证系统是否满足了需求规格的定义，找出与需求规格不符或与之矛盾的地方，从而提出更加完善的方案。系统测试发现问题之后要经过调试找出错误原因和位置，然后进行改正。是基于系统整体需求说明书的黑盒类测试，应覆盖系统所有联合的部件。对象不仅仅包括需测试的软件，还要包含软件所依赖的硬件、外设甚至包括某些数据、某些支持软件及其接口等。
 5.1系统测试的原则
 (1)测试工作应该是采用普通用户来进行盲目测试，让这些没有接触过项目的人进行随即测试。
 (2)设计测试方案时，要验证输入数据的格式，以及是否有权限的设置，确保这些数据是在系统中是否有效。
 (3)测试用例要考虑每一种发生的情况，每种情况包括正常的情况和不正常的情况。
 (4)不仅要检验程序是否做了该做的事，还要检查程序是否同时做了不该做的事。
 (5)保留测试用例，作为系统文档的组成部分。
 5.2 系统测试用例
 为保证系统的正常使用，对系统进行了大量的测试，其中部分测试用例如表14-18所示。
 
表14 登录测试用例
 功能描述    登录界面
 用例目的    测试用户能否正常登录
 前提条件    登录界面正常运行
 输入/动作    期望的输出/相应    实际情况
 用户名：user1，密码：123，
 验证码：2567    登录失败    用户名或密码错误!
 用户名：user1，密码：123456，
 验证码：2567    登录失败    验证码错误！
 用户名：user1，密码：123456，
 验证码：5512    登录成功    与期望吻合
 
表15论坛测试用例
 功能描述    论坛测试
 用例目的    测试用户能否正常使用论坛功能
 前提条件    系统正常运行
 输入/动作    期望的输出/相应    实际情况
  点击论坛进行查看    可以看到论坛主题内容    正常查看
 点击发表主题    可以发表主题    正常发表，吻合
 点击主题名称，查看主题内容    可以查看主题内的所有回复    功能正常，吻合
 点击回复，发表回复    正常发表回复，fakeditor插件功能正常    与期望吻合
 多次点击回复，发表回复    分页正常，楼层显示正常    与期望吻合
 
表16 员工请假测试用例
 功能描述    登录界面
 用例目的    测试员工能否正常使用请假功能
 前提条件    系统正常运行，员工拥有请假权限
 输入/动作    期望的输出/相应    实际情况
 员工点击请假    正常显示请假单    正常显示
 员工填完请假单后，点击提交    正常保存    正常
 员工点击申请    申请正常    与期望吻合
 员工点击查看流程图    正常显示流程图，高亮显示执行的节点    查看流程图正常
 员工点击查看审批结果    可以看到审批结果    与期望吻合
 
表17 部门经理审批请假单测试用例
 功能描述    登录界面
 用例目的    测试部门经理能否正常审批请假单
 前提条件    系统正常运行
 输入/动作    期望的输出/相应    实际情况
 部门经理点击办理    显示请假单详细    正常显示
 部门经理填完批注后点击提交按钮    正常办理任务    办理任务正常
 
表18总经理审批请假单测试用例
 功能描述    登录界面
 用例目的    测试总经理能否正常审批请假单
 前提条件    系统正常运行
 输入/动作    期望的输出/相应    实际情况
 总经理点击办理按钮    显示请假单详细，和部门经理审批结果    显示正常
 总经理点击办理按钮    正常办理任务    办理任务正常
 6总结
 本系统采用了ssh,activiti5等技术,实现了OA系统的设计与开发，主要有用户管理、论坛、日程、审批流转等功能。在日程管理上，使用了日历插件开发，增强了页面的显示效果及用户体验。在请假审批流程中，使用activiti5开发，用户可以时时查看请假进程。在系统的开发过程中，我进一步熟悉了系统建模流程，数据库优化技术，编码能力也有了很大的提高。
 由于开发设计能力有限，开发经验不足，系统仍存在很多不足：
 (1)系统采用配置文件方式开发，造成配置文件内容臃肿；
 (2)审批流转模块还需要添加报销审批等功能。
 在以后的学习及项目开发中，我会积极吸取本次开发积累的经验，努力开发出更好的项目。
 

 致谢
 在我的指导老师XXX老师的悉心指导下，我的毕业设计和毕业论文圆满完成了。
 在中小企业办公自动化系统的开发过程中，我得到了指导老师的细心指导。老师与我一起研讨开发项目，为我提供开发实例，帮助我进行调研和分析，耐心地指导我进行开发和解决问题。在此过程中，对于我遇到的所有问题和困难，老师都给予了细心的解答和真诚的帮助，在此我表示衷心的感谢。
 此外，我的毕业设计课题得以很好的完成，这和学校为我提供的良好的学习和工作环境，以及设计过程给予我支持和帮助的各位老师是分不开的，特此向他们表示衷心的感谢！
 在此，我向所有帮助过我的老师、同学和朋友们表示真挚的感谢以及美好的祝福。祝愿大家在今后的日子里，百尺竿头，更进一步！
 参考文献
 [1]刘晓华. JSP应用开发详解[M]. 北京：电子工业出版社，2007：76-85.
 [2]王立. UML与软件工程基础[M]. 北京：高等教育出版社，2004：33-55.
 [3]叶达锋. Eclipse编程技术与实例[M]. 北京：人民邮电出版社，2006：23-32.
 [4]王中兵. Java Web主流框架整合[M]. 北京：电子工业出版社，2008：55-86.
 [5]范斯瓦尼. MySQL 完全手册[M]. 北京：电子工业出版社，2005：67-156.
 [6]张基温，曹渠江. 信息系统开发案例[M]. 北京：清华大学出版社，2003：23-45.
 [7]丁宝康. 数据库实用教程[M]. 北京：清华大学出版社，2003：342-376.
 [8]郑玲. 计算机专业毕业设计指导[M]. 北京：清华大学出版社，2007：123-143.
 [9]蔡剑，景楠. Java Web应用开发[M]. 北京：高等教育出版社，2005：24-78.
 [10]邱哲，马斗. Struts设计开发大全[M]. 北京：清华大学出版社，2006：212-232.
 [11]耿祥义，张跃平. JAVA 2实用教程[M]. 北京：清华大学出版社，2004：343-384.
 [12]刘晖. 基于B/S架构的OA办公平台的设计与实现[D]. 河北：河北科技大学，2008：15.
 [13]田华. 基于工作流和b/s结构的oa系统研究[D]. 青岛：青岛大学，2012：10.
 [14]金庆勇. B-S模式的可扩展OA系统研究设计与实现[D]. 北京：北京化工大学，2009：12.
  

智能OA办公系统
 


 
文章目录
 
智能OA办公系统
1.前言
2.准备工作
3.项目结构
4.部分界面截图
5.部分代码分析
5.1.1 ajax登录和添加员工功能
5.1.2 考勤打卡功能
5.1.3 ajax与Bootstrap Table实现表格内容的读写与分页
5.1.4 员工各类信息统计Echarts代码
   
6.总结
6.总结
 

 
1.前言
 
本套系统主要实现的是OA办公系统中一些常用发功能，还有一些功能因为时间的原因没有开发，但主线功能基本完善。前端页面模板用的是GitHub上面一位老兄OA系统办公模板，但功能上面的话我都进行了重新编写，用自己的代码方式改了过来，并添加了很多功能点。
 
2.准备工作
 
开发环境：MySQL8.0，JDK1.8，Tomcat9.0
 
开发工具：eclipse2020，Navicat15，HBuilder X，vscode。
 
开发语言：java、html、css、javascript
 
第三方工具库：hutool、fastjson、jstl、bootstrap、jQuery、echarts、font-awesome
 
3.项目结构
 

 
 
4.部分界面截图
 

 
 
 
 
 
 
 
 
由于系统的页面很多，就不一一截图了，总体的功能较为丰富，主线功能都完成。在人事管理中心的一个管理界面，对员工的一些信息进行了数据可视化分析，用到了echarts.js库，主要是把员工的学历、居住地、毕业学校、专业的数据进行了分析。
 
5.部分代码分析
 
5.1.1 ajax登录和添加员工功能
 
这部分实现的原理在《基于JavaEE(JSP)的共享资料平台的设计与实现》的第五点有说明，在这边就不继续介绍了。其JS代码部分基本上都是一样，唯一有差别的就是在jsp文件中，表单的格式不一样罢了。
 
5.1.2 考勤打卡功能
 
这是打卡日历图的代码，实现的功能为打卡日历图的显示，上班打卡一次，刷新一次会报红，因为没有继续打卡第二次，只有下班打卡后才会显示正常，下面环形也会显示全勤。日历图展示的时间数据是取最早打卡记录和最晚打卡记录，
 
数据库查询语句为SELECT EMP_ID,ATT_DATE,min(ATT_SIGNIN) as ATT_SIGNIN,max(ATT_SIGNOUT) as ATT_SIGNOUT from ATTENDANCE GROUP BY ATT_DATE,就用到了最大的时间和最小的时间。
 
    /**
	打卡日历模块
 */
(function(undefined) {
	var _global;
	//工具函数
	//配置合并
	function extend(def, opt, override) {
		for(var k in opt) {
			if(opt.hasOwnProperty(k) && (!def.hasOwnProperty(k) || override)) {
				def[k] = opt[k]
			}
		}
		return def;
	}
	//日期格式化
	function formartDate(y, m, d, symbol) {
		symbol = symbol || '-';
		m = (m.toString())[1] ? m : '0' + m;
		d = (d.toString())[1] ? d : '0' + d;
		return y + symbol + m + symbol + d
	}

	function Schedule(opt) {
		var def = {},
			opt = extend(def, opt, true),
			curDate = opt.date ? new Date(opt.date) : new Date(),
			year = opt.selectYear || curDate.getFullYear(),
			month = opt.selectMonth || curDate.getMonth(),
			day = curDate.getDate(),
			currentYear = curDate.getFullYear(),
			currentMonth = curDate.getMonth(),
			currentDay = curDate.getDate(),
			selectedDate = '',
			//缺勤
			qqDate = opt.qqDate || "",
			zcDate = opt.zcDate || "",
			el = document.querySelector(opt.el) || document.querySelector('body'),
			_this = this;
		var bindEvent = function() {
//			if(el.dataset['cc']){
				el.addEventListener('click', function(e) {
					switch(e.target.id) {
						case 'nextMonth':
							_this.nextMonthFun();
							break;
						case 'nextYear':
							_this.nextYearFun();
							break;
						case 'prevMonth':
							_this.prevMonthFun();
							break;
						case 'prevYear':
							_this.prevYearFun();
							break;
						default:
							break;
					};
					if(e.target.className.indexOf('currentDate') > -1) {
						opt.clickCb && opt.clickCb(year, month + 1, e.target.innerHTML,e.target);
						selectedDate = e.target.title;
						day = e.target.innerHTML;
						render();
					}
				}, false)
//				el.dataset['cc']=1;
//			}
		}
		var init = function() {
			var scheduleHd = '<div class="schedule-hd">' +
				'<div>' +
				'<span class="arrow icon iconfont icon-112leftarrowhead" id="prevMonth"></span>' +
				'</div>' +
				'<div class="today">' + year + "年" + (month + 1) + "月" + '</div>' +
				'<div>' +
				'<span class="arrow icon iconfont icon-111arrowheadright" id="nextMonth"></span>' +
				'</div>' +
				'</div>'
			var scheduleWeek = '<ul class="week-ul ul-box clearfix">' +
				'<li>日</li>' +
				'<li>一</li>' +
				'<li>二</li>' +
				'<li>三</li>' +
				'<li>四</li>' +
				'<li>五</li>' +
				'<li>六</li>' +
				'</ul>'
			var scheduleBd = '<ul class="schedule-bd ul-box clearfix" ></ul>';
			el.innerHTML = scheduleHd + scheduleWeek + scheduleBd;
			bindEvent();
			render();
		}
		var render = function() {
			var fullDay = new Date(year, month + 1, 0).getDate(), //当月总天数
				startWeek = new Date(year, month, 1).getDay(), //当月第一天是周几
				total = (fullDay + startWeek) % 7 == 0 ? (fullDay + startWeek) : fullDay + startWeek + (7 - (fullDay + startWeek) % 7), //元素总个数
				lastMonthDay = new Date(year, month, 0).getDate(), //上月最后一天
				eleTemp = [];
			for(var i = 0; i < total; i++) {
				if(i < startWeek) {
					var nowDate = formartDate(year, month, ((lastMonthDay - startWeek) + 1 + i), '-');
					var addClass = '';
					
					eleTemp.push('<li class="other-month"><span class="dayStyle ' + addClass + '">' + (lastMonthDay - startWeek + 1 + i) + '</span></li>')
				} else if(i < (startWeek + fullDay)) {
					var nowDate = formartDate(year, month + 1, (i + 1 - startWeek), '-');
					var addClass = '';
					var attSignin = '';
					var attSignout = '';
					//					selectedDate == nowDate && (addClass = 'selected-style');
					for(var j = 0; j < zcDate.length; j++) {
						zcDate[j].attDate == nowDate && (addClass = 'zc_day', attSignin = zcDate[j].attSignin, attSignout = zcDate[j].attSignout);
					}
					for(var z = 0; z < qqDate.length; z++) {
						qqDate[z].attDate == nowDate && (addClass = 'qq-style', attSignin = qqDate[z].attSignin, attSignout = qqDate[z].attSignout);
					}
					//					formartDate(currentYear,currentMonth+1,currentDay,'-') == nowDate && (addClass = 'today-flag');
					eleTemp.push('<li class="current-month" ><span  class="currentDate dayStyle ' + addClass + '">' + (i + 1 - startWeek) + '</span><div class="day_time"><div>上班：' + attSignin + '</div><div>下班：' + attSignout + '</div></li>')
				} else {
					eleTemp.push('<li class="other-month"><span class="dayStyle">' + (i + 1 - (startWeek + fullDay)) + '</span></li>')
				}
			}
			el.querySelector('.schedule-bd').innerHTML = eleTemp.join('');
			el.querySelector('.today').innerHTML = year + "年" + (month + 1) + "月";
		};
		this.nextMonthFun = function() {
				if(month + 1 > 11) {
					year += 1;
					month = 0;
				} else {
					month += 1;
				}
				render();
				opt.nextMonthCb && opt.nextMonthCb(year, month + 1, day);
			},
			this.nextYearFun = function() {
				year += 1;
				render();
				opt.nextYeayCb && opt.nextYeayCb(year, month + 1, day);
			},
			this.prevMonthFun = function() {
				if(month - 1 < 0) {
					year -= 1;
					month = 11;
				} else {
					month -= 1;
				}
				render();
				opt.prevMonthCb && opt.prevMonthCb(year, month + 1, day);
			},
			this.prevYearFun = function() {
				year -= 1;
				render();
				opt.prevYearCb && opt.prevYearCb(year, month + 1, day);
			}
		init();
	}
	//将插件暴露给全局对象
	_global = (function() {
		return this || (0, eval)('this')
	}());
	if(typeof module !== 'undefined' && module.exports) {
		module.exports = Schedule;
	} else if(typeof define === "function" && define.amd) {
		define(function() {
			return Schedule;
		})
	} else {
		!('Schedule' in _global) && (_global.Schedule = Schedule);
	}

}());
 
5.1.3 ajax与Bootstrap Table实现表格内容的读写与分页
 
这里的列表代码以部门管理为例进行演示。
 
这是前端table的写法，主要是把表头给写出来，然后利用bootstrap的写法，在js里面写实现方法，还是比较方便的。下面就来一一讲解实现过程。
 
<table id="datagrid" class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th data-width="60" data-align="center"
                data-formatter="indexFormatter">#</th>
            <th data-field="deptId" data-align="center">部门编号</th>
            <th data-field="deptName" data-align="center">部门名称</th>
            <th data-field="deptUserid" data-align="center">负责人</th>
            <th data-field="deptCreatetime" data-align="center" data-formatter="dateFormatter">创建时间</th>
            <th data-field="deptId" data-class="p-1" data-width="150"
                data-align="center" data-formatter="optionFormatter">操作</th>
        </tr>
    </thead>
</table>
 CLICK ME 

```java
 
然后在其他<th></th>标签中，有一个data-field属性，这里表达的是这一列所需要的展示的值，也就是从数据库返回的值显示的内容。
 
在创建时间的<th></th>的标签里面，写了一个data-formatter="dateFormatter",和上面的原理一样，在下面的js代码找到dateFormatter函数。主要是对数据库传来的时间进行格式化展示。
 
/**
	装载下拉框的角色列表
 */
var searchDeptForm = $(document.forms.searchDeptForm);
var searchDeptForms = document.forms.searchDeptForm;

//表单提交事件
searchDeptForms.onsubmit = ()=>{
	$.post(
		searchDeptForms.action,
		sys.form.param(searchDeptForms).toString(),
		function(data){
			if(data.code==200){
				//sys.js库中定义的方法，可以弹出提示界面
				sys.toastr.success("查询成功");
			}else{
				sys.toastr.error(data.message);
			}
		},"json"
	);
	return false;
}

// 获取部门下拉框的数据
var deptIdSelect = $(document.forms.searchDeptForm.deptIdSelect);
$.get(
	"department.let?action=listDepts",
	function(data){
		for(let dept of data) {
			deptIdSelect.append(`<option value="${dept.deptId}">${dept.deptName}</option>`);
		}
	},"json"
);


//保存查询条件
var searchParams = new URLSearchParams();
searchDeptForm.on("submit",function(){
	searchParams = sys.form.param(searchDeptForm[0]);
	datagrid.bootstrapTable("refresh",{pageNumber:1});
	return false;
});

/**
	表格内容填充方式，从数据库请求的数据，填充到表格中
*/
var datagrid = $("#datagrid").bootstrapTable({
	url: "department.let?action=page",
	dataField: "list",//rows
	totalField: "total",
	queryParamsType: "",//limit
	pagination: true,
	sidePagination: "server",//client
	queryParams:function(params) { 
	  for(let name of searchParams.keys()){//添加搜索条件
		  params[name]=searchParams.get(name);
	  }
	  return params 
    }
});

/**
	列表最前面加索引
 */
var indexFormatter = function(value, row, index, fieldName) {
	return index + 1;
}

/**
	给时间设置0
 */
function addZero(n) {
	return n < 10 ? '0' + n : '' + n;
};

/**
	格式化时间
 */
var dateFormatter = function(value, row, index, fieldName) {
	var date = new Date(value);
	var time = date.getFullYear() + "-" + addZero(date.getMonth() + 1) + "-" + addZero(date.getDate());
	return time;
}

/**
 * 格式化表格操作菜单
 */
var optionFormatter = function(value, row, index) {
	return `<div class="dropdown">
  <button class="btn btn-outline-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
    操作
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item"   href="department.let?action=getDeptInfo&deptId=${value}">查看&修改</a>
    <a class="dropdown-item _delete" data-index="${index}" href="javascript:void(0);">删除</a>
  </div>
</div>`;
}

/**
	操作按钮
 */
datagrid.on("click", "._delete", function() {//删除
	let obj = $(this);
	let index = obj.data("index");//data-index
	let row = datagrid.bootstrapTable("getData")[index];
	sys.confirm(`您确定要删除[${row.deptName}]吗？`, function(r) {
		if (r) {
			$.post(
				"department.let?action=delete",
				{ "deptId": row.deptId },
				function(data) {
					if (data.code == 200) {
						sys.toastr.success(`删除用户[${row.deptName}]成功`);
						datagrid.bootstrapTable("refresh");
					} else {
						sys.toastr.error(data.message);
					}
				}, "json"
			);
		}
	});
});
 
5.1.4 员工各类信息统计Echarts代码
 
环状比例图的实现代码，主要用的是echarts库。传入的数据有三种TextData,DigitalData,titleText，分别为图例数据、员工详情数据、该图形的标题数据。
 
function EmpCityChart(TextData,DigitalData,titleText) {
    var myChart = echarts.init(document.getElementById('empCity'));
    var img = 'data:image/png;base64,iVBORw0K....VORK5CYII=';
    var trafficWay = DigitalData;
    var data = [];
    var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
    for (var i = 0; i < trafficWay.length; i++) {
        data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor:color[i],
                    shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        });
    }
    var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if(params.name !== '') {
                            return titleText+'：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                        }else {
                            return '';
                        }
                    },
                },
                labelLine: {
                    length:30,
                    length2:100,
                    show: true,
                    color:'#00ffff'
                }
            }
        },
        data: data
    }];
    option = {
        backgroundColor: '#5e7c85',
        color : color,
        title: {
            text:titleText,
            top: '48%',
            textAlign: "center",
            left: "49%",
            textStyle: {
                color: '#fff',
                fontSize: 22,
                fontWeight: '400'
            }
        },
        graphic: {
            elements: [{
                type: "image",
                z: 3,
                style: {
                    image: img,
                    width: 178,
                    height: 178
                },
                left: 'center',
                top:  'center',
                position: [100, 100]
            }]
        },
        tooltip: {
            show: false
        },
        legend: {
            icon: "circle",
            orient: 'horizontal',
            x: 'center',
            data:TextData,
            top: 10,
            align: 'left',
            textStyle: {
                color: "#fff"
            },
            itemGap: 20
        },
        toolbox: {
            show: false
        },
        series: seriesOption
    }
    myChart.setOption(option);
}
 
ajax请求数据，这里请求的数据是员工的岗位数据分析数据，将获得的数据进行格式的一些转换，然后调用上面的函数，就可以正常显示图形了。
 
function empDegree(){
	$.get(
		"chartData.let?action=getEmpDegreeData",
		function(data){
			var empText=[];
			var empData=[];
			for(let i=0;i<data.data.length;i++){
				empText.push(data.data[i].empTiptopdegree);
				empData.push({name:data.data[i].empTiptopdegree,value:data.data[i].empData*100});
			}
			EmpCityChart(empText,empData,"最高学历")
		},"json"
	);
}
 
servlet实现获取数据。这里写了SQL语句是因为在service和dao包中的实现类用的是同一个方法，只需要传入不同的SQL语句和异常代号和异常信息就可以了。
 
private ChartDataService chartDataService = new ChartDataServiceImpl();

/**
* -获取员工的学历数据
* @return
*/
public R<?> getEmpDegreeData(){
    String sql = "select EMP_TIPTOPDEGREE,COUNT(EMP_TIPTOPDEGREE) as EMP_DATA from EMPLOYEE GROUP BY EMP_TIPTOPDEGREE";
    List<Employee> empData = chartDataService.getEmpData(sql,1001,"获取员工学历数据失败");
    return R.ok(empData);
}
 
ChartDataDAO.java实现
 
/**
* -由于代码非常相似，所以只需要根据SQL语句不同查询不同的字段就行，这里查询的是员工的数据
* @return
* @throws SQLException 
*/
public List<Employee> getEmpData(String sql) throws SQLException {
    List<Object> params = new ArrayList<Object>();
    return DBUtil.list(sql, Employee.class, params.toArray());
}
 
6.总结
 
以上的系统主线功能基本完成，从GitHub大佬用的模板改进了全部功能，现在找不到这个GitHub的地址是什么了，如果有侵权请联系。用来学习的话，能够把全部代码总一遍，基本上可以学会所有的javaee知识，如果JavaScript底子好的话，还能够深入的研究一下ajax代码。ajax代码比传统MVC好用多了。
 
好了，这次的项目分享到此也差不多了。觉得小弟写的不错的话，可以点赞加关注一下，谢谢！有需要源码的小伙伴也可以搜索企鹅号863772270，编码不易，请作者喝瓶水即可。
 
DataDAO.java实现
 
/**
* -由于代码非常相似，所以只需要根据SQL语句不同查询不同的字段就行，这里查询的是员工的数据
* @return
* @throws SQLException 
*/
public List<Employee> getEmpData(String sql) throws SQLException {
    List<Object> params = new ArrayList<Object>();
    return DBUtil.list(sql, Employee.class, params.toArray());
}
 
6.总结
 
以上的系统主线功能基本完成，从GitHub大佬用的模板改进了全部功能，现在找不到这个GitHub的地址是什么了，如果有侵权请联系。用来学习的话，能够把全部代码总一遍，基本上可以学会所有的javaee知识，如果JavaScript底子好的话，还能够深入的研究一下ajax代码。ajax代码比传统MVC好用多了。
 
好了，这次的项目分享到此也差不多了。觉得小弟写的不错的话，可以点赞加关注一下，谢谢！有需要源码的小伙伴也可以搜索企鹅号863772270，编码不易，请作者喝瓶水即可。