更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

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

@@ -1,84 +1,92 @@
<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>
  </template>
  
  <script>
  <div class="table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th>货位信息</th>
          <th v-for="(status, index) in statusTypes" :key="index">
            {{ status }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数量</td>
          <td v-for="(count, index) in statusCounts" :key="index">
            {{ count }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      headers: ['货位信息', '数量'],
      tableData: []
      statusTypes: ['有货', '空货位', '有货禁用', '锁定'], // è¡¨å¤´çŠ¶æ€ç±»åž‹
      statusCounts: [0, 0, 0,0] // å¯¹åº”状态的数量
    };
  },
  created() {
    this.fetchData();
     this.fetchData();
  },
  methods: {
    fetchData() {
      axios.post("http://172.21.1.139:5000/api/LocationInfo/LocationStatus", null)
      axios.post("http://127.0.0.1:5000/api/LocationInfo/LocationStatus", null)
        .then((response) => {
          this.tableData = [];
          response.forEach(item => {
            this.tableData.push([
              item.status,
              item.count
            ]);
          });
          // å‡è®¾API返回的数据格式为：[{status: '有货', count: 9}, {status: '空货位', count: 2}, ...]
          const newCounts = [0, 0, 0,0];
          console.log(response.data)
          newCounts[0] = response.data.data[0].count;
          newCounts[1] = response.data.data[1].count;
          newCounts[2] = response.data.data[2].count;
          newCounts[3] = response.data.data[3].count;

          this.statusCounts = newCounts;
        })
        .catch((error) => {
          console.error("请求失败:", error);
          this.tableData = [
            ['空货位', 0],
            ['有货', 0],
            ['占用', 0]
          ];
          // ä½¿ç”¨é»˜è®¤æ•°æ®
          this.statusCounts = [0, 0, 0,0];
        });
    }
  }
};
</script>
  
  <style scoped>
  .table-container {
    width: 100%;
    overflow-x: auto;
  }
  
  .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;
  }
  </style>

<style scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
}

.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: center;
  border-bottom: 2px solid #c5c5c5;
}

.data-table td {
  padding: 10px 15px;
  border-bottom: 1px solid #696969;
  text-align: center;
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
  font-weight: bold;
}
</style>