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分页大屏的资料请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！