经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » XHTML » 查看文章
HTML+VUE分页实现炫酷物联网大屏功能_HTML/Xhtml
来源：jb51　　时间：2021/5/31 10:59:30　　对本文有异议

效果

text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEwNjMzNA==,size_16,color_FFFFFF,t_70)

demo.html

  1. <html>
  2. 	<head>
  3. 		<meta charset="UTF-8">
  4. 		<title>数据大屏</title>
  5. 		<link rel="stylesheet" href="css/style.css" />
  6. 		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  7. 		<script type="text/javascript" src="js/axios.min.js"></script>
  8. 		<script type="text/javascript" src="js/babel.min.js"></script>
  9.  
  10. 		<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
  11.  
  12.  
  13. 	</head>
  14. 	<body>
  15. 		<header>
  16. 			物联网平台数据统计page
  17. 			<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
  18. 		</header>
  19. 		<div id="page">
  20. 			<div class="center_bot">
  21. 				<table class="panel-table" bordercolor="#0d48e0" border="1">
  22. 					<thead bgcolor="#0e4ae0" align="center">
  23. 						<tr height="40">
  24. 							<th colspan="6"><img src="images/icon04.png" /> 监控列表</th>
  25. 						</tr>
  26. 					</thead>
  27. 					<tbody>
  28. 						<tr class="aaa" align="center">
  29. 							<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
  30. 						</tr>
  31. 						<div  height="168px">
  32. 						<tr v-for="point in factory" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
  33. 							<td>{{point.enterpriseName}}</td>
  34. 							<td>{{point.pointName}}</td>
  35. 							<td>
  36. 								<div v-if="point.isErrorType==0">无</div>
  37. 								<div v-if="point.isErrorType==1"><a style="color: #FF6F05;">断线</div>
  38. 								<div v-if="point.isErrorType==2"><a style="color:#FF0000 ;">超标</div>
  39. 								<div v-if="point.isErrorType==3"><a style="color:#FF6F05 ;">异常</div>
  40. 								<div v-if="point.isErrorType==4"><a style="color: #00F6FF;">正常</a></div>
  41. 							</td>
  42. 							<td width="250">
  43. 								<button class="b1 click_pop" @click="goWarnData(point.pointId)">超标数据</button>
  44. 								<button class="b2 click_pop2" @click="goExceptionData(point.pointId)">异常数据</button>
  45. 								<button class="b3 click_pop3" @click="goDataDetail(point.pointId)">历史数据</button>
  46. 							</td>
  47. 						</tr>
  48. 			</div>
  49. 			
  50. 					</tbody>
  51. 			
  52. 				</table>
  53. 				<!-- <div class="box">
  54. 					<div id="pagination" class="page fl"></div>
  55. 				</div> -->
  56. 				<div style="margin:0 auto;text-align:center">
  57. 				      <a @click="prevPage()">上一页</a>
  58. 				      <div style="display: inline-block;margin-left: 10px" v-for="index of  pagelist" :key="index">
  59. 				        <button :class="{active: currentPage == activatePage + index - 1}"    @click="selectPage($event,index)">{{activatePage + index -1}}</button>
  60. 				      </div>
  61. 				      <span >第{{pageIndex}}页/共{{totalPage}}页   共{{total}}条</span>
  62. 				      <a @click="nextPage($event)">下一页</a>
  63. 				</div>
  64. 			</div>
  65. 		</div>	
  66. 		<script>
  67. 			$(document).ready(function() {
  68. 				$('.pop-close').click(function() {
  69. 					$('.bgPop3,.pop3').hide();
  70. 				});
  71. 				// $('.click_pop3').click(function() {
  72. 				// 	$('.bgPop3,.pop3').show();
  73. 				// });
  74. 			})
  75. 		</script>
  76. 		<script type="text/javascript" src="js/jquery.min.js"></script>
  77. 		<script type="text/javascript" src="js/echarts.min.js"></script>
  78. 		<script type="text/javascript" src="js/china.js"></script>
  79. 		<script type="text/javascript" src="js/vue.min.js"></script>
  80. 		<script type="text/javascript" src="js/map.js"></script>
  81. 		<script type="text/javascript" src="js/times.js"></script>
  82. 		<script type="text/javascript" src="js/DTU.js"></script>
  83. 		<script type="text/javascript" src="js/PLC.js"></script>
  84. 		<script type="text/javascript" src="js/online.js"></script>
  85. 		<script type="text/javascript" src="js/industry.js"></script>
  86. 		<script type="text/javascript" src="js/data.js"></script>
  87. <!-- 		<script type="text/javascript" src="js/index.js"></script> -->
  88. 		<script type="text/javascript" src="js/history.js"></script>
  89. 		<script type="text/javascript" src="js/warn.js"></script>
  90. 	    <script type="text/javascript" src="js/page.js"></script>
  91. 	</body>
  92. </html>

