Skip to content

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

2023-11-30

parent 255d27bd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1103 additions and 515 deletions
src/main/java/com/ces/web/bxj/controller/BxjController.java
View file @ 3b14b277
......@@ -21,4 +21,29 @@ public class BxjController {
public ModelAndView jqoneIndex() {
return new ModelAndView("bxj/jqone");
}
@GetMapping("/jqtwo")
public ModelAndView jqtwoIndex() {
return new ModelAndView("bxj/jqtwo");
}
@GetMapping("/jqthere")
public ModelAndView jqthereIndex() {
return new ModelAndView("bxj/jqthere");
}
@GetMapping("/jqfour")
public ModelAndView jqfourIndex() {
return new ModelAndView("bxj/jqfour");
}
@GetMapping("/jqfive")
public ModelAndView jqfiveIndex() {
return new ModelAndView("bxj/jqfive");
}
@GetMapping("/jqsix")
public ModelAndView jqsixIndex() {
return new ModelAndView("bxj/jqsix");
}
}
src/main/webapp/WEB-INF/views/atlas.jsp
View file @ 3b14b277
......@@ -107,7 +107,7 @@
<shiro:hasRole name="${role_code_bxj}">
<li class="index_04">
<a href="${ctx}/bxj/areaPlanView">
<a href="${ctx}/bxj">
<img src="${ctx}/static/images/model_mc.png"/>
<div class="box_map top">
<div class="box_title">
......
src/main/webapp/WEB-INF/views/bxj/bxj.jsp deleted 100644 → 0
View file @ 255d27bd
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../base.jsp"/>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上海市人民检察院</title>
</head>
<script>
// 监控点数量的数组
var floorsCameraCounts = [];
$(function () {
// 摄像头位置的数组
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(index) {
// 计算要显示的摄像头数量
var camerasCount = floorsCameraCounts[index];
// 获取并更新监控点的数字
$('.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);
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]
// selectedCameras = upperArr
// 创建新的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(' + i + ')"></img>';
});
// 更新DOM元素
$('.room_box').html(htmlTxt);
}
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');
// 更新监控点和摄像头
updateCameras(index);
bxj.getGbId($this.find('p:first').html());
});
// 页面加载时默认选中第一个楼层
$(".tab_list li").first().click();
});
function handleClick(i) {
let gbId = gbIdList[i];
VideoPlayer.show(gbId);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class="padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box"><a class="menu_name" href="${ctx}/bxj/areaPlanView"></a></div>
<div class="tab_list">
<ul></ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
var buildAreaName = '${buildAreaName}';
var gbIdList = [];
var bxjMapper = {
'一监区': ['一楼', '二楼'],
'二监区': ['一楼', '二楼'],
'三监区': ['一楼', '二楼', '三楼'],
'四监区': ['一楼', '二楼', '三楼'],
'五监区': ['一楼', '二楼', '三楼'],
'六监区': ['一楼', '二楼', '三楼'],
'七监区': ['一楼', '二楼', '三楼'],
'卫生所': ['一楼', '二楼'],
};
var bxj = {
getMonitorCount: function(){
$.ajax({
url: ctx + "/bxj/getBuildAreaCount",
data: {'buildAreaName': buildAreaName},
success: function(data){
var html = '';
var floors = bxjMapper[buildAreaName];
if(floors){
for(let i = 0; i < floors.length; i++){
var floor = floors[i];
var count = data[floor];
count = count ? count : 0;
floorsCameraCounts.push(count);
html += '<li><div class="flex-box">';
html += '<p>' + floor + '</p>';
html += '<p class="monitor">监控点<span>' + count + '</span></p>';
html += '</div></li>'
}
$('div.tab_list > ul').html(html);
$('.tab_list li').eq(0).click();
}
}
});
},
getGbId: function(floor){
$.ajax({
url: ctx + "/bxj/getGbId",
data: {'buildAreaName': buildAreaName, 'floor': floor},
success: function(data){
gbIdList = data;
}
});
},
init: function(){
$('.menu_title_box a').html(buildAreaName);
this.getMonitorCount();
}
}
bxj.init();
</script>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/views/bxj/jqfive.jsp 0 → 100644
View file @ 3b14b277
This diff is collapsed.
src/main/webapp/WEB-INF/views/bxj/jqfour.jsp 0 → 100644
View file @ 3b14b277
This diff is collapsed.
src/main/webapp/WEB-INF/views/bxj/jqone.jsp
View file @ 3b14b277
This diff is collapsed.
src/main/webapp/WEB-INF/views/bxj/jqsix.jsp 0 → 100644
View file @ 3b14b277
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>六监区</title>
</head>
<style type="text/css">
.content {
background: url('${ctx}/static/images/bg.jpg') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box"><a class="menu_name" href="${ctx}/bxj">六监区</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>37</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '2.32%',
left: '6.13%',
gbid: ''
},
{
top: '17.25%',
left: '6.13%',
gbid: ''
},
{
top: '41.00%',
left: '6.13%',
gbid: ''
}, {
top: '67.33%',
left: '6.13%',
gbid: ''
},
{
top: '85.57%',
left: '6.13%',
gbid: ''
},
{
top: '6.14%',
left: '21.63%',
gbid: ''
}, {
top: '33.00%',
left: '21.63%',
gbid: ''
}, {
top: '60.70%',
left: '21.63%',
gbid: ''
},
{
top: '15.59%',
left: '36.34%',
gbid: ''
}, {
top: '42.95%',
left: '36.34%',
gbid: ''
}, {
top: '70.32%',
left: '36.34%',
gbid: ''
},
{
top: '75.29%',
left: '48.72%',
gbid: ''
},
{
top: '11.77%',
left: '65.89%',
gbid: ''
}, {
top: '39.14%',
left: '65.89%',
gbid: ''
}, {
top: '66.17%',
left: '65.89%',
gbid: ''
},
{
top: '3.81%',
left: '32.66%',
gbid: ''
}, {
top: '31.38%',
left: '32.66%',
gbid: ''
}, {
top: '58.71%',
left: '32.66%',
gbid: ''
},
{
top: '3.81%',
left: '80.00%',
gbid: ''
}, {
top: '31.38%',
left: '80.00%',
gbid: ''
}, {
top: '58.71%',
left: '80.00%',
gbid: ''
},
{
top: '3.81%',
left: '87.86%',
gbid: ''
},
{
top: '17.41%',
left: '91.75%',
gbid: ''
},
{
top: '37.14%',
left: '96.20%',
gbid: ''
},
{
top: '67.83%',
left: '91.64%',
gbid: ''
},
{
top: '85.74%',
left: '91.64%',
gbid: ''
},
{
top: '94.20%',
left: '23.63%',
gbid: ''
}, {
top: '94.20%',
left: '47.05%',
gbid: ''
}, {
top: '94.20%',
left: '65.55%',
gbid: ''
}
],
'arr2': [
{
top: '6.47%',
left: '6.13%',
gbid: ''
},
{
top: '26.87%',
left: '6.13%',
gbid: ''
},
{
top: '43.62%',
left: '6.13%',
gbid: ''
}, {
top: '67.33%',
left: '6.13%',
gbid: ''
},
{
top: '85.57%',
left: '6.13%',
gbid: ''
},
{
top: '15.59%',
left: '21.63%',
gbid: ''
}, {
top: '33.00%',
left: '21.63%',
gbid: ''
}, {
top: '70.32%',
left: '21.63%',
gbid: ''
},
{
top: '15.59%',
left: '36.34%',
gbid: ''
}, {
top: '42.95%',
left: '36.34%',
gbid: ''
}, {
top: '70.32%',
left: '36.34%',
gbid: ''
},
{
top: '2.32%',
left: '48.72%',
gbid: ''
},
{
top: '11.77%',
left: '61.65%',
gbid: ''
}, {
top: '39.14%',
left: '61.65%',
gbid: ''
}, {
top: '66.17%',
left: '61.65%',
gbid: ''
},
{
top: '11.77%',
left: '75.92%',
gbid: ''
}, {
top: '39.14%',
left: '75.92%',
gbid: ''
}, {
top: '66.17%',
left: '75.92%',
gbid: ''
},
{
top: '3.81%',
left: '16.83%',
gbid: ''
}, {
top: '58.71%',
left: '16.83%',
gbid: ''
},
{
top: '3.81%',
left: '32.66%',
gbid: ''
}, {
top: '31.38%',
left: '32.66%',
gbid: ''
}, {
top: '58.71%',
left: '32.66%',
gbid: ''
},
{
top: '3.65%',
left: '89.41%',
gbid: ''
},
{
top: '17.41%',
left: '91.75%',
gbid: ''
},
{
top: '85.74%',
left: '91.64%',
gbid: ''
},
{
top: '94.20%',
left: '47.05%',
gbid: ''
}
],
}
let thisIndex = 1;
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
console.log(dataList[`arr${"${index}"}`].length)
thisIndex = index;
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/jianqu6_' + index + '.png" alt="">'
for (let i = 0; i < dataList[`arr${"${index}"}`].length; i++) {
htmlTxt = htmlTxt + '<img class="camera" src="${ctx}/static/images/camera.png" ' + ' style="top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left + '" onclick="handleClick(' + i + ')"></img>'
}
divElement.innerHTML = htmlTxt;
}
function handleClick(i) {
let gbId = dataList['arr' + thisIndex][i].gbid;
VideoPlayer.show(gbId);
}
</script>
</body>
</html>
src/main/webapp/WEB-INF/views/bxj/jqthere.jsp 0 → 100644
View file @ 3b14b277
This diff is collapsed.
src/main/webapp/WEB-INF/views/bxj/jqtwo.jsp 0 → 100644
View file @ 3b14b277
This diff is collapsed.
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