3.7
fxl
2023-03-07 52cffc4ab8e9787a6f233295502c7c9788dddae1
src/main/webapp/hxzk/fence/drawFence.jsp
@@ -177,8 +177,17 @@
                                       <option value="考勤区域">考勤区域</option>
                                       <option value="进入告警">进入告警</option>
                                       <option value="出去告警">出去告警</option>
                                       <option value="超员报警">超员报警</option>
                                       <option value="超时报警">超时报警</option>
                                       <option value="巡检区域">巡检区域</option>
                                       <option value="定位区域">定位区域</option>
                                       <option value="室内区域">室内区域</option>
                                       <option value="切换区域">切换区域</option>
                                       <option value="视频区域">视频区域</option>
                                       <option value="无效区域">无效区域</option>
                                       <option value="作业区域">作业区域</option>
                                       <option value="进门告警">进门告警</option>
                                       <option value="出门告警">出门告警</option>
                                    </select>
                                 </div>
                                 <div style="margin-left: 20px; padding: 10px; width: 100%;">
@@ -269,6 +278,9 @@
                                 <div style="margin-top: 35px;margin-left: 30px" id="baiduti">
                                    <label id="draw_hin">绘制完成双击结束绘制</label>
                                 </div>
                                 <div style="margin-top: 35px;margin-left: 30px;display:none;" id="tiaofu3">
                                    <label id="tiaofu3a"></label>
                                 </div>
                              </div>
                              <div id="baidumap" style="width: 78%; height: 600px; float: right">
                              </div>
@@ -298,6 +310,7 @@
               <input type="hidden" name="alertq" id="alertq" value="<%=alertq%>">
               <input type="hidden" name="deleteall" id="deleteall" value="<%=deleteall%>">
               <input type="hidden" name="fenceq" id="fenceq" value="<%=fenceq%>">
               <input type="hidden" name="xianusera" id="xianusera" value="<%=username%>">
               <!-- > BEGIN PAGE FUNCTION SCRIPTS -->
               <script type="text/javascript">
@@ -373,6 +386,7 @@
                        document.getElementById("wrap").style.display = "none";
                        document.getElementById("xuanxingzhuang").style.display = "none";
                        document.getElementById("tiaofu").style.display = "none";
                        document.getElementById("tiaofu3").style.display = "none";
                        document.getElementById("yanseaa").style.display = "none";
                        document.getElementById("fencegao").style.display = "";
                        document.getElementById("bdbaocun").style.display = "";
@@ -411,6 +425,7 @@
                        document.getElementById("wrap").style.display = "";
                        document.getElementById("xuanxingzhuang").style.display = "";
                        document.getElementById("tiaofu").style.display = "";
                        document.getElementById("tiaofu3").style.display = "";
                        document.getElementById("yanseaa").style.display = "";
                        document.getElementById("fencegao").style.display = "none";
                        document.getElementById("bdbaocun").style.display = "none";
@@ -431,7 +446,6 @@
                              value: select_value
                           },
                           success: function (data) {
                              //console.log(data);
                              console.log(data[0].mapname);
                              imgUrl = '/hxzkoa/hxzk/image/mapfile/' + data[0].mapname;
                              //                 imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';
@@ -1031,12 +1045,11 @@
                     this.existFence = [];
                     this.existFenceColor = [];
                     this.existFenceName = [];
        // 读取数据库中的所有围栏 进行绘制 此处加上颜色及形状
                        this.getImgLoad(Imgurl);
                     // 读取数据库中的所有围栏 进行绘制 此处加上颜色及形状
                     this.getImgLoad(Imgurl);
                     this.init();
                     document.oncontextmenu = new Function("event.returnValue=false;");
                     document.onselectstart = new Function("event.returnValue=false;");
                  }
                  MarkPoints.prototype = {
@@ -1080,11 +1093,6 @@
                        var _this = this;
                        _this.context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
                        _this.context.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgX, _this.imgY, _this.img.naturalWidth * _this.imgScale * _this.rateNum, _this.img.naturalHeight * _this.imgScale * _this.rateNum);
                        //console.log("original width", _this.img.naturalWidth);
                        //console.log("original height", _this.img.naturalHeight);
                        //console.log("pianyi", _this.imgX, _this.imgY);
                        //console.log("ratenum",_this.rateNum);
                        //console.log("imagescale", _this.imgScale);
                        _this.FenceList = getExistFence("zuobiao");
                        _this.FenceColor = getExistFence("color");
                        _this.FenceName = getExistFence("name");
@@ -1096,10 +1104,6 @@
                        var x_ratio = new Number(_this.img.naturalWidth / trueLength);
                        var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
                        //console.log(_this.FenceList);
                        //console.log(_this.FenceColor);
                        //console.log(_this.FenceName);
                        if (_this.FenceList.length) {
                           //遍历每个fence,并画出
                           for (var m = 0; m < _this.FenceList.length; m++) {
@@ -1107,7 +1111,6 @@
                              var points_list = _this.FenceList[m].split(",");//围栏实际坐标
                              var draw_points_list = [];
                              var tmp_list = [];
                              //console.log(points_list);
                              //实际坐标转成图上坐标
                              for (var i = 0; i < points_list.length; i++) {
                                 if (i % 2 == 0) {
@@ -1123,14 +1126,11 @@
                                    draw_points_list.push(tmp_list);
                                 }
                              }
                              //console.log(draw_points_list);
                              //var color = _this.FenceColor[m];
                              var color = getDrawColor(_this.FenceColor[m]);
                              var name = _this.FenceName[m];
                              if (draw_points_list.length == 2) {
                                 //console.log("draw rect");
                                 //console.log(draw_points_list);
                                 var can = _this.context;
                                 can.beginPath();
                                 can.fillStyle = color;
@@ -1140,12 +1140,10 @@
                                 can.fillText(name, (draw_points_list[0][0] + draw_points_list[1][0]) / 2, (draw_points_list[0][1] + draw_points_list[1][1]) / 2);
                                 can.closePath();
                              } else {
                                 //console.log("draw poly");
                                 var can = _this.context;
                                 can.beginPath();
                                 can.fillStyle = color;
                                 can.lineWidth = 2;
                                 //console.log(draw_points_list);
                                 var text_x = new Number(0);
                                 var text_y = new Number(0);
                                 for (var j = 0; j < draw_points_list.length; j++) {
@@ -1172,7 +1170,6 @@
                                 can.strokeStyle = color;
                                 can.stroke();
                                 can.fillStyle = "red";
                                 //console.log(text_x, text_y);
                                 can.fillText(name, text_x, text_y);
                                 can.closePath();
@@ -1186,16 +1183,12 @@
                           for (var m = 0; m < _this.allMarkLins.length; m++) {
                              var color = _this.allFenceColor[m];
                              //var color = getDrawColor(_this.allFenceColor[m]);
                              //console.log(_this.allFenceColor[m], color);
                              var points = _this.allMarkLins[m];
                              //console.log("points", points);
                              var newPoints = _this.getNewPoints(points);
                              //console.log("newpoints", newPoints);
                              if (points.length == 2 && getShape() == "矩形") {  // draw rectangle
                                 if (m == _this.allMarkLins.length - 1 && _this.markFlag) {
                                    if (getShape() == "矩形") {
                                       for (var i = 0; i < newPoints.length; i++) {
                                          //console.log("new",newPoints);
                                          var can = _this.context;
                                          can.beginPath();
                                          can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
@@ -1299,11 +1292,10 @@
                           _this.onmouseWheel(event);
                        };
                        document.getElementById('begin_draw').onclick = function () {
                           //console.log(_this.CreatLinepoints);
                           if (_this.CreatLinepoints.length == 0) {
                              var shape_value = getShape();
                              if (shape_value) {
                                 $("#draw_hint").html("请在地图上单击鼠标左键进行封闭围栏绘制");
                                 $("#draw_hint").html("请在地图上单击鼠标左键进行封闭围栏绘制,点击起始点结束绘制");
                                 _this.MarkBorderline();
                              }
                           } else {
@@ -1335,9 +1327,15 @@
                           //var color = getColor();
                           var color = getDrawColor(getColor());
                           var shape = getShape();
                           var x_x0 = new Number(getYuandian()[0]);
                           var y_y0 = new Number(getYuandian()[1]);
                           var trueMeasure = getTruemap();
                           var trueLength = new Number(trueMeasure[0]);
                           var trueWidth = new Number(trueMeasure[1]);
                           var x_ratio = new Number(_this.img.naturalWidth / trueLength);
                           var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
                           if (shape == "多边形") {
                              //console.log(_this.CreatLinepoints);
                              if (_this.CreatLinepoints.length >= 3) {
                                 start_x = _this.CreatLinepoints[0].x;
                                 start_y = _this.CreatLinepoints[0].y;
@@ -1346,10 +1344,7 @@
                                 posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
                                 now_x = posXY.x;
                                 now_y = posXY.y;
                                 /* //console.log(now_x, now_y);
                                 //console.log("length",_this.CreatLinepoints.length); */
                                 if (Math.abs(now_x - start_x) <= 5 && Math.abs(now_y - start_y) <= 5) { //连成闭合图形时(代替原鼠标右键)
                                    //console.log("close");
                                    $("#draw_hint").html("绘制完成,请点击保存,放弃绘制请点击取消");
                                    _this.CreateLineColor.push(color);
@@ -1363,8 +1358,23 @@
                                    posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
                                    posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
                                    if (_this.CreatLinepoints.length > 0) {
                                       var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
                                       var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                       jrealx = jrealx.toFixed(0);
                                       var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                       jrealy = jrealy.toFixed(0);
                                       var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                       realx = realx.toFixed(0);
                                       var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                       realy = realy.toFixed(0);
                                       var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
                                       juli = (juli / 100).toFixed(2);
                                       $("#draw_hint").html("距离上个点" + juli + "米")
                                    }
                                    _this.CreatLinepoints.push(posXY);
                                    //console.log("add", posXY);
                                    _this.allMarkLins.pop();
                                    _this.allMarkLins.push(_this.CreatLinepoints);
                                    _this.allFenceColor.pop();
@@ -1377,6 +1387,22 @@
                                 posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
                                 posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
                                 if (_this.CreatLinepoints.length > 0) {
                                    var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
                                    var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                    jrealx = jrealx.toFixed(0);
                                    var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                    jrealy = jrealy.toFixed(0);
                                    var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                    realx = realx.toFixed(0);
                                    var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                    realy = realy.toFixed(0);
                                    var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
                                    juli = (juli / 100).toFixed(2);
                                    $("#draw_hint").html("距离上个点" + juli + "米")
                                 }
                                 _this.CreatLinepoints.push(posXY);
                                 _this.allMarkLins.pop();
@@ -1393,6 +1419,22 @@
                              posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
                              posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
                              if (_this.CreatLinepoints.length > 0) {
                                 var jposXY = _this.CreatLinepoints[_this.CreatLinepoints.length - 1]
                                 var jrealx = (new Number(jposXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                 jrealx = jrealx.toFixed(0);
                                 var jrealy = (new Number(jposXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                 jrealy = jrealy.toFixed(0);
                                 var realx = (new Number(posXY.x)) / (_this.rateNum * x_ratio) + x_x0;
                                 realx = realx.toFixed(0);
                                 var realy = (new Number(posXY.y)) / (_this.rateNum * y_ratio) + y_y0;
                                 realy = realy.toFixed(0);
                                 var juli = Math.sqrt(Math.pow(realx - jrealx, 2) + Math.pow(realy - jrealy, 2))
                                 juli = (juli / 100).toFixed(2);
                                 $("#draw_hint").html("距离上个点" + juli + "米")
                              }
                              _this.CreatLinepoints.push(posXY);
                              _this.allMarkLins.pop();
@@ -1400,19 +1442,19 @@
                              _this.allFenceColor.pop();
                              _this.allFenceColor.push(color);
                              //console.log(_this.CreatLinepoints, _this.CreateLineColor, _this.allMarkLins, _this.allFenceColor);
                              _this.drawImg();
                              if (_this.CreatLinepoints.length == 2) {
                                 $("#draw_hint").html("绘制完成,请点击保存,放弃绘制请点击取消");
                                 setTimeout(function(){
                                    $("#draw_hint").html("绘制完成,请点击保存,放弃绘制请点击取消");
                                 },1500)
                                 _this.CreateLineColor.push(color);
                                 _this.markFlag = false;
                                 _this.dragFlag = true;
                                 _this.canvas.style.cursor = "normal";
                                 _this.drawImg();
                                 ////console.log(_this.CreatLinepoints);
                                 return;
                              }
                           }
@@ -1558,14 +1600,14 @@
                        var trueWidth = new Number(trueMeasure[1]);
                        var x_ratio = new Number(_this.img.naturalWidth / trueLength);
                        var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
                        //console.log(_this.img.naturalWidth,trueLength,_this.img.naturalHeight,trueWidth,_this.rateNum)
                        var zuobiao = _this.CreatLinepoints;
                        //console.log(zuobiao);
                        var real_zuobiao = [];
                        for (i = 0; i < zuobiao.length; i++) {
                           //var real_x = (new Number(zuobiao[i].x)) / (_this.imgScale * _this.rateNum * x_ratio);
                           var real_x = (new Number(zuobiao[i].x)) / (_this.rateNum * x_ratio) + x_x0;
                           real_x = real_x.toFixed(0);
                           //console.log(zuobiao[i].x, real_x);
                           //var real_y = (new Number(zuobiao[i].y)) / (_this.imgScale * _this.rateNum * y_ratio);
                           var real_y = (new Number(zuobiao[i].y)) / (_this.rateNum * y_ratio) + y_y0;
                           real_y = real_y.toFixed(0)
@@ -1634,8 +1676,48 @@
               <script type="text/javascript"
                  src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
               <script>
                  $(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; */ }, });
                  window.onload = function () {
                     App.init();
                     $.ajax({
                        async: false,
                        type: "POST",
                        url: "/hxzkoa/getSysSetting_list2.do",
                        data: {},
                        dataType: "json",
                        success: function (data) {
                           /* title = data[0].title;document.title = title; */
                           if (data.dataList2[0].label == 0) {
                              $("#labela").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].achor == 0) {
                              $("#anchora").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].gps == 0) {
                              $("#gpsa").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].fence == 0) {
                              $("#fencea").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].warning == 0) {
                              $("#warninga").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].history == 0) {
                              $("#historya").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].attendance == 0) {
                              $("#attendancea").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].basiclnfo == 0) {
                              $("#basiclnfoa").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].video == 0) {
                              $("#videoa").css({ 'display': 'none' });
                           };
                           if (data.dataList2[0].gas == 0) {
                              $("#gasa").css({ 'display': 'none' });
                           };
                        },
                     });
                     var bm_sysSetting = getSystemSetting();
                     var fences = getfence();
                     var superuser = document.getElementById("superuser").value;
@@ -1643,15 +1725,20 @@
                     var alertq = document.getElementById("alertq").value;
                     var deleteall = document.getElementById("deleteall").value;
                     var fenceq = document.getElementById("fenceq").value;
                     document.getElementById("xianuser").innerHTML = document.getElementById("xianusera").value
                     //console.log(superuser)
                     //console.log(superuser+"---------"+fenceq)
                     if (fenceq == "否" && superuser == "访客") {
                     if (superuser == "访客") {
                        $("#begin_draw").attr("disabled", "true");
                        $("#save_fence").attr("disabled", "true");
                        $("#cancel_draw").attr("disabled", "true");
                        $("#bdbaocun").attr("disabled", "true");
                        $("#bdquxiao").attr("disabled", "true");
                     }
                     if (fenceq == "否") {
                        $("#save_fence").attr("disabled", "true");
                        $("#bdbaocun").attr("disabled", "true");
                     }
                     var bm_baidu_j = bm_sysSetting[0].baidu_j;//百度地图精度
                     var bm_baidu_w = bm_sysSetting[0].baidu_w;//百度地图维度
                     var bm = new BMap.Map("baidumap");    // 创建Map实例
@@ -1712,7 +1799,7 @@
                     //添加鼠标绘制工具监听事件,用于获取绘制结果
                     drawingManager.addEventListener('overlaycomplete', overlaycomplete);
                  });
                  };
                  $('.header-page').load('/hxzkoa/hxzk/top.html'); $('.login-page').load('/hxzkoa/hxzk/head.html');
               </script>
               <script src="/hxzkoa/hxzk/assets/js/custom.js"></script>