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.
343 lines
12 KiB
343 lines
12 KiB
var App = function () {
|
|
this.statisticGrid = $('#task-grid');
|
|
this.selectedRow = [];
|
|
|
|
this.Startup = function () {
|
|
$('#manage').addClass('active');
|
|
|
|
this.ReLayout();
|
|
this.InitDate();
|
|
|
|
$('.statistic-type span').on('click', this.OnStatisticTypeClick.bind(this));
|
|
$('#query-btn').on('click', this.OnQueryButtonClick.bind(this));
|
|
$('#query-btn').trigger('click');
|
|
|
|
window.onresize = this.ReLayout.bind(this);
|
|
};
|
|
|
|
this.ReLayout = function () {
|
|
var width = $(window).width();
|
|
var height = $(window).height();
|
|
|
|
$('.manage-table, .manage-table .datagrid').width(width - 247);
|
|
$('.manage-table, .manage-table .datagrid').height(height - 109);
|
|
this.formatLastColumn();
|
|
};
|
|
|
|
this.OnStatisticTypeClick = function (event) {
|
|
$('.statistic-type span').removeClass("active");
|
|
$(event.target).addClass("active");
|
|
};
|
|
|
|
this.OnQueryButtonClick = function () {
|
|
//this.ReLoadTableData();
|
|
this.ReloadChartData();
|
|
};
|
|
|
|
this.ReloadChartData = function () {
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: 'text',
|
|
url: '/StatisticAnalysis/Query',
|
|
data: this.GetParams(),
|
|
success: function (result) {
|
|
var type = this.GetParams().typeCode === 'user' ? 'column' : 'spline';
|
|
var name = this.GetParams().typeCode === 'user' ? '根据用户' : '根据机构';
|
|
var xAxises = this.GetSeries(JSON.parse(result).rows).xAxises;
|
|
var values = this.GetSeries(JSON.parse(result).rows).series;
|
|
var series = this.GetElementSerie(type, name, values);
|
|
this.InitChart(series, xAxises, JSON.parse(result).rows);
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.GetElementSerie = function (type, name, values) {
|
|
return {
|
|
type: type,
|
|
name: name,
|
|
data: values,
|
|
pointWidth: 30
|
|
};
|
|
};
|
|
|
|
this.GetSeries = function (result) {
|
|
var series = [];
|
|
var xAxises = [];
|
|
result.forEach(function (item, index) {
|
|
var time = moment(item.LastComputeTime).format("YYYY-MM-DD");
|
|
xAxises.push(time);
|
|
series.push(item.ComputeCount);
|
|
});
|
|
|
|
return {
|
|
series: series,
|
|
xAxises: xAxises
|
|
};
|
|
};
|
|
|
|
this.InitChart = function (series, xAxises, values) {
|
|
Highcharts.chart('chart', {
|
|
chart: {
|
|
backgroundColor: '#002145'
|
|
},
|
|
title: {
|
|
text: this.GetParams().fromTime + ' 至 ' + this.GetParams().toTime,
|
|
style: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
}
|
|
},
|
|
subtitle: {
|
|
text: '计算次数',
|
|
style: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
},
|
|
verticalAlign: 'top',
|
|
align: 'left',
|
|
y: 25
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
colors: ['#00d5f6'],
|
|
xAxis: {
|
|
categories: xAxises,
|
|
labels: {
|
|
style: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
},
|
|
},
|
|
lineColor: '#234979'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: null
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
},
|
|
},
|
|
gridLineColor: '#234979'
|
|
},
|
|
tooltip: {
|
|
backgroundColor: '#002145',
|
|
shadow: true,
|
|
style: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
},
|
|
formatter: function () {
|
|
return '<b>' + this.x + '</b>' + '<br/>' +
|
|
'计算次数：' + '<b>' + this.y + '</b>' + '次' + '<br/>' +
|
|
'计算用户：' + app.GetNames(values, this.x);
|
|
}
|
|
},
|
|
legend: {
|
|
itemStyle: {
|
|
color: '#ffffff',
|
|
fontFamily: '微软雅黑'
|
|
},
|
|
},
|
|
plotOptions: {
|
|
column: {
|
|
borderColor: ''
|
|
}
|
|
},
|
|
series: [series]
|
|
});
|
|
};
|
|
|
|
this.GetNames = function (values, time) {
|
|
var names = [];
|
|
var result = values.filter(function (item) {
|
|
return moment(item.LastComputeTime).format("YYYY-MM-DD") === time;
|
|
});
|
|
result.forEach(function (item, index) {
|
|
names.push(item.UserName);
|
|
});
|
|
return names.join('、');
|
|
};
|
|
|
|
this.ReLoadTableData = function () {
|
|
this.statisticGrid.datagrid({
|
|
method: "POST",
|
|
url: '/StatisticAnalysis/Query',
|
|
queryParams: {
|
|
typeCode: $('.statistic-type span.active').attr('type'),
|
|
fromTime: $("#from-date").datetimebox('getValue'),
|
|
toTime: $("#to-date").datetimebox('getValue')
|
|
}
|
|
});
|
|
};
|
|
|
|
this.InitDate = function () {
|
|
$('#from-date').datebox({
|
|
panelAlign: 'right',
|
|
panelWidth: 200,
|
|
panelHeight: 230,
|
|
showSeconds: false,
|
|
currentText: '现在',
|
|
onSelect: function (date) {
|
|
var startTime = date.getTime();
|
|
var endDate = $('#to-date').val();
|
|
|
|
if (endDate) {
|
|
var endTime = new Date(endDate).getTime();
|
|
if (startTime > endTime)
|
|
alert('开始日期不能大于结束日期，请重新选择。');
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#to-date').datebox({
|
|
panelWidth: 190,
|
|
panelHeight: 230,
|
|
panelAlign: 'right',
|
|
showSeconds: false,
|
|
currentText: '现在',
|
|
onSelect: function (date) {
|
|
var endTime = date.getTime();
|
|
var startDate = $('#from-date').val();
|
|
|
|
if (startDate) {
|
|
var startTime = new Date(startDate).getTime();
|
|
if (startTime > endTime)
|
|
alert('结束日期不能小于开始日期，请重新选择。');
|
|
}
|
|
}
|
|
});
|
|
|
|
$("#from-date").datebox('setValue', moment().add(-30, 'days').format('YYYY/MM/DD'));
|
|
};
|
|
|
|
this.InitDataGrid = function () {
|
|
this.statisticGrid.datagrid({
|
|
columns: [[
|
|
{ field: 'UserName', title: '姓名', align: 'center', width: 120 },
|
|
{ field: 'OrgName', title: '所属机构', align: 'left', width: 180 },
|
|
{ field: 'OrgName2', title: '名称', align: 'left', width: 180, hidden: 'true' },
|
|
{ field: 'ComputeCount', title: '计算次数', align: 'center', width: 100 },
|
|
{ field: 'LastComputeTime', title: '最后计算时间', align: 'center', width: 160, formatter: this.formatTime.bind(this) },
|
|
{ field: 'Null', title: '', align: 'left' }
|
|
]],
|
|
striped: true,
|
|
singleSelect: false,
|
|
fit: true,
|
|
scrollbarSize: 0,
|
|
pagination: true,
|
|
pageNumber: 1,
|
|
pageSize: 50,
|
|
pageList: [10, 20, 50, 100, 150, 200],
|
|
onSelect: this.OnTaskSelected.bind(this),
|
|
onUnselect: this.OnTaskUnselected.bind(this),
|
|
onBeforeLoad: this.OnTableGridBeforeLoad.bind(this),
|
|
onLoadSuccess: function (data) {
|
|
if (data.total === 0) {
|
|
var body = $('.datagrid-body');
|
|
body.addClass('null-data-body');
|
|
body.append('<div class="null-data"><span></span><p>暂无数据</p></div>');
|
|
}
|
|
|
|
if ($('.statistic-type span.active').attr('type') === 'user') {
|
|
this.statisticGrid.datagrid('showColumn', 'UserName');
|
|
this.statisticGrid.datagrid('showColumn', 'OrgName');
|
|
this.statisticGrid.datagrid('hideColumn', 'OrgName2');
|
|
}
|
|
else {
|
|
this.statisticGrid.datagrid('hideColumn', 'UserName');
|
|
this.statisticGrid.datagrid('hideColumn', 'OrgName');
|
|
this.statisticGrid.datagrid('showColumn', 'OrgName2');
|
|
}
|
|
|
|
this.formatLastColumn();
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.formatLastColumn = function () {
|
|
var type = $('.statistic-type span.active').attr('type');
|
|
var width = $('.container').width();
|
|
var headerTable = $('.datagrid-header');
|
|
var bodyTable = $('.datagrid-body');
|
|
var headerTd = headerTable.find('td:last');
|
|
var clipWidth = type === 'user' ? 562 : 442;
|
|
headerTd.css('width', (width - clipWidth) + 'px');
|
|
bodyTable.find('tr').find('td:last').css('width', (width - clipWidth) + 'px');
|
|
};
|
|
|
|
this.toggleUserColuum = function () {
|
|
if ($('.statistic-type span.active').attr('type') === 'user')
|
|
this.statisticGrid.datagrid('showColumn', 'UserName');
|
|
else
|
|
this.statisticGrid.datagrid('hideColumn', 'UserName');
|
|
};
|
|
|
|
this.formatTime = function (time) {
|
|
return '<span>{0}</span>'.format(moment(time).format('YYYY/MM/DD HH:mm:ss'));
|
|
};
|
|
|
|
this.OnTaskSelected = function (index, row) {
|
|
this.selectedRow = row;
|
|
$('.datagrid-btable tr').removeClass('datagrid-row-selected');
|
|
$('.datagrid-btable tr').eq(index).addClass('datagrid-row-selected');
|
|
|
|
//set buttons disabled state
|
|
$('#edit-btn').prop('disabled', row === null);
|
|
$('#delete-btn').prop('disabled', row === null);
|
|
$('#enable-btn').prop('disabled', row.isEnable !== 1 ? null : true);
|
|
$('#disable-btn').prop('disabled', row.isEnable === 1 ? null : true);
|
|
};
|
|
|
|
this.OnTaskUnselected = function (index, row) {
|
|
$('#edit-btn').prop('disabled', true);
|
|
$('#delete-btn').prop('disabled', true);
|
|
$('#enable-btn').prop('disabled', true);
|
|
$('#disable-btn').prop('disabled', true);
|
|
};
|
|
|
|
this.GetParams = function () {
|
|
return {
|
|
typeCode: $('.statistic-type span.active').attr('type'),
|
|
fromTime: $("#from-date").datetimebox('getValue'),
|
|
toTime: $("#to-date").datetimebox('getValue'),
|
|
page: 1,
|
|
rows: 1000
|
|
};
|
|
};
|
|
|
|
this.OnAddButtonClick = function () {
|
|
this.onEditButtonClick = function () {
|
|
this.EditDialog.Show(this.selectedRow);
|
|
};
|
|
this.AddDialog.Show();
|
|
};
|
|
|
|
|
|
this.onDeleteButtonClick = function () {
|
|
$('.dialog-delete').show();
|
|
$('.dialog-clear h2').text('确定删除名为「{0}」的账户吗？'.format(this.selectedRow.Name));
|
|
};
|
|
|
|
this.CloseDeleteDialog = function () {
|
|
$('.dialog-delete').hide();
|
|
};
|
|
|
|
this.OnTableGridBeforeLoad = function () {
|
|
this.statisticGrid.datagrid('getPager').pagination({
|
|
beforePageText: '第',
|
|
afterPageText: '页 共{pages}页',
|
|
displayMsg: '当前显示{from}-{to}条记录 共{total}条记录',
|
|
layout: ['list', 'sep', 'first', 'prev', 'sep', 'manual', 'sep', 'next', 'last', 'sep', 'refresh', 'info']
|
|
});
|
|
};
|
|
};
|
|
|
|
var app = null;
|
|
$(document).ready(function () {
|
|
app = new App();
|
|
app.Startup();
|
|
});
|