Skip to content

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

add 女监

parent 013548b7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1058 additions and 407 deletions
src/main/java/com/ces/web/nj/controller/NJController.java
View file @ 38be8361
package com.ces.web.nj.controller;
import com.ces.common.constant.Constant;
import com.ces.common.core.domain.Result;
import com.ces.web.device.entity.Device;
import com.ces.web.device.service.IDeviceService;
import org.apache.shiro.authz.annotation.RequiresRoles;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
import java.util.Map;
/**
* @author YYB
*/
@Controller
@RequestMapping("/nj")
@RequiresRoles({Constant.RoleCode.NJ})
public class NJController {
@Autowired
private IDeviceService deviceService;
@GetMapping
public ModelAndView njIndex() {
return new ModelAndView("nj/areaPlan");
}
@GetMapping("/jcqy")
@RequiresRoles({Constant.RoleCode.NJ})
public ModelAndView jcqyIndex(String buildName) {
ModelAndView mv = new ModelAndView("nj/commonmodel");
mv.addObject("buildName", buildName);
mv.addObject("floorDeviceCnt",deviceService.getCntByPrisonNameAndBuildName("沪-女",buildName));
return mv;
}
/**
* 获取所有楼层及监控数量信息
* @param buildName 大楼名称
*/
@GetMapping("/getCntByBuildName")
@RequiresRoles({Constant.RoleCode.NJ})
public Result getCntByBuildName(String buildName) {
return Result.success(deviceService.getCntByPrisonNameAndBuildName("沪-女",buildName));
}
/**
* 获取楼层的监控信息
* @param buildName 大楼名称
*/
@GetMapping("/getGbidByBuildNameAndFloor")
@RequiresRoles({Constant.RoleCode.NJ})
@ResponseBody
public Result getGbidByBuildNameAndFloor(String buildName,String floor) {
return Result.success(deviceService.getGbidByPrisonNameAndBuildNameAndFloor("沪-女",buildName,floor));
@GetMapping("/onefloor")
public ModelAndView onefloorIndex() {
return new ModelAndView("nj/onefloor");
}
@GetMapping("/twofloor")
public ModelAndView twofloorIndex() {
return new ModelAndView("nj/twofloor");
}
@GetMapping("/xxyfloor")
public ModelAndView xxyfloorIndex() {
return new ModelAndView("nj/xxyfloor");
}
@GetMapping("/cfloor")
public ModelAndView cfloorIndex() {
return new ModelAndView("nj/cfloor");
}
@GetMapping("/hjfloor")
public ModelAndView hjfloorIndex() {
return new ModelAndView("nj/hjfloor");
}
@GetMapping("/ywfloor")
public ModelAndView ywfloorIndex() {
return new ModelAndView("nj/ywfloor");
}
@GetMapping("/twodoor")
public ModelAndView twodoorIndex() {
return new ModelAndView("nj/twodoor");
}
}
src/main/webapp/WEB-INF/views/nj/cfloor.jsp 0 → 100644
View file @ 38be8361
<%@ 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}/nj">炊场</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '0.9rem',
left: '2rem',
gbid: '31011700001320000381'
}, {
top: '0.9rem',
left: '5.85rem',
gbid: '31011700001320000388'
}, {
top: '0.9rem',
left: '9.75rem',
gbid: '31011700001320000379'
}, {
top: '2.6rem',
left: '3.05rem',
gbid: '31011700001320000374'
}, {
top: '2.6rem',
left: '4.4rem',
gbid: '31011700001320000375'
}, {
top: '2.6rem',
left: '5.8rem',
gbid: '31011700001320000377'
}, {
top: '2.6rem',
left: '7.2rem',
gbid: '31011700001320000392'
}, {
top: '5rem',
left: '8.6rem',
gbid: '31011700001320000386'
}, {
top: '5rem',
left: '3.05rem',
gbid: '31011700001320000391'
}, {
top: '5rem',
left: '4.4rem',
gbid: '31011700001320000390'
}, {
top: '4.6rem',
left: '5.8rem',
gbid: '31011700001320000383'
}, {
top: '5rem',
left: '7.2rem',
gbid: '31011700001320000387'
}, {
top: '5.6rem',
left: '5.8rem',
gbid: '31011700001320000382'
}, {
top: '3.65rem',
left: '1.75rem',
gbid: '31011700001320000376'
}, {
top: '3.45rem',
left: '0.93rem',
gbid: '31011700001320000384'
}, {
top: '3.65rem',
left: '11.2rem',
gbid: '31011700001320000373'
}, {
top: '3.45rem',
left: '10.2rem',
gbid: '31011700001320000385'
}, {
top: '6.9rem',
left: '10rem',
gbid: '31011700001320000378'
}, {
top: '6.9rem',
left: '5.8rem',
gbid: '31011700001320000389'
}, {
top: '6.9rem',
left: '2rem',
gbid: '31011700001320000380'
}, {
top: '2.6rem',
left: '8.6rem',
gbid: '31011700001320000393'
}
]
}
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/nvjian_cookware.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/nj/commonmodel.jsp deleted 100644 → 0
View file @ 013548b7
<%@ 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}/nj/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}/nj">${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
src/main/webapp/WEB-INF/views/nj/hjfloor.jsp 0 → 100644
View file @ 38be8361
<%@ 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}/nj">会见楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>12</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '0.88rem',
left: '5.2rem',
gbid: '31011700001320000424'
}, {
top: '2.2rem',
left: '0.47rem',
gbid: '31011700001320000410'
}, {
top: '4.3rem',
left: '0.47rem',
gbid: '31011700001320000406'
}, {
top: '3.25rem',
left: '1.25rem',
gbid: '31011700001320000408'
}, {
top: '3.25rem',
left: '1.9rem',
gbid: '31011700001320000415'
}, {
top: '2.8rem',
left: '4.2rem',
gbid: '31011700001320000418'
}, {
top: '2.8rem',
left: '7.1rem',
gbid: '31011700001320000419'
}, {
top: '2.8rem',
left: '8.7rem',
gbid: '31011700001320000412'
}, {
top: '3.35rem',
left: '10.45rem',
gbid: '31011700001320000409'
}, {
top: '3.35rem',
left: '9.8rem',
gbid: '31011700001320000416'
}, {
top: '1.9rem',
left: '11.2rem',
gbid: '31011700001320000407'
}, {
top: '3.7rem',
left: '11.2rem',
gbid: '31011700001320000425'
}, {
top: '5rem',
left: '11.2rem',
gbid: '31011700001320000411'
}, {
top: '5rem',
left: '4.3rem',
gbid: '31011700001320000417'
}, {
top: '5rem',
left: '8.7rem',
gbid: '31011700001320000413'
}, {
top: '5rem',
left: '7.1rem',
gbid: '31011700001320000420'
}, {
top: '6.9rem',
left: '9.1rem',
gbid: '31011700001320000423'
}, {
top: '6.9rem',
left: '2.95rem',
gbid: '31011700001320000426'
}, {
top: '3.9rem',
left: '2.6rem',
gbid: '31011700001320000414'
}, {
top: '3.9rem',
left: '4.4rem',
gbid: '31011700001320000421'
}, {
top: '3.9rem',
left: '6.45rem',
gbid: '31011700001320000422'
}
],
'arr2': [
{
top: '0.85rem',
left: '5.2rem',
gbid: '31011700001320000402'
}, {
top: '2.2rem',
left: '5.15rem',
gbid: '31011700001320000397'
}, {
top: '2rem',
left: '1.58rem',
gbid: '31011700001320000395'
}, {
top: '2rem',
left: '10.13rem',
gbid: '31011700001320000399'
}, {
top: '4.5rem',
left: '1.58rem',
gbid: '31011700001320000394'
}, {
top: '4.5rem',
left: '10.13rem',
gbid: '31011700001320000398'
}, {
top: '3.38rem',
left: '11.2rem',
gbid: '31011700001320000401'
}, {
top: '5.63rem',
left: '5.15rem',
gbid: '31011700001320000396'
}, {
top: '3.75rem',
left: '2.85rem',
gbid: '31011700001320000405'
}, {
top: '3.75rem',
left: '7.2rem',
gbid: '31011700001320000403'
}, {
top: '7rem',
left: '3rem',
gbid: '31011700001320000404'
}, {
top: '7rem',
left: '9.05rem',
gbid: '31011700001320000400'
}
]
}
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/nvjian_huiyi' + 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/nj/onefloor.jsp 0 → 100644
View file @ 38be8361
This diff is collapsed.
src/main/webapp/WEB-INF/views/nj/twodoor.jsp 0 → 100644
View file @ 38be8361
<%@ 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}/nj">二大门</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">二大门</p>
<p class="monitor">监控点<span>10</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '0.9rem',
left: '7.1rem',
gbid: '31011700001320000463'
}, {
top: '3.45rem',
left: '0.85rem',
gbid: '31011700001320000456'
}, {
top: '3.25rem',
left: '1.75rem',
gbid: '31011700001320000459'
}, {
top: '3.45rem',
left: '8.8rem',
gbid: '31011700001320000457'
}, {
top: '3.45rem',
left: '11.2rem',
gbid: '31011700001320000455'
}, {
top: '3.45rem',
left: '5.2rem',
gbid: '31011700001320000460'
}, {
top: '4.75rem',
left: '9.9rem',
gbid: '31011700001320000458'
}, {
top: '2.3rem',
left: '9.9rem',
gbid: '31011700001320000461'
}, {
top: '7rem',
left: '1.8rem',
gbid: '31011700001320000462'
}, {
top: '7rem',
left: '8.7rem',
gbid: '31011700001320000464'
}
]
}
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/nvjian_twodamen.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/nj/twofloor.jsp 0 → 100644
View file @ 38be8361
This diff is collapsed.
src/main/webapp/WEB-INF/views/nj/xxyfloor.jsp 0 → 100644
View file @ 38be8361
<%@ 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}/nj">新习艺楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>15</span></p>
</div>
</li>
<li>
<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>18</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '0.9rem',
left: '3.4rem',
gbid: '31011700001320000576'
}, {
top: '0.9rem',
left: '8.85rem',
gbid: '31011700001320000577'
}, {
top: '2.8rem',
left: '2.35rem',
gbid: '31011700001320000571'
}, {
top: '2.8rem',
left: '4.88rem',
gbid: '31011700001320000570'
}, {
top: '2.8rem',
left: '7rem',
gbid: '31011700001320000575'
}, {
top: '5rem',
left: '2.35rem',
gbid: '31011700001320000572'
}, {
top: '5rem',
left: '4.88rem',
gbid: '31011700001320000580'
}, {
top: '5rem',
left: '7rem',
gbid: '31011700001320000569'
}, {
top: '5rem',
left: '8.7rem',
gbid: '31011700001320000568'
}, {
top: '3.8rem',
left: '11.2rem',
gbid: '31011700001320000574'
}, {
top: '3.45rem',
left: '9.8rem',
gbid: '31011700001320000581'
}, {
top: '3.9rem',
left: '8.1rem',
gbid: '31011700001320000573'
}, {
top: '7rem',
left: '8.6rem',
gbid: '31011700001320000578'
}, {
top: '6.88rem',
left: '3.28rem',
gbid: '31011700001320000579'
}, {
top: '3.5rem',
left: '0.65rem',
gbid: '31011700001320000582'
}
],
'arr2': [
{
top: '0.9rem',
left: '3.4rem',
gbid: '31011700001320000139'
}, {
top: '0.9rem',
left: '8.85rem',
gbid: '31011700001320000583'
}, {
top: '2.8rem',
left: '2.35rem',
gbid: '31011700001320000143'
}, {
top: '2.8rem',
left: '4.88rem',
gbid: '31011700001320000137'
}, {
top: '2.8rem',
left: '7rem',
gbid: '31011700001320000140'
}, {
top: '2.8rem',
left: '8.7rem',
gbid: '31011700001320000136'
}, {
top: '5rem',
left: '2.35rem',
gbid: '31011700001320000135'
}, {
top: '5rem',
left: '4.88rem',
gbid: '31011700001320000134'
}, {
top: '5rem',
left: '7rem',
gbid: '31011700001320000141'
}, {
top: '5rem',
left: '8.7rem',
gbid: '31011700001320000131'
}, {
top: '3.65rem',
left: '11.2rem',
gbid: '31011700001320000132'
}, {
top: '3.5rem',
left: '9.7rem',
gbid: '31011700001320000129'
}, {
top: '2.6rem',
left: '0.5rem',
gbid: '31011700001320000130'
}, {
top: '4.6rem',
left: '0.5rem',
gbid: '31011700001320000133'
}, {
top: '7rem',
left: '0.5rem',
gbid: '31011700001320000144'
}, {
top: '6.9rem',
left: '2.5rem',
gbid: '31011700001320000142'
}, {
top: '6.9rem',
left: '4.9rem',
gbid: '31011700001320000138'
}
],
'arr3': [
{
top: '0.9rem',
left: '3.4rem',
gbid: '31011700001320000152'
}, {
top: '0.9rem',
left: '8.85rem',
gbid: '31011700001320000149'
}, {
top: '2.8rem',
left: '2.35rem',
gbid: '31011700001320000158'
}, {
top: '2.8rem',
left: '4.88rem',
gbid: '31011700001320000156'
}, {
top: '2.8rem',
left: '7rem',
gbid: '31011700001320000159'
}, {
top: '2.8rem',
left: '8.7rem',
gbid: '31011700001320000155'
}, {
top: '5rem',
left: '2.35rem',
gbid: '31011700001320000153'
}, {
top: '5rem',
left: '4.88rem',
gbid: '31011700001320000161'
}, {
top: '5rem',
left: '7rem',
gbid: '31011700001320000154'
}, {
top: '5rem',
left: '8.7rem',
gbid: '31011700001320000160'
}, {
top: '3.7rem',
left: '11.2rem',
gbid: '31011700001320000157'
}, {
top: '3.5rem',
left: '9.7rem',
gbid: '31011700001320000147'
}, {
top: '6.9rem',
left: '7.55rem',
gbid: '31011700001320000150'
}, {
top: '3.6rem',
left: '0.5rem',
gbid: '31011700001320000148'
}, {
top: '7rem',
left: '0.5rem',
gbid: '31011700001320000162'
}, {
top: '6.9rem',
left: '2.5rem',
gbid: '31011700001320000146'
}, {
top: '6.9rem',
left: '4.9rem',
gbid: '31011700001320000145'
}, {
top: '6.9rem',
left: '10.3rem',
gbid: '31011700001320000151'
}
]
}
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/xiyi' + 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/nj/ywfloor.jsp 0 → 100644
View file @ 38be8361
<%@ 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}/nj">医务楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>23</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: '1.6rem',
left: '2.13rem',
gbid: '31011700001320000449'
}, {
top: '1.6rem',
left: '4.1rem',
gbid: '31011700001320000448'
}, {
top: '1.6rem',
left: '5.95rem',
gbid: '31011700001320000442'
}, {
top: '1.6rem',
left: '7.8rem',
gbid: '31011700001320000434'
}, {
top: '1.6rem',
left: '9.6rem',
gbid: '31011700001320000427'
}, {
top: '2.85rem',
left: '2.13rem',
gbid: '31011700001320000444'
}, {
top: '2.85rem',
left: '4.1rem',
gbid: '31011700001320000446'
}, {
top: '2.85rem',
left: '5.95rem',
gbid: '31011700001320000435'
}, {
top: '2.85rem',
left: '7.8rem',
gbid: '31011700001320000445'
}, {
top: '2.85rem',
left: '9.6rem',
gbid: '31011700001320000428'
}, {
top: '5.05rem',
left: '2.13rem',
gbid: '31011700001320000438'
}, {
top: '5.05rem',
left: '4.1rem',
gbid: '31011700001320000432'
}, {
top: '5.05rem',
left: '5.95rem',
gbid: '31011700001320000436'
}, {
top: '5.05rem',
left: '7.8rem',
gbid: '31011700001320000447'
}, {
top: '5.05rem',
left: '9.6rem',
gbid: '31011700001320000431'
}, {
top: '6.05rem',
left: '2.13rem',
gbid: '31011700001320000439'
}, {
top: '6.05rem',
left: '4.1rem',
gbid: '31011700001320000433'
}, {
top: '6.05rem',
left: '5.95rem',
gbid: '31011700001320000437'
}, {
top: '6.05rem',
left: '7.8rem',
gbid: '31011700001320000443'
}, {
top: '6.05rem',
left: '9.6rem',
gbid: '31011700001320000430'
}, {
top: '7.18rem',
left: '5.45rem',
gbid: '31011700001320000440'
}, {
top: '0.5rem',
left: '5.45rem',
gbid: '31011700001320000441'
}, {
top: '3.6rem',
left: '11.2rem',
gbid: '31011700001320000429'
}
],
'arr2': [
{
top: '0.78rem',
left: '5.45rem',
gbid: '31011700001320000451'
}, {
top: '3.58rem',
left: '5.75rem',
gbid: '31011700001320000454'
}, {
top: '3.58rem',
left: '0.9rem',
gbid: '31011700001320000452'
}, {
top: '3.58rem',
left: '10.75rem',
gbid: '31011700001320000453'
}, {
top: '6.9rem',
left: '5.45rem',
gbid: '31011700001320000450'
}
]
}
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/yiwulou' + 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