张家口产业监测
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

602 lines
22 KiB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/ctx.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../resourceNew/css/cjy_style.css"/>
<link type="text/css" rel="stylesheet" href="../resourceNew/css/cjy_style2.css" />
<link type="text/css" rel="stylesheet" href="../resourceNew/css/cjy_zlmxg.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/bigdata/resource/css/cjy_style2.css" />
<!--衡水旅游大数据-->
<link type="text/css" rel="stylesheet" href="${ctx}/feature/visitorV2/css/hs_data.css"/>
<script src="${ctx}/feature/visitorV2/js/jquery.min.js"></script>
<%-- 新版首页菜单样式 --%>
<link rel="stylesheet" href="${ctx}/bigdata/resource/css/cjy_menu.css">
<title>历史车流量分析</title>
<style>
.cllfx_cotent{ position: relative; width: 100%;}
.cllfx_lxfx{ position: absolute; top: 122px; left: 30px;}
.cllfx_lxfx .che_fx_lxfxbt{ text-align:center; width:120px; margin-bottom:5px;}
.cllfx_lxfx .che_fx_lxfxbt::before{content:""; display:block; width:6px; height:6px; margin:5px auto; background:#fff; transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.cllfx_dtzs{width:716px; margin:0px auto; position: relative; right: 180px;}
.cllfx_dtzs .cllfx_dtbt{ text-align: center; font-size: 20px; margin-bottom: 10px; padding-top: 50px;}
.qyfx{ margin-top: 30px; }
.che_cllqyfb{ font-size: 16px;}
.clqyfb{ padding-top: 5px;}
.clqyfb span{ font-weight: bold;}
.box_index .box_center_s{ width: auto;}
.cllfx_rmkyd{ position: absolute; right: 30px; top: 30px;}
.cllfx_rmkyd .kydph{ padding: 0;}
.cllfx_rmkyd .kydph .kyd_jgjl{ padding-right:8px; margin-bottom:20px; margin-top:0px;position:relative;}
.cllfx_rmkyd .kydph li{ margin-top: 0;}
.cllfx_rmkyd .kydph .kyd_jgjl .csmc{ font-size:18px; color:#fff;}
.cllfx_rmkyd .kydph .kyd_jgjl .csmc span{ font-size:18px; padding-right:5px;}
.cllfx_rmkyd .kydph .kyd_jgjl .csrs{ position:absolute; top:3px; right:15px; font-size:14px;}
.cllfx_rmkyd .kydph .kyd_jgjl .jtt{ margin-top:5px;}
.box_spyy_con{ width:882px; position:relative; margin: 0px auto;}
.box_spyy_con .box_top_s{ height:19px; width:100%; background: url(../resource/img/box_top_dsc.png) no-repeat center bottom;padding-top: 48px;}
.box_spyy_con .box_center_s{width:100%;background:url(../resource/img/box_center_dsc.png) repeat-y center;}
.box_spyy_con .box_bottom_s{ height:17px; width:100%; background:url(../resource/img/box_bottom_dsc.png) no-repeat center;}
.cllfx_bottom{ position: relative; top: 30px;}
.cllfx_bottom .box_index_l{ position: absolute; left:25px; top: 0;}
.box_index_l .kydph .kyd_jgjl{ padding-right:8px; margin-bottom:16px; margin-top:0px;position:relative;}
.box_index_l .kydph li{ margin-top: 0;}
.box_index_l .kydph .kyd_jgjl .csmc{ font-size:16px; color:#fff;}
.box_index_l .kydph .kyd_jgjl .csmc span{ font-size:16px; padding-right:5px;}
.cllfx_bottom .box_index_r{ position: absolute; right:25px; top: 0;}
.box_index_r .jqk_bg{margin-right: 10px;}
.box_index_r .jqk_1{ margin-top: 0; border: 0;}
.box_index_r .jqk_1 .mcmc{ width: 6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jqk_1{ margin-top:10px; border:1px solid #032661; border-bottom:none}
.jqk_1 th{ background:#071436; height:40px; font-weight:normal; font-size:14px; border-bottom:1px solid #032661}
.jqk_1 td{ padding:10px 0; color:#fff; background:rgba(0,60,130,.1); text-align:center;border-bottom:1px solid #032661}
.mainbanner3{overflow:hidden; position:relative;height:280px;}
.mainbanner_window3{left:50%;width:445px;height:280px;overflow:hidden;margin-left:-222.5px;position:absolute;}
.mainbanner_window3 ul{width:999999px;height:270px;position:relative;}
.mainbanner_window3 li{width:445px;height:270px;text-align:center;font-size:0px;float:left;display:inline;}
.mainbanner_window3 .mainbanner_list3{left:50%;top:260px;width:50px;height:20px;margin-left:-25px;position:absolute;}
.mainbanner_list3 li{width:16px;height:10px;overflow:hidden;float:left;display:inline;}
.mainbanner_list3 a{ width:6px;height:6px;display:inline-block;background:rgba(255,255,255,0); border-radius:10px;border:1px solid #323350;}
.mainbanner_list3 li.active a{background:rgba(255,255,255,0.6);}
.mainbanner_list3 li a:hover{ border:1px solid #fff;}
</style>
<title>车流量分析</title>
</head>
<body class="">
<div class="xingk"></div>
<div class="header">
<h3 class="header_bt">历史车流量</h3>
</div>
<%-- 顶部和左边菜单 --%>
<jsp:include page="/bigdata/tmpl/menu.jsp">
<jsp:param name="leftTitle" value="历史车流量"/>
</jsp:include>
<div class="gy_sx">
<a class="bttn_tssx"><span class="bttn_sxdh"></span></a>
<div class="sx_nr">
<a href="#" class="xsflx active">按日分析</a>
<a href="#" class="xsflx">按月分析</a>
<a href="#" class="xsflx">按年分析</a>
<!--<div class="sx_form">
<div class="form_input" style="width:150px;"><input id="openingTime" name="OpeningTime" value="2019-01-20"></div>
<div class="form_select" style="width:150px;">
<select id="" name="">
<option value="">河北</option>
<option value="">石家庄</option>
<option value="">张家口</option>
<option value="">邢台</option>
</select>
</div>
</div>-->
<div class="sx_form sx_form2">
<div class="form_input2">
<input id="openingTime" name="OpeningTime" value="2019-01-20">
</div>
<div class="form_select" style="width:150px;">
<select id="" name="">
<option value="">河北</option>
<option value="">河北</option>
<option value="">河北</option>
<option value="">河北</option>
</select>
</div>
<div class="form_select" style="width:150px;">
<select id="" name="">
<option value="">石家庄市</option>
<option value="">石家庄市</option>
<option value="">石家庄市</option>
<option value="">石家庄市</option>
</select>
</div>
<div class="form_select" style="width:150px;">
<select id="" name="">
<option value="">正定县</option>
<option value="">灵寿县</option>
<option value="">正定县</option>
<option value="">正定县</option>
</select>
</div>
</div>
<span class="jb-leftx"></span>
<span class="jb-rights"></span>
</div>
</div>
<div class="cllfx_cotent">
<div class="cllfx_lxfx">
<h2 class="che_fx_lxfxbt">车辆类型分析</h2>
<div class="che_fx_lxfxsj">
<div class="che_fx_lxfxtxzs">
<div class="che_fx_lxfxtxzs"><img src="../resourceNew/images/che_lxfx_xx.png" /></div>
<div class="che_fx_lxfxsjzs"><p>小型客车<strong>25.6%</strong></p></div>
</div>
<div class="che_fx_lxfxtxzs">
<div class="che_fx_lxfxtxzs"><img src="../resourceNew/images/che_lxfx_zx.png" /></div>
<div class="che_fx_lxfxsjzs"><p>中型客车<strong>25.6%</strong></p></div>
</div>
<div class="che_fx_lxfxtxzs">
<div class="che_fx_lxfxtxzs"><img src="../resourceNew/images/che_lxfx_dx.png" /></div>
<div class="che_fx_lxfxsjzs"><p>大型客车<strong>25.6%</strong></p></div>
</div>
<div class="che_fx_lxfxtxzs">
<div class="che_fx_lxfxtxzs"><img src="../resourceNew/images/che_lxfx_qt.png" /></div>
<div class="che_fx_lxfxsjzs"><p>其他<strong>25.6%</strong></p></div>
</div>
</div>
<div class="qyfx">
<h2 class="che_cllqyfb">车流量区域分布</h2>
<p class="clqyfb">正定县:<span class="col_cheng">1342</span></p>
<p class="clqyfb">平山县:<span class="col_cheng">3211</span></p>
<p class="clqyfb">灵寿县:<span class="col_cheng">864</span></p>
</div>
</div>
<div class="cllfx_dtzs">
<h2 class="cllfx_dtbt">来源地分析(全国)</h2>
<div class="" > <img src="../resourceNew/images/img_qgdt.png" width="100%" /></div>
</div>
<div class="box_index cllfx_rmkyd">
<h3 class="box_bt">热门客源地</h3>
<div class="box_top_s"></div>
<div class="box_center_s" style=" height:540px;">
<div class="con">
<ul class="kydph">
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="huang">01</span>石家庄市</p>
<p class="csrs">2503</p>
<p class="jtt"><span class="jb_huang width80"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="lv">02</span>北京市</p>
<p class="csrs">1680</p>
<p class="jtt"><span class="jb_lv width60"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="zi">03</span>天津市</p>
<p class="csrs">1620</p>
<p class="jtt"><span class="jb_zi width50"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">04</span>保定市</p>
<p class="csrs">863</p>
<p class="jtt"><span class=" width40"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">05</span>衡水市</p>
<p class="csrs">786</p>
<p class="jtt"><span class=" width30"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">06</span>邯郸市</p>
<p class="csrs">654</p>
<p class="jtt"><span class=" width20"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">07</span>廊坊市</p>
<p class="csrs">652</p>
<p class="jtt"><span class=" width20"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">08</span>沧州市</p>
<p class="csrs">555</p>
<p class="jtt"><span class=" width20"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">09</span>唐山市</p>
<p class="csrs">521</p>
<p class="jtt"><span class=" width20"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">10</span>邢台市</p>
<p class="csrs">321</p>
<p class="jtt"><span class=" width20"></span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="box_bottom_s"></div>
</div>
<div class="clear"></div>
</div>
<div class="cllfx_bottom">
<div class="box_index box_index_l cllfx_rmkyd">
<h3 class="box_bt">热门线路TOP5</h3>
<div class="box_top_s"></div>
<div class="box_center_s" style=" height:230px;">
<div class="con ">
<ul class="kydph">
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="huang">01</span>正定 → 灵寿</p>
<p class="csrs">5369</p>
<p class="jtt"><span class="jb_huang width80"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="lv">02</span>正定 → 平山</p>
<p class="csrs">4563</p>
<p class="jtt"><span class="jb_lv width60"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="zi">03</span>平山 → 正定</p>
<p class="csrs">3256</p>
<p class="jtt"><span class="jb_zi width50"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">04</span>灵寿 → 正定</p>
<p class="csrs">2156</p>
<p class="jtt"><span class=" width40"></span></p>
</div>
</li>
<li>
<div class="kyd_jgjl">
<p class="csmc"><span class="">05</span>平山 → 灵寿</p>
<p class="csrs">1236</p>
<p class="jtt"><span class=" width30"></span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="box_bottom_s"></div>
</div>
<div class="box_spyy_con" style="width:882px; padding:0px 20px;">
<h3 class="box_bt">车流量趋势分布</h3>
<div class="box_top_s"></div>
<div class="box_center_s" style=" height:230px;">
<div class="con" style=" margin-right: 15px;">
<img src="../resource/img/img11.png" width="100%" height="200">
折线图
</div>
</div>
<div class="box_bottom_s"></div>
</div>
<div class="box_index box_index_r">
<h3 class="box_bt">卡口车流量</h3>
<div class="box_top_s"></div>
<div class="box_center_s" style=" height:230px;">
<div class="con">
<div class="jqk_bg">
<div class="mainbanner3">
<div class="mainbanner_window3">
<ul id="slideContainer3">
<li>
<table width="100%" cellpadding="0" cellspacing="0" class="jqk_1">
<tbody>
<tr>
<th>序号</th>
<th>名称</th>
<th>方向</th>
<th>车流量(车次)</th>
<th>同比</th>
<th>环比</th>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口1">滹沱河观景大道路口1</p>
</td>
<td>
<p>正定 → 平山</p>
</td>
<td>
<p>5689</p>
</td>
<td>
<p class="col_sred">10</p>
</td>
<td>
<p class="col_sgen">2</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口1">滹沱河观景大道路口1</p>
</td>
<td>
<p>正定 → 灵寿</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">13</p>
</td>
<td>
<p class="col_sgen">0.6</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口1">滹沱河观景大道路口1</p>
</td>
<td>
<p>灵寿 → 平山</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">16</p>
</td>
<td>
<p class="col_sgen">0.5</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口1">滹沱河观景大道路口1</p>
</td>
<td>
<p>平山 → 正定</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口1">滹沱河观景大道路口1</p>
</td>
<td>
<p>灵寿 → 正定</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>
<table width="100%" cellpadding="0" cellspacing="0" class="jqk_1">
<tbody>
<tr>
<th>序号</th>
<th>名称</th>
<th>方向</th>
<th>车流量(车次)</th>
<th>同比</th>
<th>环比</th>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口2">滹沱河观景大道路口2</p>
</td>
<td>
<p>正定 → 平山</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口12">滹沱河观景大道路口12</p>
</td>
<td>
<p>正定 → 灵寿</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口12">滹沱河观景大道路口12</p>
</td>
<td>
<p>正定 → 平山</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口12">滹沱河观景大道路口12</p>
</td>
<td>
<p>正定 → 平山</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
<tr>
<td>
<p>1</p>
</td>
<td>
<p class="mcmc" title="滹沱河观景大道路口12">滹沱河观景大道路口12</p>
</td>
<td>
<p>正定 → 平山</p>
</td>
<td>
<p>499</p>
</td>
<td>
<p class="col_sred">18</p>
</td>
<td>
<p class="col_sgen">0.3</p>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
<ul class="mainbanner_list3">
<li><a href="javascript:void(0);"></a></li>
<li><a href="javascript:void(0);"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="box_bottom_s"></div>
</div>
<div class="clear"></div>
</div>
<!--数字滚动-->
<script src="${ctx}/bigdata/resource/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/bigdata/resource/js/numberRun.js"></script>
<!--数据轮番-->
<script type="text/javascript" src="${ctx}/bigdata/resource/js/index.js"></script>
<!--左侧滑动菜单-->
<script src="${ctx}/bigdata/resource/js/classie.js"></script>
<!--时间选择器-->
<script type="text/javascript" src="../../js/laydate5.09/laydate.js"></script>
<script type="text/javascript">
//时间选择器
laydate.render({
elem: '#openingTime',
theme: 'datecolor'
});
</script>
<!--筛选隐藏显示-->
<script src="../resourceNew/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bttn_tssx").click(function(){
$(".sx_nr").fadeToggle();
});
});
</script>
<!--数据轮番-->
<script type="text/javascript" src="../resource/js/index.js"></script>
</body>
</html>