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

分类：Vue作者：lee576

个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 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: ['物料名称','当天消耗(吨)','可用库存(吨)'],// 罐区库存
      gqkcConfig: {
        header: ['油品',// 辅料库存
      flkcConfig: {
        header: ['物料名称','当天消耗','可用库存'],// 销售订单计划
      xsddjhConfig: {
        header: ['油品','交货时间','计划生产(吨)','已生产(吨)','完成进度','完成百分比'],rowNum: 15,'行1列3','行2列3','行3列3','行4列3','行5列3','行6列3','行7列3','行8列3','行9列3','行10列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,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,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);
        }
    }
}

原文地址：https://blog.csdn.net/lee576/article/details/122948926

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Vuex- Action的 { commit }的写法
https://segmentfault.com/a/1190000022018995 https://www.jianshu.com/p/8c3599dda094 vuex教程中，有这样一句话和这样一段代码： 实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commi
ES6模块之export和import详解
ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。 ES6的模块系统大致分为导出（export）和导入（import）两个模块。 1、模块导出（export） 可以 导出 所有的最外层 函数 、 类
Vue知识点汇总（含Vue3）
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ Vue知识点汇总（含Vue3） 一、Vue 基础 1. Vue的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使
npm init vite@latest vue3study --template vue
D:\Temp&gt;npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.np
Vue 中使用消息总线让两个滚动条同步滚动
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥store.jsimport Vue from 'vue'export let store = Vue.observable({ scrollFlag: true})export let mutations =.._vue 能不能同时有两个滚动事件
Vue + lodop 静默打印
文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简单来说就是不需要用户点击"打印"，自动去打印，但是使用浏览器web打印不可避免的要弹出以下画面面对这种问题也只能用"富客户端"技术来解决，在浏览器的沙盒安全模型中无法做到，那么只能使用插件的技术，这个我们就不自己花力气去做了，我找来了 lodop 这个免费的打印组件，功能还是挺强大的，下载下图的发行包解压后安装下图两个exe如果你的系统是64位的，可以安装install_lodop64.exe上图的LodopFuncs.js 是客户端要使用的核心库文件..._this.$getlodop().then((lodop) =>{
Vue + DataV + SignalR 数字化大屏展示
文章浏览阅读1.7k次。个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来前端<template> <dv-full-screen-container class="screen-container"> <div class="ti_用signalr做一个简单的实时大屏显示
vue 下使用 exceljs + x-spreadsheet 带样式导入Excel
文章浏览阅读3.4k次，点赞3次，收藏10次。【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。_x-data-spreadsheet
element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次
文章浏览阅读1.7k次。之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。_el-tab-pane 后面接router-view
解决npm下载包的时候发生的依赖冲突
文章浏览阅读533次。今天在一台虚拟机上面运行老项目，报各种类型上图的错误提示，一开始还以为是less的问题，结果一个个装完还是报错，后面又说webpack, webpack cli有问题，头有点大了，google 一下，发现一个命令。讨论这个命令的文章，可以了解一下。运行以后终于出现了期待已久的。_npm install 忽略依赖
Vue2.0 组件实现动态模板(即Template)
文章浏览阅读8k次，点赞3次，收藏12次。从这篇文章得到启发先定义一个组件从外部接收Template，然后在组件里调用<template > <div ref="markedContent"></div></template><script>import Vue from 'vue/dist/vue.esm.js'export default { name: 'wf-marked-content', props: ['content'], mounte.._vue components 动态传入模板
Vue中使用froala富文本编辑器制作打印模板 + print.js 打印
文章浏览阅读5.4k次。参考上一篇知识开发的一个功能，制作一个打印模板的管理模块，如下(就是保存froala编辑后的html文本，其中包括Vue的Template，这样我们可以利用Vue的模板的优势来动态绑定一些数据源进行HTML的打印,基本上跟过去水晶报表做一个模板再绑定数据源的方法异曲同工)在 main.js 里引用 froala 组件// Import and use Vue Froala lib.import VueFroala from 'vue-froala-wysiwyg'// 引入 Fr.._vue设计网页打印模板
Vue3 使用 script-setup 语法糖
文章浏览阅读992次。计划是这样,公司的项目一直在持续改动,安装包总是需要频繁生成新的,由此我想到了"持续集成"!有自动化工具不用,岂不可惜?这周的主要时间就用来学习CruiseControl.Net全面实现持续集成_怎么在vue的 script部分使用 eldigloa
拿来改造主义，Vue + Element UI + Less 做了一个拖拽条
文章浏览阅读1.2k次。其实Element UI 只用了文字提示的 el-tooltip 组件，不喜欢可以去掉，不记得是从哪拿到的原始代码，我给加了高亮渐变显示，图标，和拖拽时只能拖拽图标的位置，效果如上图，可以水平方向拖动，也可以垂直方向拖动。样式是less写的，css写嵌套样式太繁琐了。拿来主义，改造有理!下面贴代码<template> <div ref="splitPane" class="split-pane" :class="direction" :"{ fl..._element ui拉条样式
vue 下使用 exceljs + x-spreadsheet 带样式导出Excel
文章浏览阅读953次，点赞2次，收藏2次。接上一篇，这次加入的是从x-speadsheet导出Excel，并且带有x-speadsheet中的样式，重点关注 exportExcel 这个方法，我加入了 tinycolor 这个库用来翻译颜色值，值得注意的是， exceljs的颜色值是 argb 不是 rgba，一定不要弄混了a 是代表的透明度放在最前面_x-data-spreadsheet 导出
Vue 动态连接线
文章浏览阅读5.5k次，点赞2次，收藏21次。尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果..._vue 连线
安装 Element UI 3.0 （即 Element UI Plus） 正确方法
文章浏览阅读4.2k次，点赞2次，收藏5次。首先官网推荐的安装方法没有生成dist文件，导致样式表等这些文件并没有生成npm install element-plus --save以上方法是有问题的，如果不幸执行了上面的命令，那么先执行卸载npm uninstall element-plus删除 main.js文件对element ui的引用，输入以下命令vue add element-plus..._elementui3.0
Vue + Element UI 实现了一个周选择器
文章浏览阅读3.1k次。如上图，下面贴代码<template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年">.._vue多选周
自己开发的 Vue 下的甘特图 组件 已上传到GitHub上
文章浏览阅读1.8k次，点赞6次，收藏6次。经过 2021年的一个春节，从年前到现在，大致撸出一个 甘特图，进度条是用SVG画的，使用了几个工具库 （interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新源码地址点击期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的这篇文章做的..._vue gantt demo
封装 x-spreadsheet 带样式导入导出
文章浏览阅读2.1k次。接上两篇vue 下使用 exceljs + x-spreadsheet 带样式导入Excelvue 下使用 exceljs + x-spreadsheet 带样式导出Excel下面封装好一个组件调用组件的页面效果如图，目前“导出Json”还没有做_x-spreadsheet导入导出
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot