manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

财务门户设计

Browse Source
This commit is contained in:
gaoxq
2026-02-19 21:10:43 +08:00
parent fd71143cd2
commit a0244c9afc
15 changed files with 1777 additions and 1335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web-vue/packages/biz/views/biz/monitorInfo/deviceInfo/list.vue
View File

@@ -16,7 +16,6 @@
</a-button>
</template>
</BasicTable>
<FormImport @register="registerImportModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup name="ViewsBizDeviceInfoList">
@@ -156,31 +155,12 @@
},
];
const actionColumn: BasicColumn<BizDeviceInfo> = {
width: 160,
align: 'center',
actions: (record: BizDeviceInfo) => [
{
icon: 'i-ant-design:delete-outlined',
color: 'error',
title: t('删除'),
popConfirm: {
title: t('是否确认删除磁盘信息?'),
confirm: handleDelete.bind(this, record),
},
auth: 'biz:deviceInfo:edit',
ifShow: record.ustatus == '0'
},
],
};
const [registerTable, { reload, getForm }] = useTable<BizDeviceInfo>({
api: bizDeviceInfoListData,
beforeFetch: (params) => {
return params;
},
columns: tableColumns,
actionColumn: actionColumn,
formConfig: searchForm,
showTableSetting: true,
useSearchForm: true,
@@ -209,19 +189,6 @@
loading.value = false;
}
const [registerImportModal, { openModal: importModal }] = useModal();
function handleImport() {
importModal(true, {});
}
async function handleDelete(record: Recordable) {
const params = { id: record.id };
const res = await bizDeviceInfoDelete(params);
showMessage(res.message);
await handleSuccess(record);
}
async function handleSuccess(record: Recordable) {
await reload({ record });
}

33
web-vue/packages/biz/views/biz/monitorInfo/serverInfo/list.vue
View File

@@ -16,7 +16,6 @@
</a-button>
</template>
</BasicTable>
<FormImport @register="registerImportModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup name="ViewsBizServerInfoList">
@@ -200,31 +199,12 @@
},
];
const actionColumn: BasicColumn<BizServerInfo> = {
width: 160,
align: 'center',
actions: (record: BizServerInfo) => [
{
icon: 'i-ant-design:delete-outlined',
color: 'error',
title: t('删除'),
popConfirm: {
title: t('是否确认删除运行信息?'),
confirm: handleDelete.bind(this, record),
},
auth: 'biz:serverInfo:edit',
ifShow: record.ustatus == '0'
},
],
};
const [registerTable, { reload, getForm }] = useTable<BizServerInfo>({
api: bizServerInfoListData,
beforeFetch: (params) => {
return params;
},
columns: tableColumns,
actionColumn: actionColumn,
formConfig: searchForm,
showTableSetting: true,
useSearchForm: true,
@@ -253,19 +233,6 @@
loading.value = false;
}
const [registerImportModal, { openModal: importModal }] = useModal();
function handleImport() {
importModal(true, {});
}
async function handleDelete(record: Recordable) {
const params = { id: record.id };
const res = await bizServerInfoDelete(params);
showMessage(res.message);
await handleSuccess(record);
}
async function handleSuccess(record: Recordable) {
await reload({ record });
}

267
web-vue/packages/core/layouts/views/desktop/analysis/components/WarningAlert.vue
View File

@@ -37,57 +37,54 @@
</span>
<span class="trigger-time">{{ item.triggerTime }}</span>
<span class="alert-type">{{ item.alertType }}</span>
<span
class="alert-title"
@mouseenter="showFullContent(item.alertTitle || '', $event)"
@mouseleave="hideFullContent"
<Tooltip
:title="item.alertTitle || '--'"
placement="top"
trigger="hover"
:mouseEnterDelay="0.1"
class="alert-title-tooltip"
>
<a-button type="link" size="small" @click="openModal(true, item)">
<span class="title-text">{{ item.alertTitle || '--' }}</span>
</a-button>
</span>
<span class="alert-title"
@mouseenter="showFullContent(item.alertContent || '', $event)"
@mouseleave="hideFullContent"
>
{{ item.alertContent || '--' }}
</span>
<span class="alert-title" ref="titleRefs">
<a-button type="link" size="small" @click="openModal(true, item)">
<span class="title-text">{{ item.alertTitle || '--' }}</span>
</a-button>
</span>
</Tooltip>
<Tooltip
:title="item.alertContent || '--'"
placement="top"
trigger="hover"
:mouseEnterDelay="0.1"
class="alert-content-tooltip"
>
<span class="alert-title alert-content">
{{ item.alertContent || '--' }}
</span>
</Tooltip>
</div>
</div>
</div>
</Card>
<!-- 新增：预警标题悬浮提示框 -->
<div
v-if="showContentTooltip"
class="custom-tooltip"
:style="{
top: `${tooltipTop}px`,
left: `${tooltipLeft}px`,
zIndex: 9999
}"
>
<pre class="tooltip-content">{{ fullContent }}</pre>
<div class="tooltip-arrow"></div>
</div>
<Modal @register="register" @modalClose="fetchAppList(currentStatus)" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Card, Button } from 'ant-design-vue';
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useModal } from '@jeesite/core/components/Modal';
import { Card, Tooltip, Button } from 'ant-design-vue';
import { bizWarningAlertListAll, BizWarningAlert } from '@jeesite/biz/api/biz/warningAlert';
import Modal from './info/WarningInfo.vue';
const [register, { openModal }] = useModal();
const alertList = ref<BizWarningAlert[]>([]);
const loading = ref<boolean>(false); // 新增加载状态
const loading = ref<boolean>(false);
const router = useRouter();
const titleRefs = ref<HTMLElement[]>([]);
// 状态选项配置
const statusOptions = ref([
{ value: '0', label: '未处理' },
{ value: '1', label: '处理中' },
@@ -95,65 +92,33 @@ const statusOptions = ref([
{ value: '3', label: '已忽略' },
{ value: '4', label: '已关闭' },
]);
const currentStatus = ref<string>('0'); // 默认选中未处理
const currentStatus = ref<string>('0');
// 新增：预警标题悬浮提示相关
const showContentTooltip = ref(false);
const fullContent = ref('');
const tooltipTop = ref(0);
const tooltipLeft = ref(0);
// 新增：显示完整标题
const showFullContent = (content: string, event: MouseEvent) => {
// 内容为空或无截断时不显示提示
if (!content) return;
const target = event.target as HTMLElement;
// 判断内容是否被截断（容器宽度 < 内容宽度）
if (target.scrollWidth <= target.clientWidth) return;
// 直接赋值原始内容，不做任何格式化处理
fullContent.value = content;
// 定位提示框（鼠标位置偏移，避免遮挡鼠标）
tooltipTop.value = event.clientY + 10;
tooltipLeft.value = event.clientX + 10;
showContentTooltip.value = true;
};
// 新增：隐藏提示框
const hideFullContent = () => {
showContentTooltip.value = false;
fullContent.value = '';
};
// 处理状态切换（新增方法）
const handleStatusChange = (status: string) => {
if (currentStatus.value === status) return; // 避免重复请求
if (currentStatus.value === status) return;
currentStatus.value = status;
fetchAppList(status); // 切换状态时传递参数
fetchAppList(status);
};
// 获取预警列表数据
const fetchAppList = async (status: string) => {
try {
loading.value = true; // 开始加载
const params = { alertStatus: status }; // 传递状态参数
loading.value = true;
const params = { alertStatus: status };
const result = await bizWarningAlertListAll(params);
alertList.value = result || [];
await nextTick();
} catch (error) {
console.error('获取预警列表失败：', error);
alertList.value = [];
} finally {
loading.value = false; // 结束加载
loading.value = false;
}
};
// 跳转到更多页面（优化：携带当前状态参数）
const goToMorePage = () => {
router.push('/biz/warningAlert/list');
};
// 转换预警级别文本
const getLevelText = (level: number | undefined) => {
if (!level) return '未知';
const levelMap = {
@@ -165,30 +130,26 @@ const getLevelText = (level: number | undefined) => {
return levelMap[level as keyof typeof levelMap] || '未知';
};
// 初始化加载默认状态数据
onMounted(() => {
fetchAppList(currentStatus.value); // 初始化时传递默认状态（0）
fetchAppList(currentStatus.value);
});
</script>
<style scoped>
/* extra插槽容器：状态标签 + 更多按钮 横向排列 */
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
/* 状态筛选栏（非按钮样式） */
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px; /* 标签间距 */
gap: 12px;
font-size: 14px;
}
/* 状态项样式（纯文本标签） */
.status-item {
cursor: pointer;
color: #666;
@@ -198,13 +159,11 @@ onMounted(() => {
user-select: none;
}
/* 选中状态样式（下划线 + 高亮色） */
.status-item.active {
color: #1890ff;
font-weight: 500;
}
/* 选中状态下划线 */
.status-item.active::after {
content: '';
position: absolute;
@@ -216,56 +175,50 @@ onMounted(() => {
border-radius: 1px;
}
/* 悬浮效果 */
.status-item:not(.active):hover {
color: #40a9ff;
}
/* 列表外层容器：移除边框 + 滚动核心样式 + 极致紧凑 */
.alert-list-container {
width: 100%;
height: 32vh; /* 限制最大高度，超出滚动 */
overflow-y: auto; /* 垂直滚动 */
overflow-x: hidden; /* 隐藏横向滚动 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
height: 32vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
margin: 0;
background: transparent;
}
/* 空数据/加载提示 */
.empty-tip {
padding: 20px 0; /* 缩减空状态内边距，更紧凑 */
padding: 20px 0;
text-align: center;
color: #999;
font-size: 14px;
}
/* 预警列表 */
.alert-list {
width: 100%;
}
/* 单个预警项：flex布局 + 紧凑排列（级别→时间→类型→标题） */
.alert-item {
display: flex;
align-items: center;
padding: 6px 8px;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
gap: 10px; /* 统一控制元素间基础间距 */
gap: 10px;
width: 100%;
box-sizing: border-box;
}
/* 最后一项去掉底部边框 */
.alert-item:last-child {
border-bottom: none;
}
/* 鼠标悬浮高亮 */
.alert-item:hover {
background-color: #f8f9fa;
}
/* 预警级别标签（固定宽度，不压缩） */
.level-tag {
display: inline-block;
padding: 1px 6px;
@@ -274,51 +227,55 @@ onMounted(() => {
color: #fff;
min-width: 40px;
text-align: center;
flex-shrink: 0; /* 固定宽度，不被压缩 */
flex-shrink: 0;
}
/* 级别颜色 */
.level-1 { background-color: #f5222d; } /* 紧急 */
.level-2 { background-color: #fa8c16; } /* 高 */
.level-3 { background-color: #faad14; } /* 中 */
.level-4 { background-color: #1890ff; } /* 低 */
.level-undefined { background-color: #8c8c8c; } /* 未知 */
.level-1 { background-color: #f5222d; }
.level-2 { background-color: #fa8c16; }
.level-3 { background-color: #faad14; }
.level-4 { background-color: #1890ff; }
.level-undefined { background-color: #8c8c8c; }
/* 预警触发时间（固定宽度，不压缩） */
.trigger-time {
width: 120px;
color: #999;
text-align: left;
white-space: nowrap;
flex-shrink: 0; /* 固定宽度，不被压缩 */
flex-shrink: 0;
font-size: 13px;
}
/* 预警类型（固定宽度，不压缩） */
.alert-type {
width: 60px;
color: #666;
text-align: left;
white-space: nowrap;
flex-shrink: 0; /* 固定宽度，不被压缩 */
flex-shrink: 0;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
/* 预警标题（仅修改这部分样式） */
.alert-title {
width: 100px; /* 固定宽度，可根据需求调整（比如200px/400px） */
flex-shrink: 0; /* 关键：禁止宽度被压缩，保证固定宽度生效 */
width: 100px;
flex-shrink: 0;
color: #666;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏超出宽度的内容 */
text-overflow: ellipsis; /* 超出显示省略号 */
margin-left: 4px; /* 保留与类型的微小间距 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 4px;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
position: relative;
}
.alert-content {
width: 200px;
flex-grow: 1;
min-width: 150px;
}
/* 新增：标题文本样式 - 确保省略号生效 */
.title-text {
width: 100%;
white-space: nowrap;
@@ -326,71 +283,38 @@ onMounted(() => {
text-overflow: ellipsis;
display: inline-block;
padding: 0 4px;
box-sizing: border-box;
}
/* 新增：自定义提示框样式 */
.custom-tooltip {
position: fixed;
background: #1f2937;
color: #ffffff;
padding: 12px 16px;
border-radius: 8px;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 14px;
line-height: 1.6;
z-index: 9999;
animation: fadeIn 0.2s ease-in-out;
max-height: 400px;
overflow-y: auto;
}
.tooltip-content {
font-family: "Consolas", "Monaco", "Courier New", monospace;
white-space: pre-wrap;
word-wrap: break-word;
color: #e5e7eb;
margin: 0;
:deep(.alert-title .ant-btn-link) {
padding: 0;
height: auto;
line-height: 1;
background: transparent;
border: none;
}
.custom-tooltip::-webkit-scrollbar {
width: 4px;
:deep(.ant-tooltip) {
z-index: 1070 !important;
}
.custom-tooltip::-webkit-scrollbar-track {
background: #2d3748;
border-radius: 2px;
:deep(.ant-tooltip-inner) {
max-width: 500px !important;
padding: 12px 16px !important;
font-size: 14px !important;
line-height: 1.6 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
background: #1f2937 !important;
color: #fff !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.custom-tooltip::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 2px;
:deep(.ant-tooltip-arrow-content) {
background: #1f2937 !important;
}
.tooltip-arrow {
position: absolute;
top: -8px;
left: 10px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1f2937;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 滚动条样式优化 */
.alert-list-container::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -405,7 +329,6 @@ onMounted(() => {
background-color: #f5f5f5;
}
/* 小屏幕适配 */
@media (max-width: 768px) {
.status-filter-container {
gap: 8px;
@@ -435,5 +358,11 @@ onMounted(() => {
.alert-list-container {
max-height: 200px;
}
.alert-title {
width: 80px;
}
.alert-content {
width: 150px;
}
}
</style>
</style>

4
web-vue/packages/core/layouts/views/desktop/workbench/components/Welcome.vue
View File

@@ -11,6 +11,9 @@
<TabPane key="3" tab="文件管理">
<MyfileInfo />
</TabPane>
<TabPane key="4" tab="便签管理">
<NoteTodo />
</TabPane>
</Tabs>
</div>
</template>
@@ -18,6 +21,7 @@
<script lang="ts" setup name="AboutPage">
import { h, ref, onMounted } from 'vue';
import { Tag, Tabs, TabPane } from 'ant-design-vue';
import NoteTodo from './NoteTodo.vue';
import MySchedule from './MySchedule.vue';
import Calendar from './calendar/list.vue';
import ItemsInfo from './listItem/list.vue';

286
web-vue/packages/erp/views/erp/green/components/ChartAccount.vue
View File

@@ -1,13 +1,12 @@
<template>
<Card title="年度账户收支趋势" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度账户趋势" class="account-trend-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, watchEffect } from 'vue';
import { Card } from 'ant-design-vue';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { BizItemInfo, bizItemInfoListAll } from '@jeesite/biz/api/biz/itemInfo';
import * as echarts from 'echarts';
@@ -19,7 +18,6 @@ const rawData = ref<BizItemInfo[]>([]);
const chartDom = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
const { createMessage } = useMessage();
const formatNumber = (num: string | undefined, decimal = 2): number => {
if (!num) return 0;
@@ -111,16 +109,27 @@ const initChart = () => {
if (rawData.value.length === 0) {
chartInstance.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } },
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
textStyle: { color: '#fff' }
},
legend: {
data: ['收入', '支出', '支出占比'],
top: 10,
textStyle: { fontSize: 12, color: '#a0cfff' }
},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['收入', '支出', '支出占比'], top: 10, textStyle: { fontSize: 12 } },
grid: {
left: 10,
right: 10,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -129,42 +138,46 @@ const initChart = () => {
data: [],
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
lineHeight: 1.2
width: 50,
lineHeight: 1.2,
color: '#a0cfff'
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
}
},
yAxis: [
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
min: 0
},
{
type: 'value',
name: '占比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(2)}%`
formatter: (value: number) => `${value.toFixed(2)}%`,
color: '#a0cfff'
},
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true,
position: 'right'
@@ -172,8 +185,8 @@ const initChart = () => {
],
series: [],
noDataLoadingOption: {
text: '暂无收入支出数据',
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
text: '暂无数据',
textStyle: { fontSize: 16, color: '#a0cfff', fontWeight: '500' },
position: 'center',
effect: 'none'
}
@@ -196,50 +209,53 @@ const initChart = () => {
distance: 3,
textStyle: {
fontSize: 10,
color: '#333',
fontWeight: '500'
color: '#40c4ff',
fontWeight: '500',
textShadowColor: 'rgba(0,0,0,0.3)',
textShadowBlur: 1
},
formatter: (params: any) => `${params.value.toFixed(2)}`
};
const option = {
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#20a0ff' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any[]) => {
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
if (!params || params.length === 0) return '<div style="padding: 8px; color: #a0cfff;">暂无数据</div>';
const currentXAxisValue = params[0]?.axisValue || '';
const item = rawData.value.find(i => i.xaxis === currentXAxisValue);
if (!item) return `<div style="padding: 8px;">${currentXAxisValue}：暂无明细</div>`;
if (!item) return `<div style="padding: 8px; color: #a0cfff;">${currentXAxisValue}：暂无明细</div>`;
const netProfit = calculateNetProfit(item.index01, item.index02);
const ratio = calculateExpenseRatio(item.index01, item.index02);
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
const netProfitColor = netProfit > 0 ? '#40c4ff' : netProfit < 0 ? '#ff4d4f' : '#a0cfff';
return `
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentXAxisValue}</div>
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 8px; text-align: center;">${currentXAxisValue}</div>
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
<thead>
<tr style="background-color: #f8f8f8;">
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">支出占比</th>
<tr style="background-color: rgba(18, 60, 110, 0.5);">
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总收入</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总支出</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">净收益</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">支出占比</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #fa8c16;">${ratio.toFixed(2)}%</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #40c4ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ff4d4f;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ffa066;">${ratio.toFixed(2)}%</td>
</tr>
</tbody>
</table>
@@ -250,12 +266,12 @@ const initChart = () => {
data: ['收入', '支出', '支出占比'],
top: 10,
left: 'center',
textStyle: { fontSize: 11 }
textStyle: { fontSize: 11, color: '#a0cfff' }
},
grid: {
left: 10,
right: 50,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -264,16 +280,18 @@ const initChart = () => {
data: xAxisData,
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
width: 50,
lineHeight: 1.2,
margin: 8
margin: 6,
color: '#a0cfff'
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
},
boundaryGap: true
},
@@ -281,16 +299,17 @@ const initChart = () => {
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
min: amountMin,
max: amountMax,
axisLine: { onZero: true },
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
minInterval: 0.1,
@@ -298,17 +317,18 @@ const initChart = () => {
},
{
type: 'value',
name: '占比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(2)}%`
formatter: (value: number) => `${value.toFixed(2)}%`,
color: '#a0cfff'
},
min: ratioMin,
max: ratioMax,
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true,
position: 'right'
@@ -316,7 +336,7 @@ const initChart = () => {
],
noDataLoadingOption: {
text: '暂无数据',
textStyle: { fontSize: 14, color: '#999' },
textStyle: { fontSize: 14, color: '#a0cfff' },
effect: 'bubble',
effectOption: { effect: { n: 0 } }
},
@@ -327,10 +347,12 @@ const initChart = () => {
data: incomeData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1890ff' },
{ offset: 0, color: '#40c4ff' },
{ offset: 1, color: '#096dd9' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
barGap: '30%',
@@ -340,9 +362,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#40a9ff' },
{ offset: 1, color: '#1890ff' }
])
{ offset: 0, color: '#69b1ff' },
{ offset: 1, color: '#40c4ff' }
]),
shadowColor: 'rgba(64, 196, 255, 0.5)',
shadowBlur: 5
}
}
},
@@ -352,10 +376,12 @@ const initChart = () => {
data: expenseData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f5222d' },
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#cf1322' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
label: barLabelConfig,
@@ -363,9 +389,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ff4d4f' },
{ offset: 0, color: '#f5222d' }
])
{ offset: 0, color: '#ff7875' },
{ offset: 1, color: '#ff4d4f' }
]),
shadowColor: 'rgba(255, 77, 79, 0.5)',
shadowBlur: 5
}
}
},
@@ -379,12 +407,12 @@ const initChart = () => {
symbolSize: 5,
lineStyle: {
width: 1,
color: '#fa8c16'
color: '#ffa066'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(250, 140, 22, 0.25)' },
{ offset: 1, color: 'rgba(250, 140, 22, 0.04)' }
{ offset: 0, color: 'rgba(255, 160, 102, 0.3)' },
{ offset: 1, color: 'rgba(255, 160, 102, 0.05)' }
])
},
label: {
@@ -393,8 +421,10 @@ const initChart = () => {
distance: 4,
textStyle: {
fontSize: 9,
color: '#fa8c16',
fontWeight: 500
color: '#ffa066',
fontWeight: 500,
textShadowColor: 'rgba(0,0,0,0.3)',
textShadowBlur: 1
},
formatter: (params: any) => `${params.value.toFixed(2)}%`
},
@@ -462,90 +492,88 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
.account-trend-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card:hover) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
max-width: 450px;
font-family: 'Microsoft YaHei', sans-serif;
background: rgba(9, 30, 58, 0.95) !important;
}
:deep(.echarts-xaxis-label) {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.2;
color: #a0cfff !important;
}
:deep(.echarts-yaxis-name) {
margin-right: 3px;
color: #a0cfff !important;
}
:deep(.echarts-legend-item) {
margin-right: 12px !important;
color: #a0cfff !important;
}
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
white-space: nowrap;
color: #40c4ff !important;
}
.status-filter-container,
.status-filter,
.status-item {
display: none !important;
}
</style>

173
web-vue/packages/erp/views/erp/green/components/ChartCategoryExp.vue
View File

@@ -1,6 +1,6 @@
<template>
<Card title="年度分类支出结构" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度支出结构" class="category-expense-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
@@ -19,22 +19,27 @@ const chartDom = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
const formatNumber = (num: string | undefined, decimal = 2): number => {
const formatNumber = (num: string | undefined, decimal = 0): number => {
if (!num) return 0;
const parsed = Number(num);
return isNaN(parsed) ? 0 : Number(parsed.toFixed(decimal));
};
const toTenThousandYuan = (num: string | undefined): number => {
const rawNum = formatNumber(num);
return formatNumber((rawNum / 10000).toString());
const formatWithCommas = (num: number): string => {
return num.toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
};
const sortByMonth = (data: BizItemInfo[]): BizItemInfo[] => {
return data.sort((a, b) => {
const monthA = a.xaxis ? parseInt(a.xaxis, 10) : 0;
const monthB = b.xaxis ? parseInt(b.xaxis, 10) : 0;
return monthA - monthB;
const convertToTenThousand = (num: number, decimal = 2): number => {
return Number((num / 10000).toFixed(decimal));
};
const formatTenThousand = (num: number): string => {
return convertToTenThousand(num).toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
@@ -46,7 +51,7 @@ const fetchDataList = async (params?: Record<string, any>) => {
};
const result = await bizItemInfoListAll(reqParams);
const validData = (result || []).filter(item => item.xaxis && item.index01);
rawData.value = sortByMonth(validData);
rawData.value = validData || [];
} catch (error) {
console.error('获取数据列表失败：', error);
rawData.value = [];
@@ -62,11 +67,11 @@ const initChart = () => {
if (rawData.value.length === 0) {
chartInstance.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
top: '50%',
text: '暂无支出数据',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'item' },
padding: [0, 0, 0, 0]
@@ -76,22 +81,29 @@ const initChart = () => {
const pieData = rawData.value.map(item => ({
name: item.xaxis || '',
value: toTenThousandYuan(item.index01)
value: formatNumber(item.index01)
})).filter(item => item.value > 0);
const totalValue = pieData.reduce((sum, item) => sum + item.value, 0);
const option = {
backgroundColor: 'transparent',
padding: [0, 0, 0, 0],
tooltip: {
trigger: 'item',
textStyle: { fontSize: 12 },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any) => `
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">${params.name}</div>
<div style="color: #666;">支出：${params.value.toFixed(2)} 万元</div>
`
formatter: (params: any) => {
const percent = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(2) : 0;
return `
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 4px;">${params.name}</div>
<div style="color: #a0cfff;">支出：${formatWithCommas(params.value)} 元</div>
<div style="color: #a0cfff;">占比：${percent}%</div>
`;
}
},
legend: {
type: 'scroll',
@@ -100,7 +112,7 @@ const initChart = () => {
left: 'center',
textStyle: {
fontSize: 10,
color: '#333',
color: '#a0cfff',
cursor: 'pointer'
},
itemGap: 15,
@@ -109,9 +121,9 @@ const initChart = () => {
selectedMode: true,
scrollDataIndex: 0,
pageButtonPosition: 'end',
pageIconColor: '#1890ff',
pageIconInactiveColor: '#ccc',
pageTextStyle: { fontSize: 9 },
pageIconColor: '#40c4ff',
pageIconInactiveColor: 'rgba(32, 160, 255, 0.3)',
pageTextStyle: { fontSize: 9, color: '#a0cfff' },
height: 30,
formatter: (name: string) => {
return name.length > 6 ? `${name.substring(0, 6)}...` : name;
@@ -122,26 +134,34 @@ const initChart = () => {
name: '支出',
type: 'pie',
radius: ['30%', '60%'],
center: ['50%', '45%'],
center: ['50%', '50%'],
data: pieData,
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#a0cfff',
formatter: (params: any) => {
const shortName = params.name.length > 4 ? `${params.name.substring(0, 4)}...` : params.name;
return `${shortName}: ${params.value}万元`;
const percent = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(1) : 0;
return `${shortName}: ${formatTenThousand(params.value)}万元 (${percent}%)`;
}
},
itemStyle: {
borderColor: '#fff',
borderColor: 'rgba(9, 30, 58, 0.8)',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
shadowColor: 'rgba(64, 196, 255, 0.5)'
}
},
labelLine: {
show: true,
lineStyle: {
color: '#a0cfff'
}
}
}
@@ -199,60 +219,51 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 0 !important;
.category-expense-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
height: 100%;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-legend) {
@@ -275,12 +286,14 @@ onUnmounted(() => {
margin-right: 15px !important;
white-space: nowrap !important;
cursor: pointer !important;
color: #a0cfff !important;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
background: rgba(9, 30, 58, 0.95) !important;
}
</style>

173
web-vue/packages/erp/views/erp/green/components/ChartCategoryInc.vue
View File

@@ -1,6 +1,6 @@
<template>
<Card title="年度分类收入分布" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度收入分布" class="category-income-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
@@ -19,22 +19,27 @@ const chartDom = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
const formatNumber = (num: string | undefined, decimal = 2): number => {
const formatNumber = (num: string | undefined, decimal = 0): number => {
if (!num) return 0;
const parsed = Number(num);
return isNaN(parsed) ? 0 : Number(parsed.toFixed(decimal));
};
const toTenThousandYuan = (num: string | undefined): number => {
const rawNum = formatNumber(num);
return formatNumber((rawNum / 10000).toString());
const formatWithCommas = (num: number): string => {
return num.toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
};
const sortByMonth = (data: BizItemInfo[]): BizItemInfo[] => {
return data.sort((a, b) => {
const monthA = a.xaxis ? parseInt(a.xaxis, 10) : 0;
const monthB = b.xaxis ? parseInt(b.xaxis, 10) : 0;
return monthA - monthB;
const convertToTenThousand = (num: number, decimal = 2): number => {
return Number((num / 10000).toFixed(decimal));
};
const formatTenThousand = (num: number): string => {
return convertToTenThousand(num).toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
@@ -46,7 +51,7 @@ const fetchDataList = async (params?: Record<string, any>) => {
};
const result = await bizItemInfoListAll(reqParams);
const validData = (result || []).filter(item => item.xaxis && item.index01);
rawData.value = sortByMonth(validData);
rawData.value = validData || [];
} catch (error) {
console.error('获取数据列表失败：', error);
rawData.value = [];
@@ -62,11 +67,11 @@ const initChart = () => {
if (rawData.value.length === 0) {
chartInstance.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
top: '50%',
text: '暂无收入数据',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'item' },
padding: [0, 0, 0, 0]
@@ -76,22 +81,29 @@ const initChart = () => {
const pieData = rawData.value.map(item => ({
name: item.xaxis || '',
value: toTenThousandYuan(item.index01)
value: formatNumber(item.index01)
})).filter(item => item.value > 0);
const totalValue = pieData.reduce((sum, item) => sum + item.value, 0);
const option = {
backgroundColor: 'transparent',
padding: [0, 0, 0, 0],
tooltip: {
trigger: 'item',
textStyle: { fontSize: 12 },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any) => `
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">${params.name}</div>
<div style="color: #666;">收入：${params.value.toFixed(2)} 万元</div>
`
formatter: (params: any) => {
const percent = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(2) : 0;
return `
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 4px;">${params.name}</div>
<div style="color: #a0cfff;">收入：${formatWithCommas(params.value)} 元</div>
<div style="color: #a0cfff;">占比：${percent}%</div>
`;
}
},
legend: {
type: 'scroll',
@@ -100,7 +112,7 @@ const initChart = () => {
left: 'center',
textStyle: {
fontSize: 10,
color: '#333',
color: '#a0cfff',
cursor: 'pointer'
},
itemGap: 15,
@@ -109,9 +121,9 @@ const initChart = () => {
selectedMode: true,
scrollDataIndex: 0,
pageButtonPosition: 'end',
pageIconColor: '#1890ff',
pageIconInactiveColor: '#ccc',
pageTextStyle: { fontSize: 9 },
pageIconColor: '#40c4ff',
pageIconInactiveColor: 'rgba(32, 160, 255, 0.3)',
pageTextStyle: { fontSize: 9, color: '#a0cfff' },
height: 30,
formatter: (name: string) => {
return name.length > 6 ? `${name.substring(0, 6)}...` : name;
@@ -122,26 +134,34 @@ const initChart = () => {
name: '收入',
type: 'pie',
radius: ['30%', '60%'],
center: ['50%', '45%'],
center: ['50%', '50%'],
data: pieData,
label: {
show: true,
position: 'outside',
fontSize: 10,
color: '#a0cfff',
formatter: (params: any) => {
const shortName = params.name.length > 4 ? `${params.name.substring(0, 4)}...` : params.name;
return `${shortName}: ${params.value}万元`;
const percent = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(1) : 0;
return `${shortName}: ${formatTenThousand(params.value)}万元 (${percent}%)`;
}
},
itemStyle: {
borderColor: '#fff',
borderColor: 'rgba(9, 30, 58, 0.8)',
borderWidth: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
shadowColor: 'rgba(64, 196, 255, 0.5)'
}
},
labelLine: {
show: true,
lineStyle: {
color: '#a0cfff'
}
}
}
@@ -199,60 +219,51 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 0 !important;
.category-income-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
height: 100%;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-legend) {
@@ -275,12 +286,14 @@ onUnmounted(() => {
margin-right: 15px !important;
white-space: nowrap !important;
cursor: pointer !important;
color: #a0cfff !important;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
background: rgba(9, 30, 58, 0.95) !important;
}
</style>

273
web-vue/packages/erp/views/erp/green/components/ChartLine.vue
View File

@@ -1,13 +1,12 @@
<template>
<Card title="年度各月收支趋势" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度各月趋势" class="month-trend-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, watchEffect } from 'vue';
import { Card } from 'ant-design-vue';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { BizItemInfo, bizItemInfoListAll } from '@jeesite/biz/api/biz/itemInfo';
import * as echarts from 'echarts';
@@ -19,7 +18,6 @@ const rawData = ref<BizItemInfo[]>([]);
const chartDom = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
const { createMessage } = useMessage();
const formatNumber = (num: string | undefined, decimal = 2): number => {
if (!num) return 0;
@@ -102,7 +100,6 @@ const fetchDataList = async (params?: Record<string, any>) => {
rawData.value = sortByMonth(validData);
} catch (error) {
console.error('获取数据列表失败：', error);
createMessage.error('获取月度收支数据失败，请稍后重试');
rawData.value = [];
}
};
@@ -116,16 +113,17 @@ const initChart = () => {
if (rawData.value.length === 0) {
myChart.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['收入', '支出', '支出占比'], top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } } },
legend: { data: ['收入', '支出', '支出占比'], top: 10, textStyle: { fontSize: 12, color: '#a0cfff' } },
grid: {
left: 10,
right: 40,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -134,41 +132,46 @@ const initChart = () => {
data: [],
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
lineHeight: 1.2
width: 50,
lineHeight: 1.2,
color: '#a0cfff',
margin: 6
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
}
},
yAxis: [
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(1)}%`
formatter: (value: number) => `${value.toFixed(1)}%`,
color: '#a0cfff'
},
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
position: 'right',
@@ -176,8 +179,8 @@ const initChart = () => {
],
series: [],
noDataLoadingOption: {
text: '暂无收入支出数据',
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
text: '暂无数据',
textStyle: { fontSize: 16, color: '#a0cfff', fontWeight: '500' },
position: 'center',
effect: 'none'
}
@@ -200,8 +203,10 @@ const initChart = () => {
distance: 3,
textStyle: {
fontSize: 10,
color: '#333',
fontWeight: '500'
color: '#40c4ff',
fontWeight: '500',
textShadowColor: 'rgba(0,0,0,0.3)',
textShadowBlur: 1
},
formatter: (params: any) => `${params.value.toFixed(2)}`
};
@@ -213,7 +218,8 @@ const initChart = () => {
textStyle: {
fontSize: 9,
fontWeight: '500',
backgroundColor: 'rgba(255,255,255,0.8)',
backgroundColor: 'rgba(9, 30, 58, 0.8)',
color: '#a0cfff',
padding: [2, 4],
borderRadius: 2
},
@@ -221,42 +227,43 @@ const initChart = () => {
};
const option = {
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#20a0ff' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any[]) => {
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
if (!params || params.length === 0) return '<div style="padding: 8px; color: #a0cfff;">暂无数据</div>';
const currentMonth = params[0]?.axisValue || '';
const item = rawData.value.find(i => formatMonth(i.xaxis) === currentMonth);
if (!item) return `<div style="padding: 8px;">${currentMonth}：暂无明细</div>`;
if (!item) return `<div style="padding: 8px; color: #a0cfff;">${currentMonth}：暂无明细</div>`;
const netProfit = calculateNetProfit(item.index01, item.index02);
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
const netProfitColor = netProfit > 0 ? '#40c4ff' : netProfit < 0 ? '#ff4d4f' : '#a0cfff';
return `
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentMonth}</div>
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 8px; text-align: center;">${currentMonth}</div>
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
<thead>
<tr style="background-color: #f8f8f8;">
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">支出占比</th>
<tr style="background-color: rgba(18, 60, 110, 0.5);">
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总收入</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总支出</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">净收益</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">支出占比</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #722ed1;">${formatPercentage(item.index03)}</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #40c4ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ff4d4f;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ffa066;">${formatPercentage(item.index03)}</td>
</tr>
</tbody>
</table>
@@ -267,12 +274,12 @@ const initChart = () => {
data: ['收入', '支出', '支出占比'],
top: 10,
left: 'center',
textStyle: { fontSize: 11 }
textStyle: { fontSize: 11, color: '#a0cfff' }
},
grid: {
left: 10,
right: 40,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -281,16 +288,18 @@ const initChart = () => {
data: xAxisData,
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
width: 50,
lineHeight: 1.2,
margin: 8
margin: 6,
color: '#a0cfff'
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
},
boundaryGap: true
},
@@ -298,32 +307,34 @@ const initChart = () => {
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
min: amountMin,
max: amountMax,
axisLine: { onZero: true },
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(1)}%`
formatter: (value: number) => `${value.toFixed(1)}%`,
color: '#a0cfff'
},
min: percentMin,
max: percentMax,
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
position: 'right',
@@ -332,7 +343,7 @@ const initChart = () => {
],
noDataLoadingOption: {
text: '暂无数据',
textStyle: { fontSize: 14, color: '#999' },
textStyle: { fontSize: 14, color: '#a0cfff' },
effect: 'bubble',
effectOption: { effect: { n: 0 } }
},
@@ -343,10 +354,12 @@ const initChart = () => {
data: incomeData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1890ff' },
{ offset: 0, color: '#40c4ff' },
{ offset: 1, color: '#096dd9' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
barGap: '30%',
@@ -356,9 +369,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#40a9ff' },
{ offset: 1, color: '#1890ff' }
])
{ offset: 0, color: '#69b1ff' },
{ offset: 1, color: '#40c4ff' }
]),
shadowColor: 'rgba(64, 196, 255, 0.5)',
shadowBlur: 5
}
}
},
@@ -368,10 +383,12 @@ const initChart = () => {
data: expenseData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f5222d' },
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#cf1322' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
label: barLabelConfig,
@@ -379,9 +396,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#f5222d' }
])
{ offset: 0, color: '#ff7875' },
{ offset: 1, color: '#ff4d4f' }
]),
shadowColor: 'rgba(255, 77, 79, 0.5)',
shadowBlur: 5
}
}
},
@@ -395,12 +414,12 @@ const initChart = () => {
smooth: true,
lineStyle: {
width: 1,
color: '#722ed1',
color: '#ffa066',
type: 'solid'
},
itemStyle: {
color: '#722ed1',
borderColor: '#fff',
color: '#ffa066',
borderColor: 'rgba(9, 30, 58, 0.8)',
borderWidth: 1
},
label: lineLabelConfig,
@@ -467,73 +486,61 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
.month-trend-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card:hover) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
max-width: 450px;
font-family: 'Microsoft YaHei', sans-serif;
background: rgba(9, 30, 58, 0.95) !important;
}
:deep(.echarts-tooltip table) {
@@ -544,19 +551,23 @@ onUnmounted(() => {
:deep(.echarts-xaxis-label) {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.2;
color: #a0cfff !important;
}
:deep(.echarts-yaxis-name) {
margin-right: 3px;
color: #a0cfff !important;
}
:deep(.echarts-legend-item) {
margin-right: 12px !important;
color: #a0cfff !important;
}
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
white-space: nowrap;
color: #40c4ff !important;
}
:deep(.echarts-tooltip::-webkit-scrollbar) {
@@ -565,12 +576,12 @@ onUnmounted(() => {
}
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
background: #d9d9d9;
background: rgba(32, 160, 255, 0.5);
border-radius: 3px;
}
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
background: #f5f5f5;
background: rgba(9, 30, 58, 0.5);
border-radius: 3px;
}
</style>

258
web-vue/packages/erp/views/erp/green/components/ChartMom.vue
View File

@@ -1,13 +1,12 @@
<template>
<Card title="年度各月环比情况" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度环比趋势" class="month-mom-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, watchEffect } from 'vue';
import { Card } from 'ant-design-vue';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { BizItemInfo, bizItemInfoListAll } from '@jeesite/biz/api/biz/itemInfo';
import * as echarts from 'echarts';
@@ -19,7 +18,6 @@ const rawData = ref<BizItemInfo[]>([]);
const chartDom = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
const { createMessage } = useMessage();
const formatNumber = (num: string | undefined, decimal = 2): number => {
if (!num) return 0;
@@ -97,7 +95,6 @@ const fetchDataList = async (params?: Record<string, any>) => {
rawData.value = sortByMonth(validData);
} catch (error) {
console.error('获取数据失败：', error);
createMessage.error('获取月度环比数据失败，请稍后重试');
rawData.value = [];
}
};
@@ -111,18 +108,43 @@ const initChart = () => {
if (rawData.value.length === 0) {
myChart.setOption({
tooltip: { trigger: 'axis' },
legend: { data: ['本月收入','上月收入','本月支出','上月支出','收入环比','支出环比','净收益'], top: 10 },
grid: { left:10, right:40, bottom:60, top:40, containLabel:true },
xAxis: { type: 'category', data: [] },
backgroundColor: 'transparent',
tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#40c4ff' } } },
legend: {
data: ['本月收入','上月收入','本月支出','上月支出','收入环比','支出环比','净收益'],
top: 10,
textStyle: { color: '#a0cfff', fontSize: 11 }
},
grid: { left:10, right:20, bottom:12, top:40, containLabel:true },
xAxis: {
type: 'category',
data: [],
axisLabel: { color: '#a0cfff' },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } }
},
yAxis: [
{ type: 'value', name: '万元' },
{ type: 'value', name: '%', position: 'right' }
{
type: 'value',
name: '万元',
nameTextStyle: { color: '#a0cfff' },
axisLabel: { color: '#a0cfff' },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } }
},
{
type: 'value',
name: '%',
position: 'right',
nameTextStyle: { color: '#a0cfff' },
axisLabel: { color: '#a0cfff' },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } }
}
],
series: [],
noDataLoadingOption: {
text: '暂无月度环比数据',
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
text: '暂无数据',
textStyle: { fontSize: 16, color: '#a0cfff', fontWeight: '500' },
position: 'center'
}
}, true);
@@ -145,7 +167,7 @@ const initChart = () => {
const profitBarLabelConfig = {
show: true,
position: 'top',
textStyle: { fontSize: 9, fontWeight: 'bold' },
textStyle: { fontSize: 9, fontWeight: 'bold', color: '#a0cfff' },
formatter: (v: any) => formatWithThousandsSeparator(v.value)
};
@@ -161,17 +183,19 @@ const initChart = () => {
};
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
padding: 12,
backgroundColor: '#fff',
borderColor: '#eee',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
textStyle: { fontSize: 12 },
textStyle: { fontSize: 12, color: '#fff' },
axisPointer: { lineStyle: { color: '#40c4ff' } },
formatter: (params: any[]) => {
const month = params[0]?.axisValue;
const item = rawData.value.find(i => formatMonth(i.xaxis) === month);
if (!item) return '无数据';
if (!item) return '<div style="color:#a0cfff;">无数据</div>';
const incomeMom = calculateMonthOnMonth(item.index01, item.index04);
const expenseMom = calculateMonthOnMonth(item.index02, item.index05);
@@ -180,47 +204,47 @@ const initChart = () => {
let netProfitText = '';
let netProfitColor = '';
if (netProfitInYuan > 0) {
netProfitText = `<span style="font-weight:bold;">↑ ${formatWithThousandsSeparator(netProfitInYuan)}</span>`;
netProfitColor = '#52c41a';
netProfitText = `<span style="font-weight:bold; color:#40c4ff;">↑ ${formatWithThousandsSeparator(netProfitInYuan)}</span>`;
netProfitColor = '#40c4ff';
} else if (netProfitInYuan < 0) {
netProfitText = `<span style="font-weight:bold;">↓ ${formatWithThousandsSeparator(Math.abs(netProfitInYuan))}</span>`;
netProfitColor = '#f5222d';
netProfitText = `<span style="font-weight:bold; color:#ff4d4f;">↓ ${formatWithThousandsSeparator(Math.abs(netProfitInYuan))}</span>`;
netProfitColor = '#ff4d4f';
} else {
netProfitText = '<span style="font-weight:bold;">— 收支平衡</span>';
netProfitColor = '#666';
netProfitText = '<span style="font-weight:bold; color:#a0cfff;">— 收支平衡</span>';
netProfitColor = '#a0cfff';
}
const incomeMomText = incomeMom >= 0
? `<span style="color:#f5222d; font-weight:bold;">↑ ${incomeMom.toFixed(2)}</span>`
: `<span style="color:#1890ff; font-weight:bold;">↓ ${Math.abs(incomeMom).toFixed(2)}</span>`;
? `<span style="color:#ff4d4f; font-weight:bold;">↑ ${incomeMom.toFixed(2)}</span>`
: `<span style="color:#40c4ff; font-weight:bold;">↓ ${Math.abs(incomeMom).toFixed(2)}</span>`;
const expenseMomText = expenseMom >= 0
? `<span style="color:#f5222d; font-weight:bold;">↑ ${expenseMom.toFixed(2)}</span>`
: `<span style="color:#1890ff; font-weight:bold;">↓ ${Math.abs(expenseMom).toFixed(2)}</span>`;
? `<span style="color:#ff4d4f; font-weight:bold;">↑ ${expenseMom.toFixed(2)}</span>`
: `<span style="color:#40c4ff; font-weight:bold;">↓ ${Math.abs(expenseMom).toFixed(2)}</span>`;
return `
<div style="text-align:center; font-weight:600; margin-bottom:8px;">${month}</div>
<div style="text-align:center; font-weight:600; margin-bottom:8px; color:#40c4ff;">${month}</div>
<table style="width:100%; border-collapse:collapse; font-size:12px;">
<thead>
<tr style="background:#f7f8fa;">
<th style="border:1px solid #eee; padding:6px; text-align:center;">本月收入(元)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">上月收入(元)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">收入环比(%)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">本月支出(元)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">上月支出(元)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">支出环比(%)</th>
<th style="border:1px solid #eee; padding:6px; text-align:center;">净收益(元)</th>
<tr style="background:rgba(18, 60, 110, 0.5);">
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">本月收入(元)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">上月收入(元)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">收入环比(%)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">本月支出(元)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">上月支出(元)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">支出环比(%)</th>
<th style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center; color:#a0cfff;">净收益(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid #eee; padding:6px; color:#1890ff; text-align:right;">${formatWithThousandsSeparator(item.index01)}</td>
<td style="border:1px solid #eee; padding:6px; color:#ff7875; text-align:right;">${formatWithThousandsSeparator(item.index04)}</td>
<td style="border:1px solid #eee; padding:6px; text-align:center;">${incomeMomText}</td>
<td style="border:1px solid #eee; padding:6px; color:#f5222d; text-align:right;">${formatWithThousandsSeparator(item.index02)}</td>
<td style="border:1px solid #eee; padding:6px; color:#ffc53d; text-align:right;">${formatWithThousandsSeparator(item.index05)}</td>
<td style="border:1px solid #eee; padding:6px; text-align:center;">${expenseMomText}</td>
<td style="border:1px solid #eee; padding:6px; color:${netProfitColor}; text-align:center;">${netProfitText}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; color:#40c4ff; text-align:right;">${formatWithThousandsSeparator(item.index01)}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; color:#ff7875; text-align:right;">${formatWithThousandsSeparator(item.index04)}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center;">${incomeMomText}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; color:#ff4d4f; text-align:right;">${formatWithThousandsSeparator(item.index02)}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; color:#ffc53d; text-align:right;">${formatWithThousandsSeparator(item.index05)}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; text-align:center;">${expenseMomText}</td>
<td style="border:1px solid rgba(32, 160, 255, 0.3); padding:6px; color:${netProfitColor}; text-align:center;">${netProfitText}</td>
</tr>
</tbody>
</table>
@@ -229,29 +253,45 @@ const initChart = () => {
},
legend: {
data: ['本月收入', '上月收入', '本月支出', '上月支出', '收入环比', '支出环比', '净收益'],
top: 10, left: 'center', textStyle: { fontSize: 11 }
top: 10,
left: 'center',
textStyle: { fontSize: 11, color: '#a0cfff' }
},
grid: { left: 10, right: 40, bottom: 60, top: 40, containLabel: true },
grid: { left: 10, right: 20, bottom: 12, top: 40, containLabel: true },
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: { fontSize: 10, rotate: 60 }
axisLabel: { fontSize: 10, rotate: 45, color: '#a0cfff' },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } }
},
yAxis: [
{
type: 'value',
name: '万元',
nameTextStyle: { color: '#a0cfff', fontSize: 11 },
min: amountMin, max: amountMax,
axisLabel: {
formatter: (v: any) => formatWithThousandsSeparator(v),
fontSize: 10
fontSize: 10,
color: '#a0cfff'
},
splitLine: { lineStyle: { type: 'dashed', opacity: 0.3 } }
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { type: 'dashed', opacity: 0.3, color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } }
},
{
type: 'value', name: '%', position: 'right',
type: 'value',
name: '%',
position: 'right',
nameTextStyle: { color: '#a0cfff', fontSize: 11 },
min: pMin, max: pMax,
axisLabel: { formatter: (v: any) => v.toFixed(1) + '%' }
axisLabel: {
formatter: (v: any) => v.toFixed(1) + '%',
color: '#a0cfff'
},
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } }
}
],
series: [
@@ -284,15 +324,15 @@ const initChart = () => {
lineStyle: {
width: 1.5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#1890ff' },
{ offset: 0, color: '#40c4ff' },
{ offset: 1, color: '#096dd9' }
])
},
itemStyle: { color: '#1890ff' },
itemStyle: { color: '#40c4ff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(24,144,255,0.25)' },
{ offset: 1, color: 'rgba(24,144,255,0.02)' }
{ offset: 0, color: 'rgba(64,196,255,0.25)' },
{ offset: 1, color: 'rgba(64,196,255,0.02)' }
])
},
label: { show: false },
@@ -327,15 +367,15 @@ const initChart = () => {
lineStyle: {
width: 1.5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f5222d' },
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#cf1322' }
])
},
itemStyle: { color: '#f5222d' },
itemStyle: { color: '#ff4d4f' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(245,34,45,0.25)' },
{ offset: 1, color: 'rgba(245,34,45,0.02)' }
{ offset: 0, color: 'rgba(255,77,79,0.25)' },
{ offset: 1, color: 'rgba(255,77,79,0.02)' }
])
},
label: { show: false },
@@ -357,8 +397,8 @@ const initChart = () => {
data: expenseMomData,
yAxisIndex: 1,
...momLineStyle,
lineStyle: { ...momLineStyle.lineStyle, color: '#722ed1' },
itemStyle: { color: '#722ed1' },
lineStyle: { ...momLineStyle.lineStyle, color: '#ffa066' },
itemStyle: { color: '#ffa066' },
label: { show: false }
},
{
@@ -370,9 +410,11 @@ const initChart = () => {
barGap: '10%',
barCategoryGap: '20%',
itemStyle: {
color: (params: any) => params.data >= 0 ? '#52c41a' : '#f5222d',
color: (params: any) => params.data >= 0 ? '#40c4ff' : '#ff4d4f',
borderRadius: [4, 4, 0, 0],
opacity: 0.85
opacity: 0.85,
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
label: profitBarLabelConfig,
emphasis: { itemStyle: { opacity: 1 } }
@@ -430,30 +472,90 @@ onUnmounted(() => {
</script>
<style scoped>
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
.month-mom-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card:hover) {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
border: 1px solid #e8e8e8 !important;
}
:deep(.echarts-tooltip table) {
border: 1px solid rgba(32, 160, 255, 0.3) !important;
background: rgba(9, 30, 58, 0.95) !important;
min-width: 600px;
}
:deep(.echarts-tooltip small) {
display: block;
font-size: 10px;
margin-top: 2px;
color: #999;
:deep(.echarts-tooltip table) {
width: 100%;
border-collapse: collapse;
}
:deep(.echarts-tooltip::-webkit-scrollbar) {
width: 6px;
height: 6px;
}
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
background: rgba(32, 160, 255, 0.5);
border-radius: 3px;
}
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
background: rgba(9, 30, 58, 0.5);
border-radius: 3px;
}
:deep(.echarts-xaxis-label) {
color: #a0cfff !important;
}
:deep(.echarts-yaxis-label) {
color: #a0cfff !important;
}
:deep(.echarts-axis-line) {
stroke: rgba(32, 160, 255, 0.3) !important;
}
</style>

228
web-vue/packages/erp/views/erp/green/components/ChartPie.vue
View File

@@ -8,24 +8,24 @@
<div class="layout-container">
<div class="left-panel">
<div class="stat-card">
<span class="stat-title">收入</span>
<span class="stat-title">收入(元)</span>
<div class="stat-content">
<Icon icon="icons/erp-income.png" size="28"/>
<span class="stat-value">{{ thisIncome }} (元)</span>
<Icon icon="icons/erp-income.png" size="32"/>
<span class="stat-value">{{ thisIncome || 0 }}</span>
</div>
</div>
<div class="stat-card">
<span class="stat-title">支出</span>
<span class="stat-title">支出(元)</span>
<div class="stat-content">
<Icon icon="icons/erp-expense.png" size="28"/>
<span class="stat-value">{{ thisExpense }} (元)</span>
<Icon icon="icons/erp-expense.png" size="32"/>
<span class="stat-value">{{ thisExpense || 0 }}</span>
</div>
</div>
<div class="stat-card">
<span class="stat-title">占比</span>
<div class="stat-content">
<Icon icon="icons/erp-share.png" size="28"/>
<span class="stat-value">{{ thisShare }} (%)</span>
<Icon icon="icons/erp-share.png" size="32"/>
<span class="stat-value">{{ thisShare || 0 }}%</span>
</div>
</div>
</div>
@@ -60,7 +60,6 @@ const selectedMap = ref<Record<string, boolean>>({});
const totalAmountText = computed(() => {
if (!listAccount.value.length) return '0.00';
let total = 0;
listAccount.value.forEach(item => {
const name = item.accountName || '未知账户';
@@ -79,16 +78,14 @@ const formatPercent = (value: number) => {
const generateRandomColors = (count: number): string[] => {
const colorLibrary = [
'#1890ff', '#52c41a', '#f5a623', '#fa8c16', '#722ed1', '#eb2f96',
'#13c2c2', '#2f54eb', '#f7ba1e', '#f5222d', '#8543e0', '#0fc6c2',
'#7cb305', '#ff7a45', '#ff4d4f', '#6b778c', '#5d7092', '#91d5ff'
'#40c4ff', '#20a0ff', '#096dd9', '#1890ff', '#69b1ff', '#8cc5ff',
'#91d5ff', '#b3d9f2', '#e6f7ff', '#0050b3', '#13c2c2', '#0fc6c2',
'#722ed1', '#52c41a', '#f5a623', '#fa8c16', '#eb2f96', '#2f54eb'
];
if (count <= colorLibrary.length) return colorLibrary.slice(0, count);
const colors = [...colorLibrary];
while (colors.length < count) {
const hue = Math.floor(Math.random() * 360);
const hue = Math.floor(Math.random() * 60) + 180;
colors.push(`hsl(${hue}, 75%, 55%)`);
}
return colors;
@@ -105,10 +102,7 @@ const getThisData = async (params?: Record<string, any>) => {
thisExpense.value = Number(res?.[0]?.index02) || 0;
thisShare.value = Number(res?.[0]?.index04) || 0;
} catch (error) {
console.error('获取收支数据失败：', error);
thisIncome.value = 0;
thisExpense.value = 0;
thisShare.value = 0;
console.error(error);
}
};
@@ -116,66 +110,59 @@ const fetchList = async () => {
try {
const res = await erpAccountListAll();
listAccount.value = res || [];
listAccount.value.forEach(item => {
const name = item.accountName || '未知账户';
if (selectedMap.value[name] === undefined) {
selectedMap.value[name] = true;
}
});
} catch (error) {
console.error('获取账户列表失败：', error);
console.error(error);
listAccount.value = [];
}
};
const buildChartOption = (): EChartsOption => {
if (!listAccount.value.length) {
return {
title: { text: '暂无账户数据', left: 'center', top: 'middle', textStyle: { fontSize: 14, color: '#999' } },
tooltip: { trigger: 'item' },
legend: { show: false },
series: []
};
}
const pieData = listAccount.value
const allPieData = listAccount.value
.map(item => ({
name: item.accountName || '未知账户',
value: Number(item.currentBalance) || 0
}))
.filter(item => item.value > 0 && item.name);
if (!pieData.length) {
return {
title: { text: '暂无有效账户金额数据', left: 'center', top: 'middle', textStyle: { fontSize: 14, color: '#999' } },
tooltip: { trigger: 'item' },
legend: { show: false },
series: []
};
}
const filteredPieData = allPieData.filter(item => selectedMap.value[item.name] !== false);
const colors = generateRandomColors(allPieData.length);
const filteredTotal = filteredPieData.reduce((sum, item) => sum + item.value, 0);
const colors = generateRandomColors(pieData.length);
const total = pieData.reduce((sum, item) => sum + item.value, 0);
const selected: Record<string, boolean> = {};
pieData.forEach(item => {
allPieData.forEach(item => {
selected[item.name] = selectedMap.value[item.name] !== false;
});
return {
tooltip: {
trigger: 'item',
formatter: ({ name, value, percent }: any) => `${name}: ${value} 元 (${(percent * 100).toFixed(1)}%)`,
textStyle: { fontSize: 11 },
formatter: ({ name, value }: any) => {
const percent = filteredTotal > 0 ? (value / filteredTotal) * 100 : 0;
return `${name}: ${value} 元 (${percent.toFixed(1)}%)`;
},
textStyle: { fontSize: 11, color: '#fff' },
padding: 8,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.9)',
borderColor: 'rgba(32, 160, 255, 0.5)',
borderWidth: 1,
borderRadius: 4
borderRadius: 4,
},
legend: {
show: true,
orient: 'vertical',
right: 10,
top: 'center',
textStyle: { fontSize: 11, color: '#666' },
textStyle: { fontSize: 11, color: '#a0cfff' },
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
selected: selected,
selected,
formatter: (name: string) => name.length > 8 ? `${name.slice(0, 8)}...` : name
},
series: [{
@@ -184,28 +171,33 @@ const buildChartOption = (): EChartsOption => {
radius: ['30%', '70%'],
center: ['40%', '50%'],
avoidLabelOverlap: true,
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 1 },
itemStyle: {
borderRadius: 6,
borderColor: 'rgba(9, 30, 58, 0.8)',
borderWidth: 1
},
label: {
show: true,
fontSize: 11,
color: '#40c4ff',
distance: 10,
formatter: (params: any) => {
if (total <= 0) return params.name;
return `${params.name} ${formatPercent((params.value / total) * 100)}`;
},
color: '#333',
distance: 10
if (filteredTotal <= 0) return params.name;
const percent = (params.value / filteredTotal) * 100;
return `${params.name} ${formatPercent(percent)}`;
}
},
labelLine: {
show: true,
length: 10,
length2: 8,
smooth: 0.2,
lineStyle: { width: 1, color: '#999' }
lineStyle: { width: 1, color: '#91d5ff' }
},
data: pieData.map((item, index) => ({
data: allPieData.map((item, index) => ({
name: item.name,
value: item.value,
itemStyle: { color: colors[index] }
itemStyle: { color: colors[index] },
}))
}]
};
@@ -213,27 +205,16 @@ const buildChartOption = (): EChartsOption => {
const initChart = () => {
if (!chartDom.value) return;
if (myChart) {
myChart.off('legendselectchanged');
myChart.dispose();
myChart = null;
}
try {
myChart = echarts.init(chartDom.value);
myChart.on('legendselectchanged', (params: any) => {
if (params && params.name !== undefined) {
selectedMap.value[params.name] = params.selected[params.name];
}
});
const option = buildChartOption();
myChart.setOption(option);
} catch (e) {
console.error('初始化图表失败：', e);
}
myChart = echarts.init(chartDom.value);
myChart.on('legendselectchanged', (params: any) => {
selectedMap.value[params.name] = params.selected[params.name];
myChart?.setOption(buildChartOption());
});
myChart.setOption(buildChartOption());
};
const resizeChart = () => {
@@ -244,7 +225,11 @@ const resizeChart = () => {
};
watch(() => props.formParams, async () => {
await Promise.all([fetchList(), getThisData()]);
await getThisData();
}, { deep: true });
watch([listAccount, selectedMap], () => {
nextTick(() => myChart?.setOption(buildChartOption()));
}, { deep: true });
onMounted(async () => {
@@ -258,12 +243,8 @@ onMounted(async () => {
onUnmounted(() => {
if (resizeTimer) clearTimeout(resizeTimer);
window.removeEventListener('resize', resizeChart);
if (myChart) {
myChart.off('legendselectchanged');
myChart.dispose();
myChart = null;
}
selectedMap.value = {};
myChart?.dispose();
myChart = null;
});
</script>
@@ -272,17 +253,27 @@ onUnmounted(() => {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
@@ -293,17 +284,19 @@ onUnmounted(() => {
box-sizing: border-box !important;
overflow: hidden !important;
display: flex;
background: transparent !important;
}
.total-amount {
font-size: 14px;
color: #333;
color: #a0cfff;
font-weight: 500;
}
.amount-value {
color: #1890ff;
color: #40c4ff;
font-weight: 600;
text-shadow: 0 0 5px rgba(64, 196, 255, 0.5);
}
.layout-container {
@@ -316,53 +309,68 @@ onUnmounted(() => {
overflow: hidden !important;
align-items: center;
justify-content: flex-start;
background: transparent !important;
}
.left-panel {
width: 150px;
display: flex;
flex-direction: column;
gap: 4px;
gap: 8px;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
box-sizing: border-box;
max-height: 100%;
height: 100%;
}
.stat-card {
background-color: #f0f7ff;
border-radius: 8px;
padding: 4px;
border: 1px solid #e6f4ff;
flex-shrink: 0;
min-height: 0;
background-color: rgba(18, 60, 110, 0.7) !important;
border-radius: 12px;
padding: 2px 4px;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 0 10px rgba(32, 160, 255, 0.1) !important;
transition: all 0.2s ease;
}
.stat-card:hover {
border-color: rgba(64, 196, 255, 0.5) !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.2) !important;
}
.stat-title {
font-size: 12px;
font-weight: 400;
color: #1f2937;
margin-bottom: 8px;
color: #a0cfff;
margin-bottom: 2px;
display: block;
}
.stat-content {
display: flex;
width: 100%;
align-items: center;
gap: 8px;
flex: 1;
align-items: center;
justify-content: center;
}
:deep(.stat-content .icon) {
flex-shrink: 0;
filter: hue-rotate(180deg) saturate(1.5);
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: #1890ff;
color: #40c4ff;
margin-left: auto;
text-shadow: 0 0 5px rgba(64, 196, 255, 0.3);
}
.right-panel {
@@ -372,6 +380,9 @@ onUnmounted(() => {
min-width: 0;
overflow: hidden !important;
max-height: 100%;
background: rgba(9, 30, 58, 0.5) !important;
border-radius: 20px;
border: 1px solid rgba(32, 160, 255, 0.2) !important;
}
.chart-container {
@@ -379,15 +390,16 @@ onUnmounted(() => {
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 2px;
}
:deep(.left-panel::-webkit-scrollbar) {
width: 4px;
background: transparent;
background: rgba(9, 30, 58, 0.3);
}
:deep(.left-panel::-webkit-scrollbar-thumb) {
background: #d9d9d9;
background: rgba(32, 160, 255, 0.5);
border-radius: 2px;
}
@@ -400,7 +412,7 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
}
.left-panel {
width: 100%;
height: auto !important;
@@ -411,22 +423,16 @@ onUnmounted(() => {
padding-right: 0;
padding-bottom: 4px;
}
.stat-card {
min-width: 120px;
flex: 1;
min-height: 80px;
}
.right-panel {
height: calc(100% - 132px) !important;
min-height: 200px;
}
:deep(.echarts-legend) {
top: auto !important;
bottom: 10px !important;
left: 0 !important;
right: 0 !important;
orient: 'horizontal' !important;
}
}
</style>

309
web-vue/packages/erp/views/erp/green/components/ChartQuarter.vue
View File

@@ -1,13 +1,12 @@
<template>
<Card title="年度各季收支趋势" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度各季趋势" class="quarter-trend-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, watchEffect } from 'vue';
import { Card } from 'ant-design-vue';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { BizItemInfo, bizItemInfoListAll } from '@jeesite/biz/api/biz/itemInfo';
import * as echarts from 'echarts';
@@ -18,10 +17,8 @@ const props = defineProps<{
const rawData = ref<BizItemInfo[]>([]);
const chartDom = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
let resizeTimer: number | null = null; // 修复定时器类型
const { createMessage } = useMessage();
let resizeTimer: number | null = null;
// 格式化数字（保留指定位数小数）
const formatNumber = (num: string | undefined, decimal = 2): number => {
if (!num) return 0;
const parsed = Number(num);
@@ -29,13 +26,11 @@ const formatNumber = (num: string | undefined, decimal = 2): number => {
return Number(parsed.toFixed(decimal));
};
// 转换为万元单位
const toTenThousandYuan = (num: string | undefined): number => {
const rawNum = formatNumber(num);
return formatNumber((rawNum / 10000).toString());
};
// 千分位格式化数字
const formatWithThousandsSeparator = (num: string | number | undefined): string => {
const parsed = Number(num);
if (isNaN(parsed)) return '0.00';
@@ -45,20 +40,17 @@ const formatWithThousandsSeparator = (num: string | number | undefined): string
});
};
// 格式化百分比
const formatPercentage = (num: string | undefined, decimal = 2): string => {
const parsed = formatNumber(num, decimal);
return `${parsed.toFixed(decimal)}%`;
};
// 计算净收益
const calculateNetProfit = (income: string | undefined, expense: string | undefined): number => {
const incomeNum = formatNumber(income);
const expenseNum = formatNumber(expense);
return formatNumber((incomeNum - expenseNum).toString());
};
// 按月份排序
const sortByMonth = (data: BizItemInfo[]): BizItemInfo[] => {
return data.sort((a, b) => {
const monthA = a.xaxis ? parseInt(a.xaxis, 10) : 0;
@@ -67,7 +59,6 @@ const sortByMonth = (data: BizItemInfo[]): BizItemInfo[] => {
});
};
// 计算金额轴的范围
const calculateYAxisExtent = (data: number[]) => {
if (data.length === 0) return [0, 10];
@@ -85,7 +76,6 @@ const calculateYAxisExtent = (data: number[]) => {
return [minExtent, maxExtent];
};
// 计算百分比轴的范围
const calculatePercentYAxisExtent = (data: number[]) => {
if (data.length === 0) return [0, 100];
@@ -101,7 +91,6 @@ const calculatePercentYAxisExtent = (data: number[]) => {
return [0, maxExtent > 0 ? maxExtent : 10];
};
// 获取数据列表
const fetchDataList = async (params?: Record<string, any>) => {
try {
const reqParams = {
@@ -116,34 +105,30 @@ const fetchDataList = async (params?: Record<string, any>) => {
rawData.value = sortByMonth(validData);
} catch (error) {
console.error('获取数据列表失败：', error);
createMessage.error('获取收支趋势数据失败，请稍后重试'); // 增加友好提示
rawData.value = [];
}
};
// 初始化/更新图表（核心优化）
const initChart = () => {
// 确保DOM元素存在
if (!chartDom.value) return;
// 懒初始化图表实例，避免重复销毁创建
if (!myChart) {
myChart = echarts.init(chartDom.value);
}
// 无数据时的配置
if (rawData.value.length === 0) {
myChart.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['收入', '支出', '支出占比'], top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } } },
legend: { data: ['收入', '支出', '支出占比'], top: 10, textStyle: { fontSize: 12, color: '#a0cfff' } },
grid: {
left: 10,
right: 40,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -152,41 +137,46 @@ const initChart = () => {
data: [],
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
lineHeight: 1.2
width: 50,
lineHeight: 1.2,
color: '#a0cfff',
margin: 6
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
}
},
yAxis: [
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(1)}%`
formatter: (value: number) => `${value.toFixed(1)}%`,
color: '#a0cfff'
},
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
position: 'right',
@@ -194,16 +184,15 @@ const initChart = () => {
],
series: [],
noDataLoadingOption: {
text: '暂无收入支出数据',
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
text: '暂无数据',
textStyle: { fontSize: 16, color: '#a0cfff', fontWeight: '500' },
position: 'center',
effect: 'none'
}
}, true); // 强制更新配置
}, true);
return;
}
// 处理图表数据
const xAxisData = rawData.value.map(item => item.xaxis);
const incomeData = rawData.value.map(item => toTenThousandYuan(item.index01));
const expenseData = rawData.value.map(item => toTenThousandYuan(item.index02));
@@ -213,15 +202,16 @@ const initChart = () => {
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
const [percentMin, percentMax] = calculatePercentYAxisExtent(proportionData);
// 标签配置
const barLabelConfig = {
show: true,
position: 'top',
distance: 3,
textStyle: {
fontSize: 10,
color: '#333',
fontWeight: '500'
color: '#40c4ff',
fontWeight: '500',
textShadowColor: 'rgba(0,0,0,0.3)',
textShadowBlur: 1
},
formatter: (params: any) => `${params.value.toFixed(2)}`
};
@@ -233,55 +223,56 @@ const initChart = () => {
textStyle: {
fontSize: 9,
fontWeight: '500',
backgroundColor: 'rgba(255,255,255,0.8)',
backgroundColor: 'rgba(9, 30, 58, 0.8)',
color: '#a0cfff',
padding: [2, 4],
borderRadius: 2
},
formatter: (params: any) => `${params.value.toFixed(1)}%`
};
// 图表主配置
const option = {
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#20a0ff' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any[]) => {
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
if (!params || params.length === 0) return '<div style="padding: 8px; color: #a0cfff;">暂无数据</div>';
const currentQuarter = params[0]?.axisValue || '';
const item = rawData.value.find(i => i.xaxis === currentQuarter);
if (!item) return `<div style="padding: 8px;">${currentQuarter}：暂无明细</div>`;
if (!item) return `<div style="padding: 8px; color: #a0cfff;">${currentQuarter}：暂无明细</div>`;
const netProfit = calculateNetProfit(item.index01, item.index02);
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
const netProfitColor = netProfit > 0 ? '#40c4ff' : netProfit < 0 ? '#ff4d4f' : '#a0cfff';
return `
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentQuarter}</div>
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 8px; text-align: center;">${currentQuarter}</div>
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
<thead>
<tr style="background-color: #f8f8f8;">
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">支出占比</th>
<tr style="background-color: rgba(18, 60, 110, 0.5);">
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总收入</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总支出</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">净收益</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">支出占比</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #722ed1;">${formatPercentage(item.index03)}</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #40c4ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ff4d4f;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ffa066;">${formatPercentage(item.index03)}</td>
</tr>
</tbody>
</table>
@@ -292,12 +283,12 @@ const initChart = () => {
data: ['收入', '支出', '支出占比'],
top: 10,
left: 'center',
textStyle: { fontSize: 11 }
textStyle: { fontSize: 11, color: '#a0cfff' }
},
grid: {
left: 10,
right: 40,
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -306,16 +297,18 @@ const initChart = () => {
data: xAxisData,
axisLabel: {
fontSize: 10,
rotate: 60,
rotate: 45,
overflow: 'truncate',
width: 60,
width: 50,
lineHeight: 1.2,
margin: 8
margin: 6,
color: '#a0cfff'
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
},
boundaryGap: true
},
@@ -323,32 +316,34 @@ const initChart = () => {
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => value.toFixed(2)
formatter: (value: number) => value.toFixed(2),
color: '#a0cfff'
},
min: amountMin,
max: amountMax,
axisLine: { onZero: true },
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
formatter: (value: number) => `${value.toFixed(1)}%`
formatter: (value: number) => `${value.toFixed(1)}%`,
color: '#a0cfff'
},
min: percentMin,
max: percentMax,
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { show: false },
axisTick: { alignWithLabel: true },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: false,
position: 'right',
@@ -357,7 +352,7 @@ const initChart = () => {
],
noDataLoadingOption: {
text: '暂无数据',
textStyle: { fontSize: 14, color: '#999' },
textStyle: { fontSize: 14, color: '#a0cfff' },
effect: 'bubble',
effectOption: { effect: { n: 0 } }
},
@@ -368,10 +363,12 @@ const initChart = () => {
data: incomeData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1890ff' },
{ offset: 0, color: '#40c4ff' },
{ offset: 1, color: '#096dd9' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
barGap: '30%',
@@ -381,9 +378,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#40a9ff' },
{ offset: 1, color: '#1890ff' }
])
{ offset: 0, color: '#69b1ff' },
{ offset: 1, color: '#40c4ff' }
]),
shadowColor: 'rgba(64, 196, 255, 0.5)',
shadowBlur: 5
}
}
},
@@ -393,10 +392,12 @@ const initChart = () => {
data: expenseData,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f5222d' },
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#cf1322' }
]),
borderRadius: [6, 6, 0, 0]
borderRadius: [6, 6, 0, 0],
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
barWidth: 12,
label: barLabelConfig,
@@ -404,9 +405,11 @@ const initChart = () => {
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ff4d4f' },
{ offset: 1, color: '#f5222d' }
])
{ offset: 0, color: '#ff7875' },
{ offset: 1, color: '#ff4d4f' }
]),
shadowColor: 'rgba(255, 77, 79, 0.5)',
shadowBlur: 5
}
}
},
@@ -420,12 +423,12 @@ const initChart = () => {
smooth: true,
lineStyle: {
width: 1,
color: '#722ed1',
color: '#ffa066',
type: 'solid'
},
itemStyle: {
color: '#722ed1',
borderColor: '#fff',
color: '#ffa066',
borderColor: 'rgba(9, 30, 58, 0.8)',
borderWidth: 1
},
label: lineLabelConfig,
@@ -441,11 +444,9 @@ const initChart = () => {
animationEasingUpdate: 'quinticInOut'
};
// 关键：第二个参数设为true，强制更新配置
myChart.setOption(option, true);
};
// 调整图表大小（防抖）
const resizeChart = () => {
if (myChart) {
myChart.resize({
@@ -462,7 +463,6 @@ const debounceResize = () => {
resizeTimer = window.setTimeout(resizeChart, 100);
};
// 监听formParams变化，自动重新获取数据
watch(
() => props.formParams,
(newParams) => {
@@ -473,27 +473,20 @@ watch(
{ deep: true, immediate: true }
);
// 监听数据/DOM变化，自动更新图表（更高效）
watchEffect(() => {
if (rawData.value || chartDom.value) {
initChart();
}
});
// 生命周期管理
onMounted(() => {
// 初始加载数据
fetchDataList(props.formParams);
// 监听窗口大小变化
window.addEventListener('resize', debounceResize);
});
onUnmounted(() => {
// 清理定时器，防止内存泄漏
if (resizeTimer) clearTimeout(resizeTimer);
// 移除事件监听
window.removeEventListener('resize', debounceResize);
// 销毁图表实例
if (myChart) {
myChart.dispose();
myChart = null;
@@ -502,71 +495,59 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
.quarter-trend-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card:hover) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
background: rgba(9, 30, 58, 0.95) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
max-width: 450px;
font-family: 'Microsoft YaHei', sans-serif;
}
@@ -579,19 +560,23 @@ onUnmounted(() => {
:deep(.echarts-xaxis-label) {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.2;
color: #a0cfff !important;
}
:deep(.echarts-yaxis-name) {
margin-right: 3px;
color: #a0cfff !important;
}
:deep(.echarts-legend-item) {
margin-right: 12px !important;
color: #a0cfff !important;
}
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
white-space: nowrap;
color: #40c4ff !important;
}
:deep(.echarts-tooltip::-webkit-scrollbar) {
@@ -600,12 +585,18 @@ onUnmounted(() => {
}
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
background: #d9d9d9;
background: rgba(32, 160, 255, 0.5);
border-radius: 3px;
}
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
background: #f5f5f5;
background: rgba(9, 30, 58, 0.5);
border-radius: 3px;
}
.status-filter-container,
.status-filter,
.status-item {
display: none !important;
}
</style>

254
web-vue/packages/erp/views/erp/green/components/ChartRank.vue
View File

@@ -1,6 +1,6 @@
<template>
<Card title="年度支出排名及占比" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: calc(100% - 40px);"></div>
<Card title="年度支出排名及占比" class="expense-ranking-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
@@ -19,24 +19,20 @@ const chartDom = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let resizeTimer: number | null = null;
// 格式化数字
const formatNumber = (num: string | undefined): number => {
if (!num) return 0;
const parsed = Number(num);
return isNaN(parsed) ? 0 : parsed;
};
// 格式化金额显示
const formatMoney = (num: number): string => {
return num.toLocaleString('zh-CN');
};
// 转换为万元单位
const toTenThousandYuan = (num: number): number => {
return Number((num / 10000).toFixed(2));
};
// 按序号排序
const sortBySeq = (data: BizItemInfo[]): BizItemInfo[] => {
return data.sort((a, b) => {
const seqA = a.seq ? parseInt(a.seq, 10) : 999;
@@ -45,7 +41,6 @@ const sortBySeq = (data: BizItemInfo[]): BizItemInfo[] => {
});
};
// 获取数据列表
const fetchDataList = async (params?: Record<string, any>) => {
try {
const reqParams = {
@@ -62,86 +57,77 @@ const fetchDataList = async (params?: Record<string, any>) => {
}
};
// 获取排名对应的渐变颜色
const getRankColorGradient = (rank: number) => {
if (rank === 1) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ff4d4f' },
{ offset: 0.5, color: '#ff7875' },
{ offset: 1, color: '#ff8c8c' }
]);
} else if (rank === 2) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ffa940' },
{ offset: 0.5, color: '#ffc069' },
{ offset: 1, color: '#ffd08f' }
]);
} else if (rank === 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ffec3d' },
{ offset: 0.5, color: '#fff566' },
{ offset: 1, color: '#fff98f' }
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#40a9ff' },
{ offset: 0.5, color: '#69c0ff' },
{ offset: 1, color: '#91d5ff' }
]);
}
};
const getRankEmphasisColor = (rank: number) => {
if (rank === 1) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f5222d' },
{ offset: 0.5, color: '#ff4d4f' },
{ offset: 1, color: '#ff7875' }
{ offset: 1, color: '#ff4d4f' }
]);
} else if (rank === 2) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#fa8c16' },
{ offset: 0.5, color: '#ffa940' },
{ offset: 1, color: '#ffc069' }
{ offset: 1, color: '#ffa940' }
]);
} else if (rank === 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#fadb14' },
{ offset: 0.5, color: '#ffec3d' },
{ offset: 1, color: '#fff566' }
{ offset: 1, color: '#ffec3d' }
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#1890ff' },
{ offset: 0.5, color: '#40a9ff' },
{ offset: 1, color: '#69c0ff' }
{ offset: 1, color: '#40a9ff' }
]);
}
};
// 获取hover时的强调色
const getRankEmphasisColor = (rank: number) => {
if (rank === 1) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#cf1322' },
{ offset: 1, color: '#f5222d' }
]);
} else if (rank === 2) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#d46b08' },
{ offset: 1, color: '#fa8c16' }
]);
} else if (rank === 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#d4b106' },
{ offset: 1, color: '#fadb14' }
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#096dd9' },
{ offset: 1, color: '#1890ff' }
]);
}
};
// 初始化/更新图表
const initChart = () => {
// 确保DOM元素存在
if (!chartDom.value) return;
// 初始化图表实例（避免重复创建）
if (!chartInstance) {
chartInstance = echarts.init(chartDom.value);
}
// 无数据时显示提示
if (rawData.value.length === 0) {
chartInstance.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
top: '50%',
text: '暂无排名数据',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'axis' },
padding: [2, 2, 2, 2]
}, true); // 第二个参数设为true，强制更新
}, true);
return;
}
// 处理图表数据
const categories = rawData.value.map(item => item.xaxis || '').reverse();
const rawAmountData = rawData.value.map(item => formatNumber(item.index01)).reverse();
const amountData = rawAmountData.map(num => toTenThousandYuan(num));
@@ -151,46 +137,45 @@ const initChart = () => {
}).reverse();
const rankData = rawData.value.map(item => parseInt(item.seq || '0', 10)).reverse();
// 图表配置项
const option = {
padding: [2, 2, 2, 2],
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
axisPointer: { type: 'shadow', lineStyle: { color: '#40c4ff' } },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any) => {
const index = params[0].dataIndex;
return `
<div style="font-weight: 600; color: #333; margin-bottom: 8px;">${categories[index]}</div>
<div style="color: #666; margin-bottom: 4px;">排名：${rankData[index]}名</div>
<div style="color: #666; margin-bottom: 4px;">支出：${formatMoney(rawAmountData[index])} 元</div>
<div style="color: #666;">占比：${ratioData[index]}%</div>
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 8px;">${categories[index]}</div>
<div style="color: #a0cfff; margin-bottom: 4px;">排名：${rankData[index]}名</div>
<div style="color: #a0cfff; margin-bottom: 4px;">支出：${formatMoney(rawAmountData[index])} 元</div>
<div style="color: #a0cfff;">占比：${ratioData[index]}%</div>
`;
}
},
grid: {
left: '2%',
right: '18%',
top: '2%',
bottom: '2%',
left: 10,
right: 120,
top: 10,
bottom: 12,
containLabel: true
},
xAxis: [
{
type: 'value',
name: '支出金额 (万元)',
nameTextStyle: { fontSize: 11, color: '#666' },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
color: '#666',
color: '#a0cfff',
formatter: (value: number) => value.toFixed(1)
},
axisLine: { lineStyle: { color: '#e8e8e8' } },
splitLine: { lineStyle: { color: '#f5f5f5' } }
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } }
}
],
yAxis: [
@@ -199,7 +184,7 @@ const initChart = () => {
data: categories,
axisLabel: {
fontSize: 11,
color: '#333',
color: '#a0cfff',
formatter: (name: string, index: number) => {
const shortName = name.length > 8 ? `${name.substring(0, 8)}...` : name;
return `${rankData[index]} ${shortName}`;
@@ -209,7 +194,7 @@ const initChart = () => {
axisTick: { show: false },
splitLine: {
lineStyle: {
color: ['#fafafa', '#fff'],
color: 'rgba(32, 160, 255, 0.1)',
type: 'solid'
}
}
@@ -223,29 +208,33 @@ const initChart = () => {
barWidth: 12,
itemStyle: {
borderRadius: [0, 4, 4, 0],
color: (params: any) => getRankColorGradient(rankData[params.dataIndex])
color: (params: any) => getRankColorGradient(rankData[params.dataIndex]),
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: 0.5
},
label: {
show: true,
position: 'right',
fontSize: 10,
color: '#666',
formatter: (params: any) => `${params.data}万元 (${ratioData[params.dataIndex]}%)`
color: '#40c4ff',
formatter: (params: any) => `${params.data}万元 (${ratioData[params.dataIndex]}%)`,
textShadowColor: 'rgba(0,0,0,0.3)',
textShadowBlur: 1
},
emphasis: {
itemStyle: {
color: (params: any) => getRankEmphasisColor(rankData[params.dataIndex])
color: (params: any) => getRankEmphasisColor(rankData[params.dataIndex]),
shadowColor: 'rgba(255,255,255,0.2)',
shadowBlur: 5
}
}
}
]
};
// 设置配置项，强制更新（关键：第二个参数为true）
chartInstance.setOption(option, true);
};
// 防抖调整图表大小
const resizeChart = () => {
if (chartInstance) {
chartInstance.resize({
@@ -262,7 +251,6 @@ const debounceResize = () => {
resizeTimer = window.setTimeout(resizeChart, 100);
};
// 监听formParams变化，重新获取数据
watch(
() => props.formParams,
(newParams) => {
@@ -273,28 +261,20 @@ watch(
{ deep: true, immediate: true }
);
// 监听数据变化，更新图表（使用watchEffect更高效）
watchEffect(() => {
// 当rawData或chartDom变化时，重新初始化图表
if (rawData.value || chartDom.value) {
initChart();
}
});
// 生命周期
onMounted(() => {
// 初始加载数据
fetchDataList(props.formParams);
// 监听窗口大小变化
window.addEventListener('resize', debounceResize);
});
onUnmounted(() => {
// 清理定时器
if (resizeTimer) clearTimeout(resizeTimer);
// 移除事件监听
window.removeEventListener('resize', debounceResize);
// 销毁图表实例
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
@@ -303,78 +283,66 @@ onUnmounted(() => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 0 !important;
.expense-ranking-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
height: 100%;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
margin: 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 16px !important;
height: 100%;
padding: 0 !important;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
background: rgba(9, 30, 58, 0.95) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
}
:deep(.echarts-bar) {
border-radius: 4px;
}
:deep(.echarts-axis-line) {
stroke: #e8e8e8;
stroke: rgba(32, 160, 255, 0.3) !important;
}
:deep(.echarts-text) {
fill: #666;
fill: #a0cfff !important;
}
</style>

262
web-vue/packages/erp/views/erp/green/components/ChartYear.vue
View File

@@ -1,20 +1,18 @@
<template>
<Card title="年度收支趋势及占比" style="width: 100%; height: 100%;">
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
<Card title="年度趋势及占比" class="income-expense-trend-card">
<div ref="chartDom" class="chart-container"></div>
</Card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { BizItemInfo, bizItemInfoListAll } from '@jeesite/biz/api/biz/itemInfo';
import * as echarts from 'echarts';
const rawData = ref<BizItemInfo[]>([]);
const chartDom = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
const { createMessage } = useMessage();
const formatNumber = (num: string | undefined, decimal = 2): number => {
if (!num) return 0;
@@ -37,7 +35,6 @@ const formatWithThousandsSeparator = (num: string | number | undefined): string
});
};
// 新增：格式化百分比数据
const formatPercentage = (num: string | undefined, decimal = 2): string => {
const parsed = formatNumber(num, decimal);
return `${parsed.toFixed(decimal)}%`;
@@ -80,20 +77,17 @@ const calculateYAxisExtent = (data: number[]) => {
return [minExtent, maxExtent];
};
// 新增：计算百分比Y轴范围
const calculatePercentYAxisExtent = (data: number[]) => {
if (data.length === 0) return [0, 100];
const min = Math.min(...data);
const max = Math.max(...data);
// 百分比数据的padding调整为5%
const padding = Math.max(Math.abs(max - min) * 0.1, 5);
let minExtent = Math.floor(min - padding);
let maxExtent = Math.ceil(max + padding);
// 确保最小值不小于0（百分比通常非负）
if (minExtent < 0) minExtent = 0;
return [minExtent, maxExtent];
@@ -129,17 +123,17 @@ const initChart = () => {
if (rawData.value.length === 0) {
myChart.setOption({
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
// 移除环比，只保留收入、支出、占比
legend: { data: ['收入', '支出', '占比'], top: 10, textStyle: { fontSize: 12 } },
legend: { data: ['收入', '支出', '占比'], top: 10, textStyle: { fontSize: 12, color: '#a0cfff' } },
grid: {
left: 10,
right: 40, // 增加右侧边距给百分比Y轴
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -148,51 +142,58 @@ const initChart = () => {
data: [],
axisLabel: {
fontSize: 10,
rotate: 60,
color: '#a0cfff',
rotate: 45,
overflow: 'truncate',
width: 60,
lineHeight: 1.2
width: 50,
lineHeight: 1.2,
margin: 6
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
}
},
yAxis: [
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
color: '#a0cfff',
formatter: (value: number) => value.toFixed(2)
},
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
color: '#a0cfff',
formatter: (value: number) => `${value.toFixed(1)}%`
},
splitLine: { show: false }, // 不显示百分比轴的分割线
axisTick: { alignWithLabel: true },
splitLine: { show: false },
axisLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true,
position: 'right', // 百分比轴显示在右侧
max: 100 // 百分比最大100
position: 'right',
max: 100
}
],
series: [],
noDataLoadingOption: {
text: '暂无收入支出数据',
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
textStyle: { fontSize: 16, color: '#a0cfff', fontWeight: '500' },
position: 'center',
effect: 'none'
}
@@ -203,12 +204,10 @@ const initChart = () => {
const xAxisData = rawData.value.map(item => formatYear(item.xaxis));
const incomeData = rawData.value.map(item => toTenThousandYuan(item.index01));
const expenseData = rawData.value.map(item => toTenThousandYuan(item.index02));
// 移除环比数据，只保留占比数据
const proportionData = rawData.value.map(item => formatNumber(item.index04));
const amountData = [...incomeData, ...expenseData];
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
// 只计算占比的百分比轴范围
const [percentMin, percentMax] = calculatePercentYAxisExtent(proportionData);
const barLabelConfig = {
@@ -217,13 +216,12 @@ const initChart = () => {
distance: 3,
textStyle: {
fontSize: 10,
color: '#333',
color: '#40c4ff',
fontWeight: '500'
},
formatter: (params: any) => `${params.value.toFixed(2)}`
};
// 新增：折线图标签配置
const lineLabelConfig = {
show: true,
position: 'top',
@@ -231,7 +229,8 @@ const initChart = () => {
textStyle: {
fontSize: 9,
fontWeight: '500',
backgroundColor: 'rgba(255,255,255,0.8)',
backgroundColor: 'rgba(9, 30, 58, 0.8)',
color: '#40c4ff',
padding: [2, 4],
borderRadius: 2
},
@@ -239,46 +238,47 @@ const initChart = () => {
};
const option = {
backgroundColor: 'transparent',
title: {
left: 'center',
textStyle: { fontSize: 18, color: '#333' }
textStyle: { fontSize: 18, color: '#a0cfff' }
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
axisPointer: { type: 'shadow', lineStyle: { color: 'rgba(32, 160, 255, 0.5)' } },
textStyle: { fontSize: 12, color: '#fff' },
padding: 12,
backgroundColor: '#fff',
borderColor: '#e8e8e8',
backgroundColor: 'rgba(9, 30, 58, 0.95)',
borderColor: 'rgba(32, 160, 255, 0.3)',
borderWidth: 1,
formatter: (params: any[]) => {
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
if (!params || params.length === 0) return '<div style="padding: 8px; color: #fff;">暂无数据</div>';
const currentMonth = params[0]?.axisValue || '';
const item = rawData.value.find(i => formatYear(i.xaxis) === currentMonth);
if (!item) return `<div style="padding: 8px;">${currentMonth}：暂无明细</div>`;
if (!item) return `<div style="padding: 8px; color: #fff;">${currentMonth}：暂无明细</div>`;
const netProfit = calculateNetProfit(item.index01, item.index02);
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#a0cfff';
return `
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentMonth}</div>
<div style="font-weight: 600; color: #40c4ff; margin-bottom: 8px; text-align: center;">${currentMonth}</div>
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
<thead>
<tr style="background-color: #f8f8f8;">
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">占比</th>
<tr style="background-color: rgba(18, 60, 110, 0.7);">
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总收入</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">总支出</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">净收益</th>
<th style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; font-weight: 600; color: #a0cfff;">占比</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #722ed1;">${formatPercentage(item.index04)}</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #40c4ff;">${formatWithThousandsSeparator(item.index01)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #ff6b6b;">${formatWithThousandsSeparator(item.index02)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
<td style="padding: 8px; border: 1px solid rgba(32, 160, 255, 0.3); text-align: center; color: #c4b5fd;">${formatPercentage(item.index04)}</td>
</tr>
</tbody>
</table>
@@ -286,16 +286,15 @@ const initChart = () => {
}
},
legend: {
// 移除环比，只保留收入、支出、占比
data: ['收入', '支出', '占比'],
top: 10,
left: 'center',
textStyle: { fontSize: 11 }
textStyle: { fontSize: 11, color: '#a0cfff' }
},
grid: {
left: 10,
right: 40, // 增加右侧边距给百分比Y轴
bottom: 60,
right: 20,
bottom: 12,
top: 40,
containLabel: true
},
@@ -304,16 +303,18 @@ const initChart = () => {
data: xAxisData,
axisLabel: {
fontSize: 10,
rotate: 60,
color: '#a0cfff',
rotate: 45,
overflow: 'truncate',
width: 60,
width: 50,
lineHeight: 1.2,
margin: 8
margin: 6
},
axisLine: { onZero: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
axisTick: {
alignWithLabel: true,
length: 3
length: 3,
lineStyle: { color: 'rgba(32, 160, 255, 0.3)' }
},
boundaryGap: true
},
@@ -321,40 +322,42 @@ const initChart = () => {
{
type: 'value',
name: '金额（万元）',
nameTextStyle: { fontSize: 11 },
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
color: '#a0cfff',
formatter: (value: number) => value.toFixed(2)
},
min: amountMin,
max: amountMax,
axisLine: { onZero: true },
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(32, 160, 255, 0.1)' } },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true
},
{
type: 'value',
name: '百分比（%）',
nameTextStyle: { fontSize: 11 },
name: '%',
nameTextStyle: { fontSize: 11, color: '#a0cfff' },
axisLabel: {
fontSize: 10,
color: '#a0cfff',
formatter: (value: number) => `${value.toFixed(1)}%`
},
min: percentMin,
max: percentMax,
axisLine: { onZero: true },
splitLine: { show: false }, // 不显示百分比轴的分割线
axisTick: { alignWithLabel: true },
axisLine: { onZero: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitLine: { show: false },
axisTick: { alignWithLabel: true, lineStyle: { color: 'rgba(32, 160, 255, 0.3)' } },
splitNumber: 5,
scale: true,
position: 'right', // 百分比轴显示在右侧
position: 'right',
}
],
noDataLoadingOption: {
text: '暂无数据',
textStyle: { fontSize: 14, color: '#999' },
textStyle: { fontSize: 14, color: '#a0cfff' },
effect: 'bubble',
effectOption: { effect: { n: 0 } }
},
@@ -407,23 +410,22 @@ const initChart = () => {
}
}
},
// 只保留占比曲线，移除环比曲线
{
name: '占比',
type: 'line',
data: proportionData,
yAxisIndex: 1, // 使用右侧的百分比Y轴
yAxisIndex: 1,
symbol: 'circle',
symbolSize: 6,
smooth: true, // 平滑曲线
smooth: true,
lineStyle: {
width: 1,
color: '#722ed1', // 紫色
color: '#722ed1',
type: 'solid'
},
itemStyle: {
color: '#722ed1',
borderColor: '#fff',
borderColor: 'rgba(32, 160, 255, 0.5)',
borderWidth: 1
},
label: lineLabelConfig,
@@ -478,73 +480,59 @@ watch(rawData, () => {
</script>
<style scoped>
.status-filter-container {
display: flex;
align-items: center;
gap: 16px;
}
.status-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}
.status-item {
cursor: pointer;
color: #666;
position: relative;
padding-bottom: 2px;
transition: all 0.2s ease;
user-select: none;
}
.status-item.active {
color: #1890ff;
font-weight: 500;
}
.status-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
border-radius: 1px;
}
.status-item:not(.active):hover {
color: #40a9ff;
}
:deep(.ant-card) {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
padding: 0 !important;
.income-expense-trend-card {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
border-radius: 4px !important;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.1) !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(9, 30, 58, 0.8) !important;
border: 1px solid rgba(32, 160, 255, 0.3) !important;
}
:deep(.ant-card:hover) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
:deep(.ant-card-head) {
padding: 0 16px !important;
border-bottom: 1px solid rgba(32, 160, 255, 0.2) !important;
height: 56px !important;
line-height: 56px !important;
background: rgba(18, 60, 110, 0.7) !important;
border-radius: 8px 8px 0 0 !important;
}
:deep(.ant-card-head-title) {
color: #20a0ff !important;
font-weight: 600 !important;
text-shadow: 0 0 5px rgba(32, 160, 255, 0.2) !important;
}
:deep(.ant-card-body) {
padding: 0 !important;
height: 100%;
margin: 0 !important;
height: calc(100% - 56px) !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: transparent !important;
}
.chart-container {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
padding: 0 8px;
}
:deep(.echarts-tooltip) {
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8 !important;
max-width: 500px; /* 加宽tooltip以容纳新增列 */
border: 1px solid rgba(32, 160, 255, 0.3) !important;
max-width: 500px;
font-family: 'Microsoft YaHei', sans-serif;
background-color: rgba(9, 30, 58, 0.95) !important;
box-shadow: none !important;
}
:deep(.echarts-tooltip table) {
@@ -555,19 +543,23 @@ watch(rawData, () => {
:deep(.echarts-xaxis-label) {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.2;
color: #a0cfff !important;
}
:deep(.echarts-yaxis-name) {
margin-right: 3px;
color: #a0cfff !important;
}
:deep(.echarts-legend-item) {
margin-right: 12px !important;
color: #a0cfff !important;
}
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
white-space: nowrap;
color: #40c4ff !important;
}
:deep(.echarts-tooltip::-webkit-scrollbar) {
@@ -576,12 +568,18 @@ watch(rawData, () => {
}
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
background: #d9d9d9;
background: rgba(32, 160, 255, 0.5);
border-radius: 3px;
}
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
background: #f5f5f5;
background: rgba(9, 30, 58, 0.5);
border-radius: 3px;
}
.status-filter-container,
.status-filter,
.status-item {
display: none !important;
}
</style>