首页改成流量统计,导出图片改为js

This commit is contained in:
zhanghongqing
2018-11-15 10:32:17 +08:00
parent 6567718bad
commit 5507cd2e35
7 changed files with 37 additions and 111 deletions

View File

@@ -700,13 +700,5 @@
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-all</artifactId>
<version>1.10</version>
</dependency>
</dependencies>
</project>

View File

@@ -1,9 +1,5 @@
package com.nis.web.controller.dashboard;
import java.awt.Color;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.io.StringReader;
import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.HashMap;
@@ -11,18 +7,9 @@ import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.batik.transcoder.SVGAbstractTranscoder;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.ImageTranscoder;
import org.apache.batik.transcoder.image.JPEGTranscoder;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
@@ -45,7 +32,6 @@ import com.nis.domain.SysDataDictionaryItem;
import com.nis.domain.configuration.WebsiteDomainTopic;
import com.nis.util.CodeDicUtils;
import com.nis.util.Constants;
import com.nis.util.DateUtils;
import com.nis.util.DictUtils;
import com.nis.util.StringUtil;
import com.nis.util.httpclient.HttpClientUtil;
@@ -791,78 +777,5 @@ public class DashboardController extends BaseController{
System.out.println(map2.get("c"));
}
/**
* HighCharts导出图片
* @param response
* @param request
* @param page
* @throws ServletException, IOException
*/
@RequestMapping(value="saveAsImage")
public void toSaveAsImage(HttpServletResponse response,HttpServletRequest request) throws ServletException, IOException{
request.setCharacterEncoding("utf-8"); //设置UTF-8编码解决乱码问题
String type = request.getParameter("type");
String svg = request.getParameter("svg");
String filename = request.getParameter("filename");
filename = filename==null?"chart":filename;
ServletOutputStream out = response.getOutputStream();
if (null != type && null != svg) {
svg = svg.replaceAll(":rect", "rect");
String ext = "";
PNGTranscoder t = null;
JPEGTranscoder t1=null;
if (type.equals("image/png")) {
ext = "png";
t = new PNGTranscoder();
t.addTranscodingHint( ImageTranscoder.KEY_BACKGROUND_COLOR, Color.black);
} else if (type.equals("image/jpeg")) {
ext = "jpg";
t1 = new JPEGTranscoder();
t1.addTranscodingHint( ImageTranscoder.KEY_BACKGROUND_COLOR, Color.black);
} /*else if (type.equals("application/pdf")) {
ext = "pdf";
t = new PDFTranscoder();
}*/ else if(type.equals("image/svg+xml"))
ext = "svg";
String dateTime = DateUtils.getDateTime();
response.addHeader("Content-Disposition", "attachment; filename="+ filename+"-"+dateTime + "."+ext);
response.addHeader("Content-Type", type);
if (null != t) {
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
try {
((SVGAbstractTranscoder) t).transcode(input, output);
} catch (TranscoderException e) {
out.print("Problem transcoding stream. See the web logs for more details.");
e.printStackTrace();
}
} else if (null != t1) {
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
try {
((SVGAbstractTranscoder) t1).transcode(input, output);
} catch (TranscoderException e) {
out.print("Problem transcoding stream. See the web logs for more details.");
e.printStackTrace();
}
} else if (ext.equals("svg")) {
// out.print(svg);
OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
writer.append(svg);
writer.close();
} else
out.print("Invalid type: " + type);
} else {
response.addHeader("Content-Type", "text/html");
out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
"\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
}
out.flush();
out.close();
}
}

View File

@@ -374,6 +374,8 @@
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/sunburst.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
<script src="${pageContext.request.contextPath}/static/pages/scripts/echart.js"></script>
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>

View File

@@ -17,7 +17,7 @@
sessionStorage.setItem("log_total","${log_total}");
sessionStorage.setItem("log_time_start","${log_time_start}");
sessionStorage.setItem("log_time_range","${log_time_range}");
window.frames['mainFrame'].location="${ctx}/configure/statistics/configureStateStatistics";
window.frames['mainFrame'].location="${ctx}/dashboard/logChart";
//国际化切换
var lang = "${cookie.Language.value }".toLowerCase();
var $obj;
@@ -438,7 +438,7 @@ background:#3d3d3d;
<div class="page-bar">
<ul class="page-breadcrumb">
<li><a href="${ctx}/configure/statistics/configureStateStatistics" target="mainFrame"><spring:message code="home"></spring:message></a> <i class="fa fa-circle"></i></li>
<li><a href="${ctx}/dashboard/logChart" target="mainFrame"><spring:message code="home"></spring:message></a> <i class="fa fa-circle"></i></li>
</ul>
</div>

