function queryTagid() {
    var tag = document.getElementById("tagid").value;
    var fanwei = $("#FanWei").val();
    var floor =$("#cxList").val();
            var time = fanwei.split('到')
            var begin = time[0]
            var end = time[1].slice(1);
            var tagTrack = [];
                    $.ajax({
                        async: false,
                        type: "POST",
                        url: "/hxzkuwb/trackTagid.do",
                        dataType: 'json',
                        data: {
                            tag_value: tag,
                            begin_value: begin,
                            end_value: end,
                            floor_value: floor,
                        },
                        success: function (data) {
                            tagTrack = data;
                        },
                    });
                    return tagTrack;
};




function getTruemap() {
    var floor =$("#cxList").val();
    var map_wl = [];
    $.ajax({
        async: false,
        type: "POST",
        url: "/hxzkuwb/findFloorMap",
        dataType: 'json',
        data: {
            floor: floor
        },
        success: function (data) {
            map_wl = [data.xtruelength, data.ytruewidth];
        },
    });
    return map_wl;
};

function getYuandian() {
    var floor =$("#cxList").val();
    var yuandian = []
    $.ajax({
        async: false,
        type: "POST",
        url: "/hxzkuwb/findFloorMap",
        dataType: 'json',
        data: {
            floor: floor
        },
        success: function (data) {
            yuandian = [data.x0Length, data.y0Width];
        },
    });
    return yuandian;
};











    var zongtiao;
    var tiao
    var timer;
    var ts1 = getYuandian();
    var ts2 = getTruemap();
    function MarkPoints(Imgurl) {
    this.imgX = 0;//在画布上图片的X偏移量
    this.imgY = 0;//在画布上图片的Y偏移量
    this.imgScale = 1;//图片的缩放比例
    this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas
    this.scaleFlag = 0;//缩放因子，最大缩放9,最小缩放-9
    this.context;
    this.img;
    this.playIndex = 0;
    this.pos = {};//每次拖拽前坐标保存
    this.playFlag = false;//是否播放
    this.playTrack = [];
    this.dragFlag = false;//是否可拖拽当前img，默认不能
    this.markFlag = false;//标记区域开启关闭flag
    this.CreatLinepoints = [];//每次创建新区域的坐标集合
    this.playMark = []; //正在展示的标记
    this.allMarkLins = [];//已创建的区域集合，例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域，所以数组内部只有一项
    this.allFenceColor = [];//已创建的区域颜色
    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);
    var trueMeasure = ts2;
    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 can = _this.context;
    var x_x0 = new Number(ts1[0]);
    var y_y0 = new Number(ts1[1]);

    //轨迹拖尾
    can.beginPath();
    can.fillStyle = "red";
    can.strokeStyle = "red";
    can.lineWidth = 3;
    for (var i = 0; i < _this.playIndex - 1; i++) {
    var cor_x = new Number(_this.playTrack[i].x);
    var cor_y = new Number(_this.playTrack[i].y);

    var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
    var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));
    var cor_x2 = new Number(_this.playTrack[i + 1].x);
    var cor_y2 = new Number(_this.playTrack[i + 1].y);
    var x_cor2 = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x2 - x_x0));
    var y_cor2 = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y2 - y_y0));

    can.moveTo(x_cor, y_cor);
    can.lineTo(x_cor2, y_cor2);
}
    can.closePath();
    can.stroke();

    //实时轨迹点
        if (_this.playMark) {
            var can = _this.context;
            var cor_x = new Number(_this.playMark.x);
            var cor_y = new Number(_this.playMark.y);
            var zuobiao = _this.playMark.x + "," + _this.playMark.y;

            var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
            var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));

            var img = new Image();
            img.src = '/hxzkuwb/Icon/' + _this.playMark.image;
                var wid = img.width;
                var hei = img.height;
                can.fillStyle = "#FF423E";
                can.fill();
                can.strokeStyle = "#FFF";
                can.drawImage(img, x_cor - 20, y_cor - 40, 40, 40);
                can.fillStyle = 'rgba(0, 0, 0, 0.5)';
                can.fillRect(x_cor - wid, y_cor - hei - 23, wid + 50, 20);
                can.fillRect(x_cor - wid - 30, y_cor - hei + 40, wid + 130, 20);
                can.fillStyle = 'white';
                can.font = '12px sans-serif';
                can.fillText(_this.playMark.baoliu8 + " " + _this.playMark.tagid, x_cor - wid + 10, y_cor - hei - 8);
                can.fillText(_this.playMark.time, x_cor - 55, y_cor + 15);
        }
    if (_this.allMarkLins.length) {
    for (var m = 0; m < _this.allMarkLins.length; m++) {
    var points = _this.allMarkLins[m];
    var newPoints = _this.getNewPoints(points);
    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 = "#FF423E";
    can.fill();
    can.strokeStyle = "#FFF";
    can.stroke();//画空心圆
    can.closePath();

    if (points.length >= 2 && i >= 1) {
    can.strokeStyle = "#FF423E";
    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 = "#ff0000";
    can.fill();
    can.stroke();
    can.closePath();
}
}
    if (points.length >= 3) {
    can.strokeStyle = "#FF423E";
    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('search').onclick = function () {
        var type = $("#cxList").val()
        if(type == "百度地图"){
            baiDuGuiJi()
        }else{
            if(localStorage.getItem("ChaXunGuiJi") == "进行中"){
                layer.msg("当前正在进行中，请稍后在进行查询")
                return;
            }
            var tagid = $("#tagid").val();
            console.log(tagid)
            if (tagid == ""){
                layer.msg("请输入设备ID")
                return;
            }
            $(".heimu").show();
            $(".heimu1").show();
            var tagTrack = "";
            setTimeout(function (){
                tagTrack = queryTagid();
                zongtiao = tagTrack.length-2;
                tiao = 0;
                if (tagTrack.length == 0) {
                    $(".heimu").hide();
                    $(".heimu1").hide();
                    alert("搜索的ID不在当前时间段！");
                    document.getElementById("tagid").value = "";
                } else {
                    $("#search").css("background-color","green")
                    _this.playTrack = tagTrack;
                    _this.TrackPlay();
                    //_this.MarkBorderline();
                };
            },1000)
        }


};
    document.getElementById("pause").onclick = function () {
        var tall = $("#pause").text();
        if (tall == "暂停"){
            _this.playFlag = false;
            window.clearInterval(timer);
            $("#pause").text("继续")
        }else{

            _this.playFlag = true;
            _this.TrackPlay();
            $("#pause").text("暂停")
        }
};
},
    /*计算当前鼠标位置距离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";
    if (event.button == 2) {
    _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);
    _this.allMarkLins.pop();
    _this.allMarkLins.push(_this.CreatLinepoints);
    _this.drawImg();
}
    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 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 = "#FF423E";
    can.fill();
    can.strokeStyle = "#FFF";
    can.stroke();//画空心圆
    can.closePath();

    /*当前的坐标未结束那么继续 跟随直线*/
    if (!_this.CreatLinepoints.length) return;
    can.strokeStyle = "red";
    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);
    console.log(pos1.x,pos1.y)
    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;//切换为true，禁止拖拽，只能标记
    _this.canvas.style.cursor = "none";
    _this.CreatLinepoints = [];
    _this.allMarkLins.push([]);
},
    /*顺序播放坐标*/
    TrackPlay: function () {
        if (tiao == zongtiao-1){
            tiao = 0;
        }
    var _this = this;
    _this.playFlag = true;
        _this.playIndex = 0;
    if (_this.playFlag) {
    var t = 1000;
    timer = setInterval(fn, t);
    function fn() {
    var speed = document.getElementById("bofangsudu").value;
    if (speed =="1"){
        setTimeout(function(){

        },3000)
    }
        if (speed =="2"){
            setTimeout(function(){

            },2000)
        }
        if (speed =="4"){
            setTimeout(function(){

            },1000)
        }
        if (speed =="6"){
            setTimeout(function(){

            },500)
        }
        if (speed =="8"){

        }
    if (_this.playFlag && _this.playIndex < _this.playTrack.length) {
    _this.ShowNode(_this.playTrack[_this.playIndex]);
    _this.playIndex += 1;
};


    $("#data1").text(tiao+1+"/"+zongtiao)
        if(tiao == zongtiao-1){
            console.log("满足")
            clearInterval(timer);

            localStorage.setItem("ChaXunGuiJi","执行完")
            return
        }else{
            localStorage.setItem("ChaXunGuiJi","进行中")
        }
        $(".data2").text(_this.playTrack[_this.playIndex].baoliu8);
        $(".data3").text(_this.playTrack[_this.playIndex].tagid);
        $(".data4").text(_this.playTrack[_this.playIndex].baoliu2);
        $(".data5").text(_this.playTrack[_this.playIndex].baoliu3);
        $(".data6").text("暂无数据");
        $(".data7").text("暂无数据");
        $(".data8").text(_this.playTrack[_this.playIndex].x);
        $(".data9").text(_this.playTrack[_this.playIndex].y);
        $(".data10").text(_this.playTrack[_this.playIndex].z);
        $(".data11").text(_this.playTrack[_this.playIndex].baoliu7);
        $(".data12").text(_this.playTrack[_this.playIndex].time);

        $(".heimu").hide();
        $(".heimu1").hide();
    tiao += 1
    clearInterval(timer);
    if (_this.playIndex == _this.playTrack.length - 1) {
    clearInterval(timer);
    _this.playIndex = 0;
} else {
    var stime = new Date(_this.playTrack[_this.playIndex].time).getTime();
    var etime = new Date(_this.playTrack[_this.playIndex + 1].time).getTime();
    var t = etime - stime;
    var t_v = t / speed;
    timer = setInterval(fn, t_v);
}
};
} else { clearInterval(timer);  console.log("777777777776") }
},
    /*画点*/
    ShowNode: function (node_list) {
    var _this = this;
    var can = _this.context;
    can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);

    _this.playMark = node_list;
    _this.drawImg();
},
}
    //var imgUrl = '../image/mapfile/led.png';//图片路径
    //new MarkPoints(imgUrl);
const canvas = document.getElementById('draw');
canvas.addEventListener('click', getMousePosition, false);

function getMousePosition(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("X坐标: " + x + ", Y坐标: " + y);
}