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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue @ ~ 相对路径 路径别名设置方式
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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php图像处理类实例
2015/07/28 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
webpack优化的深入理解
2018/12/10 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python烟花效果的代码实例
2020/02/25 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
儿科护士实习自我鉴定
2013/10/17 职场文书
工作交流会欢迎词
2014/01/12 职场文书
小学生综合素质评语
2014/04/23 职场文书
暑假学习心得体会
2014/09/02 职场文书
紧急通知
2015/04/17 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
户外拓展训练感想
2015/08/07 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python