lc_frontend/src/views/screen/components

大屏组件库

本目录包含大屏相关的可复用组件。

组件列表

HighRiskAlertPanel.vue

高风险告警面板组件，用于显示高风险告警信息和详情列表。

Props:

• alertData: 告警数据对象
  • total: 告警总数
  • processed: 已处理数量
  • pending: 待处理/处理中数量
• alertDetails: 告警详情列表数组
• sourceIndex: 源索引值，默认为1

使用示例:

<HighRiskAlertPanel 
  :alertData="dashboardData?.alertData"
  :alertDetails="sourceAcitve"
  :sourceIndex="sourceIndex"
/>

特性:

• 响应式设计，支持不同屏幕尺寸
• 包含告警统计信息和详情列表
• 支持错误和警告状态的样式区分
• 背景图片和样式完全独立

TimeoutWorkOrderPanel.vue

超时工单面板组件，用于显示超时工单信息和详情列表。

Props:

• timeoutWorkOrders: 超时工单数据对象
  • total: 超时工单总数
• alertDetails: 告警详情列表数组
• sourceIndex: 源索引值，默认为1

使用示例:

<TimeoutWorkOrderPanel 
  :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
  :alertDetails="sourceAcitve"
  :sourceIndex="sourceIndex"
/>

特性:

• 响应式设计，支持不同屏幕尺寸
• 包含超时工单统计信息和详情列表
• 支持错误和警告状态的样式区分
• 背景图片和样式完全独立

OverviewPanel.vue

总体概览面板组件，显示人员统计信息。

RiskStatisticsPanel.vue

风险统计面板组件，显示风险相关的统计数据。

WeatherWarning.vue

天气预警组件，显示天气相关信息。

RegionSelector.vue

区域选择器组件，用于选择不同的区域。

AlertPanel.vue

告警面板组件。

AlertList.vue

告警列表组件。

HiddenDangerPanel.vue

隐患面板组件。

DashboardHeader.vue

仪表板头部组件。

ScreenFrame.vue

大屏框架组件。

ParkCenter.vue

园区中心组件。

ParkPoint.vue

园区点位组件。

PointInfoPopup.vue

点位信息弹窗组件。

ParkSelector.vue

园区选择器组件。

RightPanel.vue

右侧面板组件。

LeftPanel.vue

左侧面板组件。

HeaderSection.vue

头部区域组件。

使用说明

1. 所有组件都支持响应式设计
2. 组件样式使用 scoped 作用域，避免样式冲突
3. 组件间通过 props 传递数据
4. 支持 TypeScript 类型定义
5. 遵循 Vue 3 Composition API 规范

注意事项

• 确保图片资源路径正确
• 组件依赖特定的数据结构，请按照接口定义传递数据
• 样式使用 SCSS 预处理器
• 响应式断点：768px, 480px