2023-05-16 10:50:42 +08:00

541 lines
22 KiB
JavaScript

var app = new Vue({
el: '#main',
data: {
chart: {type: ''},
settings: {},
datasets: [],
fields: [],
operators: [],
fieldMap: {},
types: [],
config: {},
lang: null,
aggregate: [],
aggs: [],
dates: [],
orders: [],
orderMap: {},
filters: [],
select: {index: 0, field: '', name: ''},
date: {index: 0, field: '', name: '', group: 'day'},
formula: {index: 0, field: '', valOrAgg: [], name: ''},
filter: {index: 0, field: '', operator: '', value: ''},
order: {index: 0, value: '', sort: 'desc'},
show: {},
updated: false,
chartData: {},
runError: '',
showDataset: true,
fieldsMap: {},
filterValues: {},
},
created() {
this.chart = chart;
this.lang = lang;
this.config = chartConfig;
this.filters = chart.filters;
if(this.chart.type.indexOf('Report') !== -1) this.showDataset = false;
var defaultSettings = {};
for(let key in this.config[this.chart.type])
{
this.show[key] = false;
defaultSettings[key] = [];
}
this.settings = (typeof chart.settings !== 'undefined' && chart.settings) ? JSON.parse(chart.settings) : defaultSettings;
for(f of this.filters)
{
var field = f.field;
if(f.field.indexOf('.') !== -1)
{
var fs = f.field.split('.');
if(fs[1] == 'id') field = fs[0];
}
if(typeof defaults[field] !== 'undefined') this.filterValues[f.field] = defaults[field];
}
var fs = [];
for(var key in fields)
{
if(fields[key].type == 'object')
{
var children = [];
var subFields = fields[key].children
for(var subKey in subFields)
{
children.push({value: key + '.' + subKey, label: subFields[subKey].name, name: fields[key].name + '.' + subFields[subKey].name, type: subFields[subKey].type});
subFields[subKey].name = fields[key].name + '.' + subFields[subKey].name;
// 筛选过滤需要子字段的options
if(typeof subFields[subKey].options !== 'undefined') {
let options = [];
subFields[subKey].optionMap = subFields[subKey].options;
for(let k in subFields[subKey].options) {
options.push({value: k, label: subFields[subKey].options[k], name: subFields[subKey].options[k]});
}
subFields[subKey].options = options;
}
this.fieldMap[key + '.' + subKey] = subFields[subKey];
}
fs.push({value: key, label: fields[key].name, type: fields[key].type, children: children});
}
else if(fields[key].type == 'option')
{
var options = [];
for(var opKey in fields[key].options)
{
if(!fields[key].options[opKey]) continue;
options.push({value: opKey, label: fields[key].options[opKey], name: fields[key].options[opKey], type: fields[key].type});
}
fields[key].optionMap = fields[key].options;
fields[key].options = options;
fs.push({value: key, label: fields[key].name, name: fields[key].name, type: fields[key].type, options: options});
this.fieldMap[key] = fields[key];
}
else
{
fs.push({value: key, label: fields[key].name, name: fields[key].name, type: fields[key].type});
this.fieldMap[key] = fields[key];
}
}
this.fields = fs;
var ds = [];
for(var key in datasets)
{
ds.push({value: key, label: datasets[key]});
}
this.datasets = ds;
var ts = [];
for(var key in lang.typeList)
{
ts.push({value: key, label: lang.typeList[key]});
}
this.types = ts;
var ds = [];
for(var key in lang.dateList)
{
ds.push({value: key, label: lang.dateList[key]});
}
this.dates = ds;
var os = [];
for(var key in lang.operatorList)
{
os.push({value: key, label: lang.operatorList[key]});
}
this.operators = os;
var as = [];
for(var key in lang.aggList)
{
as.push({value: key, label: lang.aggList[key]});
}
this.aggregate = as;
this.loadFilterMap();
},
watch: {
fitlerValues: {
handler(o, n) {
console.log(o, n);
},
deep: true
},
},
methods: {
changeType(key) {
this.updated = false;
this.settings = {};
this.showDataset = this.chart.type == 'report' ? false : true;
},
changeField(key) {
if(this.formula.valOrAgg != 'value' || this.formula.field && this.config[this.chart.type][key].allowed.indexOf('any') === -1 && this.config[this.chart.type][key].allowed.indexOf(this.fieldMap[this.formula.field].type) === -1)
{
var aggs = [];
for(var agg of this.aggregate)
{
if(this.fieldMap[this.formula.field].type !== 'number' && ['count', 'count_distinct', 'value_all', 'value_distinct'].indexOf(agg.value) === -1) continue;
aggs.push(agg);
}
this.aggs = aggs;
if(!this.formula.valOrAgg || this.formula.valOrAgg == 'value') this.formula.valOrAgg = 'count';
}
else
{
var aggs = [];
for(var agg of this.aggregate)
{
if(this.chart.type == 'table' || this.fieldMap[this.formula.field].type == 'number') aggs.push(agg);
}
this.aggs = aggs;
if(!this.formula.valOrAgg) this.formula.valOrAgg = 'value';
}
},
changeChartFilter() {
/*
for(let key in this.filterValues)
{
this.$set(this.filterValues, key, this.filterValues[key]);
}
*/
},
changeFilter() {
this.$set(this.filter, 'value', '');
},
updateSettings() {
var orders = [];
var orderMap = {};
for(let key in this.config[this.chart.type])
{
if(typeof this.settings[key] == 'undefined') continue;
for(let index in this.settings[key])
{
var setting = this.settings[key][index];
var name = setting.name ? setting.name : ((typeof setting.field.valOrAgg == 'undefined' || setting.field.valOrAgg == 'value') ? this.fieldMap[setting.field].name : (setting.field.valOrAgg.toUpperCase() + '(' + this.fieldMap[setting.field].name + ')'));
var value = setting.field + (typeof setting.valOrAgg == 'undefined' || setting.valOrAgg == 'value' ? '' : '/' + setting.valOrAgg);
orders.push({value: value, label: name, name: name});
orderMap[value] = ({value: value, label: name, name: name});
}
}
this.orders = orders;
this.orderMap = orderMap;
this.updated = false;
},
hide() {
this.select = {index: 0, field: '', name: ''};
this.formula = {index: 0, field: '', valOrAgg: [], name: ''};
this.filter = {index: 0, field: '', operator: '', value: undefined};
for(let key in this.config[this.chart.type])
{
this.$set(this.show, key, false);
}
this.$set(this.show, 'filter', false);
this.$set(this.show, 'order', false);
},
reset() {
this.select = {index: 0, field: '', name: ''};
this.formula = {index: 0, field: '', valOrAgg: '', name: ''};
this.filter = {index: 0, field: '', operater: '', value: undefined};
this.order = {index: 0, value: '', sort: 'desc'};
this.runError = '';
},
popoverSelect(key, index) {
this.hide();
if(typeof index !== 'undefined')
{
this.select = {index: index, field: this.settings[key][index].field, name: this.settings[key][index].name};
if(typeof this.settings[key][index].dateGroup !== 'undefined') this.select.dateGroup = this.settings[key][index].dateGroup;
}
else
{
this.select = {index: typeof this.settings[key] == 'undefined' ? 0 : this.settings[key].length, field: '', name: ''};
}
this.$set(this.show, key, true);
},
saveSelect(key) {
var setting = typeof this.settings[key] == 'undefined' ? [] : this.settings[key];
setting[this.select.index] = {field: this.select.field, name: this.select.name};
if(typeof this.select.dateGroup !== 'undefined') setting[this.select.index].dateGroup = this.select.dateGroup;
this.$set(this.settings, key, setting);
this.updateSettings();
this.reset();
this.$set(this.show, key, false);
},
popoverDate(key, index) {
this.hide();
if(typeof index !== 'undefined')
{
this.date = {index: index, field: this.settings[key][index].field, name: this.settings[key][index].name, group: this.settings[key][index].group};
}
else
{
this.date = {index: typeof this.settings[key] == 'undefined' ? 0 : this.settings[key].length, field: '', name: '', group: 'day'};
}
this.$set(this.show, key, true);
},
saveDate(key) {
var setting = typeof this.settings[key] == 'undefined' ? [] : this.settings[key];
setting[this.date.index] = {field: this.date.field, name: this.date.name, group: this.date.group};
this.$set(this.settings, key, setting);
this.updateSettings();
this.reset();
this.$set(this.show, key, false);
},
popoverFormula(key, index) {
this.hide();
if(typeof index !== 'undefined')
{
this.formula = {index: index, field: this.settings[key][index].field, valOrAgg: this.settings[key][index].valOrAgg, name: this.settings[key][index].name, split: this.settings[key][index].split, format: this.settings[key][index].format};
this.changeField(key);
}
else
{
this.formula = {index: typeof this.settings[key] == 'undefined' ? 0 : this.settings[key].length, field: '', valOrAgg: 'value', name: '', split: false};
}
this.$set(this.show, key, true);
},
changeTab(key) {
var valOrAgg = this.formula.valOrAgg;
if(key == 'value')
{
valOrAgg = 'value';
}
else if(key == 'agg' && valOrAgg == 'value')
{
valOrAgg = this.formula.field ? 'count' : '';
}
this.$set(this.formula, 'valOrAgg', valOrAgg);
},
saveFormula(key) {
var setting = typeof this.settings[key] == 'undefined' ? [] : this.settings[key];
setting[this.formula.index] = {field: this.formula.field, valOrAgg: this.formula.valOrAgg, name: this.formula.name};
if(this.fieldMap[this.formula.field] && this.fieldMap[this.formula.field].type == 'option' && this.formula.split) setting[this.formula.index].split = true;
if(this.fieldMap[this.formula.field] && this.fieldMap[this.formula.field].type == 'date' && this.formula.format) setting[this.formula.index].format = this.formula.format;
this.$set(this.settings, key, setting);
this.updateSettings();
this.reset();
this.$set(this.show, key, false);
},
popoverFilter(index) {
this.hide();
if(typeof index !== 'undefined')
{
this.filter = {index: index, field: this.settings.filter[index].field, operator: this.settings.filter[index].operator, value: this.settings.filter[index].value};
}
else
{
this.filter = {index: typeof this.settings.filter == 'undefined' ? 0 : this.settings.filter.length, field: '', operator: '', value: ''};
}
this.$set(this.show, 'filter', true);
},
saveFilter() {
var setting = typeof this.settings.filter == 'undefined' ? [] : this.settings.filter;
setting[this.filter.index] = {field: this.filter.field, operator: this.filter.operator, value: this.filter.value};
this.$set(this.settings, 'filter', setting);
this.updateSettings();
this.reset();
this.$set(this.show, 'filter', false);
},
popoverOrder(index) {
this.hide();
if(typeof index !== 'undefined')
{
this.order = {index: index, value: this.settings.order[index].value, sort: this.settings.order[index].sort};
}
else
{
this.order = {index: typeof this.settings.order == 'undefined' ? 0 : this.settings.order.length, value: '', sort: 'desc'};
}
this.$set(this.show, 'order', true);
},
saveOrder() {
if(this.order.value) {
var setting = typeof this.settings.order == 'undefined' ? [] : this.settings.order;
setting[this.order.index] = {value: this.order.value, sort: this.order.sort};
this.$set(this.settings, 'order', setting);
this.updateSettings();
}
this.reset();
this.$set(this.show, 'order', false);
},
changeSplit() {
this.formula.split = !this.formula.split;
},
changePastDays(e) {
if(typeof this.formula.format == 'undefined') this.formula.format = '';
this.formula.format = this.formula.format ? '' : 'pastDays';
},
deleteSetting(key, index) {
this.settings[key].splice(index, 1);
this.updateSettings();
},
run() {
for(var key in this.config[this.chart.type])
{
var setting = this.config[this.chart.type][key];
if(typeof setting.required !== 'undefined' && setting.required)
{
if(typeof this.settings[key] === 'undefined' || this.settings[key].length == 0)
{
this.runError = this.lang.must + ' "' + this.lang[key] + '"';
return;
}
}
}
var that = this;
$.post(createLink('chart', 'ajaxGenChart'), {
dataset: this.chart.dataset,
type: this.chart.type,
settings: this.settings,
filterValues: this.filterValues,
}, function(data) {
var data = JSON.parse(data);
that.chartData = data;
if(that.chart.type == 'table')
{
for(var col of data.columns)
{
if(typeof data.rowspan[col.dataIndex] === 'undefined') continue;
(function(col) {
var index = col.dataIndex;
col.customRender = function(text, row, rowIndex) {
if(typeof data.rowspan[index][rowIndex] !== 'undefined') {
return {children: text, attrs: {rowSpan: data.rowspan[index][rowIndex]}};
}
else
{
return {children: text, attrs: {rowSpan: 0}};
}
}
})(col);
}
}
else if(that.chart.type.indexOf('Report') !== -1)
{
var report = '';
for(let table of data.tables)
{
report += "<table class='table'>";
for (let tr of table)
{
report += "<tr>";
for(let td of tr)
{
let colspan = typeof td.colspan !== 'undefined' ? ' colspan="' + td.colspan + '"' : '';
let rowspan = typeof td.rowspan !== 'undefined' ? ' rowspan="' + td.rowspan + '"' : '';
report += "<td class='" + (typeof td.cls !== 'undefined' ? td.cls : '') + "' " + rowspan + colspan + ">" + td.value + "</td>";
}
report += "</tr>";
}
report += "<table>";
}
$('#report').html(report);
}
else
{
var chart = echarts.init(document.getElementById('draw'));
chart.setOption(data, true);
}
that.updated = true;
})
},
showField(field, value) {
if(Array.isArray(value))
{
var values = [];
for(let v of value)
{
values.push(this.fieldMap[field].type == 'option' ? this.fieldMap[field].optionMap[v] : v);
}
return values.join(',');
}
else
{
return this.fieldMap[field].type == 'option' ? this.fieldMap[field].optionMap[value] : value;
}
},
changeDataset(dataset) {
var that = this;
$.get(createLink('chart', 'ajaxGetFields', 'dataset=' + dataset), function(fields) {
that.fieldMap = {};
var fields = JSON.parse(fields);
var fs = [];
for(var key in fields)
{
if(fields[key].type == 'object')
{
var children = [];
var subFields = fields[key].children
for(var subKey in subFields)
{
children.push({value: key + '.' + subKey, label: subFields[subKey].name, name: fields[key].name + '.' + subFields[subKey].name});
subFields[subKey].name = fields[key].name + '.' + subFields[subKey].name;
that.fieldMap[key + '.' + subKey] = subFields[subKey];
}
fs.push({value: key, label: fields[key].name, type: fields[key].type, children: children});
}
else if(fields[key].type == 'option')
{
var options = [];
for(var opKey in fields[key].options)
{
if(!fields[key].options[opKey]) continue;
options.push({value: opKey, label: fields[key].options[opKey], name: fields[key].options[opKey], type: fields[key].type});
}
fields[key].optionMap = fields[key].options;
fields[key].options = options;
fs.push({value: key, label: fields[key].name, name: fields[key].name, type: fields[key].type, options: options});
that.fieldMap[key] = fields[key];
}
else
{
fs.push({value: key, label: fields[key].name, name: fields[key].name, type: fields[key].type});
that.fieldMap[key] = fields[key];
}
}
for(var key in that.settings)
{
that.$delete(that.settings, key);
}
that.fields = fs;
})
},
save() {
var that = this;
$.post(createLink('chart', 'design', 'chartID=' + this.chart.id), {
name: that.chart.name,
type: that.chart.type,
dataset: that.chart.dataset,
settings: JSON.stringify(that.settings),
},function(data) {
window.location.href = createLink('chart', 'browse');
})
},
loadFilterMap() {
var fieldsMap = {};
var fs = [];
for(var key in filters['option'])
{
fs.push({value: key, label: filters['option'][key].name});
fieldsMap[key] = filters['option'][key];
var options = [];
for(var index in filters['option'][key].options)
{
options.push({value: index, label: filters['option'][key].options[index]});
}
fieldsMap[key].options = options;
}
this.optionFields = fs;
fs = [];
for(var key in filters['date'])
{
fs.push({value: key, label: filters['date'][key].name});
fieldsMap[key] = filters['date'][key];
}
//this.dateFields = fs;
this.fieldsMap = fieldsMap;
for(let i in this.filters) {
if(typeof this.filters[i].name === 'undefined') this.filters[i].name = this.fieldsMap[this.filters[i].field].name;
}
},
}
})