HTML+VUE-Paging zur Realisierung einer coolen IoT-Großbildfunktion

Wirkung

text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEwNjMzNA==,Größe_16,Farbe_FFFFFF,t_70)

demo.html

<html>
	<Kopf>
		<meta charset="UTF-8">
		<title>Datenbildschirm</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>


	</Kopf>
	<Text>
		<Kopfzeile>
			Seite mit IoT-Plattformdatenstatistiken
			<span id=localtime style=" Schriftgröße:14px; Position: absolut; rechts: 30px; oben:-20px; "></span>
		</header>
		<div id="Seite">
			<div Klasse="center_bot">
				<table Klasse="panel-table" bordercolor="#0d48e0" border="1">
					<thead bgcolor="#0e4ae0" align="center">
						<tr Höhe="40">
							<th colspan="6"><img src="images/icon04.png" /> Überwachungsliste</th>
						</tr>
					</thead>
					<tbody>
						<tr Klasse="aaa" align="center">
							<td v-for="Artikel im Fabrikheader" style="Farbe: #00fcff; Schriftgröße: 18px; Polsterung: 5px 0;">{{ Artikel.Kategorien }}</td>
						</tr>
						<div Höhe="168px">
						<tr v-for="Punkt in Fabrik" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
							<td>{{point.enterpriseName}}</td>
							<td>{{Punkt.PunktName}}</td>
							<td>
								<div v-if="point.isErrorType==0">Keine</div>
								<div v-if="point.isErrorType==1"><a style="color: #FF6F05;">Unterbrochene Linie</div>
								<div v-if="point.isErrorType==2"><a style="color:#FF0000 ;">Den Standard übertreffen</div>
								<div v-if="point.isErrorType==3"><a style="color:#FF6F05 ;">Ausnahme</div>
								<div v-if="point.isErrorType==4"><a style="color: #00F6FF;">Normal</a></div>
							</td>
							<td Breite="250">
								<button class="b1 click_pop" @click="goWarnData(point.pointId)">Standarddaten werden überschritten</button>
								<button class="b2 click_pop2" @click="goExceptionData(point.pointId)">Ausnahmedaten</button>
								<button class="b3 click_pop3" @click="goDataDetail(point.pointId)">Historische Daten</button>
							</td>
						</tr>
			</div>
			
					</tbody>
			
				</Tabelle>
				<!-- <div Klasse="Box">
					<div id="pagination" class="page fl"></div>
				</div> -->
				<div Stil="Rand:0 auto;Textausrichtung:Mitte">
				      <a @click="prevPage()">Vorherige Seite</a>
				      <div style="display: inline-block;margin-left: 10px" v-for="index der Seitenliste" :key="index">
				        <button :class="{active: currentPage == activatePage + index - 1}" @click="selectPage($event,index)">{{activatePage + index -1}}</button>
				      </div>
				      <span >Seite {{pageIndex}} / Gesamtanzahl {{totalPage}} Seiten Gesamtanzahl {{total}} Elemente</span>
				      <a @click="nextPage($event)">Nächste Seite</a>
				</div>
			</div>
		</div>	
		<Skript>
			$(Dokument).bereit(Funktion() {
				$('.pop-close').klick(Funktion() {
					$('.bgPop3,.pop3').hide();
				});
				// $('.click_pop3').klick(Funktion() {
				// $('.bgPop3,.pop3').show();
				// });
			})
		</Skript>
		<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>

Seite.js

var Seitendaten = {
	Schlüssel: null,
	Punkt-ID: null,

	Grenze: 6,
	total: 0, //Gesamtzahl der Einträge pageIndex: 1, //Seite x totalPage: 0, //Gesamtzahl der Seiten,
	activatePage: 1, //Die Standardaktivierungsseite ist 1
	currentPage: 1, //Aktuelle Seitennummer, Standard ist 1
	pagelist: 7, //Anzahl der Seitenschaltflächen pageSize: 10, //Anzahl der pro Seite anzuzeigenden Schaltflächen mid: 3, //Klicken Sie auf die Schaltfläche und die Seitenschaltfläche wird in der Mitte von pagelist/2 neu gerendert factoryHeader: [{
			"Kategorien": "Site-Name"
		},
		{
			"Kategorien": "Firmenname"
		},
		{
			"Kategorien": "Status"
		},
		{
			"Kategorien": "Betrieb"
		}
	],
	Fabrik: [],
	Timer: null //Timer};

