🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
效果演示： 文末獲取原始碼
實時監控&統計分析一&統計分析二
實時監控&統計分析一&統計分析二
代碼目錄：
主要代碼實作：
主頁HTML布局：
<div class="index_nav" >
<ul style="height: 30px; margin-bottom: 0px;">
<li class="l_left total_chose_fr nav_active">實時監測</li>
<li class="l_left total_chose_pl" >統計分析一</li>
<li class="l_left total_chose_pl">統計分析二</li>
<li class="r_right total_chose_pl">統計分析三</li>
<li class="r_right total_chose_pl">統計分析四</li>
<li class="r_right total_chose_pl">統計分析五</li>
</ul>
<div class="total_chose_box" style="display: none;">
<div style="height: 32px;"></div>
<span class="chose_tltle">請選擇年份：</span>
<select class="year_chose">
<option>2017</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
</select>
<span class="chose_tltle">請輸入月份：</span>
<input class="chose_text_in">
<span class="chose_tltle">請選擇區域：</span>
<select class="year_chose">
<option> 北京市</option>
<option>自貢市</option>
<option>攀枝花市</option>
<option>瀘州市</option>
<option>德陽市</option>
<option>綿陽市</option>
<option>廣元市</option>
<option>遂寧市</option>
<option>內江市</option>
<option>樂山市</option>
<option>南充市</option>
<option>宜賓市</option>
<option>廣安市</option>
<option>達州市</option>
<option>巴中市</option>
<option>雅安市</option>
<option>眉山市</option>
<option>資陽市</option>
<option>阿壩州</option>
<option>甘孜州</option>
<option>涼山州</option>
</select>
<button class="chose_enter">確定</button>
</div>
<div class="clear"></div>
</div>
<div class="index_tabs" >
<!--安防運作-->
<div class="inner" style="height: 109%;">
<div class="left_cage">
<div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%;">
<video autoplay="autoplay" loop="loop" class="dataAllBorder02 video_cage">
<source class="video" title="主監控位" src="video/test_mv02.mov"/>
</video>
</div>
<div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 38%;">
<div class="dataAllBorder02 video_cage">
<img class="video_around video_around_chose" src="video/video.jpg">
<img class="video_around" src="video/video.jpg">
<img class="video_around" src="video/video.jpg">
<img class="video_around" src="video/video.jpg">
<!--<video autoplay="autoplay" loop="loop" class="video_around video_around_chose" title="回圈監控01" style="margin-right: 1%; margin-bottom: 1%">-->
<!--<source class="video" title="主監控位" src="video/video.jpg"/>-->
<!--</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="回圈監控02" style="margin-bottom: 1%">-->
<!--<source class="video" title="主監控位" src="video/test_mv03.mov"/>-->
<!--</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="回圈監控03" style="margin-right: 1%">-->
<!--<source class="video" title="主監控位" src="video/test_mv03.mov"/>-->
<!--</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="回圈監控04">-->
<!--<source class="video" title="主監控位" src="video/test_mv05.mov"/>-->
<!--</video>-->
</div>
</div>
<div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 32%; position: relative;">
<div class="dataAllBorder02" style="padding: 1.2%; overflow: hidden">
<div class="message_scroll_box">
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">資料流量警示</span>
<span class="scroll_level scroll_level01">一級</span>
<a class="localize"></a>
<span class="scroll_timer">17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">下載大量視頻</a>
</div>
<div class="msg_cage">
<a class="localize_msg">xxx視頻網站</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">資料流量警示</span>
<span class="scroll_level scroll_level03">三級</span>
<a class="localize"></a>
<span class="scroll_timer">17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">下載大量視頻</a>
</div>
<div class="msg_cage">
<a class="localize_msg">xxx視頻網站</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">資料流量警示</span>
<span class="scroll_level scroll_level02">二級</span>
<a class="localize"></a>
<span class="scroll_timer">17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">下載大量視頻</a>
</div>
<div class="msg_cage">
<a class="localize_msg">xxx視頻網站</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">資料流量警示</span>
<span class="scroll_level scroll_level01">一級</span>
<a class="localize"></a>
<span class="scroll_timer">17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">下載大量視頻</a>
</div>
<div class="msg_cage">
<a class="localize_msg">xxx視頻網站</a>
</div>
</div>
</div>
</div>
<div class="scroll_tool_outbox">
<div class="scroll_tool_box">
<a class="scroll_tool" href="#">查看歷史推送</a>
</div>
</div>
</div>
</div>
<div class="center_cage">
<div class="dataAllBorder01 cage_cl" style="margin-top: 3.5% !important; height: 62.7%; position: relative;">
<div class="dataAllBorder02" style="position: relative; overflow: hidden;">
<!--標題欄-->
<div class="map_title_box" style="height: 6%">
<div class="map_title_innerbox">
<div class="map_title">實時地圖</div>
</div>
</div>
<div class="map" id="map" ></div>
<!--地圖顯示資訊選擇-->
<div class="display_type_box display_box" style="display: none;overflow:auto">
<div class="display_type_center_box">
<ul class="display_type_inner_box" id="layerList">
<li class="display_type_msg"><input id="zt_4" type="checkbox" class="display_type_chose"/> 危化品企業</li>
<li class="display_type_msg"><input id="zt_1" type="checkbox" class="display_type_chose"/>倉庫</li>
<li class="display_type_msg"><input id="zt_5" type="checkbox" class="display_type_chose"/>學校</li>
<li class="display_type_msg"><input id="zt_6" type="checkbox" class="display_type_chose"/>醫療衛生</li>
<li class="display_type_msg"><input id="zt_2" type="checkbox" class="display_type_chose"/>加油站</li>
<li class="display_type_msg"><input id="zt_0" type="checkbox" class="display_type_chose"/>停車場</li>
<li class="display_type_msg"><input id="zt_3" type="checkbox" class="display_type_chose"/>派出所</li>
<li class="display_type_msg"><input id="zt_7" type="checkbox" class="display_type_chose"/>應急避難場所</li>
<li class="display_type_msg">----------------------------------</li>
<li class="display_type_msg"><input id="zt_14" type="checkbox" class="display_type_chose" />危化品運輸車輛</li>
<li class="display_type_msg"><input id="zt_11" type="checkbox" class="display_type_chose" />監控設備</li>
<li class="display_type_msg"><input id="zt_13" type="checkbox" class="display_type_chose" />巡邏警員</li>
<li class="display_type_msg"><input id="zt_12" type="checkbox" class="display_type_chose" />巡邏警車</li>
</ul>
</div>
<div class="display_type_funct_box">
<span class="display_type_funct display_type_funct_sure">確定</span>
</div>
上面的圖片檔案以及js檔案等需要引入進來
原始碼獲取
大家點贊、收藏、關注、評論我啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 56/ 100天
專欄推薦閱讀：
HTML5大作業實戰案例《100套》
Java畢設專案精品實戰案例《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301065.html
標籤：其他
上一篇：取消當前請求-vue