{% extends "base.html" %} {% block title %} 机器人详情 - Amrita Dashboard{%
endblock %} {% block extra_head %}
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
{% endblock %} {% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
  <div class="glass-card p-5">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold dark:text-gray-100">机器人信息</h3>
      <button
        onclick="refreshData()"
        class="px-3 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
      >
        <i class="fas fa-sync-alt"></i> 刷新
      </button>
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">ID:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="bot-id"
        >{{ bot_static_info.id }}</span
      >
    </div>
  </div>
  <div class="glass-card p-5">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold dark:text-gray-100">系统信息</h3>
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">Bot名称:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="bot-name"
        >{{ bot_static_info.name }}</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">操作系统:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="system-os"
        >{{ system_info.os }}</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">Python版本:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="system-python"
        >{{ system_info.python_version }}</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">主机名:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="system-hostname"
        >{{ system_info.hostname }}</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">Amrita版本:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="bot-version"
        >{{ bot_static_info.version }}</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">运行协议:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="bot-platform"
        >{{ bot_static_info.platform }}</span
      >
    </div>
  </div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-5">
  <div class="glass-card p-5">
    <h3 class="text-lg font-semibold mb-4 dark:text-gray-100">CPU使用率</h3>
    <div class="flex flex-col items-center justify-center">
      <div class="relative w-full max-w-[200px] mx-auto">
        <canvas id="cpuGauge" class="w-full h-auto max-h-[150px]"></canvas>
        <div
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-full font-bold text-xl dark:text-gray-200"
          id="cpu-value"
        >
          0%
        </div>
      </div>
    </div>
  </div>
  <div class="glass-card p-5">
    <h3 class="text-lg font-semibold mb-4 dark:text-gray-100">内存使用率</h3>
    <div class="flex flex-col items-center justify-center">
      <div class="relative w-full max-w-[200px] mx-auto">
        <canvas id="memoryGauge" class="w-full h-auto max-h-[150px]"></canvas>
        <div
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-full font-bold text-xl dark:text-gray-200"
          id="memory-value"
        >
          0%
        </div>
      </div>
    </div>
  </div>
  <div class="glass-card p-5">
    <h3 class="text-lg font-semibold mb-4 dark:text-gray-100">磁盘使用率</h3>
    <div class="flex flex-col items-center justify-center">
      <div class="relative w-full max-w-[200px] mx-auto">
        <canvas id="diskGauge" class="w-full h-auto max-h-[150px]"></canvas>
        <div
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-full font-bold text-xl dark:text-gray-200"
          id="disk-value"
        >
          0%
        </div>
      </div>
    </div>
  </div>
  <div class="glass-card p-5">
    <h3 class="text-lg font-semibold mb-4 dark:text-gray-100">网络流量</h3>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">发送:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="network-sent"
        >0 KB</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">接收:</span>
      <span class="text-sm font-medium dark:text-gray-200" id="network-received"
        >0 KB</span
      >
    </div>
    <div class="info-item">
      <span class="text-sm text-gray-500 dark:text-gray-400">Bot状态:</span>
      <span
        class="text-sm font-medium dark:text-gray-200 text-green-600 dark:text-green-400"
        id="bot-status"
        >在线</span
      >
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  let refreshInterval;
  const REFRESH_INTERVAL_MS = 3000;
  let cpuGauge, memoryGauge, diskGauge;

  document.addEventListener("DOMContentLoaded", function () {
    initGauges();

    startAutoRefresh();
  });

  function initGauges() {
    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: false,
        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: false,
        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: false,
        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");
      });

      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}%`;

      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 %}