1. 调整菜单与路由:重命名客户信息/客户账号为客户档案管理/客户小程序授权管理,移除客户建筑/房间路由,新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`,前端同步API与类型定义 3. 重构客户档案与小程序授权页面,仅保留数据库支持字段,移除无支撑功能 4. 新增空间拓扑页面,合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置,清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
898 lines
46 KiB
HTML
898 lines
46 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>空间拓扑与用电架构 - XT-POWER OS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
@layer base {
|
|
html, body { margin: 0; padding: 0; }
|
|
body { overscroll-behavior: none; }
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
.canvas-grid-bg {
|
|
background-color: #f8fafc;
|
|
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"border-rule": "#dbe4ee",
|
|
"surface-container-lowest": "#ffffff",
|
|
"outline-variant": "#c2c6d8",
|
|
"surface-dim": "#ccdbf1",
|
|
"on-primary-fixed-variant": "#0040a1",
|
|
"on-tertiary-fixed-variant": "#005049",
|
|
"text-muted": "#5b6b7e",
|
|
"accent-subtle": "rgba(29,111,255,0.08)",
|
|
"outline": "#727787",
|
|
"secondary-fixed-dim": "#d2bbff",
|
|
"surface-container-low": "#eef4ff",
|
|
"primary-fixed-dim": "#b2c5ff",
|
|
"on-surface": "#0d1c2c",
|
|
"secondary-fixed": "#eaddff",
|
|
"on-tertiary-fixed": "#00201d",
|
|
"on-tertiary": "#ffffff",
|
|
"error-container": "#ffdad6",
|
|
"tertiary": "#00685f",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-fixed": "#25005a",
|
|
"on-primary-fixed": "#001847",
|
|
"tertiary-fixed-dim": "#6bd8cb",
|
|
"surface-container": "#e5efff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#d5e4fa",
|
|
"on-surface-variant": "#424655",
|
|
"inverse-primary": "#b2c5ff",
|
|
"inverse-surface": "#1e293b",
|
|
"tertiary-fixed": "#89f5e7",
|
|
"bg-page": "#f1f5f9",
|
|
"on-tertiary-container": "#f4fffc",
|
|
"surface-tint": "#0056d2",
|
|
"surface-container-high": "#dbe9ff",
|
|
"surface-variant": "#d5e4fa",
|
|
"primary-container": "#136bfb",
|
|
"on-secondary-container": "#fffbff",
|
|
"on-error": "#ffffff",
|
|
"primary-fixed": "#dae2ff",
|
|
"primary": "#0054cd",
|
|
"status-warn": "#e0852b",
|
|
"tertiary-container": "#008378",
|
|
"secondary": "#6366f1",
|
|
"on-primary": "#ffffff",
|
|
"on-background": "#0d1c2c",
|
|
"surface-bright": "#f8f9ff",
|
|
"inverse-on-surface": "#e9f1ff",
|
|
"on-secondary-fixed-variant": "#5a00c6",
|
|
"background": "#f1f5f9",
|
|
"secondary-container": "#8a4cfc",
|
|
"error": "#ba1a1a",
|
|
"on-primary-container": "#fefcff",
|
|
"surface": "#ffffff",
|
|
"status-error": "#dc2626"
|
|
},
|
|
fontFamily: {
|
|
"body-md": ["hankenGrotesk", "sans-serif"],
|
|
"data-mono": ["JetBrains Mono", "monospace"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-bg-page font-body-md text-[14px] text-on-surface antialiased min-h-screen flex">
|
|
<!-- ==================== 1. 左侧固定全高全局导航栏 ==================== -->
|
|
<aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface text-inverse-on-surface z-50 flex flex-col justify-between shadow-xl">
|
|
<div class="flex flex-col flex-1 min-h-0">
|
|
<!-- 平台 Brand Logo -->
|
|
<div class="h-16 px-4 flex items-center gap-3 border-b border-slate-700/60 bg-slate-900/40">
|
|
<div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white shadow-md shadow-blue-500/20">
|
|
<span class="material-symbols-outlined text-[22px]">bolt</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-bold text-[17px] text-white tracking-wide">XT-POWER</span>
|
|
<span class="text-[10px] font-semibold bg-primary text-white px-1.5 py-0.5 rounded leading-none">OS</span>
|
|
</div>
|
|
<span class="text-[11px] text-slate-400 tracking-tight">鑫潼智电 · 智能配用电中枢</span>
|
|
</div>
|
|
</div>
|
|
<!-- 导航功能菜单 -->
|
|
<div class="flex-1 overflow-y-auto px-3 py-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
|
<span class="font-medium text-[13.5px]">运营工作台</span>
|
|
</a>
|
|
<!-- 激活的客户管理父节点 -->
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between px-3 py-2 rounded-lg bg-slate-800/80 text-white font-semibold">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[20px] text-blue-400">apartment</span>
|
|
<span class="text-[13.5px]">客户管理</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[18px] text-slate-400">expand_more</span>
|
|
</div>
|
|
<!-- 二级菜单 -->
|
|
<div class="pl-4 pr-1 py-1 space-y-1 border-l-2 border-slate-700 ml-4">
|
|
<a class="flex items-center gap-2 px-3 py-1.5 rounded text-[13px] text-slate-400 hover:text-white hover:bg-slate-800 transition-colors" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
|
客户档案列表
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-[13px] font-semibold bg-primary text-white shadow-sm" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-cyan-300"></span>
|
|
空间拓扑与用电架构
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 rounded text-[13px] text-slate-400 hover:text-white hover:bg-slate-800 transition-colors" href="#">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
|
|
微信小程序授权
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">assignment</span>
|
|
<span class="font-medium text-[13.5px]">项目管理</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">send_time_extension</span>
|
|
<span class="font-medium text-[13.5px]">运营派单</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">sensors</span>
|
|
<span class="font-medium text-[13.5px]">设备监控</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">query_stats</span>
|
|
<span class="font-medium text-[13.5px]">统计报表</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-slate-800 hover:text-white transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
<span class="font-medium text-[13.5px]">系统管理</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 侧栏底端通信链路卡 -->
|
|
<div class="p-3 m-3 rounded-lg bg-slate-800/80 border border-slate-700">
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
|
|
</span>
|
|
<span class="text-[11px] font-medium text-slate-200">边缘网关链路</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11px] text-emerald-400 font-semibold">在线 24/24</span>
|
|
</div>
|
|
<div class="flex items-center justify-between font-data-mono text-[11px] text-slate-400">
|
|
<span>时延: 14ms</span>
|
|
<span>丢包: 0.00%</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- ==================== 右侧主视窗区域 (pl-64) ==================== -->
|
|
<div class="pl-64 flex-1 flex flex-col min-h-screen bg-bg-page">
|
|
<!-- 顶部固定系统 Header -->
|
|
<header class="fixed top-0 left-64 right-0 h-16 bg-white/95 backdrop-blur-md z-40 border-b border-border-rule px-6 flex items-center justify-between">
|
|
<div class="flex items-center gap-5 flex-1 max-w-2xl">
|
|
<!-- 实时同步状态 Badge -->
|
|
<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 shrink-0">
|
|
<span class="material-symbols-outlined text-emerald-600 text-[16px]">sync</span>
|
|
<span class="text-[12px] font-semibold">ICC 实时数据正常同步</span>
|
|
<span class="font-data-mono text-[11px] text-emerald-600/80 font-medium ml-1">120FPS</span>
|
|
</div>
|
|
<!-- 全局搜索 -->
|
|
<div class="relative flex-1">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
|
<input class="w-full pl-9 pr-4 py-1.5 rounded-lg bg-slate-50 border border-slate-200 text-[13px] text-on-surface placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="按变电所编码、变压器回路或客户名称全局检索 (Ctrl + K)..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧工程师账户操作 -->
|
|
<div class="flex items-center gap-3">
|
|
<button class="relative p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="消息通知">
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-status-error"></span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="工程工具">
|
|
<span class="material-symbols-outlined text-[20px]">apps</span>
|
|
</button>
|
|
<div class="h-4 w-[1px] bg-slate-200 mx-1"></div>
|
|
<div class="flex items-center gap-2.5 pl-1 cursor-pointer">
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center shadow-sm text-white font-semibold text-[13px]">
|
|
李
|
|
</div>
|
|
<div class="flex flex-col text-left">
|
|
<span class="font-semibold text-[13px] text-slate-800 leading-tight">李工</span>
|
|
<span class="font-data-mono text-[11px] text-slate-400 leading-tight">主控工程师 · 调度中心</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-slate-400 text-[18px]">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- 主工作区内容 (pt-16) -->
|
|
<main class="pt-16 p-5 flex-1 flex flex-col gap-4">
|
|
<!-- ================= 顶栏:面包屑导航 + 客户信息与项目指标主栏 ================= -->
|
|
<div class="flex flex-col gap-2.5">
|
|
<!-- 路径导航与总线协议状态 -->
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-1.5 font-data-mono text-[12px] text-slate-500">
|
|
<span>运营管控体系</span>
|
|
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
|
<span>客户管理</span>
|
|
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
|
<span class="text-primary font-semibold">空间拓扑与用电架构</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 border border-slate-200 text-slate-600 text-[11.5px] font-data-mono">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
|
|
</span>
|
|
<span>ICC 网关总线协议 (L3 API): 同步畅通 (102 pkt/s)</span>
|
|
</div>
|
|
</div>
|
|
<!-- 客户综合管理卡片 (水平一览化排布) -->
|
|
<div class="bg-white rounded-xl border border-border-rule shadow-sm px-5 py-3.5 flex flex-wrap items-center justify-between gap-4">
|
|
<!-- 客户切换与重点标签 -->
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-3 bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg hover:border-primary/40 cursor-pointer transition-colors group">
|
|
<div class="w-9 h-9 rounded bg-blue-50 text-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[22px]">school</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-[15px] text-slate-900 group-hover:text-primary transition-colors">武汉软件工程职业学院</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">unfold_more</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11.5px] text-slate-500">PRJ-HB-WH-00192 · 高校科研园区</span>
|
|
</div>
|
|
</div>
|
|
<!-- 业务标签 -->
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="px-2 py-0.5 rounded bg-blue-50 text-blue-700 text-[11px] font-semibold border border-blue-200/60">A级重要负荷</span>
|
|
<span class="px-2 py-0.5 rounded bg-teal-50 text-teal-700 text-[11px] font-semibold border border-teal-200/60">双回路主供</span>
|
|
<span class="px-2 py-0.5 rounded bg-indigo-50 text-indigo-700 text-[11px] font-semibold border border-indigo-200/60">ICC物联映射中</span>
|
|
</div>
|
|
</div>
|
|
<!-- 关键工程指标 (5项指标) -->
|
|
<div class="flex items-center gap-6 bg-slate-50 border border-slate-100 rounded-lg px-4 py-2">
|
|
<div class="flex flex-col">
|
|
<span class="text-[11px] text-slate-500 font-medium">已接入建筑</span>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="font-bold text-[18px] text-slate-800 leading-tight">5</span>
|
|
<span class="text-[11px] text-slate-500">栋</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[11px] text-slate-500 font-medium">变电所/配电室</span>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="font-bold text-[18px] text-slate-800 leading-tight">4</span>
|
|
<span class="text-[11px] text-slate-500">处</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[11px] text-slate-500 font-medium">监测用电回路</span>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="font-bold text-[18px] text-primary leading-tight font-data-mono">36</span>
|
|
<span class="text-[11px] text-slate-500">路</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[11px] text-slate-500 font-medium">ICC边缘网关</span>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="font-bold text-[18px] text-emerald-600 leading-tight font-data-mono">4</span>
|
|
<span class="text-[11px] text-emerald-600 font-medium">台在线</span>
|
|
</div>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[11px] text-slate-500 font-medium">空间建模覆盖率</span>
|
|
<div class="flex items-center gap-1">
|
|
<span class="font-bold text-[18px] text-slate-800 leading-tight font-data-mono">100%</span>
|
|
<span class="material-symbols-outlined text-emerald-500 text-[18px]">verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧操作按钮组 -->
|
|
<div class="flex items-center gap-2">
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
|
|
<span class="material-symbols-outlined text-[17px] text-primary">cloud_sync</span>
|
|
<span>从ICC同步拓扑</span>
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
|
|
<span class="material-symbols-outlined text-[17px]">file_upload</span>
|
|
<span>CAD/BIM导入</span>
|
|
</button>
|
|
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-[12.5px] font-semibold transition-colors border border-slate-200">
|
|
<span class="material-symbols-outlined text-[17px]">download</span>
|
|
<span>导出高清拓扑图</span>
|
|
</button>
|
|
<button class="flex items-center gap-1 px-3.5 py-1.5 rounded-lg bg-primary hover:bg-blue-700 text-white text-[12.5px] font-semibold shadow-sm transition-all hover:shadow">
|
|
<span class="material-symbols-outlined text-[17px]">add</span>
|
|
<span>新增空间节点</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ================= 核心工作区:三栏严谨布局 ================= -->
|
|
<!-- 左:280px 空间树 | 中:自适应宽度配电单线拓扑流 | 右:320px 属性检查与映射 -->
|
|
<div class="grid grid-cols-12 gap-4 flex-1 items-start">
|
|
<!-- ======================= LEFT COLUMN: 空间与建筑导航树 (280px左右 -> 3 cols) ======================= -->
|
|
<div class="col-span-12 lg:col-span-3 xl:col-span-3 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
|
|
<!-- 树顶控制栏 -->
|
|
<div class="p-3.5 border-b border-border-rule bg-slate-50/70 flex flex-col gap-2.5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-[20px]">account_tree</span>
|
|
<span class="font-bold text-[14px] text-slate-800">空间用电多维架构树</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-1 rounded hover:bg-slate-200 text-slate-500 hover:text-slate-800 transition-colors" title="折叠/展开全部">
|
|
<span class="material-symbols-outlined text-[17px]">unfold_less</span>
|
|
</button>
|
|
<button class="p-1 rounded hover:bg-slate-200 text-slate-500 hover:text-slate-800 transition-colors" title="快速定位">
|
|
<span class="material-symbols-outlined text-[17px]">my_location</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 搜索框 -->
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[16px]">search</span>
|
|
<input class="w-full pl-8 pr-3 py-1.5 rounded-lg bg-white border border-slate-200 text-[12.5px] placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" placeholder="快速过滤建筑/配电柜/回路..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- 树形层级滚动容器 -->
|
|
<div class="flex-1 overflow-y-auto p-2.5 space-y-1 text-[13px]">
|
|
<!-- 根节点:武汉软件工程职业学院 (总校区) -->
|
|
<div class="flex items-center justify-between p-2 rounded-lg bg-blue-50/70 border border-blue-100 text-slate-900 font-semibold cursor-pointer">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-primary text-[18px]">hub</span>
|
|
<span>武汉软件工程职业学院</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] text-blue-600 bg-white px-1.5 py-0.5 rounded border border-blue-200">根节点</span>
|
|
</div>
|
|
<!-- Level 1 缩进列表 -->
|
|
<div class="pl-2.5 space-y-1 mt-1 border-l-2 border-slate-100 ml-3">
|
|
<!-- 1. 变电所节点 -->
|
|
<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-amber-600 text-[16px]">electrical_services</span>
|
|
<span class="text-[12.5px]">10kV 开闭所 / 变配电总房</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11px] text-slate-400">主变 2台</span>
|
|
</div>
|
|
<!-- 2. 建筑节点:学生宿舍 12 号楼 (当前选中高亮展开) -->
|
|
<div class="rounded-lg border border-blue-200/80 bg-blue-50/30 overflow-hidden">
|
|
<div class="flex items-center justify-between p-1.5 bg-blue-100/50 text-primary font-bold cursor-pointer">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-primary text-[16px]">arrow_drop_down</span>
|
|
<span class="material-symbols-outlined text-primary text-[16px]">domain</span>
|
|
<span class="text-[12.5px]">学生宿舍 12 号楼</span>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="font-data-mono text-[10px] bg-primary text-white px-1.5 py-0.2 rounded font-medium">36回路</span>
|
|
</div>
|
|
</div>
|
|
<!-- 12号楼子节点 -->
|
|
<div class="pl-3 pr-1 py-1 space-y-0.5 text-[12px]">
|
|
<!-- 1F -->
|
|
<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[15px]">inventory_2</span>
|
|
<span>1F 楼层配电总箱 (DB-1E)</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10.5px] text-slate-400">6 回路</span>
|
|
</div>
|
|
<!-- 2F (展开选中) -->
|
|
<div class="space-y-0.5">
|
|
<div class="flex items-center justify-between p-1 rounded bg-blue-100/70 text-slate-900 font-semibold cursor-pointer">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-600 text-[14px]">arrow_drop_down</span>
|
|
<span class="material-symbols-outlined text-indigo-600 text-[15px]">view_in_ar</span>
|
|
<span>2F 东分配电箱 (DB-2E)</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] text-emerald-700 bg-emerald-100/80 px-1 py-0.2 rounded font-medium">已绑定</span>
|
|
</div>
|
|
<!-- 2F 下属各回路 -->
|
|
<div class="pl-4 space-y-0.5 border-l border-blue-200 ml-2">
|
|
<!-- 聚焦回路 -->
|
|
<div class="flex items-center justify-between p-1.5 rounded bg-primary text-white font-semibold shadow-sm cursor-pointer">
|
|
<div class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-amber-300 text-[14px]">bolt</span>
|
|
<span class="text-[11.5px] truncate">201-208 宿舍照明与空调</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] bg-white/20 px-1 rounded">焦点</span>
|
|
</div>
|
|
<!-- 其它回路 -->
|
|
<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
|
|
<div class="flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-slate-400 text-[14px]">bolt</span>
|
|
<span class="text-[11.5px] truncate">2F 走廊应急指示与消防</span>
|
|
</div>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 3F - 6F -->
|
|
<div class="flex items-center justify-between p-1 rounded hover:bg-slate-100 text-slate-600 cursor-pointer">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-slate-400 text-[15px]">folder</span>
|
|
<span>3F-6F 配电箱与各回路</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10.5px] text-slate-400">24 回路</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 3. 数控智造实训中心 B座 -->
|
|
<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-amber-600 text-[16px]">precision_manufacturing</span>
|
|
<span class="text-[12.5px]">数控智造实训中心 B座</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] text-amber-700 bg-amber-50 border border-amber-200 px-1.5 py-0.2 rounded font-medium">动力重载 ⚠️</span>
|
|
</div>
|
|
<!-- 4. 笃学图书馆 -->
|
|
<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-blue-500 text-[16px]">local_library</span>
|
|
<span class="text-[12.5px]">笃学图书馆 (主机房)</span>
|
|
</div>
|
|
<span class="text-[10.5px] text-slate-400">恒温恒湿</span>
|
|
</div>
|
|
<!-- 5. 师生第一餐饮中心 -->
|
|
<div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-slate-100 text-slate-700 cursor-pointer group">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-slate-400 text-[16px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-emerald-600 text-[16px]">restaurant</span>
|
|
<span class="text-[12.5px]">师生第一餐饮中心</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.2 rounded">厨房排烟</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 树底状态小卡片 -->
|
|
<div class="p-3 border-t border-border-rule bg-slate-50 flex items-center justify-between">
|
|
<span class="text-[11.5px] text-slate-500">拓扑完整度校验:</span>
|
|
<div class="flex items-center gap-1 text-emerald-600 font-semibold text-[11.5px] font-data-mono">
|
|
<span class="material-symbols-outlined text-[15px]">check_circle</span>
|
|
<span>100% 完整无环路</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ======================= CENTER COLUMN: 配电拓扑全景流图 (6 cols) ======================= -->
|
|
<div class="col-span-12 lg:col-span-6 xl:col-span-6 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
|
|
<!-- 画布顶部工具栏 -->
|
|
<div class="px-4 py-2.5 border-b border-border-rule bg-slate-50/90 flex items-center justify-between">
|
|
<!-- 视图切换与当前焦点 -->
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center bg-slate-200/80 p-0.5 rounded-lg">
|
|
<button class="px-3 py-1 rounded-md bg-white text-primary text-[12px] font-semibold shadow-xs">
|
|
电气单线拓扑流
|
|
</button>
|
|
<button class="px-3 py-1 rounded-md text-slate-600 hover:text-slate-900 text-[12px] font-medium transition-colors">
|
|
空间三维映射
|
|
</button>
|
|
</div>
|
|
<div class="h-4 w-[1px] bg-slate-300"></div>
|
|
<div class="flex items-center gap-1 text-[12px]">
|
|
<span class="text-slate-500">焦点:</span>
|
|
<span class="font-semibold text-slate-800 bg-blue-50 text-primary px-2 py-0.5 rounded border border-blue-100">学生宿舍 12# · 2F配电系统</span>
|
|
</div>
|
|
</div>
|
|
<!-- 画布控制器 -->
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="缩小画布">
|
|
<span class="material-symbols-outlined text-[18px]">zoom_out</span>
|
|
</button>
|
|
<span class="font-data-mono text-[11.5px] font-semibold text-slate-700 px-1">100%</span>
|
|
<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="放大画布">
|
|
<span class="material-symbols-outlined text-[18px]">zoom_in</span>
|
|
</button>
|
|
<button class="p-1 rounded hover:bg-slate-200 text-slate-600" title="适应窗口">
|
|
<span class="material-symbols-outlined text-[18px]">fit_screen</span>
|
|
</button>
|
|
<div class="h-4 w-[1px] bg-slate-300 mx-1"></div>
|
|
<!-- 告警高亮标签 -->
|
|
<div class="flex items-center gap-1 px-2.5 py-1 rounded-md bg-amber-50 border border-amber-200 text-amber-700 text-[11px] font-semibold cursor-pointer hover:bg-amber-100 transition-colors">
|
|
<span class="material-symbols-outlined text-[15px] text-amber-600">warning</span>
|
|
<span>高亮预警 (1)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 画布内容区 (工业微网格工程底图 + 自上而下层次严谨拓扑) -->
|
|
<div class="flex-1 canvas-grid-bg relative overflow-y-auto p-4 flex flex-col items-center select-none">
|
|
<!-- SVG 层:贯穿上下层次的母线与分支流线 -->
|
|
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<!-- 箭头标记 -->
|
|
<marker id="bus-arrow" markerheight="6" markerwidth="6" orient="auto" refx="3" refy="3">
|
|
<path d="M0,0 L6,3 L0,6 Z" fill="#0054cd"></path>
|
|
</marker>
|
|
<marker id="bus-arrow-warn" markerheight="6" markerwidth="6" orient="auto" refx="3" refy="3">
|
|
<path d="M0,0 L6,3 L0,6 Z" fill="#e0852b"></path>
|
|
</marker>
|
|
</defs>
|
|
<!-- Level 1 -> Level 2 进线引下母线 -->
|
|
<line stroke="#0054cd" stroke-dasharray="4 2" stroke-width="2.5" x1="50%" x2="50%" y1="58" y2="88"></line>
|
|
<!-- Level 2 -> Level 3 变压器引出到 ICC 边缘网关 -->
|
|
<line stroke="#0054cd" stroke-width="2.5" x1="50%" x2="50%" y1="150" y2="182"></line>
|
|
<!-- Level 3 -> 低压总分配横向母线 (Busbar) -->
|
|
<line stroke="#0054cd" stroke-width="2.5" x1="50%" x2="50%" y1="262" y2="295"></line>
|
|
<line stroke="#0054cd" stroke-width="3" x1="18%" x2="82%" y1="295" y2="295"></line>
|
|
<!-- 低压母线分别引下到末端 3 组出线卡片 -->
|
|
<!-- 出线 1: 学生宿舍 (当前聚焦) -->
|
|
<line marker-end="url(#bus-arrow)" stroke="#0054cd" stroke-width="2.5" x1="18%" x2="18%" y1="295" y2="330"></line>
|
|
<!-- 出线 2: 实训中心 (动力重载预警) -->
|
|
<line marker-end="url(#bus-arrow-warn)" stroke="#e0852b" stroke-dasharray="3 2" stroke-width="2.5" x1="50%" x2="50%" y1="295" y2="330"></line>
|
|
<!-- 出线 3: 餐饮中心 -->
|
|
<line marker-end="url(#bus-arrow)" stroke="#0054cd" stroke-width="2.5" x1="82%" x2="82%" y1="295" y2="330"></line>
|
|
</svg>
|
|
<!-- ================= LEVEL 1: 10kV 高压进线段 ================= -->
|
|
<div class="relative z-10 w-full max-w-md bg-white border border-slate-200 rounded-lg shadow-sm px-4 py-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm"></span>
|
|
<span class="font-bold text-[12.5px] text-slate-800">10kV 高压进线柜 (开闭所 AH1/AH2)</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 font-data-mono text-[11px] text-slate-500">
|
|
<span class="bg-slate-100 px-1.5 py-0.5 rounded">10.45 kV</span>
|
|
<span class="bg-slate-100 px-1.5 py-0.5 rounded">50.02 Hz</span>
|
|
<span class="text-emerald-600 font-semibold">正常</span>
|
|
</div>
|
|
</div>
|
|
<!-- 垂直间隔 -->
|
|
<div class="h-7"></div>
|
|
<!-- ================= LEVEL 2: 变压段 ================= -->
|
|
<div class="relative z-10 w-full max-w-lg bg-white border-2 border-primary/40 rounded-xl shadow-md p-3 flex items-center justify-between bg-gradient-to-r from-blue-50/50 via-white to-blue-50/30">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-lg bg-primary text-white flex items-center justify-center shadow-sm">
|
|
<span class="material-symbols-outlined text-[24px]">transform</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-[13.5px] text-slate-900">#1 变压器</span>
|
|
<span class="text-[11px] font-data-mono bg-blue-100 text-primary px-1.5 py-0.2 rounded font-medium">SCB13-1250kVA</span>
|
|
</div>
|
|
<span class="text-[11.5px] text-slate-500 font-data-mono">10kV 降 0.4kV 低压主母排供电</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 font-data-mono">
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-[10px] text-slate-400">负荷率</span>
|
|
<span class="text-[14px] font-bold text-primary">54.3%</span>
|
|
</div>
|
|
<div class="h-6 w-[1px] bg-slate-200"></div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-[10px] text-slate-400">变压器温升</span>
|
|
<span class="text-[13px] font-semibold text-slate-700">42.0 ℃</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 垂直间隔 -->
|
|
<div class="h-8"></div>
|
|
<!-- ================= LEVEL 3: 大华 ICC 边缘网关层 ================= -->
|
|
<div class="relative z-10 w-full max-w-xl bg-white border border-indigo-200 rounded-xl shadow-sm p-3 flex items-center justify-between bg-gradient-to-r from-indigo-50/40 via-white to-indigo-50/20">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg bg-indigo-600 text-white flex items-center justify-center shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">router</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-[13px] text-slate-900">大华 ICC 物联网边缘网关 #4</span>
|
|
<span class="font-data-mono text-[10px] bg-indigo-100 text-indigo-700 px-1.5 py-0.2 rounded font-medium">ICC-GW-V3.2</span>
|
|
</div>
|
|
<span class="font-data-mono text-[11px] text-slate-500">IP: 192.168.10.88 · RS485 总线 · 挂载36只智能微断</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 font-data-mono text-[11px]">
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-[10px] text-slate-400">通信在线率</span>
|
|
<span class="font-bold text-emerald-600">99.98%</span>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-[10px] text-slate-400">轮询周期</span>
|
|
<span class="font-semibold text-slate-700">1000ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 垂直间隔 -->
|
|
<div class="h-14"></div>
|
|
<!-- ================= LEVEL 4: 末端配电箱与监测回路卡片 (并列网格展现,绝不错位) ================= -->
|
|
<div class="relative z-10 w-full grid grid-cols-3 gap-3.5 pt-1">
|
|
<!-- 卡片 1: 学生宿舍 12# 2F东配电箱回路 (当前选中/焦点) -->
|
|
<div class="bg-white rounded-xl p-3 border-2 border-primary shadow-md flex flex-col justify-between relative cursor-pointer ring-4 ring-primary/10">
|
|
<!-- 顶部焦点标记与编码 -->
|
|
<div class="flex items-start justify-between pb-1 border-b border-slate-100">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span class="font-bold text-[12.5px] text-slate-900">宿舍照明空调回路</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] bg-primary text-white px-1.5 py-0.5 rounded font-semibold">#CIR-0219</span>
|
|
</div>
|
|
<span class="text-[11px] text-slate-500 my-1 font-medium truncate">学生宿舍12号楼 · 2F东分配电箱</span>
|
|
<!-- 实时电气指标网格 (2x2) -->
|
|
<div class="grid grid-cols-2 gap-1.5 p-2 bg-slate-50 rounded-lg font-data-mono text-[11px] my-1.5 border border-slate-100">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电压(U):</span>
|
|
<span class="font-bold text-slate-800">223.5 V</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电流(I):</span>
|
|
<span class="font-bold text-slate-800">18.2 A</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">有功(P):</span>
|
|
<span class="font-bold text-primary">3.82 kW</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">功率因数:</span>
|
|
<span class="font-bold text-slate-800">0.94</span>
|
|
</div>
|
|
</div>
|
|
<!-- 运行状态与微断型号 -->
|
|
<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
|
|
<span class="flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
|
|
<span>38.2℃</span>
|
|
</span>
|
|
<span class="text-emerald-700 font-semibold bg-emerald-50 px-1 rounded">正常 (62%载)</span>
|
|
</div>
|
|
<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
|
|
ICC映射: DH-MCB-202409-9821
|
|
</div>
|
|
</div>
|
|
<!-- 卡片 2: 实训中心 B座 · 1F MCC-1 数控机床动力回路 (重载预警) -->
|
|
<div class="bg-white rounded-xl p-3 border border-amber-300 shadow-sm flex flex-col justify-between relative cursor-pointer hover:border-amber-400 transition-all">
|
|
<div class="flex items-start justify-between pb-1 border-b border-slate-100">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
|
|
</span>
|
|
<span class="font-bold text-[12.5px] text-slate-900">数控机床组动力专线</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] bg-amber-100 text-amber-800 px-1.5 py-0.5 rounded font-semibold">#CIR-0881</span>
|
|
</div>
|
|
<span class="text-[11px] text-slate-500 my-1 font-medium truncate">实训中心 B座 · 1F MCC-1</span>
|
|
<div class="grid grid-cols-2 gap-1.5 p-2 bg-amber-50/50 rounded-lg font-data-mono text-[11px] my-1.5 border border-amber-100">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电压(U):</span>
|
|
<span class="font-bold text-slate-800">382.1 V</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电流(I):</span>
|
|
<span class="font-bold text-amber-700">58.4 A</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">瞬时(P):</span>
|
|
<span class="font-bold text-amber-700">38.4 kW</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">三相平衡:</span>
|
|
<span class="font-bold text-slate-800">98.2%</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
|
|
<span class="flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
|
|
<span>54.8℃</span>
|
|
</span>
|
|
<span class="text-amber-700 font-semibold bg-amber-100 px-1 rounded">⚠️ 负荷率 76%</span>
|
|
</div>
|
|
<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
|
|
ICC映射: DH-MCB-202409-1142
|
|
</div>
|
|
</div>
|
|
<!-- 卡片 3: 第一餐饮中心 · 动力配电箱厨房排烟风机 -->
|
|
<div class="bg-white rounded-xl p-3 border border-slate-200 shadow-sm flex flex-col justify-between relative cursor-pointer hover:border-slate-300 transition-all">
|
|
<div class="flex items-start justify-between pb-1 border-b border-slate-100">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span class="font-bold text-[12.5px] text-slate-900">厨房高压排烟风机</span>
|
|
</div>
|
|
<span class="font-data-mono text-[10px] bg-slate-100 text-slate-700 px-1.5 py-0.5 rounded font-semibold">#CIR-0402</span>
|
|
</div>
|
|
<span class="text-[11px] text-slate-500 my-1 font-medium truncate">第一餐饮中心 · 动力配电箱</span>
|
|
<div class="grid grid-cols-2 gap-1.5 p-2 bg-slate-50 rounded-lg font-data-mono text-[11px] my-1.5 border border-slate-100">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电压(U):</span>
|
|
<span class="font-bold text-slate-800">380.4 V</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">电流(I):</span>
|
|
<span class="font-bold text-slate-800">14.1 A</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">瞬时(P):</span>
|
|
<span class="font-bold text-emerald-700">7.2 kW</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">燃气闭锁:</span>
|
|
<span class="font-bold text-emerald-700">闭合正常</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[11px] font-data-mono pt-1 text-slate-600">
|
|
<span class="flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[13px] text-slate-400">thermostat</span>
|
|
<span>32.1℃</span>
|
|
</span>
|
|
<span class="text-emerald-700 font-semibold bg-emerald-50 px-1 rounded">负荷 38%</span>
|
|
</div>
|
|
<div class="mt-1 text-[10px] font-data-mono text-slate-400 border-t border-slate-100 pt-1 truncate">
|
|
ICC映射: DH-MCB-202409-5509
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ======================= RIGHT COLUMN: 选中测点属性与映射配置 (320px固定 -> 3 cols) ======================= -->
|
|
<div class="col-span-12 lg:col-span-3 xl:col-span-3 bg-white rounded-xl border border-border-rule shadow-sm flex flex-col h-[780px] overflow-hidden">
|
|
<!-- 检查器头部 -->
|
|
<div class="p-3.5 border-b border-border-rule bg-slate-50/80 flex flex-col gap-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">节点属性与物联映射</span>
|
|
<span class="text-[11px] font-semibold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
已完成大华ICC映射
|
|
</span>
|
|
</div>
|
|
<h3 class="font-bold text-[14.5px] text-slate-900 mt-1 leading-tight">2F东分配电箱-照明回路</h3>
|
|
<span class="font-data-mono text-[11px] text-slate-500">#CIR-HB-WH00192-DB2E-01</span>
|
|
</div>
|
|
<!-- 属性滚动区域 -->
|
|
<div class="flex-1 overflow-y-auto p-3.5 space-y-3.5 text-[12.5px]">
|
|
<!-- 模块 1: 空间物理归属 -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-1.5 text-primary font-bold text-[12px]">
|
|
<span class="material-symbols-outlined text-[16px]">apartment</span>
|
|
<span>空间物理归属信息</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-1.5 text-[12px]">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">所属建筑:</span>
|
|
<span class="font-semibold text-slate-800">学生宿舍 12 号楼</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">所在楼层:</span>
|
|
<span class="font-semibold text-slate-800 font-data-mono">2 层 (Floor 02)</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">物理箱体:</span>
|
|
<span class="text-slate-800">东侧强电井 DB-2E 箱</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-500">覆盖房间:</span>
|
|
<span class="text-slate-800 font-semibold font-data-mono">201 ~ 208 宿舍房间</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 模块 2: 用电责任与能耗归属 -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-1.5 text-indigo-600 font-bold text-[12px]">
|
|
<span class="material-symbols-outlined text-[16px]">corporate_fare</span>
|
|
<span>用电责任与能耗归属</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-2">
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500 font-medium">责任部门</label>
|
|
<select class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded text-[12px] text-slate-800 font-medium focus:ring-1 focus:ring-primary focus:outline-none">
|
|
<option selected="">后勤物业管理处 - 宿管科</option>
|
|
<option>教务处 - 实验实训管理中心</option>
|
|
<option>保卫处 - 消防安全微型站</option>
|
|
<option>信息化办公室 - 网络数据中心</option>
|
|
</select>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500">责任人</label>
|
|
<input class="w-full px-2 py-1 bg-white border border-slate-200 rounded text-[12px] text-slate-800" type="text" value="王主管 (宿管)"/>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500">联系电话</label>
|
|
<input class="w-full px-2 py-1 bg-white border border-slate-200 rounded text-[11.5px] font-data-mono text-slate-800" type="text" value="138****5621"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-1 border-t border-slate-200/60 text-[11.5px]">
|
|
<span class="text-slate-500">考核方式:</span>
|
|
<span class="text-primary font-semibold bg-blue-50 px-1.5 py-0.2 rounded border border-blue-100">定额包干 / 梯度考核</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 模块 3: 大华 ICC 边缘物联网映射 -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-1.5 text-emerald-700 font-bold text-[12px]">
|
|
<span class="material-symbols-outlined text-[16px]">sensors</span>
|
|
<span>大华 ICC 边缘物联网映射</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200/70 rounded-lg p-2.5 space-y-1.5 font-data-mono text-[11.5px]">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-500">绑定ICC设备码:</span>
|
|
<span class="font-bold text-slate-800">DH-MCB-202409-9821</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-500">上联网关:</span>
|
|
<span class="text-indigo-600 font-semibold">ICC-GW-04 (192.168.10.88)</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-500">采集轮询频率:</span>
|
|
<span class="text-slate-800 font-medium">5分钟主动拉取 (L3)</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-500">额定电气规格:</span>
|
|
<span class="text-slate-800">63A / 220V 单相</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 模块 4: 告警联动阈值设置 -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-1.5 text-amber-700 font-bold text-[12px]">
|
|
<span class="material-symbols-outlined text-[16px]">shield</span>
|
|
<span>告警联动阈值设置</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-1.5 text-center font-data-mono">
|
|
<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
|
|
<span class="text-[10px] text-slate-500">过载保护</span>
|
|
<span class="font-bold text-[12.5px] text-amber-700">> 50.0 A</span>
|
|
<span class="text-[9px] text-slate-400">(80%额定)</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
|
|
<span class="text-[10px] text-slate-500">温升预警</span>
|
|
<span class="font-bold text-[12.5px] text-rose-600">> 60.0 ℃</span>
|
|
<span class="text-[9px] text-slate-400">探头温度</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded p-1.5 flex flex-col">
|
|
<span class="text-[10px] text-slate-500">漏电动作</span>
|
|
<span class="font-bold text-[12.5px] text-primary">> 30 mA</span>
|
|
<span class="text-[9px] text-slate-400">瞬时速断</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧底部固定操作栏 -->
|
|
<div class="p-3 border-t border-border-rule bg-slate-50/90 flex flex-col gap-2 mt-auto">
|
|
<button class="w-full py-2 rounded-lg bg-primary hover:bg-blue-700 text-white font-semibold text-[13px] shadow-sm transition-all text-center">
|
|
保存节点与 ICC 映射配置
|
|
</button>
|
|
<button class="w-full py-1.5 rounded-lg bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 font-semibold text-[12px] transition-colors text-center">
|
|
下发 ICC 采集同步
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ================= 底部微状态栏 (严谨工业级指标) ================= -->
|
|
<footer class="bg-white rounded-lg border border-border-rule px-4 py-2 flex flex-wrap items-center justify-between text-[11.5px] font-data-mono text-slate-500 shadow-xs">
|
|
<div class="flex items-center gap-5">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span>拓扑校验状态: <span class="text-emerald-700 font-semibold">100% 完整无环路</span></span>
|
|
</div>
|
|
<span>•</span>
|
|
<span>当前坐标引擎: <span class="text-slate-700">Graph-Core v2.4</span></span>
|
|
<span>•</span>
|
|
<span>NTP同步偏差: <span class="text-slate-700 font-semibold">< 2μs (NTP-CHENGDU-PTP)</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-emerald-700 font-medium">边缘通信: 在线 24/24 链路正常</span>
|
|
<span class="text-slate-400">|</span>
|
|
<span class="text-slate-700 font-semibold">鑫潼智电 · XT-POWER OS</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
</body></html> |