ETC营销数据统计及展示。

一软件开发目标

1.1一、 ETC营销数据平台要解决的问题是什么？

需求

 * 按照需求自定义数据表，要求制作一个web站点，各个网点PC可以访问，无需登录，依靠IP地址区分网点，直接显示本网点办理ETC卡的总数量，网点每个员工作为开卡柜员办理的ETC数量，以及本网点员工作为营销人员的营销数量，并且能够查询到交易明细。

自定义数据表格式：

ETC绑卡数据表（开卡机构号，开卡时间，开卡柜员EHR，ETC卡号，营销人员HER）

比如：17214，20181230，1997228，65219088001，1997229

网点机构表（机构号，机构名称）

比如：17214 分行营业部
全辖EHR人员信息表（HER号，姓名，所属机构号）

比如：1997228，闫军，17214
网点IP地址表（ip地址网段，网点机构号）

比如：21.81.31.* 17214，21.81.32.* 7086

开发任务：

开发一个etc营销数据统计展示平台(web网站)，方便各个网点了解本机构目前etc营销现况，为接下来的etc营销计划提供数据支持。

1.2 解决该问题有哪些技术难点？

如何把近10天的开卡和营销数据用图表的形式展现出来。
如何根据Ip显示网点的名称在右上角。（模糊查询）

二解决方案及重点代码展示

2.1 本系统技术架构

java后端:
+ spring + springmvc + mybatis 2.0.1 (使用springboot搭建)
HTML前端
- **jquery.js +easyui.css **
- highcharts.js(Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站。)
数据库
- MySQL 8.0.15

2.2 数据库相关表展示及其结构说明

ehr（全辖EHR人员信息表）表结构说明

字段名称	类型	说明
ehr	char(7)	保存每个柜员的柜员号为Primary Key
orgnum	varchar(50)	保存每个柜员的姓名
orgnum	char(5)	保存该柜员所属的机构号

etcdata(ETC绑卡数据表) 表结构说明

字段名称	类型	说明
orgnum	char(5)	保存开卡机构号
createtime	Date	保存开卡的时间
createehr	char(7)	保存开卡柜员的ehr号
etcnum	varchar(11)	保存ETC的卡号为Primary Key
marketehr	char(7)	保存营销人员的ehr号

ip (网点IP地址表) 表结构说明

字段名称	类型	说明
ip	varchar(20)	保存每个机构的IP网段为Primary Key
orgnum	char(5)	保存该IP所对应的机构号

org (网点机构表) 表结构说明

字段名称	类型	说明
orgnum	char(5)	保存每个机构的机构号为Primary Key
orgname	varchar(50)	保存该机构的名字

2.3 系统相关代码演示：

2.3.1 index.html 根据ip地址获取机构号及机构名称

前端页面:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNB8g9TZ-1572181644812)(C:\Users\Administrator\Desktop\兼职\捕获.JPG)]

前端javascript（ajax发起请求）：

<script type="text/javascript">$.get("/getOrgData",function (data) {orgName = data;$("#username").html("<img class=\"user-avatar\" src=\"assets/img/avatars/48.jpg\" alt=\"SuggeElson\"></a>"+orgName);$("#allData").attr("href","viewDataShow?orgName='"+data+"'");$("#etcData").attr("href","allDataShow?orgName='"+data+"'");});$.get("/getOrgNum",function (data) {$("#marketData").attr("href","marketViewShow?orgNum='"+data+"'");});
</script>

后台相关接口

//根据ip获取机构的名称@RequestMapping("/getOrgData")@ResponseBodypublic String data(HttpServletRequest httpServletRequest){String ip = "";//当ip上来后 要去掉ip的主机号码  做一个查询if(httpServletRequest.getRemoteAddr().equals("0:0:0:0:0:0:0:1")){//此处还需要改进 对传进来的ip进行字符串截取 去掉最后一位 加上*作模糊查询ip = "21.81.33.*";}Org org = ipService.getOrgnumByIp(ip);String orgName = org.getOrgname();return orgName;}
//根据ip获取机构号@RequestMapping("/getOrgNum")@ResponseBodypublic String getOrgNum(HttpServletRequest httpServletRequest){String ip = "";if(httpServletRequest.getRemoteAddr().equals("0:0:0:0:0:0:0:1")){//此处还需要改进 对传进来的ip进行字符串截取 去掉最后一位 加上*作模糊查询ip = "21.81.33.*";}Org org = ipService.getOrgnumByIp(ip);String orgNum = org.getOrgnum();return orgNum;}

2.3.2 展示最近十天的开卡数据和营销数据

数据图层如何所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L0RFghIj-1572181644814)(C:\Users\Administrator\Desktop\兼职\捕获2.JPG)]

前端展现图数据加载javascript

