From 18e6ddefd900e5780f953fe926eb2e3d8cab537c Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期一, 29 十月 2018 23:42:48 +0800
Subject: [PATCH] 添加内容
---
gx_tieta/WebRoot/index.jsp | 210 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 162 insertions(+), 48 deletions(-)
diff --git a/gx_tieta/WebRoot/index.jsp b/gx_tieta/WebRoot/index.jsp
index 67e0988..41ac7e9 100644
--- a/gx_tieta/WebRoot/index.jsp
+++ b/gx_tieta/WebRoot/index.jsp
@@ -24,10 +24,12 @@
<title><s:text name="HomePage"></s:text></title>
<meta name="renderer" content="webkit">
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- 瀵煎叆鐧惧害鍦板浘API -->
+ <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
- <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
+ <script type="text/javascript" src="js/AreaRestriction_min.js"></script>
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/common.css" type="text/css" rel="stylesheet" />
<link href="css/index_layout.css" type="text/css" rel="stylesheet" />
@@ -37,7 +39,7 @@
<link rel="stylesheet" href="src/css/layui.css">
<link rel="stylesheet" href="pages/css/mylayui.css">
<style type="text/css">
- #map .explain-header:hover {
+ .explain-header:hover {
cursor: pointer;
background-color: #84ABFA !important;
color: #D6D1D1
@@ -94,7 +96,6 @@
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
-
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/createTab.js"></script>
@@ -108,21 +109,47 @@
<jsp:include page="nav.jsp" flush="true"/>
<!--瀵艰埅缁撴潫-->
<div id="content">
- <!-- <div id="mapStatusOpts" class="map-status-container">
- <div class="layui-form layui-form-pane">
- <label class="layui-form-label">鏈烘埧绫诲瀷</label>
- <div class="layui-input-inline">
- <select name="warnType" id="warnType">
- <option value="0">鍏ㄩ儴</option>
- <option value="1">钀藉悗</option>
- <option value="2">鍛婅</option>
- <option value="3">寤舵椂</option>
- <option value="4">姝ｅ父</option>
- </select>
+
+ <div class="nav-map small">
+ <!-- 鍦板浘鍐呭绛涢�� -->
+ <div class="map-info-panel-left">
+ <div class="map-info-panel-content">
+ <div class="map-info">
+ <span>闄愬埗鏄剧ず鍖哄煙: </span><span class="k-point red" id="mapVsArea">涓浗</span>
+ <span class="mr5">鏈烘埧鏄剧ず绫诲瀷:</span><span class="k-point red" id="mapIconStyle">鍏ㄩ儴</span>
+ <span class="map-info-btn-icon" id="showMapInfoDetail" title="璇︽儏"><i class="fa fa-angle-double-down"></i></span>
+ </div>
+ <div class="map-info-detail">
+ <table>
+ <tbody>
+ <tr>
+ <td class="w8em alg-c">闄愬埗鏄剧ず鍖哄煙:</td>
+ <td>
+ <select name="mapVsAreaSel" id="mapVsAreaSel">
+ <option>涓浗</option>
+ <option>涓浗-骞胯タ</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <td class="w8em alg-c">鏈烘埧鏄剧ず绫诲瀷:</td>
+ <td>
+ <select name="mapIconStyleSel" id="mapIconStyleSel">
+ <option>鍏ㄩ儴</option>
+ <option>宸插畨瑁�</option>
+ <option>鏈畨瑁�</option>
+ </select>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="map-info-footer alg-r">
+ <button type="button" class="mr10 map-panel-hide" value="纭畾" id="mapPanelEn">纭畾</button>
+ <button type="button" class="mr10 map-panel-hide" value="闅愯棌">闅愯棌</button>
+ </div>
+ </div>
</div>
</div>
- </div> -->
- <div class="nav-map small">
<!-- 鐢垫睜鍒嗗竷鍥� -->
<div class="china-map" id="map">
<div class="img-change" style="display:none;">
@@ -370,6 +397,7 @@
var search;
var warnOpts;
//console.info(BMap);
+ var mapDefults = new Image().src = 'image/mapDefault.gif';
var mapImages = getMapImageUrl();
// 瀹氫箟鐪�-甯傝祫婧愬唴瀹�
var area = [
@@ -510,8 +538,8 @@
});
$(function() { // 鏄剧ず鍜岄殣钘忓浘鏍囪鏄�
- $('#map').on('click', '.explain-header', function() {
- $('#map .explain-list').fadeToggle();
+ $('.nav-map').on('click', '.explain-header', function() {
+ $('.explain-list').fadeToggle();
});
$('#map').on('dblclick', '.explain-header', function() {
@@ -597,7 +625,7 @@
centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣
map.enableScrollWheelZoom();
map.disableDoubleClickZoom();
- map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍�
+ //map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍�
// 娣诲姞鍦板浘绫诲瀷鎺т欢
map.addControl(new BMap.MapTypeControl());
// 缁欏湴鍥炬坊鍔犲伐鍏锋潯(鍦板浘-鍗槦-涓夌淮)鍜屾瘮渚嬪昂鎺т欢
@@ -638,6 +666,17 @@
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
+ text: '璁剧疆涓績鐐�',
+ callback: function(e) {
+ myConfirm.show({
+ title: '璁剧疆鍦板浘榛樿鏄剧ず浣嶇疆',
+ content: '鏄惁纭淇敼鍦板浘榛樿涓績鍧愭爣',
+ enfun:updateMapCenterPoint,
+ enparams:[e]
+ });
+ }
+ },
+ {
text: '鎼滅储鍦板潃',
callback: function(e) {
search.showSearch();
@@ -658,15 +697,11 @@
smallMap();
}
},
+
{
- text: '璁剧疆涓績鐐�',
- callback: function(e) {
- myConfirm.show({
- title: '璁剧疆鍦板浘榛樿鏄剧ず浣嶇疆',
- content: '鏄惁纭淇敼鍦板浘榛樿涓績鍧愭爣',
- enfun:updateMapCenterPoint,
- enparams:[e]
- });
+ text: '杩斿洖涓績鐐�',
+ callback: function(e){
+ centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣
}
}
];
@@ -1371,6 +1406,7 @@
});
$(window).resize(function() {
+ console.log(123);
getMapHt();
});
// 鏀瑰彉div鐨勫ぇ灏�
@@ -1474,9 +1510,10 @@
changeMapImgDesc(iconExplain, 'normal');
- mapEle.prepend(iconExplain);
+ mapEle.parent().append(iconExplain);
+
+
}
-
// 鍒囨崲鍦板浘鍥炬爣璇存槑
function changeMapImgDesc(iconExplain, type) {
iconExplain.find('.explain-list').remove();
@@ -1494,35 +1531,43 @@
function mapImgDescNormal(iconExplain) {
// 鏈烘埧钀藉悗
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
- var icon = $('<img src="'+mapImages.behind+'" style="float:left">');
- var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">鐢垫睜缁勮惤鍚庢満鎴�</span>');
- iconList.append(icon);
+ var input = $('<input type="checkbox" checked="checked">');
+ var icon = $('<img src="'+mapImages.behind+'">');
+ var span = $('<span>鐢垫睜缁勮惤鍚庢満鎴�</span>');
+ iconList.append(input);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
// 鏈烘埧鍛婅
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
- var icon = $('<img src="'+mapImages.warn+'" style="float:left;">');
- var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">鐢垫睜缁勫憡璀︽満鎴�</span>');
- iconList.append(icon);
+ var input = $('<input type="checkbox" checked="checked">');
+ var icon = $('<img src="'+mapImages.warn+'">');
+ var span = $('<span>鐢垫睜缁勫憡璀︽満鎴�</span>');
+ iconList.append(input);
iconList.append(span);
+ iconList.append(icon);
iconList.append('<div class="clear"></div>');
iconExplain.append(iconList);
// 鏈烘埧寤舵椂
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
- var icon = $('<img src="'+mapImages.timeout+'" style="float:left">');
- var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">鐢垫睜缁勬斁鐢靛欢鏃舵満鎴�</span>');
- iconList.append(icon);
+ var input = $('<input type="checkbox" checked="checked">');
+ var icon = $('<img src="'+mapImages.timeout+'">');
+ var span = $('<span>鐢垫睜缁勬斁鐢靛欢鏃舵満鎴�</span>');
+ iconList.append(input);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
// 姝ｅ父鏈烘埧
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
- var icon = $('<img src="'+mapImages.normal+'" style="float:left">');
- var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">姝ｅ父鏈烘埧</span>');
- iconList.append(icon);
+ var input = $('<input type="checkbox" checked="checked">');
+ var icon = $('<img src="'+mapImages.normal+'">');
+ var span = $('<span>姝ｅ父鏈烘埧</span>');
+ iconList.append(input);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
}
@@ -1532,16 +1577,16 @@
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
var icon = $('<img src="'+mapImages.nuclear+'" style="float:left">');
var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">鏍稿/鍋滅數鏀剧數</span>');
- iconList.append(icon);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
// 鍛婅
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
var icon = $('<img src="'+mapImages.devalarm+'" style="float:left;">');
var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">61850璁惧鍛婅</span>');
- iconList.append(icon);
iconList.append(span);
+ iconList.append(icon);
iconList.append('<div class="clear"></div>');
iconExplain.append(iconList);
@@ -1549,16 +1594,16 @@
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
var icon = $('<img src="'+mapImages.precharge+'" style="float:left">');
var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">61850棰勫厖鐢�</span>');
- iconList.append(icon);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
// 鍦ㄧ嚎娴厖
var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');
var icon = $('<img src="'+mapImages.float+'" style="float:left">');
var span = $('<span style="line-height: 30px; text-align:center; margin-left: 4px">61850鍦ㄧ嚎娴厖</span>');
- iconList.append(icon);
iconList.append(span);
+ iconList.append(icon);
iconExplain.append(iconList);
}
@@ -1608,7 +1653,7 @@
}
// 鐢熸垚鍦板浘鍥炬爣
- function createMapDot(map, dotList) {
+ function createMapDot(map, dotList, isTop) {
// 娓呯┖瑕嗙洊鐗╁拰瀵瑰簲鐨刴k鐐�
mkList = [];
@@ -1643,6 +1688,11 @@
//showMapPanel(target, dotList);
searchPanelInfo(target);
});
+
+ if(isTop) {
+ mk.setTop(true);
+ }
+
mkList.push(mk);
// 鍚戝湴鍥炬坊鍔犺鐩栫墿
map.addOverlay(mk);
@@ -2215,11 +2265,12 @@
}
}
- createMapDot(map, updateStationData);
+ //console.log(updateStationData);
+ createMapDot(map, updateStationData, true);
// 鏇存柊鍒嗛〉淇℃伅
mapPages.pageCurr++;
- if(mapPages.pageCurr>mapPages.pageNum) {
+ if(mapPages.pageCurr>mapPages.pageNum || updateStationData.length<mapPages.pageSize) {
mapPages.pageCurr=1;
mapPages.pageNew=false;
}
@@ -2865,6 +2916,7 @@
rs.devalarm = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_dev_alarm}"; // 璁惧鍛婅
rs.precharge = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_pre_charge}"; // 棰勫厖鐢�
rs.float = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_online_charge}"; // 娴厖
+ rs.defaults = mapDefults;
return rs;
}
/* $(function(){
@@ -3143,6 +3195,9 @@
function getMapStateImg(imgs, cla) {
var rs = imgs.normal;
switch(cla) {
+ case 'item-normal':
+ rs = imgs.normal;
+ break
case 'item-warn': // 鍛婅
rs = imgs.warn;
break;
@@ -3163,6 +3218,9 @@
break;
case 'item-pre_charge': // 61850棰勫厖鐢�
rs = imgs.precharge;
+ break;
+ default:
+ rs = imgs.defaults;
break;
}
@@ -3485,6 +3543,62 @@
});
}
+ // 鍦板浘宸︿笂鏂归潰鏉挎ā鍧�
+ var mapViewArea = GLOBAL.BMap.mapViewArea; // 鍦板浘鏄剧ず鍖哄煙鐨勪俊鎭�
+ // 鐐瑰嚮闈㈡澘涓婃柟鐨勫皬鍥炬爣鏄剧ず璁惧畾淇℃伅
+ $('#showMapInfoDetail').click(function() {
+ $('.map-info-detail').slideToggle();
+ });
+
+ // 鐐瑰嚮闅愯棌
+ $('.map-info-detail .map-panel-hide').click(function() {
+ $('.map-info-detail').slideUp();
+ });
+
+ // 閬嶅巻mapViewArea鑾峰彇mapVsAreaSel涓嬫媺妗嗙殑鍊�
+ var mapVsAreaSel = $('#mapVsAreaSel');
+ var mapVsAreaSelOpts = [];
+ for(var i=0; i<mapViewArea.length; i++) {
+ var _data = mapViewArea[i];
+ var tmp = getOptionsData(_data.name, _data.area, _data);
+ mapVsAreaSelOpts.push(tmp);
+ }
+ // 鐢熸垚闈㈡澘涓殑mapVsAreaSel
+ createOptions(mapVsAreaSel, mapVsAreaSelOpts);
+ // 鏄剧ず榛樿鍖哄煙-涓浗
+ setMapViewArea(mapViewArea[0]);
+ centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣
+ // 鐐瑰嚮闈㈡澘纭畾鎸夐挳
+ $('#mapPanelEn').click(function() {
+ var areaData = mapVsAreaSel.find('option:selected').data('attr');
+
+ // 璁剧疆澶撮儴鍙鍖哄煙鐨勬枃鏈�
+ $('#mapVsArea').text(areaData.name);
+
+ // 璁剧疆鍙鍖哄煙
+ setMapViewArea(areaData);
+ });
+
+ // 璁剧疆鍦板浘鐨勫彲瑙嗗尯鍩�
+ function setMapViewArea(data) {
+ var left = new BMap.Point(data.left.lng, data.left.lat);
+ var right = new BMap.Point(data.right.lng, data.right.lat);
+ var b = new BMap.Bounds(left, right);
+
+ var cLng = (data.left.lng+data.right.lng)/2;
+ var cLat = (data.left.lat+data.right.lat)/2;
+ var f = new BMap.Point(cLng, cLat);
+ map.panTo(f, {
+ noAnimation: "no"
+ });
+
+
+ try {
+ BMapLib.AreaRestriction.setBounds(map, b);
+ } catch (e) {
+ alert(e);
+ }
+ }
});
</script>
</html>
--
Gitblit v1.9.1