Skip to content

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

通用

parent fa8bb0f2
Hide whitespace changes
Inline Side-by-side
Showing with 649 additions and 19 deletions
.vscode/settings.json 0 → 100644
View file @ b968ce8f
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
index.html
View file @ b968ce8f
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title> <title>监区平面图</title>
<script src="../static/js/flexible.js"></script> <script src="./static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css"> <link rel="stylesheet" href="./static/css/common.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="main-area"> <div class="main-area">
<div class="header-area"> <div class="header-area">
<img src="../static/images/logo_mc.png"/> <img src="./static/images/logo_mc.png"/>
</div> </div>
<div class="area-content"> <div class="area-content">
<div class="loupan_map_box"> <div class="loupan_map_box">
......
index_01.html 0 → 100644
View file @ b968ce8f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="./static/js/flexible.js"></script>
<link rel="stylesheet" href="./static/css/common.css">
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="./static/images/logo_mc.png" />
</div>
<div class="area-content">
<div class="bue-yewu">
<div class="map">
<a href="#"> <img src="./static/images/监控业务数据展示跳转图.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<style>
.bue-yewu {
background: url(./static/images/wuye.png) no-repeat;
background-size: 100% 100%;
height: 80vh;
text-align: center;
}
.bue-yewu .map img {
width: 32%;
}
</style>
</body>
</html>
\ No newline at end of file
plandirectory/areaPlan.html
View file @ b968ce8f
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>A栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>B栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>C栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>D栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>E栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>F栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
</li> </li>
<li> <li>
<div class="menu-mc"> <div class="menu-mc">
<span>办公楼</span> <span>G栋</span>
</div> </div>
<div class="menu-num"> <div class="menu-num">
<span>监控点</span> <span>监控点</span>
...@@ -94,7 +94,40 @@ ...@@ -94,7 +94,40 @@
</div> </div>
</div> </div>
<div class="area-right"> <div class="area-right">
1 <div class="area-box">
<ul>
<li class="a_floor">
<a href="#"> <img src="../static/images/A_floor.png"/></a>
</li>
<li class="bg1_floor">
<a href="#"> <img src="../static/images/bgq_floor.png"/></a>
</li>
<li class="b_floor">
<a href="#"> <img src="../static/images/B_floor.png"/></a>
</li>
<li class="g_floor">
<a href="#"> <img src="../static/images/G_floor.png"/></a>
</li>
<li class="c_floor">
<a href="#"> <img src="../static/images/C_floor.png"/></a>
</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>
</li>
<li class="d_floor_index">
<a href="#"> <img src="../static/images/D_floor_1.png"/></a>
</li>
<li class="f_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
</li>
<!-- <li class="h_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
</li> -->
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
plandirectory/commonmodel.html 0 → 100644
View file @ b968ce8f
<!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>
$(function () {
// 监控点数量的数组
var floorsCameraCounts = [21, 25, 24, 3];
// 摄像头位置的数组
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'
}, {
top: '8.1rem',
left: '10.5rem'
}, {
top: '8.5rem',
left: '10.5rem'
}];
console.log(arr.length)
// 更新摄像头视图的函数
function updateCameras (index) {
// 计算要显示的摄像头数量
var camerasCount = floorsCameraCounts[index];
debugger
// 获取并更新监控点的数字
$('.monitor').eq(index).find('span').text(camerasCount);
// 从arr中获取当前楼层的摄像头位置
var selectedCameras = arr.slice(0, camerasCount);
// 创建新的HTML内容
var htmlTxt = '<img class="bg_img" src="../static/images/wuye1.png" alt="">';
$.each(selectedCameras, function (i, camera) {
htmlTxt += '<img class="camera" src="../static/images/camera.png" ' +
'style="top:' + camera.top + ';left:' + camera.left + '" ' +
'onclick="handleClick(this)"></img>';
});
// 更新DOM元素
$('.room_box').html(htmlTxt);
}
// 点击事件绑定到楼层标签
$(".tab_list").on("click", "li", function () {
var $this = $(this);
var index = $this.index();
// 更新显示的楼层数字
$this.addClass('current').siblings().removeClass('current');
// 更新监控点和摄像头
debugger
updateCameras(index);
});
// 页面加载时默认选中第一个楼层
$(".tab_list li").first().click();
});
// 点击摄像头时的处理函数
function handleClick (cameraImg) {
console.log('Clicked camera', cameraImg);
// 处理摄像头点击事件
}
</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>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>25</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>三楼</p>
<p class="monitor">监控点<span>24</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>四楼</p>
<p class="monitor">监控点<span>3</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
plandirectory/floorPlan_dialog.html 0 → 100644
View file @ b968ce8f
<!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">A栋</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>
<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>
<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
plandirectory/yewuceng.html 0 → 100644
View file @ b968ce8f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css">
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="../static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="business">
<img src="../static/images/yewuceng.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
static/css/common.css
View file @ b968ce8f
...@@ -11,6 +11,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -11,6 +11,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
background-size: cover; background-size: cover;
} }
/**首页**/ /**首页**/
.container{
height: 100vh;
overflow: hidden;
}
.area-content .loupan_map_box { .area-content .loupan_map_box {
text-align: center; text-align: center;
} }
...@@ -18,8 +22,8 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -18,8 +22,8 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
position: relative; position: relative;
} }
.loupan_map_box ul li img{ .loupan_map_box ul li img{
width: 40px; width: 2rem;
height: 46px; height: 2rem;
} }
.loupan_map_box ul li{ .loupan_map_box ul li{
position: absolute; position: absolute;
...@@ -45,7 +49,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -45,7 +49,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
top: 6rem; top: 6rem;
} }
.loupan_map_box ul .index_05{ .loupan_map_box ul .index_05{
right: 15.6rem; right:14.8rem;
top: 7rem; top: 7rem;
} }
...@@ -89,6 +93,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -89,6 +93,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
left:14rem; left:14rem;
top: 8rem; top: 8rem;
} }
.area-content .loupan_map_box{ .area-content .loupan_map_box{
background: url(../images/home_floor.png) no-repeat; background: url(../images/home_floor.png) no-repeat;
width: 34rem; width: 34rem;
...@@ -107,23 +112,32 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -107,23 +112,32 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
height: auto; height: auto;
padding-top: 1.4rem; padding-top: 1.4rem;
} }
/**监控业务数据**/
.area-content{ .area-content{
margin:1rem 3rem 0 3rem; margin:1rem 3rem 0 3rem;
overflow: hidden;
} }
.area-left{ .area-left{
width: 23%; width: 20%;
float: left; float: left;
} }
.area-right{ .area-right{
background: url(../images/floor_lp.png) no-repeat;
height: 23rem;
float: right; float: right;
width: 75%; background-size: cover;
width: 78%;
background-size: 100% 100%;
} }
.area-content .area-left .title{ .area-content .area-left .title{
font-size: 22px; font-size: 22px;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 2px;
font-family: 'AlibabaPuHuiTi_2_85_Bold'; font-family: 'AlibabaPuHuiTi_2_85_Bold';
} }
.left-menu {
margin-top: 20px;
}
.left-menu ul li{ .left-menu ul li{
background-color: #435770ad; background-color: #435770ad;
border-radius: 7px; border-radius: 7px;
...@@ -131,8 +145,8 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -131,8 +145,8 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 18px; font-size: 18px;
height: 45px; height: 1.5rem;
line-height: 45px; line-height: 1.5rem;
padding: 0 20px; padding: 0 20px;
} }
.left-menu .menu-num span:nth-child(2){ .left-menu .menu-num span:nth-child(2){
...@@ -140,4 +154,89 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} ...@@ -140,4 +154,89 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
padding:3px 20px; padding:3px 20px;
border-radius: 13px; border-radius: 13px;
margin-left: 10px margin-left: 10px
}
.area-right ul{
position: relative;
}
.area-right ul li{
position: absolute;
}
.area-right ul .a_floor img{
width: 12.6rem;
}
.area-right ul .a_floor{
left: 3.9rem;
top: 3rem;
}
.area-right ul .bg1_floor img{
width: 16rem;
}
.area-right ul .bg1_floor{
left: 4rem;
top: 4.6rem;
}
.area-right ul .b_floor img{
width: 5rem;
}
.area-right ul .b_floor{
left: 4rem;
top: 7.8rem;
}
.area-right ul .b_floor{
left: 4rem;
top: 7.8rem;
}
.area-right ul .g_floor img{
width: 7rem;
}
.area-right ul .g_floor{
left: 4rem;
top: 12.2rem;
}
.area-right ul .c_floor img{
width: 7.3rem;
}
.area-right ul .c_floor{
left: 13.6rem;
top: 4.2rem;
}
.area-right ul .e_floor img{
width: 5rem;
}
.area-right ul .e_floor{
z-index: 2;
left: 15.5rem;
top: 13.5rem;
}
.area-right ul .d_floor img{
width: 3rem;
}
.area-right ul .d_floor{
right: 12rem;
top: 6rem;
}
.area-right ul .f_floor img{
width: 5rem;
}
.area-right ul .f_floor{
right: 2.6rem;
top: 11.7rem;
}
.area-right ul .d_floor_index img{
width: 5rem;
}
.area-right ul .d_floor_index{
right: 12rem;
z-index: 1;
top: 6rem;
}
/**业务层**/
.area-content .business{
background: url(../images/yewuceng.png) no-repeat;
margin: 0 auto;
margin-top: 2rem;
background-size: 100% 100%;
} }
\ No newline at end of file
static/images/floor_lp.png 0 → 100644
View file @ b968ce8f
This diff is collapsed.
static/index_01.html 0 → 100644
View file @ b968ce8f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css">
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="../static/images/logo_mc.png" />
</div>
<div class="area-content">
<div class="bue-yewu">
<div class="map">
<img src="../static/images/wuye.png" alt="">
</div>
</div>
</div>
</div>
</div>
<style>
.bue-yewu {
background: url(./static/images/wuye.png) no-repeat;
background-size: 100% 100%;
height: 80vh;
text-align: center;
}
.bue-yewu .map img {
width: 32%;
}
</style>
</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