From 4b36aae25e9c0c8b969e548db06b2b38af2a3fd0 Mon Sep 17 00:00:00 2001 From: Catouse Date: Mon, 23 Dec 2019 15:26:21 +0800 Subject: [PATCH] * support export annual data to image file, task #6762. --- module/report/css/annualdata.css | 13 ++++++- module/report/js/annualdata.js | 47 +++++++++++++++++++++++++- module/report/view/annualdata.html.php | 9 ++++- www/js/html2canvas/min.js | 14 ++++++++ 4 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 www/js/html2canvas/min.js diff --git a/module/report/css/annualdata.css b/module/report/css/annualdata.css index 2d0c276836..40a91518b7 100644 --- a/module/report/css/annualdata.css +++ b/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;} diff --git a/module/report/js/annualdata.js b/module/report/js/annualdata.js index b1faa44fa9..7ebcb1c429 100644 --- a/module/report/js/annualdata.js +++ b/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(); + }); }); diff --git a/module/report/view/annualdata.html.php b/module/report/view/annualdata.html.php index 2da0a65b05..64ca105a24 100644 --- a/module/report/view/annualdata.html.php +++ b/module/report/view/annualdata.html.php @@ -1,6 +1,8 @@ +
)'> -
)'> +
+
)'>
@@ -65,7 +67,12 @@ +
+ + +
+