PensionLens

养老保险数据可视化大屏系统

A comprehensive data visualization platform for old-age insurance

Version: 0.4.1

📖 项目简介

PensionLens 是一个专注于养老保险数据可视化的前端应用系统。该项目旨在通过直观的图表和交互式界面，展示养老保险相关的宏观数据、政策信息和区域差异，为决策者提供数据支持。

⚠️注意：本项目为演示版本，数据均为随机模拟生成，不具有实际参考价值，对任何因使用本项目数据而产生的后果概不负责。

应用场景

• 数据监控中心: 大屏展示养老保险关键指标
• 政策研究: 可视化分析政策影响和趋势
• 区域对比: 不同地区养老保险数据对比分析
• 参数测算: 养老保险参数调整和影响评估

---

🌟 功能特性

核心功能模块

1. 首页展示 (/home)

• 项目介绍和功能导航
• 精美的翻转卡片效果展示特色功能
• 响应式布局设计

2. 全国概况 (/nation)

• 全国养老保险宏观数据可视化
• 多维度数据展示（参保人数、基金收支等）
• 趋势分析和预测图表

3. 政策资讯 (/policy)

• 养老政策知识图谱可视化
• 政策词云热点分析
• 热门政策报告展示

4. 区域信息 (/regin)

• 广东省区域数据大屏展示
• 地图可视化呈现区域差异
• 各城市数据对比分析

5. 参数调配 (/modify)

• 养老保险参数实时测算
• 参数调整影响评估
• 测算结果导出功能

技术特性

• ✅ 响应式设计: 适配多种屏幕尺寸，专为数据大屏优化
• ✅ 丰富的图表: 支持柱状图、折线图、饼图、雷达图、词云等多种图表
• ✅ 交互式体验: 数据筛选、参数调整、图表联动等交互功能
• ✅ 性能优化: 图表懒加载、数据缓存、组件复用
• ✅ 模块化架构: 清晰的代码结构，易于维护和扩展

---

🛠 主要技术栈

前端框架

• Vue.js 2.7.14 - 渐进式 JavaScript 框架
• Vue Router 3.6.5 - 官方路由管理器
• Vuex 3.6.2 - 状态管理模式
• Element UI 2.15.14 - 基于 Vue 的组件库

可视化库

• ECharts 5.5.0 - 强大的数据可视化图表库
• AnyChart 8.12.0 - 高级图表解决方案（词云等）

构建工具

• Vue CLI 5.0 - 标准化开发工具
• Webpack - 模块打包器（通过 Vue CLI 集成）
• Babel - JavaScript 编译器
• Sass - CSS 预处理器

开发工具

• ESLint - 代码质量检查工具
• Axios - HTTP 客户端
• Express - 静态文件服务器

---

📁 项目结构

pensionlens-ui/
├── nginx/                   # Nginx 配置文件
├── public/                  # 静态资源目录
├── scripts/                 # 构建和工具脚本
├── src/                     # 源代码目录
│   ├── api/                 # API 接口层
│   ├── assets/              # 静态资源（图片、样式、数据等）
│   ├── components/          # 公共组件
│   ├── layout/              # 布局组件
│   ├── plugins/             # 插件配置
│   ├── router/              # 路由配置
│   ├── store/               # Vuex 状态管理
│   ├── utils/               # 工具函数
│   ├── views/               # 页面组件
│   │   ├── animation/       # 页面切换动画
│   │   ├── local/           # 区域信息（广东省）
│   │   ├── nation/          # 全国概况
│   │   ├── policy/          # 政策资讯
│   │   └── settings/        # 参数调配
│   ├── App.vue              # 根组件
│   ├── guard.js             # 路由守卫
│   └── main.js              # 入口文件
├── .editorconfig            # 编辑器配置
├── .env.development         # 开发环境变量
├── .env.production          # 生产环境变量
├── .eslintrc.js             # ESLint 配置
├── .gitignore               # Git 忽略配置
├── .prettierrc.js           # Prettier 配置
├── LICENSE                  # MIT 开源协议
├── babel.config.js          # Babel 配置
├── jsconfig.json            # JavaScript 配置
├── package.json             # 项目依赖配置
├── preview.js               # 预览服务器
├── vue.config.js            # Vue CLI 配置
└── README.md                # 项目说明文档

---

🚀 快速开始

环境要求

在开始之前，请确保你的开发环境满足以下要求：

• Node.js: >= 18.0.0（推荐 ^= 20.0.0）
• pnpm: >= 10.20.0

你可以通过以下命令检查环境：

node -v
pnpm -v

安装步骤

1️⃣ 克隆项目

git clone https://github.com/ZK-Jackie/OpenPensionLens.git

2️⃣ 进入项目目录

cd PensionLens/pensionlens-ui

3️⃣ 安装依赖

使用 pnpm：

pnpm install

4️⃣ 启动开发服务器

pnpm run dev

5️⃣ 访问应用

打开浏览器访问 http://localhost:8080

默认情况下，开发服务器会在 8080 端口启动。如果端口被占用，会自动使用下一个可用端口。

---

💻 开发指南

可用脚本

# 启动开发服务器（热重载）
pnpm run dev

# 启动静态文件服务器（生产模式预览）
pnpm run preview

# 构建生产版本
pnpm run build

# 代码检查
pnpm run lint

开发建议

1. 代码规范

   • 遵循 ESLint 配置的代码规范
   • 使用有意义的变量和函数命名
   • 添加必要的注释说明

2. 组件开发

   • 组件名使用 PascalCase（多单词）
   • 组件文件名使用 kebab-case
   • 保持组件单一职责

3. 状态管理

   • 全局状态使用 Vuex 管理
   • 局部状态使用组件 data
   • 合理使用 getters、mutations、actions

4. 样式编写

   • 使用 Sass 预处理器
   • 采用 BEM 命名规范
   • 避免深层级嵌套（最多 3 层）

5. API 调用

   • 所有接口调用放在 src/api/ 目录
   • 使用 Axios 进行 HTTP 请求
   • 统一错误处理

---

📦 部署说明

构建生产版本

pnpm run build

构建完成后，会在项目根目录生成 dist/ 目录，包含所有静态文件。

部署方式

使用 Nginx

使用 nginx/conf/pensionlens.conf 作为 Nginx 配置文件，并将 dist/ 目录内容复制到 Nginx 的 html 目录下，并重命名为 pensionlens；输入下面命令重启 Nginx 服务即可。

sudo systemctl restart nginx

---

📄 开源许可

本项目基于 MIT License 开源协议。

完整的许可证文本请参见项目根目录下的 LICENSE 文件。

---

🙏 鸣谢

感谢 PensionLens/intelligent-calulator 团队的共同付出与支持！

---

版权所有 © 2024 智算古稀—基于测算模型的养老保险可视化平台