|
|
@@ -0,0 +1,158 @@
|
|
|
+# 项目:大屏数据展示(Vue2)
|
|
|
+
|
|
|
+## 一、项目基础信息
|
|
|
+- **项目名称**:大屏数据展示
|
|
|
+- **技术栈**:
|
|
|
+ - 框架:Vue 2.7.x
|
|
|
+ - 构建工具:@vue/cli 4/5
|
|
|
+ - UI组件库:Element UI(完整引入)
|
|
|
+ - 状态管理:Vuex 3.x
|
|
|
+ - 路由:Vue Router 3.x
|
|
|
+ - HTTP请求:axios
|
|
|
+ - 图表:ECharts 5
|
|
|
+ - 工具库:js-md5(用于密码加密)
|
|
|
+ - CSS预处理器:Sass(使用 `node-sass` 或 `sass`)
|
|
|
+ - 包管理器:npm
|
|
|
+- **Node版本要求**:>= 14.0
|
|
|
+
|
|
|
+## 二、核心功能需求
|
|
|
+- 构建一个典型的大屏数据展示系统,分辨率尺寸为1920*1080
|
|
|
+- 包含以下完整页面:
|
|
|
+
|
|
|
+### 1. 登录页(Login)
|
|
|
+- 表单:用户名/手机号、密码(密码使用 `js-md5` 加密后模拟提交)
|
|
|
+- 验证码(可选,可用模拟验证码 0000)
|
|
|
+- 登录按钮,点击后调用模拟登录API(使用 `axios`,可先mock数据)
|
|
|
+- 登录成功后保存token(使用Vuex存储)并跳转到首页
|
|
|
+- 该页面样式你自行发挥 主要配色与UI图相近即可
|
|
|
+
|
|
|
+### 2. 大屏页面 - 实验室情况
|
|
|
+- 该页面应由多个组件组成
|
|
|
+- 如 实验室基本情况统计 为一个组件 实验室安全分级统计为一个组件 如此类推
|
|
|
+- 页面样式严格按照 UI图 样式 项目基础尺寸严格按照1920*1080制作
|
|
|
+### 3. 大屏页面 - 视频监控
|
|
|
+- 该页面应由多个组件组成
|
|
|
+- 如 建筑结构导航 为一个组件 视频展示区 为一个组件
|
|
|
+- 视频相关功能不用实现 后期我来处理 只需提供基础box与样式即可
|
|
|
+- 页面样式严格按照 UI图 样式 项目基础尺寸严格按照1920*1080制作
|
|
|
+
|
|
|
+## 三、设计风格与规范
|
|
|
+- 样式:统一使用Sass编写自定义样式,变量文件统一管理
|
|
|
+
|
|
|
+## 四、执行计划(请严格按照步骤执行,每步完成后暂停等待确认)
|
|
|
+
|
|
|
+### 步骤1:初始化项目骨架
|
|
|
+- 使用 `vue create` 创建项目,选择以下特性:
|
|
|
+ - Babel
|
|
|
+ - Router(使用history模式)
|
|
|
+ - Vuex
|
|
|
+ - CSS Pre-processors(选择Sass/SCSS)
|
|
|
+- 删除默认的HelloWorld组件,清理App.vue
|
|
|
+- 安装依赖:`element-ui`、`axios`、`echarts`、`js-md5`
|
|
|
+- 在 `main.js` 中完整引入Element UI和样式
|
|
|
+- 创建基本目录结构:
|
|
|
+src/
|
|
|
+api/ # axios接口封装
|
|
|
+assets/ # 静态资源
|
|
|
+components/ # 公共组件
|
|
|
+router/ # 路由配置
|
|
|
+store/ # Vuex模块
|
|
|
+styles/ # 全局样式
|
|
|
+utils/ # 工具函数
|
|
|
+views/ # 页面视图
|
|
|
+
|
|
|
+- 配置 `vue.config.js`(如有必要,可设置别名等)
|
|
|
+
|
|
|
+
|
|
|
+### 步骤2:配置路由和基础布局
|
|
|
+- 在 `router/index.js` 中配置登录页(/login)
|
|
|
+- 在 `App.vue` 中放置路由视图
|
|
|
+
|
|
|
+### 步骤3:实现页面
|
|
|
+- 实现页面 实验室情况 与 视频监控
|
|
|
+## 五、附加说明
|
|
|
+- 所有API请求先在 `src/api` 中用 `setTimeout` 模拟返回数据,便于独立开发
|
|
|
+- 代码风格使用函数式组件(Vue2 Options API即可)
|
|
|
+- 注释:复杂逻辑(如图表初始化、加密)需添加注释
|
|
|
+
|
|
|
+**开始执行吧**
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+- 检查 @实验室情况UI图.png UI设计稿
|
|
|
+- 对比 src\views\LabStatus.vue 页面
|
|
|
+- 严格按照UI设计稿执行
|
|
|
+
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. 检查 @实验室情况UI图.png UI设计稿
|
|
|
+2. src\views\LabStatus.vue 实验室基本情况统计
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室基本情况统计 应在左列 第一个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室基本情况统计.png 按照此图修改
|
|
|
+3. src\views\LabStatus.vue 实验室安全分级统计
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室安全分级统计 应在左列 第二个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室安全分级统计.png 按照此图修改
|
|
|
+4. src\views\LabStatus.vue 实验室进入人数统计及走势
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室进入人数统计及走势 应在左列 第三个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室进入人数统计及走势.png 按照此图修改
|
|
|
+5. src\views\LabStatus.vue 实验室环境安全智能感知
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室环境安全智能感知 应在中列 第一个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室环境安全智能感知.png 按照此图修改
|
|
|
+6. src\views\LabStatus.vue 实验室实时风险预警
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室实时风险预警 应在中列 第二个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室实时风险预警.png 按照此图修改
|
|
|
+7. src\views\LabStatus.vue 智能环境感知应用设备统计
|
|
|
+- 对比UI图
|
|
|
+- 页面中 智能环境感知应用设备统计 应在右列 第一个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/智能环境感知应用设备统计.png 按照此图修改
|
|
|
+8. src\views\LabStatus.vue 实验室设备分类及使用统计
|
|
|
+- 对比UI图
|
|
|
+- 页面中 实验室设备分类及使用统计 应在右列 第二个模块
|
|
|
+- 我单独提供了该组件UI样式在 @call-word/实验室设备分类及使用统计.png 按照此图修改
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. src\views\LabStatus.vue 内的 实验室环境安全智能感知 模块
|
|
|
+- 数据多时应自动滚动
|
|
|
+- 异常数据 红色标记时应由虚影边框与透明背景 颜色与报警红色一致
|
|
|
+2. src\views\LabStatus.vue 内的 实验室实时风险预警 模块
|
|
|
+- 数据多时应自动滚动
|
|
|
+- 字符 "异常" 与后面的红色文字应为黄色 #FFB020 '12'这个月份颜色也是#FFB020
|
|
|
+3. src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
|
|
|
+- 图表渐变色 应由3个颜色组成 从数据数值低到高 分别为 #144366 #226D8E #47D7FF 的渐变
|
|
|
+4. src\views\LabStatus.vue 内的 实验室设备分类及使用统计 模块
|
|
|
+- 设备总数/使用总时长/设备使用率/使用 数据的数字 颜色应为 #47D7FF
|
|
|
+- 空闲 数据的数字 颜色应为 #33C391
|
|
|
+- 正常 数据的数字 颜色应为 #EDA525
|
|
|
+- 维修 数据的数字 颜色应为 #E9494E
|
|
|
+5. 页面右上角的管理员相关文字与小图标删除
|
|
|
+- 原位置增加 地区天气 如:北京·晴18°C
|
|
|
+- 数据又后台对接
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. src\views\LabStatus.vue 内的 实验室环境安全智能感知 模块
|
|
|
+- 正常数据 时应由虚影边框与透明背景 颜色使用 #0F2D4D
|
|
|
+- 增加数据多时滚动功能 正常显示8或9条数据(根据尺寸你可自行决定) 超过时滚动(无限滚动-不要数据一跳一跳的)
|
|
|
+2. src\views\LabStatus.vue 内的 实验室实时风险预警 模块
|
|
|
+- 增加数据多时滚动功能 正常显示3或4条数据(根据尺寸你可自行决定) 超过时滚动(无限滚动-不要数据一跳一跳的)
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. 检查 实验室环境安全智能感知 与 实验室实时风险预警 模块的滚动功能
|
|
|
+- 我在API接口模拟数据内增加了数据数量 现在页面没有滚动
|
|
|
+
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. src\views\LabStatus.vue 内的 实验室基本情况统计 模块
|
|
|
+- 使用 数据的数字 颜色应为 #3EBCE3
|
|
|
+- 异常 数据的数字 颜色应为 #EE4A4E
|
|
|
+- 空闲 数据的数字 颜色应为 #33C793
|
|
|
+2. src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
|
|
|
+- 离线设备 文字与数据数字 颜色应为 #7EACC8
|
|
|
+
|
|
|
+
|
|
|
+# 修改页面
|
|
|
+1. src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
|
|
|
+- 在线设备 文字 颜色应为 #7EACC8 数据数字颜色保持不变
|