docs: 更新项目文档和数据库设计，添加官网相关功能

2025-08-20 03:01:14 +08:00
parent 47c67ff704
commit fdc58aa3a2
58 changed files with 37635 additions and 28437 deletions
--- a/docs/development_plans/dashboard_development_plan.md
+++ b/docs/development_plans/dashboard_development_plan.md
@@ -7,11 +7,11 @@
 ## 2. 技术架构

 - **前端框架**: Vue.js 3
- **可视化库**: ECharts + 自定义Vue 3兼容组件（替代DataV）
+- **可视化库**: DataV（替代 ECharts）
 - **构建工具**: Vite
 - **状态管理**: Pinia
 - **响应式设计**: 支持多种大屏比例(16:9, 4:3等)
- **实时数据**: WebSocket实时数据推送
+- **实时数据**: WebSocket 实时数据推送
 - **代码规范**: ESLint + Prettier
 - **单元测试**: Vitest

@@ -22,15 +22,15 @@
  - 整体产业规模展示（牛只总数、牧场数量等关键指标）
  - 产值和增长率关键指标（年度产值、增长率趋势图）
 - 第2天：
-  - 数据可视化图表实现（饼图展示品种分布、柱状图展示区域分布）
-  - 实时数据更新机制（WebSocket连接建立）
+  - 数据可视化图表实现（使用 DataV 组件展示品种分布、区域分布）
+  - 实时数据更新机制（WebSocket 连接建立）
 - 第3天：
  - 数据钻取功能实现（点击图表可查看详细数据）
  - 多维度数据展示（按时间、区域、品种等维度筛选）

 ### 3.2 养殖监控模块 (3天)
 - 第1天：
-  - 各牧场养殖情况展示（地图展示各牧场位置和规模）
+  - 各牧场养殖情况展示（使用 DataV 地图组件展示各牧场位置和规模）
  - 环境数据实时监控（温湿度、氨气浓度等传感器数据）
 - 第2天：
  - 异常情况告警展示（环境异常、健康异常等告警信息）
@@ -89,221 +89,21 @@

 ## 4. 技术实现要点

- 使用自定义全屏容器组件实现自适应全屏显示
+- 使用 DataV 组件库实现自适应全屏显示
 - 开发装饰组件（如边框、装饰线等）增强视觉效果
 - 采用合理的布局结构（如三栏布局）分布数据展示区域
 - 开发排名轮播组件展示动态数据
 - 采用深色科技风格背景，搭配主题色系（如绿色渐变）体现业务特色
 - 添加实时时间显示等实用功能
- 结合ECharts图表实现丰富的数据可视化
+- 结合 DataV 图表实现丰富的数据可视化
 - 使用自适应容器确保不同分辨率下的正常显示
 - 添加窗口大小改变时的重绘功能
- 实现WebSocket实时数据推送机制
- 针对大数据量渲染进行性能优化

-## 5. 数据接口对接
+## 5. 里程碑

-### 5.1 API接口对接计划
- 对接养殖管理相关接口：
-  - 牛只档案数据接口（获取牛只总数、品种分布等）
-  - 环境监测数据接口（获取实时环境数据）
-  - 饲养记录数据接口（获取饲料消耗、投喂量等数据）
-
- 对接金融服务相关接口：
-  - 贷款申请数据接口（获取贷款申请数、放款总额等）
-  - 保险保单数据接口（获取投保数量、保费总额等）
-  - 理赔数据接口（获取理赔情况）
-
- 对接交易相关接口：
-  - 活牛交易数据接口（获取交易量、价格等数据）
-  - 商城订单数据接口（获取销售数据、热门商品等）
-
- 对接政府监管相关接口：
-  - 防疫数据接口（获取防疫完成率等数据）
-  - 补贴发放数据接口（获取补贴发放情况）
-
- 对接数据分析相关接口：
-  - 预警信息接口（获取各类风险预警信息）
-  - 分析报告接口（获取各类分析报告数据）
-
-### 5.2 数据更新机制
- 实时数据：通过WebSocket推送机制实现实时更新
- 定时数据：通过定时轮询机制定期更新（如每5分钟）
- 手动刷新：提供手动刷新按钮供用户主动刷新数据
-
-## 6. 开发阶段规划
-
-### 6.1 阶段一：基础框架搭建 (4天)
- 第1天：
-  - 项目初始化和环境配置
-  - 移除DataV依赖，搭建Vue 3兼容的基础组件库
- 第2天：
-  - 开发基础可视化组件（边框、装饰线等）
-  - 实现全屏适配方案
- 第3天：
-  - 开发排名轮播组件
-  - 实现WebSocket连接机制
- 第4天：
-  - 基础数据获取服务封装
-  - 开发基础布局组件
-
-### 6.2 阶段二：核心功能开发 (18天)
- 第1-3天：
-  - 产业概览模块开发
- 第4-6天：
-  - 养殖监控模块开发
- 第7-8天：
-  - 金融服务模块开发
- 第9-10天：
-  - 交易统计模块开发
- 第11-12天：
-  - 运输跟踪模块开发
- 第13-14天：
-  - 风险预警模块开发
- 第15-16天：
-  - 生态指标模块开发
- 第17-18天：
-  - 政府监管模块开发
-
-### 6.3 阶段三：集成测试与优化 (4天)
- 第1天：
-  - 功能测试和Bug修复
- 第2天：
-  - 性能优化（大数据量渲染优化）
- 第3天：
-  - 视觉效果优化
- 第4天：
-  - 响应式适配测试和部署准备
-
-## 7. 质量保障措施
-
- 单元测试覆盖率达到80%以上
- 代码审查机制确保代码质量
- 自动化测试保障功能稳定性
- 性能测试确保系统响应速度(<2秒)
- 多种分辨率适配测试
- 实时数据推送功能专项测试
- 大屏设备兼容性测试
-
-## 8. 部署与运维
-
- 支持Docker容器化部署
- 支持云平台部署
- 日志收集和分析
- 系统监控和告警机制
- 大屏设备适配和部署指导
- 实时数据推送服务监控
- 性能监控和优化建议
-
-## 9. 风险与应对措施
-
-### 9.1 技术风险
- **Vue 3与DataV兼容性问题**：
-  - 风险：DataV是为Vue 2设计的，在Vue 3中存在兼容性问题
-  - 应对：完全移除DataV依赖，使用原生Vue 3组件和ECharts实现可视化功能
-
-### 9.2 性能风险
- **大数据量渲染性能问题**：
-  - 风险：大屏系统需要展示大量数据，可能导致页面卡顿
-  - 应对：采用虚拟滚动、数据分页、懒加载等技术优化性能
-
-### 9.3 数据风险
- **实时数据推送稳定性问题**：
-  - 风险：WebSocket连接可能中断，导致数据更新不及时
-  - 应对：实现断线重连机制，提供数据手动刷新功能
-
-## 10. 验收标准
-
- 所有功能模块按计划完成并正常运行
- 系统能够在不同分辨率的大屏设备上正常显示
- 实时数据推送功能稳定可靠
- 系统响应时间小于2秒
- 通过所有测试用例，包括功能测试、性能测试和兼容性测试
- 用户界面美观，符合设计要求
-
-## 11. 自定义组件开发计划
-
-### 11.1 核心可视化组件 (3天)
- 第1天：
-  - 开发全屏容器组件
-  - 实现基础边框组件
- 第2天：
-  - 开发装饰线组件
-  - 实现动态数字组件
- 第3天：
-  - 开发排名轮播组件
-  - 实现水球图组件
-
-### 11.2 布局组件 (2天)
- 第1天：
-  - 开发栅格布局组件
-  - 实现响应式容器组件
- 第2天：
-  - 开发卡片组件
-  - 实现折叠面板组件
-
-### 11.3 工具组件 (1天)
- 第1天：
-  - 开发时间显示组件
-  - 实现加载状态组件
-  - 开发提示信息组件
-
-## 12. 性能优化策略
-
-### 12.1 前端性能优化
- 使用虚拟滚动技术处理大量数据展示
- 实施组件懒加载减少初始加载时间
- 采用图片懒加载和压缩优化视觉效果
- 利用localStorage缓存部分非敏感数据减少请求
-
-### 12.2 数据处理优化
- 对大量数据进行分页处理
- 实现数据缓存机制减少重复请求
- 使用防抖和节流技术优化高频操作
- 对复杂计算采用Web Worker处理
-
-### 12.3 网络优化
- 实施WebSocket心跳机制保持连接稳定
- 使用gzip压缩减少数据传输量
- 实现请求合并减少网络请求次数
- 设置合理的缓存策略提高响应速度
-
-## 13. 可视化设计规范
-
-### 13.1 色彩规范
- 主色调：草原绿色系（#4CAF50, #8BC34A）
- 辅助色：科技蓝（#2196F3）、警示红（#F44336）
- 背景色：深灰（#1e1e1e）营造科技感
- 文字色：白色（#FFFFFF）和浅灰（#E0E0E0）
-
-### 13.2 字体规范
- 主要字体：Microsoft YaHei, sans-serif
- 数字字体：DIN Pro（用于关键数据展示）
- 字号规范：
-  - 标题：24-32px
-  - 正文：14-18px
-  - 辅助文字：12-14px
-  - 数据展示：16-24px
-
-### 13.3 图表规范
- 使用ECharts作为主要图表库
- 统一图表配色方案
- 保持图表风格一致性
- 提供图表交互功能（tooltip、legend等）
-
-## 14. 安全性考虑
-
-### 14.1 数据安全
- 对敏感数据进行加密传输
- 实施访问权限控制
- 对用户操作进行日志记录
-
-### 14.2 网络安全
- 使用HTTPS协议保障数据传输安全
- 实施CSRF防护措施
- 对输入数据进行验证和过滤
-
-### 14.3 系统安全
- 定期更新依赖库修复安全漏洞
- 实施CORS策略防止跨站攻击
- 对WebSocket连接进行身份验证
+- **里程碑1**：完成产业概览模块和养殖监控模块（6天）
+- **里程碑2**：完成金融服务模块和交易统计模块（4天）
+- **里程碑3**：完成运输跟踪模块和风险预警模块（4天）
+- **里程碑4**：完成生态指标模块和政府监管模块（4天）
+- **里程碑5**：系统联调和测试（3天）
+- **里程碑6**：上线部署（1天）
--- a/docs/development_plans/website_development_plan.md
+++ b/docs/development_plans/website_development_plan.md
@@ -0,0 +1,127 @@
+# 官网开发计划
+
+## 1. 系统概述
+
+官网是锡林郭勒盟地区智慧养殖产业平台的对外展示窗口，主要用于宣传平台功能、展示产业动态、发布新闻资讯以及提供用户访问入口。官网采用纯HTML5 + CSS3 + JavaScript技术栈，确保快速加载和良好的兼容性。
+
+## 2. 技术架构
+
+- **前端技术**: HTML5 + CSS3 + JavaScript
+- **CSS框架**: Bootstrap 5
+- **图标库**: Bootstrap Icons
+- **图表库**: Chart.js
+- **响应式设计**: 移动优先的响应式布局
+- **代码规范**: ESLint + Prettier
+- **部署方式**: 静态文件部署
+
+## 3. 页面详细计划
+
+### 3.1 首页 (1周)
+- 第1天：
+  - 页面结构搭建和基础样式设计
+  - 导航栏和页脚实现
+- 第2-3天：
+  - 英雄区域开发（包含背景图片、标题、按钮等）
+  - 核心功能模块展示区域开发
+- 第4-5天：
+  - 数据可视化展示区域开发（集成Chart.js图表）
+  - 行业动态展示区域开发
+- 第6-7天：
+  - 响应式优化和浏览器兼容性测试
+  - 动画效果和交互优化
+
+### 3.2 导航功能 (2天)
+- 第1天：
+  - 顶部导航栏开发（包含响应式折叠菜单）
+  - 页面内锚点导航功能实现
+- 第2天：
+  - 平滑滚动功能开发
+  - 导航栏滚动效果优化
+
+### 3.3 数据可视化 (2天)
+- 第1天：
+  - 牲畜存栏量统计图表开发
+  - 牧草产量与价格趋势图表开发
+- 第2天：
+  - 图表响应式优化
+  - 图表交互功能完善
+
+### 3.4 新闻资讯 (2天)
+- 第1天：
+  - 新闻列表页面开发
+  - 新闻分类标签实现
+- 第2天：
+  - 新闻轮播功能开发
+  - 查看更多功能实现
+
+### 3.5 用户交互 (2天)
+- 第1天：
+  - 悬停效果和动画开发
+  - 功能卡片交互效果实现
+- 第2天：
+  - 响应式设计优化
+  - 移动端适配测试
+
+### 3.6 页脚信息 (1天)
+- 第1天：
+  - 页脚结构开发
+  - 快速链接和联系方式展示
+  - 社交媒体链接集成
+
+## 4. 设计要求
+
+### 4.1 视觉设计
+- 采用草原绿色主题色调
+- 融入蒙古族文化元素
+- 简洁现代的设计风格
+- 清晰的信息层级结构
+
+### 4.2 交互体验
+- 页面加载动画
+- 按钮和链接的悬停效果
+- 表单输入的实时验证反馈
+- 移动端友好的触控交互
+
+## 5. 测试计划
+
+### 5.1 功能测试
+- 所有页面链接有效性测试
+- 导航功能测试
+- 图表显示功能测试
+- 新闻轮播功能测试
+
+### 5.2 兼容性测试
+- 主流浏览器兼容性测试 (Chrome、Firefox、Safari、Edge)
+- 移动端浏览器测试 (iOS Safari、Android Chrome)
+- 不同分辨率屏幕适配测试
+
+### 5.3 性能测试
+- 页面加载速度测试
+- 图片和静态资源优化验证
+- 图表渲染性能测试
+
+## 6. 部署计划
+
+### 6.1 部署环境
+- Nginx服务器部署
+- SSL证书配置
+- CDN加速配置
+
+### 6.2 部署流程
+1. 代码构建和压缩
+2. 静态文件上传至服务器
+3. Nginx配置更新
+4. 域名解析配置
+5. 上线验证测试
+
+## 7. 维护计划
+
+### 7.1 内容维护
+- 定期更新新闻资讯
+- 更新数据可视化内容
+- 优化页面内容和结构
+
+### 7.2 技术维护
+- 定期更新依赖库版本
+- 安全漏洞修复
+- 性能优化