# monitoring-system-userpage

**Repository Path**: mshine/monitoring-system-userpage

## Basic Information

- **Project Name**: monitoring-system-userpage
- **Description**: 使用 Vue + Element UI 编写的智能监控系统前端页面。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-04-07
- **Last Updated**: 2025-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# monitoring-system-userpage
## 一、项目介绍
    使用 Vue + Element UI 编写的智能监控系统前端页面。
    实时监控模块的视频播放采用flv.js接收HTTP-FLV协议的实时视频流，采用该方案的原因在于目前主流浏览器禁用了Flash，而flv.js是HTML5 Flash视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。
## 二、使用方式
### 1.安装依赖
```
npm install
```
### 2.启动
```
npm run dev
```
### 3.访问
    http://localhost:8888
> 访问主机名及端口可在 config/index.js 的 dev 中修改。
## 三、项目结构简介
### 1. src文件夹下文件结构介绍
+ App.vue（根组件）
+ main.js（入口文件）
+ assets（存放静态资源）
+ router（路由文件）
+ views（主视图）
+ components（组件）
    + header（存放网页头部依赖的组件）
    + live（存放实时监控页面依赖的组件）
    + replay（存放录像回放页面依赖的组件）
    + ~~common（共用的）~~
### 2. views及components文件夹下各组件介绍
+ Header.vue（网页头部）
    + SystemFunctions.vue（系统功能切换模块）
+ Live.vue（实时监控页面）
    + LiveWindows.vue（实时视频播放窗口）
        + ~~VideoPlayer.vue（flv视频播放器）~~
    + SiderCard.vue（侧边信息卡片，当视频窗口数不为2时显示）
    + FooterCard.vue（底部信息卡片，当视频窗口数为2时显示）
+ Replay.vue（录像回放页面）
    + ~~VideoPlayer.vue（flv视频播放器）~~