218 lines
9.9 KiB
HTML
218 lines
9.9 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>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 100vw; height: 100vh; overflow: hidden;
|
|
font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
|
|
color: #d7f2ff;
|
|
background:
|
|
radial-gradient(1200px 600px at 20% -10%, rgba(16,120,90,.28), transparent 60%),
|
|
radial-gradient(1000px 500px at 90% 110%, rgba(10,90,140,.3), transparent 60%),
|
|
linear-gradient(160deg, #07121d 0%, #0a1f2e 55%, #081827 100%);
|
|
display: flex; flex-direction: column;
|
|
}
|
|
/* 顶部标题栏 */
|
|
header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 14px 28px;
|
|
background: linear-gradient(180deg, rgba(10,60,80,.55), rgba(6,20,32,.2));
|
|
border-bottom: 1px solid rgba(64,224,180,.25);
|
|
box-shadow: 0 4px 24px rgba(0,0,0,.35);
|
|
}
|
|
header h1 {
|
|
font-size: 26px; letter-spacing: 4px; font-weight: 700;
|
|
background: linear-gradient(90deg, #6ff7d0, #38d9a9, #7dd3fc);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
text-shadow: 0 0 30px rgba(56,217,169,.25);
|
|
}
|
|
header .sub { font-size: 15px; color: #8fd9c0; }
|
|
header .clock { font-size: 15px; color: #a9d8ec; font-family: Consolas, monospace; }
|
|
|
|
main {
|
|
flex: 1; display: grid; gap: 14px; padding: 14px 18px 12px;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-template-rows: auto auto 1fr;
|
|
}
|
|
.panel {
|
|
position: relative; padding: 12px 14px;
|
|
background: linear-gradient(180deg, rgba(18,52,72,.55), rgba(8,24,40,.45));
|
|
border: 1px solid rgba(64,180,224,.22);
|
|
border-radius: 6px;
|
|
}
|
|
.panel::before {
|
|
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
background: linear-gradient(90deg, transparent, #2dd4bf, transparent);
|
|
}
|
|
.panel-title {
|
|
display: flex; align-items: center; gap: 8px; font-size: 15px; color: #8fe8ff;
|
|
margin-bottom: 10px; letter-spacing: 2px;
|
|
}
|
|
.panel-title::before { content: ""; width: 4px; height: 14px; background: #2dd4bf; border-radius: 2px; }
|
|
|
|
/* 核心指标 */
|
|
.stats { grid-column: span 4; display: flex; gap: 10px; align-items: center; }
|
|
.stat {
|
|
flex: 1; text-align: center; padding: 12px 4px;
|
|
background: rgba(16,56,76,.45); border: 1px solid rgba(64,180,224,.18); border-radius: 6px;
|
|
}
|
|
.stat .num { font-size: 26px; font-weight: 700; color: #5ef0c0; font-family: Consolas, monospace; }
|
|
.stat .lab { font-size: 12px; color: #9fb8c8; margin-top: 4px; }
|
|
|
|
/* 环境监测卡 */
|
|
.env { grid-column: span 4; display: flex; gap: 10px; }
|
|
.env .mini {
|
|
flex: 1; text-align: center; padding: 10px 2px;
|
|
background: rgba(16,56,76,.4); border: 1px solid rgba(64,180,224,.16); border-radius: 6px;
|
|
}
|
|
.env .mini .v { font-size: 20px; font-weight: 700; color: #ffd479; font-family: Consolas, monospace; }
|
|
.env .mini .t { font-size: 11px; color: #93adbf; margin-top: 3px; }
|
|
|
|
/* 中下区域 */
|
|
.mid { grid-column: span 4; }
|
|
.chart { width: 100%; height: 150px; }
|
|
|
|
.list-row {
|
|
display: flex; justify-content: space-between; padding: 6px 4px;
|
|
font-size: 12px; border-bottom: 1px dashed rgba(80,160,200,.15); color: #bcd4e4;
|
|
}
|
|
.list-row .tag {
|
|
padding: 1px 8px; border-radius: 10px; font-size: 11px;
|
|
}
|
|
.tag.ok { background: rgba(45,212,191,.18); color: #5ef0c0; }
|
|
.tag.warn { background: rgba(255,180,80,.18); color: #ffc36b; }
|
|
.tag.err { background: rgba(255,90,90,.18); color: #ff7a7a; }
|
|
|
|
/* 预警滚动 */
|
|
.alert-list { grid-column: span 6; overflow: hidden; height: 100%; }
|
|
.alert-item {
|
|
display: flex; gap: 10px; padding: 5px 4px; font-size: 12.5px;
|
|
border-bottom: 1px dashed rgba(80,160,200,.15); color: #ffd9a8;
|
|
}
|
|
.alert-item b { color: #ff9d5c; font-weight: 600; }
|
|
|
|
/* 底部跑马灯 */
|
|
footer {
|
|
height: 34px; line-height: 34px; overflow: hidden; white-space: nowrap;
|
|
font-size: 13px; color: #7fd9c0; border-top: 1px solid rgba(64,224,180,.2);
|
|
background: rgba(6,18,30,.6); padding-left: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div>
|
|
<h1>智慧农业大数据可视化平台</h1>
|
|
<div class="sub" id="screenTitle">示例大屏 · 农业数据总览</div>
|
|
</div>
|
|
<div class="clock" id="clock">2026-08-23 09:30:00</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="panel stats">
|
|
<div class="stat"><div class="num" data-count="12856">12,856</div><div class="lab">今日产量 (kg)</div></div>
|
|
<div class="stat"><div class="num" data-count="342">342</div><div class="lab">在线设备</div></div>
|
|
<div class="stat"><div class="num" data-count="7">7</div><div class="lab">活跃预警</div></div>
|
|
<div class="stat"><div class="num" data-count="12600">12,600</div><div class="lab">灌溉面积 (亩)</div></div>
|
|
</section>
|
|
|
|
<section class="panel env">
|
|
<div class="mini"><div class="v">26.4°C</div><div class="t">棚内温度</div></div>
|
|
<div class="mini"><div class="v">68%</div><div class="t">空气湿度</div></div>
|
|
<div class="mini"><div class="v">12.3</div><div class="t">光照 klx</div></div>
|
|
<div class="mini"><div class="v">486</div><div class="t">CO₂ ppm</div></div>
|
|
</section>
|
|
|
|
<section class="panel mid">
|
|
<div class="panel-title">近7日土壤墒情</div>
|
|
<svg class="chart" viewBox="0 0 420 150" preserveAspectRatio="none">
|
|
<defs>
|
|
<linearGradient id="barG" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#38d9a9"/><stop offset="1" stop-color="#0a4a68"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<line x1="0" y1="20" x2="420" y2="20" stroke="rgba(120,200,255,.12)"/>
|
|
<line x1="0" y1="70" x2="420" y2="70" stroke="rgba(120,200,255,.12)"/>
|
|
<line x1="0" y1="120" x2="420" y2="120" stroke="rgba(120,200,255,.12)"/>
|
|
<rect x="25" y="55" width="38" height="85" rx="3" fill="url(#barG)"/>
|
|
<rect x="85" y="35" width="38" height="105" rx="3" fill="url(#barG)"/>
|
|
<rect x="145" y="60" width="38" height="80" rx="3" fill="url(#barG)"/>
|
|
<rect x="205" y="25" width="38" height="115" rx="3" fill="url(#barG)"/>
|
|
<rect x="265" y="45" width="38" height="95" rx="3" fill="url(#barG)"/>
|
|
<rect x="325" y="70" width="38" height="70" rx="3" fill="url(#barG)"/>
|
|
</svg>
|
|
</section>
|
|
|
|
<section class="panel mid">
|
|
<div class="panel-title">近7日温度趋势</div>
|
|
<svg class="chart" viewBox="0 0 420 150" preserveAspectRatio="none">
|
|
<polyline points="20,95 87,70 154,80 221,45 288,60 355,35 410,50"
|
|
fill="none" stroke="#5ef0c0" stroke-width="2.5"/>
|
|
<polyline points="20,120 87,105 154,110 221,85 288,100 355,80 410,92"
|
|
fill="none" stroke="#7dd3fc" stroke-width="2"/>
|
|
<circle cx="221" cy="45" r="4" fill="#5ef0c0"/>
|
|
<circle cx="355" cy="35" r="4" fill="#5ef0c0"/>
|
|
</svg>
|
|
</section>
|
|
|
|
<section class="panel mid">
|
|
<div class="panel-title">设备在线率</div>
|
|
<div style="display:flex;align-items:center;gap:18px;height:130px;">
|
|
<svg width="120" height="120" viewBox="0 0 120 120">
|
|
<circle cx="60" cy="60" r="46" fill="none" stroke="rgba(80,160,200,.18)" stroke-width="12"/>
|
|
<circle cx="60" cy="60" r="46" fill="none" stroke="#38d9a9" stroke-width="12"
|
|
stroke-dasharray="251" stroke-dashoffset="38" transform="rotate(-90 60 60)" stroke-linecap="round"/>
|
|
<text x="60" y="66" text-anchor="middle" fill="#5ef0c0" font-size="20" font-weight="700">85%</text>
|
|
</svg>
|
|
<div style="font-size:12px;line-height:2;color:#bcd4e4;">
|
|
<div>● 在线 <span style="color:#5ef0c0">342</span></div>
|
|
<div>● 离线 <span style="color:#ff9d5c">60</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel alert-list">
|
|
<div class="panel-title">作物生长预警</div>
|
|
<div class="alert-item"><b>06:30</b> 3号温室土壤湿度低于阈值，已自动启动滴灌。</div>
|
|
<div class="alert-item"><b>08:15</b> 西区光照不足，建议开启补光灯。</div>
|
|
<div class="alert-item"><b>10:02</b> 5号水泵电机温度偏高，请安排巡检。</div>
|
|
<div class="alert-item"><b>12:40</b> 东区虫情监测发现异常，已推送防治方案。</div>
|
|
<div class="alert-item"><b>14:10</b> 数据中心网络波动，已切换备用链路。</div>
|
|
</section>
|
|
|
|
<section class="panel mid">
|
|
<div class="panel-title">设备状态</div>
|
|
<div class="list-row"><span>滴灌系统</span><span class="tag ok">运行中</span></div>
|
|
<div class="list-row"><span>环境传感器</span><span class="tag ok">正常</span></div>
|
|
<div class="list-row"><span>植保无人机</span><span class="tag warn">待命</span></div>
|
|
<div class="list-row"><span>水肥一体机</span><span class="tag ok">运行中</span></div>
|
|
<div class="list-row"><span>监控摄像头</span><span class="tag err">1路离线</span></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>【系统运行正常】示范基地总览 · 数据每 60 秒自动刷新 · 最后同步：刚刚</footer>
|
|
|
|
<script>
|
|
// 从 URL 读取 title 参数（由编辑器传入）
|
|
(function () {
|
|
var p = new URLSearchParams(location.search);
|
|
var t = p.get('title');
|
|
if (t) document.getElementById('screenTitle').textContent = '示例大屏 · ' + t;
|
|
var n = p.get('no');
|
|
if (n) document.getElementById('screenTitle').textContent = '示例大屏 · ' + n + ' - ' + document.getElementById('screenTitle').textContent;
|
|
var c = document.getElementById('clock');
|
|
function tick() {
|
|
var d = new Date();
|
|
var pad = function (x) { return x < 10 ? '0' + x : x; };
|
|
c.textContent = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
|
|
}
|
|
tick(); setInterval(tick, 1000);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|