var page_vue = neuer Vue({
	el: '#Seite',
	Daten: Seitendaten,
	vorErstellen: () => {
		// dies.senden();

		console.log("Seitendaten vor der Erstellung")
	},
	erstellt: () => {


		// dies.dtu();
		console.log("Seitendaten erstellen")
	},
	vorMount: () => {

	},
	montiert() {
		dieser.timer = setzeInterval(() => {
			setTimeout(diese.getCurrentPageData(), 0)
		}, 1000 * 10)

		console.log("Einbinden der Seitendaten abgeschlossen:");

	},
	vorUpdate() {


		console.log('= aktualisiert und rendert page_data=');
	},
	zerstört() {
		: ClearInterval(dieser.Timer);
		dieser.timer = null;
	},
	betrachten: {},
	Methoden: {

		/* Überwachungsliste */
		getCurrentPageData: Funktion() {
			axios({
					Überschriften: {
						„Inhaltstyp“: „Anwendung/json“
					},
					asynchron: wahr,
					Methode: 'post',
					URL: „https://www.shbykj.top/bi/monitor/data“,
					Daten: {
						"Seite": page_vue.$data.currentPage,
						"Limit": page_vue.$data.limit,
					}
				})
				.dann(Funktion(res) {
					Konsole.log(res.data.data);
					wenn (res.daten.daten) {
						page_vue.$data.factory = res.data.data.data
						page_vue.$data.total = res.data.data.total

						Konsole.log(".this.total" + page_vue.$data.total)
						lass beginne = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize;
						let end = page_vue.$data.currentPage * page_vue.$data.pageSize;
						dies.mid = Math.floor(page_vue.$data.pagelist / 2);
						//Daten hier selbst anfordern console.log("dataListLength Gesamtzahl der Elemente::::::" + page_vue.$data.total)

						console.log("SeitengrößeAnzahl Einträge pro Seite::::::" + page_vue.$data.limit)
						//Gesamtzahl der Seiten 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 Gesamtseitenzahl: " + page_vue.$data.totalPage)
					}
				})
				.catch(Funktion(Fehler) {
					console.log("Ausnahme bei Abfrage der Überwachungsliste für großen Bildschirm" + Fehler);

				});
		},

		// Aktuelle Seitendaten festlegen, die Abfangregeln für Array-Operationen sind [0~9], [10~20]...,
		// Wenn currentPage 1 ist, zeigen wir (0*Seitengröße+1)-1*Seitengröße an, wenn currentPage 2 ist, zeigen wir (1*Seitengröße+1)-2*Seitengröße an...



		//Vorherige Seite prevPage() {
			Konsole.log(diese.aktuelleSeite);
			wenn (diese.aktuelleSeite === 1) {
				gibt false zurück;
			} anders {
				diese.aktuelleSeite--;
				wenn (diese.activatePage !== 1) {
					wenn (diese.aktuelleSeite <= (diese.gesamtSeite - diese.Seitenliste + diese.mid)) {
						diese.activatePage = diese.currentPage - diese.mid;
					}
				}

				dies.getCurrentPageData();
			}
		},
		// Nächste Seite nextPage() {

			wenn (diese.aktuelleSeite === diese.gesamteSeite) {
				gibt false zurück;
			} anders {
				wenn (diese.activatePage !== diese.totalPage - diese.pagelist + 1) {
					wenn (diese.aktuelleSeite >= (diese.Seitenliste - diese.mid)) {
						diese.activatePage = diese.currentPage - diese.mid + 1;
					}
				}
				diese.aktuelleSeite++;

				dies.getCurrentPageData();
			}
		},
		wähleSeite(Ereignis, Nachricht) {
			//Berechnen, ob vorwärts oder rückwärts bewegt werden soll let gap = (this.activatePage + msg - 1) - this.currentPage;

			//Aktualisiere die aktuelle Seite this.currentPage = this.activatePage + msg - 1;
			wenn (diese.aktuelleSeite > diese.gesamteSeite) {
				diese.aktuelleSeite = diese.gesamteSeite;
			}
			wenn (diese.aktuelleSeite < 1) {
				diese.aktuelleSeite = 1;
			}
			//Wenn Sie weitermachen, müssen Sie zwei Situationen beurteilen. Die erste ist, dass, wenn der nächste Schritt, zu dem Sie gehen, plus die Anzahl der angezeigten Seitenschaltflächen die Gesamtzahl der Seiten überschreitet, //dann aktualisieren wir den Anfang der Seitenzahlschaltfläche auf die Anzahl der Seiten - die Anzahl der angezeigten Seitenzahlschaltflächen + 1
			//Wenn es kleiner oder gleich ist, aktualisiere die Seitenzahlschaltfläche auf die angeklickte Seitenzahlschaltfläche, wenn (Lücke > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
				diese.activatePage = diese.totalPage - diese.pagelist + 1;
			} sonst wenn (Lücke > 0 und (diese.aktuelleSeite + diese.Seitenliste - 1) <= diese.Gesamtseite) {
				//Beurteilen Sie die Mindestgrenze der Schaltfläche, die angepasst werden muss, wenn (this.currentPage >= (this.pagelist - this.mid)) {
					diese.activatePage = diese.currentPage - diese.mid;
				}

			}


			//Wie oben müssen wir den Index der angeklickten Paging-Schaltfläche bestimmen. Wenn die Anzahl der angeklickten Schaltflächen - die Anzahl der Paging-Schaltflächen kleiner als 0 ist, ändern wir die Position der Paging-Schaltfläche auf 0.
			//Andernfalls aktualisiere direkt auf den Index der angeklickten Schaltfläche, wenn (Gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
				diese.activatePage = 1;

			} sonst wenn (Lücke < 0 und (diese.aktuelleSeite - diese.Seitenliste + 1) > 1) {
				//Beurteilen Sie die maximale Grenze der Schaltfläche, die angepasst werden muss, wenn (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
					diese.activatePage = diese.currentPage - diese.mid;
				}



			}
			var el = Ereignis.aktuellesZiel;
			dies.getCurrentPageData();

		}
	}

})

Struktur

Bildbeschreibung hier einfügen

Oben sind die Details der HTML+VUE-Paging-Funktion aufgeführt, mit der coole IoT-Großbildschirmfunktionen erreicht werden. Weitere Informationen zur HTML-Paging-Funktion für Großbildschirme finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: JavaScript zum Implementieren eines Dropdown-Listenauswahlfelds

>>: Bei der anonymen Mysql-Anmeldung kann keine Datenbankproblemlösung erstellt werden