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);
        }
    }
}