1.嘉定图层控制面板需要伸缩的方式

王通
1 parent 91b935c9
Showing 3 changed files with 28 additions and 6 deletions
src/main/resources/static/real_control_v2/mapmonitor/css/real.css
src/main/resources/static/real_control_v2/mapmonitor/js/real.js
src/main/resources/static/real_control_v2/mapmonitor/real.html
@@ -172,7 +172,7 @@ input[type=checkbox].disabled{
 .real_bottom_panel{
  
     position: absolute !important;
-    height: 192px;
+    height: 384px;
     bottom: 2px !important;
     background: #fff;
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -25,7 +25,7 @@ var mapmonitor_load_ep = EventProxy.create(&#39;load_iMap&#39;, &#39;load_baidu&#39;, &#39;load_gaod
     });
 */
  
-    var maxHeight=384, minHeight=124, threshold=8;
+    /*var maxHeight=384, minHeight=124, threshold=8;
     $(".real_bottom_panel").on('mousewheel', function (e) {
         var event = e.originalEvent;
         var code = delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
@@ -39,10 +39,32 @@ var mapmonitor_load_ep = EventProxy.create(&#39;load_iMap&#39;, &#39;load_baidu&#39;, &#39;load_gaod
             $(this).height(h<maxHeight?h:maxHeight);
         }
         return false;
-    });
-
-    $('.real_bottom_panel .telescopic').on('click', function () {
+    });*/
  
+    var maxHeight = 384, minHeight = 24;
+    $('.telescopic').on('click', function () {
+    	var height = $('.real_bottom_panel').height(), intervalId;
+    	if (height == minHeight) {
+    		intervalId = setInterval(() => {
+    			if (height < maxHeight) {
+    				height += 8;
+    				$('.real_bottom_panel').height(height);
+    			} else {
+    				$('.telescopic').html('<i class="uk-icon-angle-double-down"></i>');
+    				clearInterval(intervalId);
+    			}
+			}, 20);
+    	} else {
+    		intervalId = setInterval(() => {
+    			if (height > minHeight) {
+    				height -= 8;
+    				$('.real_bottom_panel').height(height);
+    			} else {
+    				$('.telescopic').html('<i class="uk-icon-angle-double-up"></i>');
+    				clearInterval(intervalId);
+    			}
+			}, 20);
+    	}
     });
 });
  
@@ -30,7 +30,7 @@
     <!--<div id="handle" class="ui-resizable-handle ui-resizable-n"></div>-->
     <div class="real_br_cont map_config_wrap"></div>
     <div class="telescopic">
-        <i class="uk-icon-angle-double-up"></i>
+        <i class="uk-icon-angle-double-down"></i>
     </div>
 </div>