first commit
This commit is contained in:
185
WebRoot/JS/structure/LinkList.js
Normal file
185
WebRoot/JS/structure/LinkList.js
Normal file
@ -0,0 +1,185 @@
|
||||
var LinkedList = function () {
|
||||
|
||||
function LinkedList() {
|
||||
this.length = 0;
|
||||
this.first = null;
|
||||
this.last = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据索引获取 item
|
||||
* @param {Number} index 链表索引
|
||||
* @returns {*}
|
||||
*/
|
||||
LinkedList.prototype.get = function (index) {
|
||||
if (typeof index !== 'number' || index < 0 || index >= this.length) {
|
||||
return undefined;
|
||||
}
|
||||
var item = this.first;
|
||||
for (var i = 0; i < index; i++) {
|
||||
item = item.next;
|
||||
}
|
||||
return item;
|
||||
};
|
||||
|
||||
|
||||
LinkedList.prototype.getPrev = function(index) {
|
||||
if(index > 0) {
|
||||
return this.get(index - 1);
|
||||
}
|
||||
}
|
||||
|
||||
LinkedList.prototype.getNext = function(index) {
|
||||
if(index < this.length) {
|
||||
return this.get(index + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据索引设置 item 的内容
|
||||
* @param {Number} index 链表索引
|
||||
* @param {*} value 需要设置的值
|
||||
* @returns {*}
|
||||
*/
|
||||
LinkedList.prototype.set = function (index, value) {
|
||||
if (typeof index !== 'number' || index < 0 || index >= this.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var item = this.get(index);
|
||||
item.data = value;
|
||||
item.data['index'] = index;
|
||||
if(index === 0) {
|
||||
if(this.length === 1) {
|
||||
item.data['nextId'] = null;
|
||||
} else {
|
||||
item.data['nextId'] = this.getNext(index).data.routeId;
|
||||
}
|
||||
}
|
||||
else if(index === this.length - 1) {
|
||||
item.data['prevId'] = this.getPrev(index).data.routeId;
|
||||
item.data['previousId'] = this.getPrev(index).data.routeId;
|
||||
}
|
||||
else {
|
||||
item.data['prevId'] = this.getPrev(index).data.routeId;
|
||||
item.data['previousId'] = this.getPrev(index).data.routeId;
|
||||
item.data['nextId'] = this.getNext(index).data.routeId;
|
||||
}
|
||||
|
||||
return item;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据索引位置插入新的 item
|
||||
* @param {Number} index 链表索引
|
||||
* @param {*} value 需要设置的值
|
||||
* @returns {*}
|
||||
*/
|
||||
LinkedList.prototype.add = function (index, value) {
|
||||
if (typeof index !== 'number' || index < 0 || index > this.length || index === undefined) {
|
||||
return false;
|
||||
}
|
||||
if(Object.prototype.toString.call(value) === '[object Object]') {
|
||||
value['index'] = index;
|
||||
}
|
||||
|
||||
var item = {
|
||||
data: value,
|
||||
next: null
|
||||
};
|
||||
|
||||
if (this.length > 0) {
|
||||
if (index === 0) {
|
||||
item.next = this.first;
|
||||
this.first = item;
|
||||
} else if (index === this.length) {
|
||||
this.last.next = item;
|
||||
this.last = item;
|
||||
} else {
|
||||
var prevItem = this.get(index - 1),
|
||||
nextItem = this.get(index);
|
||||
item.next = nextItem;
|
||||
prevItem.next = item;
|
||||
}
|
||||
} else {
|
||||
this.first = item;
|
||||
this.last = item;
|
||||
}
|
||||
|
||||
this.length++;
|
||||
return item;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据索引删除 item
|
||||
* @param {Number} index 链表索引
|
||||
* @returns {boolean}
|
||||
*/
|
||||
LinkedList.prototype.remove = function (index) {
|
||||
if (typeof index !== 'number' || index < 0 || index >= this.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var item = this.get(index);
|
||||
|
||||
if (this.length > 1) {
|
||||
if (index === 0) {
|
||||
this.first = item.next;
|
||||
} else if (index === this.length - 1) {
|
||||
this.last = this.get(this.length - 2);
|
||||
this.last.next = null;
|
||||
} else {
|
||||
this.get(index - 1).next = item.next;
|
||||
}
|
||||
} else {
|
||||
this.first = null;
|
||||
this.last = null;
|
||||
}
|
||||
|
||||
item = null;
|
||||
this.length--;
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空整个单链表
|
||||
* @returns {boolean}
|
||||
*/
|
||||
LinkedList.prototype.clear = function () {
|
||||
this.first = null;
|
||||
this.last = null;
|
||||
this.length = 0;
|
||||
return true;
|
||||
};
|
||||
|
||||
LinkedList.prototype.addFirst = function (value) {
|
||||
return this.add(0, value);
|
||||
};
|
||||
|
||||
LinkedList.prototype.addLast = function (value) {
|
||||
return this.add(this.length, value);
|
||||
};
|
||||
|
||||
LinkedList.prototype.removeFirst = function () {
|
||||
return this.remove(0);
|
||||
};
|
||||
|
||||
LinkedList.prototype.removeLast = function () {
|
||||
return this.remove(this.length - 1);
|
||||
};
|
||||
|
||||
LinkedList.prototype.getItems = function () {
|
||||
var arr = [],
|
||||
item = {};
|
||||
if (this.length) {
|
||||
do {
|
||||
item = item.next || this.get(0);
|
||||
arr.push(item.data);
|
||||
// arr.push(typeof item.data === 'object' ? JSON.stringify(item.data).replace(/\"/g, '') : item.data);
|
||||
} while (item.next);
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
return LinkedList;
|
||||
}();
|
||||
672
WebRoot/JS/structure/path.js
Normal file
672
WebRoot/JS/structure/path.js
Normal file
@ -0,0 +1,672 @@
|
||||
|
||||
function drawPath(configOptions) {
|
||||
setContainer(configOptions);
|
||||
container.innerHTML = '';
|
||||
container.ondrop = function(event){
|
||||
drop(event, configOptions, pointsLinkedList);
|
||||
};
|
||||
container.ondragover = function(event){
|
||||
allowDrop(event);
|
||||
};
|
||||
var pointInflectionStyle = configOptions.pointsStyle.pointInflectionStyle;
|
||||
var pointDefaultStyle = configOptions.pointsStyle.pointDefaultStyle;
|
||||
var pointCompleteStyle = configOptions.pointsStyle.pointCompleteStyle;
|
||||
var pointAbnormalStyle = configOptions.pointsStyle.pointAbnormalStyle;
|
||||
var pointAlarmStyle = configOptions.pointsStyle.pointAlarmStyle;
|
||||
var lineDefaultStyle = configOptions.linesStyle.lineDefaultStyle;
|
||||
var lineCompleteStyle = configOptions.linesStyle.lineCompleteStyle;
|
||||
var lineAbnormalStyle = configOptions.linesStyle.lineAbnormalStyle;
|
||||
var lineAlarmStyle = configOptions.linesStyle.lineAlarmStyle;
|
||||
var pointsLinkedList = new LinkedList();
|
||||
configOptions.points.forEach(function(item,index) {
|
||||
if(item['type'] === '1') {
|
||||
item['pointStyle'] = pointInflectionStyle;
|
||||
} else {
|
||||
item['pointStyle'] = pointDefaultStyle;
|
||||
}
|
||||
|
||||
item['patrolPlanId'] = configOptions.patrolPlanId;
|
||||
pointsLinkedList.add(index,item);
|
||||
});
|
||||
|
||||
pointsLinkedList.getItems().forEach(function(item, index) {
|
||||
pointsLinkedList.set(index,item);
|
||||
})
|
||||
var points = deepClone(pointsLinkedList.getItems());
|
||||
if(points.length && points.length === 1) {
|
||||
if(points[0].type === '1') {
|
||||
points[0]["pointStyle"] = pointInflectionStyle;
|
||||
} else {
|
||||
points[0]["pointStyle"] = pointDefaultStyle;
|
||||
}
|
||||
drawPoint(points[0], configOptions, pointsLinkedList);
|
||||
} else {
|
||||
for(var i = 0, len = points.length; i < len; i++) {
|
||||
if(points[i].type === "1") {
|
||||
points[i]["pointStyle"] = pointInflectionStyle;
|
||||
} else {
|
||||
switch(points[i].infos.state) {
|
||||
// case 1:
|
||||
// points[i]["pointStyle"] = pointCompleteStyle;
|
||||
// break;
|
||||
// case 2:
|
||||
// points[i]["pointStyle"] = pointAbnormalStyle;
|
||||
// break;
|
||||
case 3:
|
||||
// points[i]["pointStyle"] = pointAlarmStyle;
|
||||
points[i]["pointStyle"] = pointCompleteStyle;
|
||||
break;
|
||||
default:
|
||||
points[i]["pointStyle"] = pointDefaultStyle;
|
||||
}
|
||||
}
|
||||
if(i === 0) {
|
||||
drawPoint(points[i], configOptions, pointsLinkedList);
|
||||
}
|
||||
if (i < len - 1) {
|
||||
if(points[i+1].type === "1"){
|
||||
points[i+1]["pointStyle"] = pointInflectionStyle;
|
||||
drawLine(points[i], points[i+1], lineDefaultStyle, configOptions, pointsLinkedList);
|
||||
} else {
|
||||
switch(points[i+1].infos.state) {
|
||||
// case 1:
|
||||
// drawLine(points[i], points[i+1], lineCompleteStyle, configOptions, pointsLinkedList);
|
||||
// break;
|
||||
// case 2:
|
||||
// drawLine(points[i], points[i+1], lineAbnormalStyle, configOptions, pointsLinkedList);
|
||||
// break;
|
||||
case 3:
|
||||
// drawLine(points[i], points[i+1], lineAlarmStyle, configOptions, pointsLinkedList);
|
||||
drawLine(points[i], points[i+1], lineCompleteStyle, configOptions, pointsLinkedList);
|
||||
break;
|
||||
default:
|
||||
drawLine(points[i], points[i+1], lineDefaultStyle, configOptions, pointsLinkedList);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setContainer(configOptions) {
|
||||
var container = document.getElementById(configOptions.container);
|
||||
container.style.width = (configOptions.containerWidth + '').indexOf('%') > -1 ? configOptions.containerWidth : configOptions.containerWidth + "px";
|
||||
container.style.height = (configOptions.containerHeight + '').indexOf('%') > -1 ? configOptions.containerHeight : configOptions.containerHeight + 'px';
|
||||
container.style.backgroundColor = configOptions.containerBgColor;
|
||||
}
|
||||
|
||||
// 画点函数
|
||||
function drawPoint(p, configOptions, pl) {
|
||||
var point = document.createElement("div");
|
||||
var pointInfo = document.createElement("div");
|
||||
point.setAttribute("class", "patrol-point");
|
||||
point.setAttribute("id", (p.routeId.indexOf("patrol-point-") > -1 ? "" : "patrol-point-") + p.routeId.replace("patrol-point-", ""));
|
||||
pointInfo.setAttribute("id", "patrol-point-info-" + p.routeId);
|
||||
var containerWidth = container.clientWidth || container.offsetWidth;
|
||||
var containerHeight = container.clientHeight || container.offsetHeight;
|
||||
point.style.cssText += ";width:" + 2 * p.pointStyle.radius + "px;height: " + 2 * p.pointStyle.radius + "px;position:absolute;left:" + p.posX
|
||||
+ "px;top:" + p.posY + "px;line-height: " + 2 * p.pointStyle.radius + "px;border: " + p.pointStyle.borderWidth + "px " + p.pointStyle.borderStyle + " " + p.pointStyle.borderColor + ";border-radius: 50%;text-align: center;font-size: " + p.pointStyle.fontSize + "px;font-weight:800;vertical-align: middle;color:" + p.pointStyle.fontColor + ";text-shadow:" + p.pointStyle.shadow + ";box-shadow:" + p.pointStyle.shadow + ";z-index:800;cursor:move;background-color:#1c1d1f;";
|
||||
if(p.type === '0') {
|
||||
point.style.cssText += "background-size: 4px 4px;background-image:-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ), -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );";
|
||||
// point.innerHTML = p.name ? p.name[0] : '巡';
|
||||
point.innerHTML = '';
|
||||
}
|
||||
var mark = {
|
||||
width: 20,
|
||||
height: 20,
|
||||
arrowWidth: 10,
|
||||
arrowHeight: 25,
|
||||
fontSize: 0
|
||||
}
|
||||
pointInfo.style.cssText = ";display:none;position:absolute;top:-" + (mark.height - 3 * p.pointStyle.radius / 4 + mark.arrowHeight) + "px;left:-" + (mark.width / 2 - 3 * p.pointStyle.radius / 4) + "px;width:" + mark.width + "px;height:" + mark.height + "px;background-color:" + p.pointStyle.borderColor + ";border-top-left-radius: 50%;border-top-right-radius: 50%;border-bottom-left-radius: 40%;border-bottom-right-radius: 40%;box-shadow:" + p.pointStyle.shadow + ";color:rgb(28,29,31);font-size:" + mark.fontSize + "px;font-family: '微软雅黑';";
|
||||
document.styleSheets[0].insertRule('#patrol-point-info-' + p.routeId + ':before{position:absolute;top:' + (mark.height - 3 * p.pointStyle.radius / 4) + 'px;left:' + (mark.width/ 2 - p.pointStyle.radius) + 'px;border: ' + mark.arrowWidth + 'px solid transparent;border-top:' + mark.arrowHeight + 'px solid ' + p.pointStyle.borderColor + ';content:"";width:0;height:0;animation:alarm-arrow 1s infinite;}', 0);
|
||||
pointInfo.innerHTML = '<div id="patrol-point-info-titie-' + p.routeId + '" style="width:120px;height:20px;padding:0;position: absolute;left: -40px;top: -25px;color:' + p.pointStyle.borderColor + ';white-space: nowrap;font-size:14px;">' + (p.patrolPoint ? p.patrolPoint.name : p.name) + '</div>';
|
||||
if(p.infos === undefined) {
|
||||
p['infos'] = {
|
||||
state: 1
|
||||
}
|
||||
}
|
||||
if(p.infos.state >= 0) {
|
||||
point.appendChild(pointInfo);
|
||||
}
|
||||
if (configOptions.draggable) {
|
||||
new LimitDrag(point, p, pl);
|
||||
}
|
||||
container.appendChild(point);
|
||||
|
||||
point.ondrop = function(event){
|
||||
drop(event, configOptions, pl);
|
||||
};
|
||||
point.ondragover = function(event){
|
||||
allowDrop(event);
|
||||
};
|
||||
if(p.type === '0') {
|
||||
pointInfo.style.display = 'block';
|
||||
} else {
|
||||
pointInfo.style.display = 'none';
|
||||
}
|
||||
point.addEventListener("mouseover",function() {
|
||||
point.style.backgroundSize = "";
|
||||
point.style.backgroundImage = "";
|
||||
point.style.borderColor = '#0f0';
|
||||
if(p.type === '0'){
|
||||
point.title = '点击右键删除该巡检点！';
|
||||
} else {
|
||||
point.title = '点击右键删除该拐点！';
|
||||
}
|
||||
});
|
||||
point.addEventListener("mouseout",function() {
|
||||
// pointInfo.style.display = 'none';
|
||||
point.style.borderColor = p.pointStyle.borderColor;
|
||||
if(p.type === '0') {
|
||||
point.style.backgroundSize = "4px 4px";
|
||||
point.style.backgroundImage = "-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ), -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% )";
|
||||
}
|
||||
});
|
||||
$("#patrol-point-container").hide();
|
||||
point.addEventListener("contextmenu", function(e) {
|
||||
if(e.button === 2) {
|
||||
deleteRoutePoint(p,function(data) {
|
||||
if(JSON.parse(data).res === '1') {
|
||||
var floorId = configOptions.floorId;
|
||||
var patrolPlanId = configOptions.patrolPlanId;
|
||||
if(p.type === '0') {
|
||||
var newP = replaceJsonWhiteSpace(p);
|
||||
newP['id'] = newP['patrolPointId'];
|
||||
delete newP.nextId;
|
||||
delete newP.previousId;
|
||||
delete newP.prevId;
|
||||
var patrolPointStr = JSON.stringify(newP);
|
||||
$("#patro-list-" + floorId).append('<li class="patro-point" draggable="true" id="patrol-point-' + newP['patrolPointId'] + '" ondragstart="drag(event)" data-obj=' + patrolPointStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + (newP["name"] ? newP["name"] : newP["patrolPoint"].name) + '</li>');
|
||||
}
|
||||
getRoutePoints(floorId,patrolPlanId,configOptions);
|
||||
}
|
||||
});
|
||||
}
|
||||
// }
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/****************拖拽功能模块(开始)****************/
|
||||
function Drag(element,elementData, pl){
|
||||
this.elem = element;
|
||||
this.elementData = elementData;
|
||||
this.pl = pl;
|
||||
var self = this;
|
||||
this.elem.onmousedown = function (e){
|
||||
var e = e || window.event;
|
||||
e.preventDefault();
|
||||
if(e.button === 0) {
|
||||
self.posX = e.clientX - self.elem.offsetLeft;
|
||||
self.posY = e.clientY - self.elem.offsetTop;
|
||||
self.start();
|
||||
document.onmouseup = function (){
|
||||
self.stop();
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
Drag.prototype.start = function (){
|
||||
var self = this;
|
||||
document.onmousemove = function (e){
|
||||
var x = e.clientX - self.posX;
|
||||
var y = e.clientY - self.posY;
|
||||
self.move(x, y);
|
||||
};
|
||||
};
|
||||
Drag.prototype.move = function (x , y){
|
||||
var self = this;
|
||||
self.elem.style.left = x + "px";
|
||||
self.elem.style.top = y + "px";
|
||||
};
|
||||
Drag.prototype.stop = function (e){
|
||||
var self = this;
|
||||
var configOptions = JSON.parse(localStorage.getItem('configOptions'));
|
||||
var points = self.pl.getItems();
|
||||
if(this.elementData && configOptions) {
|
||||
points.forEach(function(item) {
|
||||
if(item.id === self.elementData.id) {
|
||||
item['posX'] = self.elem.offsetLeft;
|
||||
item['posY'] = self.elem.offsetTop;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
points.forEach(function(item) {
|
||||
if (item.id === self.elementData.id) {
|
||||
updateRoutePoint({
|
||||
id: item.routeId,
|
||||
posx: item.posX,
|
||||
posy: item.posY,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight
|
||||
}, function(data) {
|
||||
var floorId = configOptions.floorId;
|
||||
var patrolPlanId = configOptions.patrolPlanId;
|
||||
getRoutePoints(floorId,patrolPlanId,configOptions);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
|
||||
/*继承*/
|
||||
function LimitDrag(element,elementData, pl) {
|
||||
Drag.call(this,element,elementData, pl);
|
||||
};
|
||||
|
||||
for(var i in Drag.prototype) {
|
||||
LimitDrag.prototype[i]=Drag.prototype[i];
|
||||
};
|
||||
|
||||
LimitDrag.prototype.move=function(x , y) {
|
||||
var container = document.getElementById("container");
|
||||
var patrolPointInfoTitle = document.getElementById(this.elem.id.replace("patrol-point-", "patrol-point-info-titie-"));
|
||||
if(x < patrolPointInfoTitle.offsetWidth / 2 - this.elem.offsetWidth) {
|
||||
if(this.elementData.type === '0') {
|
||||
x = patrolPointInfoTitle.offsetWidth / 2 - this.elem.offsetWidth;
|
||||
} else {
|
||||
x = patrolPointInfoTitle.offsetWidth / 2;
|
||||
}
|
||||
|
||||
} else if(x > container.clientWidth - patrolPointInfoTitle.offsetWidth / 2 - this.elem.offsetWidth) {
|
||||
x = container.clientWidth - patrolPointInfoTitle.offsetWidth / 2 - this.elem.offsetWidth;
|
||||
}
|
||||
|
||||
if(y < patrolPointInfoTitle.offsetHeight * 2 + this.elem.offsetWidth) {
|
||||
if(this.elementData.type === '0') {
|
||||
y = patrolPointInfoTitle.offsetHeight * 2 + this.elem.offsetWidth;
|
||||
} else {
|
||||
y = patrolPointInfoTitle.offsetHeight * 2;
|
||||
}
|
||||
} else if(y > container.clientHeight - this.elem.offsetHeight) {
|
||||
y = container.clientHeight - this.elem.offsetHeight;
|
||||
}
|
||||
this.elem.style.left = x + 'px';
|
||||
this.elem.style.top = y + 'px';
|
||||
};
|
||||
|
||||
/****************拖拽功能模块(结束)****************/
|
||||
|
||||
// 画线函数
|
||||
function drawLine(startPoint, endPoint, lineStyle,configOptions, pl) {
|
||||
var line = document.createElement("div");
|
||||
line.setAttribute("class","patrol-line");
|
||||
line.setAttribute("id","patrol-line-" + endPoint.routeId);
|
||||
line.style.cssText += ";width: " + Math.sqrt(Math.pow((endPoint.posX + endPoint.pointStyle.radius + endPoint.pointStyle.borderWidth - startPoint.posX - startPoint.pointStyle.radius - startPoint.pointStyle.borderWidth), 2) + Math.pow((endPoint.posY + endPoint.pointStyle.radius + endPoint.pointStyle.borderWidth - startPoint.posY - startPoint.pointStyle.radius - startPoint.pointStyle.borderWidth), 2)) + "px;position:absolute;left:" + (startPoint.posX + startPoint.pointStyle.radius + startPoint.pointStyle.borderWidth) + "px;top:" + (startPoint.posY + startPoint.pointStyle.radius + startPoint.pointStyle.borderWidth - lineStyle.lineWidth / 2) + "px;border-top: " + lineStyle.lineWidth + "px " + lineStyle.lineStyle + " " + lineStyle.lineColor + ";transform-origin: 0;transform:rotate(" + getAangle(startPoint, endPoint) + "deg);box-shadow:" + lineStyle.shadow + ";z-index:799;";
|
||||
drawPoint(endPoint, configOptions, pl);
|
||||
container.appendChild(line);
|
||||
document.oncontextmenu = function(e) {
|
||||
e.preventDefault();
|
||||
};
|
||||
line.onmouseover = function(e) {
|
||||
line.style.borderColor = "#0f0";
|
||||
line.style.cursor = 'pointer';
|
||||
line.title = '点击右键新增拐点！';
|
||||
e.preventDefault();
|
||||
}
|
||||
line.onmouseout = function(e) {
|
||||
line.style.borderColor = lineStyle.lineColor;
|
||||
e.preventDefault();
|
||||
}
|
||||
line.oncontextmenu = function(e) {
|
||||
if(e.button === 2){
|
||||
var newInflectionPoint = {
|
||||
id: guid(),
|
||||
type: '1',
|
||||
patrolPlanId: configOptions.patrolPlanId,
|
||||
floorId: configOptions.floorId,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight,
|
||||
infos: {
|
||||
text: "拐点",
|
||||
state: 0,
|
||||
message: "拐"
|
||||
}
|
||||
}
|
||||
newInflectionPoint['patrolPointId'] = newInflectionPoint.id;
|
||||
newInflectionPoint['routeId'] = guid();
|
||||
newInflectionPoint['pointStyle'] = deepClone(configOptions.pointsStyle.pointInflectionStyle);
|
||||
newInflectionPoint['posX'] = e.clientX - $("#container").offset().left - newInflectionPoint.pointStyle.radius - newInflectionPoint.pointStyle.borderWidth;
|
||||
newInflectionPoint['posY'] = e.clientY - $("#container").offset().top - newInflectionPoint.pointStyle.radius - newInflectionPoint.pointStyle.borderWidth;
|
||||
if(e.target.id.indexOf("patrol-line-") > -1 && e.target.id !== "container" && !e.target.id.indexOf("patrol-point-") > -1) {
|
||||
pl.getItems().forEach(function(item, index){
|
||||
if(e.target.id === "patrol-line-" + item.routeId) {
|
||||
pl.add(item.index, newInflectionPoint);
|
||||
}
|
||||
});
|
||||
}
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
pl.set(index, item);
|
||||
});
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(newInflectionPoint.routeId === item.routeId){
|
||||
var newPoint = item;
|
||||
saveRoutePoint({
|
||||
id: newPoint.routeId,
|
||||
patrolPlanId: newPoint.patrolPlanId,
|
||||
previousId: newPoint.prevId ? newPoint.prevId : "",
|
||||
nextId: newPoint.nextId ? newPoint.nextId : "", //
|
||||
type: newPoint.type,
|
||||
patrolPointId: newPoint.id,
|
||||
posx: newPoint.posX,
|
||||
posy: newPoint.posY,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight,
|
||||
structureCardPictureId: configOptions.floorId
|
||||
},function(data) {
|
||||
if(JSON.parse(data).res === '1') {
|
||||
configOptions.points = deepClone(pl.getItems());
|
||||
drawAllPath(configOptions);
|
||||
} else {
|
||||
pl.remove(item.index);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
if(endPoint.infos.state > -1) {
|
||||
if(endPoint.type === '0') {
|
||||
document.styleSheets[0].insertRule('#patrol-line-' + endPoint.routeId + ':before {position: absolute;bottom: -' + lineStyle.lineWidth + 'px;right: -' + lineStyle.lineWidth + 'px;margin-right: ' + (endPoint.pointStyle.radius - endPoint.pointStyle.borderWidth) + 'px;display: block;width: 0;height: 0;content: "";border: ' + 1.5 * lineStyle.lineWidth + 'px solid transparent;border-left: ' + 4 * lineStyle.lineWidth + 'px solid ' + lineStyle.lineColor + ';}', 0);
|
||||
}
|
||||
}
|
||||
function getAangle(startP, endP) {
|
||||
var radiusDiff = endP.pointStyle.radius + endP.pointStyle.borderWidth - startP.pointStyle.radius - startP.pointStyle.borderWidth;
|
||||
var x = endP.posX - startP.posX + radiusDiff;
|
||||
var y = endP.posY - startP.posY + radiusDiff;
|
||||
if (x < 0 && y < 0) {// 第一象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) - 180;
|
||||
}
|
||||
// ?
|
||||
if (x < 0 && y > 0) {// 第三象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) + 180;
|
||||
}
|
||||
|
||||
if (x > 0 && y < 0) {// 第一象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
// ?
|
||||
if (x > 0 && y > 0) {// 第三象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
|
||||
if (x < 0 && y === 0) {// 鼠标在x轴负方向
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) + 180;
|
||||
}
|
||||
|
||||
if (x > 0 && y === 0) {
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
if (x === 0 && y < 0) {
|
||||
return 180 - 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
if (x === 0 && y > 0) {
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
}
|
||||
|
||||
function deepClone(obj) {
|
||||
var str, newobj = obj.constructor === Array ? [] : {};
|
||||
if (typeof obj !== 'object') {
|
||||
return;
|
||||
} else if (JSON) {
|
||||
str = JSON.stringify(obj), // 系列化对象
|
||||
newobj = JSON.parse(str); // 还原
|
||||
} else {
|
||||
for (var i in obj) {
|
||||
newobj[i] = typeof obj[i] === 'object' ? this.deepClone(obj[i]) : obj[i];
|
||||
}
|
||||
}
|
||||
return newobj;
|
||||
}
|
||||
|
||||
function getStyle(element, attr) {
|
||||
if(element.currentStyle) {
|
||||
return element.currentStyle[attr];
|
||||
} else {
|
||||
return getComputedStyle(element, false)[attr];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function allowDrop(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
function drag(ev) {
|
||||
var obj = $('#' + ev.target.id).data('obj');
|
||||
ev.dataTransfer.setData("obj",JSON.stringify(obj));
|
||||
ev.dataTransfer.setData("ID",ev.target.id);
|
||||
}
|
||||
|
||||
function drop(ev,configOptions, pl) {
|
||||
ev.stopPropagation();
|
||||
var data = ev.dataTransfer.getData("ID");
|
||||
var pointStr = ev.dataTransfer.getData("obj");
|
||||
var pointObj = JSON.parse(pointStr.replace(" ", "kongbai"));
|
||||
var infos = {
|
||||
text: pointObj['name'] ? pointObj['name']: "巡检点",
|
||||
state: 0,
|
||||
message: pointObj['name'] ? pointObj['name']: "巡检点"
|
||||
};
|
||||
pointObj['routeId'] = guid();
|
||||
pointObj['pointStyle'] = deepClone(configOptions.pointsStyle.pointDefaultStyle);
|
||||
pointObj['patrolPlanId'] = configOptions.patrolPlanId;
|
||||
pointObj['patrolPointId'] = pointObj.id;
|
||||
pointObj['type'] = '0';
|
||||
pointObj['infos'] = infos;
|
||||
// 拖拽到点上
|
||||
if(ev.target.id === 'container' && !ev.target.id.indexOf("patrol-line-") > -1 && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
// pointObj['prevId'] = null;
|
||||
// pointObj['nextId'] = null;
|
||||
pointObj['posX'] = ev.offsetX - pointObj['pointStyle'].radius - pointObj['pointStyle'].borderWidth;
|
||||
pointObj['posY'] = ev.offsetY - pointObj['pointStyle'].radius - pointObj['pointStyle'].borderWidth;
|
||||
} else if(ev.target.id.indexOf('patrol-line-') > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
// pointObj['prevId'] = null;
|
||||
// pointObj['nextId'] = null;
|
||||
pointObj['posX'] = ev.clientX - $("#container").offset().left - pointObj.pointStyle.radius - pointObj.pointStyle.borderWidth;
|
||||
pointObj['posY'] = ev.clientY - $("#container").offset().top - pointObj.pointStyle.radius - pointObj.pointStyle.borderWidth;
|
||||
} else if(ev.target.id.indexOf('patrol-point-') > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-line-") > -1) {
|
||||
// pointObj['prevId'] = null;
|
||||
// pointObj['nextId'] = null;
|
||||
pointObj['posX'] = document.getElementById(ev.target.id).offsetLeft + pointObj['pointStyle'].radius + pointObj['pointStyle'].borderWidth;
|
||||
pointObj['posY'] = document.getElementById(ev.target.id).offsetTop + pointObj['pointStyle'].radius + pointObj['pointStyle'].borderWidth;
|
||||
} else {
|
||||
|
||||
}
|
||||
if(pl.getItems().length === 0) {
|
||||
pl.addFirst(pointObj);
|
||||
} else {
|
||||
if(ev.target.id === "container" && !ev.target.id.indexOf("patrol-line-") > -1 && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pl.addLast(pointObj);
|
||||
} else if(ev.target.id.indexOf("patrol-line-") > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(ev.target.id === "patrol-line-" + item.routeId) {
|
||||
pl.add(item.index, pointObj);
|
||||
}
|
||||
});
|
||||
} else if(ev.target.id.indexOf("patrol-point-") > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-line-") > -1) {
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(ev.target.id === "patrol-point-" + item.routeId) {
|
||||
pl.add(item.index + 1, pointObj);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
pl.set(index, item);
|
||||
});
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(pointObj.routeId === item.routeId){
|
||||
var newPoint = item;
|
||||
saveRoutePoint({
|
||||
id: newPoint.routeId,
|
||||
patrolPlanId: newPoint.patrolPlanId,
|
||||
previousId: newPoint.prevId ? newPoint.prevId : null,
|
||||
nextId: newPoint.nextId ? newPoint.nextId : null, //
|
||||
type: newPoint.type,
|
||||
patrolPointId: newPoint.id,
|
||||
posx: newPoint.posX,
|
||||
posy: newPoint.posY,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight,
|
||||
structureCardPictureId: configOptions.floorId
|
||||
},function(data) {
|
||||
if(JSON.parse(data).res === '1') {
|
||||
configOptions.points = deepClone(pl.getItems());
|
||||
drawAllPath(configOptions);
|
||||
$("#patrol-point-" + pointObj.id).remove();
|
||||
} else {
|
||||
pl.remove(item.index);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
// 获取底图信息
|
||||
function getAllFloorList(structureCardPictureId,unitId,callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/getPictureList.do', {structureCardPictureId,unitId} , function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检点数据
|
||||
function getPatrolPointsList(configOptions, patrolPointInContainer) {
|
||||
$("#patro-list-" + configOptions.floorId).html("");
|
||||
var configOptions = JSON.parse(localStorage.getItem("configOptions"));
|
||||
var patrolPointInContainer = deepClone(configOptions.points.filter(function(item){return item['type'] === '0'}));
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/getPatrolPoints.do', {
|
||||
floorId: configOptions.floorId,
|
||||
type: configOptions.type,
|
||||
unitId: configOptions.unitId
|
||||
// patrolAreaId:configOptions.patrolAreaId
|
||||
} , function(data) {
|
||||
var patrolPointItem = "";
|
||||
JSON.parse(data).forEach(function(item) {
|
||||
var itemStr = JSON.stringify(replaceJsonWhiteSpace(item));
|
||||
patrolPointItem += '<li class="patro-point" draggable="true" id="patrol-point-' + item['id'] + '" ondragstart="drag(event)" data-obj=' + itemStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + item['name'] + '</li>';
|
||||
});
|
||||
$("#patro-list-" + configOptions.floorId).html(patrolPointItem);
|
||||
console.log(patrolPointInContainer);
|
||||
patrolPointInContainer.forEach(function(point) {
|
||||
$("#patrol-point-" + point.patrolPointId).remove();
|
||||
});
|
||||
$("#patrol-point-container").show();
|
||||
});
|
||||
}
|
||||
|
||||
function getPatrolPointsList1(configOptions) {
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolArea/getPatrolPoints.do', {
|
||||
floorId: configOptions.floorId,
|
||||
type: configOptions.type,
|
||||
unitId: configOptions.unitId
|
||||
// patrolAreaId:configOptions.patrolAreaId
|
||||
} , function(data) {
|
||||
$("#patro-list-" + configOptions.floorId).html("");
|
||||
JSON.parse(data).forEach(function(item) {
|
||||
var itemStr = JSON.stringify(replaceJsonWhiteSpace(item));
|
||||
var patrolPointItem = '<li class="patro-point" draggable="true" id="patrol-point-' + item['id'] + '" ondragstart="drag(event)" data-obj=' + itemStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + item['name'] + '</li>';
|
||||
$("#patro-list-" + configOptions.floorId).append(patrolPointItem);
|
||||
});
|
||||
$("#patrol-point-container").show();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 首次获取巡检路径点信息
|
||||
function getRoutePointsFirst(floorId,patrolPlanId,callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/getRoutePoints.do?patrolPlanId=' + patrolPlanId + '&floorId=' + floorId, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检路径点信息
|
||||
function getRoutePoints(floorId,patrolPlanId,configOptions) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/getRoutePoints.do?patrolPlanId=' + patrolPlanId + '&floorId=' + floorId, function(data) {
|
||||
var copyPoints = deepClone(JSON.parse(data).rows);
|
||||
// console.log(copyPoints);
|
||||
copyPoints.forEach(function(item,index) {
|
||||
var insdt1 = item['insdt'].replace(' ', 'kongbai');
|
||||
var infos = {
|
||||
text: "新",
|
||||
state: 0,
|
||||
message: "新"
|
||||
};
|
||||
item['routeId'] = item['id'];
|
||||
item['insdt'] = insdt1;
|
||||
item['infos'] = infos;
|
||||
item['posX'] = item['posx'];
|
||||
item['posY'] = item['posy'];
|
||||
// if(item['previousId'] === "undefined") {
|
||||
// item['prevId'] = null;
|
||||
// item['previousId'] = null;
|
||||
// } else {
|
||||
// item['prevId'] = item['previousId'];
|
||||
// item['previousId'] = item['previousId'];
|
||||
// }
|
||||
|
||||
});
|
||||
// console.log(copyPoints);
|
||||
configOptions.points = copyPoints;
|
||||
drawAllPath(configOptions);
|
||||
});
|
||||
}
|
||||
|
||||
function drawAllPath(configOptions) {
|
||||
drawPath(configOptions);
|
||||
localStorage.setItem("configOptions", JSON.stringify(configOptions));
|
||||
$("#patrol-point-container").show();
|
||||
}
|
||||
|
||||
function saveRoutePoint(param, callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/saveRoutePoint.do', param, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRoutePoint(param, callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/updateRoutePoint.do', param, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteRoutePoint(point,callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/deleteRoutePoint.do?id=' + point.routeId + '&previousId=' + (point.prevId ? point.prevId : "") + '&nextId=' + (point.nextId ? point.nextId : ""), function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
function replaceJsonWhiteSpace(jsonObj) {
|
||||
for(var key in jsonObj) {
|
||||
//如果对象类型为object类型且数组长度大于0 或者 是对象 ，继续递归解析
|
||||
var element = jsonObj[key];
|
||||
if(typeof element === 'string') {
|
||||
jsonObj[key] = element.replace(" ", "kongbai");
|
||||
}
|
||||
if(element && element.length > 0 && typeof(element) == "object" || typeof(element) == "object") {
|
||||
replaceJsonWhiteSpace(element);
|
||||
} else { //不是对象或数组、直接输出
|
||||
// console.log("----eles --> " + key + ":" + element + " ");
|
||||
}
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
//生成唯一路径点ID
|
||||
function S4() {
|
||||
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
|
||||
}
|
||||
function guid() {
|
||||
return (S4()+S4()+""+S4()+""+S4()+""+S4()+""+S4()+S4()+S4());
|
||||
}
|
||||
710
WebRoot/JS/structure/recordPath.js
Normal file
710
WebRoot/JS/structure/recordPath.js
Normal file
@ -0,0 +1,710 @@
|
||||
|
||||
function drawPath(configOptions) {
|
||||
setContainer(configOptions);
|
||||
container.innerHTML = '';
|
||||
// container.ondrop = function(event){
|
||||
// drop(event, configOptions, pointsLinkedList);
|
||||
// };
|
||||
// container.ondragover = function(event){
|
||||
// allowDrop(event);
|
||||
// };
|
||||
var pointInflectionStyle = configOptions.pointsStyle.pointInflectionStyle;
|
||||
var pointDefaultStyle = configOptions.pointsStyle.pointDefaultStyle;
|
||||
var pointCompleteStyle = configOptions.pointsStyle.pointCompleteStyle;
|
||||
var pointAbnormalStyle = configOptions.pointsStyle.pointAbnormalStyle;
|
||||
var pointAlarmStyle = configOptions.pointsStyle.pointAlarmStyle;
|
||||
var lineDefaultStyle = configOptions.linesStyle.lineDefaultStyle;
|
||||
var lineCompleteStyle = configOptions.linesStyle.lineCompleteStyle;
|
||||
var lineAbnormalStyle = configOptions.linesStyle.lineAbnormalStyle;
|
||||
var lineAlarmStyle = configOptions.linesStyle.lineAlarmStyle;
|
||||
var pointsLinkedList = new LinkedList();
|
||||
configOptions.points.forEach(function(item,index) {
|
||||
// if(item['type'] === '1') {
|
||||
// item['pointStyle'] = pointInflectionStyle;
|
||||
// } else {
|
||||
// item['pointStyle'] = pointDefaultStyle;
|
||||
// }
|
||||
if(item.type === '1') {
|
||||
item['pointStyle'] = pointInflectionStyle;
|
||||
}
|
||||
item['pointStyle'] = pointDefaultStyle;
|
||||
item['patrolPlanId'] = configOptions.patrolPlanId;
|
||||
pointsLinkedList.add(index,item);
|
||||
});
|
||||
|
||||
pointsLinkedList.getItems().forEach(function(item, index) {
|
||||
pointsLinkedList.set(index,item);
|
||||
})
|
||||
var points = deepClone(pointsLinkedList.getItems());
|
||||
if(points.length && points.length === 1) {
|
||||
// if(points[0].type === '1') {
|
||||
// points[0]["pointStyle"] = pointInflectionStyle;
|
||||
// } else {
|
||||
// points[0]["pointStyle"] = pointDefaultStyle;
|
||||
// }
|
||||
|
||||
if(points[0].status === '3') {
|
||||
points[0]["pointStyle"] = pointCompleteStyle;
|
||||
} else {
|
||||
points[0]["pointStyle"] = pointDefaultStyle;
|
||||
}
|
||||
drawPoint(points[0], configOptions, pointsLinkedList);
|
||||
} else {
|
||||
for(var i = 0, len = points.length; i < len; i++) {
|
||||
// if(points[i].type === "1") {
|
||||
// points[i]["pointStyle"] = pointInflectionStyle;
|
||||
// } else {
|
||||
switch(points[i].status) {
|
||||
// case '1':
|
||||
// points[i]["pointStyle"] = pointCompleteStyle;
|
||||
// break;
|
||||
// case '2':
|
||||
// points[i]["pointStyle"] = pointAbnormalStyle;
|
||||
// break;
|
||||
case '3':
|
||||
//points[i]["pointStyle"] = pointAlarmStyle;
|
||||
points[i]["pointStyle"] = pointCompleteStyle;
|
||||
break;
|
||||
default:
|
||||
points[i]["pointStyle"] = pointDefaultStyle;
|
||||
}
|
||||
// }
|
||||
if(i === 0) {
|
||||
switch(points[0].status) {
|
||||
case '3':
|
||||
configOptions.pointsStyle = pointCompleteStyle;
|
||||
break;
|
||||
default:
|
||||
configOptions.pointsStyle = pointDefaultStyle;
|
||||
}
|
||||
console.log(configOptions);
|
||||
drawPoint(points[0], configOptions, pointsLinkedList);
|
||||
}
|
||||
if (i < len - 1) {
|
||||
// if(points[i+1].type === "1"){
|
||||
// switch(points[i+1].status) {
|
||||
// case '1':
|
||||
// pointInflectionStyle.borderColor = pointCompleteStyle.borderColor;
|
||||
// lineDefaultStyle.lineColor = pointCompleteStyle.borderColor;
|
||||
// break;
|
||||
// case '2':
|
||||
// pointInflectionStyle.borderColor = pointAbnormalStyle.borderColor;
|
||||
// lineDefaultStyle.lineColor = pointAbnormalStyle.borderColor;
|
||||
// break;
|
||||
// case '3':
|
||||
// pointInflectionStyle.borderColor = pointAlarmStyle.borderColor;
|
||||
// lineDefaultStyle.lineColor = pointAlarmStyle.borderColor;
|
||||
pointInflectionStyle.borderColor = pointCompleteStyle.borderColor;
|
||||
// lineDefaultStyle.lineColor = pointCompleteStyle.borderColor;
|
||||
// lineDefaultStyle.lineStyle = pointCompleteStyle.borderStyle;
|
||||
// break;
|
||||
// default:
|
||||
// pointInflectionStyle.borderColor = pointDefaultStyle.borderColor;
|
||||
// lineDefaultStyle.lineColor = pointDefaultStyle.borderColor;
|
||||
// }
|
||||
// points[i+1]["pointStyle"] = pointInflectionStyle;
|
||||
|
||||
// drawLine(points[i], points[i+1], lineDefaultStyle, configOptions, pointsLinkedList);
|
||||
// } else {
|
||||
switch(points[i+1].status) {
|
||||
// case '1':
|
||||
// points[i+1]["pointStyle"] = pointCompleteStyle;
|
||||
// drawLine(points[i], points[i+1], lineCompleteStyle, configOptions, pointsLinkedList);
|
||||
// break;
|
||||
// case '2':
|
||||
// points[i+1]["pointStyle"] = pointAbnormalStyle;
|
||||
// drawLine(points[i], points[i+1], lineAbnormalStyle, configOptions, pointsLinkedList);
|
||||
// break;
|
||||
case '3':
|
||||
// points[i+1]["pointStyle"] = pointAlarmStyle;
|
||||
// drawLine(points[i], points[i+1], lineAlarmStyle, configOptions, pointsLinkedList);
|
||||
if(points[i+2].status !== '3') {
|
||||
points[i+1]['isCurrent'] = true;
|
||||
}
|
||||
points[i+1]["pointStyle"] = pointCompleteStyle;
|
||||
drawLine(points[i], points[i+1], lineCompleteStyle, configOptions, pointsLinkedList);
|
||||
break;
|
||||
default:
|
||||
drawLine(points[i], points[i+1], lineDefaultStyle, configOptions, pointsLinkedList);
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setContainer(configOptions) {
|
||||
var container = document.getElementById(configOptions.container);
|
||||
container.style.width = (configOptions.containerWidth + '').indexOf('%') > -1 ? configOptions.containerWidth : configOptions.containerWidth + "px";
|
||||
container.style.height = (configOptions.containerHeight + '').indexOf('%') > -1 ? configOptions.containerHeight : configOptions.containerHeight + 'px';
|
||||
container.style.backgroundColor = configOptions.containerBgColor;
|
||||
}
|
||||
|
||||
// 画点函数
|
||||
function drawPoint(p, configOptions, pl) {
|
||||
var point = document.createElement("div");
|
||||
var point1 = document.createElement("div");
|
||||
var pointInfo = document.createElement("div");
|
||||
var pointInfoCenter = document.createElement("div");
|
||||
pointInfoCenter.style.cssText = 'width:' + 1.2 * p.pointStyle.radius + 'px;height:' + 1.2 * p.pointStyle.radius + 'px;border-radius:50%;background:#fff;position:absolute;left:4px;top:5px;display:block;z-index:3;transform: none;';
|
||||
point.setAttribute("class", "patrol-point");
|
||||
point.setAttribute("id", (p.routeId.indexOf("patrol-point-") > -1 ? "" : "patrol-point-") + p.routeId.replace("patrol-point-", ""));
|
||||
pointInfo.setAttribute("id", "patrol-point-info-" + p.routeId);
|
||||
var containerWidth = container.clientWidth || container.offsetWidth;
|
||||
var containerHeight = container.clientHeight || container.offsetHeight;
|
||||
//point.style.cssText += ";width:" + 2 * p.pointStyle.radius + "px;height: " + 2 * p.pointStyle.radius + "px;position:absolute;left:" + p.posX
|
||||
//+ "px;top:" + p.posY + "px;line-height: " + 2 * p.pointStyle.radius + "px;border: " + p.pointStyle.borderWidth + "px " + p.pointStyle.borderStyle + " " + p.pointStyle.borderColor + ";border-radius: 50%;text-align: center;font-size: " + p.pointStyle.fontSize + "px;font-weight:800;vertical-align: middle;color:" + p.pointStyle.fontColor + ";text-shadow:" + p.pointStyle.shadow + ";box-shadow:" + p.pointStyle.shadow + ";z-index:800;background-color:#1c1d1f;transform: rotateX(0deg);";
|
||||
|
||||
point.style.cssText += ";width:" + 2 * p.pointStyle.radius + "px;height: " + 2 * p.pointStyle.radius + "px;position:absolute;left:" + p.posX
|
||||
+ "px;top:" + p.posY + "px;line-height: " + 2 * p.pointStyle.radius + "px;border: " + p.pointStyle.borderWidth + "px " + p.pointStyle.borderStyle + " " + (p.isCurrent ? '#2e2e2e' : p.pointStyle.borderColor) + ";background-color:" + (p.isCurrent ? '#2e2e2e' : p.pointStyle.borderColor) + ";border-radius: 50%;text-align: center;font-size: " + p.pointStyle.fontSize + "px;font-weight:800;vertical-align: middle;color:" + p.pointStyle.fontColor + ";z-index:800;transform: rotateX(0deg);";
|
||||
if(p.isCurrent){
|
||||
p.pointStyle.borderColor = '#f33';
|
||||
}
|
||||
point1.style.cssText += ";width:" + 2 * p.pointStyle.radius + "px;height: " + 2 * p.pointStyle.radius + "px;position:absolute;left:" + p.posX
|
||||
+ "px;top:" + p.posY + "px;line-height: " + 2 * p.pointStyle.radius + "px;border: " + p.pointStyle.borderWidth + "px " + p.pointStyle.borderStyle + " " + p.pointStyle.borderColor + ";border-radius: 50%;text-align: center;font-size: " + p.pointStyle.fontSize + "px;font-weight:800;vertical-align: middle;color:" + p.pointStyle.fontColor + ";z-index:801;background-color:transparent;transform: rotateX(60deg);";
|
||||
if(p.type === '0') {
|
||||
//point.style.cssText += "background-size: 4px 4px;background-image:-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ), -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );";
|
||||
//point1.style.cssText += "background-size: 4px 4px;background-image:-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ), -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );transform:rotateX(45deg)";
|
||||
point.innerHTML = '';
|
||||
} else {
|
||||
point.style.cssText += "width:" + p.pointStyle.radius + "px;height:" + p.pointStyle.radius + "px;position:absolute;left:" + (p.posX + 6)
|
||||
+ "px;top:" + (p.posY + 6) + "px;display:block;";
|
||||
// point1.style.cssText += "width:10px;height:10px;position:absolute;left:" + (p.posX + 10)
|
||||
// + "px;top:" + p.posY + "px;display:block;";
|
||||
// point.innerHTML = p.name ? p.name[0] : '巡';
|
||||
point.innerHTML = '';
|
||||
}
|
||||
var mark = {
|
||||
width: 20,
|
||||
height: 20,
|
||||
arrowWidth: 10,
|
||||
arrowHeight: 25,
|
||||
fontSize: 16
|
||||
}
|
||||
if(p.patrolPoint) {
|
||||
if(p.isCurrent){
|
||||
p.pointStyle.borderColor = '#f33';
|
||||
pointInfo.style.cssText = ";display:none;position:absolute;top:-" + (mark.height - 3 * p.pointStyle.radius / 4 + mark.arrowHeight - 10) + "px;left:-" + (mark.width / 2 - 3 * p.pointStyle.radius / 4) + "px;width:" + mark.width + "px;height:" + mark.height + "px;background-color:" + p.pointStyle.borderColor + ";border-top-left-radius: 50%;border-top-right-radius: 50%;border-bottom-left-radius: 40%;border-bottom-right-radius: 40%;box-shadow:" + p.pointStyle.shadow + ";color:rgb(28,29,31);font-size:" + mark.fontSize + "px;font-family: '微软雅黑';z-index:2;transform: none;";
|
||||
document.styleSheets[0].insertRule('#patrol-point-info-' + p.routeId + ':before{position:absolute;top:' + (mark.height - 3 * p.pointStyle.radius / 4) + 'px;left:' + (mark.width/ 2 - p.pointStyle.radius) + 'px;border: ' + mark.arrowWidth + 'px solid transparent;border-top:' + mark.arrowHeight + 'px solid ' + p.pointStyle.borderColor + ';content:"";width:0;height:0;z-index:1;transform: none;}', 0);
|
||||
pointInfo.innerHTML = '<div id="patrol-info-'+ p.routeId +'" style="display:block;width:auto;height:auto;padding:3px;border-radius:3px;position: absolute;left: -80px;top: -75px;background-color:' + p.pointStyle.borderColor + ';color:' + '#fff' + ';font-size:14px;text-align:left;user-select:none;transform: none;"><span>巡检人：' + (p.worker==null?"":p.worker.caption) + '</span><br/><span style="white-space: nowrap;">巡检时间：' + (p.finishdt) + '</span></div>';
|
||||
}
|
||||
if(p.status !=='3' || p.isCurrent) {
|
||||
p.pointStyle.borderColor = '#f33';
|
||||
}
|
||||
document.styleSheets[0].insertRule('#patrol-point-info-' + p.routeId + ':after{position:absolute;top:-25px;right:-60px;content:"'+ p.patrolPoint.name +'";color:' + p.pointStyle.borderColor + ';width: 120px;height:20px;white-space: nowrap;font-size:14px;transform: none;}', 0);
|
||||
if(p.isCurrent){
|
||||
pointInfo.appendChild(pointInfoCenter);
|
||||
}
|
||||
}
|
||||
if(p.infos === undefined) {
|
||||
p['infos'] = {
|
||||
state: 1
|
||||
}
|
||||
}
|
||||
if(p.infos.state >= 0) {
|
||||
point.appendChild(pointInfo);
|
||||
}
|
||||
if (configOptions.draggable) {
|
||||
new Drag(point, p, pl);
|
||||
}
|
||||
container.appendChild(point);
|
||||
if(p.type === '0') {
|
||||
container.appendChild(point1);
|
||||
}
|
||||
// point.ondrop = function(event){
|
||||
// drop(event, configOptions, pl);
|
||||
// };
|
||||
// point.ondragover = function(event){
|
||||
// allowDrop(event);
|
||||
// };
|
||||
if(p.type === '0') {
|
||||
if(p.isCurrent) {
|
||||
pointInfo.style.display = 'block';
|
||||
point.addEventListener("mouseover",function() {
|
||||
document.getElementById("patrol-info-"+ p.routeId).style.display = 'block';
|
||||
// point.style.backgroundSize = "";
|
||||
// point.style.backgroundImage = "";
|
||||
// point.style.borderColor = '#0f0';
|
||||
});
|
||||
point.addEventListener("mouseout",function() {
|
||||
document.getElementById("patrol-info-"+ p.routeId).style.display = 'block';
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if(p.isCurrent){
|
||||
pointInfo.style.display = 'block';
|
||||
} else {
|
||||
pointInfo.style.display = 'none';
|
||||
}
|
||||
if(p.status !== '3') {
|
||||
console.log(point);
|
||||
point.style.cssText += 'animation: pointInflection 1s infinite;';
|
||||
//point.classList.add('flash');
|
||||
}
|
||||
}
|
||||
|
||||
$("#patrol-point-container").hide();
|
||||
// point.addEventListener("contextmenu", function(e) {
|
||||
// if(e.button === 2) {
|
||||
// deleteRoutePoint(p,function(data) {
|
||||
// if(JSON.parse(data).res === '1') {
|
||||
// var floorId = configOptions.floorId;
|
||||
// var patrolRecordId = configOptions.patrolRecordId;
|
||||
// // var patrolPlanId = configOptions.patrolPlanId;
|
||||
// if(p.type === '0') {
|
||||
// var newP = replaceJsonWhiteSpace(p);
|
||||
// newP['id'] = newP['patrolPointId'];
|
||||
// var patrolPointStr = JSON.stringify(newP);
|
||||
// $("#patro-list-" + floorId).append('<li class="patro-point" draggable="true" id="patrol-point-' + newP['patrolPointId'] + '" ondragstart="drag(event)" data-obj=' + patrolPointStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + (newP["name"] ? newP["name"] : newP["patrolPoint"].name) + '</li>');
|
||||
// }
|
||||
// getRecordRoutePoints(floorId,patrolRecordId,configOptions);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
/****************拖拽功能模块(开始)****************/
|
||||
function Drag(element,elementData, pl){
|
||||
this.elem = element;
|
||||
this.elementData = elementData;
|
||||
this.pl = pl;
|
||||
var self = this;
|
||||
this.elem.onmousedown = function (e){
|
||||
var e = e || window.event;
|
||||
e.preventDefault();
|
||||
if(e.button === 0) {
|
||||
self.posX = e.clientX - self.elem.offsetLeft;
|
||||
self.posY = e.clientY - self.elem.offsetTop;
|
||||
self.start();
|
||||
document.onmouseup = function (){
|
||||
self.stop();
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
Drag.prototype.start = function (){
|
||||
var self = this;
|
||||
document.onmousemove = function (e){
|
||||
var x = e.clientX - self.posX;
|
||||
var y = e.clientY - self.posY;
|
||||
self.move(x, y);
|
||||
};
|
||||
};
|
||||
Drag.prototype.move = function (x , y){
|
||||
var self = this;
|
||||
self.elem.style.left = x + "px";
|
||||
self.elem.style.top = y + "px";
|
||||
};
|
||||
Drag.prototype.stop = function (e){
|
||||
var self = this;
|
||||
var configOptions = JSON.parse(localStorage.getItem('configOptions'));
|
||||
var points = self.pl.getItems();
|
||||
if(this.elementData && configOptions) {
|
||||
points.forEach(function(item) {
|
||||
if(item.id === self.elementData.id) {
|
||||
item['posX'] = self.elem.offsetLeft;
|
||||
item['posY'] = self.elem.offsetTop;
|
||||
}
|
||||
});
|
||||
points.forEach(function(item) {
|
||||
if (item.id === self.elementData.id) {
|
||||
updateRoutePoint({
|
||||
id: item.routeId,
|
||||
posx: item.posX,
|
||||
posy: item.posY,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight
|
||||
}, function(data) {
|
||||
var floorId = configOptions.floorId;
|
||||
var patrolRecordId = configOptions.patrolRecordId;
|
||||
// var patrolPlanId = configOptions.patrolPlanId;
|
||||
// getRoutePoints(floorId,patrolPlanId,configOptions);
|
||||
getRecordRoutePoints(floorId,patrolRecordId,configOptions);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
/****************拖拽功能模块(结束)****************/
|
||||
|
||||
// 画线函数
|
||||
function drawLine(startPoint, endPoint, lineStyle,configOptions, pl) {
|
||||
var line = document.createElement("div");
|
||||
line.setAttribute("class","patrol-line");
|
||||
line.setAttribute("id","patrol-line-" + endPoint.routeId);
|
||||
var lineWidth = Math.sqrt(Math.pow((endPoint.posX + endPoint.pointStyle.radius + endPoint.pointStyle.borderWidth - startPoint.posX - startPoint.pointStyle.radius - startPoint.pointStyle.borderWidth), 2) + Math.pow((endPoint.posY + endPoint.pointStyle.radius + endPoint.pointStyle.borderWidth - startPoint.posY - startPoint.pointStyle.radius - startPoint.pointStyle.borderWidth), 2));
|
||||
line.style.cssText += ";width: " + lineWidth + "px;position:absolute;left:" + (startPoint.posX + startPoint.pointStyle.radius + startPoint.pointStyle.borderWidth) + "px;top:" + (startPoint.posY + startPoint.pointStyle.radius + startPoint.pointStyle.borderWidth - lineStyle.lineWidth / 2) + "px;border-top: " + lineStyle.lineWidth + "px " + lineStyle.lineStyle + " " + lineStyle.lineColor + ";transform-origin: 0;transform:rotate(" + getAangle(startPoint, endPoint) + "deg);box-shadow:" + lineStyle.shadow + ";z-index:799;";
|
||||
|
||||
if(startPoint.status === '3' && endPoint.status !== '3' || startPoint.status !== '3' && endPoint.status !== '3'){
|
||||
var worker = document.createElement('div');
|
||||
worker.classList.add('fa');
|
||||
worker.classList.add('fa-street-view');
|
||||
worker.style.cssText = 'width:30px;height:30px;background:rgba(0,0,0,0);font-size:25px;text-align:center;color:' + ('red' || lineStyle.lineColor) + ';position:absolute;left:' + (lineWidth / 2) + 'px;top:-31px;animation:worker 1s infinite;';
|
||||
line.style.cssText += 'animation: workingLine 1s infinite;';
|
||||
if(startPoint.isCurrent) {
|
||||
line.appendChild(worker);
|
||||
}
|
||||
}
|
||||
drawPoint(endPoint, configOptions, pl);
|
||||
container.appendChild(line);
|
||||
document.oncontextmenu = function(e) {
|
||||
e.preventDefault();
|
||||
};
|
||||
// line.onmouseover = function(e) {
|
||||
// line.style.borderColor = "#0f0";
|
||||
// e.preventDefault();
|
||||
// }
|
||||
// line.onmouseout = function(e) {
|
||||
// line.style.borderColor = lineStyle.lineColor;
|
||||
// e.preventDefault();
|
||||
// }
|
||||
// line.oncontextmenu = function(e) {
|
||||
// if(e.button === 2){
|
||||
// var newInflectionPoint = {
|
||||
// id: guid(),
|
||||
// type: '1',
|
||||
// patrolPlanId: configOptions.patrolPlanId,
|
||||
// floorId: configOptions.floorId,
|
||||
// containerWidth: configOptions.containerWidth,
|
||||
// containerHeight: configOptions.containerHeight,
|
||||
// infos: {
|
||||
// text: "拐点",
|
||||
// state: 0,
|
||||
// message: "拐"
|
||||
// }
|
||||
// }
|
||||
// newInflectionPoint['patrolPointId'] = newInflectionPoint.id;
|
||||
// newInflectionPoint['routeId'] = guid();
|
||||
// newInflectionPoint['pointStyle'] = deepClone(configOptions.pointsStyle.pointInflectionStyle);
|
||||
// newInflectionPoint['posX'] = e.clientX - $("#container").offset().left - newInflectionPoint.pointStyle.radius - newInflectionPoint.pointStyle.borderWidth;
|
||||
// newInflectionPoint['posY'] = e.clientY - $("#container").offset().top - newInflectionPoint.pointStyle.radius - newInflectionPoint.pointStyle.borderWidth;
|
||||
// if(e.target.id.indexOf("patrol-line-") > -1 && e.target.id !== "container" && !e.target.id.indexOf("patrol-point-") > -1) {
|
||||
// pl.getItems().forEach(function(item, index){
|
||||
// if(e.target.id === "patrol-line-" + item.routeId) {
|
||||
// pl.add(item.index, newInflectionPoint);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// pl.getItems().forEach(function(item, index) {
|
||||
// pl.set(index, item);
|
||||
// });
|
||||
// pl.getItems().forEach(function(item, index) {
|
||||
// if(newInflectionPoint.routeId === item.routeId){
|
||||
// var newPoint = item;
|
||||
// saveRoutePoint({
|
||||
// id: newPoint.routeId,
|
||||
// patrolPlanId: newPoint.patrolPlanId,
|
||||
// previousId: newPoint.prevId,
|
||||
// nextId: newPoint.nextId, //
|
||||
// type: newPoint.type,
|
||||
// patrolPointId: newPoint.id,
|
||||
// posx: newPoint.posX,
|
||||
// posy: newPoint.posY,
|
||||
// containerWidth: configOptions.containerWidth,
|
||||
// containerHeight: configOptions.containerHeight,
|
||||
// floorId: configOptions.floorId
|
||||
// },function(data) {
|
||||
// if(JSON.parse(data).res === '1') {
|
||||
// configOptions.points = deepClone(pl.getItems());
|
||||
// drawAllPath(configOptions);
|
||||
// } else {
|
||||
// pl.remove(item.index);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// e.preventDefault();
|
||||
// };
|
||||
if(endPoint.infos.state > -1) {
|
||||
if(endPoint.type === '0') {
|
||||
if(startPoint.status === '3' && endPoint.status !== '3' || startPoint.status !== '3' && endPoint.status !== '3'){
|
||||
document.styleSheets[0].insertRule('#patrol-line-' + endPoint.routeId + ':before {position: absolute;bottom: -' + lineStyle.lineWidth + 'px;right: -' + lineStyle.lineWidth + 'px;margin-right: ' + (endPoint.pointStyle.radius - endPoint.pointStyle.borderWidth) + 'px;display: block;width: 0;height: 0;content: "";border: ' + 1.5 * lineStyle.lineWidth + 'px solid transparent;border-left: ' + 4 * lineStyle.lineWidth + 'px solid ' + lineStyle.lineColor + ';animation: workingLineArrow 1s infinite;}', 0);
|
||||
} else {
|
||||
document.styleSheets[0].insertRule('#patrol-line-' + endPoint.routeId + ':before {position: absolute;bottom: -' + lineStyle.lineWidth + 'px;right: -' + lineStyle.lineWidth + 'px;margin-right: ' + (endPoint.pointStyle.radius - endPoint.pointStyle.borderWidth) + 'px;display: block;width: 0;height: 0;content: "";border: ' + 1.5 * lineStyle.lineWidth + 'px solid transparent;border-left: ' + 4 * lineStyle.lineWidth + 'px solid ' + lineStyle.lineColor + ';}', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
function getAangle(startP, endP) {
|
||||
var radiusDiff = endP.pointStyle.radius + endP.pointStyle.borderWidth - startP.pointStyle.radius - startP.pointStyle.borderWidth;
|
||||
var x = endP.posX - startP.posX + radiusDiff;
|
||||
var y = endP.posY - startP.posY + radiusDiff;
|
||||
if (x < 0 && y < 0) {// 第一象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) - 180;
|
||||
}
|
||||
// ?
|
||||
if (x < 0 && y > 0) {// 第三象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) + 180;
|
||||
}
|
||||
|
||||
if (x > 0 && y < 0) {// 第一象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
// ?
|
||||
if (x > 0 && y > 0) {// 第三象限
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
|
||||
if (x < 0 && y === 0) {// 鼠标在x轴负方向
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI) + 180;
|
||||
}
|
||||
|
||||
if (x > 0 && y === 0) {
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
if (x === 0 && y < 0) {
|
||||
return 180 - 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
if (x === 0 && y > 0) {
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
return 360 * Math.atan(y / x) / (2 * Math.PI);
|
||||
}
|
||||
}
|
||||
|
||||
function deepClone(obj) {
|
||||
var str, newobj = obj.constructor === Array ? [] : {};
|
||||
if (typeof obj !== 'object') {
|
||||
return;
|
||||
} else if (JSON) {
|
||||
str = JSON.stringify(obj), // 系列化对象
|
||||
newobj = JSON.parse(str); // 还原
|
||||
} else {
|
||||
for (var i in obj) {
|
||||
newobj[i] = typeof obj[i] === 'object' ? this.deepClone(obj[i]) : obj[i];
|
||||
}
|
||||
}
|
||||
return newobj;
|
||||
}
|
||||
|
||||
function getStyle(element, attr) {
|
||||
if(element.currentStyle) {
|
||||
return element.currentStyle[attr];
|
||||
} else {
|
||||
return getComputedStyle(element, false)[attr];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function allowDrop(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
function drag(ev) {
|
||||
var obj = $('#' + ev.target.id).data('obj');
|
||||
ev.dataTransfer.setData("obj",JSON.stringify(obj));
|
||||
ev.dataTransfer.setData("ID",ev.target.id);
|
||||
}
|
||||
|
||||
function drop(ev,configOptions, pl) {
|
||||
ev.stopPropagation();
|
||||
var data = ev.dataTransfer.getData("ID");
|
||||
var pointStr = ev.dataTransfer.getData("obj");
|
||||
var pointObj = JSON.parse(pointStr.replace(" ", "kongbai"));
|
||||
var infos = {
|
||||
text: pointObj['name'] ? pointObj['name']: "巡检点",
|
||||
state: 0,
|
||||
message: pointObj['name'] ? pointObj['name']: "巡检点"
|
||||
};
|
||||
pointObj['routeId'] = guid();
|
||||
pointObj['pointStyle'] = deepClone(configOptions.pointsStyle.pointDefaultStyle);
|
||||
pointObj['patrolPlanId'] = configOptions.patrolPlanId;
|
||||
pointObj['patrolPointId'] = pointObj.id;
|
||||
pointObj['type'] = '0';
|
||||
pointObj['infos'] = infos;
|
||||
// 拖拽到点上
|
||||
if(ev.target.id === 'container' && !ev.target.id.indexOf("patrol-line-") > -1 && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pointObj['prevId'] = null;
|
||||
pointObj['nextId'] = null;
|
||||
pointObj['posX'] = ev.offsetX - pointObj['pointStyle'].radius - pointObj['pointStyle'].borderWidth;
|
||||
pointObj['posY'] = ev.offsetY - pointObj['pointStyle'].radius - pointObj['pointStyle'].borderWidth;
|
||||
} else if(ev.target.id.indexOf('patrol-line-') > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pointObj['prevId'] = null;
|
||||
pointObj['nextId'] = null;
|
||||
pointObj['posX'] = ev.clientX - $("#container").offset().left - pointObj.pointStyle.radius - pointObj.pointStyle.borderWidth;
|
||||
pointObj['posY'] = ev.clientY - $("#container").offset().top - pointObj.pointStyle.radius - pointObj.pointStyle.borderWidth;
|
||||
} else if(ev.target.id.indexOf('patrol-point-') > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-line-") > -1) {
|
||||
pointObj['prevId'] = null;
|
||||
pointObj['nextId'] = null;
|
||||
pointObj['posX'] = document.getElementById(ev.target.id).offsetLeft + pointObj['pointStyle'].radius + pointObj['pointStyle'].borderWidth;
|
||||
pointObj['posY'] = document.getElementById(ev.target.id).offsetTop + pointObj['pointStyle'].radius + pointObj['pointStyle'].borderWidth;
|
||||
} else {
|
||||
|
||||
}
|
||||
if(pl.getItems().length === 0) {
|
||||
pl.addFirst(pointObj);
|
||||
} else {
|
||||
if(ev.target.id === "container" && !ev.target.id.indexOf("patrol-line-") > -1 && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pl.addLast(pointObj);
|
||||
} else if(ev.target.id.indexOf("patrol-line-") > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-point-") > -1) {
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(ev.target.id === "patrol-line-" + item.routeId) {
|
||||
pl.add(item.index, pointObj);
|
||||
}
|
||||
});
|
||||
} else if(ev.target.id.indexOf("patrol-point-") > -1 && ev.target.id !== "container" && !ev.target.id.indexOf("patrol-line-") > -1) {
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(ev.target.id === "patrol-point-" + item.routeId) {
|
||||
pl.add(item.index + 1, pointObj);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
pl.set(index, item);
|
||||
});
|
||||
pl.getItems().forEach(function(item, index) {
|
||||
if(pointObj.routeId === item.routeId){
|
||||
var newPoint = item;
|
||||
saveRoutePoint({
|
||||
id: newPoint.routeId,
|
||||
patrolPlanId: newPoint.patrolPlanId,
|
||||
previousId: newPoint.prevId,
|
||||
nextId: newPoint.nextId,
|
||||
type: newPoint.type,
|
||||
patrolPointId: newPoint.id,
|
||||
posx: newPoint.posX,
|
||||
posy: newPoint.posY,
|
||||
containerWidth: configOptions.containerWidth,
|
||||
containerHeight: configOptions.containerHeight,
|
||||
structureCardPictureId: configOptions.floorId
|
||||
},function(data) {
|
||||
if(JSON.parse(data).res === '1') {
|
||||
configOptions.points = deepClone(pl.getItems());
|
||||
drawAllPath(configOptions);
|
||||
$("#patrol-point-" + pointObj.id).remove();
|
||||
} else {
|
||||
pl.remove(item.index);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
// 获取楼层信息
|
||||
function getAllFloorList(unitId,callback) {
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolArea/getAllFloorList.do', {unitId:unitId} , function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检点数据
|
||||
function getPatrolPointsList(configOptions, patrolPointInContainer) {
|
||||
$("#patro-list-" + configOptions.floorId).html("");
|
||||
var configOptions = JSON.parse(localStorage.getItem("configOptions"));
|
||||
var patrolPointInContainer = deepClone(configOptions.points.filter(function(item) {return item['type'] === '0';}));
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolArea/getPatrolPoints.do', {patrolAreaId:configOptions.patrolAreaId} , function(data) {
|
||||
var patrolPointItem = "";
|
||||
JSON.parse(data).forEach(function(item) {
|
||||
var itemStr = JSON.stringify(replaceJsonWhiteSpace(item));
|
||||
patrolPointItem += '<li class="patro-point" draggable="true" id="patrol-point-' + item['id'] + '" ondragstart="drag(event)" data-obj=' + itemStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + item['name'] + '</li>';
|
||||
});
|
||||
$("#patro-list-" + configOptions.floorId).html(patrolPointItem);
|
||||
patrolPointInContainer.forEach(function(point) {
|
||||
$("#patrol-point-" + point.patrolPointId).remove();
|
||||
});
|
||||
$("#patrol-point-container").show();
|
||||
});
|
||||
}
|
||||
|
||||
function getPatrolPointsList1(configOptions) {
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolArea/getPatrolPoints.do', {patrolAreaId:configOptions.patrolAreaId} , function(data) {
|
||||
$("#patro-list-" + configOptions.floorId).html("");
|
||||
JSON.parse(data).forEach(function(item) {
|
||||
var itemStr = JSON.stringify(replaceJsonWhiteSpace(item));
|
||||
var patrolPointItem = '<li class="patro-point" draggable="true" id="patrol-point-' + item['id'] + '" ondragstart="drag(event)" data-obj=' + itemStr + ' style="font-size:14px;list-style:none;padding: 10px;height:20px;line-height:20px;cursor: move;">' + item['name'] + '</li>';
|
||||
$("#patro-list-" + configOptions.floorId).append(patrolPointItem);
|
||||
});
|
||||
$("#patrol-point-container").show();
|
||||
});
|
||||
}
|
||||
|
||||
// 首次获取巡检路径点信息(巡检记录)
|
||||
function getRoutePointsFirst(floorId,patrolRecordId,callback) {
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/getRoutePoints.do?patrolRecordId=' + patrolRecordId + '&floorId=' + floorId, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检路径点信息(巡检记录)
|
||||
function getRecordRoutePoints(floorId,patrolRecordId,configOptions) {
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/getRoutePoints.do?patrolRecordId=' + patrolRecordId + '&floorId=' + floorId, function(data) {
|
||||
var copyPoints = JSON.parse(data);
|
||||
copyPoints.forEach(function(item,index) {
|
||||
var insdt1 = item['insdt'].replace(' ', 'kongbai');
|
||||
var infos = {
|
||||
text: "新",
|
||||
state: 0,
|
||||
message: "新"
|
||||
};
|
||||
item['routeId'] = item['id'];
|
||||
item['insdt'] = insdt1;
|
||||
item['infos'] = infos;
|
||||
item['posX'] = item['posx'];
|
||||
item['posY'] = item['posy'];
|
||||
});
|
||||
configOptions.points = copyPoints;
|
||||
drawAllPath(configOptions);
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检点信息
|
||||
function getPatrolRecord(patrolRecordId){
|
||||
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/getPatrolPoint4APP.do',{id:patrolRecordId},function(data){
|
||||
console.log(data);
|
||||
});
|
||||
}
|
||||
|
||||
function drawAllPath(configOptions) {
|
||||
drawPath(configOptions);
|
||||
localStorage.setItem("configOptions", JSON.stringify(configOptions));
|
||||
$("#patrol-point-container").show();
|
||||
}
|
||||
|
||||
function saveRoutePoint(param, callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/saveRoutePoint.do', param, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRoutePoint(param, callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/updateRoutePoint.do', param, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteRoutePoint(point,callback) {
|
||||
$.post(ext.contextPath + '/structure/structureCardPicture/deleteRoutePoint.do?id=' + point.routeId + '&previousId=' + point.prevId + '&nextId=' + point.nextId, function(data) {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
function replaceJsonWhiteSpace(jsonObj) {
|
||||
for(var key in jsonObj) {
|
||||
//如果对象类型为object类型且数组长度大于0 或者 是对象 ，继续递归解析
|
||||
var element = jsonObj[key];
|
||||
if(typeof element === 'string') {
|
||||
jsonObj[key] = element.replace(" ", "kongbai");
|
||||
}
|
||||
if(element && element.length > 0 && typeof(element) == "object" || typeof(element) == "object") {
|
||||
replaceJsonWhiteSpace(element);
|
||||
} else { //不是对象或数组、直接输出
|
||||
// console.log("----eles --> " + key + ":" + element + " ");
|
||||
}
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
//生成唯一路径点ID
|
||||
function S4() {
|
||||
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
|
||||
}
|
||||
function guid() {
|
||||
return (S4()+S4()+""+S4()+""+S4()+""+S4()+""+S4()+S4()+S4());
|
||||
}
|
||||
Reference in New Issue
Block a user