视频监控终极版

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="ProjectMonitor_videomonitor_index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../js/jquery-1.12.3.min.js"></script>
<style type="text/css">
span {
background-color:white;margin-left:5%;font-size:14px;font-family:‘Microsoft YaHei‘;text-align:center;
color:black;width:71px;float:left;display:block;height:25px;text-align:center;line-height:25px;
margin-top:3px;
}
#DivDeviceList{
width:300px;height:97%;font-size:14px;font-family:‘Microsoft YaHei‘;text-align:center;overflow:scroll;
}
.ddv{
width:100%;height:500px;font-size:14px;font-family:‘Microsoft YaHei‘;text-align:center;
}

.ddv1{
font-size:18px;color:white;font-family:‘Microsoft YaHei‘;text-align:left;width:93%;height:30px;margin-left:7%;margin-top:3%;
}
.dddv1{
font-size:14px;color:white;font-family:‘Microsoft YaHei‘;text-align:left;width:97%;margin-left:3%;margin-top:0px;
}
.sdiv{
width:15%;height:100%;font-size:24px;font-family:‘Microsoft YaHei‘;text-align:center;background-color:rgb(58,58,58);color:white;margin:auto;line-height:40px;float:left;
}
.smallDiv{
width:197px;height:24%;float:left;margin:1px;
}
.smallDiv2{
width:49%;height:48%;float:left;margin:5px;margin-left:6px;
}
.smallDiv3{
width:44%;height:42%;background-color:rgb(190,89,89);float:right;margin:10px;margin-right:40px;margin-top:40px;
}
.smallDiv4{
width:49%;height:42%;float:left;margin:3px;margin-left:3px;margin-top:3px;
}
.smallDivDIv{
width:48.9%;height:48%;background-color:rgb(190,89,89);float:left;margin:3px;margin-left:3px;margin-top:3px;
}
.smallDiv5{
width:48.9%;height:48%;float:left;margin:3px;
}
#thirdDiv{
width:100%;height:550px;border:0px solid rgb(230,230,230);background-color:rgb(94,94,94);
}
#bottomDv{
width:100%;height:300px;border:0px solid rgb(230,230,230);background-color:rgb(94,94,94);text-align:center;
margin:auto;
}
#diaoyong {
margin-left: 30px;
width: 108px;
height: 36px;
margin-top:30px;
float:left;
/*background: url(‘Images/myImage/ddiaoyong.png‘);*/
}
#yuzhi{
width: 108px;
height: 36px;
margin-top:30px;
float:right;
margin-right:35px;
}

#yushua {
margin-left: 30px;
width: 108px;
height: 36px;
margin-top:20px;
float:left;
/*background: url(‘Images/myImage/ddiaoyong.png‘);*/
}
#light{
width: 108px;
height: 36px;
margin-top:20px;
float:right;
margin-right:35px;
}

#close{
margin-left: 30px;
width: 108px;
height: 107px;
margin-top:20px;
float:left;
}
#closeall{
width: 108px;
height: 107px;
margin-top:20px;
float:right;
margin-right:35px;
}
#volumn{
margin-left: 25px;
width: 260px;
height: 34px;
margin-top:40px;
float:left;
background-image:url(../../Images/myImage/volumn.png);
}
#wheel{
margin-left: 20px;
width: 280px;
height: 151px;
margin-top:35px;
float:left;
background-image:url(../../Images/myImage/wheel.png);
}
.inputdiao{
background-image:url(../../Images/myImage/diaoyong.png); border:1px; margin:0; padding:1px 1px; height:36px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;
}
.inputyuzhi{
background-image:url(../../Images/myImage/yuzhi.png); border:1px; margin:0; padding:1px 1px; height:36px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;float:right;
}
.inputyushua{
background-image:url(../../Images/myImage/yushua.png); border:1px; margin:0; padding:1px 1px; height:36px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;
}
.inputlight{
background-image:url(../../Images/myImage/light.png); border:1px; margin:0; padding:1px 1px; height:36px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;
}
.inputclose{
background-image:url(../../Images/myImage/closeinput.png); border:1px; margin:0; padding:1px 1px; height:107px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;
}
.inputcloseall{
background-image:url(../../Images/myImage/closeall.png); border:1px; margin:0; padding:1px 1px; height:107px; width:108px;color:black; font-size:20px;line-height:20px;font-family:‘Microsoft YaHei‘;
}
.innerDv{
margin-left:150px;background-image:url(../../Images/myImage/jia.png);width:27px;height:31px;float:left;background-color:rgb(64,67,74);
}
.outerDv{
margin-left:250px;background-image:url(../../Images/myImage/minus.png);width:27px;height:31px;background-color:rgb(64,67,74);
}
#bottomFirstDv{
width:300px;
height:75px;
margin-top:20px;
background-color:rgb(59,62,69);
margin-left:8px;
border:3px solid rgb(40,40,40);
text-align:center;
margin:auto;
}
#bottomSecondDv{
width:300px;
height:75px;
margin-top:35px;
background-color:rgb(59,62,69);
margin-left:8px;
border:3px solid rgb(40,40,40);
}
#firstscreen{
margin-left:10px;background-image:url(../../Images/myImage/yiping.png);width:60px;height:41px;float:left;text-align:center;margin-top:15px;
}
#secondscreen{
margin-left:15px;background-image:url(../../Images/myImage/zhengping.png);width:55px;height:42px;float:left;text-align:center;margin-top:15px;
}
#thirdscreen{
margin-left:20px;background-image:url(../../Images/myImage/siping.png);width:56px;height:42px;float:left;text-align:center;margin-top:15px;
}
#fourthscreen{
background-image:url(../../Images/myImage/demo.png);width:56px;height:42px;float:right;text-align:center;margin-top:15px;margin-right:10px;
}