page. js

  1. var page_data = {
  2. 	key: null,
  3. 	pointId: null,
  4.  
  5. 	limit: 6,
  6. 	total: 0, //总条数
  7. 	pageIndex: 1, //第x页
  8. 	totalPage: 0, // 总共页数，
  9. 	activatePage: 1, //激活页 默认为1
  10. 	currentPage: 1, //当前页数 ，默认为1
  11. 	pagelist: 7, //分页按钮个数
  12. 	pageSize: 10, // 每页显示数量
  13. 	mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中
  14. 	factoryHeader: [{
  15. 			"categories": "站点名"
  16. 		},
  17. 		{
  18. 			"categories": "企业名"
  19. 		},
  20. 		{
  21. 			"categories": "状态"
  22. 		},
  23. 		{
  24. 			"categories": "操作"
  25. 		}
  26. 	],
  27. 	factory: [],
  28. 	timer: null //定时器
  29. };
  30.  
  31. var page_vue = new Vue({
  32. 	el: '#page',
  33. 	data: page_data,
  34. 	beforeCreate: () => {
  35. 		// this.send();
  36.  
  37. 		console.log("创建前page_data")
  38. 	},
  39. 	created: () => {
  40.  
  41.  
  42. 		// this.dtu();
  43. 		console.log("创建完成page_data")
  44. 	},
  45. 	beforeMount: () => {
  46.  
  47. 	},
  48. 	mounted() {
  49. 		this.timer = setInterval(() => {
  50. 			setTimeout(this.getCurrentPageData(), 0)
  51. 		}, 1000 * 10)
  52.  
  53. 		console.log("挂载完成page_data：");
  54.  
  55. 	},
  56. 	beforeUpdate() {
  57.  
  58.  
  59. 		console.log('=即将更新渲染page_data=');
  60. 	},
  61. 	destroyed() {
  62. 		clearInterval(this.timer);
  63. 		this.timer = null;
  64. 	},
  65. 	watch: {},
  66. 	methods: {
  67.  
  68. 		/* 监测列表 */
  69. 		getCurrentPageData: function() {
  70. 			axios({
  71. 					headers: {
  72. 						'Content-Type': 'application/json'
  73. 					},
  74. 					async: true,
  75. 					method: 'post',
  76. 					url: 'https://www.shbykj.top/bi/monitor/data',
  77. 					data: {
  78. 						'page': page_vue.$data.currentPage,
  79. 						'limit': page_vue.$data.limit,
  80. 					}
  81. 				})
  82. 				.then(function(res) {
  83. 					console.log(res.data.data);
  84. 					if (res.data.data) {
  85. 						page_vue.$data.factory = res.data.data.data
  86. 						page_vue.$data.total = res.data.data.total
  87.  
  88. 						console.log(".this.total" + page_vue.$data.total)
  89. 						let begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize;
  90. 						let end = page_vue.$data.currentPage * page_vue.$data.pageSize;
  91. 						this.mid = Math.floor(page_vue.$data.pagelist / 2);
  92. 						//这里自己diy请求数据
  93.  
  94. 						console.log("dataListLength总条数::::::" + page_vue.$data.total)
  95.  
  96. 						console.log("pageSize每页条数::::::" + page_vue.$data.limit)
  97. 						//总页数
  98. 						page_vue.$data.totalPage = page_vue.$data.total % page_vue.$data.limit == 0 ? page_vue.$data.total / page_vue
  99. 							.$data.limit : Math.floor(page_vue.$data.total /
  100. 								page_vue.$data.limit) + 1
  101. 						console.log("totalPage总页数:" + page_vue.$data.totalPage)
  102. 					}
  103. 				})
  104. 				.catch(function(error) {
  105. 					console.log("大屏监控列表查询异常" + error);
  106.  
  107. 				});
  108. 		},
  109.  
  110. 		// 设置当前页面数据，对数组操作的截取规则为[0~9],[10~20]...,
  111. 		// 当currentPage为1时，我们显示(0*pageSize+1)-1*pageSize，当currentPage为2时，我们显示(1*pageSize+1)-2*pageSize...
  112.  
  113.  
  114.  
  115. 		//上一页
  116. 		prevPage() {
  117. 			console.log(this.currentPage);
  118. 			if (this.currentPage === 1) {
  119. 				return false;
  120. 			} else {
  121. 				this.currentPage--;
  122. 				if (this.activatePage !== 1) {
  123. 					if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
  124. 						this.activatePage = this.currentPage - this.mid;
  125. 					}
  126. 				}
  127.  
  128. 				this.getCurrentPageData();
  129. 			}
  130. 		},
  131. 		// 下一页
  132. 		nextPage() {
  133.  
  134. 			if (this.currentPage === this.totalPage) {
  135. 				return false;
  136. 			} else {
  137. 				if (this.activatePage !== this.totalPage - this.pagelist + 1) {
  138. 					if (this.currentPage >= (this.pagelist - this.mid)) {
  139. 						this.activatePage = this.currentPage - this.mid + 1;
  140. 					}
  141. 				}
  142. 				this.currentPage++;
  143.  
  144. 				this.getCurrentPageData();
  145. 			}
  146. 		},
  147. 		selectPage(event, msg) {
  148. 			//计算 是往前还是往后移动
  149. 			let gap = (this.activatePage + msg - 1) - this.currentPage;
  150.  
  151. 			//把 当前页更新
  152. 			this.currentPage = this.activatePage + msg - 1;
  153. 			if (this.currentPage > this.totalPage) {
  154. 				this.currentPage = this.totalPage;
  155. 			}
  156. 			if (this.currentPage < 1) {
  157. 				this.currentPage = 1;
  158. 			}
  159. 			//如果是 往前移动 需要 判断两种情况 第一种 如果移动到的下一步 加上 显示的页码按钮数 超出了 总页码数
  160. 			//那么 我们就 把 页码按钮的起始更新为 页码数 - 页码按钮显示数 + 1
  161. 			//如果小于等于 那么把 页码按钮更新为点击的页码按钮
  162. 			if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
  163. 				this.activatePage = this.totalPage - this.pagelist + 1;
  164. 			} else if (gap > 0 && (this.currentPage + this.pagelist - 1) <= this.totalPage) {
  165. 				//对 最小需要调整按钮的边界进行判断
  166. 				if (this.currentPage >= (this.pagelist - this.mid)) {
  167. 					this.activatePage = this.currentPage - this.mid;
  168. 				}
  169.  
  170. 			}
  171.  
  172.  
  173. 			//和上面 一样 我们需要判断 点击分页按钮的 索引  如果点击按钮的数 - 分页按钮的个数  小于0了 那我们 把 分页按钮其实位置改成0
  174. 			//否则的 话 就直接 更新成 点击按钮的索引
  175. 			if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
  176. 				this.activatePage = 1;
  177.  
  178. 			} else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) {
  179. 				//对 最大需要调整按钮的边界进行判断
  180. 				if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
  181. 					this.activatePage = this.currentPage - this.mid;
  182. 				}
  183.  
  184.  
  185.  
  186. 			}
  187. 			var el = event.currentTarget;
  188. 			this.getCurrentPageData();
  189.  
  190. 		}
  191. 	}
  192.  
  193. })

结构

在这里插入图片描述

以上就是HTML+VUE分页实现炫酷物联网大屏功能的详细内容，更多关于html分页大屏的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

XHTML热门文章

  • html中显示特殊符号(附带特殊字符对应表)_HTML/Xhtml
  • Html读取本地文件夹下图片并显示的示例代码_HTML/Xhtml
  • HTML+VUE分页实现炫酷物联网大屏功能_HTML/Xhtml
  • html中使用vue-router的示例代码_HTML/Xhtml
  • 使用html2canvas对有百度地图的Dom元素处理成图片的解决_HTML/Xhtml
  • html输入两个数实现加减乘除功能_HTML/Xhtml
  • HTML中table表格拆分合并(colspan、rowspan)_HTML/Xhtml
  • HTML中的if判断用法_HTML/Xhtml
  • HTML表格跨行跨列操作(rowspan、colspan)_HTML/Xhtml
  • html转pdf截图保存功能的实现_HTML/Xhtml

    • XHTML推荐文章

  • HTML基础详解(上)_HTML/Xhtml
  • HTML基础详解（下）_HTML/Xhtml
  • html中显示特殊符号(附带特殊字符对应表)_HTML/Xhtml
  • HTML中的表单Form实现居中效果_HTML/Xhtml
  • HTML+VUE分页实现炫酷物联网大屏功能_HTML/Xhtml

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号