KafkaZz55555

可以为你生成一个Vue组件，来渲染从后端请求获得的设备信息。你可以根据请求的数据动态展示设备列表。以下是基于你提供的截图的Vue组件代码：

<template>
  <div>
    <!-- 顶部的设备类型筛选 -->
    <div class="device-filter">
      <input
        v-model="searchQuery"
        type="text"
        placeholder="Search Name, SN, Mac, Model"
      />
      <select v-model="deviceType">
        <option value="all">All</option>
        <option value="gateway">Gateways/Switches</option>
        <option value="olt">OLTs</option>
        <option value="ap">APs</option>
      </select>
    </div>

    <!-- 设备列表 -->
    <table>
      <thead>
        <tr>
          <th>Device Name</th>
          <th>Site</th>
          <th>IP Address</th>
          <th>Status</th>
          <th>Model</th>
          <th>Version</th>
          <th>Uptime</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(device, index) in filteredDevices" :key="index">
          <td>{{ device.name }}</td>
          <td>{{ device.site }}</td>
          <td>{{ device.ip }}</td>
          <td>
            <span :class="getStatusClass(device.status)">
              {{ device.status }}
            </span>
          </td>
          <td>{{ device.model }}</td>
          <td>{{ device.version }}</td>
          <td>{{ device.uptime }}</td>
          <td>
            <button @click="adoptDevice(device)">
              Adopt
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
      <span>Showing {{ pagination.start }}-{{ pagination.end }} of {{ totalDevices }} records</span>
      <button @click="previousPage" :disabled="pagination.page === 1">Previous</button>
      <span>{{ pagination.page }}</span>
      <button @click="nextPage" :disabled="pagination.end >= totalDevices">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      devices: [],
      searchQuery: "",
      deviceType: "all",
      pagination: {
        page: 1,
        perPage: 10,
        start: 1,
        end: 10,
      },
    };
  },
  computed: {
    filteredDevices() {
      let filtered = this.devices.filter((device) => {
        return (
          device.name.includes(this.searchQuery) ||
          device.sn.includes(this.searchQuery) ||
          device.mac.includes(this.searchQuery) ||
          device.model.includes(this.searchQuery)
        );
      });

      if (this.deviceType !== "all") {
        filtered = filtered.filter((device) => device.type === this.deviceType);
      }

      const start = (this.pagination.page - 1) * this.pagination.perPage;
      const end = this.pagination.page * this.pagination.perPage;

      this.pagination.start = start + 1;
      this.pagination.end = Math.min(end, filtered.length);

      return filtered.slice(start, end);
    },
    totalDevices() {
      return this.devices.length;
    },
  },
  methods: {
    getStatusClass(status) {
      if (status === "MANAGED BY OTHERS") {
        return "status-managed";
      } else if (status === "PENDING") {
        return "status-pending";
      }
      return "";
    },
    adoptDevice(device) {
      // 处理设备采用的逻辑，例如发出请求
      console.log("Adopting device:", device);
    },
    previousPage() {
      if (this.pagination.page > 1) {
        this.pagination.page--;
      }
    },
    nextPage() {
      if (this.pagination.end < this.totalDevices) {
        this.pagination.page++;
      }
    },
    fetchDevices() {
      // 假设从后端获取设备信息的API
      fetch("/api/devices")
        .then((response) => response.json())
        .then((data) => {
          this.devices = data;
        });
    },
  },
  mounted() {
    this.fetchDevices();
  },
};
</script>

<style scoped>
.device-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.status-managed {
  color: #ff9800;
}

.status-pending {
  color: #2196f3;
}

.pagination {
  margin-top: 10px;
}

button {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
}
</style>

说明：

1. 设备数据：通过 fetchDevices 方法从后端请求设备数据，假设请求路径为 /api/devices，你可以根据后端实际情况修改。
2. 搜索和过滤：提供了根据设备名、SN、MAC、型号搜索的功能，并能根据设备类型（All、Gateways/Switches、OLTs、APs）进行筛选。
3. 状态样式：根据设备状态显示不同颜色的样式（MANAGED BY OTHERS 为橙色，PENDING 为蓝色）。
4. 分页：实现了简单的分页功能，每页显示10条数据，你可以调整 pagination.perPage 来改变每页显示的数量。
5. Adopt 按钮：点击 Adopt 按钮时会执行 adoptDevice 方法，你可以在这里实现设备采用的逻辑。