play.md 8.1 KB
项目：大屏数据展示（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设计稿执行
修改页面
- 检查 @实验室情况UI图.png UI设计稿
- src\views\LabStatus.vue 实验室基本情况统计
- 对比UI图
- 页面中 实验室基本情况统计 应在左列 第一个模块
- 我单独提供了该组件UI样式在 @call-word/实验室基本情况统计.png 按照此图修改
- src\views\LabStatus.vue 实验室安全分级统计
- 对比UI图
- 页面中 实验室安全分级统计 应在左列 第二个模块
- 我单独提供了该组件UI样式在 @call-word/实验室安全分级统计.png 按照此图修改
- src\views\LabStatus.vue 实验室进入人数统计及走势
- 对比UI图
- 页面中 实验室进入人数统计及走势 应在左列 第三个模块
- 我单独提供了该组件UI样式在 @call-word/实验室进入人数统计及走势.png 按照此图修改
- src\views\LabStatus.vue 实验室环境安全智能感知
- 对比UI图
- 页面中 实验室环境安全智能感知 应在中列 第一个模块
- 我单独提供了该组件UI样式在 @call-word/实验室环境安全智能感知.png 按照此图修改
- src\views\LabStatus.vue 实验室实时风险预警
- 对比UI图
- 页面中 实验室实时风险预警 应在中列 第二个模块
- 我单独提供了该组件UI样式在 @call-word/实验室实时风险预警.png 按照此图修改
- src\views\LabStatus.vue 智能环境感知应用设备统计
- 对比UI图
- 页面中 智能环境感知应用设备统计 应在右列 第一个模块
- 我单独提供了该组件UI样式在 @call-word/智能环境感知应用设备统计.png 按照此图修改
- src\views\LabStatus.vue 实验室设备分类及使用统计
- 对比UI图
- 页面中 实验室设备分类及使用统计 应在右列 第二个模块
- 我单独提供了该组件UI样式在 @call-word/实验室设备分类及使用统计.png 按照此图修改
修改页面
- src\views\LabStatus.vue 内的 实验室环境安全智能感知 模块
- 数据多时应自动滚动
- 异常数据 红色标记时应由虚影边框与透明背景 颜色与报警红色一致
- src\views\LabStatus.vue 内的 实验室实时风险预警 模块
- 数据多时应自动滚动
- 字符 "异常" 与后面的红色文字应为黄色 #FFB020 '12'这个月份颜色也是#FFB020
- src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
- 图表渐变色 应由3个颜色组成 从数据数值低到高 分别为 #144366 #226D8E #47D7FF 的渐变
- src\views\LabStatus.vue 内的 实验室设备分类及使用统计 模块
- 设备总数/使用总时长/设备使用率/使用 数据的数字 颜色应为 #47D7FF
- 空闲 数据的数字 颜色应为 #33C391
- 正常 数据的数字 颜色应为 #EDA525
- 维修 数据的数字 颜色应为 #E9494E
- 页面右上角的管理员相关文字与小图标删除
- 原位置增加 地区天气 如:北京·晴18°C
- 数据又后台对接
修改页面
- src\views\LabStatus.vue 内的 实验室环境安全智能感知 模块
- 正常数据 时应由虚影边框与透明背景 颜色使用 #0F2D4D
- 增加数据多时滚动功能 正常显示8或9条数据(根据尺寸你可自行决定) 超过时滚动(无限滚动-不要数据一跳一跳的)
- src\views\LabStatus.vue 内的 实验室实时风险预警 模块
- 增加数据多时滚动功能 正常显示3或4条数据(根据尺寸你可自行决定) 超过时滚动(无限滚动-不要数据一跳一跳的)
修改页面
- 检查 实验室环境安全智能感知 与 实验室实时风险预警 模块的滚动功能
- 我在API接口模拟数据内增加了数据数量 现在页面没有滚动
修改页面
- src\views\LabStatus.vue 内的 实验室基本情况统计 模块
- 使用 数据的数字 颜色应为 #3EBCE3
- 异常 数据的数字 颜色应为 #EE4A4E
- 空闲 数据的数字 颜色应为 #33C793
- src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
- 离线设备 文字与数据数字 颜色应为 #7EACC8
修改页面
- src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块
- 在线设备 文字 颜色应为 #7EACC8 数据数字颜色保持不变
修改页面
- header组件内 .screen-header下的after
- 期望改为流光效果 从左到右 最高亮的颜色为 #3BAFD6
修改页面
- 页面下 多个组件的边框 .panel-box 也期望加入流光效果 最高亮的颜色为 #3BAFD6
- 包含的页面有 实验室基本情况统计/实验室安全分级统计/实验室进入人数统计及走势/实验环境安全智能感知/实验室实时风险预警/智能环境感知应用设备统计/实验室设备分类及使用统计
修改页面
- 页面下 刚才组件增加的流光效果 期望是旋转的 由坐上流转到右上再流转到右下再流转到左下再流转到左上 如此循环
- 包含的页面有 实验室基本情况统计/实验室安全分级统计/实验室进入人数统计及走势/实验环境安全智能感知/实验室实时风险预警/智能环境感知应用设备统计/实验室设备分类及使用统计
修改页面
- 刚才的流光修改 我透过组件的透明背景可以看到旋转的锥形体 我不期望看到他