From 80d3e2eb20e671954fde45e43889bf8f4befdccf Mon Sep 17 00:00:00 2001 From: 81041 <81041@192.168.10.25> Date: 星期二, 30 十月 2018 15:47:11 +0800 Subject: [PATCH] 第三层修改distinct --- gx_tieta/WebRoot/index.jsp | 290 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 235 insertions(+), 55 deletions(-) diff --git a/gx_tieta/WebRoot/index.jsp b/gx_tieta/WebRoot/index.jsp index d81e5ce..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 @@ -83,12 +85,17 @@ overflow-y: auto; overflow-x: hidden; } + .BMapLib_bubble_content a { + color: #2A3AF0; + } + .BMapLib_bubble_content a:hover { + text-decoration: underline; + } body .layui-layer-dialog { min-width:400px; } </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> @@ -102,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">姝e父</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;"> @@ -364,6 +397,7 @@ var search; var warnOpts; //console.info(BMap); + var mapDefults = new Image().src = 'image/mapDefault.gif'; var mapImages = getMapImageUrl(); // 瀹氫箟鐪�-甯傝祫婧愬唴瀹� var area = [ @@ -504,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() { @@ -591,7 +625,7 @@ centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣 map.enableScrollWheelZoom(); map.disableDoubleClickZoom(); - map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍� + //map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍� // 娣诲姞鍦板浘绫诲瀷鎺т欢 map.addControl(new BMap.MapTypeControl()); // 缁欏湴鍥炬坊鍔犲伐鍏锋潯(鍦板浘-鍗槦-涓夌淮)鍜屾瘮渚嬪昂鎺т欢 @@ -632,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(); @@ -652,15 +697,11 @@ smallMap(); } }, + { - text: '璁剧疆涓績鐐�', - callback: function(e) { - myConfirm.show({ - title: '璁剧疆鍦板浘榛樿鏄剧ず浣嶇疆', - content: '鏄惁纭淇敼鍦板浘榛樿涓績鍧愭爣', - enfun:updateMapCenterPoint, - enparams:[e] - }); + text: '杩斿洖涓績鐐�', + callback: function(e){ + centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣 } } ]; @@ -1365,6 +1406,7 @@ }); $(window).resize(function() { + console.log(123); getMapHt(); }); // 鏀瑰彉div鐨勫ぇ灏� @@ -1468,9 +1510,10 @@ changeMapImgDesc(iconExplain, 'normal'); - mapEle.prepend(iconExplain); + mapEle.parent().append(iconExplain); + + } - // 鍒囨崲鍦板浘鍥炬爣璇存槑 function changeMapImgDesc(iconExplain, type) { iconExplain.find('.explain-list').remove(); @@ -1488,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); // 姝e父鏈烘埧 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">姝e父鏈烘埧</span>'); - iconList.append(icon); + var input = $('<input type="checkbox" checked="checked">'); + var icon = $('<img src="'+mapImages.normal+'">'); + var span = $('<span>姝e父鏈烘埧</span>'); + iconList.append(input); iconList.append(span); + iconList.append(icon); iconExplain.append(iconList); } @@ -1526,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); @@ -1543,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); } @@ -1602,7 +1653,7 @@ } // 鐢熸垚鍦板浘鍥炬爣 - function createMapDot(map, dotList) { + function createMapDot(map, dotList, isTop) { // 娓呯┖瑕嗙洊鐗╁拰瀵瑰簲鐨刴k鐐� mkList = []; @@ -1637,6 +1688,11 @@ //showMapPanel(target, dotList); searchPanelInfo(target); }); + + if(isTop) { + mk.setTop(true); + } + mkList.push(mk); // 鍚戝湴鍥炬坊鍔犺鐩栫墿 map.addOverlay(mk); @@ -1763,7 +1819,7 @@ function showMapPanel(target, warnList) { var point = target.point; - console.log(target.getLabel()); + //console.log(target.getLabel()); var searchInforWin = null; for(var i = 0; i < warnList.length; i++) { if(warnList[i].lng == point.lng && warnList[i].lat == point.lat) { @@ -2108,7 +2164,7 @@ var allStation = []; var mapPages = { - pageSize:100, // 姣忛〉鐨勮鏁� + pageSize:50, // 姣忛〉鐨勮鏁� pageCurr:1, // 褰撳墠椤电爜鏁� pageAll:1, // 鏁扮洰 pageNum: 0, @@ -2197,6 +2253,7 @@ data: "json="+JSON.stringify(mapPages), success: function(result) { var data = JSON.parse(result.result); + //console.log(data); for(var i=0; i<data.length; i++) { var _data = data[i]; var _list = formatUpdateStation(_data); @@ -2208,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; } @@ -2246,7 +2304,6 @@ alert('闈㈡澘淇℃伅鏌ヨ澶辫触锛�'); return; } - var temp = { StationId: stationInfo.sId }; @@ -2859,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(){ @@ -3137,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; @@ -3157,6 +3218,9 @@ break; case 'item-pre_charge': // 61850棰勫厖鐢� rs = imgs.precharge; + break; + default: + rs = imgs.defaults; break; } @@ -3390,10 +3454,22 @@ id: 'pie', title: '楗肩姸鍥鹃厤缃�', maxHeight: 450, - yes: function(index, kk) { + content: html, + yes: function(index) { + var iptList = $('#tplTblOpts .tpl-tbl-opts-header input[type=checkbox]'); + var iptArr = []; + iptList.each(function() { + if($(this).is(':checked')) { + iptArr.push(1); + }else { + iptArr.push(0); + } + }); - }, - content: html + var temp = structUpdatePie(iptArr); + layer.load(); + updateUserBieState(temp); + } }); }); } @@ -3411,7 +3487,6 @@ var tmp = {}; var num = i+1; var key = 'echarts'+num+'_enable'; - console.log(key); tmp.name = pieType[i].name; tmp.status = result[key]; data.tblData.push(tmp); @@ -3419,6 +3494,111 @@ return data; } + + + // 鏋勯�犳洿鏂伴ゼ鐘跺浘鍙傛暟 + function structUpdatePie(arr) { + var rs = { + echarts1_enable:0, + echarts2_enable:0, + echarts3_enable:0, + echarts4_enable:0, + echarts5_enable:0, + echarts6_enable:0, + echarts7_enable:0, + echarts8_enable:0, + echarts9_enable:0, + echarts10_enable:0 + }; + + // 閬嶅巻arr缁檙s鍊奸噸瀹氫箟 + for(var i=0; i<arr.length; i++) { + var num = i+1; + var key = 'echarts'+num+'_enable'; + rs[key] = arr[i]; + } + + return rs; + } + + // 鏇存柊褰撳墠鐢ㄦ埛璁剧疆楗肩姸鍥剧殑浣胯兘鐘舵�� + function updateUserBieState(temp, dialog, load){ + // 鏇存柊鍚庡彴鏁版嵁 + $.ajax({ + type:"post", + url: "Echarts_usrAction!add", + async:true, + dataType:'json', + data:'json='+JSON.stringify(temp), + success: function(data){ + layer.closeAll(); + + var model = eval('('+data.result+')'); + if(model.code == 1) { + layer.msg('閰嶇疆鎴愬姛锛侊紒锛�'); + }else { + layer.msg('閰嶇疆澶辫触锛侊紒锛�'); + } + } + }); + } + + // 鍦板浘宸︿笂鏂归潰鏉挎ā鍧� + 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