Skip to content

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

修改周浦平面图

parent 71b8bf65
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 { ...@@ -30,9 +30,9 @@ public class ZPController {
return new ModelAndView("zp/twofloor"); return new ModelAndView("zp/twofloor");
} }
@GetMapping("/therefloor") @GetMapping("/threefloor")
public ModelAndView therefloorIndex() { public ModelAndView threefloorIndex() {
return new ModelAndView("zp/therefloor"); return new ModelAndView("zp/threefloor");
} }
@GetMapping("/hjfloor") @GetMapping("/hjfloor")
......
src/main/webapp/WEB-INF/views/zp/areaPlan.jsp
View file @ f32e6ae3
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../base.jsp"/> <jsp:include page="../base.jsp"/>
<html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/floorcommon.css"/>
<title>周浦监狱</title> <title>周浦监狱</title>
<script src="${ctx}/static/js/flexible.js"></script> </head>
<link rel="stylesheet" href="${ctx}/static/css/common.css"> <script type="text/javascript">
<style> $(function () {
.area-right{ updateData(1);
background: url(${ctx}/static/images/floor_lp.png) no-repeat; });
height: 23rem;
float: right; function updateData(index) {
background-size: cover; let dataList = {
width: 78%; 'arr1': [
background-size: 100% 100%; {
} top: '3.9rem',
.area-box li { left: '-0.5rem',
cursor: pointer; width: '2.7rem',
height: '1.5rem',
text: '会见楼',
href: '/zp/hjfloor'
}, {
top: '2.6rem',
left: '0rem',
width: '3.8rem',
height: '1.1rem',
text: '三号楼',
href: '/zp/threefloor'
}, {
top: '2.4rem',
left: '5.2rem',
width: '2.2rem',
height: '1.3rem',
text: '二号楼',
href: '/zp/twofloor'
}, {
top: '3.9rem',
left: '3.8rem',
width: '4.5rem',
height: '1.2rem',
text: '一号楼',
href: '/zp/onefloor'
}
]
} }
.area-box li a{ var divElement = document.querySelector('.room_box');
color: #fff; let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/dalou/zhoupu.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${"${index}"}`].length; i++) {
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${"${index}"}`][i].width + ";height:" + dataList[`arr${"${index}"}`][i].height
+ ';top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left
+ ' ' + ' onclick="handleClick(\'' + dataList[`arr${"${index}"}`][i].href + '\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left + '><a>' + dataList[`arr${"${index}"}`][i].text + '</a></div></div></div>';
} }
</style> divElement.innerHTML = htmlTxt;
</head> }
function handleClick(href) {
window.location.href = ctx + href;
}
</script>
<body> <body>
<div class="container"> <div class="content">
<div class="main-area"> <div class="header-area">
<div class="header-area"> <div class="content_top"></div>
<img src="${ctx}/static/images/logo_mc.png"/> </div>
</div> <div class=" padding_box2 clearfix">
<div class="area-content"> <div class="menu_box">
<div class="area-left"> <div class="menu_title_box"><a href="${ctx}/atlas">周浦监狱</a></div>
<div class="title"><a href="${ctx}/atlas">周浦监狱</a></div> <div class="tab_list">
<div class="left-menu"> <ul>
<ul> <li>
<li> <div class="flex-box">
<a href="${ctx}/zp/onefloor"> <a href="${ctx}/zp/onefloor">
<div class="menu-mc"> <p class="tabName">一号楼</p>
<span>一号楼</span> <p class="monitor">监控点<span style="background-color: #ff6363;">55</span></p>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff6363;">60</span>
</div>
</a> </a>
</li> </div>
<li> </li>
<li>
<div class="flex-box">
<a href="${ctx}/zp/twofloor"> <a href="${ctx}/zp/twofloor">
<div class="menu-mc"> <p class="tabName">二号楼</p>
<span>二号楼</span> <p class="monitor">监控点 <span style="background-color: #ffba00;">55</span></p>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #ffba00;">76</span>
</div>
</a> </a>
</li> </div>
<li> </li>
<a href="${ctx}/zp/therefloor"> <li>
<div class="menu-mc"> <div class="flex-box">
<span>三号楼</span> <a href="${ctx}/zp/threefloor">
</div> <p class="tabName">三号楼</p>
<div class="menu-num"> <p class="monitor">监控点 <span style="background-color: #43e04e;">55</span></p>
<span>监控点</span>
<span style="background-color: #43e04e;">96</span>
</div>
</a> </a>
</li> </div>
<li> </li>
<li>
<div class="flex-box">
<a href="${ctx}/zp/hjfloor"> <a href="${ctx}/zp/hjfloor">
<div class="menu-mc"> <p class="tabName">会见楼</p>
<span>会见楼</span> <p class="monitor">监控点 <span style="background-color: #ff6363;">55</span></p>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #2f8fff;">76</span>
</div>
</a> </a>
</li> </div>
</ul> </li>
</div> </ul>
</div> </div>
<div class="area-right"> </div>
<div class="area-box"> <div class="content_box">
<ul> <div class="room_box">
<li class="a_floor">
<a href="${ctx}/zp/onefloor">
<img src="${ctx}/static/images/A_floor.png"/>
<span>一号楼</span>
</a>
</li>
<li class="bg1_floor">
<a href="${ctx}/zp/twofloor">
<img src="${ctx}/static/images/bgq_floor.png"/>
<span>二号楼</span>
</a>
</li>
<li class="b_floor">
<a href="${ctx}/zp/therefloor">
<img src="${ctx}/static/images/B_floor.png"/>
<span>三号楼</span>
</a>
</li>
<li class="g_floor">
<a href="${ctx}/zp/hjfloor">
<img src="${ctx}/static/images/G_floor.png"/>
<span>会见楼</span>
</a>
</li>
<li class="c_floor">
<a href="javascript:;"> <img src="${ctx}/static/images/C_floor_1.png"/></a>
</li>
<li class="e_floor">
<a href="javascript:;"> <img src="${ctx}/static/images/E_floor_1.png"/></a>
</li>
<li class="d_floor">
<a href="javascript:;"> <img src="${ctx}/static/images/D_floor.png"></a>
</li>
<li class="d_floor_index">
<a href="javascript:;"> <img src="${ctx}/static/images/D_floor_1_1.png"></a>
</li>
<li class="f_floor">
<a href="javascript:;"> <img src="${ctx}/static/images/F_floor_1.png"/></a>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file <style>
.flex-box {
display: block;
}
.flex-box a {
display: flex;
padding-left: 20px;
}
.menu_title_box a {
font-size: 0.24rem !important;
position: relative;
z-index: 999;
}
</style>
\ No newline at end of file
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