From 37336922a1df99ac1636e398e12e64dedfba10e5 Mon Sep 17 00:00:00 2001
From: 15832144755 <67030627+15832144755@users.noreply.github.com>
Date: 星期四, 18 十一月 2021 16:15:16 +0800
Subject: [PATCH] 11.18完整39
---
src/main/webapp/hxzk/fence/drawFence.jsp | 2093 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 1,158 insertions(+), 935 deletions(-)
diff --git a/src/main/webapp/hxzk/fence/drawFence.jsp b/src/main/webapp/hxzk/fence/drawFence.jsp
index 46fc42c..a2c89f7 100644
--- a/src/main/webapp/hxzk/fence/drawFence.jsp
+++ b/src/main/webapp/hxzk/fence/drawFence.jsp
@@ -1,943 +1,1166 @@
-<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
-<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
-<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
-<html lang="en">
-<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">
- <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>
+<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
+ <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+ <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+ <html lang="en">
- <!-- BEGIN GLOBAL MANDATORY STYLES -->
- <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
- <link href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/assets/css/main.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/plugins/highlight/styles/monokai-sublime.css" rel="stylesheet" type="text/css" />
- <!-- END GLOBAL MANDATORY STYLES -->
+ <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">
+ <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>
- <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
- <link href="/hxzkoa/hxzk/assets/css/elements/search.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
- <link href="/hxzkoa/hxzk/assets/css/dashboard/dash_2.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/assets/css/elements/custom-pagination.css" rel="stylesheet" type="text/css" />
- <link href="/hxzkoa/hxzk/assets/css/components/custom-modal.css" rel="stylesheet" type="text/css" />
- <!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/datatables.css">
- <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/custom_dt_html5.css">
- <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/dt-global_style.css">
- <style>
- .panel-head{
- font-size: 1rem; color: rgba(255,255,255,.7); line-height: 2rem; text-align: center;
- background: linear-gradient(rgb(0,20,30), rgb(0,40,70));
- border: 2px solid rgba(0,90,120,.3);
- }
- .table-bordered td, .table-bordered th { border: 1px solid #ebedf2; }
-
-
- .canvasWrap {width: 100%; height: 100%}
- .mark_list{ position: absolute; top: 20px; right: 10px; }
- .mark_list li{
- float: left;
- width: 100px;
- border-radius: 4px;
- border: 1px solid #ccc;
- list-style: none;
- line-height: 30px;
- text-align: center;
- color:#333;
- background: #fff;
- cursor: pointer;
- }
- .mark_list li:hover{
- background: #009a8f;
- color:#fff;
- }
-
- </style>
-</head>
-<body class="alt-menu sidebar-noneoverflow">
-
- <!-- BEGIN LOADER -->
- <div id="load_screen"> <div class="loader"> <div class="loader-content">
- <div class="spinner-grow align-self-center"></div>
- </div></div></div>
- <!-- END LOADER -->
- <div class="border-left" style="opacity:0.4;float:left;position:absolute;z-index:1;left:120px;height:20px;"><img alt="" src="/hxzkoa/resources/images/border.png" class="img-left"></div>
- <div class="border-right" style="opacity:0.4;float:right;position:absolute;z-index:2;right:120px;"><img alt="" src="/hxzkoa/resources/images/border2.png" class="img-right"></div>
- <!-- BEGIN NAVBAR -->
- <div class="login-page"></div>
- <!-- END NAVBAR -->
+ <!-- BEGIN GLOBAL MANDATORY STYLES -->
+ <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap"
+ rel="stylesheet">
+ <link href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/assets/css/main.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet"
+ type="text/css" />
+ <link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/plugins/highlight/styles/monokai-sublime.css" rel="stylesheet"
+ type="text/css" />
+ <link rel="stylesheet"
+ href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
+ <link rel="stylesheet"
+ href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css">
+ <!-- END GLOBAL MANDATORY STYLES -->
- <!-- BEGIN TOPBAR -->
- <div class="header-page"></div>
- <!-- END TOPBAR -->
-
- <!-- BEGIN CONTENT PART -->
- <div id="content" class="main-content">
- <div class="layout-px-spacing">
- <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-content widget-content-area br-6">
- <div class="table-responsive mb-4 mt-4" style="height:600px;">
- <div style="width:20%;height:600px;float:left">
- <div style="margin-left:20px;padding:10px;width:100%;">
- <label for="exampleFormControlInput1">閫夋嫨鍥惧眰:</label>
- <select id="chooselayer" onchange="floorChange()" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
- <option value="null">璇烽�夋嫨</option>
- <c:forEach items="${floorList}" var="floor">
- <option value="${floor.floor}">${floor.floor} </option>
- </c:forEach>
- </select></div>
- <div style="margin-left:20px;padding:10px;width:100%;">
- <label for="exampleFormControlInput1">鍥存爮绫诲瀷:</label>
- <select id="weilanleixing" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
- <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%;">
- <label for="exampleFormControlInput1">鍏宠仈瀵硅薄:</label>
- <select id="guanlianduixiang" class="form-control form-control-lg" style="width:60%;font-size: 12px;padding: 5px 5px">
- <option value="绯荤粺榛樿">绯荤粺榛樿</option>
- <option value="娴嬭瘯閮�">娴嬭瘯閮�</option>
- </select></div>
- <div style="margin-left:20px;padding:10px;width:100%;">
- <label for="exampleFormControlInput1">鍖哄煙鍚嶇О:</label>
- <input class="form-control" type="text" id="quyumingcheng" style="width:60%;font-size: 12px;padding: 5px 5px"></div>
- <div style="margin-left:20px;padding:10px;width:100%;">
- <div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="鐭╁舰" name="draw_shape" class="custom-control-input" value="鐭╁舰" checked="true">
- <label class="custom-control-label" for="鐭╁舰">鐭╁舰</label>
- </div>
- <div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="澶氳竟褰�" name="draw_shape" class="custom-control-input" value="澶氳竟褰�">
- <label class="custom-control-label" for="澶氳竟褰�">澶氳竟褰�</label>
- </div>
- </div>
- <div style="margin-left:20px;padding:10px;width:100%;"><label for="exampleFormControlInput1">鍥存爮棰滆壊:</label>
- <select id="fence_color" onchange="getColor()" class="form-control form-control-lg" style="width:50%;font-size: 12px;padding: 5px 5px">
- <option value="绾㈣壊">绾㈣壊</option>
- <option value="缁胯壊">缁胯壊</option>
- <option value="钃濊壊">钃濊壊</option>
- <option value="榛戣壊">榛戣壊</option>
- <option value="鐧借壊">鐧借壊</option>
- </select></div>
- <div align="left" style="margin-top:20px">
- <button type="button" class="btn btn-secondary" id="begin_draw">缁樺埗</button>
- <button type="button" class="btn btn-secondary" id="save_fence">淇濆瓨</button>
- <button type="button" class="btn btn-secondary" id="cancel_draw">鍙栨秷</button>
- </div>
- <div style="margin-top:20px">
- <label id="draw_hint">璇风偣鍑荤粯鍒舵寜閽紑濮嬬粯鍒跺洿鏍�</label>
- </div>
- </div>
- <div id="wrap" style="width:78%;height:600px;float:right">
- <canvas id="draw"></canvas>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
-
- </div>
- <!-- END CONTENT PART -->
-
- </div>
- <!-- END MAIN CONTAINER -->
- <%
- String username=(String)session.getAttribute("username");
- if(username==null || username.equals("")){
- request.getRequestDispatcher("/hxzk/login.jsp").forward(request,response);
- return;
- }
- %>
- <!-- > BEGIN PAGE FUNCTION SCRIPTS -->
- <script type="text/javascript">
- $(document).ready(function() {
- var str = "${msg}";
- if (str != "") {
- alert(str);
- }
- });
-
- function聽pleasecheck()聽{
-聽聽聽聽聽聽聽聽var聽inputObj聽=聽document.createElement('input')
-聽聽聽聽聽聽聽聽inputObj.setAttribute('id',聽'_ef');
-聽聽聽聽聽聽聽聽inputObj.setAttribute('type',聽'file');聽
-聽聽聽聽聽聽聽聽inputObj.setAttribute("style",聽'visibility:hidden');聽
-聽聽聽聽聽聽聽聽document.body.appendChild(inputObj);聽
-聽聽聽聽聽聽聽聽inputObj.click();
-聽聽聽聽聽聽聽聽inputObj.value;//鎵�閫夋枃浠剁殑璺緞鍙婃枃浠跺悕
-聽聽聽聽聽聽聽聽alert(inputObj.value);
-聽聽聽聽};
-
- function floorChange(){
- // when change floor num, the map will also change.
- var select_value = document.getElementById("chooselayer").value;
-
- console.log(select_value);
- $.ajax({
- async:false,
- type:'POST',
- url:"/hxzkoa/floornumTomap.do",
- dataType: 'json',
- data:{
- 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';
- new MarkPoints(imgUrl);
- }
- })
- };
-
- function getShape() {
- var radio = document.getElementsByName("draw_shape");
- for (i=0; i < radio.length; i++){
- if (radio[i].checked) {
- console.log(radio[i].value)
- return radio[i].value
- }
- }
- alert("璇烽�夋嫨缁樼敾绫诲瀷锛�");
- return null;
- };
-
- function getColor() {
- var select_color = document.getElementById("fence_color");
- var color = select_color.value;
- return color;
- };
-
- function getYuandian(){
- var floor = document.getElementById("chooselayer").value;
- var map_wl = [];
- $.ajax({
- async:false,
- type:"POST",
- url:"/hxzkoa/floornumTomap.do",
- dataType:'json',
- data:{
- value:floor
- },
- success:function(data){
- yuandian = [data[0].x0_length, data[0].y0_width];
- },
- });
- return yuandian;
- };
-
- function getTruemap(){
- var floor = document.getElementById("chooselayer").value;
- var map_wl = [];
- $.ajax({
- async:false,
- type:"POST",
- url:"/hxzkoa/floornumTomap.do",
- dataType:'json',
- data:{
- value:floor
- },
- success:function(data){
- map_wl = [data[0].x_Truelength, data[0].y_Truewidth];
- },
- });
- return map_wl;
- };
-
- function getExistFence(leixing){
- var floor = document.getElementById("chooselayer").value;
- var fencelist = [];
- var fencecolor = [];
- var fencename = [];
- $.ajax({
- async:false,
- type:'POST',
- url:"/hxzkoa/getFloorFence.do",
- dataType: 'json',
- data:{
- value:floor
- },
- success:function(data){
- //console.log(data);
- for (var i=0;i<data.length;i++){
- fencelist.push(data[i].zuobiao);
- fencecolor.push(data[i].color);
- fencename.push(data[i].name);
- }}
- });
- if (leixing == "zuobiao"){
- return fencelist
- } else if (leixing =="color"){
- return fencecolor
- } else if (leixing == "name"){
- return fencename
- };
-
- };
-
- 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
- }
-
- </script>
-
- <script>
- function MarkPoints(Imgurl) {
- this.imgX = 0;//鍦ㄧ敾甯冧笂鍥剧墖鐨刋鍋忕Щ閲�
- this.imgY = 0;//鍦ㄧ敾甯冧笂鍥剧墖鐨刌鍋忕Щ閲�
- this.imgScale = 1;//鍥剧墖鐨勭缉鏀炬瘮渚�
- this.rateNum;//鍥剧墖楂樺害鑷�傚簲姣斾緥,鍥剧墖绛夋瘮灞呬腑灞曠ず鍦╟anvas
- this.scaleFlag = 0;//缂╂斁鍥犲瓙锛屾渶澶х缉鏀�9,鏈�灏忕缉鏀�-9
- this.context;
- this.img;
- this.pos={};//姣忔鎷栨嫿鍓嶅潗鏍囦繚瀛�
- this.dragFlag=false;//鏄惁鍙嫋鎷藉綋鍓峣mg锛岄粯璁や笉鑳�
- this.markFlag=false;//鏍囪鍖哄煙寮�鍚叧闂璮lag
- this.CreatLinepoints = [];//姣忔鍒涘缓鏂板尯鍩熺殑鍧愭爣闆嗗悎
- this.CreateLineColor = [];//姣忔鍒涘缓鏂板尯鍩熺殑棰滆壊
- this.allMarkLins = [];//宸插垱寤虹殑鍖哄煙闆嗗悎锛屼緥濡俒[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]鐩墠鍙渶瑕佷竴涓尯鍩燂紝鎵�浠ユ暟缁勫唴閮ㄥ彧鏈変竴椤�
- this.allFenceColor = [];//宸插垱寤虹殑鍖哄煙棰滆壊
- this.existFence = [];
- this.existFenceColor = [];
- this.existFenceName = [];
- <!-- 璇诲彇鏁版嵁搴撲腑鐨勬墍鏈夊洿鏍� 杩涜缁樺埗 姝ゅ鍔犱笂棰滆壊鍙婂舰鐘� -->
- this.getImgLoad(Imgurl);
- this.init();
- document.oncontextmenu = new Function("event.returnValue=false;");
- document.onselectstart = new Function("event.returnValue=false;");
-
- }
-
- MarkPoints.prototype = {
- getImgLoad: function (Imgurl) {
- var _this = this;
- var wrap = document.getElementById('wrap');
- _this.canvas = document.getElementById('draw');
- _this.context = draw.getContext('2d');
- _this.canvas.height = wrap.offsetHeight;
- _this.canvas.width = wrap.offsetWidth;
- _this.img = new Image();
- _this.img.onload = function () {
- _this.imgX = 0;
- _this.imgY = 0;
- _this.imgScale = 1;
- _this.rateNum = _this.canvas.height / _this.img.naturalHeight;
- _this.imgX = (_this.canvas.width - _this.img.naturalWidth * _this.imgScale * _this.rateNum) / 2;//榛樿杩涙潵褰撳墠鍥惧儚灞呬腑鏄剧ず
- /*鐢诲嚭褰撳墠鍥剧墖*/
- _this.drawImg();
- }
- _this.img.src = imgUrl;
-
- },
- getNewPoints: function (points) {
- var _this=this;
- var newPointAry = [];
- for (var i = 0; i < points.length; i++) {
- var obj = {};
- obj.x = points[i].x * _this.imgScale + _this.imgX;
- obj.y = points[i].y * _this.imgScale + _this.imgY;
- if (points[i].hasOwnProperty('mac')) {
- obj.mac = points[i].mac;
- obj.name = points[i].name || '';
- }
-
- newPointAry.push(obj);
- }
- return newPointAry;
- },
- drawImg: function () {
- 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");
- 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);
-
-// 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++) {
- var points = _this.FenceList[m];
- 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){
- //鍋舵暟鍧愭爣锛屽嵆x鍧愭爣
- tmp_list = [];
- var tmp_point = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (points_list[i]-x_x0));
- //var tmp_point = new Number( _this.imgScale * _this.rateNum * x_ratio * (points_list[i]));
- tmp_list.push(tmp_point);
- } else {
- var tmp_point = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (points_list[i]-y_y0));
- //var tmp_point = new Number( _this.imgScale * _this.rateNum * y_ratio * (points_list[i]));
- tmp_list.push(tmp_point);
- draw_points_list.push(tmp_list);
- }
+ <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
+ <link href="/hxzkoa/hxzk/assets/css/elements/search.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
+ <link href="/hxzkoa/hxzk/assets/css/dashboard/dash_2.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/assets/css/elements/custom-pagination.css" rel="stylesheet" type="text/css" />
+ <link href="/hxzkoa/hxzk/assets/css/components/custom-modal.css" rel="stylesheet" type="text/css" />
+ <!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
+ <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/datatables.css">
+ <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/custom_dt_html5.css">
+ <link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/dt-global_style.css">
+ <style>
+ body {
+ margin: 0px;
+ width: 100%;
+ min-width: 1500px;
+ max-width: 100%;
+ height: 100%;
+ background-color: #F0F0F0;
}
- //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;
- can.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]);
- can.stroke();
- can.fillStyle = "red";
- 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++){
- if (j==0){
- can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
- } else {
- //can.moveTo(draw_points_list[j-1][0], draw_points_list[j-1][1]);
- can.lineTo(draw_points_list[j][0], draw_points_list[j][1]);
- }
- if (j==draw_points_list.length-1){
- //can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
- can.lineTo(draw_points_list[0][0], draw_points_list[0][1]);
- can.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;
-
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = color;
- can.stroke();
- can.fillStyle="red";
-// console.log(text_x, text_y);
- can.fillText(name,text_x, text_y);
- can.closePath();
-
- }
-
- };
- };
-
- if ( _this.allMarkLins.length) {
- //console.log("length",_this.allMarkLins)
- 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);
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = "#FFF";
- can.stroke();//鐢荤┖蹇冨渾
- can.closePath();
-
- if (points.length >= 2 && i >= 1) {
- can.strokeStyle = color;
- can.lineWidth = 2;
- can.beginPath();
- can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
- can.lineTo(newPoints[i].x, newPoints[i].y);
- can.fillStyle = color;
- can.fill();
- can.stroke();
- can.closePath();
- };
- }
- }
- } else {
- for (var i = 0; i < newPoints.length; i++) {
- var can = _this.context;
- can.beginPath();
- can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = "#FFF";
- can.stroke();//鐢荤┖蹇冨渾
- can.closePath();
-
- if (i >= 1) {
- can.strokeStyle = color;
- can.lineWidth = 2;
- can.beginPath();
- //can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
- //can.lineTo(newPoints[i].x, newPoints[i].y);
- x = newPoints[i - 1].x;
- y = newPoints[i - 1].y;
- wid = newPoints[i].x - x;
- hei = newPoints[i].y - y;
- //can.fillStyle = color;
- //can.fill();
- can.fillRect(x,y,wid,hei);
- can.stroke();
- can.closePath();
- };
- }
- }
- } else { // draw polygen
- for (var i = 0; i < newPoints.length; i++) {
- var can = _this.context;
- can.beginPath();
- can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = "#FFF";
- can.stroke();//鐢荤┖蹇冨渾
- can.closePath();
-
- if (points.length >= 2 && i >= 1) {
- can.strokeStyle = color;
- can.lineWidth = 2;
- can.beginPath();
- can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
- can.lineTo(newPoints[i].x, newPoints[i].y);
- can.fillStyle = color;
- can.fill();
- can.stroke();
- can.closePath();
- };
- }
- }
- if (points.length >= 3) {
- can.strokeStyle = color;
- can.lineWidth = 2;
- can.beginPath();
- can.moveTo(newPoints[newPoints.length - 1].x, newPoints[newPoints.length - 1].y);
- can.lineTo(newPoints[0].x, newPoints[0].y);
- can.stroke();
- can.closePath();
- }
- };
- }
- },
-
- init:function () {
- var _this=this;
- _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);
- };
- 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("璇峰湪鍦板浘涓婂崟鍑婚紶鏍囧乏閿繘琛屽皝闂洿鏍忕粯鍒�");
- _this.MarkBorderline();
- }
- } else {
- alert("璇峰厛淇濆瓨褰撳墠缁樺埗鍥存爮锛�")
- }
- };
- document.getElementById('save_fence').onclick=function(){
- _this.saveDB();
- }
- document.getElementById("cancel_draw").onclick=function (){
- _this.deleteArea();
- $("#draw_hint").html("璇风偣鍑荤粯鍒舵寜閽紑濮嬬粯鍒跺洿鏍�");
- };
- },
- /*璁＄畻褰撳墠榧犳爣浣嶇疆璺濈canvas鐨勫亸绉婚噺*/
- xyToCanvas:function(ele,x,y){
- var _this=this;
- var obj = _this.canvas.getBoundingClientRect();
- return {
- x: x - obj.left,
- y: y - obj.top
- };
- },
- /*榧犳爣鍗曞嚮浜嬩欢*/
- clickDown:function(event){
- var _this=this;
- if (_this.markFlag) {
- _this.canvas.style.cursor = "none";
- //var color = getColor();
- var color = getDrawColor(getColor());
- var shape = getShape();
-
- if (shape == "澶氳竟褰�") {
-// console.log(_this.CreatLinepoints);
- if (_this.CreatLinepoints.length >= 3) {
- start_x = _this.CreatLinepoints[0].x;
- start_y = _this.CreatLinepoints[0].y;
- var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
- posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
- 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);
-
- _this.markFlag = false;
- _this.dragFlag = true;
- _this.canvas.style.cursor = "normal";
- _this.drawImg();
- return;
- } else {
- var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
-
- posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
- posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
- _this.CreatLinepoints.push(posXY);
- console.log("add", posXY);
- _this.allMarkLins.pop();
- _this.allMarkLins.push(_this.CreatLinepoints);
- _this.allFenceColor.pop();
- _this.allFenceColor.push(color);
-
- _this.drawImg(); }
- } else {
- var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
-
- posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
- posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
- _this.CreatLinepoints.push(posXY);
-
- _this.allMarkLins.pop();
- _this.allMarkLins.push(_this.CreatLinepoints);
- _this.allFenceColor.pop();
- _this.allFenceColor.push(color);
-
- _this.drawImg();
- //return;
- }
-
- } else if (shape == "鐭╁舰") {
- var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
-
- posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
- posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
- _this.CreatLinepoints.push(posXY);
-
- _this.allMarkLins.pop();
- _this.allMarkLins.push(_this.CreatLinepoints);
- _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("缁樺埗瀹屾垚锛岃鐐瑰嚮淇濆瓨锛屾斁寮冪粯鍒惰鐐瑰嚮鍙栨秷");
- _this.CreateLineColor.push(color);
-
- _this.markFlag = false;
- _this.dragFlag = true;
- _this.canvas.style.cursor = "normal";
- _this.drawImg();
- //console.log(_this.CreatLinepoints);
- return;
- }
- }
- }
- if ( event.button == 0) {//鐐瑰嚮榧犳爣宸﹂敭
- _this.dragFlag = 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) {
- _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;
- _this.imgX += x;
- _this.imgY += y;
- _this.drawImg();
- }
- /*杈圭晫鏍囪*/
- if (!_this.dragFlag&& _this.markFlag) {
- //var color = getColor();
- var color = getDrawColor(getColor());
- var shape = getShape();
- if ( shape == "澶氳竟褰�" ){
- var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
- var can = _this.context;
- can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
- _this.drawImg();
- /*鐢昏窡闅忓渾鐐�*/
- can.beginPath();
- // can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
- can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = "#FFF";
- can.stroke();//鐢荤┖蹇冨渾
- can.closePath();
-
- /*褰撳墠鐨勫潗鏍囨湭缁撴潫閭ｄ箞缁х画 璺熼殢鐩寸嚎*/
- if (!_this.CreatLinepoints.length) return;
- can.strokeStyle = color;
- can.beginPath();
- can.moveTo(_this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX, _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY);
- can.lineTo(pos1.x, pos1.y);
- can.stroke();
- can.closePath();
- } else if (shape == "鐭╁舰") {
- var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
- var can = _this.context;
- console.log(pos1);
- can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
- _this.drawImg();
- /*鐢昏窡闅忓渾鐐�*/
- can.beginPath();
- // can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
- can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
- can.fillStyle = color;
- can.fill();
- can.strokeStyle = "#FFF";
- can.stroke();//鐢荤┖蹇冨渾
- can.closePath();
-
- /*褰撳墠鐨勫潗鏍囨湭缁撴潫閭ｄ箞缁х画 璺熼殢鐩寸嚎*/
- if (!_this.CreatLinepoints.length) return;
- can.strokeStyle = color;
- can.beginPath();
- x = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX;
- y = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY;
- wid = pos1.x - x;
- hei = pos1.y - y;
- can.fillRect(x,y,wid,hei);
- can.stroke();
- can.closePath();
- }
- }
- },
- /*榧犳爣鏀惧紑浜嬩欢*/
- mouseUp:function (event) {
- var _this=this;
- _this.dragFlag=false;
- if (_this.markFlag) {
- _this.canvas.style.cursor = "none";
- return;
- }
- _this.canvas.style.cursor='default';
- },
- /*榧犳爣婊氳疆浜嬩欢*/
- onmouseWheel:function(event){
- var _this=this;
- var pos =_this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
- event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
- if (event.wheelDelta > 0 && _this.scaleFlag < 9) {
- _this.imgScale *= 1.25;
- _this.imgX = _this.imgX * 1.25 - 0.25*pos.x;
- _this.imgY = _this.imgY * 1.25 - 0.25*pos.y;
- _this.scaleFlag += 1;
- }
- if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缂╁皬
- _this.imgScale *= 0.8;
- _this.imgX = _this.imgX * 0.8 + pos.x * 0.2;
- _this.imgY = _this.imgY * 0.8 + pos.y * 0.2;
- _this.scaleFlag -= 1;
- }
- _this.drawImg();
- },
- /*杈圭晫鏍囪*/
- MarkBorderline: function () {
- var _this=this;
- _this.markFlag = true;//鍒囨崲涓簍rue锛岀姝㈡嫋鎷斤紝鍙兘鏍囪
- _this.canvas.style.cursor = "none";
- _this.CreatLinepoints = [];
- _this.allMarkLins.push([]);
- _this.allFenceColor.push([]);
- },
- /*鍒犻櫎鏍囪鍖哄煙*/
- deleteArea: function () {
- var _this = this;
- _this.CreatLinepoints = [];
- _this.allMarkLins.splice(-1, 1);
- _this.allFenceColor.splice(-1, 1);
- _this.drawImg();
- },
- /*淇濆瓨鍖哄煙*/
- saveDB: function() {
- var _this = this;
- var layer = document.getElementById("chooselayer").value;
- var weilanleixing = document.getElementById("weilanleixing").value;
- var guanlianduixiang = document.getElementById("guanlianduixiang").value;
- var quyumingcheng = document.getElementById("quyumingcheng").value;
- var xingzhuang = getShape();
- var yanse = getColor();
- 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);
- 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)
- real_zuobiao.push(real_x, real_y);
- }
- console.log(layer, weilanleixing, guanlianduixiang, quyumingcheng, xingzhuang, yanse, real_zuobiao);
- var existName = getExistFence("name");
- if (existName.includes(quyumingcheng)) {
- alert(quyumingcheng+"宸茬粡瀛樺湪涓嶈兘閲嶅娣诲姞锛�")
- } else if (!quyumingcheng) {
- alert("璇疯緭鍏ュ尯鍩熷悕绉帮紒")
- }else {
- $.ajax({
- type:'POST',
- url:'/hxzkoa/saveFence.do',
- dataType:'json',
- data:{
- layer:layer,
- weilanleixing:weilanleixing,
- guanlianduixiang:guanlianduixiang,
- quyumingcheng:quyumingcheng,
- xingzhuang:xingzhuang,
- yanse:yanse,
- zuobiao:String(real_zuobiao),
- },
- success:function(data){
- if (data == 0){
- $("#draw_hint").html("淇濆瓨鎴愬姛");
- alert("淇濆瓨鎴愬姛锛�");
- _this.CreatLinepoints = [];
- _this.allMarkLins = [];
- _this.allFenceColor=[];
- _this.drawImg();
- } else {
- $("#draw_hint").html("淇濆瓨澶辫触");
- alert("淇濆瓨澶辫触锛�");
- }
- }
- })
- };
-
- },
+ #head {
+ background-color: #FFFF00;
+ width: 100%;
+ height: 100px;
+ }
- }
- //var imgUrl = '../image/mapfile/led.png';//鍥剧墖璺緞
- //var imgUrl = ''
- new MarkPoints(imgUrl);
- </script>
-
- <!-- > END PAGE FUNCTION SCRIPTS -->
-
- <!-- 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/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>
- $(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; */},});
- });
- $('.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 -->
+ #center {
+ background-color: #00FFFF;
+ width: 100%;
+ min-height: 100%;
+ }
- <!-- 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 -->
+ #foot {
+ background-color: #FF00FF;
+ width: 100%;
+ height: 100px;
+ }
-</body>
-</html>
+ .panel-head {
+ font-size: 1rem;
+ color: rgba(255, 255, 255, .7);
+ line-height: 2rem;
+ text-align: center;
+ background: linear-gradient(rgb(0, 20, 30), rgb(0, 40, 70));
+ border: 2px solid rgba(0, 90, 120, .3);
+ }
+
+ .table-bordered td,
+ .table-bordered th {
+ border: 1px solid #ebedf2;
+ }
+
+ .canvasWrap {
+ width: 100%;
+ height: 100%
+ }
+
+ .mark_list {
+ position: absolute;
+ top: 20px;
+ right: 10px;
+ }
+
+ .mark_list li {
+ float: left;
+ width: 100px;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ list-style: none;
+ line-height: 30px;
+ text-align: center;
+ color: #333;
+ background: #fff;
+ cursor: pointer;
+ }
+
+ .mark_list li:hover {
+ background: #009a8f;
+ color: #fff;
+ }
+ </style>
+ </head>
+
+ <body class="alt-menu sidebar-noneoverflow">
+
+ <!-- BEGIN LOADER -->
+ <div id="load_screen">
+ <div class="loader">
+ <div class="loader-content">
+ <div class="spinner-grow align-self-center"></div>
+ </div>
+ </div>
+ </div>
+ <!-- END LOADER -->
+ <div class="border-left"
+ style="opacity: 0.4; float: left; position: absolute; z-index: 1; left: 120px; height: 20px;">
+ <img alt="" src="/hxzkoa/resources/images/border.png" class="img-left">
+ </div>
+ <div class="border-right"
+ style="opacity: 0.4; float: right; position: absolute; z-index: 2; right: 120px;">
+ <img alt="" src="/hxzkoa/resources/images/border2.png" class="img-right">
+ </div>
+ <!-- BEGIN NAVBAR -->
+ <div class="login-page"></div>
+ <!-- END NAVBAR -->
+
+ <!-- BEGIN TOPBAR -->
+ <div class="header-page"></div>
+ <!-- END TOPBAR -->
+
+ <!-- BEGIN CONTENT PART -->
+ <div id="content" class="main-content">
+ <div class="layout-px-spacing">
+ <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-content widget-content-area br-6">
+ <div class="table-responsive mb-4 mt-4" style="height: 600px;">
+ <div style="width: 20%; height: 600px; float: left">
+ <div style="margin-left: 20px; padding: 10px; width: 100%;">
+ <label for="exampleFormControlInput1">閫夋嫨鍥惧眰:</label> <select
+ id="chooselayer" onchange="floorChange()"
+ class="form-control form-control-lg"
+ style="width: 60%; font-size: 12px; padding: 5px 5px">
+ <option value="鐧惧害鍦板浘">鐧惧害鍦板浘</option>
+ <c:forEach items="${floorList}" var="floor">
+ <option value="${floor.floor}">${floor.floor}</option>
+ </c:forEach>
+ </select>
+ </div>
+ <div style="margin-left: 20px; padding: 10px; width: 100%;">
+ <label for="exampleFormControlInput1">鍥存爮绫诲瀷:</label> <select
+ id="weilanleixing" class="form-control form-control-lg"
+ style="width: 60%; font-size: 12px; padding: 5px 5px">
+ <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%;">
+ <label for="exampleFormControlInput1">鍏宠仈瀵硅薄:</label> <select
+ id="guanlianduixiang" class="form-control form-control-lg"
+ style="width: 60%; font-size: 12px; padding: 5px 5px">
+ <option value="绯荤粺榛樿">绯荤粺榛樿</option>
+ <option value="娴嬭瘯閮�">娴嬭瘯閮�</option>
+ </select>
+ </div>
+ <div style="margin-left: 20px; padding: 10px; width: 100%;">
+ <label for="exampleFormControlInput1">鍖哄煙鍚嶇О:</label> <input
+ class="form-control" type="text" id="quyumingcheng"
+ style="width: 60%; font-size: 12px; padding: 5px 5px">
+ </div>
+ <div style="margin-left: 20px; padding: 10px; width: 100%;">
+ <label for="exampleFormControlInput1">鍥存爮楂樺害:</label> <input
+ class="form-control" type="text" id="fencegao"
+ style="width: 60%; font-size: 12px; padding: 5px 5px">
+ </div>
+ <div style="margin-left: 20px; padding: 10px; width: 100%;display: none;"
+ id="xuanxingzhuang">
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="鐭╁舰" name="draw_shape"
+ class="custom-control-input" value="鐭╁舰" checked="true">
+ <label class="custom-control-label" for="鐭╁舰">鐭╁舰</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="澶氳竟褰�" name="draw_shape"
+ class="custom-control-input" value="澶氳竟褰�"> <label
+ class="custom-control-label" for="澶氳竟褰�">澶氳竟褰�</label>
+ </div>
+ </div>
+ <div style="margin-left: 20px; padding: 10px; width: 100%;display: none;" id="yanseaa">
+ <label for="exampleFormControlInput1">鍥存爮棰滆壊:</label> <select
+ id="fence_color" onchange="getColor()"
+ class="form-control form-control-lg"
+ style="width: 50%; font-size: 12px; padding: 5px 5px">
+ <option value="绾㈣壊">绾㈣壊</option>
+ <option value="缁胯壊">缁胯壊</option>
+ <option value="钃濊壊">钃濊壊</option>
+ <option value="榛戣壊">榛戣壊</option>
+ <option value="鐧借壊">鐧借壊</option>
+ </select>
+ </div>
+ <div align="left" style="margin-top: 20px">
+ <button type="button" class="btn btn-secondary" id="begin_draw"
+ style="display: none;">缁樺埗</button>
+ <button type="button" class="btn btn-secondary" id="save_fence"
+ style="display: none;">淇濆瓨</button>
+ <button type="button" class="btn btn-secondary" id="cancel_draw"
+ style="display: none;">鍙栨秷</button>
+ <button type="button" class="btn btn-secondary" id="bdbaocun"
+ style="margin-left: 30px;" onclick="bdbaocuns()">淇濆瓨</button>
+ <button type="button" class="btn btn-secondary"
+ id="bdquxiao">鍙栨秷</button>
+ </div>
+ <div style="margin-top: 20px;display: none;" id="tiaofu">
+ <label id="draw_hint">璇风偣鍑荤粯鍒舵寜閽紑濮嬬粯鍒跺洿鏍�</label>
+ </div>
+ </div>
+ <div id="baidumap" style="width: 78%; height: 600px; float: right">
+ </div>
+ <div id="wrap" style="width: 78%; height: 600px; float: right;display: none;">
+ <canvas id="draw"></canvas>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+ <!-- END CONTENT PART -->
+
+ </div>
+ <!-- END MAIN CONTAINER -->
+ <% String username=(String) session.getAttribute("username"); if (username==null || username.equals(""))
+ { request.getRequestDispatcher("/hxzk/login.jsp").forward(request, response); return; } %>
+ <!-- > BEGIN PAGE FUNCTION SCRIPTS -->
+ <script type="text/javascript">
+
+ var bdzuobiao = "";
+ var overlays = [];
+
+ function pleasecheck() {
+ var inputObj = document.createElement('input')
+ inputObj.setAttribute('id', '_ef');
+ inputObj.setAttribute('type', 'file');
+ inputObj.setAttribute("style", 'visibility:hidden');
+ document.body.appendChild(inputObj);
+ inputObj.click();
+ inputObj.value;//鎵�閫夋枃浠剁殑璺緞鍙婃枃浠跺悕
+ alert(inputObj.value);
+ };
+
+ function floorChange() {
+ // when change floor num, the map will also change.
+ var select_value = document.getElementById("chooselayer").value;
+ if (select_value == "鐧惧害鍦板浘") {
+ document.getElementById("begin_draw").style.display = "none";
+ document.getElementById("save_fence").style.display = "none";
+ document.getElementById("cancel_draw").style.display = "none";
+ document.getElementById("wrap").style.display = "none";
+ document.getElementById("xuanxingzhuang").style.display = "none";
+ document.getElementById("tiaofu").style.display = "none";
+ document.getElementById("yanseaa").style.display = "none";
+ document.getElementById("fencegao").style.display = "";
+ document.getElementById("bdbaocun").style.display = "";
+ document.getElementById("bdquxiao").style.display = "";
+ document.getElementById("baidumap").style.display = "";
+ } else {
+ document.getElementById("begin_draw").style.display = "";
+ document.getElementById("save_fence").style.display = "";
+ document.getElementById("cancel_draw").style.display = "";
+ document.getElementById("wrap").style.display = "";
+ document.getElementById("xuanxingzhuang").style.display = "";
+ document.getElementById("tiaofu").style.display = "";
+ document.getElementById("yanseaa").style.display = "";
+ document.getElementById("fencegao").style.display = "none";
+ document.getElementById("bdbaocun").style.display = "none";
+ document.getElementById("bdquxiao").style.display = "none";
+ document.getElementById("baidumap").style.display = "none";
+ $.ajax({
+ async: false,
+ type: 'POST',
+ url: "/hxzkoa/floornumTomap.do",
+ dataType: 'json',
+ data: {
+ 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';
+ new MarkPoints(imgUrl);
+ }
+ })
+ }
+ };
+
+ var overlaycomplete = function (e) {
+ overlays.push(e.overlay);
+ //瑕嗙洊鐗╁垹闄や簨浠�
+ var removeMarker = function (e, ee, overlay) {
+ bm.removeOverlay(overlay);
+ }
+ if (e.overlay instanceof BMap.Polygon) {
+ //var pol=(BMap.Polygon)e.overlay;
+ var poi_arr = e.overlay.getPath();
+ for (var i = 0; i < poi_arr.length; i++) {
+ var str2 = poi_arr[i].lng + "," + poi_arr[i].lat + ";";
+ bdzuobiao += str2;
+ }
+ // var infoWindow = new BMap.InfoWindow(info); // 鍒涘缓淇℃伅绐楀彛瀵硅薄
+ // bm.openInfoWindow(infoWindow, poi_arr[0]); //寮�鍚俊鎭獥鍙�
+ //alert(info);
+ }
+
+ //鍒涘缓鍙抽敭鑿滃崟
+ var markerMenu = new BMap.ContextMenu();
+ markerMenu.addItem(new BMap.MenuItem('鍒犻櫎', removeMarker.bind(e.overlay)));
+ e.overlay.addContextMenu(markerMenu);
+ };
+
+ function bdbaocuns() {
+ if(overlays.length != 1) {
+ alert("涓�娆″彧鑳戒繚瀛樹竴涓洿鏍忥紒锛侊紒")
+ return;
+ }
+ var layer = document.getElementById("chooselayer").value;
+ var weilanleixing = document.getElementById("weilanleixing").value;
+ var guanlianduixiang = document.getElementById("guanlianduixiang").value;
+ var quyumingcheng = document.getElementById("quyumingcheng").value;
+ var fencegao = document.getElementById("fencegao").value;
+ var xingzhuang = "-";
+ var yanse = getDrawColor(getColor());
+ $.ajax({
+ type: 'POST',
+ url: '/hxzkoa/sanweiFence.do',
+ dataType: 'json',
+ data: {
+ layer: layer,
+ weilanleixing: weilanleixing,
+ guanlianduixiang: guanlianduixiang,
+ quyumingcheng: quyumingcheng,
+ xingzhuang: xingzhuang,
+ yanse: yanse,
+ zuobiao: bdzuobiao,
+ fencegao: fencegao,
+ },
+ success: function (data) {
+ if (data == 0) {
+ $("#draw_hint").html("淇濆瓨鎴愬姛");
+ alert("淇濆瓨鎴愬姛锛�");
+ } else {
+ $("#draw_hint").html("淇濆瓨澶辫触");
+ alert("淇濆瓨澶辫触锛�");
+ }
+ }
+ })
+ }
+
+ function getShape() {
+ var radio = document.getElementsByName("draw_shape");
+ for (i = 0; i < radio.length; i++) {
+ if (radio[i].checked) {
+ //console.log(radio[i].value)
+ return radio[i].value
+ }
+ }
+ alert("璇烽�夋嫨缁樼敾绫诲瀷锛�");
+ return null;
+ };
+
+ function getColor() {
+ var select_color = document.getElementById("fence_color");
+ var color = select_color.value;
+ return color;
+ };
+
+ function getYuandian() {
+ var floor = document.getElementById("chooselayer").value;
+ var map_wl = [];
+ $.ajax({
+ async: false,
+ type: "POST",
+ url: "/hxzkoa/floornumTomap.do",
+ dataType: 'json',
+ data: {
+ value: floor
+ },
+ success: function (data) {
+ yuandian = [data[0].x0_length, data[0].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 getTruemap() {
+ var floor = document.getElementById("chooselayer").value;
+ var map_wl = [];
+ $.ajax({
+ async: false,
+ type: "POST",
+ url: "/hxzkoa/floornumTomap.do",
+ dataType: 'json',
+ data: {
+ value: floor
+ },
+ success: function (data) {
+ map_wl = [data[0].x_Truelength, data[0].y_Truewidth];
+ },
+ });
+ return map_wl;
+ };
+
+ function getExistFence(leixing) {
+ var floor = document.getElementById("chooselayer").value;
+ var fencelist = [];
+ var fencecolor = [];
+ var fencename = [];
+ $.ajax({
+ async: false,
+ type: 'POST',
+ url: "/hxzkoa/getFloorFence.do",
+ dataType: 'json',
+ data: {
+ value: floor
+ },
+ success: function (data) {
+ //console.log(data);
+ for (var i = 0; i < data.length; i++) {
+ fencelist.push(data[i].zuobiao);
+ fencecolor.push(data[i].color);
+ fencename.push(data[i].name);
+ }
+ }
+ });
+ if (leixing == "zuobiao") {
+ return fencelist
+ } else if (leixing == "color") {
+ return fencecolor
+ } else if (leixing == "name") {
+ return fencename
+ };
+
+ };
+
+ 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
+ }
+
+ </script>
+
+ <script>
+ function MarkPoints(Imgurl) {
+ this.imgX = 0;//鍦ㄧ敾甯冧笂鍥剧墖鐨刋鍋忕Щ閲�
+ this.imgY = 0;//鍦ㄧ敾甯冧笂鍥剧墖鐨刌鍋忕Щ閲�
+ this.imgScale = 1;//鍥剧墖鐨勭缉鏀炬瘮渚�
+ this.rateNum;//鍥剧墖楂樺害鑷�傚簲姣斾緥,鍥剧墖绛夋瘮灞呬腑灞曠ず鍦╟anvas
+ this.scaleFlag = 0;//缂╂斁鍥犲瓙锛屾渶澶х缉鏀�9,鏈�灏忕缉鏀�-9
+ this.context;
+ this.img;
+ this.pos = {};//姣忔鎷栨嫿鍓嶅潗鏍囦繚瀛�
+ this.dragFlag = false;//鏄惁鍙嫋鎷藉綋鍓峣mg锛岄粯璁や笉鑳�
+ this.markFlag = false;//鏍囪鍖哄煙寮�鍚叧闂璮lag
+ this.CreatLinepoints = [];//姣忔鍒涘缓鏂板尯鍩熺殑鍧愭爣闆嗗悎
+ this.CreateLineColor = [];//姣忔鍒涘缓鏂板尯鍩熺殑棰滆壊
+ this.allMarkLins = [];//宸插垱寤虹殑鍖哄煙闆嗗悎锛屼緥濡俒[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]鐩墠鍙渶瑕佷竴涓尯鍩燂紝鎵�浠ユ暟缁勫唴閮ㄥ彧鏈変竴椤�
+ this.allFenceColor = [];//宸插垱寤虹殑鍖哄煙棰滆壊
+ this.existFence = [];
+ this.existFenceColor = [];
+ this.existFenceName = [];
+ < !--璇诲彇鏁版嵁搴撲腑鐨勬墍鏈夊洿鏍� 杩涜缁樺埗 姝ゅ鍔犱笂棰滆壊鍙婂舰鐘�-- >
+ this.getImgLoad(Imgurl);
+ this.init();
+ document.oncontextmenu = new Function("event.returnValue=false;");
+ document.onselectstart = new Function("event.returnValue=false;");
+
+ }
+
+ MarkPoints.prototype = {
+ getImgLoad: function (Imgurl) {
+ var _this = this;
+ var wrap = document.getElementById('wrap');
+ _this.canvas = document.getElementById('draw');
+ _this.context = draw.getContext('2d');
+ _this.canvas.height = wrap.offsetHeight;
+ _this.canvas.width = wrap.offsetWidth;
+ _this.img = new Image();
+ _this.img.onload = function () {
+ _this.imgX = 0;
+ _this.imgY = 0;
+ _this.imgScale = 1;
+ _this.rateNum = _this.canvas.height / _this.img.naturalHeight;
+ _this.imgX = (_this.canvas.width - _this.img.naturalWidth * _this.imgScale * _this.rateNum) / 2;//榛樿杩涙潵褰撳墠鍥惧儚灞呬腑鏄剧ず
+ /*鐢诲嚭褰撳墠鍥剧墖*/
+ _this.drawImg();
+ }
+ _this.img.src = imgUrl;
+
+ },
+ getNewPoints: function (points) {
+ var _this = this;
+ var newPointAry = [];
+ for (var i = 0; i < points.length; i++) {
+ var obj = {};
+ obj.x = points[i].x * _this.imgScale + _this.imgX;
+ obj.y = points[i].y * _this.imgScale + _this.imgY;
+ if (points[i].hasOwnProperty('mac')) {
+ obj.mac = points[i].mac;
+ obj.name = points[i].name || '';
+ }
+
+ newPointAry.push(obj);
+ }
+ return newPointAry;
+ },
+ drawImg: function () {
+ 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");
+ 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);
+
+ //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++) {
+ var points = _this.FenceList[m];
+ 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) {
+ //鍋舵暟鍧愭爣锛屽嵆x鍧愭爣
+ tmp_list = [];
+ var tmp_point = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (points_list[i] - x_x0));
+ //var tmp_point = new Number( _this.imgScale * _this.rateNum * x_ratio * (points_list[i]));
+ tmp_list.push(tmp_point);
+ } else {
+ var tmp_point = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (points_list[i] - y_y0));
+ //var tmp_point = new Number( _this.imgScale * _this.rateNum * y_ratio * (points_list[i]));
+ tmp_list.push(tmp_point);
+ 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;
+ can.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]);
+ can.stroke();
+ can.fillStyle = "red";
+ 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++) {
+ if (j == 0) {
+ can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
+ } else {
+ //can.moveTo(draw_points_list[j-1][0], draw_points_list[j-1][1]);
+ can.lineTo(draw_points_list[j][0], draw_points_list[j][1]);
+ }
+ if (j == draw_points_list.length - 1) {
+ //can.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
+ can.lineTo(draw_points_list[0][0], draw_points_list[0][1]);
+ can.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;
+
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = color;
+ can.stroke();
+ can.fillStyle = "red";
+ //console.log(text_x, text_y);
+ can.fillText(name, text_x, text_y);
+ can.closePath();
+
+ }
+
+ };
+ };
+
+ if (_this.allMarkLins.length) {
+ //console.log("length",_this.allMarkLins)
+ 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);
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = "#FFF";
+ can.stroke();//鐢荤┖蹇冨渾
+ can.closePath();
+
+ if (points.length >= 2 && i >= 1) {
+ can.strokeStyle = color;
+ can.lineWidth = 2;
+ can.beginPath();
+ can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
+ can.lineTo(newPoints[i].x, newPoints[i].y);
+ can.fillStyle = color;
+ can.fill();
+ can.stroke();
+ can.closePath();
+ };
+ }
+ }
+ } else {
+ for (var i = 0; i < newPoints.length; i++) {
+ var can = _this.context;
+ can.beginPath();
+ can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = "#FFF";
+ can.stroke();//鐢荤┖蹇冨渾
+ can.closePath();
+
+ if (i >= 1) {
+ can.strokeStyle = color;
+ can.lineWidth = 2;
+ can.beginPath();
+ //can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
+ //can.lineTo(newPoints[i].x, newPoints[i].y);
+ x = newPoints[i - 1].x;
+ y = newPoints[i - 1].y;
+ wid = newPoints[i].x - x;
+ hei = newPoints[i].y - y;
+ //can.fillStyle = color;
+ //can.fill();
+ can.fillRect(x, y, wid, hei);
+ can.stroke();
+ can.closePath();
+ };
+ }
+ }
+ } else { // draw polygen
+ for (var i = 0; i < newPoints.length; i++) {
+ var can = _this.context;
+ can.beginPath();
+ can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = "#FFF";
+ can.stroke();//鐢荤┖蹇冨渾
+ can.closePath();
+
+ if (points.length >= 2 && i >= 1) {
+ can.strokeStyle = color;
+ can.lineWidth = 2;
+ can.beginPath();
+ can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
+ can.lineTo(newPoints[i].x, newPoints[i].y);
+ can.fillStyle = color;
+ can.fill();
+ can.stroke();
+ can.closePath();
+ };
+ }
+ }
+ if (points.length >= 3) {
+ can.strokeStyle = color;
+ can.lineWidth = 2;
+ can.beginPath();
+ can.moveTo(newPoints[newPoints.length - 1].x, newPoints[newPoints.length - 1].y);
+ can.lineTo(newPoints[0].x, newPoints[0].y);
+ can.stroke();
+ can.closePath();
+ }
+ };
+ }
+ },
+
+ init: function () {
+ var _this = this;
+ _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);
+ };
+ 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("璇峰湪鍦板浘涓婂崟鍑婚紶鏍囧乏閿繘琛屽皝闂洿鏍忕粯鍒�");
+ _this.MarkBorderline();
+ }
+ } else {
+ alert("璇峰厛淇濆瓨褰撳墠缁樺埗鍥存爮锛�")
+ }
+ };
+ document.getElementById('save_fence').onclick = function () {
+ _this.saveDB();
+ }
+ document.getElementById("cancel_draw").onclick = function () {
+ _this.deleteArea();
+ $("#draw_hint").html("璇风偣鍑荤粯鍒舵寜閽紑濮嬬粯鍒跺洿鏍�");
+ };
+ },
+ /*璁＄畻褰撳墠榧犳爣浣嶇疆璺濈canvas鐨勫亸绉婚噺*/
+ xyToCanvas: function (ele, x, y) {
+ var _this = this;
+ var obj = _this.canvas.getBoundingClientRect();
+ return {
+ x: x - obj.left,
+ y: y - obj.top
+ };
+ },
+ /*榧犳爣鍗曞嚮浜嬩欢*/
+ clickDown: function (event) {
+ var _this = this;
+ if (_this.markFlag) {
+ _this.canvas.style.cursor = "none";
+ //var color = getColor();
+ var color = getDrawColor(getColor());
+ var shape = getShape();
+
+ if (shape == "澶氳竟褰�") {
+ //console.log(_this.CreatLinepoints);
+ if (_this.CreatLinepoints.length >= 3) {
+ start_x = _this.CreatLinepoints[0].x;
+ start_y = _this.CreatLinepoints[0].y;
+ var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+ posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
+ 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);
+
+ _this.markFlag = false;
+ _this.dragFlag = true;
+ _this.canvas.style.cursor = "normal";
+ _this.drawImg();
+ return;
+ } else {
+ var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+
+ posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
+ posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
+ _this.CreatLinepoints.push(posXY);
+ //console.log("add", posXY);
+ _this.allMarkLins.pop();
+ _this.allMarkLins.push(_this.CreatLinepoints);
+ _this.allFenceColor.pop();
+ _this.allFenceColor.push(color);
+
+ _this.drawImg();
+ }
+ } else {
+ var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+
+ posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
+ posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
+ _this.CreatLinepoints.push(posXY);
+
+ _this.allMarkLins.pop();
+ _this.allMarkLins.push(_this.CreatLinepoints);
+ _this.allFenceColor.pop();
+ _this.allFenceColor.push(color);
+
+ _this.drawImg();
+ //return;
+ }
+
+ } else if (shape == "鐭╁舰") {
+ var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+
+ posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
+ posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
+ _this.CreatLinepoints.push(posXY);
+
+ _this.allMarkLins.pop();
+ _this.allMarkLins.push(_this.CreatLinepoints);
+ _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("缁樺埗瀹屾垚锛岃鐐瑰嚮淇濆瓨锛屾斁寮冪粯鍒惰鐐瑰嚮鍙栨秷");
+ _this.CreateLineColor.push(color);
+
+ _this.markFlag = false;
+ _this.dragFlag = true;
+ _this.canvas.style.cursor = "normal";
+ _this.drawImg();
+ ////console.log(_this.CreatLinepoints);
+ return;
+ }
+ }
+ }
+ if (event.button == 0) {//鐐瑰嚮榧犳爣宸﹂敭
+ _this.dragFlag = 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) {
+ _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;
+ _this.imgX += x;
+ _this.imgY += y;
+ _this.drawImg();
+ }
+ /*杈圭晫鏍囪*/
+ if (!_this.dragFlag && _this.markFlag) {
+ //var color = getColor();
+ var color = getDrawColor(getColor());
+ var shape = getShape();
+ if (shape == "澶氳竟褰�") {
+ var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+ var can = _this.context;
+ can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+ _this.drawImg();
+ /*鐢昏窡闅忓渾鐐�*/
+ can.beginPath();
+ // can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
+ can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = "#FFF";
+ can.stroke();//鐢荤┖蹇冨渾
+ can.closePath();
+
+ /*褰撳墠鐨勫潗鏍囨湭缁撴潫閭ｄ箞缁х画 璺熼殢鐩寸嚎*/
+ if (!_this.CreatLinepoints.length) return;
+ can.strokeStyle = color;
+ can.beginPath();
+ can.moveTo(_this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX, _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY);
+ can.lineTo(pos1.x, pos1.y);
+ can.stroke();
+ can.closePath();
+ } else if (shape == "鐭╁舰") {
+ var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+ var can = _this.context;
+ //console.log(pos1);
+ can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+ _this.drawImg();
+ /*鐢昏窡闅忓渾鐐�*/
+ can.beginPath();
+ // can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
+ can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
+ can.fillStyle = color;
+ can.fill();
+ can.strokeStyle = "#FFF";
+ can.stroke();//鐢荤┖蹇冨渾
+ can.closePath();
+
+ /*褰撳墠鐨勫潗鏍囨湭缁撴潫閭ｄ箞缁х画 璺熼殢鐩寸嚎*/
+ if (!_this.CreatLinepoints.length) return;
+ can.strokeStyle = color;
+ can.beginPath();
+ x = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX;
+ y = _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY;
+ wid = pos1.x - x;
+ hei = pos1.y - y;
+ can.fillRect(x, y, wid, hei);
+ can.stroke();
+ can.closePath();
+ }
+ }
+ },
+ /*榧犳爣鏀惧紑浜嬩欢*/
+ mouseUp: function (event) {
+ var _this = this;
+ _this.dragFlag = false;
+ if (_this.markFlag) {
+ _this.canvas.style.cursor = "none";
+ return;
+ }
+ _this.canvas.style.cursor = 'default';
+
+ },
+ /*榧犳爣婊氳疆浜嬩欢*/
+ onmouseWheel: function (event) {
+ var _this = this;
+ var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
+ event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
+ if (event.wheelDelta > 0 && _this.scaleFlag < 9) {
+ _this.imgScale *= 1.25;
+ _this.imgX = _this.imgX * 1.25 - 0.25 * pos.x;
+ _this.imgY = _this.imgY * 1.25 - 0.25 * pos.y;
+ _this.scaleFlag += 1;
+ }
+ if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缂╁皬
+ _this.imgScale *= 0.8;
+ _this.imgX = _this.imgX * 0.8 + pos.x * 0.2;
+ _this.imgY = _this.imgY * 0.8 + pos.y * 0.2;
+ _this.scaleFlag -= 1;
+ }
+ _this.drawImg();
+ },
+ /*杈圭晫鏍囪*/
+ MarkBorderline: function () {
+ var _this = this;
+ _this.markFlag = true;//鍒囨崲涓簍rue锛岀姝㈡嫋鎷斤紝鍙兘鏍囪
+ _this.canvas.style.cursor = "none";
+ _this.CreatLinepoints = [];
+ _this.allMarkLins.push([]);
+ _this.allFenceColor.push([]);
+ },
+ /*鍒犻櫎鏍囪鍖哄煙*/
+ deleteArea: function () {
+ var _this = this;
+ _this.CreatLinepoints = [];
+ _this.allMarkLins.splice(-1, 1);
+ _this.allFenceColor.splice(-1, 1);
+ _this.drawImg();
+ },
+ /*淇濆瓨鍖哄煙*/
+ saveDB: function () {
+ var _this = this;
+ var layer = document.getElementById("chooselayer").value;
+ var weilanleixing = document.getElementById("weilanleixing").value;
+ var guanlianduixiang = document.getElementById("guanlianduixiang").value;
+ var quyumingcheng = document.getElementById("quyumingcheng").value;
+ var xingzhuang = getShape();
+ var yanse = getColor();
+ 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);
+ 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)
+ real_zuobiao.push(real_x, real_y);
+ }
+ //console.log(layer, weilanleixing, guanlianduixiang, quyumingcheng, xingzhuang, yanse, real_zuobiao);
+ var existName = getExistFence("name");
+ if (existName.includes(quyumingcheng)) {
+ alert(quyumingcheng + "宸茬粡瀛樺湪涓嶈兘閲嶅娣诲姞锛�")
+ } else if (!quyumingcheng) {
+ alert("璇疯緭鍏ュ尯鍩熷悕绉帮紒")
+ } else {
+ $.ajax({
+ type: 'POST',
+ url: '/hxzkoa/saveFence.do',
+ dataType: 'json',
+ data: {
+ layer: layer,
+ weilanleixing: weilanleixing,
+ guanlianduixiang: guanlianduixiang,
+ quyumingcheng: quyumingcheng,
+ xingzhuang: xingzhuang,
+ yanse: yanse,
+ zuobiao: String(real_zuobiao),
+ },
+ success: function (data) {
+ if (data == 0) {
+ $("#draw_hint").html("淇濆瓨鎴愬姛");
+ alert("淇濆瓨鎴愬姛锛�");
+ _this.CreatLinepoints = [];
+ _this.allMarkLins = [];
+ _this.allFenceColor = [];
+ _this.drawImg();
+ } else {
+ $("#draw_hint").html("淇濆瓨澶辫触");
+ alert("淇濆瓨澶辫触锛�");
+ }
+ }
+ })
+ };
+
+ },
+
+ }
+ //var imgUrl = '../image/mapfile/led.png';//鍥剧墖璺緞
+ //var imgUrl = ''
+ new MarkPoints(imgUrl);
+ </script>
+
+ <!-- > END PAGE FUNCTION SCRIPTS -->
+
+ <!-- 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/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 type="text/javascript" id="baidumap_api"
+ src="http://api.map.baidu.com/getscript?v=3.0&ak=PUftjeZCKHtEn8ZMjeAGnViSO8NBvBNm"></script>
+ <script type="text/javascript"
+ src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
+ <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; */ }, });
+ var bm_sysSetting = getSystemSetting();
+ 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瀹炰緥
+ bm.centerAndZoom(new BMap.Point(bm_baidu_j, bm_baidu_w), 12); // 鍒濆鍖栧湴鍥�,璁剧疆涓績鐐瑰潗鏍囧拰鍦板浘绾у埆
+ bm.enableScrollWheelZoom(true); //寮�鍚紶鏍囨粴杞缉鏀�
+
+ var styleOptions = {
+ strokeColor: "rgba(255,0,0,0.3)", //杈圭嚎棰滆壊銆�
+ fillColor: "rgba(255,0,0,0.3)", //濉厖棰滆壊銆傚綋鍙傛暟涓虹┖鏃讹紝鍦嗗舰灏嗘病鏈夊～鍏呮晥鏋溿��
+ strokeWeight: 3, //杈圭嚎鐨勫搴︼紝浠ュ儚绱犱负鍗曚綅銆�
+ strokeOpacity: 0.8, //杈圭嚎閫忔槑搴︼紝鍙栧�艰寖鍥�0 - 1銆�
+ fillOpacity: 0.6, //濉厖鐨勯�忔槑搴︼紝鍙栧�艰寖鍥�0 - 1銆�
+ strokeStyle: 'solid' //杈圭嚎鐨勬牱寮忥紝solid鎴杁ashed銆�
+ }
+ //瀹炰緥鍖栭紶鏍囩粯鍒跺伐鍏�
+ var drawingManager = new BMapLib.DrawingManager(bm, {
+ isOpen: false, //鏄惁寮�鍚粯鍒舵ā寮�
+ enableDrawingTool: true, //鏄惁鏄剧ず宸ュ叿鏍�
+ drawingToolOptions: {
+ anchor: BMAP_ANCHOR_TOP_RIGHT, //浣嶇疆
+ offset: new BMap.Size(5, 5), //鍋忕鍊�
+ drawingModes: [BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE]
+ },
+ circleOptions: styleOptions, //鍦嗙殑鏍峰紡
+ polylineOptions: styleOptions, //绾跨殑鏍峰紡
+ polygonOptions: styleOptions, //澶氳竟褰㈢殑鏍峰紡
+ rectangleOptions: styleOptions //鐭╁舰鐨勬牱寮�
+ });
+
+ //娣诲姞榧犳爣缁樺埗宸ュ叿鐩戝惉浜嬩欢锛岀敤浜庤幏鍙栫粯鍒剁粨鏋�
+ 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>
+ <!-- END GLOBAL MANDATORY 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>
+
+ </html>
\ No newline at end of file
--
Gitblit v1.10.0