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; 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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; 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{ 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>