| New file |
| | |
|---|
| | | <!doctype html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title>朔黄铁路大数据分析平台</title> |
|---|
| | | <!--设置是否为缩放模式 --> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1"> |
|---|
| | | <!-- 新 Bootstrap 核心 CSS 文件 --> |
|---|
| | | <link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> |
|---|
| | | <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> |
|---|
| | | <script src="js/jquery.min.js"></script> |
|---|
| | | <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> |
|---|
| | | <script src="js/bootstrap.min.js"></script> |
|---|
| | | <!--echarts JS--> |
|---|
| | | <script src="js/echarts.min.js"></script> |
|---|
| | | <!-- 轮播swiper文件 --> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> |
|---|
| | | <script src="js/swiper.min.js"></script> |
|---|
| | | <!--界面样式--> |
|---|
| | | <script src="js/visual.js"></script> |
|---|
| | | <script src="js/china.js"></script> |
|---|
| | | <script src="js/chartMap.js"></script> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/visual.css"> |
|---|
| | | |
|---|
| | | </head> |
|---|
| | | <body class="ksh"> |
|---|
| | | <div id="load"> |
|---|
| | | <div class="load_img"><!-- 加载动画 --> |
|---|
| | | <img class="jzxz1" src="images/jzxz1.png"> |
|---|
| | | <img class="jzxz2" src="images/jzxz2.png"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="head_top"><span>朔黄铁路大数据分析</span></div> |
|---|
| | | <div class="visual"> |
|---|
| | | <div class="visual_left"> |
|---|
| | | <div class="visual_box"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>隐患事件统计</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | <div class="visual_chart" id="main1"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_box"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>隐患事件趋势</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | <div class="visual_chart" id="main2"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_box"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>单位违规情况统计</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | <div class="visual_chart sfzcll"> |
|---|
| | | <a>单位</a> |
|---|
| | | <a>违规率</a> |
|---|
| | | <a>违规量</a> |
|---|
| | | <div class="sfzcll_pos_box"> |
|---|
| | | <div class="sfzcll_box"> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <label>中铁一局</label> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygl"> |
|---|
| | | <span>4%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygh"> |
|---|
| | | <span>5</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | <div class="sfzcll_box"> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <label>中铁二局</label> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygl"> |
|---|
| | | <span>5.3%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygh"> |
|---|
| | | <span>7</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | <div class="sfzcll_box"> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <img class="sfzcll_bkJk" src=""> |
|---|
| | | <label>中铁三局</label> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygl"> |
|---|
| | | <span>6%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="sfzcll_smallBk"> |
|---|
| | | <div class="ygh"> |
|---|
| | | <span>2</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_con"> |
|---|
| | | <div class="visual_conTop"> |
|---|
| | | <div class="visual_conTop_box visual_conTop1"> |
|---|
| | | <div> |
|---|
| | | <h3>当前隐患数量</h3> |
|---|
| | | <p>34 </p> |
|---|
| | | <div class="conTop_smil"> |
|---|
| | | <a class="sz">周同比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | <a class="xd">日环比:<span>+2%</span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_conTop_box visual_conTop2"> |
|---|
| | | <div> |
|---|
| | | <h3>本周分析车次量</h3> |
|---|
| | | <p>735 </p> |
|---|
| | | <div class="conTop_smil"> |
|---|
| | | <a class=""></a> |
|---|
| | | <a class="">平均车速<span>105</span>KM/H</i></a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_conTop_box visual_conTop1"> |
|---|
| | | <div> |
|---|
| | | <h3>转储总量</h3> |
|---|
| | | <p>1025</p> |
|---|
| | | <div class="conTop_smil"> |
|---|
| | | <a class="sz"><span></span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | <a class="xd">转换率<span>100%</span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_conTop_box visual_conTop2"> |
|---|
| | | <div> |
|---|
| | | <h3>任务完成比例</h3> |
|---|
| | | <p>99%</p> |
|---|
| | | <div class="conTop_smil"> |
|---|
| | | <a class="sz">周同比:<span>+5%</span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | <a class="xd">月环比:<span>+2%</span><i class="fa fa-long-arrow-up"></i></a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_conBot"> |
|---|
| | | <img class="visual_conBot_l" src="images/ksh42.png"> |
|---|
| | | <img class="visual_conBot_2" src="images/ksh43.png"> |
|---|
| | | <img class="visual_conBot_3" src="images/ksh44.png"> |
|---|
| | | <img class="visual_conBot_4" src="images/ksh45.png"> |
|---|
| | | <div class="visual_chart_text"> |
|---|
| | | <h1></h1> |
|---|
| | | <h2>朔黄铁路大数据分析平台</h2> |
|---|
| | | </div> |
|---|
| | | <div class="visual_chart" id="main8"></div> |
|---|
| | | <div class="visual_conBot_bot"> |
|---|
| | | <div class="visualSssf_left"> |
|---|
| | | <h3>今日实时隐患</h3> |
|---|
| | | <a style="display:block">重点地段</a> |
|---|
| | | <a>进站</a> |
|---|
| | | <a>出站</a> |
|---|
| | | <a>岔道</a> |
|---|
| | | <a>信号灯</a> |
|---|
| | | <a>过分相</a> |
|---|
| | | </div> |
|---|
| | | <div class="visualSssf_right"> |
|---|
| | | <div class="visualSssf_right_box" id="main5"></div> |
|---|
| | | <div class="visualSssf_right_box" id="main6"></div> |
|---|
| | | <div class="visualSssf_right_box" id="main7"></div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_right"> |
|---|
| | | <div class="visual_box"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>本月隐患统计</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | <div class="swiper-container visual_swiper1 visual_chart"> |
|---|
| | | <div class="swiper-wrapper"> |
|---|
| | | <div class="swiper-slide" id="main3"></div> |
|---|
| | | <div class="swiper-slide" id="main31"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_box visualSfzsfl"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>乘务员违规统计</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="visual_table"> |
|---|
| | | <table> |
|---|
| | | <tr> |
|---|
| | | <td>排名</td> |
|---|
| | | <td>姓名</td> |
|---|
| | | <td>违规次数</td> |
|---|
| | | <td>周涨幅</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>1</td> |
|---|
| | | <td>李焕英</td> |
|---|
| | | <td>323</td> |
|---|
| | | <td>12%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>2</td> |
|---|
| | | <td>沈晓腾</td> |
|---|
| | | <td>266</td> |
|---|
| | | <td>67%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>3</td> |
|---|
| | | <td>贾晓玲</td> |
|---|
| | | <td>232</td> |
|---|
| | | <td>9%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>4</td> |
|---|
| | | <td>郑佳琪</td> |
|---|
| | | <td>198</td> |
|---|
| | | <td>4%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>5</td> |
|---|
| | | <td>王天一</td> |
|---|
| | | <td>123</td> |
|---|
| | | <td>12%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>6</td> |
|---|
| | | <td>李红</td> |
|---|
| | | <td>106</td> |
|---|
| | | <td>67%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>7</td> |
|---|
| | | <td>姬如雪</td> |
|---|
| | | <td>93</td> |
|---|
| | | <td>9%</td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>8</td> |
|---|
| | | <td>王浩天</td> |
|---|
| | | <td>90</td> |
|---|
| | | <td>4%</td> |
|---|
| | | </tr> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="visual_box"> |
|---|
| | | <div class="visual_title"> |
|---|
| | | <span>重点地段违规排行</span> |
|---|
| | | <img src="images/ksh33.png"> |
|---|
| | | </div> |
|---|
| | | <div class="swiper-container visual_swiper2 visual_chart"> |
|---|
| | | <div class="swiper-wrapper"> |
|---|
| | | <div class="swiper-slide" id="main4"></div> |
|---|
| | | <div class="swiper-slide" id="main41"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="clear"></div> |
|---|
| | | </div> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | $(function(){ |
|---|
| | | var a=$('.visualSssf_left a') |
|---|
| | | for(var i=0;i<a.length;i++){ |
|---|
| | | a[i].index=i; |
|---|
| | | a[i].onclick=function(){ |
|---|
| | | for(var i=0;i<a.length;i++){ |
|---|
| | | a[i].className='' |
|---|
| | | } |
|---|
| | | this.className='active' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | var sfzcllH=$('.sfzcll_box').height() |
|---|
| | | var sfzcllHtwo=sfzcllH-2 |
|---|
| | | $('.sfzcll_box').css('line-height',sfzcllH+'px') |
|---|
| | | $('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px') |
|---|
| | | |
|---|
| | | //删除加载动画 |
|---|
| | | $('#load').fadeOut(1000) |
|---|
| | | setTimeout(function(){ |
|---|
| | | $('#load').remove() |
|---|
| | | } |
|---|
| | | ,1100); |
|---|
| | | }) |
|---|
| | | |
|---|
| | | //交通流量 |
|---|
| | | var myChart1 = echarts.init(document.getElementById('main1')); |
|---|
| | | myChart1.setOption(option1); |
|---|
| | | //交通工具流量 |
|---|
| | | var myChart2 = echarts.init(document.getElementById('main2')); |
|---|
| | | myChart2.setOption(option2); |
|---|
| | | //本月发生事件 |
|---|
| | | var myChart3 = echarts.init(document.getElementById('main3')); |
|---|
| | | myChart3.setOption(option3); |
|---|
| | | var myChart31 = echarts.init(document.getElementById('main31')); |
|---|
| | | myChart31.setOption(option31); |
|---|
| | | var mySwiper1 = new Swiper('.visual_swiper1', { |
|---|
| | | autoplay: true,//可选选项，自动滑动 |
|---|
| | | speed:800,//可选选项，滑动速度 |
|---|
| | | autoplay: { |
|---|
| | | delay: 5000,//1秒切换一次 |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | //收费站收费排行 |
|---|
| | | var myChart4 = echarts.init(document.getElementById('main4')); |
|---|
| | | myChart4.setOption(option4); |
|---|
| | | var myChart41 = echarts.init(document.getElementById('main41')); |
|---|
| | | myChart41.setOption(option41); |
|---|
| | | var mySwiper2 = new Swiper('.visual_swiper2', { |
|---|
| | | autoplay: true,//可选选项，自动滑动 |
|---|
| | | direction : 'vertical',//可选选项，滑动方向 |
|---|
| | | speed:2000,//可选选项，滑动速度 |
|---|
| | | }) |
|---|
| | | //今日实时收费 |
|---|
| | | var myChart5 = echarts.init(document.getElementById('main5')); |
|---|
| | | myChart5.setOption(option5); |
|---|
| | | var myChart6 = echarts.init(document.getElementById('main6')); |
|---|
| | | myChart6.setOption(option6); |
|---|
| | | var myChart7 = echarts.init(document.getElementById('main7')); |
|---|
| | | myChart7.setOption(option7); |
|---|
| | | //中间地图 |
|---|
| | | var myChart8 = echarts.init(document.getElementById('main8')); |
|---|
| | | myChart8.setOption(option8); |
|---|
| | | //收费站收费量 |
|---|
| | | var myChart9 = echarts.init(document.getElementById('main9')); |
|---|
| | | myChart9.setOption(option9); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
