页面工具说明书

  页面工具说明书

基本功能

页面工具在实际程序当中的位置：页面工具将页面通过json串保存在数据库中，其他系统读取json串即可生成页面和实现相关页面功能。
 
页面工具主要实现三种页面：查询统计页面，趋势设置页面，管理设置页面
查询页面：通过一条sql提取出查询的条件作为将来页面的条件，查询出的结果显示在一个分页的DataGrid中，可以实现DataGrid数据的导出Excel和打印。
趋势设置页面：通过一条sql提取出查询条件作为将来页面的查询条件，查询出的结果通过图表和一个分页的DataGrid中显示，可以实现DataGrid数据的Excel导出和打印。
管理设置页面：选择数据库中的数据表，选择是否是主键，是否修改，是否是查询条件来控制管理页面的添加删除页面对数据的操作，查询条件用于筛选数据库中的数据进行修改。

操作展示

1主页面

显示系统中的所有页面
 

2查询页面

点击查询统计设置下面的任意类型，在右边的所有页面下添加一个页面，点击修改json串即可打开查询页面编辑页面
 
2.1在查询设置页面中在位置1中输入sql串，点击“设置查询条件”，在下面的DataGrid中就会显示查询条件设置，显示设置和页面能够进行到导入导出的选择。、
 
查询条件设置：sql中的查询参数以两个$中间跟上参数名（$time$）,可以设置查询条件显示顺序，查询条件的显示名称，控件类型和默认值，其中控价类型有四种选择（下拉框和多选框选中后需要在默认值中输入下拉框或者多选框默认值的sql: SELECT   numStationID value,varName text from  WD_Station）：下拉框可以实现联动效果
 
显示设置：控制显示的顺序和显示的名称。
显示样式设置：控制页面是否需要导出Excel或者打印
 
2.2 点击预览，可以查看刚才设置完的页面的效果
 

3趋势设置页面

点击趋势设置页面下面的任意类型，在右边的所有页面下添加一个页面，点击修改json串即可打开查询页面编辑页面
 
3.1在趋势设置页面中在位置1中输入sql串，点击“设置查询条件”，在下面的DataGrid中就会显示查询条件设置，显示设置和页面能够进行到导入导出的选择。
 
趋势设置页面的查询条件和查询统计页面基本一致。
显示设置：趋势页面一般会显示DataGrid和图表两个形式。其中图表显示控制xy轴：一般是一个x轴，多个y轴；有些情况的用z轴解决（sql语句不好行列转换的情况下详见后面“附录1”）
显示样式设置：有四种显示按钮可供选择：表格形式，图形格式，导出报表，打印
 
3.2点击预览，可以查看刚才设置完的页面的效果
 

4管理设置页面

点击管理设置页面下面的任意类型，在右边的所有页面下添加一个页面，点击修改json串即可打开查询页面编辑页面
 
4.1在管理页面设置中选中要操作的表，点击“设置”即可在下面的DataGrid在中显示可以设置的条件：“主键”对表中的数据的唯一性进行限制，“是否修改”控制在修改和删除时对该字段是否操作，“查询条件”控制在过滤该表数据是该字段是否作为查询条件，其他的配置可以参照查询统计页面的设置。
 
4.2，点击“预览”可以看到刚才设置的页面的效果
 

5实际工程中的效果

 
趋势页面：
 
管理页面：
 

系统说明：

本系统主要使用IntelliJ Idea 的springmvc开发，前台使用freemarker，jquery，kendoui，数据库使用的是Mysql，用pom进行jar包管理。前后台之间的数据交换使用的是JSON。

1系统基本流程图

1.1 查询趋势管理页面初始化流程图：按照json串的页面类型决定添加页面按钮的查询方法，按照json串的页面条件初始化页面的查询条件。基本流程图如下：
 
1.2查询页面查询功能基本流程：获取页面json后，按照json拼接kendoGrid的显示列和数据集列，初始化kendoGrid列的控件（文本框，时间控件，下拉框和多选框），初始化kendoGrid控件。基本流程图如下：
 

2程序基本结构

web文件夹时前台页面，src是后台，AllInterceptor是进入每一个web页面之前的处理src/web下面的类是对前台业务逻辑的处理，src/util/SpringContextUtil.java是获取单例数据库，src/util/SqlHelper.java是对数据库的操作，src/util/JsonUtil.java, src/util/MyJSONObject.java是对JSON串的拼接。
 

3 json串说明

