大屏使用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>