大屏项目—— 使用DataV开发步骤
Posted 宁静致远
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大屏项目—— 使用DataV开发步骤相关的知识，希望对你有一定的参考价值。
1、选择分组，新建可视化，创建一个新的大屏：
2、数据可视化的铺屏:
根据设计图，通过添加组件的方式，将大屏页面在DataV中展示出来（可把设计图置于底层，降低透明度，将需要的组件从组件列表中拖入画布，更改组建的样式及位置）
其中组件样式的修改，可以在右侧的配置面板中，根据实际需要调整并修改组件的样式配置
3、数据的修改
可以在右侧样式面板中选择数据页签，单击配置数据源，默认是静态数据源，我们开发的大屏要用API数据源，要通过天擎平台。
数据映射：
当多个组件使用同一个接口时，避免多次重复调用接口，可以选用一个组件配置接口作为数据源，在hook页再进行各组件数据赋值：
示例：
大屏中地图接口健康状况部分中，几个组件用同一个接口，使用标题组件作为数据源，在右侧数据面板配置数据源，再在hook页为其他组件赋值。首先要通过组件的key获得组件，然后获得数据源上的数据，赋值给其它组件
单击常规组件，在“Console”里查看该组件的key，在hook页使用
4、配置交互
在蓝图编辑器中配置多个组件之间的交互，如果存在组件之间的交互，交互少可在蓝图编辑器中配置，多的话建议在hook页进行配置，方便修改和维护(详细操作可参考在线文档配置蓝图编辑器部分)
5、大屏的预览及发布
（1）单击画布编辑器右上角的预览图标，预览可视化应用。
预览成功后，可按照以下步骤发布可视化应用。
（2）单击画布编辑器右上角的发布图标。
（3）在发布对话框中单击发布大屏。
（4）单击分享链接右侧的复制图标。
（5）打开浏览器，将复制的链接粘贴到地址栏中，即可在线观看发布成功的可视化应用。
发布成功后，大屏进行新增修改，可点击覆盖发布快照或者自动新增快照并发布，来更新已发布大屏页面。
6、自定义组件
当DataV中的组件不能满足开发需求时，需要进行自定义组件，流程如下：
（1）安装开发工具套件
执行以下命令安装套件（Mac在terminal中执行，Windows在cmd中执行）。
npm install --registry=https://registry.npm.taobao.org datav-cli -g
安装成功后，执行datav --version命令，查看开发工具版本。
（需要下载并安装NodeJS，推荐Node版本在 8.0.0 及以上，10.12.0以下）
（2）生成组件包
通过datav init命令生成组件包（Mac在terminal中执行，Windows在cmd中执行），执行后，需要输入以下组件信息。
当命令行显示组件创建完毕时，说明您的组件包已经成功生成。
（3）预览组件
您可以通过以下命令预览组件（Mac在terminal中执行，Windows在cmd中执行）。
cd 您的组件名
datav run
当命令行显示服务启动时，说明预览组件的服务已经启动，Chrome浏览器会被自动打开，并导航到组件预览页。
组件预览成功后的效果如下图所示。
（4）组件开发
具体组件开发包文件参考在线文档
（5）发布组件
进入组件的目录地址下，执行datav package命令，在组件目录外会有一个以组件-版本号命名的tar.gz压缩包，复制压缩包名称
退回到上一层目录地址下，进行手动打包，执行命令：
将打包好的压缩包上传到DataV：
我的组件->我的组件包->对应组件包->点击上传组件，将压缩包拖入，点击保存
自定义组件在组件列表中我的组件进行查看
注：数据服务质量监控系统大屏，用到2个自定义组件，分别是水球图以及标签，组件代码见文件夹内
四、注意事项
[
{
"area_tree": "/datav-static/2.38.1_14/modules/datavmap-2d-layer-drill/0.4.23/area_tree_city.json",
"area_topo_json": "/datav-static/2.38.1_14/modules/datavmap-2d-layer-drill/0.4.23/area_topo_json_city.json"
}
]
人与人的差距是：每天24小时除了工作和睡觉的8小时，剩下的8小时，你以为别人都和你一样发呆或者刷视频
Vue + DataV + SignalR 数字化大屏展示
个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来
前端
<template>
<dv-full-screen-container class="screen-container">
<div class="title">
<span class="big-title">数字化运营看板</span>
<span class="small-title">国粮武汉科学设计研究院-设计制作</span>
</div>
<dv-border-box-8 class="top-digital-tips">
<div style="height: 10%"></div>
<div class="item-wrap">
<div class="panel">
<div class="item">
<div><span class="title">本年累计采购(T)</span></div>
<div class="color-container">
<div class="rectangle">this.bnljcg</div>
<div class="triangle"></div>
</div>
</div>
<div class="item">
<div><span class="title">本年累计销售(T)</span></div>
<div class="color-container">
<div class="rectangle">this.bnljxs</div>
<div class="triangle"></div>
</div>
</div>
<div class="item">
<dv-active-ring-chart class="chart" :config="charConfig" />
</div>
</div>
<div class="middle-line"></div>
<div class="panel">
<div class="item">
<div><span class="title">计划生产任务数</span></div>
<div class="color-container">
<div class="rectangle">this.jhscrhs</div>
<div class="triangle"></div>
</div>
</div>
<div class="item">
<div><span class="title">正在执行</span></div>
<div class="color-container">
<div class="rectangle">this.zzzx</div>
<div class="triangle"></div>
</div>
</div>
<div class="item">
<div><span class="title">排队中</span></div>
<div class="color-container">
<div class="rectangle">this.pdz</div>
<div class="triangle"></div>
</div>
</div>
</div>
</div>
</dv-border-box-8>
<div class="bottom-digital-tips">
<div class="side">
<dv-border-box-11 class="box" title="菜籽采购在途">
<div class="box-top"></div>
<div class="box-bottom">
<dv-scroll-board class="scroll-board" :config="czztConfig" />
</div>
</dv-border-box-11>
<dv-border-box-11 class="box" title="菜籽库存">
<div class="box-top"></div>
<div class="box-bottom">
<dv-scroll-board class="scroll-board" :config="czkcConfig" />
</div>
</dv-border-box-11>
</div>
<div class="middle">
<dv-border-box-11 class="box" title="销售订单计划">
<div class="box-top"></div>
<div class="box-bottom">
<dv-scroll-board class="scroll-board" :config="xsddjhConfig" />
</div>
</dv-border-box-11>
</div>
<div class="side">
<dv-border-box-11 class="box" title="罐区库存">
<div class="box-top"></div>
<div class="box-bottom">
<dv-scroll-board class="scroll-board" :config="gqkcConfig" />
</div>
</dv-border-box-11>
<dv-border-box-11 class="box" title="辅料库存">
<div class="box-top"></div>
<div class="box-bottom">
<dv-scroll-board class="scroll-board" :config="flkcConfig" />
</div>
</dv-border-box-11>
</div>
</div>
</dv-full-screen-container>
</template>
<script type="text/ecmascript-6">
import $ from 'jquery'
import 'signalr'
export default
data ()
return
bnljcg: 0,
bnljxs: 0,
jhscrhs: 0,
zzzx: 0,
pdz: 0,
charConfig:
radius: '40%',
color: ['#74FD97'],
activeRadius: '45%',
data: [
name: '月计划完成',
value: 55
,
name: '未完成',
value: 45
],
digitalFlopStyle:
fontSize: 20
,
// 菜籽在途
czztConfig:
header: ['物料名称', '计划采购(吨)', '到货日期'],
rowNum: 7,
waitTime: 4000,
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
,
// 菜籽库存
czkcConfig:
header: ['物料名称', '当天消耗(吨)', '可用库存(吨)'],
rowNum: 7,
waitTime: 4000,
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
,
// 罐区库存
gqkcConfig:
header: ['油品', '当天消耗(吨)', '可用库存(吨)'],
rowNum: 7,
waitTime: 4000,
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
,
// 辅料库存
flkcConfig:
header: ['物料名称', '当天消耗', '可用库存'],
rowNum: 7,
waitTime: 4000,
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
]
,
// 销售订单计划
xsddjhConfig:
header: ['油品', '交货时间', '计划生产(吨)', '已生产(吨)', '完成进度', '完成百分比'],
rowNum: 15,
waitTime: 4000,
data: [
['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
['行2列1', '行2列2', '行2列3', '行1列3', '行1列3', '行1列3'],
['行3列1', '行3列2', '行3列3', '行1列3', '行1列3', '行1列3'],
['行4列1', '行4列2', '行4列3', '行1列3', '行1列3', '行1列3'],
['行5列1', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3'],
['行6列1', '行6列2', '行6列3', '行1列3', '行1列3', '行1列3'],
['行7列1', '行7列2', '行7列3', '行1列3', '行1列3', '行1列3'],
['行8列1', '行8列2', '行8列3', '行1列3', '行1列3', '行1列3'],
['行9列1', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3'],
['行10列1', '行10列2', '行10列3', '行1列3', '行1列3', '行1列3']
]
,
connection: null,
proxy: null
,
mounted ()
this.$nextTick(() =>
this.connection = $.hubConnection(process.env.ROOT)
// 定义服务器端SignalR推送过来的消息接收代理
this.proxy = this.connection.createHubProxy('OperationKanBanHub')
this.proxy.on('Refresh', (message) =>
let obj = JSON.parse(message)
this.bnljcg = obj.bnljcg
this.bnljxs = obj.bnljxs
this.jhscrhs = obj.jhscrhs
this.zzzx = obj.zzzx
this.pdz = obj.pdz
this.czztConfig.data = []
if (obj.czztConfig)
let objArray = Array.from(obj.czztConfig)
for (let obj of objArray)
let pushItem = []
Object.keys(obj).forEach(key => pushItem.push(obj[key] + '') )
this.czztConfig.data.push(pushItem)
console.log(this.czztConfig.data)
)
// 创建连接到服务器端SignalR的连接
this.connection.start()
.done(() =>
// 客户端发送信息到服务器
this.proxy.invoke('Send', this.connection.id)
)
.fail((err) => console.log(err) )
)
,
beforeRouteLeave (to, from, next)
next()
,
deactivated ()
if (this.connection)
// 关闭SignalR连接
this.connection.stop()
// 清除缓存
this.$vnode.parent.componentInstance.cache =
this.$vnode.parent.componentInstance.keys = []
,
beforeDestroy: () =>
console.log('before destroy')
</script>
<style scoped>
@font-face
font-family:digtal;
src:url("../../fonts/digital-7.ttf");
.screen-container
background-color: #3e3c3c;
background-image: url("../../imgs/kanban01.png");
background-size: 100% 100%;
text-align: center;
padding: 2px;
.title
display: block;
width: 100%;
height: 60px;
color: #88c5fd;
display: table;
.title .big-title
font-size: 30px;
display: table-cell;
text-align: right;
vertical-align: middle;
padding-right: 20px;
width: 50%;
.title .small-title
font-size: 17px;
display: table-cell;
text-align: left;
vertical-align: middle;
padding-left: 20px;
width: 50%;
.bottom-digital-tips
position: relative;
width: 100%;
height: 75%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.bottom-digital-tips .middle
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
text-align: center;
justify-content: center;
.bottom-digital-tips .middle >>> .box .box-top
height:8%
.bottom-digital-tips .middle >>> .box .box-bottom
height:calc(92% - 15px);
width:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
.bottom-digital-tips .middle >>> .box .scroll-board
height:100%;width:90%;
.bottom-digital-tips .side
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
text-align: center;
justify-content: center;
.bottom-digital-tips .side >>> .box .box-top
height:15%
.bottom-digital-tips .side >>> .box .box-bottom
height:calc(85% - 15px);
width:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
.bottom-digital-tips .side >>> .box .scroll-board
height:100%;width:90%;
.dv-scroll-board >>> .header
background-color: transparent !important;
.dv-scroll-board >>> .rows
border-bottom: 1px solid #858484;
.dv-scroll-board >>> .rows .row-item
background-color: transparent !important;
border-bottom: 0.5px solid #858484;
border-top: 0.5px solid #858484;
.bottom-digital-tips .middle
width: 50%;
height: 100%;
.top-digital-tips
position: relative;
width: 100%;
height: 20%;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.top-digital-tips .item-wrap
width: 100%;
display: flex;
height: 80%;
flex-direction: row;
justify-content: space-around;
.top-digital-tips .middle-line
background-color: #6c6a6a;
width: 1px;
height: 100%;
.top-digital-tips .panel
justify-content: space-around;
width: calc(50% - 3px);
height: 100%;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
.top-digital-tips .panel .item
flex-direction:column;
width: 33.1%;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
.top-digital-tips .panel .item .title
color:#0EDB43;
font-size: 20px;
height: 20px;
font-weight: 500;
/* 数字翻牌器容器DIV */
.top-digital-tips .panel .item .color-container
color: #CBFFFD;
font-size:50px;
font-family:digtal;
width: 100%;
display: flex;
flex-direction: row;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
/* 数字翻牌器矩形颜色背景框 */
.top-digital-tips .panel .item .color-container .rectangle
width:80%;
background-color:rgba(110,108,108, 0.4)
/* 数字翻牌器三角形颜色背景框 */
.top-digital-tips .panel .item .color-container .triangle
width: 0;
height: 0;
border-top: 38px solid transparent;
border-left: 30px solid rgba(110,108,108, 0.4);
border-bottom: 38px solid transparent;
.top-digital-tips >>> .chart
width: 100%;
height: 300px;
</style>
后台推送部分
using Microsoft.AspNet.SignalR;
using System;
using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR.Hubs;
using Newtonsoft.Json;
namespace HenryMes.WebApi.SignalR
/// <summary>
/// 运营看板
/// </summary>
[HubName("OperationKanBanHub")]
public class OperationKanBanHub : Hub
private static readonly Dictionary<string, CancellationTokenSource> Connections =
new Dictionary<string, CancellationTokenSource>();
/// <summary>
/// 向客户端发送消息
/// </summary>
/// <param name="connectId"></param>
public void Send(string connectId)
if (!Connections.ContainsKey(connectId))
var tokenSource = new CancellationTokenSource();
Connections.Add(connectId, tokenSource);
Task.Run(() =>
while (!tokenSource.Token.IsCancellationRequested)
OperationKanBanNotifier.Refresh(connectId, JsonConvert.SerializeObject(new
bnljcg = 9999,
bnljxs = 6666,
jhscrhs = 333,
zzzx = 444,
pdz = 77777,
czztConfig = new List<object>
new wlmc = "菜籽A",jhds = "88", dhrq = DateTime.Now.ToString("yyyy-MM-dd")
));
//5秒推送一次
Thread.Sleep(5000);
, tokenSource.Token);
/// <summary>
///
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
if (Connections.ContainsKey(Context.ConnectionId))
try
var tokenSource = Connections[Context.ConnectionId];
tokenSource.Cancel();
Connections.Remove(Context.ConnectionId);
catch (Exception ex)
throw ex;
return base.OnDisconnected(stopCalled);
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace HenryMes.WebApi.SignalR
/// <summary>
///
/// </summary>
public class OperationKanBanNotifier
private static readonly IHubContext Context = GlobalHost.ConnectionManager.GetHubContext<OperationKanBanHub>();
/// <summary>
/// 推送到客户端
/// </summary>
/// <param name="connectionId"></param>
/// <param name="message">设备状态JSON结构体</param>
public static void Refresh(string connectionId, string message)
//注册后端与前端的方法refreshEquipmentInfo。connectionId是判断发送给哪个前端
Context.Clients.Client(connectionId).Refresh(message);
以上是关于大屏项目—— 使用DataV开发步骤的主要内容，如果未能解决你的问题，请参考以下文章
大型可视化项目用什么工具好呢？——不如了解一下阿里云DataV尊享版
大型可视化项目用什么工具好呢？——不如了解一下阿里云DataV尊享版
海量大数据大屏分析展示一步到位：DataWorks数据服务对接DataV最佳实践