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-three.vue | 294 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 151 insertions(+), 143 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-three.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-three.vue"
index bacda7b..d53aa87 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-three.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/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>
\ 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