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