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

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;
});