You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
15 KiB
421 lines
15 KiB
4 years ago
|
/**
|
||
|
|
* 全屏展示
|
||
|
|
* @description 点击全屏后以全屏方式展示内容
|
||
|
|
*/
|
||
|
|
define(function(require, exports, module) {
|
||
|
|
|
||
|
|
require('./fullscreenchart.css');
|
||
|
|
require('vendor/unslider/js/unslider-min.js');
|
||
|
|
require('vendor/unslider/css/unslider-dots.css');
|
||
|
|
require('vendor/unslider/css/unslider.css');
|
||
|
|
var echarts = require('vendor/echarts/echarts.min');
|
||
|
|
var EchartsAdapter = require('../../../adapter/echartsAdapter');
|
||
|
|
var ToolbarAdapter = require('../../../adapter/toolbarAdapter');
|
||
|
|
//var FullScreenGrid = require('views/pages/fullscreenwindow/fullscreenchart.js');
|
||
|
|
this.args;
|
||
|
|
|
||
|
|
function FullScreenChart(args, callback) {
|
||
|
|
var self = this;
|
||
|
|
this.args = args;
|
||
|
|
this.callback = callback;
|
||
|
|
this.id = 'fullscreen_' + createGuid();
|
||
|
|
this.chartTypes = [];
|
||
|
|
this.create();
|
||
|
|
window.onresize = function() {
|
||
|
|
self.resize();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.create = function() {
|
||
|
|
var self = this;
|
||
|
|
$('body').append('<div id="' + self.id + '"></div>');
|
||
|
|
self.$container = $('#' + self.id);
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.init = function() {
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
FullScreenChart.prototype.open = function() {
|
||
|
|
var self = this;
|
||
|
|
this.chartTypes = [];
|
||
|
|
this.focusObj = document.activeElement;
|
||
|
|
this.init();
|
||
|
|
self.$container.css({
|
||
|
|
'position': 'absolute',
|
||
|
|
'top': window.scrollY + 'px',
|
||
|
|
'left': '0px',
|
||
|
|
'background':'white',
|
||
|
|
'height': function() {
|
||
|
|
return window.innerHeight;
|
||
|
|
},
|
||
|
|
'width': function() {
|
||
|
|
return window.innerWidth;
|
||
|
|
},
|
||
|
|
'display': '-webkit-flex',
|
||
|
|
'-webkit-flex-direction': 'column',
|
||
|
|
'z-index': $.fn.window.defaults.zIndex + 1
|
||
|
|
});
|
||
|
|
$('body').width(self.$container.width())
|
||
|
|
.height(self.$container.height())
|
||
|
|
.css('overflow', 'hidden');
|
||
|
|
self.fillBody();
|
||
|
|
this.customerize();
|
||
|
|
};
|
||
|
|
|
||
|
|
FullScreenChart.prototype.fillBody = function() {
|
||
|
|
var self = this;
|
||
|
|
this.toolbarContainer = $('<div class="frr-fullscreen-chart-toolbar"></div>');
|
||
|
|
this.mainBodyContainer = $('<div class="frr-fullscreen-chart-main"></div>');
|
||
|
|
this.footerContainer = $('<div class="frr-fullscreen-chart-footer"></div>');
|
||
|
|
self.$container
|
||
|
|
.append(this.toolbarContainer)
|
||
|
|
.append(this.mainBodyContainer)
|
||
|
|
.append(this.footerContainer);
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.close = function () {
|
||
|
|
var self = this;
|
||
|
|
if (this.focusObj) {
|
||
|
|
$(this.focusObj).focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
$('body').css({
|
||
|
|
'overflow': 'auto',
|
||
|
|
'width': 'auto'
|
||
|
|
});
|
||
|
|
if(self.callback && typeof self.callback === 'function') {
|
||
|
|
self.callback();
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.page-container')
|
||
|
|
.append(self.args.gridContainer)
|
||
|
|
.append(self.args.paginationContainer)
|
||
|
|
.append(self.args.toolContainerFullScreen);
|
||
|
|
|
||
|
|
self.$container.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.customerize = function() {
|
||
|
|
var self = this;
|
||
|
|
this.initToolbar();
|
||
|
|
this.initMain();
|
||
|
|
};
|
||
|
|
|
||
|
|
FullScreenChart.prototype.initToolbar = function() {
|
||
|
|
var self = this;
|
||
|
|
var chartNameDiv = $('<div class="frr-fullscreen-chartname"></div>');
|
||
|
|
self.toolbarContainer.append(chartNameDiv);
|
||
|
|
this.tooladpFullScreen = new ToolbarAdapter({
|
||
|
|
pageId: this.id,
|
||
|
|
container: self.toolbarContainer,
|
||
|
|
buttons: [{
|
||
|
|
fieldname: 'switchtogrid',
|
||
|
|
dispname: '切换到表格',
|
||
|
|
class: '',
|
||
|
|
hint: '切换到表格',
|
||
|
|
opcode: 'switchtogrid'
|
||
|
|
}, {
|
||
|
|
fieldname: 'download',
|
||
|
|
dispname: '下载',
|
||
|
|
class: '',
|
||
|
|
hint: '下载',
|
||
|
|
opcode: 'download'
|
||
|
|
}, {
|
||
|
|
fieldname: 'closeFullScreen',
|
||
|
|
dispname: '关闭',
|
||
|
|
class: '',
|
||
|
|
hint: '关闭',
|
||
|
|
opcode: 'closeFullScreen'
|
||
|
|
}],
|
||
|
|
actions: {
|
||
|
|
click: function(opcode) {
|
||
|
|
self.opRouter(opcode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.tooladpFullScreen.init();
|
||
|
|
chartNameDiv.css({
|
||
|
|
width: self.toolbarContainer.width() - self.toolbarContainer.find('.fdpr-toolbar').width() - 10
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
FullScreenChart.prototype.initMain = function() {
|
||
|
|
var self = this;
|
||
|
|
var rows = self.getDetailRows();
|
||
|
|
if(rows.length == 0) return;
|
||
|
|
|
||
|
|
var echartAdapter = new EchartsAdapter({
|
||
|
|
dataManager: self.args.chartfullscreenArgs.dataManager,
|
||
|
|
rptFormatId: self.args.chartfullscreenArgs.rptFormatId,
|
||
|
|
chartFormat: self.args.chartfullscreenArgs.chartFormat,
|
||
|
|
rows: rows,
|
||
|
|
cb: function(options) {
|
||
|
|
self.echartOpts = options;
|
||
|
|
self.initFooter();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.initFooter = function() {
|
||
|
|
var self = this;
|
||
|
|
var remarkDiv = $('<div class="frr-fullscreen-chart-remark"></div>');
|
||
|
|
var chartIconDiv = $('<div class="frr-fullscreen-chart-icons"></div>');
|
||
|
|
self.footerContainer.append(remarkDiv);
|
||
|
|
self.footerContainer.append(chartIconDiv);
|
||
|
|
|
||
|
|
if (self.echartOpts) {
|
||
|
|
for (var i = 0; i < self.echartOpts.length; i++) {
|
||
|
|
var echartOpt = self.echartOpts[i];
|
||
|
|
if ($.inArray(echartOpt.type, self.chartTypes) >= 0 ) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
var iconId = '';
|
||
|
|
switch (echartOpt.type) {
|
||
|
|
case 'barchart':
|
||
|
|
iconId = 'graph-histogram';
|
||
|
|
break;
|
||
|
|
case 'linechart':
|
||
|
|
iconId = 'graph-line';
|
||
|
|
break;
|
||
|
|
case 'areachart':
|
||
|
|
iconId = 'graph-stack';
|
||
|
|
break;
|
||
|
|
case 'piechart':
|
||
|
|
iconId = 'graph-pie';
|
||
|
|
break;
|
||
|
|
case 'barlinechart':
|
||
|
|
iconId = 'graph-complex';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var iconSvg = $('<svg class="icon-chart frr-fullscreen-icon-chart icon-chart-selected" id="' + echartOpt.type + '"><use xlink:href="#' + iconId + '"/></svg>');
|
||
|
|
iconSvg.click(function() {
|
||
|
|
var id = this.id;
|
||
|
|
if (id) {
|
||
|
|
$('.frr-fullscreen-icon-chart').addClass('icon-chart-selected');
|
||
|
|
$(this).removeClass('icon-chart-selected');
|
||
|
|
self.addCharts(id);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
chartIconDiv.append(iconSvg);
|
||
|
|
self.chartTypes.push(echartOpt.type);
|
||
|
|
}
|
||
|
|
self.mainBodyContainer.css({
|
||
|
|
height: window.innerHeight - self.toolbarContainer.height() - self.footerContainer.height()
|
||
|
|
});
|
||
|
|
self.addCharts(self.chartTypes[0]);
|
||
|
|
$('.frr-fullscreen-icon-chart:eq(0)').removeClass('icon-chart-selected');
|
||
|
|
}
|
||
|
|
remarkDiv.css({
|
||
|
|
width: function() {
|
||
|
|
var charts = $('.frr-fullscreen-icon-chart');
|
||
|
|
if(charts && charts.length > 0) {
|
||
|
|
var echatswidth = charts.width() * charts.length + 5 * (charts.length + 1);
|
||
|
|
return window.innerWidth - echatswidth - 10;
|
||
|
|
} else {
|
||
|
|
return 'auto';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.addCharts = function(chartType) {
|
||
|
|
var self = this;
|
||
|
|
if(!chartType || !self.echartOpts) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
self.mainBodyContainer.empty();
|
||
|
|
self.mainBodyContainer.append($('<ul class="frr-fullscreen-chart-ul"></ul>'));
|
||
|
|
for (var i = 0; i < self.echartOpts.length; i++) {
|
||
|
|
var echartOpt = self.echartOpts[i];
|
||
|
|
if(chartType === echartOpt.type) {
|
||
|
|
self.addChart(echartOpt);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var prev = $('<svg class="icon-chart frr-fullscreen-arrows prev"><use xlink:href="#month-last-oring"/></svg>');
|
||
|
|
var next = $('<svg class="icon-chart frr-fullscreen-arrows next"><use xlink:href="#month-next-oring"/></svg>');
|
||
|
|
self.mainBodyContainer.append(prev).append(next);
|
||
|
|
var unslider = this.mainBodyContainer.unslider({
|
||
|
|
arrows: false
|
||
|
|
});
|
||
|
|
|
||
|
|
self.setChartNameRemark(unslider);
|
||
|
|
$('.frr-fullscreen-arrows').click(function() {
|
||
|
|
var fn = this.classList[2];
|
||
|
|
|
||
|
|
var current = unslider.data('unslider').current;
|
||
|
|
if(fn === 'next' && current === unslider.data('unslider').$slides.length - 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(fn === 'prev' && current === 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
unslider.data('unslider')[fn]();
|
||
|
|
|
||
|
|
self.setChartNameRemark(unslider);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.setChartNameRemark = function(unslider) {
|
||
|
|
var self = this;
|
||
|
|
var slides = unslider.data('unslider').$slides;
|
||
|
|
if (!slides || slides.length == 0) return;
|
||
|
|
|
||
|
|
var current = slides[unslider.data('unslider').current];
|
||
|
|
if (!current || !current.id) return;
|
||
|
|
|
||
|
|
for (var i = 0; i < self.echartOpts.length; i++) {
|
||
|
|
var echartsOpt = self.echartOpts[i];
|
||
|
|
if (parseInt(echartsOpt.serialno) === parseInt(current.id)) {
|
||
|
|
var chartnameDiv = $('.frr-fullscreen-chartname');
|
||
|
|
var chartremarkDiv = $('.frr-fullscreen-chart-remark');
|
||
|
|
if (chartnameDiv) {
|
||
|
|
chartnameDiv.text(echartsOpt.name);
|
||
|
|
}
|
||
|
|
if (chartremarkDiv) {
|
||
|
|
chartremarkDiv.text(echartsOpt.remark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (unslider.data('unslider').current < slides.length - 1) {
|
||
|
|
$('.frr-fullscreen-arrows.next').removeClass('frr-fullscreen-arrows-disable');
|
||
|
|
$('.frr-fullscreen-arrows.next').addClass('frr-fullscreen-arrows-enable');
|
||
|
|
} else {
|
||
|
|
$('.frr-fullscreen-arrows.next').removeClass('frr-fullscreen-arrows-enable');
|
||
|
|
$('.frr-fullscreen-arrows.next').addClass('frr-fullscreen-arrows-disable');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (unslider.data('unslider').current > 0) {
|
||
|
|
$('.frr-fullscreen-arrows.prev').removeClass('frr-fullscreen-arrows-disable');
|
||
|
|
$('.frr-fullscreen-arrows.prev').addClass('frr-fullscreen-arrows-enable');
|
||
|
|
} else {
|
||
|
|
$('.frr-fullscreen-arrows.prev').removeClass('frr-fullscreen-arrows-enable');
|
||
|
|
$('.frr-fullscreen-arrows.prev').addClass('frr-fullscreen-arrows-disable');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.addChart = function(chart) {
|
||
|
|
var self = this;
|
||
|
|
var guid = createGuid(),
|
||
|
|
container = self.mainBodyContainer.find('.frr-fullscreen-chart-ul'),
|
||
|
|
className = null,
|
||
|
|
chartObj = null;
|
||
|
|
|
||
|
|
switch (chart.type) {
|
||
|
|
case 'barchart':
|
||
|
|
className = 'bar-chart' + guid;
|
||
|
|
break;
|
||
|
|
case 'linechart':
|
||
|
|
className = 'line-chart' + guid;
|
||
|
|
break;
|
||
|
|
case 'areachart':
|
||
|
|
className = 'area-chart' + guid;
|
||
|
|
break;
|
||
|
|
case 'piechart':
|
||
|
|
className = 'pie-chart' + guid;
|
||
|
|
break;
|
||
|
|
case 'barlinechart':
|
||
|
|
className = 'bar-line-chart' + guid;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
container.append('<li id="' + chart.serialno + '-li"><div class="'+ className +'" style="width: 100%;height: 600px;"></div></li>');
|
||
|
|
self.mainBodyContainer.find('.frr-fullscreen-chart-ul > li > div').css({
|
||
|
|
height: self.mainBodyContainer.height()
|
||
|
|
});
|
||
|
|
chartObj = echarts.init($('.' + className)[0]);
|
||
|
|
chartObj.setOption(chart.option);
|
||
|
|
};
|
||
|
|
|
||
|
|
FullScreenChart.prototype.opRouter = function(opcode) {
|
||
|
|
var self = this;
|
||
|
|
switch (opcode) {
|
||
|
|
case 'switchtogrid':
|
||
|
|
self.close();
|
||
|
|
|
||
|
|
var fullScreenGrid = new self.args.fullScreenGrid(self.args, function() {
|
||
|
|
|
||
|
|
});
|
||
|
|
fullScreenGrid.open();
|
||
|
|
break;
|
||
|
|
case 'download':
|
||
|
|
//$('.frr-fullscreen-chart-main').data('unslider').$slides[$('.frr-fullscreen-chart-main').data('unslider').current]
|
||
|
|
|
||
|
|
html2canvas($('.unslider-active'), {
|
||
|
|
allowTaint: true,
|
||
|
|
taintTest: false,
|
||
|
|
onrendered: function(canvas) {
|
||
|
|
var canvasname = $('.frr-fullscreen-chartname').text();
|
||
|
|
$('.canvas-image-container').attr('href', Canvas2Image.convertToImage(canvas).src)
|
||
|
|
.attr('download', canvasname + '.jpg');
|
||
|
|
$('.canvas-image-container')[0].click()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 'closeFullScreen':
|
||
|
|
self.close();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.resize = function() {
|
||
|
|
var self = this;
|
||
|
|
self.$container.css({
|
||
|
|
'position': 'absolute',
|
||
|
|
'top': window.scrollY + 'px',
|
||
|
|
'left': '0px',
|
||
|
|
'background': 'white',
|
||
|
|
'height': function() {
|
||
|
|
return window.innerHeight;
|
||
|
|
},
|
||
|
|
'width': function() {
|
||
|
|
return window.innerWidth;
|
||
|
|
},
|
||
|
|
'display': '-webkit-flex',
|
||
|
|
'-webkit-flex-direction': 'column',
|
||
|
|
'z-index': $.fn.window.defaults.zIndex + 1
|
||
|
|
});
|
||
|
|
$('.frr-fullscreen-chartname').css({
|
||
|
|
width: self.toolbarContainer.width() - self.toolbarContainer.find('.fdpr-toolbar').width() - 10
|
||
|
|
});
|
||
|
|
|
||
|
|
self.mainBodyContainer.css({
|
||
|
|
height: window.innerHeight - self.toolbarContainer.height() - self.footerContainer.height()
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.frr-fullscreen-chart-remark').css({
|
||
|
|
width: function() {
|
||
|
|
var charts = $('.frr-fullscreen-icon-chart');
|
||
|
|
if (charts && charts.length > 0) {
|
||
|
|
var echatswidth = charts.width() * charts.length + 5 * (charts.length + 1);
|
||
|
|
return window.innerWidth - echatswidth - 10;
|
||
|
|
} else {
|
||
|
|
return 'auto';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
self.mainBodyContainer.find('.frr-fullscreen-chart-ul > li > div').css({
|
||
|
|
height: self.mainBodyContainer.height()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
FullScreenChart.prototype.getDetailRows = function() {
|
||
|
|
var self = this;
|
||
|
|
var grid = self.args.gridContainer.find('.report-grid');
|
||
|
|
var rows = [];
|
||
|
|
if(grid) {
|
||
|
|
rows = grid.datagrid('getRows');
|
||
|
|
}
|
||
|
|
if (self.args.chartfullscreenArgs.dataManager.groupFields.length == 0) return rows;
|
||
|
|
var detailRows = _.where(rows, {'isRptGroupRow': '0'});
|
||
|
|
return detailRows;
|
||
|
|
};
|
||
|
|
|
||
|
|
return FullScreenChart;
|
||
|
|
});
|