监测模块
功能规划
切换区
显示当前所在项目，支持切换到其他项目。
显示当前处于监测模块，支持切换到检测模块
三维交互区
中间区域一个大的三维交互区域，显示BIM模型，支持通过勾选的方式选择测点信息。
设备信息
左侧有四栏显示设备信息。
1、监测设备类型饼状图，各类设备数量分布。
2、监测设备一栏：包含设备总数、设备类型、在线数量、其他状态
3、设备列表：支持根据类型过滤，显示：类型、编号、监测内容、工作状态
4、测点信息：卡片形式显示列表中选中的设备显示详细信息，编号、名称、类型、监测内容、工作温度、方向、部署位置。
详细数据
显示选中的设备近期的曲线图。
以时间为横轴、mm等物理量为纵轴，默认最近一周的曲线。
预警信息
分为两栏：
1、预警情况（24h）：统计总预警数、异常数据、故障设备、一级预警、二级预警、三级预警
2、预警处理（24h）：处理率、已处理数、未处理数
整体健康状况评估
一个标尺分为4个等级：基本完好、轻微异常、中等异常、重度异常
构建健康度、整体健康度分别通过小三角在标尺上标注。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能监测系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- 配置Tailwind自定义样式 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0ea5e9', // 主色调-科技蓝
secondary: '#3b82f6', // 次色调
accent: '#22d3ee', // 强调色
dark: '#0f172a', // 深色背景
darker: '#020617', // 更深色背景
light: '#e2e8f0', // 浅色文本
success: '#10b981', // 成功色
warning: '#f59e0b', // 警告色
danger: '#ef4444', // 危险色
info: '#3b82f6', // 信息色
offline: '#64748b', // 离线设备颜色
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
glow: {
'0%': { boxShadow: '0 0 5px rgba(14, 165, 233, 0.5)' },
'100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.8), 0 0 30px rgba(14, 165, 233, 0.6)' },
}
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 0 10px rgba(14, 165, 233, 0.7);
}
.bg-grid {
background-image:
linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.glass-effect {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.border-glow {
box-shadow: 0 0 5px rgba(14, 165, 233, 0.5),
0 0 10px rgba(14, 165, 233, 0.3);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.point-hover {
filter: brightness(1.5);
transform: scale(1.2);
transition: all 0.3s ease;
}
}
</style>
</head>
<body class="font-inter bg-darker text-light min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="glass-effect border-b border-primary/20 sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- 左侧Logo和项目切换 -->
<div class="flex items-center space-x-6">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center border border-primary/30">
<i class="fa fa-dashboard text-primary text-xl"></i>
</div>
<h1 class="text-xl font-bold text-shadow">智能监测系统</h1>
</div>
<div class="relative group">
<button class="flex items-center space-x-2 bg-dark/50 hover:bg-dark/80 px-3 py-2 rounded-lg transition-all duration-300 border border-primary/30">
<i class="fa fa-folder-open text-primary"></i>
<span>当前项目: 智慧城市A区</span>
<i class="fa fa-chevron-down text-xs"></i>
</button>
<div class="absolute left-0 mt-2 w-48 bg-dark rounded-lg shadow-lg border border-primary/20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
<div class="p-2">
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">智慧城市A区</button>
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">工业园区B区</button>
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">商业综合体C区</button>
</div>
</div>
</div>
</div>
<!-- 右侧模块切换和用户信息 -->
<div class="flex items-center space-x-4">
<div class="relative group">
<button class="flex items-center space-x-2 bg-primary/20 text-primary px-3 py-2 rounded-lg transition-all duration-300 border border-primary/50">
<i class="fa fa-bar-chart"></i>
<span>监测模块</span>
</button>
<div class="absolute right-0 mt-2 w-40 bg-dark rounded-lg shadow-lg border border-primary/20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
<div class="p-2">
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">监测模块</button>
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">检测模块</button>
<button class="w-full text-left px-3 py-2 hover:bg-primary/10 rounded transition-colors">分析模块</button>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center border border-primary/30">
<i class="fa fa-user text-primary"></i>
</div>
<span class="text-sm hidden md:inline">管理员</span>
<i class="fa fa-clock-o text-sm text-light/60"></i>
<span class="text-sm ml-1" id="current-time">2025-07-02 14:30:22</span>
</div>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- 左侧设备信息区域 - 占3列 -->
<aside class="lg:col-span-3 space-y-6">
<!-- 监测设备类型饼状图 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-pie-chart text-primary mr-2"></i>
设备类型分布
</h3>
<span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded-full">实时更新</span>
</div>
<div class="h-48">
<canvas id="deviceTypeChart"></canvas>
</div>
</div>
<!-- 监测设备概览 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<h3 class="font-semibold text-lg flex items-center mb-4">
<i class="fa fa-microchip text-primary mr-2"></i>
设备概览
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-light/70">设备总数</span>
<span class="font-bold text-2xl text-primary">186</span>
</div>
<div class="flex justify-between items-center">
<span class="text-light/70">在线设备</span>
<span class="font-bold text-2xl text-success">178</span>
</div>
<div class="flex justify-between items-center">
<span class="text-light/70">离线设备</span>
<span class="font-bold text-2xl text-offline">6</span>
</div>
<div class="flex justify-between items-center">
<span class="text-light/70">故障设备</span>
<span class="font-bold text-2xl text-danger">2</span>
</div>
<div class="mt-4">
<div class="w-full bg-dark/50 h-2 rounded-full overflow-hidden">
<div class="bg-success h-full rounded-full" style="width: 95.7%"></div>
</div>
<div class="flex justify-between text-xs text-light/60 mt-1">
<span>在线率</span>
<span>95.7%</span>
</div>
</div>
</div>
</div>
<!-- 设备列表 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-list text-primary mr-2"></i>
设备列表
</h3>
<div class="relative">
<select class="bg-dark/50 text-sm border border-primary/30 rounded px-2 py-1 focus:outline-none focus:border-primary">
<option>全部类型</option>
<option>传感器</option>
<option>控制器</option>
<option>执行器</option>
<option>监测仪</option>
</select>
</div>
</div>
<div class="space-y-3 max-h-64 overflow-y-auto scrollbar-hide">
<div class="p-2 bg-primary/10 rounded-lg border border-primary/30 cursor-pointer hover:bg-primary/20 transition-colors flex items-center" onclick="selectDevice('S-001', '传感器', '温度湿度', 'success', '25°C', '水平', '1号楼1层')">
<div class="w-8 h-8 rounded-full bg-success/20 flex items-center justify-center text-success mr-3">
<i class="fa fa-check"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">传感器</span>
<span class="text-xs bg-success/20 text-success px-1 py-0.5 rounded">在线</span>
</div>
<div class="text-xs text-light/60">
<span>编号: S-001</span>
<span class="mx-2">•</span>
<span>监测: 温度湿度</span>
</div>
</div>
</div>
<div class="p-2 bg-dark rounded-lg border border-primary/30 cursor-pointer hover:bg-primary/10 transition-colors flex items-center" onclick="selectDevice('S-002', '传感器', '振动', 'success', '正常', '垂直', '1号楼2层')">
<div class="w-8 h-8 rounded-full bg-success/20 flex items-center justify-center text-success mr-3">
<i class="fa fa-check"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">传感器</span>
<span class="text-xs bg-success/20 text-success px-1 py-0.5 rounded">在线</span>
</div>
<div class="text-xs text-light/60">
<span>编号: S-002</span>
<span class="mx-2">•</span>
<span>监测: 振动</span>
</div>
</div>
</div>
<div class="p-2 bg-dark rounded-lg border border-primary/30 cursor-pointer hover:bg-primary/10 transition-colors flex items-center" onclick="selectDevice('C-001', '控制器', '电力', 'warning', '220V', '水平', '2号楼地下室')">
<div class="w-8 h-8 rounded-full bg-warning/20 flex items-center justify-center text-warning mr-3">
<i class="fa fa-exclamation-triangle"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">控制器</span>
<span class="text-xs bg-warning/20 text-warning px-1 py-0.5 rounded">异常</span>
</div>
<div class="text-xs text-light/60">
<span>编号: C-001</span>
<span class="mx-2">•</span>
<span>监测: 电力</span>
</div>
</div>
</div>
<div class="p-2 bg-dark rounded-lg border border-primary/30 cursor-pointer hover:bg-primary/10 transition-colors flex items-center" onclick="selectDevice('M-001', '监测仪', '压力', 'success', '1.2MPa', '水平', '3号楼屋顶')">
<div class="w-8 h-8 rounded-full bg-success/20 flex items-center justify-center text-success mr-3">
<i class="fa fa-check"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">监测仪</span>
<span class="text-xs bg-success/20 text-success px-1 py-0.5 rounded">在线</span>
</div>
<div class="text-xs text-light/60">
<span>编号: M-001</span>
<span class="mx-2">•</span>
<span>监测: 压力</span>
</div>
</div>
</div>
<div class="p-2 bg-dark rounded-lg border border-primary/30 cursor-pointer hover:bg-primary/10 transition-colors flex items-center" onclick="selectDevice('E-001', '执行器', '阀门', 'danger', '关闭', '水平', '4号楼3层')">
<div class="w-8 h-8 rounded-full bg-danger/20 flex items-center justify-center text-danger mr-3">
<i class="fa fa-times"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="font-medium">执行器</span>
<span class="text-xs bg-danger/20 text-danger px-1 py-0.5 rounded">离线</span>
</div>
<div class="text-xs text-light/60">
<span>编号: E-001</span>
<span class="mx-2">•</span>
<span>监测: 阀门</span>
</div>
</div>
</div>
</div>
</div>
<!-- 测点信息卡片 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300" id="pointInfoCard">
<h3 class="font-semibold text-lg flex items-center mb-4">
<i class="fa fa-info-circle text-primary mr-2"></i>
测点信息
</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-light/70">编号</span>
<span class="font-medium" id="pointId">S-001</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">名称</span>
<span class="font-medium" id="pointName">温度湿度传感器</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">类型</span>
<span class="font-medium" id="pointType">传感器</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">监测内容</span>
<span class="font-medium" id="pointContent">温度湿度</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">工作温度</span>
<span class="font-medium" id="pointTemperature">25°C</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">方向</span>
<span class="font-medium" id="pointDirection">水平</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">部署位置</span>
<span class="font-medium" id="pointLocation">1号楼1层</span>
</div>
</div>
</div>
</aside>
<!-- 中间三维交互区域 - 占6列 -->
<div class="lg:col-span-6 space-y-6">
<!-- BIM模型区域 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300 relative">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-cube text-primary mr-2"></i>
BIM模型
</h3>
<div class="flex space-x-2">
<button class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1 rounded-lg text-sm flex items-center">
<i class="fa fa-search-plus mr-1"></i> 放大
</button>
<button class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1 rounded-lg text-sm flex items-center">
<i class="fa fa-search-minus mr-1"></i> 缩小
</button>
<button class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1 rounded-lg text-sm flex items-center">
<i class="fa fa-refresh mr-1"></i> 重置
</button>
</div>
</div>
<!-- BIM模型图片区域 -->
<div class="relative bg-darker rounded-lg overflow-hidden" style="height: 500px;">
<img src="https://picsum.photos/id/1076/1200/800" alt="BIM模型示例图" class="w-full h-full object-cover opacity-80">
<!-- 测点标记 -->
<div class="absolute top-[20%] left-[30%] w-4 h-4 bg-success rounded-full cursor-pointer animate-pulse" onclick="selectPoint('S-001', '传感器', '温度湿度', 'success', '25°C', '水平', '1号楼1层')"></div>
<div class="absolute top-[30%] left-[60%] w-4 h-4 bg-success rounded-full cursor-pointer animate-pulse" onclick="selectPoint('S-002', '传感器', '振动', 'success', '正常', '垂直', '1号楼2层')"></div>
<div class="absolute top-[60%] left-[45%] w-4 h-4 bg-warning rounded-full cursor-pointer animate-pulse" onclick="selectPoint('C-001', '控制器', '电力', 'warning', '220V', '水平', '2号楼地下室')"></div>
<div class="absolute top-[40%] left-[70%] w-4 h-4 bg-success rounded-full cursor-pointer animate-pulse" onclick="selectPoint('M-001', '监测仪', '压力', 'success', '1.2MPa', '水平', '3号楼屋顶')"></div>
<div class="absolute top-[70%] left-[25%] w-4 h-4 bg-danger rounded-full cursor-pointer animate-pulse" onclick="selectPoint('E-001', '执行器', '阀门', 'danger', '关闭', '水平', '4号楼3层')"></div>
<!-- 测点信息提示框 -->
<div id="pointTooltip" class="absolute hidden bg-dark border border-primary/30 rounded-lg p-2 shadow-lg z-10 text-sm w-40">
<div class="font-medium" id="tooltipId">S-001</div>
<div class="text-xs text-light/60" id="tooltipType">传感器</div>
<div class="text-xs text-light/60" id="tooltipContent">温度湿度</div>
</div>
</div>
<!-- 测点选择区域 -->
<div class="mt-4 p-3 bg-darker rounded-lg">
<h4 class="font-medium mb-2">测点选择</h4>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded border-light/30 bg-dark focus:ring-primary">
<span class="text-sm">温度</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded border-light/30 bg-dark focus:ring-primary">
<span class="text-sm">湿度</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded border-light/30 bg-dark focus:ring-primary">
<span class="text-sm">振动</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded border-light/30 bg-dark focus:ring-primary">
<span class="text-sm">电力</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded border-light/30 bg-dark focus:ring-primary">
<span class="text-sm">压力</span>
</label>
</div>
</div>
</div>
<!-- 详细数据图表 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-line-chart text-primary mr-2"></i>
详细数据
</h3>
<div class="flex space-x-2">
<div class="relative">
<select class="bg-dark/50 text-sm border border-primary/30 rounded px-2 py-1 focus:outline-none focus:border-primary">
<option>最近一周</option>
<option>最近一月</option>
<option>最近一年</option>
</select>
</div>
<button class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1 rounded-lg text-sm flex items-center">
<i class="fa fa-download mr-1"></i> 导出
</button>
</div>
</div>
<div class="h-64">
<canvas id="dataChart"></canvas>
</div>
</div>
</div>
<!-- 右侧预警和健康评估区域 - 占3列 -->
<aside class="lg:col-span-3 space-y-6">
<!-- 预警信息区域 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<h3 class="font-semibold text-lg flex items-center mb-4">
<i class="fa fa-bell text-primary mr-2"></i>
预警信息
</h3>
<!-- 预警情况(24h) -->
<div class="bg-darker rounded-lg p-3 mb-4">
<h4 class="font-medium mb-3">预警情况(24h)</h4>
<div class="grid grid-cols-2 gap-3">
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">总预警数</div>
<div class="text-xl font-bold text-primary">12</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">异常数据</div>
<div class="text-xl font-bold text-warning">5</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">故障设备</div>
<div class="text-xl font-bold text-danger">2</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">一级预警</div>
<div class="text-xl font-bold text-danger">0</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">二级预警</div>
<div class="text-xl font-bold text-warning">3</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">三级预警</div>
<div class="text-xl font-bold text-info">7</div>
</div>
</div>
</div>
<!-- 预警处理(24h) -->
<div class="bg-darker rounded-lg p-3">
<h4 class="font-medium mb-3">预警处理(24h)</h4>
<div class="grid grid-cols-2 gap-3">
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">处理率</div>
<div class="text-xl font-bold text-success">83%</div>
</div>
<div class="bg-dark/50 rounded-lg p-2">
<div class="text-xs text-light/60">已处理数</div>
<div class="text-xl font-bold text-success">10</div>
</div>
<div class="bg-dark/50 rounded-lg p-2 col-span-2">
<div class="text-xs text-light/60">未处理数</div>
<div class="text-xl font-bold text-danger">2</div>
</div>
</div>
</div>
</div>
<!-- 整体健康状况评估 -->
<div class="bg-dark rounded-xl p-4 border border-primary/20 glass-effect hover:border-glow transition-all duration-300">
<h3 class="font-semibold text-lg flex items-center mb-4">
<i class="fa fa-heartbeat text-primary mr-2"></i>
整体健康状况评估
</h3>
<!-- 健康度标尺 -->
<div class="bg-darker rounded-lg p-4">
<div class="flex justify-between text-xs mb-2">
<span>基本完好</span>
<span>轻微异常</span>
<span>中等异常</span>
<span>重度异常</span>
</div>
<!-- 标尺背景 -->
<div class="relative h-3 bg-gradient-to-r from-success via-warning to-danger rounded-full mb-6">
<!-- 构建健康度标记 -->
<div class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-full border-2 border-primary shadow-lg animate-pulse" style="left: 75%;">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-primary text-white text-xs px-1 py-0.5 rounded">
构建健康度
</div>
</div>
<!-- 整体健康度标记 -->
<div class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-full border-2 border-accent shadow-lg animate-pulse" style="left: 60%;">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-accent text-white text-xs px-1 py-0.5 rounded">
整体健康度
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-dark/50 rounded-lg p-3">
<div class="text-xs text-light/60 mb-1">构建健康度</div>
<div class="text-2xl font-bold text-primary">75%</div>
<div class="text-xs text-success">良好</div>
</div>
<div class="bg-dark/50 rounded-lg p-3">
<div class="text-xs text-light/60 mb-1">整体健康度</div>
<div class="text-2xl font-bold text-primary">60%</div>
<div class="text-xs text-warning">一般</div>
</div>
</div>
</div>
</div>
</aside>
</main>
<!-- 页脚 -->
<footer class="bg-dark border-t border-primary/20 py-4">
<div class="container mx-auto px-4 text-center text-light/60 text-sm">
<p>© 2025 智能监测系统 | 版本号: v2.0.1</p>
</div>
</footer>
<!-- JavaScript -->
<script>
// 更新当前时间
function updateTime() {
const now = new Date();
const timeElement = document.getElementById('current-time');
const formattedTime = now.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
timeElement.textContent = formattedTime;
}
setInterval(updateTime, 1000);
updateTime();
// 设备类型分布饼图
const deviceTypeCtx = document.getElementById('deviceTypeChart').getContext('2d');
const deviceTypeChart = new Chart(deviceTypeCtx, {
type: 'doughnut',
data: {
labels: ['传感器', '控制器', '执行器', '监测仪'],
datasets: [{
data: [86, 42, 32, 26],
backgroundColor: [
'rgba(14, 165, 233, 0.8)', // primary
'rgba(59, 130, 246, 0.8)', // secondary
'rgba(34, 211, 238, 0.8)', // accent
'rgba(16, 185, 129, 0.8)' // success
],
borderColor: [
'rgba(14, 165, 233, 1)',
'rgba(59, 130, 246, 1)',
'rgba(34, 211, 238, 1)',
'rgba(16, 185, 129, 1)'
],
borderWidth: 1,
hoverOffset: 10
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#e2e8f0',
font: {
family: 'Inter',
size: 11
},
padding: 15
}
},
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#e2e8f0',
bodyColor: '#e2e8f0',
borderColor: 'rgba(14, 165, 233, 0.5)',
borderWidth: 1,
padding: 10,
displayColors: true,
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ${value} (${percentage}%)`;
}
}
}
},
animation: {
animateScale: true,
animateRotate: true
},
cutout: '70%'
}
});
// 详细数据图表
const dataCtx = document.getElementById('dataChart').getContext('2d');
const dataChart = new Chart(dataCtx, {
type: 'line',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [{
label: '温度 (°C)',
data: [24, 25, 26, 24, 23, 25, 26],
borderColor: 'rgba(14, 165, 233, 1)',
backgroundColor: 'rgba(14, 165, 233, 0.1)',
tension: 0.3,
fill: true
}, {
label: '湿度 (%)',
data: [60, 65, 63, 58, 62, 67, 64],
borderColor: 'rgba(34, 211, 238, 1)',
backgroundColor: 'rgba(34, 211, 238, 0.1)',
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
color: 'rgba(226, 232, 240, 0.1)'
},
ticks: {
color: '#e2e8f0'
}
},
y: {
grid: {
color: 'rgba(226, 232, 240, 0.1)'
},
ticks: {
color: '#e2e8f0'
}
}
},
plugins: {
legend: {
labels: {
color: '#e2e8f0'
}
},
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#e2e8f0',
bodyColor: '#e2e8f0',
borderColor: 'rgba(14, 165, 233, 0.5)',
borderWidth: 1
}
}
}
});
// 选择设备函数
function selectDevice(id, type, content, status, temperature, direction, location) {
document.getElementById('pointId').textContent = id;
document.getElementById('pointName').textContent = `${type}${id}`;
document.getElementById('pointType').textContent = type;
document.getElementById('pointContent').textContent = content;
document.getElementById('pointTemperature').textContent = temperature;
document.getElementById('pointDirection').textContent = direction;
document.getElementById('pointLocation').textContent = location;
// 更新数据图表
updateChart(type);
}
// 选择测点函数
function selectPoint(id, type, content, status, temperature, direction, location) {
selectDevice(id, type, content, status, temperature, direction, location);
// 高亮选中的测点
const points = document.querySelectorAll('.animate-pulse');
points.forEach(point => {
point.classList.remove('point-hover');
});
// 找到对应的测点并高亮
const selectedPoint = document.querySelector(`[onclick="selectPoint('${id}', '${type}', '${content}', '${status}', '${temperature}', '${direction}', '${location}')"]`);
if (selectedPoint) {
selectedPoint.classList.add('point-hover');
}
}
// 显示测点提示框
function showTooltip(event, id, type, content) {
const tooltip = document.getElementById('pointTooltip');
tooltip.style.left = `${event.clientX + 10}px`;
tooltip.style.top = `${event.clientY + 10}px`;
document.getElementById('tooltipId').textContent = id;
document.getElementById('tooltipType').textContent = type;
document.getElementById('tooltipContent').textContent = content;
tooltip.classList.remove('hidden');
}
// 隐藏测点提示框
function hideTooltip() {
document.getElementById('pointTooltip').classList.add('hidden');
}
// 初始化所有测点的提示框事件
document.querySelectorAll('.animate-pulse').forEach(point => {
const onclickAttr = point.getAttribute('onclick');
if (onclickAttr) {
const matches = onclickAttr.match(/selectPoint\('([^']+)',\s*'([^']+)',\s*'([^']+)'/);
if (matches && matches.length >= 4) {
const id = matches[1];
const type = matches[2];
const content = matches[3];
point.addEventListener('mouseenter', (e) => showTooltip(e, id, type, content));
point.addEventListener('mouseleave', hideTooltip);
}
}
});
// 更新数据图表
function updateChart(deviceType) {
let data = {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
};
// 根据设备类型显示不同的数据
if (deviceType === '传感器') {
data.datasets = [{
label: '温度 (°C)',
data: [24, 25, 26, 24, 23, 25, 26],
borderColor: 'rgba(14, 165, 233, 1)',
backgroundColor: 'rgba(14, 165, 233, 0.1)',
tension: 0.3,
fill: true
}, {
label: '湿度 (%)',
data: [60, 65, 63, 58, 62, 67, 64],
borderColor: 'rgba(34, 211, 238, 1)',
backgroundColor: 'rgba(34, 211, 238, 0.1)',
tension: 0.3,
fill: true
}];
} else if (deviceType === '控制器') {
data.datasets = [{
label: '电压 (V)',
data: [220, 219, 221, 220, 218, 222, 220],
borderColor: 'rgba(245, 158, 11, 1)',
backgroundColor: 'rgba(245, 158, 11, 0.1)',
tension: 0.3,
fill: true
}, {
label: '电流 (A)',
data: [1.2, 1.3, 1.2, 1.1, 1.2, 1.4, 1.3],
borderColor: 'rgba(239, 68, 68, 1)',
backgroundColor: 'rgba(239, 68, 68, 0.1)',
tension: 0.3,
fill: true
}];
} else if (deviceType === '监测仪') {
data.datasets = [{
label: '压力 (MPa)',
data: [1.2, 1.3, 1.25, 1.2, 1.18, 1.22, 1.23],
borderColor: 'rgba(16, 185, 129, 1)',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.3,
fill: true
}];
} else if (deviceType === '执行器') {
data.datasets = [{
label: '阀门开度 (%)',
data: [80, 85, 90, 75, 80, 85, 90],
borderColor: 'rgba(59, 130, 246, 1)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.3,
fill: true
}];
}
dataChart.data = data;
dataChart.update();
}
</script>
</body>
</html>检测模块
工程概况
功能规划
工程简介
三维模型
版权信息
示例代码
监测设备
功能规划
传感器分类筛选
支持按照环境、作用、结构响应等维度对传感器分类，关键词搜索等方式筛选传感器。
传感器列表
显示筛选出的传感器，以卡片的方式展示全量传感器。
包含的信息有：类型、名称、监测参数、部署位置、工作状态信息。
结构信息
功能规划
构件导航栏
处于左侧，支持分类查看各类构件，如锁、面板、梁等信息
三维交互区
中间上部，BIM模型。展示所有模型和测点。
构件列表
中间下部，列出所有筛选出的构件，包含信息有：
序号、类型、编号、名称、材料信息、尺寸信息、传感器、补充信息
构件信息查看
构件列表下方，由两个tab组成，分别是构件基本信息、设计标准。点击可以切换tab
构件基本信息用于展示更加详细信息，包含图片、材料力学信息等。
设计标准用于展示设计的要求，包括图片、力学要求等。
数据分析
功能规划
传感器导航栏
左侧导航栏，按类别显示各类传感器列表。
1、支持点击选中
2、支持搜索筛选
时间范围过滤区
点击选择过滤数据时间段。点击查询。
数据展示区
展示被选中的传感器，对应时间段的数据曲线。
综合预警
功能规划
筛选过滤
通过时间端、预警类型、预警级别、预警状态等字段过滤
预警列表
显示预警列表，包含信息：
序号、预警级别、开始结束时间段、传感器类型、传感器通道、所在构建、预警内容、监测值、预警值、处理意见、处理状态、处理人、处理时间
评估报告
功能规划
历史报告
查看历史的报告内容
自动生成报告设置
支持设置报告模板，在报告模板的基础上补充各类数据，形成报告，并下载。
支持人工下载编辑后再上传最终版报告归档。