程序将查询趋势管理页面保存在数据库中，其他系统获取页面json串进行解析即可完成相关页面的功能，下面对三种json串详细说明下。
3.1查询统计页面json串：
{"dataTable":
"SELECT    a.numStationID ,a.stationName ,a.varID ,a.circuitName ,a.measureTypeName ,ROUND(a.douSum,2) sum1,ROUND(b.douSum,2) sum2,ROUND(b.douSum-a.douSum,2) sum  from (SELECT wc.numStationID,ws.varName stationName,wc.varID,wc.numCircuitID,wc.varName circuitName,wmt.numMeasureTypeID,wmt.varName measureTypeName,we.douSumKWH douSum FROM WD_EnergyDayStat we,WD_Station ws,WD_Circuit wc,WD_CircuitRefMeasureType crt,WD_MeasureType wmt where we.numStationID = ws.numStationID and we.numCircuitID = wc.numCircuitID and we.numCircuitID = crt.numCircuitID and crt.numMeasureTypeID = wmt.numMeasureTypeID and crt.numMeasureTypeID in ('2001','2000','2003','2004','2400','2007','2008')  and we.numLineID = 46 and DATE(we.datStat) = LAST_DAY('$time$') order by we.numStationID asc,wc.numCircuitID asc,crt.numMeasureTypeID ASC) a ,(SELECT  wc.numCircuitID,we.douSumKWH douSum  FROM WD_EnergyDayStat we,WD_Station ws,WD_Circuit wc,WD_CircuitRefMeasureType crt, WD_MeasureType wmt where we.numStationID = ws.numStationID and we.numCircuitID = wc.numCircuitID and we.numCircuitID = crt.numCircuitID and crt.numMeasureTypeID = wmt.numMeasureTypeID and crt.numMeasureTypeID in ('2001','2000','2003','2004','2400','2007','2008')  and we.numLineID = 46 and DATE(we.datStat) = LAST_DAY(DATE_ADD('$time$',  INTERVAL 1 MONTH)) order by we.numStationID asc,wc.numCircuitID asc,crt.numMeasureTypeID ASC) b WHERE  a.numCircuitID=b.numCircuitID",
"pageType":"query",
"condition":[{ "order": "null", "name": "$time$","showName": "查询时间", "control": "DateTimePicker", "controlData": "undefined" }],
"show": [{ "isShow": "false", "name": "numStationID", "sqlType": "INTEGER", "showName": "站号" },
{ "isShow": "false", "name": "stationName", "sqlType": "VARCHAR", "showName": "站名" },
{ "isShow": "false", "name": "varID", "sqlType": "VARCHAR", "showName": "varID" },
{ "isShow": "false", "name": "circuitName", "sqlType": "VARCHAR", "showName": "所在回路" },
{ "isShow": "false", "name": "measureTypeName", "sqlType": "VARCHAR", "showName": "能耗类型" },
{ "isShow": "false", "name": "sum1", "sqlType": "DOUBLE", "showName": "上月月底" },
{ "isShow": "false", "name": "sum2", "sqlType": "DOUBLE", "showName": "本月月底" },
{ "isShow": "false", "name": "sum", "sqlType": "DOUBLE", "showName": "走字数" }],
"GridAndGraph":"3"
}
dataTable：将dataTable中的条件用下面condition中的相关变量替换即可生成一条完整得sql，点击查询即可实现一个查询统计页面。
pageType：确定本页面的类型，这样js可以用不同的方式生成freemarker页面。
condition:查询统计页面的查询条件：order确定查询条件的排序，name：查询条件在sql中的名称，showName：查询条件在页面上显示的名称，control:查询条件的控件（text DateTimePicker dropdownlist  MultiSelect），controlData：查询条件的默认值（sql），当controlData中的sql也用到了其他查询条件，那么就可以实现查询条件的联动。
show：确定Grid的显示：isShow该字段暂时没用，name是对用sql中的字段，sqlType是该字段的类型，showName是该字段大DataGrid表头的显示名称。
GridAndGraph：确定该页面需要显示的功能：{text:"表格",value:"1"},{text:"图表",value:"2"},{text:"导出报表",value:"3"},{text:"打印",value:"4"}
3.2趋势页面json串：
{"dataTable":
"SELECT  DATE_FORMAT(datRecTime,'%Y-%m-%d %H:%i:00')  time ,$value$ value,c.varName from WD_PQMeasure p ,WD_Circuit c WHERE c.numStationID=$numStationID$  and   datRecTime  BETWEEN  '$start$'  and  '$end$'  and p.numCircuitID=c.numCircuitID   and c.numCircuitID in ($numCircuits$) ORDER BY  datRecTime;",
"pageType":"trend",
"condition":[
{ "order":"1", "name": "$numStationID$","showName": "地铁站", "control": "dropdownlist", "controlData": "SELECT   numStationID value,varName text from  WD_Station" },
{ "order":"2", "name": "$numCircuits$","showName": "选择回路", "control": "MultiSelect", "controlData": "SELECT   numCircuitID value,varName text from  WD_Circuit where numStationID=$numStationID$" },
{ "order":"3", "name": "$start$","showName": "开始时间", "control": "DateTimePicker", "controlData": "undefined" },
{ "order":"4", "name": "$end$","showName": "结束时间", "control": "DateTimePicker", "controlData": "undefined" },
{ "order":"5", "name": "$value$","showName": "电能质量", "control": "dropdownlist", "controlData": "SELECT   varColName value,varDescription text from WD_LoadDirectory  where numTypeID=1" }],
"show": [{ "isShow":"true", "name": "time", "showXY": "x", "name": "time", "sqlType": "DATETIME", "showName": "时间" },
{ "isShow":"true", "name": "value", "showXY": "y", "name": "value", "sqlType": "DOUBLE", "showName": "值" },
{ "isShow":"true", "name": "varName", "showXY": "z", "name": "varName", "sqlType": "VARCHAR", "showName": "列" }],
"GridAndGraph":"1,2,3"
}
json串功能和查询统计页面基本一致，关于xyz的说明详见附件1。
3.3管理页面json串：
{"dataTable":
"WD_Department",
"pageType":"admin",
"condition":[
{"order": "null", "sqlType": "INTEGER","key":"true","modify":"false","show":"false","name": "numDepartID", "showName": "部门号", "control": "text", "controlData": "undefined"},
{"order": "null", "sqlType": "VARCHAR","key":"false","modify":"true","show":"true","name": "varName", "showName": "部门名称", "control": "text", "controlData": "undefined"},
{"order": "null", "sqlType": "INTEGER","key":"false","modify":"true","show":"false","name": "numParentID", "showName": "户级部门", "control": "dropdownlist", "controlData": "SELECT   numDepartID value,varName text from WD_Department"}
]}
dataTable：要进行管理的数据表。
pageType：页面类型。
condiction:过滤条件已经对表的修改方式：order确定过滤条件的显示顺序，sqlType去顶字段在数据库中的数据类型，key确定在对数据库中数据进行增删改查的条件，modify是该修改添加时是否添加该字段，show是是否作为过滤条件，name是在数据库中的字段名称，showName是对查询条件的说明，control，controlData和查询统计页面相同。