#left1screen{
margin-left:10px;background-image:url(../../Images/myImage/25ping.png);width:56px;height:42px;float:left;text-align:center;margin-top:15px;
}
#left2screen{
margin-left:15px;background-image:url(../../Images/myImage/36ping.png);width:55px;height:42px;float:left;text-align:center;margin-top:15px;
}
#left3screen{
margin-left:20px;background-image:url(../../Images/myImage/thirdphoto.png);width:56px;height:43px;float:left;text-align:center;margin-top:15px;
}
#left4screen{
background-image:url(../../Images/myImage/lastphoto.png);width:57px;height:46px;float:right;text-align:center;margin-top:15px;margin-right:10px;
}

</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
var listItem = [];
var normalClr = "rgba(43,43,43,1)";
var actionClr = "rgba(14,54,91,1)";
$(function () {
//document.getElementById(‘total‘).style.width = window.screen.width; +‘px‘;
document.getElementById(‘total‘).style.height = window.screen.height - 80 + ‘px‘;
//console.log(document.body.clientHeight);
//document.getElementById(‘dv1‘).style.width = document.body.clientWidth - 700 + ‘px‘;
listItem.push(document.getElementById(‘firstscreen‘));
listItem.push(document.getElementById(‘secondscreen‘));
listItem.push(document.getElementById(‘thirdscreen‘));
listItem.push(document.getElementById(‘fourthscreen‘));
})

</script>
</head>
<body style="width:100%;height:100%;">
<div id="total" style="width:1420px;text-align:center;margin:auto;">
<div id="dv" style="width:300px;height:100%; background-color:rgb(94,94,94);float:left;">
<div style="width:300px;height:40px;font-size:24px;font-family:‘Microsoft YaHei‘;text-align:center;background-color:rgb(58,58,58);color:white;margin:auto;line-height:40px;">监控设备</div>
<div id="DivDeviceList"></div>
</div>
<div id="dv1" style="height:100%;float:left;width:800px;">
<div id="seconddiv" style="width:100%;height:40px;background-color:rgb(58,58,58);"></div>
<div id="centreSquare" style="width:100%;height:84%;text-align:center;vertical-align:middle;">
<div class=‘smallDiv‘ id="oneDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc1‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="twoDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc2‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="threeDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc3‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="fourDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc4‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="fiveDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc5‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="sixDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc6‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="sevenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc7‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="eightDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc8‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="nineDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc9‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="tenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc10‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="elevenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc11‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="twelveDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc12‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="thirteenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc13‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="fourteenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc14‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="fifteenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc15‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
<div class=‘smallDiv‘ id="sixteenDv">
<object type=‘application/x-vlc-plugin‘ id=‘vlc16‘ events=‘True‘ width=‘197‘ height=‘200‘>
<param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ />
<param name=‘volume‘ value=‘50‘ />
<param name=‘autoplay‘ value=‘true‘ />
<param name=‘loop‘ value=‘false‘ />
<param name=‘fullscreen‘ value=‘true‘ />
</object>
</div>
</div>
</div>
<div id="dv2" style="width:320px;height:100%;float:right;">
<div style="width:100%;height:40px;font-size:24px;font-family:‘Microsoft YaHei‘;text-align:center;background-color:rgb(58,58,58);color:white;margin:auto;line-height:40px;"></div>
<div id="thirdDiv">
<div id="diaoyong"><input value=" 调用" class="inputdiao" type="submit" /></div>
<div id="yuzhi"><input value=" 预置" type="submit" class="inputyuzhi" /></div>
<div id="yushua"><input value=" 雨刷" class="inputyushua" type="submit" /></div>
<div id="light"><input value=" 灯光" type="submit" class="inputlight" /></div>

<div id="close"><input value="" type="submit" class="inputclose" /></div>
<div id="closeall"><input value="" type="submit" class="inputcloseall" /></div>
<div id="volumn"></div>
<div id="wheel">
<div style="margin-top:15px;">
<div class="innerDv"></div>
<div style="float:left;margin-left:195px;width:35px;height:21px;margin-top:-25px;font-size:15px;font-weight:bold;font-family:‘Microsoft YaHei‘;">焦距</div>
<div class="outerDv"></div>
</div>
<div style="margin-top:15px;">
<div class="innerDv"></div>
<div style="float:left;margin-left:195px;width:35px;height:21px;margin-top:-25px;font-size:15px;font-weight:bold;font-family:‘Microsoft YaHei‘;">光圈</div>
<div class="outerDv"></div>
</div>
<div style="margin-top:15px;">
<div class="innerDv"></div>
<div style="float:left;margin-left:195px;width:35px;height:21px;margin-top:-25px;font-size:15px;font-weight:bold;font-family:‘Microsoft YaHei‘;">变倍</div>
<div class="outerDv"></div>
</div>
</div>
</div>
<div id="bottomDv">
<div id="bottomFirstDv">
<div id="firstscreen" class="slipDv" onclick="clkItem(this)" onmouseover="overItem()"></div>
<div id="secondscreen" class="slipDv" onclick="clkItem(this)" onmouseover="overItem()"></div>
<div id="thirdscreen" class="slipDv" onclick="clkItem(this)" onmouseover="overItem()"></div>
<div id="fourthscreen" class="slipDv" onclick="clkItem(this)" onmouseover="overItem()"></div>
</div>
<div id="bottomSecondDv">
<div id="left1screen" onclick="clkItem(this)" onmouseover="overItem()"></div>
<div id="left2screen" onclick="clkItem(this)" onmouseover="overItem()"></div>
<div id="left3screen"></div>
<div id="left4screen"></div>
</div>
</div>
</div>
</div>

</body>
</html>

<script>
function changeColor(obj) {
if (obj.style.backgroundColor == ‘white‘) {
obj.style.backgroundColor = ‘rgb(58,58,58)‘;
obj.style.color = ‘white‘;
}
else {
obj.style.backgroundColor = ‘white‘;
obj.style.color = ‘rgb(58,58,58)‘;
}
}
function setfocus(obj)
{
obj.style.backgroundColor = ‘rgb(58,58,58)‘;
obj.style.color = ‘white‘;
}

