更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/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 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>
          <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>
</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;
      },
      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)=>{
    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.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(); 
          this.updateVisibleData();
          this.loading = false;
        })
        .catch((error) => {
          console.error("请求失败:", error);
          this.tableData = [
            ['暂无数据', '暂无数据', '暂无数据'],
          ];
          this.error = "数据加载失败";
          this.loading = false;
        });
      },
      //轮询
      switper() {
          if (this.timer) {
              return
    startAutoScroll() {
      this.stopAutoScroll(); // å…ˆåœæ­¢å·²æœ‰çš„定时器
      this.scrollInterval = setInterval(() => {
        if (this.tableData.length > this.visibleRows) {
          this.currentIndex = (this.currentIndex + 1) % this.tableData.length;
          this.updateVisibleData();
          }
          let looper = (a) => {
              this.getData()
          };
          this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      }, 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 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;
<style scoped>
.table-container {
              width: 100%;
              height: 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;
              left: 0;
          }

          &.bgdonghua::before {
              animation: rotating 14s linear infinite;
          }
.data-table td {
  padding: 10px 15px;
  height: 25px;
  border-bottom: 1px solid #696969;
      }

      .allnum {

          // background-image: url("../../assets/img/left_top_lan.png");
          &::before {
              background-image: url("../../assets/img/left_top_lan.png");

          }
.loading, .error {
  padding: 20px;
  text-align: center;
  color: #666;
      }

      .online {
          &::before {
              background-image: url("../../assets/img/left_top_lv.png");

          }
.error {
  color: #f56c6c;
      }

      .offline {
          &::before {
              background-image: url("../../assets/img/left_top_huang.png");

          }
      }

      .laramnum {
          &::before {
              background-image: url("../../assets/img/left_top_hong.png");

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