|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <link href="/static/css/BigData.css" rel="stylesheet" type="text/css" />
- <link href="/static/css/index.css" rel="stylesheet" type="text/css" />
- <link href="/static/css/index01.css" rel="stylesheet" type="text/css" />
- <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
- <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
- <script src="/static/js/jquery.js"></script>
- <link href="/static/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
- <link href="/static/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
- <link href="/static/css/Security_operation.css" rel="stylesheet" type="text/css" />
- <link rel="stylesheet" href="/static/js/artDialog/skins/default.css" type="text/css"/>
- <script src="/static/js/laydate.js"></script>
- <script src="/static/js/Home_page.js"></script>
- <meta charset="UTF-8">
- <title>人流管理平台</title>
- <script type="text/javascript">
- function change_camera(info){
- document.getElementById("big-camera").src = info;
- }
- </script>
- </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">实时监测</li>
- <li class="l_left total_chose_pl" onclick="window.open('/admin','_self');">管理员站点</li>
- <!-- <li class="l_left total_chose_pl" >统计分析一</li>-->
- <!-- <li class="l_left total_chose_pl">统计分析二</li>-->
- <!-- <li class="r_right total_chose_pl">统计分析三</li>-->
- <!-- <li class="r_right total_chose_pl">统计分析四</li>-->
- <!-- <li class="r_right total_chose_pl">统计分析五</li>-->
- </ul>
- <div class="total_chose_box" style="display: none;">
- <div style="height: 32px;"></div>
- <span class="chose_tltle">请选择年份:</span>
- <select class="year_chose">
- <option>2017</option>
- <option>2016</option>
- <option>2015</option>
- <option>2014</option>
- <option>2013</option>
- <option>2012</option>
- </select>
- <span class="chose_tltle">请输入月份:</span>
- <input class="chose_text_in">
- <span class="chose_tltle">请选择区域:</span>
- <select class="year_chose">
- <option> 北京市</option>
- <option>自贡市</option>
- <option>攀枝花市</option>
- <option>泸州市</option>
- <option>德阳市</option>
- <option>绵阳市</option>
- <option>广元市</option>
- <option>遂宁市</option>
- <option>内江市</option>
- <option>乐山市</option>
- <option>南充市</option>
- <option>宜宾市</option>
- <option>广安市</option>
- <option>达州市</option>
- <option>巴中市</option>
- <option>雅安市</option>
- <option>眉山市</option>
- <option>资阳市</option>
- <option>阿坝州</option>
- <option>甘孜州</option>
- <option>凉山州</option>
- </select>
- <button class="chose_enter">确定</button>
- </div>
- <div class="clear"></div>
- </div>
- <div class="index_tabs" >
- <!--安防运作-->
- <div class="inner" style="height: 109%;">
-
- <div class="left_cage">
- <div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%;">
- <div class="dataAllBorder02 video_cage">
- <img class="video" title="主监控位" src="/static/video/img.png" >
- </div>
- </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/1" onclick="change_camera('/video/1');">
- <img class="video_around" src="/video/2" onclick="change_camera('/video/2');">
- <img class="video_around" src="/static/video/video.jpg">
- <img class="video_around" src="/static/video/video.jpg">
- </div>
- </div>
- <div id="warn_show" class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 32%; position: relative; overflow-y: auto">
- <div class="dataAllBorder02" style="padding: 1.2%; ">
- <div class="message_scroll_box">
- <div class="message_scroll">
- <div class="scroll_top">
- <span class="scroll_title">人流量警示</span>
- <span class="scroll_level scroll_level01">一级</span>
- <a class="localize"></a>
- <span class="scroll_timer">17-09-13/9:52</span>
- </div>
- <div class="msg_cage">
- <a class="localize_title">人流量超警</a>
- </div>
- <div class="msg_cage">
- <a class="localize_msg">1号监控摄像头</a>
- </div>
- </div>
- </div>
-
- </div>
- <div class="scroll_tool_outbox">
- <div class="scroll_tool_box">
- <a class="scroll_tool" href="#">查看历史推送</a>
- </div>
- </div>
- </div>
- </div>
-
- <div class="center_cage">
- <div class="dataAllBorder01 cage_cl" style="margin-top: 3.5% !important; height: 62.7%; position: relative;">
- <div class="dataAllBorder02" style="position: relative; overflow: hidden;">
- <!--标题栏-->
- <div class="map_title_box" style="height: 6%">
- <div class="map_title_innerbox">
- <div class="map_title">实时监控</div>
- </div>
- </div>
- <div align="center"><img id="big-camera" height="400px" width="838px" src="/video/1"></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);">人流折线图</div>
- </div>
- </div>
- <div style="width:100%;height:220px;">
- <div id="graph1" style="width:50%;height:220px;float:left"></div>
- <div id="graph2" style="width:50%;height:220px;float:right"></div>
-
- </div>
- </div>
- </div>
- </div>
-
- <div class="right_cage">
- <!--顶部切换位置-->
- <div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%">
- <div class="dataAllBorder02" id="cage_cl" >
- <div class="analysis">全天人流量:</div>
- <div id="num_count"></div>
- <ul class="data_show_box">
- <li class="data_cage" id="num_count4">0</li>
- <li class="data_cage" id="num_count3">0</li>
- <li class="data_cage" style="background-image: none;">,</li>
- <li class="data_cage" id="num_count2">0</li>
- <li class="data_cage" id="num_count1">0</li>
- <li class="data_cage" id="num_count0">0</li>
- </ul>
- <div class="depart_number_box">
- <ul class="depart_number_cage">
- <li class="depart_name">场所流量:</li>
- <li class="depart_number" id="count1">0</li>
- </ul>
- <ul class="depart_number_cage">
- <li class="depart_name">可视流量:</li>
- <li class="depart_number" id="count2">0</li>
- </ul>
- <ul class="depart_number_cage" style="margin-bottom: 0px;">
- <li class="depart_name">入口流量:</li>
- <li class="depart_number" id="count3">0</li>
- </ul>
- <ul class="depart_number_cage" style="margin-bottom: 0px;">
- <li class="depart_name">出口流量:</li>
- <li class="depart_number" id="count4">0</li>
- </ul>
- </div>
- </div>
- </div>
-
- <div class="dataAllBorder01 cage_cl check_increase" style=" margin-top: 1.5% !important;">
- <!--切换01-->
- <div class="dataAllBorder02 over_hide dataAllBorder20" id="over_hide">
- <div id="graph3" style="width:100%;height:260px;overflow-y: auto">
- </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 id="graph4" style="width:100%;height:220px;"></div>
- <script>
- var chart1 = echarts.init(document.getElementById('graph1'),'roma');
- var chart2 = echarts.init(document.getElementById('graph2'),'roma');
- var chart4 = echarts.init(document.getElementById('graph4'),'light');
- $(
- function () {
- fetchData(chart1,chart2,chart4);
- setInterval(fetchData,2000);
- }
- );
-
- function fetchData() {
- $.ajax({
- type: "get",
- url: "/graph_vis",
- dataType: 'json',
- success: function (result) {
- chart1.setOption(result.data[0]);
- chart2.setOption(result.data[1]);
- document.getElementById('graph3').innerHTML=result.data[2];
- chart4.setOption(result.data[3]);
- document.getElementById('warn_show').innerHTML=result.data[4];
- }
- });
- }
- </script>
-
-
- </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分析</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类型分析</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分析</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分析</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分析</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分析</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">数据汇总</div>
-
- <table class="table_data01" >
- <tr><td>总数</td><td colspan="3" class="font01">56320</td></tr>
- <tr><td>xxxxxx数</td><td colspan="3" class="font02">56320</td></tr>
- <tr>
- <td>xxxxx数:</td>
- <td>10个</td>
- <td>类型数:</td>
- <td>6个</td>
- </tr>
- <tr>
- <td>xxxx最多数:</td>
- <td>16-20点</td>
- <td>xxxxx最多月:</td>
- <td>12月</td>
- </tr>
- <tr>
- <td>xxxxx最多季节:</td>
- <td>xxxx</td>
- <td>xxxxx天气:</td>
- <td>晴天</td>
- </tr>
- <tr>
- <td>xxxxxx:</td>
- <td>套餐A</td>
- <td>xxxxxx:</td>
- <td>活动</td>
- </tr>
- <tr>
- <td>xxxxxx:</td>
- <td>交通畅通</td>
- <td>xxxxx特殊时间:</td>
- <td>国庆节</td>
- </tr>
- <tr>
- <td>xxxxx:</td>
- <td colspan="3" style="color: red">xxxxxB</td>
-
- </tr>
- <tr>
- <td>xxxxx多季节:</td>
- <td colspan="3" style="color: red">冬季</td>
-
- </tr>
-
- </table>
-
- </div>
- </div>
- </div>
- <div class="dataAll02">
- <div class="dataAllBorder01">
- <div class="dataAllBorder02">
- <div class="data_tit1">xxxxx分析</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分析</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订单分析</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分析</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">收入渠道分析</div>
- <table class="table_data01">
- <tr>
- <td>总收入:</td><td colspan="3" class="font01">123653元</td>
- </tr>
- <tr>
- <td>收入渠道数:</td><td colspan="3" class="font03">5个</td>
- </tr>
- <tr><td>收入最多渠道</td><td class="font04">渠道A(56%)</td><td>收入最少渠道</td><td class="font05">渠道C(2.8%)</td></tr>
- <tr><td>渠道A收入</td><td class="font6">53602元</td><td>渠道A收入占比</td><td class="font6">4.8%</td></tr>
- <tr><td>渠道B收入</td><td class="font6">53602元</td><td>渠道B收入占比</td><td class="font6">4.8%</td></tr>
- <tr><td>渠道C收入</td><td class="font6">53602元</td><td>渠道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">营销投入与销售量分析</div>
- <table class="table_data02">
- <tr><td class="font07">销量总量</td><td class="font03">1560万元</td><td class="font07">营销投入量</td><td class="font02">560万</td></tr>
- <tr><td class="font07">总利润</td><td class="font01">1000万元</td><td class="font07">利润率</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">支出渠道分析</div>
- <table class="table_data01">
- <tr>
- <td>总支出:</td><td colspan="3" class="font02">123653元</td>
- </tr>
- <tr>
- <td>支出渠道数:</td><td colspan="3" class="font02">5个</td>
- </tr>
- <tr><td>支出最多渠道</td><td class="font05">渠道A(56%)</td><td>支出最少渠道</td><td class="font04">渠道C(2.8%)</td></tr>
- <tr><td>渠道A支出</td><td class="font6">53602元</td><td>渠道A支出占比</td><td class="font6">4.8%</td></tr>
- <tr><td>渠道B支出</td><td class="font6">53602元</td><td>渠道B支出占比</td><td class="font6">4.8%</td></tr>
- <tr><td>渠道C支出</td><td class="font6">53602元</td><td>渠道D支出占比</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分析</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分析</div>
- <table class="table_data02">
- <tr><td class="font07">事件类型</td><td class="font03">5个</td><td class="font07">xxxx</td><td class="font02">560万</td></tr>
- <tr><td class="font07">最多发生事件</td><td class="font01">xxxx</td><td class="font07">最少发生事件</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分析</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分析</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>xxxx总数</td>
- <td colspan="3">25414人</td>
- </tr>
- <tr>
- <td>xxxxx</td>
- <td colspan="3">省内游客</td>
- </tr>
- <tr>
- <td>xxxxx</td>
- <td colspan="3">青年</td>
- </tr>
- <tr>
- <td>男性游客</td>
- <td>5424人</td>
- <td>女性游客</td>
- <td>5457人</td>
- </tr>
- <tr>
- <td>团队游客</td>
- <td>5424人</td>
- <td>散客</td>
- <td>5457人</td>
- </tr>
- <tr>
- <td>同比</td>
- <td>下降5%</td>
- <td>环比</td>
- <td>上升5.6%</td>
- </tr>
- </tbody>
- </table>
- <p>xxxxx数据汇总</p>
- </div>
- <div class="manage_left_top">
- <div class="manage_top_left l_left">
- <div id="container2" style="height: 90%"></div>
- <p>xxxxx分析</p>
- </div>
- <div class="manage_top_left l_left">
- <div id="container1" style="height: 90%"></div>
- <p>xxxx分析</p>
- </div>
- <div class="manage_top_left l_left">
- <div id="container3" style="height:90%"></div>
- <p>xxxx分析</p>
- </div>
-
- </div>
- <div class="manage_top_middle">
- <div id="container4" style="height: 90%"></div>
- <p>xxxx数据分析</p>
- </div>
- <!--<div class="manage_top_middle l_left">-->
- <!--<div id="container5" style="height: 90%"></div>-->
- <!--<p>天气——游客数据分析</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情况</p>
- </div>
- <div class="manage_top_middle l_left">
- <div id="container10" style="height: 90%"></div>
- <p>xxxx分析</p>
- </div>
- <div class="manage_top_middle l_left">
- <div id="container11" style="height: 90%"></div>
- <p>xxxx分析</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排行</p>
- </div>
- <div class="manage_top_middle">
- <div id="container6" style="height: 90%"></div>
- <p>xxxx数据分析</p>
- </div>
- <div class="manage_top_middle l_left">
- <div id="container5" style="height: 90%"></div>
- <p>xxxxx数据分析</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>xxxx总数</td>
- <td colspan="3">965人</td>
- </tr>
- <tr>
- <td>xxxx工作人员</td>
- <td>625人</td>
- <td>xxxx工作人员</td>
- <td>340人</td>
- </tr>
- <tr>
- <td>xxxx</td>
- <td>急救部</td>
- <td>xxxx工作人员</td>
- <td>xxx(99%)</td>
- </tr>
- <tr>
- <td>xxx</td>
- <td>售票部</td>
- <td>xxxx</td>
- <td>安保部</td>
- </tr>
- <tr>
- <td>xxx</td>
- <td>李焕</td>
- <td>xxx</td>
- <td>周伟</td>
- </tr>
- <tr>
- <td>xxxx主要原因</td>
- <td>人为损坏</td>
- <td>xxx处理情况</td>
- <td>均及时进行设备处理</td>
- </tr>
- <!--<tr>-->
- <!--<td>年度最佳员工</td>-->
- <!--<td>李进</td>-->
- <!--<td>重点观察员工</td>-->
- <!--<td>周伟</td>-->
- <!--</tr>-->
-
- </tbody>
- </table>
- <p>xxx管理汇总</p>
- </div>
- <div class="user_left_top">
- <div class="user_top_left l_left">
- <div id="userContainerSex" style="height: 90%"></div>
- <p>工作人员性别占比</p>
- </div>
- <div class="user_top_left l_left">
- <div id="userContainerManage" style="height: 90%"></div>
- <p>各部门人员占比</p>
- </div>
- <div class="user_top_left l_left">
- <div id="userContainerAge" style="height:90%"></div>
- <p>工作人员年龄段占比</p>
- </div>
-
- </div>
- <div class="user_top_middle">
- <div id="userContainerAttendance" style="height: 90%"></div>
- <p>景区各部门出勤情况</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排行</p>
- </div>
- <div class="user_top_middle l_left">
- <div id="userContainerFlow" style="height: 90%"></div>
- <p>xxx分析</p>
- </div>
- <div class="user_top_middle l_left">
- <div id="userContainerIllegal" style="height: 90%"></div>
- <p>xxxx分析</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情况</p>
- </div>
- <div class="user_top_middle">
- <div id="userContainerPrize" style="height: 90%"></div>
- <p>xxx分析</p>
- </div>
- <div class="user_top_middle l_left">
- <div class="user_right_left l_left">
- <div id="userContainerReason" style="height: 90%"></div>
- <p>xxx原因分析</p>
- </div>
- <div class="user_right_left l_left">
- <div id="userContainerHandle" style="height: 90%"></div>
- <p>故障处理情况</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <script src="/static/js/echarts-all.js"></script>
- <script src="/static/js/index.js"></script>
- <script src="/static/js/bstable/js/bootstrap.min.js"></script>
- <script src="/static/js/bstable/js/bootstrap-table.js"></script>
- <script type="text/javascript" src="/static/js/jquery.pagination.js"></script>
- <script src="/static/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="/static/js/Home_page.js"></script>
- <script src="/static/js/artDialog/artDialog.js"></script>
- <script src="/static/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
- }
- });
-
-
- // 翻页模块
- $(".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 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);
- }
-
- </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 type="text/javascript">
- function num_count(){
- // 朝后端发送ajax请求
- $.ajax({
- // 1.指定朝哪个后端发送ajax请求
- url:'/num_count', //不写就是朝当前地址提交【与form表单的action参数相同】
- // 2.请求方式
- type:'get', // 不指定默认就是get,都是小写
- // 3.数据
- data:{},
- // 4.回调函数:当后端给你返回结果的时候会自动触发,args接受后端的返回结果
- success:function (args) {
- document.getElementById('count1').innerHTML=args[0];
- document.getElementById('count2').innerHTML=args[1];
- document.getElementById('count3').innerHTML=args[2];
- document.getElementById('count4').innerHTML=args[3];
- document.getElementById('num_count0').innerHTML=args[4];
- document.getElementById('num_count1').innerHTML=args[5];
- document.getElementById('num_count2').innerHTML=args[6];
- document.getElementById('num_count3').innerHTML=args[7];
- document.getElementById('num_count4').innerHTML=args[8];
- }
- })
- }
- setInterval("num_count()",1000);
- </script>
-
- </body>
- </html>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
|