Skip to content

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

add 周浦

parent 6c0c5818
Hide whitespace changes
Inline Side-by-side
Showing with 1648 additions and 52 deletions
src/main/java/com/ces/web/zp/controller/ZPController.java
View file @ 013548b7
package com.ces.web.zp.controller;
import com.ces.common.constant.Constant;
import com.ces.common.core.domain.Result;
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;
/**
......@@ -17,43 +12,31 @@ import org.springframework.web.servlet.ModelAndView;
*/
@Controller
@RequestMapping("/zp")
@RequiresRoles({Constant.RoleCode.ZP})
public class ZPController {
@Autowired
private IDeviceService deviceService;
@GetMapping
@RequiresRoles({Constant.RoleCode.ZP})
public ModelAndView njIndex() {
return new ModelAndView("zp/areaPlan");
}
@GetMapping("/jcqy")
@RequiresRoles({Constant.RoleCode.ZP})
public ModelAndView jcqyIndex(String buildName) {
ModelAndView mv = new ModelAndView("zp/commonmodel");
mv.addObject("buildName", buildName);
mv.addObject("floorDeviceCnt",deviceService.getCntByPrisonNameAndBuildName("沪-周",buildName));
return mv;
@GetMapping("/onefloor")
public ModelAndView onefloorIndex() {
return new ModelAndView("zp/onefloor");
}
/**
* 获取所有楼层及监控数量信息
* @param buildName 大楼名称
*/
@GetMapping("/getCntByBuildName")
@RequiresRoles({Constant.RoleCode.ZP})
public Result getCntByBuildName(String buildName) {
return Result.success(deviceService.getCntByPrisonNameAndBuildName("沪-周",buildName));
@GetMapping("/twofloor")
public ModelAndView twofloorIndex() {
return new ModelAndView("zp/twofloor");
}
/**
* 获取楼层的监控信息
* @param buildName 大楼名称
*/
@GetMapping("/getGbidByBuildNameAndFloor")
@RequiresRoles({Constant.RoleCode.ZP})
@ResponseBody
public Result getGbidByBuildNameAndFloor(String buildName,String floor) {
return Result.success(deviceService.getGbidByPrisonNameAndBuildNameAndFloor("沪-周",buildName,floor));
@GetMapping("/therefloor")
public ModelAndView therefloorIndex() {
return new ModelAndView("zp/therefloor");
}
@GetMapping("/hjfloor")
public ModelAndView hjfloorIndex() {
return new ModelAndView("zp/hjfloor");
}
}
src/main/webapp/WEB-INF/views/login.jsp
View file @ 013548b7
......@@ -62,7 +62,7 @@
<form class="loginForm">
<div class="mb-3">
<label for="loginName" class="form-label">账 号</label>
<input type="text" class="form-control" id="loginName" value="邓滔">
<input type="text" class="form-control" id="loginName" value="dengtao">
</div>
<div class="mb-3">
<label for="password" class="form-label">密 码</label>
......
src/main/webapp/WEB-INF/views/zp/areaPlan.jsp
View file @ 013548b7
......@@ -36,46 +36,46 @@
<div class="left-menu">
<ul>
<li>
<a href="${ctx}/zp/jcqy?buildName=1号楼">
<a href="${ctx}/zp/onefloor">
<div class="menu-mc">
<span>1号楼</span>
<span>一号楼</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff6363;">138</span>
<span style="background-color: #ff6363;">60</span>
</div>
</a>
</li>
<li>
<a href="${ctx}/zp/jcqy?buildName=2号楼">
<a href="${ctx}/zp/twofloor">
<div class="menu-mc">
<span>2号楼</span>
<span>二号楼</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #ffba00;">239</span>
<span style=" background-color: #ffba00;">76</span>
</div>
</a>
</li>
<li>
<a href="${ctx}/zp/jcqy?buildName=3号楼">
<a href="${ctx}/zp/therefloor">
<div class="menu-mc">
<span>3号楼</span>
<span>三号楼</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #43e04e;">295</span>
<span style="background-color: #43e04e;">96</span>
</div>
</a>
</li>
<li>
<a href="${ctx}/zp/jcqy?buildName=会见楼">
<a href="${ctx}/zp/hjfloor">
<div class="menu-mc">
<span>会见楼</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #2f8fff;">80</span>
<span style=" background-color: #2f8fff;">76</span>
</div>
</a>
</li>
......@@ -86,25 +86,25 @@
<div class="area-box">
<ul>
<li class="a_floor">
<a href="${ctx}/zp/jcqy?buildName=1号楼">
<a href="${ctx}/zp/onefloor">
<img src="${ctx}/static/images/A_floor.png"/>
<span>1号楼</span>
<span>一号楼</span>
</a>
</li>
<li class="bg1_floor">
<a href="${ctx}/zp/jcqy?buildName=2号楼">
<a href="${ctx}/zp/twofloor">
<img src="${ctx}/static/images/bgq_floor.png"/>
<span>2号楼</span>
<span>二号楼</span>
</a>
</li>
<li class="b_floor">
<a href="${ctx}/zp/jcqy?buildName=3号楼">
<a href="${ctx}/zp/therefloor">
<img src="${ctx}/static/images/B_floor.png"/>
<span>3号楼</span>
<span>三号楼</span>
</a>
</li>
<li class="g_floor">
<a href="${ctx}/zp/jcqy?buildName=会见楼">
<a href="${ctx}/zp/hjfloor">
<img src="${ctx}/static/images/G_floor.png"/>
<span>会见楼</span>
</a>
......
src/main/webapp/WEB-INF/views/zp/hjfloor.jsp 0 → 100644
View file @ 013548b7
<%@ 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}/zp">会见楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>76</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.3rem',
left: '1.1rem',
gbid: '31011500001320000013'
}, {
top: '0.3rem',
left: '10.65rem',
gbid: '31011500001320000012'
}, {
top: '1.05rem',
left: '1.1rem',
gbid: '31011500001320000039'
}, {
top: '1.05rem',
left: '1.68rem',
gbid: '31011500001320000050'
}, {
top: '1.05rem',
left: '2.23rem',
gbid: '31011500001320000061'
}, {
top: '1.05rem',
left: '2.8rem',
gbid: '31011500001320000069'
}, {
top: '1.05rem',
left: '3.35rem',
gbid: '31011500001320000070'
}, {
top: '1.05rem',
left: '3.9rem',
gbid: '31011500001320000071'
}, {
top: '1.05rem',
left: '4.45rem',
gbid: '31011500001320000072'
}, {
top: '1.05rem',
left: '5rem',
gbid: '31011500001320000073'
}, {
top: '1.05rem',
left: '5.6rem',
gbid: '31011500001320000074'
}, {
top: '1.05rem',
left: '6.15rem',
gbid: '31011500001320000040'
}, {
top: '1.05rem',
left: '6.7rem',
gbid: '31011500001320000041'
}, {
top: '1.05rem',
left: '7.25rem',
gbid: '31011500001320000042'
}, {
top: '1.05rem',
left: '7.8rem',
gbid: '31011500001320000043'
}, {
top: '1.05rem',
left: '8.37rem',
gbid: '31011500001320000044'
}, {
top: '1.05rem',
left: '8.93rem',
gbid: '31011500001320000045'
}, {
top: '1.05rem',
left: '9.46rem',
gbid: '31011500001320000046'
}, {
top: '1.05rem',
left: '10.05rem',
gbid: '31011500001320000047'
}, {
top: '1.05rem',
left: '10.6rem',
gbid: '31011500001320000048'
}, {
top: '2.3rem',
left: '1.1rem',
gbid: '31011500001320000049'
}, {
top: '2.3rem',
left: '1.68rem',
gbid: '31011500001320000050'
}, {
top: '2.3rem',
left: '2.23rem',
gbid: '31011500001320000051'
}, {
top: '2.3rem',
left: '2.8rem',
gbid: '31011500001320000052'
}, {
top: '2.3rem',
left: '3.35rem',
gbid: '31011500001320000053'
}, {
top: '2.3rem',
left: '3.9rem',
gbid: '31011500001320000054'
}, {
top: '2.3rem',
left: '4.45rem',
gbid: '31011500001320000055'
}, {
top: '2.3rem',
left: '5rem',
gbid: '31011500001320000056'
}, {
top: '2.3rem',
left: '5.6rem',
gbid: '31011500001320000057'
}, {
top: '2.3rem',
left: '6.15rem',
gbid: '31011500001320000058'
}, {
top: '2.3rem',
left: '6.7rem',
gbid: '31011500001320000059'
}, {
top: '2.3rem',
left: '7.25rem',
gbid: '31011500001320000060'
}, {
top: '2.3rem',
left: '7.8rem',
gbid: '31011500001320000062'
}, {
top: '2.3rem',
left: '8.37rem',
gbid: '31011500001320000063'
}, {
top: '2.3rem',
left: '8.93rem',
gbid: '31011500001320000064'
}, {
top: '2.3rem',
left: '9.46rem',
gbid: '31011500001320000065'
}, {
top: '2.3rem',
left: '10.05rem',
gbid: '31011500001320000066'
}, {
top: '2.3rem',
left: '10.6rem',
gbid: '31011500001320000067'
}, {
top: '3.6rem',
left: '1.1rem',
gbid: '31011500001320000068'
}, {
top: '3.6rem',
left: '1.68rem',
gbid: '31011500001320000023'
}, {
top: '3.6rem',
left: '2.33rem',
gbid: '31011500001320000024'
}, {
top: '3.6rem',
left: '2.9rem',
gbid: '31011500001320000025'
}, {
top: '3.6rem',
left: '3.5rem',
gbid: '31011500001320000026'
}, {
top: '3.6rem',
left: '4.1rem',
gbid: '31011500001320000027'
}, {
top: '3.6rem',
left: '4.65rem',
gbid: '31011500001320000028'
}, {
top: '3.6rem',
left: '5.27rem',
gbid: '31011500001320000016'
}, {
top: '3.6rem',
left: '5.85rem',
gbid: '31011500001320000017'
}, {
top: '3.6rem',
left: '6.45rem',
gbid: '31011500001320000018'
}, {
top: '3.6rem',
left: '7.05rem',
gbid: '31011500001320000019'
}, {
top: '3.6rem',
left: '7.6rem',
gbid: '31011500001320000020'
}, {
top: '3.6rem',
left: '8.25rem',
gbid: '31011500001320000021'
}, {
top: '3.6rem',
left: '8.82rem',
gbid: '31011500001320000030'
}, {
top: '3.6rem',
left: '9.4rem',
gbid: '31011500001320000031'
}, {
top: '3.6rem',
left: '10rem',
gbid: '31011500001320000032'
},{
top: '5.3rem',
left: '2.05rem',
gbid: '31011500001320000080'
}, {
top: '5.3rem',
left: '4rem',
gbid: '31011500001320000079'
}, {
top: '5.3rem',
left: '6rem',
gbid: '31011500001320000037'
}, {
top: '5.3rem',
left: '8.05rem',
gbid: '31011500001320000037'
}, {
top: '5.3rem',
left: '10.05rem',
gbid: '31011500001320000036'
}, {
top: '4.3rem',
left: '9.3rem',
gbid: '31011500001320000033'
}, {
top: '4.3rem',
left: '1rem',
gbid: '31011500001320000075'
}, {
top: '4.3rem',
left: '3rem',
gbid: '31011500001320000076'
}, {
top: '4.3rem',
left: '6.7rem',
gbid: '31011500001320000029'
}, {
top: '6.35rem',
left: '0.5rem',
gbid: '31011500001320000004'
}, {
top: '7.5rem',
left: '1.1rem',
gbid: '31011500001320000010'
}, {
top: '7.5rem',
left: '3.2rem',
gbid: '31011500001320000008'
}, {
top: '7.65rem',
left: '5.6rem',
gbid: '31011500001320000077'
}, {
top: '7.4rem',
left: '7.35rem',
gbid: '31011500001320000015'
}, {
top: '7.65rem',
left: '8.7rem',
gbid: '31011500001320000011'
}, {
top: '6.38rem',
left: '1.85rem',
gbid: '31011500001320000003'
}, {
top: '6.6rem',
left: '2.5rem',
gbid: '31011500001320000009'
}, {
top: '6.6rem',
left: '4.5rem',
gbid: '31011500001320000006'
}, {
top: '6.6rem',
left: '6.1rem',
gbid: '31011500001320000001'
}, {
top: '7rem',
left: '2.82rem',
gbid: '31011500001320000005'
}, {
top: '7rem',
left: '4.8rem',
gbid: '31011500001320000002'
}, {
top: '7.3rem',
left: '3.8rem',
gbid: '31011500001320000007'
}
]
}
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/zhoupu_huiyi.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/zp/onefloor.jsp 0 → 100644
View file @ 013548b7
<%@ 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}/zp">一号楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>25</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>35</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.5rem',
left: '0.9rem',
gbid: '31011500001320000104'
}, {
top: '1.5rem',
left: '2.5rem',
gbid: '31011500001320000090'
}, {
top: '1.5rem',
left: '4.4rem',
gbid: '31011500001320000098'
}, {
top: '1.5rem',
left: '6.3rem',
gbid: '31011500001320000094'
}, {
top: '1.5rem',
left: '7.9rem',
gbid: '31011500001320000086'
}, {
top: '1.5rem',
left: '9.5rem',
gbid: '31011500001320000085'
}, {
top: '2.5rem',
left: '2.5rem',
gbid: '31011500001320000091'
}, {
top: '2.5rem',
left: '11.3rem',
gbid: '31011500001320000100'
}, {
top: '4.2rem',
left: '1.0rem',
gbid: '31011500001320000099'
}, {
top: '4.2rem',
left: '3.7rem',
gbid: '31011500001320000097'
}, {
top: '4.2rem',
left: '7.1rem',
gbid: '31011500001320000095'
}, {
top: '3.1rem',
left: '8.2rem',
gbid: '31011500001320000083'
}, {
top: '3.1rem',
left: '10rem',
gbid: '31011500001320000081'
}, {
top: '4.6rem',
left: '9.6rem',
gbid: '31011500001320000084'
}, {
top: '4.6rem',
left: '11.4rem',
gbid: '31011500001320000082'
}, {
top: '7.4rem',
left: '11.4rem',
gbid: '31011500001320000093'
}, {
top: '5.1rem',
left: '11rem',
gbid: '31011500001320000102'
}, {
top: '5.1rem',
left: '0.3rem',
gbid: '31011500001320000103'
}, {
top: '5.7rem',
left: '10rem',
gbid: '31011500001320000092'
}, {
top: '7rem',
left: '1.9rem',
gbid: '31011500001320000089'
}, {
top: '7rem',
left: '3.3rem',
gbid: '31011500001320000089'
}, {
top: '7rem',
left: '4.85rem',
gbid: '31011500001320000087'
}, {
top: '7rem',
left: '7.15rem',
gbid: '31011500001320000096'
}, {
top: '7rem',
left: '8.9rem',
gbid: '31011500001320000105'
}, {
top: '7.3rem',
left: '5.85rem',
gbid: '31011500001320000101'
}
],
'arr2': [
{
top: '0.5rem',
left: '0.85rem',
gbid: '31011500001320000116'
}, {
top: '0.5rem',
left: '2.32rem',
gbid: '31011500001320000120'
}, {
top: '0.5rem',
left: '3.8rem',
gbid: '31011500001320000124'
}, {
top: '0.5rem',
left: '5.2rem',
gbid: '31011500001320000128'
}, {
top: '0.5rem',
left: '6.7rem',
gbid: '31011500001320000132'
}, {
top: '0.5rem',
left: '8.1rem',
gbid: '31011500001320000110'
}, {
top: '0.5rem',
left: '9.55rem',
gbid: '31011500001320000114'
}, {
top: '1.7rem',
left: '0.85rem',
gbid: '31011500001320000115'
}, {
top: '1.7rem',
left: '2.32rem',
gbid: '31011500001320000119'
}, {
top: '1.7rem',
left: '3.8rem',
gbid: '31011500001320000123'
}, {
top: '1.7rem',
left: '5.2rem',
gbid: '31011500001320000127'
}, {
top: '1.7rem',
left: '6.7rem',
gbid: '31011500001320000131'
}, {
top: '1.7rem',
left: '8.1rem',
gbid: '31011500001320000109'
}, {
top: '1.7rem',
left: '9.55rem',
gbid: '31011500001320000113'
}, {
top: '3.5rem',
left: '0.85rem',
gbid: '31011500001320000117'
}, {
top: '3.5rem',
left: '2.32rem',
gbid: '31011500001320000121'
}, {
top: '3.5rem',
left: '3.8rem',
gbid: '31011500001320000125'
}, {
top: '3.5rem',
left: '5.2rem',
gbid: '31011500001320000129'
}, {
top: '3.5rem',
left: '6.7rem',
gbid: '31011500001320000107'
}, {
top: '3.5rem',
left: '8.1rem',
gbid: '31011500001320000111'
}, {
top: '4.8rem',
left: '0.85rem',
gbid: '31011500001320000118'
}, {
top: '4.8rem',
left: '2.32rem',
gbid: '31011500001320000122'
}, {
top: '4.8rem',
left: '3.8rem',
gbid: '31011500001320000126'
}, {
top: '4.8rem',
left: '5.2rem',
gbid: '31011500001320000130'
}, {
top: '4.8rem',
left: '6.7rem',
gbid: '31011500001320000108'
}, {
top: '4.8rem',
left: '8.1rem',
gbid: '31011500001320000112'
}, {
top: '6.3rem',
left: '8.4rem',
gbid: '31011500001320000136'
}, {
top: '6.3rem',
left: '4.5rem',
gbid: '31011500001320000133'
}, {
top: '6.3rem',
left: '2.2rem',
gbid: '31011500001320000139'
}, {
top: '7.3rem',
left: '1.7rem',
gbid: '31011500001320000142'
}, {
top: '7.4rem',
left: '0.8rem',
gbid: '31011500001320000138'
}, {
top: '4.3rem',
left: '9.85rem',
gbid: '31011500001320000135'
}, {
top: '2.6rem',
left: '9.85rem',
gbid: '31011500001320000140'
}, {
top: '1.95rem',
left: '10.95rem',
gbid: '31011500001320000137'
}, {
top: '7.3rem',
left: '11.2rem',
gbid: '31011500001320000141'
}
]
}
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/zhoupu_one' + 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/zp/therefloor.jsp 0 → 100644
View file @ 013548b7
<%@ 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}/zp">三号楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>49</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>47</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.3rem',
left: '0.65rem',
gbid: '31011500001320000477'
}, {
top: '0.3rem',
left: '1.65rem',
gbid: '31011500001320000481'
}, {
top: '0.3rem',
left: '2.67rem',
gbid: '31011500001320000485'
}, {
top: '0.3rem',
left: '3.7rem',
gbid: '31011500001320000489'
}, {
top: '0.3rem',
left: '4.7rem',
gbid: '31011500001320000493'
}, {
top: '0.3rem',
left: '5.7rem',
gbid: '31011500001320000461'
}, {
top: '0.3rem',
left: '6.75rem',
gbid: '31011500001320000465'
}, {
top: '0.3rem',
left: '7.78rem',
gbid: '31011500001320000469'
}, {
top: '0.3rem',
left: '8.78rem',
gbid: '31011500001320000473'
}, {
top: '0.3rem',
left: '9.78rem',
gbid: '31011500001320000657'
}, {
top: '1.8rem',
left: '0.65rem',
gbid: '31011500001320000476'
}, {
top: '1.8rem',
left: '1.65rem',
gbid: '31011500001320000480'
}, {
top: '1.8rem',
left: '2.67rem',
gbid: '31011500001320000484'
}, {
top: '1.8rem',
left: '3.7rem',
gbid: '31011500001320000488'
}, {
top: '1.8rem',
left: '4.7rem',
gbid: '31011500001320000492'
}, {
top: '1.8rem',
left: '5.7rem',
gbid: '31011500001320000460'
}, {
top: '1.8rem',
left: '6.75rem',
gbid: '31011500001320000464'
}, {
top: '1.8rem',
left: '7.78rem',
gbid: '31011500001320000468'
}, {
top: '1.8rem',
left: '8.78rem',
gbid: '31011500001320000472'
}, {
top: '1.8rem',
left: '9.78rem',
gbid: '31011500001320000656'
}, {
top: '3.7rem',
left: '0.65rem',
gbid: '31011500001320000478'
}, {
top: '3.7rem',
left: '1.65rem',
gbid: '31011500001320000482'
}, {
top: '3.7rem',
left: '2.67rem',
gbid: '31011500001320000486'
}, {
top: '3.7rem',
left: '3.7rem',
gbid: '31011500001320000490'
}, {
top: '3.7rem',
left: '4.7rem',
gbid: '31011500001320000458'
}, {
top: '3.7rem',
left: '5.7rem',
gbid: '31011500001320000462'
}, {
top: '3.7rem',
left: '6.75rem',
gbid: '31011500001320000466'
}, {
top: '3.7rem',
left: '7.78rem',
gbid: '31011500001320000470'
}, {
top: '3.7rem',
left: '8.78rem',
gbid: '31011500001320000474'
}, {
top: '5.1rem',
left: '0.65rem',
gbid: '31011500001320000479'
}, {
top: '5.1rem',
left: '1.65rem',
gbid: '31011500001320000483'
}, {
top: '5.1rem',
left: '2.67rem',
gbid: '31011500001320000487'
}, {
top: '5.1rem',
left: '3.7rem',
gbid: '31011500001320000491'
}, {
top: '5.1rem',
left: '4.7rem',
gbid: '31011500001320000459'
}, {
top: '5.1rem',
left: '5.7rem',
gbid: '31011500001320000463'
}, {
top: '5.1rem',
left: '6.75rem',
gbid: '31011500001320000467'
}, {
top: '5.1rem',
left: '7.78rem',
gbid: '31011500001320000471'
}, {
top: '5.1rem',
left: '8.78rem',
gbid: '31011500001320000475'
}, {
top: '2.1rem',
left: '10.95rem',
gbid: '31011500001320000498'
}, {
top: '4.5rem',
left: '10rem',
gbid: '31011500001320000496'
}, {
top: '6.5rem',
left: '8.75rem',
gbid: '31011500001320000497'
}, {
top: '6.5rem',
left: '5.2rem',
gbid: '31011500001320000494'
}, {
top: '6.6rem',
left: '3.7rem',
gbid: '31011500001320000501'
}, {
top: '5.6rem',
left: '1.6rem',
gbid: '31011500001320000500'
}, {
top: '7.3rem',
left: '1.7rem',
gbid: '31011500001320000504'
}, {
top: '7.4rem',
left: '0.8rem',
gbid: '31011500001320000499'
}, {
top: '7.4rem',
left: '11.3rem',
gbid: '31011500001320000503'
}, {
top: '7.4rem',
left: '5.2rem',
gbid: '31011500001320000495'
}, {
top: '2.75rem',
left: '10.25rem',
gbid: '31011500001320000502'
}
],
'arr2': [
{
top: '0.3rem',
left: '0.65rem',
gbid: '31011500001320000524'
}, {
top: '0.3rem',
left: '1.65rem',
gbid: '31011500001320000528'
}, {
top: '0.3rem',
left: '2.67rem',
gbid: '31011500001320000532'
}, {
top: '0.3rem',
left: '3.7rem',
gbid: '31011500001320000536'
}, {
top: '0.3rem',
left: '4.7rem',
gbid: '31011500001320000540'
}, {
top: '0.3rem',
left: '5.7rem',
gbid: '31011500001320000508'
}, {
top: '0.3rem',
left: '6.75rem',
gbid: '31011500001320000512'
}, {
top: '0.3rem',
left: '7.78rem',
gbid: '31011500001320000516'
}, {
top: '0.3rem',
left: '8.78rem',
gbid: '31011500001320000520'
}, {
top: '0.3rem',
left: '9.78rem',
gbid: '31011500001320000659'
}, {
top: '1.8rem',
left: '0.65rem',
gbid: '31011500001320000523'
}, {
top: '1.8rem',
left: '1.65rem',
gbid: '31011500001320000527'
}, {
top: '1.8rem',
left: '2.67rem',
gbid: '31011500001320000531'
}, {
top: '1.8rem',
left: '3.7rem',
gbid: '31011500001320000535'
}, {
top: '1.8rem',
left: '4.7rem',
gbid: '31011500001320000539'
}, {
top: '1.8rem',
left: '5.7rem',
gbid: '31011500001320000507'
}, {
top: '1.8rem',
left: '6.75rem',
gbid: '31011500001320000511'
}, {
top: '1.8rem',
left: '7.78rem',
gbid: '31011500001320000515'
}, {
top: '1.8rem',
left: '8.78rem',
gbid: '31011500001320000519'
}, {
top: '1.8rem',
left: '9.78rem',
gbid: '31011500001320000658'
}, {
top: '3.7rem',
left: '0.65rem',
gbid: '31011500001320000525'
}, {
top: '3.7rem',
left: '1.65rem',
gbid: '31011500001320000529'
}, {
top: '3.7rem',
left: '2.67rem',
gbid: '31011500001320000533'
}, {
top: '3.7rem',
left: '3.7rem',
gbid: '31011500001320000533'
}, {
top: '3.7rem',
left: '4.7rem',
gbid: '31011500001320000505'
}, {
top: '3.7rem',
left: '5.7rem',
gbid: '31011500001320000509'
}, {
top: '3.7rem',
left: '6.75rem',
gbid: '31011500001320000513'
}, {
top: '3.7rem',
left: '7.78rem',
gbid: '31011500001320000517'
}, {
top: '3.7rem',
left: '8.78rem',
gbid: '31011500001320000521'
}, {
top: '5.1rem',
left: '0.65rem',
gbid: '31011500001320000526'
}, {
top: '5.1rem',
left: '1.65rem',
gbid: '31011500001320000530'
}, {
top: '5.1rem',
left: '2.67rem',
gbid: '31011500001320000534'
}, {
top: '5.1rem',
left: '3.7rem',
gbid: '31011500001320000538'
}, {
top: '5.1rem',
left: '4.7rem',
gbid: '31011500001320000506'
}, {
top: '5.1rem',
left: '5.7rem',
gbid: '31011500001320000510'
}, {
top: '5.1rem',
left: '6.75rem',
gbid: '31011500001320000514'
}, {
top: '5.1rem',
left: '7.78rem',
gbid: '31011500001320000518'
}, {
top: '5.1rem',
left: '8.78rem',
gbid: '31011500001320000522'
}, {
top: '2.1rem',
left: '10.95rem',
gbid: '31011500001320000544'
}, {
top: '6.5rem',
left: '8.75rem',
gbid: '31011500001320000543'
}, {
top: '6.5rem',
left: '5.2rem',
gbid: '31011500001320000541'
}, {
top: '6.5rem',
left: '2.65rem',
gbid: '31011500001320000546'
}, {
top: '7.3rem',
left: '1.7rem',
gbid: '31011500001320000550'
}, {
top: '7.4rem',
left: '0.8rem',
gbid: '31011500001320000545'
}, {
top: '7.4rem',
left: '11.3rem',
gbid: '31011500001320000549'
}, {
top: '7.4rem',
left: '5.2rem',
gbid: '31011500001320000542'
}, {
top: '2.75rem',
left: '10.25rem',
gbid: '31011500001320000548'
}
]
}
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/zhoupu_there' + 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/zp/twofloor.jsp 0 → 100644
View file @ 013548b7
<%@ 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}/zp">二号楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>39</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: '0.3rem',
left: '0.75rem',
gbid: '31011500001320000234'
}, {
top: '0.3rem',
left: '2.05rem',
gbid: '31011500001320000240'
}, {
top: '0.3rem',
left: '3.3rem',
gbid: '31011500001320000244'
}, {
top: '0.3rem',
left: '4.6rem',
gbid: '31011500001320000248'
}, {
top: '0.3rem',
left: '5.85rem',
gbid: '31011500001320000252'
}, {
top: '0.3rem',
left: '7.1rem',
gbid: '31011500001320000228'
}, {
top: '1.8rem',
left: '0.75rem',
gbid: '31011500001320000233'
}, {
top: '1.8rem',
left: '2.05rem',
gbid: '31011500001320000239'
}, {
top: '1.8rem',
left: '3.3rem',
gbid: '31011500001320000243'
}, {
top: '1.8rem',
left: '4.6rem',
gbid: '31011500001320000247'
}, {
top: '1.8rem',
left: '5.85rem',
gbid: '31011500001320000251'
}, {
top: '1.8rem',
left: '7.1rem',
gbid: '31011500001320000227'
}, {
top: '1.8rem',
left: '8.35rem',
gbid: '31011500001320000256'
}, {
top: '1.8rem',
left: '9.65rem',
gbid: '31011500001320000257'
}, {
top: '3.7rem',
left: '0.75rem',
gbid: '31011500001320000237'
}, {
top: '3.7rem',
left: '2.05rem',
gbid: '31011500001320000241'
}, {
top: '3.7rem',
left: '3.3rem',
gbid: '31011500001320000245'
}, {
top: '3.7rem',
left: '4.6rem',
gbid: '31011500001320000249'
}, {
top: '3.7rem',
left: '5.85rem',
gbid: '31011500001320000225'
}, {
top: '3.7rem',
left: '7.1rem',
gbid: '31011500001320000229'
}, {
top: '3.7rem',
left: '8.35rem',
gbid: '31011500001320000231'
}, {
top: '5.1rem',
left: '0.75rem',
gbid: '31011500001320000238'
}, {
top: '5.1rem',
left: '2.05rem',
gbid: '31011500001320000242'
}, {
top: '5.1rem',
left: '3.3rem',
gbid: '31011500001320000246'
}, {
top: '5.1rem',
left: '4.6rem',
gbid: '31011500001320000250'
}, {
top: '5.1rem',
left: '5.85rem',
gbid: '31011500001320000226'
}, {
top: '5.1rem',
left: '7.1rem',
gbid: '31011500001320000230'
}, {
top: '5.1rem',
left: '8.35rem',
gbid: '31011500001320000232'
}, {
top: '2.1rem',
left: '10.95rem',
gbid: '31011500001320000220'
}, {
top: '4.5rem',
left: '9.9rem',
gbid: '31011500001320000221'
}, {
top: '6.5rem',
left: '8.75rem',
gbid: '31011500001320000222'
}, {
top: '6.5rem',
left: '5.2rem',
gbid: '31011500001320000253'
}, {
top: '6.5rem',
left: '3.3rem',
gbid: '31011500001320000255'
}, {
top: '6.5rem',
left: '2rem',
gbid: '31011500001320000258'
}, {
top: '7.3rem',
left: '1.7rem',
gbid: '31011500001320000224'
}, {
top: '7.4rem',
left: '0.8rem',
gbid: '31011500001320000260'
}, {
top: '7.4rem',
left: '11.3rem',
gbid: '31011500001320000223'
}, {
top: '7.4rem',
left: '5.2rem',
gbid: '31011500001320000254'
}, {
top: '2.75rem',
left: '10.25rem',
gbid: '31011500001320000259'
}
],
'arr2': [
{
top: '0.3rem',
left: '0.75rem',
gbid: '31011500001320000276'
}, {
top: '0.3rem',
left: '2.05rem',
gbid: '31011500001320000280'
}, {
top: '0.3rem',
left: '3.3rem',
gbid: '31011500001320000284'
}, {
top: '0.3rem',
left: '4.6rem',
gbid: '31011500001320000287'
}, {
top: '0.3rem',
left: '5.85rem',
gbid: '31011500001320000290'
}, {
top: '0.3rem',
left: '7.1rem',
gbid: '31011500001320000270'
}, {
top: '1.8rem',
left: '0.75rem',
gbid: '31011500001320000275'
}, {
top: '1.8rem',
left: '2.05rem',
gbid: '31011500001320000279'
}, {
top: '1.8rem',
left: '3.3rem',
gbid: '31011500001320000283'
}, {
top: '1.8rem',
left: '4.6rem',
gbid: '31011500001320000261'
}, {
top: '1.8rem',
left: '5.85rem',
gbid: '31011500001320000289'
}, {
top: '1.8rem',
left: '7.1rem',
gbid: '31011500001320000269'
}, {
top: '1.8rem',
left: '8.35rem',
gbid: '31011500001320000291'
}, {
top: '1.8rem',
left: '9.65rem',
gbid: '31011500001320000292'
}, {
top: '3.7rem',
left: '0.75rem',
gbid: '31011500001320000277'
}, {
top: '3.7rem',
left: '2.05rem',
gbid: '31011500001320000281'
}, {
top: '3.7rem',
left: '3.3rem',
gbid: '31011500001320000285'
}, {
top: '3.7rem',
left: '4.6rem',
gbid: '31011500001320000262'
}, {
top: '3.7rem',
left: '5.85rem',
gbid: '31011500001320000267'
}, {
top: '3.7rem',
left: '7.1rem',
gbid: '31011500001320000271'
}, {
top: '3.7rem',
left: '8.35rem',
gbid: '31011500001320000273'
}, {
top: '5.1rem',
left: '0.75rem',
gbid: '31011500001320000278'
}, {
top: '5.1rem',
left: '2.05rem',
gbid: '31011500001320000282'
}, {
top: '5.1rem',
left: '3.3rem',
gbid: '31011500001320000286'
}, {
top: '5.1rem',
left: '4.6rem',
gbid: '31011500001320000288'
}, {
top: '5.1rem',
left: '5.85rem',
gbid: '31011500001320000268'
}, {
top: '5.1rem',
left: '7.1rem',
gbid: '31011500001320000272'
}, {
top: '5.1rem',
left: '8.35rem',
gbid: '31011500001320000274'
}, {
top: '4.5rem',
left: '9.9rem',
gbid: '31011500001320000265'
}, {
top: '6.5rem',
left: '8.75rem',
gbid: '31011500001320000266'
}, {
top: '6.5rem',
left: '5.2rem',
gbid: '31011500001320000263'
}, {
top: '6.5rem',
left: '3.3rem',
gbid: '31011500001320000294'
}, {
top: '6.5rem',
left: '2rem',
gbid: '31011500001320000293'
}, {
top: '7.3rem',
left: '1.7rem',
gbid: '31011500001320000297'
}, {
top: '7.4rem',
left: '11.3rem',
gbid: '31011500001320000296'
}, {
top: '7.4rem',
left: '5.2rem',
gbid: '31011500001320000264'
}, {
top: '2.75rem',
left: '10.25rem',
gbid: '31011500001320000295'
}
]
}
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/zhoupu_two' + 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/static/js/main.js
View file @ 013548b7
......@@ -206,7 +206,25 @@ var VideoPlayer = {
let gbIds = '';
$.each(data, function (i, obj) {
gbIds += obj.gbId + ',';
html += '<li data-gbid="' + obj.gbId + '"><img src="'+ctx+'/static/images/sp_icon.png"><span ' + (obj.gbId === _this.gbid ? 'style="color:#00e5ff;"' : '') + '>' + obj.place + (obj.deviceNo ? '-' + obj.deviceNo : '') + '</span></li>';
let name = obj.place + (obj.deviceNo ? '-' + obj.deviceNo : '');
let title = name;
if (name.length > 6) {
let splitArray = name.split('-');
if (splitArray.length === 2) {
if (splitArray[0].length <= 4 && splitArray[1].length <=2) {
name = splitArray[0] + '-' + splitArray[1];
} else {
if (splitArray[0].length >= 5) {
name = name.substring(0, 5) + '...';
} else {
name = name.substring(0, 6) + '...';
}
}
} else {
name = name.substring(0, 5) + '...';
}
}
html += '<li data-gbid="' + obj.gbId + '" title="' + title + '"><img src="'+ctx+'/static/images/sp_icon.png"><span ' + (obj.gbId === _this.gbid ? 'style="color:#00e5ff;"' : '') + '>' + name + '</span></li>';
})
$("#videos").append(html);
_this.getListStatus(gbIds);
......
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