From 3c1f809e9fd8b8a95493eb144fa386868dcaa539 Mon Sep 17 00:00:00 2001
From: Junjie <DELL@qq.com>
Date: 星期三, 03 十二月 2025 13:55:13 +0800
Subject: [PATCH] #
---
src/main/webapp/components/WatchRgvCard.js | 44 ++++++++++++--
src/main/webapp/components/DevpCard.js | 39 +++++++++++-
src/main/webapp/components/WatchCrnCard.js | 40 ++++++++++++-
3 files changed, 109 insertions(+), 14 deletions(-)
diff --git a/src/main/webapp/components/DevpCard.js b/src/main/webapp/components/DevpCard.js
index 61881a3..497116a 100644
--- a/src/main/webapp/components/DevpCard.js
+++ b/src/main/webapp/components/DevpCard.js
@@ -17,8 +17,9 @@
<div style="margin-bottom: 10px;"><el-button @click="controlCommand()" size="mini">涓嬪彂</el-button></div>
</div>
</div>
- <el-collapse v-model="activeNames">
- <el-collapse-item v-for="(item) in stationList" :name="item.stationId">
+ <div style="max-height: 55vh; overflow:auto;">
+ <el-collapse v-model="activeNames" accordion>
+ <el-collapse-item v-for="(item) in displayStationList" :name="item.stationId">
<template slot="title">
<div style="width: 100%;display: flex;">
<div style="width: 50%;">{{ item.stationId }}绔�</div>
@@ -42,8 +43,21 @@
<el-descriptions-item label="鏉＄爜">{{ item.barcode }}</el-descriptions-item>
<el-descriptions-item label="鏁呴殰浠ｇ爜">{{ item.error }}</el-descriptions-item>
</el-descriptions>
- </el-collapse-item>
- </el-collapse>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+ <div style="display:flex; justify-content:flex-end; margin-top:8px;">
+ <el-pagination
+ small
+ @current-change="handlePageChange"
+ @size-change="handleSizeChange"
+ :current-page="currentPage"
+ :page-size="pageSize"
+ :page-sizes="[10,20,50,100]"
+ layout="total, prev, pager, next"
+ :total="stationList.length">
+ </el-pagination>
+ </div>
</div>
`,
props: ["param"],
@@ -58,12 +72,21 @@
taskNo: "",
targetStationId: "",
},
+ pageSize: 25,
+ currentPage: 1,
};
},
created() {
setInterval(() => {
this.getDevpStateInfo();
}, 1000);
+ },
+ computed: {
+ displayStationList() {
+ const start = (this.currentPage - 1) * this.pageSize;
+ const end = start + this.pageSize;
+ return this.stationList.slice(start, end);
+ }
},
watch: {
param: {
@@ -78,6 +101,13 @@
},
},
methods: {
+ handlePageChange(page) {
+ this.currentPage = page;
+ },
+ handleSizeChange(size) {
+ this.pageSize = size;
+ this.currentPage = 1;
+ },
getDevpStateInfo() {
let that = this;
$.ajax({
@@ -101,6 +131,7 @@
}
});
that.stationList = tmp;
+ that.currentPage = 1;
}
}
},
diff --git a/src/main/webapp/components/WatchCrnCard.js b/src/main/webapp/components/WatchCrnCard.js
index a394a6e..96a8574 100644
--- a/src/main/webapp/components/WatchCrnCard.js
+++ b/src/main/webapp/components/WatchCrnCard.js
@@ -19,8 +19,9 @@
<div style="margin-bottom: 10px;"><el-button @click="controlCommandTaskComplete()" size="mini">浠诲姟瀹屾垚</el-button></div>
</div>
</div>
- <el-collapse v-model="activeNames">
- <el-collapse-item v-for="(item) in crnList" :name="item.crnNo">
+ <div style="max-height: 55vh; overflow:auto;">
+ <el-collapse v-model="activeNames" accordion>
+ <el-collapse-item v-for="(item) in displayCrnList" :name="item.crnNo">
<template slot="title">
<div style="width: 100%;display: flex;">
<div style="width: 50%;">{{ item.crnNo }}鍙峰爢鍨涙満</div>
@@ -55,8 +56,20 @@
<el-descriptions-item label="鏁呴殰浠ｇ爜">{{ item.warnCode }}</el-descriptions-item>
<el-descriptions-item label="鏁呴殰鎻忚堪">{{ item.alarm }}</el-descriptions-item>
</el-descriptions>
- </el-collapse-item>
- </el-collapse>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+ <div style="display:flex; justify-content:flex-end; margin-top:8px;">
+ <el-pagination
+ @current-change="handlePageChange"
+ @size-change="handleSizeChange"
+ :current-page="currentPage"
+ :page-size="pageSize"
+ :page-sizes="[10,20,50,100]"
+ layout="total, prev, pager, next"
+ :total="crnList.length">
+ </el-pagination>
+ </div>
</div>
`,
props: ["param"],
@@ -71,6 +84,8 @@
sourceLocNo: "",
targetLocNo: "",
},
+ pageSize: 25,
+ currentPage: 1,
};
},
created() {
@@ -78,11 +93,20 @@
this.getCrnStateInfo();
}, 1000);
},
+ computed: {
+ displayCrnList() {
+ const start = (this.currentPage - 1) * this.pageSize;
+ const end = start + this.pageSize;
+ return this.crnList.slice(start, end);
+ }
+ },
watch: {
param: {
handler(newVal, oldVal) {
if (newVal.crnNo != 0) {
this.activeNames = newVal.crnNo;
+ const idx = this.crnList.findIndex(i => i.crnNo == newVal.crnNo);
+ if (idx >= 0) { this.currentPage = Math.floor(idx / this.pageSize) + 1; }
}
},
deep: true, // 娣卞害鐩戝惉宓屽灞炴��
@@ -90,6 +114,13 @@
},
},
methods: {
+ handlePageChange(page) {
+ this.currentPage = page;
+ },
+ handleSizeChange(size) {
+ this.pageSize = size;
+ this.currentPage = 1;
+ },
getCrnStateInfo() {
let that = this;
$.ajax({
@@ -113,6 +144,7 @@
}
});
that.crnList = tmp;
+ that.currentPage = 1;
}
}
},
diff --git a/src/main/webapp/components/WatchRgvCard.js b/src/main/webapp/components/WatchRgvCard.js
index fed44ee..7adaf36 100644
--- a/src/main/webapp/components/WatchRgvCard.js
+++ b/src/main/webapp/components/WatchRgvCard.js
@@ -22,8 +22,9 @@
<div style="margin-bottom: 10px;"><el-button @click="controlCommandTaskComplete()" size="mini">浠诲姟瀹屾垚</el-button></div>
</div>
</div>
- <el-collapse v-model="activeNames">
- <el-collapse-item v-for="(item) in rgvList" :name="item.rgvNo">
+ <div style="max-height: 55vh; overflow:auto;">
+ <el-collapse v-model="activeNames" accordion>
+ <el-collapse-item v-for="(item) in displayRgvList" :name="item.rgvNo">
<template slot="title">
<div style="width: 100%;display: flex;">
<div style="width: 50%;">{{ item.rgvNo }}鍙稲GV</div>
@@ -45,8 +46,20 @@
<el-descriptions-item label="鏁呴殰浠ｇ爜">{{ item.warnCode }}</el-descriptions-item>
<el-descriptions-item label="鏁呴殰鎻忚堪">{{ item.alarm }}</el-descriptions-item>
</el-descriptions>
- </el-collapse-item>
- </el-collapse>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+ <div style="display:flex; justify-content:flex-end; margin-top:8px;">
+ <el-pagination
+ @current-change="handlePageChange"
+ @size-change="handleSizeChange"
+ :current-page="currentPage"
+ :page-size="pageSize"
+ :page-sizes="[10,20,50,100]"
+ layout="total, prev, pager, next"
+ :total="rgvList.length">
+ </el-pagination>
+ </div>
</div>
`,
props: ["param"],
@@ -60,7 +73,9 @@
rgvNo: "",
sourcePos: "",
targetPos: ""
- }
+ },
+ pageSize: 25,
+ currentPage: 1,
};
},
created() {
@@ -68,11 +83,20 @@
this.getRgvStateInfo();
}, 1000);
},
+ computed: {
+ displayRgvList() {
+ const start = (this.currentPage - 1) * this.pageSize;
+ const end = start + this.pageSize;
+ return this.rgvList.slice(start, end);
+ }
+ },
watch: {
param: {
handler(newVal) {
if (newVal && newVal.rgvNo != 0) {
this.activeNames = newVal.rgvNo;
+ const idx = this.rgvList.findIndex(i => i.rgvNo == newVal.rgvNo);
+ if (idx >= 0) { this.currentPage = Math.floor(idx / this.pageSize) + 1; }
}
},
deep: true,
@@ -80,6 +104,13 @@
},
},
methods: {
+ handlePageChange(page) {
+ this.currentPage = page;
+ },
+ handleSizeChange(size) {
+ this.pageSize = size;
+ this.currentPage = 1;
+ },
getRgvStateInfo() {
let that = this;
$.ajax({
@@ -101,6 +132,7 @@
}
});
that.rgvList = tmp;
+ that.currentPage = 1;
}
}
},
@@ -185,4 +217,4 @@
});
},
},
-});
\ No newline at end of file
+});
--
Gitblit v1.9.1