Skip to content

J
jianchayuan
Commit 36aa5115 authored by liuqing's avatar liuqing
Browse files
Options

9大楼

parent 088a9285
Show whitespace changes
Inline Side-by-side
Showing with 1556 additions and 0 deletions
jiudalou/baoshan.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1rem',
left: '0.9rem',
width:'2.8rem',
height:'1rem',
text:'四监区',
href:'四监区.html'
},{
top: '2rem',
left: '0.7rem',
height:'1rem',
width:'3rem',
text:'一监区',
href:'一监区.html'
},{
top: '3.1rem',
left: '0.2rem',
text:'西大楼',
href:'西大楼.html',
height:'0.8rem',
width:'3.9rem',
},{
top: '3.8rem',
left: '0.2rem',
text:'综合楼',
href:'综合楼.html',
width:'1.3rem',
height:'1.5rem',
},{
width:'2.8rem',
height:'1rem',
top: '0.8rem',
left: '4.6rem',
href:'三监区.html',
text:'三监区',
},{
width:'3rem',
height:'1rem',
top: '1.8rem',
left: '5.1rem',
href:'二监区.html',
text:'二监区',
},{
width:'3.5rem',
height:'0.8rem',
top: '3rem',
left: '5.1rem',
href:'东大楼.html',
text:'东大楼',
},{
width:'4rem',
height:'1.3rem',
top: '4rem',
left: '5.5rem',
href:'物流中心.html',
text:'物流中心',
},]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/baoshang.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">宝山测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">综合楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">西大楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">东大楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">物流中心</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">一监区</p>
<p class="monitor">监控点 <span style="background-color: #ff8a00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二监区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">四监区</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/beixinjin.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1.3rem',
left: '0.2rem',
width:'1.4rem',
height:'1.4rem',
text:'五监区',
href:'五监区.html'
},{
top: '2.8rem',
left: '-0.3rem',
width:'3.5rem',
height:'1.2rem',
text:'四监区',
href:'四监区.html'
},{
top: '4.1rem',
left: '-0.5rem',
width:'3.7rem',
height:'1.4rem',
text:'一监区',
href:'一监区.html'
},{
top: '1.1rem',
left: '2.4rem',
width:'3rem',
height:'1.4rem',
text:'六监区',
href:'六监区.html'
},{
top: '1.1rem',
left: '6rem',
width:'1.8rem',
height:'0.8rem',
text:'七监区',
href:'七监区.html'
},{
top: '1.9rem',
left: '6.6rem',
width:'1.7rem',
height:'0.6rem',
text:'卫生所',
href:'卫生所.html'
},{
top: '2.5rem',
left: '5rem',
width:'3.5rem',
height:'1.2rem',
text:'三监区',
href:'三监区.html'
},{
top: '3.7rem',
left: '5.8rem',
width:'3.8rem',
height:'1.6rem',
text:'二监区',
href:'二监区.html'
},]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/beixinjing.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">北新泾测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一监区</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二监区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">四监区</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">五监区</p>
<p class="monitor">监控点 <span style="background-color: #ff8a00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">六监区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">七监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">卫生所</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/nanhui.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '2rem',
left: '1.9rem',
width:'2.4rem',
height:'0.7rem',
text:'4号楼',
href:'4号楼.html'
},{
top: '2.8rem',
left: '1.7rem',
width:'3rem',
height:'0.6rem',
text:'3号楼',
href:'3号楼.html'
},{
top: '3.4rem',
left: '1.7rem',
width:'3rem',
height:'1.8rem',
text:'1号楼',
href:'1号楼.html'
},{
top: '2rem',
left: '5.7rem',
width:'3rem',
height:'2.6rem',
text:'2号楼',
href:'2号楼.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/nanhui.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">南汇测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">1号楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">2号楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">3号楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">4号楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/nvjian.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1.5rem',
left: '0.5rem',
width:'2.8rem',
height:'1rem',
text:'壹栋',
href:'壹栋.html'
},{
top: '2.5rem',
left: '0.3rem',
width:'3.2rem',
height:'1.2rem',
text:'贰栋',
href:'贰栋.html'
},{
top: '3.7rem',
left: '0.1rem',
width:'3.7rem',
height:'1.7rem',
text:'新习艺楼',
href:'新习艺楼.html'
},{
top: '1.3rem',
left: '4.2rem',
width:'2.8rem',
height:'1.2rem',
text:'医务楼',
href:'医务楼.html'
},{
top: '2.5rem',
left: '4.3rem',
width:'3.2rem',
height:'0.7rem',
text:'炊场',
href:'炊场.html'
},{
top: '3.3rem',
left: '4.6rem',
width:'3.7rem',
height:'1.6rem',
text:'会见楼',
href:'会见楼.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/nvjian.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">女监测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">壹栋</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">贰栋</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">新习艺楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">医务楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">炊场</p>
<p class="monitor">监控点 <span style="background-color: #ff8a00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">会见楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/qingpu.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1.6rem',
left: '0rem',
width:'3.7rem',
height:'0.5rem',
text:'五监区',
href:'五监区.html'
},
{
top: '2.1rem',
left: '-0.3rem',
width:'2.4rem',
height:'1.2rem',
text:'四监区',
href:'四监区.html'
},{
top: '3.3rem',
left: '-0.6rem',
width:'4.8rem',
height:'0.7rem',
text:'一监区',
href:'一监区.html'
},
{
top: '4rem',
left: '-0.9rem',
width:'3.2rem',
height:'1.8rem',
text:'一厂区',
href:'一厂区.html'
},{
top: '1.5rem',
left: '4.4rem',
width:'2.5rem',
height:'0.9rem',
text:'六监区',
href:'六监区.html'
},{
top: '2.4rem',
left: '3.2rem',
width:'4.4rem',
height:'0.8rem',
text:'三监区',
href:'三监区.html'
},{
top: '3.1rem',
left: '5.4rem',
width:'2.9rem',
height:'1.5rem',
text:'二监区',
href:'二监区.html'
},{
top: '4.6rem',
left: '6.1rem',
width:'2.9rem',
height:'1rem',
text:'教育楼',
href:'教育楼.html'
},]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/qingpu.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">青浦测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">教育楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">一厂区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">一监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二监区</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li class="current">
<div class="flex-box">
<p class="tabName">三监区</p>
<p class="monitor">监控点<span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">四监区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">五监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">六监区</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/wujiaochang.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1.7rem',
left: '0.5rem',
width:'2.1rem',
height:'0.7rem',
text:'北教学楼',
href:'北教学楼.html'
},{
top: '2.4rem',
left: '0.2rem',
width:'2.5rem',
height:'0.8rem',
text:'西习艺楼',
href:'西习艺楼.html'
},{
top: '3.2rem',
left: '0.1rem',
width:'2.8rem',
height:'0.8rem',
text:'南教学楼',
href:'南教学楼.html'
},{
top: '4rem',
left: '0.8rem',
width:'2.2rem',
height:'1.2rem',
text:'综合楼',
href:'综合楼.html'
},{
top: '1.55rem',
left: '3.7rem',
width:'2.3rem',
height:'0.7rem',
text:'北楼',
href:'北楼.html'
},{
top: '2.25rem',
left: '4rem',
width:'2.4rem',
height:'0.7rem',
text:'东习艺楼',
href:'东习艺楼.html'
},{
top: '3rem',
left: '4.3rem',
width:'2.8rem',
height:'0.9rem',
text:'东楼',
href:'东楼.html'
},{
top: '3.9rem',
left: '4.3rem',
width:'3.4rem',
height:'1rem',
text:'南楼',
href:'南楼.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/wujiaochang.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">周浦测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">综合楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">南楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">南教学楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">东楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li class="current">
<div class="flex-box">
<p class="tabName">西习艺楼</p>
<p class="monitor">监控点<span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">东习艺楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">北教学楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">北楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/xinshofang.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '2.2rem',
left: '-0.3rem',
width:'2.7rem',
height:'1.2rem',
text:'五号楼',
href:'五号楼.html'
},
{
top: '3.4rem',
left: '-0.3rem',
width:'2.7rem',
height:'1.1rem',
text:'六号楼',
href:'六号楼.html'
},
{
top: '4.4rem',
left: '-0.5rem',
width:'1.5rem',
height:'1.4rem',
text:'七号楼',
href:'七号楼.html'
},
{
top: '4.3rem',
left: '1.5rem',
width:'1.5rem',
height:'1.4rem',
text:'八号楼',
href:'八号楼.html'
},{
top: '1.9rem',
left: '2.8rem',
width:'2.3rem',
height:'1.4rem',
text:'四号楼',
href:'四号楼.html'
},{
top: '1.8rem',
left: '5.4rem',
width:'2.6rem',
height:'1.2rem',
text:'三号楼',
href:'三号楼.html'
},{
top: '3rem',
left: '5.9rem',
width:'2.6rem',
height:'0.9rem',
text:'二号楼',
href:'二号楼.html'
},{
top: '3.9rem',
left: '6.5rem',
width:'2.8rem',
height:'1.3rem',
text:'一号楼',
href:'一号楼.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/xinshofang.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">新收犯测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一号楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二号楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三号楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">四号楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">五号楼</p>
<p class="monitor">监控点 <span style="background-color: #ff8a00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">六号楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">七号楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">八号楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/yiyuan.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '1.8rem',
left: '1.3rem',
width:'4.9rem',
height:'1.4rem',
text:'病房',
href:'病房.html'
},{
top: '3.3rem',
left: '0rem',
width:'2.9rem',
height:'1.7rem',
text:'辅助楼',
href:'辅助楼.html'
},{
top: '3.3rem',
left: '4.3rem',
width:'3.4rem',
height:'1.7rem',
text:'感染',
href:'感染.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/yiyuan.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">总医院测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">病房</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">感染</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">辅助楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
jiudalou/zhoupu.html 0 → 100644
View file @ 36aa5115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<link rel="stylesheet" type="text/css" href="../static/css/floorcommon.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<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: '3.9rem',
left: '-0.5rem',
width:'2.7rem',
height:'1.5rem',
text:'会见楼',
href:'会见楼.html'
},{
top: '2.6rem',
left: '0rem',
width:'3.8rem',
height:'1.1rem',
text:'三号楼',
href:'三号楼.html'
},{
top: '2.4rem',
left: '5.2rem',
width:'2.2rem',
height:'1.3rem',
text:'二号楼',
href:'二号楼.html'
},{
top: '3.9rem',
left: '3.8rem',
width:'4.5rem',
height:'1.2rem',
text:'一号楼',
href:'一号楼.html'
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/dalou/zhoupu.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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">周浦测试监区平面图</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">会见楼</p>
<p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">一号楼</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二号楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三号楼</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
<style>
</style>
static/css/floorcommon.css 0 → 100644
View file @ 36aa5115
.content_box {
float: right;
width: 13rem;
height: 8.54rem;
background: rgb(52 0 0 / 0%);
padding: 0.25rem 0.52rem;
border-radius: 0.1rem;
}
.tab_list ul li.current{
background: rgb(0 35 105 / 70%);
}
.content_box{
padding: 0;
}
.menu_title_box{
font-size: 0.24rem;
}
.bg_img{
margin: -0.5rem 0 0 -4rem;
width: 17rem;
}
.padding_box2{
width: 19rem;
}
.header-area{
text-align: center;
}
.header-area img {
width: 4rem;
height: auto;
padding-top: 0.5rem;
margin-bottom: 1rem;
}
li{
list-style: none;
}
.tab_list {
z-index: 9;
position: sticky;
}
.icon_text{
position: absolute;
width: 1.8rem;
height: 47px;
line-height: 47px;
background-image:url('../images/dalou/icon_text.png');
background-repeat: no-repeat;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.text_ms a{
color: #fff;
font-size: 0.2rem;
text-decoration: none;
margin-left: 25px;
}
.menu_box{
margin-left: 1rem;
}
.content_top {
font-size: 0.16rem;
height: 1.4rem;
background: url(../images/topBg.png) center center no-repeat;
background-size: contain;
}
.menu_box {
float: left;
width: 3.8rem;
}
.content {
background: url('../images/dalou/beijing.png') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
.flex-box p{
width: 2rem;;
}
\ No newline at end of file
static/images/dalou/baoshang.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/beixinjing.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/nanhui.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/nvjian.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/qingpu.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/wujiaochang.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/xinshofang.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/yiyuan.png 0 → 100644
View file @ 36aa5115
This diff is collapsed.
static/images/dalou/zhoupu.png 0 → 100644
View file @ 36aa5115
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