niit-dev/web-backend
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend-dev #2

Merged
kaku merged 2 commits from frontend-dev into main 2025-01-03 15:38:46 +08:00
Conversation 0 Commits 2 Files Changed 7 +462 -6
7 changed files with 462 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
router/api.py
View File

@ -54,10 +54,11 @@ def orders_count_by_name():
finally: finally:
# 取消订阅并关闭消费者 # 取消订阅并关闭消费者
consumer.close() consumer.close()
print(messages)
return jsonify(messages) return jsonify(messages)
@api_bp.route('/stream/ordernamecount') @api_bp.route('/stream/ordernamecount')
def order_name_count(): def order_name_count():
consumer: KafkaConsumer = get_KafkaConsumer("order_name_count") consumer: KafkaConsumer = get_KafkaConsumer("order_name_count")

16
router/page.py
View File

@ -10,3 +10,19 @@ def index():
@page_bp.route('/show') @page_bp.route('/show')
def test(): def test():
return render_template('show.html') 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')

76
templates/index.html
View File

@ -3,13 +3,81 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body> <body>
<div class="container"> <!-- 页面容器 使用container-fluid -->
<div> <div class="container-fluid mt-5">
<iframe src="/show" frameborder="0" width="500" height="600"></iframe></iframe>
<!-- 第一个图表容器放在最上面 -->
<div class="row">
<div class="col-12 chart-container">
<iframe src="/show" frameborder="0"></iframe>
</div> </div>
</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> </body>
</html> </html>

89
templates/ordercount.html Normal file
View File

@ -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>

91
templates/streamordernamecount.html Normal file
View File

@ -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>

91
templates/streamordersummary.html Normal file
View File

@ -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>

100
templates/streamsummary.html Normal file
View File

@ -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>