Compare commits
	
		
			29 Commits
		
	
	
		
			afb2d8118f
			...
			main
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 8491eacbe3 | |||
| 3b3bfb5952 | |||
| 3a81ccad92 | |||
| f3f6c4d99a | |||
| 8d2ced4221 | |||
| 1ec32cba7c | |||
| 660cb1d9ad | |||
| 05763b6b5e | |||
| 4ffae321ef | |||
| 56438a0425 | |||
| 58133125c7 | |||
| de8af851db | |||
| bc86dff06e | |||
| f1a0ddf58a | |||
| a9034cd9fc | |||
| 672e6b2f42 | |||
| 5d51008c85 | |||
| a14ad5ee48 | |||
| 7c8ec75633 | |||
| 3b81cbda0e | |||
| e323e2265f | |||
| c96a58204c | |||
| b4dac0eff1 | |||
| 24c327b8de | |||
| f9540451bb | |||
| 65d2477b48 | |||
| b2866e38e9 | |||
| a3dc432f8d | |||
| 75d5fde058 | 
| @ -7,6 +7,11 @@ jobs: | ||||
|   build: | ||||
|     runs-on: ubuntu-latest-2 | ||||
|     steps: | ||||
|       - name: 关闭 app 容器 | ||||
|         run: | | ||||
|           docker compose stop app || true | ||||
|           docker compose rm -f app || true | ||||
|  | ||||
|       - name: 克隆本地 checkout action | ||||
|         run: | | ||||
|           git clone http://114.67.155.184:3000/niyyzf/checkout.git ./.actions/checkout | ||||
| @ -14,49 +19,10 @@ jobs: | ||||
|       - name: 检出代码 | ||||
|         uses: ./.actions/checkout | ||||
|  | ||||
|       - name: 安装 Node.js | ||||
|         run: | | ||||
|           curl -fsSL https://deb.nodesource.com/setup_21.x | bash - | ||||
|           apt-get install -y nodejs | ||||
|  | ||||
|       - name: 安装前端依赖 | ||||
|         working-directory: platform | ||||
|         run: npm install | ||||
|  | ||||
|       - name: 构建前端(跳过 ts 校验) | ||||
|         working-directory: platform | ||||
|         run: | | ||||
|           npm run build -- --no-check || true | ||||
|  | ||||
|       - name: 安装 Python 3.11 | ||||
|         run: | | ||||
|           sudo apt update | ||||
|           sudo apt install -y software-properties-common | ||||
|           sudo add-apt-repository -y ppa:deadsnakes/ppa | ||||
|           sudo apt update | ||||
|           sudo apt install -y python3.11 python3.11-venv python3-pip | ||||
|           sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.11 1 | ||||
|           python3 --version | ||||
|  | ||||
|       - name: 安装后端依赖 | ||||
|         working-directory: back | ||||
|         run: | | ||||
|           python3.11 -m venv venv | ||||
|           source venv/bin/activate | ||||
|           pip install --upgrade pip | ||||
|           pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt | ||||
|  | ||||
|       - name: 安装 Docker | ||||
|         run: | | ||||
|           sudo apt update | ||||
|           sudo apt install -y docker.io | ||||
|  | ||||
|       - name: 安装 Docker Compose 插件 | ||||
|         run: | | ||||
|           sudo apt update | ||||
|           sudo apt install -y docker-compose-plugin | ||||
|           docker compose version | ||||
|  | ||||
|       - name: 构建 Docker 镜像 | ||||
|         run: | | ||||
|           docker compose build | ||||
|  | ||||
|       - name: 重启 Docker 容器 | ||||
|         run: | | ||||
|           docker compose up -d --force-recreate | ||||
							
								
								
									
										45
									
								
								Dockerfile
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								Dockerfile
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,45 @@ | ||||
| FROM python:3.11 | ||||
|  | ||||
| # 兼容新老 debian/ubuntu 换源 | ||||
| RUN (sed -i 's@http://deb.debian.org@http://mirrors.aliyun.com@g' /etc/apt/sources.list 2>/dev/null || true) && \ | ||||
|     (sed -i 's@http://security.debian.org@http://mirrors.aliyun.com@g' /etc/apt/sources.list 2>/dev/null || true) && \ | ||||
|     find /etc/apt/sources.list.d/ -name "*.list" -exec sed -i 's@http://deb.debian.org@http://mirrors.aliyun.com@g' {} \; && \ | ||||
|     find /etc/apt/sources.list.d/ -name "*.list" -exec sed -i 's@http://security.debian.org@http://mirrors.aliyun.com@g' {} \; | ||||
|  | ||||
| # 安装 Node.js 和 supervisord | ||||
| RUN apt-get update && \ | ||||
|     apt-get install -y curl supervisor && \ | ||||
|     curl -fsSL https://deb.nodesource.com/setup_21.x | bash - && \ | ||||
|     apt-get install -y nodejs && \ | ||||
|     apt-get clean | ||||
|  | ||||
| # 设置 pip 国内镜像(清华) | ||||
| RUN mkdir -p /root/.pip && \ | ||||
|     echo "[global]\nindex-url = https://pypi.tuna.tsinghua.edu.cn/simple\ntrusted-host = pypi.tuna.tsinghua.edu.cn" > /root/.pip/pip.conf | ||||
|  | ||||
| # 设置工作目录 | ||||
| WORKDIR /app | ||||
|  | ||||
| # 复制前端代码并安装依赖、构建 | ||||
| COPY platform/ ./platform/ | ||||
| WORKDIR /app/platform | ||||
| # 构建前先删除 dist,确保不会用到本地遗留产物 | ||||
| RUN rm -rf dist && npm install && npm run build | ||||
| RUN ls -l /app/platform | ||||
|  | ||||
| # 安装 http-server | ||||
| RUN npm install -g http-server | ||||
|  | ||||
| # 复制后端代码并安装依赖 | ||||
| WORKDIR /app/back | ||||
| COPY back/requirements.txt . | ||||
| RUN pip install -r requirements.txt | ||||
| COPY back/ . | ||||
| RUN ls -l /app/back | ||||
|  | ||||
| # supervisor 配置 | ||||
| COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf | ||||
|  | ||||
| WORKDIR /app | ||||
|  | ||||
| CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]  | ||||
| @ -92,7 +92,7 @@ def create_app(): | ||||
|     app.get_db = get_db | ||||
|  | ||||
|     # 启用 CORS(跨域支持) | ||||
|     CORS(app, resources={r"/*": {"origins": "*"}})  # 允许所有来源,或指定局域网IP | ||||
|     CORS(app, resources={r"/*": {"origins": ["http://203.195.163.42:7792", "http://localhost:5000"]}}, supports_credentials=True) | ||||
|  | ||||
|     # 注册蓝图 | ||||
|     from blueprints.login import bp as login_bp | ||||
|  | ||||
| @ -1,22 +1,16 @@ | ||||
| version: '3.8' | ||||
| services: | ||||
|   backend: | ||||
|     build: ./back | ||||
|     container_name: backend | ||||
|   app: | ||||
|     build: | ||||
|       context: . | ||||
|       dockerfile: Dockerfile | ||||
|     container_name: app | ||||
|     ports: | ||||
|       - "7792:5000" | ||||
|       - "7792:7792"   # 前端 | ||||
|       - "7793:5000"   # 后端 | ||||
|     volumes: | ||||
|       - ./back:/app | ||||
|     environment: | ||||
|       - FLASK_ENV=development | ||||
|     depends_on: | ||||
|       - frontend | ||||
|   frontend: | ||||
|     build: ./platform | ||||
|     container_name: frontend | ||||
|     ports: | ||||
|       - "7793:5173" | ||||
|     volumes: | ||||
|       - ./platform:/app | ||||
|     environment: | ||||
|       - NODE_ENV=development  | ||||
|       - /opt/nonye/DIY_gccpu_96_96:/app/back/DIY_gccpu_96_96 | ||||
|       - /opt/nonye/models:/app/back/models | ||||
|     deploy: | ||||
|       resources: | ||||
|         limits: | ||||
|           memory: 1000M  | ||||
| @ -1 +1 @@ | ||||
| VITE_API_BASE_URL=https://your-production-domain.com/api | ||||
| VITE_API_BASE_URL=http://203.195.163.42:7793 | ||||
| @ -1,225 +0,0 @@ | ||||
| # Dashboard 页面优化总结 | ||||
|  | ||||
| ## 优化概述 | ||||
|  | ||||
| 本次优化主要针对 Dashboard 页面进行了全面的现代化改造,实现了自适应、美观、风格统一、现代简约的设计目标。 | ||||
|  | ||||
| ## 主要改进 | ||||
|  | ||||
| ### 1. 全局设计系统统一 | ||||
|  | ||||
| #### 颜色变量系统 | ||||
| - 建立了完整的 CSS 变量系统,统一管理所有颜色、间距、字体等设计元素 | ||||
| - 主色调:`#1890ff` (蓝色系) | ||||
| - 渐变色:`linear-gradient(135deg, #667eea 0%, #764ba2 100%)` | ||||
| - 背景色:`#f5f7fa` (浅灰蓝) | ||||
| - 文字色:`#1a1a1a` (深灰) | ||||
|  | ||||
| #### 设计令牌 | ||||
| ```css | ||||
| /* 间距系统 */ | ||||
| --spacing-xs: 4px; | ||||
| --spacing-sm: 8px; | ||||
| --spacing-md: 12px; | ||||
| --spacing-lg: 16px; | ||||
| --spacing-xl: 20px; | ||||
| --spacing-2xl: 24px; | ||||
| --spacing-3xl: 32px; | ||||
|  | ||||
| /* 圆角系统 */ | ||||
| --radius-sm: 6px; | ||||
| --radius-md: 8px; | ||||
| --radius-lg: 12px; | ||||
| --radius-xl: 16px; | ||||
| --radius-2xl: 20px; | ||||
|  | ||||
| /* 阴影系统 */ | ||||
| --shadow-sm: 0 2px 8px rgba(24, 144, 255, 0.04); | ||||
| --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); | ||||
| --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); | ||||
| ``` | ||||
|  | ||||
| ### 2. 组件切分优化 | ||||
|  | ||||
| #### 页面结构重组 | ||||
| - 移除了冗余的页面标题,简化页面头部 | ||||
| - 将操作按钮移至右上角,提升用户体验 | ||||
| - 优化了区域标题设计,添加了功能标签 | ||||
|  | ||||
| #### 组件职责明确 | ||||
| - `StatCards`: 统计卡片展示 | ||||
| - `StatCardItem`: 单个统计卡片 | ||||
| - `MapSection`: 地图组件 | ||||
| - `TemperatureMonitor`: 温度监控 | ||||
| - `HumidityMonitor`: 湿度监控 | ||||
| - `PersonnelManagement`: 人员管理 | ||||
| - `AISection`: AI助手 | ||||
|  | ||||
| ### 3. 图标系统升级 | ||||
|  | ||||
| #### 使用 Lucide Vue 图标 | ||||
| - 替换了自定义图标组件,使用成熟的图标库 | ||||
| - 统一图标风格和大小规范 | ||||
| - 提升图标加载性能和维护性 | ||||
|  | ||||
| ```vue | ||||
| import { RefreshCw, Download, X, Maximize2 } from 'lucide-vue-next'; | ||||
| ``` | ||||
|  | ||||
| ### 4. 响应式设计优化 | ||||
|  | ||||
| #### 断点系统 | ||||
| - 1400px: 大屏幕适配 | ||||
| - 1200px: 桌面端适配 | ||||
| - 768px: 平板端适配 | ||||
| - 480px: 移动端适配 | ||||
|  | ||||
| #### 自适应布局 | ||||
| - 使用 CSS Grid 实现灵活的布局系统 | ||||
| - 统计卡片支持自动换行 | ||||
| - 监控组件在小屏幕下垂直排列 | ||||
|  | ||||
| ### 5. 视觉效果提升 | ||||
|  | ||||
| #### 现代简约设计 | ||||
| - 使用毛玻璃效果 (`backdrop-filter: blur()`) | ||||
| - 渐变背景和按钮 | ||||
| - 柔和的阴影和圆角 | ||||
| - 平滑的动画过渡 | ||||
|  | ||||
| #### 交互体验 | ||||
| - 悬停效果和微动画 | ||||
| - 加载状态反馈 | ||||
| - 通知系统优化 | ||||
|  | ||||
| ### 6. 性能优化 | ||||
|  | ||||
| #### 代码优化 | ||||
| - 使用 CSS 变量减少重复代码 | ||||
| - 组件按需加载 | ||||
| - 图标库按需导入 | ||||
|  | ||||
| #### 样式优化 | ||||
| - 使用 CSS 变量提升主题切换效率 | ||||
| - 优化选择器性能 | ||||
| - 减少不必要的样式计算 | ||||
|  | ||||
| ## 技术实现 | ||||
|  | ||||
| ### 1. CSS 变量系统 | ||||
| ```css | ||||
| :root { | ||||
|   /* 主色调 */ | ||||
|   --primary-color: #1890ff; | ||||
|   --primary-light: #40a9ff; | ||||
|   --primary-dark: #096dd9; | ||||
|    | ||||
|   /* 渐变色 */ | ||||
|   --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||||
|    | ||||
|   /* 背景色 */ | ||||
|   --bg-main: #f5f7fa; | ||||
|   --bg-card: #fff; | ||||
|   --bg-card-hover: rgba(255, 255, 255, 0.95); | ||||
| } | ||||
| ``` | ||||
|  | ||||
| ### 2. 响应式布局 | ||||
| ```css | ||||
| .main-content { | ||||
|   display: grid; | ||||
|   grid-template-columns: 1fr 1fr; | ||||
|   gap: var(--spacing-3xl); | ||||
| } | ||||
|  | ||||
| @media (max-width: 1200px) { | ||||
|   .main-content { | ||||
|     grid-template-columns: 1fr; | ||||
|   } | ||||
| } | ||||
| ``` | ||||
|  | ||||
| ### 3. 组件化设计 | ||||
| ```vue | ||||
| <template> | ||||
|   <div class="dashboard-page"> | ||||
|     <!-- 操作区域 --> | ||||
|     <div class="dashboard-header"> | ||||
|       <div class="header-actions"> | ||||
|         <BaseButton variant="secondary" @click="refreshAllData"> | ||||
|           <RefreshCw :size="16" /> | ||||
|           刷新数据 | ||||
|         </BaseButton> | ||||
|       </div> | ||||
|     </div> | ||||
|      | ||||
|     <!-- 统计区域 --> | ||||
|     <StatCards :stats="statistics" /> | ||||
|      | ||||
|     <!-- 主要内容 --> | ||||
|     <div class="main-content"> | ||||
|       <!-- 左侧列 --> | ||||
|       <div class="left-column"> | ||||
|         <MonitoringSection /> | ||||
|         <MapSection /> | ||||
|       </div> | ||||
|        | ||||
|       <!-- 右侧列 --> | ||||
|       <div class="right-column"> | ||||
|         <PersonnelSection /> | ||||
|         <AISection /> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| ``` | ||||
|  | ||||
| ## 设计原则 | ||||
|  | ||||
| ### 1. 克制设计 | ||||
| - 避免过度装饰,保持界面简洁 | ||||
| - 使用留白和间距创造层次感 | ||||
| - 颜色使用克制,主色调不超过3种 | ||||
|  | ||||
| ### 2. 现代简约 | ||||
| - 扁平化设计风格 | ||||
| - 清晰的视觉层次 | ||||
| - 一致的设计语言 | ||||
|  | ||||
| ### 3. 用户体验优先 | ||||
| - 直观的操作流程 | ||||
| - 清晰的信息架构 | ||||
| - 流畅的交互反馈 | ||||
|  | ||||
| ## 后续优化建议 | ||||
|  | ||||
| ### 1. 主题系统 | ||||
| - 支持深色模式切换 | ||||
| - 多主题色彩方案 | ||||
| - 用户自定义主题 | ||||
|  | ||||
| ### 2. 性能优化 | ||||
| - 组件懒加载 | ||||
| - 虚拟滚动 | ||||
| - 图片懒加载 | ||||
|  | ||||
| ### 3. 功能增强 | ||||
| - 数据可视化图表 | ||||
| - 实时数据更新 | ||||
| - 个性化配置 | ||||
|  | ||||
| ### 4. 无障碍优化 | ||||
| - 键盘导航支持 | ||||
| - 屏幕阅读器兼容 | ||||
| - 高对比度模式 | ||||
|  | ||||
| ## 总结 | ||||
|  | ||||
| 通过本次优化,Dashboard 页面实现了: | ||||
| - ✅ 统一的设计系统 | ||||
| - ✅ 现代化的视觉效果 | ||||
| - ✅ 完善的响应式支持 | ||||
| - ✅ 优秀的用户体验 | ||||
| - ✅ 良好的代码可维护性 | ||||
|  | ||||
| 整体设计风格现代简约、克制优雅,符合当代 Web 应用的设计趋势。  | ||||
| @ -1,125 +0,0 @@ | ||||
| # 环境监控系统优化待办清单 | ||||
|  | ||||
| ## ✅ 已完成任务 | ||||
|  | ||||
| ### 1. 设备地理分布模态框优化 | ||||
| - ✅ 修复模态框层级问题,使用Teleport挂载到body | ||||
| - ✅ 实现全局居中定位 | ||||
| - ✅ 优化模态框样式和交互体验 | ||||
|  | ||||
| ### 2. 生长趋势分析卡片重构 | ||||
| - ✅ 创建新的GrowthTrendAnalysis组件 | ||||
| - ✅ 集成ECharts图表库 | ||||
| - ✅ 实现30天生长趋势图表 | ||||
| - ✅ 添加株高、叶片数、分蘖数三条数据线 | ||||
| - ✅ 实现图表自适应和响应式设计 | ||||
| - ✅ 添加生长状态概览面板 | ||||
| - ✅ 实现可展开的详细信息区域 | ||||
| - ✅ 添加刷新功能和加载状态 | ||||
| - ✅ 使用现代化设计风格 | ||||
|  | ||||
| ### 3. 温度监控组件优化 | ||||
| - ✅ 重新设计温度监控卡片 | ||||
| - ✅ 提升现代感和文本可读性 | ||||
| - ✅ 增加设备信息和刷新按钮状态 | ||||
| - ✅ 优化布局和样式 | ||||
| - ✅ 实现24小时趋势图表 | ||||
| - ✅ 添加实时随机数据填充 | ||||
|  | ||||
| ### 4. 湿度监控组件优化 | ||||
| - ✅ 重新设计湿度监控卡片 | ||||
| - ✅ 实现24小时趋势图表 | ||||
| - ✅ 添加实时随机数据填充 | ||||
| - ✅ 优化图表样式和交互 | ||||
|  | ||||
| ### 5. AI预警系统优化 | ||||
| - ✅ 重新设计AIyujing组件 | ||||
| - ✅ 增加预警统计面板 | ||||
| - ✅ 优化列表卡片和详情模态框 | ||||
| - ✅ 改进交互和视觉效果 | ||||
|  | ||||
| ### 6. AI助手卡片优化 | ||||
| - ✅ 重新设计AI助手卡片 | ||||
| - ✅ 增加状态徽章和操作按钮 | ||||
| - ✅ 改进布局和视觉效果 | ||||
|  | ||||
| ### 7. 设备运行状态卡片 | ||||
| - ✅ 创建DeviceStatusCard组件 | ||||
| - ✅ 实现设备总数、在线、离线、故障统计 | ||||
| - ✅ 添加设备类型分布展示 | ||||
| - ✅ 实现故障设备列表和详情 | ||||
| - ✅ 添加数据刷新和展开功能 | ||||
| - ✅ 集成到Dashboard页面布局 | ||||
|  | ||||
| ## 🔄 进行中任务 | ||||
|  | ||||
| ### 1. 图表样式统一优化 | ||||
| - ✅ 重构24小时温度趋势图表样式 | ||||
| - ✅ 重构24小时湿度趋势图表样式 | ||||
| - ✅ 将刷新时间改为1秒 | ||||
| - ✅ 添加渐变背景和区域填充 | ||||
| - ✅ 优化数据点和阈值线样式 | ||||
| - ✅ 添加图表标题和阈值标签 | ||||
| - 🔄 完善图表响应式适配 | ||||
|  | ||||
| ## 📋 待完成任务 | ||||
|  | ||||
| ### 1. 性能优化 | ||||
| - [ ] 实现图表懒加载 | ||||
| - [ ] 优化大数据量图表渲染 | ||||
| - [ ] 添加图表缓存机制 | ||||
|  | ||||
| ### 2. 数据集成 | ||||
| - [ ] 连接真实数据源 | ||||
| - [ ] 实现数据实时更新 | ||||
| - [ ] 添加数据验证和错误处理 | ||||
|  | ||||
| ### 3. 用户体验优化 | ||||
| - [ ] 添加图表加载动画 | ||||
| - [ ] 优化移动端体验 | ||||
| - [ ] 添加图表导出功能 | ||||
|  | ||||
| ### 4. 功能扩展 | ||||
| - [ ] 添加更多作物类型支持 | ||||
| - [ ] 实现历史数据对比 | ||||
| - [ ] 添加预测分析功能 | ||||
|  | ||||
| ## 🎯 设计目标 | ||||
|  | ||||
| ### 整体风格 | ||||
| - ✅ 现代简约设计 | ||||
| - ✅ 克制优雅的视觉效果 | ||||
| - ✅ 统一的设计语言 | ||||
| - ✅ 良好的视觉层次 | ||||
|  | ||||
| ### 交互体验 | ||||
| - ✅ 流畅的动画过渡 | ||||
| - ✅ 直观的操作反馈 | ||||
| - ✅ 清晰的信息展示 | ||||
| - ✅ 便捷的功能访问 | ||||
|  | ||||
| ### 技术实现 | ||||
| - ✅ 组件化架构 | ||||
| - ✅ 响应式设计 | ||||
| - ✅ 性能优化 | ||||
| - ✅ 代码可维护性 | ||||
|  | ||||
| ## 📊 完成度统计 | ||||
|  | ||||
| - **总体完成度**: 92% | ||||
| - **核心功能**: 95% | ||||
| - **UI/UX设计**: 98% | ||||
| - **技术实现**: 90% | ||||
| - **性能优化**: 80% | ||||
|  | ||||
| ## 🚀 下一步计划 | ||||
|  | ||||
| 1. 完善图表样式统一 | ||||
| 2. 优化移动端适配 | ||||
| 3. 添加更多交互功能 | ||||
| 4. 实现数据持久化 | ||||
| 5. 添加用户个性化设置 | ||||
|  | ||||
| --- | ||||
|  | ||||
| *最后更新: 2024年12月*  | ||||
| @ -1 +0,0 @@ | ||||
|   | ||||
| @ -5,7 +5,7 @@ | ||||
|   "type": "module", | ||||
|   "scripts": { | ||||
|     "dev": "vite", | ||||
|     "build": "vue-tsc -b && vite build", | ||||
|     "build": "vite build", | ||||
|     "preview": "vite preview" | ||||
|   }, | ||||
|   "dependencies": { | ||||
|  | ||||
							
								
								
									
										18
									
								
								supervisord.conf
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								supervisord.conf
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,18 @@ | ||||
| [supervisord] | ||||
| nodaemon=true | ||||
|  | ||||
| [program:frontend] | ||||
| directory=/app/platform | ||||
| command=http-server dist -p 7792 | ||||
| autostart=true | ||||
| autorestart=true | ||||
| stdout_logfile=/dev/stdout | ||||
| stderr_logfile=/dev/stderr | ||||
|  | ||||
| [program:backend] | ||||
| directory=/app/back | ||||
| command=python app.py --port=7793 | ||||
| autostart=true | ||||
| autorestart=true | ||||
| stdout_logfile=/dev/stdout | ||||
| stderr_logfile=/dev/stderr  | ||||
		Reference in New Issue
	
	Block a user