|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>智能轮胎管理系统 - 首页看板</title>
|
|
|
|
|
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
|
|
|
|
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
|
|
|
|
|
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
|
|
|
|
|
|
<link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
|
|
|
|
|
|
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.8.2}" rel="stylesheet"/>
|
|
|
|
|
|
<!-- 引入Tailwind CSS -->
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
<!-- 引入Font Awesome图标 -->
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
|
|
<!-- 引入Chart.js -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
|
|
<!-- 自定义Tailwind配置 -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
tailwind.config = {
|
|
|
|
|
|
theme: {
|
|
|
|
|
|
extend: {
|
|
|
|
|
|
colors: {
|
|
|
|
|
|
primary: '#165DFF',
|
|
|
|
|
|
secondary: '#36CFC9',
|
|
|
|
|
|
warning: '#FF7D00',
|
|
|
|
|
|
danger: '#F53F3F',
|
|
|
|
|
|
success: '#00B42A',
|
|
|
|
|
|
dark: '#1D2129',
|
|
|
|
|
|
light: '#F2F3F5'
|
|
|
|
|
|
},
|
|
|
|
|
|
fontFamily: {
|
|
|
|
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
@layer utilities {
|
|
|
|
|
|
.card-shadow {
|
|
|
|
|
|
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
}
|
|
|
|
|
|
.dashboard-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
|
|
|
gap: 1.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-gray-50 font-sans text-dark">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 概览统计卡片 -->
|
|
|
|
|
|
<section class="dashboard-grid mb-6">
|
|
|
|
|
|
<!-- 总库存 -->
|
|
|
|
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
|
|
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-gray-500 text-sm">轮胎总库存</p>
|
|
|
|
|
|
<h2 class="text-3xl font-bold mt-1" id="tireStock">0</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
|
|
|
|
<i class="fa-solid fa-boxes-stacked text-primary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="flex items-center text-sm">-->
|
|
|
|
|
|
<!-- <span class="text-success flex items-center">-->
|
|
|
|
|
|
<!-- <i class="fa-solid fa-arrow-up mr-1"></i>5.2%-->
|
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
|
<!-- <span class="text-gray-400 ml-2">较上月</span>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 在用轮胎 -->
|
|
|
|
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
|
|
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-gray-500 text-sm">在用轮胎数量</p>
|
|
|
|
|
|
<h2 class="text-3xl font-bold mt-1" id="tireInuse">0</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
|
|
|
|
|
|
<i class="fa-solid fa-car-side text-secondary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="flex items-center text-sm">-->
|
|
|
|
|
|
<!-- <span class="text-success flex items-center">-->
|
|
|
|
|
|
<!-- <i class="fa-solid fa-arrow-up mr-1"></i>2.8%-->
|
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
|
<!-- <span class="text-gray-400 ml-2">较上月</span>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 待保养轮胎 -->
|
|
|
|
|
|
<!-- <div class="bg-white rounded-lg p-5 card-shadow">-->
|
|
|
|
|
|
<!-- <div class="flex justify-between items-start mb-4">-->
|
|
|
|
|
|
<!-- <div>-->
|
|
|
|
|
|
<!-- <p class="text-gray-500 text-sm">待保养轮胎</p>-->
|
|
|
|
|
|
<!-- <h2 class="text-3xl font-bold mt-1">387</h2>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">-->
|
|
|
|
|
|
<!-- <i class="fa-solid fa-wrench text-warning"></i>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!--<!– <div class="flex items-center text-sm">–>-->
|
|
|
|
|
|
<!--<!– <span class="text-danger flex items-center">–>-->
|
|
|
|
|
|
<!--<!– <i class="fa-solid fa-arrow-up mr-1"></i>12.1%–>-->
|
|
|
|
|
|
<!--<!– </span>–>-->
|
|
|
|
|
|
<!--<!– <span class="text-gray-400 ml-2">较上月</span>–>-->
|
|
|
|
|
|
<!--<!– </div>–>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 关联车辆数 -->
|
|
|
|
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
|
|
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-gray-500 text-sm">车辆总数</p>
|
|
|
|
|
|
<h2 class="text-3xl font-bold mt-1" id="carTotal"></h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
|
|
|
|
|
|
<i class="fa-solid fa-truck text-success"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="flex items-center text-sm">-->
|
|
|
|
|
|
<!-- <span class="text-success flex items-center">-->
|
|
|
|
|
|
<!-- <i class="fa-solid fa-arrow-up mr-1"></i>8.5%-->
|
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
|
<!-- <span class="text-gray-400 ml-2">较上月</span>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 图表区域 -->
|
|
|
|
|
|
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
|
|
|
|
<!-- 近一个月出入库统计 -->
|
|
|
|
|
|
<div class="bg-white rounded-lg p-5 card-shadow lg:col-span-2">
|
|
|
|
|
|
<div class="flex justify-between items-center mb-4">
|
|
|
|
|
|
<h3 class="font-bold text-lg">近一个月轮胎出入库统计</h3>
|
|
|
|
|
|
<!-- <div class="flex gap-2">-->
|
|
|
|
|
|
<!-- <button class="px-3 py-1 rounded bg-primary text-white text-sm">日</button>-->
|
|
|
|
|
|
<!-- <button class="px-3 py-1 rounded bg-light text-gray-500 text-sm hover:bg-gray-200 transition">周</button>-->
|
|
|
|
|
|
<!-- <button class="px-3 py-1 rounded bg-light text-gray-500 text-sm hover:bg-gray-200 transition">月</button>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="h-[300px]">
|
|
|
|
|
|
<canvas id="inventoryChart"></canvas>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 轮胎类型分布 -->
|
|
|
|
|
|
<div class="bg-white rounded-lg p-5 card-shadow">
|
|
|
|
|
|
<h3 class="font-bold text-lg mb-4">轮胎类型分布</h3>
|
|
|
|
|
|
<div class="h-[300px] flex items-center justify-center">
|
|
|
|
|
|
<canvas id="tireTypeChart"></canvas>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 车辆与轮胎状态表格 -->
|
|
|
|
|
|
<!-- <section class="bg-white rounded-lg p-5 card-shadow">-->
|
|
|
|
|
|
<!-- <div class="flex justify-between items-center mb-4">-->
|
|
|
|
|
|
<!-- <h3 class="font-bold text-lg">车辆轮胎状态TOP10</h3>-->
|
|
|
|
|
|
<!--<!– <button class="text-primary flex items-center hover:text-primary/80 transition">–>-->
|
|
|
|
|
|
<!--<!– 查看全部 <i class="fa-solid fa-angle-right ml-1"></i>–>-->
|
|
|
|
|
|
<!--<!– </button>–>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- <div class="overflow-x-auto">-->
|
|
|
|
|
|
<!-- <table class="w-full text-sm">-->
|
|
|
|
|
|
<!-- <thead>-->
|
|
|
|
|
|
<!-- <tr class="border-b border-gray-200">-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">车辆编号</th>-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">车牌号码</th>-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">轮胎数量</th>-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">待保养数</th>-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">胎压异常数</th>-->
|
|
|
|
|
|
<!-- <th class="text-left py-3 px-4 font-medium text-gray-500">最近检查时间</th>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- </thead>-->
|
|
|
|
|
|
<!-- <tbody>-->
|
|
|
|
|
|
<!-- <tr class="border-b border-gray-100 hover:bg-gray-50 transition">-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4 font-medium">VEH-00128</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">京A·88990</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">12</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-warning">2</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-danger">1</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">2026-02-05</td>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- <tr class="border-b border-gray-100 hover:bg-gray-50 transition">-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4 font-medium">VEH-00129</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">沪B·77889</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">10</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-warning">1</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-gray-400">0</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">2026-02-07</td>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- <tr class="border-b border-gray-100 hover:bg-gray-50 transition">-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4 font-medium">VEH-00130</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">粤C·66778</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">14</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-warning">3</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-danger">2</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">2026-02-03</td>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- <tr class="border-b border-gray-100 hover:bg-gray-50 transition">-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4 font-medium">VEH-00131</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">苏D·55667</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">8</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-gray-400">0</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-gray-400">0</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">2026-02-08</td>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- <tr class="hover:bg-gray-50 transition">-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4 font-medium">VEH-00132</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">浙E·44556</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">10</td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-warning">1</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4"><span class="text-gray-400">0</span></td>-->
|
|
|
|
|
|
<!-- <td class="py-3 px-4">2026-02-06</td>-->
|
|
|
|
|
|
<!-- </tr>-->
|
|
|
|
|
|
<!-- </tbody>-->
|
|
|
|
|
|
<!-- </table>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- </section>-->
|
|
|
|
|
|
<!-- 图表初始化脚本 -->
|
|
|
|
|
|
<th:block th:include="include :: footer" />
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
|
|
$(function() {
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
type: "post",
|
|
|
|
|
|
url: ctx + "queryIndexData",
|
|
|
|
|
|
success: function(r) {
|
|
|
|
|
|
if (r.code == web_status.SUCCESS) {
|
|
|
|
|
|
document.getElementById('tireStock').innerText = r.data.InventoryTotal;
|
|
|
|
|
|
document.getElementById('tireInuse').innerText = r.data.TyreInCar;
|
|
|
|
|
|
document.getElementById('carTotal').innerText = r.data.CarTotal;
|
|
|
|
|
|
const mapList = r.data.mapList || [];
|
|
|
|
|
|
const inData = mapList.map(item => Number(item.type_0_count) || 0);
|
|
|
|
|
|
const outData = mapList.map(item => Number(item.type_1_count) || 0);
|
|
|
|
|
|
// 提取每个元素的 date 字段
|
|
|
|
|
|
const dates = mapList.map(item => {
|
|
|
|
|
|
// 若后端返回的 date 是完整日期（如 2026-03-02），可格式化（可选）
|
|
|
|
|
|
// 示例：把 2026-03-02 转成 3/2
|
|
|
|
|
|
if (item.date && item.date.includes('-')) {
|
|
|
|
|
|
const [year, month, day] = item.date.split('-');
|
|
|
|
|
|
return `${month}/${day}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 若后端已返回 3/2 格式，直接返回
|
|
|
|
|
|
return item.date || '';
|
|
|
|
|
|
});
|
|
|
|
|
|
// 3. 基于后端返回的 dates 生成图表数据（也可从 mapList 提取真实出入库数据）
|
|
|
|
|
|
// 如果你有真实的入库/出库数据，也可以从 mapList 提取，比如：
|
|
|
|
|
|
// const inData = mapList.map(item => item.inNum || 0);
|
|
|
|
|
|
// const outData = mapList.map(item => item.outNum || 0);
|
|
|
|
|
|
// 暂时保留随机数，仅替换 dates
|
|
|
|
|
|
|
|
|
|
|
|
// 等待DOM加载完成
|
|
|
|
|
|
// 1. 出入库统计图表
|
|
|
|
|
|
const inventoryCtx = document.getElementById('inventoryChart').getContext('2d');
|
|
|
|
|
|
new Chart(inventoryCtx, {
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: dates,
|
|
|
|
|
|
datasets: [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '入库数量',
|
|
|
|
|
|
data: inData,
|
|
|
|
|
|
borderColor: '#165DFF',
|
|
|
|
|
|
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
|
|
|
|
|
fill: true,
|
|
|
|
|
|
tension: 0.4
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '出库数量',
|
|
|
|
|
|
data: outData,
|
|
|
|
|
|
borderColor: '#F53F3F',
|
|
|
|
|
|
backgroundColor: 'rgba(245, 63, 63, 0.1)',
|
|
|
|
|
|
fill: true,
|
|
|
|
|
|
tension: 0.4
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
responsive: true,
|
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
|
plugins: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
mode: 'index',
|
|
|
|
|
|
intersect: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
scales: {
|
|
|
|
|
|
y: {
|
|
|
|
|
|
beginAtZero: true,
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
x: {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
display: false
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 2. 轮胎类型分布图表
|
|
|
|
|
|
const tireTypeCtx = document.getElementById('tireTypeChart').getContext('2d');
|
|
|
|
|
|
new Chart(tireTypeCtx, {
|
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: ['卡车轮胎', '客车轮胎', '轿车轮胎', '工程车轮胎', '其他'],
|
|
|
|
|
|
datasets: [{
|
|
|
|
|
|
data: [45, 25, 15, 10, 5],
|
|
|
|
|
|
backgroundColor: [
|
|
|
|
|
|
'#165DFF',
|
|
|
|
|
|
'#36CFC9',
|
|
|
|
|
|
'#FF7D00',
|
|
|
|
|
|
'#F53F3F',
|
|
|
|
|
|
'#86909C'
|
|
|
|
|
|
],
|
|
|
|
|
|
borderWidth: 0
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
responsive: true,
|
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
|
plugins: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
cutout: '70%'
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// $.modal.closeLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
