DeXun/GEAR-OA
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 图表简单调整

Browse Source
This commit is contained in:
砂糖
2025-09-22 14:44:36 +08:00
parent 75bd852c5b
commit 32a7bdfd6c
2 changed files with 106 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
gear-ui3/src/views/finance/dashboard/components/TimeFilter.vue
View File

@@ -201,9 +201,9 @@ const handleQuery = () => {
// 重置按钮点击
const handleReset = () => {
timeGranularity.value = '';
startDate.value = '';
endDate.value = '';
timeGranularity.value = 'week';
startDate.value = new Date().toISOString().split('T')[0] + ' 00:00:00';
calculateEndDate();
emit('reset');
};
@@ -219,7 +219,7 @@ watch(timeGranularity, (newVal) => {
// 初始时间设置为今天，触发一次qeury
onMounted(() => {
startDate.value = new Date().toISOString().split('T')[0] + ' 00:00:00';
handleReset();
handleQuery();
});
</script>

146
gear-ui3/src/views/finance/dashboard/index.vue
View File

@@ -3,11 +3,7 @@
<el-row :gutter="20" class="content-container">
<!-- 1. 时间选择区 - 使用封装的组件 -->
<el-col :span="24" class="time-filter">
<TimeFilter
@query="fetchData"
@reset="handleFilterReset"
@dateChange="handleDateChange"
/>
<TimeFilter @query="fetchData" @reset="handleFilterReset" @dateChange="handleDateChange" />
</el-col>
<!-- 2. 指标卡区域 -->
@@ -36,7 +32,7 @@
<el-col :span="6">
<el-card class="indicator-card net-cashflow">
<div class="card-header">
<span>净现金流</span>
<span>净收益</span>
<i class="el-icon-refresh"></i>
</div>
<div class="card-value">{{ netCashflow | formatCurrency }}</div>
@@ -60,7 +56,7 @@
<el-col :span="24" class="charts-container">
<!-- 收入支出趋势图 -->
<el-row :gutter="20" class="chart-row">
<el-col :span="24">
<el-col :span="12">
<el-card class="chart-card">
<div slot="header" class="chart-header">
<span>收入支出趋势</span>
@@ -70,6 +66,16 @@
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="chart-card">
<div slot="header" class="chart-header">
<span>按供应商区分的支出</span>
</div>
<div class="chart-content">
<div ref="supplierChart" class="chart-wrapper"></div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 按订单和客户/供应商分析 -->
@@ -95,19 +101,6 @@
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" class="chart-row">
<el-col :span="24">
<el-card class="chart-card">
<div slot="header" class="chart-header">
<span>按供应商区分的支出</span>
</div>
<div class="chart-content">
<div ref="supplierChart" class="chart-wrapper"></div>
</div>
</el-card>
</el-col>
</el-row>
</el-col>
<!-- 4. 回款（应收未收）任务信息表格 -->
@@ -116,80 +109,25 @@
<div slot="header" class="table-header">
<span>回款（应收未收）任务信息</span>
</div>
<el-table
:data="receivableTasks"
border
style="width: 100%"
v-loading="tableLoading"
>
<el-table-column
prop="receivableId"
label="应收ID"
width="180"
align="center"
></el-table-column>
<el-table-column
prop="customerName"
label="客户名称"
width="150"
align="center"
></el-table-column>
<el-table-column
prop="orderId"
label="订单ID"
width="180"
align="center"
></el-table-column>
<el-table-column
prop="dueDate"
label="到期日期"
width="150"
align="center"
></el-table-column>
<el-table-column
prop="amount"
label="总金额"
width="120"
align="center"
:formatter="formatCurrency"
></el-table-column>
<el-table-column
prop="paidAmount"
label="已付金额"
width="120"
align="center"
:formatter="formatCurrency"
></el-table-column>
<el-table-column
prop="balanceAmount"
label="未付金额"
width="120"
align="center"
:formatter="formatCurrency"
></el-table-column>
<el-table-column
prop="status"
label="状态"
width="100"
align="center"
></el-table-column>
<el-table-column
prop="remark"
label="备注"
align="center"
></el-table-column>
<el-table :data="receivableTasks" border style="width: 100%" v-loading="tableLoading">
<el-table-column prop="receivableId" label="应收ID" width="180" align="center"></el-table-column>
<el-table-column prop="customerName" label="客户名称" width="150" align="center"></el-table-column>
<el-table-column prop="orderId" label="订单ID" width="180" align="center"></el-table-column>
<el-table-column prop="dueDate" label="到期日期" width="150" align="center"></el-table-column>
<el-table-column prop="amount" label="总金额" width="120" align="center"
:formatter="formatCurrency"></el-table-column>
<el-table-column prop="paidAmount" label="已付金额" width="120" align="center"
:formatter="formatCurrency"></el-table-column>
<el-table-column prop="balanceAmount" label="未付金额" width="120" align="center"
:formatter="formatCurrency"></el-table-column>
<el-table-column prop="status" label="状态" width="100" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="receivableTotal"
></el-pagination>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="receivableTotal"></el-pagination>
</div>
</el-card>
</el-col>
@@ -719,7 +657,7 @@ const handleFilterReset = () => {
}
.page-header {
margin-bottom: 20px;
margin-bottom: 10px;
h1 {
font-size: 24px;
@@ -735,15 +673,15 @@ const handleFilterReset = () => {
.content-container {
.time-filter {
margin-bottom: 20px;
margin-bottom: 10px;
}
.indicator-cards {
margin-bottom: 20px;
margin-bottom: 10px;
.indicator-card {
height: 100%;
padding: 15px;
padding: 5px;
position: relative;
overflow: hidden;
@@ -751,12 +689,12 @@ const handleFilterReset = () => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
margin-bottom: 5px;
color: #8392a5;
font-size: 14px;
i {
font-size: 16px;
font-size: 12px;
}
}
@@ -818,10 +756,10 @@ const handleFilterReset = () => {
}
.charts-container {
margin-bottom: 20px;
margin-bottom: 10px;
.chart-row {
margin-bottom: 20px;
margin-bottom: 10px;
}
.chart-card {
@@ -831,12 +769,12 @@ const handleFilterReset = () => {
font-size: 16px;
font-weight: 500;
color: #1f2d3d;
padding: 15px 20px;
padding: 5px 10px;
border-bottom: 1px solid #eee;
}
.chart-content {
padding: 20px;
padding: 10px;
}
.chart-wrapper {
@@ -851,7 +789,7 @@ const handleFilterReset = () => {
font-size: 16px;
font-weight: 500;
color: #1f2d3d;
padding: 15px 20px;
padding: 5px 10px;
border-bottom: 1px solid #eee;
}
@@ -874,7 +812,9 @@ const handleFilterReset = () => {
@media (max-width: 992px) {
.indicator-cards {
.el-col {
&:nth-child(1), &:nth-child(2) {
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 20px;
}
}