当前位置: 首页 > article >正文

大屏使用dv-digital-flop定时刷新显示总人数

本文在基础上进行改进,后端使用若依后端IofTV-Screen: 🔥一个基于 vue、datav、Echart 框架的物联网可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、数据滚动配置,内部图表自由替换、Mixins注入等功能,持续更新.... - Gitee.com

1.效果:将系统总人数统计显示到大屏

1. 使用dv-digital-flop组件

 <dv-digital-flop :config="config1" style="width:100%;height:100%;" />

number中的元素将被用于替换content内容模版中的{nt}标记,其替换顺序与模版标记的顺序一一对应:

 config1: {
          number: [],
          content: '{nt}',
          style: {
            ...style,
            fill: "#00fdfa",
          },
        }

2. 获取数据并显示

 //统计人数
        countUsers().then(res=> {

          if (!this.timer) {
            console.log("统计人数", res);
          }
          if (res.code == 200) {
          this.countUsers = res.countUsers;
          this.config1 = {
            ...this.config1,
            number: [this.countUsers]
          } }
        })

3. 使用定时器轮询刷新

      //轮询
      switper() {
        if (this.timer) {
          return
        }
        let looper = (a) => {
           this.getData()
        };
        this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
      }

其中this.$store.state.settings.echartsAutoTime可替换成3000

4. user.js增加api

// 查询用户数
export function countUsers() {
  return request({
    url: '/system/user/countUsers',
    method: 'get'
  })
}

5. 增加controller后端方法

/**
 * 获取用户数
 */

@GetMapping("/countUsers")
public AjaxResult countUsers()
{


    AjaxResult ajax = AjaxResult.success();
    Integer count = userService.countUsers();
     ajax.put("countUsers", count);
     return ajax;
}

6. mapper.xml

<select id="countUsers"  resultType="Integer">
   select count(1) from sys_user where del_flag='0'
</select>

7. 最终代码

<template>
  <ul class="user_Overview flex" v-if="pageflag">
    <li class="user_Overview-item" style="color: #00fdfa">
      <div class="user_Overview_nums allnum ">
        <dv-digital-flop :config="config1" style="width:100%;height:100%;" />
      </div>
      <p>总人数</p>
    </li>

  </ul>
  <Reacquire v-else @onclick="getData" line-height="200px">
    重新获取
  </Reacquire>
</template>

<script>
import { countUsers } from "@/api/system/user";

  let style = {
    fontSize: 24
  }
  export default {
    data() {
      return {
        // 人员总数
        countUsers: 0,
      
        pageflag: true,
        timer: null,
        config1: {
          number: [],
          content: '{nt}',
          style: {
            ...style,
            fill: "#00fdfa",
          },
        }
      };
    },

    created() {
      this.getData()
    },
    mounted() {},
    beforeDestroy() {
      this.clearData()

    },
    methods: {
      clearData() {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      },
      getData() {
        this.pageflag = true;
        //统计人数
        countUsers().then(res=> {

          if (!this.timer) {
            console.log("统计人数", res);
          }
          if (res.code == 200) {
          this.countUsers = res.countUsers;
          this.config1 = {
            ...this.config1,
            number: [this.countUsers]
          } }
        })

        this.switper()
      },
      //轮询
      switper() {
        if (this.timer) {
          return
        }
        let looper = (a) => {
           this.getData()
        };
        this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
      },
    },
  };

</script>
<style lang='scss' scoped>
  .user_Overview {
    li {
      flex: 1;

      p {
        text-align: center;
        height: 16px;
        font-size: 16px;
      }

      .user_Overview_nums {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 22px;
        margin: 50px auto 30px;
        background-size: cover;
        background-position: center center;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        &.bgdonghua::before {
          animation: rotating 14s linear infinite;
        }
      }

      .allnum {

        // background-image: url("../../assets/img/left_top_lan.png");
        &::before {
          background-image: url("../../../assets/bigScreen/img/left_top_lan.png");

        }
      }
    }
  }

</style>

 

 


http://www.kler.cn/a/5298.html

相关文章:

  • VSCode 在Windows下开发时使用Cmake Tools时输出Log乱码以及CPP文件乱码的终极解决方案
  • 备考蓝桥杯:顺序表相关算法题
  • VSCode Live Server 插件安装和使用
  • 【Linux】shell脚本编程
  • ADO.NET知识总结4---SqlParameter参数
  • 新一代智能工控系统网络安全合规解决方案
  • 一文实战 | RISC-V Linux入口地址2M预留内存优化
  • 如何在 Linux 上安装和使用 exa?
  • 二值mask转polygon/RLE (coco segment格式)
  • RSA解密-第十届Java研究生组E题
  • Leetcode: 236.二叉树的最近公共祖先
  • 医用超声检查设备
  • 无线耳机哪个品牌好?四大国内蓝牙耳机品牌排行
  • 软件工程导论(四)总体设计(临时)
  • 49天精通Java,第21天,Java内部类,看看文心一言、ChatGPT怎么说
  • MongoDB的优缺点以及springboot中的使用
  • TypeScript学习笔记一
  • 超级进化吧switch case in java
  • OSPF(开放式最短路径优先协议2)
  • 写毕业论文经验贴
  • 设计模式-设计原则
  • Markdown pandoc-crossref自定义图表前缀(解决figureTitle和tableTitle被XeLaTex忽略的问题 )
  • 期货黄金交易平台重要吗?有哪些显著的期货黄金交易平台优势?
  • 【Redis】十大数据类型(下篇)
  • 24、基于原型的切比雪夫低通滤波器设计理论(插入损耗法)
  • 谈谈C语言的面向对象