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