shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
							<!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>