function setfocusout(obj)
{
obj.style.backgroundColor = ‘white‘;
obj.style.color = ‘rgb(58,58,58)‘;
}
window.onload = function ()
{

initDevice();
secondPart();
start();
//centrePart();
}
//第一部分
function initDevice()
{
var areaObjList = [];

var cameraList1 = [];
cameraList1.push("7K00-1");
cameraList1.push("7K00-2");
cameraList1.push("7K00-3");
cameraList1.push("7K00-4");
cameraList1.push("7K00-5");
cameraList1.push("7K00-6");
cameraList1.push("7K00-1");
cameraList1.push("7K00-2");

var aObj1 = new areaObj("办公室", cameraList1);

var cameraList2 = [];
cameraList2.push("7K00-1");
cameraList2.push("7K00-2");
cameraList2.push("7K00-3");
cameraList2.push("7K00-4");

var aObj2 = new areaObj("食堂", cameraList2);

var cameraList3 = [];
cameraList3.push("7K00-1");
cameraList3.push("7K00-2");
cameraList3.push("7K00-3");
cameraList3.push("7K00-4");
cameraList3.push("7K00-5");
cameraList3.push("7K00-1");
cameraList3.push("7K00-2");
cameraList3.push("7K00-3");
cameraList3.push("7K00-4");
cameraList3.push("7K00-5");
cameraList3.push("7K00-1");
cameraList3.push("7K00-2");
cameraList3.push("7K00-3");
cameraList3.push("7K00-4");
var aObj3 = new areaObj("工业大厦", cameraList3);

var cameraList4 = [];
cameraList4.push("7K00-1");
cameraList4.push("7K00-2");
cameraList4.push("7K00-3");
cameraList4.push("7K00-4");
cameraList4.push("7K00-5");
cameraList4.push("7K00-6");
cameraList4.push("7K00-1");

var aObj4 = new areaObj("大厅", cameraList4);

var cameraList5 = [];
cameraList5.push("7K00-1");
cameraList5.push("7K00-2");
cameraList5.push("7K00-3");
cameraList5.push("7K00-4");
cameraList5.push("7K00-1");
cameraList5.push("7K00-2");
cameraList5.push("7K00-3");
cameraList5.push("7K00-1");
cameraList5.push("7K00-2");
cameraList5.push("7K00-3");
var aObj5 = new areaObj("住房", cameraList5);

areaObjList.push(aObj1)
areaObjList.push(aObj2)
areaObjList.push(aObj3)
areaObjList.push(aObj4)
areaObjList.push(aObj5)

//
//var html = "<div class=‘ddv‘ style=‘width:100%;height:15%;font-size:14px;font-family:‘Microsoft YaHei‘;text-align:center;‘>";
var html = "";
for (n in areaObjList)
{
var aobj = areaObjList[n];
//html += "<div class=‘ddv1‘ style=‘font-size:18px;color:white;font-family:‘Microsoft YaHei‘;text-align:left;width:97%;height:25%;margin-left:7%;margin-top:3%;‘>" + aobj.name + ":</div>";
html += "<div class=‘ddv1‘>" + aobj.name + ":</div>";
var dddv1Height;
if (aobj.cameraList.length % 3 == 0) {
dddv1Height = aobj.cameraList.length / 3 * 34;

html += " <div class=‘dddv1‘ style=‘height:" + dddv1Height + ‘px‘ + ";‘>";

//html += " style=‘height:‘" + dddv1Height + ‘px‘ + ">";
}
else {
dddv1Height = Math.ceil(aobj.cameraList.length / 3) * 34;
//html += " style=‘height:" + dddv1Height + ‘px‘ + ";‘>";
html += " <div class=‘dddv1‘ style=‘height:" + dddv1Height + ‘px‘ + ";‘>";
}
//html += " <div class=‘dddv1‘ >";
for (m in aobj.cameraList)
{

//html += " <span onclick=‘changeColor(this)‘ onmouseover=‘setfocus(this)‘ onmouseout=‘setfocusout(this)‘>" + aobj.cameraList[m] + "</span>"

html += " <span onmouseover=‘setfocus(this)‘ onmouseout=‘setfocusout(this)‘>" + aobj.cameraList[m] + "</span>"

}
html += "</div>"
}
//html += "</div>";
var DivDeviceList = document.getElementById("DivDeviceList");
DivDeviceList.innerHTML = html;
}

function secondPart()
{
var arrayList = [];
arrayList.push("综合监控");
arrayList.push("本地回放");
arrayList.push("数据中心");
arrayList.push("用户中心");
//var list = new list(arrayList);
var middleHtml = "";
for (var i = 0; i < arrayList.length; i++)
{
middleHtml += "<div class=‘sdiv‘ onclick=‘changeColor(this);‘>"+arrayList[i]+"</div>";
}
var secondDv = document.getElementById("seconddiv");
secondDv.innerHTML = middleHtml;
}

