クールなIoT大画面機能を実現するHTML+VUEページング

効果

テキスト_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEwNjMzNA==、サイズ_16、カラー_FFFFFF、t_70)

デモ.html

<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<title>データ画面</title>
		<link rel="スタイルシート" 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>
	<本文>
		<ヘッダー>
			IoTプラットフォームデータ統計ページ
			<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
		</ヘッダー>
		<div id="ページ">
			<div class="center_bot">
				<テーブルクラス="パネルテーブル" bordercolor="#0d48e0" border="1">
					<ヘッド bgcolor="#0e4ae0" align="center">
						<tr 高さ="40">
							<th colspan="6"><img src="images/icon04.png" /> モニタリングリスト</th>
						</tr>
					</thead>
					<t本文>
						<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 高さ="168px">
						<tr v-for="工場内のポイント" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
							<td>{{point.enterpriseName}}</td>
							<td>{{ポイント.ポイント名}}</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幅="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>
			
				</テーブル>
				<!-- <div class="box">
					<div id="ページネーション" class="ページ 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="ページリストのインデックス" :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>	
		<スクリプト>
			$(ドキュメント).ready(関数() {
				$('.pop-close').click(function() {
					$('.bgPop3,.pop3').hide();
				});
				// $('.click_pop3').click(function() {
				// $('.bgPop3,.pop3').show();
				// });
			})
		</スクリプト>
		<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>
	</本文>
</html>

ページ.js

var ページデータ = {
	キー: null、
	ポイントID: null、

	制限: 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": "会社名"
		},
		{
			"カテゴリ": "ステータス"
		},
		{
			"カテゴリ": "操作"
		}
	]、
	工場： []、
	タイマー: null //タイマー};

var page_vue = 新しいVue({
	el: '#ページ',
	データ: page_data、
	作成前: () => {
		// this.send();

		console.log("作成前のpage_data")
	},
	作成: () => {


		// this.dtu();
		console.log("page_data を作成しています")
	},
	マウント前: () => {

	},
	マウント() {
		this.timer = setInterval(() => {
			タイムアウトを設定します(this.getCurrentPageData(), 0)
		}, 1000 * 10)

		console.log("page_data のマウントが完了しました:");

	},
	更新前() {


		console.log('= は page_data= を更新してレンダリングします');
	},
	破壊された() {
		タイマー間隔をクリアします。
		this.timer = null;
	},
	時計： {}、
	メソッド: {

		/* 監視リスト */
		現在のページデータを取得する: 関数() {
			アクシオス({
					ヘッダー: {
						'コンテンツタイプ': 'application/json'
					},
					非同期: true、
					メソッド: 'post'、
					URL: 'https://www.shbykj.top/bi/monitor/data',
					データ： {
						'ページ': page_vue.$data.currentPage、
						'制限': page_vue.$data.limit,
					}
				})
				.then(関数(res) {
					コンソールにログ出力します。
					もし (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)
						begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize; とします。
						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(関数(エラー) {
					console.log("大画面監視リストクエリ例外" + エラー);

				});
		},

		// 現在のページデータを設定します。配列操作のインターセプトルールは [0~9]、[10~20]... です。
		// currentPage が 1 の場合、(0*pageSize+1)-1*pageSize が表示され、currentPage が 2 の場合、(1*pageSize+1)-2*pageSize が表示されます...



		//前のページ prevPage() {
			console.log(this.currentPage);
			this.currentPage === 1の場合{
				false を返します。
			} それ以外 {
				this.currentPage--;
				（this.activatePage !== 1）の場合{
					this.currentPage <= (this.totalPage - this.pagelist + this.mid) の場合 {
						this.activatePage = this.currentPage - this.mid;
					}
				}

				現在のページデータを取得します。
			}
		},
		// 次のページ nextPage() {

			this.currentPage === this.totalPage の場合 {
				false を返します。
			} それ以外 {
				if (this.activatePage !== this.totalPage - this.pagelist + 1) {
					this.currentPage >= (this.pagelist - this.mid) の場合 {
						this.activatePage = this.currentPage - this.mid + 1;
					}
				}
				this.currentPage++;

				現在のページデータを取得します。
			}
		},
		selectPage(イベント、メッセージ) {
			// 前方に移動するべきか後方に移動するべきかを計算します。let gap = (this.activatePage + msg - 1) - this.currentPage;

			//現在のページを更新します this.currentPage = this.activatePage + msg - 1;
			this.currentPage > this.totalPage の場合 {
				this.currentPage = this.totalPage;
			}
			(this.currentPage < 1) の場合 {
				this.currentPage = 1;
			}
			// 先へ進む場合は、2 つの状況を判断する必要があります。1 つ目は、次に進むステップと表示されるページ ボタンの数を足した数がページの総数を超える場合、ページ番号ボタンの開始をページ数 - 表示されるページ番号ボタンの数 + 1 に更新します。
			//以下であれば、ページ番号ボタンをクリックされたページ番号ボタンに更新します。if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
				this.activatePage = this.totalPage - this.pagelist + 1;
			} そうでない場合、(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;

			} そうでない場合、(ギャップ < 0 && (this.currentPage - this.pagelist + 1) > 1) {
				//調整が必要なボタンの最大境界を判断する if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
					this.activatePage = this.currentPage - this.mid;
				}



			}
			var el = イベント.currentTarget;
			現在のページデータを取得します。

		}
	}

})

構造

ここに画像の説明を挿入