hdw
2018-10-29 18e6ddefd900e5780f953fe926eb2e3d8cab537c
gx_tieta/WebRoot/index.jsp
@@ -39,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
@@ -109,36 +109,47 @@
      <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;">
@@ -527,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() {
@@ -689,10 +700,10 @@
               
               {
                  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)) {
@@ -1499,9 +1510,10 @@
      
      changeMapImgDesc(iconExplain, 'normal');
      
      mapEle.prepend(iconExplain);
      mapEle.parent().append(iconExplain);
   }
   // 切换地图图标说明
   function changeMapImgDesc(iconExplain, type) {
      iconExplain.find('.explain-list').remove();
@@ -1519,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);
   }
   
@@ -1557,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);
      
@@ -1574,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);
   }
   
@@ -3522,14 +3542,57 @@
              }             
         });
      }
      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) {