yzt
2023-09-27 726603df43447f8cfedfeaae4267209adbd01699
src/main/webapp/hxzk/mapshow/mapShow.jsp
@@ -7,13 +7,13 @@
            <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">
@@ -55,6 +55,7 @@
                     max-width: 100%;
                     height: 100%;
                     background-color: #F0F0F0;
                     background: url("/hxzkoa/resources/images/bottomBackground2.jpg");
                  }
                  #head {
@@ -99,7 +100,9 @@
                     top: 20px;
                     right: 10px;
                  }
                  span{
                     color: #191E3A;
                  }
                  .mark_list li {
                     float: left;
                     width: 100px;
@@ -141,6 +144,35 @@
                     /*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>
@@ -171,14 +203,14 @@
               <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  -->
@@ -193,53 +225,68 @@
                     <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 ||
@@ -261,6 +308,7 @@
                  <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 = [];
@@ -315,13 +363,69 @@
                     $('.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 = [];
@@ -340,7 +444,8 @@
                                 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;
@@ -350,11 +455,35 @@
                                 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);
@@ -689,52 +818,52 @@
                        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();
                     }
@@ -813,7 +942,7 @@
                        //        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;
@@ -894,7 +1023,7 @@
                        this.playMark; //正在展示的标记
                        this.playAchor; //正在展示的基站
                        this.playAchorli; //正在展示的基站
                        this.playMarkInKaoQin;//当前标记是否在考勤区域内
                        this.playMarkInKaoQin;//当前标记是否在考勤区域内
                        this.trackNow; //当前轨迹
                        this.onlineAnchorList;//当前基站列表
@@ -962,7 +1091,7 @@
                           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']);
@@ -1115,6 +1244,7 @@
                                             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 = [];
@@ -1146,7 +1276,7 @@
                                             _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]);
@@ -1463,7 +1593,7 @@
                                 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', ' ');