View File

@@ -6,10 +6,10 @@
License: www.highcharts.com/license
*/
(function(h){"object"===typeof module&&module.exports?module.exports=h:h(Highcharts)})(function(h){(function(f){var h=f.defaultOptions,z=f.doc,A=f.Chart,w=f.addEvent,H=f.removeEvent,D=f.fireEvent,q=f.createElement,B=f.discardElement,u=f.css,p=f.merge,r=f.pick,k=f.each,E=f.objectEach,t=f.extend,I=f.isTouchDevice,C=f.win,F=C.navigator.userAgent,J=f.Renderer.prototype.symbols;/Edge\/|Trident\/|MSIE /.test(F);/firefox/i.test(F);t(h.lang,{/*printChart:"Print chart",*/downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",
/*downloadPDF:"Download PDF document",*//*downloadSVG:"Download SVG vector image",*/contextButtonTitle:"Chart context menu"});h.navigation={buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}};p(!0,h.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",background:"none",color:"#333333",fontSize:I?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",
color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{fill:"#ffffff",stroke:"none",padding:5}}});h.exporting={type:"image/png",url:"${pageContext.request.contextPath}/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",_titleKey:"contextButtonTitle",menuItems:"printChart separator downloadPNG downloadJPEG".split(" ")}},menuItemDefinitions:{/*printChart:{textKey:"printChart",
onclick:function(){this.print()}},*//*separator:{separator:!0},*/downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},/*downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},*//*downloadSVG:{textKey:"downloadSVG",onclick:function(){this.exportChart({type:"image/svg+xml"})}}*/}};f.post=function(a,b,e){var c=q("form",p({method:"post",action:a,enctype:"multipart/form-data"},
(function(h){"object"===typeof module&&module.exports?module.exports=h:h(Highcharts)})(function(h){(function(f){var h=f.defaultOptions,z=f.doc,A=f.Chart,w=f.addEvent,H=f.removeEvent,D=f.fireEvent,q=f.createElement,B=f.discardElement,u=f.css,p=f.merge,r=f.pick,k=f.each,E=f.objectEach,t=f.extend,I=f.isTouchDevice,C=f.win,F=C.navigator.userAgent,J=f.Renderer.prototype.symbols;/Edge\/|Trident\/|MSIE /.test(F);/firefox/i.test(F);t(h.lang,{/*printChart:"Print chart",*//*downloadPNG:"Download PNG image",*/downloadJPEG:"Download JPEG image",
/*downloadPDF:"Download PDF document",*//*downloadSVG:"Download SVG vector image",*/contextButtonTitle:"download"});h.navigation={buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}};p(!0,h.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",background:"none",color:"#333333",fontSize:I?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",
color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{fill:"#ffffff",stroke:"none",padding:5}}});h.exporting={type:"image/jpeg",url:"${pageContext.request.contextPath}/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",_titleKey:"contextButtonTitle",menuItems:"downloadJPEG".split(" ")}},menuItemDefinitions:{/*printChart:{textKey:"printChart",
onclick:function(){this.print()}},*//*separator:{separator:!0},*//*downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},*/downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},/*downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},*//*downloadSVG:{textKey:"downloadSVG",onclick:function(){this.exportChart({type:"image/svg+xml"})}}*/}};f.post=function(a,b,e){var c=q("form",p({method:"post",action:a,enctype:"multipart/form-data"},
e),{display:"none"},z.body);E(b,function(a,b){q("input",{type:"hidden",name:b,value:a},null,c)});c.submit();B(c)};t(A.prototype,{sanitizeSVG:function(a,b){if(b&&b.exporting&&b.exporting.allowHTML){var e=a.match(/<\/svg>(.*?$)/);e&&e[1]&&(e='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+b.chart.width+'" height\x3d"'+b.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+e[1]+"\x3c/body\x3e\x3c/foreignObject\x3e",a=a.replace("\x3c/svg\x3e",e+"\x3c/svg\x3e"))}a=a.replace(/zIndex="[^"]+"/g,
"").replace(/isShadow="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/<\/svg>.*?$/,"\x3c/svg\x3e").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/&nbsp;/g,
"\u00a0").replace(/&shy;/g,"\u00ad");this.ieSanitizeSVG&&(a=this.ieSanitizeSVG(a));return a},getChartHTML:function(){return this.container.innerHTML},getSVG:function(a){var b,e,c,v,m,g=p(this.options,a);e=q("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},z.body);c=this.renderTo.style.width;m=this.renderTo.style.height;c=g.exporting.sourceWidth||g.chart.width||/px$/.test(c)&&parseInt(c,10)||600;m=g.exporting.sourceHeight||g.chart.height||/px$/.test(m)&&

View File

@@ -0,0 +1,19 @@
/*
Highcharts JS v6.1.0 (2018-04-13)
Client side exporting module
(c) 2015 Torstein Honsi / Oystein Moseng
License: www.highcharts.com/license
*/
(function(n){"object"===typeof module&&module.exports?module.exports=n:n(Highcharts)})(function(n){(function(c){function n(a,f){var d=t.getElementsByTagName("head")[0],b=t.createElement("script");b.type="text/javascript";b.src=a;b.onload=f;b.onerror=function(){c.error("Error loading script "+a)};d.appendChild(b)}var C=c.merge,e=c.win,r=e.navigator,t=e.document,w=c.each,x=e.URL||e.webkitURL||e,B=/Edge\/|Trident\/|MSIE /.test(r.userAgent),D=/Edge\/\d+/.test(r.userAgent),E=B?150:0;c.CanVGRenderer={};
c.dataURLtoBlob=function(a){if(e.atob&&e.ArrayBuffer&&e.Uint8Array&&e.Blob&&x.createObjectURL){a=a.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);for(var c=e.atob(a[3]),d=new e.ArrayBuffer(c.length),d=new e.Uint8Array(d),b=0;b<d.length;++b)d[b]=c.charCodeAt(b);a=new e.Blob([d],{type:a[1]});return x.createObjectURL(a)}};c.downloadURL=function(a,f){var d=t.createElement("a"),b;if("string"===typeof a||a instanceof String||!r.msSaveOrOpenBlob){if(D||2E6<a.length)if(a=c.dataURLtoBlob(a),!a)throw"Data URL length limit reached";
if(void 0!==d.download)d.href=a,d.download=f,t.body.appendChild(d),d.click(),t.body.removeChild(d);else try{if(b=e.open(a,"chart"),void 0===b||null===b)throw"Failed to open window";}catch(u){e.location.href=a}}else r.msSaveOrOpenBlob(a,f)};c.svgToDataUrl=function(a){var c=-1<r.userAgent.indexOf("WebKit")&&0>r.userAgent.indexOf("Chrome");try{if(!c&&0>r.userAgent.toLowerCase().indexOf("firefox"))return x.createObjectURL(new e.Blob([a],{type:"image/svg+xml;charset-utf-16"}))}catch(d){}return"data:image/svg+xml;charset\x3dUTF-8,"+
encodeURIComponent(a)};c.imageToDataUrl=function(a,c,d,b,u,l,k,m,p){var g=new e.Image,h,f=function(){setTimeout(function(){var e=t.createElement("canvas"),f=e.getContext&&e.getContext("2d"),y;try{if(f){e.height=g.height*b;e.width=g.width*b;f.drawImage(g,0,0,e.width,e.height);try{y=e.toDataURL(c),u(y,c,d,b)}catch(F){h(a,c,d,b)}}else k(a,c,d,b)}finally{p&&p(a,c,d,b)}},E)},q=function(){m(a,c,d,b);p&&p(a,c,d,b)};h=function(){g=new e.Image;h=l;g.crossOrigin="Anonymous";g.onload=f;g.onerror=q;g.src=a};
g.onload=f;g.onerror=q;g.src=a};c.downloadSVGLocal=function(a,f,d,b){function u(b,a){a=new e.jsPDF("l","pt",[b.width.baseVal.value+2*a,b.height.baseVal.value+2*a]);w(b.querySelectorAll('*[visibility\x3d"hidden"]'),function(b){b.parentNode.removeChild(b)});e.svg2pdf(b,a,{removeInvalid:!0});return a.output("datauristring")}function l(){z.innerHTML=a;var e=z.getElementsByTagName("text"),f;w(e,function(b){w(["font-family","font-size"],function(a){for(var c=b;c&&c!==z;){if(c.style[a]){b.style[a]=c.style[a];
break}c=c.parentNode}});b.style["font-family"]=b.style["font-family"]&&b.style["font-family"].split(" ").splice(-1);f=b.getElementsByTagName("title");w(f,function(a){b.removeChild(a)})});e=u(z.firstChild,0);try{c.downloadURL(e,v),b&&b()}catch(G){d()}}var k,m,p=!0,g,h=f.libURL||c.getOptions().exporting.libURL,z=t.createElement("div"),q=f.type||"image/png",v=(f.filename||"chart")+"."+("image/svg+xml"===q?"svg":q.split("/")[1]),A=f.scale||1,h="/"!==h.slice(-1)?h+"/":h;if("image/svg+xml"===q)try{r.msSaveOrOpenBlob?
(m=new MSBlobBuilder,m.append(a),k=m.getBlob("image/svg+xml")):k=c.svgToDataUrl(a),c.downloadURL(k,v),b&&b()}catch(y){d()}else"application/pdf"===q?e.jsPDF&&e.svg2pdf?l():(p=!0,n(h+"jspdf.js",function(){n(h+"svg2pdf.js",function(){l()})})):(k=c.svgToDataUrl(a),g=function(){try{x.revokeObjectURL(k)}catch(y){}},c.imageToDataUrl(k,q,{},A,function(a){try{c.downloadURL(a,v),b&&b()}catch(F){d()}},function(){var f=t.createElement("canvas"),u=f.getContext("2d"),l=a.match(/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/)[1]*
A,k=a.match(/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/)[1]*A,m=function(){u.drawSvg(a,0,0,l,k);try{c.downloadURL(r.msSaveOrOpenBlob?f.msToBlob():f.toDataURL(q),v),b&&b()}catch(H){d()}finally{g()}};f.width=l;f.height=k;e.canvg?m():(p=!0,n(h+"rgbcolor.js",function(){n(h+"canvg.js",function(){m()})}))},d,d,function(){p&&g()}))};c.Chart.prototype.getSVGForLocalExport=function(a,e,d,b){var f=this,l,k=0,m,p,g,h,n,q=function(a,c,d){++k;d.imageElement.setAttributeNS("http://www.w3.org/1999/xlink","href",
a);k===l.length&&b(f.sanitizeSVG(m.innerHTML,p))};c.wrap(c.Chart.prototype,"getChartHTML",function(b){var a=b.apply(this,Array.prototype.slice.call(arguments,1));p=this.options;m=this.container.cloneNode(!0);return a});f.getSVGForExport(a,e);l=m.getElementsByTagName("image");try{if(l.length)for(h=0,n=l.length;h<n;++h)g=l[h],c.imageToDataUrl(g.getAttributeNS("http://www.w3.org/1999/xlink","href"),"image/png",{imageElement:g},a.scale,q,d,d,d);else b(f.sanitizeSVG(m.innerHTML,p))}catch(v){d()}};c.Chart.prototype.exportChartLocal=
function(a,e){var d=this,b=c.merge(d.options.exporting,a),f=function(){if(!1===b.fallbackToExportServer)if(b.error)b.error(b);else throw"Fallback to export server disabled";else d.exportChart(b)};B&&("application/pdf"===b.type||d.container.getElementsByTagName("image").length&&"image/svg+xml"!==b.type)||"application/pdf"===b.type&&d.container.getElementsByTagName("image").length?f():d.getSVGForLocalExport(b,e,f,function(a){-1<a.indexOf("\x3cforeignObject")&&"image/svg+xml"!==b.type?f():c.downloadSVGLocal(a,
b,f)})};C(!0,c.getOptions().exporting,{libURL:"https://code.highcharts.com/6.1.0/lib/",menuItemDefinitions:{downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChartLocal()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChartLocal({type:"image/jpeg"})}},downloadSVG:{textKey:"downloadSVG",onclick:function(){this.exportChartLocal({type:"image/svg+xml"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChartLocal({type:"application/pdf"})}}}})})(n)});

View File

@@ -47,7 +47,7 @@
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'Protocol-Type',
chartOptions: {
plotOptions: {
@@ -233,8 +233,8 @@
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'Active-IP',
//
// filename:'Active-IP',
chartOptions: {
plotOptions: {
series: {
@@ -396,7 +396,7 @@
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'App',
chartOptions: {
plotOptions: {
@@ -555,7 +555,7 @@ function echart_2(rs){
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'BS',
chartOptions: {
plotOptions: {
@@ -699,7 +699,7 @@ function echart_5(rs){
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'BS',
chartOptions: {
plotOptions: {
@@ -845,7 +845,7 @@ function echart_4(rs){
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'Website',
chartOptions: {
plotOptions: {
@@ -984,7 +984,7 @@ function echart_6(rs){
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'Website',
chartOptions: {
plotOptions: {
@@ -1128,8 +1128,8 @@ function echart_topic_domain(rs){
},
exporting: {
allowHTML:true,
url:'saveAsImage',
filename:'Topic',
chartOptions: {
plotOptions: {
series: {