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

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

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

1. 使用dv-digital-flop组件

 

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 count(1) from sys_user where del_flag='0'

7. 最终代码