lc_frontend/src/views/screen

大屏页面重构说明

重构目标

将原本混乱的单文件组件重构为清晰、可维护的模块化结构，提高代码的可读性和可维护性。

重构后的项目结构

src/views/screen/
├── mainScreenV1.vue          # 主组件（已重构）
├── components/               # 子组件目录
│   ├── DashboardHeader.vue   # 顶部标题栏组件
│   ├── OverviewPanel.vue     # 总体概览面板组件
│   ├── RiskStatisticsPanel.vue # 风险统计面板组件
│   ├── AlertPanel.vue        # 告警面板组件
│   ├── HiddenDangerPanel.vue # 隐患排查治理面板组件
│   ├── RegionSelector.vue    # 区域选择弹窗组件
│   └── WeatherWarning.vue    # 天气预报组件
├── composables/              # 组合式函数目录
│   ├── useDashboardData.ts   # 大屏数据管理
│   ├── useTimeManager.ts     # 时间管理
│   ├── useRegionManager.ts   # 区域管理
│   ├── useTabManager.ts      # 标签页管理
│   └── useAlertManager.ts    # 告警管理
└── README.md                 # 说明文档

主要改进

1. 组件化拆分

• 将原本的单文件组件拆分为多个功能明确的子组件
• 每个组件负责特定的功能区域，职责单一
• 提高组件的复用性和可测试性

2. 逻辑分离

• 使用组合式函数（Composables）将业务逻辑从组件中分离
• 每个组合式函数负责特定的功能领域
• 逻辑更清晰，易于维护和测试

3. 数据流优化

• 统一的数据管理，通过props向下传递，事件向上传递
• 清晰的数据流向，避免数据混乱
• 更好的状态管理和响应式更新

4. 代码结构优化

• 主组件只负责组合和协调子组件
• 子组件专注于自己的渲染逻辑
• 组合式函数专注于业务逻辑处理

组合式函数说明

useDashboardData

• 管理大屏的核心数据
• 处理数字动画效果
• 提供数据初始化和更新方法

useTimeManager

• 管理时间显示和更新
• 自动清理定时器，避免内存泄漏

useRegionManager

• 管理区域选择相关状态
• 处理区域选择弹窗的显示/隐藏

useTabManager

• 管理标签页切换状态
• 提供标签页变更处理方法

useAlertManager

• 管理告警数据的轮播显示
• 自动获取和更新告警详情

使用方法

1. 主组件

<template>
  <div class="dashboard-container">
    <DashboardHeader 
      :current-time="currentTime"
      :selected-region="selectedRegion"
      @open-region-selector="openRegionSelector"
    />
    <!-- 其他组件... -->
  </div>
</template>

<script setup lang="ts">
import { useDashboardData, useTimeManager } from './composables'

const { dashboardData, initDashboardData } = useDashboardData()
const { currentTime, startTimeUpdate } = useTimeManager()

onMounted(async () => {
  startTimeUpdate()
  await initDashboardData()
})
</script>

2. 子组件

<template>
  <div class="panel">
    <h3>{{ title }}</h3>
    <div class="content">
      <!-- 组件内容 -->
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  data?: any
}

defineProps<Props>()
</script>

3. 组合式函数

export function useCustomHook() {
  const state = ref()
  
  const method = () => {
    // 业务逻辑
  }
  
  return {
    state,
    method
  }
}

响应式设计

所有组件都保持了原有的响应式设计，支持不同屏幕尺寸的适配：

• 1200px 以下
• 1024px 以下
• 768px 以下
• 480px 以下

注意事项

1. 确保所有依赖的图片资源路径正确
2. 检查API接口的兼容性
3. 测试所有功能模块的正常工作
4. 验证响应式设计的正确性

后续优化建议

1. 添加错误边界处理
2. 实现组件的懒加载
3. 添加单元测试
4. 优化性能，减少不必要的重渲染
5. 添加TypeScript类型检查的严格模式