chore: 删除过时的文档和计划文件
移除不再使用的文档和计划文件，包括关于echarts依赖、Andon组件调整、画面适配优化、产线追溯页面优化等过时方案
This commit is contained in:
parent
b4a25dc995
commit
d44731f24f
@ -1,54 +0,0 @@
|
||||
# 更好的尺寸变化适配方案
|
||||
|
||||
## 1. 问题分析
|
||||
当前项目使用ResizeObserver监听窗口尺寸变化，通过transform: scale实现大屏适配，但存在以下问题：
|
||||
- ResizeObserver循环错误，尤其是在对话框打开/关闭时
|
||||
- 可能导致文字模糊和交互元素精准度问题
|
||||
- 代码逻辑耦合在App.vue中，不便于维护
|
||||
|
||||
## 2. 优化方案
|
||||
### 2.1 方案选择
|
||||
保留transform: scale的核心逻辑，但优化实现方式，解决ResizeObserver循环问题，同时保持原有设计不变。
|
||||
|
||||
### 2.2 具体实现
|
||||
1. **将尺寸适配逻辑封装成独立组件**
|
||||
- 创建`src/components/ScreenAdapter.vue`组件
|
||||
- 集中管理尺寸适配逻辑，便于维护和复用
|
||||
|
||||
2. **替换ResizeObserver为window.resize事件**
|
||||
- 使用window.resize事件监听窗口变化
|
||||
- 避免ResizeObserver导致的循环问题
|
||||
|
||||
3. **增强防抖和性能优化**
|
||||
- 添加防抖处理，减少频繁触发
|
||||
- 使用requestAnimationFrame确保DOM更新在浏览器重绘前完成
|
||||
- 添加严格的尺寸变化检查
|
||||
|
||||
4. **优化缩放逻辑**
|
||||
- 确保缩放操作不会触发新的尺寸变化
|
||||
- 只有当实际需要时才更新DOM样式
|
||||
|
||||
5. **添加错误处理和边界情况处理**
|
||||
- 处理极端尺寸情况
|
||||
- 添加错误捕获机制
|
||||
|
||||
## 3. 实现步骤
|
||||
1. 创建`ScreenAdapter.vue`组件
|
||||
2. 实现优化后的尺寸适配逻辑
|
||||
3. 在App.vue中使用新组件替换原有逻辑
|
||||
4. 测试不同场景下的适配效果
|
||||
5. 验证ResizeObserver循环错误是否解决
|
||||
|
||||
## 4. 预期效果
|
||||
- 解决ResizeObserver循环错误
|
||||
- 保持原有设计和布局不变
|
||||
- 提高适配性能和稳定性
|
||||
- 代码结构更清晰，便于维护
|
||||
- 支持各种尺寸的屏幕适配
|
||||
|
||||
## 5. 技术要点
|
||||
- Vue 3 Composition API
|
||||
- 防抖函数优化
|
||||
- requestAnimationFrame应用
|
||||
- 组件化设计
|
||||
- 性能优化
|
||||
@ -1,50 +0,0 @@
|
||||
# 修复画面超出屏幕问题
|
||||
|
||||
## 1. 问题分析
|
||||
- 画面超出屏幕的主要原因是当前的缩放逻辑存在问题
|
||||
- App.vue中设置了固定的body和#app尺寸（1920x1080）
|
||||
- ScreenAdapter组件的缩放逻辑可能计算错误
|
||||
- 可能存在缩放比例方向错误的问题
|
||||
|
||||
## 2. 修复方案
|
||||
### 2.1 方案选择
|
||||
- 调整缩放逻辑，使用等比例缩放并限制最大缩放比例
|
||||
- 确保内容始终在屏幕范围内
|
||||
- 保持原有设计的视觉效果
|
||||
|
||||
### 2.2 具体实现
|
||||
1. **修改ScreenAdapter组件**
|
||||
- 更改缩放比例计算逻辑，使用等比例缩放
|
||||
- 添加屏幕边界限制，确保内容不超出屏幕
|
||||
- 优化缩放比例方向
|
||||
|
||||
2. **调整App.vue样式**
|
||||
- 移除或调整固定的body和#app尺寸
|
||||
- 确保根元素能自适应屏幕
|
||||
|
||||
3. **优化缩放策略**
|
||||
- 使用最小缩放比例，确保内容完全显示
|
||||
- 调整transform-origin，确保内容居中显示
|
||||
- 处理不同屏幕比例的适配
|
||||
|
||||
## 3. 实现步骤
|
||||
1. 修改ScreenAdapter组件的缩放计算逻辑
|
||||
2. 调整缩放比例，使用等比例缩放
|
||||
3. 添加屏幕边界限制
|
||||
4. 调整App.vue的样式设置
|
||||
5. 测试不同屏幕尺寸下的显示效果
|
||||
6. 验证画面是否不再超出屏幕
|
||||
|
||||
## 4. 预期效果
|
||||
- 画面不再超出屏幕
|
||||
- 保持原有设计的视觉效果
|
||||
- 内容居中显示
|
||||
- 适配不同尺寸的屏幕
|
||||
- 保持良好的用户体验
|
||||
|
||||
## 5. 技术要点
|
||||
- 等比例缩放计算
|
||||
- 屏幕边界限制
|
||||
- transform-origin调整
|
||||
- 响应式设计
|
||||
- 不同屏幕比例适配
|
||||
@ -1,45 +0,0 @@
|
||||
# 恢复最初的尺寸适配模式
|
||||
|
||||
## 1. 问题分析
|
||||
当前使用ScreenAdapter组件的样式出现问题，需要恢复到最初的ResizeObserver实现模式。
|
||||
|
||||
## 2. 恢复方案
|
||||
### 2.1 主要修改点
|
||||
1. **移除ScreenAdapter组件**：从App.vue中移除ScreenAdapter组件的引用和使用
|
||||
2. **恢复ResizeObserver实现**：恢复到最初的ResizeObserver监听窗口尺寸变化的实现
|
||||
3. **恢复原始样式**：将App.vue的样式恢复到最初的固定尺寸设置
|
||||
4. **移除ScreenAdapter组件文件**：删除不再使用的ScreenAdapter.vue文件
|
||||
|
||||
### 2.2 具体实现
|
||||
1. **修改App.vue**：
|
||||
- 移除ScreenAdapter组件的引入和使用
|
||||
- 恢复最初的ResizeObserver实现
|
||||
- 恢复body和#app的固定尺寸设置
|
||||
|
||||
2. **删除ScreenAdapter.vue**：
|
||||
- 删除src/components/ScreenAdapter.vue文件
|
||||
|
||||
3. **恢复ResizeObserver逻辑**：
|
||||
- 使用最初的ResizeObserver实现，但保留之前的优化（如setTimeout打破循环）
|
||||
- 确保ResizeObserver不会导致循环错误
|
||||
|
||||
## 3. 实现步骤
|
||||
1. 修改App.vue，移除ScreenAdapter组件
|
||||
2. 恢复ResizeObserver实现
|
||||
3. 恢复原始样式设置
|
||||
4. 删除ScreenAdapter.vue文件
|
||||
5. 重启开发服务器测试
|
||||
6. 验证样式是否恢复正常
|
||||
|
||||
## 4. 预期效果
|
||||
- 样式恢复到最初的正常状态
|
||||
- 保留之前对ResizeObserver循环错误的修复
|
||||
- 画面不再超出屏幕
|
||||
- 保持良好的用户体验
|
||||
|
||||
## 5. 技术要点
|
||||
- Vue 3 Composition API
|
||||
- ResizeObserver实现
|
||||
- 样式恢复
|
||||
- 组件移除
|
||||
- 开发服务器测试
|
||||
@ -1,55 +0,0 @@
|
||||
# 产线追溯页面优化方案
|
||||
|
||||
## 1. 问题分析
|
||||
- **背景颜色**：当前页面使用深色背景（#2c3e50），需要改为淡色背景
|
||||
- **文字样式**：文字颜色需要调整以适应淡色背景，确保可读性
|
||||
- **详情按钮延迟**：点击详情按钮时存在延迟，需要优化异步操作
|
||||
|
||||
## 2. 优化方案
|
||||
### 2.1 淡色背景实现
|
||||
- 将主容器和相关组件的背景色改为淡色系（如#f5f7fa）
|
||||
- 保持标题和关键元素的视觉突出
|
||||
- 调整边框和阴影，增强层次感
|
||||
|
||||
### 2.2 文字样式调整
|
||||
- 更改文字颜色为深色，确保在淡色背景上的可读性
|
||||
- 调整字体大小和行高，优化阅读体验
|
||||
- 突出关键信息，如追溯码、状态等
|
||||
|
||||
### 2.3 详情按钮延迟优化
|
||||
- 立即显示加载状态，提升用户感知
|
||||
- 优化异步数据请求，减少等待时间
|
||||
- 调整数据获取逻辑，优先显示关键信息
|
||||
|
||||
## 3. 实现步骤
|
||||
1. **修改背景颜色**：
|
||||
- 更改.trace-container的background-color
|
||||
- 调整.trace-search-form和.trace-results的背景色
|
||||
- 修改对话框和其他组件的背景色
|
||||
|
||||
2. **调整文字样式**：
|
||||
- 修改标题和内容文字颜色
|
||||
- 调整表单标签和输入框文字颜色
|
||||
- 优化表格文字样式
|
||||
|
||||
3. **优化详情按钮**：
|
||||
- 在handleViewDetail函数中立即显示对话框
|
||||
- 添加加载状态指示器
|
||||
- 优化数据请求逻辑，并行获取数据
|
||||
|
||||
4. **测试和调整**：
|
||||
- 测试页面在淡色背景下的显示效果
|
||||
- 验证文字可读性
|
||||
- 检查详情按钮的响应速度
|
||||
|
||||
## 4. 预期效果
|
||||
- 页面背景改为淡色系，视觉体验更舒适
|
||||
- 文字清晰可读，关键信息突出
|
||||
- 详情按钮点击后立即响应，显示加载状态
|
||||
- 整体风格统一，符合现代UI设计
|
||||
|
||||
## 5. 技术要点
|
||||
- CSS变量或统一的颜色管理
|
||||
- 异步操作优化
|
||||
- 响应式设计原则
|
||||
- 良好的用户体验设计
|
||||
@ -1,52 +0,0 @@
|
||||
## 调整Andon组件逻辑方案
|
||||
|
||||
### 问题分析
|
||||
|
||||
当前Andon组件的显示逻辑是基于`isSuccess`状态，成功后显示签到按钮。需要修改为根据全局`andonAlarmStatus`状态来决定显示内容：
|
||||
|
||||
* 当处于报警中时，直接显示签到按钮
|
||||
|
||||
* 当处于正常状态时，显示报警相关逻辑
|
||||
|
||||
### 修改内容
|
||||
|
||||
1. **修改模板结构**
|
||||
|
||||
* 将原来的`v-if="!isSuccess"`条件判断改为基于`andonAlarmStatus`状态
|
||||
|
||||
* 新增报警中状态的显示区域，包含签到按钮和相关信息
|
||||
|
||||
* 保留正常状态下的报警表单和成功后的显示逻辑
|
||||
|
||||
2. **调整组件逻辑**
|
||||
|
||||
* 简化`onOpen`函数，根据状态决定是否需要获取报警类型
|
||||
|
||||
* 确保签到功能在两种状态下都能正常工作
|
||||
|
||||
* 保持状态管理的一致性
|
||||
|
||||
3. **具体代码修改**
|
||||
|
||||
* 在`src/views/menu/andon/index.vue`中修改template部分
|
||||
|
||||
* 调整相关函数逻辑
|
||||
|
||||
### 预期效果
|
||||
|
||||
* 当Andon处于报警中时，打开弹窗直接显示签到按钮
|
||||
|
||||
* 当Andon处于正常状态时，显示原来的报警表单
|
||||
|
||||
* 签到成功后，自动关闭弹窗并更新全局状态
|
||||
|
||||
### 技术要点
|
||||
|
||||
* 使用Vue 3的Composition API
|
||||
|
||||
* 基于vuex的全局状态管理
|
||||
|
||||
* 响应式设计，状态变化自动更新UI
|
||||
|
||||
* 保持良好的用户体验
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
# 修改报工功能为暂停/重启工单功能
|
||||
|
||||
## 1. 需求分析
|
||||
- 砍掉现有报工数功能
|
||||
- 在相同位置添加暂停工单与重启工单按钮
|
||||
- 预留对应方法的实现
|
||||
|
||||
## 2. 修改内容
|
||||
|
||||
### 2.1 删除报工数按钮
|
||||
- 删除第139-141行的报工数按钮代码
|
||||
|
||||
### 2.2 添加新按钮
|
||||
在原报工数按钮位置添加两个新按钮：
|
||||
- 暂停工单按钮（使用warning类型）
|
||||
- 重启工单按钮（使用success类型）
|
||||
|
||||
### 2.3 添加对应方法
|
||||
在脚本部分添加两个新的方法：
|
||||
- `handlerPauseOrder`：处理暂停工单逻辑
|
||||
- `handlerRestartOrder`：处理重启工单逻辑
|
||||
|
||||
## 3. 具体实现
|
||||
|
||||
### 3.1 按钮替换
|
||||
将第139-141行的代码：
|
||||
```html
|
||||
<el-button :disabled="!workOrderInfo.workorder" class="action-button" type="warning" size="large" @click="handlerShowReportCode"
|
||||
>报工数{{ reportNum }}</el-button
|
||||
>
|
||||
```
|
||||
替换为：
|
||||
```html
|
||||
<el-button :disabled="!workOrderInfo.workorder" class="action-button" type="warning" size="large" @click="handlerPauseOrder"
|
||||
>暂停工单</el-button
|
||||
>
|
||||
<el-button :disabled="!workOrderInfo.workorder" class="action-button" type="success" size="large" @click="handlerRestartOrder"
|
||||
>重启工单</el-button
|
||||
>
|
||||
```
|
||||
|
||||
### 3.2 添加方法
|
||||
在脚本部分添加两个新方法：
|
||||
```javascript
|
||||
// 暂停工单
|
||||
function handlerPauseOrder() {
|
||||
// TODO: 实现暂停工单逻辑
|
||||
console.log('暂停工单')
|
||||
}
|
||||
|
||||
// 重启工单
|
||||
function handlerRestartOrder() {
|
||||
// TODO: 实现重启工单逻辑
|
||||
console.log('重启工单')
|
||||
}
|
||||
```
|
||||
|
||||
## 4. 注意事项
|
||||
- 保持新按钮的样式和布局与其他按钮一致
|
||||
- 保持按钮的disabled条件与其他按钮一致
|
||||
- 新方法命名遵循现有命名规范
|
||||
- 新方法中预留实现逻辑的位置，但暂时不需要具体实现
|
||||
@ -1,21 +0,0 @@
|
||||
# 添加echarts依赖计划
|
||||
|
||||
## 1. 安装echarts依赖
|
||||
- 使用yarn命令安装echarts：`yarn add echarts`
|
||||
- 这将在package.json中添加echarts依赖，并安装到node_modules目录
|
||||
|
||||
## 2. 验证安装
|
||||
- 检查package.json文件，确认echarts已被添加到dependencies中
|
||||
- 验证node_modules目录中是否存在echarts文件夹
|
||||
|
||||
## 3. 提供使用示例
|
||||
- 创建一个简单的echarts组件示例，展示如何在Vue 3项目中使用echarts
|
||||
- 示例包括基本的图表初始化、数据配置和响应式更新
|
||||
|
||||
## 4. 测试运行
|
||||
- 启动开发服务器，确保添加依赖后项目能正常构建和运行
|
||||
|
||||
## 5. 相关说明
|
||||
- echarts完全兼容Vue 3
|
||||
- 支持按需引入，可根据项目需要只引入必要的图表模块
|
||||
- 提供了丰富的图表类型和配置选项，适用于各种数据可视化场景
|
||||
@ -1,33 +0,0 @@
|
||||
## 调整Andon组件逻辑方案
|
||||
|
||||
### 问题分析
|
||||
当前Andon组件的显示逻辑是基于`isSuccess`状态，成功后显示签到按钮。需要修改为根据全局`andonAlarmStatus`状态来决定显示内容：
|
||||
- 当处于报警中时，直接显示签到按钮
|
||||
- 当处于正常状态时，显示报警相关逻辑
|
||||
|
||||
### 修改内容
|
||||
|
||||
1. **修改模板结构**
|
||||
- 将原来的`v-if="!isSuccess"`条件判断改为基于`andonAlarmStatus`状态
|
||||
- 新增报警中状态的显示区域，包含签到按钮和相关信息
|
||||
- 保留正常状态下的报警表单和成功后的显示逻辑
|
||||
|
||||
2. **调整组件逻辑**
|
||||
- 简化`onOpen`函数，根据状态决定是否需要获取报警类型
|
||||
- 确保签到功能在两种状态下都能正常工作
|
||||
- 保持状态管理的一致性
|
||||
|
||||
3. **具体代码修改**
|
||||
- 在`src/views/menu/andon/index.vue`中修改template部分
|
||||
- 调整相关函数逻辑
|
||||
|
||||
### 预期效果
|
||||
- 当Andon处于报警中时，打开弹窗直接显示签到按钮
|
||||
- 当Andon处于正常状态时，显示原来的报警表单
|
||||
- 签到成功后，自动关闭弹窗并更新全局状态
|
||||
|
||||
### 技术要点
|
||||
- 使用Vue 3的Composition API
|
||||
- 基于vuex的全局状态管理
|
||||
- 响应式设计，状态变化自动更新UI
|
||||
- 保持良好的用户体验
|
||||
Loading…
x
Reference in New Issue
Block a user