新增:统计功能
This commit is contained in:
@@ -49,6 +49,32 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
|
|||||||
/// <returns>交易记录数量</returns>
|
/// <returns>交易记录数量</returns>
|
||||||
Task<int> GetCountByEmailIdAsync(long emailMessageId);
|
Task<int> GetCountByEmailIdAsync(long emailMessageId);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取月度统计数据
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="year">年份</param>
|
||||||
|
/// <param name="month">月份</param>
|
||||||
|
/// <returns>月度统计数据</returns>
|
||||||
|
Task<MonthlyStatistics> GetMonthlyStatisticsAsync(int year, int month);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取分类统计数据
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="year">年份</param>
|
||||||
|
/// <param name="month">月份</param>
|
||||||
|
/// <param name="type">交易类型(0:支出, 1:收入)</param>
|
||||||
|
/// <returns>分类统计列表</returns>
|
||||||
|
Task<List<CategoryStatistics>> GetCategoryStatisticsAsync(int year, int month, TransactionType type);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取多个月的趋势统计数据
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="startYear">开始年份</param>
|
||||||
|
/// <param name="startMonth">开始月份</param>
|
||||||
|
/// <param name="monthCount">月份数量</param>
|
||||||
|
/// <returns>趋势统计列表</returns>
|
||||||
|
Task<List<TrendStatistics>> GetTrendStatisticsAsync(int startYear, int startMonth, int monthCount);
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 获取指定邮件的交易记录列表
|
/// 获取指定邮件的交易记录列表
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@@ -91,7 +117,21 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
|
|||||||
/// </summary>
|
/// </summary>
|
||||||
/// <param name="keyword">关键词</param>
|
/// <param name="keyword">关键词</param>
|
||||||
/// <returns>匹配的交易记录列表</returns>
|
/// <returns>匹配的交易记录列表</returns>
|
||||||
Task<List<TransactionRecord>> QueryBySqlAsync(string sql);
|
Task<List<TransactionRecord>> QueryByWhereAsync(string sql);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 执行完整的SQL查询
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="completeSql">完整的SELECT SQL语句</param>
|
||||||
|
/// <returns>查询结果列表</returns>
|
||||||
|
Task<List<TransactionRecord>> ExecuteRawSqlAsync(string completeSql);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 执行动态SQL查询,返回动态对象
|
||||||
|
/// </summary>
|
||||||
|
/// <param name="completeSql">完整的SELECT SQL语句</param>
|
||||||
|
/// <returns>动态查询结果列表</returns>
|
||||||
|
Task<List<dynamic>> ExecuteDynamicSqlAsync(string completeSql);
|
||||||
}
|
}
|
||||||
|
|
||||||
public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<TransactionRecord>(freeSql), ITransactionRecordRepository
|
public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<TransactionRecord>(freeSql), ITransactionRecordRepository
|
||||||
@@ -275,13 +315,151 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
|
|||||||
.ExecuteAffrowsAsync();
|
.ExecuteAffrowsAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task<List<TransactionRecord>> QueryBySqlAsync(string sql)
|
public async Task<List<TransactionRecord>> QueryByWhereAsync(string sql)
|
||||||
{
|
{
|
||||||
return await FreeSql.Select<TransactionRecord>()
|
return await FreeSql.Select<TransactionRecord>()
|
||||||
.Where(sql)
|
.Where(sql)
|
||||||
.OrderByDescending(t => t.OccurredAt)
|
.OrderByDescending(t => t.OccurredAt)
|
||||||
.ToListAsync();
|
.ToListAsync();
|
||||||
}
|
}
|
||||||
|
public async Task<List<TransactionRecord>> ExecuteRawSqlAsync(string completeSql)
|
||||||
|
{
|
||||||
|
return await FreeSql.Ado.QueryAsync<TransactionRecord>(completeSql);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async Task<List<dynamic>> ExecuteDynamicSqlAsync(string completeSql)
|
||||||
|
{
|
||||||
|
var dt = await FreeSql.Ado.ExecuteDataTableAsync(completeSql);
|
||||||
|
var result = new List<dynamic>();
|
||||||
|
|
||||||
|
foreach (System.Data.DataRow row in dt.Rows)
|
||||||
|
{
|
||||||
|
var expando = new System.Dynamic.ExpandoObject() as IDictionary<string, object>;
|
||||||
|
foreach (System.Data.DataColumn column in dt.Columns)
|
||||||
|
{
|
||||||
|
expando[column.ColumnName] = row[column];
|
||||||
|
}
|
||||||
|
result.Add(expando);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
public async Task<MonthlyStatistics> GetMonthlyStatisticsAsync(int year, int month)
|
||||||
|
{
|
||||||
|
var startDate = new DateTime(year, month, 1);
|
||||||
|
var endDate = startDate.AddMonths(1);
|
||||||
|
|
||||||
|
var records = await FreeSql.Select<TransactionRecord>()
|
||||||
|
.Where(t => t.OccurredAt >= startDate && t.OccurredAt < endDate)
|
||||||
|
.ToListAsync();
|
||||||
|
|
||||||
|
var statistics = new MonthlyStatistics
|
||||||
|
{
|
||||||
|
Year = year,
|
||||||
|
Month = month
|
||||||
|
};
|
||||||
|
|
||||||
|
foreach (var record in records)
|
||||||
|
{
|
||||||
|
var amount = Math.Abs(record.Amount);
|
||||||
|
|
||||||
|
if (record.Type == TransactionType.Expense)
|
||||||
|
{
|
||||||
|
statistics.TotalExpense += amount;
|
||||||
|
statistics.ExpenseCount++;
|
||||||
|
if (amount > statistics.MaxExpense)
|
||||||
|
{
|
||||||
|
statistics.MaxExpense = amount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (record.Type == TransactionType.Income)
|
||||||
|
{
|
||||||
|
statistics.TotalIncome += amount;
|
||||||
|
statistics.IncomeCount++;
|
||||||
|
if (amount > statistics.MaxIncome)
|
||||||
|
{
|
||||||
|
statistics.MaxIncome = amount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
statistics.Balance = statistics.TotalIncome - statistics.TotalExpense;
|
||||||
|
statistics.TotalCount = records.Count;
|
||||||
|
|
||||||
|
return statistics;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async Task<List<CategoryStatistics>> GetCategoryStatisticsAsync(int year, int month, TransactionType type)
|
||||||
|
{
|
||||||
|
var startDate = new DateTime(year, month, 1);
|
||||||
|
var endDate = startDate.AddMonths(1);
|
||||||
|
|
||||||
|
var records = await FreeSql.Select<TransactionRecord>()
|
||||||
|
.Where(t => t.OccurredAt >= startDate && t.OccurredAt < endDate && t.Type == type)
|
||||||
|
.ToListAsync();
|
||||||
|
|
||||||
|
var categoryGroups = records
|
||||||
|
.GroupBy(t => t.Classify ?? "未分类")
|
||||||
|
.Select(g => new CategoryStatistics
|
||||||
|
{
|
||||||
|
Classify = g.Key,
|
||||||
|
Amount = g.Sum(t => Math.Abs(t.Amount)),
|
||||||
|
Count = g.Count()
|
||||||
|
})
|
||||||
|
.OrderByDescending(c => c.Amount)
|
||||||
|
.ToList();
|
||||||
|
|
||||||
|
// 计算百分比
|
||||||
|
var total = categoryGroups.Sum(c => c.Amount);
|
||||||
|
if (total > 0)
|
||||||
|
{
|
||||||
|
foreach (var category in categoryGroups)
|
||||||
|
{
|
||||||
|
category.Percent = Math.Round((category.Amount / total) * 100, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return categoryGroups;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async Task<List<TrendStatistics>> GetTrendStatisticsAsync(int startYear, int startMonth, int monthCount)
|
||||||
|
{
|
||||||
|
var trends = new List<TrendStatistics>();
|
||||||
|
|
||||||
|
for (int i = 0; i < monthCount; i++)
|
||||||
|
{
|
||||||
|
var targetYear = startYear;
|
||||||
|
var targetMonth = startMonth + i;
|
||||||
|
|
||||||
|
// 处理月份溢出
|
||||||
|
while (targetMonth > 12)
|
||||||
|
{
|
||||||
|
targetMonth -= 12;
|
||||||
|
targetYear++;
|
||||||
|
}
|
||||||
|
|
||||||
|
var startDate = new DateTime(targetYear, targetMonth, 1);
|
||||||
|
var endDate = startDate.AddMonths(1);
|
||||||
|
|
||||||
|
var records = await FreeSql.Select<TransactionRecord>()
|
||||||
|
.Where(t => t.OccurredAt >= startDate && t.OccurredAt < endDate)
|
||||||
|
.ToListAsync();
|
||||||
|
|
||||||
|
var expense = records.Where(t => t.Type == TransactionType.Expense).Sum(t => Math.Abs(t.Amount));
|
||||||
|
var income = records.Where(t => t.Type == TransactionType.Income).Sum(t => Math.Abs(t.Amount));
|
||||||
|
|
||||||
|
trends.Add(new TrendStatistics
|
||||||
|
{
|
||||||
|
Year = targetYear,
|
||||||
|
Month = targetMonth,
|
||||||
|
Expense = expense,
|
||||||
|
Income = income,
|
||||||
|
Balance = income - expense
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return trends;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
@@ -309,3 +487,43 @@ public class ReasonGroupDto
|
|||||||
/// </summary>
|
/// </summary>
|
||||||
public string SampleClassify { get; set; } = string.Empty;
|
public string SampleClassify { get; set; } = string.Empty;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 月度统计数据
|
||||||
|
/// </summary>
|
||||||
|
public class MonthlyStatistics
|
||||||
|
{
|
||||||
|
public int Year { get; set; }
|
||||||
|
public int Month { get; set; }
|
||||||
|
public decimal TotalExpense { get; set; }
|
||||||
|
public decimal TotalIncome { get; set; }
|
||||||
|
public decimal Balance { get; set; }
|
||||||
|
public int ExpenseCount { get; set; }
|
||||||
|
public int IncomeCount { get; set; }
|
||||||
|
public int TotalCount { get; set; }
|
||||||
|
public decimal MaxExpense { get; set; }
|
||||||
|
public decimal MaxIncome { get; set; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 分类统计数据
|
||||||
|
/// </summary>
|
||||||
|
public class CategoryStatistics
|
||||||
|
{
|
||||||
|
public string Classify { get; set; } = string.Empty;
|
||||||
|
public decimal Amount { get; set; }
|
||||||
|
public int Count { get; set; }
|
||||||
|
public decimal Percent { get; set; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 趋势统计数据
|
||||||
|
/// </summary>
|
||||||
|
public class TrendStatistics
|
||||||
|
{
|
||||||
|
public int Year { get; set; }
|
||||||
|
public int Month { get; set; }
|
||||||
|
public decimal Expense { get; set; }
|
||||||
|
public decimal Income { get; set; }
|
||||||
|
public decimal Balance { get; set; }
|
||||||
|
}
|
||||||
@@ -5,7 +5,9 @@ namespace Service;
|
|||||||
public interface IOpenAiService
|
public interface IOpenAiService
|
||||||
{
|
{
|
||||||
Task<string?> ChatAsync(string systemPrompt, string userPrompt);
|
Task<string?> ChatAsync(string systemPrompt, string userPrompt);
|
||||||
|
Task<string?> ChatAsync(string prompt);
|
||||||
IAsyncEnumerable<string> ChatStreamAsync(string systemPrompt, string userPrompt);
|
IAsyncEnumerable<string> ChatStreamAsync(string systemPrompt, string userPrompt);
|
||||||
|
IAsyncEnumerable<string> ChatStreamAsync(string prompt);
|
||||||
}
|
}
|
||||||
|
|
||||||
public class OpenAiService(
|
public class OpenAiService(
|
||||||
@@ -70,6 +72,134 @@ public class OpenAiService(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async Task<string?> ChatAsync(string prompt)
|
||||||
|
{
|
||||||
|
var cfg = aiSettings.Value;
|
||||||
|
if (string.IsNullOrWhiteSpace(cfg.Endpoint) ||
|
||||||
|
string.IsNullOrWhiteSpace(cfg.Key) ||
|
||||||
|
string.IsNullOrWhiteSpace(cfg.Model))
|
||||||
|
{
|
||||||
|
logger.LogWarning("未配置 OpenAI/DeepSeek 接口,无法调用 AI");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
using var http = new HttpClient();
|
||||||
|
http.Timeout = TimeSpan.FromSeconds(30);
|
||||||
|
http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", cfg.Key);
|
||||||
|
|
||||||
|
var payload = new
|
||||||
|
{
|
||||||
|
model = cfg.Model,
|
||||||
|
temperature = 0,
|
||||||
|
messages = new object[]
|
||||||
|
{
|
||||||
|
new { role = "user", content = prompt }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var url = cfg.Endpoint.TrimEnd('/') + "/chat/completions";
|
||||||
|
var json = JsonSerializer.Serialize(payload);
|
||||||
|
using var content = new StringContent(json, Encoding.UTF8, "application/json");
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
using var resp = await http.PostAsync(url, content);
|
||||||
|
if (!resp.IsSuccessStatusCode)
|
||||||
|
{
|
||||||
|
var err = await resp.Content.ReadAsStringAsync();
|
||||||
|
throw new InvalidOperationException($"AI接口调用失败: {(int)resp.StatusCode} {resp.ReasonPhrase}, {err}");
|
||||||
|
}
|
||||||
|
|
||||||
|
var respText = await resp.Content.ReadAsStringAsync();
|
||||||
|
|
||||||
|
using var doc = JsonDocument.Parse(respText);
|
||||||
|
var root = doc.RootElement;
|
||||||
|
var contentText = root.GetProperty("choices")[0]
|
||||||
|
.GetProperty("message")
|
||||||
|
.GetProperty("content")
|
||||||
|
.GetString();
|
||||||
|
|
||||||
|
return contentText;
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "AI 调用失败");
|
||||||
|
throw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async IAsyncEnumerable<string> ChatStreamAsync(string prompt)
|
||||||
|
{
|
||||||
|
var cfg = aiSettings.Value;
|
||||||
|
if (string.IsNullOrWhiteSpace(cfg.Endpoint) ||
|
||||||
|
string.IsNullOrWhiteSpace(cfg.Key) ||
|
||||||
|
string.IsNullOrWhiteSpace(cfg.Model))
|
||||||
|
{
|
||||||
|
logger.LogWarning("未配置 OpenAI/DeepSeek 接口,无法调用 AI");
|
||||||
|
yield break;
|
||||||
|
}
|
||||||
|
|
||||||
|
using var http = new HttpClient();
|
||||||
|
http.Timeout = TimeSpan.FromMinutes(5);
|
||||||
|
http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", cfg.Key);
|
||||||
|
|
||||||
|
var payload = new
|
||||||
|
{
|
||||||
|
model = cfg.Model,
|
||||||
|
temperature = 0,
|
||||||
|
stream = true,
|
||||||
|
messages = new object[]
|
||||||
|
{
|
||||||
|
new { role = "user", content = prompt }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var url = cfg.Endpoint.TrimEnd('/') + "/chat/completions";
|
||||||
|
var json = JsonSerializer.Serialize(payload);
|
||||||
|
using var content = new StringContent(json, Encoding.UTF8, "application/json");
|
||||||
|
|
||||||
|
using var request = new HttpRequestMessage(HttpMethod.Post, url)
|
||||||
|
{
|
||||||
|
Content = content
|
||||||
|
};
|
||||||
|
using var resp = await http.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
|
||||||
|
|
||||||
|
if (!resp.IsSuccessStatusCode)
|
||||||
|
{
|
||||||
|
var err = await resp.Content.ReadAsStringAsync();
|
||||||
|
throw new InvalidOperationException($"AI接口调用失败: {(int)resp.StatusCode} {resp.ReasonPhrase}, {err}");
|
||||||
|
}
|
||||||
|
|
||||||
|
using var stream = await resp.Content.ReadAsStreamAsync();
|
||||||
|
using var reader = new StreamReader(stream);
|
||||||
|
|
||||||
|
string? line;
|
||||||
|
while ((line = await reader.ReadLineAsync()) != null)
|
||||||
|
{
|
||||||
|
if (string.IsNullOrWhiteSpace(line) || !line.StartsWith("data: "))
|
||||||
|
continue;
|
||||||
|
|
||||||
|
var data = line.Substring(6).Trim();
|
||||||
|
if (data == "[DONE]")
|
||||||
|
break;
|
||||||
|
|
||||||
|
using var doc = JsonDocument.Parse(data);
|
||||||
|
var root = doc.RootElement;
|
||||||
|
if (root.TryGetProperty("choices", out var choices) && choices.GetArrayLength() > 0)
|
||||||
|
{
|
||||||
|
var delta = choices[0].GetProperty("delta");
|
||||||
|
if (delta.TryGetProperty("content", out var contentProp))
|
||||||
|
{
|
||||||
|
var contentText = contentProp.GetString();
|
||||||
|
if (!string.IsNullOrEmpty(contentText))
|
||||||
|
{
|
||||||
|
yield return contentText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public async IAsyncEnumerable<string> ChatStreamAsync(string systemPrompt, string userPrompt)
|
public async IAsyncEnumerable<string> ChatStreamAsync(string systemPrompt, string userPrompt)
|
||||||
{
|
{
|
||||||
var cfg = aiSettings.Value;
|
var cfg = aiSettings.Value;
|
||||||
|
|||||||
90
Web/src/api/statistics.js
Normal file
90
Web/src/api/statistics.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
import request from './request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 统计相关 API
|
||||||
|
* 注:统计接口定义在 TransactionRecordController 中
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取月度统计数据
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {number} params.year - 年份
|
||||||
|
* @param {number} params.month - 月份
|
||||||
|
* @returns {Promise<{success: boolean, data: Object}>}
|
||||||
|
* @returns {Object} data.totalExpense - 总支出
|
||||||
|
* @returns {Object} data.totalIncome - 总收入
|
||||||
|
* @returns {Object} data.balance - 结余
|
||||||
|
* @returns {Object} data.expenseCount - 支出笔数
|
||||||
|
* @returns {Object} data.incomeCount - 收入笔数
|
||||||
|
* @returns {Object} data.totalCount - 总笔数
|
||||||
|
* @returns {Object} data.maxExpense - 最大单笔支出
|
||||||
|
* @returns {Object} data.maxIncome - 最大单笔收入
|
||||||
|
*/
|
||||||
|
export const getMonthlyStatistics = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/TransactionRecord/GetMonthlyStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取分类统计数据
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {number} params.year - 年份
|
||||||
|
* @param {number} params.month - 月份
|
||||||
|
* @param {number} params.type - 交易类型 (0:支出, 1:收入, 2:不计入收支)
|
||||||
|
* @returns {Promise<{success: boolean, data: Array}>}
|
||||||
|
* @returns {Array} data - 分类统计列表
|
||||||
|
* @returns {string} data[].classify - 分类名称
|
||||||
|
* @returns {number} data[].amount - 金额
|
||||||
|
* @returns {number} data[].percent - 百分比
|
||||||
|
* @returns {number} data[].count - 交易笔数
|
||||||
|
*/
|
||||||
|
export const getCategoryStatistics = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/TransactionRecord/GetCategoryStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取趋势统计数据
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {number} params.startYear - 开始年份
|
||||||
|
* @param {number} params.startMonth - 开始月份
|
||||||
|
* @param {number} [params.monthCount=6] - 月份数量,默认6个月
|
||||||
|
* @returns {Promise<{success: boolean, data: Array}>}
|
||||||
|
* @returns {Array} data - 趋势统计列表
|
||||||
|
* @returns {number} data[].year - 年份
|
||||||
|
* @returns {number} data[].month - 月份
|
||||||
|
* @returns {number} data[].expense - 支出金额
|
||||||
|
* @returns {number} data[].income - 收入金额
|
||||||
|
*/
|
||||||
|
export const getTrendStatistics = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/TransactionRecord/GetTrendStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取指定月份每天的消费统计
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {number} params.year - 年份
|
||||||
|
* @param {number} params.month - 月份
|
||||||
|
* @returns {Promise<{success: boolean, data: Array}>}
|
||||||
|
* @returns {Array} data - 每日统计列表
|
||||||
|
* @returns {string} data[].date - 日期
|
||||||
|
* @returns {number} data[].count - 交易笔数
|
||||||
|
* @returns {number} data[].amount - 交易金额
|
||||||
|
*/
|
||||||
|
export const getDailyStatistics = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/TransactionRecord/GetDailyStatistics',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -57,6 +57,18 @@ const router = createRouter({
|
|||||||
name: 'classification-nlp',
|
name: 'classification-nlp',
|
||||||
component: () => import('../views/ClassificationNLP.vue'),
|
component: () => import('../views/ClassificationNLP.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/statistics',
|
||||||
|
name: 'statistics',
|
||||||
|
component: () => import('../views/StatisticsView.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/bill-analysis',
|
||||||
|
name: 'bill-analysis',
|
||||||
|
component: () => import('../views/BillAnalysisView.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
381
Web/src/views/BillAnalysisView.vue
Normal file
381
Web/src/views/BillAnalysisView.vue
Normal file
@@ -0,0 +1,381 @@
|
|||||||
|
<template>
|
||||||
|
<div class="analysis-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<van-nav-bar
|
||||||
|
title="智能分析"
|
||||||
|
left-arrow
|
||||||
|
placeholder
|
||||||
|
@click-left="onClickLeft"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="analysis-content">
|
||||||
|
<!-- 输入区域 -->
|
||||||
|
<div class="input-section">
|
||||||
|
<div class="input-header">
|
||||||
|
<h3>输入您的问题</h3>
|
||||||
|
<p class="input-tip">例如:我这三个月坐车花费了多少钱?</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-field
|
||||||
|
v-model="userInput"
|
||||||
|
rows="2"
|
||||||
|
autosize
|
||||||
|
type="textarea"
|
||||||
|
maxlength="500"
|
||||||
|
placeholder="请输入您想了解的账单问题..."
|
||||||
|
show-word-limit
|
||||||
|
:disabled="analyzing"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="quick-questions">
|
||||||
|
<div class="quick-title">快捷问题</div>
|
||||||
|
<van-tag
|
||||||
|
v-for="(q, index) in quickQuestions"
|
||||||
|
:key="index"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
size="medium"
|
||||||
|
@click="selectQuestion(q)"
|
||||||
|
class="quick-tag"
|
||||||
|
>
|
||||||
|
{{ q }}
|
||||||
|
</van-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
round
|
||||||
|
:loading="analyzing"
|
||||||
|
loading-text="分析中..."
|
||||||
|
@click="startAnalysis"
|
||||||
|
:disabled="!userInput.trim()"
|
||||||
|
>
|
||||||
|
开始分析
|
||||||
|
</van-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 结果区域 -->
|
||||||
|
<div class="result-section" v-if="showResult">
|
||||||
|
<div class="result-header">
|
||||||
|
<h3>分析结果</h3>
|
||||||
|
<van-icon
|
||||||
|
name="delete-o"
|
||||||
|
size="18"
|
||||||
|
@click="clearResult"
|
||||||
|
v-if="!analyzing"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result-content" ref="resultContainer">
|
||||||
|
<div v-html="resultHtml"></div>
|
||||||
|
<van-loading v-if="analyzing" class="result-loading">
|
||||||
|
AI正在分析中...
|
||||||
|
</van-loading>
|
||||||
|
<div ref="scrollAnchor"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, nextTick } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { showToast } from 'vant'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const userInput = ref('')
|
||||||
|
const analyzing = ref(false)
|
||||||
|
const showResult = ref(false)
|
||||||
|
const resultHtml = ref('')
|
||||||
|
const resultContainer = ref(null)
|
||||||
|
const scrollAnchor = ref(null)
|
||||||
|
|
||||||
|
// 快捷问题
|
||||||
|
const quickQuestions = [
|
||||||
|
'最近三个月交通费用多少?',
|
||||||
|
'这个月吃饭花了多少钱?',
|
||||||
|
'上个月的收入总额是多少?',
|
||||||
|
'最近半年哪个月花钱最多?'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 返回
|
||||||
|
const onClickLeft = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择快捷问题
|
||||||
|
const selectQuestion = (question) => {
|
||||||
|
userInput.value = question
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空结果
|
||||||
|
const clearResult = () => {
|
||||||
|
showResult.value = false
|
||||||
|
resultHtml.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动到底部
|
||||||
|
const scrollToBottom = async () => {
|
||||||
|
await nextTick()
|
||||||
|
if (scrollAnchor.value) {
|
||||||
|
scrollAnchor.value.scrollIntoView({ behavior: 'smooth', block: 'end' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始分析
|
||||||
|
const startAnalysis = async () => {
|
||||||
|
if (!userInput.value.trim()) {
|
||||||
|
showToast('请输入您的问题')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
analyzing.value = true
|
||||||
|
showResult.value = true
|
||||||
|
resultHtml.value = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
var baseUrl = import.meta.env.VITE_API_BASE_URL || ''
|
||||||
|
const response = await fetch(`${baseUrl}/TransactionRecord/AnalyzeBill`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
userInput: userInput.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('分析请求失败')
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = response.body.getReader()
|
||||||
|
const decoder = new TextDecoder()
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read()
|
||||||
|
|
||||||
|
if (done) break
|
||||||
|
|
||||||
|
const chunk = decoder.decode(value, { stream: true })
|
||||||
|
const lines = chunk.split('\n')
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
if (line.startsWith('data: ')) {
|
||||||
|
const data = line.substring(6).trim()
|
||||||
|
|
||||||
|
if (data === '[DONE]') {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const json = JSON.parse(data)
|
||||||
|
if (json.content) {
|
||||||
|
resultHtml.value += json.content
|
||||||
|
// 滚动到底部
|
||||||
|
scrollToBottom()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// 忽略JSON解析错误
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('分析失败:', error)
|
||||||
|
showToast('分析失败,请重试')
|
||||||
|
resultHtml.value = '<div class="error-message">分析失败,请重试</div>'
|
||||||
|
} finally {
|
||||||
|
analyzing.value = false
|
||||||
|
// 确保分析完成后滚动到底部
|
||||||
|
scrollToBottom()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.analysis-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--van-background-2);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.analysis-content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入区域 */
|
||||||
|
.input-section {
|
||||||
|
background: var(--van-background);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 1px solid var(--van-border-color);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-header h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-tip {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--van-text-color-3);
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-questions {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-tag {
|
||||||
|
margin: 0 8px 8px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 结果区域 */
|
||||||
|
.result-section {
|
||||||
|
background: var(--van-background);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 结果HTML样式 */
|
||||||
|
.result-content :deep(h1),
|
||||||
|
.result-content :deep(h2),
|
||||||
|
.result-content :deep(h3) {
|
||||||
|
color: var(--van-text-color);
|
||||||
|
margin: 16px 0 12px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(h1) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(h2) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(h3) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(p) {
|
||||||
|
margin: 8px 0;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(ul),
|
||||||
|
.result-content :deep(ol) {
|
||||||
|
padding-left: 24px;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(li) {
|
||||||
|
margin: 6px 0;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(table) {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 16px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(th),
|
||||||
|
.result-content :deep(td) {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(th) {
|
||||||
|
background: var(--van-background-2);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(td) {
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(strong) {
|
||||||
|
color: var(--van-text-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(.highlight) {
|
||||||
|
background: #fff3cd;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(.expense-value) {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content :deep(.income-value) {
|
||||||
|
color: #51cf66;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #ff6b6b;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式适配 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.result-content :deep(.highlight) {
|
||||||
|
background: rgba(255, 243, 205, 0.2);
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
834
Web/src/views/StatisticsView.vue
Normal file
834
Web/src/views/StatisticsView.vue
Normal file
@@ -0,0 +1,834 @@
|
|||||||
|
<template>
|
||||||
|
<div class="statistics-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<van-nav-bar title="账单统计" placeholder>
|
||||||
|
<template #right>
|
||||||
|
<van-icon name="chat-o" size="20" @click="goToAnalysis" />
|
||||||
|
</template>
|
||||||
|
</van-nav-bar>
|
||||||
|
|
||||||
|
<!-- 下拉刷新 -->
|
||||||
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<van-loading v-if="loading" vertical style="padding: 100px 0">
|
||||||
|
加载统计数据中...
|
||||||
|
</van-loading>
|
||||||
|
|
||||||
|
<!-- 统计内容 -->
|
||||||
|
<div v-else class="statistics-content">
|
||||||
|
<!-- 月份选择器 -->
|
||||||
|
<div class="month-selector">
|
||||||
|
<van-button
|
||||||
|
icon="arrow-left"
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
@click="changeMonth(-1)"
|
||||||
|
/>
|
||||||
|
<div class="month-text" @click="showMonthPicker = true">
|
||||||
|
{{ currentYear }}年{{ currentMonth }}月
|
||||||
|
<van-icon name="arrow-down" />
|
||||||
|
</div>
|
||||||
|
<van-button
|
||||||
|
icon="arrow"
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
@click="changeMonth(1)"
|
||||||
|
:disabled="isCurrentMonth"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 月度概览卡片 -->
|
||||||
|
<div class="overview-card">
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="label">总支出</div>
|
||||||
|
<div class="value expense">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
|
||||||
|
<div class="sub-text">{{ monthlyData.expenseCount }}笔</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="label">总收入</div>
|
||||||
|
<div class="value income">¥{{ formatMoney(monthlyData.totalIncome) }}</div>
|
||||||
|
<div class="sub-text">{{ monthlyData.incomeCount }}笔</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="overview-item">
|
||||||
|
<div class="label">结余</div>
|
||||||
|
<div class="value" :class="monthlyData.balance >= 0 ? 'income' : 'expense'">
|
||||||
|
{{ monthlyData.balance >= 0 ? '' : '-' }}¥{{ formatMoney(Math.abs(monthlyData.balance)) }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text">{{ monthlyData.totalCount }}笔交易</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分类统计 -->
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-header">
|
||||||
|
<h3 class="stat-title">支出分类统计</h3>
|
||||||
|
<van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 环形图区域 -->
|
||||||
|
<div class="chart-container" v-if="expenseCategories.length > 0">
|
||||||
|
<div class="ring-chart">
|
||||||
|
<svg viewBox="0 0 200 200" class="ring-svg">
|
||||||
|
<circle
|
||||||
|
v-for="(segment, index) in chartSegments"
|
||||||
|
:key="index"
|
||||||
|
cx="100"
|
||||||
|
cy="100"
|
||||||
|
r="70"
|
||||||
|
fill="none"
|
||||||
|
:stroke="segment.color"
|
||||||
|
:stroke-width="35"
|
||||||
|
:stroke-dasharray="`${segment.length} ${circumference - segment.length}`"
|
||||||
|
:stroke-dashoffset="-segment.offset"
|
||||||
|
transform="rotate(-90 100 100)"
|
||||||
|
class="ring-segment"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div class="ring-center">
|
||||||
|
<div class="center-value">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
|
||||||
|
<div class="center-label">总支出</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分类列表 -->
|
||||||
|
<div class="category-list" v-if="expenseCategories.length > 0">
|
||||||
|
<div
|
||||||
|
v-for="(category) in expenseCategories"
|
||||||
|
:key="category.classify"
|
||||||
|
class="category-item"
|
||||||
|
>
|
||||||
|
<div class="category-info">
|
||||||
|
<div class="category-color" :style="{ backgroundColor: category.color }"></div>
|
||||||
|
<span class="category-name">{{ category.classify || '未分类' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-stats">
|
||||||
|
<div class="category-amount">¥{{ formatMoney(category.amount) }}</div>
|
||||||
|
<div class="category-percent">{{ category.percent }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-empty
|
||||||
|
v-else
|
||||||
|
description="本月暂无支出记录"
|
||||||
|
image="search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 收入分类统计 -->
|
||||||
|
<div class="stat-card" v-if="incomeCategories.length > 0">
|
||||||
|
<div class="stat-header">
|
||||||
|
<h3 class="stat-title">收入分类统计</h3>
|
||||||
|
<van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category-list">
|
||||||
|
<div
|
||||||
|
v-for="category in incomeCategories"
|
||||||
|
:key="category.classify"
|
||||||
|
class="category-item"
|
||||||
|
>
|
||||||
|
<div class="category-info">
|
||||||
|
<div class="category-color income-color"></div>
|
||||||
|
<span class="category-name">{{ category.classify || '未分类' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="category-stats">
|
||||||
|
<div class="category-amount income-text">¥{{ formatMoney(category.amount) }}</div>
|
||||||
|
<div class="category-percent">{{ category.percent }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 趋势统计 -->
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-header">
|
||||||
|
<h3 class="stat-title">近6个月趋势</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="trend-chart">
|
||||||
|
<div class="trend-bars">
|
||||||
|
<div
|
||||||
|
v-for="item in trendData"
|
||||||
|
:key="item.month"
|
||||||
|
class="trend-bar-group"
|
||||||
|
>
|
||||||
|
<div class="bar-container">
|
||||||
|
<div
|
||||||
|
class="bar expense-bar"
|
||||||
|
:style="{ height: getBarHeight(item.expense, maxTrendValue) }"
|
||||||
|
>
|
||||||
|
<div class="bar-value" v-if="item.expense > 0">
|
||||||
|
{{ formatShortMoney(item.expense) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="bar income-bar"
|
||||||
|
:style="{ height: getBarHeight(item.income, maxTrendValue) }"
|
||||||
|
>
|
||||||
|
<div class="bar-value" v-if="item.income > 0">
|
||||||
|
{{ formatShortMoney(item.income) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bar-label">{{ item.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="trend-legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color expense-color"></div>
|
||||||
|
<span>支出</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color income-color"></div>
|
||||||
|
<span>收入</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 其他统计 -->
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-header">
|
||||||
|
<h3 class="stat-title">其他统计</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="other-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">日均支出</div>
|
||||||
|
<div class="stat-value">¥{{ formatMoney(dailyAverage.expense) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">日均收入</div>
|
||||||
|
<div class="stat-value income-text">¥{{ formatMoney(dailyAverage.income) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">最大单笔支出</div>
|
||||||
|
<div class="stat-value">¥{{ formatMoney(monthlyData.maxExpense) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">最大单笔收入</div>
|
||||||
|
<div class="stat-value income-text">¥{{ formatMoney(monthlyData.maxIncome) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部安全距离 -->
|
||||||
|
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
||||||
|
</div>
|
||||||
|
</van-pull-refresh>
|
||||||
|
|
||||||
|
<!-- 月份选择器 -->
|
||||||
|
<van-popup v-model:show="showMonthPicker" position="bottom" round>
|
||||||
|
<van-date-picker
|
||||||
|
v-model="selectedDate"
|
||||||
|
title="选择月份"
|
||||||
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
|
:columns-type="['year', 'month']"
|
||||||
|
@confirm="onMonthConfirm"
|
||||||
|
@cancel="showMonthPicker = false"
|
||||||
|
/>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { showToast } from 'vant'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { getMonthlyStatistics, getCategoryStatistics, getTrendStatistics } from '@/api/statistics'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const loading = ref(true)
|
||||||
|
const refreshing = ref(false)
|
||||||
|
const showMonthPicker = ref(false)
|
||||||
|
const currentYear = ref(new Date().getFullYear())
|
||||||
|
const currentMonth = ref(new Date().getMonth() + 1)
|
||||||
|
const selectedDate = ref([new Date().getFullYear().toString(), (new Date().getMonth() + 1).toString().padStart(2, '0')])
|
||||||
|
|
||||||
|
// 月度数据
|
||||||
|
const monthlyData = ref({
|
||||||
|
totalExpense: 0,
|
||||||
|
totalIncome: 0,
|
||||||
|
balance: 0,
|
||||||
|
expenseCount: 0,
|
||||||
|
incomeCount: 0,
|
||||||
|
totalCount: 0,
|
||||||
|
maxExpense: 0,
|
||||||
|
maxIncome: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分类数据
|
||||||
|
const expenseCategories = ref([])
|
||||||
|
const incomeCategories = ref([])
|
||||||
|
|
||||||
|
// 趋势数据
|
||||||
|
const trendData = ref([])
|
||||||
|
|
||||||
|
// 日期范围
|
||||||
|
const minDate = new Date(2020, 0, 1)
|
||||||
|
const maxDate = new Date()
|
||||||
|
|
||||||
|
// 颜色配置
|
||||||
|
const colors = [
|
||||||
|
'#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
|
||||||
|
'#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B88B', '#AAB7B8',
|
||||||
|
'#FF8ED4', '#67E6DC', '#FFAB73', '#C9B1FF', '#7BDFF2'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 计算环形图数据
|
||||||
|
const circumference = computed(() => 2 * Math.PI * 70)
|
||||||
|
const chartSegments = computed(() => {
|
||||||
|
let offset = 0
|
||||||
|
return expenseCategories.value.map((category) => {
|
||||||
|
const percent = category.percent / 100
|
||||||
|
const length = circumference.value * percent
|
||||||
|
const segment = {
|
||||||
|
color: category.color,
|
||||||
|
length,
|
||||||
|
offset
|
||||||
|
}
|
||||||
|
offset += length
|
||||||
|
return segment
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 日均统计
|
||||||
|
const dailyAverage = computed(() => {
|
||||||
|
const daysInMonth = new Date(currentYear.value, currentMonth.value, 0).getDate()
|
||||||
|
return {
|
||||||
|
expense: monthlyData.value.totalExpense / daysInMonth,
|
||||||
|
income: monthlyData.value.totalIncome / daysInMonth
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 趋势图最大值
|
||||||
|
const maxTrendValue = computed(() => {
|
||||||
|
const allValues = trendData.value.flatMap(item => [item.expense, item.income])
|
||||||
|
return Math.max(...allValues, 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 是否是当前月
|
||||||
|
const isCurrentMonth = computed(() => {
|
||||||
|
const now = new Date()
|
||||||
|
return currentYear.value === now.getFullYear() && currentMonth.value === now.getMonth() + 1
|
||||||
|
})
|
||||||
|
|
||||||
|
// 格式化金额
|
||||||
|
const formatMoney = (value) => {
|
||||||
|
if (!value && value !== 0) return '0.00'
|
||||||
|
return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化短金额(k为单位)
|
||||||
|
const formatShortMoney = (value) => {
|
||||||
|
if (!value) return '0'
|
||||||
|
if (value >= 10000) {
|
||||||
|
return (value / 10000).toFixed(1) + 'w'
|
||||||
|
}
|
||||||
|
if (value >= 1000) {
|
||||||
|
return (value / 1000).toFixed(1) + 'k'
|
||||||
|
}
|
||||||
|
return value.toFixed(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取柱状图高度
|
||||||
|
const getBarHeight = (value, maxValue) => {
|
||||||
|
if (!value || !maxValue) return '0%'
|
||||||
|
const percent = (value / maxValue) * 100
|
||||||
|
return Math.max(percent, 5) + '%' // 最小5%以便显示
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换月份
|
||||||
|
const changeMonth = (offset) => {
|
||||||
|
let newMonth = currentMonth.value + offset
|
||||||
|
let newYear = currentYear.value
|
||||||
|
|
||||||
|
if (newMonth > 12) {
|
||||||
|
newMonth = 1
|
||||||
|
newYear++
|
||||||
|
} else if (newMonth < 1) {
|
||||||
|
newMonth = 12
|
||||||
|
newYear--
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不能超过当前月份
|
||||||
|
const now = new Date()
|
||||||
|
const targetDate = new Date(newYear, newMonth - 1)
|
||||||
|
if (targetDate > now) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
currentYear.value = newYear
|
||||||
|
currentMonth.value = newMonth
|
||||||
|
fetchStatistics()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认月份选择
|
||||||
|
const onMonthConfirm = ({ selectedValues }) => {
|
||||||
|
currentYear.value = parseInt(selectedValues[0])
|
||||||
|
currentMonth.value = parseInt(selectedValues[1])
|
||||||
|
showMonthPicker.value = false
|
||||||
|
fetchStatistics()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下拉刷新
|
||||||
|
const onRefresh = async () => {
|
||||||
|
await fetchStatistics()
|
||||||
|
refreshing.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
const fetchStatistics = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
fetchMonthlyData(),
|
||||||
|
fetchCategoryData(),
|
||||||
|
fetchTrendData()
|
||||||
|
])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取统计数据失败:', error)
|
||||||
|
showToast('获取统计数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取月度数据
|
||||||
|
const fetchMonthlyData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getMonthlyStatistics({
|
||||||
|
year: currentYear.value,
|
||||||
|
month: currentMonth.value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.success && response.data) {
|
||||||
|
monthlyData.value = response.data
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取月度数据失败:', error)
|
||||||
|
showToast('获取月度数据失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取分类数据
|
||||||
|
const fetchCategoryData = async () => {
|
||||||
|
try {
|
||||||
|
// 获取支出分类
|
||||||
|
const expenseResponse = await getCategoryStatistics({
|
||||||
|
year: currentYear.value,
|
||||||
|
month: currentMonth.value,
|
||||||
|
type: 0 // 支出
|
||||||
|
})
|
||||||
|
|
||||||
|
if (expenseResponse.success && expenseResponse.data) {
|
||||||
|
expenseCategories.value = expenseResponse.data.map((item, index) => ({
|
||||||
|
classify: item.classify,
|
||||||
|
amount: item.amount,
|
||||||
|
percent: item.percent,
|
||||||
|
color: colors[index % colors.length]
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取收入分类
|
||||||
|
const incomeResponse = await getCategoryStatistics({
|
||||||
|
year: currentYear.value,
|
||||||
|
month: currentMonth.value,
|
||||||
|
type: 1 // 收入
|
||||||
|
})
|
||||||
|
|
||||||
|
if (incomeResponse.success && incomeResponse.data) {
|
||||||
|
incomeCategories.value = incomeResponse.data.map(item => ({
|
||||||
|
classify: item.classify,
|
||||||
|
amount: item.amount,
|
||||||
|
percent: item.percent
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取分类数据失败:', error)
|
||||||
|
showToast('获取分类数据失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取趋势数据
|
||||||
|
const fetchTrendData = async () => {
|
||||||
|
try {
|
||||||
|
// 计算开始年月(当前月往前推5个月)
|
||||||
|
let startYear = currentYear.value
|
||||||
|
let startMonth = currentMonth.value - 5
|
||||||
|
|
||||||
|
if (startMonth <= 0) {
|
||||||
|
startMonth += 12
|
||||||
|
startYear--
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await getTrendStatistics({
|
||||||
|
startYear,
|
||||||
|
startMonth,
|
||||||
|
monthCount: 6
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.success && response.data) {
|
||||||
|
trendData.value = response.data.map(item => ({
|
||||||
|
year: item.year,
|
||||||
|
month: item.month,
|
||||||
|
label: `${item.month}月`,
|
||||||
|
expense: item.expense,
|
||||||
|
income: item.income
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取趋势数据失败:', error)
|
||||||
|
showToast('获取趋势数据失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跳转到智能分析页面
|
||||||
|
const goToAnalysis = () => {
|
||||||
|
router.push('/bill-analysis')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
fetchStatistics()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.statistics-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--van-background-2);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics-content {
|
||||||
|
padding: 16px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月份选择器 */
|
||||||
|
.month-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 0 12px 16px;
|
||||||
|
background: var(--van-background);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月度概览卡片 */
|
||||||
|
.overview-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--van-background);
|
||||||
|
margin: 0 12px 16px;
|
||||||
|
padding: 24px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-item .label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-item .value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-item .sub-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--van-text-color-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expense {
|
||||||
|
color: #ff6b6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.income {
|
||||||
|
color: #51cf66;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计卡片 */
|
||||||
|
.stat-card {
|
||||||
|
background: var(--van-background);
|
||||||
|
margin: 0 12px 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 环形图 */
|
||||||
|
.chart-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-chart {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-segment {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类列表 */
|
||||||
|
.category-list {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-color {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-amount {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-percent {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--van-text-color-3);
|
||||||
|
background: var(--van-background-2);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.income-color {
|
||||||
|
background-color: #51cf66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.income-text {
|
||||||
|
color: #51cf66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expense-color {
|
||||||
|
background-color: #ff6b6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 趋势图 */
|
||||||
|
.trend-chart {
|
||||||
|
padding: 20px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-bars {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 180px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-bar-group {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 20px;
|
||||||
|
min-height: 4px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expense-bar {
|
||||||
|
background: linear-gradient(180deg, #ff6b6b 0%, #ff8787 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.income-bar {
|
||||||
|
background: linear-gradient(180deg, #51cf66 0%, #69db7c 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-value {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--van-text-color-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 24px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid var(--van-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 其他统计 */
|
||||||
|
.other-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
background: var(--van-background-2);
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--van-text-color-2);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--van-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
namespace WebApi.Controllers;
|
namespace WebApi.Controllers;
|
||||||
|
|
||||||
|
using Repository;
|
||||||
|
|
||||||
[ApiController]
|
[ApiController]
|
||||||
[Route("api/[controller]/[action]")]
|
[Route("api/[controller]/[action]")]
|
||||||
public class TransactionRecordController(
|
public class TransactionRecordController(
|
||||||
@@ -230,13 +232,244 @@ public class TransactionRecordController(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取月度统计数据
|
||||||
|
/// </summary>
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<BaseResponse<MonthlyStatistics>> GetMonthlyStatisticsAsync(
|
||||||
|
[FromQuery] int year,
|
||||||
|
[FromQuery] int month
|
||||||
|
)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var statistics = await transactionRepository.GetMonthlyStatisticsAsync(year, month);
|
||||||
|
return new BaseResponse<MonthlyStatistics>
|
||||||
|
{
|
||||||
|
Success = true,
|
||||||
|
Data = statistics
|
||||||
|
};
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "获取月度统计数据失败,年份: {Year}, 月份: {Month}", year, month);
|
||||||
|
return BaseResponse<MonthlyStatistics>.Fail($"获取月度统计数据失败: {ex.Message}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取分类统计数据
|
||||||
|
/// </summary>
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<BaseResponse<List<CategoryStatistics>>> GetCategoryStatisticsAsync(
|
||||||
|
[FromQuery] int year,
|
||||||
|
[FromQuery] int month,
|
||||||
|
[FromQuery] TransactionType type
|
||||||
|
)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var statistics = await transactionRepository.GetCategoryStatisticsAsync(year, month, type);
|
||||||
|
return new BaseResponse<List<CategoryStatistics>>
|
||||||
|
{
|
||||||
|
Success = true,
|
||||||
|
Data = statistics
|
||||||
|
};
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "获取分类统计数据失败,年份: {Year}, 月份: {Month}, 类型: {Type}", year, month, type);
|
||||||
|
return BaseResponse<List<CategoryStatistics>>.Fail($"获取分类统计数据失败: {ex.Message}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 获取趋势统计数据
|
||||||
|
/// </summary>
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<BaseResponse<List<TrendStatistics>>> GetTrendStatisticsAsync(
|
||||||
|
[FromQuery] int startYear,
|
||||||
|
[FromQuery] int startMonth,
|
||||||
|
[FromQuery] int monthCount = 6
|
||||||
|
)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var statistics = await transactionRepository.GetTrendStatisticsAsync(startYear, startMonth, monthCount);
|
||||||
|
return new BaseResponse<List<TrendStatistics>>
|
||||||
|
{
|
||||||
|
Success = true,
|
||||||
|
Data = statistics
|
||||||
|
};
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "获取趋势统计数据失败,开始年份: {Year}, 开始月份: {Month}, 月份数: {Count}", startYear, startMonth, monthCount);
|
||||||
|
return BaseResponse<List<TrendStatistics>>.Fail($"获取趋势统计数据失败: {ex.Message}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 智能分析账单(流式输出)
|
||||||
|
/// </summary>
|
||||||
|
public async Task AnalyzeBillAsync([FromBody] BillAnalysisRequest request)
|
||||||
|
{
|
||||||
|
Response.ContentType = "text/event-stream";
|
||||||
|
Response.Headers.Append("Cache-Control", "no-cache");
|
||||||
|
Response.Headers.Append("Connection", "keep-alive");
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
// 第一步:使用AI生成聚合SQL查询
|
||||||
|
var now = DateTime.Now;
|
||||||
|
var sqlPrompt = $"""
|
||||||
|
当前日期:{now:yyyy年M月d日}({now:yyyy-MM-dd})
|
||||||
|
用户问题:{request.UserInput}
|
||||||
|
|
||||||
|
数据库类型:SQLite
|
||||||
|
数据库表名:TransactionRecord
|
||||||
|
字段说明:
|
||||||
|
- Id: bigint 主键
|
||||||
|
- Card: nvarchar 卡号
|
||||||
|
- Reason: nvarchar 交易原因/摘要
|
||||||
|
- Amount: decimal 交易金额(支出为负数,收入为正数)
|
||||||
|
- OccurredAt: datetime 交易发生时间(TEXT类型,格式:'2025-12-26 10:30:00')
|
||||||
|
- Type: int 交易类型(0=支出, 1=收入, 2=不计入收支)
|
||||||
|
- Classify: nvarchar 交易分类(如:交通、餐饮、购物等)
|
||||||
|
|
||||||
|
【核心原则】直接生成用户所需的聚合统计SQL,而不是查询原始记录后再统计
|
||||||
|
|
||||||
|
要求:
|
||||||
|
1. 根据用户问题判断需要什么维度的聚合数据
|
||||||
|
2. 使用 GROUP BY 按分类、时间等维度分组
|
||||||
|
3. 使用聚合函数:SUM(ABS(Amount)) 计算金额总和、COUNT(*) 计数、AVG()平均、MAX()最大、MIN()最小
|
||||||
|
4. 时间范围使用 OccurredAt 字段,"最近X个月/天"基于当前日期计算
|
||||||
|
5. 支出用 Type = 0,收入用 Type = 1
|
||||||
|
6. 给聚合字段起有意义的别名(如 TotalAmount, TransactionCount, AvgAmount)
|
||||||
|
7. 使用 ORDER BY 对结果排序(通常按金额降序)
|
||||||
|
8. 只返回SQL语句,不要解释
|
||||||
|
|
||||||
|
【重要】SQLite日期函数:
|
||||||
|
- 提取年份:strftime('%Y', OccurredAt)
|
||||||
|
- 提取月份:strftime('%m', OccurredAt)
|
||||||
|
- 提取日期:strftime('%Y-%m-%d', OccurredAt)
|
||||||
|
- 不要使用 YEAR()、MONTH()、DAY() 函数,SQLite不支持
|
||||||
|
|
||||||
|
示例1(按分类统计):
|
||||||
|
用户:这三个月坐车花了多少钱?
|
||||||
|
返回:SELECT Classify, COUNT(*) as TransactionCount, SUM(ABS(Amount)) as TotalAmount, AVG(ABS(Amount)) as AvgAmount FROM TransactionRecord WHERE Type = 0 AND OccurredAt >= '2025-10-01' AND OccurredAt < '2026-01-01' AND (Classify LIKE '%交通%' OR Reason LIKE '%打车%' OR Reason LIKE '%公交%' OR Reason LIKE '%地铁%') GROUP BY Classify ORDER BY TotalAmount DESC
|
||||||
|
|
||||||
|
示例2(按月统计):
|
||||||
|
用户:最近半年每月支出情况
|
||||||
|
返回:SELECT strftime('%Y', OccurredAt) as Year, strftime('%m', OccurredAt) as Month, COUNT(*) as TransactionCount, SUM(ABS(Amount)) as TotalAmount FROM TransactionRecord WHERE Type = 0 AND OccurredAt >= '2025-06-01' GROUP BY strftime('%Y', OccurredAt), strftime('%m', OccurredAt) ORDER BY Year, Month
|
||||||
|
|
||||||
|
示例3(总体统计):
|
||||||
|
用户:本月花了多少钱?
|
||||||
|
返回:SELECT COUNT(*) as TransactionCount, SUM(ABS(Amount)) as TotalAmount, AVG(ABS(Amount)) as AvgAmount, MAX(ABS(Amount)) as MaxAmount FROM TransactionRecord WHERE Type = 0 AND OccurredAt >= '2025-12-01' AND OccurredAt < '2026-01-01'
|
||||||
|
|
||||||
|
示例4(详细记录 - 仅在用户明确要求详情时使用):
|
||||||
|
用户:单笔超过1000元的支出有哪些?
|
||||||
|
返回:SELECT OccurredAt, Classify, Reason, ABS(Amount) as Amount FROM TransactionRecord WHERE Type = 0 AND ABS(Amount) > 1000 ORDER BY Amount DESC LIMIT 50
|
||||||
|
|
||||||
|
只返回SQL语句。
|
||||||
|
""";
|
||||||
|
|
||||||
|
var sqlText = await openAiService.ChatAsync(sqlPrompt);
|
||||||
|
|
||||||
|
// 清理SQL文本
|
||||||
|
sqlText = sqlText?.Trim() ?? "";
|
||||||
|
sqlText = sqlText.TrimStart('`').TrimEnd('`');
|
||||||
|
if (sqlText.StartsWith("sql", StringComparison.OrdinalIgnoreCase))
|
||||||
|
{
|
||||||
|
sqlText = sqlText.Substring(3).Trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
logger.LogInformation("AI生成的SQL: {Sql}", sqlText);
|
||||||
|
|
||||||
|
// 第二步:执行动态SQL查询
|
||||||
|
List<dynamic> queryResults;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
queryResults = await transactionRepository.ExecuteDynamicSqlAsync(sqlText);
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "执行AI生成的SQL失败: {Sql}", sqlText);
|
||||||
|
// 如果SQL执行失败,返回错误
|
||||||
|
var errorData = System.Text.Json.JsonSerializer.Serialize(new { content = "<div class='error-message'>SQL执行失败,请重新描述您的问题</div>" });
|
||||||
|
await Response.WriteAsync($"data: {errorData}\n\n");
|
||||||
|
await Response.Body.FlushAsync();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 第三步:将查询结果序列化为JSON,直接传递给AI生成分析报告
|
||||||
|
var dataJson = System.Text.Json.JsonSerializer.Serialize(queryResults, new System.Text.Json.JsonSerializerOptions
|
||||||
|
{
|
||||||
|
WriteIndented = true,
|
||||||
|
Encoder = System.Text.Encodings.Web.JavaScriptEncoder.UnsafeRelaxedJsonEscaping
|
||||||
|
});
|
||||||
|
|
||||||
|
var dataPrompt = $"""
|
||||||
|
当前日期:{DateTime.Now:yyyy年M月d日}
|
||||||
|
用户问题:{request.UserInput}
|
||||||
|
|
||||||
|
查询结果数据(JSON格式):
|
||||||
|
{dataJson}
|
||||||
|
|
||||||
|
说明:以上数据是根据用户问题查询出的聚合统计结果,请基于这些数据生成分析报告。
|
||||||
|
|
||||||
|
请生成一份专业的数据分析报告,严格遵守以下要求:
|
||||||
|
|
||||||
|
【格式要求】
|
||||||
|
1. 使用HTML格式(移动端H5页面风格)
|
||||||
|
2. 生成清晰的报告标题(基于用户问题)
|
||||||
|
3. 使用表格展示统计数据(table > thead/tbody > tr > th/td)
|
||||||
|
4. 使用合适的HTML标签:h2(标题)、h3(小节)、p(段落)、table(表格)、ul/li(列表)、strong(强调)
|
||||||
|
5. 支出金额用 <span class='expense-value'>金额</span> 包裹
|
||||||
|
6. 收入金额用 <span class='income-value'>金额</span> 包裹
|
||||||
|
7. 重要结论用 <span class='highlight'>内容</span> 高亮
|
||||||
|
|
||||||
|
【样式限制(重要)】
|
||||||
|
8. 不要包含 html、body、head 标签
|
||||||
|
9. 不要使用任何 style 属性或 <style> 标签
|
||||||
|
10. 不要设置 background、background-color、color 等样式属性
|
||||||
|
11. 不要使用 div 包裹大段内容
|
||||||
|
|
||||||
|
【内容要求】
|
||||||
|
12. 准确解读数据:将JSON数据转换为易读的表格和文字说明
|
||||||
|
13. 提供洞察分析:根据数据给出有价值的发现和趋势分析
|
||||||
|
14. 给出实用建议:基于数据提供合理的财务建议
|
||||||
|
15. 语言专业、清晰、简洁
|
||||||
|
|
||||||
|
直接输出纯净的HTML内容,不要markdown代码块标记。
|
||||||
|
""";
|
||||||
|
|
||||||
|
// 第四步:流式输出AI分析结果
|
||||||
|
await foreach (var chunk in openAiService.ChatStreamAsync(dataPrompt))
|
||||||
|
{
|
||||||
|
var sseData = System.Text.Json.JsonSerializer.Serialize(new { content = chunk });
|
||||||
|
await Response.WriteAsync($"data: {sseData}\n\n");
|
||||||
|
await Response.Body.FlushAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送完成标记
|
||||||
|
await Response.WriteAsync("data: [DONE]\n\n");
|
||||||
|
await Response.Body.FlushAsync();
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
logger.LogError(ex, "智能分析账单失败");
|
||||||
|
var errorData = System.Text.Json.JsonSerializer.Serialize(new { content = $"<div class='error-message'>分析失败:{ex.Message}</div>" });
|
||||||
|
await Response.WriteAsync($"data: {errorData}\n\n");
|
||||||
|
await Response.Body.FlushAsync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 获取指定日期的交易记录
|
/// 获取指定日期的交易记录
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[HttpGet]
|
[HttpGet]
|
||||||
public async Task<BaseResponse<List<Entity.TransactionRecord>>> GetByDateAsync(
|
public async Task<BaseResponse<List<Entity.TransactionRecord>>> GetByDateAsync([FromQuery] string date)
|
||||||
[FromQuery] string date
|
|
||||||
)
|
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
@@ -380,11 +613,13 @@ public class TransactionRecordController(
|
|||||||
只输出JSON,不要有其他文字说明。
|
只输出JSON,不要有其他文字说明。
|
||||||
""";
|
""";
|
||||||
|
|
||||||
var userPrompt = $@"请为以下账单进行分类:
|
var userPrompt = $$"""
|
||||||
|
请为以下账单进行分类:
|
||||||
|
|
||||||
{billsInfo}
|
{{billsInfo}}
|
||||||
|
|
||||||
请逐个输出分类结果。";
|
请逐个输出分类结果。
|
||||||
|
""";
|
||||||
|
|
||||||
// 流式调用AI
|
// 流式调用AI
|
||||||
await WriteEventAsync("start", $"开始分类 {records.Count} 条账单");
|
await WriteEventAsync("start", $"开始分类 {records.Count} 条账单");
|
||||||
@@ -587,7 +822,7 @@ public class TransactionRecordController(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 根据关键词查询交易记录
|
// 根据关键词查询交易记录
|
||||||
var allRecords = await transactionRepository.QueryBySqlAsync(analysisInfo.Sql);
|
var allRecords = await transactionRepository.QueryByWhereAsync(analysisInfo.Sql);
|
||||||
logger.LogInformation("NLP分析查询到 {Count} 条记录,SQL: {Sql}", allRecords.Count, analysisInfo.Sql);
|
logger.LogInformation("NLP分析查询到 {Count} 条记录,SQL: {Sql}", allRecords.Count, analysisInfo.Sql);
|
||||||
|
|
||||||
// 为每条记录预设分类
|
// 为每条记录预设分类
|
||||||
@@ -757,3 +992,49 @@ public record NlpAnalysisInfo
|
|||||||
[JsonPropertyName("targetClassify")]
|
[JsonPropertyName("targetClassify")]
|
||||||
public string TargetClassify { get; set; } = string.Empty;
|
public string TargetClassify { get; set; } = string.Empty;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 账单分析请求DTO
|
||||||
|
/// </summary>
|
||||||
|
public record BillAnalysisRequest(
|
||||||
|
string UserInput
|
||||||
|
);
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 账单查询信息DTO
|
||||||
|
/// </summary>
|
||||||
|
public class BillQueryInfo
|
||||||
|
{
|
||||||
|
[JsonPropertyName("timeRange")]
|
||||||
|
public TimeRangeInfo? TimeRange { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("categories")]
|
||||||
|
public List<string>? Categories { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("transactionType")]
|
||||||
|
public TransactionType? TransactionType { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("analysisType")]
|
||||||
|
public string? AnalysisType { get; set; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 时间范围信息DTO
|
||||||
|
/// </summary>
|
||||||
|
public class TimeRangeInfo
|
||||||
|
{
|
||||||
|
[JsonPropertyName("months")]
|
||||||
|
public int Months { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("startYear")]
|
||||||
|
public int StartYear { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("startMonth")]
|
||||||
|
public int? StartMonth { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("endYear")]
|
||||||
|
public int? EndYear { get; set; }
|
||||||
|
|
||||||
|
[JsonPropertyName("endMonth")]
|
||||||
|
public int? EndMonth { get; set; }
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user