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.
428 lines
17 KiB
428 lines
17 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/resource/css/cjy_style.css" />
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resource/css/cjy_style2.css" />
|
|
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resource/css/cjy_style2.css" />
|
|
<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" />
|
|
<!--衡水旅游大数据-->
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/feature/visitorV2/css/hs_data.css"/>
|
|
<script src="${ctx}/feature/visitorV2/js/jquery.min.js"></script>
|
|
<script src="${ctx}/hbcyjc/resource/js/echarts/echarts.min.js"></script>
|
|
<script src="${ctx}/hbcyjc/resource/vue/vue.js"></script>
|
|
<script src="${ctx}/hbcyjc/resource/vue/axios.min.js"></script>
|
|
|
|
<script src="${ctx}/js/layer/layer.js"></script>
|
|
<%-- 新版首页菜单样式 --%>
|
|
<link rel="stylesheet" href="${ctx}/hbcyjc/resource/css/cjy_menu.css">
|
|
|
|
|
|
<%@ include file="/common/theme_css.jsp" %>
|
|
|
|
<title>车流量实时监测</title>
|
|
<style>
|
|
|
|
.che_jqjb{}
|
|
.che_jqjb .che_jbxz{ display:inline-block; padding:2px 10px; background:rgba(5,44,101,0.27); border:1px solid #022F6E; border-radius:3px; margin:2px; position:relative;}
|
|
.che_jqjb .che_jbxz:hover{color:#57FFFF;}
|
|
.che_jqjb .che_jbxz.active{ background:#05295F; border:1px solid #04397A; color:#57FFFF;}
|
|
.che_jqjb .che_jbx fore{ content:""; display:block; width:100%; height:2px; background: url(${ctx}/hbcyjc/resourceNew/images/che_angb.png) no-repeat center; position:absolute; bottom:-5px; left:0px; }
|
|
|
|
.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:293px;}
|
|
.mainbanner_window3{left:50%;top:5%;width:445px;height:293px;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:265px;width:100%;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;}
|
|
|
|
.tjsl2{ padding-top: 20px; margin-top: 0; text-align: center;}
|
|
.tjsl2 .tjbt{ font-size: 16px; padding-bottom: 10px;}
|
|
.gdsz { position: relative; padding: 0px 15px; padding-top: 9px; margin: 0px auto;}
|
|
.szgd_fgbj{ background: url(${ctx}/hbcyjc/resourceNew/img/szbj.jpg); margin: 0px 20px; padding-left: 0;}
|
|
.djdb{ padding-top:5px;}
|
|
.djdb strong{ padding:0px 5px;}
|
|
.djdb .color_huang{ padding-right:10px; color:#FFFF00;}
|
|
.djdb .color_mhong{ color:#FF0186;}
|
|
.col_sgen {color: #30DA06;}
|
|
|
|
.cll_center{ position: relative; width: 910px; height: 725px; margin-left: 3px;}
|
|
.cll_conmap{ /* background: url(${ctx}/hbcyjc/resourceNew/images/img_sjzdt.png) no-repeat center; */ width: 680px; height: 580px; position: absolute; top:110px; left: 50%; margin-left:-340px;}
|
|
.sjtj_cctj{position: absolute; bottom: 20px; left: 10px;}
|
|
.sjtj_cctj .tjsl{ display: block; margin-top: 20px;}
|
|
.chell_tianqi{ position: absolute; right: 10px; top:30px; border: 1px solid #005AB7;}
|
|
.chell_tianqi .riqi{ right: auto; left: 0; width: 96px;}
|
|
.chell_tianqi .tianqi{ position: relative;top: 0; left: 0; margin-left: 110px; width: 216px; padding-top: 0; height: 182px;}
|
|
.chell_tianqi .icon_tq{ width: 90%; margin-left: 5%;}
|
|
|
|
.chell_tianqi .wendu{ font-size: 19px;}
|
|
.chell_tianqi .wendu2{ font-size: 19px;text-align: center;color: #57FFFF;}
|
|
|
|
.chell_tianqi .riqi .rq { font-size: 50px;background-size: 100%; width: 80px;height: 90px; padding-top:0; margin: 5px auto;}
|
|
.chell_tianqi .riqi .ny{font-size: 14px; padding-top: 5px; text-align: center;}
|
|
.chell_tianqi .riqi .sj{ font-size: 14px;}
|
|
.chell_tianqi .riqi .sj{margin-top: 0;}
|
|
.cll_rmkyd .kydph{ padding: 0;}
|
|
.cll_rmkyd .kydph .kyd_jgjl{ padding-right:8px; margin-bottom:25px; margin-top:13px;position:relative;}
|
|
.cll_rmkyd .kydph li{ margin-top: 0;}
|
|
.cll_rmkyd .kydph .kyd_jgjl .csmc{ font-size:18px; color:#fff;}
|
|
.cll_rmkyd .kydph .kyd_jgjl .csmc span{ font-size:18px; padding-right:5px;}
|
|
.cll_rmkyd .kydph .kyd_jgjl .csrs{ position:absolute; top:3px; right:15px; font-size:14px;}
|
|
.cll_rmkyd .kydph .kyd_jgjl .jtt{ margin-top:5px;}
|
|
.sltj{ font-size: 14px; padding-top: 0px; margin-top: 0px;}
|
|
.sltj span{color: #FFFF00; font-weight: bold;}
|
|
|
|
.cll_dbtb{ margin-left: 25px; display: flex; margin-right: 3px; margin-top: 8px;}
|
|
.cll_dbtb .dbtb_zsk{flex: 1; }
|
|
.box_spyy_chang{background: rgba(1,0,49,0.8); box-shadow: 1px 1px 5px rgba(1,39,129,0.5); border: 1px solid #003E82; position: relative; padding: 10px 20px; margin-top:15px; margin-right:25px; margin-left:0px;}
|
|
.box_spyy_chang .jb-lefts { position: absolute;top: -1px;left: -1px;}
|
|
.box_spyy_chang .jb-leftx { position: absolute; bottom: -1px; left: -1px;}
|
|
.box_spyy_chang .jb-rights { position: absolute; top: -1px; right: -1px;}
|
|
.box_spyy_chang .jb-rightx { position: absolute; bottom: -1px; right: -1px;}
|
|
.box_spyy_chang .rzsjxlfx{ font-size:16px; margin-bottom: 10px;}
|
|
</style>
|
|
|
|
</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 style="height:1080px; width:1920px;">
|
|
<div class="xingk_nr"></div>
|
|
<%@include file="/common/menu.jsp" %>
|
|
</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 active">车流量实时监测</a>
|
|
<a href="${ctx}/hbcyjc/hikvision_cll/lssj.jsp" class="caid_xiang">车流量分析</a>
|
|
<a href="${ctx}/equipmentguanli/equipments.do" class="caid_xiang">设备管理</a>
|
|
<span class="jb-lefts"></span>
|
|
<span class="jb-leftx"></span>
|
|
<span class="jb-rights"></span>
|
|
<span class="jb-rightx"></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="index_left left">
|
|
<div class="box_index">
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s" style="padding: 0px;">
|
|
<div class="con szgd_fgbj" style=" height:270px;">
|
|
<div class="tjsl2">
|
|
<p class="tjbt">实时车流量</p>
|
|
<div class="gdsz" style="width:205px;">
|
|
<div class="shuzi">
|
|
<div class="numberRun1"></div>
|
|
</div>
|
|
<p class="szdw">车次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tjsl2">
|
|
<p class="tjbt">今日累计车流量</p>
|
|
<div class="gdsz" style="width:233px;">
|
|
<div class="shuzi">
|
|
<div class="numRunjrlj"></div>
|
|
</div>
|
|
<p class="szdw">车次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
<p class="djdb"><span>今日环比<strong class="color_huang">↑12%</strong></span><span>本月同比<strong class="color_mhong">↓12%</strong></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<div class="box_index" id="app">
|
|
<h3 class="box_bt">卡口实时车流量</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s" style=" height:317px;padding: 0px;" >
|
|
<div class="con" style=" padding-right:12px;">
|
|
<div class="che_jqjb" style="z-index:10;">
|
|
<a href="javascript:void(0);" @click="test()" class="che_jbxz active">全部</a>
|
|
<a href="javascript:void(0);" @click="test('130123')" class="che_jbxz ">正定</a>
|
|
<a href="javascript:void(0);" @click="test('130131')" class="che_jbxz ">平山</a>
|
|
<a href="javascript:void(0);" @click="test('130126')" class="che_jbxz ">灵寿</a>
|
|
</div>
|
|
<p class="sltj">共计{{totalList.length}}个监控口</p>
|
|
<div class="mainbanner3">
|
|
<div class="mainbanner_window3">
|
|
<ul id="slideContainer3">
|
|
<li v-for="i in page">
|
|
<table width="100%" cellpadding="0" cellspacing="0" class="jqk_1">
|
|
<tbody>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>名称</th>
|
|
<th>方向</th>
|
|
<th>车流量（车次）</th>
|
|
</tr>
|
|
<tr v-for="(item,index) in showList" v-if="index < (i + 1) * 5 && index >= i * 5">
|
|
<td>
|
|
<p>{{index + 1}}</p>
|
|
</td>
|
|
<td>
|
|
<p class="mcmc" :title="item.device_name">{{item.device_name}}</p>
|
|
</td>
|
|
<td>
|
|
<p v-if="item.road_type == true">正定 → 平山</p>
|
|
<p v-if="item.road_type == false">平山 → 正定</p>
|
|
</td>
|
|
<td>
|
|
<p style="color: #57ffff;font-weight: bold;">{{item.vehicle_num}}</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</li>
|
|
</ul>
|
|
<ul class="mainbanner_list3">
|
|
<li v-for="i in page"><a href="javascript:void(0);"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
</div>
|
|
<div class="cll_center left" id="container">
|
|
<div class="sjtj_cctj" style="z-index: 999;">
|
|
<div class="tjsl">
|
|
<p class="tjbt">西柏坡方向(车次)</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRunps"></div>
|
|
</div>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tjsl">
|
|
<p class="tjbt">正定方向(车次)</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun4"></div>
|
|
</div>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chell_tianqi" style="z-index: 999;">
|
|
<div class="tianqi">
|
|
<h2 class="dqdz">石家庄</h2>
|
|
<div class="tbw">
|
|
<div class="pf_2">
|
|
<div class="icon_tq"> <img style="width: 63px;
|
|
margin-right: 0;
|
|
margin-left: 28px;
|
|
margin-top: 35px;"
|
|
id="weather-img" width="100%"/></div>
|
|
<p class="tqqk">多云<span>（实时）</span></p>
|
|
</div>
|
|
<div class="pf_2">
|
|
<p class="wendu">14<span>℃ </span></p>
|
|
<p class="wendu2"> <span>℃ </span></p>
|
|
<p class="fengji">南风<3级</p>
|
|
</div>
|
|
</div>
|
|
<div class="tqcs">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="riqi">
|
|
<p class="ny">2020年09月</p>
|
|
<p class="rq">12</p>
|
|
<p class="xq">周二</p>
|
|
<p class="sj"><i class="icon_sj"></i><span id="datetime">12:10:35</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="index_right right" id="popularCarSource">
|
|
<div class="box_index_r">
|
|
<h3 class="box_bt">热门车源地（车次）</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:302px; overflow: hidden;">
|
|
<div class="con cll_rmkyd">
|
|
<ul class="kydph">
|
|
<li v-for="(item,index) in sourceList">
|
|
<div class="kyd_jgjl">
|
|
<p class="csmc"><span v-bind:class="{huang:index == 0,lv:index == 1,zi:index == 2}">{{index + 1}}</span>{{item.region}}</p>
|
|
<p class="csrs" style="font-weight: bold;">{{item.num}}</p>
|
|
<p class="jtt"><span :style="{width:item.proportion + '%'}" v-bind:class="{jb_huang:index == 0,jb_lv:index == 1,jb_zi:index == 2}"></span></p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="box_index_r">
|
|
<h3 class="box_bt">车辆类型分析</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style="height:286px;" id="lxfx">
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="cll_dbtb">
|
|
<div class="dbtb_zsk">
|
|
<div class="box_spyy_chang" style="height:220px;" id="zhengding">
|
|
</div>
|
|
</div>
|
|
<div class="dbtb_zsk">
|
|
<div class="box_spyy_chang" style="height:220px;" id="pingshan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--数字滚动-->
|
|
<script src="${ctx}/hbcyjc/resource/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="${ctx}/hbcyjc/resource/js/numberRun.js"></script>
|
|
|
|
<!--数据轮番-->
|
|
<script type="text/javascript" src="${ctx}/hbcyjc/resource/js/index.js"></script>
|
|
<!--左侧滑动菜单-->
|
|
<script src="${ctx}/hbcyjc/resource/js/classie.js"></script>
|
|
|
|
<!-- 区域 编码:名称 -->
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/hikvision_cll/allregion.js"></script>
|
|
<!-- 车辆类型 -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/type.js"></script>
|
|
<!-- 正定方向车流量 -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/forZhengding.js"></script>
|
|
<!-- 平山方向车流量 -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/forPingshan.js"></script>
|
|
<!-- 卡口实时车流量 -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/realTimeTraffic.js"></script>
|
|
<!-- 热门车源地 -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/popularCarSource.js"></script>
|
|
<!-- 左上角 实时车流量 和 今日累计车流量 还有算法比例-->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/sscllnums.js"></script>
|
|
<!-- 高德地图 -->
|
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=7e26cd83fc8924499e9b15e274698246'></script>
|
|
<!-- UI组件库 1.0 -->
|
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
|
<!-- 页面地图js -->
|
|
<script src="${ctx}/hbcyjc/hikvision_cll/ssjc/map.js"></script>
|
|
<script src="${ctx}/util/zero_util.js?v=0.0.1"></script>
|
|
|
|
<script>
|
|
//获取天气
|
|
$.get('/weather?code=101090101', function (resp) {
|
|
var data = resp.data;
|
|
$('#weather-img')[0].src = get_img_by_weatherCode(data.weather_info_code);
|
|
$('.wendu').text(data.high_temp);
|
|
$('.wendu2').text(data.low_temp);
|
|
$('.fengji').text(data.wind_direction+data.wind_level);
|
|
});
|
|
|
|
|
|
$(".che_jqjb a").click(function(){
|
|
$(this).addClass("active");
|
|
$(this).siblings().removeClass("active");
|
|
});
|
|
// 时间更新
|
|
function setdate(){
|
|
var now = new Date();
|
|
var month = now.getMonth() + 1;
|
|
var day = now.getDay();// 星期*
|
|
var hour = now.getHours();
|
|
var minutes = now.getMinutes();
|
|
var second = now.getSeconds()
|
|
$(".ny").html(now.getFullYear() + "年" + (month < 10 ? "0" + month : month) + "月");
|
|
$(".rq").html(now.getDate());
|
|
$(".xq").html("周" + (day == 0 ? "日":(day == 1 ? "一":(day == 2 ? "二":(day == 3 ? "三":(day == 4 ? "四":(day == 5 ? "五":"六")))))));
|
|
|
|
$("#datetime").html((hour < 10 ? "0" + hour : hour) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (second < 10 ? "0" + second : second));
|
|
}
|
|
setdate();
|
|
setInterval('setdate()',1000);
|
|
|
|
$(function() {
|
|
setType();
|
|
forzd();
|
|
forps();
|
|
setssinfo();
|
|
setInterval(function(){
|
|
setType();
|
|
forzd();
|
|
forps();
|
|
setssinfo();
|
|
},10 * 60 * 1000);
|
|
});
|
|
|
|
|
|
getLeftlowermenu();
|
|
//获得左下角菜单
|
|
//加个id--leftlowermenu
|
|
function getLeftlowermenu(){
|
|
var dicnum = '010901'; //测试，需要换成自己当前菜单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>
|
|
|