天天看点

实现查询功能一

目标: X轴是巡检记录人员名单,Y轴是巡检次数

Sql语句:select name as "巡检员姓名", count(station) as "巡检次数" from test1 group by name;

查询表数据:

+----+--------+----------+

| id | name | station |

+----+--------+----------+

| 1 | 张三丰 | 兰考站点 |

| 2 | 张三丰 | 兰考站点 |

| 3 | 张三丰 | 兰考站点 |

| 4 | 张三丰 | 焦作站点 |

| 5 | 张三丰 | 洛阳站点 |

| 6 | 李思水 | 洛阳站点 |

| 7 | 李思水 | 兰考站点 |

| 8 | 李思水 | 焦作站点 |

| 9 | 王重庆 | 洛阳站点 |

| 11 | 王重启 | 焦作站点 |

| 12 | 齐继辉 | 洛阳站点 |

+----+--------+----------+

查询结果:

+------------+----------+

| 巡检员姓名 | 巡检次数 |

+------------+----------+

| 张三丰 | 5 |

| 李思水 | 3 |

| 王重启 | 1 |

| 王重庆 | 1 |

| 齐继辉 | 1 |

+------------+----------+

Echart 前台准备

option = {

title : {

text: '出勤人员/出勤次数',

subtext: '由高至低'

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['出勤次数']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType: {show: true, type: ['line', 'bar']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [

{

type : 'value',

boundaryGap : [0, 0.01]

}

],

yAxis : [

{

type : 'category',

data : ['巴西','印尼','美国','印度','中国']

}

],

series : [

{

name:'2011年',

type:'bar',

data:[1, 2, 3, 4, 5]

}

]

};

效果图:

实现查询功能一

实现思路:

实现查询功能一

思路清晰,理论可行,开始实践

先写后台代码:

  1. 先写架构
    1. 在action层建立getdataAction,用于以后Aajax等请求数据
    2. 在servlet层建立userservlet,用于处理业务
    3. 在dao层 建立getdataDao,用于特定的向数据库查询数据
    4. 建立DTO ( Data Transfer Object )层 , 里面是实体类,主要是 数据传输对象,实现Comparable接口,为了特定TreeSet容器
  2. DTO层 自底向上
    1. 建立一个NameAndStationcount类,封装需要属性
  3. Dao层
    1. 建立getdataDao类,继承baseDao,
    2. 写方法

public TreeSet<NameAndStationcount> getNameAndStationcountList(){}

  1. Getdataservlet层添加getdataservlet类
    1. 主要用于实现Tree到json字符串转化
  2. Action层 添加getdataAction类添加一个方法
    1. public void getDataForNameAndStationcount()
    2. 主要调用servlet取得json字符串然后,通过PrintWriter返回给前台

经测试 无误

写前台代码

  1. 配置action
    1. Xml中配置action
      1. 测试没问题http://localhost:8080/pasirb/data/getData1.action
  2. 写前台ajax请求
    1. Ajax 写完,检测没问题,前台能收到json数据,并将name和stationCount对应存入数组中 X[] Y[] 中
  3. 搭建Echart
    1. 全部定义全局方法就好!