# vue3-template

**Repository Path**: daxiangchaorou/vue3-template

## Basic Information

- **Project Name**: vue3-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-05
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 技防设备监控大屏系统

## 项目简介

这是一个基于HTML、CSS、JavaScript开发的技防设备监控大屏系统，用于实时监控和管理各种技防设备的状态和告警信息。

## 功能特性

### 支持的技防设备类型

1. **智能阴保设备** - 阴极保护系统监控
2. **视频监控设备** - 视频图像监控（含预置位功能）
3. **地质灾害监测设备** - 地质灾害预警系统
4. **无人机设备** - 无人机监控和飞行路径
5. **光纤告警设备** - 光纤传感告警系统
6. **激光甲烷检测设备** - 激光甲烷浓度检测
7. **断线报警设备** - 断线检测和报警
8. **电子工牌设备** - 人员定位和身份识别

### 核心功能

- **实时监控大屏** - 大屏展示所有设备状态和告警信息
- **二三维电子地图** - 基于Leaflet的地图展示，支持2D/3D切换
- **设备状态监控** - 实时显示设备在线/离线/告警状态
- **告警管理** - 告警信息汇总、筛选和处理
- **数据可视化** - 使用ECharts展示统计图表
- **响应式设计** - 支持不同屏幕尺寸

## 技术栈

- **前端框架**: 原生HTML5 + CSS3 + JavaScript
- **地图库**: Leaflet.js
- **图表库**: ECharts
- **样式**: 自定义CSS + 响应式设计
- **图标**: SVG + CSS动画

## 项目结构

```
security-monitor-dashboard/
├── index.html              # 主页面
├── css/
│   ├── style.css           # 主要样式文件
│   └── map.css             # 地图相关样式
├── js/
│   ├── main.js             # 主要功能模块
│   ├── map.js              # 地图功能模块
│   ├── charts.js           # 图表功能模块
│   └── alarms.js           # 告警管理模块
└── README.md               # 项目说明
```

## 快速开始

### 环境要求

- 现代浏览器（Chrome、Firefox、Safari、Edge）
- 网络连接（用于加载地图瓦片和CDN资源）

### 安装和运行

1. 克隆或下载项目文件
2. 使用本地服务器打开项目（推荐使用Live Server）
3. 在浏览器中访问 `index.html`

### 使用本地服务器

```bash
# 使用Python
python -m http.server 8000

# 使用Node.js
npx http-server

# 使用PHP
php -S localhost:8000
```

## 功能说明

### 主界面布局

- **顶部标题栏**: 系统标题、当前时间、系统状态
- **左侧面板**: 设备状态概览、告警统计图表
- **中央地图**: 设备分布地图，支持2D/3D切换
- **右侧面板**: 实时告警列表、设备运行状态图表

### 设备监控

- 点击设备图标查看详细信息
- 不同颜色表示不同设备类型
- 告警状态有特殊动画效果
- 支持设备状态实时更新

### 地图功能

- 基于Leaflet的交互式地图
- 设备位置标记和弹窗信息
- 支持地图缩放和平移
- 深色主题适配

### 告警管理

- 实时告警列表显示
- 按类型和级别筛选
- 告警详情查看
- 告警处理状态跟踪

### 数据可视化

- 告警类型饼图
- 设备状态折线图
- 实时数据更新
- 响应式图表布局

## 自定义配置

### 修改设备数据

在 `js/main.js` 中的 `initDevices()` 方法中修改设备数据：

```javascript
this.devices = [
    {
        id: 'device_id',
        name: '设备名称',
        type: '设备类型',
        lat: 纬度,
        lng: 经度,
        status: 'online/offline/alarm',
        // 其他设备参数
    }
];
```

### 修改地图中心点

在 `js/map.js` 中修改地图初始化参数：

```javascript
this.map = L.map('map', {
    center: [纬度, 经度],  // 修改为你的地图中心点
    zoom: 12
});
```

### 自定义样式

在 `css/style.css` 中修改颜色主题：

```css
:root {
    --primary-color: #00a8ff;
    --success-color: #00ff88;
    --warning-color: #ffa502;
    --danger-color: #ff4757;
}
```

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 注意事项

1. 需要网络连接加载地图瓦片
2. 建议使用现代浏览器以获得最佳体验
3. 本地文件访问可能受到浏览器安全策略限制
4. 地图功能需要HTTPS环境（生产环境）

## 扩展功能

### 可扩展的功能

- 用户认证和权限管理
- 历史数据查询和导出
- 设备远程控制
- 告警推送通知
- 数据备份和恢复
- 多语言支持

### 集成建议

- 后端API接口集成
- 数据库连接
- WebSocket实时通信
- 移动端适配
- 第三方系统集成

## 许可证

本项目采用MIT许可证，详见LICENSE文件。

## 联系方式

如有问题或建议，请联系开发团队。