{% extends "base.html" %} {% block title %}机器人详情 - Amrita Dashboard{%
endblock %} {% block extra_css %}
<style>
  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .info-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
  }

  .refresh-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
  }

  .refresh-btn:hover {
    background: var(--accent-color);
  }

  .refresh-btn i {
    margin-right: 5px;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .info-item:last-child {
    border-bottom: none;
  }

  .info-label {
    color: #777;
    font-weight: 500;
  }

  .info-value {
    font-weight: 600;
  }

  .status-online {
    color: #2ecc71;
  }

  .status-offline {
    color: #e74c3c;
  }

  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .chart-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
  }

  .chart-container {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gauge-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .gauge-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #777;
  }

  .gauge-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .info-grid,
    .charts-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
{% endblock %} {% block content %}
<div class="info-grid">
  <!-- 机器人静态信息卡片 -->
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">机器人信息</div>
      <button class="refresh-btn" onclick="refreshData()">
        <i class="fas fa-sync-alt"></i> 刷新
      </button>
    </div>
    <div class="info-item">
      <span class="info-label">ID:</span>
      <span class="info-value" id="bot-id">{{ bot_static_info.id }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">Bot昵称:</span>
      <span class="info-value" id="bot-nickname"
        >{{ bot_static_info.bot_name }}</span
      >
    </div>
  </div>

  <!-- 系统信息卡片 -->
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">系统信息</div>
    </div>
    <div class="info-item">
      <span class="info-label">Bot名称:</span>
      <span class="info-value" id="bot-name">{{ bot_static_info.name }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">操作系统:</span>
      <span class="info-value" id="system-os">{{ system_info.os }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">Python版本:</span>
      <span class="info-value" id="system-python"
        >{{ system_info.python_version }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">主机名:</span>
      <span class="info-value" id="system-hostname"
        >{{ system_info.hostname }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">Amrita版本:</span>
      <span class="info-value" id="bot-version"
        >{{ bot_static_info.version }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">运行协议:</span>
      <span class="info-value" id="bot-platform"
        >{{ bot_static_info.platform }}</span
      >
    </div>
  </div>
</div>

<div class="charts-grid">
  <!-- CPU使用率仪表盘 -->
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">CPU使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时CPU使用率</div>
        <canvas id="cpuGauge"></canvas>
        <div class="gauge-value" id="cpu-value">0%</div>
      </div>
    </div>
  </div>

  <!-- 内存使用率仪表盘 -->
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">内存使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时内存使用率</div>
        <canvas id="memoryGauge"></canvas>
        <div class="gauge-value" id="memory-value">0%</div>
      </div>
    </div>
  </div>

  <!-- 磁盘使用率仪表盘 -->
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">磁盘使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时磁盘使用率</div>
        <canvas id="diskGauge"></canvas>
        <div class="gauge-value" id="disk-value">0%</div>
      </div>
    </div>
  </div>

  <!-- 网络IO信息卡片 -->
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">网络流量</div>
    </div>
    <div class="info-item">
      <span class="info-label">发送:</span>
      <span class="info-value" id="network-sent">0 KB</span>
    </div>
    <div class="info-item">
      <span class="info-label">接收:</span>
      <span class="info-value" id="network-received">0 KB</span>
    </div>
    <div class="info-item">
      <span class="info-label">状态:</span>
      <span class="info-value status-online" id="bot-status">在线</span>
    </div>
  </div>
  {% endblock %} {% block scripts %}
  <script>
    // 全局变量
    let refreshInterval;
    const REFRESH_INTERVAL_MS = 3000; // 3秒刷新一次
    let cpuGauge, memoryGauge, diskGauge;

    // 页面加载完成后初始化
    document.addEventListener("DOMContentLoaded", function () {
      // 初始化仪表盘
      initGauges();

      // 开始定时刷新
      startAutoRefresh();

      // 绑定手动刷新按钮事件
      document
        .getElementById("manual-refresh")
        .addEventListener("click", refreshData);
    });

    // 初始化仪表盘
    function initGauges() {
      // CPU使用率仪表盘
      const cpuCtx = document.getElementById("cpuGauge").getContext("2d");
      cpuGauge = new Chart(cpuCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(138, 43, 226, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });

      // 内存使用率仪表盘
      const memoryCtx = document.getElementById("memoryGauge").getContext("2d");
      memoryGauge = new Chart(memoryCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(46, 204, 113, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });

      // 磁盘使用率仪表盘
      const diskCtx = document.getElementById("diskGauge").getContext("2d");
      diskGauge = new Chart(diskCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(243, 156, 18, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });
    }

    // 开始自动刷新
    function startAutoRefresh() {
      // 先立即获取一次数据
      refreshData();

      // 然后设置定时器
      refreshInterval = setInterval(refreshData, REFRESH_INTERVAL_MS);
    }

    // 停止自动刷新
    function stopAutoRefresh() {
      if (refreshInterval) {
        clearInterval(refreshInterval);
      }
    }

    // 刷新数据函数
    async function refreshData() {
      try {
        // 显示加载状态
        document.querySelectorAll(".refresh-btn i").forEach((icon) => {
          icon.classList.add("fa-spin");
        });

        // 从API获取实时数据
        const response = await fetch("/api/bot/status");
        const data = await response.json();

        // 更新仪表盘数据
        updateGauge(cpuGauge, data.cpu_usage);
        updateGauge(memoryGauge, data.memory_usage);
        updateGauge(diskGauge, data.disk_usage);
        // 更新数值显示
        document.getElementById("cpu-value").textContent = `${data.cpu_usage}%`;
        document.getElementById(
          "memory-value"
        ).textContent = `${data.memory_usage}%`;
        document.getElementById(
          "disk-value"
        ).textContent = `${data.disk_usage}%`;

        // 更新网络IO
        document.getElementById("network-sent").textContent = formatBytes(
          data.network_io.sent
        );
        document.getElementById("network-received").textContent = formatBytes(
          data.network_io.received
        );

        // 更新状态
        const statusElement = document.getElementById("bot-status");
        statusElement.textContent = data.status === "online" ? "在线" : "离线";
        statusElement.className = `info-value status-${data.status}`;
      } catch (error) {
        console.error("获取数据失败:", error);
        Swal.fire({
          title: "获取数据失败",
          text: "无法从服务器获取实时数据，请检查网络连接",
          icon: "error",
          timer: 2000,
        });
      } finally {
        // 移除加载状态
        document.querySelectorAll(".refresh-btn i").forEach((icon) => {
          icon.classList.remove("fa-spin");
        });
      }
    }

    // 更新仪表盘数据
    function updateGauge(gauge, value) {
      gauge.data.datasets[0].data = [value, 100 - value];
      gauge.update();
    }

    // 格式化字节大小为易读格式
    function formatBytes(bytes, decimals = 2) {
      if (bytes === 0) return "0 Bytes";

      const k = 1024;
      const dm = decimals < 0 ? 0 : decimals;
      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];

      const i = Math.floor(Math.log(bytes) / Math.log(k));

      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
    }

    // 页面卸载时停止定时器
    window.addEventListener("beforeunload", function () {
      stopAutoRefresh();
    });
  </script>
  {% endblock %}
</div>