* support export annual data to image file, task #6762.

module/report/css/annualdata.css

@@ -2,13 +2,24 @@
 body {height: 100vh; padding: 0;}
 #container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: #010417; color: #fff; background-size: cover; overflow: auto;}
 #container:before {content: ' '; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; opacity: 0.9; background: #010419;}
-#main {min-width: 1280px; min-height: 800px; position: absolute; z-index: 10; padding: 0;}
+#main {min-width: 1280px; min-height: 800px; position: absolute; z-index: 10; padding: 0; background-size: cover;}
 #main > section {position: absolute; }
 #main > section > header {height: 24px;}
 #main > section > header > h2 {line-height: 24px; font-size: 14px; padding: 0 8px; float: left; margin: 0; position: relative; background: #1a77a5; position: relative; font-weight: normal;}
 #main > section > header > h2:after {content: ' '; display: block; position: absolute; top: 0; right: -40px; bottom: 0; width: 40px; background: linear-gradient(to right, #1a77a5 0%, transparent 100%);}
+#mainBg {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
+.exporting #mainBg {background-color: rgb(1, 4, 25, .9);}
+#loadIndicator {position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1000; visibility: hidden;}
+#loadIndicator.loading {visibility: visible;}
+#loadIndicator:before {background-color: rgba(50,50,50,.65);}
+#loadIndicator:after {font-size: 30px}
 
 #header > h1 {width: 500px; margin: 40px auto 0; height: 58px; font-weight: normal; text-align: center; font-size: 20px; display: block; line-height: 58px; position: relative; left: -30px;}
+#toolbar {position: absolute; right: 33px; top: 80px; text-align: center;}
+.exporting #toolbar {display: none;}
+#toolbar .btn-primary {border-color: #1a77a5; background-color: transparent; padding: 6px 7px;}
+#toolbar .btn-primary:hover,
+#toolbar .btn-primary:focus {border-color: #B5E8FF; background-color: #1a77a5;}
 
 #block1 {left: 25px; top: 128px; width: 366px; height: 283px;}
 #block1 > header {margin-top: 7px;}

module/report/js/annualdata.js

@@ -1,4 +1,8 @@
-// Show or refresh annual data
+/**
+ * Show or refresh annual data
+ * @param {Object} data Annual data object
+ * @return {void}
+ */
 function showAnnualData(data)
 {
     // Block 1
@@ -135,6 +139,42 @@ function showAnnualData(data)
     });
 }
 
+/**
+ * Export annual data to image file
+ * @param {function} sucessCallback
+ * @param {function} errorCallback
+ * @return {void}
+ */
+function exportAnnualImage(sucessCallback, errorCallback)
+{
+    var $main = $('#main');
+    if($main.hasClass('exporting')) return;
+    var $loading = $('#loadIndicator');
+    $loading.addClass('loading');
+    var $container = $('#container');
+    $main.addClass('exporting').css('backgroundImage', $container.css('backgroundImage'));
+    var afterFinish = function(canvas)
+    {
+        $main.removeClass('exporting').css('backgroundImage', 'none');
+        $loading.removeClass('loading');
+    };
+    html2canvas($main[0], {logging: false}).then(function(canvas)
+    {
+        canvas.onerror = function()
+        {
+            afterFinish(canvas);
+            if(errorCallback) errorCallback('Cannot convert image to blob.');
+        };
+        canvas.toBlob(function(blob)
+        {
+            var imageUrl = URL.createObjectURL(blob);
+            $('#imageDownloadBtn').attr({href: imageUrl})[0].click();
+            if(sucessCallback) sucessCallback(imageUrl);
+            afterFinish(canvas);
+        });
+    });
+}
+
 $(function()
 {
     var $main = $('#main');
@@ -149,4 +189,9 @@ $(function()
     };
     ajustPosition();
     $(window).on('resize', ajustPosition);
+
+    $('#exportBtn').on('click', function()
+    {
+        exportAnnualImage();
+    });
 });

module/report/view/annualdata.html.php

@@ -1,6 +1,8 @@
 <?php include '../../common/view/header.lite.html.php';?>
+<?php js::import($jsRoot . 'html2canvas/min.js'); ?>
 <div id='container' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_bg.png'?>)'>
-  <main id="main" style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_layout.png'?>)'>
+  <main id='main'>
+    <div id='mainBg' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_layout.png'?>)'></div>
     <header id='header'>
       <h1 class='text-holder' data-id='title'></h1>
     </header>
@@ -65,7 +67,12 @@
       </header>
       <canvas id='block5Chart' width='520' height='240'></canvas>
     </section>
+    <div id='toolbar'>
+      <button type='button' class='btn btn-primary' id='exportBtn'><i class='icon icon-export'></i></button>
+      <a id='imageDownloadBtn' class='hidden' download='annual_data.png'></a>
+    </div>
   </main>
+  <div id='loadIndicator' class='load-indicator'></div>
 </div>
 <script>
 // 年度数据示例