diff --git a/router/api.py b/router/api.py
index 8b849a3..5478412 100644
--- a/router/api.py
+++ b/router/api.py
@@ -54,8 +54,9 @@ def orders_count_by_name():
     finally:
         # 取消订阅并关闭消费者
         consumer.close()
-
+    print(messages)
     return jsonify(messages)
+   
 
 
 @api_bp.route('/stream/ordernamecount')
diff --git a/router/page.py b/router/page.py
index 91ea9b5..8b9a7a5 100644
--- a/router/page.py
+++ b/router/page.py
@@ -10,3 +10,19 @@ def index():
 @page_bp.route('/show')
 def test():
     return render_template('show.html')
+
+@page_bp.route('/ordercount')
+def ordercount():
+    return render_template('ordercount.html')
+
+@page_bp.route('/streamordersummary')
+def streamodersummary():
+    return render_template('streamordersummary.html')
+
+@page_bp.route('/streamordernamecount')
+def streamodernamecount():
+    return render_template('streamordernamecount.html')
+
+@page_bp.route('/streamsummary')
+def streamsummary():
+    return render_template('streamsummary.html')
diff --git a/templates/index.html b/templates/index.html
index 77ecd81..249b922 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,13 +3,81 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>哇哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</title>
+    <title>订单信息实时统计系统</title>
+    <!-- 引入Bootstrap的CSS文件 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* 为iframe添加适当的边距和样式 */
+        iframe {
+            border-radius: 8px; /* 圆角 */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
+            width: 100%; /* 自适应宽度 */
+            height: 400px; /* 固定高度 */
+        }
+
+        /* 给容器添加一些间距 */
+        .container-fluid {
+            margin-top: 30px; /* 顶部间距 */
+        }
+
+        /* 设置页面标题的样式 */
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        /* 设置Chart容器的样式 */
+        .chart-container {
+            margin-bottom: 30px; /* 每个图表容器之间的间距 */
+        }
+    </style>
 </head>
 <body>
-    <div class="container">
-        <div>
-            <iframe src="/show" frameborder="0" width="500" height="600"></iframe></iframe>
+    <!-- 页面容器 使用container-fluid -->
+    <div class="container-fluid mt-5">
+        
+
+        <!-- 第一个图表容器放在最上面 -->
+        <div class="row">
+            <div class="col-12 chart-container">
+                <iframe src="/show" frameborder="0"></iframe>
+            </div>
+        </div>
+
+        <!-- 其他四个图表容器，分成两列一行 -->
+        <div class="row">
+            <!-- 第二个图表容器 -->
+            <div class="col-lg-6 col-md-6 col-sm-12 chart-container">
+                <iframe src="/ordercount" frameborder="0"></iframe>
+            </div>
+            <!-- 第三个图表容器 -->
+            <div class="col-lg-6 col-md-6 col-sm-12 chart-container">
+                <iframe src="/streamordersummary" frameborder="0"></iframe>
+            </div>
+        </div>
+        <div class="row">
+            <!-- 第四个图表容器 -->
+            <div class="col-lg-6 col-md-6 col-sm-12 chart-container">
+                <iframe src="/streamordernamecount" frameborder="0"></iframe>
+            </div>
+            <!-- 第五个图表容器 -->
+            <div class="col-lg-6 col-md-6 col-sm-12 chart-container">
+                <iframe src="/streamsummary" frameborder="0"></iframe>
+            </div>
+        </div>
+        <div class="row">
+            <h2>制作人员名单</h2>
+        <p>郭子奇：架构设计，服务器部署和Python代码调试</p>
+        <p>许家禾：spark streaming&spark core/rdd</p>
+        <p>李尧宇：环境部署，在Kafka中创建主题order用Python代码实现producer，并每隔5秒推送数据给Kafka的order主题</p>
+        <p>李烁升：使用spark streaming每隔两秒实时统计所有订单类别的数量</p>
+        <p>郭志胜：数据生产及数据展示</p>
+        <p>陈楠：使用spark sql统计各个订单的有效数和无效数量</p>
         </div>
     </div>