附录1

Z轴解决问题，现实当中很多时候查询出来的数据如下所示
datRecTime douIa        varName
2015/1/19 16:15 19.2       东直门外电源进线201回路
2015/1/19 16:15    32.4     东直门外电源进线202回路
2015/1/19 16:20    86.4      东直门外电源进线201回路
2015/1/19 16:20 61.8     东直门外电源进线202回路
2015/1/19 16:25   15.6     东直门外电源进线201回路
2015/1/19 16:25    20.4    东直门外电源进线202回路
2015/1/19 16:30 18        东直门外电源进线201回路
2015/1/19 16:30 60       东直门外电源进线202回路
2015/1/19 16:35 16.2    东直门外电源进线202回路
2015/1/19 16:35    16.2    东直门外电源进线201回路
2015/1/19 16:40 15.6     东直门外电源进线201回路
2015/1/19 16:40    12.6     东直门外电源进线202回路
2015/1/19 16:45   16.8     东直门外电源进线202回路
2015/1/19 16:45 16.8     东直门外电源进线201回路
2015/1/19 16:50 15.6     东直门外电源进线201回路
2015/1/19 16:50    14.4     东直门外电源进线202回路
2015/1/19 16:55 16.8     东直门外电源进线201回路
2015/1/19 16:55 19.2     东直门外电源进线202回路
2015/1/19 17:00 16.8     东直门外电源进线201回路
2015/1/19 17:00 17.4     东直门外电源进线202回路
需要显示的图如下：
 
但是系统只能处理下面的数据：

正常情况下需要在sql中进行很复杂的处理进行行列转置（我没法实现），此时可以设置z轴就能在后台经行处理了：datRecTime 设置为X轴，datIa设置为Y轴，varName设置为Z轴即可。