<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 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.data.data.slice(13, 24).forEach(item => {
|
this.tableData.push([
|
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;
|
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>
|
