434 lines
17 KiB
HTML
434 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>数据看板 - 锡林郭勒盟畜牧数字化管理平台</title>
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<!-- 自定义CSS -->
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航栏 -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
|
<i class="bi bi-cloud-sun-fill me-2"></i>
|
|
<span>锡林郭勒盟畜牧数字化管理平台</span>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html">首页</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html#features">平台功能</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="data.html">数据看板</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="news.html">新闻资讯</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about.html">关于我们</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 蒙古族风格装饰条 -->
|
|
<div class="gold-pattern"></div>
|
|
|
|
<!-- 数据看板内容 -->
|
|
<section class="py-5 mt-5">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h1 class="fw-bold display-4 mb-3">畜牧业数据看板</h1>
|
|
<p class="lead text-muted">实时掌握锡林郭勒盟畜牧业发展动态</p>
|
|
</div>
|
|
|
|
<!-- 数据统计卡片 -->
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-cow fs-1 mb-3"></i>
|
|
<h3 class="display-5 fw-bold">120万</h3>
|
|
<p class="card-text">牛存栏量</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-shop fs-1 mb-3"></i>
|
|
<h3 class="display-5 fw-bold">85万</h3>
|
|
<p class="card-text">羊存栏量</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-currency-dollar fs-1 mb-3"></i>
|
|
<h3 class="display-5 fw-bold">2.8亿</h3>
|
|
<p class="card-text">年产值(元)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card text-white bg-success h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-people fs-1 mb-3"></i>
|
|
<h3 class="display-5 fw-bold">1.2万</h3>
|
|
<p class="card-text">牧户数</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="h4 text-center mb-4">牲畜存栏量统计</h3>
|
|
<div class="ratio ratio-16x9">
|
|
<canvas id="livestockChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="h4 text-center mb-4">牧草产量与价格</h3>
|
|
<div class="ratio ratio-16x9">
|
|
<canvas id="forageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="h4 text-center mb-4">月度牛肉产量趋势</h3>
|
|
<div class="ratio ratio-16x9">
|
|
<canvas id="beefProductionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="h4 text-center mb-4">畜牧业收入分布</h3>
|
|
<div class="ratio ratio-16x9">
|
|
<canvas id="incomeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="h4 mb-4">各旗县畜牧业数据对比</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead class="table-success">
|
|
<tr>
|
|
<th>旗县</th>
|
|
<th>牛存栏量(万头)</th>
|
|
<th>羊存栏量(万只)</th>
|
|
<th>马存栏量(万匹)</th>
|
|
<th>年产值(万元)</th>
|
|
<th>同比增长率</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>锡林浩特市</td>
|
|
<td>35.2</td>
|
|
<td>28.6</td>
|
|
<td>8.3</td>
|
|
<td>8600</td>
|
|
<td class="text-success">+5.2%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>二连浩特市</td>
|
|
<td>22.8</td>
|
|
<td>18.4</td>
|
|
<td>5.1</td>
|
|
<td>5400</td>
|
|
<td class="text-success">+3.8%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>阿巴嘎旗</td>
|
|
<td>18.6</td>
|
|
<td>15.2</td>
|
|
<td>4.7</td>
|
|
<td>4200</td>
|
|
<td class="text-danger">-1.2%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>苏尼特左旗</td>
|
|
<td>15.4</td>
|
|
<td>12.8</td>
|
|
<td>3.9</td>
|
|
<td>3800</td>
|
|
<td class="text-success">+2.5%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>苏尼特右旗</td>
|
|
<td>12.9</td>
|
|
<td>10.7</td>
|
|
<td>3.2</td>
|
|
<td>3100</td>
|
|
<td class="text-success">+4.1%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-success text-white py-5">
|
|
<div class="container">
|
|
<div class="row g-4">
|
|
<div class="col-lg-4">
|
|
<h3 class="h4 mb-4">
|
|
<i class="bi bi-cloud-sun-fill me-2"></i>
|
|
锡林郭勒盟畜牧数字化管理平台
|
|
</h3>
|
|
<p>
|
|
打造现代化畜牧业全产业链数字化管理平台，推动锡林郭勒盟畜牧业高质量发展。
|
|
</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="#" class="text-white fs-4"><i class="bi bi-wechat"></i></a>
|
|
<a href="#" class="text-white fs-4"><i class="bi bi-weibo"></i></a>
|
|
<a href="#" class="text-white fs-4"><i class="bi bi-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<h3 class="h4 mb-4">快速链接</h3>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2"><a href="index.html" class="text-white text-decoration-none">平台首页</a></li>
|
|
<li class="mb-2"><a href="index.html#features" class="text-white text-decoration-none">核心功能</a></li>
|
|
<li class="mb-2"><a href="data.html" class="text-white text-decoration-none">数据看板</a></li>
|
|
<li class="mb-2"><a href="news.html" class="text-white text-decoration-none">新闻资讯</a></li>
|
|
<li class="mb-2"><a href="about.html" class="text-white text-decoration-none">关于我们</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<h3 class="h4 mb-4">联系我们</h3>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="bi bi-geo-alt-fill me-2"></i>
|
|
内蒙古自治区锡林郭勒盟锡林浩特市
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="bi bi-telephone-fill me-2"></i>
|
|
0479-8888888
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="bi bi-envelope-fill me-2"></i>
|
|
contact@xlxumu.com
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4 opacity-25">
|
|
|
|
<div class="text-center">
|
|
<p class="mb-0">
|
|
© 2025 锡林郭勒盟畜牧数字化管理平台. 保留所有权利 |
|
|
<a href="#" class="text-white text-decoration-none">隐私政策</a> |
|
|
<a href="#" class="text-white text-decoration-none">使用条款</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- 自定义JS -->
|
|
<script src="js/main.js"></script>
|
|
|
|
<!-- 图表脚本 -->
|
|
<script>
|
|
// 牲畜存栏量统计图表
|
|
const livestockCtx = document.getElementById('livestockChart');
|
|
new Chart(livestockCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['牛', '羊', '马', '骆驼'],
|
|
datasets: [{
|
|
label: '存栏量(万头)',
|
|
data: [120, 85, 32, 8],
|
|
backgroundColor: [
|
|
'rgba(54, 162, 235, 0.7)',
|
|
'rgba(75, 192, 192, 0.7)',
|
|
'rgba(255, 159, 64, 0.7)',
|
|
'rgba(153, 102, 255, 0.7)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: '牲畜存栏量统计'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 牧草产量与价格图表
|
|
const forageCtx = document.getElementById('forageChart');
|
|
new Chart(forageCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
datasets: [
|
|
{
|
|
label: '产量(万吨)',
|
|
data: [12, 19, 15, 22, 28, 35],
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
yAxisID: 'y'
|
|
},
|
|
{
|
|
label: '价格(元/吨)',
|
|
data: [1800, 1750, 1850, 1900, 1950, 2000],
|
|
borderColor: 'rgb(255, 159, 64)',
|
|
backgroundColor: 'rgba(255, 159, 64, 0.2)',
|
|
yAxisID: 'y1'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '牧草产量与价格趋势'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: {
|
|
display: true,
|
|
text: '产量(万吨)'
|
|
}
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
title: {
|
|
display: true,
|
|
text: '价格(元/吨)'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 月度牛肉产量趋势
|
|
const beefProductionCtx = document.getElementById('beefProductionChart');
|
|
new Chart(beefProductionCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
datasets: [{
|
|
label: '牛肉产量(吨)',
|
|
data: [8500, 9200, 10500, 11800, 12600, 13400],
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '月度牛肉产量趋势'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 畜牧业收入分布
|
|
const incomeCtx = document.getElementById('incomeChart');
|
|
new Chart(incomeCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['牛肉销售', '羊肉销售', '奶制品', '其他'],
|
|
datasets: [{
|
|
label: '收入占比',
|
|
data: [45, 35, 15, 5],
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'rgb(75, 192, 192)'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '畜牧业收入分布'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |