| | |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| | | <meta name="viewport" |
| | | content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | | <title>切换地图</title> |
| | | |
| | | <link rel="icon" type="image/x-icon" href="/hxzkoa/hxzk/assets/img/favicon.ico" /> |
| | | <link href="/hxzkoa/hxzk/assets/css/loader.css" rel="stylesheet" type="text/css" /> |
| | | <script src="/hxzkoa/hxzk/assets/js/loader.js"></script> |
| | | |
| | | <link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" /> |
| | | <!-- BEGIN GLOBAL MANDATORY STYLES --> |
| | | <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" |
| | | rel="stylesheet"> |
| | |
| | | max-width: 100%; |
| | | height: 100%; |
| | | background-color: #F0F0F0; |
| | | background: url("/hxzkoa/resources/images/bottomBackground2.jpg"); |
| | | } |
| | | |
| | | #head { |
| | |
| | | top: 20px; |
| | | right: 10px; |
| | | } |
| | | |
| | | span{ |
| | | color: #191E3A; |
| | | } |
| | | .mark_list li { |
| | | float: left; |
| | | width: 100px; |
| | |
| | | /*padding: 10px 30px;*/ |
| | | color: black; |
| | | } |
| | | |
| | | .blue{ |
| | | margin-top: 14px; |
| | | font-weight: bolder; |
| | | font-size: 14px; |
| | | } |
| | | .blue1,.blue2,.blue3,.blue4:active{ |
| | | color: black; |
| | | border-radius: 5px; |
| | | |
| | | } |
| | | .blue4{ |
| | | color: black; |
| | | border-radius: 5px; |
| | | } |
| | | .blue1{ |
| | | text-decoration: none; |
| | | color: white; |
| | | font-weight: bolder; |
| | | } |
| | | .container{ |
| | | box-shadow: 1px 2px 5px #666666; |
| | | position: fixed; |
| | | top: 400px; |
| | | left: 1820px; |
| | | z-index: 99999999999; |
| | | opacity: 1; |
| | | |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | |
| | | <button style="width: 80px;position: fixed;top: 50px;right: 130px;z-index: 9999;" type="button" |
| | | class="btn btn-secondary" id="stop">取消</button> |
| | | </div> --> |
| | | <div |
| | | style="width: 300px; display: flex; justify-content: space-between; position: absolute; top: 50px; right: 28px; z-index: 9999;"> |
| | | <input style="width: 200px;" type="text" id="tagidaaa" class="form-control" |
| | | placeholder="请输入标签ID"> |
| | | <button style="width: 80px;" type="button" class="btn btn-secondary" id="search">搜索</button> |
| | | <button style="width: 80px;" type="button" class="btn btn-secondary" id="stop">取消</button> |
| | | <!-- <button type="button" onclick="showPopup()">弹窗</button> --> |
| | | </div> |
| | | <%-- <div--%> |
| | | <%-- style="width: 300px; display: flex; justify-content: space-between; position: absolute; top: 50px; right: 28px; z-index: 9999;">--%> |
| | | <%-- <input style="width: 200px;" type="text" id="tagidaaa" class="form-control"--%> |
| | | <%-- placeholder="请输入标签ID">--%> |
| | | <%-- <button style="width: 80px;" type="button" class="btn btn-secondary" id="search">搜索</button>--%> |
| | | <%-- <button style="width: 80px;" type="button" class="btn btn-secondary" id="stop">取消</button>--%> |
| | | <%-- <!-- <button type="button" onclick="showPopup()">弹窗</button> -->--%> |
| | | <%-- </div>--%> |
| | | <!-- BEGIN NAVBAR --> |
| | | <div class="login-page"></div> |
| | | <!-- END NAVBAR --> |
| | |
| | | <div class="row layout-top-spacing" id="cancel-row"> |
| | | <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing"> |
| | | <div class="widget widget-one_hybrid widget-engagement" id="map0" |
| | | style="width: 49.5%; float: left;" ondblclick="changemap0()"> |
| | | <div class="widget-heading" style="height: 450px; width: 100%" id="maphead0"> |
| | | style="width: 100%; float: left;" ondblclick="changemap0()"> |
| | | <div class="widget-heading" style="height: 800px; width: 100%" id="maphead0"> |
| | | <div class='panel-head' id="mapname0">地图0</div> |
| | | <div style="width: 100%; height: 400px; float: left" id="wrap0"> |
| | | <div style="width: 100%; height: 750px; float: left" id="wrap0"> |
| | | <canvas id="draw0"></canvas> |
| | | <p style="z-index: 9999;" id="jiazai0">正在加载地图......</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="widget widget-one_hybrid widget-engagement" |
| | | style="margin-left: 1%; width: 49.5%; float: left;" id="map1" |
| | | style=" width: 100%; float: left;position: absolute;" id="map1" |
| | | ondblclick="changemap1()"> |
| | | <div class="widget-heading" style="height: 450px; width: 100%" id="maphead1"> |
| | | <div class="widget-heading" style="height: 800px; width: 100%;" id="maphead1"> |
| | | <div class='panel-head' id="mapname1">地图1</div> |
| | | <div style="width: 100%; height: 400px; float: left" id="wrap1"> |
| | | <div style="width: 100%; height: 750px; float: left" id="wrap1"> |
| | | <canvas id="draw1"></canvas> |
| | | <p style="z-index: 9999;" id="jiazai1">正在加载地图......</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="widget widget-one_hybrid widget-engagement" |
| | | style="width: 49.5%; float: left; margin-top: 1%" id="map2" |
| | | style="width: 100%; float: left;position: absolute;" id="map2" |
| | | ondblclick="changemap2()"> |
| | | <div class="widget-heading" style="height: 450px; width: 100%" id="maphead2"> |
| | | <div class="widget-heading" style="height: 800px; width: 100%;" id="maphead2"> |
| | | <div class='panel-head' id="mapname2">地图2</div> |
| | | <div style="width: 100%; height: 400px; float: left" id="wrap2"> |
| | | <div style="width: 100%; height: 750px; float: left" id="wrap2"> |
| | | <canvas id="draw2"></canvas> |
| | | <p style="z-index: 9999;" id="jiazai2">正在加载地图......</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="widget widget-one_hybrid widget-engagement" |
| | | style="width: 49.5%; margin-left: 1%; float: left; margin-top: 1%" id="map3" |
| | | style="width:100%; float: left;position: absolute;" id="map3" |
| | | ondblclick="changemap3()"> |
| | | <div class="widget-heading" style="height: 450px; width: 100%" id="maphead3"> |
| | | <div class='panel-head' id="mapname3">地图4</div> |
| | | <div style="width: 100%; height: 400px; float: left" id="wrap3"> |
| | | <div class="widget-heading" style="height: 800px; width: 100%;" id="maphead3"> |
| | | <div class='panel-head' id="mapname3">地图3</div> |
| | | <div style="width: 100%; height: 750px; float: left" id="wrap3"> |
| | | <canvas id="draw3"></canvas> |
| | | <p style="z-index: 9999;" id="jiazai3">正在加载地图......</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div id="boxfloor1" style="width: 46px;height: 40px;position: absolute;top: 430px;left: 1810px;background-color: white;border-radius: 8px;opacity: 0.8;"> |
| | | <a href="/hxzkoa/show.do" onclick="shouye()" id="shouye" style="margin-top: 4px;display: inline-block" ><img src="/hxzkoa/hxzk/image/icon/shouye.png" width="30"></a> |
| | | </div> |
| | | <!-- END CONTENT PART --> |
| | | <div style="background-color: white;width: 46px;height: 194px;border-radius: 10px;padding-top: 10px;padding-bottom: 10px;position: absolute;top: 500px;left: 1810px;opacity: 0.8;box-shadow: 2px 2px 3px black;z-index: 99999" id="boxfloor"> |
| | | <a href="#" class="blue1"><div class="blue11" style="text-align: center;height: 30px;width: 30px;line-height: 30px;margin-top: 14px;margin: auto;color: black"onclick="f1()">F1</div></a> |
| | | <div style="margin: auto;width: 30px;border-top: 1px solid #cccccc;margin-top: 7px;display: none" class="f2"></div> |
| | | <a href="#" class="blue1"><div class="blue22" style="text-align: center;height: 30px;width: 30px;line-height: 30px;margin-top: 14px;margin: auto;margin-top: 10px;display: none;color: black" id="f2" onclick="f2()">F2</div></a> |
| | | <div style="margin: auto;width: 30px;border-top: 1px solid #cccccc;margin-top: 7px;display: none" class="f3"></div> |
| | | <a href="#" class="blue1"><div class="blue33" style="text-align: center;height: 30px;width: 30px;line-height: 30px;margin-top: 14px;margin: auto;margin-top: 10px;display: none;color: black" id="f3" onclick="f3()">F3</div></a> |
| | | <div style="margin: auto;width: 30px;border-top: 1px solid #cccccc;margin-top: 7px;display: none" class="f4"></div> |
| | | <a href="#" class="blue1"><div class="blue44" style="text-align: center;height: 30px;width: 30px;line-height: 30px;margin-top: 14px;margin: auto;margin-top: 10px;display: none;color: black" id="f4" onclick="f4()">F4</div></a> |
| | | </div> |
| | | |
| | | <!-- END MAIN CONTAINER --> |
| | | <% String username=(String) session.getAttribute("username"); if (username==null || |
| | |
| | | <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 src="/hxzkoa/hxzk/assets/js/custom.js"></script> |
| | | <script> |
| | | var result; |
| | | var department = []; |
| | |
| | | |
| | | $('.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> |
| | | |
| | | |
| | | //选择楼层 |
| | | function f1(){ |
| | | document.getElementById("map0").style.display = "block"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | $(".blue11").css("background-color","#1DECFE") |
| | | $(".blue22").css("background-color","white") |
| | | $(".blue33").css("background-color","white") |
| | | $(".blue44").css("background-color","white") |
| | | } |
| | | function f2(){ |
| | | document.getElementById("map1").style.width = "100%"; |
| | | document.getElementById("maphead1").style.height = "800px"; |
| | | document.getElementById("wrap1").style.height = "750px"; |
| | | document.getElementById("map0").style.display = "none"; |
| | | document.getElementById("map1").style.display = "block"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | $(".blue22").css("background-color","#1DECFE") |
| | | $(".blue33").css("background-color","white") |
| | | $(".blue44").css("background-color","white") |
| | | $(".blue11").css("background-color","white") |
| | | } |
| | | function f3(){ |
| | | document.getElementById("map2").style.width = "100%"; |
| | | document.getElementById("maphead2").style.height = "800px"; |
| | | document.getElementById("wrap2").style.height = "750px"; |
| | | document.getElementById("map0").style.display = "none"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "block"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | $(".blue33").css("background-color","#1DECFE") |
| | | $(".blue44").css("background-color","white") |
| | | $(".blue22").css("background-color","white") |
| | | $(".blue11").css("background-color","white") |
| | | } |
| | | function f4(){ |
| | | document.getElementById("map3").style.width = "100%"; |
| | | document.getElementById("maphead3").style.height = "800px"; |
| | | document.getElementById("wrap3").style.height = "750px"; |
| | | document.getElementById("map0").style.display = "none"; |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "block"; |
| | | $(".blue44").css("background-color","#1DECFE") |
| | | $(".blue33").css("background-color","white") |
| | | $(".blue22").css("background-color","white") |
| | | $(".blue11").css("background-color","white") |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | //首页地图控制 |
| | | var full_screen = false; |
| | | var timer_list = []; |
| | |
| | | document.getElementById("map1").style.display = "none"; |
| | | document.getElementById("map2").style.display = "none"; |
| | | document.getElementById("map3").style.display = "none"; |
| | | } else if (data.length == 1) { |
| | | |
| | | } else if (data.length == 1) { |
| | | tubiaochicun = 0.015; |
| | | document.getElementById("map0").style.width = "100%"; |
| | | document.getElementById("mapname0").innerHTML = data[0].mapname; |
| | |
| | | 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"; |
| | | }; |
| | | } |
| | | |
| | | if (data.length == 1) { |
| | | $("#f1").css("display", "block") |
| | | $("#boxfloor").css("height","50px") |
| | | } |
| | | if (data.length == 2) { |
| | | $("#f2").css("display", "block") |
| | | $(".f2").css("display", "block") |
| | | $("#boxfloor").css("height","100px") |
| | | } |
| | | if (data.length == 3) { |
| | | $("#f2").css("display", "block") |
| | | $(".f2").css("display", "block") |
| | | $("#f3").css("display", "block") |
| | | $(".f3").css("display", "block") |
| | | $("#boxfloor").css("height","150px") |
| | | } |
| | | if (data.length == 4) { |
| | | $("#f2").css("display", "block") |
| | | $(".f2").css("display", "block") |
| | | $("#f3").css("display", "block") |
| | | $(".f3").css("display", "block") |
| | | $("#f4").css("display", "block") |
| | | $(".f4").css("display", "block") |
| | | } |
| | | $(".floor1").css("display", "block") |
| | | for (var i = 0; i < data.length; i++) { |
| | | console.log("123456789") |
| | | str = "mapname" + i; |
| | | document.getElementById(str).innerHTML = data[i].mapname; |
| | | map.push(data[i].mapname); |
| | |
| | | return [anchorList_on, anchorList_off] |
| | | }; |
| | | |
| | | /**该方法用来绘制一个有填充色的圆角矩形 |
| | | *@param cxt:canvas的上下文环境 |
| | | *@param x:左上角x轴坐标 |
| | | *@param y:左上角y轴坐标 |
| | | *@param width:矩形的宽度 |
| | | *@param height:矩形的高度 |
| | | *@param radius:圆的半径 |
| | | *@param fillColor:填充颜色 |
| | | /**该方法用来绘制一个有填充色的圆角矩形 |
| | | *@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.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值 |
| | | cxt.fill(); |
| | | cxt.restore(); |
| | | } |
| | | |
| | | function drawRoundRectPath(cxt, width, height, radius) { |
| | | cxt.beginPath(0); |
| | | //从右下角顺时针绘制,弧度从0到1/2PI |
| | | //从右下角顺时针绘制,弧度从0到1/2PI |
| | | cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); |
| | | |
| | | //矩形下边线 |
| | | //矩形下边线 |
| | | cxt.lineTo(radius, height); |
| | | |
| | | //左下角圆弧,弧度从1/2PI到PI |
| | | //左下角圆弧,弧度从1/2PI到PI |
| | | cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); |
| | | |
| | | //矩形左边线 |
| | | //矩形左边线 |
| | | cxt.lineTo(0, radius); |
| | | |
| | | //左上角圆弧,弧度从PI到3/2PI |
| | | //左上角圆弧,弧度从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(); |
| | | } |
| | |
| | | |
| | | |
| | | // var anckicon = '/hxzkoa/hxzk/image/anchor/lingjin.png'; |
| | | // imgList['anchor']=anckicon; |
| | | // 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; |
| | |
| | | this.playMark; //正在展示的标记 |
| | | this.playAchor; //正在展示的基站 |
| | | this.playAchorli; //正在展示的基站 |
| | | this.playMarkInKaoQin;//当前标记是否在考勤区域内 |
| | | this.playMarkInKaoQin;//当前标记是否在考勤区域内 |
| | | this.trackNow; //当前轨迹 |
| | | |
| | | this.onlineAnchorList;//当前基站列表 |
| | |
| | | |
| | | 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']); |
| | | |
| | |
| | | var pm = _this.playMark; |
| | | |
| | | function ftn(current_floor, pm, tn, rtk, ctt, rtc, igxm, igym, igslm, rnlm, xr, yr, xx0, yy0) { |
| | | alert(tn) |
| | | //trackNow = getTracknow(current_floor, pm[0], rtk) |
| | | if (tn.length == 0) { |
| | | trackNow = []; |
| | |
| | | _this.trackNow = []; |
| | | } |
| | | var isSos = _this.playMark[i][7]; |
| | | |
| | | |
| | | if (_this.playMark[i][8] == "1") { |
| | | if (sousuoType) { |
| | | can.drawImage(images[_this.playMark[i][10]], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]); |
| | |
| | | var track_now = Date.parse(new Date()); //timestamp为毫秒单位 |
| | | track_now = track_now / 1000; |
| | | var track_now_head = track_now - _this.real_trak_time; |
| | | //当前track最开始的时间 |
| | | //当前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', ' '); |