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

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

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