Skip to content

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

add 青浦

parent 38be8361
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1843 additions and 94 deletions
src/main/java/com/ces/web/qp/controller/QPController.java
View file @ d2f30251
package com.ces.web.qp.controller; package com.ces.web.qp.controller;
import com.ces.common.constant.Constant; import com.ces.common.constant.Constant;
import com.ces.common.core.domain.Result;
import com.ces.web.device.entity.DeviceInfo;
import com.ces.web.device.service.IDeviceService;
import org.apache.shiro.authz.annotation.RequiresRoles; import org.apache.shiro.authz.annotation.RequiresRoles;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
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.ResponseBody;
import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/** /**
* 王少强 * 王少强
*/ */
@Controller @Controller
@RequestMapping("/qp") @RequestMapping("/qp")
@RequiresRoles({Constant.RoleCode.QP})
public class QPController { public class QPController {
@Autowired
private IDeviceService deviceService;
private Logger logger = LoggerFactory.getLogger(QPController.class);
/** /**
* 进入青浦首页 * 进入青浦首页
* @return * @return
*/ */
@GetMapping @GetMapping
@RequiresRoles({Constant.RoleCode.QP})
public ModelAndView qpIndex(){ public ModelAndView qpIndex(){
return new ModelAndView("qp/areaPlan"); return new ModelAndView("qp/areaPlan");
} }
/** @GetMapping("/onearea")
* 根据楼名统计监控数 public ModelAndView oneareaIndex(){
* @return return new ModelAndView("qp/onearea");
*/ }
@GetMapping("/build/monitors/count")
@RequiresRoles({Constant.RoleCode.QP})
public Result countMonitorsByBuild(){
return Result.success(null); @GetMapping("/twoarea")
public ModelAndView twoareaIndex(){
return new ModelAndView("qp/twoarea");
} }
/** @GetMapping("/threearea")
* 进入青浦楼层页面 public ModelAndView threeareaIndex(){
* @param area return new ModelAndView("qp/threearea");
* @return
*/
@GetMapping("/floor")
@RequiresRoles({Constant.RoleCode.QP})
public ModelAndView getFloors(String area){
ModelAndView mv = new ModelAndView("qp/floor");
List<String> floorList = new ArrayList<String>();
if(area.contains("监区")){
floorList = deviceService.findByPrisonNameAndAreaName("沪-青",area);
}else{
floorList = deviceService.getFloorList("沪-青",area);
}
mv.addObject("area",area);
mv.addObject("floorList",floorList);
return mv;
} }
/** @GetMapping("/fourarea")
* 根据楼层统计监控数 public ModelAndView fourareaIndex(){
* @return return new ModelAndView("qp/fourarea");
*/ }
@GetMapping("/floor/monitors/count")
@RequiresRoles({Constant.RoleCode.QP}) @GetMapping("/fivearea")
@ResponseBody public ModelAndView fiveareaIndex(){
public Result countMonitorsByFloor(String area){ return new ModelAndView("qp/fivearea");
List<Map<String,String>> countList = new ArrayList<>();
if(area.contains("监区")){
countList = deviceService.countByPrisonNameAndAreaName("沪-青",area);
}else{
countList = deviceService.countByPrisonNameAndBuildName("沪-青",area);
}
return Result.success(countList);
} }
@GetMapping("/floor/monitors/list")
@RequiresRoles({Constant.RoleCode.QP}) @GetMapping("/sixarea")
@ResponseBody public ModelAndView sixareaIndex(){
public Result getCameraGbIds(String area,String floor){ return new ModelAndView("qp/sixarea");
List<DeviceInfo> deviceInfoList = new ArrayList<DeviceInfo>(); }
if(area.contains("监区")){
deviceInfoList = deviceService.findByPrisonAndAreaAndFloor("沪-青",area,floor); @GetMapping("/onecq")
}else{ public ModelAndView onecqIndex(){
deviceInfoList = deviceService.findByPrisonAndBuildAndFloor("沪-青",area,floor); return new ModelAndView("qp/onecq");
} }
return Result.success(deviceInfoList);
@GetMapping("/edufloor")
public ModelAndView edufloorIndex(){
return new ModelAndView("qp/edufloor");
} }
} }
src/main/webapp/WEB-INF/views/qp/areaPlan.jsp
View file @ d2f30251
...@@ -36,90 +36,90 @@ ...@@ -36,90 +36,90 @@
<div class="left-menu"> <div class="left-menu">
<ul> <ul>
<li> <li>
<a href="${ctx}/qp/floor?area=01监区"> <a href="${ctx}/qp/onearea">
<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: #ff6363;">73</span> <span style="background-color: #ff6363;">72</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=02监区"> <a href="${ctx}/qp/twoarea">
<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: #ffba00;">74</span> <span style=" background-color: #ffba00;">51</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=03监区"> <a href="${ctx}/qp/threearea">
<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: #43e04e;">72</span> <span style="background-color: #43e04e;">50</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=04监区"> <a href="${ctx}/qp/fourarea">
<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: #2f8fff;">73</span> <span style=" background-color: #2f8fff;">48</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=05监区"> <a href="${ctx}/qp/fivearea">
<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: #ff6363;">71</span> <span style="background-color: #ff6363;">70</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=06监区"> <a href="${ctx}/qp/sixarea">
<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;">55</span> <span style="background-color: #ff8a00;">52</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=一厂区"> <a href="${ctx}/qp/onecq">
<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: #ffba00;">30</span> <span style="background-color: #ffba00;">47</span>
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="${ctx}/qp/floor?area=教育楼"> <a href="${ctx}/qp/edufloor">
<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: #43e04e;">38</span> <span style="background-color: #43e04e;">36</span>
</div> </div>
</a> </a>
</li> </li>
...@@ -130,37 +130,37 @@ ...@@ -130,37 +130,37 @@
<div class="area-box"> <div class="area-box">
<ul> <ul>
<li class="a_floor"> <li class="a_floor">
<a href="${ctx}/qp/floor?area=01监区"> <a href="${ctx}/qp/onearea">
<img src="${ctx}/static/images/A_floor.png"/> <img src="${ctx}/static/images/A_floor.png"/>
<span>一监区</span> <span>一监区</span>
</a> </a>
</li> </li>
<li class="bg1_floor"> <li class="bg1_floor">
<a href="${ctx}/qp/floor?area=02监区"> <a href="${ctx}/qp/twoarea">
<img src="${ctx}/static/images/bgq_floor.png"/> <img src="${ctx}/static/images/bgq_floor.png"/>
<span>二监区</span> <span>二监区</span>
</a> </a>
</li> </li>
<li class="b_floor"> <li class="b_floor">
<a href="${ctx}/qp/floor?area=03监区"> <a href="${ctx}/qp/threearea">
<img src="${ctx}/static/images/B_floor.png"/> <img src="${ctx}/static/images/B_floor.png"/>
<span>三监区</span> <span>三监区</span>
</a> </a>
</li> </li>
<li class="g_floor"> <li class="g_floor">
<a href="${ctx}/qp/floor?area=04监区"> <a href="${ctx}/qp/fourarea">
<img src="${ctx}/static/images/G_floor.png"/> <img src="${ctx}/static/images/G_floor.png"/>
<span>四监区</span> <span>四监区</span>
</a> </a>
</li> </li>
<li class="c_floor"> <li class="c_floor">
<a href="${ctx}/qp/floor?area=05监区"> <a href="${ctx}/qp/fivearea">
<img src="${ctx}/static/images/C_floor.png"/> <img src="${ctx}/static/images/C_floor.png"/>
<span>五监区</span> <span>五监区</span>
</a> </a>
</li> </li>
<li class="e_floor"> <li class="e_floor">
<a href="${ctx}/qp/floor?area=06监区"> <a href="${ctx}/qp/sixarea">
<img src="${ctx}/static/images/E_floor.png"/> <img src="${ctx}/static/images/E_floor.png"/>
<span>六监区</span> <span>六监区</span>
</a> </a>
...@@ -169,13 +169,13 @@ ...@@ -169,13 +169,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}/qp/floor?area=一厂区"> <a href="${ctx}/qp/onecq">
<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}/qp/floor?area=教育楼"> <a href="${ctx}/qp/edufloor">
<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/qp/edufloor.jsp 0 → 100644
View file @ d2f30251
<%@ 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}/qp">教育楼</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>12</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>12</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: '3.5rem',
left: '0.58rem',
gbid: '31011800001320003084'
}, {
top: '3.6rem',
left: '2.1rem',
gbid: '31011800001320002975'
}, {
top: '2.5rem',
left: '3.95rem',
gbid: '31011800001320003057'
}, {
top: '2.5rem',
left: '5.95rem',
gbid: '31011800001320003077'
}, {
top: '4.9rem',
left: '3.95rem',
gbid: '31011800001320002979'
}, {
top: '4.9rem',
left: '5.95rem',
gbid: '31011800001320002974'
}, {
top: '2.6rem',
left: '7.8rem',
gbid: '31011800001320002976'
}, {
top: '5rem',
left: '7.8rem',
gbid: '31011800001320003080'
}, {
top: '5rem',
left: '9.2rem',
gbid: '31011800001320003081'
}, {
top: '2.35rem',
left: '9.19rem',
gbid: '31011800001320003079'
}, {
top: '3.5rem',
left: '9.68rem',
gbid: '31011800001320002977'
}, {
top: '4rem',
left: '11.08rem',
gbid: '31011800001320003083'
}
],
'arr2': [
{
top: '3.5rem',
left: '0.58rem',
gbid: '31011800001320003085'
}, {
top: '3.6rem',
left: '2.1rem',
gbid: '31011800001320002978'
}, {
top: '2.5rem',
left: '3.85rem',
gbid: '31011800001320003065'
}, {
top: '2.5rem',
left: '5.15rem',
gbid: '31011800001320003075'
}, {
top: '2.5rem',
left: '6.3rem',
gbid: '31011800001320003063'
}, {
top: '2.5rem',
left: '7.8rem',
gbid: '31011800001320003060'
}, {
top: '4.9rem',
left: '3.85rem',
gbid: '31011800001320003064'
}, {
top: '4.9rem',
left: '6.3rem',
gbid: '31011800001320003061'
}, {
top: '4.9rem',
left: '7.8rem',
gbid: '31011800001320003062'
}, {
top: '4.9rem',
left: '9.2rem',
gbid: '31011800001320003165'
}, {
top: '7rem',
left: '5.4rem',
gbid: '31011800001320002981'
},
{
top: '0.725rem',
left: '5.4rem',
gbid: '31011800001320002980'
}
],
'arr3': [
{
top: '3.5rem',
left: '0.58rem',
gbid: '31011800001320002985'
}, {
top: '3.6rem',
left: '2.1rem',
gbid: '31011800001320002984'
}, {
top: '2.5rem',
left: '3.85rem',
gbid: '31011800001320003074'
}, {
top: '2.5rem',
left: '5.15rem',
gbid: '31011800001320003073'
}, {
top: '2.5rem',
left: '6.3rem',
gbid: '31011800001320003072'
}, {
top: '2.5rem',
left: '7.8rem',
gbid: '31011800001320003067'
}, {
top: '4.9rem',
left: '3.76rem',
gbid: '31011800001320003070'
}, {
top: '4.9rem',
left: '6.3rem',
gbid: '31011800001320003068'
}, {
top: '4.9rem',
left: '7.8rem',
gbid: '31011800001320003071'
}, {
top: '4.9rem',
left: '9.2rem',
gbid: '31011800001320003066'
}, {
top: '7rem',
left: '5.4rem',
gbid: '31011800001320002982'
}, {
top: '4.9rem',
left: '5.2rem',
gbid: '31011800001320003069'
}
]
}
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/jiaoyu_' + 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/qp/fivearea.jsp 0 → 100644
View file @ d2f30251
This diff is collapsed.
src/main/webapp/WEB-INF/views/qp/floor.jsp deleted 100644 → 0
View file @ 38be8361
This diff is collapsed.
src/main/webapp/WEB-INF/views/qp/fourarea.jsp 0 → 100644
View file @ d2f30251
<%@ 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}/qp">四监区</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>7</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>1</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
<script>
let dataList = {
'arr1': [
{
top: '3.5rem',
left: '0.58rem',
gbid: '31011800001320002314'
}, {
top: '3.9rem',
left: '3.8rem',
gbid: '31011800001320002313'
}, {
top: '5rem',
left: '7.25rem',
gbid: '31011800001320002757'
}, {
top: '5rem',
left: '9.2rem',
gbid: '31011800001320002311'
}, {
top: '3.6rem',
left: '9.68rem',
gbid: '31011800001320002759'
}, {
top: '2.55rem',
left: '11.08rem',
gbid: '31011800001320002312'
}, {
top: '5.2rem',
left: '11.08rem',
gbid: '31011800001320002758'
}
],
'arr2': [
{
top: '0.75rem',
left: '5.5rem',
gbid: '31011800001320002328'
}, {
top: '0.75rem',
left: '10.38rem',
gbid: '31011800001320002763'
}, {
top: '3.4rem',
left: '0.6rem',
gbid: '31011800001320002332'
}, {
top: '3.6rem',
left: '1.34rem',
gbid: '31011800001320002329'
}, {
top: '3.8rem',
left: '9.5rem',
gbid: '31011800001320002331'
}, {
top: '7rem',
left: '10.4rem',
gbid: '31011800001320002764'
}, {
top: '7rem',
left: '5.5rem',
gbid: '31011800001320002327'
}, {
top: '7rem',
left: '0.8rem',
gbid: '31011800001320002330'
}, {
top: '2.6rem',
left: '2.5rem',
gbid: '31011800001320002326'
}, {
top: '2.6rem',
left: '3.7rem',
gbid: '31011800001320002324'
}, {
top: '2.6rem',
left: '5.1rem',
gbid: '31011800001320002322'
}, {
top: '2.6rem',
left: '6.5rem',
gbid: '31011800001320002320'
}, {
top: '2.6rem',
left: '7.9rem',
gbid: '31011800001320002318'
}, {
top: '2.6rem',
left: '9.2rem',
gbid: '31011800001320002316'
}, {
top: '5rem',
left: '2.5rem',
gbid: '31011800001320002325'
}, {
top: '5rem',
left: '3.7rem',
gbid: '31011800001320002323'
}, {
top: '5rem',
left: '5.1rem',
gbid: '31011800001320002321'
}, {
top: '5rem',
left: '6.5rem',
gbid: '31011800001320002319'
}, {
top: '5rem',
left: '7.9rem',
gbid: '31011800001320002317'
}, {
top: '5rem',
left: '9.2rem',
gbid: '31011800001320002315'
}
],
'arr3': [
{
top: '0.75rem',
left: '5.5rem',
gbid: '31011800001320002346'
}, {
top: '0.75rem',
left: '10.38rem',
gbid: '31011800001320002769'
}, {
top: '3.4rem',
left: '0.6rem',
gbid: '31011800001320002350'
}, {
top: '3.6rem',
left: '1.34rem',
gbid: '31011800001320002347'
}, {
top: '3.8rem',
left: '9.5rem',
gbid: '31011800001320002348'
}, {
top: '7rem',
left: '10.4rem',
gbid: '31011800001320002765'
}, {
top: '7rem',
left: '5.5rem',
gbid: '31011800001320002345'
}, {
top: '7rem',
left: '0.8rem',
gbid: '31011800001320002349'
}, {
top: '2.6rem',
left: '2.5rem',
gbid: '31011800001320002444'
}, {
top: '2.6rem',
left: '3.7rem',
gbid: '31011800001320002343'
}, {
top: '2.6rem',
left: '5.1rem',
gbid: '31011800001320002340'
}, {
top: '2.6rem',
left: '6.5rem',
gbid: '31011800001320002338'
}, {
top: '2.6rem',
left: '7.9rem',
gbid: '31011800001320002336'
}, {
top: '2.6rem',
left: '9.2rem',
gbid: '31011800001320002334'
}, {
top: '5rem',
left: '2.5rem',
gbid: '31011800001320002344'
}, {
top: '5rem',
left: '3.7rem',
gbid: '31011800001320002341'
}, {
top: '5rem',
left: '5.1rem',
gbid: '31011800001320002339'
}, {
top: '5rem',
left: '6.5rem',
gbid: '31011800001320002337'
}, {
top: '5rem',
left: '7.9rem',
gbid: '31011800001320002335'
}, {
top: '5rem',
left: '9.2rem',
gbid: '31011800001320002333'
}
],
'arr4': [
{
top: '7.15rem',
left: '5.6rem',
gbid: '31011800001320002510'
}
]
}
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/qp/jianqu3_' + 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/qp/onearea.jsp 0 → 100644
View file @ d2f30251
This diff is collapsed.
src/main/webapp/WEB-INF/views/qp/onecq.jsp 0 → 100644
View file @ d2f30251
<%@ 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}/qp">一厂区</a></div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>19</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>14</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>14</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.75rem',
left: '5.3rem',
gbid: '31011800001320002123'
}, {
top: '7rem',
left: '5.5rem',
gbid: '31011800001320002029'
}, {
top: '3.5rem',
left: '0.52rem',
gbid: '31011800001320002110'
}, {
top: '2.48rem',
left: '3.36rem',
gbid: '31011800001320002112'
}, {
top: '2.48rem',
left: '2.36rem',
gbid: '31011800001320002122'
}, {
top: '2.48rem',
left: '4.3rem',
gbid: '31011800001320002114'
}, {
top: '2.48rem',
left: '5.3rem',
gbid: '31011800001320002116'
}, {
top: '2.48rem',
left: '6.28rem',
gbid: '31011800001320002118'
}, {
top: '2.48rem',
left: '7.25rem',
gbid: '31011800001320002120'
}, {
top: '2.48rem',
left: '8.9rem',
gbid: '31011800001320002127'
}, {
top: '5rem',
left: '2.36rem',
gbid: '31011800001320002124'
}, {
top: '5rem',
left: '3.36rem',
gbid: '31011800001320002113'
}, {
top: '5rem',
left: '4.3rem',
gbid: '31011800001320002115'
}, {
top: '5rem',
left: '5.3rem',
gbid: '31011800001320002117'
}, {
top: '5rem',
left: '6.28rem',
gbid: '31011800001320002119'
}, {
top: '5rem',
left: '7.25rem',
gbid: '31011800001320002121'
}, {
top: '5rem',
left: '8.9rem',
gbid: '31011800001320002126'
}, {
top: '3.8rem',
left: '7.5rem',
gbid: '31011800001320002125'
},
{
top: '3.55rem',
left: '11.18rem',
gbid: '31011800001320002111'
}
],
'arr2': [
{
top: '3.6rem',
left: '0.5rem',
gbid: '31011800001320002140'
}, {
top: '3.6rem',
left: '11.18rem',
gbid: '31011800001320002139'
}, {
top: '2.5rem',
left: '2.45rem',
gbid: '31011800001320002138'
}, {
top: '2.5rem',
left: '3.6rem',
gbid: '31011800001320002136'
}, {
top: '2.5rem',
left: '4.8rem',
gbid: '31011800001320002134'
}, {
top: '2.5rem',
left: '6rem',
gbid: '31011800001320002132'
}, {
top: '2.5rem',
left: '7.2rem',
gbid: '31011800001320002130'
}, {
top: '4.9rem',
left: '2.45rem',
gbid: '31011800001320002137'
}, {
top: '4.9rem',
left: '3.6rem',
gbid: '31011800001320002135'
}, {
top: '4.9rem',
left: '4.8rem',
gbid: '31011800001320002133'
}, {
top: '4.9rem',
left: '6rem',
gbid: '31011800001320002131'
}, {
top: '4.9rem',
left: '7.2rem',
gbid: '31011800001320002129'
}, {
top: '3.8rem',
left: '7.45rem',
gbid: '31011800001320002142'
}, {
top: '3.8rem',
left: '8.9rem',
gbid: '31011800001320002141'
}
],
'arr3': [
{
top: '3.6rem',
left: '0.5rem',
gbid: '31011800001320002154'
}, {
top: '3.6rem',
left: '11.18rem',
gbid: '31011800001320002153'
}, {
top: '2.5rem',
left: '2.45rem',
gbid: '31011800001320002152'
}, {
top: '2.5rem',
left: '3.6rem',
gbid: '31011800001320002150'
}, {
top: '2.5rem',
left: '4.8rem',
gbid: '31011800001320002148'
}, {
top: '2.5rem',
left: '6rem',
gbid: '31011800001320002146'
}, {
top: '2.5rem',
left: '7.2rem',
gbid: '31011800001320002144'
}, {
top: '4.9rem',
left: '2.45rem',
gbid: '31011800001320002151'
}, {
top: '4.9rem',
left: '3.6rem',
gbid: '31011800001320002149'
}, {
top: '4.9rem',
left: '4.8rem',
gbid: '31011800001320002147'
}, {
top: '4.9rem',
left: '6rem',
gbid: '31011800001320002145'
}, {
top: '4.9rem',
left: '7.2rem',
gbid: '31011800001320002143'
}, {
top: '3.8rem',
left: '7.45rem',
gbid: '31011800001320002156'
}, {
top: '3.8rem',
left: '8.9rem',
gbid: '31011800001320002155'
}
]
}
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/changqu_' + 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/qp/sixarea.jsp 0 → 100644
View file @ d2f30251
This diff is collapsed.
src/main/webapp/WEB-INF/views/qp/threearea.jsp 0 → 100644
View file @ d2f30251
This diff is collapsed.
src/main/webapp/WEB-INF/views/qp/twoarea.jsp 0 → 100644
View file @ d2f30251
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment