# hypet-vue **Repository Path**: supergren/hypet-vue ## Basic Information - **Project Name**: hypet-vue - **Description**: 海派特智慧产品演示系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-16 - **Last Updated**: 2026-03-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 海派特智慧水务管理系统 ## 📋 项目介绍 海派特智慧厂站运营管理系统平台是一个基于 Vue 3 + Arco Design + TypeScript + Vite 开发的智慧水务/污水厂运营管理演示系统。系统采用现代化的前端技术栈，提供从生产运营、安全监控、设备管理到能耗分析的全流程管理功能，支持多项目切换和沉浸式大屏展示。 ## 🎯 核心功能 ### 1. 首页总览 - 污水厂进水量统计图表 - 生产趋势分析 - 设备状态监控 - 告警信息展示 - 支持切换到智慧大屏视图 ### 2. 智慧大屏 - 沉浸式全屏展示 - 工艺流程图可视化（Three.js 3D渲染） - 实时数据监控 - 系统状态展示 - 左侧导航、中央工艺图、右侧面板三栏布局 ### 3. 生产管理 - 实时数据监控 - 生产报表 - 设备运行状态 - 工艺参数管理 ### 4. 安全管理 - 安全告警 - 安全指标 - 检查记录 - 应急预案 ### 5. 设备管理 - 设备列表 - 运行状态 - 维护记录 - 设备档案 ### 6. 化验管理 - 水质指标 - 检测记录 - 水质趋势 - 达标情况 ### 7. 生产报表 - 报表概览 - 常用报表 - 报表生成 - 历史记录 ### 8. 能耗管理 - 能耗统计（电/水/药剂） - 设备能耗 - 能耗趋势 - 成本分析 ### 9. 资料管理 - 资料分类 - 资料上传 - 资料查询 - 资料下载 ### 10. 物资管理 - 物资库存 - 物资采购 - 物资领用 - 物资盘点 ### 11. 绩效管理 - 绩效指标 - 绩效评分 - 绩效排名 - 绩效报表 ### 12. 系统设置 - 用户管理 - 角色权限 - 系统配置 - 日志管理 ## 🏗️ 技术架构 ### 技术栈 - **前端框架**: Vue 3 (Composition API) - **开发语言**: TypeScript - **构建工具**: Vite - **路由管理**: Vue Router 4 - **3D图形**: Three.js - **工具库**: Lodash ### 项目结构 ``` hypet-vue/ ├── src/ │ ├── App.vue # 主应用组件（顶部导航 + 二级侧边栏） │ ├── main.ts # 应用入口 │ ├── router/ │ │ └── index.ts # 路由配置 │ ├── vue-shims.d.ts # Vue 类型声明文件 │ ├── views/ # 页面视图（60个组件） │ │ ├── dashboard/ # 首页总览 │ │ ├── bigscreen/ # 智慧大屏 │ │ │ └── components/ # 大屏组件（左侧导航/工艺图/右侧面板） │ │ ├── production/ # 生产管理 │ │ ├── safety/ # 安全管理 │ │ ├── equipment/ # 设备管理 │ │ ├── waterquality/ # 化验管理 │ │ ├── reports/ # 生产报表 │ │ ├── energy/ # 能耗管理 │ │ ├── documents/ # 资料管理 │ │ ├── materials/ # 物资管理 │ │ ├── performance/ # 绩效管理 │ │ └── settings/ # 系统设置 │ ├── components/ # 公共组件 │ └── styles/ # 样式文件 ├── public/ # 静态资源 ├── dist/ # 构建输出目录 ├── index.html # HTML 入口文件 ├── package.json # 项目依赖 ├── tsconfig.json # TypeScript 编译配置 ├── tsconfig.node.json # Node.js TypeScript 配置 ├── vite.config.ts # Vite 配置文件 └── README.md # 项目文档 ``` ## 🎨 界面特点 ### 导航系统 - **一级导航**: 顶部横向导航栏，包含11个主模块 - **二级导航**: 左侧侧边栏，根据一级模块动态切换子菜单 - **项目切换**: 支持多项目切换（9个预设项目） ### 响应式设计 - 支持多种屏幕尺寸自适应 - 大屏模式自动隐藏顶部导航和侧边栏 ### 视觉风格 - 简洁现代的UI设计 - 数据可视化图表展示 - 动态时间显示 - 实时状态指示 ## 📊 演示数据 系统预设9个演示项目： 1. 包头装备园区 - 装备制造园区项目 2. 乌兰察布产业园 - 产业园建设项目 3. 恒逸集团（广西）己内酰胺生产废水零排放 - 废水零排放项目 4. 宁夏九泓化工脱盐水与中水及零排放 - 化工水处理项目 5. 银川工业园区零排放项目 - 工业园区零排放 6. 广西柳州某废旧锂电资源化回收 - 锂电回收项目 7. 湖北通城县污水处理厂扩容升级改造项目 - 污水处理升级 8. 河北沧州开发区污水处理厂再生水回用及浓水回用项目 - 再生水回用项目 9. 山东某化工股份有限公司酰胺及尼龙新材料脱盐水处理 - 化工脱盐水处理 ## 🚀 快速开始 ### 环境要求 - Node.js >= 16 - npm >= 7 ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash npm run dev ``` ### 构建生产版本 ```bash npm run build ``` ### 预览构建结果 ```bash npm run preview ``` ### TypeScript 类型检查 ```bash npm run typecheck ``` ## 📝 开发说明 ### 项目特点 - ✅ 全项目使用 TypeScript，提供完整的类型安全 - ✅ Vue 3 Composition API + `