diff --git a/apps.py b/apps.py
index 9e0bd35..0bee2cd 100644
--- a/apps.py
+++ b/apps.py
@@ -1,8 +1,26 @@
-#展示Computer_status对象中的状态，以时间为轴，绘制折线图
-#
-# 可以选择实时展示，每隔1s发送请求，服务器调用Computer_status.get_data_json_30s，返回json
-#
-# 可以选择查看指定时间端的历史信息，发送请求,包含开始时间和结束时间，服务器调用Computer_status.get_data_json，返回json
+from flask import Flask, jsonify, request
+from datetime import datetime
+from your_database_module import ComputerStatus  # 请根据实际路径引入你的数据库模块
+
+app = Flask(__name__)
+
+
+@app.route('/get_data_json_30s', methods=['GET'])
+def get_data_json_30s():
+    # 获取最新30秒的数据
+    data = ComputerStatus.get_data_json_30s()
+    return jsonify(data)
+
+
+@app.route('/get_data_json', methods=['GET'])
+def get_data_json():
+    time_start = int(request.args.get('time_start'))
+    time_end = int(request.args.get('time_end'))
+
+    # 获取指定时间范围的数据
+    data = ComputerStatus.get_data_json(time_start, time_end)
+    return jsonify(data)
+
 
 if __name__ == '__main__':
