Commit 8d4cfb16 authored by liuqing's avatar liuqing

123

parent b968ce8f
...@@ -25,100 +25,269 @@ ...@@ -25,100 +25,269 @@
<script> <script>
$(function () { $(function () {
// 监控点数量的数组 // 监控点数量的数组
var floorsCameraCounts = [21, 25, 24, 3]; var floorsCameraCounts = [60, 25, 24, 3];
// 摄像头位置的数组 // 摄像头位置的数组
var arr = [{ var arr = [{
top: '1.4rem', top: '0.4rem',
left: '0.15rem' left: '0.5rem'
}, { }, {
top: '2.3rem', top: '0.4rem',
left: '1.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: '2.3rem', top: '1.6rem',
left: '3.4rem' left: '1.8rem'
}, { },{
top: '4.3rem', top: '1.6rem',
left: '1.4rem' left: '3.2rem'
}, { },{
top: '4.3rem', top: '1.6rem',
left: '3.4rem' 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: '8.2rem', top: '2.5rem',
left: '1.4rem' 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: '8.2rem', top: '3.2rem',
left: '3.4rem' 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: '6.3rem', top: '4.9rem',
left: '1.4rem' 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: '6.3rem', 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' left: '3.4rem'
},{
top: '7rem',
left: '10.2rem'
},{
top: '7rem',
left: '11.5rem'
},
{
top: '7rem',
left: '7.4rem'
},
{
top: '8rem',
left: '0.5rem'
}, { }, {
top: '3.3rem', top: '8rem',
left: '5.3rem' left: '1.8rem'
}, { },{
top: '5.0rem', top: '8rem',
left: '6.6rem' left: '8rem'
}, { },{
top: '5.0rem', top: '8rem',
left: '5.3rem' left: '4.6rem'
}, { },{
top: '3.3rem', top: '8rem',
left: '6.6rem' left: '6rem'
}, { },{
top: '2.3rem', top: '8rem',
left: '8.5rem' left: '7.4rem'
}, { },{
top: '2.3rem', top: '8rem',
left: '10.5rem' left: '8.8rem'
}, { },{
top: '4.3rem', top: '8rem',
left: '8.5rem' left: '10.2rem'
}, { },{
top: '4.3rem', top: '8rem',
left: '10.5rem' left: '11.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) console.log(arr.length)
debugger
// 更新摄像头视图的函数 // 更新摄像头视图的函数
function updateCameras (index) { function updateCameras (index) {
// 计算要显示的摄像头数量 // 计算要显示的摄像头数量
var camerasCount = floorsCameraCounts[index]; var camerasCount = floorsCameraCounts[index];
debugger
// 获取并更新监控点的数字 // 获取并更新监控点的数字
$('.monitor').eq(index).find('span').text(camerasCount); $('.monitor').eq(index).find('span').text(camerasCount);
// 从arr中获取当前楼层的摄像头位置 // 生成一个随机的起始索引
var selectedCameras = arr.slice(0, camerasCount); var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
debugger
// 创建新的HTML内容 // 从arr中获取当前楼层的摄像头位置,从随机的起始索引开始
var htmlTxt = '<img class="bg_img" src="../static/images/wuye1.png" alt="">'; var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
$.each(selectedCameras, function (i, camera) {
// 创建新的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" ' + htmlTxt += '<img class="camera" src="../static/images/camera.png" ' +
'style="top:' + camera.top + ';left:' + camera.left + '" ' + 'style="top:' + camera.top + ';left:' + camera.left + '" ' +
'onclick="handleClick(this)"></img>'; 'onclick="handleClick(this)"></img>';
}); });
// 更新DOM元素 // 更新DOM元素
$('.room_box').html(htmlTxt); $('.room_box').html(htmlTxt);
} }
// 点击事件绑定到楼层标签 // 点击事件绑定到楼层标签
...@@ -130,7 +299,7 @@ ...@@ -130,7 +299,7 @@
$this.addClass('current').siblings().removeClass('current'); $this.addClass('current').siblings().removeClass('current');
// 更新监控点和摄像头 // 更新监控点和摄像头
debugger
updateCameras(index); updateCameras(index);
}); });
......
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