更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/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() {
      axios.post("http://172.21.1.139:5000/api/Dt_WheelsStock/InventoryStatistics", null)
  <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>
}
</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>