HTML+VUE分页实现炫酷物联网大屏功能


Posted in Vue.js onMay 27, 2021

效果

HTML+VUE分页实现炫酷物联网大屏功能

demo.html

<html>
	<head>
		<meta charset="UTF-8">
		<title>数据大屏</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/babel.min.js"></script>

		<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>


	</head>
	<body>
		<header>
			物联网平台数据统计page
			<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
		</header>
		<div id="page">
			<div class="center_bot">
				<table class="panel-table" bordercolor="#0d48e0" border="1">
					<thead bgcolor="#0e4ae0" align="center">
						<tr height="40">
							<th colspan="6"><img src="images/icon04.png" /> 监控列表</th>
						</tr>
					</thead>
					<tbody>
						<tr class="aaa" align="center">
							<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
						</tr>
						<div  height="168px">
						<tr v-for="point in factory" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
							<td>{{point.enterpriseName}}</td>
							<td>{{point.pointName}}</td>
							<td>
								<div v-if="point.isErrorType==0">无</div>
								<div v-if="point.isErrorType==1"><a style="color: #FF6F05;">断线</div>
								<div v-if="point.isErrorType==2"><a style="color:#FF0000 ;">超标</div>
								<div v-if="point.isErrorType==3"><a style="color:#FF6F05 ;">异常</div>
								<div v-if="point.isErrorType==4"><a style="color: #00F6FF;">正常</a></div>
							</td>
							<td width="250">
								<button class="b1 click_pop" @click="goWarnData(point.pointId)">超标数据</button>
								<button class="b2 click_pop2" @click="goExceptionData(point.pointId)">异常数据</button>
								<button class="b3 click_pop3" @click="goDataDetail(point.pointId)">历史数据</button>
							</td>
						</tr>
			</div>
			
					</tbody>
			
				</table>
				<!-- <div class="box">
					<div id="pagination" class="page fl"></div>
				</div> -->
				<div style="margin:0 auto;text-align:center">
				      <a @click="prevPage()">上一页</a>
				      <div style="display: inline-block;margin-left: 10px" v-for="index of  pagelist" :key="index">
				        <button :class="{active: currentPage == activatePage + index - 1}"    @click="selectPage($event,index)">{{activatePage + index -1}}</button>
				      </div>
				      <span >第{{pageIndex}}页/共{{totalPage}}页   共{{total}}条</span>
				      <a @click="nextPage($event)">下一页</a>
				</div>
			</div>
		</div>	
		<script>
			$(document).ready(function() {
				$('.pop-close').click(function() {
					$('.bgPop3,.pop3').hide();
				});
				// $('.click_pop3').click(function() {
				// 	$('.bgPop3,.pop3').show();
				// });
			})
		</script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/map.js"></script>
		<script type="text/javascript" src="js/times.js"></script>
		<script type="text/javascript" src="js/DTU.js"></script>
		<script type="text/javascript" src="js/PLC.js"></script>
		<script type="text/javascript" src="js/online.js"></script>
		<script type="text/javascript" src="js/industry.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
<!-- 		<script type="text/javascript" src="js/index.js"></script> -->
		<script type="text/javascript" src="js/history.js"></script>
		<script type="text/javascript" src="js/warn.js"></script>
	    <script type="text/javascript" src="js/page.js"></script>
	</body>
</html>

page. js

var page_data = {
	key: null,
	pointId: null,

	limit: 6,
	total: 0, //总条数
	pageIndex: 1, //第x页
	totalPage: 0, // 总共页数,
	activatePage: 1, //激活页 默认为1
	currentPage: 1, //当前页数 ,默认为1
	pagelist: 7, //分页按钮个数
	pageSize: 10, // 每页显示数量
	mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中
	factoryHeader: [{
			"categories": "站点名"
		},
		{
			"categories": "企业名"
		},
		{
			"categories": "状态"
		},
		{
			"categories": "操作"
		}
	],
	factory: [],
	timer: null //定时器
};

