Realize real-time display of visual big data management platform based on ECHATS.
Complete html+css+js+json+font+video:download.csdn.net/download/we…
Project Structure:
index.html
<! DOCTYPEhtml>
<html lang="en">
<head>
<link href="css/BigData.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/index01.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
<link href="css/Security_operation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css"/>
<script src="js/laydate.js"></script>
<script src="js/Home_page.js"></script>
<meta charset="UTF-8">
<title>Big data management platform</title>
</head>
<body >
<div class="data_bodey">
<div class="index_nav" >
<ul style="height: 30px; margin-bottom: 0px;">
<li class="l_left total_chose_fr nav_active">Real-time monitoring</li>
<li class="l_left total_chose_pl" >Statistical analysis I</li>
<li class="l_left total_chose_pl">Statistical analysis II</li>
<li class="r_right total_chose_pl">Statistical analysis iii</li>
<li class="r_right total_chose_pl">Statistical Analysis iv</li>
<li class="r_right total_chose_pl">Statistical analysis v</li>
</ul>
<div class="total_chose_box" style="display: none;">
<div style="height: 32px;"></div>
<span class="chose_tltle">Please select year:</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">Please enter month:</span>
<input class="chose_text_in">
<span class="chose_tltle">Please select region:</span>
<select class="year_chose">
<option>The Beijing municipal</option>
<option>zigong</option>
<option>Panzhihua.</option>
<option>While luzhou</option>
<option>Deyang city</option>
<option>Mianyang city</option>
<option>In guangyuan city</option>
<option>Suining city</option>
<option>neijiang</option>
<option>leshan</option>
<option>nanchong</option>
<option>Yibin city</option>
<option>paper</option>
<option>dazhou</option>
<option>bazhong</option>
<option>yaan</option>
<option>Meishan city</option>
<option>ziyang</option>
<option>aba</option>
<option>T he</option>
<option>Liangshan prefecture</option>
</select>
<button class="chose_enter">determine</button>
</div>
<div class="clear"></div>
</div>
<div class="index_tabs" >
<! -- Security operation -->
<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="Master monitor bit" src="video/test_mv02.mov"/>
</video>
</div>
<div class="dataAllBorder01 cage_cl" style="Margin - the 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 = "advocate monitoring" SRC = "video/video. JPG" / > -- >
<! --</video>-->
<! --<video autoplay="autoplay" loop="loop" class="video_around" title=" 02" style="margin-bottom: 1%">-->
<! --<source class="video" SRC ="video/test_mv03.mov"/>
<! --</video>-->
<! --<video autoplay="autoplay" loop="loop" class="video_around" title=" "03" style="margin-right: 1%">-->
<! --<source class="video" SRC ="video/test_mv03.mov"/>
<! --</video>-->
<! --<video autoplay="autoplay" loop="loop" class="video_around" title=" loop" >-->
<! --<source class="video" SRC ="video/test_mv05.mov"/>-->
<! --</video>-->
</div>
</div>
<div class="dataAllBorder01 cage_cl" style="Margin - the top: 1.5%! important; height: 32%; position: relative;">
<div class="dataAllBorder02" style="The padding: 1.2%; overflow: hidden">
<div class="message_scroll_box">
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">Data Traffic Alert</span>
<span class="scroll_level scroll_level01">Level 1</span>
<a class="localize"></a>
<span class="scroll_timer">The 17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">Download lots of videos</a>
</div>
<div class="msg_cage">
<a class="localize_msg">XXX Video website</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">Data Traffic Alert</span>
<span class="scroll_level scroll_level03">Level 3</span>
<a class="localize"></a>
<span class="scroll_timer">The 17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">Download lots of videos</a>
</div>
<div class="msg_cage">
<a class="localize_msg">XXX Video website</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">Data Traffic Alert</span>
<span class="scroll_level scroll_level02">The secondary</span>
<a class="localize"></a>
<span class="scroll_timer">The 17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">Download lots of videos</a>
</div>
<div class="msg_cage">
<a class="localize_msg">XXX Video website</a>
</div>
</div>
<div class="message_scroll">
<div class="scroll_top">
<span class="scroll_title">Data Traffic Alert</span>
<span class="scroll_level scroll_level01">Level 1</span>
<a class="localize"></a>
<span class="scroll_timer">The 17-09-13/9:52</span>
</div>
<div class="msg_cage">
<a class="localize_title">Download lots of videos</a>
</div>
<div class="msg_cage">
<a class="localize_msg">XXX Video website</a>
</div>
</div>
</div>
</div>
<div class="scroll_tool_outbox">
<div class="scroll_tool_box">
<a class="scroll_tool" href="#">View History Feeds</a>
</div>
</div>
</div>
</div>
<div class="center_cage">
<div class="dataAllBorder01 cage_cl" style="Margin - the top: 3.5%! important; Height: 62.7%; position: relative;">
<div class="dataAllBorder02" style="position: relative; overflow: hidden;">
<! -- Title bar -->
<div class="map_title_box" style="height: 6%">
<div class="map_title_innerbox">
<div class="map_title">Real-time map</div>
</div>
</div>
<div class="map" id="map" ></div>
<! -- Map display information selection -->
<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"/>Dangerous chemical enterprise</li>
<li class="display_type_msg"><input id="zt_1" type="checkbox" class="display_type_chose"/>warehouse</li>
<li class="display_type_msg"><input id="zt_5" type="checkbox" class="display_type_chose"/>The school</li>
<li class="display_type_msg"><input id="zt_6" type="checkbox" class="display_type_chose"/>Medical and health care</li>
<li class="display_type_msg"><input id="zt_2" type="checkbox" class="display_type_chose"/>Gas station</li>
<li class="display_type_msg"><input id="zt_0" type="checkbox" class="display_type_chose"/>The parking lot</li>
<li class="display_type_msg"><input id="zt_3" type="checkbox" class="display_type_chose"/>The police station</li>
<li class="display_type_msg"><input id="zt_7" type="checkbox" class="display_type_chose"/>Emergency shelter</li>
<li class="display_type_msg">----------------------------------</li>
<li class="display_type_msg"><input id="zt_14" type="checkbox" class="display_type_chose" />Dangerous chemical transport vehicle</li>
<li class="display_type_msg"><input id="zt_11" type="checkbox" class="display_type_chose" />Monitoring equipment</li>
<li class="display_type_msg"><input id="zt_13" type="checkbox" class="display_type_chose" />Patrol officers</li>
<li class="display_type_msg"><input id="zt_12" type="checkbox" class="display_type_chose" />Patrol car</li>
</ul>
</div>
<div class="display_type_funct_box">
<span class="display_type_funct display_type_funct_sure">determine</span>
</div>
</div>
<! -- City choice -->
<div class="city_chose_box display_box" style="display: none">
<div class="display_type_center_box">
<ul class="display_type_inner_box" id="ulCity">
<li class="display_type_msg">The Beijing municipal</li>
<li class="display_type_msg">zigong</li>
<li class="display_type_msg">Panzhihua.</li>
<li class="display_type_msg">While luzhou</li>
<li class="display_type_msg">Deyang city</li>
<li class="display_type_msg">Mianyang city</li>
<li class="display_type_msg">In guangyuan city</li>
<li class="display_type_msg">Suining city</li>
<li class="display_type_msg">neijiang</li>
<li class="display_type_msg">leshan</li>
<li class="display_type_msg">nanchong</li>
<li class="display_type_msg">Yibin city</li>
<li class="display_type_msg">paper</li>
<li class="display_type_msg">dazhou</li>
<li class="display_type_msg">bazhong</li>
<li class="display_type_msg">yaan</li>
<li class="display_type_msg">Meishan city</li>
<li class="display_type_msg">ziyang</li>
<li class="display_type_msg">aba</li>
<li class="display_type_msg">T he</li>
<li class="display_type_msg">Liangshan prefecture</li>
</ul>
</div>
<div class="display_type_funct_box">
<span class="display_type_funct display_type_funct_sure">determine</span>
</div>
</div>
<! -- Track playback -->
<div class="trajectory_box" style="display: none" id="divRouteReview">
<input class="trajectory" id="start" placeholder="Start time">
<input class="trajectory" id="end" placeholder="End time">
<select class="ratio">
<option>1 times</option>
<option>2 times</option>
<option>Three times</option>
</select>
<button class="playback" onclick="showRoute()">The playback</button>
<button class="playback close_playback">Shut down</button>
</div>
<! -- Buffer Settings -->
<div class="trajectory_box" style="display: none" id="divBufferSetting">
<button class="playback" style="width:60px" onclick="setBufferCenter()">The set point</button>
<input class="trajectory" id="txtBufferX" placeholder="X">
<input class="trajectory" id="txtBufferY" placeholder=Coordinates "Y">
<input value="10" class="trajectory" id="txtBufferDis" placeholder="Buffer distance">
<select class="ratio">
<option>meter</option>
<option>km</option>
</select>
<button class="playback" onclick="executeBuffer(); edit()" style="width:60px">Analysis of the</button>
<button class="playback close_playback">Shut down</button>
</div>
<! -- Map Toolbar -->
<div class="map_tool_outbox">
<span class="map_tool" onclick="zoomFull()">
<a class="map_tool_inner" title="Full" ></a>
</span>
<span class="map_tool" onclick="zoomOut()">
<a class="map_tool_inner" title="Enlarge" style="background-position-x:-36px"></a>
</span>
<span class="map_tool" onclick="zoomIn()">
<a class="map_tool_inner" title="Narrow" style="background-position-x:-72px"></a>
</span>
<span class="map_tool" onclick="showHeatMap()">
<a class="map_tool_inner" title="Backward view" style="background-position-x:-108px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" title="Forward view" style="background-position-x:-144px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner display_type_btn" title="Thematic Map" style="background-position-x:-180px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner city_chose_btn" title="Urban orientation" style="background-position-x:-432px"></a>
</span>
<span class="map_tool" id="btnBuffer">
<a class="map_tool_inner" title=Buffer analysis style="background-position-x:-216px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner addition_check_btn check_btn" title="Address search" style="background-position-x:-252px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner chemistry_check_btn check_btn" onclick="chemistryCheck()" title="Hazardous Chemicals Retrieval" style="background-position-x:-288px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner enterprise_check_btn check_btn" onclick="enterpriseCheck()" title="Enterprise Search" style="background-position-x:-324px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner car_check_btn check_btn" onclick="carCheck()" title="Vehicle Retrieval" style="background-position-x:-360px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" onclick="Search()" title="Search" style="background-position-x:-468px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" onclick="cancel()" id="fresh_tool" title="Empty" style="background-position-x:-396px"></a>
</span>
<span class="map_tool">
<input type="text" id="txtCoord" style="width:150px; visibility:hidden" />
</span>
</div>
</div>
</div>
<div class="dataAllBorder01 cage_cl" style="Margin - the top: 0.6%! important; Height: 32.1%;">
<div class="dataAllBorder02" id="map_title_innerbox">
<div class="map_title_box">
<div class="map_title_innerbox">
<div class="map_title" style="background-image: url(img/second_title.png);">Analyzing Data 1</div>
</div>
<div >
<select id="selLayer" style="width:100px;">
<option value="">vehicle</option>
<option value="">enterprise</option>
</select>
</div>
</div>
<table id="table" style="width: 100%"></table>
</div>
<div class="dataAllBorder02" id="map_title_innerbox1" style="display: none; position: relative;">
<div class="map_title_box">
<div class="map_title_innerbox">
<div class="map_title" style="background-image: url(img/second_title.png);">XXXXX Conditional scan</div>
</div>
</div>
<ul class="tab_msg_box">
<li class="tab_msg tab_msg01 tab_msg_current">xxxxx</li>
<li class="tab_msg tab_msg02">xxx</li>
</ul>
<div class="table1">
<table id="table1" style="width: 100%"></table>
</div>
<div class="table2" style=" display: none;">
<table id="table2" style="width: 100%;"></table>
</div>
</div>
</div>
</div>
<div class="right_cage">
<! -- Top toggle position -->
<div class="dataAllBorder01 cage_cl" style="margin-top: 9% ! important; height: 24%">
<div class="dataAllBorder02" id="cage_cl" >
<div class="analysis">Daily flow:</div>
<ul class="data_show_box">
<li class="data_cage">0</li>
<li class="data_cage">0</li>
<li class="data_cage" style="background-image: none;">.</li>
<li class="data_cage">0</li>
<li class="data_cage">0</li>
<li class="data_cage">2</li>
</ul>
<div class="depart_number_box">
<ul class="depart_number_cage">
<li class="depart_name">Traffic:</li>
<li class="depart_number">3238</li>
</ul>
<ul class="depart_number_cage">
<li class="depart_name">Flow 2:</li>
<li class="depart_number">1630</li>
</ul>
<ul class="depart_number_cage" style="margin-bottom: 0px;">
<li class="depart_name">Flow 3:</li>
<li class="depart_number">4251</li>
</ul>
<ul class="depart_number_cage" style="margin-bottom: 0px;">
<li class="depart_name">Flow 4:</li>
<li class="depart_number">24</li>
</ul>
</div>
</div>
<div class="dataAllBorder02 over_hide" id="cage_cl1" style="display: none" >
<div class="analysis">Basic point information:</div>
<ul class="location_msg_box">
<li class="location_msg01 location_single">Event level:<a href="#" style="color: #dc0000;">Level 1</a></li>
<li class="location_msg02 location_single">Event level: Chemical gas leak</a></li>
<li class="location_msg02 location_double">Time of crime:<a href="#" style="color: #cdd6db;">2017-09-10<br>At 11:40 a.m.</a></li>
<li class="location_msg01 location_double">Address: 45#, South Third Section, First Ring Road, Chenghua District, Beijing</a></li>
<li class="location_msg01 location_single" style="width: 100%; height: 40%">Related cases: robbery "131", fire on 2014-05-13, gas leakage on 2013-12-08.</a></li>
</ul>
</div>
</div>
<div class="dataAllBorder01 cage_cl check_increase" style="Margin - the top: 1.5%! important;">
<! Switch - 01 - >
<div class="dataAllBorder02 over_hide dataAllBorder20" id="over_hide">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 18%">The name of the</th>
<th>attribution</th>
<th>The degree of</th>
<th>Range),</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>200m-5km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>4km-80km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>400m-2km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>1km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>2km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>500m-2km</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>500m-10km</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 18%">The name of the</th>
<th>attribution</th>
<th>The degree of</th>
<th>Range (r =?</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>The whole city</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>The station</td>
</tr>
<tr>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxx</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<! - switch 02 - >
<div class="dataAllBorder02 over_hide dataAllBorder20" id="over_hide1" style="display: none">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 18%">The name of the</th>
<th>level</th>
<th>traffic</th>
<th>Range (r =?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Download the text</td>
<td>Level 3</td>
<td>5t</td>
<td>200m-5km</td>
</tr>
<tr>
<td>Browse pictures</td>
<td>Level 3...</td>
<td>3t</td>
<td>4km-80km</td>
</tr>
<tr>
<td>Browse the video</td>
<td>Level 1</td>
<td>20t</td>
<td>400m-2km</td>
</tr>
<tr>
<td>Download the pictures</td>
<td>Level 1</td>
<td>10t</td>
<td>1km</td>
</tr>
<tr>
<td>Download the video</td>
<td>Level 1</td>
<td>4t</td>
<td>2km</td>
</tr>
<tr>
<td>Online processing</td>
<td>Level 1</td>
<td>3t</td>
<td>500m-2km</td>
</tr>
<tr>
<td>Online inquiry</td>
<td>Level 1</td>
<td>10M2</td>
<td>500m-10km</td>
</tr>
<tr>
<td>xxx</td>
<td>Level 1</td>
<td>5t</td>
<td>200m-5km</td>
</tr>
<tr>
<td>xxxxx</td>
<td>Level 1</td>
<td>6t</td>
<td>4km-80km</td>
</tr>
<tr>
<td>xxxx</td>
<td>Level 1</td>
<td>11t</td>
<td>400m-2km</td>
</tr>
</tbody>
</table>
</div>
<! -- Address retrieval switch 03-->
<div class="dataAllBorder02 addition_check_in" style="display: none; position: relative" >
<div class="analysis" style="height: 34px; %">Address search:</div>
<div class="search_plate_box">
<ul class="search_separate">
<li class="search_title">Address type:</li>
<select class="search_input_box search_chose_box">
<option>all</option>
<option>Residential areas</option>
<option>The street</option>
<option>building</option>
<option>The park</option>
</select>
</ul>
<ul class="search_separate">
<li class="search_title">Address name:</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<button class="search_btn">To retrieve</button>
</div>
<! -- Search Results section -->
<div class="search_sesult_box">
<ul class="search_result">
<li class="search_result_add">Ziyang Automobile Passenger Transport Center</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Ziyang City > Yanjiang District > Shutai Road and Junxing road intersection west</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Chengdu University Jinniu Campus</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Dongliu Lane, Chaoyang district, Beijing</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Two 12</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Yumiao Road, Chaoyang, Beijing</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Hongsheng Ecological Park</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Huiwangling East Road, Beijing, China</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Ziyang Automobile Passenger Transport Center</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Ziyang City > Yanjiang District > Shutai Road and Junxing road intersection west</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Huang zhong park</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Operation"></li>
<li class="search_result_road">Tongde Street, Chaoyang district, Beijing</li>
</ul>
</div>
<! -- Page-turning module -->
<div class="tcdPageCode"></div>
</div>
<! -- Dangerous chemical retrieval switch 04-->
<div class="dataAllBorder02 chemistry_check_in" id="chemistry_check_in" style="display: none; position: relative" >
<div class="analysis" style="height: 34px;">Retrieval:</div>
<div class="search_plate_box">
<ul class="search_separate">
<li class="search_title">Encoding type:</li>
<select class="search_input_box search_chose_box">
<option>all</option>
<option>The commodity code</option>
<option>Enterprise code</option>
</select>
</ul>
<ul class="search_separate">
<li class="search_title">Input code:</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<button class="search_btn">To retrieve</button>
</div>
<! -- Search Results section -->
<div class="search_sesult_box">
<ul class="search_result">
<li class="search_result_add danger_result">xxxxxx</li>
<li class="danger_level level03">Level 3</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle" onclick="showLife()"></li>
<li class="search_result_car car_personal">xxxxxxx</li>
<li class="search_result_car car_time">xxxxxxx</li>
</ul>
<ul class="search_result">
<li class="search_result_add danger_result">xxxxxx</li>
<li class="danger_level level03">Level 3</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle"></li>
<li class="search_result_car car_personal">xxxxxx</li>
<li class="search_result_car car_time">xxxxxxx</li>
</ul>
<ul class="search_result">
<li class="search_result_add danger_result">xxxxxx</li>
<li class="danger_level level02">The secondary</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle"></li>
<li class="search_result_car car_personal">xxxxxx</li>
<li class="search_result_car car_time">XXXXXX factory</li>
</ul>
<ul class="search_result">
<li class="search_result_add danger_result">fireworks</li>
<li class="danger_level level02">The secondary</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle"></li>
<li class="search_result_car car_personal">XXXXXX)</li>
<li class="search_result_car car_time">XXXXXX Jiandi Chemical Plant</li>
</ul>
<ul class="search_result">
<li class="search_result_add danger_result">xxxxxx</li>
<li class="danger_level level03">Level 3</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle"></li>
<li class="search_result_car car_personal">xxxxxxx</li>
<li class="search_result_car car_time">xxxxxxx</li>
</ul>
<ul class="search_result">
<li class="search_result_add danger_result">xxxxxx</li>
<li class="danger_level level01">Level 1</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" title="Life cycle"></li>
<li class="search_result_car car_personal">xxxxxxx</li>
<li class="search_result_car car_time">xxxxxxx</li>
</ul>
</div>
<! -- Page-turning module -->
<div class="chemistry_tcdPageCode"></div>
</div>
<! -- Enterprise Search Switch
<div class="dataAllBorder02 enterprise_check_in" id="enterprise_check_in" style="display: none; position: relative" >
<div class="analysis" style="height: 34px;">Enterprise Search:</div>
<div class="search_plate_box">
<ul class="search_separate">
<li class="search_title">Industry Choice:</li>
<select class="search_input_box search_chose_box">
<option>Logistics enterprises</option>
<option>Food production and manufacturing</option>
<option>The service sector</option>
<option>Industrial production</option>
<option>Electronic product manufacturing</option>
<option>Science and technology service</option>
</select>
</ul>
<ul class="search_separate">
<li class="search_title">Company Name:</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<ul class="search_separate">
<li class="search_title">Registration no. :</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<button class="search_btn">To retrieve</button>
</div>
<! -- Search Results section -->
<div class="search_sesult_box">
<ul class="search_result">
<li class="search_result_add">Convenience Store Headquarters (350298100000405)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">4th Floor, 223 New Hope Road, Wuhou District, Beijing</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Hongqi Chain (260220100003523)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">244 Jianye Road, Chaoyang, Beijing</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Blue Ocean Travel Service (260220100003523)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">Yumiao Road, Chaoyang, Beijing</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Wu Ming Hot Pot (350298100000405)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">Huiwangling East Road, Beijing, China</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Ajie Fa Yi Chain (260220100003523)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">Shutai Road and junxing road intersection west side</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Wong Chung Park (350298100000405)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_eddit" onclick="people()" title="Operation"></li>
<li class="search_result_road">Tongde Street, Chaoyang district, Beijing</li>
</ul>
</div>
<! -- Page-turning module -->
<div class="enterprise_tcdPageCode"></div>
</div>
<! -- Vehicle search switch 06-->
<div class="dataAllBorder02" id="car_check_in" style="display: none; position: relative" >
<div class="analysis" style="height: 34px;">Vehicle Search:</div>
<div class="search_plate_box">
<ul class="search_separate">
<li class="search_title">License Plate No. :</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<ul class="search_separate">
<li class="search_title">Name of owner:</li>
<li class="search_input_box"><input class="search_input" type="text"></li>
</ul>
<button class="search_btn">retrieve</button>
</div>
<! -- Search Results section -->
<div class="search_sesult_box">
<ul class="search_result">
<li class="search_result_add">Chuan A·K5H12 (Chen Hao)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Ford (Focus Hatchback)</li>
<li class="search_result_car car_time">Passenger car (5 seats)</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Chuan A. 14AG2 (Zhang Zhengtao)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Ford (Taurus)</li>
<li class="search_result_car car_time">Passenger car (5 seats)</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Sichuan B. 2563K (Li Xue)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Shanghai Volkswagen (Magotan)</li>
<li class="search_result_car car_time">Passenger car (5 seats)</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Chuan A·SH273 (Liu Hong)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Fiat (Feixiang)</li>
<li class="search_result_car car_time">Passenger car (5 seats)</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Chuan A·K5H12 (Chen Hao)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Mercedes-benz (C200)</li>
<li class="search_result_car car_time">Passenger car (5 seats)</li>
</ul>
<ul class="search_result">
<li class="search_result_add">Chuan A·K5H12 (Zhang Qiguo)</li>
<li class="search_location" title="Positioning"></li>
<li class="search_guiji" title="Track playback"></li>
<li class="search_result_car car_personal">Dongfeng Commercial Vehicle (Tianlong)</li>
<li class="search_result_car car_time">Cargo truck (100T)</li>
</ul>
</div>
<! -- Page-turning module -->
<div class="car_tcdPageCode"></div>
</div>
</div>
<div class="dataAllBorder01 cage_cl check_decrease" style="Margin - the top: 1.5%! important; height: 32%; position: relative;">
<div class="dataAllBorder02 over_hide" style="The padding: 1.2%;">
<div class="analysis">Component ratio of XXXXX:</div>
<div class="danger_contain_box">
<div id="container_huan" style="height: 90%; width: 100%"></div>
</div>
<div class="danger_depart_box">
<ul class="danger_depart">
<li class="danger_ico" style="background-image: url(img/images/pic_ico_01.png); background-position-x: 0px"></li>
<li class="data_name">XXXXX comprehensive</li>
<li class="data data01">652</li>
<li class="data data02">Write & nbsp  1.2%</li>
</ul>
<ul class="danger_depart">
<li class="danger_ico" style="background-image: url(img/images/pic_ico_02.png); background-position-x: 0px"></li>
<li class="data_name">Statistics a</li>
<li class="data data01">97</li>
<li class="data data02" style="color: #ff2865;">Left & nbsp  down 0.3%</li>
</ul>
<ul class="danger_depart danger_depart01">
<li class="danger_ico" style="background-image: url(img/images/pic_ico_03.png); background-position-x: 0px"></li>
<li class="data_name">Statistics of the second</li>
<li class="data data01">423</li>
<li class="data data02">Write & nbsp  1%</li>
</ul>
<ul class="danger_depart danger_depart01">
<li class="danger_ico" style="background-image: url(img/images/pic_ico_01.png); background-position-x: 0px"></li>
<li class="data_name">Statistics of three</li>
<li class="data data01">218</li>
<li class="data data02">Write & nbsp  0.3%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="inner" style="display: none;" >
<div class="data_left01">
<div class="dataAll maginS">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX analysis</div>
<div class="data_chart" id="buyTime"></div>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX type analysis</div>
<p class="data_chart" id="Package01"></p>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX analysis</div>
<p class="data_chart" id="rode01"></p>
</div>
</div>
</div>
</div>
<div class="data_left01">
<div class="dataAll maginS">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXXX analysis</div>
<p class="data_chart" id="bookAret"></p>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">Analysis of XXXXXXX</div>
<p class="data_chart" id="bookBmonth"></p>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">Analysis of XXXXXXX</div>
<p class="data_chart" id="whearAbook"></p>
</div>
</div>
</div>
</div>
<div class="data_left02">
<div class="dataAll01">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit2">Data aggregation</div>
<table class="table_data01" >
<tr><td>The total number of</td><td colspan="3" class="font01">56320</td></tr>
<tr><td>Number of XXXXXX</td><td colspan="3" class="font02">56320</td></tr>
<tr>
<td>XXXXX number:</td>
<td>10</td>
<td>Type:</td>
<td>six</td>
</tr>
<tr>
<td>XXXX most:</td>
<td>16-20 points</td>
<td>XXXXX maximum months:</td>
<td>On December</td>
</tr>
<tr>
<td>XXXXX maximum season:</td>
<td>xxxx</td>
<td>XXXXX weather:</td>
<td>A sunny day</td>
</tr>
<tr>
<td>XXXXXX:</td>
<td>Set A</td>
<td>XXXXXX:</td>
<td>activity</td>
</tr>
<tr>
<td>XXXXXX:</td>
<td>Smooth traffic</td>
<td>XXXXX Special Time:</td>
<td>The National Day</td>
</tr>
<tr>
<td>XXXXX:</td>
<td colspan="3" style="color: red">xxxxxB</td>
</tr>
<tr>
<td>XXXXX multi-season:</td>
<td colspan="3" style="color: red">In the winter</td>
</tr>
</table>
</div>
</div>
</div>
<div class="dataAll02">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX analysis</div>
<p class="data_chart" id="rodeAbook"></p>
</div>
</div>
</div>
</div>
<div class="data_left01">
<div class="dataAll maginS">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX analysis</div>
<p class="data_chart" id="seaAbook01"></p>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXX order analysis</div>
<p class="data_chart" id="actionBook"></p>
</div>
</div>
</div>
<div class="dataAll">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">XXXXXX analysis</div>
<p class="data_chart" id="sperceBook01"></p>
</div>
</div>
</div>
</div>
</div>
<div class="inner" style="display:none" >
<div class="data_left03">
<div class="dataAllNo01 maginS01">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit3">Revenue channel analysis</div>
<table class="table_data01">
<tr>
<td>Total revenue:</td><td colspan="3" class="font01">123653 yuan</td>
</tr>
<tr>
<td>Number of income channels:</td><td colspan="3" class="font03">five</td>
</tr>
<tr><td>The most channels of income</td><td class="font04">Channel A (56%)</td><td>Least revenue channel</td><td class="font05">Channel C (2.8%)</td></tr>
<tr><td>Channel A Income</td><td class="font6">53602 yuan</td><td>Revenue share of channel A</td><td class="font6">4.8%</td></tr>
<tr><td>Channel B Revenue</td><td class="font6">53602 yuan</td><td>Revenue share of channel B</td><td class="font6">4.8%</td></tr>
<tr><td>Channel C Income</td><td class="font6">53602 yuan</td><td>Revenue share of channel D</td><td class="font6">4.8%</td></tr>
</table>
<p class="data_chart01" id="zhanbi02"></p>
</div>
</div>
</div>
</div>
<div class="data_left04">
<! - style = "margin - top: 6.3%" -- >
<div class="dataAllNo01">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit3">Marketing investment and sales analysis</div>
<table class="table_data02">
<tr><td class="font07">The total sales</td><td class="font03">15.6 million yuan</td><td class="font07">Marketing input</td><td class="font02">5.6 million</td></tr>
<tr><td class="font07">Gross profit</td><td class="font01">10 million yuan</td><td class="font07">The profit margin</td><td class="font01">464.15%</td></tr>
</table>
<p>
<div class="zhanleft01" id="allAly01"></div>
<div class="zhanleft01" id="allAly02"></div>
</p>
<p class="zhanleft02" id="allAly03"></p>
</div>
</div>
</div>
</div>
<div class="data_left03">
<div class="dataAllNo01 maginS01">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit3">Expenditure channel analysis</div>
<table class="table_data01">
<tr>
<td>Total:</td><td colspan="3" class="font02">123653 yuan</td>
</tr>
<tr>
<td>Number of spending channels:</td><td colspan="3" class="font02">five</td>
</tr>
<tr><td>Spending the most channels</td><td class="font05">Channel A (56%)</td><td>Channel with least expenditure</td><td class="font04">Channel C (2.8%)</td></tr>
<tr><td>Channel A expenditure</td><td class="font6">53602 yuan</td><td>Proportion of channel A expenditure</td><td class="font6">4.8%</td></tr>
<tr><td>Channel B expenditure</td><td class="font6">53602 yuan</td><td>Proportion of channel B expenditure</td><td class="font6">4.8%</td></tr>
<tr><td>Channel C expenditure</td><td class="font6">53602 yuan</td><td>Proportion of channel D expenditure</td><td class="font6">4.8%</td></tr>
</table>
<p class="data_chart01" id="zhanbi03"></p>
</div>
</div>
</div>
</div>
</div>
<div class="inner" style="display: none">
<div class="clear"></div>
<div class="data_left05">
<div class="dataAllNo02 ">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit">Analysis of XXXXXXX</div>
<p class="data_chart02" id="shijian01"></p>
</div>
</div>
</div>
</div>
<div class="data_left05">
<div class="dataAllNo02 ">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit">XXXXX analysis</div>
<table class="table_data02">
<tr><td class="font07">The event type</td><td class="font03">five</td><td class="font07">xxxx</td><td class="font02">5.6 million</td></tr>
<tr><td class="font07">Most events</td><td class="font01">xxxx</td><td class="font07">Minimum incidents</td><td class="font01">xxxxx</td></tr>
</table>
<p class="data_chart02" id="shijian03"></p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="data_left05">
<div class="dataAllNo02">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit">XXXX analysis</div>
<p class="data_chart02" id="shijian02"></p>
</div>
</div>
</div>
</div>
<div class="data_left05">
<div class="dataAllNo02">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit">XXXXXX analysis</div>
<p class="data_chart03" id="shijian04"></p>
</div>
</div>
</div>
</div>
</div>
<div class="inner" style="display: none">
<div class="manage_left l_left">
<! --<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
<div class="manage_line1">
<div class="manage_line2">
<div class="manage_top_middle">
<table class="table table-bordered">
<tbody>
<tr>
<td>The total number of XXXX</td>
<td colspan="3">25414 people</td>
</tr>
<tr>
<td>xxxxx</td>
<td colspan="3">Tourists in the province</td>
</tr>
<tr>
<td>xxxxx</td>
<td colspan="3">youth</td>
</tr>
<tr>
<td>Male visitors</td>
<td>5424 people</td>
<td>Female tourists</td>
<td>5457 people</td>
</tr>
<tr>
<td>The team of tourists</td>
<td>5424 people</td>
<td>individual traveler</td>
<td>5457 people</td>
</tr>
<tr>
<td>Compared with the same</td>
<td>A 5% drop in</td>
<td>sequential</td>
<td>A 5.6% rise in</td>
</tr>
</tbody>
</table>
<p>XXXXX Data summary</p>
</div>
<div class="manage_left_top">
<div class="manage_top_left l_left">
<div id="container2" style="height: 90%"></div>
<p>XXXXX analysis</p>
</div>
<div class="manage_top_left l_left">
<div id="container1" style="height: 90%"></div>
<p>XXXX analysis</p>
</div>
<div class="manage_top_left l_left">
<div id="container3" style="height:90%"></div>
<p>XXXX analysis</p>
</div>
</div>
<div class="manage_top_middle">
<div id="container4" style="height: 90%"></div>
<p>Data analysis of XXXX</p>
</div>
<! --<div class="manage_top_middle l_left">-->
<! --<div id="container5" style="height: 90%"></div>-->
<! --< P > Weather -- Visitor data analysis </ P >-->
<! --</div>-->
</div>
</div>
</div>
<div class="manage_left l_left">
<! --<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
<div class="manage_line1">
<div class="manage_line2">
<div class="manage_top_middle l_left">
<div id="container9" style="height: 90%"></div>
<p>XXXX is</p>
</div>
<div class="manage_top_middle l_left">
<div id="container10" style="height: 90%"></div>
<p>XXXX analysis</p>
</div>
<div class="manage_top_middle l_left">
<div id="container11" style="height: 90%"></div>
<p>XXXX analysis</p>
</div>
</div>
</div>
</div>
<div class="manage_left l_left">
<! --<div class="manage_left_nav"><img src="img/left_nav.png"/></div>-->
<div class="manage_line1">
<div class="manage_line2">
<div class="manage_top_middle">
<div id="container12" style="height: 90%"></div>
<p>XXXXX ranking</p>
</div>
<div class="manage_top_middle">
<div id="container6" style="height: 90%"></div>
<p>Data analysis of XXXX</p>
</div>
<div class="manage_top_middle l_left">
<div id="container5" style="height: 90%"></div>
<p>XXXXX data analysis</p>
</div>
</div>
</div>
</div>
</div>
<div class="inner" style="display: none;">
<div class="user_left l_left" style="0.6% margin - left:">
<! --<div class="user_left_nav"><img src=".. /images/left_nav.png"/></div>-->
<div class="user_line1">
<div class="user_line2">
<div class="user_top_middle">
<table class="table table-bordered">
<tbody>
<tr>
<td>The total number of XXXX</td>
<td colspan="3">965 people</td>
</tr>
<tr>
<td>XXXX staff</td>
<td>625 people</td>
<td>XXXX staff</td>
<td>340 people</td>
</tr>
<tr>
<td>xxxx</td>
<td>Emergency department</td>
<td>XXXX staff</td>
<td>XXX (99%).</td>
</tr>
<tr>
<td>xxx</td>
<td>Sales department</td>
<td>xxxx</td>
<td>Security department</td>
</tr>
<tr>
<td>xxx</td>
<td>Lee huan</td>
<td>xxx</td>
<td>Zhou Wei</td>
</tr>
<tr>
<td>The main reason for XXXX</td>
<td>Artificial damage</td>
<td>XXX Processing situation</td>
<td>All timely equipment processing</td>
</tr>
<! --<tr>-->
<! --< TD > Employee of the Year </ TD >-->
<! - < td > li jin < / td > -- >
<! --< TD > Focus on employee </ TD >-->
<! - < td > Zhou Wei < / td > -- >
<! --</tr>-->
</tbody>
</table>
<p>XXX Management Summary</p>
</div>
<div class="user_left_top">
<div class="user_top_left l_left">
<div id="userContainerSex" style="height: 90%"></div>
<p>Gender ratio of staff</p>
</div>
<div class="user_top_left l_left">
<div id="userContainerManage" style="height: 90%"></div>
<p>Proportion of personnel in each department</p>
</div>
<div class="user_top_left l_left">
<div id="userContainerAge" style="height:90%"></div>
<p>Age group ratio of workers</p>
</div>
</div>
<div class="user_top_middle">
<div id="userContainerAttendance" style="height: 90%"></div>
<p>Attendance of all departments in the scenic spot</p>
</div>
</div>
</div>
</div>
<div class="user_left l_left" style="0.6% margin - left:">
<! --<div class="manage_left_nav"><img src=".. /images/left_nav.png"/></div>-->
<div class="user_line1">
<div class="user_line2">
<div class="user_top_middle l_left">
<div id="userContainerPersonal" style="height: 90%"></div>
<p>XXX ranking</p>
</div>
<div class="user_top_middle l_left">
<div id="userContainerFlow" style="height: 90%"></div>
<p>XXX analysis</p>
</div>
<div class="user_top_middle l_left">
<div id="userContainerIllegal" style="height: 90%"></div>
<p>XXXX analysis</p>
</div>
</div>
</div>
</div>
<div class="user_left l_left" style="0.6% margin - left:">
<! --<div class="manage_left_nav"><img src=".. /images/left_nav.png"/></div>-->
<div class="user_line1">
<div class="user_line2">
<div class="user_top_middle">
<div id="userContainerComplaint" style="height: 90%"></div>
<p>XXXX is</p>
</div>
<div class="user_top_middle">
<div id="userContainerPrize" style="height: 90%"></div>
<p>XXX analysis</p>
</div>
<div class="user_top_middle l_left">
<div class="user_right_left l_left">
<div id="userContainerReason" style="height: 90%"></div>
<p>Cause analysis of XXX</p>
</div>
<div class="user_right_left l_left">
<div id="userContainerHandle" style="height: 90%"></div>
<p>Fault Handling</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/echarts-all.js"></script>
<script src="js/index.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<! --<script src="js/MainMap.js"></script>-->
<script src="js/Home_page.js"></script>
<script src="js/artDialog/artDialog.js"></script>
<script src="js/artDialog/plugins/iframeTools.source.js"></script>
<script>
var number;
$(function() {
if (window.screen.height <= 768) {
number = 4;
} else if (window.screen.height > 768 && window.screen.height <= 900) {
number = 6
} else if (window.screen.height > 1080) {
number = 8}});// Turn the page module
$(".tcdPageCode").createPage({
pageCount:5.current:1.backFn:function(p){}}); $(".chemistry_tcdPageCode").createPage({
pageCount:4.current:1.backFn:function(p){}}); $(".enterprise_tcdPageCode").createPage({
pageCount:4.current:1.backFn:function(p){}}); $(".car_tcdPageCode").createPage({
pageCount:4.current:1.backFn:function(p){}}); $(function () {$(".tit02Diva a").each(function (index) {$(this).on("click".function () {$(".data_map").eq(index).fadeIn().siblings(".data_map").stop().hide();
$(this).prev('i').removeClass('i_crlieAction');
$(this).siblings('a').prev('i').addClass('i_crlieAction'); })}); BootstrapTable(); Echarts(); $("#fresh_tool").click(function(event){ event.stopPropagation(); cancel(); })});function EventClick(){$(".check_increase").removeClass("check_increase_act");
$("#over_hide1").show().siblings().hide();
$(".check_decrease").show();
$("#cage_cl").hide();
$("#map_title_innerbox").hide();
$("#cage_cl1").show();
// $("#over_hide").show();
$("#map_title_innerbox1").show();
$(".addition_check_in").hide();
$("#car_check_in").hide();
BootstrapTable();
}
function cancel(e){$(".check_increase").removeClass("check_increase_act");
$("#over_hide").show().siblings().hide();
$(".check_decrease").show();
$("#cage_cl").show();
$("#cage_cl1").hide();
// $("#cage_cl").show();
// $("#over_hide1").show();
// $("#map_title_innerbox").show();
BootstrapTable();
}
// Address retrieval
$(".addition_check_btn").click(function () {$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$(".addition_check_in").show().siblings().hide()
});
// Retrieve hazardous chemicals
function chemistryCheck() {$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$("#chemistry_check_in").show().siblings().hide()
}
// Enterprise search
function enterpriseCheck() {$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$("#enterprise_check_in").show().siblings().hide()
}
// Vehicle retrieval
function carCheck() {$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$("#car_check_in").show().siblings().hide()
}
function BootstrapTable() {$('#table').bootstrapTable({
method: "get".striped: true.singleSelect: false.url: "json/DGCar.json".dataType: "json".pagination: true./ / paging
pageSize: number,
pageNumber: 1.search: false.// Displays the search box
contentType: "application/x-www-form-urlencoded".queryParams: null.columns: [
/ / {
// title: "vehicle id ",
// field: 'id',
// width:80,
// align: 'center',
// valign: 'middle'
/ /},
{
title: 'License plate'.field: 'carno'.width:80.align: 'center'.valign: 'middle'
},
{
title: 'Company'.field: 'company'.align: 'center'.valign: 'middle'
},
{
title: 'Contents of Transport'.field: 'content'.align: 'center'
},
{
title: 'Driving speed'.field: 'speed'.width:80.align: 'center'
},
{
title: 'Vehicle load'.field: 'load'.width:80.align: 'center'
},
{
title: 'operation'.field: 'load'.align: 'center'.formatter: function (value, row) {
var e = ';
var d = ' + row.id + '\')"> ';
returne + d; }}}); $('#table1').bootstrapTable({
method: "get".striped: true.singleSelect: false.url: "json/note1.json".dataType: "json".pagination: true./ / paging
pageSize: number,
pageNumber: 1.search: false.// Displays the search box
contentType: "application/x-www-form-urlencoded".queryParams: null.columns: [{title: "Threat source".field: 'id'.align: 'center'.valign: 'middle'
},
{
title: 'Radiated distance'.field: 'title'.align: 'center'.valign: 'middle'
},
{
title: 'Threat range'.field: 'type'.align: 'center'.valign: 'middle'
},
{
title: 'Type of hazard'.field: 'person'.align: 'center'}}]); $('#table2').bootstrapTable({
method: "get".striped: true.singleSelect: false.url: "json/note2.json".dataType: "json".pagination: true./ / paging
pageSize: number,
pageNumber: 1.search: false.// Displays the search box
contentType: "application/x-www-form-urlencoded".queryParams: null.columns: [{title: "Threat source".field: 'id'.align: 'center'.valign: 'middle'
},
{
title: 'Radiated distance'.field: 'title'.align: 'center'.valign: 'middle'
},
{
title: 'Threat range'.field: 'type'.align: 'center'.valign: 'middle'
},
{
title: 'Type of hazard'.field: 'person'.align: 'center'}}]); }function Echarts() {
var myChart = echarts.init($("#container_huan") [0]);
var option = {
tooltip: {
trigger: 'item'.formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical'.x: 'left'.data: ['Civilian explosion'.'Nail shooting Equipment'.'Hazardous Chemicals'.'Delivery logistics'.'hotel'].textStyle: {color:"#e9ebee"}},series: [{name:'Industry data'.type:'pie'.center: ['80%'.'50%'].radius: ['50%'.'80%'].avoidLabelOverlap: false.label: {
normal: {
show: false.position: 'center'
},
emphasis: {
show: true.textStyle: {
fontSize: '30'.fontWeight: 'bold'}}},itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false}}},data:[
{value:335.name:'Civilian explosion'},
{value:310.name:'Nail shooting Equipment'},
{value:234.name:'Hazardous Chemicals'},
{value:135.name:'Delivery logistics'},
{value:1548.name:'hotel'}]}]}; myChart.setOption(option); }function TimeControl(){$(".message_scroll_box").animate({marginTop:96},800.function(){$(".message_scroll_box").css({marginTop:0}); // Clear the top boundary
$(".message_scroll_box .message_scroll:first").before($(".message_scroll_box .message_scroll:last")); // Insert the last item after the first item
});
}
var T=setInterval(TimeControl,2300); // Start timer
$(".message_scroll_box").mouseenter(function(){
clearInterval(T); // Stop timer
})
.mouseleave(function(){
T=setInterval(TimeControl,2500); // Time again
})
</script>
<! -- Track playback time date selection -->
<script>
!function(){
laydate.skin('danlan');// To switch skins, check the skins library under skins
laydate({elem: '#demo'});
laydate({elem: '#demo1'});// Bind the element} ();// Date range limits
var start = {
elem: '#start'.format: 'YYYY-MM-DD'.min: laydate.now(), // Set the minimum date to the current date
max: '2099-06-16'.// Maximum date
istime: true.istoday: false.choose: function(datas){
end.min = datas; // When the start date is selected, reset the minimum end date
end.start = datas // Set the initial value of the end date to the start date}};var end = {
elem: '#end'.format: 'YYYY-MM-DD'.min: laydate.now(),
max: '2099-06-16'.istime: true.istoday: false.choose: function(datas){
start.max = datas; // End date After the selection, the maximum date of the recharge start date}}; laydate(start); laydate(end);function edit() {
layer.open({
type: 2.title: 'Storage Details'.shade: 0.5.skin: 'layui-layer-rim'.area: ['700px'.'400px'].shadeClose: true.closeBtn: 1.content: 'saveFindTail.html'
});
}
</script>
<script>
// Baidu Map API function
var map = new BMap.Map("map"); // Create a Map instance
map.centerAndZoom(new BMap.Point(116.404.39.915), 11); // Initialize the map, set the center point coordinates and map level
// Add a map type control
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
var mapStyle={
style:"dark"
};
map.setMapStyle(mapStyle);
map.setCurrentCity("Beijing"); // Set the city displayed on the map must be set
map.enableScrollWheelZoom(true);
</script>
</body>
</html>
Copy the codeEffect:
