效果
demo.html
<html>
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)大屏</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>
物聯(lián)網(wǎng)平臺數(shù)據(jù)統(tǒng)計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" /> 監(jiān)控列表</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 ;">超標(biāo)</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)">超標(biāo)數(shù)據(jù)</button>
<button class="b2 click_pop2" @click="goExceptionData(point.pointId)">異常數(shù)據(jù)</button>
<button class="b3 click_pop3" @click="goDataDetail(point.pointId)">歷史數(shù)據(jù)</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, //總條數(shù)
pageIndex: 1, //第x頁
totalPage: 0, // 總共頁數(shù)，
activatePage: 1, //激活頁 默認(rèn)為1
currentPage: 1, //當(dāng)前頁數(shù) ，默認(rèn)為1
pagelist: 7, //分頁按鈕個數(shù)
pageSize: 10, // 每頁顯示數(shù)量
mid: 3, //點(diǎn)擊按鈕 分頁按鈕重新渲染時的位置 一般 是 pagelist /2 居中
factoryHeader: [{
"categories": "站點(diǎn)名"
},
{
"categories": "企業(yè)名"
},
{
"categories": "狀態(tài)"
},
{
"categories": "操作"
}
],
factory: [],
timer: null //定時器
};
var page_vue = new Vue({
el: '#page',
data: page_data,
beforeCreate: () => {
// this.send();
console.log("創(chuàng)建前page_data")
},
created: () => {
// this.dtu();
console.log("創(chuàng)建完成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: {
/* 監(jiān)測列表 */
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請求數(shù)據(jù)
console.log("dataListLength總條數(shù)::::::" + page_vue.$data.total)
console.log("pageSize每頁條數(shù)::::::" + page_vue.$data.limit)
//總頁數(shù)
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總頁數(shù):" + page_vue.$data.totalPage)
}
})
.catch(function(error) {
console.log("大屏監(jiān)控列表查詢異常" + error);
});
},
// 設(shè)置當(dāng)前頁面數(shù)據(jù)，對數(shù)組操作的截取規(guī)則為[0~9],[10~20]...,
// 當(dāng)currentPage為1時，我們顯示(0*pageSize+1)-1*pageSize，當(dāng)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;
//把 當(dāng)前頁更新
this.currentPage = this.activatePage + msg - 1;
if (this.currentPage > this.totalPage) {
this.currentPage = this.totalPage;
}
if (this.currentPage < 1) {
this.currentPage = 1;
}
//如果是 往前移動 需要 判斷兩種情況 第一種 如果移動到的下一步 加上 顯示的頁碼按鈕數(shù) 超出了 總頁碼數(shù)
//那么 我們就 把 頁碼按鈕的起始更新為 頁碼數(shù) - 頁碼按鈕顯示數(shù) + 1
//如果小于等于 那么把 頁碼按鈕更新為點(diǎn)擊的頁碼按鈕
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) {
//對 最小需要調(diào)整按鈕的邊界進(jìn)行判斷
if (this.currentPage >= (this.pagelist - this.mid)) {
this.activatePage = this.currentPage - this.mid;
}
}
//和上面 一樣 我們需要判斷 點(diǎn)擊分頁按鈕的 索引 如果點(diǎn)擊按鈕的數(shù) - 分頁按鈕的個數(shù) 小于0了 那我們 把 分頁按鈕其實(shí)位置改成0
//否則的 話 就直接 更新成 點(diǎn)擊按鈕的索引
if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
this.activatePage = 1;
} else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) {
//對 最大需要調(diào)整按鈕的邊界進(jìn)行判斷
if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
this.activatePage = this.currentPage - this.mid;
}
}
var el = event.currentTarget;
this.getCurrentPageData();
}
}
})
結(jié)構(gòu)
以上就是HTML+VUE分頁實(shí)現(xiàn)炫酷物聯(lián)網(wǎng)大屏功能的詳細(xì)內(nèi)容，更多關(guān)于html分頁大屏的資料請關(guān)注腳本之家其它相關(guān)文章！
標(biāo)簽：崇左 河池 北海 眉山 營口 阜陽 晉中 青海
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML+VUE分頁實(shí)現(xiàn)炫酷物聯(lián)網(wǎng)大屏功能》，本文關(guān)鍵詞 HTML+VUE,分頁,實(shí)現(xiàn),炫酷,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
