527 lines
20 KiB
HTML
527 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>订单管理后台</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
body {
|
|
background: linear-gradient(-45deg, #1e3c72, #2a5298, #1e3c72, #2a5298);
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: #fff;
|
|
}
|
|
@keyframes gradientBG {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.card {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin: 20px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2 class="text-2xl font-bold mb-6 text-white">订单管理</h2>
|
|
<div class="absolute top-4 right-4 flex gap-2">
|
|
<button onclick="logout()" class="py-2 px-4 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">退出登录</button>
|
|
<button id="adminBtn" onclick="location.href='/users/panel'" class="py-2 px-4 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors hidden">账号管理</button>
|
|
</div>
|
|
|
|
<!-- 订单统计图表 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="card p-6 bg-white/10 backdrop-blur-sm rounded-xl">
|
|
<h3 class="text-xl font-semibold mb-4 text-white">订单状态统计</h3>
|
|
<div id="orderChart" style="width: 100%; height: 400px;"></div>
|
|
<div class="mt-4 flex items-center">
|
|
<span class="text-white/80 mr-2">刷新频率(秒):</span>
|
|
<input type="number" id="refreshInterval" value="3" min="1" max="60"
|
|
class="w-16 px-2 py-1 bg-white/20 text-white rounded">
|
|
<button onclick="updateAllCharts()" class="ml-2 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">手动刷新</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-6 bg-white/10 backdrop-blur-sm rounded-xl">
|
|
<h3 class="text-xl font-semibold mb-4 text-white">热门商品Top5</h3>
|
|
<div id="topProductsChart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
|
|
<div class="card p-6 bg-white/10 backdrop-blur-sm rounded-xl">
|
|
<h3 class="text-xl font-semibold mb-4 text-white">订单评分统计</h3>
|
|
<div id="ratingChart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-6 bg-white/10 backdrop-blur-sm rounded-xl">
|
|
<h3 class="text-xl font-semibold mb-4 text-white">订单类型统计</h3>
|
|
<div id="typeChart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-8 p-6 bg-white/10 backdrop-blur-sm rounded-xl">
|
|
<h3 class="text-xl font-semibold mb-4 text-white">新建订单</h3>
|
|
<form id="createForm">
|
|
<div class="mb-4">
|
|
<input type="text" name="title" placeholder="标题" required class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder:text-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
</div>
|
|
<div class="mb-4">
|
|
<input type="text" name="description" placeholder="描述" class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder:text-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
</div>
|
|
<button type="submit" class="w-full py-2 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600 transition-colors">创建订单</button>
|
|
</form>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-white">订单列表</h3>
|
|
<div class="overflow-x-auto">
|
|
<table id="ordersTable" class="w-full text-sm text-left text-white/80">
|
|
<thead class="text-xs uppercase bg-white/10">
|
|
<tr>
|
|
<th class="px-6 py-3">ID</th>
|
|
<th class="px-6 py-3">标题</th>
|
|
<th class="px-6 py-3">描述</th>
|
|
<th class="px-6 py-3">状态</th>
|
|
<th class="px-6 py-3">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const jwt = localStorage.getItem('jwt');
|
|
if (!jwt) location.href = '/login_page';
|
|
|
|
async function fetchOrders() {
|
|
const res = await fetch('/orders/', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401) {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
return;
|
|
}
|
|
const orders = await res.json();
|
|
const tbody = document.querySelector('#ordersTable tbody');
|
|
tbody.innerHTML = '';
|
|
orders.forEach(order => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${order.id}</td>
|
|
<td><input value="${order.title}" onchange="updateOrder(${order.id}, 'title', this.value)" class="w-full px-3 py-1 bg-transparent text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded"></td>
|
|
<td><input value="${order.description||''}" onchange="updateOrder(${order.id}, 'description', this.value)" class="w-full px-3 py-1 bg-transparent text-white/90 focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded"></td>
|
|
<td>
|
|
<select onchange="updateOrder(${order.id}, 'status', this.value)" style="background-color: transparent;">
|
|
<option value="pending" class="bg-blue-900 text-white" ${order.status === 'pending' ? 'selected' : ''}>待处理</option>
|
|
<option value="in_progress" class="bg-blue-900 text-white" ${order.status === 'in_progress' ? 'selected' : ''}>处理中</option>
|
|
<option value="completed" class="bg-blue-900 text-white" ${order.status === 'completed' ? 'selected' : ''}>已完成</option>
|
|
</select>
|
|
</td>
|
|
<td><button onclick="deleteOrder(${order.id})" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors">删除</button></td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
async function updateOrder(id, field, value) {
|
|
const body = {};
|
|
body[field] = value;
|
|
await fetch('/orders/' + id, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: 'Bearer ' + jwt
|
|
},
|
|
body: JSON.stringify(body)
|
|
});
|
|
fetchOrders();
|
|
}
|
|
|
|
async function deleteOrder(id) {
|
|
await fetch('/orders/' + id, {
|
|
method: 'DELETE',
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
fetchOrders();
|
|
}
|
|
|
|
document.getElementById('createForm').onsubmit = async function(e) {
|
|
e.preventDefault();
|
|
const title = this.title.value;
|
|
const description = this.description.value;
|
|
await fetch('/orders/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: 'Bearer ' + jwt
|
|
},
|
|
body: JSON.stringify({title, description})
|
|
});
|
|
this.reset();
|
|
fetchOrders();
|
|
};
|
|
|
|
function logout() {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
}
|
|
|
|
// 初始化图表
|
|
const chartDom = document.getElementById('orderChart');
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
// 获取订单统计数据
|
|
async function fetchOrderSummary() {
|
|
const res = await fetch('/orders/summary', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401) {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
return;
|
|
}
|
|
return await res.json();
|
|
}
|
|
|
|
// 获取类型统计数据
|
|
async function fetchTypeSummary() {
|
|
const res = await fetch('/orders/type_summary', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401) {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
return;
|
|
}
|
|
return await res.json();
|
|
}
|
|
|
|
// 获取评分统计数据
|
|
async function fetchRatingSummary() {
|
|
const res = await fetch('/orders/rating_summary', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401) {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
return;
|
|
}
|
|
return await res.json();
|
|
}
|
|
|
|
// 初始化类型图表
|
|
const typeChartDom = document.getElementById('typeChart');
|
|
const typeChart = echarts.init(typeChartDom);
|
|
|
|
// 初始化评分图表
|
|
const ratingChartDom = document.getElementById('ratingChart');
|
|
const ratingChart = echarts.init(ratingChartDom);
|
|
|
|
// 更新类型图表
|
|
async function updateTypeChart() {
|
|
const data = await fetchTypeSummary();
|
|
if (!data) return;
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
textStyle: { color: '#fff' }
|
|
},
|
|
series: [{
|
|
name: '订单类型',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: 'rgba(255, 255, 255, 0.2)',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: data.map(item => ({
|
|
value: item.count,
|
|
name: item.order_type
|
|
}))
|
|
}]
|
|
};
|
|
typeChart.setOption(option);
|
|
}
|
|
|
|
// 获取热门商品数据
|
|
async function fetchTopProducts() {
|
|
const res = await fetch('/orders/top_products', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401) {
|
|
localStorage.removeItem('jwt');
|
|
location.href = '/login_page';
|
|
return;
|
|
}
|
|
return await res.json();
|
|
}
|
|
|
|
// 初始化热门商品图表
|
|
const topProductsChartDom = document.getElementById('topProductsChart');
|
|
const topProductsChart = echarts.init(topProductsChartDom);
|
|
|
|
// 更新热门商品图表
|
|
async function updateTopProductsChart() {
|
|
const data = await fetchTopProducts();
|
|
if (!data) return;
|
|
|
|
console.log('Top products data:', data); // 调试日志
|
|
|
|
// 确保数据按销量降序排列
|
|
data.sort((a, b) => b.sales_count - a.sales_count);
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: data.map(item => item.product_name),
|
|
axisLine: { lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' }
|
|
},
|
|
series: [{
|
|
name: '销量',
|
|
type: 'bar',
|
|
data: data.map(item => item.sales_count),
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
formatter: '{c}',
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
color: function(params) {
|
|
// 渐变色
|
|
const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
|
|
return colorList[params.dataIndex];
|
|
},
|
|
borderRadius: [0, 4, 4, 0]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: '#fff'
|
|
}
|
|
}]
|
|
};
|
|
topProductsChart.setOption(option);
|
|
}
|
|
|
|
// 更新所有图表
|
|
async function updateAllCharts() {
|
|
await updateOrderChart();
|
|
await updateTopProductsChart();
|
|
await updateRatingChart();
|
|
await updateTypeChart();
|
|
}
|
|
|
|
// 更新订单图表
|
|
async function updateOrderChart() {
|
|
const data = await fetchOrderSummary();
|
|
if (!data) return;
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
textStyle: { color: '#fff' }
|
|
},
|
|
series: [{
|
|
name: '订单状态',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: 'rgba(255, 255, 255, 0.2)',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: data.map(item => ({
|
|
value: item.count,
|
|
name: item.status // 直接用后端返回的 status 字段
|
|
}))
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
// 更新评分图表
|
|
async function updateRatingChart() {
|
|
const data = await fetchRatingSummary();
|
|
if (!data) return;
|
|
|
|
// 确保数据格式正确
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
legend: {
|
|
data: data.series.map(item => item.name),
|
|
textStyle: { color: '#fff' }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.categories,
|
|
axisLine: { lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#fff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
|
|
},
|
|
series: data.series.map(item => ({
|
|
name: item.name,
|
|
type: 'bar',
|
|
stack: 'total',
|
|
emphasis: { focus: 'series' },
|
|
data: item.data,
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color: function(params) {
|
|
const colors = {
|
|
'差评': '#ff4d4f',
|
|
'中评': '#faad14',
|
|
'好评': '#52c41a'
|
|
};
|
|
// 确保颜色与图例顺序一致
|
|
const colorMap = {
|
|
'差评': '#ff4d4f',
|
|
'中评': '#faad14',
|
|
'好评': '#52c41a'
|
|
};
|
|
return colorMap[params.seriesName] || '#1890ff';
|
|
}
|
|
}
|
|
}))
|
|
};
|
|
ratingChart.setOption(option);
|
|
}
|
|
|
|
// 自动刷新图表
|
|
let refreshTimer;
|
|
function startAutoRefresh() {
|
|
const interval = parseInt(document.getElementById('refreshInterval').value) * 1000;
|
|
if (refreshTimer) clearInterval(refreshTimer);
|
|
refreshTimer = setInterval(updateAllCharts, interval);
|
|
}
|
|
|
|
// 检查用户角色
|
|
async function checkAdmin() {
|
|
try {
|
|
const token = jwt.split('.')[1];
|
|
const payload = JSON.parse(atob(token));
|
|
if (payload.role === 'admin') {
|
|
document.getElementById('adminBtn').classList.remove('hidden');
|
|
}
|
|
} catch (e) {
|
|
console.error('Error checking admin role:', e);
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
checkAdmin();
|
|
fetchOrders();
|
|
updateAllCharts();
|
|
startAutoRefresh();
|
|
|
|
// 监听刷新频率变化
|
|
document.getElementById('refreshInterval').addEventListener('change', startAutoRefresh);
|
|
|
|
// 响应式调整图表大小
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
topProductsChart.resize();
|
|
ratingChart.resize();
|
|
typeChart.resize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|