//  data保存机构号 data1保存近十天的日期
$.get("/getDate",function (data1) {var categories = data1;console.log(categories);$.get("/getNum?orgNum="+data,function (makedata) {$.get("/getNum2?orgNum="+data,function (marketdata) {var chart = Highcharts.chart('container', {chart: {type: 'line'},title: {text: '近十天ETC开卡数据'},subtitle: {text: '数据来源: www.boc.com'},xAxis: {categories: categories},yAxis: {title: {text: '个数'}},plotOptions: {line: {dataLabels: {// 开启数据标签enabled: true},// 关闭鼠标跟踪，对应的提示框、点击事件会失效enableMouseTracking: false}},series: [{name: '开卡数据',data: makedata}, {name: '营销数据',data: marketdata}]});});});});

后台相关接口

//访问该接口 返回近十天的开卡数据
@RequestMapping("/getDate")@ResponseBodypublic List<String> date(){//        获取当前日期list.clear();SimpleDateFormat simpleDateFormat =new SimpleDateFormat("yyyyMMdd");Date today = new Date();Calendar calendar = Calendar.getInstance();calendar.setTime(today);for ( int i = 0;i<10;i++){calendar.add(calendar.DATE,-1);Date start = calendar.getTime();String startDate = simpleDateFormat.format(start);list.add(startDate);}System.out.println(list.toString());return list;}
//该接口根据机构号和时间返回近十天的开卡数据@RequestMapping("/getNum")@ResponseBodypublic List<Integer> getNum(String orgNum){List<Integer> num  = new ArrayList<>();for ( String createtime: list) {Integer num2 = viewDateService.getNum(orgNum,createtime);num.add(num2);}return num;}
//该接口根据机构号和时间返回近十天的营销数据@RequestMapping("/getNum2")@ResponseBodypublic List<Integer> getNum2(String orgNum){List<Integer> num  = new ArrayList<>();System.out.println(orgNum);for (String createtime: list) {Integer num2 = viewDateService.getNum2(orgNum,createtime);num.add(num2);}System.out.println(num);return num;}

2.3.3 柜员开卡数据页面及后台说明

开发数据页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eWJqopUA-1572181644814)(C:\Users\Administrator\Desktop\兼职\捕获3.JPG)]

卡开数据的前台页面（bootstarp）

<!-- 开卡数据概况页面 -->
<table id="dg_alldata" class="easyui-datagrid" title="开卡数据概况"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'orgName',width:80,align:'right'">所属机构</th><th data-options="field:'name',width:100">姓名</th><th data-options="field:'number',width:80,align:'right'">开卡数量</th></tr></thead>
</table>
<!--开卡数据详细页面 -->
<table id="dg_alldata2" class="easyui-datagrid" title="开卡详细数据"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'createehr',width:80,align:'right'">开卡柜员ehr</th><th data-options="field:'name',width:100">姓名</th><th data-options="field:'orgnum',width:80,align:'right'">机构号</th><th data-options="field:'etcnum',width:100">ETC卡号</th><th data-options="field:'createtime',width:100">开卡时间</th><th data-options="field:'marketehr',width:100">营销人员ehr</th></tr></thead>
</table>

javascript表格的初始化

 //开卡数据概况表格初始化
$("#dg_alldata").datagrid({url:"/allData",singleSelect:true,rownumbers:"true",fitColumns:"true",toolbar:'#tb_tool',queryParams: {orgName: orgName}
});//    开卡数据详细数据
function showData(){var row = $('#dg_alldata').datagrid('getSelected');console.log(row.name);$("#dg_alldata2").datagrid({url:"/detailData",singleSelect:true,rownumbers:"true",fitColumns:"true",queryParams: {name: row.name}});}

java后台相关接口说明

//    显示办理etc的总量 根据该机构号 展示办理etc的总数@RequestMapping("/allData")@ResponseBodypublic List<Data1> allData(String orgName){//根据机构名称返回柜员号 柜员姓名  所属机构  开卡数量List<Data1> list = etcService.getDataByOrgName(orgName);return list;}
//    显示详细数据@RequestMapping("/detailData")@ResponseBodypublic List<Data2> detailData(String name){System.out.println(name);List<Data2> list =etcService.detailDataByName(name);return list;}

2.3.4 营销页面前台及后台说明

营销数据展示页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSXZspVT-1572181644815)(C:\Users\Administrator\Desktop\兼职\捕获4.JPG)]

营销数据的前台页面（bootstarp）

<!-- 营销数据概况表格 -->
<table id="dg_alldata" class="easyui-datagrid" title="营销数据概况"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'orgName',width:80,align:'right'">所属机构</th><th data-options="field:'name',width:100">姓名</th><th data-options="field:'number',width:80,align:'right'">营销数量</th></tr></thead>
</table>
<!-- 营销数据的详细数据表格-->
<table id="dg_alldata2" class="easyui-datagrid" title="营销详细数据"data-options="singleSelect:true,collapsible:true,method:'get'"><thead><tr><th data-options="field:'marketehr',width:80,align:'right'">营销柜员ehr</th><th data-options="field:'name',width:100">姓名</th><th data-options="field:'orgnum',width:80,align:'right'">机构号</th><th data-options="field:'etcnum',width:100">ETC卡号</th><th data-options="field:'createtime',width:100">开卡时间</th><th data-options="field:'createehr',width:100">开卡人员ehr</th></tr></thead>

```

javascript加载数据

$.get("/getOrgNum",function (data) {//营销数据概况表格初始化$("#dg_alldata").datagrid({url:"/allMarketData",singleSelect:true,rownumbers:"true",fitColumns:"true",toolbar:'#tb_tool',queryParams: {orgNum: data}});
//    营销数据详细信息function showData(){var row = $('#dg_alldata').datagrid('getSelected');console.log(row.name);$("#dg_alldata2").datagrid({url:"/detailMarketData",singleSelect:true,rownumbers:"true",fitColumns:"true",queryParams: {name: row.name,orgNum:row.orgName}});

java后台相关接口说明

 //显示营销etc的数据 根据该机构号 展示办理etc的总数@RequestMapping("/allMarketData")@ResponseBodypublic List<Data1> allData(String orgNum){//根据机构名称返回柜员号 营销人员的姓名  所属机构  营销数量List<Data1> list = marketService.getMarketDataByOrgNum(orgNum);return list;}//  根据营销人员的名字显示营销的详细数据@RequestMapping("/detailMarketData")@ResponseBodypublic List<Data2>  detailMarketData(String name,String orgNum){System.out.println(name);System.out.println(orgNum);List<Data2> list = marketService.getMarketDataByEhr(name,orgNum);return list;}

sqlMapper.xml

<!--根据orgName获取柜员开卡的模糊数据--><select id="getMarketDataByOrgNum" parameterType="String" resultType="data1">SELECT ehr.name,etcdata.orgnum,count(name) as number from etcdata   inner JOIN      ehr on etcdata.marketehr = ehr.ehr where etcdata.orgnum = #{orgNum} GROUP BY   name ORDER BY number DESC</select><!--根据name和机构名称返回详细的营销数据-->
<select id="getMarketDataByEhr" parameterType="String" resultType="data2">SELECT          etcdata.marketehr,ehr.name,etcdata.orgnum,etcdata.etcnum,etcdata.createtime,etcdata.createehr from etcdata   inner JOIN  ehr on etcdata.marketehr = ehr.ehr where etcdata.orgnum = #{orgNum} and ehr.name= #{name}  ORDER BY createtime DESC</select>

2.4 系统相关功能演示

三项目反思及总结

3.1 该工具的时使用场景

该工具的使用客群为各个网点与etc相关的人员。通过该网站可以查看本机构目前etc开卡的情况，开卡数据可以具体到开卡的柜员和营销的柜员。该网站可以为决策层制定etc营销计划提供数据支持，让一线柜员更加方便快捷的查看自己的etc业绩。

3.2 该工具还有哪些待改进的地方

3.2.1 通过概况营销数据查询详细营销数据的时候通过的关键字是name字段和机构号
- 分析问题
  
  当一个网点有两个同名的柜员时，在数据库中查询的数据就不具有唯一性。造成该问题的原因是系统设计初期，考虑的不够充分。属于必须要个改进的致命bug。
- 解决方案
  
  解决该问题的方法也比较简单，只需要请求概况数据的时候加上柜员的ehr,在前台页面不用显示出来，但是可以作为通过概况数据查询详细数据的唯一约束。
  
  现请求后台柜员开卡概况数据格式为：
[Data1{name=‘杨鎏’, orgName=‘河南西路支行’, number=6}, Data1{name=‘张三’, orgName=‘河南西路支行’, number=2}]
```
**改进后后台返回柜员开卡概况数据格式为：**```java
[Data1{name='杨鎏', orgName='河南西路支行', number=6,ehr=78392023}, Data1{name='张三', orgName='河南西路支行', number=2,ehr=7839203}]
```
当通过开卡概况数据获取详细数据时，可以通过ehr唯一确定某一柜员。
3.2.2 概况详细数据的页面未做分页处理，当显示的数据比较少是没有任何影响但是当显示的数据比较多的时候就会出现网页响应时间较慢。
- 分析问题数据表格未做分页处理是开发上比较常见的问题。在数据量比较少的时候，前端页面渲染数据库中查询出来的数据耗时较小，用户体验还算友好。但是当数据量比较大的时候，前端渲染表格时间就会很长，造成用户等待时间长，体验差。
- 解决方案使用easyui的分页组件
  
  easyui自带分页组件，无需自己开发。实现代码大致代码如下：
```
//通过标记创建分页（pagination）//    开卡数据详细数据function showData(){var row = $('#dg_alldata').datagrid('getSelected');console.log(row.name);$("#dg_alldata2").datagrid({url:"/detailData",singleSelect:true,rownumbers:"true",fitColumns:"true",queryParams: {name: row.name},pagination:"true"});}
```

作者csdn yangliu449

_alldata’).datagrid(‘getSelected’);
console.log(row.name);
$("#dg_alldata2").datagrid({
url:"/detailData",
singleSelect:true,
rownumbers:“true”,
fitColumns:“true”,
queryParams: {
name: row.name
},
pagination:“true”
});
}
```

作者csdn yangliu449