Skip to content

J
jianchayuan
Commit ae671471 authored by daisy's avatar daisy
Browse files
Options

Merge branch 'master' into 'master'

Master See merge request liuqing/jianchayuan!9
parents 88c78463 393a0813
Hide whitespace changes
Inline Side-by-side
Showing with 443 additions and 291 deletions
plandirectory/commonmodel.html
View file @ ae671471
......@@ -20,319 +20,371 @@
/* background-position-x: center; */
background-size: cover;
}
/* 修改背景图片 */
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* 修改模态框样式 */
.modal-dialog {
background-image: url("../static/images/tc_bj.png"); /* 替换为你的背景图片路径和名称 */
background-size: cover; /* 自动适应尺寸并覆盖整个模态框 */
background-repeat: no-repeat; /* 防止重复平铺 */
width: 75%; /* 设置模态框宽度为屏幕的一半 */
height: 68vh; /* 设置模态框高度为屏幕高度的一半 */
max-width: 1200px; /* 设置最大宽度 */
max-height: 700px; /* 设置最大高度 */
}
/* 修改模态框样式 */
.modal-content {
background-color: #00254d00;
border: none;
}
.modal-title {
font-family: 'PingFang-SC-Bold';
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #ffffff;
}
.modal-body {
display: flex;
padding: 30px;
}
#cameraText {
width: 50%; /* 修改左侧文字占比 */
padding: 20px; /* 修改文字内边距 */
}
#cameraText p {
margin-bottom: 10px; /* 修改段落之间的间距 */
}
#cameraVideo {
width: 50%; /* 修改右侧视频占比 */
padding: 0 10px; /* 修改视频内边距 */}
#cameraVideo video {
width: 100%; /* 修改视频宽度 */
outline: none; /* 去掉视频播放器的外边框 */
}
.modal-content .title{
text-align: center;
line-height: 40px;
margin-top: 20px;
font-size: 0.25rem;
}
.modal-body ul{
margin-left: 20px;
margin-top: 10px;
}
.modal-body ul li{
height: 40px;
font-size: 16px;
cursor: pointer;
}
.modal-body ul li span{
margin-left: 10px;
font-size: 0.2rem;
color: #eee;
}
.padding_box {
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* 修改模态框样式 */
.modal-dialog {
background-image: url("../static/images/tc_bj.png");
/* 替换为你的背景图片路径和名称 */
background-size: cover;
/* 自动适应尺寸并覆盖整个模态框 */
background-repeat: no-repeat;
/* 防止重复平铺 */
width: 75%;
/* 设置模态框宽度为屏幕的一半 */
height: 68vh;
/* 设置模态框高度为屏幕高度的一半 */
max-width: 1200px;
/* 设置最大宽度 */
max-height: 700px;
/* 设置最大高度 */
}
/* 修改模态框样式 */
.modal-content {
background-color: #00254d00;
border: none;
}
.modal-title {
font-family: 'PingFang-SC-Bold';
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #ffffff;
}
.modal-body {
display: flex;
padding: 30px;
}
#cameraText {
width: 50%;
/* 修改左侧文字占比 */
padding: 20px;
/* 修改文字内边距 */
}
#cameraText p {
margin-bottom: 10px;
/* 修改段落之间的间距 */
}
#cameraVideo {
width: 50%;
/* 修改右侧视频占比 */
padding: 0 10px;
/* 修改视频内边距 */
}
#cameraVideo video {
width: 100%;
/* 修改视频宽度 */
outline: none;
/* 去掉视频播放器的外边框 */
}
.modal-content .title {
text-align: center;
line-height: 40px;
margin-top: 20px;
font-size: 0.25rem;
}
.modal-body ul {
margin-left: 20px;
margin-top: 10px;
}
.modal-body ul li {
height: 40px;
font-size: 16px;
cursor: pointer;
}
.modal-body ul li span {
margin-left: 10px;
font-size: 0.2rem;
color: #eee;
}
.padding_box {
padding: 0.12rem 0.7rem
}
}
</style>
<script>
$(function () {
// 监控点数量的数组
var floorsCameraCounts = [60, 25, 24, 3];
// 摄像头位置的数组
var arr = [{
var upperArr = [{
top: '0.4rem',
left: '0.5rem'
}, {
top: '0.4rem',
left: '1.8rem'
},{
}, {
top: '0.2rem',
left: '3.2rem'
},{
}, {
top: '0.2rem',
left: '4.6rem'
},{
}, {
top: '0.2rem',
left: '6rem'
},{
}, {
top: '0.2rem',
left: '7.4rem'
},{
}, {
top: '0.2rem',
left: '8.8rem'
},{
}, {
top: '0.4rem',
left: '10.2rem'
},{
}, {
top: '0.4rem',
left: '11.6rem'
},{
}, {
top: '1.6rem',
left: '0.5rem'
}, {
top: '1.6rem',
left: '1.8rem'
},{
}, {
top: '1.6rem',
left: '3.2rem'
},{
}, {
top: '1.6rem',
left: '4.6rem'
},{
}, {
top: '1.6rem',
left: '6rem'
},{
}, {
top: '1.6rem',
left: '7.4rem'
},{
}, {
top: '1.6rem',
left: '8.8rem'
},{
}, {
top: '1.6rem',
left: '10.2rem'
},{
}, {
top: '1.6rem',
left: '11.6rem'
},{
}, {
top: '2.5rem',
left: '0.5rem'
}, {
top: '2.5rem',
left: '1.8rem'
},{
}, {
top: '2.5rem',
left: '3.2rem'
},{
}, {
top: '2.5rem',
left: '4.6rem'
},{
}, {
top: '2.5rem',
left: '6rem'
},{
}, {
top: '2.5rem',
left: '7.4rem'
},{
top: '2.5rem',
left: '8.8rem'
},{
top: '2.5rem',
left: '10.2rem'
},{
top: '2.5rem',
left: '10.2rem'
},
{
top: '3.2rem',
left: '0.5rem'
}, {
top: '3.2rem',
left: '1.8rem'
},{
top: '3.2rem',
left: '3.2rem'
},{
top: '3.2rem',
left: '4.6rem'
},{
top: '3.2rem',
left: '6rem'
},{
top: '3.2rem',
left: '7.4rem'
},{
top: '3.2rem',
top: '2.5rem',
left: '8.8rem'
},{
top: '3.2rem',
left: '10.2rem'
},{
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.2rem',
left: '2.5rem'
},{
top: '4.2rem',
left: '4rem'
},{
top: '4.2rem',
left: '7rem'
},{
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.9rem',
left: '0.5rem'
}, {
top: '4.9rem',
left: '1.8rem'
},{
top: '4.9rem',
left: '3.2rem'
},{
top: '4.9rem',
left: '4.6rem'
},{
top: '4.9rem',
left: '6rem'
},{
top: '4.9rem',
left: '7.4rem'
},{
top: '4.9rem',
left: '8.8rem'
},{
top: '4.9rem',
left: '10.2rem'
},{
top: '4.9rem',
left: '11.3rem'
},
{
top: '6rem',
left: '0.5rem'
}, {
top: '6rem',
left: '1.8rem'
},{
top: '6rem',
left: '6rem'
},{
top: '6rem',
left: '4.6rem'
},{
top: '6rem',
left: '6rem'
},{
top: '6rem',
left: '7.4rem'
},{
top: '6rem',
left: '8.8rem'
},{
top: '6rem',
left: '10.2rem'
},{
top: '6rem',
left: '11.5rem'
},
{
top: '7rem',
left: '1.8rem'
},{
top: '7rem',
left: '3.4rem'
},{
top: '7rem',
top: '2.5rem',
left: '10.2rem'
},{
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
}
];
console.log(arr.length)
}];
var centreArr = [
{
top: '2.5rem',
left: '10.2rem'
},
{
top: '3.2rem',
left: '0.5rem'
}, {
top: '3.2rem',
left: '1.8rem'
}, {
top: '3.2rem',
left: '3.2rem'
}, {
top: '3.2rem',
left: '4.6rem'
}, {
top: '3.2rem',
left: '6rem'
}, {
top: '3.2rem',
left: '7.4rem'
}, {
top: '3.2rem',
left: '8.8rem'
}, {
top: '3.2rem',
left: '10.2rem'
}, {
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.2rem',
left: '2.5rem'
}, {
top: '4.2rem',
left: '4rem'
}, {
top: '4.2rem',
left: '7rem'
}, {
top: '3.2rem',
left: '11.3rem'
},
{
top: '4.9rem',
left: '0.5rem'
}, {
top: '4.9rem',
left: '1.8rem'
}, {
top: '4.9rem',
left: '3.2rem'
}, {
top: '4.9rem',
left: '4.6rem'
}, {
top: '4.9rem',
left: '6rem'
}, {
top: '4.9rem',
left: '7.4rem'
}, {
top: '4.9rem',
left: '8.8rem'
}, {
top: '4.9rem',
left: '10.2rem'
}, {
top: '4.9rem',
left: '11.3rem'
},
]
var belowArr = [
{
top: '6rem',
left: '0.5rem'
}, {
top: '6rem',
left: '1.8rem'
}, {
top: '6rem',
left: '6rem'
}, {
top: '6rem',
left: '4.6rem'
}, {
top: '6rem',
left: '6rem'
}, {
top: '6rem',
left: '7.4rem'
}, {
top: '6rem',
left: '8.8rem'
}, {
top: '6rem',
left: '10.2rem'
}, {
top: '6rem',
left: '11.5rem'
},
{
top: '7rem',
left: '1.8rem'
}, {
top: '7rem',
left: '3.4rem'
}, {
top: '7rem',
left: '10.2rem'
}, {
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
},
{
top: '7rem',
left: '1.8rem'
}, {
top: '7rem',
left: '3.4rem'
}, {
top: '7rem',
left: '10.2rem'
}, {
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
}
];
// 更新摄像头视图的函数
function updateCameras (index) {
// 计算要显示的摄像头数量
var camerasCount = floorsCameraCounts[index];
// 获取并更新监控点的数字
$('.monitor').eq(index).find('span').text(camerasCount);
// 生成一个随机的起始索引
var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
// 从arr中获取当前楼层的摄像头位置，从随机的起始索引开始
var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
// 创建新的HTML内容
var htmlTxt = '<img class="bg_img" src="../static/images/commonplan.png" alt="">';
$.each(selectedCameras, function (i, camera) {
function updateCameras(index) {
// 计算要显示的摄像头数量
var camerasCount = floorsCameraCounts[index];
// 获取并更新监控点的数字
$('.monitor').eq(index).find('span').text(camerasCount);
// 生成一个随机的起始索引
// var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
// 从arr中获取当前楼层的摄像头位置，从随机的起始索引开始
// var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
var selectedCameras = [];
let number = parseInt(camerasCount /3);
upperNmuber = parseInt(number + (camerasCount % 3));
let upperList = myRandom(upperArr, upperNmuber).filter(it=>it).map(it=>it);
let centreList = myRandom(centreArr, number).filter(it => it).map(it => it);
let belowList = myRandom(belowArr, number).filter(it => it).map(it => it);
selectedCameras = [...upperList,...centreList,...belowList]
// selectedCameras = upperArr
// 创建新的HTML内容
var htmlTxt = '<img class="bg_img" src="../static/images/commonplan.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>';
});
'style="top:' + camera.top + ';left:' + camera.left + '" ' +
'onclick="handleClick(' + i + ')"></img>';
});
// 更新DOM元素
$('.room_box').html(htmlTxt);
// 更新DOM元素
$('.room_box').html(htmlTxt);
}
function myRandom(arr, length) {
var newArr = []; // 组成的新数组初始化
for (var i = 0; i < length; i++) {
var index = Math.floor(Math.random() * arr.length);
var item = arr[index];
newArr.push(item)
}
return newArr.reverse()
}
// 点击事件绑定到楼层标签
......@@ -344,7 +396,7 @@
$this.addClass('current').siblings().removeClass('current');
// 更新监控点和摄像头
updateCameras(index);
});
......@@ -353,33 +405,33 @@
});
// 点击摄像头时的处理函数
function handleClick (cameraImg) {
function handleClick(cameraImg) {
console.log('Clicked camera', cameraImg);
// 处理摄像头点击事件
// 填充视频和文本到模态框
var $modal = $('#cameraModal');
$('.modal-content .title').html('一号房间监控点情况');
// 假设每个摄像头的视频源可能不同，可以设置为动态获取
$('#cameraVideo source').attr('src', 'path_to_camera_video_source.mp4');
$('#cameraVideo video')[0].load();
// 隐藏模态框的关闭按钮和右上角的关闭按钮
$modal.find('.close').hide();
$modal.modal({
backdrop: 'static',
keyboard: false
});
// 填充视频和文本到模态框
var $modal = $('#cameraModal');
$('.modal-content .title').html('一号房间监控点情况');
// 假设每个摄像头的视频源可能不同，可以设置为动态获取
$('#cameraVideo source').attr('src', 'path_to_camera_video_source.mp4');
$('#cameraVideo video')[0].load();
// 隐藏模态框的关闭按钮和右上角的关闭按钮
$modal.find('.close').hide();
$modal.modal({
backdrop: 'static',
keyboard: false
});
// 显示模态框
$modal.modal('show');
// 显示模态框
$modal.modal('show');
}
</script>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="cameraModalLabel"
<!-- 模态框（Modal） -->
<div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="cameraModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
......@@ -405,7 +457,7 @@
<!-- 加载摄像头视频流或者视频文件 -->
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
</div>
</div>
......@@ -474,14 +526,14 @@
}
});
// 在DOM加载完成后执行
$(document).ready(function() {
// 为li元素添加点击事件处理程序
$(".modal-content li").click(function() {
// 在点击事件中执行你想要的操作，例如弹窗等
alert("点击了" + $(this).find("span").text());
// 在DOM加载完成后执行
$(document).ready(function () {
// 为li元素添加点击事件处理程序
$(".modal-content li").click(function () {
// 在点击事件中执行你想要的操作，例如弹窗等
alert("点击了" + $(this).find("span").text());
});
});
});
</script>
</body>
......
static/css/commonArea1.css 0 → 100644
View file @ ae671471
.content_top {
height: 1.4rem;
background: url("../images/topBg.png") center center no-repeat;
}
.content_box {
width: 13rem;
height: 8.8rem;
margin: 0.2rem;
background: rgba(0, 0, 0, 0.6);
padding: 0.25rem 0.52rem;
border-radius: 0.1rem;
}
.padding_box {
padding: 0.12rem 0.7rem;
}
.room_box {
position: relative;
height: 100%;
}
.bg_img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.camera {
position: absolute;
}
\ No newline at end of file
static/css/workshop1.css 0 → 100644
View file @ ae671471
.padding_box {
padding: 1.4rem 1rem 0;
}
.flex-box {
display: flex;
align-content: center;
justify-content: center;
}
.menu_box {
width: 4rem;
}
.menu_title_box {
width: 100%;
text-align: center;
font-size: 0.32rem;
color: #fff;
}
.tab_list ul {
display: block;
width: 100%;
}
.tab_list ul li {
color: #fff;
font-weight: normal;
font-size: 0.24rem;
background: rgb(0 35 105 / 70%);
margin: 0.2rem 0;
border-radius: 0.2rem;
line-height: 0.6rem;
}
.tab_list ul li div {
font-size: 0.24rem;
justify-content: space-around;
}
.monitor {
font-size: 0.2rem;
}
.monitor span {
background: #006aec;
padding: 0.04rem 0.2rem;
border-radius: 0.2rem;
margin-left: 0.1rem;
}
.tab_list ul li a {
color: #a84c47;
}
.tab_list ul li.current {
line-height: 0.6rem;
border: none;
background: #006aec;
font-weight: normal;
}
.tab_list ul li.current .monitor span {
background: #0055bd;
}
.content_box {
flex: 1;
}
\ No newline at end of file
wgs/beijian.html
View file @ ae671471
......@@ -7,8 +7,8 @@
<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" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop1.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
......@@ -18,9 +18,6 @@
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(function () {
......
wgs/jiaoyu.html
View file @ ae671471
......@@ -7,8 +7,8 @@
<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" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop1.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
......@@ -18,9 +18,6 @@
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(function () {
......
wgs/playground.html
View file @ ae671471
......@@ -24,11 +24,11 @@
</style>
<script type="text/javascript">
var arr = [{
top: '1rem',
left: '1.6rem'
top: '12%',
left: '14%'
}, {
top: '1rem',
left: '10.46rem',
top: '12%',
left: '87%',
}]
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
......
wgs/workshop.html
View file @ ae671471
......@@ -7,8 +7,8 @@
<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" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop1.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
......@@ -19,7 +19,7 @@
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
align-items: normal;
}
</style>
<script type="text/javascript">
......
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