| | |
| | | <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
|
| | |
| | | <jsp:include page="nav.jsp" flush="true"/>
|
| | | <!--导航结束-->
|
| | | <div id="content">
|
| | | <!-- 地图内容筛选 -->
|
| | | <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>
|
| | | </div>
|
| | | <div class="map-info-detail">
|
| | | <table>
|
| | | <tbody>
|
| | | <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 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;">
|
| | |
| | | });
|
| | |
|
| | | $(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() {
|
| | |
| | |
|
| | | {
|
| | | text: '返回中心点',
|
| | | callback: function(e) {
|
| | | centerMapByPoint(map);
|
| | | callback: function(e){
|
| | | centerMapByPoint(map); // 根据当前用户设定的位置显示中心点
|
| | | }
|
| | | },
|
| | | }
|
| | | ];
|
| | | //console.info(getPermit('taskchange_edit_permit', permits)+"*******");
|
| | | if(getPermit('batt_map_edit_permit', permits)) {
|
| | |
| | |
|
| | | changeMapImgDesc(iconExplain, 'normal');
|
| | |
|
| | | mapEle.prepend(iconExplain);
|
| | | mapEle.parent().append(iconExplain);
|
| | | |
| | | |
| | | }
|
| | | |
| | | // 切换地图图标说明
|
| | | function changeMapImgDesc(iconExplain, type) {
|
| | | iconExplain.find('.explain-list').remove();
|
| | |
| | | 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);
|
| | | }
|
| | |
|
| | |
| | | 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);
|
| | |
|
| | |
| | | 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);
|
| | | }
|
| | |
|
| | |
| | | }
|
| | | });
|
| | | }
|
| | | var mapViewArea = GLOBAL.BMap.mapViewArea;
|
| | | |
| | | // 地图左上方面板模块
|
| | | 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]); |
| | | 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) {
|