| | |
| | | <!-- END CONTENT PART --> |
| | | |
| | | <!-- END MAIN CONTAINER --> |
| | | <% |
| | | String username=(String)session.getAttribute("username"); |
| | | if(username==null || username.equals("")){ |
| | | request.getRequestDispatcher("/hxzk/login.jsp").forward(request,response); |
| | | return; |
| | | } |
| | | %> |
| | | <!-- BEGIN GLOBAL MANDATORY SCRIPTS --> |
| | | <script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/bootstrap/js/popper.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/assets/js/app.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/promise-polyfill.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/sweetalert2.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/custom-sweetalert.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/jszip.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.html5.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.print.min.js"></script> |
| | | <script> |
| | | var result; |
| | | $(document).ready(function () { |
| | | App.init(); $.ajax({ async: false, type: "POST", url: "/hxzkoa/getSysSetting_list.do", data: {}, dataType: "json", success: function (data) { /* title = data[0].title; document.title = title; */ }, }); |
| | | result = getAllMap(); //result["mapname"]=mapnamelist, ['floor']=floorlist |
| | | diaoyonghuatu(result); |
| | | }); |
| | | |
| | | $('.header-page').load('/hxzkoa/hxzk/top.html'); $('.login-page').load('/hxzkoa/hxzk/head.html'); |
| | | </script> |
| | | <script src="/hxzkoa/hxzk/assets/js/custom.js"></script> |
| | | <!-- END GLOBAL MANDATORY SCRIPTS --> |
| | | |
| | | <!-- > BEGIN PAGE FUNCTION SCRIPTS --> |
| | | |
| | | |
| | | <script> |
| | | //首页地图控制 |
| | | var full_screen = false; |
| | | var timer_list = []; |
| | | function getAllMap() { |
| | | var map = []; |
| | | var floor = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/qiehuanditu_option.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | if (data.length == 0) { |
| | | document.getElementById("map0").style.display = "none"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | } else if (data.length == 1) { |
| | | document.getElementById("map0").style.width = "100%"; |
| | | document.getElementById("mapname0").innerHTML = data[0].mapname; |
| | | document.getElementById("maphead0").style.height = "800px"; |
| | | document.getElementById("wrap0").style.height = "750px"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | full_screen = true; |
| | | } else if (data.length == 2) { |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | }; |
| | | for (var i = 0; i < data.length; i++) { |
| | | str = "mapname" + i; |
| | | document.getElementById(str).innerHTML = data[i].mapname; |
| | | map.push(data[i].mapname); |
| | | floor.push(data[i].floor); |
| | | if (i == 3) { |
| | | break; |
| | | } |
| | | }; |
| | | }, |
| | | <% String username=(String)session.getAttribute("username"); if(username==null || username.equals("")){ |
| | | request.getRequestDispatcher("/hxzk/login.jsp").forward(request,response); return; } %> |
| | | <!-- BEGIN GLOBAL MANDATORY SCRIPTS --> |
| | | <script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/bootstrap/js/popper.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/assets/js/app.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/promise-polyfill.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/sweetalert2.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/sweetalerts/custom-sweetalert.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/jszip.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.html5.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.print.min.js"></script> |
| | | <script> |
| | | var result; |
| | | $(document).ready(function () { |
| | | App.init(); $.ajax({ async: false, type: "POST", url: "/hxzkoa/getSysSetting_list.do", data: {}, dataType: "json", success: function (data) { /* title = data[0].title; document.title = title; */ }, }); |
| | | result = getAllMap(); //result["mapname"]=mapnamelist, ['floor']=floorlist |
| | | diaoyonghuatu(result); |
| | | }); |
| | | var result = []; |
| | | result['map'] = map; |
| | | result['floor'] = floor; |
| | | return result |
| | | } |
| | | |
| | | </script> |
| | | $('.header-page').load('/hxzkoa/hxzk/top.html'); $('.login-page').load('/hxzkoa/hxzk/head.html'); |
| | | </script> |
| | | <script src="/hxzkoa/hxzk/assets/js/custom.js"></script> |
| | | <!-- END GLOBAL MANDATORY SCRIPTS --> |
| | | |
| | | <!-- 常用函数 --> |
| | | <script> |
| | | function getTruemap_all() { |
| | | var map_wl = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/floornumTomap_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | map_wl[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | map_wl[data[i].floor].push([data[i].x_Truelength, data[i].y_Truewidth]); |
| | | } |
| | | }, |
| | | }); |
| | | return map_wl; |
| | | }; |
| | | <!-- > BEGIN PAGE FUNCTION SCRIPTS --> |
| | | |
| | | function getYuandian_all() { |
| | | var yuandian = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/floornumTomap_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | yuandian[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | yuandian[data[i].floor].push([data[i].x0_length, data[i].y0_width]); |
| | | } |
| | | } |
| | | }); |
| | | return yuandian; |
| | | }; |
| | | |
| | | function getSystemSetting() { |
| | | var sysset = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getSysSetting_list.do", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | sysset = data; |
| | | }, |
| | | }); |
| | | return sysset; |
| | | }; |
| | | |
| | | function loadImages(sources, callback) { |
| | | var count = 0, |
| | | images = {}, |
| | | imgNum = 0; |
| | | for (src in sources) { |
| | | imgNum++; |
| | | } |
| | | for (src in sources) { |
| | | images[src] = new Image(); |
| | | |
| | | images[src].onload = function () { |
| | | if (++count >= imgNum) { |
| | | callback(images); |
| | | } |
| | | } |
| | | images[src].src = sources[src]; |
| | | } |
| | | }; |
| | | |
| | | function getTrackColor(yanse) { |
| | | var color; |
| | | if (yanse == "红色") { |
| | | var color = "red"; |
| | | } else if (yanse == "绿色") { |
| | | var color = "green"; |
| | | } else if (yanse == "蓝色") { |
| | | var color = "blue"; |
| | | } else if (yanse == "白色") { |
| | | var color = "white"; |
| | | } else if (yanse == "黑色") { |
| | | var color = "black"; |
| | | } else if (yanse == "黄色") { |
| | | var color = "yellow"; |
| | | } |
| | | return color |
| | | }; |
| | | |
| | | function getExistFence_all(leixing) { |
| | | var fencelist = {}; |
| | | var fencecolor = {}; |
| | | var fencename = {}; |
| | | var fencetype = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getFloorFence_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | fencelist[tmpl[i]] = []; |
| | | fencecolor[tmpl[i]] = []; |
| | | fencename[tmpl[i]] = []; |
| | | fencetype[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | fencelist[data[i].floor].push(data[i].zuobiao); |
| | | fencecolor[data[i].floor].push(data[i].color); |
| | | fencename[data[i].floor].push(data[i].name); |
| | | fencetype[data[i].floor].push(data[i].type); |
| | | } |
| | | } |
| | | }); |
| | | if (leixing == "zuobiao") { |
| | | return fencelist |
| | | } else if (leixing == "color") { |
| | | return fencecolor |
| | | } else if (leixing == "name") { |
| | | return fencename |
| | | } else if (leixing == "type") { |
| | | return fencetype |
| | | }; |
| | | }; |
| | | |
| | | function getDrawColor(yanse) { |
| | | var color; |
| | | if (yanse == "红色") { |
| | | var color = "rgba(255,0,0,0.3)"; |
| | | } else if (yanse == "绿色") { |
| | | var color = "rgba(0,255,0,0.3)"; |
| | | } else if (yanse == "蓝色") { |
| | | var color = "rgba(0,0,255,0.3)"; |
| | | } else if (yanse == "白色") { |
| | | var color = "rgba(255,255,255,0.3)"; |
| | | } else if (yanse == "黑色") { |
| | | var color = "rgba(0,0,0,0.3)"; |
| | | } |
| | | return color |
| | | }; |
| | | function inFenceOrNot(fence_list, node_list) { |
| | | //fence_list[x,y] |
| | | //node_list[x,y] |
| | | if (fence_list.length == 2) { //矩形 |
| | | if (node_list[0] >= Math.min(fence_list[0][0], fence_list[1][0]) && node_list[0] <= Math.max(fence_list[0][0], fence_list[1][0])) { |
| | | if (node_list[1] >= Math.min(fence_list[0][1], fence_list[1][1]) && node_list[1] <= Math.max(fence_list[0][1], fence_list[1][1])) { |
| | | return true //在考勤区域 |
| | | } |
| | | } |
| | | return false //不在考勤区域 |
| | | } else if (fence_list.length > 2) { //多边形 |
| | | for (var c = false, i = -1, l = fence_list.length, j = l - 1; ++i < l; j = i) |
| | | ((fence_list[i][1] <= node_list[1] && node_list[1] < fence_list[j][1]) || (fence_list[j][1] <= node_list[1] && node_list[1] < fence_list[i][1])) |
| | | && (node_list[0] < (fence_list[j][0] - fence_list[i][0]) * (node_list[1] - fence_list[i][1]) / (fence_list[j][1] - fence_list[i][1]) + fence_list[i][0]) |
| | | && (c = !c); |
| | | return c; |
| | | } |
| | | }; |
| | | |
| | | function getGas(leixing) { |
| | | var gaslist = []; |
| | | var gasnongdu = []; |
| | | var gastype = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getGas_list.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | gaslist.push([data[i].x, data[i].y]); |
| | | gasnongdu.push(data[i].nong_du); |
| | | gastype.push(data[i].gas_type); |
| | | } |
| | | } |
| | | }); |
| | | if (leixing == "zuobiao") { |
| | | return gaslist |
| | | } else if (leixing == "type") { |
| | | return gastype |
| | | } else if (leixing == "nongdu") { |
| | | return gasnongdu |
| | | }; |
| | | }; |
| | | |
| | | function getRealPosition(current_floor) { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealPosition.do", |
| | | dataType: 'json', |
| | | data: { |
| | | floor: current_floor, |
| | | }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | //playMark[id,name,power,life,x,y,time] |
| | | realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].posx, data[i].posy, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sousuo, data[i].shipin]) |
| | | } |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | |
| | | function str_to_time(str) { |
| | | //根据字符串转换成对应的时间(秒) |
| | | if (str == "不显示实时轨迹") { |
| | | return 0; |
| | | } else if (str == "10秒钟") { |
| | | return 10; |
| | | } else if (str == "30秒钟") { |
| | | return 30; |
| | | } else if (str == "1分钟") { |
| | | return 60; |
| | | } else if (str == "10分钟") { |
| | | return 600; |
| | | } else if (str == "30分钟") { |
| | | return 1800; |
| | | } else if (str == "1小时") { |
| | | return 3600; |
| | | }; |
| | | }; |
| | | |
| | | function getTracknow(current_floor, tagid_str, time) { |
| | | var finalrealtrack = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealTrack.do", |
| | | dataType: 'json', |
| | | data: { |
| | | time: time, |
| | | floor: current_floor, |
| | | tagid: tagid_str, |
| | | }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | finalrealtrack[data[i][0].tagid] = []; |
| | | for (var j = 0; j < data[i].length; j++) { |
| | | finalrealtrack[data[i][0].tagid].push([data[i][j].x, data[i][j].y, data[i][j].time]) |
| | | } |
| | | } |
| | | }, |
| | | }); |
| | | return finalrealtrack; |
| | | }; |
| | | |
| | | function getAnchorInfo_all() { |
| | | var anchorList_on = {}; |
| | | var anchorList_off = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getAnchorInfo_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].layer); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | anchorList_on[tmpl[i]] = []; |
| | | anchorList_off[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | if (data[i].anchormode == "1") { |
| | | anchorList_on[data[i].layer].push([data[i].anchorid, data[i].posx, data[i].posy, data[i].posz, data[i].GreateTime]); |
| | | } else if (data[i].anchormode == "0") { |
| | | anchorList_off[data[i].layer].push([data[i].anchorid, data[i].posx, data[i].posy, data[i].posz, data[i].GreateTime]); |
| | | |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | return [anchorList_on, anchorList_off] |
| | | }; |
| | | |
| | | /**该方法用来绘制一个有填充色的圆角矩形 |
| | | *@param cxt:canvas的上下文环境 |
| | | *@param x:左上角x轴坐标 |
| | | *@param y:左上角y轴坐标 |
| | | *@param width:矩形的宽度 |
| | | *@param height:矩形的高度 |
| | | *@param radius:圆的半径 |
| | | *@param fillColor:填充颜色 |
| | | **/ |
| | | function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) { |
| | | //圆的直径必然要小于矩形的宽高 |
| | | if (2 * radius > width || 2 * radius > height) { return false; } |
| | | |
| | | cxt.save(); |
| | | cxt.translate(x, y); |
| | | //绘制圆角矩形的各个边 |
| | | drawRoundRectPath(cxt, width, height, radius); |
| | | cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值 |
| | | cxt.fill(); |
| | | cxt.restore(); |
| | | } |
| | | |
| | | function drawRoundRectPath(cxt, width, height, radius) { |
| | | cxt.beginPath(0); |
| | | //从右下角顺时针绘制,弧度从0到1/2PI |
| | | cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); |
| | | |
| | | //矩形下边线 |
| | | cxt.lineTo(radius, height); |
| | | |
| | | //左下角圆弧,弧度从1/2PI到PI |
| | | cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); |
| | | |
| | | //矩形左边线 |
| | | cxt.lineTo(0, radius); |
| | | |
| | | //左上角圆弧,弧度从PI到3/2PI |
| | | cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); |
| | | |
| | | //上边线 |
| | | cxt.lineTo(width - radius, 0); |
| | | |
| | | //右上角圆弧 |
| | | cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); |
| | | |
| | | //右边线 |
| | | cxt.lineTo(width, height - radius); |
| | | cxt.closePath(); |
| | | } |
| | | </script> |
| | | <!-- 常用函数结束 --> |
| | | |
| | | <!-- 调用室内定位地图功能 --> |
| | | <script> |
| | | function diaoyonghuatu(result) { |
| | | |
| | | var truemap_list = getTruemap_all(); |
| | | var yuandian_list = getYuandian_all(); |
| | | var fencezuobiao_list = getExistFence_all("zuobiao"); |
| | | var fencecolor_list = getExistFence_all("color"); |
| | | var fencename_list = getExistFence_all("name"); |
| | | var fencetype_list = getExistFence_all("type"); |
| | | var onlineAnchorinfo_list = getAnchorInfo_all()[0]; |
| | | var offlineAnchorinfo_list = getAnchorInfo_all()[1]; |
| | | |
| | | //读取系统设置 |
| | | var sysSetting = getSystemSetting(); |
| | | |
| | | for (var i = 0; i < result['map'].length; i++) { |
| | | var cf = result['floor'][i];//当前floor |
| | | var tml = []; |
| | | if (truemap_list[cf]) { |
| | | tml = truemap_list[cf]; |
| | | }; |
| | | var ydl = []; |
| | | if (yuandian_list[cf]) { |
| | | ydl = yuandian_list[cf]; |
| | | }; |
| | | var fzbl = []; |
| | | if (fencezuobiao_list[cf]) { |
| | | fzbl = fencezuobiao_list[cf]; |
| | | }; |
| | | var fcl = []; |
| | | if (fencecolor_list[cf]) { |
| | | fcl = fencecolor_list[cf]; |
| | | }; |
| | | var fnl = []; |
| | | if (fencename_list[cf]) { |
| | | fnl = fencename_list[cf]; |
| | | }; |
| | | var ftl = [] |
| | | if (fencetype_list[cf]) { |
| | | ftl = fencetype_list[cf]; |
| | | }; |
| | | var ail_on = []; |
| | | if (onlineAnchorinfo_list[cf]) { |
| | | ail_on = onlineAnchorinfo_list[cf]; |
| | | }; |
| | | var ail_off = []; |
| | | if (offlineAnchorinfo_list[cf]) { |
| | | ail_off = offlineAnchorinfo_list[cf]; |
| | | }; |
| | | subgraph(i, result['map'][i], result['floor'][i], tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, result['map'].length) |
| | | } |
| | | |
| | | }; |
| | | //subgraph(i,result['map'][i],result['floor'][i],tml,ydl,fzbl,fcl,fnl,ftl,ail,sysSetting) |
| | | function subgraph(index, mp, fr, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | var imgUrl = '/hxzkoa/hxzk/image/mapfile/' + mp;//图片路径 |
| | | //var imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';//图片路径 |
| | | var imgList = new Array(); |
| | | imgList['map'] = imgUrl; |
| | | var iconUrl = '/hxzkoa/hxzk/image/targeticon/default.png'; |
| | | imgList['icon'] = iconUrl; |
| | | |
| | | // var anckicon = '/hxzkoa/hxzk/image/anchor/lingjin.png'; |
| | | // imgList['anchor']=anckicon; |
| | | var anckicon_on = '/hxzkoa/hxzk/image/anchor/基站在线.png'; |
| | | //var anckicon_on = '/hxzkoa/hxzk/image/anchor/lingjin.png'; |
| | | imgList['anchor_online'] = anckicon_on; |
| | | |
| | | var anckicon_off = '/hxzkoa/hxzk/image/anchor/基站离线.png' |
| | | //var anckicon_off = '/hxzkoa/hxzk/image/anchor/ceju.png'; |
| | | imgList['anchor_offline'] = anckicon_off; |
| | | |
| | | new MarkPoints(index, fr, imgList, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm); |
| | | }; |
| | | var serial; |
| | | var code; |
| | | var isDelete = false; |
| | | var shipinka = true; |
| | | var tuodong = false; |
| | | var colorbbb = "rgba(255,0,0,0.3)"; |
| | | var sosType = []; |
| | | var sousuoType = true; |
| | | for (var i = 0; i < 500; i++) { |
| | | sosType[i] = true; |
| | | } |
| | | var sos = document.createElement('img'); |
| | | sos.src = '/hxzkoa/hxzk/image/icon/SOS.png'; |
| | | var sos1 = document.createElement('img'); |
| | | sos1.src = '/hxzkoa/hxzk/image/icon/SOS1.png'; |
| | | var sousuo0 = document.createElement('img'); |
| | | sousuo0.src = '/hxzkoa/hxzk/image/icon/sousuo0.png'; |
| | | function MarkPoints(index, current_floor, imgList, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | this.imgX = 0;//在画布上图片的X偏移量 |
| | | this.imgY = 0;//在画布上图片的Y偏移量 |
| | | this.imgScale = 1;//图片的缩放比例 |
| | | this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas |
| | | this.scaleFlag = 0;//缩放因子,最大缩放9,最小缩放-9 |
| | | this.context; |
| | | this.img; //地图 |
| | | this.playIndex = 0; |
| | | this.pos = {};//每次拖拽前坐标保存 |
| | | |
| | | this.imgLoadList = new Array(); |
| | | this.rateNumList = new Array(); |
| | | this.imgXList = new Array(); |
| | | this.imgYList = new Array(); |
| | | this.imgScaleList = new Array(); |
| | | |
| | | //获取真实地图 |
| | | this.trueMeasure; |
| | | this.trueLength; |
| | | this.trueWidth; |
| | | this.x_ratio; |
| | | this.y_ratio; |
| | | this.x_x0; |
| | | this.y_y0; |
| | | this.expand = false; |
| | | |
| | | //system setting |
| | | this.sysSetting; |
| | | this.tagZb = '0';//是否显示标签坐标 |
| | | this.diskaoqin = '0'; //出考勤区域是否消失 |
| | | this.viewAnckid = '0';//是否显示基站ID |
| | | this.viewName = '0';//是否显示人员名称 |
| | | this.tunlDw = '0'//隧道定位模式 |
| | | this.guiji_sava = '0'//是否开启轨迹保存 |
| | | this.viewPower = '0';//是否显示电量 |
| | | this.viewTagid = '0';//是否显示标签ID |
| | | this.viewAnckzb = '0';//是否显示基站坐标 |
| | | this.offView = '0'//是否离线不显示图标 |
| | | this.anckicon = '0'//是否显示基站图标 |
| | | this.gas_show = '0'//显示其他检测(气体显示) |
| | | this.quiet = '0'//静止输出固定坐标 |
| | | this.real_trak_time = 0//实时轨迹显示时长 |
| | | this.real_trak_color = '红色'//实时轨迹显示的颜色 |
| | | this.fence_show = '0'//是否显示围栏 |
| | | |
| | | this.playFlag = false;//是否播放 |
| | | this.dragFlag = false;//是否可拖拽当前img,默认不能 |
| | | this.markFlag = false;//标记区域开启关闭flag |
| | | this.CreatLinepoints = [];//每次创建新区域的坐标集合 |
| | | this.playMark; //正在展示的标记 |
| | | this.playMarkInKaoQin;//当前标记是否在考勤区域内 |
| | | this.trackNow; //当前轨迹 |
| | | |
| | | this.onlineAnchorList;//当前基站列表 |
| | | this.offlineAnchorList; |
| | | |
| | | this.allMarkLins = [];//已创建的区域集合,例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域,所以数组内部只有一项 |
| | | this.allFenceColor = [];//已创建的区域颜色 |
| | | |
| | | this.FenceList; //围栏坐标 |
| | | this.FenceColor; //围栏颜色 |
| | | this.FenceName; //围栏名称 |
| | | this.realFenceList = []; // [名称,类型,实际坐标] |
| | | this.fenceMarkCount; //区域内的坐标数量 |
| | | this.cacheCanvas = null; //缓存围栏绘图 |
| | | |
| | | this.GasList; //气体坐标 |
| | | this.GasType; //气体类型 |
| | | this.GasNongdu; //气体浓度 |
| | | |
| | | this.ttm; |
| | | this.timer; |
| | | |
| | | this.getImgLoad(index, imgList, current_floor); |
| | | this.init(current_floor, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm); |
| | | |
| | | document.oncontextmenu = new Function("event.returnValue=false;"); |
| | | document.onselectstart = new Function("event.returnValue=false;"); |
| | | }; |
| | | |
| | | MarkPoints.prototype = { |
| | | getImgLoad: function (index, imgList, current_floor) { |
| | | var _this = this; |
| | | var str = "wrap" + index; |
| | | var wrap = document.getElementById(str); |
| | | var str2 = "draw" + index; |
| | | _this.canvas = document.getElementById(str2); |
| | | _this.context = _this.canvas.getContext('2d'); |
| | | _this.canvas.height = wrap.offsetHeight; |
| | | _this.canvas.width = wrap.offsetWidth; |
| | | |
| | | loadImages(imgList, function (images) { |
| | | for (var key in images) { |
| | | if (key == 'map') { |
| | | _this.imgScaleList[key] = 1; |
| | | _this.img = images[key]; |
| | | } else if (key == 'icon') { |
| | | _this.imgScaleList[key] = 0.03; |
| | | } else { |
| | | _this.imgScaleList[key] = images[key].naturalWidth / images['map'].naturalWidth; |
| | | <script> |
| | | //首页地图控制 |
| | | var full_screen = false; |
| | | var timer_list = []; |
| | | function getAllMap() { |
| | | var map = []; |
| | | var floor = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/qiehuanditu_option.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | if (data.length == 0) { |
| | | document.getElementById("map0").style.display = "none"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | } else if (data.length == 1) { |
| | | document.getElementById("map0").style.width = "100%"; |
| | | document.getElementById("mapname0").innerHTML = data[0].mapname; |
| | | document.getElementById("maphead0").style.height = "800px"; |
| | | document.getElementById("wrap0").style.height = "750px"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | full_screen = true; |
| | | } else if (data.length == 2) { |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | }; |
| | | _this.rateNumList[key] = _this.canvas.width / images[key].naturalWidth; |
| | | _this.imgXList[key] = (_this.canvas.width - images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2; |
| | | _this.imgYList[key] = (_this.canvas.height - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]) / 2;//默认进来当前图像居中显示 |
| | | _this.imgLoadList[key] = images[key]; |
| | | } |
| | | /*画出当前图片*/ |
| | | //_this.drawImg(current_floor); |
| | | for (var i = 0; i < data.length; i++) { |
| | | str = "mapname" + i; |
| | | document.getElementById(str).innerHTML = data[i].mapname; |
| | | map.push(data[i].mapname); |
| | | floor.push(data[i].floor); |
| | | if (i == 3) { |
| | | break; |
| | | } |
| | | }; |
| | | }, |
| | | }); |
| | | }, |
| | | var result = []; |
| | | result['map'] = map; |
| | | result['floor'] = floor; |
| | | return result |
| | | } |
| | | |
| | | drawImg: function (current_floor) { |
| | | var _this = this; |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | </script> |
| | | |
| | | can.globalCompositeOperation = "source-over"; |
| | | var images = _this.imgLoadList; |
| | | <!-- 常用函数 --> |
| | | <script> |
| | | function getTruemap_all() { |
| | | var map_wl = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/floornumTomap_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | map_wl[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | map_wl[data[i].floor].push([data[i].x_Truelength, data[i].y_Truewidth]); |
| | | } |
| | | }, |
| | | }); |
| | | return map_wl; |
| | | }; |
| | | |
| | | //画地图 |
| | | can.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgXList['map'], _this.imgYList['map'], _this.img.naturalWidth * _this.imgScaleList['map'] * _this.rateNumList['map'], _this.img.naturalHeight * _this.imgScaleList['map'] * _this.rateNumList['map']); |
| | | function getYuandian_all() { |
| | | var yuandian = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: "POST", |
| | | url: "/hxzkoa/floornumTomap_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | yuandian[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | yuandian[data[i].floor].push([data[i].x0_length, data[i].y0_width]); |
| | | } |
| | | } |
| | | }); |
| | | return yuandian; |
| | | }; |
| | | |
| | | $("#jiazai0").remove() |
| | | $("#jiazai1").remove() |
| | | $("#jiazai2").remove() |
| | | $("#jiazai3").remove() |
| | | function getSystemSetting() { |
| | | var sysset = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getSysSetting_list.do", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | sysset = data; |
| | | }, |
| | | }); |
| | | return sysset; |
| | | }; |
| | | |
| | | //实际与图片的比例尺 |
| | | _this.x_ratio = new Number(_this.imgLoadList['map'].naturalWidth / _this.trueLength); |
| | | _this.y_ratio = new Number(_this.imgLoadList['map'].naturalHeight / _this.trueWidth); |
| | | function loadImages(sources, callback) { |
| | | var count = 0, |
| | | images = {}, |
| | | imgNum = 0; |
| | | for (src in sources) { |
| | | imgNum++; |
| | | } |
| | | for (src in sources) { |
| | | images[src] = new Image(); |
| | | |
| | | if (tuodong == true) { |
| | | return false; |
| | | images[src].onload = function () { |
| | | if (++count >= imgNum) { |
| | | callback(images); |
| | | } |
| | | } |
| | | images[src].src = sources[src]; |
| | | } |
| | | }; |
| | | |
| | | function getTrackColor(yanse) { |
| | | var color; |
| | | if (yanse == "红色") { |
| | | var color = "red"; |
| | | } else if (yanse == "绿色") { |
| | | var color = "green"; |
| | | } else if (yanse == "蓝色") { |
| | | var color = "blue"; |
| | | } else if (yanse == "白色") { |
| | | var color = "white"; |
| | | } else if (yanse == "黑色") { |
| | | var color = "black"; |
| | | } else if (yanse == "黄色") { |
| | | var color = "yellow"; |
| | | } |
| | | return color |
| | | }; |
| | | |
| | | function getExistFence_all(leixing) { |
| | | var fencelist = {}; |
| | | var fencecolor = {}; |
| | | var fencename = {}; |
| | | var fencetype = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getFloorFence_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].floor); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | fencelist[tmpl[i]] = []; |
| | | fencecolor[tmpl[i]] = []; |
| | | fencename[tmpl[i]] = []; |
| | | fencetype[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | fencelist[data[i].floor].push(data[i].zuobiao); |
| | | fencecolor[data[i].floor].push(data[i].color); |
| | | fencename[data[i].floor].push(data[i].name); |
| | | fencetype[data[i].floor].push(data[i].type); |
| | | } |
| | | } |
| | | }); |
| | | if (leixing == "zuobiao") { |
| | | return fencelist |
| | | } else if (leixing == "color") { |
| | | return fencecolor |
| | | } else if (leixing == "name") { |
| | | return fencename |
| | | } else if (leixing == "type") { |
| | | return fencetype |
| | | }; |
| | | }; |
| | | |
| | | function getDrawColor(yanse) { |
| | | var color; |
| | | if (yanse == "红色") { |
| | | var color = "rgba(255,0,0,0.3)"; |
| | | } else if (yanse == "绿色") { |
| | | var color = "rgba(0,255,0,0.3)"; |
| | | } else if (yanse == "蓝色") { |
| | | var color = "rgba(0,0,255,0.3)"; |
| | | } else if (yanse == "白色") { |
| | | var color = "rgba(255,255,255,0.3)"; |
| | | } else if (yanse == "黑色") { |
| | | var color = "rgba(0,0,0,0.3)"; |
| | | } |
| | | return color |
| | | }; |
| | | function inFenceOrNot(fence_list, node_list) { |
| | | //fence_list[x,y] |
| | | //node_list[x,y] |
| | | if (fence_list.length == 2) { //矩形 |
| | | if (node_list[0] >= Math.min(fence_list[0][0], fence_list[1][0]) && node_list[0] <= Math.max(fence_list[0][0], fence_list[1][0])) { |
| | | if (node_list[1] >= Math.min(fence_list[0][1], fence_list[1][1]) && node_list[1] <= Math.max(fence_list[0][1], fence_list[1][1])) { |
| | | return true //在考勤区域 |
| | | } |
| | | } |
| | | return false //不在考勤区域 |
| | | } else if (fence_list.length > 2) { //多边形 |
| | | for (var c = false, i = -1, l = fence_list.length, j = l - 1; ++i < l; j = i) |
| | | ((fence_list[i][1] <= node_list[1] && node_list[1] < fence_list[j][1]) || (fence_list[j][1] <= node_list[1] && node_list[1] < fence_list[i][1])) |
| | | && (node_list[0] < (fence_list[j][0] - fence_list[i][0]) * (node_list[1] - fence_list[i][1]) / (fence_list[j][1] - fence_list[i][1]) + fence_list[i][0]) |
| | | && (c = !c); |
| | | return c; |
| | | } |
| | | }; |
| | | |
| | | function getGas(leixing) { |
| | | var gaslist = []; |
| | | var gasnongdu = []; |
| | | var gastype = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getGas_list.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | gaslist.push([data[i].x, data[i].y]); |
| | | gasnongdu.push(data[i].nong_du); |
| | | gastype.push(data[i].gas_type); |
| | | } |
| | | } |
| | | }); |
| | | if (leixing == "zuobiao") { |
| | | return gaslist |
| | | } else if (leixing == "type") { |
| | | return gastype |
| | | } else if (leixing == "nongdu") { |
| | | return gasnongdu |
| | | }; |
| | | }; |
| | | |
| | | function getRealPosition(current_floor) { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealPosition.do", |
| | | dataType: 'json', |
| | | data: { |
| | | floor: current_floor, |
| | | }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | //playMark[id,name,power,life,x,y,time] |
| | | realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].posx, data[i].posy, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sousuo, data[i].shipin]) |
| | | } |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | |
| | | function str_to_time(str) { |
| | | //根据字符串转换成对应的时间(秒) |
| | | if (str == "不显示实时轨迹") { |
| | | return 0; |
| | | } else if (str == "10秒钟") { |
| | | return 10; |
| | | } else if (str == "30秒钟") { |
| | | return 30; |
| | | } else if (str == "1分钟") { |
| | | return 60; |
| | | } else if (str == "10分钟") { |
| | | return 600; |
| | | } else if (str == "30分钟") { |
| | | return 1800; |
| | | } else if (str == "1小时") { |
| | | return 3600; |
| | | }; |
| | | }; |
| | | |
| | | function getTracknow(current_floor, tagid_str, time) { |
| | | var finalrealtrack = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealTrack.do", |
| | | dataType: 'json', |
| | | data: { |
| | | time: time, |
| | | floor: current_floor, |
| | | tagid: tagid_str, |
| | | }, |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | finalrealtrack[data[i][0].tagid] = []; |
| | | for (var j = 0; j < data[i].length; j++) { |
| | | finalrealtrack[data[i][0].tagid].push([data[i][j].x, data[i][j].y, data[i][j].time]) |
| | | } |
| | | } |
| | | }, |
| | | }); |
| | | return finalrealtrack; |
| | | }; |
| | | |
| | | function getAnchorInfo_all() { |
| | | var anchorList_on = {}; |
| | | var anchorList_off = {}; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getAnchorInfo_all.do", |
| | | dataType: 'json', |
| | | data: {}, |
| | | success: function (data) { |
| | | let tmp = new Set(); |
| | | for (var i = 0; i < data.length; i++) { |
| | | tmp.add(data[i].layer); |
| | | }; |
| | | let tmpl = Array.from(tmp); |
| | | for (i in tmpl) { |
| | | anchorList_on[tmpl[i]] = []; |
| | | anchorList_off[tmpl[i]] = []; |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | if (data[i].anchormode == "1") { |
| | | anchorList_on[data[i].layer].push([data[i].anchorid, data[i].posx, data[i].posy, data[i].posz, data[i].GreateTime]); |
| | | } else if (data[i].anchormode == "0") { |
| | | anchorList_off[data[i].layer].push([data[i].anchorid, data[i].posx, data[i].posy, data[i].posz, data[i].GreateTime]); |
| | | |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | return [anchorList_on, anchorList_off] |
| | | }; |
| | | |
| | | /**该方法用来绘制一个有填充色的圆角矩形 |
| | | *@param cxt:canvas的上下文环境 |
| | | *@param x:左上角x轴坐标 |
| | | *@param y:左上角y轴坐标 |
| | | *@param width:矩形的宽度 |
| | | *@param height:矩形的高度 |
| | | *@param radius:圆的半径 |
| | | *@param fillColor:填充颜色 |
| | | **/ |
| | | function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) { |
| | | //圆的直径必然要小于矩形的宽高 |
| | | if (2 * radius > width || 2 * radius > height) { return false; } |
| | | |
| | | cxt.save(); |
| | | cxt.translate(x, y); |
| | | //绘制圆角矩形的各个边 |
| | | drawRoundRectPath(cxt, width, height, radius); |
| | | cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值 |
| | | cxt.fill(); |
| | | cxt.restore(); |
| | | } |
| | | |
| | | function drawRoundRectPath(cxt, width, height, radius) { |
| | | cxt.beginPath(0); |
| | | //从右下角顺时针绘制,弧度从0到1/2PI |
| | | cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); |
| | | |
| | | //矩形下边线 |
| | | cxt.lineTo(radius, height); |
| | | |
| | | //左下角圆弧,弧度从1/2PI到PI |
| | | cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); |
| | | |
| | | //矩形左边线 |
| | | cxt.lineTo(0, radius); |
| | | |
| | | //左上角圆弧,弧度从PI到3/2PI |
| | | cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); |
| | | |
| | | //上边线 |
| | | cxt.lineTo(width - radius, 0); |
| | | |
| | | //右上角圆弧 |
| | | cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); |
| | | |
| | | //右边线 |
| | | cxt.lineTo(width, height - radius); |
| | | cxt.closePath(); |
| | | } |
| | | </script> |
| | | <!-- 常用函数结束 --> |
| | | |
| | | <!-- 调用室内定位地图功能 --> |
| | | <script> |
| | | function diaoyonghuatu(result) { |
| | | |
| | | var truemap_list = getTruemap_all(); |
| | | var yuandian_list = getYuandian_all(); |
| | | var fencezuobiao_list = getExistFence_all("zuobiao"); |
| | | var fencecolor_list = getExistFence_all("color"); |
| | | var fencename_list = getExistFence_all("name"); |
| | | var fencetype_list = getExistFence_all("type"); |
| | | var onlineAnchorinfo_list = getAnchorInfo_all()[0]; |
| | | var offlineAnchorinfo_list = getAnchorInfo_all()[1]; |
| | | |
| | | //读取系统设置 |
| | | var sysSetting = getSystemSetting(); |
| | | |
| | | for (var i = 0; i < result['map'].length; i++) { |
| | | var cf = result['floor'][i];//当前floor |
| | | var tml = []; |
| | | if (truemap_list[cf]) { |
| | | tml = truemap_list[cf]; |
| | | }; |
| | | var ydl = []; |
| | | if (yuandian_list[cf]) { |
| | | ydl = yuandian_list[cf]; |
| | | }; |
| | | var fzbl = []; |
| | | if (fencezuobiao_list[cf]) { |
| | | fzbl = fencezuobiao_list[cf]; |
| | | }; |
| | | var fcl = []; |
| | | if (fencecolor_list[cf]) { |
| | | fcl = fencecolor_list[cf]; |
| | | }; |
| | | var fnl = []; |
| | | if (fencename_list[cf]) { |
| | | fnl = fencename_list[cf]; |
| | | }; |
| | | var ftl = [] |
| | | if (fencetype_list[cf]) { |
| | | ftl = fencetype_list[cf]; |
| | | }; |
| | | var ail_on = []; |
| | | if (onlineAnchorinfo_list[cf]) { |
| | | ail_on = onlineAnchorinfo_list[cf]; |
| | | }; |
| | | var ail_off = []; |
| | | if (offlineAnchorinfo_list[cf]) { |
| | | ail_off = offlineAnchorinfo_list[cf]; |
| | | }; |
| | | subgraph(i, result['map'][i], result['floor'][i], tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, result['map'].length) |
| | | } |
| | | |
| | | if (_this.cacheCanvas == null) { |
| | | _this.cacheCanvas = document.createElement("canvas"); |
| | | _this.cacheCanvas.width = _this.canvas.width; |
| | | _this.cacheCanvas.height = _this.canvas.height; |
| | | var cacheCtx = _this.cacheCanvas.getContext("2d"); |
| | | //画出当前已有的围栏区域 |
| | | if (_this.fence_show == "1") { |
| | | if (_this.FenceList.length) { |
| | | //遍历每个fence,并画出 |
| | | for (var m = 0; m < _this.FenceList.length; m++) { |
| | | var draw_points_list = []; |
| | | var points_list = _this.FenceList[m].split(","); |
| | | //实际坐标转成图上坐标 |
| | | for (var i = 0; i < points_list.length; i++) { |
| | | if (i % 2 == 0) { |
| | | //偶数坐标,即x坐标 |
| | | tmp_list = []; |
| | | var tmp_point = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (points_list[i] - _this.x_x0)); |
| | | tmp_list.push(tmp_point); |
| | | } else { |
| | | var tmp_point = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (points_list[i] - _this.y_y0)); |
| | | tmp_list.push(tmp_point); |
| | | draw_points_list.push(tmp_list); |
| | | }; |
| | | }; |
| | | }; |
| | | //subgraph(i,result['map'][i],result['floor'][i],tml,ydl,fzbl,fcl,fnl,ftl,ail,sysSetting) |
| | | function subgraph(index, mp, fr, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | var imgUrl = '/hxzkoa/hxzk/image/mapfile/' + mp;//图片路径 |
| | | //var imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';//图片路径 |
| | | var imgList = new Array(); |
| | | imgList['map'] = imgUrl; |
| | | var iconUrl = '/hxzkoa/hxzk/image/targeticon/default.png'; |
| | | imgList['icon'] = iconUrl; |
| | | |
| | | var color = getDrawColor(_this.FenceColor[m]); |
| | | var name = _this.FenceName[m]; |
| | | // var anckicon = '/hxzkoa/hxzk/image/anchor/lingjin.png'; |
| | | // imgList['anchor']=anckicon; |
| | | var anckicon_on = '/hxzkoa/hxzk/image/anchor/基站在线.png'; |
| | | //var anckicon_on = '/hxzkoa/hxzk/image/anchor/lingjin.png'; |
| | | imgList['anchor_online'] = anckicon_on; |
| | | |
| | | if (draw_points_list.length == 2) { |
| | | cacheCtx.beginPath(); |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.fillRect(draw_points_list[0][0], draw_points_list[0][1], draw_points_list[1][0] - draw_points_list[0][0], draw_points_list[1][1] - draw_points_list[0][1]); |
| | | cacheCtx.stroke(); |
| | | cacheCtx.fillStyle = "red"; |
| | | cacheCtx.fillText(name, (draw_points_list[0][0] + draw_points_list[1][0]) / 2, (draw_points_list[0][1] + draw_points_list[1][1]) / 2); |
| | | cacheCtx.closePath(); |
| | | } else { |
| | | cacheCtx.beginPath(); |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.lineWidth = 1; |
| | | var text_x = new Number(0); |
| | | var text_y = new Number(0); |
| | | for (var j = 0; j < draw_points_list.length; j++) { |
| | | if (j == 0) { |
| | | cacheCtx.moveTo(draw_points_list[j][0], draw_points_list[j][1]); |
| | | var anckicon_off = '/hxzkoa/hxzk/image/anchor/基站离线.png' |
| | | //var anckicon_off = '/hxzkoa/hxzk/image/anchor/ceju.png'; |
| | | imgList['anchor_offline'] = anckicon_off; |
| | | |
| | | new MarkPoints(index, fr, imgList, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm); |
| | | }; |
| | | var serial; |
| | | var code; |
| | | var isDelete = false; |
| | | var shipinka = true; |
| | | var tuodong = false; |
| | | var colorbbb = "rgba(255,0,0,0.3)"; |
| | | var sosType = []; |
| | | var sousuoType = true; |
| | | for (var i = 0; i < 500; i++) { |
| | | sosType[i] = true; |
| | | } |
| | | var sos = document.createElement('img'); |
| | | sos.src = '/hxzkoa/hxzk/image/icon/SOS.png'; |
| | | var sos1 = document.createElement('img'); |
| | | sos1.src = '/hxzkoa/hxzk/image/icon/SOS1.png'; |
| | | var sousuo0 = document.createElement('img'); |
| | | sousuo0.src = '/hxzkoa/hxzk/image/icon/sousuo0.png'; |
| | | function MarkPoints(index, current_floor, imgList, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | this.imgX = 0;//在画布上图片的X偏移量 |
| | | this.imgY = 0;//在画布上图片的Y偏移量 |
| | | this.imgScale = 1;//图片的缩放比例 |
| | | this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas |
| | | this.scaleFlag = 0;//缩放因子,最大缩放9,最小缩放-9 |
| | | this.context; |
| | | this.img; //地图 |
| | | this.playIndex = 0; |
| | | this.pos = {};//每次拖拽前坐标保存 |
| | | |
| | | this.imgLoadList = new Array(); |
| | | this.rateNumList = new Array(); |
| | | this.imgXList = new Array(); |
| | | this.imgYList = new Array(); |
| | | this.imgScaleList = new Array(); |
| | | |
| | | //获取真实地图 |
| | | this.trueMeasure; |
| | | this.trueLength; |
| | | this.trueWidth; |
| | | this.x_ratio; |
| | | this.y_ratio; |
| | | this.x_x0; |
| | | this.y_y0; |
| | | this.expand = false; |
| | | |
| | | //system setting |
| | | this.sysSetting; |
| | | this.tagZb = '0';//是否显示标签坐标 |
| | | this.diskaoqin = '0'; //出考勤区域是否消失 |
| | | this.viewAnckid = '0';//是否显示基站ID |
| | | this.viewName = '0';//是否显示人员名称 |
| | | this.tunlDw = '0'//隧道定位模式 |
| | | this.guiji_sava = '0'//是否开启轨迹保存 |
| | | this.viewPower = '0';//是否显示电量 |
| | | this.viewTagid = '0';//是否显示标签ID |
| | | this.viewAnckzb = '0';//是否显示基站坐标 |
| | | this.offView = '0'//是否离线不显示图标 |
| | | this.anckicon = '0'//是否显示基站图标 |
| | | this.gas_show = '0'//显示其他检测(气体显示) |
| | | this.quiet = '0'//静止输出固定坐标 |
| | | this.real_trak_time = 0//实时轨迹显示时长 |
| | | this.real_trak_color = '红色'//实时轨迹显示的颜色 |
| | | this.fence_show = '0'//是否显示围栏 |
| | | |
| | | this.playFlag = false;//是否播放 |
| | | this.dragFlag = false;//是否可拖拽当前img,默认不能 |
| | | this.markFlag = false;//标记区域开启关闭flag |
| | | this.CreatLinepoints = [];//每次创建新区域的坐标集合 |
| | | this.playMark; //正在展示的标记 |
| | | this.playMarkInKaoQin;//当前标记是否在考勤区域内 |
| | | this.trackNow; //当前轨迹 |
| | | |
| | | this.onlineAnchorList;//当前基站列表 |
| | | this.offlineAnchorList; |
| | | |
| | | this.allMarkLins = [];//已创建的区域集合,例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域,所以数组内部只有一项 |
| | | this.allFenceColor = [];//已创建的区域颜色 |
| | | |
| | | this.FenceList; //围栏坐标 |
| | | this.FenceColor; //围栏颜色 |
| | | this.FenceName; //围栏名称 |
| | | this.realFenceList = []; // [名称,类型,实际坐标] |
| | | this.fenceMarkCount; //区域内的坐标数量 |
| | | this.cacheCanvas = null; //缓存围栏绘图 |
| | | |
| | | this.GasList; //气体坐标 |
| | | this.GasType; //气体类型 |
| | | this.GasNongdu; //气体浓度 |
| | | |
| | | this.ttm; |
| | | this.timer; |
| | | |
| | | this.getImgLoad(index, imgList, current_floor); |
| | | this.init(current_floor, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm); |
| | | |
| | | document.oncontextmenu = new Function("event.returnValue=false;"); |
| | | document.onselectstart = new Function("event.returnValue=false;"); |
| | | }; |
| | | |
| | | MarkPoints.prototype = { |
| | | getImgLoad: function (index, imgList, current_floor) { |
| | | var _this = this; |
| | | var str = "wrap" + index; |
| | | var wrap = document.getElementById(str); |
| | | var str2 = "draw" + index; |
| | | _this.canvas = document.getElementById(str2); |
| | | _this.context = _this.canvas.getContext('2d'); |
| | | _this.canvas.height = wrap.offsetHeight; |
| | | _this.canvas.width = wrap.offsetWidth; |
| | | |
| | | loadImages(imgList, function (images) { |
| | | for (var key in images) { |
| | | if (key == 'map') { |
| | | _this.imgScaleList[key] = 1; |
| | | _this.img = images[key]; |
| | | } else if (key == 'icon') { |
| | | _this.imgScaleList[key] = 0.03; |
| | | } else { |
| | | _this.imgScaleList[key] = images[key].naturalWidth / images['map'].naturalWidth; |
| | | }; |
| | | _this.rateNumList[key] = _this.canvas.width / images[key].naturalWidth; |
| | | _this.imgXList[key] = (_this.canvas.width - images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2; |
| | | _this.imgYList[key] = (_this.canvas.height - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]) / 2;//默认进来当前图像居中显示 |
| | | _this.imgLoadList[key] = images[key]; |
| | | } |
| | | /*画出当前图片*/ |
| | | //_this.drawImg(current_floor); |
| | | }); |
| | | }, |
| | | |
| | | drawImg: function (current_floor) { |
| | | var _this = this; |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | |
| | | can.globalCompositeOperation = "source-over"; |
| | | var images = _this.imgLoadList; |
| | | |
| | | //画地图 |
| | | can.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgXList['map'], _this.imgYList['map'], _this.img.naturalWidth * _this.imgScaleList['map'] * _this.rateNumList['map'], _this.img.naturalHeight * _this.imgScaleList['map'] * _this.rateNumList['map']); |
| | | |
| | | $("#jiazai0").remove() |
| | | $("#jiazai1").remove() |
| | | $("#jiazai2").remove() |
| | | $("#jiazai3").remove() |
| | | |
| | | //实际与图片的比例尺 |
| | | _this.x_ratio = new Number(_this.imgLoadList['map'].naturalWidth / _this.trueLength); |
| | | _this.y_ratio = new Number(_this.imgLoadList['map'].naturalHeight / _this.trueWidth); |
| | | |
| | | if (tuodong == true) { |
| | | return false; |
| | | } |
| | | |
| | | if (_this.cacheCanvas == null) { |
| | | _this.cacheCanvas = document.createElement("canvas"); |
| | | _this.cacheCanvas.width = _this.canvas.width; |
| | | _this.cacheCanvas.height = _this.canvas.height; |
| | | var cacheCtx = _this.cacheCanvas.getContext("2d"); |
| | | //画出当前已有的围栏区域 |
| | | if (_this.fence_show == "1") { |
| | | if (_this.FenceList.length) { |
| | | //遍历每个fence,并画出 |
| | | for (var m = 0; m < _this.FenceList.length; m++) { |
| | | var draw_points_list = []; |
| | | var points_list = _this.FenceList[m].split(","); |
| | | //实际坐标转成图上坐标 |
| | | for (var i = 0; i < points_list.length; i++) { |
| | | if (i % 2 == 0) { |
| | | //偶数坐标,即x坐标 |
| | | tmp_list = []; |
| | | var tmp_point = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (points_list[i] - _this.x_x0)); |
| | | tmp_list.push(tmp_point); |
| | | } else { |
| | | cacheCtx.lineTo(draw_points_list[j][0], draw_points_list[j][1]); |
| | | } |
| | | if (j == draw_points_list.length - 1) { |
| | | cacheCtx.lineTo(draw_points_list[0][0], draw_points_list[0][1]); |
| | | cacheCtx.fill(); |
| | | } |
| | | text_x = text_x + draw_points_list[j][0]; |
| | | text_y = text_y + draw_points_list[j][1]; |
| | | var tmp_point = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (points_list[i] - _this.y_y0)); |
| | | tmp_list.push(tmp_point); |
| | | draw_points_list.push(tmp_list); |
| | | }; |
| | | }; |
| | | |
| | | } |
| | | text_x = text_x / draw_points_list.length; |
| | | text_y = text_y / draw_points_list.length; |
| | | var color = getDrawColor(_this.FenceColor[m]); |
| | | var name = _this.FenceName[m]; |
| | | |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.fill(); |
| | | cacheCtx.strokeStyle = color; |
| | | cacheCtx.stroke(); |
| | | cacheCtx.fillStyle = "red"; |
| | | cacheCtx.fillText(name, text_x, text_y); |
| | | cacheCtx.closePath(); |
| | | if (draw_points_list.length == 2) { |
| | | cacheCtx.beginPath(); |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.fillRect(draw_points_list[0][0], draw_points_list[0][1], draw_points_list[1][0] - draw_points_list[0][0], draw_points_list[1][1] - draw_points_list[0][1]); |
| | | cacheCtx.stroke(); |
| | | cacheCtx.fillStyle = "red"; |
| | | cacheCtx.fillText(name, (draw_points_list[0][0] + draw_points_list[1][0]) / 2, (draw_points_list[0][1] + draw_points_list[1][1]) / 2); |
| | | cacheCtx.closePath(); |
| | | } else { |
| | | cacheCtx.beginPath(); |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.lineWidth = 1; |
| | | var text_x = new Number(0); |
| | | var text_y = new Number(0); |
| | | for (var j = 0; j < draw_points_list.length; j++) { |
| | | if (j == 0) { |
| | | cacheCtx.moveTo(draw_points_list[j][0], draw_points_list[j][1]); |
| | | } else { |
| | | cacheCtx.lineTo(draw_points_list[j][0], draw_points_list[j][1]); |
| | | } |
| | | if (j == draw_points_list.length - 1) { |
| | | cacheCtx.lineTo(draw_points_list[0][0], draw_points_list[0][1]); |
| | | cacheCtx.fill(); |
| | | } |
| | | text_x = text_x + draw_points_list[j][0]; |
| | | text_y = text_y + draw_points_list[j][1]; |
| | | |
| | | } |
| | | text_x = text_x / draw_points_list.length; |
| | | text_y = text_y / draw_points_list.length; |
| | | |
| | | cacheCtx.fillStyle = color; |
| | | cacheCtx.fill(); |
| | | cacheCtx.strokeStyle = color; |
| | | cacheCtx.stroke(); |
| | | cacheCtx.fillStyle = "red"; |
| | | cacheCtx.fillText(name, text_x, text_y); |
| | | cacheCtx.closePath(); |
| | | }; |
| | | }; |
| | | }; |
| | | }; |
| | | can.drawImage(_this.cacheCanvas, 0, 0); |
| | | } else { |
| | | can.drawImage(_this.cacheCanvas, 0, 0); |
| | | }; |
| | | can.drawImage(_this.cacheCanvas, 0, 0); |
| | | } else { |
| | | can.drawImage(_this.cacheCanvas, 0, 0); |
| | | }; |
| | | |
| | | |
| | | //判断当前坐标是否在考勤区域内 |
| | | _this.playMarkInKaoQin = []; |
| | | for (var n in _this.playMark) { //_this.playMark为当前实时在线点位置,为[array[id,name,power,life,x,y,time]] |
| | | node_list = [Number(_this.playMark[n][4]), Number(_this.playMark[n][5])]; |
| | | for (var f in _this.realFenceList) { |
| | | if (_this.realFenceList[f][1] == "考勤区域") { |
| | | if (inFenceOrNot(_this.realFenceList[f][2], node_list)) { |
| | | //inFenceOrNot(fence_list, node_list) return true/false |
| | | _this.playMarkInKaoQin.push(true); |
| | | break; |
| | | } |
| | | } |
| | | }; |
| | | if (_this.playMarkInKaoQin.length == n) { |
| | | _this.playMarkInKaoQin.push(false); |
| | | } |
| | | }; |
| | | |
| | | |
| | | //计算区域内的坐标数量(隧道定位) |
| | | _this.fenceMarkCount = []; |
| | | for (var f in _this.realFenceList) { |
| | | //f[name, type, zuobiao_array] |
| | | var tmp_count = new Number(0); |
| | | for (var n in _this.playMark) {//_this.playMark为当前实时在线点位置,为[array[.x, .y]] |
| | | //判断当前坐标是否在考勤区域内 |
| | | _this.playMarkInKaoQin = []; |
| | | for (var n in _this.playMark) { //_this.playMark为当前实时在线点位置,为[array[id,name,power,life,x,y,time]] |
| | | node_list = [Number(_this.playMark[n][4]), Number(_this.playMark[n][5])]; |
| | | if (inFenceOrNot(_this.realFenceList[f][2], node_list)) {//inFenceOrNot(fence_list, node_list) return true/false |
| | | tmp_count += 1; |
| | | //break; |
| | | for (var f in _this.realFenceList) { |
| | | if (_this.realFenceList[f][1] == "考勤区域") { |
| | | if (inFenceOrNot(_this.realFenceList[f][2], node_list)) { |
| | | //inFenceOrNot(fence_list, node_list) return true/false |
| | | _this.playMarkInKaoQin.push(true); |
| | | break; |
| | | } |
| | | } |
| | | }; |
| | | if (_this.playMarkInKaoQin.length == n) { |
| | | _this.playMarkInKaoQin.push(false); |
| | | } |
| | | }; |
| | | _this.fenceMarkCount.push(tmp_count); |
| | | }; |
| | | |
| | | // if (shipinka) { |
| | | |
| | | //计算区域内的坐标数量(隧道定位) |
| | | _this.fenceMarkCount = []; |
| | | for (var f in _this.realFenceList) { |
| | | //f[name, type, zuobiao_array] |
| | | var tmp_count = new Number(0); |
| | | for (var n in _this.playMark) {//_this.playMark为当前实时在线点位置,为[array[.x, .y]] |
| | | node_list = [Number(_this.playMark[n][4]), Number(_this.playMark[n][5])]; |
| | | if (inFenceOrNot(_this.realFenceList[f][2], node_list)) {//inFenceOrNot(fence_list, node_list) return true/false |
| | | tmp_count += 1; |
| | | //break; |
| | | } |
| | | }; |
| | | _this.fenceMarkCount.push(tmp_count); |
| | | }; |
| | | |
| | | // if (shipinka) { |
| | | //画标签及基站 |
| | | for (var key in images) { |
| | | if (key == "icon" && _this.playMark) { |
| | |
| | | }; |
| | | } |
| | | }; |
| | | // } |
| | | // } |
| | | |
| | | //开启隧道定位后,需要显示当前考勤区域内的总标签数量 |
| | | if (_this.tunlDw == "1") { |
| | | var k = 0; |
| | | fillRoundRect(can, 10, 10, 140, 40 * _this.fenceMarkCount.length, 10, colorbbb); |
| | | for (var i = 0; i < _this.fenceMarkCount.length; i++) { |
| | | can.beginPath(); |
| | | can.fillStyle = getDrawColor(_this.FenceColor[i]); |
| | | can.fillStyle = "rgba(255,255,0,0.7)"; |
| | | can.font = "15px Verdana"; |
| | | can.fillText(_this.realFenceList[i][0] + ":" + _this.fenceMarkCount[i], 34, 36 + 40 * k); |
| | | can.closePath(); |
| | | k += 1; |
| | | //开启隧道定位后,需要显示当前考勤区域内的总标签数量 |
| | | if (_this.tunlDw == "1") { |
| | | var k = 0; |
| | | fillRoundRect(can, 10, 10, 140, 40 * _this.fenceMarkCount.length, 10, colorbbb); |
| | | for (var i = 0; i < _this.fenceMarkCount.length; i++) { |
| | | can.beginPath(); |
| | | can.fillStyle = getDrawColor(_this.FenceColor[i]); |
| | | can.fillStyle = "rgba(255,255,0,0.7)"; |
| | | can.font = "15px Verdana"; |
| | | can.fillText(_this.realFenceList[i][0] + ":" + _this.fenceMarkCount[i], 34, 36 + 40 * k); |
| | | can.closePath(); |
| | | k += 1; |
| | | }; |
| | | }; |
| | | }; |
| | | |
| | | //开启气体显示 |
| | | if (_this.gas_show == "1") { |
| | | _this.GasList = getGas("zuobiao"); //气体坐标 |
| | | _this.GasType = getGas("type"); //气体类型 |
| | | _this.GasNongdu = getGas("nongdu"); //气体浓度 |
| | | for (var i = 0; i < _this.GasList.length; i++) { |
| | | var cor_x = new Number(_this.GasList[i][0]); |
| | | var cor_y = new Number(_this.GasList[i][1]); |
| | | var x_cor = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0)); |
| | | var y_cor = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0)); |
| | | can.beginPath(); |
| | | can.arc(x_cor, y_cor, 6, 0, Math.PI * 2, true); |
| | | can.fillStyle = "green"; |
| | | can.fill(); |
| | | can.fillStyle = "red"; |
| | | can.fillText(_this.GasType[i], x_cor + 10, y_cor); |
| | | can.fillText(_this.GasNongdu[i], x_cor + 10, y_cor + 10); |
| | | can.closePath(); |
| | | } |
| | | }; |
| | | }, |
| | | |
| | | init: function (current_floor, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | var _this = this; |
| | | |
| | | //读取系统设置 |
| | | _this.tagZb = sysSetting[0].tagZb;//是否显示标签坐标 |
| | | _this.diskaoqin = sysSetting[0].diskaoqing; //出考勤区域是否消失 |
| | | _this.viewAnckid = sysSetting[0].viewAnckid;//是否显示基站ID |
| | | _this.viewName = sysSetting[0].viewName;//是否显示人员名称 |
| | | _this.tunlDw = sysSetting[0].tunlDw;//隧道定位模式 |
| | | _this.guiji_sava = sysSetting[0].guiji_sava;//是否开启轨迹保存 |
| | | _this.viewPower = sysSetting[0].viewPower;//是否显示电量 |
| | | _this.viewTagid = sysSetting[0].viewTagid;//是否显示标签ID |
| | | _this.viewAnckzb = sysSetting[0].viewAnckzb;//是否显示基站坐标 |
| | | _this.offView = sysSetting[0].offView;//是否离线不显示图标 |
| | | _this.anckicon = sysSetting[0].anckicon;//是否显示基站图标 |
| | | _this.gas_show = sysSetting[0].gas_show;//显示其他检测(气体显示) |
| | | _this.quiet = sysSetting[0].quiet;//静止输出固定坐标 |
| | | _this.fence_show = sysSetting[0].fence_show;//是否显示围栏 |
| | | |
| | | //读取真实地图 |
| | | //读图片实际尺寸 |
| | | _this.trueLength = new Number(tml[0][0]); |
| | | _this.trueWidth = new Number(tml[0][1]); |
| | | |
| | | //读实际原点坐标 |
| | | _this.x_x0 = new Number(ydl[0][0]); |
| | | _this.y_y0 = new Number(ydl[0][1]); |
| | | |
| | | //读取当前围栏信息 |
| | | _this.FenceList = fzbl; |
| | | _this.FenceColor = fcl; |
| | | _this.FenceName = fnl; |
| | | _this.FenceType = ftl; |
| | | |
| | | _this.realFenceList = []; |
| | | //遍历围栏信息并存储成[名称,类型,坐标] |
| | | for (var m = 0; m < _this.FenceList.length; m++) { |
| | | var tmp_list = []; |
| | | var points = _this.FenceList[m]; |
| | | var points_list = _this.FenceList[m].split(","); |
| | | |
| | | //围栏实际坐标(加上偏移量的) |
| | | var points_list_sort = []; |
| | | for (var i = 0; i < points_list.length; i++) { |
| | | if (i % 2 == 0) { |
| | | tmp_list = []; |
| | | tmp_list.push(new Number(points_list[i])); |
| | | } else { |
| | | tmp_list.push(new Number(points_list[i])); |
| | | points_list_sort.push(tmp_list); |
| | | //开启气体显示 |
| | | if (_this.gas_show == "1") { |
| | | _this.GasList = getGas("zuobiao"); //气体坐标 |
| | | _this.GasType = getGas("type"); //气体类型 |
| | | _this.GasNongdu = getGas("nongdu"); //气体浓度 |
| | | for (var i = 0; i < _this.GasList.length; i++) { |
| | | var cor_x = new Number(_this.GasList[i][0]); |
| | | var cor_y = new Number(_this.GasList[i][1]); |
| | | var x_cor = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0)); |
| | | var y_cor = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0)); |
| | | can.beginPath(); |
| | | can.arc(x_cor, y_cor, 6, 0, Math.PI * 2, true); |
| | | can.fillStyle = "green"; |
| | | can.fill(); |
| | | can.fillStyle = "red"; |
| | | can.fillText(_this.GasType[i], x_cor + 10, y_cor); |
| | | can.fillText(_this.GasNongdu[i], x_cor + 10, y_cor + 10); |
| | | can.closePath(); |
| | | } |
| | | } |
| | | //存区域名称+区域类型+区域坐标,方便后续判断是否在某区域内 |
| | | _this.realFenceList.push([_this.FenceName[m], _this.FenceType[m], points_list_sort]); |
| | | }; |
| | | }; |
| | | }, |
| | | |
| | | _this.real_trak_time = str_to_time(sysSetting[0].real_trak_time);//实时轨迹显示时长 |
| | | //当前位置 |
| | | _this.playMark = getRealPosition(current_floor); |
| | | var tagid_str = ""; |
| | | for (var i = 0; i < _this.playMark.length; i++) { |
| | | tagid_str += _this.playMark[i][0] |
| | | if (i != _this.playMark.length - 1) { |
| | | tagid_str += "," |
| | | } |
| | | } |
| | | //实时轨迹 |
| | | if (_this.real_trak_time != 0) { |
| | | _this.trackNow = getTracknow(current_floor, tagid_str, _this.real_trak_time); |
| | | } else { |
| | | _this.trackNow = null; |
| | | } |
| | | init: function (current_floor, tml, ydl, fzbl, fcl, fnl, ftl, ail_on, ail_off, sysSetting, ttm) { |
| | | var _this = this; |
| | | |
| | | _this.real_trak_color = getTrackColor(sysSetting[0].real_trak_color);//实时轨迹显示的颜色 |
| | | //读取系统设置 |
| | | _this.tagZb = sysSetting[0].tagZb;//是否显示标签坐标 |
| | | _this.diskaoqin = sysSetting[0].diskaoqing; //出考勤区域是否消失 |
| | | _this.viewAnckid = sysSetting[0].viewAnckid;//是否显示基站ID |
| | | _this.viewName = sysSetting[0].viewName;//是否显示人员名称 |
| | | _this.tunlDw = sysSetting[0].tunlDw;//隧道定位模式 |
| | | _this.guiji_sava = sysSetting[0].guiji_sava;//是否开启轨迹保存 |
| | | _this.viewPower = sysSetting[0].viewPower;//是否显示电量 |
| | | _this.viewTagid = sysSetting[0].viewTagid;//是否显示标签ID |
| | | _this.viewAnckzb = sysSetting[0].viewAnckzb;//是否显示基站坐标 |
| | | _this.offView = sysSetting[0].offView;//是否离线不显示图标 |
| | | _this.anckicon = sysSetting[0].anckicon;//是否显示基站图标 |
| | | _this.gas_show = sysSetting[0].gas_show;//显示其他检测(气体显示) |
| | | _this.quiet = sysSetting[0].quiet;//静止输出固定坐标 |
| | | _this.fence_show = sysSetting[0].fence_show;//是否显示围栏 |
| | | |
| | | _this.canvas.onmousedown = function (event) { |
| | | _this.clickDown(event); |
| | | }; |
| | | _this.canvas.onmousemove = function (event) { |
| | | _this.mouseMove(event) |
| | | }; |
| | | _this.canvas.onmouseup = function (event) { |
| | | _this.mouseUp(event); |
| | | }; |
| | | _this.canvas.onmousewheel = function (event) { |
| | | _this.onmouseWheel(event); |
| | | }; |
| | | _this.ttm = ttm; |
| | | //读取真实地图 |
| | | //读图片实际尺寸 |
| | | _this.trueLength = new Number(tml[0][0]); |
| | | _this.trueWidth = new Number(tml[0][1]); |
| | | |
| | | //当前地图大于1个时才可以调用dbclick |
| | | if (_this.ttm > 1) { |
| | | _this.canvas.ondblclick = function (event) { |
| | | _this.doubleClick(event); |
| | | } |
| | | } |
| | | //读实际原点坐标 |
| | | _this.x_x0 = new Number(ydl[0][0]); |
| | | _this.y_y0 = new Number(ydl[0][1]); |
| | | |
| | | _this.onlineAnchorList = ail_on; |
| | | _this.offlineAnchorList = ail_off; |
| | | //读取当前围栏信息 |
| | | _this.FenceList = fzbl; |
| | | _this.FenceColor = fcl; |
| | | _this.FenceName = fnl; |
| | | _this.FenceType = ftl; |
| | | |
| | | var t = 300;//300ms |
| | | _this.realFenceList = []; |
| | | //遍历围栏信息并存储成[名称,类型,坐标] |
| | | for (var m = 0; m < _this.FenceList.length; m++) { |
| | | var tmp_list = []; |
| | | var points = _this.FenceList[m]; |
| | | var points_list = _this.FenceList[m].split(","); |
| | | |
| | | // function fn(){ |
| | | // //当前需要画的坐标 |
| | | // var realposition_list = getRealPosition_all() |
| | | // _this.playMark = realposition_list[current_floor]; |
| | | // _this.drawImg(current_floor); |
| | | // } |
| | | function fn() { |
| | | if (tuodong == true) { |
| | | return false; |
| | | } |
| | | if (shipinka == false) { |
| | | return false; |
| | | } |
| | | //当前实时坐标 |
| | | _this.playMark = getRealPosition(current_floor); |
| | | // var tagid_str = ""; |
| | | // for (var i=0;i<_this.playMark.length;i++){ |
| | | // tagid_str += _this.playMark[i][0] |
| | | // if (i!= _this.playMark.length-1){ |
| | | // tagid_str += "," |
| | | // } |
| | | // } |
| | | |
| | | if (_this.real_trak_time != 0) { |
| | | //将当前实时坐标添加进track中 |
| | | var track_now = Date.parse(new Date()); //timestamp为毫秒单位 |
| | | track_now = track_now / 1000; |
| | | var track_now_head = track_now - _this.real_trak_time; |
| | | //当前track最开始的时间 |
| | | var track_head_date = new Date(); |
| | | track_head_date.setTime(track_now_head * 1000 + 8 * 3600 * 1000); |
| | | var track_head_date_str = track_head_date.toJSON().substr(0, 19).replace('T', ' '); |
| | | |
| | | for (var i = 0; i < _this.playMark.length; i++) { |
| | | if (_this.trackNow[_this.playMark[i][0]] != null) { |
| | | if (_this.trackNow[_this.playMark[i][0]].length > 1500) { |
| | | _this.trackNow[_this.playMark[i][0]] = _this.trackNow[_this.playMark[i][0]].slice(-1200); |
| | | }; |
| | | for (var j = 0; j < _this.trackNow[_this.playMark[i][0]].length; j++) { |
| | | if (_this.trackNow[_this.playMark[i][0]][0][2] < track_head_date_str) { |
| | | _this.trackNow[_this.playMark[i][0]].shift() |
| | | } else { |
| | | break |
| | | } |
| | | }; |
| | | }; |
| | | var now_time = new Date(); |
| | | now_time.setTime(track_now * 1000 + 8 * 3600 * 1000); |
| | | var now_time_str = now_time.toJSON().substr(0, 19).replace('T', ' '); |
| | | var tmp = [_this.playMark[i][4], _this.playMark[i][5], now_time_str]; |
| | | if (_this.trackNow[_this.playMark[i][0]] == null) { |
| | | _this.trackNow[_this.playMark[i][0]] = [] |
| | | //围栏实际坐标(加上偏移量的) |
| | | var points_list_sort = []; |
| | | for (var i = 0; i < points_list.length; i++) { |
| | | if (i % 2 == 0) { |
| | | tmp_list = []; |
| | | tmp_list.push(new Number(points_list[i])); |
| | | } else { |
| | | tmp_list.push(new Number(points_list[i])); |
| | | points_list_sort.push(tmp_list); |
| | | } |
| | | _this.trackNow[_this.playMark[i][0]].push(tmp) |
| | | } |
| | | //存区域名称+区域类型+区域坐标,方便后续判断是否在某区域内 |
| | | _this.realFenceList.push([_this.FenceName[m], _this.FenceType[m], points_list_sort]); |
| | | }; |
| | | |
| | | _this.real_trak_time = str_to_time(sysSetting[0].real_trak_time);//实时轨迹显示时长 |
| | | //当前位置 |
| | | _this.playMark = getRealPosition(current_floor); |
| | | var tagid_str = ""; |
| | | for (var i = 0; i < _this.playMark.length; i++) { |
| | | tagid_str += _this.playMark[i][0] |
| | | if (i != _this.playMark.length - 1) { |
| | | tagid_str += "," |
| | | } |
| | | } |
| | | _this.drawImg(current_floor); |
| | | } |
| | | // if (full_screen==true){ |
| | | // clearInterval(timer); |
| | | // timer_screen= setInterval(fn, t); |
| | | // } else { |
| | | // clearInterval(timer_screen); |
| | | // timer = setInterval(fn, t); |
| | | // } |
| | | // var mapa0 = document.getElementById("wrap0") |
| | | // mapa0.value = "正在加载地图......" |
| | | // var mapa0 = document.getElementById("wrap0") |
| | | // var tt = document.createElement("p"); |
| | | // tt.value="正在加载地图......" |
| | | // tt.style="" |
| | | // mapa0.appendChild(tt) |
| | | setTimeout(fnnn, 3000) |
| | | function fnnn(){ |
| | | _this.timer = setInterval(fn, t); |
| | | } |
| | | // _this.timer = setInterval(fn, t); |
| | | timer_list.push(_this.timer); |
| | | }, |
| | | /*计算当前鼠标位置距离canvas的偏移量*/ |
| | | xyToCanvas: function (ele, x, y) { |
| | | var _this = this; |
| | | var obj = _this.canvas.getBoundingClientRect(); |
| | | return { |
| | | x: x - obj.left, |
| | | y: y - obj.top |
| | | }; |
| | | }, |
| | | /*鼠标双击事件*/ |
| | | doubleClick: function (event) { |
| | | var _this = this; |
| | | //实时轨迹 |
| | | if (_this.real_trak_time != 0) { |
| | | _this.trackNow = getTracknow(current_floor, tagid_str, _this.real_trak_time); |
| | | } else { |
| | | _this.trackNow = null; |
| | | } |
| | | |
| | | if ((event.type == "dblclick") && (full_screen == false)) { |
| | | _this.expand = true; |
| | | full_screen = true; |
| | | _this.real_trak_color = getTrackColor(sysSetting[0].real_trak_color);//实时轨迹显示的颜色 |
| | | |
| | | var targ = event.target; |
| | | var tid = targ.id; |
| | | var id = tid.substr(tid.length - 1, 1) |
| | | var str = "map" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "800px"; |
| | | var str = "draw" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "750px"; |
| | | var str = "wrap" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "750px"; |
| | | for (var i = 0; i < 4; i++) { |
| | | if (String(i) != id) { |
| | | _this.canvas.onmousedown = function (event) { |
| | | _this.clickDown(event); |
| | | }; |
| | | _this.canvas.onmousemove = function (event) { |
| | | _this.mouseMove(event) |
| | | }; |
| | | _this.canvas.onmouseup = function (event) { |
| | | _this.mouseUp(event); |
| | | }; |
| | | _this.canvas.onmousewheel = function (event) { |
| | | _this.onmouseWheel(event); |
| | | }; |
| | | _this.ttm = ttm; |
| | | |
| | | //当前地图大于1个时才可以调用dbclick |
| | | if (_this.ttm > 1) { |
| | | _this.canvas.ondblclick = function (event) { |
| | | _this.doubleClick(event); |
| | | } |
| | | } |
| | | |
| | | _this.onlineAnchorList = ail_on; |
| | | _this.offlineAnchorList = ail_off; |
| | | |
| | | var t = 300;//300ms |
| | | |
| | | // function fn(){ |
| | | // //当前需要画的坐标 |
| | | // var realposition_list = getRealPosition_all() |
| | | // _this.playMark = realposition_list[current_floor]; |
| | | // _this.drawImg(current_floor); |
| | | // } |
| | | function fn() { |
| | | if (tuodong == true) { |
| | | return false; |
| | | } |
| | | if (shipinka == false) { |
| | | return false; |
| | | } |
| | | //当前实时坐标 |
| | | _this.playMark = getRealPosition(current_floor); |
| | | // var tagid_str = ""; |
| | | // for (var i=0;i<_this.playMark.length;i++){ |
| | | // tagid_str += _this.playMark[i][0] |
| | | // if (i!= _this.playMark.length-1){ |
| | | // tagid_str += "," |
| | | // } |
| | | // } |
| | | |
| | | if (_this.real_trak_time != 0) { |
| | | //将当前实时坐标添加进track中 |
| | | var track_now = Date.parse(new Date()); //timestamp为毫秒单位 |
| | | track_now = track_now / 1000; |
| | | var track_now_head = track_now - _this.real_trak_time; |
| | | //当前track最开始的时间 |
| | | var track_head_date = new Date(); |
| | | track_head_date.setTime(track_now_head * 1000 + 8 * 3600 * 1000); |
| | | var track_head_date_str = track_head_date.toJSON().substr(0, 19).replace('T', ' '); |
| | | |
| | | for (var i = 0; i < _this.playMark.length; i++) { |
| | | if (_this.trackNow[_this.playMark[i][0]] != null) { |
| | | if (_this.trackNow[_this.playMark[i][0]].length > 1500) { |
| | | _this.trackNow[_this.playMark[i][0]] = _this.trackNow[_this.playMark[i][0]].slice(-1200); |
| | | }; |
| | | for (var j = 0; j < _this.trackNow[_this.playMark[i][0]].length; j++) { |
| | | if (_this.trackNow[_this.playMark[i][0]][0][2] < track_head_date_str) { |
| | | _this.trackNow[_this.playMark[i][0]].shift() |
| | | } else { |
| | | break |
| | | } |
| | | }; |
| | | }; |
| | | var now_time = new Date(); |
| | | now_time.setTime(track_now * 1000 + 8 * 3600 * 1000); |
| | | var now_time_str = now_time.toJSON().substr(0, 19).replace('T', ' '); |
| | | var tmp = [_this.playMark[i][4], _this.playMark[i][5], now_time_str]; |
| | | if (_this.trackNow[_this.playMark[i][0]] == null) { |
| | | _this.trackNow[_this.playMark[i][0]] = [] |
| | | } |
| | | _this.trackNow[_this.playMark[i][0]].push(tmp) |
| | | } |
| | | } |
| | | _this.drawImg(current_floor); |
| | | } |
| | | // if (full_screen==true){ |
| | | // clearInterval(timer); |
| | | // timer_screen= setInterval(fn, t); |
| | | // } else { |
| | | // clearInterval(timer_screen); |
| | | // timer = setInterval(fn, t); |
| | | // } |
| | | // var mapa0 = document.getElementById("wrap0") |
| | | // mapa0.value = "正在加载地图......" |
| | | // var mapa0 = document.getElementById("wrap0") |
| | | // var tt = document.createElement("p"); |
| | | // tt.value="正在加载地图......" |
| | | // tt.style="" |
| | | // mapa0.appendChild(tt) |
| | | setTimeout(fnnn, 3000) |
| | | function fnnn() { |
| | | _this.timer = setInterval(fn, t); |
| | | timer_list.push(_this.timer); |
| | | |
| | | } |
| | | |
| | | // _this.timer = setInterval(fn, t); |
| | | }, |
| | | /*计算当前鼠标位置距离canvas的偏移量*/ |
| | | xyToCanvas: function (ele, x, y) { |
| | | var _this = this; |
| | | var obj = _this.canvas.getBoundingClientRect(); |
| | | return { |
| | | x: x - obj.left, |
| | | y: y - obj.top |
| | | }; |
| | | }, |
| | | /*鼠标双击事件*/ |
| | | doubleClick: function (event) { |
| | | var _this = this; |
| | | |
| | | if ((event.type == "dblclick") && (full_screen == false)) { |
| | | _this.expand = true; |
| | | full_screen = true; |
| | | |
| | | var targ = event.target; |
| | | var tid = targ.id; |
| | | var id = tid.substr(tid.length - 1, 1) |
| | | var str = "map" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "800px"; |
| | | var str = "draw" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "750px"; |
| | | var str = "wrap" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "750px"; |
| | | for (var i = 0; i < 4; i++) { |
| | | if (String(i) != id) { |
| | | var str = "map" + i; |
| | | // document.getElementById(str).style.position = "fixed"; |
| | | // document.getElementById(str).style.left = "100%"; |
| | | document.getElementById(str).style.display = "none"; |
| | | } |
| | | }; |
| | | //_this.drawImg(current_floor); |
| | | clearInterval(_this.timer); |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | for (var i = 0; i < timer_list.length; i++) { |
| | | clearInterval(timer_list[i]); |
| | | } |
| | | timer_list = []; |
| | | console.log(result) |
| | | diaoyonghuatu(result); |
| | | } else if ((event.type == "dblclick") && (full_screen == true)) { |
| | | _this.expand = false; |
| | | full_screen = false; |
| | | |
| | | var targ = event.target; |
| | | var tid = targ.id; |
| | | var id = tid.substr(tid.length - 1, 1) |
| | | var str = "map" + id; |
| | | document.getElementById(str).style.width = "49.5%"; |
| | | document.getElementById(str).style.height = null; |
| | | var str = "draw" + id; |
| | | document.getElementById(str).style.width = null; |
| | | document.getElementById(str).style.height = null; |
| | | var str = "wrap" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "400px"; |
| | | |
| | | for (var i = 0; i < _this.ttm; i++) { |
| | | var str = "map" + i; |
| | | // document.getElementById(str).style.position = "fixed"; |
| | | // document.getElementById(str).style.left = "100%"; |
| | | document.getElementById(str).style.display = "none"; |
| | | document.getElementById(str).style.display = ""; |
| | | }; |
| | | //_this.drawImg(current_floor); |
| | | clearInterval(_this.timer); |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | for (var i = 0; i < timer_list.length; i++) { |
| | | clearInterval(timer_list[i]); |
| | | } |
| | | }; |
| | | //_this.drawImg(current_floor); |
| | | clearInterval(_this.timer); |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | for (var i = 0; i < timer_list.length; i++) { |
| | | clearInterval(timer_list[i]); |
| | | } |
| | | timer_list = []; |
| | | console.log(result) |
| | | diaoyonghuatu(result); |
| | | } else if ((event.type == "dblclick") && (full_screen == true)) { |
| | | _this.expand = false; |
| | | full_screen = false; |
| | | |
| | | var targ = event.target; |
| | | var tid = targ.id; |
| | | var id = tid.substr(tid.length - 1, 1) |
| | | var str = "map" + id; |
| | | document.getElementById(str).style.width = "49.5%"; |
| | | document.getElementById(str).style.height = null; |
| | | var str = "draw" + id; |
| | | document.getElementById(str).style.width = null; |
| | | document.getElementById(str).style.height = null; |
| | | var str = "wrap" + id; |
| | | document.getElementById(str).style.width = "100%"; |
| | | document.getElementById(str).style.height = "400px"; |
| | | |
| | | for (var i = 0; i < _this.ttm; i++) { |
| | | var str = "map" + i; |
| | | document.getElementById(str).style.display = ""; |
| | | }; |
| | | //_this.drawImg(current_floor); |
| | | clearInterval(_this.timer); |
| | | var can = _this.context; |
| | | can.clearRect(0, 0, _this.canvas.width, _this.canvas.height); |
| | | for (var i = 0; i < timer_list.length; i++) { |
| | | clearInterval(timer_list[i]); |
| | | } |
| | | timer_list = []; |
| | | diaoyonghuatu(result); |
| | | } |
| | | }, |
| | | /*鼠标单击事件*/ |
| | | clickDown: function (event) { |
| | | var _this = this; |
| | | if ((event.button == 0)) {//点击鼠标左键 |
| | | _this.dragFlag = true; |
| | | tuodong = true; |
| | | //_this.canvas.style.cursor = "move"; |
| | | _this.pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | |
| | | } |
| | | }, |
| | | /*鼠标移动事件*/ |
| | | mouseMove: function (event) { |
| | | var _this = this; |
| | | /*拖拽*/ |
| | | if (_this.dragFlag) { |
| | | tuodong = true; |
| | | _this.canvas.style.cursor = "move"; |
| | | var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | var x = pos1.x - _this.pos.x; |
| | | var y = pos1.y - _this.pos.y; |
| | | _this.pos = pos1; |
| | | for (var key in _this.imgXList) { |
| | | _this.imgXList[key] += x; |
| | | _this.imgYList[key] += y; |
| | | } |
| | | //clearInterval(_this.timer); |
| | | _this.cacheCanvas = null; |
| | | _this.drawImg(); |
| | | } |
| | | //diaoyonghuatu(result); |
| | | }, |
| | | /*鼠标放开事件*/ |
| | | mouseUp: function (event) { |
| | | var _this = this; |
| | | _this.dragFlag = false; |
| | | tuodong = false; |
| | | if (_this.markFlag) { |
| | | _this.canvas.style.cursor = "none"; |
| | | return; |
| | | } |
| | | _this.canvas.style.cursor = 'default'; |
| | | |
| | | }, |
| | | /*鼠标滚轮事件*/ |
| | | onmouseWheel: function (event) { |
| | | var _this = this; |
| | | _this.cacheCanvas = null; |
| | | var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40)); |
| | | //取消浏览器默认行为 |
| | | if (event.preventDefault) { |
| | | event.preventDefault(); |
| | | } else { |
| | | event.returnValue = false; |
| | | } |
| | | if (event.wheelDelta > 0 && _this.scaleFlag < 9) { |
| | | for (var key in _this.imgScaleList) { |
| | | _this.imgScaleList[key] *= 1.25; |
| | | _this.imgXList[key] = _this.imgXList[key] * 1.25 - 0.25 * pos.x; |
| | | _this.imgYList[key] = _this.imgYList[key] * 1.25 - 0.25 * pos.y; |
| | | } |
| | | _this.scaleFlag += 1; |
| | | } |
| | | if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缩小 |
| | | for (var key in _this.imgScaleList) { |
| | | _this.imgScaleList[key] *= 0.8; |
| | | _this.imgXList[key] = _this.imgXList[key] * 0.8 + pos.x * 0.2; |
| | | _this.imgYList[key] = _this.imgYList[key] * 0.8 + pos.y * 0.2; |
| | | } |
| | | _this.scaleFlag -= 1; |
| | | } |
| | | _this.imgScaleList['icon'] = 0.03; |
| | | _this.drawImg(); |
| | | }, |
| | | }; |
| | | |
| | | function getRealPosition_all() { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealPosition_all.do", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | //playMark[id,name,power,life,x,y,time] |
| | | realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].posx, data[i].posy, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sos, data[i].fence]) |
| | | timer_list = []; |
| | | diaoyonghuatu(result); |
| | | } |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | var audio1 = new Audio("/hxzkoa/hxzk/image/voice/sos.wav"); |
| | | var audio2 = new Audio("/hxzkoa/hxzk/image/voice/warning.wav"); |
| | | // var zaipan = [] |
| | | // var sosgaojing1 = getRealPosition(); |
| | | // for (var i = 0; i < sosgaojing1.length; i++) { |
| | | // zaipan.push(false) |
| | | // } |
| | | // setInterval(baojing, 1000) |
| | | function baojing() { |
| | | var sosgaojing = getRealPosition_all(); |
| | | for (var i = 0; i < sosgaojing.length; i++) { |
| | | if (sosgaojing[i][7] == 1) { |
| | | if (sosgaojing[i][8] == 1) { |
| | | // if (zaipan[i] == false) { |
| | | var str = '注意,编号[' + sosgaojing[i][0] + ']SOS告警' |
| | | // Audio1.click() |
| | | audio1.play() |
| | | // swal(str) |
| | | // $.ajax({ |
| | | // url: "/hxzkoa/sosgaojing.do", |
| | | // type: "POST", |
| | | // dataType: "JSON", |
| | | // data: { |
| | | // tagid: sosgaojing[i][0] |
| | | // } |
| | | // }) |
| | | // } |
| | | } if (sosgaojing[i][9] == 1) { |
| | | // if (zaipan[i] == false) { |
| | | var str = '注意,编号[' + sosgaojing[i][0] + ']进入危险区域' |
| | | // audio2.click() |
| | | audio2.play() |
| | | // swal(str) |
| | | // $.ajax({ |
| | | // url: "/hxzkoa/fencegaojing.do", |
| | | // type: "POST", |
| | | // dataType: "JSON", |
| | | // data: { |
| | | // tagid: sosgaojing[i][0] |
| | | // } |
| | | // }) |
| | | // } |
| | | /*鼠标单击事件*/ |
| | | clickDown: function (event) { |
| | | var _this = this; |
| | | if ((event.button == 0)) {//点击鼠标左键 |
| | | _this.dragFlag = true; |
| | | tuodong = true; |
| | | //_this.canvas.style.cursor = "move"; |
| | | _this.pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | |
| | | } |
| | | // zaipan[i] = true |
| | | } |
| | | // } else { |
| | | // zaipan[i] = false |
| | | // } |
| | | } |
| | | } |
| | | }, |
| | | /*鼠标移动事件*/ |
| | | mouseMove: function (event) { |
| | | var _this = this; |
| | | /*拖拽*/ |
| | | if (_this.dragFlag) { |
| | | tuodong = true; |
| | | _this.canvas.style.cursor = "move"; |
| | | var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | var x = pos1.x - _this.pos.x; |
| | | var y = pos1.y - _this.pos.y; |
| | | _this.pos = pos1; |
| | | for (var key in _this.imgXList) { |
| | | _this.imgXList[key] += x; |
| | | _this.imgYList[key] += y; |
| | | } |
| | | //clearInterval(_this.timer); |
| | | _this.cacheCanvas = null; |
| | | _this.drawImg(); |
| | | } |
| | | //diaoyonghuatu(result); |
| | | }, |
| | | /*鼠标放开事件*/ |
| | | mouseUp: function (event) { |
| | | var _this = this; |
| | | _this.dragFlag = false; |
| | | tuodong = false; |
| | | if (_this.markFlag) { |
| | | _this.canvas.style.cursor = "none"; |
| | | return; |
| | | } |
| | | _this.canvas.style.cursor = 'default'; |
| | | |
| | | document.getElementById("stop").style.display = 'none'; |
| | | $("#search").click(function () { |
| | | var input = document.getElementById("tagidaaa").value; |
| | | $.ajax({ |
| | | async: false, |
| | | url: "/hxzkoa/sousuo.do", |
| | | type: "POST", |
| | | dataType: "JSON", |
| | | data: { |
| | | tagid: input |
| | | }, |
| | | /*鼠标滚轮事件*/ |
| | | onmouseWheel: function (event) { |
| | | var _this = this; |
| | | _this.cacheCanvas = null; |
| | | var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY); |
| | | event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40)); |
| | | //取消浏览器默认行为 |
| | | if (event.preventDefault) { |
| | | event.preventDefault(); |
| | | } else { |
| | | event.returnValue = false; |
| | | } |
| | | if (event.wheelDelta > 0 && _this.scaleFlag < 9) { |
| | | for (var key in _this.imgScaleList) { |
| | | _this.imgScaleList[key] *= 1.25; |
| | | _this.imgXList[key] = _this.imgXList[key] * 1.25 - 0.25 * pos.x; |
| | | _this.imgYList[key] = _this.imgYList[key] * 1.25 - 0.25 * pos.y; |
| | | } |
| | | _this.scaleFlag += 1; |
| | | } |
| | | if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缩小 |
| | | for (var key in _this.imgScaleList) { |
| | | _this.imgScaleList[key] *= 0.8; |
| | | _this.imgXList[key] = _this.imgXList[key] * 0.8 + pos.x * 0.2; |
| | | _this.imgYList[key] = _this.imgYList[key] * 0.8 + pos.y * 0.2; |
| | | } |
| | | _this.scaleFlag -= 1; |
| | | } |
| | | _this.imgScaleList['icon'] = 0.03; |
| | | _this.drawImg(); |
| | | }, |
| | | }; |
| | | |
| | | function getRealPosition_all() { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'POST', |
| | | url: "/hxzkoa/getRealPosition_all.do", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | for (var i = 0; i < data.length; i++) { |
| | | //playMark[id,name,power,life,x,y,time] |
| | | realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].posx, data[i].posy, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sos, data[i].fence]) |
| | | } |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | var audio1 = new Audio("/hxzkoa/hxzk/image/voice/sos.wav"); |
| | | var audio2 = new Audio("/hxzkoa/hxzk/image/voice/warning.wav"); |
| | | // var zaipan = [] |
| | | // var sosgaojing1 = getRealPosition(); |
| | | // for (var i = 0; i < sosgaojing1.length; i++) { |
| | | // zaipan.push(false) |
| | | // } |
| | | // setInterval(baojing, 1000) |
| | | function baojing() { |
| | | var sosgaojing = getRealPosition_all(); |
| | | for (var i = 0; i < sosgaojing.length; i++) { |
| | | if (sosgaojing[i][7] == 1) { |
| | | if (sosgaojing[i][8] == 1) { |
| | | // if (zaipan[i] == false) { |
| | | var str = '注意,编号[' + sosgaojing[i][0] + ']SOS告警' |
| | | // Audio1.click() |
| | | audio1.play() |
| | | // swal(str) |
| | | // $.ajax({ |
| | | // url: "/hxzkoa/sosgaojing.do", |
| | | // type: "POST", |
| | | // dataType: "JSON", |
| | | // data: { |
| | | // tagid: sosgaojing[i][0] |
| | | // } |
| | | // }) |
| | | // } |
| | | } if (sosgaojing[i][9] == 1) { |
| | | // if (zaipan[i] == false) { |
| | | var str = '注意,编号[' + sosgaojing[i][0] + ']进入危险区域' |
| | | // audio2.click() |
| | | audio2.play() |
| | | // swal(str) |
| | | // $.ajax({ |
| | | // url: "/hxzkoa/fencegaojing.do", |
| | | // type: "POST", |
| | | // dataType: "JSON", |
| | | // data: { |
| | | // tagid: sosgaojing[i][0] |
| | | // } |
| | | // }) |
| | | // } |
| | | } |
| | | // zaipan[i] = true |
| | | } |
| | | // } else { |
| | | // zaipan[i] = false |
| | | // } |
| | | } |
| | | }) |
| | | document.getElementById("search").style.display = 'none'; |
| | | document.getElementById("stop").style.display = ''; |
| | | document.getElementById("tagidaaa").value = ""; |
| | | }); |
| | | $("#stop").click(function () { |
| | | $.ajax({ |
| | | async: false, |
| | | url: "/hxzkoa/sousuoquxiao.do", |
| | | type: "POST", |
| | | dataType: "JSON" |
| | | }) |
| | | document.getElementById("search").style.display = ''; |
| | | } |
| | | |
| | | document.getElementById("stop").style.display = 'none'; |
| | | }); |
| | | function hidePopup(x, e) { |
| | | if (e != undefined) { |
| | | e.cancelBubble = true; |
| | | $("#search").click(function () { |
| | | var input = document.getElementById("tagidaaa").value; |
| | | $.ajax({ |
| | | async: false, |
| | | url: "/hxzkoa/sousuo.do", |
| | | type: "POST", |
| | | dataType: "JSON", |
| | | data: { |
| | | tagid: input |
| | | } |
| | | }) |
| | | document.getElementById("search").style.display = 'none'; |
| | | document.getElementById("stop").style.display = ''; |
| | | document.getElementById("tagidaaa").value = ""; |
| | | }); |
| | | $("#stop").click(function () { |
| | | $.ajax({ |
| | | async: false, |
| | | url: "/hxzkoa/sousuoquxiao.do", |
| | | type: "POST", |
| | | dataType: "JSON" |
| | | }) |
| | | document.getElementById("search").style.display = ''; |
| | | document.getElementById("stop").style.display = 'none'; |
| | | }); |
| | | function hidePopup(x, e) { |
| | | if (e != undefined) { |
| | | e.cancelBubble = true; |
| | | } |
| | | document.getElementById("popup").style.display = "none"; |
| | | isDelete = x; |
| | | shipinka = true; |
| | | document.getElementById("tanchuang").innerHTML = ""; |
| | | } |
| | | document.getElementById("popup").style.display = "none"; |
| | | isDelete = x; |
| | | shipinka = true; |
| | | document.getElementById("tanchuang").innerHTML = ""; |
| | | } |
| | | </script> |
| | | <!-- 结束调用室内定位地图功能 --> |
| | | <!-- > END PAGE FUNCTION SCRIPTS --> |
| | | </script> |
| | | <!-- 结束调用室内定位地图功能 --> |
| | | <!-- > END PAGE FUNCTION SCRIPTS --> |
| | | |
| | | |
| | | |
| | | <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS --> |
| | | <script src="/hxzkoa/hxzk/plugins/apex/apexcharts.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/assets/js/dashboard/dash_2.js"></script> |
| | | <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS --> |
| | | <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS --> |
| | | <script src="/hxzkoa/hxzk/plugins/apex/apexcharts.min.js"></script> |
| | | <script src="/hxzkoa/hxzk/assets/js/dashboard/dash_2.js"></script> |
| | | <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS --> |
| | | |
| | | </body> |
| | | |