|
|
@@ -1,101 +0,0 @@
|
|
|
-# 项目：大屏数据展示（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
|
|
|
-
|
|
|
-## 二、核心功能需求
|
|
|
-- 构建一个典型的大屏数据展示系统,分辨率尺寸为9600*2800px
|
|
|
-- 包含以下完整页面：
|
|
|
-
|
|
|
-### 1. 登录页（Login）
|
|
|
-- 表单：用户名/手机号、密码（密码使用 `js-md5` 加密后模拟提交）
|
|
|
-- 验证码（可选，可用模拟验证码 0000）
|
|
|
-- 登录按钮，点击后调用模拟登录API（使用 `axios`，可先mock数据）
|
|
|
-- 登录成功后保存token（使用Vuex存储）并跳转到首页
|
|
|
-- 该页面样式你自行发挥 主要配色与UI图相近即可
|
|
|
-
|
|
|
-### 2. 大屏页面
|
|
|
-- 该页面应由多个组件组成
|
|
|
-- 如 实验室事件情况统计 为一个组件 实实验室安全合格统计为一个组件 如此类推
|
|
|
-- 页面样式严格按照 UI图 样式 项目基础尺寸严格按照9600*2800px制作
|
|
|
-
|
|
|
-## 三、设计风格与规范
|
|
|
-- 样式：统一使用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：实现页面
|
|
|
-- 实现 大屏页面
|
|
|
-- 页面中的视频相关功能不用实现 后期我来处理 只需提供基础box与样式即可
|
|
|
-## 五、附加说明
|
|
|
-- 所有API请求先在 `src/api` 中用 `setTimeout` 模拟返回数据，便于独立开发
|
|
|
-- 代码风格使用函数式组件（Vue2 Options API即可）
|
|
|
-- 注释：复杂逻辑（如图表初始化、加密）需添加注释
|
|
|
-
|
|
|
-**开始执行吧**
|
|
|
-
|
|
|
-# 修改页面
|
|
|
-- 观察UI图 调整4个大区域的比例
|
|
|
-
|
|
|
-# 修改页面
|
|
|
-- 调整4个区域比例 从左至右 第一个区域占比20% 第二个区域占比15% 第三个区域占比45% 第四个区域占比20%
|
|
|
-
|
|
|
-# 修改页面-解析 call-word\index-v2.html 文件
|
|
|
-1. 解析文件 把页面中的内容拆分到我的项目中替换原有组件
|
|
|
-
|
|
|
-# 读取新的UI图
|
|
|
-- @call-word/UI.png
|
|
|
-- 检查重构的页面是否一致
|
|
|
-
|
|
|
-# 排版布局错误 修改组件尺寸
|
|
|
-1. 左侧第一个列 从上到下的组件应是
|
|
|
-- 实验室基本情况统计 宽1892 高956
|
|
|
-- 实验室安全分级统计 宽1892 高1017
|
|
|
-- 实验室进入人数统计及走势 宽1892 高591
|
|
|
-2. 左侧第二个列 从上到下的组件应是
|
|
|
-- 智能环境感知应用设备统计 宽1414 高666
|
|
|
-- 实验室设备分类及使用统计 宽1414 高1916
|
|
|
-3. 左侧第三个列
|
|
|
-- 实时监控 宽4282 高2600
|
|
|
-3. 左侧第四个列 从上到下的组件应是
|
|
|
-- 实验环境安全智能感知 宽1892 高1807
|
|
|
-- 实验室实时风险预警 宽1892 高775
|
dedsudiyu
