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":[...组件中使用的数据],
 	"dataMethod":{
    接口请求方式//当组件的数据来源使用接口时使用,默认为GET},
 	"dataType":1 ,// 数据类型
 	"icon":头部展示图标,
 	"index":"1dc09b88-c782-4c84-8958-417ff47ea97f",//唯一键值,常用于找到某一个组件
 	"left":"X轴",
 	"top":"Y轴",
 	"name":"名称",
 	"option":{
    
	//右侧配置的信息
	}
 	
 
 }
 

]

折线图 （avue-echart-line ）数据详情

  {
    
    "name": "折线图",  //名称
    "title": "折线图", //标题
    "icon": "icon-line",  //图标
    "dataType": 1,   //数据类型 
    "dataMethod": "get",   //获取数据使用的HTTP请求方式 默认为GET
    "dara": {
    
      "categories": [  //类别
        "苹果", 
        "三星",
        "小米",
        "oppo",
        "vivo"
      ],
      "series": [   //echart中：系列列表。每个系列通过 type 决定自己的图表类型
        {
    
          "name": "手机品牌",  //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
          "data": [ //系列中的数据内容数组。数组项通常为具体的数据项。
          //注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
            1000879,
            3400879,
            2300879,
            5400879,
            3400879
          ]
        }
      ]
    },
    "dataFormatter": "", //数据格式换程序，由界面弹出框录入
    "url": "./bar",  //HTTP调用地址，用于数据更新
    "time": 5000,  //更新速度，默认5秒
    "component": {
       //组件的宽高，类型，名称
      "width": 600,
      "height": 300,
      "name": "line",
      "prop": "line"
    },
    "option": {
      //配置项
      "gridX": 90,  //距x 轴距离
      "gridY": 0,   //距y 轴距离
      "gridX2": 0,
      "gridY2": 0,
      "nameColor": "#eee",  //名字的颜色
      "lineColor": "#eee",  //折线的颜色
      "lineWidth": 5,  //折线宽度
      "xNameFontSize": 16, //X轴文字的大小
      "yNameFontSize": 16, //y轴文字的大小
      "labelShow": false,  //是否显示标题
      "labelShowFontSize": 14,  //标签显示的字体大小
      "labelShowFontWeight": 300,  //标签显示的字体加粗
      "yAxisInverse": false,
      "xAxisInverse": false,
      "xAxisShow": true,
      "yAxisShow": true,
      "xAxisSplitLineShow": false,
      "yAxisSplitLineShow": false,
      "barWidth": 30,
      "barRadius": 8,
      "barColor": [
        {
    
          "color1": "#83bff6",
          "color2": "#188df0",
          "postion": 90,
          "$index": 0,
          "_show": true
        },
        {
    
          "color1": "#23B7E5",
          "color2": "#564AA3",
          "postion": 50,
          "$index": 1,
          "_show": true
        }
      ],
      "barMinHeight": 2
    },
    "left": 396, // 距左侧所处位置
    "top": 469, // 距顶部所处位置
    "index": "5e98029c-b7c3-4750-95c0-56eaa5a21ee9",  //调用时使用的键
    "zIndex": 0
  }

关于问题优化思路

1.对齐方式

通过计算每个组件的最大值和最小值来控制需要移动的大小

组件分组

与对齐思路一致找到组件的最大最小值,使用嵌套

<avue-draggable></avue-draggable>

标签来实现使组作为一个单独的avue-draggable来把多个组件来组合起来

回复

1. 表格图标的数据换成自己请求来的数据，怎么渲染的表格里


这个是本人自定义的组件的接口数据处理源码

publicRequest(`${
      this.url}/${
      this.option.deviceID}/properties/_query`, this.dataMethod, {
    
        currentPage: '0',
        pageSize: '1'
      }, this.dataQuery).then(({
     data}) => {
    
        if (this.dataFormatter && typeof this.dataFormatter === 'function') this.data = this.dataFormatter(data)
        this.statusImgUrl = this.getImgUrl(this.data)
      })

return出需要的参数

(dataSource)=>{
    
	//console.log(dataSource)
	return	dataSource.result.data[dataSource.result.data.length-1]
}

2.怎么根据动态数据变换表格里数据的颜色么
avue-data中内置的表格无法实现，可以通过自定义表格组件来定制自己的业务
例如我现在自定义的表格：


增加查询框配置


其余配置部分与avue-data一致

未完待续……