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.
1654 lines
40 KiB
1654 lines
40 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="${ctx}/hbcyjc/resourceNew/css/cjy_style.css" />
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resourceNew/css/cjy_style2.css" />
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resourceNew/css/cjy_zlmxg.css" />
|
|
|
|
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts-liquidfill.js"></script>
|
|
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/china.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/world.js"></script>
|
|
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/hikvision_cll/allregion.js"></script>
|
|
|
|
<script src="${ctx}/js/layer/layer.js"></script>
|
|
<%@ include file="/common/theme_css.jsp" %>
|
|
|
|
<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>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
var sysName = "历史车流量";
|
|
$("#sysName").html(sysName);
|
|
|
|
$("#bottom_menu").css('display', 'none');
|
|
$("#current_page").css('display', 'none');
|
|
});
|
|
</script>
|
|
|
|
<body class="">
|
|
<div class="xingk_nr"></div>
|
|
<%@include file="/common/menu.jsp" %>
|
|
</div>
|
|
|
|
<div class="gy_sx">
|
|
<a class="bttn_tssx"><span class="bttn_sxdh"></span></a>
|
|
<div class="sx_nr">
|
|
<a href="javascript:changedate('DAY')" name="datefx" id="a_DAY" class="xsflx active">按日分析</a>
|
|
<a href="javascript:changedate('MONTH')" name="datefx" id="a_MONTH" class="xsflx">按月分析</a>
|
|
<a href="javascript:changedate('YEAR')" name="datefx" id="a_YEAR" class="xsflx">按年分析</a>
|
|
|
|
<div class="sx_form sx_form2">
|
|
<div class="form_input2" id="tDAY" style="display: none;"><input id="openingTimeDAY" name="OpeningTime"></div>
|
|
<div class="form_input2" id="tMONTH" style="display: none;"><input id="openingTimeMONTH" name="OpeningTime"></div>
|
|
<div class="form_input2" id="tYEAR" style="display: none;"><input id="openingTimeYEAR" name="OpeningTime"></div>
|
|
|
|
<input type="hidden" id="dtype" name="dtype"/>
|
|
<input type="hidden" id="ddate" name="ddate"/>
|
|
<%-- <input type="hidden" id="areacode" name="areacode" value="<%=areacode %>"/> --%>
|
|
<%-- <input type="hidden" id="earecode" name="earecode" value="<%=earecodets%>"/> --%>
|
|
|
|
<div id="dept_sheng" class="form_select" style="width:150px;">
|
|
<select class="form-control " id = "videoRegionS" name = "videoRegionS" onchange="getSelectSysRegion()">
|
|
</select>
|
|
</div>
|
|
<div id="dept_shi" class="form_select" style="width:150px;">
|
|
<select class="form-control " id = "videoRegionShi" name = "videoRegionShi" onchange="getSelectSysRegion('videoRegion')" >
|
|
</select>
|
|
</div>
|
|
<!-- <div id="dept_xian" class="form_select" style="width:150px;"> -->
|
|
<!-- <select class="form-control " style="color:#ccc" id = "videoRegion" name = "videoRegion" onchange="setareacode()"> -->
|
|
<!-- </select> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
|
|
<!--左上角和右下角图片 ┗ ┓-->
|
|
<span class="jb-leftx">
|
|
<img src="../resourceNew/images/jb2-leftx.png" />
|
|
</span>
|
|
<span class="jb-rights">
|
|
<img src="../resourceNew/images/jb2-rights.png" />
|
|
</span>
|
|
<!--左上角和右下角图片 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="che_caid">
|
|
<a class="bttn_caid"><span class="bttn_sxdh"></span></a>
|
|
<div class="caid_nr" style="width:140px;" id = "leftlowermenu">
|
|
<a href="${ctx}/hbcyjc/hikvision_cll/ssjc.jsp" class="caid_xiang ">车流量实时监测</a>
|
|
<a href="${ctx}/hbcyjc/hikvision_cll/lssj.jsp" class="caid_xiang active">车流量分析</a>
|
|
<a href="${ctx}/equipmentguanli/equipments.do" class="caid_xiang">设备管理</a>
|
|
<span class="jb-lefts">
|
|
<img src="../resourceNew/images/jb-lefts.png" />
|
|
</span>
|
|
<span class="jb-leftx">
|
|
<img src="../resourceNew/images/jb-leftx.png" />
|
|
</span>
|
|
<span class="jb-rights">
|
|
<img src="../resourceNew/images/jb-rights.png" />
|
|
</span>
|
|
<span class="jb-rightx">
|
|
<img src="../resourceNew/images/jb-rightx.png" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cllfx_cotent">
|
|
|
|
<div class="cllfx_lxfx">
|
|
<h2 class="che_fx_lxfxbt">车辆类型分析</h2>
|
|
<div class="che_fx_lxfxsj" id="tdcar-type-div" style="min-height: 267px;">
|
|
<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>
|
|
<div id="tdcar-region-div">
|
|
<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>
|
|
|
|
|
|
<div class="cllfx_dtzs">
|
|
<h2 class="cllfx_dtbt">来源地分析（全国）</h2>
|
|
<div class="" >
|
|
<div id = "chinamap" style="width:715px;height: 538px"></div>
|
|
|
|
<!-- <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" id = "rmcyd">
|
|
|
|
</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 " id="rmxltop5"></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; width:98%;height:230px" id = "cllqsfbzxt">
|
|
<!-- <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>
|
|
|
|
<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" id="mainbanner_list3">
|
|
<li><a href="javascript:void(0);"></a></li>
|
|
<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 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>
|
|
|
|
|
|
<!-- 历史数据js -->
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/hikvision_cll/lssjjs.js"></script>
|
|
<script type="text/javascript" src="${ctx }/js/dateutil.js"></script>
|
|
<script>
|
|
var earecode = "0101";
|
|
var daymonthyear = "DAY"; //当前选择分类（年月日）--选择后在lssjjs.js中控制
|
|
init();
|
|
//初始化
|
|
function init() {
|
|
changedate('DAY');
|
|
Selectionxzqh();//三級联动
|
|
}
|
|
|
|
|
|
|
|
function chaxun(){
|
|
getrmxltopwu(); //热门线路top5
|
|
getcllfbecharts(); //车流量趋势分布
|
|
getrmkydnyr(); //热门车源地
|
|
ajaxKllMap(); //显示中国地图迁徙图
|
|
}
|
|
|
|
//热门线路top5
|
|
function getrmxltopwu() {
|
|
var choosedate = "";
|
|
var year = "";
|
|
var month = "";
|
|
var day = "";
|
|
var timeType = '1';
|
|
if(daymonthyear == "DAY"){
|
|
// choosedate = $("#openingTimeDAY").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
day = datasz[2];
|
|
timeType ="1";
|
|
}else if(daymonthyear == "MONTH"){
|
|
// choosedate = $("#openingTimeMONTH").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
timeType ="2";
|
|
}else if(daymonthyear == "YEAR"){
|
|
// choosedate = $("#openingTimeYEAR").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
year = choosedate;
|
|
timeType ="3";
|
|
}
|
|
|
|
$.ajax({
|
|
url : '${ctx}/tdcarroutine/getrmxltopwu.do',
|
|
data : {
|
|
year : year,
|
|
month : month,
|
|
day : day,
|
|
timeType : timeType
|
|
},
|
|
type : 'post',
|
|
dataType : 'json',
|
|
async : false,
|
|
success : function(data) {
|
|
var optwuhtml = "<ul class=\"kydph\">";
|
|
var xh = 0;
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (!data[i].routinenum){
|
|
continue;
|
|
}
|
|
xh = i+1;
|
|
var cdhtml = "";
|
|
var xuhaoclass = "";
|
|
if (i == 0) {
|
|
var widthclass = pdwidthcd(i, data, 'routinenum', 500);
|
|
cdhtml = "<span class=\"jb_huang " + widthclass + "\"></span>";
|
|
xuhaoclass = "huang";
|
|
} else if (i == 1) {
|
|
var widthclass = pdwidthcd(i, data, 'routinenum', 500);
|
|
cdhtml = "<span class=\"jb_lv " + widthclass + "\"></span>";
|
|
xuhaoclass = "lv";
|
|
} else if (i == 2) {
|
|
var widthclass = pdwidthcd(i, data, 'routinenum', 500);
|
|
cdhtml = "<span class=\"jb_zi " + widthclass + "\"></span>";
|
|
xuhaoclass = "zi";
|
|
} else if (i == 3) {
|
|
var widthclass = pdwidthcd(i, data, 'routinenum', 500);
|
|
cdhtml = "<span class=\" " + widthclass + "\"></span>";
|
|
} else if (i == 4) {
|
|
var widthclass = pdwidthcd(i, data, 'routinenum', 500);
|
|
cdhtml = "<span class=\"" + widthclass + "\"></span>";
|
|
}
|
|
|
|
|
|
optwuhtml += "<li>" +
|
|
"<div class=\"kyd_jgjl\">" +
|
|
"<p class=\"csmc\">" +
|
|
"<span class=\"" + xuhaoclass + "\">0" + xh + "</span>" + data[i].routinename +
|
|
"</p>" +
|
|
"<p class=\"csrs\">" + data[i].routinenum + "</p>" +
|
|
"<p class=\"jtt\">" +
|
|
cdhtml +
|
|
"</p>" +
|
|
"</div>" +
|
|
"</li>";
|
|
}
|
|
optwuhtml += "</ul>";
|
|
|
|
$("#rmxltop5").html(optwuhtml);
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
//车流量趋势分布
|
|
function getcllfbecharts() {
|
|
|
|
var year = "";
|
|
var month = "";
|
|
var day = "";
|
|
var timeType = '1';
|
|
if(daymonthyear == "DAY"){
|
|
// choosedate = $("#openingTimeDAY").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
day = datasz[2];
|
|
timeType ="1";
|
|
}else if(daymonthyear == "MONTH"){
|
|
// choosedate = $("#openingTimeMONTH").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
timeType ="2";
|
|
}else if(daymonthyear == "YEAR"){
|
|
// choosedate = $("#openingTimeYEAR").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
year = choosedate;
|
|
timeType ="3";
|
|
}
|
|
|
|
var dtype = $("#dtype").val();
|
|
var xzzb = []; //x轴
|
|
var url = "";
|
|
var tlsz = []; //图例
|
|
var yzdqname = "";
|
|
var yzqytname = "";
|
|
var yzsztqname = "";
|
|
if(dtype == "DAY"){
|
|
url = "${ctx}/tdcardevicehourresult/getricllqsfbjdb.do";
|
|
xzzb = ['01时','02时','03时','04时','05时','06时','07时','08时','09时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时','00时'];
|
|
tlsz = ['今日','昨天','上周同期'];
|
|
yzdqname = "今日";
|
|
yzqytname ="昨天";
|
|
yzsztqname="上周同期";
|
|
}else if(dtype == "MONTH"){
|
|
url = "${ctx}/tdcardevicehourresult/getyuecllqsfbjdb.do";
|
|
xzzb = ['01日','02日','03日','04日','05日','06日','07日','08日','09日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日','31日'];
|
|
tlsz = ['本月','上月','去年同期'];
|
|
yzdqname = "本月";
|
|
yzqytname ="上月";
|
|
yzsztqname="去年同期";
|
|
}else if(dtype == "YEAR"){
|
|
url = "${ctx}/tdcardevicehourresult/getniancllqsfbjdb.do";
|
|
xzzb = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
|
tlsz = ['今年','去年'];
|
|
yzdqname = "今年";
|
|
yzqytname ="去年";
|
|
}
|
|
|
|
$.ajax({
|
|
url : url,
|
|
data : {
|
|
year : year,
|
|
month : month,
|
|
day : day,
|
|
timeType : timeType
|
|
},
|
|
type : 'post',
|
|
dataType : 'json',
|
|
async : false,
|
|
success : function(data) {
|
|
var dq = data.dq;
|
|
var qyt = data.qyt;
|
|
var sztq = data.sztq;
|
|
cllqsfbszcz(xzzb,dq,qyt,sztq,tlsz,yzdqname,yzqytname,yzsztqname);
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
//车流量趋势分布数值操作
|
|
function cllqsfbszcz(xzzb,dq,qyt,sztq,tlsz,yzdqname,yzqytname,yzsztqname){
|
|
var dqdatasz = [];
|
|
var qytsz = [];
|
|
var sztqsz = [];
|
|
|
|
var dqMap = {};
|
|
var qytMap = {};
|
|
var sztqMap = {};
|
|
|
|
for(var i= 0;i<dq.length;i++){
|
|
dqMap[dq[i]['dysj']] = dq[i].vehiclenum;
|
|
}
|
|
|
|
for(var i= 0;i<qyt.length;i++){
|
|
qytMap[qyt[i]['dysj']] = qyt[i].vehiclenum;
|
|
}
|
|
|
|
for(var i= 0;i<sztq.length;i++){
|
|
sztqMap[sztq[i]['dysj']] = sztq[i].vehiclenum;
|
|
}
|
|
|
|
for(var i=0;i<xzzb.length;i++){
|
|
dqdatasz.push(dqMap[xzzb[i]+''] || 0);
|
|
qytsz.push(qytMap[xzzb[i]+''] || 0);
|
|
sztqsz.push(sztqMap[xzzb[i]+''] || 0);
|
|
}
|
|
if(daymonthyear == "YEAR"){
|
|
cllfbnianecharts(xzzb,dqdatasz,qytsz,sztqsz,tlsz,yzdqname,yzqytname)
|
|
}else{
|
|
cllfbecharts(xzzb,dqdatasz,qytsz,sztqsz,tlsz,yzdqname,yzqytname,yzsztqname);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//车流量趋势分布 echarts--月，日
|
|
function cllfbecharts(xzzb,dqdatasz,qytsz,sztqsz,tlsz,yzdqname,yzqytname,yzsztqname) {
|
|
var charts = document.getElementById('cllqsfbzxt');
|
|
var myChart = echarts.init(charts);
|
|
|
|
option = {
|
|
backgroundColor : '#060e37',
|
|
tooltip : {
|
|
trigger : 'axis',
|
|
axisPointer : {
|
|
lineStyle : {
|
|
color : '#57617B'
|
|
}
|
|
}
|
|
},
|
|
legend : {
|
|
icon : 'rect',
|
|
itemWidth : 14,
|
|
itemHeight : 5,
|
|
itemGap : 13,
|
|
data : tlsz,
|
|
right : '4%',
|
|
textStyle : {
|
|
fontSize : 12,
|
|
color : '#ccc'
|
|
}
|
|
},
|
|
grid : {
|
|
left : '2%',
|
|
right : '5%',
|
|
bottom : '5%',
|
|
top : "20%",
|
|
containLabel : true
|
|
},
|
|
xAxis : [ {
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
axisLine : {
|
|
lineStyle : {
|
|
color : '#DDD'
|
|
}
|
|
},
|
|
data : xzzb
|
|
}
|
|
|
|
|
|
],
|
|
yAxis : [ {
|
|
type : 'value',
|
|
name : '单位:车次',
|
|
axisTick : {
|
|
show : false
|
|
},
|
|
axisLine : {
|
|
lineStyle : {
|
|
color : '#DDD'
|
|
}
|
|
},
|
|
axisLabel : {
|
|
margin : 5,
|
|
textStyle : {
|
|
fontSize : 14
|
|
}
|
|
},
|
|
splitLine : {
|
|
lineStyle : {
|
|
type : 'dashed',
|
|
color : '#DDD'
|
|
}
|
|
}
|
|
}
|
|
|
|
],
|
|
series : [ {
|
|
name : yzdqname,
|
|
type : 'line',
|
|
smooth : true,
|
|
symbol : 'circle',
|
|
symbolSize : 5,
|
|
showSymbol : false,
|
|
lineStyle : {
|
|
normal : {
|
|
width : 3
|
|
}
|
|
},
|
|
areaStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(16,97,204, 0.3)'
|
|
}, {
|
|
offset : 0.8,
|
|
color : 'rgba(17,235,210, 0)'
|
|
} ], false),
|
|
shadowColor : 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur : 10
|
|
}
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(16,97,204,1)'
|
|
}, {
|
|
offset : 1,
|
|
color : 'rgba(17,235,210,1)'
|
|
} ])
|
|
},
|
|
emphasis : {
|
|
color : 'rgb(0,196,132)',
|
|
borderColor : 'rgba(0,196,132,0.2)',
|
|
extraCssText : 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
|
|
borderWidth : 10,
|
|
},
|
|
},
|
|
data : dqdatasz
|
|
}, {
|
|
name : yzqytname,
|
|
type : 'line',
|
|
smooth : true,
|
|
symbol : 'circle',
|
|
symbolSize : 5,
|
|
showSymbol : false,
|
|
lineStyle : {
|
|
normal : {
|
|
width : 3
|
|
}
|
|
},
|
|
areaStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,52,42, 0.5)'
|
|
}, {
|
|
offset : 0.8,
|
|
color : 'rgba(235,235,21, 0)'
|
|
} ], false),
|
|
shadowColor : 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur : 10
|
|
},
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,52,42,1)'
|
|
}, {
|
|
offset : 1,
|
|
color : 'rgba(235,235,21,1)'
|
|
} ])
|
|
},
|
|
emphasis : {
|
|
color : 'rgb(99,250,235)',
|
|
borderColor : 'rgba(99,250,235,0.2)',
|
|
extraCssText : 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
|
|
borderWidth : 10
|
|
}
|
|
},
|
|
data : qytsz
|
|
},
|
|
|
|
{
|
|
name : yzsztqname,
|
|
type : 'line',
|
|
smooth : true,
|
|
symbol : 'circle',
|
|
symbolSize : 5,
|
|
showSymbol : false,
|
|
lineStyle : {
|
|
normal : {
|
|
width : 3
|
|
}
|
|
},
|
|
areaStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,52,42, 0.5)'
|
|
}, {
|
|
offset : 0.8,
|
|
color : 'rgba(235,235,21, 0)'
|
|
} ], false),
|
|
shadowColor : 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur : 10
|
|
},
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,265,42,1)'
|
|
}, {
|
|
offset : 1,
|
|
color : 'rgba(235,215,21,1)'
|
|
} ])
|
|
},
|
|
emphasis : {
|
|
color : 'rgb(99,250,235)',
|
|
borderColor : 'rgba(99,250,235,0.2)',
|
|
extraCssText : 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
|
|
borderWidth : 10
|
|
}
|
|
},
|
|
data : sztqsz
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
|
|
|
|
//车流量趋势分布 echarts--年
|
|
function cllfbnianecharts(xzzb,dqdatasz,qytsz,sztqsz,tlsz,yzdqname,yzqytname) {
|
|
var charts = document.getElementById('cllqsfbzxt');
|
|
echarts.dispose(charts); //解决同一个div，不同echarts数据叠加问题//官方解释--销毁实例，实例销毁后无法再被使用
|
|
var myChart = echarts.init(charts);
|
|
|
|
option = {
|
|
backgroundColor : '#060e37',
|
|
tooltip : {
|
|
trigger : 'axis',
|
|
axisPointer : {
|
|
lineStyle : {
|
|
color : '#57617B'
|
|
}
|
|
}
|
|
},
|
|
legend : {
|
|
icon : 'rect',
|
|
itemWidth : 14,
|
|
itemHeight : 5,
|
|
itemGap : 13,
|
|
data : tlsz,
|
|
right : '4%',
|
|
textStyle : {
|
|
fontSize : 12,
|
|
color : '#ccc'
|
|
}
|
|
},
|
|
grid : {
|
|
left : '2%',
|
|
right : '5%',
|
|
bottom : '5%',
|
|
top : "20%",
|
|
containLabel : true
|
|
},
|
|
xAxis : [ {
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
axisLine : {
|
|
lineStyle : {
|
|
color : '#DDD'
|
|
}
|
|
},
|
|
data : xzzb
|
|
}
|
|
|
|
|
|
],
|
|
yAxis : [ {
|
|
type : 'value',
|
|
name : '单位:车次',
|
|
axisTick : {
|
|
show : false
|
|
},
|
|
axisLine : {
|
|
lineStyle : {
|
|
color : '#DDD'
|
|
}
|
|
},
|
|
axisLabel : {
|
|
margin : 5,
|
|
textStyle : {
|
|
fontSize : 14
|
|
}
|
|
},
|
|
splitLine : {
|
|
lineStyle : {
|
|
type : 'dashed',
|
|
color : '#DDD'
|
|
}
|
|
}
|
|
}
|
|
|
|
],
|
|
series : [ {
|
|
name : yzdqname,
|
|
type : 'line',
|
|
smooth : true,
|
|
symbol : 'circle',
|
|
symbolSize : 5,
|
|
showSymbol : false,
|
|
lineStyle : {
|
|
normal : {
|
|
width : 3
|
|
}
|
|
},
|
|
areaStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(16,97,204, 0.3)'
|
|
}, {
|
|
offset : 0.8,
|
|
color : 'rgba(17,235,210, 0)'
|
|
} ], false),
|
|
shadowColor : 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur : 10
|
|
}
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(16,97,204,1)'
|
|
}, {
|
|
offset : 1,
|
|
color : 'rgba(17,235,210,1)'
|
|
} ])
|
|
},
|
|
emphasis : {
|
|
color : 'rgb(0,196,132)',
|
|
borderColor : 'rgba(0,196,132,0.2)',
|
|
extraCssText : 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
|
|
borderWidth : 10,
|
|
},
|
|
},
|
|
data : dqdatasz
|
|
}, {
|
|
name : yzqytname,
|
|
type : 'line',
|
|
smooth : true,
|
|
symbol : 'circle',
|
|
symbolSize : 5,
|
|
showSymbol : false,
|
|
lineStyle : {
|
|
normal : {
|
|
width : 3
|
|
}
|
|
},
|
|
areaStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,52,42, 0.5)'
|
|
}, {
|
|
offset : 0.8,
|
|
color : 'rgba(235,235,21, 0)'
|
|
} ], false),
|
|
shadowColor : 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur : 10
|
|
},
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color : new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {
|
|
offset : 0,
|
|
color : 'rgba(205,52,42,1)'
|
|
}, {
|
|
offset : 1,
|
|
color : 'rgba(235,235,21,1)'
|
|
} ])
|
|
},
|
|
emphasis : {
|
|
color : 'rgb(99,250,235)',
|
|
borderColor : 'rgba(99,250,235,0.2)',
|
|
extraCssText : 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
|
|
borderWidth : 10
|
|
}
|
|
},
|
|
data : qytsz
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
|
|
//热门车源地
|
|
function getrmkydnyr(){
|
|
var url = "${ctx}/tdcardevicehourresult/getrmcyd.do";
|
|
var year = "";
|
|
var month = "";
|
|
var day = "";
|
|
var seltype = "";
|
|
if(daymonthyear == "DAY"){
|
|
// choosedate = $("#openingTimeDAY").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
day = datasz[2];
|
|
seltype = '1';
|
|
}else if(daymonthyear == "MONTH"){
|
|
// choosedate = $("#openingTimeMONTH").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
var datasz = choosedate.split("-");
|
|
year = datasz[0];
|
|
month = datasz[1];
|
|
seltype = '2';
|
|
}else if(daymonthyear == "YEAR"){
|
|
// choosedate = $("#openingTimeYEAR").val();
|
|
choosedate = document.getElementById("ddate").value;
|
|
year = choosedate;
|
|
seltype = '3';
|
|
}
|
|
|
|
$.ajax({
|
|
url : url,
|
|
data : {year : year,month : month,day : day,seltype : seltype},
|
|
type : 'post',
|
|
dataType : 'json',
|
|
async : false,
|
|
success : function(data) {
|
|
var rmcydhtml = "<ul class=\"kydph\">";
|
|
var xh = 0;
|
|
for(var i = 0;i<data.length;i++){
|
|
var cydname = data[i].vehicleregion; //车源地
|
|
var carnum = data[i].vehicleregionnum; //汽车数量
|
|
var bhys = ""; //编号颜色
|
|
var jdtys = ""; //进度条颜色
|
|
xh = i+1;
|
|
if(i ==0){//设置编号颜色和进度条颜色
|
|
bhys = "huang";
|
|
jdtys = "jb_huang";
|
|
}else if(i ==1){
|
|
bhys = "lv";
|
|
jdtys = "jb_lv";
|
|
}else if(i ==2){
|
|
bhys = "zi";
|
|
jdtys = "jb_zi";
|
|
}
|
|
|
|
// var cityname = REGION_NAME[cydname];
|
|
// if(cityname == ""||cityname=="null"||cityname==undefined||cityname=="undefined"){
|
|
// cityname="石家庄";
|
|
// }
|
|
|
|
var regionName = REGION_NAME[cydname];
|
|
if (!regionName){
|
|
regionName = cydname;
|
|
}
|
|
rmcydhtml += "<li>"+
|
|
"<div class=\"kyd_jgjl\">"+
|
|
"<p class=\"csmc\">"+
|
|
"<span class=\""+bhys+"\">"+xh+"</span>"+ regionName+
|
|
"</p>"+
|
|
"<p class=\"csrs\">"+carnum+"</p>"+
|
|
"<p class=\"jtt\">"+
|
|
"<span class=\""+jdtys+" "+pdwidthcd(i,data,'vehicleregionnum',700)+"\"></span>"+
|
|
"</p>"+
|
|
"</div>"+
|
|
"</li>";
|
|
}
|
|
|
|
$("#rmcyd").html(rmcydhtml);
|
|
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//判断柱状颜色
|
|
//i 循环中的增量值，data,被循环的数组，keyvalue key值， zs，自己设定的总数
|
|
function pdwidthcd(i, data, keyvalue, zs) {
|
|
var valudata = data[i][keyvalue];
|
|
var zs = parseInt(valudata * 100 / zs);
|
|
if (valudata == 0 || zs == 0) {
|
|
return "width1";
|
|
} else {
|
|
if (zs > 0 && zs <= 10) {
|
|
zs = 10;
|
|
} else if (zs > 10 && zs <= 20) {
|
|
zs = 20;
|
|
} else if (zs > 20 && zs <= 30) {
|
|
zs = 30;
|
|
} else if (zs > 30 && zs <= 40) {
|
|
zs = 40;
|
|
} else if (zs > 40 && zs <= 50) {
|
|
zs = 50;
|
|
} else if (zs > 50 && zs <= 60) {
|
|
zs = 60;
|
|
} else if (zs > 60 && zs <= 70) {
|
|
zs = 70;
|
|
} else if (zs > 70 && zs <= 80) {
|
|
zs = 80;
|
|
} else if (zs > 80 && zs <= 90) {
|
|
zs = 90;
|
|
} else if (zs > 90 && zs <= 100) {
|
|
zs = 100;
|
|
}
|
|
return "width" + zs;
|
|
}
|
|
}
|
|
|
|
getLeftlowermenu();
|
|
//获得左下角菜单
|
|
//加个id--leftlowermenu
|
|
function getLeftlowermenu(){
|
|
var dicnum = '010902'; //测试，需要换成自己当前菜单dicnum --> sys_menu_item_dictionary
|
|
$.ajax({
|
|
url : "${ctx}/hbcyjclogin/getzccd.do",
|
|
data : {"dicnum" : dicnum},
|
|
type : "post",
|
|
dataType : "json",
|
|
success : function(data) {
|
|
var leftlowerhtml = "";
|
|
if(data.success){
|
|
var zcdlist = data.data;
|
|
for(var i = 0;i<zcdlist.length;i++){
|
|
var menuurl = zcdlist[i].menuurl; //配置的链接
|
|
var dicname = zcdlist[i].dicname; //名称
|
|
if(dicnum == zcdlist[i].dicnum){
|
|
leftlowerhtml +="<a href=\""+menuurl+"\" class=\"caid_xiang active\">"+dicname+"</a>";
|
|
}else{
|
|
leftlowerhtml +="<a href=\""+menuurl+"\" class=\"caid_xiang\">"+dicname+"</a>";
|
|
}
|
|
}
|
|
}
|
|
|
|
leftlowerhtml += "<span class=\"jb-lefts\"></span>"+
|
|
"<span class=\"jb-leftx\"></span>"+
|
|
"<span class=\"jb-rights\"></span>"+
|
|
"<span class=\"jb-rightx\"></span>";
|
|
|
|
$("#leftlowermenu").html(leftlowerhtml);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|