[go: up one dir, main page]
Skip to content

Commit

Permalink
feat: 完善数据看板选择时间区间
Browse files Browse the repository at this point in the history
  • Loading branch information
@Calcium-Ion
Calcium-Ion committed Jan 7, 2024
1 parent ce05e7d commit 1c2bba8
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 77 deletions.
25 changes: 24 additions & 1 deletion controller/usedata.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,33 @@ import (
"github.com/gin-gonic/gin"
"net/http"
"one-api/model"
"strconv"
)

func GetAllQuotaDates(c *gin.Context) {
dates, err := model.GetAllQuotaDates()
startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
dates, err := model.GetAllQuotaDates(startTimestamp, endTimestamp)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
return
}
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": dates,
})
return
}

func GetUserQuotaDates(c *gin.Context) {
userId := c.GetInt("id")
startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
dates, err := model.GetQuotaDataByUserId(userId, startTimestamp, endTimestamp)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
Expand Down
13 changes: 10 additions & 3 deletions model/usedata.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,23 @@ func SaveQuotaDataCache() {
CacheQuotaData = make(map[string]*QuotaData)
}

func GetQuotaDataByUsername(username string) (quotaData []*QuotaData, err error) {
func GetQuotaDataByUsername(username string, startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
var quotaDatas []*QuotaData
// 从quota_data表中查询数据
err = DB.Table("quota_data").Where("username = ?", username).Find(&quotaDatas).Error
return quotaDatas, err
}

func GetAllQuotaDates() (quotaData []*QuotaData, err error) {
func GetQuotaDataByUserId(userId int, startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
var quotaDatas []*QuotaData
// 从quota_data表中查询数据
err = DB.Table("quota_data").Find(&quotaDatas).Error
err = DB.Table("quota_data").Where("user_id = ? and created_at >= ? and created_at <= ?", userId, startTime, endTime).Find(&quotaDatas).Error
return quotaDatas, err
}

func GetAllQuotaDates(startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
var quotaDatas []*QuotaData
// 从quota_data表中查询数据
err = DB.Table("quota_data").Where("created_at >= ? and created_at <= ?", startTime, endTime).Find(&quotaDatas).Error
return quotaDatas, err
}
1 change: 1 addition & 0 deletions router/api-router.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ func SetApiRouter(router *gin.Engine) {

dataRoute := apiRouter.Group("/data")
dataRoute.GET("/", middleware.AdminAuth(), controller.GetAllQuotaDates)
dataRoute.GET("/self", middleware.UserAuth(), controller.GetUserQuotaDates)

logRoute.Use(middleware.CORS())
{
Expand Down
1 change: 0 additions & 1 deletion web/src/components/LogsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,6 @@ const LogsTable = () => {
value={end_timestamp} type='dateTime'
name='end_timestamp'
onChange={value => handleInputChange(value, 'end_timestamp')}/>
{/*<Form.Button fluid label='操作' width={2} >}
{
isAdminUser && <>
<Form.Input field="channel" label='渠道 ID' style={{width: 176}} value={channel}
Expand Down
142 changes: 70 additions & 72 deletions web/src/pages/Detail/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, {useEffect, useState} from 'react';
import React, {useEffect, useRef, useState} from 'react';
import {Button, Col, Form, Layout, Row} from "@douyinfe/semi-ui";
import VChart from '@visactor/vchart';
import {useEffectOnce} from "usehooks-ts";
import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
import {ITEMS_PER_PAGE} from "../../constants";
import {getQuotaWithUnit} from "../../helpers/render";

const Detail = (props) => {
Expand All @@ -19,8 +18,9 @@ const Detail = (props) => {
});
const {username, token_name, model_name, start_timestamp, end_timestamp, channel} = inputs;
const isAdminUser = isAdmin();
let modelDataChart = null;
let modelDataPieChart = null;
const initialized = useRef(false)
const [modelDataChart, setModelDataChart] = useState(null);
const [modelDataPieChart, setModelDataPieChart] = useState(null);
const [loading, setLoading] = useState(true);
const [quotaData, setQuotaData] = useState([]);
const [quotaDataPie, setQuotaDataPie] = useState([]);
Expand Down Expand Up @@ -116,97 +116,96 @@ const Detail = (props) => {
}
};

const loadQuotaData = async () => {
const loadQuotaData = async (lineChart, pieChart) => {
setLoading(true);

let url = '';
let localStartTimestamp = Date.parse(start_timestamp) / 1000;
let localEndTimestamp = Date.parse(end_timestamp) / 1000;
if (isAdminUser) {
url = `/api/data`;
url = `/api/data/?username=${username}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
} else {
url = `/api/data/self`;
url = `/api/data/self/?start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
}
const res = await API.get(url);
const {success, message, data} = res.data;
if (success) {
setQuotaData(data);
updateChart(data);
updateChart(lineChart, pieChart, data);
} else {
showError(message);
}
setLoading(false);
};

const refresh = async () => {
await loadQuotaData();
await loadQuotaData(modelDataChart, modelDataPieChart);
};

const updateChart = (data) => {
if (isAdminUser) {
// 将所有用户的数据累加
let pieData = [];
let lineData = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
const {count, id, model_name, quota, user_id, username} = item;
// 合并model_name
let pieItem = pieData.find(item => item.model_name === model_name);
if (pieItem) {
pieItem.count += count;
} else {
pieData.push({
"type": model_name,
"value": count
});
}
// 合并created_at和model_name 为 lineData, created_at 数据类型是小时的时间戳
// 转换日期格式
let createTime = timestamp2string1(item.created_at);
let lineItem = lineData.find(item => item.Time === item.createTime && item.Model === model_name);
if (lineItem) {
lineItem.Usage += getQuotaWithUnit(quota);
} else {
lineData.push({
"Time": createTime,
"Model": model_name,
"Usage": getQuotaWithUnit(quota)
});
}

}
// sort by count
pieData.sort((a, b) => b.value - a.value);
spec_line.data[0].values = lineData;
spec_pie.data[0].values = pieData;
// console.log('spec_line', spec_line);
console.log('spec_pie', spec_pie);
// modelDataChart.renderAsync();
modelDataPieChart.updateSpec(spec_pie);
modelDataChart.updateSpec(spec_line);
const initChart = async () => {
let lineChart = modelDataChart
if (!modelDataChart) {
lineChart = new VChart(spec_line, {dom: 'model_data'});
setModelDataChart(lineChart);
await lineChart.renderAsync();
}
let pieChart = modelDataPieChart
if (!modelDataPieChart) {
pieChart = new VChart(spec_pie, {dom: 'model_pie'});
setModelDataPieChart(pieChart);
await pieChart.renderAsync();
}
console.log('init vchart');
await loadQuotaData(lineChart, pieChart)
}

useEffect(() => {
refresh();
}, []);

useEffectOnce(() => {
// 创建 vchart 实例
if (!modelDataChart) {
modelDataChart = new VChart(spec_line, {dom: 'model_data'});
// 绘制
modelDataChart.renderAsync();
const updateChart = (lineChart, pieChart, data) => {
if (isAdminUser) {
// 将所有用户合并
}
let pieData = [];
let lineData = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
const {count, id, model_name, quota, user_id, username} = item;
// 合并model_name
let pieItem = pieData.find(item => item.type === model_name);
if (pieItem) {
pieItem.count += count;
} else {
pieData.push({
"type": model_name,
"value": count
});
}
// 合并created_at和model_name 为 lineData, created_at 数据类型是小时的时间戳
// 转换日期格式
let createTime = timestamp2string1(item.created_at);
let lineItem = lineData.find(item => item.Time === item.createTime && item.Model === model_name);
if (lineItem) {
lineItem.Usage += getQuotaWithUnit(quota);
} else {
lineData.push({
"Time": createTime,
"Model": model_name,
"Usage": getQuotaWithUnit(quota)
});
}

if (!modelDataPieChart) {
modelDataPieChart = new VChart(spec_pie, {dom: 'model_pie'});
// 绘制
modelDataPieChart.renderAsync();
}
// sort by count
pieData.sort((a, b) => b.value - a.value);
pieChart.updateData('id0', pieData);
lineChart.updateData('barData', lineData);

console.log('render vchart');
})
}

useEffectOnce(() => {
if (!initialized.current) {
initialized.current = true;
initChart();
}
});

return (
<>
Expand All @@ -227,18 +226,17 @@ const Detail = (props) => {
value={end_timestamp} type='dateTime'
name='end_timestamp'
onChange={value => handleInputChange(value, 'end_timestamp')}/>
{/*<Form.Button fluid label='操作' width={2} >}
{/*{*/}
{/* isAdminUser && <>*/}
{/* <Form.Input field="username" label='用户名称' style={{width: 176}} value={username}*/}
{/* placeholder={'可选值'} name='username'*/}
{/* => handleInputChange(value, 'username')}/>*/}
{/* </>*/}
{/*}*/}
{/*<Form.Section>*/}
{/* <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"*/}
{/* >查询</Button>*/}
{/*</Form.Section>*/}
<Form.Section>
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
onClick={refresh}>查询</Button>
</Form.Section>
</>
</Form>
<div style={{height: 500}}>
Expand Down

0 comments on commit 1c2bba8

Please sign in to comment.