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 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue实现在data里引入相对路径
Jun 05 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数组去除空值函数分享
2015/02/02 PHP
php加密解密字符串示例
2016/10/13 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python中的rjust()方法使用详解
2015/05/19 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
大学生职业生涯设计书
2014/01/02 职场文书
导游实习生自荐书
2014/01/28 职场文书
父母对孩子的寄语
2014/04/09 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
学期评语大全
2014/04/30 职场文书
住房租房协议书
2014/08/20 职场文书
关于教师节的广播稿
2014/09/10 职场文书
爱国主义影片观后感
2015/06/18 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python