Skip to content

J
jcy_monitor
Commit f32e6ae3 authored by beilang's avatar beilang
Browse files
Options

修改周浦平面图

parent 71b8bf65
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 485 deletions
src/main/java/com/ces/web/zp/controller/ZPController.java
View file @ f32e6ae3
......@@ -30,9 +30,9 @@ public class ZPController {
return new ModelAndView("zp/twofloor");
}
@GetMapping("/therefloor")
public ModelAndView therefloorIndex() {
return new ModelAndView("zp/therefloor");
@GetMapping("/threefloor")
public ModelAndView threefloorIndex() {
return new ModelAndView("zp/threefloor");
}
@GetMapping("/hjfloor")
......
src/main/webapp/WEB-INF/views/zp/commonmodel.jsp deleted 100644 → 0
View file @ 71b8bf65
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:include page="../base.jsp"/>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="${ctx}/static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="${ctx}/static/js/rem.js"></script>
<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/js/popper.min.js"></script>
<script src="${ctx}/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/modal.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/common.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('${ctx}/static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
/* background-position-x: center; */
background-size: cover;
}
.padding_box {
padding: 0.12rem 0.7rem
}
</style>
<script>
$(function () {
let buildName = '${buildName}';
//var floorsCameraCounts = [60, 25, 24, 3];
// 摄像头位置的数组
var upperArr = [{
top: '0.4rem',
left: '0.5rem'
}, {
top: '0.4rem',
left: '1.8rem'
}, {
top: '0.2rem',
left: '3.2rem'
}, {
top: '0.2rem',
left: '4.6rem'
}, {
top: '0.2rem',
left: '6rem'
}, {
top: '0.2rem',
left: '7.4rem'
}, {
top: '0.2rem',
left: '8.8rem'
}, {
top: '0.4rem',
left: '10.2rem'
}, {
top: '0.4rem',
left: '11.6rem'
}, {
top: '1.6rem',
left: '0.5rem'
}, {
top: '1.6rem',
left: '1.8rem'
}, {
top: '1.6rem',
left: '3.2rem'
}, {
top: '1.6rem',
left: '4.6rem'
}, {
top: '1.6rem',
left: '6rem'
}, {
top: '1.6rem',
left: '7.4rem'
}, {
top: '1.6rem',
left: '8.8rem'
}, {
top: '1.6rem',
left: '10.2rem'
}, {
top: '1.6rem',
left: '11.6rem'
}, {
top: '2.5rem',
left: '0.5rem'
}, {
top: '2.5rem',
left: '1.8rem'
}, {
top: '2.5rem',
left: '3.2rem'
}, {
top: '2.5rem',
left: '4.6rem'
}, {
top: '2.5rem',
left: '6rem'
}, {
top: '2.5rem',
left: '7.4rem'
}, {
top: '2.5rem',
left: '8.8rem'
}, {
top: '2.5rem',
left: '10.2rem'
}];
var centreArr = [
{
top: '2.5rem',
left: '10.2rem'
},
{
top: '3.2rem',
left: '0.5rem'
}, {
top: '3.2rem',
left: '1.8rem'
}, {
top: '3.2rem',
left: '3.2rem'
}, {
top: '3.2rem',
left: '4.6rem'
}, {
top: '3.2rem',
left: '6rem'
}, {
top: '3.2rem',
left: '7.4rem'
}, {
top: '3.2rem',
left: '8.8rem'
}, {
top: '3.2rem',
left: '10.2rem'
}, {
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.2rem',
left: '2.5rem'
}, {
top: '4.2rem',
left: '4rem'
}, {
top: '4.2rem',
left: '7rem'
}, {
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.9rem',
left: '0.5rem'
}, {
top: '4.9rem',
left: '1.8rem'
}, {
top: '4.9rem',
left: '3.2rem'
}, {
top: '4.9rem',
left: '4.6rem'
}, {
top: '4.9rem',
left: '6rem'
}, {
top: '4.9rem',
left: '7.4rem'
}, {
top: '4.9rem',
left: '8.8rem'
}, {
top: '4.9rem',
left: '10.2rem'
}, {
top: '4.9rem',
left: '11.3rem'
},
]
var belowArr = [
{
top: '6rem',
left: '0.5rem'
}, {
top: '6rem',
left: '1.8rem'
}, {
top: '6rem',
left: '6rem'
}, {
top: '6rem',
left: '4.6rem'
}, {
top: '6rem',
left: '6rem'
}, {
top: '6rem',
left: '7.4rem'
}, {
top: '6rem',
left: '8.8rem'
}, {
top: '6rem',
left: '10.2rem'
}, {
top: '6rem',
left: '11.5rem'
},
{
top: '7rem',
left: '1.8rem'
}, {
top: '7rem',
left: '3.4rem'
}, {
top: '7rem',
left: '10.2rem'
}, {
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
},
{
top: '7rem',
left: '1.8rem'
}, {
top: '7rem',
left: '3.4rem'
}, {
top: '7rem',
left: '10.2rem'
}, {
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
}
];
// 更新摄像头视图的函数
function updateCameras(floor,count) {
// 计算要显示的摄像头数量
//var camerasCount = floorsCameraCounts[index];
var camerasCount = count;
// 获取并更新监控点的数字
//$('.monitor').eq(index).find('span').text(camerasCount);
// 生成一个随机的起始索引
// var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
// 从arr中获取当前楼层的摄像头位置，从随机的起始索引开始
// var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
$.ajax({
type : 'get',
url : "${ctx}/zp/getGbidByBuildNameAndFloor?buildName="+buildName+"&floor="+floor,
dataType : "json",
success : function(result) {
if(result.code=='200'){
var data = result.data;
var selectedCameras = [];
let number = parseInt(camerasCount /3);
upperNmuber = parseInt(number + (camerasCount % 3));
let upperList = myRandom(upperArr, upperNmuber).filter(it=>it).map(it=>it);
let centreList = myRandom(centreArr, number).filter(it => it).map(it => it);
let belowList = myRandom(belowArr, number).filter(it => it).map(it => it);
selectedCameras = [...upperList,...centreList,...belowList];
for (var i=0;i<data.length;i++){
selectedCameras[i].gbId = data[i];
}
// 创建新的HTML内容
var htmlTxt = '<img class="bg_img" src="${ctx}/static/images/commonplan.png" alt="">';
$.each(selectedCameras, function (i, camera) {
htmlTxt += '<img class="camera" src="${ctx}/static/images/camera.png" ' +
'style="top:' + camera.top + ';left:' + camera.left + '" ' +
'onclick="handleClick(\'' + camera.gbId + '\')"></img>';
});
// 更新DOM元素
$('.room_box').html(htmlTxt);
}
}
,error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
function myRandom(arr, length) {
var newArr = []; // 组成的新数组初始化
for (var i = 0; i < length; i++) {
var index = Math.floor(Math.random() * arr.length);
var item = arr[index];
newArr.push(item)
}
return newArr.reverse()
}
// 点击事件绑定到楼层标签
$(".tab_list").on("click", "li", function () {
var $this = $(this);
var index = $this.index();
// 更新显示的楼层数字
$this.addClass('current').siblings().removeClass('current');
// 更新监控点和摄像头
var floor = $(this).find("p").first().html();
var count = $(this).find("span").html();
updateCameras(floor,count);
});
// 页面加载时默认选中第一个楼层
$(".tab_list li").first().click();
});
// 点击摄像头时的处理函数
function handleClick(gbid) {
console.log('Clicked camera', gbid);
VideoPlayer.show(gbid);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box"><a class="menu_name" href="${ctx}/zp">${buildName}</a></div>
<div class="tab_list">
<ul>
<c:forEach items="${floorDeviceCnt}" var="i">
<li class="current">
<div class="flex-box">
<p>${i.floor}</p>
<p class="monitor">监控点<span>${i.count}</span></p>
</div>
</li>
</c:forEach>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment