菏泽市建设局网站,建设设计院网站,全国黄页大全,规范门户网站建设本文在基础上进行改进#xff0c;后端使用若依后端IofTV-Screen: #x1f525;一个基于 vue、datav、Echart 框架的物联网可视化#xff08;大屏展示#xff09;模板#xff0c;提供数据动态刷新渲染、屏幕适应、数据滚动配置#xff0c;内部图表自由替换、Mixins注入等功…本文在基础上进行改进后端使用若依后端IofTV-Screen: 一个基于 vue、datav、Echart 框架的物联网可视化大屏展示模板提供数据动态刷新渲染、屏幕适应、数据滚动配置内部图表自由替换、Mixins注入等功能持续更新.... - Gitee.com
1.效果将系统总人数统计显示到大屏 1. 使用dv-digital-flop组件 dv-digital-flop :configconfig1 stylewidth: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 idcountUsers resultTypeIntegerselect count(1) from sys_user where del_flag0
/select7. 最终代码
templateul classuser_Overview flex v-ifpageflagli classuser_Overview-item stylecolor: #00fdfadiv classuser_Overview_nums allnum dv-digital-flop :configconfig1 stylewidth:100%;height:100%; //divp总人数/p/li/ulReacquire v-else onclickgetData line-height200px重新获取/Reacquire
/templatescript
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 langscss 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
