392 lines
21 KiB
HTML
392 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>视频监控</title>
|
||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/index.css">
|
||
|
||
</head>
|
||
<body>
|
||
<main class="main">
|
||
<header class="heared">
|
||
<span class="head-logo">前后台通用模板</span>
|
||
<ul class="head-ul"><li><a href="home.html" class="active-a">首页</a> </li>
|
||
<li><a href="videlctr.html">视频监控</a> </li>
|
||
<li><a href="map.html">地图管理</a> </li>
|
||
<li><a href="static.html">统计分析</a> </li>
|
||
<li><a href="form.html">表单信息</a> </li>
|
||
<li><a href="user.html">用户管理</a></li>
|
||
<li><a href="part.html">部门管理</a></li>
|
||
<li><a href="date.html">日程管理</a></li>
|
||
|
||
</ul>
|
||
<div class="head-right"><span id="time"></span><span>Admin</span></div>
|
||
</header>
|
||
<!--身体-->
|
||
<section class="section commanBox">
|
||
<!--左侧区域-->
|
||
<div class="boxLeft">
|
||
<!--视频监控-->
|
||
<div class="boxLeftVideoTop"></div>
|
||
<div class="clear"></div>
|
||
<div class="boxLeftVideoBox">
|
||
<div class="BoxConTop"><span class="BoxconTopLeft">南山路口（20170601）</span><span class="BoxconTopRight"><img src="img/ico.png"/> </span></div>
|
||
<div class="boxLeftVideoBoxCon">
|
||
<video autoplay="autoplay" width="100%" height="100%">
|
||
<source src="webm/CAMERAV.webm" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<div class="BoxConTop"><span class="BoxconTopLeft">大河路口（20170601）</span><span class="BoxconTopRight"><img src="img/ico.png"/> </span></div>
|
||
<div class="boxLeftVideoBoxCon">
|
||
<video autoplay="autoplay" width="100%" height="100%">
|
||
<source src="webm/CAMERAV.webm" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<!--报警信息-->
|
||
<div class="boxLeftAram">
|
||
<div class="boxLeftAlamTop"></div>
|
||
<div class="boxLeftAlamCon">
|
||
<ul class="alamUl">
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
<li>
|
||
<p>案发地点：一环路东三段<span class="alamULspan">2017-07-13 / 14:25</span></p>
|
||
<p>案发备注：由电郱车逆向行驶造成的交通事故</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--中间区域-->
|
||
<div class="boxCenter">
|
||
<!--案件分析-->
|
||
<div class="boxCenterUp">
|
||
<div class="boxCentterUpLeft">
|
||
<div class="ananBg"><img src="img/ana01.png" class="ana01IMg"/> <div class="anaImgText">652</div></div>
|
||
<div class="anaText">案件总量</div>
|
||
|
||
</div>
|
||
<div class="boxCentterUpLeft">
|
||
<div class="ananBg"><img src="img/ana02.png" class="ana01IMg"/> <div class="anaImgText01">652</div></div>
|
||
<div class="anaText">案件处理量</div>
|
||
|
||
</div>
|
||
<div class="boxCentterUpLeft">
|
||
<div class="ananBg"><img src="img/ana01.png" class="ana01IMg"/> <div class="anaImgText02">652</div></div>
|
||
<div class="anaText">案件投诉量</div>
|
||
|
||
</div>
|
||
<div class="boxCentterRight"></div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<!--地图区域-->
|
||
<div class="boxCenterdown">
|
||
<div class="boxCenterMap">
|
||
<div class="mapTool01">
|
||
<a href="#" class="mapToolA01 mapToolA01Active"></a>
|
||
<a href="#" class="mapToolA02"></a>
|
||
<a href="#" class="mapToolA03"></a>
|
||
<a href="#" class="mapToolA04"></a>
|
||
</div>
|
||
<div class="mapTool02">
|
||
<ul>
|
||
<li class="mapToolA05"> </li>
|
||
<li class="mapToolA06"> </li>
|
||
<li class="mapToolA07"> </li>
|
||
<li class="mapToolA08"> </li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--右边区域-->
|
||
<div class="boxRight">
|
||
<div class="boxRightTop"></div>
|
||
<div class="clear"></div>
|
||
<div class="boxRightCon01">
|
||
<ul class="boxRightCon_ul">
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li02.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li02.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li03.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li03.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
<li> 视频点位001<span><img src="img/li01.png"/> </span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<div class="boxRightCon02">
|
||
<div class="boxRightcon02Top"><ul class="con02TopUL"><li class="con02liAcitve">车辆信息</li><li>人员信息</li><li>地名地址</li></ul></div>
|
||
<div class="boxRithtChangeBox">
|
||
<!--车辆信息-->
|
||
<div class="boxChangeCon" style="display: block">
|
||
<div class="boxChangeConFind">
|
||
<p><label class="boxFindLabel">车辆颜色：</label><select class="boxFindInput">
|
||
<option>白色</option>
|
||
</select><label class="boxFindLabel">车辆品牌：</label><input type="text" class="boxFindInput"/></p>
|
||
<p><label class="boxFindLabel">车牌号码：</label><input type="text" class="boxFindInput"/> </p>
|
||
<p><button class="boxFindButton">开始搜索</button></p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
<ul id="pageAll">
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>1川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>1红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>1大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>1川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>1红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>1大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>车牌号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>车辆颜色：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>车辆品牌：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
<div class="boxChangeFoot" >
|
||
<span class="page_box">
|
||
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:3px;">/</span><span class="total"></span>
|
||
</span><a class="next">下一页</a>
|
||
</span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!--人员详情-->
|
||
<div class="boxChangeCon">
|
||
<div class="boxChangeConFind">
|
||
<p><label class="boxFindLabel">人员名称：</label><input type="text" class="boxFindInput"/><label class="boxFindLabel">性别：</label><select class="boxFindInput">
|
||
<option>男</option>
|
||
</select></p>
|
||
<p><label class="boxFindLabel">年龄：</label><input type="text" class="boxFindInput"/> </p>
|
||
<p><button class="boxFindButton">开始搜索</button></p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<ul id="pageAll01">
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>职务：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>职务：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="liImgLeft"><img src="img/liImg.png"/> </div>
|
||
<div class="liConRight">
|
||
<p>工号：<span>川A · 52FE2</span><span class="liconRihtButSpan"><button>定位</button></span></p>
|
||
<p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span></p>
|
||
<p>职务：<span>大众</span></p>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
<div class="boxChangeFoot" >
|
||
<span class="page_box">
|
||
<a id="prev02">上一页</a><span class="num"><span id="current_page02">1</span><span style="padding:3px;">/</span><span id="total02"></span>
|
||
</span><a id="next02">下一页</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!--地名地址-->
|
||
<div class="boxChangeCon">
|
||
<div class="boxChangeConFind">
|
||
<p><label class="boxFindLabel">地名地址：</label><input type="text" class="boxFindInput"/></p>
|
||
<p><button class="boxFindButton">开始搜索</button></p>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<ul id="pageAll02">
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
<li class="addLi">
|
||
<div class="liConRight01">
|
||
<p>地名地址：<span>天府广场001</span><span class="liconRihtButSpan01"><button>定位</button></span></p>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
<div class="boxChangeFoot" >
|
||
<span class="page_box">
|
||
<a id="prev03">上一页</a><span class="num"><span id="current_page03">1</span><span style="padding:3px;">/</span><span id="total03"></span></span><a id="next03">下一页</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
</main>
|
||
<script src="js/jquery.js"></script>
|
||
|
||
<script src="js/index.js"></script>
|
||
<script>
|
||
$(function(){
|
||
$(".head-ul li a").click(function(){
|
||
$(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
|
||
$(this).parents('li').find("ul").show();
|
||
$(this).parents("li").sibling().find("ul").hide();
|
||
|
||
})
|
||
getTime();
|
||
})
|
||
// 格式化时间
|
||
function getTime(){
|
||
var day=new Date();
|
||
var year=day.getFullYear();
|
||
var moutth=day.getMonth()+1;
|
||
var date=day.getDate();
|
||
var hour=day.getHours();
|
||
var min=day.getMinutes();
|
||
var sec=day.getSeconds();
|
||
var str=year+'-'+moutth+'-'+date+' '+hour+":"+min+':'+sec;
|
||
$("#time").text(str);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |