Auve-data数据大屏展示（avue-echart）

Auve-data数据大屏展示（avue-echart）

项目简介

数据大屏解决方案采用vue-cli项目编写，可以完美嵌套与任何项目，此项目只是大屏的解决方案，如果想要用于生产或更多场景的支持需要自己根据情况二次开发。（摘至开发文档）

优点

• 可配置性高
• 易于快速开发
• 易于调整

缺点(使用后总结)

• 编辑界面操作体验极差
• 通过JSON进行生成不同的组件,组件之间无法进行通信,无法进行组件之间的联动
• 现已有的定时任务全部都是独立的,定时器过多,长时间开启会造成页面卡顿
• 组件数据的公用性、联动性有限制
• 无法实现高逻辑高操作的组件

待改进…

• 编辑大屏时,选中多个组件时可以绑定分组,实现联动

• 组件的各种事件绑定回调实现

• 界面打开两天左右会卡顿,内存占用非常大

已优化

• 图层分组,分组后的组内对齐,图层的组合(遇到层次问题待完善)
• 图层的复制,组合,删除快捷键
• 自定义组合组件
• 图层的对齐方式加入等间距对齐
• 图层的框选
• 放弃http请求,使用websocket收发数据

目录结构

├─public 静态资源目录
│ ├─cdn 依赖文件
│ │ ├─animate 动画库
│ │ │ └─3.5.1
│ │ ├─avue 大屏组件支持包
│ │ ├─axios 数据
│ │ │ └─1.0.0
│ │ ├─echarts 图表
│ │ │ └─4.2.1
│ │ ├─element-ui 底层核心UI
│ │ │ ├─2.15.0
│ │ │ │ └─theme-chalk 主题包
│ │ │ │ └─fonts 图标
│ │ │ └─2.15.6
│ │ │ └─theme-chalk
│ │ │ └─fonts
│ │ ├─html2canvas 通过dom生成图片插件
│ │ ├─vue 底层核心
│ │ │ └─2.5.2
│ │ ├─vue-router
│ │ │ └─3.0.1
│ │ └─vuex
│ │ ├─2.4.1
│ │ └─3.1.1
│ ├─const
│ │ └─theme
│ ├─img 图片静态资源
│ │ ├─banner
│ │ ├─bg
│ │ ├─border
│ │ └─source
│ ├─lib 插件化打包后文件
│ ├─index.html 入口文件
│ ├─view.html 预览文件
│ └─view.js 预览文件数据
├─sql
└─src
├─api 数据
│ └─system
├─assets 静态文件
├─components组件
│ └─test
├─echart 基础组件，图表二次封装配置
│ └─packages
│ ├─bar 柱形图
│ ├─common 通用图表
│ ├─datav 水波百分比
│ ├─datetime 实时时间
│ ├─flop 翻牌器/颜色块
│ ├─funnel 漏斗图
│ ├─gauge 仪表盘
│ ├─iframe 内嵌网页
│ ├─img 图片
│ ├─imgBorder 图片框
│ ├─line 折线图
│ ├─map 地图
│ ├─pictorialBar 象形图
│ ├─pie 饼图
│ ├─progress 环形图/进度条
│ ├─radar 雷达图
│ ├─scatter 散点图
│ ├─swiper 轮播图
│ ├─table 表格
│ ├─tabs 选项卡
│ ├─text 文字/跑马灯/超链接
│ ├─video 视频
│ └─wordCloud 字符云
├─mixins 混入
│ ├─index.js 混入到build.vue
├─mock 数据模拟
├─option 配置
│ ├─components 基础组件配置项
│ ├─base.js 画布顶端任务栏组件列表
│ ├─config.js 大屏配置
│ └─components.js
├─page 展示页面
│ ├─components组件
│ ├─selectEquipment.vue 选择设备
│ └─editor.vue代码编辑器
│ ├─group 核心组件
│ ├─list
│ ├─login 登录界面
│ ├─build.vue 编辑界面
│ ├─view.vue 预览界面
│ ├─index.vue 大屏管理界面
├─store 全局数据存储
│ ├─index.js 汇总
│ └─modules 模块化
│ ├─common.js 存储共用数据
│ ├─use.js 存储用户数据
│ ├─websocket.js 存储智慧运管websocket数据
├─styles 样式
├─theme 主题
└─utils 工具类

数据源

1. 在线api（本项目采用了mock拦截方式模拟，具体文件/mock/index.js） 使用axios发起HTTP请求获取数据，可以使用mock的拦截方式模拟请求
2. 静态数据 手动录入静态数据
3. WebSocket 使用VueNativeSock插件来实现websocket连接。通过配置topic的方式发起订阅消息，订阅后开始推送数据，监听数据推送保存数据。

组件开发

核心原理

https://kdocs.cn/l/cvb2I4sN4Vi3
[金山文档] avue-data核心原理图.pom

官方文档地址

https://www.kancloud.cn/smallwei/avue-doc

常用组件

• 图表
• 柱状图
• 折线图
• 饼图
• 象形图
• 雷达图
• 散点图
• 漏斗图
• 地图
• 文字
• 文本框
• 跑马灯
• 超链接
• 实时时间
• 媒体
• 图片
• 图片框
• 轮播图
• iframe
• video
• 指标
• 翻牌器
• 环形图
• 进度条
• 仪表盘
• 字符云
• 表格
• 选项卡
• 表格
• …

基础数据

[//多个组件
 {
   
 	"component":{
   
 	//...组件信息,用于生成组件,
 	height: 370,//组件的高度
	name: "swiper",//使用组件的名称
	prop: "swiper",//
	width: 670//组件的宽度
 	},
 	"data":[...组