更新 simpleadmin/www/index.html

add system status card.

simpleadmin/www/index.html

@@ -278,6 +278,76 @@
           </div>
 
           <div class="col">
+            <div class="card mb-3">
+              <div class="card-header">系统状态</div>
+              <div class="card-body">
+                <div class="card-text table-responsive-sm">
+                  <table class="table">
+                    <tbody>
+                      <tr>
+                        <th scope="row">CPU使用率</th>
+                        <td class="gap-4 align-items-center"
+                          x-data="{ getProgressBarClass: function() {
+                            var percentage = parseInt(this.cpuUsage);
+                            if (percentage >= 80) {
+                                return 'progress-bar bg-danger is-medium';
+                            } else if (percentage >= 60) {
+                                return 'progress-bar bg-warning is-warning is-medium';
+                            } else {
+                                return 'progress-bar bg-success is-medium';
+                            }
+                          }}"
+                        >
+                          <div class="progress w-100" role="progressbar"
+                            aria-label="CPU Usage"
+                            :aria-valuenow="cpuUsage"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                            style="height: 18px"
+                          >
+                            <div :class="getProgressBarClass()"
+                              :style="'width: ' + cpuUsage + '%'"
+                            >
+                              <span x-text="cpuUsage + '%'"></span>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th scope="row">内存使用率</th>
+                        <td class="gap-4 align-items-center"
+                          x-data="{ getProgressBarClass: function() {
+                            var percentage = parseInt(this.memoryUsage);
+                            if (percentage >= 80) {
+                                return 'progress-bar bg-danger is-medium';
+                            } else if (percentage >= 60) {
+                                return 'progress-bar bg-warning is-warning is-medium';
+                            } else {
+                                return 'progress-bar bg-success is-medium';
+                            }
+                          }}"
+                        >
+                          <div class="progress w-100" role="progressbar"
+                            aria-label="Memory Usage"
+                            :aria-valuenow="memoryUsage"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                            style="height: 18px"
+                          >
+                            <div :class="getProgressBarClass()"
+                              :style="'width: ' + memoryUsage + '%'"
+                            >
+                              <span x-text="memoryUsage + '% (' + formatBytes(memoryUsed) + ' / ' + formatBytes(memoryTotal) + ')'"></span>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
             <div class="card">
               <div class="card-header">信号</div>
               <div class="card-body">
@@ -649,6 +719,12 @@
           nonNrUpload: "0",
           downloadStat: "0",
           uploadStat: "0",
+          cpuUsage: "0",
+          memoryUsage: "0",
+          cacheUsage: "0",
+          memoryTotal: "0",
+          memoryUsed: "0", 
+          cacheUsed: "0",
 
           fetchAllInfo() {
             this.atcmd =
@@ -1952,6 +2028,29 @@
               console.log("Refreshed");
             }, this.refreshRate * 1000);
           },
+
+          fetchSystemStats() {
+            fetch("/cgi-bin/get_system_stats")
+              .then(response => response.text())
+              .then(data => {
+                const lines = data.split("\n");
+                // 跳过空行和Content-Type行
+                const validLines = lines.filter(line => line.trim() !== '' && line.includes(": ")).map(line => line.trim());
+                
+                this.cpuUsage = parseFloat(validLines[0].split(": ")[1]).toFixed(1);
+                this.memoryUsage = parseFloat(validLines[1].split(": ")[1]).toFixed(1);
+                this.memoryTotal = parseInt(validLines[2].split(": ")[1]);
+                this.memoryUsed = parseInt(validLines[3].split(": ")[1]);
+              });
+          },
+
+          formatBytes(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+          },
         };
       }
     </script>