perf: 优化数据看板性能和显示效果

This commit is contained in:
CaIon 2024-01-08 18:49:10 +08:00
parent f3f8cdc4a3
commit 95e84f2bb1
3 changed files with 35 additions and 16 deletions

View File

@ -10,7 +10,8 @@ import (
func GetAllQuotaDates(c *gin.Context) {
startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
dates, err := model.GetAllQuotaDates(startTimestamp, endTimestamp)
username := c.Query("username")
dates, err := model.GetAllQuotaDates(startTimestamp, endTimestamp, username)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,

View File

@ -102,9 +102,14 @@ func GetQuotaDataByUserId(userId int, startTime int64, endTime int64) (quotaData
return quotaDatas, err
}
func GetAllQuotaDates(startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
func GetAllQuotaDates(startTime int64, endTime int64, username string) (quotaData []*QuotaData, err error) {
if username != "" {
return GetQuotaDataByUsername(username, startTime, endTime)
}
var quotaDatas []*QuotaData
// 从quota_data表中查询数据
err = DB.Table("quota_data").Where("created_at >= ? and created_at <= ?", startTime, endTime).Find(&quotaDatas).Error
// only select model_name, sum(count) as count, sum(quota) as quota, model_name, created_at from quota_data group by model_name, created_at;
//err = DB.Table("quota_data").Where("created_at >= ? and created_at <= ?", startTime, endTime).Find(&quotaDatas).Error
err = DB.Table("quota_data").Select("model_name, sum(count) as count, sum(quota) as quota, created_at").Where("created_at >= ? and created_at <= ?", startTime, endTime).Group("model_name, created_at").Find(&quotaDatas).Error
return quotaDatas, err
}

View File

@ -72,9 +72,18 @@ const Detail = (props) => {
content: [
{
key: datum => datum['Model'],
value: datum => renderQuotaNumberWithDigit(datum['Usage'], 4)
value: datum => datum['Usage']
}
],
updateContent: array => {
// sort by value
array.sort((a, b) => b.value - a.value);
// add $
for (let i = 0; i < array.length; i++) {
array[i].value = renderQuotaNumberWithDigit(array[i].value, 4);
}
return array;
}
]
}
}
};
@ -86,7 +95,6 @@ const Detail = (props) => {
id: 'id0',
values: [
{ type: 'null', value: '0' },
{ type: 'null', value: '0' },
]
}
],
@ -151,7 +159,12 @@ const Detail = (props) => {
if (success) {
setQuotaData(data);
if (data.length === 0) {
return;
data.push({
'count': 0,
'model_name': '无数据',
'quota': 0,
'created_at': now.getTime() / 1000
})
}
updateChart(lineChart, pieChart, data);
} else {
@ -169,13 +182,13 @@ const Detail = (props) => {
if (!modelDataChart) {
lineChart = new VChart(spec_line, {dom: 'model_data'});
setModelDataChart(lineChart);
await lineChart.renderAsync();
lineChart.renderAsync();
}
let pieChart = modelDataPieChart
if (!modelDataPieChart) {
pieChart = new VChart(spec_pie, {dom: 'model_pie'});
setModelDataPieChart(pieChart);
await pieChart.renderAsync();
pieChart.renderAsync();
}
console.log('init vchart');
await loadQuotaData(lineChart, pieChart)
@ -248,13 +261,13 @@ const Detail = (props) => {
value={end_timestamp} type='dateTime'
name='end_timestamp'
onChange={value => handleInputChange(value, 'end_timestamp')}/>
{/*{*/}
{/* isAdminUser && <>*/}
{/* <Form.Input field="username" label='用户名称' style={{width: 176}} value={username}*/}
{/* placeholder={'可选值'} name='username'*/}
{/* onChange={value => handleInputChange(value, 'username')}/>*/}
{/* </>*/}
{/*}*/}
{
isAdminUser && <>
<Form.Input field="username" label='用户名称' style={{width: 176}} value={username}
placeholder={'可选值'} name='username'
onChange={value => handleInputChange(value, 'username')}/>
</>
}
<Form.Section>
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
onClick={refresh} loading={loading}>查询</Button>