From 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae Mon Sep 17 00:00:00 2001
From: huanghongfeng <huanghongfeng@hnkhzn.com>
Date: 星期二, 19 八月 2025 16:37:24 +0800
Subject: [PATCH] 更新
---
项目代码/DP/src/views/indexs/station-two.vue | 223 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 140 insertions(+), 83 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-two.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-two.vue"
index 1f5a1f1..fd68a14 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-two.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-two.vue"
@@ -1,99 +1,156 @@
<template>
- <div class="table-container">
- <table class="data-table">
- <thead>
- <tr>
- <th v-for="(header, index) in headers" :key="index">
- {{ header }}
- </th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
- <td v-for="(cell, cellIndex) in row" :key="cellIndex">
- {{ cell }}
- </td>
- </tr>
- </tbody>
- </table>
- <div v-if="loading" class="loading">鍔犺浇涓�...</div>
- <div v-if="error" class="error">{{ error }}</div>
- </div>
- </template>
-
- <script>
- import axios from 'axios';
-
- export default {
- data() {
- return {
- headers: ['杞﹀瀷','杞瀷', '鏁伴噺'],
- tableData: [], // 瀛樺偍API杩斿洖鐨勬暟鎹�
- loading: false,
- error: null
- }
- },
- created() {
- this.fetchData();
- },
- methods: {
- fetchData() {
+ <div class="table-container">
+ <table class="data-table">
+ <thead>
+ <tr>
+ <th v-for="(header, index) in headers" :key="index">
+ {{ header }}
+ </th>
+ </tr>
+ </thead>
+ <tbody ref="tableBody">
+ <tr v-for="(row, rowIndex) in visibleData" :key="rowIndex">
+ <td v-for="(cell, cellIndex) in row" :key="cellIndex">
+ {{ cell }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div v-if="loading" class="loading">鍔犺浇涓�...</div>
+ <div v-if="error" class="error">{{ error }}</div>
+ </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+ data() {
+ return {
+ headers: ['杞﹀瀷', '杞瀷', '鏁伴噺'],
+ tableData: [], // 瀛樺偍API杩斿洖鐨勬墍鏈夋暟鎹�
+ visibleData: [], // 褰撳墠鏄剧ず鐨勬暟鎹�
+ loading: false,
+ error: null,
+ currentIndex: 0, // 褰撳墠鏄剧ず鏁版嵁鐨勮捣濮嬬储寮�
+ visibleRows: 12, // 姣忔鏄剧ず鐨勮鏁�
+ scrollInterval: null, // 婊氬姩瀹氭椂鍣�
+ scrollSpeed: 5000 // 婊氬姩閫熷害(姣)
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ mounted() {
+ this.startAutoScroll();
+ },
+ beforeDestroy() {
+ this.stopAutoScroll();
+ },
+ methods: {
+ fetchData() {
+ this.loading = true;
axios.post("http://127.0.0.1:5000/api/Dt_WheelsStock/InventoryStatistics", null)
.then((response) => {
this.tableData = [];
- response.forEach(item => {
+ response.data.data.slice(0, 12).forEach(item => {
this.tableData.push([
- item.wheels_CarType,
- item.wheels_ldxh,
- item.count
+ item.wheels_CarType,
+ item.wheels_ldxh,
+ item.count
]);
});
+ this.updateVisibleData();
+ this.loading = false;
})
.catch((error) => {
console.error("璇锋眰澶辫触:", error);
this.tableData = [
['鏆傛棤鏁版嵁', '鏆傛棤鏁版嵁', '鏆傛棤鏁版嵁'],
];
+ this.error = "鏁版嵁鍔犺浇澶辫触";
+ this.loading = false;
});
- }
+ },
+ startAutoScroll() {
+ this.stopAutoScroll(); // 鍏堝仠姝㈠凡鏈夌殑瀹氭椂鍣�
+ this.scrollInterval = setInterval(() => {
+ if (this.tableData.length > this.visibleRows) {
+ this.currentIndex = (this.currentIndex + 1) % this.tableData.length;
+ this.updateVisibleData();
+ }
+ }, this.scrollSpeed);
+ },
+ stopAutoScroll() {
+ if (this.scrollInterval) {
+ clearInterval(this.scrollInterval);
+ this.scrollInterval = null;
+ }
+ },
+ updateVisibleData() {
+ if (this.tableData.length === 0) return;
+
+ // 鑾峰彇褰撳墠鍙鐨勬暟鎹�
+ const endIndex = this.currentIndex + this.visibleRows;
+ if (endIndex <= this.tableData.length) {
+ this.visibleData = this.tableData.slice(this.currentIndex, endIndex);
+ } else {
+ // 澶勭悊寰幆婊氬姩
+ const firstPart = this.tableData.slice(this.currentIndex);
+ const secondPart = this.tableData.slice(0, endIndex - this.tableData.length);
+ this.visibleData = [...firstPart, ...secondPart];
+ }
}
}
- </script>
-
- <style scoped>
- .table-container {
- width: 100%;
- overflow-x: auto;
- position: relative;
- min-height: 200px;
- }
-
- .data-table {
- width: 100%;
- border-collapse: collapse;
- margin: 20px 0;
- font-family: Arial, sans-serif;
- }
-
- .data-table th {
- font-weight: bold;
- padding: 12px 15px;
- text-align: left;
- border-bottom: 2px solid #c9aeae;
- }
-
- .data-table td {
- padding: 10px 15px;
- border-bottom: 1px solid #ddd;
- }
-
- .loading, .error {
- padding: 20px;
- text-align: center;
- color: #666;
- }
-
- .error {
- color: #f56c6c;
- }
- </style>
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.table-container {
+ width: 100%;
+ overflow-x: auto;
+ position: relative;
+ min-height: 200px;
+ max-height: 700px; /* 闄愬埗瀹瑰櫒楂樺害 */
+ overflow-y: hidden; /* 闅愯棌鍨傜洿婊氬姩鏉� */
+}
+
+.data-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 20px 0;
+ font-family: Arial, sans-serif;
+}
+
+.data-table th {
+ font-weight: bold;
+ padding: 12px 15px;
+ text-align: left;
+ border-bottom: 2px solid #c5c5c5;
+
+ position: sticky;
+ top: 0;
+}
+
+.data-table td {
+ padding: 10px 15px;
+ height: 25px;
+ border-bottom: 1px solid #696969;
+}
+
+
+.loading, .error {
+ padding: 20px;
+ text-align: center;
+ color: #666;
+}
+
+.error {
+ color: #f56c6c;
+}
+
+/* 娣诲姞骞虫粦婊氬姩鏁堟灉 */
+.data-table tbody {
+ transition: transform 1s ease-in-out;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3