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

controller/usedata.go

@@ -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,

model/usedata.go

@@ -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
 }

web/src/pages/Detail/index.js

@@ -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>