285 lines
11 KiB
Plaintext
285 lines
11 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/structure/LinkList.js"></script>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/structure/path.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function(){
|
||
|
|
var modal = document.querySelector(".modal-content");
|
||
|
|
var modalWidth = getStyle(modal,'width');
|
||
|
|
var unitId = '${structureCardPicture.unitId}';
|
||
|
|
var structureCardPictureId = '${structureCardPicture.id}';
|
||
|
|
localStorage.removeItem("configOptions");
|
||
|
|
getAllFloorList(structureCardPictureId,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, '${structureCardPicture.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 configOptions = {
|
||
|
|
container: 'container', //容器id
|
||
|
|
containerWidth: 2048, //容器宽度
|
||
|
|
containerHeight: 1024, //容器高度
|
||
|
|
// containerBgColor: '#fcc', //容器背景颜色
|
||
|
|
draggable: true, // 点是否可拖拽
|
||
|
|
//patrolAreaId: patrolAreaId,
|
||
|
|
structureCardPictureId: '${structureCardPicture.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_EM_StructureCard_picture_file';
|
||
|
|
$.post(ext.contextPath + '/base/getInputFileList.do', {
|
||
|
|
masterId: floorId,
|
||
|
|
tbName: tbName
|
||
|
|
} , function(data){
|
||
|
|
if(JSON.parse(data).length > 0) {
|
||
|
|
var path = JSON.parse(data)[0].abspath;
|
||
|
|
// var fileName = JSON.parse(data)[0].filename;
|
||
|
|
if(path) {
|
||
|
|
path = path.substring(path.indexOf('webapps') + 7,path.length);
|
||
|
|
path = ext.basePath.replace(ext.contextPath,'') + path.replace(/\\/g,"\/");
|
||
|
|
console.log(path);
|
||
|
|
console.log(decodeURIComponent(path));
|
||
|
|
// $("#container").css("background", "url(" + path + ") no-repeat");
|
||
|
|
// $("#container").css("background-size", "cover");
|
||
|
|
$("#container").css({
|
||
|
|
//"background-color": "hsl(200,5%,15%)",
|
||
|
|
// "background-color": "rgb(255, 255, 255)",
|
||
|
|
// "background-image": "url(" + path + ")",
|
||
|
|
// "background-repeat": "no-repeat",
|
||
|
|
// "background-size": "contain",
|
||
|
|
// "background-position":"center"
|
||
|
|
"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" style="overflow: auto;">
|
||
|
|
<div class="modal-dialog modal-xlg" style="width: 2048px;">
|
||
|
|
<div class="modal-content" >
|
||
|
|
<input name="id" type="hidden" value="${structureCardPicture.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>
|