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-four.vue | 355 ++++++++++++++++++++++------------------------------------
1 files changed, 137 insertions(+), 218 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-four.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-four.vue"
index 768bd05..9b3167a 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-four.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/station-four.vue"
@@ -1,237 +1,156 @@
-<!--
- * @Author: daidai
- * @Date: 2022-02-28 16:16:42
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-07-20 17:57:11
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
--->
<template>
- <ul class="user_Overview flex" v-if="pageflag">
- <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>
- <p>10鍙锋淇彴</p>
- <br>
- <p>{{stationstate[9].station_state}}</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>
- <p>11鍙锋淇彴</p>
- <br>
- <p>{{stationstate[10].station_state}}</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>12鍙锋淇彴</p>
- <br>
- <p>{{stationstate[11].station_state}}</p>
- </li>
- </ul>
- <Reacquire v-else @onclick="getData" line-height="200px">
- 閲嶆柊鑾峰彇
- </Reacquire>
+ <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 { currentGET } from 'api/modules'
-import {Floorfault} from "@/api/http.js"
-let style = {
- fontSize: 24
-}
+import axios from 'axios';
+
export default {
data() {
- return {
- options: {},
- stationstate:[],
- userOverview: {
- alarmNum: 2,
- offlineNum: 3,
- onlineNum: 5,
- totalNum: 10,
- },
- pageflag: true,
- timer: null,
- config: {
- number: [100],
- content: '{nt}',
- style: {
- ...style,
- // stroke: "#00fdfa",
- fill: "#00fdfa",
- },
- },
- onlineconfig: {
- number: [0],
- content: '{nt}',
- style: {
- ...style,
- // stroke: "#07f7a8",
- fill: "#07f7a8",
- },
- },
- offlineconfig: {
- number: [0],
- content: '{nt}',
- style: {
- ...style,
- // stroke: "#e3b337",
- fill: "#e3b337",
- },
- },
- };
- },
- filters: {
- numsFilter(msg) {
- return msg || 0;
- },
+ return {
+ headers: ['杞﹀瀷', '杞瀷', '鏁伴噺'],
+ tableData: [], // 瀛樺偍API杩斿洖鐨勬墍鏈夋暟鎹�
+ visibleData: [], // 褰撳墠鏄剧ず鐨勬暟鎹�
+ loading: false,
+ error: null,
+ currentIndex: 0, // 褰撳墠鏄剧ず鏁版嵁鐨勮捣濮嬬储寮�
+ visibleRows: 12, // 姣忔鏄剧ず鐨勮鏁�
+ scrollInterval: null, // 婊氬姩瀹氭椂鍣�
+ scrollSpeed: 5000 // 婊氬姩閫熷害(姣)
+ }
},
created() {
- this.getData()
+ this.fetchData();
},
mounted() {
+ this.startAutoScroll();
},
beforeDestroy() {
- this.clearData()
-
+ this.stopAutoScroll();
},
methods: {
- clearData() {
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- },
- async getData() {
- this.pageflag = true;
- // currentGET("big2").then((res) => {
- // if (!this.timer) {
- // console.log("璁惧鎬昏2", res);
- // }
- // if (res.success) {
- // this.userOverview = res.data;
- // this.onlineconfig = {
- // ...this.onlineconfig,
- // number: [1]
- // }
- // this.config = {
- // ...this.config,
- // number: [7]
- // }
- // this.offlineconfig = {
- // ...this.offlineconfig,
- // number: [4]
- // }
- // this.laramnumconfig = {
- // ...this.laramnumconfig,
- // number: [10]
- // }
- // this.switper();
- // } else {
- // this.pageflag = false;
- // this.$Message.warning(res.msg);
- // }
- // });
- let rep = await Floorfault((a)=>{
- });
- this.stationstate=rep;
- this.onlineconfig = {
- ...this.onlineconfig,
- number: [rep[9].station_qty]
- }
- this.config = {
- ...this.config,
- number: [rep[10].station_qty]
- }
- this.offlineconfig = {
- ...this.offlineconfig,
- number: [rep[11].station_qty]
- }
- this.switper();
- },
- //杞
- switper() {
- if (this.timer) {
- return
- }
- let looper = (a) => {
- this.getData()
- };
- this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
- },
- },
-};
-</script>
-<style lang='scss' scoped>
-.user_Overview {
- li {
- flex: 1;
-
- p {
- text-align: center;
- height: 16px;
- font-size: 16px;
+ 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(25, 36).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;
}
-
- .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;
- }
+ },
+ 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];
}
-
- .allnum {
-
- // background-image: url("../../assets/img/left_top_lan.png");
- &::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");
-
- }
- }
+ }
}
}
+</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