# coalDataUI

**Repository Path**: c317/coalDataUI

## Basic Information

- **Project Name**: coalDataUI
- **Description**: 煤矿大数据前端项目代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: wnm
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-09-21
- **Last Updated**: 2025-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 煤矿大数据可视化大屏----前端

## 主要技术和环境
| node v14.16.0 
| npm 6.14.11 
| vue @vue/cli 4.5.11
| echarts ^4.9.0
| elementUI ^2.4.5

## 项目启动前
### 先在项目根目录 运行下面代码

```

npm install

```

### 项目测试启动代码

```

npm run serve

```

### 项目发布启动代码

```

npm run build

```

## 旧页面

![实时数据显示页面主要划分板块](https://images.gitee.com/uploads/images/2020/1005/111855_571ef6c7_8093898.png "C1AGA{IM7%O@XRUC)P36$W8.png")
### 实时数据显示页面主要划分板块(旧页面)

![历史数据数据显示页面主要划分板块](https://images.gitee.com/uploads/images/2020/1005/111931_c015ad98_8093898.png "ZEC05~V0R@~19)_`U1GUXWW.png")
### 历史数据显示页面主要划分板块(旧页面)

### 实时数据可视化大屏页面文件目录(旧页面) src/coalDataUI/oldPage/new
```
--------new           实时数据大屏页面文件夹

------new                 各组件页面文件夹

---Left.vue                  	  左边表格滚动实现文件            		(主要编码文件)

---Title.vue                      头部标题实现文件               		(主要编码文件)               

---MainBottom.vue                 中间上部六块数据显示实现文件    (主要编码文件)

---MainTop.vue                    中间下部地图特效实现文件           (主要编码文件)

---RightBottom.vue                右边上部柱状图实现文件               (主要编码文件)

---RightTop.vue                   右边下部饼状图实现文件               (主要编码文件)

------Main.vue            主页面各板块划分 vue 文件          

------newBus.js           组件传值中转站 js 文件    

------newRouter.js        路由文件
```

### 历史数据可视化大屏页面文件目录(旧页面) src/coalDataUI/oldPage/old
```
--------old           实时数据大屏页面文件夹

------old                 各组件页面文件夹

---Left.vue                  	 左边地图实现文件     (主要编码文件)

---Title.vue                	 头部标题实现文件     (主要编码文件)                

---RightBottom.vue               右边上部实现文件     (主要编码文件)

---RightTop.vue                  右边下部实现文件     (主要编码文件)

------Main.vue            主页面各板块划分 vue 文件

------oldBus.js           组件传值中转站 js 文件

------oldRouter.js        路由文件
```

## 新页面
![大数据分析平台-首页](https://images.gitee.com/uploads/images/2021/0419/105920_5a0e599a_4939108.png "大数据分析平台-首页.png")
### 大数据分析平台-首页(新页面)
![大数据分析平台-煤炭交易统计](https://images.gitee.com/uploads/images/2021/0419/105937_4da3a761_4939108.png "大数据分析平台-煤炭交易统计3.png")
### 大数据分析平台-煤炭交易统计(新页面)

### 大数据分析平台-首页(新页面) src/coalDataUI/newPage/survey

### 大数据分析平台-煤炭交易统计(新页面) src/coalDataUI/newPage/statistics

# 功能难点实现例子参考

## 地图飞线借鉴例子

##### 模拟迁徙+百度地图
https://gallery.echartsjs.com/editor.html?c=xB1a5uJTR
##### 利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图
https://blog.csdn.net/giscript/article/details/52912739#
##### github上的dom
https://github.com/lixinGiting/echarts3_map_demo

## 3D柱状图借鉴例子

##### 3d地图画线1
https://gallery.echartsjs.com/editor.html?c=xSy3KhFV4M
##### 以maptalks3D为底图的3D地图柱状图
https://gallery.echartsjs.com/editor.html?c=x-tlZUDQhT
##### 以maptalks3D为底图的3D地图柱状图
https://gallery.echartsjs.com/editor.html?c=xBycTiGtFf
##### 以maptalks3D为底图的出行轨迹图
https://gallery.echartsjs.com/editor.html?c=xYhE8Wf0UQ

## Vue使用WebSocket借鉴例子

##### vue项目使用websocket技术
https://www.cnblogs.com/qisi007/p/10213886.html
##### vue中使用websocket的正确使用方法
https://www.jianshu.com/p/9d8b2e42328c