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.
819 lines
34 KiB
819 lines
34 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="chext"/>
|
|
|
|
<%-- 设置 回显菜单 的 id --%>
|
|
<bl:set var='menu_id' value='014803'/>
|
|
|
|
<%-- 继承页面 --%>
|
|
<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>
|
|
.chext{
|
|
width:100%;overflow:hidden
|
|
}
|
|
|
|
#gdmap-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.header_top {
|
|
z-index: 99;
|
|
}
|
|
|
|
element.style {
|
|
}
|
|
|
|
.label-box {
|
|
position: relative;
|
|
background: rgba(1, 20, 43, .9);
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
z-index: 999;
|
|
height: 55px;
|
|
padding: 4px 10px 9px 10px;
|
|
width: 200px;
|
|
|
|
text-align: center;
|
|
box-shadow: 0 0 3px #fff;
|
|
}
|
|
|
|
.label-box p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.amap-marker-label {
|
|
border: 0px solid blue;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
|
|
</style>
|
|
</bl:block>
|
|
|
|
<bl:block name="main-secondary">
|
|
|
|
<div style="width:120%; height:1000px;" id="gdmap-container"></div>
|
|
|
|
<div class="old_pg_wrap wlp_sm_1 wlpjfxxt" style="height: calc(100% - 60px);">
|
|
<!-- flex-1 begin -->
|
|
<div class="flex-1" style="float:left;width:480px;height:96%;position: relative;">
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
|
|
<div class="gird_title"><span>景区饱和度</span></div>
|
|
<div class="gird_content" style=" height:240px;">
|
|
<div class="scenic-saturation">
|
|
<div onmouseover="this.style.cursor='hand'" onclick="jqbhdclic(1)">
|
|
<img src="${ctx}/theme/common/images/bj.png">
|
|
<span>
|
|
<p class="warn-level-1" id="warning">-</p>
|
|
<p >报警</p>
|
|
</span>
|
|
</div>
|
|
<div onmouseover="this.style.cursor='hand'" onclick="jqbhdclic(2)">
|
|
<img src="${ctx}/theme/common/images/yj.png">
|
|
<span>
|
|
<p class="warn-level-2" id="crowd">-</p>
|
|
<p >拥挤</p>
|
|
</span>
|
|
</div>
|
|
<div onmouseover="this.style.cursor='hand'" onclick="jqbhdclic(3)">
|
|
<img src="${ctx}/theme/common/images/sz.png">
|
|
<span>
|
|
<p class="warn-level-3" id="moderate">-</p>
|
|
<p >适中</p>
|
|
</span>
|
|
</div>
|
|
<div onmouseover="this.style.cursor='hand'" onclick="jqbhdclic(4)">
|
|
<img src="${ctx}/theme/common/images/ss.png">
|
|
<span>
|
|
<p class="warn-level-4" id="comfortable">-</p>
|
|
<p >舒适</p>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ul id="scenic-top-ul" class="scenic-top-ul" style="overflow-x: hidden;width: 100%;">
|
|
<li class="list-li">
|
|
<div class="list-info">
|
|
<div class="list-info-top"><span class="list-info-top-text-comfortable">-----</span>
|
|
<span class="list-info-top-num">--</span></div>
|
|
<div class="list-info-bottom">
|
|
<div class="list-info-bottom-line" style="width: 10.6573%;"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>道路状况</span></div>
|
|
<div class="gird_content" style="height:300px;">
|
|
<div class="road-warn">
|
|
<div class="road-yj">
|
|
<p class="road-num" id="roadWarn" style="color: #ff4227">--</p>
|
|
<p style="color: #ff4227" >预警路段</p>
|
|
</div>
|
|
<div class="road-zong">
|
|
<p class="road-num" id="roadRate">-.-%</p>
|
|
<p>总监测路段</p>
|
|
</div>
|
|
</div>
|
|
<div id='div_con' style=" height: 180px; overflow: hidden; ">
|
|
<ul class="road-list" id="road-list" >
|
|
<li>--</li>
|
|
<li>--</li>
|
|
<li>--</li>
|
|
</ul>
|
|
<ul class="road-list" id="road-lister" style="margin-top: -5px;">
|
|
<li>--</li>
|
|
<li>--</li>
|
|
<li>--</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
</div>
|
|
|
|
<!-- flex-1 end -->
|
|
|
|
<!-- flex-1 begin -->
|
|
<div class="flex-1" style="float:right;width:450px;height:96%;position: relative;top:1%;z-index: 2;">
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>气象预警</span></div>
|
|
<div class="gird_content" style="height:200px;">
|
|
<div class="weather-box">
|
|
<div><span>蓝色预警</span>
|
|
<p id="blue">--条</p>
|
|
</div>
|
|
<div><span>黄色预警</span>
|
|
<p id="yellow">--条</p>
|
|
</div>
|
|
<div><span>橙色预警</span>
|
|
<p id="orange">--条</p>
|
|
</div>
|
|
<div><span>红色预警</span>
|
|
<p id="red">--条</p>
|
|
</div>
|
|
</div>
|
|
<div class="weather-list-box" id = "qxyj" style=" height: 130px; overflow: hidden;">
|
|
<ul class="weather-list-ul" id="weather-list-ul" style="margin-top: -6px;"></ul>
|
|
<ul class="weather-list-ul" id="weather-list-uler" style="margin-top: -6px;"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>团队预警</span></div>
|
|
|
|
<div class="gird_content" style="height:200px;">
|
|
<ul class="team-list-ul">
|
|
<li>
|
|
<p class="team-top"><img src="${ctx}/theme/common/images/yujing.png" alt=""> <span
|
|
class="color-blue">本地区暂无团队预警信息</span></p>
|
|
<p class="team-text">本地区暂无团队预警信息</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
<!-- gird_box_zsy begin -->
|
|
<div class="gird_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>投诉预警</span></div>
|
|
<div class="gird_content" style="height:200px;overflow-x: hidden;width: 100%;">
|
|
<div class="road-warn">
|
|
<div class="road-yj">
|
|
<p class="road-num" id="unDeal">--</p>
|
|
<p>未处理</p>
|
|
</div>
|
|
<div class="road-zong">
|
|
<p class="road-num" id="acceptRate">--.-%</p>
|
|
<p>受理率</p>
|
|
</div>
|
|
</div>
|
|
<table class="complaint-table">
|
|
<thead>
|
|
<tr>
|
|
<th>投诉对象</th>
|
|
<th>区域</th>
|
|
<th>投诉渠道</th>
|
|
<th>投诉时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id=complaint-table>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- gird_box_zsy end -->
|
|
</div>
|
|
</div>
|
|
|
|
</bl:block>
|
|
|
|
<bl:block name="script-secondary">
|
|
<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 type="text/javascript" src="${ctx}/js/laydate5.09/laydate.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 src="${ctx}/hbcyjc/lydlxxxt/map_border_arr.js"></script>
|
|
<script src="${ctx}/js/map_util.js"></script>
|
|
<script src="${ctx}/js/math_util.js"></script>
|
|
<script>
|
|
$.get('/earlywarning/tourismComprehensive/scenicPanel', function (config) {
|
|
renderScenicPanel(config); // 左上角景区饱和度
|
|
})
|
|
$("#geography_map").css('display','');
|
|
|
|
var statellite = new AMap.TileLayer.Satellite();//卫星图定义
|
|
// 初始化 高德地图...
|
|
var map = new AMap.Map('gdmap-container', {
|
|
resizeEnable: true,
|
|
center: [114.53952, 38.03647],
|
|
zoom: 9
|
|
});
|
|
|
|
setSatellite(); // 显示卫星图层
|
|
//实时路况图层
|
|
var trafficLayer = new AMap.TileLayer.Traffic({
|
|
zIndex: 10
|
|
});
|
|
trafficLayer.setMap(map);
|
|
|
|
//气象预警
|
|
var weatherConfig = {
|
|
summary: {
|
|
blue: 0,
|
|
yellow: 0,
|
|
orange: 1,
|
|
red: 0
|
|
},
|
|
list: [
|
|
{
|
|
title: '河北省石家庄市2020-07-05 18:39发布冰雹橙色预警',
|
|
type: 'hail',
|
|
tourGroupNum: 1,
|
|
tourGroupTouristNum: 30,
|
|
time: '2020-07-05 18:39',
|
|
type: 'orange'
|
|
}
|
|
]
|
|
}
|
|
|
|
//道路状况
|
|
var roadConfig = {
|
|
summary: {
|
|
earlyWarningNum: 0,
|
|
rate: '0.0%'
|
|
},
|
|
list: [
|
|
{date: '2020-07-06', time: '14:30:01', info: '中山路: 自西向东畅通 ; 自东向西畅通。'},
|
|
{date: '2020-07-06', time: '14:30:01', info: '裕华路: 自西向东畅通 ; 自东向西畅通。'},
|
|
{date: '2020-07-06', time: '14:30:01', info: '槐安路: 自西向东畅通 ; 自东向西畅通。'}
|
|
]
|
|
}
|
|
|
|
//fixme 团队预警 (html 结构未知)
|
|
|
|
|
|
// todo 投诉预警
|
|
var complainConfig = {
|
|
summary: {
|
|
unResolve: 1,
|
|
resolveRate: '99%'
|
|
},
|
|
list: [
|
|
{
|
|
complainObject: '测试景区',
|
|
region: '石家庄裕华区',
|
|
channel: '12306',
|
|
complainTime: '2020-07-06'
|
|
}
|
|
]
|
|
}
|
|
|
|
zIndex = 100;
|
|
function renderScenicPanel(config) {
|
|
var summary = config.summary;
|
|
$('#warning').html(summary.warning);
|
|
$('#crowd').html(summary.crowd);
|
|
$('#moderate').html(summary.moderate);
|
|
$('#comfortable').html(summary.comfort);
|
|
|
|
var dom = $('#scenic-top-ul');
|
|
dom.empty();
|
|
var list = config.list;
|
|
var html = '';
|
|
var total = 0;
|
|
for (var i = 0; i < list.length; i++) {
|
|
total += parseInt(list[i].currentcount);
|
|
}
|
|
|
|
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'
|
|
|
|
});
|
|
|
|
for (i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
html += ' <li class="list-li">' +
|
|
'<div class="list-info">' +
|
|
'<div class="list-info-top"><span class="list-info-top-text-comfortable">' + item.scenicname + '</span>' +
|
|
'<span class="list-info-top-num">' + item.currentcount + '</span></div>' +
|
|
'<div class="list-info-bottom">' +
|
|
'<div class="list-info-bottom-line" style="width: ' + MathUtil.divide(item.currentcount, item.maxload,100) + '%;"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</li>';
|
|
|
|
// var arr = [eval(item.lon), eval(item.lat)];
|
|
var arr = eval("("+item.lnglat+")");
|
|
var marker1 = new AMap.Marker({
|
|
position: arr,
|
|
icon: endIcon,
|
|
map: map,
|
|
offset:new AMap.Pixel(-100, -60),
|
|
zIndex:zIndex ,
|
|
// content: '<div class="label-box"> ' +
|
|
// '<p style="color:#55FFFF ">' + item.scenicname + '</p> ' +
|
|
// '<p style="color:#55FFFF ">' + item.currentcount + '/' + item.maxload + '</p> ' +
|
|
// '<div class="label-line-box"> ' +
|
|
// '<div class="label-line" style="width: 10%;background: #0A92D3"></div> ' +
|
|
// '</div>' +
|
|
// '</div>'
|
|
|
|
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);' " +
|
|
">" + item.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; '>" +
|
|
item.currentcount + '/' + item.maxload + "</span> </div>",//设置文本标注内容
|
|
//direction: 'right' //设置文本标注方位
|
|
|
|
});
|
|
|
|
var marker = new AMap.Marker({
|
|
position: arr,
|
|
icon: endIcon,
|
|
map: map,
|
|
zIndex:100
|
|
});
|
|
|
|
|
|
marker1.on('mouseover', function (e) {
|
|
e.target.setzIndex(++zIndex);
|
|
});
|
|
/*marker.on('mouseover', function (e) {
|
|
e.target.setzIndex(++zIndex);
|
|
});*/
|
|
|
|
marker.setMap(map);
|
|
|
|
}
|
|
dom.append(html);
|
|
}
|
|
|
|
function renderWeatherPanel(config) {
|
|
var summary = config.summary;
|
|
$('#blue').html(summary.blue);
|
|
$('#yellow').html(summary.yellow);
|
|
$('#orange').html(summary.orange);
|
|
$('#red').html(summary.red);
|
|
var list = config.list;
|
|
var dom = $('#weather-list-ul');
|
|
var html = '';
|
|
dom.empty();
|
|
var colorMap = {
|
|
'blue': '#4C85EB',
|
|
'yellow': '#CEBE15',
|
|
'orange': '#D0911A',
|
|
'red': '#8B1817'
|
|
}
|
|
for (var i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
html += '<li><span class="weather-level weather-level-1"></span> <span class="weather-text"\n' +
|
|
' style="color:' + colorMap[item.type] + '">' + item.title + '</span>\n' +
|
|
'<span class="weather-time" style="color:' + colorMap[item.type] + '">' + item.time + '</span></li>';
|
|
|
|
}
|
|
dom.append(html);
|
|
}
|
|
|
|
function renderRoadPanel(config) {
|
|
var summary = config.summary;
|
|
$('#roadWarn').html(summary.earlyWarningNum);
|
|
$('#roadRate').html(summary.rate);
|
|
|
|
var list = config.list;
|
|
var dom = $('#road-list');
|
|
dom.empty();
|
|
var html = '';
|
|
for (var i = 0; i < list.length; i++) {
|
|
var road = list[i];
|
|
html += '<li>' + road.info + '</li>';
|
|
}
|
|
dom.append(html);
|
|
}
|
|
|
|
|
|
//投诉预警
|
|
function renderComplainPanel(config) {
|
|
var summary = config.summary;
|
|
$('#unDeal').html(summary.unResolve);
|
|
$('#acceptRate').html(summary.resolveRate);
|
|
|
|
var list = config.list;
|
|
var dom = $('#complaint-table');
|
|
dom.empty();
|
|
var html = '';
|
|
|
|
// 打点
|
|
for (var i = 0; i < list.length; i++) {
|
|
var it = list[i];
|
|
html += ' <tr>\n' +
|
|
' <td class="short">' + it.accuse_object + '</td>\n' +
|
|
' <td>' + it.region + '</td>\n' +
|
|
' <td>' + it.accuse_place + '</td>\n' +
|
|
' <td class="short">' + it.accuse_time.substr(0, 10) + '</td>\n' +
|
|
' </tr>';
|
|
|
|
}
|
|
dom.append(html);
|
|
}
|
|
|
|
|
|
$.get('/earlywarning/tourismComprehensive/scenicPanel', function (config) {
|
|
renderScenicPanel(config); // 左上角景区饱和度
|
|
})
|
|
|
|
// renderWeatherPanel(weatherConfig); // 海明 气象预警
|
|
// renderRoadPanel(roadConfig); // 海明 道路状况
|
|
|
|
$.get('/earlywarning/tourismComprehensive/complaintPanel', function (config) {
|
|
renderComplainPanel(config); // 旅游投诉
|
|
})
|
|
|
|
|
|
//实时路况图层
|
|
var trafficLayer = new AMap.TileLayer.Traffic({
|
|
zIndex: 10
|
|
});
|
|
|
|
/**
|
|
* 气象预警
|
|
*/
|
|
weatherWarn();
|
|
function weatherWarn() { // 少鹏 气象预警
|
|
// var date = dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
|
|
$.ajax({
|
|
url: "${ctx}/hbcyjc/earlywarning/findWeaWarns.json",
|
|
type: "get",
|
|
dataType: "json",
|
|
success: function (resData) {
|
|
var redWarn = 0, yellowWarn = 0, orangeWarn = 0, blueWarn = 0;
|
|
var html;
|
|
$('.weather-list-ul').empty()
|
|
if (resData != null && resData.length > 0) {
|
|
resData.forEach(function (item, index, array) {
|
|
var level = Number(item.levelCode);
|
|
var color;
|
|
switch (level) {
|
|
case 1:
|
|
blueWarn++;
|
|
color = '#2E71C5';
|
|
break;
|
|
case 2:
|
|
yellowWarn++;
|
|
color = '#CDA216';
|
|
break;
|
|
case 3:
|
|
color = '#D77412';
|
|
orangeWarn++;
|
|
break;
|
|
default:
|
|
color = '#B54C3F';
|
|
redWarn++;
|
|
}
|
|
html = '<li><span class="weather-level weather-level-1" style="background-color: '+color+'"></span>' +
|
|
' <span class="weather-text" style="color:' + color + '">' + item.head + '</span> ' +
|
|
'<span class="weather-time" style="color:' + color + '">' + item.relieveTime + '</span></li>'
|
|
$('#weather-list-ul').append(html);
|
|
$('#weather-list-uler').append(html);
|
|
|
|
})
|
|
} else {
|
|
html = '<li><span class="weather-level weather-level-1"></span>' +
|
|
'<span class="weather-text">本地区暂无天气预警信息</span></li>'
|
|
$('#weather-list-ul').append(html);
|
|
$('#weather-list-uler').append(html);
|
|
}
|
|
$("#blue").text(blueWarn + "条")
|
|
$("#red").text(redWarn + "条")
|
|
$("#orange").text(orangeWarn + "条")
|
|
$("#yellow").text(yellowWarn + "条")
|
|
}
|
|
});
|
|
}
|
|
// trafficLayer.setMap(map);
|
|
|
|
|
|
|
|
//---------------------开始道路预警信息--------------------------------
|
|
var statusl =0; // 未知
|
|
var statusyi =0; //畅通
|
|
var statuser =0; //缓行
|
|
var statussan =0; //拥堵
|
|
var statussi =0; //严重拥堵 预警
|
|
zcdlzk(); // 部署开启，先暂停使用
|
|
//左侧漂浮道路状况
|
|
function zcdlzk(){
|
|
var lnglatsz = [ // 石家庄二环内（大约）
|
|
{"datayi":"114.438332,38.086916","dataer":"114.475411,38.003641"},
|
|
{"datayi":"114.476368,38.083587","dataer":"114.512417,38.01221"},
|
|
{"datayi":"114.438332,38.086916","dataer":"114.475411,38.003641"},
|
|
{"datayi":"114.525464,38.074669","dataer":"114.562886,38.002742"},
|
|
{"datayi":"114.54881,38.074669","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);
|
|
redata += gddldata.substring(0,gddldata.length-1)+"；";
|
|
}
|
|
redata += gddldata.substring(0,gddldata.length-1);
|
|
var GDdldata = redata.split("；");
|
|
var html = "";
|
|
for(var i=0;i<GDdldata.length;i++){
|
|
html += "<li style=\"margin-top: -3px;\" >"+GDdldata[i]+"</li>";
|
|
}
|
|
$("#road-list").html(html); // 道路状况说明
|
|
$("#road-lister").html(html); // 道路状况说明
|
|
$("#roadWarn").html(statussi); // 预警路段
|
|
$('#roadRate').html('81.5%'); // 总监测路段 百分比
|
|
}
|
|
|
|
//获得高德地图监测的道路状况
|
|
function getGDDLZK(datayi,dataer) {
|
|
var description = "";
|
|
var url = "https://restapi.amap.com/v3/traffic/status/rectangle?" +
|
|
"rectangle="+datayi+";"+dataer+"" +
|
|
"&key=5fbd134902632e5ba7cdfdb5ceb48c5c" +
|
|
"&extensions=all" + // 全部信息
|
|
"";
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
var trafficinfo = data.trafficinfo;
|
|
description = trafficinfo.description; // 道路状况文字信息
|
|
var roads = trafficinfo.roads; // 道路详细信息
|
|
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++;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
return description;
|
|
}
|
|
//---------------------结束道路预警信息--------------------------------
|
|
|
|
|
|
roll(50);
|
|
roller(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
|
|
var 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 (ulbox.scrollTop >= ul1.scrollHeight) {
|
|
ulbox.scrollTop = 0;
|
|
} else {
|
|
ulbox.scrollTop++;
|
|
}
|
|
}
|
|
|
|
function roller(t) {
|
|
var ul1 = document.getElementById('weather-list-ul');
|
|
var ul2 = document.getElementById('weather-list-uler');
|
|
var ulbox = document.getElementById('qxyj');
|
|
ul2.innerHTML = ul1.innerHTML;
|
|
ulbox.scrollTop = 0; // 开始无滚动时设为0
|
|
var timer = setInterval(rollStarter, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
|
|
// 鼠标移入div时暂停滚动
|
|
ulbox.onmouseover = function () {
|
|
clearInterval(timer);
|
|
}
|
|
// 鼠标移出div后继续滚动
|
|
ulbox.onmouseout = function () {
|
|
timer = setInterval(rollStarter, t);
|
|
}
|
|
}
|
|
|
|
// 开始滚动函数
|
|
function rollStarter() {
|
|
// 上面声明的DOM对象为局部对象需要再次声明
|
|
var ul1 = document.getElementById('weather-list-ul');
|
|
var ul2 = document.getElementById('weather-list-uler');
|
|
var ulbox = document.getElementById('qxyj');
|
|
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
|
|
if (ulbox.scrollTop >= ul1.scrollHeight) {
|
|
ulbox.scrollTop = 0;
|
|
} else {
|
|
ulbox.scrollTop++;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* 景区饱和度点击（报警，拥挤，适中，舒适）
|
|
*/
|
|
var jqbhdscclick; // 记录上次点击的类型
|
|
function jqbhdclic(sstype){
|
|
if(jqbhdscclick != sstype){
|
|
jqbhdscclick = sstype;
|
|
var url = "/earlywarning/tourismComprehensive/jqbhddata";
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
dataType: "json",
|
|
async: false,
|
|
data:{"sstype":sstype},
|
|
success: function (data) {
|
|
var retdata = data.ret;
|
|
cleanmapdre(); // 清除地图覆盖物
|
|
setgdmarker(retdata);
|
|
}
|
|
})
|
|
}else{
|
|
$.get('/earlywarning/tourismComprehensive/scenicPanel', function (config) {
|
|
renderScenicPanel(config); // 左上角景区饱和度
|
|
})
|
|
jqbhdscclick=0;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* 清除地图上的覆盖物
|
|
*/
|
|
function cleanmapdre(){
|
|
// map.remove(markers);
|
|
map.clearMap();
|
|
}
|
|
|
|
|
|
/**
|
|
* 高德地图打点
|
|
*/
|
|
function setgdmarker(data){
|
|
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 arr = eval("("+data[i].lnglat+")");
|
|
var marker = new AMap.Marker({
|
|
position:arr,
|
|
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(-60, -35), //设置文本标注偏移量
|
|
content:
|
|
"<div 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; '>"
|
|
+ current + "</span> </div>",//设置文本标注内容
|
|
direction: 'right' //设置文本标注方位
|
|
});
|
|
// marker.on('mouseover', markerClick);
|
|
marker.emit('mouseover', {target: marker});
|
|
}
|
|
// var newCenter = map.setFitView(); // 根据点标注-自适应地图大小缩放及视野位置
|
|
map.setZoomAndCenter(7, [116.51518,39.183107]); // 更改缩放级别及中心点位置
|
|
}
|
|
}
|
|
|
|
|
|
//卫星图层--显示卫星 图层
|
|
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();
|
|
}
|
|
|
|
|
|
</script>
|
|
<script>
|
|
MapUtil.add_border(map,{
|
|
region: '${region.dremark}',
|
|
areaName:'${admin.realname}',
|
|
earecode:'${admin.earecode}'
|
|
})
|
|
</script>
|
|
|
|
</bl:block>
|
|
<bl:finish/> |