Skip to content

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

2023-12-06

parent 1c978a35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 613 additions and 493 deletions
pom.xml
View file @ 2232d933
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
<groupId>org.projectlombok</groupId> <groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId> <artifactId>lombok</artifactId>
<version>1.18.30</version> <version>1.18.30</version>
<scope>provided</scope>
</dependency> </dependency>
<dependency> <dependency>
......
src/main/java/com/ces/web/nh/controller/NhController.java
View file @ 2232d933
package com.ces.web.nh.controller; package com.ces.web.nh.controller;
import com.ces.common.constant.Constant; import com.ces.common.constant.Constant;
import com.ces.web.nh.service.INhDeviceService;
import org.apache.shiro.authz.annotation.RequiresRoles; import org.apache.shiro.authz.annotation.RequiresRoles;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.ModelAndView;
import java.util.List;
import java.util.Map;
@RestController @RestController
@RequestMapping("/nh") @RequestMapping("/nh")
@RequiresRoles({Constant.RoleCode.NH})
public class NhController { public class NhController {
@Autowired @GetMapping
private INhDeviceService nhDeviceService;
private final String prisonName = "沪-南";
@GetMapping("areaPlanView")
@RequiresRoles({Constant.RoleCode.NH})
public ModelAndView nhAreaPlanView () { public ModelAndView nhAreaPlanView () {
return new ModelAndView("nh/nhAreaPlan"); return new ModelAndView("nh/nhAreaPlan");
} }
@GetMapping @GetMapping("/onefloor")
@RequiresRoles({Constant.RoleCode.NH}) public ModelAndView onefloorIndex () {
public ModelAndView nhView (String buildAreaName) { return new ModelAndView("nh/onefloor");
ModelAndView modelAndView = new ModelAndView("nh/nh");
modelAndView.addObject("buildAreaName", buildAreaName);
return modelAndView;
}
@GetMapping("getBuildAreaAllCount")
@RequiresRoles({Constant.RoleCode.NH})
public Map<String, String> getBuildAreaAllCount () {
return nhDeviceService.getBuildAreaAllCount(prisonName);
}
@GetMapping("getBuildAreaCount")
@RequiresRoles({Constant.RoleCode.NH})
public Map<String, String> getBuildAreaCount (String buildAreaName) {
return nhDeviceService.getBuildAreaCount(prisonName, buildAreaName);
} }
@GetMapping("getGbId") @GetMapping("/twofloor")
@RequiresRoles({Constant.RoleCode.NH}) public ModelAndView twofloorIndex () {
public List<String> getGbId (String buildAreaName, String floor) { return new ModelAndView("nh/twofloor");
return nhDeviceService.getGbId(prisonName, buildAreaName, floor);
} }
} }
src/main/java/com/ces/web/wjc/controller/WJCController.java
View file @ 2232d933
...@@ -25,6 +25,11 @@ public class WJCController { ...@@ -25,6 +25,11 @@ public class WJCController {
return new ModelAndView("wjc/east"); return new ModelAndView("wjc/east");
} }
@GetMapping("/south")
public ModelAndView southIndex() {
return new ModelAndView("wjc/south");
}
@GetMapping("/north") @GetMapping("/north")
public ModelAndView northIndex() { public ModelAndView northIndex() {
return new ModelAndView("wjc/north"); return new ModelAndView("wjc/north");
...@@ -39,4 +44,19 @@ public class WJCController { ...@@ -39,4 +44,19 @@ public class WJCController {
public ModelAndView dxylIndex() { public ModelAndView dxylIndex() {
return new ModelAndView("wjc/dxyl"); return new ModelAndView("wjc/dxyl");
} }
@GetMapping("/xxyl")
public ModelAndView xxylIndex() {
return new ModelAndView("wjc/xxyl");
}
@GetMapping("/njxl")
public ModelAndView njxlIndex() {
return new ModelAndView("wjc/njxl");
}
@GetMapping("/bjxl")
public ModelAndView bjxlIndex() {
return new ModelAndView("wjc/bjxl");
}
} }
src/main/webapp/WEB-INF/views/atlas.jsp
View file @ 2232d933
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
<shiro:hasRole name="${role_code_nh}"> <shiro:hasRole name="${role_code_nh}">
<li class="index_10"> <li class="index_10">
<a href="${ctx}/nh/areaPlanView"> <a href="${ctx}/nh">
<img src="${ctx}/static/images/model_mc.png"/> <img src="${ctx}/static/images/model_mc.png"/>
<div class="box_map top"> <div class="box_map top">
<div class="box_title"> <div class="box_title">
......
src/main/webapp/WEB-INF/views/nh/nh.jsp deleted 100644 → 0
View file @ 1c978a35
<%@ 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);
nh.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}/nh/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 nhMapper = {
'1号楼': ['一楼', '二楼', '三楼', '四楼'],
'2号楼': ['一楼', '二楼', '三楼'],
'3号楼': ['一楼', '二楼', '三楼'],
'4号楼': ['一楼', '二楼', '三楼']
};
var nh = {
getMonitorCount: function(){
$.ajax({
url: ctx + "/nh/getBuildAreaCount",
data: {'buildAreaName': buildAreaName},
success: function(data){
var html = '';
var floors = nhMapper[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 + "/nh/getGbId",
data: {'buildAreaName': buildAreaName, 'floor': floor},
success: function(data){
gbIdList = data;
}
});
},
init: function(){
$('.menu_title_box a').html(buildAreaName);
this.getMonitorCount();
}
}
nh.init();
</script>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/views/nh/nhAreaPlan.jsp
View file @ 2232d933
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
.area-box li { .area-box li {
cursor: pointer; cursor: pointer;
} }
.area-box li a{
color: #fff;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -34,40 +37,48 @@ ...@@ -34,40 +37,48 @@
<div class="left-menu"> <div class="left-menu">
<ul> <ul>
<li> <li>
<div class="menu-mc"> <a href="${ctx}/nh/onefloor">
<span>1号楼</span> <div class="menu-mc">
</div> <span>一号楼</span>
<div class="menu-num"> </div>
<span>监控点</span> <div class="menu-num">
<span style="background-color: #43e04e;">0</span> <span>监控点</span>
</div> <span style="background-color: #43e04e;">162</span>
</div>
</a>
</li> </li>
<li> <li>
<div class="menu-mc"> <a href="${ctx}/nh/twofloor">
<span>2号楼</span> <div class="menu-mc">
</div> <span>二号楼</span>
<div class="menu-num"> </div>
<span>监控点</span> <div class="menu-num">
<span style=" background-color: #2f8fff;">0</span> <span>监控点</span>
</div> <span style=" background-color: #2f8fff;">0</span>
</div>
</a>
</li> </li>
<li> <li>
<div class="menu-mc"> <a href="${ctx}/nh/therefloor">
<span>3号楼</span> <div class="menu-mc">
</div> <span>三号楼</span>
<div class="menu-num"> </div>
<span>监控点</span> <div class="menu-num">
<span style="background-color: #ff6363;">0</span> <span>监控点</span>
</div> <span style="background-color: #ff6363;">0</span>
</div>
</a>
</li> </li>
<li> <li>
<div class="menu-mc"> <a href="${ctx}/nh/fourfloor">
<span>4号楼</span> <div class="menu-mc">
</div> <span>四号楼</span>
<div class="menu-num"> </div>
<span>监控点</span> <div class="menu-num">
<span style="background-color: #ff8a00;">0</span> <span>监控点</span>
</div> <span style="background-color: #ff8a00;">0</span>
</div>
</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -76,20 +87,28 @@ ...@@ -76,20 +87,28 @@
<div class="area-box"> <div class="area-box">
<ul> <ul>
<li class="a_floor"> <li class="a_floor">
<a href="javascript:void(0);"> <img src="${ctx}/static/images/A_floor.png"/></a> <a href="${ctx}/nh/onefloor">
<span>1号楼</span> <img src="${ctx}/static/images/A_floor.png"/>
<span>一号楼</span>
</a>
</li> </li>
<li class="bg1_floor"> <li class="bg1_floor">
<a href="javascript:void(0);"> <img src="${ctx}/static/images/bgq_floor.png"/></a> <a href="${ctx}/nh/twofloor">
<span>2号楼</span> <img src="${ctx}/static/images/bgq_floor.png"/>
<span>二号楼</span>
</a>
</li> </li>
<li class="b_floor"> <li class="b_floor">
<a href="javascript:void(0);"> <img src="${ctx}/static/images/B_floor.png"/></a> <a href="${ctx}/nh/therefloor">
<span>3号楼</span> <img src="${ctx}/static/images/B_floor.png"/>
<span>三号楼</span>
</a>
</li> </li>
<li class="g_floor"> <li class="g_floor">
<a href="javascript:void(0);"> <img src="${ctx}/static/images/G_floor.png"/></a> <a href="${ctx}/nh/fourfloor">
<span>4号楼</span> <img src="${ctx}/static/images/G_floor.png"/>
<span>四号楼</span>
</a>
</li> </li>
<li class="c_floor"> <li class="c_floor">
<a href="javascript:void(0);"> <img src="${ctx}/static/images/C_floor_1.png"/></a> <a href="javascript:void(0);"> <img src="${ctx}/static/images/C_floor_1.png"/></a>
...@@ -112,44 +131,5 @@ ...@@ -112,44 +131,5 @@
</div> </div>
</div> </div>
</div> </div>
<script>
var nhArea = {
getBuildAreaAllCount: function(){
$.ajax({
url: ctx + "/nh/getBuildAreaAllCount",
success: function(data){
var $li = $('div.left-menu li');
for(let i = 0; i < $li.length; i++) {
var $liIndex = $($li[i]);
var buildAreaName = $liIndex.find('.menu-mc > span').html();
var count = data[buildAreaName];
$liIndex.find('.menu-num > span').eq(1).html(count);
}
}
});
},
initPage: function(){
$('div.area-box li').on('click', function(){
var buildAreaName = $(this).find('span').html();
if (buildAreaName) {
window.open(ctx + '/nh?buildAreaName=' + encodeURIComponent(buildAreaName), '_self');
}
});
$('.area-content .left-menu li').on('click', function () {
var buildAreaName = $(this).find('.menu-mc>span').html();
if (buildAreaName) {
window.open(ctx + '/nh?buildAreaName=' + encodeURIComponent(buildAreaName), '_self');
}
})
},
init: function (){
this.initPage();
this.getBuildAreaAllCount();
}
}
nhArea.init();
</script>
</body> </body>
</html> </html>
\ No newline at end of file
src/main/webapp/WEB-INF/views/nh/onefloor.jsp 0 → 100644
View file @ 2232d933
This diff is collapsed.
src/main/webapp/WEB-INF/views/nh/twofloor.jsp 0 → 100644
View file @ 2232d933
This diff is collapsed.
src/main/webapp/WEB-INF/views/wjc/areaPlan.jsp
View file @ 2232d933
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
<span style=" background-color: #ffba00;">223</span> <span style=" background-color: #ffba00;">87</span>
</div> </div>
</a> </a>
</li> </li>
...@@ -91,18 +91,18 @@ ...@@ -91,18 +91,18 @@
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/wjc/jcqy?buildName=西习艺楼"> <a href="${ctx}/wjc/xxyl">
<div class="menu-mc"> <div class="menu-mc">
<span>西习艺楼</span> <span>西习艺楼</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
<span style="background-color: #ff8a00;">49</span> <span style="background-color: #ff8a00;">32</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/wjc/jcqy?buildName=南教学楼"> <a href="${ctx}/wjc/njxl">
<div class="menu-mc"> <div class="menu-mc">
<span>南教学楼</span> <span>南教学楼</span>
</div> </div>
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/wjc/jcqy?buildName=北教学楼"> <a href="${ctx}/wjc/bjxl">
<div class="menu-mc"> <div class="menu-mc">
<span>北教学楼</span> <span>北教学楼</span>
</div> </div>
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
</a> </a>
</li> </li>
<li class="e_floor"> <li class="e_floor">
<a href="${ctx}/wjc/jcqy?buildName=西习艺楼"> <a href="${ctx}/wjc/xxyl">
<img src="${ctx}/static/images/E_floor.png"/> <img src="${ctx}/static/images/E_floor.png"/>
<span>西习艺楼</span> <span>西习艺楼</span>
</a> </a>
...@@ -171,13 +171,13 @@ ...@@ -171,13 +171,13 @@
<a href="javascript:;"> <img src="${ctx}/static/images/D_floor.png"/></a> <a href="javascript:;"> <img src="${ctx}/static/images/D_floor.png"/></a>
</li> </li>
<li class="d_floor_index"> <li class="d_floor_index">
<a href="${ctx}/wjc/jcqy?buildName=南教学楼"> <a href="${ctx}/wjc/njxl">
<img src="${ctx}/static/images/D_floor_1.png"/> <img src="${ctx}/static/images/D_floor_1.png"/>
<span>南教学楼</span> <span>南教学楼</span>
</a> </a>
</li> </li>
<li class="f_floor"> <li class="f_floor">
<a href="${ctx}/wjc/jcqy?buildName=北教学楼"> <a href="${ctx}/wjc/bjxl">
<img src="${ctx}/static/images/F_floor.png"/> <img src="${ctx}/static/images/F_floor.png"/>
<span>北教学楼</span> <span>北教学楼</span>
</a> </a>
......
src/main/webapp/WEB-INF/views/wjc/bjxl.jsp 0 → 100644
View file @ 2232d933
<%@ 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}/wjc">北教学楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>6</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>5</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '4.25rem',
left: '2.76rem',
gbid: '31011000001320001023'
}, {
top: '4.25rem',
left: '8.9rem',
gbid: '31011000001320001024'
}, {
top: '0.3rem',
left: '5.85rem',
gbid: '31011000001320001031'
}, {
top: '3rem',
left: '5.85rem',
gbid: '31011000001320001032'
}, {
top: '5rem',
left: '5.85rem',
gbid: '31011000001320001033'
}, {
top: '7.4rem',
left: '5.85rem',
gbid: '31011000001320001034'
}
],
'arr2': [
{
top: '4.25rem',
left: '2.76rem',
gbid: '31011000001320001025'
}, {
top: '4.25rem',
left: '8.9rem',
gbid: '31011000001320001026'
}, {
top: '0.3rem',
left: '5.85rem',
gbid: '31011000001320001041'
}, {
top: '4rem',
left: '5.85rem',
gbid: '31011000001320001042'
}, {
top: '7.4rem',
left: '5.85rem',
gbid: '31011000001320001043'
}
]
}
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/jiaoxuelou.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/wjc/dxyl.jsp
View file @ 2232d933
...@@ -182,7 +182,6 @@ ...@@ -182,7 +182,6 @@
}); });
function updateData(index) { function updateData(index) {
console.log(dataList[`arr${"${index}"}`].length)
thisIndex = index; thisIndex = index;
//循环数组 打摄像头位置 //循环数组 打摄像头位置
var divElement = document.querySelector('.room_box'); var divElement = document.querySelector('.room_box');
......
src/main/webapp/WEB-INF/views/wjc/njxl.jsp 0 → 100644
View file @ 2232d933
<%@ 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}/wjc">南教学楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>8</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>9</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '6.2rem',
left: '2.1rem',
gbid: '31011000001320001035'
}, {
top: '6.2rem',
left: '7.5rem',
gbid: '31011000001320001036'
}, {
top: '6.2rem',
left: '10.22rem',
gbid: '31011000001320001037'
}, {
top: '4.8rem',
left: '8.7rem',
gbid: '31011000001320001040'
}, {
top: '2.6rem',
left: '8.9rem',
gbid: '31011000001320001028'
}, {
top: '2.6rem',
left: '2.8rem',
gbid: '31011000001320001027'
}, {
top: '4.8rem',
left: '3rem',
gbid: '31011000001320001039'
}, {
top: '2.4rem',
left: '5.85rem',
gbid: '31011000001320001040'
}
],
'arr2': [
{
top: '6.2rem',
left: '3.2rem',
gbid: '31011000001320001045'
}, {
top: '6.2rem',
left: '7.5rem',
gbid: '31011000001320001046'
}, {
top: '6.2rem',
left: '10.22rem',
gbid: '31011000001320001046'
}, {
top: '4.8rem',
left: '8.7rem',
gbid: '31011000001320001047'
}, {
top: '2.6rem',
left: '8.9rem',
gbid: '31011000001320001049'
}, {
top: '2.6rem',
left: '2.8rem',
gbid: '31011000001320001029'
}, {
top: '4.8rem',
left: '3rem',
gbid: '31011000001320001049'
}, {
top: '2.4rem',
left: '5.85rem',
gbid: '31011000001320001048'
}, {
top: '6.2rem',
left: '1.155rem',
gbid: '31011000001320001044'
}
]
}
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) {
thisIndex = index;
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/nanjiaoxuelou' + 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/wjc/south.jsp
View file @ 2232d933
This diff is collapsed.
src/main/webapp/WEB-INF/views/wjc/xxyl.jsp 0 → 100644
View file @ 2232d933
<%@ 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}/wjc">东习艺楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>17</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>15</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.3rem',
left: '1.6rem',
gbid: '31011000001320000904'
}, {
top: '2.3rem',
left: '10.2rem',
gbid: '31011000001320000902'
}, {
top: '2.3rem',
left: '5.85rem',
gbid: '31011000001320000911'
}, {
top: '2.1rem',
left: '3.2rem',
gbid: '31011000001320000910'
}, {
top: '0.3rem',
left: '3.2rem',
gbid: '31011000001320000906'
}, {
top: '3.5rem',
left: '8.5rem',
gbid: '31011000001320000907'
}, {
top: '2.1rem',
left: '8.5rem',
gbid: '31011000001320000909'
}, {
top: '0.3rem',
left: '8.5rem',
gbid: '31011000001320000905'
}, {
top: '3.5rem',
left: '3.2rem',
gbid: '31011000001320000908'
}, {
top: '5.1rem',
left: '9.37rem',
gbid: '31011000001320000903'
}, {
top: '5.1rem',
left: '2.35rem',
gbid: '31011000001320000914'
}, {
top: '6.4rem',
left: '5.85rem',
gbid: '31011000001320000916'
}, {
top: '7.7rem',
left: '5.85rem',
gbid: '31011000001320000915'
}, {
top: '7.5rem',
left: '11.3rem',
gbid: '31011000001320000913'
}, {
top: '4.1rem',
left: '0.35rem',
gbid: '31011000001320000900'
}, {
top: '4.1rem',
left: '6rem',
gbid: '31011000001320000912'
}, {
top: '4.1rem',
left: '11.55rem',
gbid: '31011000001320000901'
}
],
'arr2': [
{
top: '2.3rem',
left: '4.95rem',
gbid: '31011000001320000922'
}, {
top: '2.1rem',
left: '0.3rem',
gbid: '31011000001320000929'
}, {
top: '0.3rem',
left: '0.3rem',
gbid: '31011000001320000926'
}, {
top: '3.5rem',
left: '9.6rem',
gbid: '31011000001320000927'
}, {
top: '2.1rem',
left: '9.6rem',
gbid: '31011000001320000929'
}, {
top: '0.3rem',
left: '9.6rem',
gbid: '31011000001320000925'
}, {
top: '3.5rem',
left: '0.3rem',
gbid: '31011000001320000927'
}, {
top: '5.1rem',
left: '9.37rem',
gbid: '31011000001320000921'
}, {
top: '5.1rem',
left: '2.35rem',
gbid: '31011000001320000931'
}, {
top: '7.5rem',
left: '11.4rem',
gbid: '31011000001320000917'
}, {
top: '4.1rem',
left: '6rem',
gbid: '31011000001320000923'
}, {
top: '4.4rem',
left: '9.4rem',
gbid: '31011000001320000918'
}, {
top: '6.35rem',
left: '6.8rem',
gbid: '31011000001320000924'
}, {
top: '6.7rem',
left: '1.9rem',
gbid: '31011000001320000919'
}, {
top: '2.2rem',
left: '10.7rem',
gbid: '31011000001320000920'
}
]
}
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) {
thisIndex = index;
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/westxiyilou' + 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>
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