var page_vue = new Vue({
	el: '#page',
	data: page_data,
	beforeCreate: () => {
		// this.send();

		console.log("创建前page_data")
	},
	created: () => {


		// this.dtu();
		console.log("创建完成page_data")
	},
	beforeMount: () => {

	},
	mounted() {
		this.timer = setInterval(() => {
			setTimeout(this.getCurrentPageData(), 0)
		}, 1000 * 10)

		console.log("挂载完成page_data:");

	},
	beforeUpdate() {


		console.log('=即将更新渲染page_data=');
	},
	destroyed() {
		clearInterval(this.timer);
		this.timer = null;
	},
	watch: {},
	methods: {

		/* 监测列表 */
		getCurrentPageData: function() {
			axios({
					headers: {
						'Content-Type': 'application/json'
					},
					async: true,
					method: 'post',
					url: 'https://www.shbykj.top/bi/monitor/data',
					data: {
						'page': page_vue.$data.currentPage,
						'limit': page_vue.$data.limit,
					}
				})
				.then(function(res) {
					console.log(res.data.data);
					if (res.data.data) {
						page_vue.$data.factory = res.data.data.data
						page_vue.$data.total = res.data.data.total

						console.log(".this.total" + page_vue.$data.total)
						let begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize;
						let end = page_vue.$data.currentPage * page_vue.$data.pageSize;
						this.mid = Math.floor(page_vue.$data.pagelist / 2);
						//这里自己diy请求数据

						console.log("dataListLength总条数::::::" + page_vue.$data.total)

						console.log("pageSize每页条数::::::" + page_vue.$data.limit)
						//总页数
						page_vue.$data.totalPage = page_vue.$data.total % page_vue.$data.limit == 0 ? page_vue.$data.total / page_vue
							.$data.limit : Math.floor(page_vue.$data.total /
								page_vue.$data.limit) + 1
						console.log("totalPage总页数:" + page_vue.$data.totalPage)
					}
				})
				.catch(function(error) {
					console.log("大屏监控列表查询异常" + error);

				});
		},

		// 设置当前页面数据,对数组操作的截取规则为[0~9],[10~20]...,
		// 当currentPage为1时,我们显示(0*pageSize+1)-1*pageSize,当currentPage为2时,我们显示(1*pageSize+1)-2*pageSize...



		//上一页
		prevPage() {
			console.log(this.currentPage);
			if (this.currentPage === 1) {
				return false;
			} else {
				this.currentPage--;
				if (this.activatePage !== 1) {
					if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
						this.activatePage = this.currentPage - this.mid;
					}
				}

				this.getCurrentPageData();
			}
		},
		// 下一页
		nextPage() {

			if (this.currentPage === this.totalPage) {
				return false;
			} else {
				if (this.activatePage !== this.totalPage - this.pagelist + 1) {
					if (this.currentPage >= (this.pagelist - this.mid)) {
						this.activatePage = this.currentPage - this.mid + 1;
					}
				}
				this.currentPage++;

				this.getCurrentPageData();
			}
		},
		selectPage(event, msg) {
			//计算 是往前还是往后移动
			let gap = (this.activatePage + msg - 1) - this.currentPage;

			//把 当前页更新
			this.currentPage = this.activatePage + msg - 1;
			if (this.currentPage > this.totalPage) {
				this.currentPage = this.totalPage;
			}
			if (this.currentPage < 1) {
				this.currentPage = 1;
			}
			//如果是 往前移动 需要 判断两种情况 第一种 如果移动到的下一步 加上 显示的页码按钮数 超出了 总页码数
			//那么 我们就 把 页码按钮的起始更新为 页码数 - 页码按钮显示数 + 1
			//如果小于等于 那么把 页码按钮更新为点击的页码按钮
			if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
				this.activatePage = this.totalPage - this.pagelist + 1;
			} else if (gap > 0 && (this.currentPage + this.pagelist - 1) <= this.totalPage) {
				//对 最小需要调整按钮的边界进行判断
				if (this.currentPage >= (this.pagelist - this.mid)) {
					this.activatePage = this.currentPage - this.mid;
				}

			}


			//和上面 一样 我们需要判断 点击分页按钮的 索引  如果点击按钮的数 - 分页按钮的个数  小于0了 那我们 把 分页按钮其实位置改成0
			//否则的 话 就直接 更新成 点击按钮的索引
			if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
				this.activatePage = 1;

			} else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) {
				//对 最大需要调整按钮的边界进行判断
				if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
					this.activatePage = this.currentPage - this.mid;
				}



			}
			var el = event.currentTarget;
			this.getCurrentPageData();

		}
	}

})

结构

HTML+VUE分页实现炫酷物联网大屏功能

以上就是HTML+VUE分页实现炫酷物联网大屏功能的详细内容,更多关于html分页大屏的资料请关注三水点靠木其它相关文章!

 
Vue.js 相关文章推荐
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue 实现上传组件
May 31 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
Vue实现动态查询规则生成组件
详解vue身份认证管理和租户管理
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP生成器简单实例
2015/05/13 PHP
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
好书伴我成长演讲稿
2014/05/14 职场文书
就业协议书怎么填
2014/09/15 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Apache POI的基本使用详解
2021/11/07 Servers
Oracle中DBLink的详细介绍
2022/04/29 Oracle