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

个人觉得大屏展示其实很简单,噱头多过技术含量,下面使用了 DataV (不是阿里的那个DataV哈,具体链接在这里)开发了一个大屏展示,使用了css flex弹性布局,使用了DataV的一些比较酷炫的边框(SVG写的),基本上功能没有全部完成,但是模子已经刻出来了,只是后端推送的内容没有全部写出来

前端




 后台推送部分

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
{
    /// 
    /// 运营看板
    /// 
    [HubName("OperationKanBanHub")]
    public class OperationKanBanHub : Hub
    {
        private static readonly Dictionary Connections = 
            new Dictionary();

        /// 
        /// 向客户端发送消息
        /// 
        /// 
        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
                            {
                                new { wlmc = "菜籽A",jhds = "88", dhrq = DateTime.Now.ToString("yyyy-MM-dd")}
                            }
                        }));
                        //5秒推送一次
                        Thread.Sleep(5000);
                    }
                }, tokenSource.Token);
            }
        }

        /// 
        /// 
        /// 
        /// 
        /// 
        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
{
    /// 
    /// 
    /// 
    public class OperationKanBanNotifier
    {
        private static readonly IHubContext Context = GlobalHost.ConnectionManager.GetHubContext();

        /// 
        /// 推送到客户端
        /// 
        /// 
        /// 设备状态JSON结构体
        public static void Refresh(string connectionId, string message)
        {
            //注册后端与前端的方法refreshEquipmentInfo。connectionId是判断发送给哪个前端
            Context.Clients.Client(connectionId).Refresh(message);
        }
    }
}

你可能感兴趣的:(Vue,C#,Asp.Net,vue.js,前端,javascript)