+
+    <!-- 引入Bootstrap的JS文件 -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/ordercount.html b/templates/ordercount.html
new file mode 100644
index 0000000..4accd45
--- /dev/null
+++ b/templates/ordercount.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>动态订单柱状图</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        canvas {
+            width: 100% !important;
+            height: 400px !important;
+        }
+    </style>
+</head>
+<body>
+    <h2>订单数量柱状图</h2>
+    <canvas id="orderChart"></canvas>
+
+    <script>
+        // 初始化图表数据
+        const ctx = document.getElementById('orderChart').getContext('2d');
+        const chartData = {
+            labels: [],
+            datasets: [{
+                label: '订单数量',
+                data: [],
+                backgroundColor: 'rgba(75, 192, 192, 0.6)', // 柱状图的颜色
+                borderColor: 'rgb(75, 192, 192)',
+                borderWidth: 1
+            }]
+        };
+
+        const config = {
+            type: 'bar', // 设置为柱状图
+            data: chartData,
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        type: 'category',
+                        position: 'bottom',
+                    },
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                }
+            }
+        };
+
+        const orderChart = new Chart(ctx, config);
+
+        // 获取数据并更新图表
+        function fetchDataAndUpdateChart() {
+            fetch('/api/orders-count') 
+                .then(response => response.json())
+                .then(data => {
+                    // 按照 order_name 分类，汇总 order_count 的数量
+                    let orderNames = {};
+                    data.forEach(order => {
+                        const name = order.order_name;
+                        const count = parseInt(order.order_count);
+
+                        if (orderNames[name]) {
+                            orderNames[name] += count;
+                        } else {
+                            orderNames[name] = count;
+                        }
+                    });
+
+                    // 更新图表数据
+                    chartData.labels = Object.keys(orderNames); // 使用订单名称作为X轴标签
+                    chartData.datasets[0].data = Object.values(orderNames); // 使用订单数量作为Y轴数据
+
+                    orderChart.update();
+                })
+                .catch(error => console.error('获取数据失败:', error));
+        }
+
+        // 每5秒更新一次图表数据
+        setInterval(fetchDataAndUpdateChart, 5000);
+
+        // 初始数据加载
+        fetchDataAndUpdateChart();
+    </script>
+</body>
+</html>
diff --git a/templates/streamordernamecount.html b/templates/streamordernamecount.html
new file mode 100644
index 0000000..abfc0cf
--- /dev/null
+++ b/templates/streamordernamecount.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>动态订单数量图表</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        canvas {
+            width: 100% !important;
+            height: 400px !important;
+        }
+    </style>
+</head>
+<body>
+    <h2>订单名称数量动态图表</h2>
+    <canvas id="orderChart"></canvas>
+
+    <script>
+        // 初始化图表
+        const ctx = document.getElementById('orderChart').getContext('2d');
+        const chartData = {
+            labels: [], // X轴标签
+            datasets: [{
+                label: '订单数量',
+                data: [], // Y轴数据
+                borderColor: 'rgb(75, 192, 192)', // 线条颜色
+                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
+                borderWidth: 1
+            }]
+        };
+
+        const config = {
+            type: 'bar', // 使用条形图
+            data: chartData,
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        type: 'category', // X轴使用类别型
+                        position: 'bottom',
+                    },
+                    y: {
+                        beginAtZero: true, // Y轴从0开始
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                }
+            }
+        };
+
+        const orderChart = new Chart(ctx, config);
+
+        // 获取数据并更新图表
+        function fetchDataAndUpdateChart() {
+            fetch('/api/stream/ordernamecount') // 替换为你的实际API地址
+                .then(response => response.json())
+                .then(data => {
+                    // 统计每个订单名称的数量
+                    let orderNames = {};
+                    data.forEach(order => {
+                        const name = order.order_name; // 获取订单名称
+                        const count = order.order_name_count; // 获取订单数量
+
+                        // 累加相同订单名称的数量
+                        if (orderNames[name]) {
+                            orderNames[name] += count;
+                        } else {
+                            orderNames[name] = count;
+                        }
+                    });
+
+                    // 更新图表数据
+                    chartData.labels = Object.keys(orderNames); // X轴标签为订单名称
+                    chartData.datasets[0].data = Object.values(orderNames); // Y轴数据为订单数量
+
+                    // 更新图表
+                    orderChart.update();
+                })
+                .catch(error => console.error('获取数据失败:', error));
+        }
+
+        // 每5秒更新一次数据
+        setInterval(fetchDataAndUpdateChart, 5000);
+
+        // 初始数据加载
+        fetchDataAndUpdateChart();
+    </script>
+</body>
+</html>
diff --git a/templates/streamordersummary.html b/templates/streamordersummary.html
new file mode 100644
index 0000000..1f0dff0
--- /dev/null
+++ b/templates/streamordersummary.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>动态订单数量图表</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        canvas {
+            width: 100% !important;
+            height: 400px !important;
+        }
+    </style>
+</head>
+<body>
+    <h2>订单数量动态图表</h2>
+    <canvas id="orderChart"></canvas>
+
+    <script>
+        // 初始化图表
+        const ctx = document.getElementById('orderChart').getContext('2d');
+        const chartData = {
+            labels: [], // X轴标签
+            datasets: [{
+                label: '订单数量',
+                data: [], // Y轴数据
+                borderColor: 'rgb(75, 192, 192)', // 线条颜色
+                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
+                borderWidth: 1
+            }]
+        };
+
+        const config = {
+            type: 'line', // 使用折线图
+            data: chartData,
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        type: 'category', // X轴使用类别型
+                        position: 'bottom',
+                    },
+                    y: {
+                        beginAtZero: true, // Y轴从0开始
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                }
+            }
+        };
+
+        const orderChart = new Chart(ctx, config);
+
+        // 获取数据并更新图表
+        function fetchDataAndUpdateChart() {
+            fetch('/api/stream/ordersummary') // 替换为你的实际API地址
+                .then(response => response.json())
+                .then(data => {
+                    // 统计每个时间点的订单数量
+                    let orderCounts = {};
+                    data.forEach(order => {
+                        const status = order.status; // 获取订单时间
+                        const count = order.count; // 获取订单数量
+
+                        // 按时间统计数量
+                        if (orderCounts[status]) {
+                            orderCounts[status] += count;
+                        } else {
+                            orderCounts[status] = count;
+                        }
+                    });
+
+                    // 更新图表数据
+                    chartData.labels = Object.keys(orderCounts); // 设置X轴标签为时间
+                    chartData.datasets[0].data = Object.values(orderCounts); // 设置Y轴数据为订单数量
+
+                    // 更新图表
+                    orderChart.update();
+                })
+                .catch(error => console.error('获取数据失败:', error));
+        }
+
+        // 每5秒更新一次数据
+        setInterval(fetchDataAndUpdateChart, 5000);
+
+        // 初始数据加载
+        fetchDataAndUpdateChart();
+    </script>
+</body>
+</html>
diff --git a/templates/streamsummary.html b/templates/streamsummary.html
new file mode 100644
index 0000000..e4343c2
--- /dev/null
+++ b/templates/streamsummary.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>订单数量随时间变化图表</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        canvas {
+            width: 100% !important;
+            height: 400px !important;
+        }
+    </style>
+</head>
+<body>
+    <h2>订单数量随时间变化图表</h2>
+    <canvas id="orderChart"></canvas>
+
+    <script>
+        // 初始化图表
+        const ctx = document.getElementById('orderChart').getContext('2d');
+        const chartData = {
+            labels: [], // 时间戳标签
+            datasets: [{
+                label: '累计订单数量',
+                data: [], // 累计的订单数量
+                borderColor: 'rgb(75, 192, 192)', // 线条颜色
+                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景填充色
+                borderWidth: 1,
+                fill: false
+            }]
+        };
+
+        const config = {
+            type: 'line', // 使用折线图
+            data: chartData,
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        type: 'linear', // X轴为线性类型
+                        position: 'bottom',
+                        title: {
+                            display: true,
+                            text: '时间 (秒)'
+                        }
+                    },
+                    y: {
+                        beginAtZero: true, // Y轴从0开始
+                        ticks: {
+                            stepSize: 1
+                        },
+                        title: {
+                            display: true,
+                            text: '订单数量'
+                        }
+                    }
+                }
+            }
+        };
+
+        const orderChart = new Chart(ctx, config);
+
+        // 获取数据并更新图表
+        function fetchDataAndUpdateChart() {
+            fetch('/api/stream/summary')
+                .then(response => response.json())
+                .then(data => {
+                    // 累计订单数量
+                    let cumulativeCount = 0;
+                    let labels = [];
+                    let counts = [];
+
+                    data.forEach(order => {
+                        const status = order.status; // 获取订单时间
+                        const count = order.count; // 获取订单数量
+
+                        cumulativeCount += count; // 累加数量
+                        labels.push(status); // 保存时间戳
+                        counts.push(cumulativeCount); // 保存累计数量
+                    });
+
+                    // 更新图表数据
+                    chartData.labels = labels; // 设置时间戳为X轴标签
+                    chartData.datasets[0].data = counts; // 设置累计的订单数量为Y轴数据
+
+                    // 更新图表
+                    orderChart.update();
+                })
+                .catch(error => console.error('获取数据失败:', error));
+        }
+
+        // 每5秒更新一次数据
+        setInterval(fetchDataAndUpdateChart, 5000);
+
+        // 初始数据加载
+        fetchDataAndUpdateChart();
+    </script>
+</body>
+</html>
