Commit 4ae55d59 authored by 水玉婷's avatar 水玉婷
Browse files

feat:更换logo+修改表格数据列+饼图添加负数处理

parent d347d115
src/assets/logo.png

177 KB | W: | H:

src/assets/logo.png

184 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -134,7 +134,7 @@ import { ref, computed, onMounted } from 'vue'; ...@@ -134,7 +134,7 @@ import { ref, computed, onMounted } from 'vue';
import AiChat from './components/AiChat.vue'; import AiChat from './components/AiChat.vue';
import axios from '../utils/axios'; import axios from '../utils/axios';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import defaultAvatar from '@/assets/logo2.png'; import defaultAvatar from '@/assets/logo.png';
import menuIcon from '@/assets/sidebar-unfold-line.svg' import menuIcon from '@/assets/sidebar-unfold-line.svg'
import newChatIcon from '@/assets/chat-ai-line.svg' import newChatIcon from '@/assets/chat-ai-line.svg'
import { import {
......
<template> <template>
<div class="pie-chart-container"> <div class="pie-chart-container">
<!-- <div class="chart-title">{{ title }}</div> --> <!-- <div class="chart-title">{{ title }}</div> -->
<div v-if="isEmpty" class="chart-empty"> <div v-if="isEmpty && !error" class="chart-empty">
<div class="empty-icon">📊</div> <div class="empty-icon">📊</div>
<div class="empty-text">暂无数据</div> <div class="empty-text">暂无数据</div>
<div class="empty-desc">当前查询条件下没有找到相关数据</div> <div class="empty-desc">当前查询条件下没有找到相关数据</div>
</div> </div>
<div v-else-if="error" class="chart-error">
<div class="error-icon">⚠️</div>
<div class="error-text">{{ error }}</div>
</div>
<div v-else ref="chartContainer" class="chart-container"></div> <div v-else ref="chartContainer" class="chart-container"></div>
<div v-if="error" class="chart-error">{{ error }}</div>
</div> </div>
</template> </template>
...@@ -137,21 +140,27 @@ const createPieOption = (chartConfig: any) => { ...@@ -137,21 +140,27 @@ const createPieOption = (chartConfig: any) => {
const category = item[dimField] || '未知'; const category = item[dimField] || '未知';
const value = Number(item[indexField]) || 0; const value = Number(item[indexField]) || 0;
if (value > 0) { if (!aggregatedData[category]) {
if (!aggregatedData[category]) { aggregatedData[category] = 0;
aggregatedData[category] = 0;
}
aggregatedData[category] += value;
} }
aggregatedData[category] += value;
}); });
// 检查是否有负数数据
const hasNegativeData = Object.values(aggregatedData).some(value => value < 0);
if (hasNegativeData) {
// 如果有负数数据,抛出错误提示
throw new Error('该数据包含负数,不支持饼图展示,请使用其他图表查看');
}
// 转换为饼图数据格式 // 转换为饼图数据格式
const pieData = Object.entries(aggregatedData).map(([name, value]) => ({ const pieData = Object.entries(aggregatedData).map(([name, value]) => ({
name, name,
value value
})); }));
// 按值从大到小排序,确保大块在前 // 按值从大到小排序
pieData.sort((a, b) => b.value - a.value); pieData.sort((a, b) => b.value - a.value);
return createPieChartOption(pieData); return createPieChartOption(pieData);
...@@ -160,7 +169,7 @@ const createPieOption = (chartConfig: any) => { ...@@ -160,7 +169,7 @@ const createPieOption = (chartConfig: any) => {
/** /**
* 创建实际的饼图配置 * 创建实际的饼图配置
*/ */
const createPieChartOption = (pieData: any[]) => { const createPieChartOption = (pieData: any[], hasNegativeData: boolean = false) => {
const colors = getColors(); const colors = getColors();
if (pieData.length === 0) { if (pieData.length === 0) {
...@@ -394,7 +403,7 @@ const createChart = async () => { ...@@ -394,7 +403,7 @@ const createChart = async () => {
initChartResizeListener(); initChartResizeListener();
} catch (err) { } catch (err) {
console.error('图表创建失败:', err); console.error('图表创建失败:', err);
error.value = '图表渲染失败,请重试'; error.value = err instanceof Error ? err.message : '图表渲染失败,请重试';
} }
}; };
...@@ -498,12 +507,39 @@ onUnmounted(() => { ...@@ -498,12 +507,39 @@ onUnmounted(() => {
} }
.chart-error { .chart-error {
padding: 10px; display: flex;
text-align: center; flex-direction: column;
color: #f5222d; align-items: center;
background-color: #fff2f0; justify-content: center;
border: 1px solid #ffccc7; height: 350px;
border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
margin-top: 10px; background-color: #fafafa;
color: #666;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.error-icon {
font-size: 32px;
margin-bottom: 16px;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8e8e8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.error-text {
font-size: 14px;
margin-bottom: 8px;
color: #999;
text-align: center;
max-width: 100%;
line-height: 1.5;
} }
</style> </style>
\ No newline at end of file
...@@ -462,17 +462,17 @@ const renderCellContent = (header: string, value: any, record: any) => { ...@@ -462,17 +462,17 @@ const renderCellContent = (header: string, value: any, record: any) => {
} }
} }
// 如果是数字列,进行格式化 // // 如果是数字列,进行格式化
if (isNumericColumn(header)) { // if (isNumericColumn(header)) {
// 判断value是否为数字(字符串) // // 判断value是否为数字(字符串)
if (value &&!isNaN(Number(value))) { // if (value &&!isNaN(Number(value))) {
// 格式化数字(字符串) // // 格式化数字(字符串)
return formatNumber(Number(value)); // return formatNumber(Number(value));
} else { // } else {
// 非数字,直接返回原始值 // // 非数字,直接返回原始值
return value; // return value;
} // }
} // }
return value; return value;
}; };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment