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,70 @@
<template>
<section class="wel-sec">
<div class="wel-sec__head">
<span class="wel-sec__title">项目情况</span>
<wel-filters condition-label="项目状态" />
</div>
<el-row :gutter="16">
<el-col :xs="24" :md="12">
<rank-panel
title="项目收入 TOP5"
unit="万元"
color="#8b5cf6"
:items="incomeItems"
height="280px"
:name-width="180"
class="project-panel"
/>
</el-col>
<el-col :xs="24" :md="12">
<rank-panel
title="项目运量 TOP5"
unit="万吨"
color="#2bb3a3"
:items="volumeItems"
height="280px"
:name-width="180"
class="project-panel"
/>
</el-col>
</el-row>
</section>
</template>
<script>
import RankPanel from './rank-panel.vue';
import WelFilters from './wel-filters.vue';
export default {
name: 'section-project',
components: { RankPanel, WelFilters },
data() {
return {
// Mock:项目排行数据,对接统计接口后替换
incomeItems: [
{ name: '广西华谊氯碱化工物流项目', value: 1285.6 },
{ name: '柳钢集团钢材外运项目(二期)', value: 982.4 },
{ name: '南宁轨道交通建材配送项目', value: 756.3 },
{ name: '北部湾港集装箱短驳项目', value: 621.7 },
{ name: '中粮集团粮食储备调运项目', value: 468.2 },
],
volumeItems: [
{ name: '广西华谊氯碱化工物流项目', value: 32.5 },
{ name: '柳钢集团钢材外运项目(二期)', value: 26.8 },
{ name: '南宁轨道交通建材配送项目', value: 21.4 },
{ name: '北部湾港集装箱短驳项目', value: 18.6 },
{ name: '中粮集团粮食储备调运项目', value: 15.2 },
],
};
},
};
</script>
<style lang="scss" scoped>
@import '../dashboard.scss';
.project-panel {
margin-bottom: 16px;
}
</style>