perf: 美化数据看板

model/usedata.go

@@ -12,7 +12,7 @@ type QuotaData struct {
 	Id        int    `json:"id"`
 	UserID    int    `json:"user_id" gorm:"index"`
 	Username  string `json:"username" gorm:"index:idx_qdt_model_user_name,priority:2;size:64;default:''"`
-	ModelName string `json:"model_name" gorm:"index;index:idx_qdt_model_user_name,priority:1;size:64;default:''"`
+	ModelName string `json:"model_name" gorm:"index:idx_qdt_model_user_name,priority:1;size:64;default:''"`
 	CreatedAt int64  `json:"created_at" gorm:"bigint;index:idx_qdt_created_at,priority:2"`
 	Count     int    `json:"count" gorm:"default:0"`
 	Quota     int    `json:"quota" gorm:"default:0"`

web/src/helpers/render.js

-import { Label } from 'semantic-ui-react';
+import {Label} from 'semantic-ui-react';
 import {Tag} from "@douyinfe/semi-ui";
 
 export function renderText(text, limit) {
@@ -42,6 +42,15 @@ export function renderNumber(num) {
     }
 }
 
+export function renderQuotaNumberWithDigit(num, digits = 2) {
+    let displayInCurrency = localStorage.getItem('display_in_currency');
+    num = num.toFixed(digits);
+    if (displayInCurrency) {
+        return '$' + num;
+    }
+    return num;
+}
+
 export function renderNumberWithPoint(num) {
     num = num.toFixed(2);
     if (num >= 100000) {

web/src/pages/Detail/index.js

 import React, {useEffect, useRef, useState} from 'react';
-import {Button, Col, Form, Layout, Row} from "@douyinfe/semi-ui";
+import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
 import VChart from '@visactor/vchart';
 import {useEffectOnce} from "usehooks-ts";
 import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
-import {getQuotaWithUnit} from "../../helpers/render";
+import {getQuotaWithUnit, renderNumber, renderQuotaNumberWithDigit} from "../../helpers/render";
 
 const Detail = (props) => {
 
@@ -48,7 +48,7 @@ const Detail = (props) => {
         },
         title: {
             visible: true,
-            text: '模型消耗分布'
+            text: '模型消耗分布（小时）'
         },
         bar: {
             // The state style of bar
@@ -58,6 +58,24 @@ const Detail = (props) => {
                     lineWidth: 1
                 }
             }
+        },
+        tooltip: {
+            mark: {
+                content: [
+                    {
+                        key: datum => datum['Model'],
+                        value: datum => renderQuotaNumberWithDigit(datum['Usage'], 4)
+                    }
+                ]
+            },
+            dimension: {
+                content: [
+                    {
+                        key: datum => datum['Model'],
+                        value: datum => renderQuotaNumberWithDigit(datum['Usage'], 4)
+                    }
+                ]
+            }
         }
     };
 
@@ -110,7 +128,7 @@ const Detail = (props) => {
                 content: [
                     {
                         key: datum => datum['type'],
-                        value: datum => datum['value']
+                        value: datum => renderNumber(datum['value'])
                     }
                 ]
             }
@@ -215,7 +233,7 @@ const Detail = (props) => {
         <>
             <Layout>
                 <Layout.Header>
-                    <h3>数据看板(24H)</h3>
+                    <h3>数据看板</h3>
                 </Layout.Header>
                 <Layout.Content>
                     <Form layout='horizontal' style={{marginTop: 10}}>
@@ -239,16 +257,18 @@ const Detail = (props) => {
                             {/*}*/}
                             <Form.Section>
                                 <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
-                                        onClick={refresh}>查询</Button>
+                                        onClick={refresh} loading={loading}>查询</Button>
                             </Form.Section>
                         </>
                     </Form>
+                    <Spin spinning={loading}>
                         <div style={{height: 500}}>
                             <div id="model_pie" style={{width: '100%', minWidth: 100}}></div>
                         </div>
                         <div style={{height: 500}}>
                             <div id="model_data" style={{width: '100%', minWidth: 100}}></div>
                         </div>
+                    </Spin>
                 </Layout.Content>
             </Layout>
         </>