ETC营销数据统计及展示

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")
      @ResponseBody
      public 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")
      @ResponseBody
      public 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