数据全屏

app/view/tender/detail.ejs

@@ -20,6 +20,7 @@
             <% } %>
             <div class="ml-auto">
                 <div class="dropdown d-flex float-left mt-1 mr-2">
+                    <button id="showFull" class="btn btn-sm btn-outline-dark mr-2">全屏</button>
                     <a class="btn btn-sm btn-outline-dark dropdown-toggle dropdown-wd" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         标段
                     </a>
@@ -53,7 +54,16 @@
             </div>
         </div>
     </div>
-    <div class="content-wrap">
+    <div class="content-wrap" id="big-data">
+        <div style="height: 34px;background-color: #2c3237" id="exitfull-div">
+            <div class="title-main d-flex">
+                <div class="ml-auto">
+                    <div class="dropdown d-flex float-left mt-1 mr-2">
+                        <button id="exitFull" class="btn btn-sm btn-outline-secondary ml-auto">退出全屏</button>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="c-body" style="background:#2c3237 !important">
             <div class="sjs-height-0">
             <!--<div class="auto-main-height">-->
@@ -367,26 +377,6 @@
     </div>
 </div>
 </div>
-
-<script src="/public/js/sub_menu.js"></script>
-<script>
-    $.subMenu({
-        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
-        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
-        key: 'menu.1.0.0',
-        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
-        callback: function (info) {
-            if (info.mini) {
-                $('.panel-title').addClass('fluid');
-                $('#sub-menu').removeClass('panel-sidebar');
-            } else {
-                $('.panel-title').removeClass('fluid');
-                $('#sub-menu').addClass('panel-sidebar');
-            }
-            autoFlashHeight();
-        }
-    });
-</script>
 <script type="text/javascript">
     const tenders = JSON.parse(unescape('<%- escape(JSON.stringify(tenders)) %>'));
     const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
@@ -965,18 +955,6 @@
     myChart5.setOption(option5);
 
     function echartsReset() {
-        // myChart.clear();
-        // myChart1.clear();
-        // myChart2.clear();
-        // myChart3.clear();
-        // myChart4.clear();
-        // myChart5.clear();
-        // myChart.setOption(option);
-        // myChart1.setOption(option1);
-        // myChart2.setOption(option2);
-        // myChart3.setOption(option3);
-        // myChart4.setOption(option4);
-        // myChart5.setOption(option5);
         myChart.resize();
         myChart1.resize();
         myChart2.resize();
@@ -991,9 +969,74 @@
             myChart3.resize();
             myChart4.resize();
         });
+
+        $('#showFull').click(function () {
+            const full=document.getElementById("big-data");
+            launchIntoFullscreen(full);
+            // $('#exitFull').show();
+            // $('#showFull').hide();
+        });
+        $('#exitFull').click(function () {
+            exitFullscreen();
+            // $('#exitFull').hide();
+            // $('#showFull').show();
+        })
     })
 
     $(window).resize(echartsReset);
+    // 数据全屏
+    function launchIntoFullscreen(element) {
+        if(element.requestFullscreen){
+            element.requestFullscreen();
+        }
+        else if(element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        }
+        else if(element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        }
+        else if(element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+    function exitFullscreen() {
+        if(document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if(document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if(document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    }
+    document.addEventListener("fullscreenchange", function (event) {
+        if (document.fullscreenElement) {
+            $('#exitfull-div').show();
+            $('#showFull').hide();
+        } else {
+            $('#exitfull-div').hide();
+            $('#showFull').show();
+        }
+    });
+</script>
+<script src="/public/js/sub_menu.js"></script>
+<script>
+    $.subMenu({
+        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
+        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
+        key: 'menu.1.0.0',
+        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
+        callback: function (info) {
+            if (info.mini) {
+                $('.panel-title').addClass('fluid');
+                $('#sub-menu').removeClass('panel-sidebar');
+            } else {
+                $('.panel-title').removeClass('fluid');
+                $('#sub-menu').addClass('panel-sidebar');
+            }
+            autoFlashHeight();
+            echartsReset();
+        }
+    });
 </script>
 <script>
     const tenderId = parseInt('<%- tender.id %>');