function centrePart()
{
var photoList = [];
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
photoList.push("../../Images/myImage/photo10.jpg");
photoList.push("../../Images/myImage/photo11.jpg");
photoList.push("../../Images/myImage/photo12.jpg");
photoList.push("../../Images/myImage/photo13.jpg");
photoList.push("../../Images/myImage/photo14.jpg");
photoList.push("../../Images/myImage/photo15.jpg");
photoList.push("../../Images/myImage/photo16.jpg");
var centreHtml = "";
for (var i = 0; i < photoList.length; i++)
{
centreHtml += "<div class=‘smallDiv‘ style=‘background-image:url("+photoList[i]+")‘></div>";
}
var centreD = document.getElementById(‘centreSquare‘);
centreD.innerHTML = centreHtml;
}
function centrePart4() {
var photoList = [];
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
photoList.push("../../Images/myImage/photo10.jpg");
photoList.push("../../Images/myImage/photo11.jpg");
photoList.push("../../Images/myImage/photo12.jpg");
photoList.push("../../Images/myImage/photo13.jpg");
photoList.push("../../Images/myImage/photo14.jpg");
photoList.push("../../Images/myImage/photo15.jpg");
photoList.push("../../Images/myImage/photo16.jpg");
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
var centreHtml = "";
for (var i = 0; i < photoList.length; i++) {
centreHtml += "<div class=‘smallDiv‘ style=‘background-image:url(" + photoList[i] + ")‘></div>";
}
var centreD = document.getElementById(‘centreSquare‘);
centreD.innerHTML = centreHtml;
}
function centrePart5() {
var photoList = [];
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
photoList.push("../../Images/myImage/photo10.jpg");
photoList.push("../../Images/myImage/photo11.jpg");
photoList.push("../../Images/myImage/photo12.jpg");
photoList.push("../../Images/myImage/photo13.jpg");
photoList.push("../../Images/myImage/photo14.jpg");
photoList.push("../../Images/myImage/photo15.jpg");
photoList.push("../../Images/myImage/photo16.jpg");
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList.push("../../Images/myImage/photo5.jpg");
photoList.push("../../Images/myImage/photo6.jpg");
photoList.push("../../Images/myImage/photo7.jpg");
photoList.push("../../Images/myImage/photo8.jpg");
photoList.push("../../Images/myImage/photo9.jpg");
photoList.push("../../Images/myImage/photo10.jpg");
photoList.push("../../Images/myImage/photo11.jpg");
var centreHtml = "";
for (var i = 0; i < photoList.length; i++) {
centreHtml += "<div class=‘smallDiv‘ style=‘background-image:url(" + photoList[i] + ")‘></div>";
}
var centreD = document.getElementById(‘centreSquare‘);
centreD.innerHTML = centreHtml;
}
function centrePart2() {
var photoList = [];
photoList.push("../../Images/myImage/fourth-fourth.jpg");
photoList.push("../../Images/myImage/one-fourth.jpg");
photoList.push("../../Images/myImage/three-fourth.jpg");
photoList.push("../../Images/myImage/two-fourth.jpg");
var centreHtml = "";
for (var i = 0; i < photoList.length; i++) {
centreHtml += "<div class=‘smallDiv2‘ style=‘background-image:url(" + photoList[i] + ")‘></div>";
}
var centreD = document.getElementById(‘centreSquare‘);
centreD.innerHTML = centreHtml;
}

function centrePart3() {
var photoList = [];
var photoList1 = [];
var photoList2 = [];
photoList.push("../../Images/myImage/photo1.jpg");
photoList.push("../../Images/myImage/photo2.jpg");
photoList.push("../../Images/myImage/photo3.jpg");
photoList.push("../../Images/myImage/photo4.jpg");
photoList1.push("../../Images/myImage/photo5.jpg");
photoList1.push("../../Images/myImage/photo6.jpg");
photoList1.push("../../Images/myImage/photo7.jpg");
photoList1.push("../../Images/myImage/photo8.jpg");
photoList2.push("../../Images/myImage/photo9.jpg");
photoList2.push("../../Images/myImage/photo10.jpg");
photoList2.push("../../Images/myImage/photo11.jpg");
photoList2.push("../../Images/myImage/photo12.jpg");
//photoList1.push("../../Images/myImage/photo13.jpg");
//photoList1.push("../../Images/myImage/photo14.jpg");
//photoList1.push("../../Images/myImage/photo15.jpg");
//photoList1.push("../../Images/myImage/photo16.jpg");
var centreHtml = "";
centreHtml += "<div class=‘smallDiv2‘ style=‘background-image:url(../../Images/myImage/fourth-fourth.jpg)‘></div>";
centreHtml += "<div class=‘smallDiv2‘>";
for (var k = 0; k < photoList.length; k++)
{
centreHtml += "<div class=‘smallDiv5‘ style=‘background-image:url(" + photoList[k] + ")‘></div>";
}
centreHtml += "</div>";
centreHtml += "<div class=‘smallDiv2‘>";
for (var i = 0; i < photoList1.length; i++) {
centreHtml += "<div class=‘smallDivDIv‘ style=‘background-image:url(" + photoList1[i] + ")‘></div>";
}
centreHtml += "</div>";
centreHtml += "<div class=‘smallDiv2‘>";
for (var i = 0; i < photoList2.length; i++) {
centreHtml += "<div class=‘smallDivDIv‘ style=‘background-image:url(" + photoList2[i] + ")‘></div>";
}
centreHtml += "</div>";
var centreD = document.getElementById(‘centreSquare‘);
centreD.innerHTML = centreHtml;
}
function areaObj(name,cameraList)
{
this.name = name;
this.cameraList = cameraList;

}

