更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

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

@@ -3,15 +3,17 @@
      <table class="data-table">
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="index">
              {{ header }}
          <th>货位信息</th>
          <th v-for="(status, index) in statusTypes" :key="index">
            {{ status }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">
              {{ cell }}
        <tr>
          <td>数量</td>
          <td v-for="(count, index) in statusCounts" :key="index">
            {{ count }}
            </td>
          </tr>
        </tbody>
@@ -25,8 +27,8 @@
export default {
  data() {
    return {
      headers: ['货位信息', '数量'],
      tableData: []
      statusTypes: ['有货', '空货位', '有货禁用', '锁定'], // è¡¨å¤´çŠ¶æ€ç±»åž‹
      statusCounts: [0, 0, 0,0] // å¯¹åº”状态的数量
    };
  },
  created() {
@@ -34,23 +36,22 @@
  },
  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];
        });
    }
  }
@@ -73,12 +74,19 @@
  .data-table th {
    font-weight: bold;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #c9aeae;
  text-align: center;
  border-bottom: 2px solid #c5c5c5;
  }
  
  .data-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  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>