Real-time visualization of big data management platform based on echats.
Complete html+css+js+json+font+video: download.csdn.net/download/we...
Project structure:
index.html
<!DOCTYPE html >
< 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 one </li >
< li class = "l_left total_chose_pl" > Statistical analysis two </li >
< li class = "r_right total_chose_pl" > Statistical analysis three </li >
< li class = "r_right total_chose_pl" > Statistical analysis four </li >
< li class = "r_right total_chose_pl" > Statistical analysis five </li >
</ul >
< div class = "total_chose_box" style = "display: none;" >
< div style = "height: 32px;" ></div >
< span class = "chose_tltle" > Please select the 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 the month: </span >
< input class = "chose_text_in" >
< span class = "chose_tltle" > Please select the region: </span >
< select class = "year_chose" >
< option > Beijing </option >
< option >Zigong City </option >
< option > Panzhihua City </option >
< option > Luzhou City </option >
< option > Deyang City </option >
< option > Mianyang City </option >
< option > Guangyuan City </option >
< option > Sining City </option >
< option > Neijiang City </option >
<option > Leshan City </option >
< option > Nanchong City </option >
< option > Yibin City </option >
< option > Guang an City </option >
< option > Dazhou City </option >
< option > Bazhong City </option >
< option > Ya'an city </option >
< option >Meishan City </option>
< option > Ziyang City </option >
< option > Aba Prefecture </option >
< option > Ganzi Prefecture </option >
< option > Liangshan Prefecture </option >
</select >
< button class = "chose_enter" > OK </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 = "Main monitoring bit" 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="loop monitoring 01" style="margin-right : 1%; margin-bottom: 1%">-->
<!--<source class="video" title="Main monitoring position" src="video/video.jpg"/>-->
<!- -</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="loop monitoring 02" style="margin-bottom: 1%">-->
<!--<source class="video" title="Main monitoring position" src="video/test_mv03.mov"/>-->
<!--</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="loop monitoring 03" style="margin-right: 1%">-->
<!--<source class= "video" title="Main Monitoring Position" src="video/test_mv03.mov"/>-->
<!--</video>-->
<!--<video autoplay="autoplay" loop="loop" class="video_around" title="loop monitoring04">-->
<!--<source class ="video" title="Main monitoring bit" 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" > Data traffic alert </span >
< span class = "scroll_level scroll_level01" > level one </span >
< A class = "localize" > </A >
< span class= "Scroll_timer" > 17-09-13/. 9: 52 is </span >
</div >
< div class = "msg_cage" >
< A class = "localize_title" > download a large video </A >
</div >
< div class = "msg_cage" >
< A class = "localize_msg" > xxx video site </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 three </span >
< a class = " localize" > </a >
< span class = "scroll_timer" > 17-09-13/9:52 </span >
</Div >
< div class = "msg_cage" >
< A class = "localize_title" > download large video </A >
</div >
< div class = "msg_cage" >
< A class = "localize_msg" > xxx video site </a >
</div >
</div >
< div class = "message_scroll">
< div class= "Scroll_top" >
< span class = "scroll_title" > data traffic warning </span >
< span class = "scroll_level scroll_level02" > two </span >
< A class = "localize" > </A >
< span class = "scroll_timer" > 17-09-13/9:52 </span >
</div >
<div class = "msg_cage">
< A class = "localize_title" > download large video </A >
</div >
< div class = "msg_cage" >
< A class = "localize_msg" > xxx video site </A >
</div >
</div >
< div class = "message_scroll" >
< div class = "scroll_top" >
<span class ="scroll_title" > data traffic warning </span >
< span class = "scroll_level scroll_level01" > an </span >
< A class = "localize" > </A >
< span class = "scroll_timer" > 17-09- 13/9:52 </span >
</div >
< div class = "msg_cage" >
<a class = "localize_title" >Download large video </A >
</div >
< div class = "msg_cage" >
< A class = "localize_msg" > xxx video site </A >
</div >
</div >
</div >
</Div >
< div class = "scroll_tool_outbox" >
< div class = "scroll_tool_box" >
< A class = "scroll_tool" href = "#" > View History Push </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;" >
<!--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"/> Hazardous chemicals companies </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"/> School </li >
< li class = "display_type_msg" > < input id = "zt_6" type = "checkbox" class = "display_type_chose"/> Medical and health </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"/> Parking lot </li >
< li class = "display_type_msg" > <input id = "zt_3" type ="checkbox" class = "display_type_chose"/> 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"/> Hazardous chemicals transportation vehicles </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 Police Officer </li >
< li class = "display_type_msg" > < input id = "zt_12" type = "checkbox" class = "display_type_chose"/> Patrol Police Car </
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" > OK </span >
</div >
</div >
<!--City selection-->
< 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"> Beijing </li>
< li class = "display_type_msg" > Zigong City </li >
< li class = "display_type_msg" > Panzhihua City </li >
< li class = "display_type_msg" > Luzhou City </li >
< li class = "display_type_msg" > Deyang City </li >
< li class = "display_type_msg" >Mianyang City </li >
<li class = "display_type_msg" > Guangyuan City </li >
< li class = "display_type_msg" > Sining City </li >
< li class = "display_type_msg" > Neijiang City </li >
< li class = "display_type_msg" > Leshan City </li >
< li class = "display_type_msg" > Nanchong City </li >
< li class = "display_type_msg" > Yibin City </li >
< li class = "display_type_msg" > Guangan City </li >
< li class = "display_type_msg" > Dazhou City </li >
< li class = "display_type_msg" > Bazhong City </li >
< li class = "display_type_msg" > Ya'an City </li >
< li class= "display_type_msg" > Meishan City </li >
< li class = "display_type_msg" > Ziyang City </li >
< li class = "display_type_msg" > Aba Prefecture </li >
< li class = "display_type_msg" > Ganzi Prefecture </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" > OK </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 > 3 Times </option >
</select >
< button class = "playback" onclick = "showRoute()" >Playback </button >
< button class = "playback close_playback" > Close </button >
</div >
<!--Buffer settings-->
< div class = "trajectory_box" style = "display: none" id = " divBufferSetting" >
< button class = "playback" style = "width:60px" onclick = "setBufferCenter()" > Setpoint </button >
< input class = "trajectory" id = "txtBufferX" placeholder = "coordinate X" >
< input class = "trajectory" id = "txtBufferY" placeholder = "coordinate Y" >
< input value = "10" class = "trajectory" id = "txtBufferDis" placeholder = "Buffer distance" >
< select class = "ratio" >
<option > m </option>
< option > km </option >
</select >
< button class = "playback" onclick = "executeBuffer();edit()" style = "width:60px" > Analysis </button >
< button class = " playback close_playback" > Close </button >
</div >
<!-- -->
<div class="map_tool_outbox">
<span class="map_tool" onclick="zoomFull()">
<a class="map_tool_inner" title=" " ></a>
</span>
<span class="map_tool" onclick="zoomOut()">
<a class="map_tool_inner" title=" " style="background-position-x:-36px"></a>
</span>
<span class="map_tool" onclick="zoomIn()">
<a class="map_tool_inner" title=" " style="background-position-x:-72px"></a>
</span>
<span class="map_tool" onclick="showHeatMap()">
<a class="map_tool_inner" title=" " style="background-position-x:-108px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" title=" " style="background-position-x:-144px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner display_type_btn" title=" " style="background-position-x:-180px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner city_chose_btn" title=" " style="background-position-x:-432px"></a>
</span>
<span class="map_tool" id="btnBuffer">
<a class="map_tool_inner" title=" " style="background-position-x:-216px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner addition_check_btn check_btn" title=" " style="background-position-x:-252px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner chemistry_check_btn check_btn" onclick="chemistryCheck()" title=" " style="background-position-x:-288px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner enterprise_check_btn check_btn" onclick="enterpriseCheck()" title=" " style="background-position-x:-324px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner car_check_btn check_btn" onclick="carCheck()" title=" " style="background-position-x:-360px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" onclick="Search()" title=" " style="background-position-x:-468px"></a>
</span>
<span class="map_tool">
<a class="map_tool_inner" onclick="cancel()" id="fresh_tool" title=" " 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-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);" >Analysis data one </div >
</div >
< div >
< select id = "selLayer" style = "width:100px;" >
< option value = "" > Vehicles </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 condition scanning </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 switch position-->
< div class = "dataAllBorder01 cage_cl" style = "margin-top: 9% !important; height: 24%" >
< div class = "dataAllBorder02 " id = "cage_cl" >
< div class = "analysis" > One day traffic: </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" > Flow 1: </li >
< li class = "depart_number" > 3,238 </li >
</ul >
< ul class = "depart_number_cage" >
< li class ="depart_name" > Traffic 2: </li >
< li class = "depart_number" > 1,630 </li >
</ul >
< ul class = "depart_number_cage" style = "margin-bottom: 0px;" >
< li class = "depart_name" > Traffic three: </li >
< li class = "depart_number" > 4,251 </li >
</ul >
< ul class = "depart_number_cage" style = "margin-bottom: 0px;" >
< li class = "depart_name" > Flow four: </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;" > First level </a > </li >
< li class = "location_msg02 location_single" >Incident level: chemical gas leakage </a> </Li >
< Li class = "location_msg02 location_double" > incident time: < A the href = "#" style = "Color: # cdd6db;" > 2017-09-10 < br > 11:40 </A > </li >
< li class = "location_msg01 location_double" > Address: 45#, South 3rd Section, First Ring Road, Chenghua District, Beijing </a > </li >
< li class ="location_msg01 location_single" style = "width: 100%; height: 40%" > Case related: "131" robbery, 2014-05-13 fire, 2013-12-08 poison gas leak. </a > </li >
</ul >
</div >
</div >
< div class = "dataAllBorder01 cage_cl check_increase" style = "margin-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%" > Name </th >
<th > Attribution </th >
< th > Degree </th >
< th > Scope) </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%" > Name </th >
< th > Attribution </th >
< th > degree </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 > Station </td >
</tr >
< tr >
< td > xxxxxxx </td >
< td > xxxxxxx </td >
< td > xxxxxxx </td >
< td > - </td >
</tr >
</tbody >
</table >
</div >
<!--
Switch02 --> < div class = "dataAllBorder02 over_hide dataAllBorder20" id = "over_hide1" style = "display: none" >
< table class = "table table -bordered" >
< thead >
< tr >
< th style = "width: 18%" > Name </th >
<th > level </th>
< th > Traffic </th >
< th > Range (r=?) </th >
</tr >
</thead >
< tbody >
< tr >
< td > Download text </td >
< td > 3.levels </td >
< td > 5t </td >
< td > 200m-5km </td >
</tr>
< tr >
< td > Browse pictures </td >
< td > 3.levels... </td >
< td > 3t </td >
< td > 4km-80km </td >
</tr >
< tr >
< td > Browse video </td >
< td > First level </td >
< td >20t </td>
< td > 400m-2km </td >
</tr >
< tr >
< td > Download pictures </td >
< td > First level </td >
< td > 10t </td >
< td > 1km </td >
</tr >
< tr >
< td > Download video </td >
<td >Level one </td >
< td > 4t </td >
< td > 2km </td >
</tr >
< tr >
< td > Online processing </td >
< td > Level one </td >
< td > 3t </td >
< td > 500m-2km </td >
</tr >
<tr >
< td > Online query </td >
< td > First level </td >
< td > 10M2 </td >
< td > 500m-10km </td >
</tr >
< tr >
< td > xxx </td >
< td > First level </td >
< td > 5t </td >
<td >200m-5km </td >
</tr >
< tr >
< td > xxxxx </td >
< td > First level </td >
< td > 6t </td >
< td > 4km-80km </td >
</tr >
< tr >
< td > xxxx </td >
< td >First level </td>
< td > 11t </td >
< td > 400m-2km </td >
</tr >
</tbody >
</table >
</div >
<!--Address search 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 area </option >
< option > Street </option >
< option > Building was </Option >
< Option > Zone </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" > Start search </button >
</div>
<!--Search results panel-->
< 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 = "Locating" > </li >
< li class = "search_eddit" title = "Operation" > </li >
< li class = "search_result_road" > Ziyang City>Yanjiang District>West of the intersection of Shutai Road and Junxing Road </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Chengdu University Jinniu Campus </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" title = "Operation" > </li>
< li class = "search_result_road" > Beijing>Chaoyang>East Sixth Lane </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > 22nd Middle School </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" title = "Operation" ></li >
< li class = "search_result_road" > Beijing>Chaoyang> Miao Miao Road </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Hongsheng Ecological Park </li >
< li class = "search_location" title = "Location" > </li >
<li class = "search_eddit" title ="Operation" > </li >
< li class = "search_result_road" > Beijing>xxx>Huiwangling East Road </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Ziyang Automobile Passenger Transport Center </li >
< li class = "search_location" title = "Location" > </li >
<li class = "search_eddit" title = "Operation" > </li >
< li class = "search_result_road" > Ziyang City>Yanjiang District>West of the intersection of Shutai Road and Junxing Road </li >
</ul >
< ul class = "search_result " >
< li class = "search_result_add" > Huangzhong Park </li >
< li class = "search_location" title = "Location" > </li >
< li class= "search_eddit" title = "Operation" > </li >
< li class = "search_result_road" > Beijing>Chaoyang>Tongde Street </li >
</ul >
</div >
<!--Page turning module- ->
< div class = "tcdPageCode" > </div >
</div >
<!--Hazardous chemicals search switch 04-->
< div class = "dataAllBorder02 chemistry_check_in" id = "chemistry_check_in" style= "display: none;position: relative" >
< div class = "analysis" style = "height: 34px;" > Search: </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 > Product code </option >
< option > Enterprise code </option >
</select >
</ul >
< ul class = "search_separate" >
< li class = "search_title" > Enter code: </li >
< li class = "search_input_box" > <input class = "search_input" type= "text" > </li >
</ul >
< button class = "search_btn" > Start search </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 = "Locating" > </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 = "Location" > </li >
<li class ="search_eddit" title = "Lifecycle" > </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" > Level 2 </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" title = "Lifecycle" > </li >
< li class = "search_result_car car_personal" > xxxxxx </li >
< li class = "search_result_car car_time" > xxxxxx manufacturer</li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add danger_result" > Fireworks </li >
< li class = "danger_level level02" > Level 2 </li >
< li class = "search_location" title = "Location" > </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 built 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 = "Location" > </li >
< li class = "search_eddit" title = "Lifecycle" > </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" > First level </li >
< li class = "search_location" title = "Targeting" > </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 05-->
<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 selection: </li >
< select class= "search_input_box search_chose_box" >
< option > Logistics enterprise </option >
< option > Food manufacturing </option >
< option > Service industry </option >
< option > Industrial production </option >
< option > Electronic product manufacturing </option >
< option > Technology services </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 number: </li>
< li class = "search_input_box" > < input class = "search_input" type = "text" > </li >
</ul >
< button class = "search_btn" > Start search </button >
</div >
<! --Search results panel-->
< div class = "search_sesult_box" >
< ul class = "search_result">
< li class = "search_result_add" > Convenience store headquarters (350298100000405) </li >
< li class = "search_location" title = "Locating" > </li >
< li class = "search_eddit" onclick = "people()" title = " Operation" > </li >
< li class = "search_result_road" > Beijing>Wuhou District>4th Floor, No.223, Xinwangwang Road </li >
</ul >
<ul class = "search_result" >
< li class = "search_result_add" > Red Flag Chain (260220100003523) </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" onclick = "people()" title = "Operation" > </li >
< li class = "search_result_road" > Beijing>Chaoyang>No.244 Jianye Road</li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Blue Ocean Travel Agency (260220100003523) </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" onclick = "people()" title = "Operation" > </li >
< li class = "search_result_road" > Beijing>Chaoyang>Miao MiaoRoad </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Wu Ming Hot Pot (350298100000405) </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_eddit" onclick = "people()" title ="Operation" > </li >
< li class = "search_result_road" > Beijing>xxx>Huiwangling East Road </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Ajie Hair Art Chain (260220100003523) </li >
< li class = "search_location" title = "location" > </li >
< li class ="search_eddit" onclick = "people()" title = "Operation" > </li >
< li class = "search_result_road" > West of the intersection of Shutai Road and Junxing Road </li >
</ul >
< ul class = "search_result" >
< li class = "search_result_add" > Huangzhong Park (350298100000405) </li >
< li class = "search_location" title = "Positioning" ></li >
< li class = "search_eddit" onclick = "people()" title = "Operation" > </li >
< li class = "search_result_road" > Beijing>Chaoyang>Tongde Street </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 retrieval: </div >
< div class = " search_plate_box" >
< ul class = "search_separate" >
< li class = "search_title" > License plate number: </li >
< li class= "search_input_box" > < input class = "search_input" type = "text" > </li >
</ul >
< ul class = "search_separate" >
< li class = "search_title" > Car owner s name: </li >
< li class = "search_input_box" > < input class = "search_input" type = "text" > </li >
</ul >
< button class = "search_btn" > Search </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" > Take 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 = "Locating" > </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" > Chuan B 2563K (Li Xue) </li >
< li class = "search_location" title = "Location" > </li >
< li class = "search_guiji" title = "Track playback" > </li >
< li class = "search_result_car car_personal" > Shanghai Volkswagen () </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 = "Location" > </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" > 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 = "Locating" > </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-top: 1.5% !important; height: 32%; position: relative;" >
< div class = "dataAllBorder02 over_hide" style = "padding: 1.2%;" >
< div class = "analysis" > Proportion of xxxxx constituent factors: </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 synthesis </li >
< li class = "data data01" > 652 </li >
< li class = "data data02" > 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" > Statistic One </li >
< li class = "data data01" > 97 </li >
<li class = "data data02" style= "color: #ff2865;" > 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 2 </li >
< li class = "data data01" > 423 </li >
< li class = "data data02" > & nbsp1 % </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 3 </li >
<li class ="data data01" > 218 </li >
< li class = "data data02" > 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" > xxxxxxx analysis </div >
< p class = "data_chart" id = "bookBmonth" > </p >
</div >
</div>
</div >
< div class = "dataAll" >
< div class = "dataAllBorder01" >
< div class = "dataAllBorder02" >
< div class = "data_tit1" > xxxxxxx analysis </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 summary </div >
< table class = "table_data01" >
< tr > < td > Total number </td > < td colspan = "3" class = "font01" > 56320 </td > </tr >
< tr > < td > xxxxxx number </td > < td colspan = "3" class = "font02" >56320 </td> </tr >
< tr >
< td > Number of xxxxx: </td >
< td > 10 pieces </td >
< td > Number of types: </td >
< td > 6 pieces </td >
</tr >
< tr >
< td > Maximum number of xxxx: </td >
< td > 16-20 points </td >
< td> xxxxx most months: </td >
< td > December </td >
</tr >
< tr >
< td > xxxxx most seasons: </td >
< td > xxxx </td >
< td > xxxxx weather: </td >
< td > Sunny day </td >
</tr >
< tr >
< td >xxxxxx: </td >
< td > Package A </td >
< td > xxxxxx: </td >
< td > Activities </td >
</tr >
< tr >
< td > xxxxxx: </td >
< td > Smooth traffic </td >
< td > xxxxx special time: </td >
< td > National Day </td >
</tr >
< tr >
< td > xxxxx: </td >
< td colspan = "3" style = "color: red" > xxxxxB </td >
</tr >
< tr >
< td > xxxxx multiple seasons: </td >
< td colspan = "3" style = "color: red" > 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" > Income channel analysis </div >
<table class = "table_data01" >
< tr >
< td > Total revenue: </td > < td colspan = "3" class = "font01" > 123,653 yuan </td >
</tr >
< tr >
< td > Number of revenue channels: </td > < td colspan = "3" class = "font03" > 5 pcs </td >
</tr >
< tr > <td >The channel with the most revenue </td > < td class = "font04" > Channel A (56%) </td > < td >The channel with the least revenue </td > < td class = "font05" > Channel C (2.8% ) </td > </tr >
< tr > < td > Channel A revenue </td > < td class = "font6" >53602 yuan </td> < td > Proportion of channel A revenue </td > < td class = "font6" > 4.8% </td > </tr >
< tr > < td > Channel B revenue </td > < td class = "font6 " > 53602 yuan </td > < td > Proportion of channel B revenue </td > < td class = "font6"> 4.8%</td > </tr >
< tr > < td > Channel C revenue </td > < td class = "font6" > 53,602 yuan </td > < td > Proportion of channel D revenue </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 volume analysis </div >
< table class = "table_data02" >
< tr > < td class = "font07" >Total sales </td > < td class = "font03" > 15.6 million yuan </td > < td class = "font07" > Marketing investment </td > < td class = "font02" > 5.6 million </td > </tr >
< tr > < td class = "font07" > Total profit </td > < td class = "font01" >10 million yuan </td >< td class = "font07" > 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 > div > < table class = "table_data01" >
< tr >
<td > Total expenditure: </td > < td colspan = "3" class = "font02" > 123,653 yuan </td >
</tr >
< tr >
< td > Number of spending channels: </td > < td colspan = "3" class = "font02 " > 5 </td >
</tr >
< tr > < td > Channels with the most spending </td > < td class = "font05" > Channel A(56%) </td > < td >The least-spending channel </td > < td class = "font04" > Channel C(2.8%) </td > </tr >
< tr > < td > Channel A spending </td > < td class = "font6" > 53602 yuan </td > < td >Channel A s Spending Percentage </td >< td class = "font6" > 4.8% </td > </tr >
< tr > < td > Channel B expenditure </td > < td class = "font6" > 53602 yuan </td > < td > Channel B Spending percentage </td > < td class = "font6" > 4.8% </td > </tr >
< tr >< td > Channel C expenditure </td > < td class = "font6" > 53602 yuan </td > < td > Channel D expenditure percentage </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" > xxxxxxx analysis </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" > Event type </td > < td class = "font03" > 5 </td > < td class = "font07" > xxxx </td > < td class = "font02" > 5.6 million </td > </tr >
< tr > < td class = "font07" >Most occurrences of events </td > <td class = "font01" > xxxx </td > < td class = "font07" > Least occurrence </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 > Total number xxxx </td >
< td colspan = "3" > 25414 people </td >
</TR >
< TR >
< td > XXXXX </td >
< td colspan = "3" > province tourists </td >
</tr >
< tr >
< td > xxxxx </td >
< td colspan = "3" > Youth </td >
</tr >
< tr >
< td > Male tourists </td >
< td > 5424 people </td >
< td > Female tourists </td >
< td > 5457 people </td >
</tr >
< tr >
< td > Team tourists </td >
< td > 5424 people </td >
< td > FIT </td >
< TD > 5457 human </TD > </TR > < TR > < TD > an </TD > < TD > decrease%. 5 </TD > < td > Move on comparison </td > < td > Up 5.6% </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 > xxxx data analysis </p >
</div >
<!-- <div class="manage_top_middle l_left">-->
<!--<div id="container5" style="height: 90%"></div>-->
<!--<p>Weather-tourists 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 situation </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 > xxxx data Analysis </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=" margin-left: 0.6%">
<!--<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 > 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 > First aid department </td >
< td > xxxx staff </td >
< td > xxx (99%) </td >
</tr >
< tr >
< td > xxx </td >
< td > Ticket Sales Department </td >
<td > xxxx </td >
< td > Security Department </td >
</tr >
< tr >
< td > xxx </td >
< td > Li Huan </td > < td > xxx </td > < td > week Wei </td > </tr > < tr > < td > xxxx main reason </td >< td > Man-made damage </td >
< td > xxx handling situation </td >
< td > All equipment treatment in time </td >
</tr >
<!--<tr>-->
<!--< td>Employee of the Year</td>-->
<!--<td>Li Jin</td>-->
<!--<td>Focus on employee observation</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 > Proportion of staff gender </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 >Proportion of staff age group </p>
</div>
</div >
< div class = "user_top_middle" >
< div id = "userContainerAttendance" style = "height: 90%" > </div >
< p > Attendance of various departments in the scenic spot </p >
</div >
</div >
</div >
</div >
< div class = "user_left l_left" style = "margin-left: 0.6%" >
<!--<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 = "margin-left: 0.6%" >
<!--<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 situation </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%" > class = "user_right_left l_left" > < div id = "userContainerHandle" style = "height: 90%" > </div > <p > Troubleshooting situation </p </</div >
< p > xxx reason analysis </p >
</div >
< div
>
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
}
});
//Page turning 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();
}
//
$(".addition_check_btn").click(function () {
$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$(".addition_check_in").show().siblings().hide()
});
//
function chemistryCheck() {
$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$("#chemistry_check_in").show().siblings().hide()
}
//
function enterpriseCheck() {
$(".check_increase").addClass("check_increase_act");
$(".check_decrease").hide()
$("#enterprise_check_in").show().siblings().hide()
}
//
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, //
pageSize: number,
pageNumber: 1,
search: false, //
contentType: "application/x-www-form-urlencoded",
queryParams: null,
columns: [
// {
// title: " ",
// field: 'id',
// width:80,
// align: 'center',
// valign: 'middle'
// },
{
title: ' ',
field: 'carno',
width:80,
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'company',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'content',
align: 'center'
},
{
title: ' ',
field: 'speed',
width:80,
align: 'center'
},
{
title: ' ',
field: 'load',
width:80,
align: 'center'
},
{
title: ' ',
field: 'load',
align: 'center',
formatter: function (value, row) {
var e = '<a href="javascript:void(0)" title="" onclick="showCarDetai()"> </a> ';
var d = '<a href="javascript:void(0)" title="" onclick="analiysis(\'' + row.id + '\')"> </a> ';
return e + d;
}
}
]
});
$('#table1').bootstrapTable({
method: "get",
striped: true,
singleSelect: false,
url: "json/note1.json",
dataType: "json",
pagination: true, //
pageSize: number,
pageNumber: 1,
search: false, //
contentType: "application/x-www-form-urlencoded",
queryParams: null,
columns: [
{
title: " ",
field: 'id',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'title',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'type',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'person',
align: 'center'
}
]
});
$('#table2').bootstrapTable({
method: "get",
striped: true,
singleSelect: false,
url: "json/note2.json",
dataType: "json",
pagination: true, //
pageSize: number,
pageNumber: 1,
search: false, //
contentType: "application/x-www-form-urlencoded",
queryParams: null,
columns: [
{
title: " ",
field: 'id',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'title',
align: 'center',
valign: 'middle'
},
{
title: ' ',
field: 'type',
align: 'center',
valign: 'middle'
},
{
title: ' ',
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:[' ',' ',' ',' ',' '],
textStyle:{
color:"#e9ebee"
}
},
series: [
{
name:' ',
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:' '},
{value:310, name:' '},
{value:234, name:' '},
{value:135, name:' '},
{value:1548, name:' '}
]
}
]
};
myChart.setOption(option);
}
function TimeControl(){
$(".message_scroll_box").animate({marginTop:96},800,
function(){
$(".message_scroll_box").css({marginTop:0}); //
$(".message_scroll_box .message_scroll:first").before($(".message_scroll_box .message_scroll:last")); //
});
}
var T=setInterval(TimeControl,2300); //
$(".message_scroll_box").mouseenter(function(){
clearInterval(T); //
})
.mouseleave(function(){
T=setInterval(TimeControl,2500); //
})
</script>
<!-- -->
<script>
!function(){
laydate.skin('danlan');//skins
laydate({elem: '#demo'});
laydate({elem: '#demo1'});//
}();
//
var start = {
elem: '#start',
format: 'YYYY-MM-DD',
min: laydate.now(), //
max: '2099-06-16', //
istime: true,
istoday: false,
choose: function(datas){
end.min = datas; //
end.start = datas //
}
};
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; //
}
};
laydate(start);
laydate(end);
function edit() {
layer.open({
type: 2,
title: ' ',
shade: 0.5,
skin: 'layui-layer-rim',
area: ['700px', '400px'],
shadeClose: true,
closeBtn: 1,
content: 'saveFindTail.html'
});
}
</script>
<script>
// API
var map = new BMap.Map("map"); // Map
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // ,
//
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
var mapStyle={
style:"dark"
};
map.setMapStyle(mapStyle);
map.setCurrentCity(" "); //
map.enableScrollWheelZoom(true);
</script>
</body>
</html>