Skip to content

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

add 总医院页面

parent 796c54fd
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 0 deletions
zongyiyuan/bingfang1.html 0 → 100644
View file @ 7124dcf5
<!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': [
// 上
{ top: '3.81%', left: '11.48%' },
{ top: '3.81%', left: '45.82%' },
{ top: '3.81%', left: '81.50%' },
// 中候诊1
{ top: '26.70%', left: '8.58%' },
{ top: '26.70%', left: '33.67%' },
{ top: '26.70%', left: '59.31%' },
{ top: '26.70%', left: '84.30%' },
// 中门诊
{ top: '39.30%', left: '21.18%' },
{ top: '39.14%', left: '46.38%' },
{ top: '39.14%', left: '71.13%' },
// 中下
{ top: '63.18%', left: '33.67%' },
{ top: '62.85%', left: '59.31%' },
{ top: '63.02%', left: '84.30%' },
// 右
{ top: '38.81%', left: '96.54%' },
// 下
{ top: '88.06%', left: '46.60%' },
],
'arr2': [
// 右1
{ top: '4.81%', left: '67.00%' },
{ top: '28.52%', left: '67.00%' },
{ top: '51.74%', left: '67.00%' },
{ top: '75.12%', left: '67.00%' },
{ top: '89.05%', left: '67.00%' },
// 右2
{ top: '4.81%', left: '87.85%' },
{ top: '28.52%', left: '87.85%' },
{ top: '51.74%', left: '87.85%' },
{ top: '75.12%', left: '87.85%' },
{ top: '89.05%', left: '87.85%' },
],
'arr3': [
// 左1
{ top: '5.64%', left: '9.80%' },
{ top: '17.25%', left: '9.80%' },
{ top: '28.52%', left: '9.80%' },
{ top: '40.13%', left: '9.80%' },
{ top: '51.74%', left: '9.80%' },
{ top: '63.02%', left: '9.80%' },
{ top: '75.12%', left: '9.80%' },
{ top: '89.05%', left: '9.80%' },
// 左2
{ top: '5.64%', left: '30.8%' },
{ top: '17.25%', left: '30.8%' },
{ top: '28.52%', left: '30.8%' },
{ top: '40.13%', left: '30.8%' },
{ top: '51.74%', left: '30.8%' },
{ top: '63.02%', left: '30.8%' },
{ top: '75.12%', left: '30.8%' },
{ top: '89.05%', left: '30.8%' },
// 右1
{ top: '4.81%', left: '67.00%' },
{ top: '28.52%', left: '67.00%' },
{ top: '51.74%', left: '67.00%' },
{ top: '75.12%', left: '67.00%' },
{ top: '89.05%', left: '67.00%' },
// 右2
{ top: '17.25%', left: '77.48%' },
{ top: '40.13%', left: '77.48%' },
{ top: '63.02%', left: '77.48%' },
// 右3
{ top: '4.81%', left: '87.85%' },
{ top: '28.52%', left: '87.85%' },
{ top: '51.74%', left: '87.85%' },
{ top: '75.12%', left: '87.85%' },
{ top: '89.05%', left: '87.85%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/zongyiyuan/bingfang1_' + 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">病房楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>15</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>14</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>29</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
zongyiyuan/fuzhu1.html 0 → 100644
View file @ 7124dcf5
<!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: '17.25%', left: '10.48%' },
{ top: '58.21%', left: '10.59%' },
// 左2
{ top: '17.25%', left: '31.88%' },
{ top: '58.21%', left: '31.88%' },
// 左3
{ top: '10.12%', left: '66.44%' },
{ top: '37.98%', left: '66.44%' },
{ top: '66.67%', left: '66.44%' },
// 左4
{ top: '10.12%', left: '87.50%' },
{ top: '37.98%', left: '87.50%' },
{ top: '66.67%', left: '87.50%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/zongyiyuan/fuzhu1_2.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">辅助楼</div>
<div class="tab_list">
<ul>
<li class="current">
<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
zongyiyuan/ganran1.html 0 → 100644
View file @ 7124dcf5
<!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': [
// 上
{ top: '3.15%', left: '18.51%' },
{ top: '3.15%', left: '74.14%' },
// 左1
{ top: '22.06%', left: '4.57%' },
{ top: '42.12%', left: '4.57%' },
{ top: '63.35%', left: '4.57%' },
{ top: '83.25%', left: '4.57%' },
// 左2
{ top: '22.06%', left: '13.60%' },
{ top: '42.12%', left: '13.60%' },
{ top: '63.35%', left: '13.60%' },
{ top: '83.25%', left: '13.60%' },
// 左走廊
{ top: '25.87%', left: '21.00%' },
{ top: '64.00%', left: '21.00%' },
// 左3
{ top: '22.06%', left: '28.43%' },
{ top: '42.12%', left: '28.43%' },
// 左4
{ top: '21.89%', left: '37.57%' },
{ top: '42.12%', left: '37.57%' },
// 左
{ top: '63.85%', left: '33.22%' },
{ top: '83.25%', left: '33.22%' },
// 中走廊
{ top: '25.70%', left: '49.50%' },
{ top: '63.85%', left: '49.50%' },
// 右1
{ top: '22.06%', left: '65.33%' },
{ top: '42.12%', left: '65.33%' },
{ top: '63.35%', left: '65.33%' },
{ top: '83.25%', left: '65.33%' },
// 右走廊
{ top: '25.87%', left: '76.81%' },
{ top: '64.00%', left: '76.81%' },
// 右2
{ top: '42.12%', left: '83.95%' },
{ top: '63.35%', left: '83.95%' },
{ top: '83.25%', left: '83.95%' },
// 右3
{ top: '22.06%', left: '92.87%' },
{ top: '42.12%', left: '92.87%' },
{ top: '63.35%', left: '92.87%' },
{ top: '83.25%', left: '92.87%' },
],
'arr2': [
// 上
{ top: '3.15%', left: '17.61%' },
{ top: '3.15%', left: '72.58%' },
// 左1
{ top: '32.67%', left: '9.81%' },
{ top: '63.85%', left: '9.81%' },
{ top: '83.25%', left: '9.81%' },
// 左走廊
{ top: '25.87%', left: '21.00%' },
{ top: '64.00%', left: '21.00%' },
// 左2
{ top: '21.89%', left: '33.22%' },
{ top: '41.46%', left: '33.22%' },
{ top: '63.85%', left: '33.22%' },
{ top: '83.25%', left: '33.22%' },
// 中走廊
{ top: '25.70%', left: '49.50%' },
// 右1
{ top: '22.06%', left: '65.33%' },
{ top: '42.12%', left: '65.33%' },
{ top: '63.35%', left: '65.33%' },
{ top: '83.25%', left: '65.33%' },
// 右走廊
{ top: '25.87%', left: '76.81%' },
{ top: '64.00%', left: '76.81%' },
// 右2
{ top: '22.06%', left: '88.18%' },
{ top: '42.12%', left: '88.18%' },
{ top: '63.35%', left: '88.18%' },
{ top: '83.25%', left: '88.18%' },
],
'arr3': [
// 上
{ top: '3.15%', left: '17.61%' },
{ top: '3.15%', left: '72.58%' },
// 左1
{ top: '32.67%', left: '9.81%' },
{ top: '63.85%', left: '9.81%' },
{ top: '83.25%', left: '9.81%' },
// 左走廊
{ top: '25.87%', left: '21.00%' },
{ top: '64.00%', left: '21.00%' },
// 左2
{ top: '21.89%', left: '33.22%' },
{ top: '41.46%', left: '33.22%' },
{ top: '63.85%', left: '33.22%' },
{ top: '83.25%', left: '33.22%' },
// 中走廊
{ top: '25.70%', left: '49.50%' },
{ top: '63.85%', left: '49.50%' },
// 右1
{ top: '22.06%', left: '65.33%' },
{ top: '42.12%', left: '65.33%' },
{ top: '63.35%', left: '65.33%' },
{ top: '83.25%', left: '65.33%' },
// 右走廊
{ top: '25.87%', left: '76.81%' },
{ top: '64.00%', left: '76.81%' },
// 右2
{ top: '22.06%', left: '88.18%' },
{ top: '42.12%', left: '88.18%' },
{ top: '63.35%', left: '88.18%' },
{ top: '83.25%', left: '88.18%' },
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/zongyiyuan/ganran1_' + 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">感染楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>33</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>22</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>23</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
zongyiyuan/xuetoushi1.html 0 → 100644
View file @ 7124dcf5
<!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': [
{ top: '17.25%', left: '20.70%' },
{ top: '58.54%', left: '20.70%' },
{ top: '37.98%', left: '77.70%' }
]
}
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/zongyiyuan/xuetoushi1_1.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">血透室</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</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
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