Skip to content

J
jianchayuan
Commit afe6e959 authored by zhangpux's avatar zhangpux
Browse files
Options

add 南汇页面

parent b4d9dea2
Hide whitespace changes
Inline Side-by-side
Showing with 1004 additions and 0 deletions
nanhui/floor1.html 0 → 100644
View file @ afe6e959
<!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;
}
</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': [
// 左外墙1
{ top: '3.65%', left: '3.90%' },
{ top: '44.61%', left: '3.34%' },
{ top: '84.41%', left: '3.34%' },
{ top: '92.04%', left: '3.34%' },
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
{ top: '61.69%', left: '9.70%' },
// 中上后隔离门
{ top: '1.66%', left: '29.32%' },
// 中上后楼梯口
{ top: '1.66%', left: '70.79%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下门厅
{ top: '87.56%', left: '34.45%' },
// 左中下室外球机
{ top: '93.86%', left: '18.73%' },
// 左中下室值岗
{ top: '93.86%', left: '33.67%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '59.98%' },
{ top: '90.71%', left: '73.13%' },
// 右边
{ top: '3.48%', left: '89.30%' },
{ top: '9.78%', left: '89.30%' },
{ top: '15.92%', left: '89.30%' },
{ top: '22.06%', left: '89.30%' },
{ top: '28.19%', left: '89.30%' },
{ top: '47.26%', left: '88.70%' },
{ top: '74.63%', left: '88.70%' },
{ top: '92.54%', left: '88.74%' }
],
'arr2': [
// 左外墙1
{ top: '44.61%', left: '3.34%' },
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
// 中上后隔离门
{ top: '1.66%', left: '29.32%' },
// 中上后门
{ top: '3.15%', left: '46.04%' },
// 中上后封门
{ top: '9.29%', left: '45.04%' },
// 中上后楼梯口
{ top: '1.66%', left: '70.79%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下室值岗
{ top: '93.86%', left: '25.31%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '87.23%', left: '45.26%' },
{ top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '2.49%', left: '89.41%' },
{ top: '8.62%', left: '89.41%' },
{ top: '14.93%', left: '89.41%' },
{ top: '21.06%', left: '89.41%' },
{ top: '74.63%', left: '88.70%' },
],
'arr3': [
// 左外墙1
{ top: '44.61%', left: '3.34%' },
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
// 中上后隔离门
{ top: '1.66%', left: '29.32%' },
// 中上后门
{ top: '3.15%', left: '46.04%' },
// 中上后封门
{ top: '9.29%', left: '45.04%' },
// 中上后楼梯口
{ top: '1.66%', left: '70.79%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下室值岗
{ top: '93.86%', left: '25.31%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '87.23%', left: '45.26%' },
{ top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '2.49%', left: '89.41%' },
{ top: '8.62%', left: '89.41%' },
{ top: '14.93%', left: '89.41%' },
{ top: '21.06%', left: '89.41%' },
{ top: '74.63%', left: '88.70%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nanhui/floor1_' + 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="padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">1号楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>60</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>53</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>53</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
nanhui/floor2.html 0 → 100644
View file @ afe6e959
<!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;
}
</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': [
// 左1
{ top: '64.68%', left: '10.59%' },
{ top: '91.87%', left: '2.90%' },
// 中上
{ top: '1.49%', left: '29.21%' },
{ top: '1.49%', left: '71.01%' },
// 中左
{ top: '21.72%', left: '26.87%' },
{ top: '42.79%', left: '26.87%' },
{ top: '66.17%', left: '26.87%' },
// 中右
{ top: '31.51%', left: '70.90%' },
{ top: '66.17%', left: '70.90%' },
// 下
{ top: '90.71%', left: '23.97%' },
{ top: '93.86%', left: '47.16%' },
{ top: '90.71%', left: '66.44%' },
{ top: '90.71%', left: '87.29%' }
],
'arr2': [
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
// 中上
{ top: '1.49%', left: '49.61%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下室值岗
{ top: '93.86%', left: '25.31%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '87.56%', left: '47.71%' },
// { top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '2.49%', left: '89.41%' },
{ top: '74.63%', left: '88.70%' },
],
'arr3': [
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
// 中上
{ top: '1.49%', left: '49.61%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下室值岗
{ top: '93.86%', left: '25.31%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '87.56%', left: '47.71%' },
// { top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
// 禁闭
{ top: '43.62%', left: '60.42%' },
{ top: '47.60%', left: '64.55%' },
{ top: '47.60%', left: '71.13%' },
{ top: '47.76%', left: '77.48%' },
{ top: '43.78%', left: '83.17%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '2.49%', left: '89.41%' },
{ top: '19.90%', left: '88.63%' },
{ top: '74.63%', left: '88.70%' },
],
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nanhui/floor2_' + 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="padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">2号楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>13</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>45</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>
</body>
</html>
\ No newline at end of file
nanhui/floor3.html 0 → 100644
View file @ afe6e959
<!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;
}
</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': [
// 左外墙1
{ top: '3.65%', left: '3.90%' },
{ top: '17.41%', left: '3.12%' },
{ top: '38.64%', left: '3.12%' },
{ top: '60.20%', left: '3.12%' },
{ top: '77.78%', left: '3.12%' },
{ top: '92.04%', left: '3.34%' },
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
{ top: '61.69%', left: '9.70%' },
// 中上后隔离门
{ top: '1.66%', left: '29.32%' },
// 中上后楼梯口
{ top: '1.66%', left: '70.79%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left:'28.87%' },
{ top: '32.34%', left: '28.87%' },
{ top: '46.60%', left: '28.87%' },
{ top: '60.70%', left: '28.87%' },
{ top: '73.80%', left: '28.87%' },
// 左中下
{ top: '86.40%', left:'19.40%' },
{ top: '90.71%', left: '33.22%' },
// 中
{ top: '17.74%', left: '46.38%' },
{ top: '78.44%', left: '46.49%' },
{ top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
// 右中下
{ top: '90.71%', left:'68.23%' },
// 右边
{ top: '3.48%', left: '89.30%' },
{ top: '9.78%', left: '89.30%' },
{ top: '15.92%', left: '89.30%' },
{ top: '22.06%', left: '89.30%' },
{ top: '39.97%', left:'88.65%' },
{ top: '53.90%', left: '96.88%' },
{ top: '67.33%', left: '88.65%' },
{ top: '84.91%', left: '88.74%' },
{ top: '92.54%', left: '88.74%' }
],
'arr2': [
// 左外墙1
// { top: '44.61%', left: '3.34%' },
// 浴室左1
{ top: '19.73%', left: '9.70%' },
{ top: '34.83%', left: '9.70%' },
// 中上后隔离门
{ top: '1.66%', left: '29.32%' },
// 中上后门
{ top: '3.15%', left: '46.04%' },
// 中上后封门
// { top: '9.29%', left: '45.04%' },
// 中上后楼梯口
{ top: '1.66%', left: '70.79%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 左中下室值岗
{ top: '93.86%', left: '25.31%' },
// 中
{ top: '78.44%', left: '46.49%' },
{ top: '87.23%', left: '45.26%' },
{ top: '94.03%', left: '47.05%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
{ top: '45.27%', left: '63.43%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
{ top: '43.78%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
{ top: '45.27%', left: '77.03%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '2.49%', left: '89.41%' },
{ top: '8.62%', left: '89.41%' },
{ top: '14.93%', left: '89.41%' },
{ top: '21.06%', left: '89.41%' },
{ top: '74.63%', left: '88.70%' },
],
'arr3': [
// 中
{ top: '71.48%', left: '44.37%' },
{ top: '78.44%', left: '46.49%' },
{ top: '87.23%', left: '45.26%' },
{ top: '94.03%', left: '47.05%' },
// 右中1学习
{ top: '60.20%', left: '64.77%' },
{ top: '73.96%', left: '64.77%' },
// 右中2学习
{ top: '60.20%', left: '78.48%' },
{ top: '73.96%', left: '78.48%' },
// 右中下
{ top: '90.88%', left: '66.56%' },
// 右边
{ top: '74.63%', left: '88.70%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nanhui/floor3_' + 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="padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">3号楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>51</span></p>
</div>
</li>
<li>
<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>10</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
nanhui/floor4.html 0 → 100644
View file @ afe6e959
<!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;
}
.room_box {
display: flex;
justify-content: center;
align-items: center;
}
.camera1 {
width: 3.25rem;
height: 4rem;
}
</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': [
// 左外墙1
{ top: '50%', left: '50%' },
],
'arr2': [
// 左外墙1
{ top: '50%', left: '50%' },
],
'arr3': [
// 浴室左1
{ top: '19.73%', left: '9.70%' },
// 中左1卫
{ top: '16.42%', left: '15.94%' },
{ top: '29.19%', left: '15.94%' },
{ top: '43.38%', left: '15.94%' },
{ top: '57.88%', left: '15.94%' },
{ top: '72.31%', left: '15.94%' },
// 中左1监舍
{ top: '18.08%', left: '22.30%' },
{ top: '30.51%', left: '22.30%' },
{ top: '45.11%', left: '22.30%' },
{ top: '59.37%', left: '22.30%' },
{ top: '73.96%', left: '22.30%' },
// 中左2卫
{ top: '16.42%', left: '29.80%' },
{ top: '29.19%', left: '29.80%' },
{ top: '43.38%', left: '29.80%' },
{ top: '57.88%', left: '29.80%' },
{ top: '72.31%', left: '29.80%' },
// 中左1监舍
{ top: '18.08%', left: '35.80%' },
{ top: '30.51%', left: '35.80%' },
{ top: '45.11%', left: '35.80%' },
{ top: '59.37%', left: '35.80%' },
{ top: '73.96%', left: '35.80%' },
// 中
{ top: '23.05%', left: '44.15%' },
// 右中1监舍
{ top: '18.08%', left: '63.43%' },
{ top: '30.51%', left: '63.43%' },
// 右中1卫
{ top: '16.75%', left: '69.68%' },
{ top: '29.19%', left: '69.68%' },
// 右中2监舍
{ top: '18.08%', left: '77.03%' },
{ top: '30.51%', left: '77.03%' },
// 右中2卫
{ top: '16.75%', left: '82.94%' },
{ top: '29.19%', left: '82.94%' },
{ top: '43.78%', left: '82.94%' },
// 右监
{ top: '46.60%', left: '71.00%' },
{ top: '60.20%', left: '71.00%' },
{ top: '74.13%', left: '71.00%' },
// 右边
{ top: '2.82%', left: '91.53%' },
{ top: '74.63%', left: '88.70%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nanhui/floor4_' + index + '.png" alt="">'
let _this = this;
if (index == 3) {
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 添加元素
}
} else {
htmlTxt = htmlTxt + '<img class="camera1" src="../static/images/nanhui/camera1.png" onclick="handleClick(' + 0 + ')"></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="padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">4号楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>1</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>1</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>36</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