369 lines
14 KiB
Plaintext
369 lines
14 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 {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes alarm {
|
||
|
|
0% {
|
||
|
|
background: orange;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background: orange;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes alarm-arrow {
|
||
|
|
0% {
|
||
|
|
border-top-color: orange;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
border-top-color: red;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
border-top-color: orange;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes alarm-color {
|
||
|
|
0% {
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes worker {
|
||
|
|
0% {
|
||
|
|
color: red;
|
||
|
|
transform: rotateY(0deg);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
color: rgba(0, 0, 0, 0);
|
||
|
|
transform: rotateY(180deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
color: red;
|
||
|
|
transform: rotateY(0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes workingLine {
|
||
|
|
0% {
|
||
|
|
border-top-color: #ddd;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
border-top-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
border-top-color: #ddd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes workingLineArrow {
|
||
|
|
0% {
|
||
|
|
border-left-color: #ddd;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
border-left-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
border-left-color: #ddd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pointInflection {
|
||
|
|
0% {
|
||
|
|
background-color: #ddd;
|
||
|
|
border-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
border-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background-color: #ddd;
|
||
|
|
border-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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/recordLinkList.js"></script>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/timeefficiency/recordPath.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
var modal = document.querySelector(".modal-content");
|
||
|
|
var modalWidth = getStyle(modal, 'width');
|
||
|
|
var unitId = '${patrolRecord.unitId}';
|
||
|
|
var patrolRecordId = '${patrolRecord.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, patrolRecordId);
|
||
|
|
}
|
||
|
|
$("#" + item.id).on("click", function () {
|
||
|
|
if ($(this).hasClass("has_active")) {
|
||
|
|
localStorage.removeItem("configOptions");
|
||
|
|
var floorId = item.id;
|
||
|
|
changeFloor(floorId, unitId, patrolRecordId);
|
||
|
|
localStorage.removeItem("configOptions");
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
$(".has_active").removeClass("has_active");
|
||
|
|
$(this).addClass("has_active");
|
||
|
|
localStorage.removeItem("configOptions");
|
||
|
|
var floorId = item.id;
|
||
|
|
changeFloor(floorId, unitId, patrolRecordId);
|
||
|
|
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, patrolRecordId) {
|
||
|
|
getBgImg(floorId);
|
||
|
|
$("#patrol-point-container").html('<ul id="patro-list-' + floorId + '" style="padding: 0;"></ul>');
|
||
|
|
getRoutePointsFirst(floorId, patrolRecordId, function (data1) {
|
||
|
|
var data = deepClone(JSON.parse(data1));
|
||
|
|
getPatrolRecord(patrolRecordId);
|
||
|
|
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: false, // 点是否可拖拽
|
||
|
|
unitId: unitId,
|
||
|
|
patrolRecordId: patrolRecordId,
|
||
|
|
floorId: floorId,
|
||
|
|
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: 10,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: '#34bf3d',
|
||
|
|
borderStyle: 'solid',
|
||
|
|
fontSize: 40,
|
||
|
|
fontColor: '#93c913',
|
||
|
|
shadow: '0 0 24px rgba(147, 201, 19, 0.6)'
|
||
|
|
},
|
||
|
|
pointAbnormalStyle: {
|
||
|
|
radius: 10,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: '#daa520',
|
||
|
|
borderStyle: 'solid',
|
||
|
|
fontSize: 40,
|
||
|
|
fontColor: '#daa520',
|
||
|
|
shadow: '0 0 24px rgba(218,165,32, 0.6)'
|
||
|
|
},
|
||
|
|
pointAlarmStyle: {
|
||
|
|
radius: 10,
|
||
|
|
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: 4,
|
||
|
|
lineColor: '#34bf3d',
|
||
|
|
lineStyle: 'solid',
|
||
|
|
shadow: '0 0 24px rgba(147, 201, 19, 0.6)',
|
||
|
|
arrowPosition: 23
|
||
|
|
},
|
||
|
|
lineAbnormalStyle: {
|
||
|
|
lineWidth: 4,
|
||
|
|
lineColor: '#daa520',
|
||
|
|
lineStyle: 'solid',
|
||
|
|
shadow: '0 0 24px rgba(218,165,32, 0.6)',
|
||
|
|
arrowPosition: 23
|
||
|
|
},
|
||
|
|
lineAlarmStyle: {
|
||
|
|
lineWidth: 4,
|
||
|
|
lineColor: '#ff4847',
|
||
|
|
lineStyle: 'solid',
|
||
|
|
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';});
|
||
|
|
//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_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;
|
||
|
|
if (path) {
|
||
|
|
$("#container").css({
|
||
|
|
"background-color": "hsl(200,5%,15%)",
|
||
|
|
"background-image": "url(" + path + ")",
|
||
|
|
"background-repeat": "no-repeat",
|
||
|
|
"background-size": "cover"
|
||
|
|
});
|
||
|
|
var img = $(this);
|
||
|
|
$("<img/>").attr("src", $(img).attr("src")).load(function () {
|
||
|
|
//console.log("图片的宽度为:"+this.width);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<div class="modal fade" id="subModal_recordDetail">
|
||
|
|
<div class="modal-dialog modal-xlg" style="width: 1150px">
|
||
|
|
<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>
|
||
|
|
<button class="btn btn-primary" id="floor-list-btn" style="float: right;">楼层列表</button>
|
||
|
|
</div>
|
||
|
|
<div id="patrol-point-container"
|
||
|
|
style="position: absolute;top:100px;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:100px;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>
|
||
|
|
</div>
|
||
|
|
</div>
|