1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <%@ taglib prefix="sec"
4 uri="http://www.springframework.org/security/tags"%>
5
6 <!DOCTYPE html>
7 <%
8 String path = request.getContextPath();
9 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
10 + path + "/";
11 %>
12 <html>
13 <head>
14 <meta charset="utf-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
17 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
18 <link href="<%=basePath%>css/bootstrap.min14ed.css?v=3.3.6"
19 rel="stylesheet" />
20 <link href="<%=basePath%>css/font-awesome.min93e3.css?v=4.4.0"
21 rel="stylesheet" />
22 <link
23 href="<%=basePath%>css/plugins/bootstrap-table/bootstrap-table.min.css"
24 rel="stylesheet" />
25 <link href="<%=basePath%>css/animate.min.css" rel="stylesheet" />
26 <link href="<%=basePath%>css/style.min863f.css?v=4.1.0" rel="stylesheet" />
27 <link
28 href="<%=basePath%>vendors/ion.rangeSlider/css/ion.rangeSlider.css"
29 rel="stylesheet">
30 <link
31 href="<%=basePath%>vendors/ion.rangeSlider/css/ion.rangeSlider.skinFlat.css"
32 rel="stylesheet">
33 <link
34 href="<%=basePath%>css/layer/lay/layui.css"
35 rel="stylesheet">
36 <link href="<%=basePath%>css/layer/lay/picviewer_mode.css" rel="stylesheet">
37
38
39 <!--这里是多图片放大list效果结束-->
40 </head>
41 <body class="gray-bg">
42 <div class="wrapper wrapper-content" id="contentQueryId"
43 style="padding: 10px; over-fllow: hidden;">
44 <div class="row">
45 <div class="col-xs-12">
46 <div class="ibox float-e-margins">
47 <div class="ibox-title">
48 <h5>扩展信息检索</h5>
49 </div>
50 <div class="ibox-content">
51 <form id="uploadData">
52 <div class="col-xs-10">
53 <div class="col-xs-12 form-horizontal">
54 <div class="row">
55 <div class="col-xs-4">
56 <div class="form-group form-group_i">
57 <label class="col-xs-4 control-label">设备：</label>
58
59 <div class="col-xs-8">
60 <input type="text" readonly="readonly" class="form-control"
61 style="background-color: #FFFFFF; cursor: pointer; width: 200px"
62 name="facilityName" id="facilityName"
63 ondblclick="openFacilityWin()">
64 <input type="hidden" class="form-control" name="facilityID"
65 style="visibility: hidden;" id="facilityID">
66 </div>
67 </div>
68 <div class="hr-line-dashed"></div>
69 </div>
70 <div class="col-xs-4">
71 <div class="form-group form-group_i">
72 <label class="col-xs-4 control-label">开始时间：</label>
73 <div class="col-xs-8">
74 <input class="laydate-icon" required
75 readonly="readonly" name="beginTime" id="beginTime">
76 </div>
77 </div>
78 <div class="hr-line-dashed"></div>
79 </div>
80 <div class="col-xs-4">
81 <div class="form-group form-group_i">
82 <label class="col-xs-4 control-label">结束时间：</label>
83
84 <div class="col-xs-8">
85 <input class="laydate-icon" required
86 readonly="readonly" name="endTime" id="endTime">
87 </div>
88 </div>
89 <div class="hr-line-dashed"></div>
90 </div>
91 </div>
92 <div class="row">
93 <div class="col-xs-4 form-horizontal">
94 <div class="form-group form-group_i">
95 <label class="col-xs-4 control-label">检索类型：</label>
96 <div class="col-xs-8">
97 <select class="form-control" style="width: 200px"
98 name="svacinfoRetrieveType" id="svacinfoRetrieveType"
99 zx-type="select" zx-dd="svacinfoRetrieveType" zx-dv="-1"
100 zx-nt="请选择" zx-nn="true" onchange="retrieveType()">
101 </select>
102 </div>
103 </div>
104 <div class="hr-line-dashed"></div>
105 </div>
106 <div class="col-xs-4 form-horizontal">
107 <div class="form-group form-group_i">
108 <label class="col-xs-4 control-label"></label>
109
110 <div class="col-xs-8">
111 <input type="text" class="form-control" name="m3u8UrlStop" id="m3u8UrlStop"
112 style="visibility: hidden;">
113 </div>
114 </div>
115 <div class="hr-line-dashed"></div>
116 </div>
117 <div class="col-xs-4 form-horizontal">
118 <div class="form-group form-group_i">
119 <label class="col-xs-4 control-label"></label>
120
121 <div class="col-xs-8">
122 <input type="text" class="form-control" id="treeID" name="treeID"
123 style="visibility: hidden;">
124 </div>
125 </div>
126 <div class="hr-line-dashed"></div>
127 </div>
128 </div>
129 <div class="row">
130 <div class="col-xs-4" id="RetrieveContent_div">
131 <div class="form-group form-group_i">
132 <label class="col-xs-4 control-label">检索内容：</label>
133 <div class="col-xs-8">
134 <input type="text" class="form-control"
135 style="width: 200px" name="RetrieveContent"
136 id="RetrieveContent">
137 </div>
138 </div>
139 <div class="hr-line-dashed"></div>
140 </div>
141
142 <div class="col-xs-4" id="BankCardNumber_div"
143 style="display: none;">
144 <div class="form-group form-group_i">
145 <label class="col-xs-4 control-label">银行卡号：</label>
146 <div class="col-xs-8">
147 <input type="text" class="form-control"
148 style="width: 200px" name="BankCardNumber"
149 id="BankCardNumber">
150 </div>
151 </div>
152 <div class="hr-line-dashed"></div>
153 </div>
154 <div class="col-xs-4" id="IdNumber_div">
155 <div class="form-group form-group_i">
156 <label class="col-xs-4 control-label">身份证号：</label>
157 <div class="col-xs-8">
158 <input type="text" class="form-control"
159 style="width: 200px" name="IdNumber" id="IdNumber">
160 </div>
161 </div>
162 <div class="hr-line-dashed"></div>
163 </div>
164
165 <div class="col-xs-4" id="MobileEquipmentNumber_div"
166 style="display: none;">
167 <div class="form-group form-group_i">
168 <label class="col-xs-4 control-label">设备ID：</label>
169 <div class="col-xs-8">
170 <input type="text" class="form-control"
171 style="width: 200px" name="MobileEquipmentNumber"
172 id="MobileEquipmentNumber">
173 </div>
174 </div>
175 <div class="hr-line-dashed"></div>
176 </div>
177 <div class="col-xs-4" id="MobileIMSINumber_div"
178 style="display: none;">
179 <div class="form-group form-group_i">
180 <label class="col-xs-4 control-label">IMSI号：</label>
181 <div class="col-xs-8">
182 <input type="text" class="form-control"
183 style="width: 200px" name="MobileIMSINumber"
184 id="MobileIMSINumber">
185 </div>
186 </div>
187 <div class="hr-line-dashed"></div>
188 </div>
189 <div class="col-xs-4" id="IMEINumber_div"
190 style="display: none;">
191 <div class="form-group form-group_i">
192 <label class="col-xs-4 control-label">IMEI号：</label>
193 <div class="col-xs-8">
194 <input type="text" class="form-control"
195 style="width: 200px" name="IMEINumber" id="IMEINumber">
196 </div>
197 </div>
198 <div class="hr-line-dashed"></div>
199 </div>
200 </div>
201 <div class="row">
202 <div class="col-xs-4" id="MobilePhoneNumber_div"
203 style="display: none;">
204 <div class="form-group form-group_i">
205 <label class="col-xs-4 control-label">手机号：</label>
206 <div class="col-xs-8">
207 <input type="text" class="form-control"
208 style="width: 200px" name="MobilePhoneNumber"
209 id="MobilePhoneNumber">
210 </div>
211 </div>
212 <div class="hr-line-dashed"></div>
213 </div>
214 <div class="col-xs-4" id="MACAddress_div"
215 style="display: none;">
216 <div class="form-group form-group_i">
217 <label class="col-xs-4 control-label">MAC地址：</label>
218 <div class="col-xs-8">
219 <input type="text" class="form-control"
220 style="width: 200px" name="MACAddress" id="MACAddress">
221 </div>
222 </div>
223 <div class="hr-line-dashed"></div>
224 </div>
225 <div class="col-xs-4" id="OtherInformation_div"
226 style="display: none;">
227 <div class="form-group form-group_i">
228 <label class="col-xs-4 control-label">其他信息：</label>
229 <div class="col-xs-8">
230 <input type="text" class="form-control"
231 style="width: 200px" name="OtherInformation"
232 id="OtherInformation">
233 </div>
234 </div>
235 <div class="hr-line-dashed"></div>
236 </div>
237
238 <div class="col-xs-4" id="alarmTypes_div"
239 style="display: none;">
240 <div class="form-group form-group_i">
241 <label class="col-xs-4 control-label">检索内容：</label>
242 <div class="col-xs-8">
243 <select class="form-control" style="width: 200px"
244 name="alarmTypes" id="alarmTypes" zx-type="select"
245 zx-dd="alarmTypes" zx-dv="-1" zx-nt="-" zx-nn="true">
246 </select>
247 </div>
248 </div>
249 <div class="hr-line-dashed"></div>
250 </div>
251 </div>
252 </div>
253 </div>
254 </form>
255 <div class="col-xs-2">
256 <form method="get" class="form-horizontal">
257 <div class="form-group">
258 <div class="col-xs-4 col-xs-offset-2"
259 style="top: 62px; float: right; margin-right: 105px;">
260 <div class="user-button">
261 <div class="row">
262 <div class="col-xs-12"
263 style="width: 120px; height: 100px; display: block;">
264 <button id="btnQuery" type="button" onclick="btnQueryClick()"
265 class="btn btn-primary btn-xs btn-block">
266 <i></i> 查 询
267 </button>
268 </div>
269 </div>
270 </div>
271 </div>
272 </div>
273 </form>
274 </div>
275 <div style="clear: both"></div>
276 </div>
277 </div>
278 </div>
279 </div>
280
281
282 <div class="row">
283 <div class="col-xs-12" id="contestId">
284 <div class="ibox float-e-margins">
285 <div class="ibox-title">
286 <h5>查询结果</h5>
287 </div>
288 <div>
289 <div class="ibox-content" style="height: 100%;">
290 <div class="example-wrap" id="videoTable">
291 <div id="pictureArea">
292 <!-- 流式展现 -->
293 <ul class="flow-default" id="pictureFlow"></ul>
294 <!-- End Example Events -->
295 </div>
296 </div>
297 </div>
298 </div>
299 </div>
300 </div>
301 </div>
302 </div>
303 </body>
304 <script src="<%=basePath%>js/jquery.min.js?v=2.1.4"></script>
305 <script src="<%=basePath%>js/jquery-ui-1.10.4.min.js"></script>
306 <script src="<%=basePath%>js/jquery.form.js"></script>
307 <script src="<%=basePath%>js/bootstrap.min.js?v=3.3.6"></script>
308 <script
309 src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
310 <script
311 src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
312 <script
313 src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
314 <script src="<%=basePath%>js/plugins/layer/layer.js"></script>
315 <script src="<%=basePath%>js/plugins/layer/laydate/laydate.js"></script>
316 <script
317 src="<%=basePath%>vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
318 <script
319 src="<%=basePath%>vendors/zx-ui-framework/zx-component.js"></script>
320 <script src="<%=basePath%>vendors/cloud-zoom/cloud-zoom.1.0.2.js"></script>
321 <script src="<%=basePath%>js/TimeObjectUtil.js"></script>
322 <script src="<%=basePath%>js/common.js"></script>
323 <script src="<%=basePath%>js/dd.js"></script>
324 <script src="<%=basePath%>js/plugins/ztree/jquery.ztree.core.js"
325 type="text/javascript"></script>
326 <script
327 src="<%=basePath%>js/plugins/ztree/jquery.ztree.excheck.js"
328 type="text/javascript"></script>
329 <script src="<%=basePath%>modules/svacinfo/js/svacinfo_query.js"></script>
330 <script src="<%=basePath%>js/plugins/layer/layui.js"></script>
331 <script src="<%=basePath%>js/plugins/layer/lay/modules/flow.js"></script>
332 <script type="text/javascript">
333 var basePath = "<%=basePath%>";
334 </script>
335 </html>
1 var limit = 12;//每页显示多少条数据
2
3 $(document).ready(function() {
4 zx.parse();
5 initDate();
6 initLayout();
7 });
8 var facilityWinName;
9 var facilityWinID;
10
11 /**
12 * 日期初始化
13 */
14 function initDate(){
15 var start = {
16 elem : "#beginTime",
17 format : "YYYY-MM-DD hh:mm:ss",
18 min : "1900-01-01 23:59:59",
19 max : "2099-12-30 23:59:59",
20 istime : true,
21 istoday : true,
22 choose : function(datas) {
23 end.min = datas;
24 end.start = datas
25 }
26 };
27
28 var end = {
29 elem : "#endTime",
30 format : "YYYY-MM-DD hh:mm:ss",
31 min : laydate.now() ,
32 max : "2099-12-30 23:59:59",
33 istime : true,
34 istoday : false,
35 choose : function(datas) {
36 start.max = datas
37 }
38 };
39 laydate(start);
40 laydate(end);
41 $('#beginTime').val(laydate.now(0, 'YYYY-MM-DD')+" 00:00:00");
42 $('#endTime').val(laydate.now(0, 'YYYY-MM-DD')+" 23:59:59");
43 }
44
45 /**
46 * 初始化页面
47 * */
48 function initLayout() {
49 facilityWinName = $('#facilityName');
50 facilityWinID = $('#facilityID');
51 treeWinID = $('#treeID');
52 }
53
54
55
56 function openFacilityWin(){
57 var tl = facilityWinName.val();
58 if(tl!='' && tl!=null){
59 if(tl.substr(tl.length-1,1)!=';'){
60 facilityWinName.val(tl+';');
61 }
62 }
63 var t2 = facilityWinID.val();
64 if(t2!='' && t2!=null){
65 if(t2.substr(t2.length-1,1)!=';'){
66 facilityWinID.val(t2+';');
67 }
68 }
69 var t3 = treeWinID.val();
70 if(t3!='' && t3!=null){
71 if(t3.substr(t3.length-1,1)!=';'){
72 treeWinID.val(t3+';');
73 }
74 }
75 layer.open({
76 type : 2,
77 area : [ '45%', '99%' ],
78 fixed : true, //不固定
79 maxmin : false,
80 title:'请选择设备',
81 content : [ 'svacinfoDeviceTree.do', 'yes' ] //iframe的url，no代表不显示滚动条
82 });
83 }
84
85 function retrieveType(){
86 clean();
87 var svacinfoRetrieveType = $("#svacinfoRetrieveType").val();
88
89 if(svacinfoRetrieveType == 0){
90 $("#RetrieveContent_div,#IdNumber_div").attr("style","display:block;");
91 }
92 if(svacinfoRetrieveType == 2){
93 $("#RetrieveContent_div").attr("style","display:block;");
94 }
95 if(svacinfoRetrieveType == 16){
96 $("#BankCardNumber_div,#IdNumber_div").attr("style","display:block;");
97 }
98 if(svacinfoRetrieveType == 17){
99 $("#MobileEquipmentNumber_div,#MobileIMSINumber_div,#IMEINumber_div,#MobilePhoneNumber_div,#MACAddress_div,#OtherInformation_div").attr("style","display:block;");
100 }
101 if(svacinfoRetrieveType == 4){
102 //无
103 }
104 if(svacinfoRetrieveType == 6){
105 $("#alarmTypes_div option:first").prop("selected", 'selected');
106 $("#alarmTypes_div").attr("style","display:block;");
107 }
108 if(svacinfoRetrieveType == 7){
109 $("#RetrieveContent_div").attr("style","display:block;");
110 }
111 }
112 function clean(){
113 $("#RetrieveContent_div,#BankCardNumber_div,#IdNumber_div,#MobileEquipmentNumber_div,#MobileIMSINumber_div,#IMEINumber_div,#MobilePhoneNumber_div,#MACAddress_div,#OtherInformation_div,#alarmTypes_div").attr("style","display:none;");
114 $("#RetrieveContent_div input,#BankCardNumber_div input,#IdNumber_div input,#MobileEquipmentNumber_div input,#MobileIMSINumber_div input,#IMEINumber_div input,#MobilePhoneNumber_div input,#MACAddress_div input,#OtherInformation_div input,#alarmTypes_div input").val("");
115 }
116
117 //点击查询
118 function btnQueryClick(){
119 var beginTime = $("#beginTime").val();
120 var endTime = $("#endTime").val();
121 var facilityName = $("#facilityName").val();
122 if(facilityName==""||facilityName==null){
123 layer.alert("设备不能为空!");
124 return;
125 }
126 if(beginTime==""||beginTime==null){
127 layer.alert("开始时间不能为空!");
128 return;
129 }else if(endTime==""||endTime==null){
130 layer.alert("结束时间不能为空!");
131 return;
132 }else{
133 var begintime_ms = Date.parse(new Date(beginTime.replace(/-/g, "/")));//begintime 为开始时间
134 var endtime_ms = Date.parse(new Date(endTime.replace(/-/g, "/"))); // endtime 为结束时间
135 var time_ms=endtime_ms-begintime_ms; //时间差的毫秒数
136 var days=Math.floor(time_ms/(24*3600*1000));
137 if(days>30){
138 layer.alert("时间间隔不能超过30天!");
139 return;
140 }
141 }
142 searchList();
143 }
144
145 //打开视频回放弹窗
146 function openVideoPlaybackWin(obj){
147 var m3u8UrlStop;
148 var cameraId = obj.cameraId;
149 var videotapeStartTime = obj.videotapeStartTime;
150 var videotapeEndTime = obj.videotapeEndTime;
151 var url = "videoPlaybackIndex.do?cameraId="+cameraId+"&videotapeStartTime="+videotapeStartTime+"&videotapeEndTime="+videotapeEndTime;
152 var urlEn = encodeURI(url);
153 var VideoPlayId=layer.open({
154 type : 2,
155 area : [ '85%', '98%' ],
156 fixed : true, //不固定
157 maxmin : false,
158 title:'视频回放',
159 content : [ urlEn, 'yes' ]
160 ,end: function () {
161 m3u8UrlStop = $("#m3u8UrlStop").val();
162 $.ajax({
163 url : m3u8UrlStop,
164 dataType : "json",
165 success : function(data){
166 if(data.ResponseStatus.StatusCode == "0"){
167 console.log("视频停止成功！");
168 }
169 }
170 });
171 }
172 });
173 }
174 //查询功能
175 function searchList(){
176 var msg = layer.msg('努力中加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px',time: 0});
177 $('#videoTable').empty();
178 var beginTime = $('#beginTime').val();
179 var endTime = $('#endTime').val();
180 var cameraId= $('#facilityID').val();
181 var type = $('#svacinfoRetrieveType').val()
182
183 layui.use('flow', function(){
184 var $ = layui.jquery;
185 var flow = layui.flow;
186 flow.load({
187 elem: '#videoTable',
188 done: function(page, next){
189 var offset = (page - 1) * limit;
190 var lis = [];
191 var svacExtReq = {};
192 if(type == 17){
193 svacExtReq.param1 = $('#MobileEquipmentNumber').val();
194 svacExtReq.param2 = $('#MobileIMSINumber').val();
195 svacExtReq.param4 = $('#IMEINumber').val();
196 svacExtReq.param5 = $('#MobilePhoneNumber').val();
197 svacExtReq.param8 = $('#MACAddress').val();
198 svacExtReq.param9 = $('#OtherInformation').val();
199 }else if(type == 16){
200 svacExtReq.param2 = $('#BankCardNumber').val();
201 svacExtReq.param4 = $('#IdNumber').val();
202 }else if(type == 0){//人员
203 svacExtReq.param2 = $('#RetrieveContent').val();
204 svacExtReq.param1 = $('#IdNumber').val();
205 }else if(type == 2){//车辆
206 svacExtReq.param2 = $('#RetrieveContent').val();
207 }
208
209 svacExtReq.startTime = beginTime;
210 svacExtReq.endTime = endTime;
211 svacExtReq.cameraId = cameraId;
212 svacExtReq.type = type;
213 svacExtReq.limit = limit;
214 svacExtReq.offset = offset;
215 svacExtReq.isPicUrl = 1;
216 $.ajax({
217 url : "querySvac",
218 contentType : "application/json",
219 type : "post",
220 data :JSON.stringify(svacExtReq),
221 dataType : 'json',
222 success : function(result) {
223 var lis = [];
224 var htmlText = '';
225
226 if (result.result.code != '0') {
227 layer.alert(result.result.msg);
228 next(lis.join(''), false);
229 return;
230 }
231 if (result.rows.length == 0){
232 next(lis.join(''), false);
233 return;
234 }
235 var c = 0;
236 var imgerror = "this.src='img/thumbnail.jpg'";
237 var datas = result.rows;
238 var evt = "";
239 var en = "";
240 for(var i = 0; i < datas.length; i++){
241 c = c + 1;
242 if (c == 1) {
243 htmlText = htmlText + '<div class="row">';
244 }
245 en = datas[i];
246 obj = JSON.stringify(en).replace(/\"/g,"'");
247 htmlText += ' <!--图片展示组-->';
248 htmlText += ' <div class="col-xs-3" id="container">';
249 htmlText += ' <div class="file-box" style="float: none;width: 100%;margin: 0px auto;">';
250 htmlText += ' <div class="file">';
251 htmlText += ' <span class="corner"></span>';
252 htmlText += ' <a href="javascript:openVideoPlaybackWin('+obj+')">';
253 htmlText += ' <div class="image" align="center">';
254 htmlText += ' <img onerror="'+imgerror+'" src="'+datas[i].picUrl+'">';
255 htmlText += ' </div>';
256 htmlText += ' </a>';
257 htmlText += ' <div class="file-name" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">';
258 if(type == 17){//手机
259 htmlText += ' <small style="margin-left:30px" title='+datas[i].time+'>'+datas[i].time+'<br /></small>';
260 htmlText += ' <small title=设备ID：'+datas[i].param1+'>设备ID：'+datas[i].param1+'<br /></small>';
261 htmlText += ' <small title=IMSI号：'+datas[i].param2+'>IMSI号：'+datas[i].param2+'<br /></small>';
262 htmlText += ' <small title=IMEI号：'+datas[i].param4+'>IMEI号：'+datas[i].param4+'<br /></small>';
263 htmlText += ' <small title=IMEI号：'+datas[i].param5+'>手机号：'+datas[i].param5+'<br /></small>';
264 htmlText += ' <small title=MAC：'+datas[i].param8+'>MAC：'+datas[i].param8+'<br /></small>';
265 htmlText += ' <small title=其他：'+datas[i].param9+'>其他：'+datas[i].param9+'<br /></small>';
266 htmlText += ' <button style="margin-left:160px" onclick="showDetails('+obj+')" id="btnQuery" type="button">';
267 htmlText += ' 查询详情';
268 htmlText += ' </button>';
269 }else if(type == 0){//人员
270 htmlText += ' <small style="margin-left:30px" title='+datas[i].time+'>'+datas[i].time+'<br /></small>';
271 htmlText += ' <small title=身份证号：'+datas[i].param1+'>身份证号：'+datas[i].param1+'<br /></small>';
272 htmlText += ' <small title=姓名：'+datas[i].param2+'>姓名：'+datas[i].param2+'<br /></small>';
273 htmlText += ' <button style="margin-left:160px" onclick="showDetails('+obj+')" id="btnQuery" type="button">';
274 htmlText += ' 查询详情';
275 htmlText += ' </button>';
276 }else if(type == 4){//人脸
277 htmlText += ' <small style="margin-left:30px" title='+datas[i].time+'>'+datas[i].time+'<br /></small>';
278 htmlText += ' <small title=人脸ID：'+datas[i].param1+'>人脸ID：'+datas[i].param1+'<br /></small>';
279 }else if(type == 2){//车辆
280 htmlText += ' <small style="margin-left:30px" title='+datas[i].time+'>'+datas[i].time+'<br /></small>';
281 htmlText += ' <small title=车道号：'+datas[i].param1+'>车道号：'+datas[i].param1+'<br /></small>';
282 htmlText += ' <small title=车牌号：'+datas[i].param2+'>车牌号：'+datas[i].param2+'<br /></small>';
283 htmlText += ' <button style="margin-left:160px" onclick="showDetails('+obj+')" id="btnQuery" type="button">';
284 htmlText += ' 查询详情';
285 htmlText += ' </button>';
286 }else if(type == 16){//交易
287 htmlText += ' <small style="margin-left:30px" title='+datas[i].time+'>'+datas[i].time+'<br /></small>';
288 htmlText += ' <small title=点钞信息：'+datas[i].param1+'>点钞信息：'+datas[i].param1+'<br /></small>';
289 htmlText += ' <small title=银行卡号：'+datas[i].param2+'>银行卡号：'+datas[i].param2+'<br /></small>';
290 htmlText += ' <small title=身份证号：'+datas[i].param4+'>身份证号：'+datas[i].param4+'<br /></small>';
291 htmlText += ' <button style="margin-left:160px" onclick="showDetails('+obj+')" id="btnQuery" type="button">';
292 htmlText += ' 查询详情';
293 htmlText += ' </button>';
294 }
295 htmlText += ' </div>';
296 htmlText += ' </div>';
297 htmlText += ' </div>';
298 htmlText += ' </div>';
299 if(c == 4 || i == datas.length - 1){
300 htmlText = htmlText + '</div>';
301 c = 0;
302 }
303 lis.push(htmlText);
304 htmlText = "";
305 }
306 if (datas.length < limit) {
307 next(lis.join(''), false);
308 } else {
309 next(lis.join(''), true);
310 }
311 },
312 complete:function(XMLHttpRequest,textStatus){
313 layer.close(msg);
314 },
315 error:function(XMLHttpRequest, textStatus, errorThrown){
316 // window.location.href = 'logout';
317 layer.alert('未知异常:'+textStatus);
318 }
319 });
320 }
321 });
322 });
323 }
324
325 function showDetails(obj){
326 var type = obj.type;
327 var time = obj.time;
328 var cameraName = obj.cameraName;
329 var param1 = obj.param1;
330 var param2 = obj.param2;
331 var param4 = obj.param4;
332 var param5 = obj.param5;
333 var param6 = obj.param6;
334 var param7 = obj.param7;
335 var param8 = obj.param8;
336 var param9 = obj.param9;
337 if(!cameraName||cameraName==""||cameraName=="undefined"){
338 cameraName="";
339 }
340
341 var url = "showDetails.do?type="+type+"&time="+time+"&cameraName="+cameraName+"¶m1="+param1+"¶m2="+param2+"¶m4="+param4+"¶m5="+param5+"¶m6="+param6+"¶m7="+param7+"¶m8="+param8+"¶m9="+param9;
342 var urlEn = encodeURI(url);
343 layer.open({
344 type : 2,
345 area : [ '45%', '80%' ],
346 fixed : true,
347 maxmin : false,
348 title:'详细信息',
349 content : [ urlEn, 'yes' ]
350 });
351 }
1 $(document).ready(function() {
2 initTreeDevice();
3 });
4 /**************************init***************************/
5 /**************************start树********************************/
6 var zTree_Menu = null;
7 var Maximum = 5;//最多选中设备数量
8 function initTreeDevice(){
9 var loadingDate = [{id:"loading",pId:"0", name:"数据加载中。。。", "nocheck":true,icon:""}];
10 $.fn.zTree.init($("#treeDemo"), batch_cam_setting, loadingDate);
11
12 $.ajax({
13 type : "POST",
14 url:"getAreaTreeList",
15 dataType : "json",
16 async : true,
17 success : function(data) {
18 data = sortByKey(data,'name');
19 $.fn.zTree.destroy("treeDemo");
20 $.fn.zTree.init($("#treeDemo"), batch_cam_setting, data);
21
22 var tree_e = $.fn.zTree.getZTreeObj("treeDemo");
23 var tollId = parent.treeWinID.val();
24 var arrayId = tollId.split (";");
25 for(var i = 0;i<data.length;i++){
26 if(arrayId.indexOf(data[i].id)>-1){
27 node = tree_e.getNodeByParam("id", data[i].id);
28 tree_e.checkNode(node);
29 }
30 }
31 },
32 error : function(jqXHR, textStatus, errorThrown) {
33 alert(jqXHR.responseText);
34 }
35 });
36
37 }
38
39
40 var batch_cam_setting = {
41 check: {
42 enable: true,
43 chkStyle: "checkbox",
44 chkboxType: { "Y":"p", "N":"ps"}
45 // chkboxType: { "Y":"", "N":""}
46 },
47 data: {
48 simpleData: {
49 enable: true
50 }
51 },
52 callback: {
53 onExpand: beforeExpand,
54 // onClick: zTreeOnClick,
55 onCheck: onCheck
56 },
57 view:{
58 expandSpeed: ""
59 }
60 };
61
62
63 function query(){
64 var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
65 var selectedNodes = zTreeObj.getSelectedNodes();
66
67 var svacName = $("#svacName").val();
68 if(svacName==null || svacName == ''){
69 initTreeDevice();
70 return;
71 }
72 var reqJson = {};
73 reqJson.name = svacName;
74 if(selectedNodes!=null&&selectedNodes!=''&&selectedNodes[0].id!="<ROOT>"){
75 reqJson.nodeId = selectedNodes[0].id;
76 }
77 $.ajax({
78 type:"POST",
79 contentType : "application/json",
80 url:"nextNodeTree",
81 data:JSON.stringify(reqJson),
82 dataType : "json",
83 success: function(data) {
84 try{
85 for(var j = 0; j < data.length; j ++){
86 data[j].hasLoad = true;
87 }
88 data = sortByKey(data,'name');
89 $.fn.zTree.destroy("treeDemo");
90 $.fn.zTree.init($("#treeDemo"), batch_cam_setting, data);
91 }catch(e){
92 alert(e);
93 }
94 }
95 });
96 }
97
98
99
100 function beforeExpand(event,treeId, treeNode) {
101 var svacName = $("#svacName").val();
102 if(treeNode.hasLoad){
103 return;
104 }
105 if(treeNode.id!='<ROOT>' && !(treeNode.hasLoad)){
106 if(treeNode.type=="AREA" || treeNode.type=="DISTRICT"){
107 var reqJson = {};
108 reqJson.nodeId = treeNode.id;
109 $.ajax({
110 type:"POST",
111 contentType : "application/json",
112 url:"nextNodeTree",
113 data:JSON.stringify(reqJson),
114 dataType : "json",
115 success: function(data) {
116 var node;
117 var parentNode;
118 try{
119 sortByKey(data,'name');
120 var tree_e = $.fn.zTree.getZTreeObj(treeId);
121 tree_e.addNodes(treeNode, data);
122
123 var tollId = parent.treeWinID.val();
124 var arrayId = tollId.split (";");
125 for(var i = 0;i<data.length;i++){
126 if(arrayId.indexOf(data[i].id)>-1){
127 node = tree_e.getNodeByParam("id", data[i].id);
128 tree_e.checkNode(node);
129 }
130 }
131
132
133 treeNode.hasLoad = true;
134 }catch(e){
135 alert(e);
136 }
137 }
138 });
139 }
140 }
141 }
142
143
144 //function zTreeOnClick(event, treeId, treeNode){
145 // chooseNode = treeNode;
146 //}
147
148 /**
149 * 选中
150 * @param treeNode
151 * @returns
152 */
153 //function customOnCheckedCheck(treeNode){
154 // if(parent.facilityWinName){
155 // var name = parent.facilityWinName.val();
156 // var arrayName = name.split(";")
157 // arrayName.push(treeNode.name);
158 // var nArrayName = $.grep(arrayName,function(n){return $.trim(n).length>0;});
159 // parent.facilityWinName.val(nArrayName.join(";"));
160 // }
161 // var tollId = parent.facilityWinID.val();
162 // var arrayId = tollId.split (";");
163 // arrayId.push(treeNode.id);
164 // var nArrayId = $.grep(arrayId,function(n){return $.trim(n).length>0;});
165 // parent.facilityWinID.val(nArrayId.join(";"));
166 //}
167 /**
168 * 取消选中
169 * @param treeNode
170 * @returns
171 */
172 //function customCheckedCheck(treeNode){
173 // if(parent.facilityWinName){
174 // var name = parent.facilityWinName.val();
175 // var arrayName = name.split(";")
176 // arrayName.splice($.inArray(treeNode.name,arrayId),1);
177 // var nArrayName = $.grep(arrayName,function(n){return $.trim(n).length>0;});
178 // parent.facilityWinName.val(nArrayName.join(";"));
179 // }
180 //
181 // var tollId = parent.facilityWinID.val();
182 // var arrayId = tollId.split (";");
183 // arrayId.splice($.inArray(treeNode.id,arrayId),1);
184 // var nArrayId = $.grep(arrayId,function(n){return $.trim(n).length>0;});
185 // parent.facilityWinID.val(nArrayId.join(";"));
186 //
187 //}
188 function onCheck(event, treeId, treeNode) {
189 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
190 var nodes=treeObj.getCheckedNodes(true);
191 // if(treeNode!=null&&treeNode.id=="<ROOT>"){
192 // if(treeNode.checked){
193 // treeObj.checkNode(treeNode, false, true);
194 // }else{
195 // treeObj.checkNode(treeNode, true, true);
196 // }
197 // alert("根节点不允许选择！");
198 // return;
199 // }
200
201 var node;
202 var a=0;
203 for(var i = 0;i<nodes.length;i++){
204 node = nodes[i];
205 if(!node.isParent){
206 a=a+1;
207 if(a>Maximum){
208 if(treeNode.checked){
209 treeObj.checkNode(treeNode, false, true);
210 }else{
211 treeObj.checkNode(treeNode, true, true);
212 }
213 alert("最多选择5个设备！");
214 return;
215 }
216 }
217 }
218
219 var childrenTreeNode;
220
221 if(!treeNode.hasLoad){
222 if(treeNode.checked){
223 treeObj.checkNode(treeNode, false, true);
224 }else{
225 treeObj.checkNode(treeNode, false, true);
226 }
227 alert("请展开后再选择！");
228 return;
229 }
230
231 if (treeNode.checked) {
232 if(treeNode.isParent){
233 var childrenNodes = treeNode.children;
234 if (childrenNodes) {
235 for (var i = 0; i < childrenNodes.length; i++) {
236 childrenTreeNode = childrenNodes[i];
237 if(!childrenTreeNode.isParent){
238 // treeObj = $.fn.zTree.getZTreeObj("treeDemo");
239 // nodes=treeObj.getCheckedNodes(true);
240 // for(var i = 0;i<nodes.length;i++){
241 // node = nodes[i];
242 // if(!node.isParent){
243 // a=a+1;
244 // if(a>Maximum){
245 // if(treeNode.checked){
246 // treeObj.checkNode(treeNode, false, true);
247 // }else{
248 // treeObj.checkNode(treeNode, true, true);
249 // }
250 // alert("最多选择5个设备！");
251 // return;
252 // }
253 // }
254 // }
255 treeObj.checkNode(childrenTreeNode, true, true);
256 }
257 }
258 }
259
260 }else{
261 treeObj.checkNode(treeNode, true, true);
262 }
263 } else {
264 if(treeNode.isParent){
265 var childrenNodes = treeNode.children;
266 if (childrenNodes) {
267 for (var i = 0; i < childrenNodes.length; i++) {
268 childrenTreeNode = childrenNodes[i];
269 if(!childrenTreeNode.isParent){
270 treeObj.checkNode(childrenTreeNode, false, true);
271 }
272 }
273 }
274
275 }else{
276 treeObj.checkNode(treeNode, false, true);
277 }
278 }
279 }
280 /** ************************end树********************************* */
281 /**
282 * 确定
283 */
284 function layerColse(){
285 parent.facilityWinName.val('');
286 parent.facilityWinID.val('');
287 parent.treeWinID.val('');
288 var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
289 var nodes=treeObj.getCheckedNodes(true);
290 var fnameId = parent.facilityWinName.val();
291 var fidId = parent.facilityWinID.val();
292 var treeId = parent.treeWinID.val();
293
294 var fnameArray = fnameId.split (";");
295 var fidArray = fidId.split (";");
296 var treeArrayId = treeId.split (";");
297
298 var node;
299 for(var i = 0;i<nodes.length;i++){
300 node = nodes[i];
301 if(!node.isParent){
302 fnameArray.push(nodes[i].name);
303 fidArray.push(nodes[i].id);
304 }
305 treeArrayId.push(nodes[i].id);
306 }
307
308 var fnames = $.grep(fnameArray,function(n){return $.trim(n).length>0;});
309 parent.facilityWinName.val(fnames.join(";"));
310
311 var fids = $.grep(fidArray,function(n){return $.trim(n).length>0;});
312 if(fids.length>5){
313 alert("最多选择5个设备！");
314 return;
315 }
316 parent.facilityWinID.val(fids.join(";"));
317
318 var tids = $.grep(treeArrayId,function(n){return $.trim(n).length>0;});
319 parent.treeWinID.val(tids.join(";"));
320
321 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
322 parent.layer.close(index); //再执行关闭
323 }
324 /**
325 * 取消数据
326 */
327 function colseData(){
328 parent.facilityWinID.val('');//清空数据
329 parent.treeWinID.val('');//清空数据
330 if(parent.facilityWinName){
331 parent.facilityWinName.val('')
332 }
333 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
334 parent.layer.close(index); //再执行关闭
335 }
336
337
338
339 /** 地区排序
340 * array json对象数组排序 数字，字母，符号，汉字顺序排序
341 * @param array json对象数组
342 * @param key 比较字段
343 * @returns
344 */
345 function sortByKey(array, key) {
346 //未做是否为Array类型判断
347 if(!array){
348 return;
349 }
350 return array.sort(function(a, b) {
351 var aType = a.type;
352 var bType = b.type;
353 if(aType=='district' && bType=='district'){
354 if(a.sortId!=null&&b.sortId==null){
355 return -1;
356 }else if(a.sortId==null&&b.sortId!=null){
357 return 1;
358 }else if(a.sortId!=null&&b.sortId!=null){
359 return a.sortId-b.sortId;
360 }
361 }
362 if((aType=='district'||aType=='area')&&!(bType=='district'||bType=='area')){
363 return -1;
364 }else if(!(aType=='district'||aType=='area')&&(bType=='district'||bType=='area')){
365 return 1;
366 }
367
368 var x = a[key]; var y = b[key];
369
370 var re=/^[0-9a-zA-Z]+/;
371 if(re.test(x)&&!re.test(y)){
372 return -1;
373 }
374 if(!re.test(x)&&re.test(y)){
375 return 1;
376 }
377 return x.localeCompare(y);
378 });
379 }
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link href="<%=basePath%>css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" />
<link href="<%=basePath%>css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet" />
<link href="<%=basePath%>css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="<%=basePath%>css/animate.min.css" rel="stylesheet" />
<link href="<%=basePath%>css/style.min862f.css?v=4.1.0" rel="stylesheet" />
<link href="<%=basePath%>vendors/ion.rangeSlider/css/ion.rangeSlider.css" rel="stylesheet">
<link href="<%=basePath%>vendors/ion.rangeSlider/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
<!-- 添加树css -->
<link rel="stylesheet" href="<%=basePath%>css/plugins/zTree/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/css/ztree-common.css">
<style type="text/css">
.divcss5-b{ margin-left:5px;overflow-y:scroll; overflow-x:scroll;}
.divcss5-b{ width:99%; height:332px; float:left; border:1px solid #AAAAAA}
</style>
<link href="<%=basePath%>vendors/cloud-zoom/cloud-zoom.css" rel="stylesheet">
</head>
<body class="white-bg">
<div class="wrapper wrapper-content">
<div class="row">
<form id="tollgateFormId">
<div class="col-xs-6">
<div class="form-group ">
<input type="text" class="form-control" placeholder="设备名称/国标编号" name="svacName" id="svacName">
</div>
<div class="hr-line-dashed"></div>
</div>
</form>
<div class="col-xs-6">
<div class="form-group">
<button id="btnQuery" name="btnQuery" class="btn btn-primary" type="submit" onclick="query()">查 询</button>
</div>
<div class="hr-line-dashed"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group divcss5-b">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
<div class="row">
<div style="text-align: center;">
<div class="hr-line-dashed"></div>
<div class="col-xs-12">
<div class="form-group" >
<p>
<button class="btn btn-primary " type="button" onclick="layerColse()"><i class="fa fa-check"></i> 确定</button>
<button class="btn btn-primary" type="button" onclick="colseData()"><i class="fa fa-times"></i> 取消</button>
</p>
</div>
</div>
</div>
</div>
</div>
<script src="<%=basePath%>js/jquery.min.js?v=2.1.4"></script>
<script src="<%=basePath%>js/jquery-ui-1.10.4.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="<%=basePath%>js/plugins/layer/layer.js"></script>
<script src="<%=basePath%>js/plugins/layer/laydate/laydate.js"></script>
<script src="<%=basePath%>vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<script src="<%=basePath%>vendors/zx-ui-framework/zx-component.js"></script>
<script type="text/javascript" src="<%=basePath%>js/plugins/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="<%=basePath%>js/plugins/ztree/jquery.ztree.excheck.js"></script>
<script src="<%=basePath%>modules/svacinfo/js/svacinfoDeviceTree.js" type="text/javascript"></script>
</body>
</html>
浙公网安备 33010602011771号