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.
445 lines
18 KiB
445 lines
18 KiB
<%-- 旅游安全预警系统 - 道路状况监测--%>
|
|
<%@ page import="com.cjy.core.facade.UserAttrFacade" %>
|
|
<%@ page import="com.cjy.sysdept.entity.SysDept" %>
|
|
<%@ page language="java" contentType="text/html;charset=UTF-8"
|
|
pageEncoding="UTF-8" %>
|
|
<%@ taglib uri="http://tags.clayton.io/blacklayout" prefix="bl" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
<bl:set var="title" value="道路状况监测"/>
|
|
<bl:set var='sys_name' value='旅游安全预警系统-道路状况监测'/>
|
|
<bl:set var="hide_location" value="true"/>
|
|
<bl:set var="body_class" value="gdmap-container"/>
|
|
|
|
<%-- 设置 回显菜单 的 id --%>
|
|
<bl:set var='menu_id' value='014801'/>
|
|
|
|
<%-- 继承页面 --%>
|
|
<bl:extends page="/common/layout/secondaryMenuLayout.jsp"/>
|
|
<%
|
|
SysDept sysDept = UserAttrFacade.getDeptInfo(request);
|
|
String earecodets = sysDept.getDcode();
|
|
String areacode = "";
|
|
if (sysDept.getLevel() == 1) {//省级
|
|
areacode = sysDept.getDremark().substring(0, 2);
|
|
} else if (sysDept.getLevel() == 2) {//市
|
|
if (sysDept.getDremark().equals("131401")) {
|
|
areacode = "131401";
|
|
} else {
|
|
areacode = sysDept.getDremark().substring(0, 4);
|
|
}
|
|
} else if (sysDept.getLevel() == 3) {//县级
|
|
areacode = sysDept.getDremark();
|
|
} else if (sysDept.getLevel() == 4) {//地级市
|
|
areacode = sysDept.getDremark();
|
|
}
|
|
%>
|
|
|
|
<bl:block name="style">
|
|
<link rel="stylesheet" href="${ctx}/theme/common/css/layout.css"/>
|
|
<style>
|
|
#geography_map{display: block}
|
|
.gird_box_zsy .dl_sub_bt span{border-radius: 9px;}
|
|
#gdmap-container {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom:0;
|
|
}
|
|
|
|
.header_top {
|
|
z-index: 99;
|
|
height: 70px;
|
|
width: 100%;
|
|
background: url(/theme/v2/resourceNew/imgnew/hearder_dbj.png) rgba(29,30,90,.9) center bottom repeat-x;
|
|
position: fixed;
|
|
width: 100%;
|
|
top:0;
|
|
}
|
|
</style>
|
|
<link href="${ctx }/assets/select2/select2v4.css" rel="stylesheet" type="text/css" />
|
|
<script src="${ctx }/assets/select2/select2v4.min.js" type="text/javascript"></script>
|
|
<style type="text/css">
|
|
.select2-container .select2-choice {
|
|
padding:0px 5px;
|
|
background:rgba(0,169,246,0.1);
|
|
}
|
|
.select2-drop{
|
|
/*background-color: #11274a;*/
|
|
background-color: #061c3e;
|
|
|
|
}
|
|
.select2-drop.select2-drop-above .select2-search input{
|
|
/*background-color: #11274a;*/
|
|
background-color: #11274a;
|
|
|
|
}
|
|
.select2-container .select2-choice{height:28px; border:none;line-height:28px}
|
|
.select2-container .select2-choice .select2-arrow{top:-3px}
|
|
.select2-dropdown-open .select2-choice{box-shadow:none}
|
|
/*.select2-drop{border-color:#04489D}*/
|
|
.select2-drop{border-color:#04489D}
|
|
|
|
.select2-search input {
|
|
background-color: #12283f
|
|
}
|
|
|
|
.amap-marker-label {
|
|
border:0px solid blue;
|
|
}
|
|
|
|
</style>
|
|
</bl:block>
|
|
|
|
|
|
<bl:block name="main-secondary">
|
|
|
|
<div style="width:100%; height: 100%" id="gdmap-container"></div>
|
|
|
|
<div class="old_pg_wrap wlp_sm_1 wlpjfxxt" style="height: calc(100% - 60px); margin-top: 0">
|
|
<%-- 这里写 html --%>
|
|
<!-- flex-1 begin -->
|
|
<div class="flex-1" style="float:right;width:360px;height:96%;position: relative;top:1%;z-index: 2;">
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy" style="margin-top: 80px;height: 90%"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>当前道路状况</span></h3>
|
|
<div class="form_select" style="display: inline;float: right;margin-top: -5px;width: 50%;">
|
|
<select class="select2 " id = "videoScenicId" name = "videoScenicId">
|
|
<option value = "0">请选择景区</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="gird_content" id='div_con' style="height:90%; overflow: hidden; ">
|
|
<ul class="road-list" id="road-list">
|
|
|
|
</ul>
|
|
<ul class="road-list" id="road-lister">
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</bl:block>
|
|
|
|
<bl:block name="script-secondary">
|
|
<%-- 这里写 scrpit --%>
|
|
<script src="${ctx }/hbcyjc/kll/kll_structure/areacode.js"></script>
|
|
<script type="text/javascript" src="${ctx}/hbcyjc/resource/js/echarts/echarts.min.js"></script>
|
|
<script src="${ctx}/hbcyjc/tour_group/js/tour_group_ui.js"></script>
|
|
<script src="${ctx}/hbcyjc/tour_group/js/outbound.js"></script>
|
|
<script type="text/javascript" src="${ctx }/util/date_region_filter.js"></script>
|
|
|
|
<%--高德地图 --%>
|
|
<script src="https://webapi.amap.com/maps?v=1.4.12&key=8ccbf0076c5d6202725eb9c4b3cec772"></script>
|
|
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
|
|
|
<script>
|
|
$("#geography_map").css('display','');
|
|
$(".hd_top_btn a:first").removeClass("on");
|
|
$(".hd_top_btn a:eq(1)").addClass("on");
|
|
var statusl = 0; // 未知
|
|
var statusyi = 0; //畅通
|
|
var statuser = 0; //缓行
|
|
var statussan = 0; //拥堵
|
|
var statussi = 0; //严重拥堵 预警
|
|
|
|
var timer; // 文字滚动使用，
|
|
|
|
var statellite = new AMap.TileLayer.Satellite();//卫星图定义
|
|
// 初始化 高德地图...
|
|
var map = new AMap.Map('gdmap-container', {
|
|
resizeEnable: true,
|
|
center: [114.53952, 38.03647],
|
|
zoom: 11
|
|
});
|
|
|
|
//实时路况图层
|
|
var trafficLayer = new AMap.TileLayer.Traffic({
|
|
zIndex: 10
|
|
});
|
|
|
|
trafficLayer.setMap(map);
|
|
|
|
function getGDDLZK(datayi, dataer) {
|
|
var description = "";
|
|
var url = "https://restapi.amap.com/v3/traffic/status/circle?" +
|
|
"location=" + datayi +
|
|
"&key=5fbd134902632e5ba7cdfdb5ceb48c5c" +
|
|
"&radius=10000" + // 全部信息
|
|
"";
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if(data.status==1){
|
|
$("#div_con").html("<ul class=\"road-list\" id=\"road-list\">\n" +
|
|
"\n" +
|
|
" </ul>\n" +
|
|
" <ul class=\"road-list\" id=\"road-lister\">\n" +
|
|
"\n" +
|
|
" </ul>");
|
|
var trafficinfo = data.trafficinfo;
|
|
description = trafficinfo.description; // 道路状况文字信息
|
|
var roads = trafficinfo.evaluation; // 道路详细信息
|
|
for (var i = 0; i < roads.length; i++) {
|
|
var status = roads[i].status; //0：未知 1：畅通 2：缓行 3：拥堵 4：严重拥堵
|
|
if (status == 0) {
|
|
statusl++;
|
|
} else if (status == 1) {
|
|
statusyi++;
|
|
} else if (status == 2) {
|
|
statuser++;
|
|
} else if (status == 3 || status == 4) {
|
|
statussi++;
|
|
}
|
|
}
|
|
}else{
|
|
clearInterval(timer);
|
|
$("#div_con").html("");
|
|
layer.msg("暂无该地区路况信息");
|
|
}
|
|
|
|
}
|
|
})
|
|
return description;
|
|
}
|
|
|
|
|
|
//左侧漂浮道路状况
|
|
function zcdlzk(lnglatsz) {
|
|
if(lnglatsz!=null){
|
|
lnglatsz= [ {"datayi": ""+lnglatsz+""}]
|
|
}else{
|
|
lnglatsz = [ // 石家庄二环内（大约）
|
|
{"datayi": "114.472731,38.057889", "dataer": "114.475411,38.003641"},
|
|
{"datayi": "114.538993,38.055726", "dataer": "114.512417,38.01221"},
|
|
{"datayi": "114.479255,38.02409", "dataer": "114.475411,38.003641"},
|
|
{"datayi": "114.547919,38.024631", "dataer": "114.562886,38.002742"},
|
|
{"datayi": "114.50775,38.042749", "dataer": "114.588635,38.005448"}
|
|
];
|
|
}
|
|
|
|
var redata = "";
|
|
for (var i = 0; i < lnglatsz.length; i++) {
|
|
var datayi = lnglatsz[i].datayi;
|
|
var dataer = lnglatsz[i].dataer;
|
|
var gddldata = getGDDLZK(datayi, dataer);
|
|
if(gddldata.length>0){
|
|
redata += gddldata.substring(0, gddldata.length - 1) + "；";
|
|
}
|
|
}
|
|
if(gddldata.length>0) {
|
|
redata += gddldata.substring(0, gddldata.length - 1);
|
|
var GDdldata = redata.split("；");
|
|
|
|
var html = "";
|
|
for (var i = 0; i < GDdldata.length; i++) {
|
|
|
|
var item = GDdldata[i];
|
|
|
|
var d = dateFormat('YYYY-mm-dd HH:MM',new Date());
|
|
|
|
var arr = d.split(' ');
|
|
|
|
var date = arr[0];
|
|
var time = arr[1];
|
|
|
|
html += '<li>\n' +
|
|
' <div class="analy_style_time">\n' +
|
|
' <p class="tousu-date">' + date +
|
|
'</p>\n' +
|
|
' <p class="tousu-time">' + time + '</p>\n' +
|
|
' </div>\n' +
|
|
' <div class="analy_style">\n' +
|
|
' <div class="dian"></div>\n' +
|
|
' <div class="xian"></div>\n' +
|
|
' </div>\n' +
|
|
' <div class="analy_style_box">\n' +
|
|
' <p class="analy_style_bottom" title="">\n' +
|
|
' ' + item + '</p>\n' +
|
|
' </div>\n' +
|
|
' </li>';
|
|
}
|
|
$("#road-list").html(html); // 道路状况说明
|
|
$("#road-lister").html(html); // 道路状况说明
|
|
$("#roadWarn").html(statussi); // 预警路段
|
|
}
|
|
}
|
|
|
|
zcdlzk();
|
|
|
|
|
|
roll(50)
|
|
function roll(t) {
|
|
var ul1 = document.getElementById('road-list');
|
|
var ul2 = document.getElementById('road-lister');
|
|
var ulbox = document.getElementById('div_con');
|
|
ul2.innerHTML = ul1.innerHTML;
|
|
ulbox.scrollTop = 0; // 开始无滚动时设为0
|
|
timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
|
|
// 鼠标移入div时暂停滚动
|
|
ulbox.onmouseover = function () {
|
|
clearInterval(timer);
|
|
}
|
|
// 鼠标移出div后继续滚动
|
|
ulbox.onmouseout = function () {
|
|
timer = setInterval(rollStart, t);
|
|
}
|
|
}
|
|
|
|
// 开始滚动函数
|
|
function rollStart() {
|
|
// 上面声明的DOM对象为局部对象需要再次声明
|
|
var ul1 = document.getElementById('road-list');
|
|
var ul2 = document.getElementById('road-lister');
|
|
var ulbox = document.getElementById('div_con');
|
|
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
|
|
if (ul1!=null&&ulbox.scrollTop >= ul1.scrollHeight) {
|
|
ulbox.scrollTop = 0;
|
|
} else {
|
|
ulbox.scrollTop++;
|
|
}
|
|
}
|
|
//获得所属景区 $(function () {
|
|
getSelectScenicJQ();
|
|
function getSelectScenicJQ(){
|
|
$.ajax({
|
|
url: '${ctx}/earlywarning/tourismComprehensive/getscenic',
|
|
type: "get",
|
|
dataType: "json",
|
|
async: true,
|
|
success: function (data) {
|
|
$('#videoScenicId').select2({data:data});
|
|
}
|
|
});
|
|
}
|
|
|
|
//监听select改变事件 地图打点和道路状况查询
|
|
$(function(){
|
|
$("#videoScenicId").select2();
|
|
|
|
$("#videoScenicId").off().on("change",function(){
|
|
var data = $(this).val();
|
|
var text = $(this).find("option:selected").text();
|
|
if(data==0){
|
|
zcdlzk();
|
|
map.setZoomAndCenter(11, [114.53952, 38.03647]);
|
|
}else{
|
|
zcdlzk(data);
|
|
var zuobiao = data.split(",");
|
|
//map.setZoomAndCenter(11, [zuobiao[0],zuobiao[1]]);
|
|
//通过景区名称 查询该景区客流
|
|
var url = "/earlywarning/tourismComprehensive/scenicPanel";
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: "json",
|
|
async: false,
|
|
data:{"text":text},
|
|
success: function (data) {
|
|
var retdata = data.list;
|
|
cleanmapdre(); // 清除地图覆盖物
|
|
|
|
if(retdata.length!=0){
|
|
setgdmarker(retdata,zuobiao);
|
|
}else{
|
|
retdata=[{"currentcount": "暂无"
|
|
,"historycount": "暂无"
|
|
,"maxload": "暂无"
|
|
,"scenicname": ""+text+""}];
|
|
setgdmarker(retdata,zuobiao);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
});
|
|
});
|
|
|
|
//卫星图层--显示卫星 图层
|
|
function setSatellite(){
|
|
$(".hd_top_btn a:first").addClass("on");
|
|
$(".hd_top_btn a:eq(1)").removeClass("on");
|
|
map.getLayers()[0].hide();
|
|
statellite.show();
|
|
statellite.setMap(map);
|
|
}
|
|
//隐藏卫星图层--显示数字地图
|
|
function hideSatellite(){
|
|
$(".hd_top_btn a:first").removeClass("on");
|
|
$(".hd_top_btn a:eq(1)").addClass("on");
|
|
map.getLayers()[0].show();
|
|
statellite.hide();
|
|
}
|
|
/**
|
|
* 清除地图上的覆盖物
|
|
*/
|
|
function cleanmapdre(){
|
|
map.clearMap();
|
|
}
|
|
/**
|
|
* 高德地图打点
|
|
*/
|
|
function setgdmarker(data,zuobiao){
|
|
if (data.length > 0) {
|
|
infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
|
|
for (var i = 0; i < data.length; i++) {
|
|
// 创建一个 Icon
|
|
var endIcon = new AMap.Icon({
|
|
size: new AMap.Size(34, 34),
|
|
// image: _CTX + '/hbcyjc/resourceNew/images/dwtb.png',
|
|
image: _CTX + '/hbcyjc/resourceNew/images/dremark2.png'
|
|
});
|
|
var marker = new AMap.Marker({
|
|
position:zuobiao,
|
|
icon: endIcon,
|
|
map: map
|
|
});
|
|
|
|
marker.setMap(map);
|
|
var current = data[i].currentcount;
|
|
if (current == "0" || current == "" || current == null) {
|
|
current = data[i].historycount;
|
|
}
|
|
// 设置鼠标划过点标记显示的文字提示
|
|
marker.setTitle(data[i].scenicname);
|
|
marker.setLabel({
|
|
anchor: 'bottom-center',
|
|
offset: new AMap.Pixel(-70, -40), //设置文本标注偏移量
|
|
content:
|
|
"<div class='' " +
|
|
"style='background:-webkit-linear-gradient(#f77545,#a72817);" +
|
|
"border-radius:5px;height: 30px;line-height: 30px;" +
|
|
"overflow: hidden;padding-left: 10px; box-shadow: 1px 2px 10px rgba(0,0,0,0.4);' " +
|
|
">" + data[i].scenicname +
|
|
"<span style='display: inline-block; color: #a72817; background:rgba(255,255,255,1); " +
|
|
"font-size: 14px; height: 30px; line-height: 30px; " +
|
|
"padding: 0px 8px; margin-left: 5px; font-weight: 500; font-size: 16px; '>" +
|
|
data[i].currentcount + '/' + data[i].maxload + "</span> </div>",//设置文本标注内容
|
|
direction: 'right' //设置文本标注方位
|
|
});
|
|
// marker.on('mouseover', markerClick);
|
|
marker.emit('mouseover', {target: marker});
|
|
}
|
|
//var newCenter = map.setFitView(); // 根据点标注-自适应地图大小缩放及视野位置
|
|
map.setZoomAndCenter(11, zuobiao); // 更改缩放级别及中心点位置
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</bl:block>
|
|
|
|
<bl:finish/> |