function start() {
$(‘.smallDiv‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);
$(‘object‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);

$(‘.smallDiv‘).css(‘display‘, ‘none‘);
document.getElementById(‘oneDv‘).style.width = ‘395px‘;
document.getElementById(‘oneDv‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘twoDv‘).style.width = ‘395px‘;
document.getElementById(‘twoDv‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘threeDv‘).style.width = ‘395px‘;
document.getElementById(‘threeDv‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘fourDv‘).style.width = ‘395px‘;
document.getElementById(‘fourDv‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;

document.getElementById(‘vlc1‘).style.width = ‘395px‘;
document.getElementById(‘vlc1‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc2‘).style.width = ‘395px‘;
document.getElementById(‘vlc2‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc3‘).style.width = ‘395px‘;
document.getElementById(‘vlc3‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc4‘).style.width = ‘395px‘;
document.getElementById(‘vlc4‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;

$(‘#oneDv‘).css(‘display‘, ‘block‘);
$(‘#twoDv‘).css(‘display‘, ‘block‘);
$(‘#threeDv‘).css(‘display‘, ‘block‘);
$(‘#fourDv‘).css(‘display‘, ‘block‘);
}

function clkItem(obj) {
//document.getElementById(‘centreSquare‘).style.display = ‘none‘;
if (obj.id == ‘firstscreen‘)
{
//document.getElementById(‘centreSquare‘).style.display = ‘block‘;
//var centreHtml = "";
//centreHtml += "<div style=‘background-image:url(../../Images/myImage/fullscreen.jpg);width:100%;height:100%;‘></div>";
document.getElementById(‘dv‘).style.display = ‘none‘;
document.getElementById(‘dv2‘).style.display = ‘none‘;
$(‘.smallDiv‘).css(‘display‘, ‘none‘);
$(‘#oneDv‘).css(‘display‘, ‘block‘);
document.getElementById(‘seconddiv‘).style.width = ‘1420px‘;
//centreHtml += "<div style=‘width:" + window.screen.width + "px;height:" + window.screen.height + "px;‘><object type=‘application/x-vlc-plugin‘ id=‘vlc‘ events=‘True‘ width=‘1600‘ height=‘800‘ ><param name=‘mrl‘ value=‘rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov‘ /><param name=‘volume‘ value=‘50‘ /><param name=‘autoplay‘ value=‘true‘ /><param name=‘loop‘ value=‘false‘ /><param name=‘fullscreen‘ value=‘false‘ /></object></div>";
//document.getElementById(‘centreSquare‘).style.width = window.screen.width + ‘px‘;
document.getElementById(‘oneDv‘).style.width = ‘1420px‘;
//document.getElementById(‘centreSquare‘).style.height = window.screen.height + ‘px‘;
document.getElementById(‘oneDv‘).style.height = window.screen.height + ‘px‘;
document.getElementById(‘vlc1‘).style.width = ‘1420px‘;
document.getElementById(‘vlc1‘).style.height = window.screen.height + ‘px‘;

document.onkeydown = function (ev) {
var oevent = ev || event;
if (oevent.keyCode == 27) {
document.getElementById(‘dv‘).style.display = ‘block‘;
document.getElementById(‘dv2‘).style.display = ‘block‘;
//centreHtml += "<div style=‘background-image:url(../../Images/myImage/fullscreen.jpg);width:100%;height:100%;‘></div>";
//document.getElementById(‘centreSquare‘).style.width = window.screen.width + ‘px‘;
//document.getElementById(‘oneDv‘).style.width = ‘288px‘;
//document.getElementById(‘centreSquare‘).style.height = window.screen.height + ‘px‘;
//document.getElementById(‘oneDv‘).style.height = ‘211px‘;
//document.getElementById(‘oneDv‘).style.height = ‘200px‘;
//document.getElementById(‘oneDv‘).style.width = ‘197px‘;

$(‘.smallDiv‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);
$(‘object‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);

//document.getElementById(‘vlc1‘).style.width = ‘197px‘;
//document.getElementById(‘vlc1‘).style.height = ‘200px‘;
//$(‘#oneDv‘).css(‘display‘, ‘block‘);
$(‘.smallDiv‘).css(‘display‘, ‘block‘);

}
}
//var centreD = document.getElementById(‘centreSquare‘);
//centreD.innerHTML = centreHtml;
}
if (obj.id == ‘secondscreen‘) {
$(‘.smallDiv‘).css(‘display‘, ‘none‘);
$(‘.smallDiv‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);
$(‘object‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);

document.getElementById(‘oneDv‘).style.width = ‘800px‘;
//document.getElementById(‘centreSquare‘).style.height = window.screen.height + ‘px‘;
document.getElementById(‘oneDv‘).style.height = document.body.clientHeight - 30-150 + ‘px‘;
document.getElementById(‘vlc1‘).style.width = ‘795px‘;
document.getElementById(‘vlc1‘).style.height = document.body.clientHeight - 30-150 + ‘px‘;
$(‘#oneDv‘).css(‘display‘, ‘block‘);

//var centreHtml = "";
//centreHtml += "<div style=‘background-image:url(../../Images/myImage/fullscreen.jpg);width:100%;height:100%;‘></div>";
//var centreD = document.getElementById(‘centreSquare‘);
//centreD.innerHTML = centreHtml;
}
if (obj.id == ‘thirdscreen‘)
{
$(‘.smallDiv‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);
$(‘object‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);

$(‘.smallDiv‘).css(‘display‘, ‘none‘);
document.getElementById(‘oneDv‘).style.width = ‘395px‘;
document.getElementById(‘oneDv‘).style.height = (document.body.clientHeight -200) / 2 + ‘px‘;
document.getElementById(‘twoDv‘).style.width = ‘395px‘;
document.getElementById(‘twoDv‘).style.height = (document.body.clientHeight -200) / 2 + ‘px‘;
document.getElementById(‘threeDv‘).style.width = ‘395px‘;
document.getElementById(‘threeDv‘).style.height = (document.body.clientHeight -200) / 2 + ‘px‘;
document.getElementById(‘fourDv‘).style.width = ‘395px‘;
document.getElementById(‘fourDv‘).style.height = (document.body.clientHeight -200) / 2 + ‘px‘;

document.getElementById(‘vlc1‘).style.width = ‘395px‘;
document.getElementById(‘vlc1‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc2‘).style.width = ‘395px‘;
document.getElementById(‘vlc2‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc3‘).style.width = ‘395px‘;
document.getElementById(‘vlc3‘).style.height = (document.body.clientHeight - 200) / 2 + ‘px‘;
document.getElementById(‘vlc4‘).style.width = ‘395px‘;
document.getElementById(‘vlc4‘).style.height = (document.body.clientHeight -200) / 2 + ‘px‘;

$(‘#oneDv‘).css(‘display‘, ‘block‘);
$(‘#twoDv‘).css(‘display‘, ‘block‘);
$(‘#threeDv‘).css(‘display‘, ‘block‘);
$(‘#fourDv‘).css(‘display‘, ‘block‘);

//centrePart2();
}
if (obj.id == ‘fourthscreen‘)
{
$(‘.smallDiv‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);
$(‘object‘).css(‘width‘, ‘197px‘).css(‘height‘, ‘200px‘);

$(‘.smallDiv‘).css(‘display‘, ‘block‘);
$(‘#oneDv‘).css(‘display‘, ‘none‘);
$(‘#twoDv‘).css(‘display‘, ‘none‘);
$(‘#fiveDv‘).css(‘display‘, ‘none‘);
$(‘#sixDv‘).css(‘display‘, ‘none‘);
document.getElementById(‘oneDv‘).style.width = ‘396px‘;
document.getElementById(‘oneDv‘).style.height = ‘401px‘;
document.getElementById(‘vlc1‘).style.width = ‘396px‘;
document.getElementById(‘vlc1‘).style.height = ‘401px‘;
$(‘#oneDv‘).css(‘display‘, ‘block‘);
//centrePart3();
}
if (obj.id == ‘left1screen‘) {
centrePart4();
}

if (obj.id == ‘left2screen‘) {
centrePart5();
}
//else {
// centrePart();
//}
}

//function clkOut()
//{
// centrePart();
//}
function overItem()
{
//document.getElementsByClassName(‘slipDv‘).style.cursor = ‘pointer‘;
document.getElementById(‘fourthscreen‘).style.cursor = ‘pointer‘;
document.getElementById(‘thirdscreen‘).style.cursor = ‘pointer‘;
document.getElementById(‘secondscreen‘).style.cursor = ‘pointer‘;
document.getElementById(‘firstscreen‘).style.cursor = ‘pointer‘;
}
</script>

时间： 2024-10-30 02:02:51

视频监控终极版的相关文章

专业教育版-手动遥控云视频监控巡逻小车

    一.整机说明 基于平衡车设计三轮底盘,采用加厚加固型结构,加上单片机控制板.超声模块.4G路由器.GPS北斗双模定位模块.前后双视摄像头等模块设计的一款手动遥控云视频监控巡逻小车. 1.1结构尺寸 1.2部件说明 二.性能参数 整机参数 整机重量 约40kg 整机尺寸 54.6 x 52.8 x 111cm 最高速度 约16km/h 续航 约30km 最大爬坡度 约15° 工作温度 -10℃~ +40℃ 储存温度 -20℃~ +45℃ 电池组参数 额定电压 DC  54.8V 最高充电电

[转]py编码终极版

py编码终极版 原文链接:http://www.cnblogs.com/yuanchenqi/articles/5956943.html 一 什么是编码? 基本概念很简单.首先,我们从一段信息即消息说起,消息以人类可以理解.易懂的表示存在.我打算将这种表示称为"明文"(plain text).对于说英语的人,纸张上打印的或屏幕上显示的英文单词都算作明文. 其次,我们需要能将明文表示的消息转成另外某种表示,我们还需要能将编码文本转回成明文.从明文到编码文本的转换称为"编码&qu

08重编终极版《东邪西毒：终极版》DVD粤语中字

1.东邪西毒].Ashes.of.Time.1994.384p.DVDRip.x264.ac3-DTMM.mkv 这个版本最清晰 ,可惜删减了,只有87分钟,粤语,1.4G. 2.东邪西毒(初始版).Ashes.Of.Time.1994.X264.AAC.D5-MINISD.lever1119.mkv 日本发行的,画质昏黄,可惜是国语的,片头日语说明,100分钟,805M. 3.[东邪西毒].Ashes.of.Time.1994.iNTERNAL.SUBBED.DVDRip.XviD-CFE.A

用motion实现家庭视频监控

需求?当然不是为了艳照.你们这些猥琐的人类! 毕竟家里总会有没人的时候,出门走到半路忘记煤气灶是不是关了,还得回去看看. 在这个科技以人为本的时代,当然应该是拿出智能手机联网看看啦.还有万一有人闯空门什么的,也能有个及时报警什么的. motion是什么?motion是一个提供视频监控解决方式的开源软件.支持Linux/FreeBSD/MacOS等多个平台.本文以Linux为例,測试平台是LinuxMint17.motion的功能主要有下面几个: 支持USB摄像头和webcam(可通过HTTP查看

Qt编写项目作品大全（自定义控件+输入法+大屏电子看板+视频监控+楼宇对讲+气体安全等）

一.自定义控件大全 (一).控件介绍 超过150个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的控件数量. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量.qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到

用java写一个远程视频监控系统，实时监控（类似直播）我想用RPT协议，不知道怎么把RPT协议集成到项目中

我最近在用java写一个远程视频监控系统,实时监控(类似直播)我想用RPT协议,不知道怎么把RPT协议集成到项目中,第一次写项目,写过这类项目的多多提意见,哪方面的意见都行,有代码或者demo的求赏给我,谢谢

优云软件应邀参加“视频侦查与视频监控深度应用研修班”并作主题演讲

为推进全国公安机关视频监控系统联网建设,加强视频侦查技术深度应用,由公安部第一研究所<警察技术>杂志社主办的"全国公安机关视频监控建设与实战应用专题研修班"于2017年5月9日-12日在贵阳举行,研修班邀请了400余位来自全国各地各级公安机关负责视频监控建设及视频侦查工作的领导及业务骨干,学员们一起探讨视频监控相关产品及最新技术应用. 研修班会场 优云软件作为双态运维先行者.企业级运维专家,应邀参加本次研修班.会上向来自全国公安机关的一线专家介绍了优云在平安城市视频监控运维

电梯布线技巧让视频监控减轻干扰

现在电梯内都加装了监控摄像系统,但是因为电梯环境复杂致使很多视频监控图像在电梯井道环境中受到不同程度的干扰,监控效果并不是很好.针对这一问题,和联电子有关专业人士指出,如果在安装电梯时讲究一些布线技巧,是可以在很大程度上减轻此类干扰的.具体如下: 1.横向条纹上下滚动: 这种现象表现为条纹不停的上或下滚动,条纹比较宽.看起来是干扰,其实并不是外界电磁波所为,如果抛开条纹,图像是清晰的.这种现象基本占所为图像干扰的80%以上,这种现象可以肯定的说是接地电位的问题,是指前端设备的地与中控室之间的地存

自制进制转换终极版

/** * 自制进制转换终极版 * 过程不重复了. */ public class TransFinal { public static void main(String[] args) { int num = 26; String hex = toHex(num); String oct = toOct(num); String bin = toBin(num); System.out.println("十六进制: "+ hex); System.out.println("