333 lines
15 KiB
Plaintext
333 lines
15 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|||
|
|
<!-- bootstrap switch -->
|
|||
|
|
<link rel="stylesheet"
|
|||
|
|
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
|||
|
|
<style type="text/css">
|
|||
|
|
#container {
|
|||
|
|
font: 62.5%/1 "楷体", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
|||
|
|
background-color: hsl(200, 5%, 15%);
|
|||
|
|
background-size: 8px 8px;
|
|||
|
|
background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 0%, 0) 0px,
|
|||
|
|
hsla(0, 0%, 0%, .10) 50%,
|
|||
|
|
hsla(0, 0%, 0%, 0) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.has_active {
|
|||
|
|
background: #aaa;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/timeefficiency/LinkList.js"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/timeefficiency/path.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(function () {
|
|||
|
|
var modal = document.querySelector(".modal-content");
|
|||
|
|
var modalWidth = getStyle(modal, 'width');
|
|||
|
|
var unitId = '${patrolPlan.unitId}';
|
|||
|
|
var patroPlanId = '${patrolPlan.id}';
|
|||
|
|
localStorage.removeItem("configOptions");
|
|||
|
|
getAllFloorList(unitId, function (floors) {
|
|||
|
|
JSON.parse(floors).forEach(function (item, index) {
|
|||
|
|
if (localStorage.getItem('configOptions')) {
|
|||
|
|
if (item.id === JSON.parse(localStorage.getItem('configOptions')).floorId) {
|
|||
|
|
var selectedIndex = index;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
var selectedIndex = 0;
|
|||
|
|
}
|
|||
|
|
var floorHtml = $('<li id="' + item.id + '" class="' +
|
|||
|
|
(index === selectedIndex ? 'has_active' : '')
|
|||
|
|
+ '" style="list-style:none;padding:5px;cursor:pointer;border-radius:5px;">' + item.name + '</li>');
|
|||
|
|
$('#flool-list').append(floorHtml);
|
|||
|
|
if (selectedIndex === index) {
|
|||
|
|
changeFloor(item.id, unitId);
|
|||
|
|
}
|
|||
|
|
$("#" + item.id).on("click", function () {
|
|||
|
|
if ($(this).hasClass("has_active")) {
|
|||
|
|
localStorage.removeItem("configOptions");
|
|||
|
|
var floorId = item.id;
|
|||
|
|
changeFloor(floorId, unitId);
|
|||
|
|
localStorage.removeItem("configOptions");
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
$(".has_active").removeClass("has_active");
|
|||
|
|
$(this).addClass("has_active");
|
|||
|
|
localStorage.removeItem("configOptions");
|
|||
|
|
var floorId = item.id;
|
|||
|
|
changeFloor(floorId, unitId);
|
|||
|
|
localStorage.removeItem("configOptions");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
$("#patrol-point-list").on("click", function () {
|
|||
|
|
$("#patrol-point-container").toggle();
|
|||
|
|
});
|
|||
|
|
$("#floor-list-btn").on("click", function () {
|
|||
|
|
$("#floor-list-container").toggle();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function changeFloor(floorId, unitId) {
|
|||
|
|
//console.log(floorId)
|
|||
|
|
// console.log(unitId)
|
|||
|
|
getBgImg(floorId);
|
|||
|
|
$("#patrol-point-container").html('<ul id="patro-list-' + floorId + '" style="padding: 0;"></ul>');
|
|||
|
|
getRoutePointsFirst(floorId, '${patrolPlan.id}', function (data1) {
|
|||
|
|
var data = deepClone(JSON.parse(data1).rows);
|
|||
|
|
data.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 (localStorage.getItem("configOptions") === null) {
|
|||
|
|
var heightstr = 700;
|
|||
|
|
if (floorId == 'acee444c90814a7a99287cbe0ebb36b3') {//厂外
|
|||
|
|
heightstr = 2700;
|
|||
|
|
} else {
|
|||
|
|
heightstr = 700;
|
|||
|
|
}
|
|||
|
|
var configOptions = {
|
|||
|
|
container: 'container', //容器id
|
|||
|
|
containerWidth: 1150, //容器宽度
|
|||
|
|
containerHeight: heightstr, //容器高度
|
|||
|
|
// containerBgColor: '#fcc', //容器背景颜色
|
|||
|
|
draggable: true, // 点是否可拖拽
|
|||
|
|
//patrolAreaId: patrolAreaId,
|
|||
|
|
patrolPlanId: '${patrolPlan.id}',
|
|||
|
|
floorId: floorId,
|
|||
|
|
type: 'P',
|
|||
|
|
unitId: unitId,
|
|||
|
|
pointsStyle: {
|
|||
|
|
pointInflectionStyle: { // 拐点样式配置项
|
|||
|
|
radius: 10,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: '#ddd',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
// fontSize: 10,
|
|||
|
|
// fontColor: '#ddd',
|
|||
|
|
// shadow: '1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f'
|
|||
|
|
},
|
|||
|
|
pointDefaultStyle: {
|
|||
|
|
radius: 10,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: '#ddd',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontColor: '#ddd',
|
|||
|
|
// shadow: '1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f'
|
|||
|
|
},
|
|||
|
|
pointCompleteStyle: {
|
|||
|
|
radius: 30,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: '#93c913',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontColor: '#93c913',
|
|||
|
|
shadow: '0 0 24px rgba(147, 201, 19, 0.6)'
|
|||
|
|
},
|
|||
|
|
pointAbnormalStyle: {
|
|||
|
|
radius: 30,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: '#daa520',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontColor: '#daa520',
|
|||
|
|
shadow: '0 0 24px rgba(218,165,32, 0.6)'
|
|||
|
|
},
|
|||
|
|
pointAlarmStyle: {
|
|||
|
|
radius: 30,
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: '#ff4847',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
fontSize: 40,
|
|||
|
|
fontColor: '#ff4847',
|
|||
|
|
shadow: '0 0 24px rgba(255, 72, 71, 0.6)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
linesStyle: {
|
|||
|
|
lineDefaultStyle: {
|
|||
|
|
lineWidth: 4,
|
|||
|
|
lineColor: '#ddd',
|
|||
|
|
lineStyle: 'dashed',
|
|||
|
|
arrowPosition: 23
|
|||
|
|
},
|
|||
|
|
lineCompleteStyle: {
|
|||
|
|
lineWidth: 2,
|
|||
|
|
lineColor: '#93c913',
|
|||
|
|
lineStyle: 'solid',
|
|||
|
|
shadow: '0 0 24px rgba(147, 201, 19, 0.6)',
|
|||
|
|
arrowPosition: 23
|
|||
|
|
},
|
|||
|
|
lineAbnormalStyle: {
|
|||
|
|
lineWidth: 2,
|
|||
|
|
lineColor: '#daa520',
|
|||
|
|
lineStyle: 'dashed',
|
|||
|
|
shadow: '0 0 24px rgba(218,165,32, 0.6)',
|
|||
|
|
arrowPosition: 23
|
|||
|
|
},
|
|||
|
|
lineAlarmStyle: {
|
|||
|
|
lineWidth: 2,
|
|||
|
|
lineColor: '#ff4847',
|
|||
|
|
lineStyle: 'dashed',
|
|||
|
|
shadow: '0 0 24px rgba(255, 72, 71, 0.6)',
|
|||
|
|
arrowPosition: 23
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
points: deepClone(data)
|
|||
|
|
};
|
|||
|
|
localStorage.setItem("configOptions", JSON.stringify(configOptions));
|
|||
|
|
setContainer(configOptions);
|
|||
|
|
var configOptions = JSON.parse(localStorage.getItem("configOptions"));
|
|||
|
|
var patrolPointInContainer = configOptions.points.filter(function (item) {
|
|||
|
|
return item['type'] === '0';
|
|||
|
|
});
|
|||
|
|
//console.log(patrolPointInContainer);
|
|||
|
|
if (patrolPointInContainer.length === 0) {
|
|||
|
|
getPatrolPointsList1(configOptions);
|
|||
|
|
} else {
|
|||
|
|
getPatrolPointsList(configOptions);
|
|||
|
|
}
|
|||
|
|
drawPath(configOptions);
|
|||
|
|
} else {
|
|||
|
|
var configOptions = JSON.parse(localStorage.getItem("configOptions"));
|
|||
|
|
configOptions.points === data ? deepClone(data) : [];
|
|||
|
|
configOptions.floorId = floorId;
|
|||
|
|
localStorage.setItem("configOptions", JSON.stringify(configOptions));
|
|||
|
|
setContainer(configOptions);
|
|||
|
|
var configOptions = JSON.parse(localStorage.getItem("configOptions"));
|
|||
|
|
var patrolPointInContainer = configOptions.points.filter(function (item) {
|
|||
|
|
return item['type'] === '0';
|
|||
|
|
});
|
|||
|
|
if (patrolPointInContainer.length === 0) {
|
|||
|
|
getPatrolPointsList1(configOptions);
|
|||
|
|
} else {
|
|||
|
|
getPatrolPointsList(configOptions);
|
|||
|
|
}
|
|||
|
|
drawPath(configOptions);
|
|||
|
|
}
|
|||
|
|
;
|
|||
|
|
});
|
|||
|
|
$("#patrol-point-container").show();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取楼层背景底图
|
|||
|
|
function getBgImg(floorId) {
|
|||
|
|
// 数据表名
|
|||
|
|
$("#container").css("background", "");
|
|||
|
|
var tbName = 'TB_TimeEfficiency_PatrolArea_Floor_file';
|
|||
|
|
// $.post(ext.contextPath + '/base/getInputFileList.do', {
|
|||
|
|
$.post(ext.contextPath + '/base/getInputFileList_minio.do', {
|
|||
|
|
masterId: floorId,
|
|||
|
|
tbName: tbName,
|
|||
|
|
bucketName: 'patrolfloor'
|
|||
|
|
}, function (data) {
|
|||
|
|
if (JSON.parse(data).length > 0) {
|
|||
|
|
for (var i = 0; i < 1; i++) {
|
|||
|
|
var str = $.parseJSON(data);
|
|||
|
|
var path = str[i].abspath;
|
|||
|
|
var filename = str[i].filename;
|
|||
|
|
/*if (filename.indexOf("厂外") != -1) {
|
|||
|
|
if (path) {
|
|||
|
|
$("#container").css({
|
|||
|
|
"background-color": "hsl(200,5%,15%)",
|
|||
|
|
"background-image": "url(" + path + ")",
|
|||
|
|
"background-repeat": "no-repeat",
|
|||
|
|
"background-size": "90% 90%"
|
|||
|
|
});
|
|||
|
|
var img = $(this);
|
|||
|
|
$("<img/>").attr("src", $(img).attr("src")).load(function () {
|
|||
|
|
//console.log("图片的宽度为:"+this.width);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (path) {
|
|||
|
|
$("#container").css({
|
|||
|
|
"background-color": "hsl(200,5%,15%)",
|
|||
|
|
"background-image": "url(" + path + ")",
|
|||
|
|
"background-repeat": "no-repeat",
|
|||
|
|
"background-size": "contain"
|
|||
|
|
});
|
|||
|
|
var img = $(this);
|
|||
|
|
$("<img/>").attr("src", $(img).attr("src")).load(function () {
|
|||
|
|
//console.log("图片的宽度为:"+this.width);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}*/
|
|||
|
|
if (path) {
|
|||
|
|
$("#container").css({
|
|||
|
|
"background-color": "hsl(200,5%,15%)",
|
|||
|
|
"background-image": "url(" + path + ")",
|
|||
|
|
"background-repeat": "no-repeat",
|
|||
|
|
"background-size": "contain"
|
|||
|
|
});
|
|||
|
|
var img = $(this);
|
|||
|
|
$("<img/>").attr("src", $(img).attr("src")).load(function () {
|
|||
|
|
//console.log("图片的宽度为:"+this.width);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// $("#modalId").unbind("mousedown").bind("mousedown", function (e) {
|
|||
|
|
// if (event.which == 3) {
|
|||
|
|
// alert("click right！");
|
|||
|
|
// }
|
|||
|
|
// e.preventDefault();
|
|||
|
|
// });
|
|||
|
|
// $("#modalId").unbind("mousedown").bind("contextmenu", function (e) {
|
|||
|
|
// e.preventDefault();
|
|||
|
|
// return false;
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<div class="modal fade" id="subModal">
|
|||
|
|
<div class="modal-dialog modal-xlg" style="width: 1150px" id="modalId">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<input name="id" type="hidden" value="${patrolArea.id}"/>
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|||
|
|
<span aria-hidden="true">×</span></button>
|
|||
|
|
<h4 class="modal-title">巡检路线</h4>
|
|||
|
|
<div style="position: fixed; right: 150px;top: 12px;">
|
|||
|
|
<!-- <button class="btn btn-warning" id="clearBtn" onclick="clear()">清空</button> -->
|
|||
|
|
<button class="btn btn-success" id="patrol-point-list">巡检点列表</button>
|
|||
|
|
<button class="btn btn-primary" id="floor-list-btn">楼层列表</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="patrol-point-container"
|
|||
|
|
style="position: absolute;top:65px;left:5px;width: auto; height: auto;background: rgba(255,255,255,.8);border-radius: 5px;z-index: 920;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div id="floor-list-container"
|
|||
|
|
style="position: absolute;top:65px;right:5px;width: 35px; height: auto;background: rgba(255,255,255,.8);border-radius: 5px;padding:2px;z-index: 920;">
|
|||
|
|
<ul id="flool-list" style="padding: 0;margin: 0;"></ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body" id="container">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
|||
|
|
<button type="button" class="btn btn-primary" onclick="doupdate()" id="btn_save">保存</button>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.modal-content -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.modal-dialog -->
|
|||
|
|
</div>
|