更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

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

@@ -1,148 +1,156 @@
<template>
    <ul class="user_Overview flex">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
            </div>
            <br>
            <p>{{stationstate[0].station_state}}</p>
            <p v-if="stationstate[0].station_state == '检修中'">{{stationstate[0].station_checkName}}</p>
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <br>
            <p>{{stationstate[1].station_state}}</p>
            <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p>
        </li>
        <!-- <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>7号检修台</p>
            <br>
            <p>{{stationstate[2].station_state}}</p>
            <p v-if="stationstate[2].station_state == '检修中'">{{stationstate[2].station_checkName}}</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>8号检修台</p>
            <br>
            <p>{{stationstate[3].station_state}}</p>
            <p v-if="stationstate[3].station_state == '检修中'">{{stationstate[3].station_checkName}}</p>
        </li> -->
    </ul>
  </template>
  
  <script>
  let style = {
    fontSize: 24
  }
  export default {
    data() {
        return {
            stationstate: [
                { station_state: '入库量', station_checkName: '' },
                { station_state: '出库量', station_checkName: '' },
                { station_state: '待机中', station_checkName: '' },
                { station_state: '故障中', station_checkName: '' }
            ],
            config: {
                number: [7],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#00fdfa",
                },
            },
            onlineconfig: {
                number: [1],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#07f7a8",
                },
            },
            offlineconfig: {
                number: [4],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#e3b337",
                },
            },
        };
  <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;
        });
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    startAutoScroll() {
      this.stopAutoScroll(); // å…ˆåœæ­¢å·²æœ‰çš„定时器
      this.scrollInterval = setInterval(() => {
        if (this.tableData.length > this.visibleRows) {
          this.currentIndex = (this.currentIndex + 1) % this.tableData.length;
          this.updateVisibleData();
        }
      }, this.scrollSpeed);
    },
  };
  </script>
  
  <style lang='scss' scoped>
  .user_Overview {
    li {
        flex: 1;
  
        p {
            text-align: center;
            height: 16px;
            font-size: 16px;
        }
  
        .user_Overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 50px auto 30px;
            background-size: cover;
            background-position: center center;
            position: relative;
  
            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
  
            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }
  
        .allnum {
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");
            }
        }
  
        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
            }
        }
  
        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");
            }
        }
  
        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");
            }
        }
    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];
      }
    }
  }
  </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>