添加树莓派信息抓取

index.html

@@ -14,6 +14,11 @@
             flex-wrap: wrap;
         }
 
+        #rpi_status {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+
     </style>
 </head>
 
@@ -27,6 +32,41 @@
         <a class="button" href="/~yang/">海洋</a>
         <a class="button" href="http://nas:3000/">代码仓库</a>
     </nav>
+    <div id="rpi_status">
+        <div class='status_windows' id="zhao_status">
+            <p>主机：zhao</p>
+            <p>核心温度：<span id="zhao_temp"></span> ℃</p>
+            <p>CPU负载：<span id="zhao_cpu"></span> %</p>
+            <p>内存剩余：<span id="zhao_mem"></span> MB</p>
+        </div>
+        <div class='status_windows' id="pi_status">
+            <p>主机：pi</p>
+            <p>核心温度：<span id="pi_temp"></span> ℃</p>
+            <p>CPU负载：<span id="pi_cpu"></span> %</p>
+            <p>内存剩余：<span id="pi_mem"></span> MB</p>
+        </div>
+    </div>
+    <script>
+        function getinfo(url) {
+            fetch(new Request('http://zhao:4000'))
+                .then(res => res.json())
+                .then(data => {
+                    // console.table(data)
+                    zhao_temp.innerText = data.cpu.temperature
+                    zhao_cpu.innerText = data.cpu.load
+                    zhao_mem.innerText = data.memory.available
+                })
+            fetch(new Request('http://pi:4000'))
+                .then(res => res.json())
+                .then(data => {
+                    // console.table(data)
+                    pi_temp.innerText = data.cpu.temperature
+                    pi_cpu.innerText = data.cpu.load
+                    pi_mem.innerText = data.memory.available
+                })
+        }
+        setInterval(getinfo, 1000)
+    </script>
 </body>
 
 </html>