459 lines
24 KiB
HTML
459 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>智水云 - 污水处理全流程监控一张图</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
||
|
|
:root {
|
||
|
|
--panel-bg: rgba(15, 23, 42, 0.7);
|
||
|
|
--border-color: rgba(51, 65, 85, 0.4);
|
||
|
|
--accent-blue: #3b82f6;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
background-color: #020617;
|
||
|
|
background-image: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%);
|
||
|
|
color: #e2e8f0;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 100vh;
|
||
|
|
font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
.font-digital { font-family: 'Share+Tech+Mono', monospace; }
|
||
|
|
.glass-card {
|
||
|
|
background: var(--panel-bg);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-top: 2px solid var(--accent-blue);
|
||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.glass-card:hover {
|
||
|
|
border-color: #60a5fa;
|
||
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
background: rgba(30, 41, 59, 0.6);
|
||
|
|
}
|
||
|
|
.status-pulse {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: inline-block;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
@keyframes pulse {
|
||
|
|
0% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.7); }
|
||
|
|
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
|
||
|
|
100% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0); }
|
||
|
|
}
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 280px;
|
||
|
|
gap: 0.75rem;
|
||
|
|
flex: 1;
|
||
|
|
min-height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.stats-panel {
|
||
|
|
height: 120px;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr 2fr 280px;
|
||
|
|
gap: 0.75rem;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.alarm-panel {
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(30, 41, 59, 0.4);
|
||
|
|
border-top: 2px solid #ef4444;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.table-container {
|
||
|
|
background: var(--panel-bg);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-top: 2px solid var(--accent-blue);
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
thead {
|
||
|
|
background: rgba(30, 41, 59, 0.8);
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #94a3b8;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
padding: 0.65rem 1rem;
|
||
|
|
border-bottom: 1px solid rgba(51, 65, 85, 0.2);
|
||
|
|
color: #e2e8f0;
|
||
|
|
}
|
||
|
|
tbody tr:nth-child(even) {
|
||
|
|
background: rgba(255, 255, 255, 0.02);
|
||
|
|
}
|
||
|
|
tbody tr:hover {
|
||
|
|
background: rgba(59, 130, 246, 0.1);
|
||
|
|
}
|
||
|
|
.status-tag {
|
||
|
|
padding: 2px 8px;
|
||
|
|
border-radius: 9999px;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.status-online { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
|
||
|
|
.status-offline { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
||
|
|
.param-chip {
|
||
|
|
display: inline-block;
|
||
|
|
background: rgba(15, 23, 42, 0.6);
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-right: 4px;
|
||
|
|
font-family: 'Share+Tech+Mono', monospace;
|
||
|
|
}
|
||
|
|
.param-label-mini {
|
||
|
|
color: #64748b;
|
||
|
|
font-size: 10px;
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
.alarm-list {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 0.5rem;
|
||
|
|
}
|
||
|
|
.alarm-list::-webkit-scrollbar { width: 4px; }
|
||
|
|
.alarm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
|
||
|
|
.alarm-item {
|
||
|
|
background: rgba(15, 23, 42, 0.5);
|
||
|
|
border-left: 3px solid transparent;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
padding: 0.6rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
.alarm-item:hover { background: rgba(15, 23, 42, 0.8); }
|
||
|
|
.alarm-high { border-left-color: #ef4444; }
|
||
|
|
.alarm-mid { border-left-color: #f59e0b; }
|
||
|
|
.alarm-low { border-left-color: #3b82f6; }
|
||
|
|
.badge {
|
||
|
|
padding: 1px 4px;
|
||
|
|
border-radius: 2px;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
}
|
||
|
|
.badge-high { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
||
|
|
.badge-mid { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
|
||
|
|
.badge-low { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
|
||
|
|
.flow-card {
|
||
|
|
padding: 1rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.flow-card.industrial { border-top-color: #f59e0b; }
|
||
|
|
.flow-card.domestic { border-top-color: #10b981; }
|
||
|
|
.chart-container {
|
||
|
|
position: relative;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.param-label { color: #94a3b8; font-size: 0.7rem; font-weight: 500; }
|
||
|
|
.param-value { color: #f8fafc; font-size: 1.05rem; font-family: 'Share+Tech+Mono', monospace; }
|
||
|
|
.unit { font-size: 0.65rem; color: #64748b; margin-left: 2px; }
|
||
|
|
|
||
|
|
.card-header { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||
|
|
.card-body { padding: 0.6rem 0.8rem; flex: 1; }
|
||
|
|
.card-footer { padding: 0.4rem 0.8rem; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.03); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 顶部状态栏 -->
|
||
|
|
<header class="flex items-center justify-between mb-4 px-1">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<span class="iconify text-blue-500 text-3xl" data-icon="material-symbols:water-drop-outline"></span>
|
||
|
|
<div>
|
||
|
|
<h1 class="text-xl font-bold tracking-tight text-white leading-tight">智水云 · 全流程数字化管控平台</h1>
|
||
|
|
<p class="text-[10px] text-blue-400 font-mono tracking-widest uppercase" id="current-time">SYSTEM STATUS: 2026-03-22 10:45:00</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-6">
|
||
|
|
<div class="flex space-x-6 text-[11px] font-medium bg-slate-800/30 px-4 py-2 rounded-full border border-slate-700/50">
|
||
|
|
<span class="text-white flex items-center"><i class="w-1.5 h-1.5 bg-green-500 rounded-full mr-2"></i> 运行中: 24h</span>
|
||
|
|
<span class="text-slate-400">负荷: 78%</span>
|
||
|
|
<span class="text-slate-400">能效: 0.32 kW·h/m³</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-3 border-l border-slate-700 pl-6">
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-[10px] text-slate-400 leading-none">值班主管</p>
|
||
|
|
<p class="text-xs text-white">王建国 (A组)</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg">王</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<!-- 核心统计区域 -->
|
||
|
|
<div class="stats-panel">
|
||
|
|
<div class="glass-card flow-card industrial">
|
||
|
|
<div class="flex items-center space-x-2 mb-2">
|
||
|
|
<span class="iconify text-orange-400" data-icon="material-symbols:factory-outline"></span>
|
||
|
|
<span class="text-[10px] font-bold text-orange-400 uppercase">工业进水累计</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-end gap-2">
|
||
|
|
<div>
|
||
|
|
<p class="param-label text-[9px]">当日总量</p>
|
||
|
|
<p class="text-2xl font-digital text-white leading-none">10,867<span class="unit">m³</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="text-right border-l border-slate-700/50 pl-2">
|
||
|
|
<p class="param-label text-[9px]">环比</p>
|
||
|
|
<p class="text-xs font-digital text-orange-300">+2.4% ↑</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="glass-card flow-card domestic">
|
||
|
|
<div class="flex items-center space-x-2 mb-2">
|
||
|
|
<span class="iconify text-green-400" data-icon="material-symbols:home-outline"></span>
|
||
|
|
<span class="text-[10px] font-bold text-green-400 uppercase">生活进水累计</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-end gap-2">
|
||
|
|
<div>
|
||
|
|
<p class="param-label text-[9px]">当日总量</p>
|
||
|
|
<p class="text-2xl font-digital text-white leading-none">7,569<span class="unit">m³</span></p>
|
||
|
|
</div>
|
||
|
|
<div class="text-right border-l border-slate-700/50 pl-2">
|
||
|
|
<p class="param-label text-[9px]">环比</p>
|
||
|
|
<p class="text-xs font-digital text-green-300">-1.8% ↓</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="glass-card chart-container">
|
||
|
|
<div class="absolute top-2 left-4 z-10 flex items-center space-x-2">
|
||
|
|
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></span>
|
||
|
|
<span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">进水流量7日趋势 (m³/d)</span>
|
||
|
|
</div>
|
||
|
|
<canvas id="flowChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<!-- 统计面板右侧对应的告警总览 -->
|
||
|
|
<div class="glass-card flex flex-col justify-center p-3 relative overflow-hidden" style="border-top-color: #ef4444;">
|
||
|
|
<div class="absolute -right-4 -top-4 opacity-10">
|
||
|
|
<span class="iconify text-8xl text-red-500" data-icon="material-symbols:warning-outline"></span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-between mb-1">
|
||
|
|
<span class="text-[10px] font-bold text-red-400">设备运行异常</span>
|
||
|
|
<span class="badge badge-high animate-pulse">实时监控</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-end justify-between">
|
||
|
|
<div>
|
||
|
|
<div class="text-3xl font-digital text-red-500">03</div>
|
||
|
|
<div class="text-[9px] text-slate-500 uppercase tracking-wider">Active Alarms</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<div class="text-[10px] text-slate-400">待处理: <span class="text-red-400 font-digital">03</span></div>
|
||
|
|
<div class="text-[10px] text-slate-400">已闭环: <span class="text-green-500 font-digital">12</span>/今日</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 工艺流程数据表格 -->
|
||
|
|
<main class="grid-container">
|
||
|
|
<div class="table-container">
|
||
|
|
<div class="p-3 border-b border-slate-700/50 flex justify-between items-center bg-slate-900/40">
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<span class="iconify text-blue-500" data-icon="material-symbols:AppSettings-outline"></span>
|
||
|
|
<h2 class="text-xs font-bold uppercase tracking-wider text-slate-300">全流程生产工艺实时数据概览</h2>
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<span class="text-[10px] text-green-500 flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-1 animate-pulse"></span> 生产正常</span>
|
||
|
|
<span class="text-[10px] text-slate-500">更新时间: 2026-03-22 10:15:30</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="overflow-y-auto flex-1">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>工艺段名称</th>
|
||
|
|
<th>状态</th>
|
||
|
|
<th>瞬时流量 (m³/h)</th>
|
||
|
|
<th>关键参数 1</th>
|
||
|
|
<th>关键参数 2</th>
|
||
|
|
<th>关键参数 3</th>
|
||
|
|
<th class="text-right">设备ID</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td class="font-bold text-slate-200">01. 细格栅与提升</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,245.8</td><td><span class="param-label-mini">液位:</span><span class="param-chip text-green-400">1.8m</span></td><td><span class="param-label-mini">pH:</span><span class="param-chip text-white">7.2</span></td><td><span class="param-label-mini">主泵:</span><span class="param-chip text-white">2#</span></td><td class="text-right font-mono text-[10px] text-slate-500">P101</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">02. 曝气沉砂池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,238.2</td><td><span class="param-label-mini">DO:</span><span class="param-chip text-white">2.5mg/L</span></td><td><span class="param-label-mini">速:</span><span class="param-chip text-white">35Hz</span></td><td><span class="param-label-mini">油:</span><span class="param-chip text-green-400">0.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">D205</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">03. 初次沉淀池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,232.0</td><td><span class="param-label-mini">SS:</span><span class="param-chip text-white">180mg/L</span></td><td><span class="param-label-mini">泥位:</span><span class="param-chip text-white">0.8m</span></td><td><span class="param-label-mini">刮泥:</span><span class="param-chip text-white">ON</span></td><td class="text-right font-mono text-[10px] text-slate-500">S302</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">04. A/A/O 生物反应器</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,230.5</td><td><span class="param-label-mini">厌氧ORP:</span><span class="param-chip text-white">-180mV</span></td><td><span class="param-label-mini">MLSS:</span><span class="param-chip text-white">3250</span></td><td><span class="param-label-mini">回流:</span><span class="param-chip text-white">100%</span></td><td class="text-right font-mono text-[10px] text-slate-500">B401</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">05. 二次沉淀池组</td><td><span class="status-tag status-offline">故障告警</span></td><td class="font-digital text-red-400">1,228.1</td><td><span class="param-label-mini">出水SS:</span><span class="param-chip text-red-400">22.4</span></td><td><span class="param-label-mini">泥层:</span><span class="param-chip text-white">1.2m</span></td><td><span class="param-label-mini">泵组:</span><span class="param-chip text-red-500">ERR</span></td><td class="text-right font-mono text-[10px] text-slate-500">S204</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">06. 磁混凝高效沉淀</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,225.0</td><td><span class="param-label-mini">投药:</span><span class="param-chip text-white">12.5mg/L</span></td><td><span class="param-label-mini">磁粉:</span><span class="param-chip text-white">保持</span></td><td><span class="param-label-mini">浊度:</span><span class="param-chip text-green-400">4.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">M501</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">07. V型滤池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,210.6</td><td><span class="param-label-mini">滤速:</span><span class="param-chip text-white">6.5m/h</span></td><td><span class="param-label-mini">水头失:</span><span class="param-chip text-white">1.2m</span></td><td><span class="param-label-mini">反冲:</span><span class="param-chip text-white">4:30</span></td><td class="text-right font-mono text-[10px] text-slate-500">F602</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">08. 紫外消毒/次氯酸钠</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,208.5</td><td><span class="param-label-mini">强度:</span><span class="param-chip text-white">35mW</span></td><td><span class="param-label-mini">余氯:</span><span class="param-chip text-green-400">0.45</span></td><td><span class="param-label-mini">运行:</span><span class="param-chip text-white">12h</span></td><td class="text-right font-mono text-[10px] text-slate-500">V501</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">09. 核心鼓风机房</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">254 m³</td><td><span class="param-label-mini">压:</span><span class="param-chip text-green-400">58kPa</span></td><td><span class="param-label-mini">温:</span><span class="param-chip text-white">62℃</span></td><td><span class="param-label-mini">功率:</span><span class="param-chip text-white">185kW</span></td><td class="text-right font-mono text-[10px] text-slate-500">M601</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200 text-blue-400">10. 总出水在线监测</td><td><span class="status-tag status-online">达标运行</span></td><td class="font-digital text-blue-400">18.5k</td><td><span class="param-label-mini">COD:</span><span class="param-chip text-green-400">22.4</span></td><td><span class="param-label-mini">NH3:</span><span class="param-chip text-green-400">0.24</span></td><td><span class="param-label-mini">TP:</span><span class="param-chip text-green-400">0.08</span></td><td class="text-right font-mono text-[10px] text-slate-500">OUT-M</td></tr>
|
||
|
|
<tr><td class="font-bold text-slate-200">11. 污泥脱水系统</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">--</td><td><span class="param-label-mini">含水:</span><span class="param-chip text-white">78.2%</span></td><td><span class="param-label-mini">产泥:</span><span class="param-chip text-white">12.5t</span></td><td><span class="param-label-mini">药量:</span><span class="param-chip text-white">4.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">W701</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="px-3 py-2 border-t border-slate-700/50 bg-slate-900/40 flex justify-between items-center">
|
||
|
|
<div class="text-[10px] text-slate-500">系统就绪，当前生产效率：<span class="text-blue-400">92%</span></div>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button class="bg-blue-600/20 text-blue-400 text-[10px] px-3 py-1 rounded border border-blue-500/30 hover:bg-blue-600/40 transition">导出历史报表</button>
|
||
|
|
<button class="bg-slate-700 text-slate-200 text-[10px] px-3 py-1 rounded hover:bg-slate-600 transition">自定义列</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 15. 设备异常告警面板 (占据右侧整列) -->
|
||
|
|
<div class="glass-card alarm-panel">
|
||
|
|
<div class="card-header flex justify-between items-center bg-red-950/20">
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<span class="iconify text-red-500 animate-pulse" data-icon="material-symbols:fmd-bad"></span>
|
||
|
|
<span class="text-xs font-bold text-red-100 uppercase tracking-wider">实时告警列表</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button class="text-[9px] bg-slate-800 hover:bg-slate-700 px-2 py-0.5 rounded transition">忽略全部</button>
|
||
|
|
<button class="text-[9px] bg-blue-600 hover:bg-blue-500 px-2 py-0.5 rounded transition">导出日志</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="alarm-list">
|
||
|
|
<!-- 告警项 1 -->
|
||
|
|
<div class="alarm-item alarm-high">
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="badge badge-high font-bold uppercase">Critical</span>
|
||
|
|
<span class="text-[9px] text-slate-500 font-mono">10:42:15</span>
|
||
|
|
</div>
|
||
|
|
<div class="font-bold text-slate-200">鼓风机房 #2 离心风机</div>
|
||
|
|
<div class="text-[10px] text-red-400 mt-1 flex items-center">
|
||
|
|
<span class="iconify mr-1" data-icon="material-symbols:bolt"></span>
|
||
|
|
运行电流过载 (45.2A > 40.0A)
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end space-x-2 mt-2">
|
||
|
|
<button class="text-[9px] border border-slate-700 hover:border-slate-500 px-2 py-1 rounded">查看详情</button>
|
||
|
|
<button class="text-[9px] bg-red-600/80 hover:bg-red-500 px-2 py-1 rounded text-white" onclick="alert('已发送工单给维保组')">立即处理</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 告警项 2 -->
|
||
|
|
<div class="alarm-item alarm-mid">
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="badge badge-mid font-bold uppercase">Warning</span>
|
||
|
|
<span class="text-[9px] text-slate-500 font-mono">10:05:21</span>
|
||
|
|
</div>
|
||
|
|
<div class="font-bold text-slate-200">2# 二沉池 吸泥机</div>
|
||
|
|
<div class="text-[10px] text-orange-400 mt-1 flex items-center">
|
||
|
|
<span class="iconify mr-1" data-icon="material-symbols:settings-backup-restore"></span>
|
||
|
|
转速异常波动 (+/- 15%)
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end space-x-2 mt-2">
|
||
|
|
<button class="text-[9px] border border-slate-700 hover:border-slate-500 px-2 py-1 rounded w-full text-slate-300">远程复位</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 告警项 3 -->
|
||
|
|
<div class="alarm-item alarm-low">
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="badge badge-low font-bold uppercase">Info</span>
|
||
|
|
<span class="text-[9px] text-slate-500 font-mono">09:12:05</span>
|
||
|
|
</div>
|
||
|
|
<div class="font-bold text-slate-200">加药间 PAC 储罐</div>
|
||
|
|
<div class="text-[10px] text-blue-300 mt-1 flex items-center">
|
||
|
|
<span class="iconify mr-1" data-icon="material-symbols:water-medium"></span>
|
||
|
|
低液位预警 (剩余 15%)
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end mt-2">
|
||
|
|
<button class="text-[9px] text-blue-400 hover:underline">申请补料</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer text-center bg-slate-900/50 p-2 border-t border-slate-800">
|
||
|
|
<p class="text-[9px] text-slate-500 hover:text-blue-400 cursor-pointer transition">查看所有历史记录 (6张待办) »</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<footer class="mt-4 flex items-center justify-between px-2 text-[10px] text-slate-600 border-t border-slate-800 pt-2 h-6"> <div class="flex space-x-8">
|
||
|
|
<p>© 2026 智水云污水处理管理有限公司</p>
|
||
|
|
<p><i class="iconify inline mr-1" data-icon="material-symbols:location-on"></i> 江苏省南通市华东第二污水处理厂</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-6">
|
||
|
|
<p class="flex items-center text-green-700 font-medium"><i class="iconify mr-1" data-icon="material-symbols:check-circle"></i> 云端数据实时同步中 (25ms)</p>
|
||
|
|
<p>生产智脑 V4.2.0-PROD</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
// 自动刷新当前时刻
|
||
|
|
function updateClock() {
|
||
|
|
const now = new Date();
|
||
|
|
const timeStr = `SYSTEM STATUS: ${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
|
||
|
|
document.getElementById('current-time').textContent = timeStr;
|
||
|
|
}
|
||
|
|
setInterval(updateClock, 1000);
|
||
|
|
|
||
|
|
// Chart.js 趋势分析
|
||
|
|
const ctx = document.getElementById('flowChart').getContext('2d');
|
||
|
|
const flowChart = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: ['03/16', '03/17', '03/18', '03/19', '03/20', '03/21', '03/22'],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: '工业污水',
|
||
|
|
data: [11200, 10800, 11500, 10200, 12100, 10600, 10867],
|
||
|
|
backgroundColor: 'rgba(245, 158, 11, 0.4)',
|
||
|
|
borderColor: '#f59e0b',
|
||
|
|
borderWidth: 1.5,
|
||
|
|
borderRadius: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '生活污水',
|
||
|
|
data: [7200, 7120, 7800, 7400, 7650, 7420, 7569],
|
||
|
|
backgroundColor: 'rgba(59, 130, 246, 0.4)',
|
||
|
|
borderColor: '#3b82f6',
|
||
|
|
borderWidth: 1.5,
|
||
|
|
borderRadius: 3
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: { display: false }
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
grid: { display: false },
|
||
|
|
ticks: { color: '#64748b', font: { size: 9 } }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
beginAtZero: false,
|
||
|
|
grid: { color: 'rgba(255, 255, 255, 0.03)' },
|
||
|
|
ticks: { color: '#64748b', font: { size: 9 }, stepSize: 5000 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|