更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/DP/src/views/indexs/station-two.vue

@@ -8,8 +8,8 @@
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <tbody ref="tableBody">
        <tr v-for="(row, rowIndex) in visibleData" :key="rowIndex">
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">
              {{ cell }}
            </td>
@@ -28,33 +28,78 @@
    data() {
      return {
        headers: ['车型','轮型',  '数量'],
        tableData: [], // å­˜å‚¨API返回的数据
      tableData: [], // å­˜å‚¨API返回的所有数据
      visibleData: [], // å½“前显示的数据
        loading: false,
        error: null
      error: null,
      currentIndex: 0, // å½“前显示数据的起始索引
      visibleRows: 12, // æ¯æ¬¡æ˜¾ç¤ºçš„行数
      scrollInterval: null, // æ»šåŠ¨å®šæ—¶å™¨
      scrollSpeed:  5000 // æ»šåŠ¨é€Ÿåº¦(毫秒)
      }
    },
    created() {
      this.fetchData();
    },
  mounted() {
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
    methods: {
        fetchData() {
      axios.post("http://172.21.1.139:5000/api/Dt_WheelsStock/InventoryStatistics", null)
      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
            ]);
          });
          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];
      }
    }
    }
  }
@@ -66,6 +111,8 @@
    overflow-x: auto;
    position: relative;
    min-height: 200px;
  max-height: 700px; /* é™åˆ¶å®¹å™¨é«˜åº¦ */
  overflow-y: hidden; /* éšè—åž‚直滚动条 */
  }
  
  .data-table {
@@ -79,13 +126,18 @@
    font-weight: bold;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #c9aeae;
  border-bottom: 2px solid #c5c5c5;

  position: sticky;
  top: 0;
  }
  
  .data-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  height: 25px;
  border-bottom: 1px solid #696969;
  }

  
  .loading, .error {
    padding: 20px;
@@ -96,4 +148,9 @@
  .error {
    color: #f56c6c;
  }

/* æ·»åŠ å¹³æ»‘滚动效果 */
.data-table tbody {
  transition: transform 1s ease-in-out;
}
  </style>