首页是在使用物业管理系统时,首先映入眼帘的界面。在左边菜单栏中有各个服务板块,找到需要的选项并点击能进入对应的服务区域。首页图,如图2.2所示。
图2.2 首页图
实现过程:页面加载时请求/index页面,tomcat服务会将页面编译成html代码返回给前端,用户便可以看到页面效果,从而更好的了解物业管理系统进行相应的操作。
这个模块主要用于展示系统的通知信息,从而使业主更好的了解到物业系统有哪些通知消息,公告通知功能界面,如图2.3所示。
图2.3 公告通知功能界面
实现过程:页面加载时前端请求/gonggaotongzhi页面,这时页面会发送ajax请求,请求GonggaotongzhiController控制器下的list方法,通过调用gonggaotongzhiService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, gonggaotongzhi), params), params));方法讲数据以Json的格式返回给页面,在页面上进行渲染。
这个模块主要用来展示小区内的车位信息,方便小区内的业主对于小区内停车位的使用情况有大概的了解。通过查看自己附近的车位是否在使用中,可以让业主少走弯路,快速完成停车。车位信息管理界面,如图2.4所示。
图2.4 车位信息管理界面
实现过程:页面加载时通过调用/cheweixinxi,这时tomcat服务器,会将该页面返回到前端供用户使用,此时页面会通过ajax请求调用CheweixinxiController控制器下的list方法,在该方法内通过调用cheweixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, cheweixinxi), params), params));将数据通过json格式返回到前端,然后将数据加载到页面上。
这个模块主要功能是,显示小区内房屋的使用情况,可以精确查找到某个楼栋,单元号,房间号,对应的业主的名字和入住情况。房间信息管理界面,如图2.5所示。
图2.5 房间信息管理界面
实现过程:页面加载时调用/fangjianxinxi页面,服务器会将该页面返回给前端,这时页面会发送ajax请求到FangjianxinxiController控制器下的list方法,方法内会通fangjianxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, fangjianxinxi), params), params));将查询到的数据以json的形式返回给页面,页面对数据进行渲染,从而将数据展示出来。
这个模块主要功能是为业主提供投诉管理功能,让业主有投诉需求的时候,实现快速投诉,也能侧面督促物业服务提升质量。投诉信息管理界面,如图2.6所示。
图2.6 投诉信息管理界面
实现过程:通过请求/tousuxinxi页面,服务器将页面返回给前端,这时候通过调用TousuxinxiController控制器下的list方法,该方法调用tousuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, tousuxinxi), params), params));方法,将数据返回给前端,页面在将数据渲染上,这时就能看到投诉管理信息。
这个模块主要用于向用户展示报修信息,方便用户更好的了解到报修的进度。页面运行效果图。报修管理界面,如图2.7所示。
图2.7 报修管理界面
实现过程:用户报修记录时会请/baoxiuxinxi页面这时候,服务器会将页面返回给用户,这时页面会通过ajax请求调用BaoxiuxinxiController控制器下的list方法通baoxiuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, baoxiuxinxi), params), params))将数据返回给页面,这时页面便显示报修信息。
这个模块主要用于向业主展示系统的维修进度。维修管理界面,如图2.8所示。
图2.8维修管理界面
实现过程:用户点击维修记录时会请/weixiuxinxi页面这时候,服务器会将页面返回给用户,这时页面会通过ajax请求调用WeixiuxinxiController控制器下的list方法通weixiuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, weixiuxinxi), params), params));将数据返回给页面,这时页面便显示维修信息。
图2.9 缴费信息界面
实现过程: 用户点击缴费记录时会请/jiaofeixinxi页面这时候,服务器会将页面返回给用户,这时页面会通过ajax请求调用JiaofeixinxiController控制器下的list方法通jiaofeixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiaofeixinxi), params), params));将数据返回给页面,这时页面便显示缴费信息。
1. 管理员登录
中航物业管理系统的登陆页面如下,管理员页面输入用户名和密码进行登录,如果没能正确填写用户名和密码,则无法登录。管理员登录界面,如图2.10所示。
图2.10 管理员登录界面
实现过程:当管理要登录后台时,会请求/login页面,服务器会把页面返回给用户端,供管理员输入,管理员输入账号和密码,点击登录按钮会把数据提交UsersController控制器下的login方法对账号和密码进行验证,这是会进行账号密码验证,验证成功以后,会进入管理后台。
这个板块的主要功能是对业主信息进行查看,修改,删除和添加。公告信息界面,如图2.11所示。
图2.11 公告信息界面
实现过程:当管理人员点击业主管理时会请求/yezhu将页面返回给管理,这时如果管理员里要进行增删改查操作时,会请求YezhuController控制器下对应的方法,来进行增删改查操作。
本模块主要可以对发布到首页的公告通知进行编辑。可以对已经发布的公告通知进行修改。公告通知管理界面,如图2.12所示。
图2.12 公告通知管理界面
实现过程:当管理员进行公告通知管理时会请求/ gonggaotongzhi这个页面,在这个页面管理员可以对工作人员信息进行增删改查操作,这时页面会请求GonggaotongzhiController控制器下对应的Page方法,该方法内的gonggaotongzhiService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, gonggaotongzhi), params), params))方法,会把数据以json形式返回到前端,页面将接收到的数据渲染出来。
车位信息管理用来更改小区内的车位信息。车位信息管理界面,如图2.13所示。
图2.13 车位信息管理界面
实现过程:当管理员进行车位信息管理操作时,会请求/cheweixinxi页面,页面会发送ajax请求调用CheweixinxiController控制器,该控制器下的Page方法中的cheweixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, cheweixinxi), params), params));将车位信息返回到页面,这时管理员可以对车位信息进行增删改查的操作。
楼宇管理是对楼宇信息进行管理的运行效果图。楼宇信息管理界面,如图2.14所示如下:
图2.14 楼宇信息管理界面
实现过程:管理人员点击楼宇信息管理/louyuxinxi页面这时服务器会把页面返回给前端,页面会发送ajax请求,请求LouyuxinxiController控制器下Page方法的louyuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, louyuxinxi), params), params))将数据以json的形式返回给前端。管理便可以对楼宇信息进行增删改查操作。
投诉信息管理主要是对业主进行投诉的信息进行管理,在解决投诉的相关问题后给业主回复,并删除信息。也可以随时修改状态、查询信息。投诉信息管理界面,如图2.15所示。
图2.15 投诉信息管理界面
实现过程:管理员点击投诉管理会请求/tousuxinxi页面,服务器会将页面返回前端,会请求TousuxinxiController控制器下的Page方法,会调用tousuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, tousuxinxi), params), params))将投诉信息返回到页面以便于管理员进行管理。
报修信息管理,是对业主上报过的报修信息统一管理。在这个区域,管理员在查看报修信息后,对有误和需要更新的信息进行修改,并对维修的效果进行上报。报修信息管理界面,如图2.16所示。
图2.16 报修信息管理界面
实现过程:管理员点击报修信息管理的时候会请求/baoxiuxinxi页面,tomcat服务器会将页面返回给前端,这时候页面请求BaoxiuxinxiController方法下的Page方法该方法用baoxiuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, baoxiuxinxi), params), params))将数据以json的形式返回到前端。
维修信息管理是维修信息进行展示管理运行效果。维修信息管理界面,如图2.17所示。
图2.17 维修信息管理界面
实现过程:管理员点击维修管理的时候会请求/ weixiuxinxi页面,这时tomcat服务器会将页面返回给用户,页面会发送ajax请求到WeixiuxinxiController控制器的Page下weixiuxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, weixiuxinxi), params), params));会把维修数据展示数据返回到页面上,供管理员进行查看。
缴费信息管理管理员可以对用户的水电费,宽带费,车位费等进行查询,并提醒按时缴费。缴费信息管理界面,如2.18所示。
图2.18 缴费信息管理界面