Skip to content

J
jianchayuan
Commit a80e5753 authored by zhangyudan's avatar zhangyudan
Browse files
Options

Merge branch 'master' of ssh://180.168.156.211:2902/liuqing/jianchayuan

parents 200eae61 c516946e
Hide whitespace changes
Inline Side-by-side
Showing with 1825 additions and 185 deletions
plandirectory/areaPlan.html
View file @ a80e5753
......@@ -5,7 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<link rel="stylesheet" href="../static/css/common.css">
<script>
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find("img").css("transform", "scale(1.03)"); /* 鼠标进入时将图片放大为1.2倍 */
}).mouseleave(function() {
$(this).find("img").css("transform", "scale(1)"); /* 鼠标离开时恢复图片原始大小 */
});
});
</script>
</head>
<body>
<div class="container">
......@@ -98,30 +108,35 @@
<ul>
<li class="a_floor">
<a href="#"> <img src="../static/images/A_floor.png"/></a>
<span>A栋</span>
</li>
<li class="bg1_floor">
<a href="#"> <img src="../static/images/bgq_floor.png"/></a>
<span>办公楼</span>
</li>
<li class="b_floor">
<a href="#"> <img src="../static/images/B_floor.png"/></a>
<span>B栋</span>
</li>
<li class="g_floor">
<a href="#"> <img src="../static/images/G_floor.png"/></a>
<span>G栋</span>
</li>
<li class="c_floor">
<a href="#"> <img src="../static/images/C_floor.png"/></a>
<span>C栋</span>
</li>
<li class="e_floor">
<a href="#"> <img src="../static/images/E_floor.png"/></a>
</li>
<li class="d_floor">
<a href="#"> <img src="../static/images/D_floor.png"/></a>
<span>E栋</span>
</li>
<li class="d_floor_index">
<a href="#"> <img src="../static/images/D_floor_1.png"/></a>
<span>D栋</span>
</li>
<li class="f_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
<span>F栋</span>
</li>
<!-- <li class="h_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
......
plandirectory/commonmodel.html
View file @ a80e5753
......@@ -4,6 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
......@@ -19,9 +20,85 @@
/* background-position-x: center; */
background-size: cover;
}
</style>
/* 修改背景图片 */
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* 修改模态框样式 */
.modal-dialog {
background-image: url("../static/images/tc_bj.png"); /* 替换为你的背景图片路径和名称 */
background-size: cover; /* 自动适应尺寸并覆盖整个模态框 */
background-repeat: no-repeat; /* 防止重复平铺 */
width: 75%; /* 设置模态框宽度为屏幕的一半 */
height: 68vh; /* 设置模态框高度为屏幕高度的一半 */
max-width: 1200px; /* 设置最大宽度 */
max-height: 700px; /* 设置最大高度 */
}
/* 修改模态框样式 */
.modal-content {
background-color: #00254d00;
border: none;
}
.modal-title {
font-family: 'PingFang-SC-Bold';
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #ffffff;
}
.modal-body {
display: flex;
padding: 30px;
}
#cameraText {
width: 50%; /* 修改左侧文字占比 */
padding: 20px; /* 修改文字内边距 */
}
#cameraText p {
margin-bottom: 10px; /* 修改段落之间的间距 */
}
#cameraVideo {
width: 50%; /* 修改右侧视频占比 */
padding: 0 10px; /* 修改视频内边距 */}
#cameraVideo video {
width: 100%; /* 修改视频宽度 */
outline: none; /* 去掉视频播放器的外边框 */
}
.modal-content .title{
text-align: center;
line-height: 40px;
margin-top: 20px;
font-size: 0.25rem;
}
.modal-body ul{
margin-left: 20px;
margin-top: 10px;
}
.modal-body ul li{
height: 40px;
font-size: 16px;
cursor: pointer;
}
.modal-body ul li span{
margin-left: 10px;
font-size: 0.2rem;
color: #eee;
}
.padding_box {
padding: 0.12rem 0.7rem
}
</style>
<script>
$(function () {
// 监控点数量的数组
......@@ -230,40 +307,9 @@
{
top: '7rem',
left: '7.4rem'
},
{
top: '8rem',
left: '0.5rem'
}, {
top: '8rem',
left: '1.8rem'
},{
top: '8rem',
left: '8rem'
},{
top: '8rem',
left: '4.6rem'
},{
top: '8rem',
left: '6rem'
},{
top: '8rem',
left: '7.4rem'
},{
top: '8rem',
left: '8.8rem'
},{
top: '8rem',
left: '10.2rem'
},{
top: '8rem',
left: '11.5rem'
}
];
console.log(arr.length)
debugger
// 更新摄像头视图的函数
function updateCameras (index) {
// 计算要显示的摄像头数量
......@@ -274,7 +320,6 @@
// 生成一个随机的起始索引
var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
debugger
// 从arr中获取当前楼层的摄像头位置，从随机的起始索引开始
var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
......@@ -311,12 +356,61 @@
function handleClick (cameraImg) {
console.log('Clicked camera', cameraImg);
// 处理摄像头点击事件
// 填充视频和文本到模态框
var $modal = $('#cameraModal');
$('.modal-content .title').html('一号房间监控点情况');
// 假设每个摄像头的视频源可能不同，可以设置为动态获取
$('#cameraVideo source').attr('src', 'path_to_camera_video_source.mp4');
$('#cameraVideo video')[0].load();
// 隐藏模态框的关闭按钮和右上角的关闭按钮
$modal.find('.close').hide();
$modal.modal({
backdrop: 'static',
keyboard: false
});
// 显示模态框
$modal.modal('show');
}
</script>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="cameraModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="title">一号房间监控点情况</div>
<div class="modal-body">
<!-- 左侧文字 -->
<div style="float:left; width:15%;">
<!-- 这里放置动态加载的文本，例如摄像头信息 -->
<ul>
<li><img src="../static/images/sp_icon.png"><span>监控1001</span></li>
<li><img src="../static/images/sp_icon.png"><span>监控1002</span></li>
<li><img src="../static/images/sp_icon.png"><span>监控1003</span></li>
<li><img src="../static/images/sp_icon.png"><span>监控1004</span></li>
<li><img src="../static/images/sp_icon.png"><span>监控1005</span></li>
</ul>
</div>
<!-- 右侧视频 -->
<div style="float:right; width:85%;" id="cameraVideo">
<div id="new_data"></div>
<video width="100%" controls poster="../static/images/sp_model.png">
<source src="视频文件路径/URL" type="video/mp4"> <!-- 修改为你的视频文件路径或URL -->
<!-- 加载摄像头视频流或者视频文件 -->
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content_top"></div>
<div class="flex-box padding_box">
......@@ -358,6 +452,37 @@
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
<script>
// 关闭模态框
$('#cameraModal').on('hidden.bs.modal', function (e) {
// 清空视频源
$('#cameraVideo source').attr('src', '');
$('#cameraVideo video')[0].load();
});
// 点击弹窗外的区域关闭弹窗
$(document).on('click', function (e) {
if ($(e.target).hasClass('modal')) {
$('#cameraModal').modal('hide');
}
});
// 在DOM加载完成后执行
$(document).ready(function() {
// 为li元素添加点击事件处理程序
$(".modal-content li").click(function() {
// 在点击事件中执行你想要的操作，例如弹窗等
alert("点击了" + $(this).find("span").text());
});
});
</script>
</body>
</html>
\ No newline at end of file
static/css/common.css
View file @ a80e5753
......@@ -162,12 +162,20 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
position: absolute;
}
.area-right ul li span{
position: fixed;
font-size: 0.6rem;
}
.area-right ul .a_floor img{
width: 12.6rem;
}
.area-right ul .a_floor{
left: 3.9rem;
top: 3rem;
}
.area-right ul .a_floor span{
left: 26rem;
top: 7rem;
}
.area-right ul .bg1_floor img{
width: 16rem;
......@@ -176,6 +184,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left: 4rem;
top: 4.6rem;
}
.area-right ul .bg1_floor span{
left: 30.7rem;
top:8.4rem;
}
.area-right ul .b_floor img{
width: 5rem;
}
......@@ -183,6 +195,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left: 4rem;
top: 7.8rem;
}
.area-right ul .b_floor span{
left: 20rem;
top: 13.6rem;
}
.area-right ul .b_floor{
left: 4rem;
top: 7.8rem;
......@@ -194,6 +210,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left: 4rem;
top: 12.2rem;
}
.area-right ul .g_floor span{
margin-top: 2.5rem;
margin-left: -2.4rem;
}
.area-right ul .c_floor img{
width: 7.3rem;
}
......@@ -201,6 +221,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left: 13.6rem;
top: 4.2rem;
}
.area-right ul .c_floor span{
left: 31rem;
top: 11.8rem;
}
.area-right ul .e_floor img{
width: 5rem;
}
......@@ -209,6 +233,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left: 15.5rem;
top: 13.5rem;
}
.area-right ul .e_floor span{
margin-top: 1rem;
margin-left: -1.8rem;
}
.area-right ul .d_floor img{
width: 3rem;
}
......@@ -216,6 +244,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
right: 12rem;
top: 6rem;
}
.area-right ul .d_floor_index span{
margin-top: 5rem;
margin-left: -1.8rem;
}
.area-right ul .f_floor img{
width: 5rem;
}
......@@ -223,13 +255,17 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
right: 2.6rem;
top: 11.7rem;
}
.area-right ul .f_floor span{
margin-top: 0.6rem;
margin-left: -1.8rem;
}
.area-right ul .d_floor_index img{
width: 5rem;
}
.area-right ul .d_floor_index{
right: 12rem;
right: 11rem;
z-index: 1;
top: 6rem;
top: 6.6rem;
}
/**业务层**/
......@@ -239,4 +275,4 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
margin: 0 auto;
margin-top: 2rem;
background-size: 100% 100%;
}
\ No newline at end of file
}
static/images/A_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/A_floor.png