-    pass
\ No newline at end of file
+    app.run(debug=True)
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..2eae346
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Server Monitoring Dashboard</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        h1 {
+            text-align: center;
+        }
+        .status {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+        }
+        .status div {
+            width: 30%;
+            padding: 10px;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            text-align: center;
+        }
+        .status div h3 {
+            margin-bottom: 10px;
+        }
+        .chart-container {
+            width: 80%;
+            margin: 30px auto;
+        }
+        #time-range {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+        #time-range input {
+            width: 48%;
+        }
+    </style>
+</head>
+<body>
+    <h1>Server Monitoring Dashboard</h1>
+
+    <!-- Display basic system status -->
+    <div class="status">
+        <div>
+            <h3>CPU Usage</h3>
+            <p id="cpuUsage">Loading...</p>
+        </div>
+        <div>
+            <h3>Memory Usage</h3>
+            <p id="memoryUsage">Loading...</p>
+        </div>
+        <div>
+            <h3>Disk Usage</h3>
+            <p id="diskUsage">Loading...</p>
+        </div>
+    </div>
+
+    <!-- GPU Information -->
+    <h2>GPU Information</h2>
+    <div id="gpuInfo">Loading...</div>
+
+    <!-- Time Range for Historical Data -->
+    <div id="time-range">
+        <input type="datetime-local" id="start-time">
+        <input type="datetime-local" id="end-time">
+        <button onclick="getHistoricalData()">Get Historical Data</button>
+    </div>
+
+    <!-- Real-time Monitoring Charts -->
+    <div class="chart-container">
+        <h3>Real-Time Data (Last 30s)</h3>
+        <canvas id="cpuChart"></canvas>
+        <canvas id="memoryChart"></canvas>
+        <canvas id="diskChart"></canvas>
+        <canvas id="gpuChart"></canvas>
+    </div>
+
+    <script>
+        // Fetch real-time data every second and update the UI
+        function fetchRealTimeData() {
+            fetch('/get_data_json_30s')
+                .then(response => response.json())
+                .then(data => {
+                    updateSystemStatus(data);
+                    updateCharts(data);
+                })
+                .catch(err => console.log(err));
+        }
+
+        // Update the system status on the page
+        function updateSystemStatus(data) {
+            document.getElementById('cpuUsage').innerText = data.cpu_usage + '%';
+            document.getElementById('memoryUsage').innerText = data.memory_usage + '%';
+            document.getElementById('diskUsage').innerText = data.disk_usage + '%';
+
+            let gpuInfoHtml = '';
+            data.gpu_info.forEach(gpu => {
+                gpuInfoHtml += `<h4>${gpu.name}</h4>
+                    <p>Memory Used: ${gpu.memory_used} MB</p>
+                    <p>Memory Total: ${gpu.memory_total} MB</p>
+                    <p>GPU Utilization: ${gpu.gpu_util}%</p>
+                    <p>GPU Fan Speed: ${gpu.gpu_fan}%</p>`;
+            });
+            document.getElementById('gpuInfo').innerHTML = gpuInfoHtml;
+        }
+
+        // Update charts with real-time data
+        let cpuChart, memoryChart, diskChart, gpuChart;
+
+        function initializeCharts() {
+            let ctxCpu = document.getElementById('cpuChart').getContext('2d');
+            let ctxMemory = document.getElementById('memoryChart').getContext('2d');
+            let ctxDisk = document.getElementById('diskChart').getContext('2d');
+            let ctxGpu = document.getElementById('gpuChart').getContext('2d');
+
+            cpuChart = new Chart(ctxCpu, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'CPU Usage (%)',
+                        data: [],
+                        borderColor: 'rgba(255, 99, 132, 1)',
+                        fill: false
+                    }]
+                }
+            });
+
+            memoryChart = new Chart(ctxMemory, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Memory Usage (%)',
+                        data: [],
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        fill: false
+                    }]
+                }
+            });
+
+            diskChart = new Chart(ctxDisk, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Disk Usage (%)',
+                        data: [],
+                        borderColor: 'rgba(255, 159, 64, 1)',
+                        fill: false
+                    }]
+                }
+            });
+
+            gpuChart = new Chart(ctxGpu, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'GPU Usage (%)',
+                        data: [],
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                        fill: false
+                    }]
+                }
+            });
+        }
+
+        // Update the charts with new data
+        function updateCharts(data) {
+            let timestamp = new Date(data.time * 1000);
+            let timeString = timestamp.toLocaleTimeString();
+
+            // Add new data points
+            cpuChart.data.labels.push(timeString);
+            cpuChart.data.datasets[0].data.push(data.cpu_usage);
+            if (cpuChart.data.labels.length > 30) {
+                cpuChart.data.labels.shift();
+                cpuChart.data.datasets[0].data.shift();
+            }
+
+            memoryChart.data.labels.push(timeString);
+            memoryChart.data.datasets[0].data.push(data.memory_usage);
+            if (memoryChart.data.labels.length > 30) {
+                memoryChart.data.labels.shift();
+                memoryChart.data.datasets[0].data.shift();
+            }
+
+            diskChart.data.labels.push(timeString);
+            diskChart.data.datasets[0].data.push(data.disk_usage);
+            if (diskChart.data.labels.length > 30) {
+                diskChart.data.labels.shift();
+                diskChart.data.datasets[0].data.shift();
+            }
+
+            gpuChart.data.labels.push(timeString);
+            gpuChart.data.datasets[0].data.push(data.gpu_usage);
+            if (gpuChart.data.labels.length > 30) {
+                gpuChart.data.labels.shift();
+                gpuChart.data.datasets[0].data.shift();
+            }
+
+            cpuChart.update();
+            memoryChart.update();
+            diskChart.update();
+            gpuChart.update();
+        }
+
+        // Fetch historical data based on the selected time range
+        function getHistoricalData() {
+            let startTime = new Date(document.getElementById('start-time').value).getTime() / 1000;
+            let endTime = new Date(document.getElementById('end-time').value).getTime() / 1000;
+
+            fetch(`/get_data_json?time_start=${startTime}&time_end=${endTime}`)
+                .then(response => response.json())
+                .then(data => {
+                    updateCharts(data);
+                })
+                .catch(err => console.log(err));
+        }
+
+        // Initialize the charts and start real-time data fetching
+        window.onload = function() {
+            initializeCharts();
+            setInterval(fetchRealTimeData, 1000); // Fetch data every second
+        };
+    </script>
+</body>
+</html>
