refactor(wel): 重构欢迎页为模块化组件

- 将欢迎页整体结构拆分为多个功能区组件,提高代码可维护性
- 移除原有欢迎横幅、指标卡、图表区、下方区及快捷入口的静态实现
- 引入并注册 SectionKpi、SectionStructure、SectionBusiness 等八个子组件
- 删除冗余样式,更新整体背景和布局样式
- 精简模板内容,仅保留子组件渲染及页脚版权信息
- 移除无用的响应式数据、计算属性及方法
- 包含依赖包 echarts 的新增,支持后续图表功能开发
This commit is contained in:
2026-09-30 17:39:42 +08:00
parent 50c1afe9c8
commit 0b81001ce7
18 changed files with 1479 additions and 824 deletions
@@ -0,0 +1,67 @@
<template>
<section class="wel-sec">
<el-row :gutter="16">
<el-col :xs="24" :md="12">
<div class="wel-card summary-panel">
<div class="panel-title">
车辆耗时占比
<span class="panel-title__unit">按小时</span>
</div>
<wel-chart :option="donutOpt" height="260px" />
</div>
</el-col>
<el-col :xs="24" :md="12">
<div class="wel-card summary-panel">
<div class="panel-title">
单据完成趋势
<span class="panel-title__unit">按周</span>
</div>
<wel-chart :option="lineOpt" height="260px" />
</div>
</el-col>
</el-row>
</section>
</template>
<script>
import WelChart from './wel-chart.vue';
import { donutOption, lineAreaOption } from '../chart-options';
export default {
name: 'section-summary',
components: { WelChart },
data() {
return {
// Mock:车辆耗时与单据完成数据,对接统计接口后替换
timeItems: [
{ name: '在途运输', value: 86.2 },
{ name: '装货等待', value: 32.5 },
{ name: '卸货作业', value: 28.4 },
{ name: '返程空驶', value: 21.6 },
{ name: '场站等待', value: 18.3 },
{ name: '维修保养', value: 9.8 },
],
weeks: ['1周', '2周', '3周', '4周', '5周', '6周', '7周'],
doneData: [520, 545, 508, 532, 560, 548, 572],
};
},
computed: {
donutOpt() {
return donutOption(this.timeItems, { centerTitle: '196.8', centerSub: '总耗时(小时)' });
},
lineOpt() {
return lineAreaOption(this.weeks, [
{ name: '完成单据', data: this.doneData, color: '#1a9e94' },
]);
},
},
};
</script>
<style lang="scss" scoped>
@import '../dashboard.scss';
.summary-panel {
margin-bottom: 16px;
}
</style>