refactor(wel): 重构欢迎页为模块化组件
- 将欢迎页整体结构拆分为多个功能区组件,提高代码可维护性 - 移除原有欢迎横幅、指标卡、图表区、下方区及快捷入口的静态实现 - 引入并注册 SectionKpi、SectionStructure、SectionBusiness 等八个子组件 - 删除冗余样式,更新整体背景和布局样式 - 精简模板内容,仅保留子组件渲染及页脚版权信息 - 移除无用的响应式数据、计算属性及方法 - 包含依赖包 echarts 的新增,支持后续图表功能开发
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div ref="chartEl" class="wel-chart" :style="{ height: height }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'wel-chart',
|
||||
props: {
|
||||
option: { type: Object, required: true },
|
||||
height: { type: String, default: '260px' },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
resizeObserver: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
option: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.render();
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.chart = echarts.init(this.$refs.chartEl);
|
||||
this.render();
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.chart && this.chart.resize();
|
||||
});
|
||||
this.resizeObserver.observe(this.$refs.chartEl);
|
||||
},
|
||||
activated() {
|
||||
/* keep-alive 恢复时重算尺寸 */
|
||||
this.chart && this.chart.resize();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.resizeObserver && this.resizeObserver.disconnect();
|
||||
this.chart && this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
this.chart && this.chart.setOption(this.option, true);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wel-chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user