refactor(wel): 重构欢迎页为模块化组件
- 将欢迎页整体结构拆分为多个功能区组件,提高代码可维护性 - 移除原有欢迎横幅、指标卡、图表区、下方区及快捷入口的静态实现 - 引入并注册 SectionKpi、SectionStructure、SectionBusiness 等八个子组件 - 删除冗余样式,更新整体背景和布局样式 - 精简模板内容,仅保留子组件渲染及页脚版权信息 - 移除无用的响应式数据、计算属性及方法 - 包含依赖包 echarts 的新增,支持后续图表功能开发
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<section class="wel-sec">
|
||||
<div class="wel-sec__head">
|
||||
<span class="wel-sec__title">财务情况</span>
|
||||
<wel-filters condition-label="核算口径" />
|
||||
</div>
|
||||
|
||||
<div class="wel-card finance-panel">
|
||||
<div class="panel-title">
|
||||
营业收支对比
|
||||
<span class="panel-title__unit">万元</span>
|
||||
</div>
|
||||
<wel-chart :option="barOpt" height="300px" />
|
||||
</div>
|
||||
|
||||
<div class="wel-card finance-panel">
|
||||
<div class="panel-title">
|
||||
主营业务收入/费用趋势
|
||||
<span class="panel-title__unit">万元</span>
|
||||
</div>
|
||||
<wel-chart :option="lineOpt" height="280px" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WelChart from './wel-chart.vue';
|
||||
import WelFilters from './wel-filters.vue';
|
||||
import { groupBarOption, lineAreaOption } from '../chart-options';
|
||||
|
||||
export default {
|
||||
name: 'section-finance',
|
||||
components: { WelChart, WelFilters },
|
||||
data() {
|
||||
const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
|
||||
return {
|
||||
months,
|
||||
// Mock:财务收支数据,对接统计接口后替换
|
||||
incomeData: [2860, 1520, 1180, 1150, 980, 920, 760, 720, 690, 520, 380, 260],
|
||||
costData: [2410, 1330, 1010, 980, 850, 800, 660, 630, 610, 470, 340, 230],
|
||||
trendIncome: [1780, 1850, 1810, 1880, 1920, 1950, 1720, 1650, 1830, 1900, 1980, 2060],
|
||||
trendCost: [1520, 1560, 1540, 1590, 1610, 1620, 1450, 1400, 1530, 1580, 1640, 1700],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
barOpt() {
|
||||
return groupBarOption(this.months, [
|
||||
{ name: '收入', data: this.incomeData, color: '#4a90e2' },
|
||||
{ name: '费用', data: this.costData, color: '#d9dce3' },
|
||||
]);
|
||||
},
|
||||
lineOpt() {
|
||||
return lineAreaOption(this.months, [
|
||||
{ name: '主营业务收入', data: this.trendIncome, color: '#4a90e2' },
|
||||
{ name: '主营业务费用', data: this.trendCost, color: '#2bb3a3' },
|
||||
]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../dashboard.scss';
|
||||
|
||||
.finance-panel {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user