init.json 插件初始化配置
initConfig.js 插件初始化方法
module_config.json 所有的组件配置都放在这里，要添加组件需要在这里面添加。
example.html 插件使用例子
1、将jyzt文件夹 复制到 自己项目视图层的任意位置。
2、修改init.json
如图修改 webSocketUrl ，没有webSocket 地址 可以先不填，后续开发完后再填，后文会讲到webSocket 服务端
3、调用编辑器页面
自己创建一个html文件，可以是jsp文件或ftl文件，根据自己的项目情况而定
可以参照example.html的调用方式
新增场景调用: js里调用 open("jyzt/index_edit.html");
编辑场景调用:js里调用 open("jyzt/index_edit.html?stageId="+stageId);
stageId 是新增场景保存存入数据库的唯一场景id
客户端监控页面调用:js里调用 open("jyzt/client_view.html?stageId="+stageId);
stageId 是新增场景保存存入数据库的唯一场景id
4、保存组态后的场景
如图所示点击保存的时候，应该当通过调用后台接口将场景保存到数据库。
此时需要修改 InitConfig.js 的 saveStageData 对场景进行保存。下面是代码片段。
/** * 点击保存调用的方法 * @param stageDatajson 场景序列化后的json串 * stage_id 场景id 如果是新增，场景id为空 如果是修改，可以将 场景id 传到后台对场景进行修改。 */saveStageData:function(stageDatajson,stage_id) {
点击保存的时候，程序会自动进入这个方法，传入整个场景画面序列化后的json串和场景的id（如果是新增stage_id为空）
开发人员在这里编写调用后台接口的代码将 stageDatajson 和 stage_id 传入后台，进行保存入库和修改场景。
//保存成功后需要返回场景id 因为在页面在再次点保存的时候就是修改了，return stage_id;
},
5、修改已经保存后的场景
在调用 open("jyzt/index_edit.html?stageId="+stageId)后，需要修改 InitConfig.js 的 editStageData，该方法需要通过stageId查询到之前保存后的场景json串，并返回，下面是代码片段。
/** * 编辑的时候调用的方法 * @param stageDatajson 场景id * return 根据id到自己的后台查询场景的json串 并将串返回 */editStageData:function(stageId) { 前面调用 open("jyzt/index_edit.html?stageId="+stageId) 后回自动进入该方法，并带入stageId， 开发人员在这里编写调用后台接口的代码将 stageId传入后台，在后台根据 stageId查询该id对于的场景json串并返回 。
return 场景json串;},
6、客户端监控页面查看
在调用 open("jyzt/client_view.html?stageId="+stageId)后，需要修改 InitConfig.js 的 viewStageData，该方法需要通过stageId查询到之前保存后的场景json串，并返回，下面是代码片段。
/** * 客户端查场景的时候调用这个方法 * @param stageId * @returns 场景json串 */viewStageData:function(stageId){
前面调用 open("jyzt/client_view.html?stageId="+stageId) 后回自动进入该方法，并带入stageId， 开发人员在这里编写调用后台接口的代码将 stageId传入后台，在后台根据 stageId查询该id对于的场景json串并返回 。 return stageJson;},
7、初始化设备数据
如图:在绑定设备这个地方是需要初始化设备数据的。
此时需要修改 InitConfig.js 的 getHardwareData方法，下面是代码片段
/** * 获取后台的硬件数据 */getHardwareData:function() { //开发人员在这里编写代码通过ajax到后台去取硬件数据。 并返回，返回数据格式如下 /* [ {code:"设备编号",name:"设备名称"}, ] */ //插件的数据写死，用于测试，正式使用的时候可将该行注释 var hardwareData=[ {code:'a01',name:'水位传感器'}, {code:'a02',name:'温度传感器'}, {code:'a03',name:'开关'}, {code:'a04',name:'电压表'}, {code:'a05',name:'电流标'}, {code:'a06',name:'流量计'}, {code:'a07',name:'湿度传感器'}, {code:'a08',name:'水泵'} ]; return hardwareData;},
到此前端组态插件集成完毕。
startFilter.java 是服务端启动入口
JyztWebSocketServerPool.java 连接存储池
JyztWebSocketServer.java 操作设备数据转发到客户端页面 和 客户端页面的按钮命令转发到设备
web.xml 需在 web.xml 配置过滤器
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<!-- tomcat等 启动之前执行 -->
<filter>
<filter-name>startFilter</filter-name>
<filter-class>com.jyzt.service.startFilter</filter-class>
</filter>
</web-app>
集成需要将目录结构里的 java代码复制到自己的项目。也可以将该工程进行扩展加工形成一个独立的服务。
1、设备数据转发到客户端监控页面
拿到设备数据后 调用JyztWebSocketServer.java的 sendMessages方法 ，该方法体如下：
/**
* @param messagetype /01 业务数据 02 提醒数据 03 网络检测 04 命令发送后的提醒数据 05 心跳处理 现场传过来的数据为01 业务数据
* 该类型代码 对应 WebSocketClilent.js websocket.onmessage = function 的 几个状态，根据情况自行使用
* @param messagecontent 内容
* @param stageid 场景编码
*/
public static void sendMessages(String messagetype,String messagecontent,String stageid){
String CJNR = "{"+
"MESSAGETYPE:'"+messagetype+"', "+//01 业务数据 02 提醒数据
"MESSAGECONTENT:"+messagecontent+
"}";
JyztWebSocketServerPool.sendMessage(CJNR, stageid);
}
调用代码片段如下
开发人员拿到设备数据后在任意位置调用以下代码
JyztWebSocketServer.sendMessages("01","{a03:0,a04:98,a01:7}", "df45524566322");
"01" 表示业务数据 设备要转发给客户端监控页面的数据
"{a03:0,a04:98,a01:7}" 表示设备传过来的数据，该json数据的键是设备编码，值是设备的值。
"df45524566322" 是前面组态保存后的场景id。需要自己想办法拿到设备数据对于的场景id。
2、客户端监控页面点击按钮时将命令转发到设备
进入JyztWebSocketServer.java 的 onMessage方法，方法体如下
调用代码片段
public void onMessage(WebSocket conn, String message){
message = message.toString();
if(null != message && message.indexOf("ONLINE")!=-1){//场景连接景来
JyztWebSocketServerPool.addDataConnection(message.split("ONLINE")[0], conn);//将连接保存起来，保存的同时会移除已经失效的连接
}if(null != message &&message.indexOf("LEAVE")!=-1){//场景离开
JyztWebSocketServerPool.removeConnect(conn);
}
if(null != message && message.indexOf("CONTROLCMD")!=-1){//客户端传来了控制命令 格式 场景控制代码CONTROLCMD控制命令
String controlCMD = message.split("CONTROLCMD")[1];//操作命令
String stageId = message.split("CONTROLCMD")[0];//场景id
System.out.println("接收到客户端发送的命令："+controlCMD);
//在这里编写代码，将命令发送到现场设备 这里已经拿到了按钮命令和场景id
开发人员需要在这里编写代码调用自己的方法，将命令传给现场设备。
需要自己想办法根据场景id拿到现场设备到你们设备服务端的连接，将命令传给这个连接
}
3、服务端websocket已经有了，要到前端init.json 修改webSocketUrl 的地址