188 KB | W: | H:

static/images/A_floor.png

186 KB | W: | H:

static/images/A_floor.png
static/images/A_floor.png
static/images/A_floor.png
static/images/A_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/B_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/B_floor.png

51.8 KB | W: | H:

static/images/B_floor.png

50.4 KB | W: | H:

static/images/B_floor.png
static/images/B_floor.png
static/images/B_floor.png
static/images/B_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/C_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/C_floor.png

108 KB | W: | H:

static/images/C_floor.png

108 KB | W: | H:

static/images/C_floor.png
static/images/C_floor.png
static/images/C_floor.png
static/images/C_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/D_floor_1.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/D_floor_1.png

67.6 KB | W: | H:

static/images/D_floor_1.png

66.7 KB | W: | H:

static/images/D_floor_1.png
static/images/D_floor_1.png
static/images/D_floor_1.png
static/images/D_floor_1.png
  • 2-up
  • Swipe
  • Onion skin
static/images/E_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/E_floor.png

46.3 KB | W: | H:

static/images/E_floor.png

45.2 KB | W: | H:

static/images/E_floor.png
static/images/E_floor.png
static/images/E_floor.png
static/images/E_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/F_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/F_floor.png

36.7 KB | W: | H:

static/images/F_floor.png

36.9 KB | W: | H:

