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.bnljcgthis.bnljxs = obj.bnljxsthis.jhscrhs = obj.jhscrhsthis.zzzx = obj.zzzxthis.pdz = obj.pdzthis.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);}}
}

Vue + DataV + SignalR 数字化大屏展示相关推荐

基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...

Vue + DataV + SignalR 数字化大屏展示

Vue + DataV + SignalR 数字化大屏展示相关推荐

最新文章

热门文章