|
|
|
@ -5,6 +5,7 @@ |
|
|
|
this.Startup = function () { |
|
|
|
$('#manage').addClass('active'); |
|
|
|
|
|
|
|
this.RedirectPage(); |
|
|
|
this.ReLayout(); |
|
|
|
this.InitDate(); |
|
|
|
|
|
|
|
@ -15,13 +16,20 @@ |
|
|
|
window.onresize = this.ReLayout.bind(this); |
|
|
|
}; |
|
|
|
|
|
|
|
this.RedirectPage = function () { |
|
|
|
var user = document.getElementById('user-info'); |
|
|
|
if (user.getAttribute('class') === 'user-login') |
|
|
|
window.location.href = '/User/Login'; |
|
|
|
else |
|
|
|
return; |
|
|
|
}; |
|
|
|
|
|
|
|
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) { |
|
|
|
@ -30,7 +38,6 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
this.OnQueryButtonClick = function () { |
|
|
|
//this.ReLoadTableData();
|
|
|
|
this.ReloadChartData(); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -41,12 +48,16 @@ |
|
|
|
url: '/StatisticAnalysis/Query', |
|
|
|
data: this.GetParams(), |
|
|
|
success: function (result) { |
|
|
|
console.log(JSON.parse(result).rows) |
|
|
|
var rows = JSON.parse(result).rows; |
|
|
|
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 xAxises = this.GetSeries(rows, name).xAxises; |
|
|
|
var values = this.GetSeries(rows, name).series; |
|
|
|
var pieData = this.GetSeries(rows, name).pieData; |
|
|
|
var series = this.GetElementSerie(type, name, values); |
|
|
|
this.InitChart(series, xAxises, JSON.parse(result).rows); |
|
|
|
this.InitChart(series, xAxises, rows, name); |
|
|
|
this.InitPieChart(pieData, name); |
|
|
|
}.bind(this) |
|
|
|
}); |
|
|
|
}; |
|
|
|
@ -55,33 +66,59 @@ |
|
|
|
return { |
|
|
|
type: type, |
|
|
|
name: name, |
|
|
|
data: values, |
|
|
|
pointWidth: 30 |
|
|
|
data: values |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
this.GetSeries = function (result) { |
|
|
|
this.GetSeries = function (result, name) { |
|
|
|
var series = []; |
|
|
|
var xAxises = []; |
|
|
|
var count = []; |
|
|
|
var pieData = []; |
|
|
|
|
|
|
|
result.forEach(function (item, index) { |
|
|
|
var time = moment(item.LastComputeTime).format("YYYY-MM-DD"); |
|
|
|
xAxises.push(time); |
|
|
|
count.push(item.ComputeCount); |
|
|
|
}.bind(this)); |
|
|
|
|
|
|
|
result.forEach(function (item, index) { |
|
|
|
var sum = count.reduce(function (prev, next) { |
|
|
|
return prev + next; |
|
|
|
}); |
|
|
|
|
|
|
|
xAxises.push(name === '根据用户' ? item.UserName : item.OrgName); |
|
|
|
series.push(item.ComputeCount); |
|
|
|
}); |
|
|
|
pieData.push({ |
|
|
|
name: name === '根据用户' ? item.UserName : item.OrgName, |
|
|
|
y: this.formatDecimal(String(item.ComputeCount / sum) / 100) * 100 |
|
|
|
}) |
|
|
|
}.bind(this)) |
|
|
|
|
|
|
|
return { |
|
|
|
series: series, |
|
|
|
xAxises: xAxises |
|
|
|
xAxises: xAxises, |
|
|
|
pieData: pieData |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitChart = function (series, xAxises, values) { |
|
|
|
this.formatDecimal = function (value) { |
|
|
|
console.log(value) |
|
|
|
value = value.toString() |
|
|
|
let index = value.indexOf('.') |
|
|
|
if (index !== -1) { |
|
|
|
value = value.substring(0, 5 + index + 1) |
|
|
|
} else { |
|
|
|
value = value.substring(0) |
|
|
|
} |
|
|
|
return parseFloat(value).toFixed(5) |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitChart = function (series, xAxises, values, name) { |
|
|
|
Highcharts.chart('chart', { |
|
|
|
chart: { |
|
|
|
backgroundColor: '#002145' |
|
|
|
backgroundColor: '#052a50' |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: this.GetParams().fromTime + ' 至 ' + this.GetParams().toTime, |
|
|
|
text: moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日') + name.slice(2) + '计算次数', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
@ -91,6 +128,7 @@ |
|
|
|
text: '计算次数', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
verticalAlign: 'top', |
|
|
|
@ -106,10 +144,12 @@ |
|
|
|
labels: { |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
}, |
|
|
|
lineColor: '#234979' |
|
|
|
lineColor: '#234979', |
|
|
|
crosshair: true |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
title: { |
|
|
|
@ -118,48 +158,69 @@ |
|
|
|
labels: { |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
}, |
|
|
|
gridLineColor: '#234979' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
useHTML: true, |
|
|
|
crosshair: true, |
|
|
|
backgroundColor: '#002145', |
|
|
|
shadow: true, |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
formatter: function () { |
|
|
|
return '<b>' + this.x + '</b>' + '<br/>' + |
|
|
|
return '<b style="margin-bottom: 5px">' + this.x + '</b>' + '<br/>' + |
|
|
|
'计算次数：' + '<b>' + this.y + '</b>' + '次' + '<br/>' + |
|
|
|
'计算用户：' + app.GetNames(values, this.x); |
|
|
|
'最后计算时间：' + app.GetNames(values, this.x, name); |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
itemStyle: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
itemHoverStyle: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
plotOptions: { |
|
|
|
column: { |
|
|
|
pointWidth: 30, |
|
|
|
borderRadius: 3, |
|
|
|
borderColor: '' |
|
|
|
}, |
|
|
|
series: { |
|
|
|
color: { |
|
|
|
linearGradient: { |
|
|
|
x1: 0, |
|
|
|
y1: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1 |
|
|
|
}, |
|
|
|
stops: [ |
|
|
|
[0, '#266cb9'], |
|
|
|
[1, '#00d5f6'] |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
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.GetNames = function (values, name, type) { |
|
|
|
var time = values.find(function (item) { |
|
|
|
return (type === '根据用户' ? item.UserName : item.OrgName) === name; |
|
|
|
}).LastComputeTime; |
|
|
|
return moment(time).format('YYYY-MM-DD'); |
|
|
|
}; |
|
|
|
|
|
|
|
this.ReLoadTableData = function () { |
|
|
|
@ -174,6 +235,81 @@ |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitPieChart = function (series, name) { |
|
|
|
var firstColors = ['#00d5f6', '#dc9884', '#8c83dc', '#e4e189', '#97e6af', '#7aa9da', '#b7d2ff', '#88f187', '#e3ea79', '#e29f6f']; |
|
|
|
var lastColors = ['#266cb9', '#bd3d17', '#3324a9', '#b3ae15', '#229625', '#1538e4', '#b7d2ff', '#3ac720', '#cad619', '#d2691f']; |
|
|
|
var chart = Highcharts.chart('pie-chart', { |
|
|
|
chart: { |
|
|
|
backgroundColor: '#052a50', |
|
|
|
type: 'pie' |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日') + name.slice(2) + '统计占比', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
credits: { |
|
|
|
enabled: false |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
headerFormat: '<b>{point.key}</b></br>', |
|
|
|
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>', |
|
|
|
useHTML: true, |
|
|
|
crosshair: true, |
|
|
|
backgroundColor: '#002145', |
|
|
|
style: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
itemStyle: { |
|
|
|
color: '#ffffff', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
}, |
|
|
|
itemHoverStyle: { |
|
|
|
color: '#ffffff', |
|
|
|
fontSize: '14px', |
|
|
|
fontFamily: '微软雅黑' |
|
|
|
} |
|
|
|
}, |
|
|
|
plotOptions: { |
|
|
|
pie: { |
|
|
|
allowPointSelect: true, |
|
|
|
borderWidth: 0, |
|
|
|
cursor: 'pointer', |
|
|
|
dataLabels: { |
|
|
|
enabled: false |
|
|
|
}, |
|
|
|
showInLegend: true |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
name: name + '占比', |
|
|
|
data: series |
|
|
|
}] |
|
|
|
},function (chart) { |
|
|
|
SetGradientColor(chart); |
|
|
|
}); |
|
|
|
function SetGradientColor(chart) { |
|
|
|
var pointsList = chart.series[0].points; |
|
|
|
for (var i = 0; i < pointsList.length; i++) { |
|
|
|
chart.series[0].points[i].update({ |
|
|
|
color: { |
|
|
|
linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
|
|
|
|
stops: [ |
|
|
|
[0, Highcharts.Color(firstColors[i]).setOpacity(1).get('rgba')], |
|
|
|
[1, lastColors[i]] |
|
|
|
] |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
this.InitDate = function () { |
|
|
|
$('#from-date').datebox({ |
|
|
|
panelAlign: 'right', |
|
|
|
@ -214,91 +350,6 @@ |
|
|
|
$("#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'), |
|
|
|
@ -308,32 +359,6 @@ |
|
|
|
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; |
|
|
|
|