static/images/F_floor.png
static/images/F_floor.png
static/images/F_floor.png
static/images/F_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/G_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/G_floor.png

109 KB | W: | H:

static/images/G_floor.png

107 KB | W: | H:

static/images/G_floor.png
static/images/G_floor.png
static/images/G_floor.png
static/images/G_floor.png
  • 2-up
  • Swipe
  • Onion skin
static/images/bgq_floor.png
View replaced file @ 200eae61 View file @ a80e5753
static/images/bgq_floor.png

81.6 KB | W: | H:

static/images/bgq_floor.png

78.5 KB | W: | H:

static/images/bgq_floor.png
static/images/bgq_floor.png
static/images/bgq_floor.png
static/images/bgq_floor.png
  • 2-up
  • Swipe
  • Onion skin
wgs/beijian.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(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);
//循环数组 打摄像头位置
// var arr = [{
// top: '1.0rem',
// left: '2.25rem'
// }, {
// top: '1rem',
// left: '6rem'
// }, {
// top: '2.3rem',
// left: '0.4rem'
// }, {
// top: '2.3rem',
// left: '1.7rem'
// }, {
// top: '2.3rem',
// left: '3rem'
// }, {
// top: '2.3rem',
// left: '4.25rem'
// }, {
// top: '2.3rem',
// left: '5.5rem'
// }, {
// top: '2.3rem',
// left: '6.8rem'
// }, {
// top: '2.3rem',
// left: '8.05rem'
// }, {
// top: '3.8rem',
// left: '0.2rem'
// }, {
// top: '4rem',
// left: '1.3rem'
// }, {
// top: '3.8rem',
// left: '6.6rem'
// }, {
// top: '4.6rem',
// left: '6.6rem'
// }, {
// top: '5.9rem',
// left: '2.2rem'
// }, {
// top: '5.9rem',
// left: '6.0rem'
// }, {
// top: '7.2rem',
// left: '0.4rem'
// }, {
// top: '7.2rem',
// left: '1.7rem'
// }, {
// top: '7.2rem',
// left: '3rem'
// }, {
// top: '7.2rem',
// left: '4.3rem'
// }, {
// top: '7.2rem',
// left: '5.5rem'
// }, {
// top: '7.2rem',
// left: '6.8rem'
// }, {
// top: '7.2rem',
// left: '8.1rem'
// }, {
// top: '8.2rem',
// left: '1.9rem'
// }, {
// top: "2.1rem",
// left: "10.8rem"
// }, {
// top: "2.95rem",
// left: "10.4rem"
// }, {
// top: "3.95rem",
// left: "10.4rem"
// }, {
// top: "3.95rem",
// left: "11.4rem"
// }, {
// top: "8.0rem",
// left: "10.8rem"
// }]
// var divElement = document.querySelector('.room_box');
// console.log(divElement)
// let htmlTxt = '<img class="bg_img" src="../static/images/beijian1.png" alt="">'
// for (let i = 0; i < arr.length; i++) {
// console.log(divElement)
// htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// // 使用 innerHTML 添加元素
// }
// divElement.innerHTML = htmlTxt;
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '3.8rem',
left: '0.2rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: '8.2rem',
left: '1.9rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}],
'arr2': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "0.1rem",
left: "11.2rem"
}, {
top: "0.1rem",
left: "11.2rem"
}, {
top: "1.4rem",
left: "10.0rem"
}, {
top: "1.4rem",
left: "10.8rem"
}, {
top: "1.4rem",
left: "11.5rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "5.7rem",
left: "10.0rem"
}, {
top: "5.7rem",
left: "10.8rem"
}, {
top: "5.7rem",
left: "11.5rem"
}, {
top: "8.25rem",
left: "10.8rem"
}],
'arr3': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}],
'arr4': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '0.2rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/beijian' + index + '.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</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">北监</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>三楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>四楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
wgs/canteen.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding: 0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.5rem',
left: '2.3rem'
}, {
top: '0.5rem',
left: '10rem',
}, {
top: '1.7rem',
left: '0.1rem',
}, {
top: '1.7rem',
left: '3.1rem',
}, {
top: '1.7rem',
left: '10rem',
}, {
top: '2.7rem',
left: '0.1rem',
}, {
top: '2.7rem',
left: '3.1rem',
}, {
top: '2.7rem',
left: '10rem',
}, {
top: '3.7rem',
left: '0.1rem',
}, {
top: '3.7rem',
left: '3.1rem',
}, {
top: '3.7rem',
left: '10rem',
}, {
top: '4.55rem',
left: '0.1rem',
}, {
top: '4.55rem',
left: '3.1rem',
}, {
top: '4.55rem',
left: '6.6rem',
}, {
top: '4.55rem',
left: '9.45rem',
}, {
top: '6.45rem',
left: '0.1rem',
}, {
top: '6.45rem',
left: '3.1rem',
}, {
top: '6.45rem',
left: '6.6rem',
}, {
top: '6.45rem',
left: '9.45rem',
}, {
top: '5.5rem',
left: '0.1rem',
}, {
top: '5.5rem',
left: '2.1rem',
}, {
top: '5.5rem',
left: '4.1rem',
}, {
top: '5.5rem',
left: '6.6rem',
}, {
top: '5.5rem',
left: '9.45rem',
}, {
top: '7.4rem',
left: '0.1rem',
}, {
top: '7.4rem',
left: '3.1rem',
}, {
top: '7.4rem',
left: '6.6rem',
}, {
top: '7.40rem',
left: '9.45rem',
}, {
top: '4rem',
left: '5.85rem',
}, {
top: '7.6rem',
left: '6.1rem',
}]
$(function () {
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/canteen.png" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">炊场</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>炊场</p>
<p class="monitor">监控点<span>30</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
wgs/jiaoyu.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(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) {
//循环数组 打摄像头位置
let dataList = {
'arr1': [{
top: '0.9rem',
left: '0.1rem'
}, {
top: '6.35rem',
left: '0.1rem'
}, {
top: '5.5rem',
left: '0.5rem'
},
{
top: '0.1rem',
left: '3.95rem'
}, {
top: '0.1rem',
left: '6.35rem'
}, {
top: '0.1rem',
left: '9.1rem'
}, {
top: '0.75rem',
left: '2rem'
}, {
top: '0.75rem',
left: '4.2rem'
}, {
top: '0.75rem',
left: '6.25rem'
}, {
top: '0.75rem',
left: '9rem'
}, {
top: '2.2rem',
left: '1.6rem'
}, {
top: '2.2rem',
left: '2.3rem'
}, {
top: '2.2rem',
left: '3.0rem'
}, {
top: '2.2rem',
left: '3.7rem'
}, {
top: '2.2rem',
left: '4.4rem'
}, {
top: '2.2rem',
left: '5.1rem'
}, {
top: '2.2rem',
left: '6.75rem'
}, {
top: '2.2rem',
left: '7.6rem'
}, {
top: '2.2rem',
left: '8.45rem'
}, {
top: '2.2rem',
left: '9.3rem'
}, {
top: '2.2rem',
left: '10.1rem'
}, {
top: '3.8rem',
left: '4.3rem'
}, {
top: '3.65rem',
left: '5.9rem'
}, {
top: "3.8rem",
left: "9.6rem"
}, {
top: "5.1rem",
left: "4.1rem"
}, {
top: "5.1rem",
left: "6.7rem"
}, {
top: "5.1rem",
left: "9.6rem"
}, {
top: "5.6rem",
left: "11.3rem"
}, {
top: "6.4rem",
left: "4.1rem"
}, {
top: "6.4rem",
left: "6.7rem"
}, {
top: "6.4rem",
left: "9.6rem"
}, {
top: "7.3rem",
left: "5.4rem"
}, {
top: "7.8rem",
left: "2.8rem"
}, {
top: "7.8rem",
left: "7.7rem"
}, {
top: "8.3rem",
left: "2.9rem"
}, {
top: "8.2rem",
left: "5.5rem"
}, {
top: "8.2rem",
left: "7.75rem"
}],
'arr2': [{
top: '0.6rem',
left: '0.5rem'
}, {
top: '0.6rem',
left: '4.3rem'
}, {
top: '0.6rem',
left: '10rem'
},
{
top: '0.6rem',
left: '11.2rem'
}, {
top: '2.8rem',
left: '0.5rem'
}, {
top: '2.4rem',
left: '5.9rem'
}, {
top: '2rem',
left: '11.2rem'
}, {
top: '7.7rem',
left: '0.5rem'
}, {
top: '7.7rem',
left: '1.85rem'
}, {
top: '7.8rem',
left: '5.1rem'
}, {
top: '7.7rem',
left: '11.2rem'
}],
'arr3': [{
top: '0.6rem',
left: '0.5rem'
}, {
top: '0.6rem',
left: '2.7rem'
}, {
top: '0.6rem',
left: '5.9rem'
}, {
top: '0.6rem',
left: '8.5rem'
}, {
top: '0.6rem',
left: '10rem'
},
{
top: '0.6rem',
left: '11.2rem'
}, {
top: '2rem',
left: '0.5rem'
}, {
top: '3.8rem',
left: '0.5rem'
}, {
top: '2.3rem',
left: '1.8rem'
}, {
top: '3.5rem',
left: '1.8rem'
}, {
top: '4.8rem',
left: '1.8rem'
}, {
top: '6.2rem',
left: '1.8rem'
}, {
top: '2.3rem',
left: '10rem'
}, {
top: '3.5rem',
left: '10rem'
}, {
top: '4.8rem',
left: '10rem'
}, {
top: '6.2rem',
left: '10rem'
}, {
top: '3.8rem',
left: '11.2rem'
}, {
top: '2.4rem',
left: '5.2rem'
}, {
top: '2.4rem',
left: '5.9rem'
}, {
top: '2.4rem',
left: '6.6rem'
}, {
top: '2rem',
left: '11.2rem'
}, {
top: '7.7rem',
left: '0.5rem'
}, {
top: '7.7rem',
left: '1.85rem'
}, {
top: '7.7rem',
left: '3.3rem'
}, {
top: '7.7rem',
left: '6rem'
}, {
top: '7.7rem',
left: '8.7rem'
}, {
top: '7.7rem',
left: '10rem'
}, {
top: '7.7rem',
left: '11.2rem'
}]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jiaoyu' + index + '.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</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">教育楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>三楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
wgs/meeting.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding: 0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.3rem',
left: '2.5rem'
}, {
top: '0.32rem',
left: '8.1rem',
}, {
top: '2rem',
left: '1.2rem',
}, {
top: '2rem',
left: '3.5rem',
}, {
top: '2rem',
left: '5.75rem',
}, {
top: '2rem',
left: '8rem',
}, {
top: '2rem',
left: '10.5rem',
}, {
top: '4.5rem',
left: '1.2rem',
}, {
top: '4.5rem',
left: '3.5rem',
}, {
top: '4.5rem',
left: '5.75rem',
}, {
top: '4.5rem',
left: '8rem',
}, {
top: '4.5rem',
left: '10.5rem',
}, {
top: '7.2rem',
left: '1rem',
}, {
top: '7.2rem',
left: '2.9rem',
}, {
top: '7.2rem',
left: '4.8rem',
}, {
top: '7.2rem',
left: '6.7rem',
}, {
top: '7.2rem',
left: '8.9rem',
}, {
top: '7.2rem',
left: '10.8rem',
}, {
top: '7.6rem',
left: '6.2rem',
}]
$(function () {
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/meeting.png" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">老会见楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>老会见楼</p>
<p class="monitor">监控点<span>19</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
wgs/playground.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '1rem',
left: '1.6rem'
}, {
top: '1rem',
left: '10.46rem',
}]
$(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();
// })
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/playground.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">操场</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>操场</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
wgs/workshop.html 0 → 100644
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(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);
//循环数组 打摄像头位置
// var arr = [{
// top: '1.7rem',
// left: '0.15rem'
// }, {
// top: '1.2rem',
// left: '1rem'
// }, {
// top: '2.5rem',
// left: '1rem'
// }, {
// top: '3.8rem',
// left: '1rem'
// }, {
// top: '5rem',
// left: '1rem'
// }, {
// top: '6.3rem',
// left: '1rem'
// }, {
// top: '7.6rem',
// left: '1rem'
// }, {
// top: '1.2rem',
// left: '4.8rem'
// }, {
// top: '1rem',
// left: '5.6rem'
// }, {
// top: '1rem',
// left: '6.9rem'
// }, {
// top: '1rem',
// left: '10.3rem'
// }, {
// top: '1rem',
// left: '11.5rem'
// }, {
// top: '4.1rem',
// left: '3.5rem'
// }, {
// top: '4.1rem',
// left: '5rem'
// }, {
// top: '4.1rem',
// left: '6.45rem'
// }, {
// top: '4.1rem',
// left: '7.9rem'
// }, {
// top: '4.1rem',
// left: '9.5rem'
// }, {
// top: '4.1rem',
// left: '10.95rem'
// }, {
// top: '6rem',
// left: '3.5rem'
// }, {
// top: '6rem',
// left: '5rem'
// }, {
// top: '6rem',
// left: '6.45rem'
// }, {
// top: '6rem',
// left: '7.9rem'
// }, {
// top: "6rem",
// left: "9.5rem"
// }, {
// top: "6rem",
// left: "10.95rem"
// }, {
// top: "8rem",
// left: "5rem"
// }, {
// top: "8rem",
// left: "6.45rem"
// }, {
// top: "8rem",
// left: "7.9rem"
// }, {
// top: "8rem",
// left: "9.5rem"
// }]
// var divElement = document.querySelector('.room_box');
// console.log(divElement)
// let htmlTxt = '<img class="bg_img" src="../static/images/north_workshop_1nd_floor.png" alt="">'
// for (let i = 0; i < arr.length; i++) {
// console.log(divElement)
// htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// // 使用 innerHTML 添加元素
// }
// divElement.innerHTML = htmlTxt;
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '1.7rem',
left: '0.15rem'
}, {
top: '1.2rem',
left: '1rem'
}, {
top: '2.5rem',
left: '1rem'
}, {
top: '3.8rem',
left: '1rem'
}, {
top: '5rem',
left: '1rem'
}, {
top: '6.3rem',
left: '1rem'
}, {
top: '7.6rem',
left: '1rem'
}, {
top: '1.2rem',
left: '4.8rem'
}, {
top: '1rem',
left: '5.6rem'
}, {
top: '1rem',
left: '6.9rem'
}, {
top: '1rem',
left: '10.3rem'
}, {
top: '1rem',
left: '11.5rem'
}, {
top: '4.1rem',
left: '3.5rem'
}, {
top: '4.1rem',
left: '5rem'
}, {
top: '4.1rem',
left: '6.45rem'
}, {
top: '4.1rem',
left: '7.9rem'
}, {
top: '4.1rem',
left: '9.5rem'
}, {
top: '4.1rem',
left: '10.95rem'
}, {
top: '6rem',
left: '3.5rem'
}, {
top: '6rem',
left: '5rem'
}, {
top: '6rem',
left: '6.45rem'
}, {
top: '6rem',
left: '7.9rem'
}, {
top: "6rem",
left: "9.5rem"
}, {
top: "6rem",
left: "10.95rem"
}, {
top: "8rem",
left: "5rem"
}, {
top: "8rem",
left: "6.45rem"
}, {
top: "8rem",
left: "7.9rem"
}, {
top: "8rem",
left: "9.5rem"
}],
'arr2': [{
top: '1.4rem',
left: '0.15rem'
}, {
top: '2.3rem',
left: '1.4rem'
}, {
top: '2.3rem',
left: '3.4rem'
}, {
top: '4.3rem',
left: '1.4rem'
}, {
top: '4.3rem',
left: '3.4rem'
}, {
top: '8.2rem',
left: '1.4rem'
}, {
top: '8.2rem',
left: '3.4rem'
}, {
top: '6.3rem',
left: '1.4rem'
}, {
top: '6.3rem',
left: '3.4rem'
}, {
top: '3.3rem',
left: '5.3rem'
}, {
top: '5.0rem',
left: '6.6rem'
}, {
top: '5.0rem',
left: '5.3rem'
}, {
top: '3.3rem',
left: '6.6rem'
}, {
top: '2.3rem',
left: '8.5rem'
}, {
top: '2.3rem',
left: '10.5rem'
}, {
top: '4.3rem',
left: '8.5rem'
}, {
top: '4.3rem',
left: '10.5rem'
}, {
top: '6.3rem',
left: '8.5rem'
}, {
top: '6.3rem',
left: '10.5rem'
}, {
top: '8.2rem',
left: '8.5rem'
}, {
top: '8.2rem',
left: '10.5rem'
}, {
top: "7rem",
left: "11.65rem"
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/workshop' + index + '.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</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">北车间</div>
<div class="tab_list">
<ul>
<li>
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li class="current">
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
workshop.html deleted 100644 → 0
View file @ 200eae61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="static/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
<link rel="stylesheet" type="text/css" href="static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="static/css/commonArea.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
$(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();
})
//循环数组 打摄像头位置
var arr = [{
top: '1.4rem',
left: '0.15rem'
}, {
top: '2.3rem',
left: '1.4rem'
}, {
top: '2.3rem',
left: '3.4rem'
}, {
top: '4.3rem',
left: '1.4rem'
}, {
top: '4.3rem',
left: '3.4rem'
}, {
top: '8.2rem',
left: '1.4rem'
}, {
top: '8.2rem',
left: '3.4rem'
}, {
top: '6.3rem',
left: '1.4rem'
}, {
top: '6.3rem',
left: '3.4rem'
}, {
top: '3.3rem',
left: '5.3rem'
}, {
top: '5.0rem',
left: '6.6rem'
}, {
top: '5.0rem',
left: '5.3rem'
}, {
top: '3.3rem',
left: '6.6rem'
}, {
top: '2.3rem',
left: '8.5rem'
}, {
top: '2.3rem',
left: '10.5rem'
}, {
top: '4.3rem',
left: '8.5rem'
}, {
top: '4.3rem',
left: '10.5rem'
}, {
top: '6.3rem',
left: '8.5rem'
}, {
top: '6.3rem',
left: '10.5rem'
}, {
top: '8.2rem',
left: '8.5rem'
}, {
top: '8.2rem',
left: '10.5rem'
}]
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="./static/images/north_workshop_2nd_floor.png" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="./static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick()"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
</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">北车间</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
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