项目：大屏数据展示（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 文件

解析文件把页面中的内容拆分到我的项目中替换原有组件

读取新的UI图

@call-word/UI.png
检查重构的页面是否一致

排版布局错误修改组件尺寸

左侧第一个列从上到下的组件应是
实验室基本情况统计宽1892 高956
实验室安全分级统计宽1892 高1017
实验室进入人数统计及走势宽1892 高591
左侧第二个列从上到下的组件应是
智能环境感知应用设备统计宽1414 高666
实验室设备分类及使用统计宽1414 高1916
左侧第三个列
实时监控宽4282 高2600
左侧第四个列从上到下的组件应是
实验环境安全智能感知宽1892 高1807
实验室实时风险预警宽1892 高775