From a8971b05972de64923877a39a164be49c5c9cacf Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Tue, 31 Mar 2026 16:22:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E8=AE=A1=E9=87=8F?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=A1=B5=E9=9D=A2UI=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/baseMonitorInfoIOTDevice/index.vue   |  666 +++++++--
 .../ems/report/currentIOTCurve/index.vue      | 1320 ++++++++---------
 2 files changed, 1178 insertions(+), 808 deletions(-)

diff --git a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
index 7a6fc6d..cdc390f 100644
--- a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
+++ b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
@@ -1,144 +1,183 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <!--      <el-form-item label="计量设备编号" prop="monitorCode">-->
-      <!--        <el-input v-model="queryParams.monitorCode" placeholder="请输入计量设备编号" clearable-->
-      <!--          @keyup.enter="handleQuery" />-->
-      <!--      </el-form-item>-->
-      <el-form-item label="计量设备名称" prop="monitorName">
-        <el-input v-model="queryParams.monitorName" placeholder="请输入计量设备名称" clearable @keyup.enter="handleQuery" />
-      </el-form-item>
-      <el-form-item label="能源类型" prop="monitorType">
-        <el-select v-model="queryParams.monitorType" placeholder="请选择能源类型">
-          <el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.energyName" :value="item.energyTypeId"></el-option>
-        </el-select>
-      </el-form-item>
-      <!--      <el-form-item label="计量设备位置" prop="monitorAddr">-->
-      <!--        <el-input v-model="queryParams.monitorAddr" placeholder="请输入计量设备位置" clearable-->
-      <!--          @keyup.enter="handleQuery" />-->
-      <!--      </el-form-item>-->
-      <el-form-item label="计量设备状态" prop="monitorStatus">
-        <el-select v-model="queryParams.monitorStatus" placeholder="请选择计量设备状态" clearable>
-          <el-option v-for="dict in dict.type.monitor_status" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="点位类型" prop="pointType">
-        <el-input v-model="queryParams.pointType" placeholder="请输入点位类型" clearable @keyup.enter="handleQuery" />
-      </el-form-item>
-      <el-form-item label="安装位置" prop="locationName">
-        <el-input v-model="queryParams.locationName" placeholder="请输入安装位置" clearable @keyup.enter="handleQuery" />
-      </el-form-item>
-      <!--      <el-form-item label="采集设备编号" prop="collectDeviceId">-->
-      <!--        <el-input v-model="queryParams.collectDeviceId" placeholder="请输入采集设备编号" clearable-->
-      <!--          @keyup.enter="handleQuery" />-->
-      <!--      </el-form-item>-->
-      <!--      <el-form-item label="是否虚拟" prop="isAmmeter">-->
-      <!--        <el-select v-model="queryParams.isAmmeter" placeholder="请选择是否虚拟" clearable>-->
-      <!--          <el-option v-for="dict in dict.type.is_ammeter" :key="dict.value" :label="dict.label" :value="dict.value" />-->
-      <!--        </el-select>-->
-      <!--      </el-form-item>-->
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+  <div class="app-container page-shell">
+    <section class="page-hero">
+      <div class="hero-copy">
+        <span class="hero-eyebrow">IOT DEVICE CENTER</span>
+        <h2 class="hero-title">计量设备与阈值联动看板</h2>
+        <p class="hero-desc">围绕点位档案、安装位置与采集接入做统一可视化整理，让运维在同一页面快速完成查询、维护与阈值联动。</p>
+      </div>
+      <div class="hero-stats">
+        <article v-for="item in overviewStats" :key="item.label" class="stat-card">
+          <span class="stat-label">{{ item.label }}</span>
+          <strong class="stat-value">{{ item.value }}</strong>
+          <span class="stat-hint">{{ item.hint }}</span>
+        </article>
+      </div>
+    </section>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ems/base:baseMonitorInfo:add']"
-          >新增</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
-      </el-col>
-      <right-toolbar v-model:show-search="showSearch" @query-table="getList" :columns="columns"></right-toolbar>
-    </el-row>
+    <section v-show="showSearch" class="panel-shell search-shell">
+      <div class="panel-head">
+        <div>
+          <h3>快速筛选</h3>
+          <p>按设备、能源类型、状态和安装位置快速定位目标点位。</p>
+        </div>
+        <span class="panel-badge">档案检索</span>
+      </div>
+      <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="100px" class="query-form">
+        <!--      <el-form-item label="计量设备编号" prop="monitorCode">-->
+        <!--        <el-input v-model="queryParams.monitorCode" placeholder="请输入计量设备编号" clearable-->
+        <!--          @keyup.enter="handleQuery" />-->
+        <!--      </el-form-item>-->
+        <el-form-item label="计量设备名称" prop="monitorName">
+          <el-input v-model="queryParams.monitorName" placeholder="请输入计量设备名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="能源类型" prop="monitorType">
+          <el-select v-model="queryParams.monitorType" placeholder="请选择能源类型">
+            <el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.energyName" :value="item.energyTypeId"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--      <el-form-item label="计量设备位置" prop="monitorAddr">-->
+        <!--        <el-input v-model="queryParams.monitorAddr" placeholder="请输入计量设备位置" clearable-->
+        <!--          @keyup.enter="handleQuery" />-->
+        <!--      </el-form-item>-->
+        <el-form-item label="计量设备状态" prop="monitorStatus">
+          <el-select v-model="queryParams.monitorStatus" placeholder="请选择计量设备状态" clearable>
+            <el-option v-for="dict in dict.type.monitor_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="点位类型" prop="pointType">
+          <el-input v-model="queryParams.pointType" placeholder="请输入点位类型" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="安装位置" prop="locationName">
+          <el-input v-model="queryParams.locationName" placeholder="请输入安装位置" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <!--      <el-form-item label="采集设备编号" prop="collectDeviceId">-->
+        <!--        <el-input v-model="queryParams.collectDeviceId" placeholder="请输入采集设备编号" clearable-->
+        <!--          @keyup.enter="handleQuery" />-->
+        <!--      </el-form-item>-->
+        <!--      <el-form-item label="是否虚拟" prop="isAmmeter">-->
+        <!--        <el-select v-model="queryParams.isAmmeter" placeholder="请选择是否虚拟" clearable>-->
+        <!--          <el-option v-for="dict in dict.type.is_ammeter" :key="dict.value" :label="dict.label" :value="dict.value" />-->
+        <!--        </el-select>-->
+        <!--      </el-form-item>-->
+        <el-form-item class="query-actions">
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </section>
 
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="baseMonitorInfoList"
-      row-key="objId"
-      :default-expand-all="isExpandAll"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-    >
-      <el-table-column label="序号" type="index" width="60" align="center" v-if="columns[0].visible" />
-      <el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible" />
-      <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[2].visible" />
-      <!-- <el-table-column label="能源类型" align="center" prop="monitorType" v-if="columns[4].visible">
+    <section class="panel-shell table-shell">
+      <div class="panel-head">
+        <div>
+          <h3>设备结构总览</h3>
+          <p>树形结构展示设备层级，支持直接维护阈值、档案与挂接关系。</p>
+        </div>
+        <span class="panel-badge warm">树形维护</span>
+      </div>
+
+      <el-row :gutter="10" class="toolbar-row">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['ems/base:baseMonitorInfo:add']"
+            >新增</el-button
+          >
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+        </el-col>
+        <right-toolbar v-model:show-search="showSearch" @query-table="getList" :columns="columns"></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="baseMonitorInfoList"
+        row-key="objId"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        class="data-table"
+      >
+        <el-table-column label="序号" type="index" width="60" align="center" v-if="columns[0].visible" />
+        <el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible" />
+        <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[2].visible" />
+        <!-- <el-table-column label="能源类型" align="center" prop="monitorType" v-if="columns[4].visible">
         <template #default="scope">
           {{ dict.type.monitor_type.find(e=>e.value == scope.row.monitorType).label}}
         </template>
       </el-table-column> -->
-      <el-table-column label="能源类型" align="center" prop="energyName" v-if="columns[3].visible"> </el-table-column>
-      <el-table-column label="计量设备位置" align="center" prop="monitorAddr" v-if="columns[4].visible" />
-      <el-table-column label="计量设备状态" align="center" prop="monitorStatus" v-if="columns[5].visible">
-        <template #default="scope">
-          <dict-tag :options="dict.type.monitor_status" :value="scope.row.monitorStatus" />
-        </template>
-      </el-table-column>
-      <el-table-column label="采集设备名称" align="center" prop="collectDeviceName" v-if="columns[6].visible" />
-      <el-table-column label="点位类型" align="center" prop="pointType" v-if="columns[19].visible" />
-      <el-table-column label="单位" align="center" prop="unitName" v-if="columns[20].visible" />
-      <el-table-column label="安装位置" align="center" prop="locationName" v-if="columns[21].visible" />
-      <el-table-column label="传感器类型" align="center" prop="sensorType" v-if="columns[22].visible" />
-      <el-table-column label="启用报警" align="center" prop="alarmEnable" v-if="columns[23].visible">
-        <template #default="scope">
-          <dict-tag :options="dict.type.is_flag" :value="scope.row.alarmEnable" />
-        </template>
-      </el-table-column>
-      <el-table-column label="等级" align="center" prop="grade" v-if="columns[7].visible" />
-      <el-table-column label="传感器仪表" align="center" prop="meterTypeId" v-if="columns[8].visible" />
-      <el-table-column label="修正值" align="center" prop="correctValue" v-if="columns[9].visible" />
-      <el-table-column label="是否虚拟" align="center" prop="isAmmeter" v-if="columns[10].visible">
-        <template #default="scope">
-          <dict-tag :options="dict.type.is_ammeter" :value="scope.row.isAmmeter" />
-        </template>
-      </el-table-column>
-      <el-table-column label="通断复位" align="center" prop="isKeyMonitor" v-if="columns[11].visible" />
-      <el-table-column label="是否断路" align="center" prop="isCircuit" v-if="columns[12].visible" />
-      <el-table-column label="创建人" align="center" prop="createBy" v-if="columns[13].visible" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[14].visible">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[15].visible" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[16].visible">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="公摊表类型" align="center" prop="publicShareType" v-if="columns[17].visible" />
-      <el-table-column label="表具层级" align="center" prop="monitorHierarchy" v-if="columns[18].visible" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
-        <template #default="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:edit']"
-            >修改</el-button
-          >
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:add']"
-            >新增</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-setting"
-            @click="handleThreshold(scope.row)"
-            v-hasPermi="['ems/record:recordAlarmRule:list']"
-            v-if="scope.row.isAmmeter !== '0'"
-            >阈值</el-button
-          >
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:remove']"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column label="能源类型" align="center" prop="energyName" v-if="columns[3].visible"> </el-table-column>
+        <el-table-column label="计量设备位置" align="center" prop="monitorAddr" v-if="columns[4].visible" />
+        <el-table-column label="计量设备状态" align="center" prop="monitorStatus" v-if="columns[5].visible">
+          <template #default="scope">
+            <dict-tag :options="dict.type.monitor_status" :value="scope.row.monitorStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="采集设备名称" align="center" prop="collectDeviceName" v-if="columns[6].visible" />
+        <el-table-column label="点位类型" align="center" prop="pointType" v-if="columns[19].visible" />
+        <el-table-column label="单位" align="center" prop="unitName" v-if="columns[20].visible" />
+        <el-table-column label="安装位置" align="center" prop="locationName" v-if="columns[21].visible" />
+        <el-table-column label="传感器类型" align="center" prop="sensorType" v-if="columns[22].visible" />
+        <el-table-column label="启用报警" align="center" prop="alarmEnable" v-if="columns[23].visible">
+          <template #default="scope">
+            <dict-tag :options="dict.type.is_flag" :value="scope.row.alarmEnable" />
+          </template>
+        </el-table-column>
+        <el-table-column label="等级" align="center" prop="grade" v-if="columns[7].visible" />
+        <el-table-column label="传感器仪表" align="center" prop="meterTypeId" v-if="columns[8].visible" />
+        <el-table-column label="修正值" align="center" prop="correctValue" v-if="columns[9].visible" />
+        <el-table-column label="是否虚拟" align="center" prop="isAmmeter" v-if="columns[10].visible">
+          <template #default="scope">
+            <dict-tag :options="dict.type.is_ammeter" :value="scope.row.isAmmeter" />
+          </template>
+        </el-table-column>
+        <el-table-column label="通断复位" align="center" prop="isKeyMonitor" v-if="columns[11].visible" />
+        <el-table-column label="是否断路" align="center" prop="isCircuit" v-if="columns[12].visible" />
+        <el-table-column label="创建人" align="center" prop="createBy" v-if="columns[13].visible" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[14].visible">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[15].visible" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[16].visible">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="公摊表类型" align="center" prop="publicShareType" v-if="columns[17].visible" />
+        <el-table-column label="表具层级" align="center" prop="monitorHierarchy" v-if="columns[18].visible" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
+          <template #default="scope">
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:edit']"
+              >修改</el-button
+            >
+            <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:add']"
+              >新增</el-button
+            >
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-setting"
+              @click="handleThreshold(scope.row)"
+              v-hasPermi="['ems/record:recordAlarmRule:list']"
+              v-if="scope.row.isAmmeter !== '0'"
+              >阈值</el-button
+            >
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ems/base:baseMonitorInfo:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </section>
 
     <!-- 添加或修改计量设备信息对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body class="themed-dialog">
+      <div class="dialog-tip">
+        <span class="tip-dot"></span>
+        设备档案字段较多，这里按业务主数据录入，隐藏技术字段继续保留在提交链路中，避免影响 EMS 现有流程。
+      </div>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="dialog-form">
         <el-form-item label="父级编号" prop="parentId">
           <EmsTreeSelect v-model="form.parentId" :options="baseMonitorInfoOptions" :normalizer="normalizer" placeholder="请选择父级编号" />
         </el-form-item>
@@ -253,7 +292,7 @@
     </el-dialog>
 
     <!-- 阈值管理对话框 -->
-    <el-dialog :title="thresholdTitle" v-model="thresholdOpen" width="1200px" append-to-body>
+    <el-dialog :title="thresholdTitle" v-model="thresholdOpen" width="1200px" append-to-body class="themed-dialog threshold-dialog">
       <div class="threshold-container">
         <!-- 设备信息展示 -->
         <el-card class="device-info-card" shadow="never">
@@ -339,8 +378,12 @@
     </el-dialog>
 
     <!-- 阈值规则编辑对话框 -->
-    <el-dialog :title="thresholdFormTitle" v-model="thresholdFormOpen" width="500px" append-to-body>
-      <el-form ref="thresholdFormRef" :model="thresholdForm" :rules="thresholdRules" label-width="120px">
+    <el-dialog :title="thresholdFormTitle" v-model="thresholdFormOpen" width="500px" append-to-body class="themed-dialog">
+      <div class="dialog-tip soft">
+        <span class="tip-dot"></span>
+        阈值规则与点位技术字段自动联动，页面只暴露运维真正需要维护的业务项，减少误配概率。
+      </div>
+      <el-form ref="thresholdFormRef" :model="thresholdForm" :rules="thresholdRules" label-width="120px" class="dialog-form">
         <el-form-item label="规则名称" prop="ruleName">
           <el-input v-model="thresholdForm.ruleName" placeholder="请输入规则名称" />
         </el-form-item>
@@ -777,6 +820,50 @@ const {
   title
 } = toRefs(state);
 
+const flattenDeviceTree = (nodes = []) => {
+  return nodes.reduce((acc, node) => {
+    acc.push(node);
+    if (node.children?.length) {
+      acc.push(...flattenDeviceTree(node.children));
+    }
+    return acc;
+  }, []);
+};
+
+const flatDeviceList = computed(() => flattenDeviceTree(baseMonitorInfoList.value));
+
+// 这里用展示型统计卡强化运维感知，不参与任何接口入参与业务判断，确保只提升视觉层体验。
+const overviewStats = computed(() => {
+  const devices = flatDeviceList.value;
+  const total = devices.length;
+  const withCollector = devices.filter((item) => item.collectDeviceId || item.collectDeviceName).length;
+  const withLocation = devices.filter((item) => item.locationName).length;
+  const withSensor = devices.filter((item) => item.sensorType).length;
+
+  return [
+    {
+      label: '设备总量',
+      value: total,
+      hint: '当前树形档案节点'
+    },
+    {
+      label: '已挂接采集',
+      value: withCollector,
+      hint: '已关联采集设备'
+    },
+    {
+      label: '位置已维护',
+      value: withLocation,
+      hint: '安装位置信息完整'
+    },
+    {
+      label: '传感已标注',
+      value: withSensor,
+      hint: '便于运维识别类型'
+    }
+  ];
+});
+
 const getMonitorTypeLabel = (monitorType) => {
   if (!monitorType || !dict.type.monitor_type) {
     return '未设置';
@@ -1023,7 +1110,8 @@ const resetThresholdForm = () => {
     hysteresis: null,
     durationSec: null,
     alarmLevel: null,
-    notifyGroupId: null,
+    // 阈值初始化时不再前置通知组，避免配置页继续透出扩展通知能力。
+    // notifyGroupId: null,
     isEnable: '0'
   };
   nextTick(() => {
@@ -1044,34 +1132,267 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.page-shell {
+  min-height: 100%;
+  padding: 20px;
+  background:
+    radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 32%),
+    radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 28%), linear-gradient(180deg, #f3f8ff 0%, #eef4f7 48%, #f7f9fc 100%);
+}
+
+.page-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
+  gap: 18px;
+  margin-bottom: 18px;
+  padding: 28px 30px;
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(7, 63, 86, 0.96) 0%, rgba(16, 106, 125, 0.92) 52%, rgba(40, 166, 146, 0.9) 100%);
+  box-shadow: 0 24px 50px rgba(17, 75, 95, 0.18);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-hero::after {
+  content: '';
+  position: absolute;
+  inset: auto -100px -120px auto;
+  width: 260px;
+  height: 260px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  filter: blur(4px);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  font-size: 12px;
+  letter-spacing: 0.18em;
+}
+
+.hero-title {
+  margin: 18px 0 12px;
+  font-size: 30px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.hero-desc {
+  max-width: 700px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.75;
+}
+
+.hero-stats {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.stat-card {
+  padding: 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  backdrop-filter: blur(10px);
+}
+
+.stat-label,
+.stat-hint {
+  display: block;
+}
+
+.stat-label {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+}
+
+.stat-value {
+  display: block;
+  margin: 10px 0 8px;
+  font-size: 30px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.stat-hint {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+}
+
+.panel-shell {
+  margin-bottom: 18px;
+  padding: 20px 22px;
+  border: 1px solid rgba(199, 211, 223, 0.55);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 18px 40px rgba(42, 63, 95, 0.08);
+  backdrop-filter: blur(14px);
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.panel-head h3 {
+  margin: 0 0 6px;
+  color: #163047;
+  font-size: 20px;
+}
+
+.panel-head p {
+  margin: 0;
+  color: #6b7a90;
+  line-height: 1.6;
+}
+
+.panel-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #dbeafe, #ecfeff);
+  color: #0f5f8d;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.panel-badge.warm {
+  background: linear-gradient(135deg, #fef3c7, #ffedd5);
+  color: #a16207;
+}
+
+.query-form {
+  padding: 18px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 100%);
+}
+
+.query-actions {
+  :deep(.el-form-item__content) {
+    gap: 10px;
+  }
+}
+
+.toolbar-row {
+  margin-bottom: 14px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08));
+}
+
+.data-table {
+  :deep(.el-table) {
+    --el-table-border-color: rgba(208, 219, 229, 0.7);
+  }
+
+  :deep(.el-table__header-wrapper th) {
+    background: #f4f9ff;
+    color: #17324a;
+    font-weight: 700;
+  }
+
+  :deep(.el-table__row td) {
+    transition: background-color 0.2s ease;
+  }
+
+  :deep(.el-table__body tr:hover > td) {
+    background: rgba(37, 99, 235, 0.06) !important;
+  }
+}
+
+.dialog-tip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: linear-gradient(90deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.08));
+  color: #28506c;
+  line-height: 1.65;
+}
+
+.dialog-tip.soft {
+  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(244, 114, 182, 0.08));
+}
+
+.tip-dot {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0ea5e9, #22c55e);
+  box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.12);
+}
+
+.dialog-form {
+  padding: 18px;
+  border-radius: 18px;
+  background: #f9fbff;
+}
+
 .threshold-container {
   padding: 0;
 }
 
+.device-info-card,
+.threshold-rules-card {
+  border: none;
+  border-radius: 22px;
+  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+  box-shadow: 0 16px 30px rgba(42, 63, 95, 0.08);
+}
+
 .device-info-card {
   margin-bottom: 20px;
 }
 
-.device-info-card .el-card__body {
-  padding: 15px;
+.device-info-card :deep(.el-card__header),
+.threshold-rules-card :deep(.el-card__header) {
+  padding: 18px 20px;
+  border-bottom: 1px solid rgba(208, 219, 229, 0.75);
 }
 
-.threshold-rules-card .el-card__body {
-  padding: 15px;
+.device-info-card :deep(.el-card__body),
+.threshold-rules-card :deep(.el-card__body) {
+  padding: 18px 20px;
 }
 
 .info-item {
   margin-bottom: 10px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f7fbff, #f2f7f6);
 }
 
 .info-item .label {
-  font-weight: bold;
-  color: #606266;
+  font-weight: 700;
+  color: #66758d;
 }
 
 .info-item .value {
-  color: #303133;
+  color: #17324a;
   margin-left: 5px;
 }
 
@@ -1084,4 +1405,61 @@ onMounted(() => {
 .clearfix:after {
   clear: both;
 }
+
+:deep(.themed-dialog .el-dialog) {
+  border-radius: 26px;
+  overflow: hidden;
+  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
+}
+
+:deep(.themed-dialog .el-dialog__header) {
+  padding: 22px 24px 14px;
+  background: linear-gradient(135deg, rgba(11, 94, 129, 0.96), rgba(26, 142, 126, 0.92));
+}
+
+:deep(.themed-dialog .el-dialog__title),
+:deep(.themed-dialog .el-dialog__headerbtn .el-dialog__close) {
+  color: #fff;
+}
+
+:deep(.themed-dialog .el-dialog__body) {
+  padding: 22px 24px;
+  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
+}
+
+:deep(.themed-dialog .el-dialog__footer) {
+  padding: 0 24px 24px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+}
+
+@media (max-width: 992px) {
+  .page-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .page-shell {
+    padding: 12px;
+  }
+
+  .page-hero,
+  .panel-shell {
+    padding: 18px;
+    border-radius: 20px;
+  }
+
+  .panel-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero-stats {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/src/views/ems/report/currentIOTCurve/index.vue b/src/views/ems/report/currentIOTCurve/index.vue
index c157e78..79f5def 100644
--- a/src/views/ems/report/currentIOTCurve/index.vue
+++ b/src/views/ems/report/currentIOTCurve/index.vue
@@ -1,80 +1,168 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="28">
-      <el-col :span="5" :xs="24">
-        <div class="head-container">
+  <div class="app-container historical-iot-page">
+    <el-row :gutter="20">
+      <el-col :xl="5" :lg="6" :md="7" :sm="24" :xs="24">
+        <section class="glass-panel tree-panel">
+          <div class="panel-heading">
+            <div>
+              <p class="panel-eyebrow">Device Navigator</p>
+              <h3>历史设备树</h3>
+            </div>
+            <el-tag effect="plain" size="small">{{ monitorInfoOptions.length }} 个节点</el-tag>
+          </div>
+
           <el-input
             v-model="workUnitName"
+            class="tree-search"
             placeholder="请输入计量设备名称"
             clearable
             size="small"
             prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
           />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="monitorInfoOptions"
-            :props="monitorProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="treeRef"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
-        </div>
+
+          <div v-loading="treeLoading" class="tree-wrapper">
+            <el-tree
+              ref="treeRef"
+              :data="monitorInfoOptions"
+              :props="monitorProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleNodeClick"
+            />
+          </div>
+        </section>
       </el-col>
-      <el-col :span="19" :xs="24">
-        <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="100px">
-          <!--          <el-form-item label="计量设备编号" prop="monitorCode">-->
-          <!--            <el-input-->
-          <!--              v-model="queryParams.monitorCode"-->
-          <!--              placeholder="请输入计量设备编号"-->
-          <!--              clearable-->
-          <!--              @keyup.enter="handleQuery"-->
-          <!--            />-->
-          <!--          </el-form-item>-->
-          <el-form-item label="记录时间">
-            <el-date-picker
-              v-model="daterangeRecordTime"
-              style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item label="采样间隔">
-            <el-input-number v-model="queryParams.samplingInterval" :min="1" :max="1440" placeholder="分钟" style="width: 120px"></el-input-number>
-            <span style="margin-left: 5px; color: #909399">分钟/点</span>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            <el-button type="warning" plain icon="el-icon-data-analysis" size="mini" @click="openReportPage"> 多维报表 </el-button>
-          </el-form-item>
-        </el-form>
 
-        <!-- 根据设备类型显示对应的图表 -->
-        <!-- type=5: 只显示温度 -->
-        <Chart v-if="selectedDeviceType === 5" ref="Chart2" class="chart-single" />
+      <el-col :xl="19" :lg="18" :md="17" :sm="24" :xs="24">
+        <section class="hero-panel">
+          <div class="hero-main">
+            <div class="hero-copy">
+              <p class="hero-eyebrow">Historical Curve Studio</p>
+              <h2>历史环境曲线分析</h2>
+              <p class="hero-desc">
+                保留原页面的历史查询主链路，同时把图表容器、筛选区与结果区整体升级，让历史分析页更像一张可沉浸操作的业务驾驶舱。
+              </p>
+            </div>
+            <div class="hero-tags">
+              <el-tag effect="dark">{{ selectedMonitorName || '未选择设备' }}</el-tag>
+              <el-tag effect="plain">指标 {{ chartPanels.length }} 项</el-tag>
+              <el-tag effect="plain">采样 {{ queryParams.samplingInterval }} 分钟/点</el-tag>
+            </div>
+          </div>
 
-        <!-- type=6: 显示温度和湿度 -->
-        <div v-if="selectedDeviceType === 6">
-          <Chart ref="Chart1" class="chart-half" />
-          <Chart ref="Chart2" class="chart-half" />
-        </div>
+          <div class="hero-metrics">
+            <div class="metric-card">
+              <span class="metric-label">当前设备</span>
+              <strong class="metric-value">{{ selectedMonitorName || '未选择' }}</strong>
+              <p class="metric-hint">{{ selectionModeText }}</p>
+            </div>
+            <div class="metric-card">
+              <span class="metric-label">查询时间</span>
+              <strong class="metric-value metric-time">{{ displayRangeText }}</strong>
+              <p class="metric-hint">历史页负责完整时间范围检索</p>
+            </div>
+            <div class="metric-card">
+              <span class="metric-label">结果点数</span>
+              <strong class="metric-value">{{ historicalRecords.length }}</strong>
+              <p class="metric-hint">完整保留接口返回的数据点</p>
+            </div>
+            <div class="metric-card">
+              <span class="metric-label">图表数量</span>
+              <strong class="metric-value">{{ chartPanels.length }}</strong>
+              <p class="metric-hint">根据真实数据字段自动识别指标</p>
+            </div>
+          </div>
+        </section>
 
-        <!-- type=7: 只显示噪声 -->
-        <Chart v-if="selectedDeviceType === 7" ref="Chart4" class="chart-single" />
+        <section class="glass-panel filter-panel">
+          <div class="panel-heading compact">
+            <div>
+              <p class="panel-eyebrow">Historical Query</p>
+              <h3>历史筛选区</h3>
+            </div>
+            <div class="panel-actions">
+              <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+              <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+              <!--
+                这里先注释历史曲线页上的“多维报表”按钮，报表能力已拆分为多个独立菜单页面，避免继续回到旧的大单页入口。
+              -->
+              <!--
+              <el-button type="warning" plain size="small" icon="el-icon-data-analysis" @click="openReportPage">多维报表</el-button>
+              -->
+            </div>
+          </div>
 
-        <!-- 未选择设备或其他类型时显示提示 -->
-        <div v-if="!selectedDeviceType" class="no-data-tip">
-          <p>请在左侧树中选择具体设备节点查看数据曲线</p>
-        </div>
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" class="query-form">
+            <el-form-item label="记录时间">
+              <el-date-picker
+                v-model="daterangeRecordTime"
+                style="width: 340px"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                type="datetimerange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </el-form-item>
+            <el-form-item label="采样间隔">
+              <el-input-number v-model="queryParams.samplingInterval" :min="1" :max="1440" controls-position="right" />
+              <span class="field-suffix">分钟/点</span>
+            </el-form-item>
+            <el-form-item label="设备名称">
+              <el-input :model-value="selectedMonitorName || '请先在左侧选择具体设备节点'" readonly />
+            </el-form-item>
+          </el-form>
+        </section>
+
+        <section v-loading="loading" class="glass-panel chart-panel">
+          <div class="panel-heading compact">
+            <div>
+              <p class="panel-eyebrow">Historical Canvas</p>
+              <h3>历史曲线区</h3>
+            </div>
+            <div class="chart-status">
+              <el-tag size="small" effect="plain">{{ selectedMonitorId || '未选设备' }}</el-tag>
+              <el-tag size="small" effect="plain">结果 {{ historicalRecords.length }} 条</el-tag>
+            </div>
+          </div>
+
+          <div v-if="!selectedMonitorId" class="empty-block">
+            <el-empty description="请在左侧树中选择具体设备节点查看历史曲线" />
+          </div>
+
+          <div v-else-if="!historicalRecords.length" class="empty-block">
+            <el-empty description="当前时间范围内暂无历史数据，请调整查询条件后重试" />
+          </div>
+
+          <div v-else-if="!chartPanels.length" class="empty-block">
+            <el-empty description="已获取历史数据，但未识别到可绘制曲线的指标字段" />
+          </div>
+
+          <template v-else>
+            <div class="chart-summary-bar">
+              <span>设备：{{ selectedMonitorName }}</span>
+              <span>范围：{{ displayRangeText }}</span>
+              <span>采样：{{ queryParams.samplingInterval }} 分钟/点</span>
+              <span>指标：{{ chartPanels.length }} 项</span>
+            </div>
+
+            <div class="chart-grid" :class="chartGridClass">
+              <article v-for="panel in chartPanels" :key="panel.key" class="chart-card">
+                <div class="chart-card-head">
+                  <div>
+                    <h4>{{ panel.label }}</h4>
+                    <p>{{ panel.metric.unit ? `${panel.metric.label}(${panel.metric.unit})` : panel.metric.label }}</p>
+                  </div>
+                  <el-tag size="small" effect="plain">{{ panel.valueCount }} 个有效点</el-tag>
+                </div>
+                <Chart :ref="setChartRef(panel.key)" class="chart-canvas" :chart-option="panel.option" />
+              </article>
+            </div>
+          </template>
+        </section>
       </el-col>
     </el-row>
   </div>
@@ -82,162 +170,133 @@
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus';
-import { useDict } from '@/utils/dict';
-import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
-import { parseTime } from '@/utils/ruoyi';
 import Chart from '@/components/Charts/Chart.vue';
-import * as echarts from 'echarts';
+import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
 import { getRecordIotenvInstantList } from '@/api/ems/record/recordIotenvInstant';
+import { parseTime } from '@/utils/ruoyi';
+import type { RecordIotenvInstantVO } from '@/api/ems/types';
+import {
+  buildIotCurveOption,
+  buildMetricHintsByNode,
+  connectCurveCharts,
+  normalizeIotCurveRecord,
+  readMetricValue,
+  resolveIotCurveMetrics,
+  type CurveChartExpose,
+  type IotCurveMetricDefinition,
+  type NormalizedIotCurveRecord
+} from '../iotCurveShared';
 
 defineOptions({
   name: 'currentIOTCurve',
   dicts: ['collect_type']
 });
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const dict = reactive({
-  type: useDict('collect_type')
-});
-
-interface CurveChartExpose {
-  chart?: echarts.ECharts;
-  setData: (option: echarts.EChartsOption) => void;
+interface ReportSelection {
+  mode: string;
+  monitorId: string;
+  monitorIds: string[];
+  monitorName: string;
+  monitorType: string;
+  deviceDisplayMap: Record<string, { label: string; type: unknown }>;
 }
 
-const Chart1 = ref<CurveChartExpose | null>(null);
-const Chart2 = ref<CurveChartExpose | null>(null);
-const Chart4 = ref<CurveChartExpose | null>(null);
+interface ChartPanel {
+  key: string;
+  label: string;
+  metric: IotCurveMetricDefinition;
+  valueCount: number;
+  option: Record<string, unknown>;
+}
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
 const queryFormRef = ref<ElFormInstance>();
 const treeRef = ref<ElTreeInstance>();
+const chartRefMap = shallowRef<Record<string, CurveChartExpose | null>>({});
+const disconnectChartGroup = ref<() => void>(() => undefined);
 
-// 这里统一通过工厂函数重建表单，避免弹窗在新增/编辑切换时残留上一条业务数据。
-const createFormData = () => ({
-  objId: null,
-  monitorId: null,
-  speed: null,
-  displacement: null,
-  acceleration: null,
-  temperature: null,
-  recodeTime: null,
-  remark: null
+const treeLoading = ref(false);
+const loading = ref(false);
+const monitorInfoOptions = ref<any[]>([]);
+const workUnitName = ref('');
+const daterangeRecordTime = ref<string[]>([]);
+const historicalRecords = ref<NormalizedIotCurveRecord[]>([]);
+const selectedMonitorName = ref('');
+const selectedMonitorNode = ref<Record<string, unknown> | null>(null);
+const selectedMonitorId = ref('');
+
+const monitorProps = {
+  children: 'children',
+  label: 'label'
+};
+
+// 这里继续保留原有查询字段结构，避免 EMS 历史页与后端入参发生漂移。
+const queryParams = reactive({
+  monitorId: null as string | null,
+  monitorIds: [] as string[],
+  samplingInterval: 1,
+  params: {} as Record<string, unknown>
 });
 
-// 这里保留原页面字段结构，优先保证 EMS 业务行为与接口入参不发生漂移。
-const state = reactive({
-  //下拉树List
-  baseMonitorInfoOptions: [],
-  //左侧树结构List
-  monitorInfoOptions: [],
-  workUnitName: undefined,
-  //左侧树结构 检索设备名称
-  selectMonitorName: null,
-  //计量设备信息
-  baseMonitorInfoList: [],
-  // 选中设备的类型，用于控制图表显示
-  selectedDeviceType: null,
-  // 采集方式时间范围
-  daterangeRecordTime: [],
-  // 遮罩层
-  loading: true,
-  // 选中数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  // 显示搜索条件
-  showSearch: true,
-  // 总条数
-  total: 0,
-  // 电实时数据表格数据
-  dataList: [],
-  // 弹出层标题
-  title: '',
-  // 是否显示弹出层
-  open: false,
-  // 查询参数
-  queryParams: {
-    objId: null,
-    monitorId: null,
-    collectTime: null,
-    speed: null,
-    displacement: null,
-    acceleration: null,
-    temperature: null,
-    recodeTime: null,
-    remark: null,
-    monitorIds: [],
-    samplingInterval: 1 // 采样间隔，默认1分钟（不采样）
-  },
-  // 表单参数
-  form: createFormData(),
-  // 报表入口允许父节点、多设备甚至全量对比，所以单独保存报表选择上下文。
-  reportSelection: {
-    mode: 'all',
-    monitorId: '',
-    monitorIds: [],
-    monitorName: ''
-  },
-  monitorProps: {
-    children: 'children',
-    label: 'label'
-  },
-  // 表单校验
-  rules: {
-    objId: [
-      {
-        required: true,
-        message: '编号不能为空',
-        trigger: 'blur'
-      }
-    ]
-  }
-  // columns: [
-  //   { key: 0, label: `主键标识`, visible: false },
-  //   { key: 1, label: `采集时间`, visible: true },
-  //   { key: 2, label: `振动传感器编号编号`, visible: true },
-  //   { key: 3, label: `速度(mm/s)`, visible: true },
-  //   { key: 4, label: `位移(um)`, visible: true },
-  //   { key: 5, label: `加速度(g)`, visible: true },
-  //   { key: 6, label: `温度(℃)`, visible: true },
-  //   { key: 7, label: `记录时间`, visible: true },
-  //   { key: 8, label: `备注`, visible: true },
-  // ]
-} as any);
+const reportSelection = ref<ReportSelection>({
+  mode: 'all',
+  monitorId: '',
+  monitorIds: [],
+  monitorName: '',
+  monitorType: '',
+  deviceDisplayMap: {}
+});
 
-const {
-  baseMonitorInfoList,
-  baseMonitorInfoOptions,
-  dataList,
-  daterangeRecordTime,
-  form,
-  ids,
-  loading,
-  monitorInfoOptions,
-  monitorProps,
-  multiple,
-  open,
-  queryParams,
-  reportSelection,
-  rules,
-  selectMonitorName,
-  selectedDeviceType,
-  showSearch,
-  single,
-  title,
-  total,
-  workUnitName
-} = toRefs(state);
+const metricHints = computed(() => buildMetricHintsByNode(selectedMonitorNode.value));
 
-const normalizer = (node) => {
-  if (node.children && !node.children.length) {
-    delete node.children;
+const chartPanels = computed<ChartPanel[]>(() => {
+  const metrics = resolveIotCurveMetrics(historicalRecords.value, metricHints.value);
+  return metrics.map((metric) => {
+    const valueCount = historicalRecords.value.filter((item) => readMetricValue(item, metric) !== null).length;
+    return {
+      key: metric.key,
+      label: metric.label,
+      metric,
+      valueCount,
+      option: buildIotCurveOption({
+        metric,
+        monitorName: selectedMonitorName.value || '设备',
+        records: historicalRecords.value,
+        premium: true,
+        subtitle: `历史查询 | 共 ${historicalRecords.value.length} 点`
+      })
+    };
+  });
+});
+
+const displayRangeText = computed(() => {
+  if (!daterangeRecordTime.value?.length) {
+    return '--';
   }
-  return {
-    id: node.monitorCode,
-    label: node.monitorName,
-    children: node.children
+  return `${daterangeRecordTime.value[0]} 至 ${daterangeRecordTime.value[1]}`;
+});
+
+const selectionModeText = computed(() => {
+  const modeMap = {
+    all: '当前页面全部设备可参与报表分析',
+    group: '父节点可继续用于多设备报表对比',
+    single: '当前曲线聚焦单设备历史轨迹'
+  };
+  return modeMap[reportSelection.value.mode] || '历史查询模式';
+});
+
+const chartGridClass = computed(() => {
+  return chartPanels.value.length <= 1 ? 'chart-grid-single' : 'chart-grid-multi';
+});
+
+const setChartRef = (key: string) => {
+  return (instance: any) => {
+    if (instance) {
+      chartRefMap.value[key] = instance as CurveChartExpose;
+      return;
+    }
+    delete chartRefMap.value[key];
   };
 };
 
@@ -259,6 +318,7 @@ const buildReportSelectionByNodes = (nodes, defaultName) => {
   const leafNodes = getLeafMonitorNodes(nodes);
   const monitorIds = leafNodes.map((item) => item.code);
   const typeSet = leafNodes.map((item) => item.type).filter((item) => item !== null && item !== undefined && item !== '');
+
   return {
     mode: monitorIds.length > 1 ? 'group' : 'single',
     monitorId: monitorIds.length === 1 ? monitorIds[0] : '',
@@ -272,11 +332,11 @@ const buildReportSelectionByNodes = (nodes, defaultName) => {
       };
       return accumulator;
     }, {})
-  };
+  } as ReportSelection;
 };
 
 const resolveReportSelection = () => {
-  if (reportSelection.value.monitorId || (reportSelection.value.monitorIds && reportSelection.value.monitorIds.length > 0)) {
+  if (reportSelection.value.monitorId || reportSelection.value.monitorIds.length > 0) {
     return reportSelection.value;
   }
   const allSelection = buildReportSelectionByNodes(monitorInfoOptions.value, '当前页面全部物联设备');
@@ -284,88 +344,97 @@ const resolveReportSelection = () => {
   return allSelection;
 };
 
-const getList = () => {
-  loading.value = true;
-  queryParams.value.params = {};
-  if (null != daterangeRecordTime.value && '' != daterangeRecordTime.value) {
-    queryParams.value.params['beginRecordTime'] = daterangeRecordTime.value[0];
-    queryParams.value.params['endRecordTime'] = daterangeRecordTime.value[1];
+const filterNode = (value, data) => {
+  if (!value) {
+    return true;
   }
-  getChart();
+  return String(data.label || '').includes(value);
 };
 
-const cancel = () => {
-  open.value = false;
-  reset();
-};
-
-const reset = () => {
-  form.value = {
-    objId: null,
-    monitorId: null,
-    speed: null,
-    displacement: null,
-    acceleration: null,
-    temperature: null,
-    recodeTime: null,
-    remark: null
-  };
-  form.value?.resetFields();
-};
-
-const handleQuery = () => {
-  getList();
-};
-
-const resetQuery = () => {
-  queryParams.value.monitorCode = null;
-  queryParams.value.monitorId = null;
-  queryParams.value.samplingInterval = 1; // 重置采样间隔为默认值
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-const handleExport = () => {
-  proxy?.download(
-    'ems/record/recordVibrationInstant/export',
-    {
-      ...queryParams.value
-    },
-    `recordVibrationInstant_${new Date().getTime()}.xlsx`
-  );
-};
-
-const getTreeselect = () => {
-  getMonitorInfoTree({
-    monitorTypeList: [5, 6, 7, 8, 9]
-  }).then((response) => {
-    monitorInfoOptions.value = response.data;
+const getTreeselect = async () => {
+  treeLoading.value = true;
+  try {
+    // 这里不再硬编码能源/监测类型编号，直接读取当前系统可见设备树，避免后续增删类型时还要改前端。
+    const response = await getMonitorInfoTree({});
+    monitorInfoOptions.value = response.data || [];
     reportSelection.value = resolveReportSelection();
+  } finally {
+    treeLoading.value = false;
+  }
+};
+
+const renderChartLinkage = () => {
+  disconnectChartGroup.value();
+  if (chartPanels.value.length < 2) {
+    return;
+  }
+  void nextTick(() => {
+    disconnectChartGroup.value();
+    disconnectChartGroup.value = connectCurveCharts(
+      chartPanels.value.map((item) => chartRefMap.value[item.key]),
+      'historical-iot-chart-group'
+    );
   });
 };
 
-const filterNode = (value, data) => {
-  if (!value) return true;
-  return data.label.indexOf(value) !== -1;
-};
-
-const handleNodeClick = (data) => {
-  if (data.children && data.children.length > 0) {
-    reportSelection.value = buildReportSelectionByNodes(data.children, data.label);
-    reportSelection.value.mode = 'group';
-    ElMessage.info('父节点已用于多设备报表对比；曲线仍需选择具体设备节点查看');
+const getChart = async () => {
+  if (!queryParams.monitorId) {
     return;
   }
 
-  // 点击节点时清空monitorIds，只使用选中的monitorId
-  queryParams.value.monitorIds = [];
-  queryParams.value.monitorId = data.code;
-  selectMonitorName.value = data.label;
+  loading.value = true;
+  try {
+    // 历史页要完整保留查询结果，所以这里只做标准化，不做截窗。
+    const query = JSON.parse(JSON.stringify(queryParams));
+    const { data = [] } = await getRecordIotenvInstantList(query);
+    historicalRecords.value = data.map((item) => normalizeIotCurveRecord(item));
+    renderChartLinkage();
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getList = async () => {
+  queryParams.params = {};
+  if (daterangeRecordTime.value?.length === 2) {
+    queryParams.params.beginRecordTime = daterangeRecordTime.value[0];
+    queryParams.params.endRecordTime = daterangeRecordTime.value[1];
+  }
+  await getChart();
+};
+
+const handleQuery = async () => {
+  await getList();
+};
+
+const resetQuery = async () => {
+  queryParams.samplingInterval = 1;
+  queryFormRef.value?.resetFields();
+  if (!daterangeRecordTime.value?.length) {
+    const nowDate = parseTime(new Date(), '{y}-{m}-{d}');
+    daterangeRecordTime.value = [`${nowDate} 09:00:00`, `${nowDate} 09:10:00`];
+  }
+  await handleQuery();
+};
+
+const handleNodeClick = async (data) => {
+  if (data.children && data.children.length > 0) {
+    reportSelection.value = buildReportSelectionByNodes(data.children, data.label);
+    reportSelection.value.mode = 'group';
+    ElMessage.info('父节点已用于多设备报表对比；历史曲线仍需选择具体设备节点查看');
+    return;
+  }
+
+  queryParams.monitorIds = [];
+  queryParams.monitorId = data.code;
+  selectedMonitorId.value = String(data.code || '');
+  selectedMonitorName.value = String(data.label || '');
+  selectedMonitorNode.value = data;
   reportSelection.value = {
     mode: 'single',
-    monitorId: data.code,
-    monitorIds: [data.code],
-    monitorName: data.label,
+    monitorId: String(data.code || ''),
+    monitorIds: [String(data.code || '')],
+    monitorName: String(data.label || ''),
     monitorType: String(data.type || ''),
     deviceDisplayMap: {
       [data.code]: {
@@ -375,43 +444,7 @@ const handleNodeClick = (data) => {
     }
   };
 
-  // 存储选中设备的类型，用于控制图表显示
-  selectedDeviceType.value = data.type;
-  console.log('选中设备:', data.label, 'type:', data.type);
-  handleQuery();
-};
-
-const getChart = async () => {
-  if (queryParams.value.monitorId == null || !selectedDeviceType.value) {
-    return;
-  }
-  const query = JSON.parse(JSON.stringify(queryParams.value));
-  const { data } = await getRecordIotenvInstantList(query);
-  console.log('数据条数:', data.length);
-
-  // 根据设备类型创建对应的图表配置
-  createChartByType(data);
-};
-
-const createChartByType = (data) => {
-  switch (selectedDeviceType.value) {
-    case 5:
-      // 温度传感器：只显示温度
-      createTemperatureChart(data);
-      break;
-    case 6:
-      // 温湿度传感器：显示温度和湿度
-      createHumidityChart(data);
-      createTemperatureChart(data);
-      linkCharts([Chart1, Chart2]);
-      break;
-    case 7:
-      // 噪声传感器：只显示噪声
-      createNoiseChart(data);
-      break;
-    default:
-      console.warn('未知的设备类型:', selectedDeviceType.value);
-  }
+  await handleQuery();
 };
 
 const openReportPage = () => {
@@ -419,395 +452,354 @@ const openReportPage = () => {
     ElMessage.warning('请先选择完整的记录时间范围');
     return;
   }
-  const reportSelection = resolveReportSelection();
-  if (!reportSelection.monitorId && (!reportSelection.monitorIds || reportSelection.monitorIds.length === 0)) {
+  const currentSelection = resolveReportSelection();
+  if (!currentSelection.monitorId && currentSelection.monitorIds.length === 0) {
     ElMessage.warning('当前没有可用于报表分析的设备');
     return;
   }
+
   const selectionKey = 'recordIotenvInstantDashboardSelection';
-  // 报表页优先展示树上的设备真实名称，避免只显示编码影响业务识别。
   window.sessionStorage.setItem(
     selectionKey,
     JSON.stringify({
-      deviceDisplayMap: reportSelection.deviceDisplayMap || {},
-      selectionLabel: reportSelection.monitorName,
-      monitorType: reportSelection.monitorType || String(selectedDeviceType.value || '')
+      deviceDisplayMap: currentSelection.deviceDisplayMap || {},
+      selectionLabel: currentSelection.monitorName,
+      monitorType: currentSelection.monitorType || String(selectedMonitorNode.value?.type || '')
     })
   );
-  // 显式透传当前查询上下文，避免报表页重新猜设备与时间造成统计口径不一致。
+
   proxy?.$router.push({
     path: '/ems/report/recordIotenvInstantDashboard/index',
     query: {
       selectionKey,
       source: 'iot',
-      compareScope: reportSelection.mode,
-      monitorId: reportSelection.monitorId,
-      monitorIds: (reportSelection.monitorIds || []).join(','),
-      monitorName: reportSelection.monitorName,
-      selectionLabel: reportSelection.monitorName,
-      monitorType: reportSelection.monitorType || String(selectedDeviceType.value || ''),
-      samplingInterval: String(queryParams.value.samplingInterval || 1),
+      compareScope: currentSelection.mode,
+      monitorId: currentSelection.monitorId,
+      monitorIds: currentSelection.monitorIds.join(','),
+      monitorName: currentSelection.monitorName,
+      selectionLabel: currentSelection.monitorName,
+      monitorType: currentSelection.monitorType || String(selectedMonitorNode.value?.type || ''),
+      samplingInterval: String(queryParams.samplingInterval || 1),
       beginRecordTime: daterangeRecordTime.value[0],
       endRecordTime: daterangeRecordTime.value[1]
     }
   });
 };
 
-const createHumidityChart = (data) => {
-  const option = {
-    title: {
-      text: selectMonitorName.value + ' 湿度曲线',
-      x: 'center'
-    },
-    grid: {
-      top: '15%',
-      bottom: '10%',
-      left: '10%',
-      right: '3%'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-        label: {
-          show: true
-        }
-      }
-    },
-    dataZoom: [
-      {
-        type: 'slider'
-      }
-    ],
-    legend: {
-      right: 0
-    },
-    xAxis: {
-      data: data.map((e) => e.recodeTime),
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#000000'
-        }
-      },
-      axisTick: {
-        show: true
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: '#000000'
-        }
-      }
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: '湿度(%)',
-        nameTextStyle: {
-          color: '#000000'
-        },
-        splitLine: {
-          show: false
-        },
-        axisTick: {
-          show: true
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#000000'
-          }
-        },
-        axisLabel: {
-          show: true,
-          textStyle: {
-            color: '#000000'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '湿度',
-        connectNulls: true,
-        type: 'line',
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        data: data.map((e) => e.humidity)
-      }
-    ]
-  };
-  Chart1.value.setData(option);
-};
-
-const createTemperatureChart = (data) => {
-  const option = {
-    title: {
-      text: selectMonitorName.value + ' 温度曲线',
-      x: 'center'
-    },
-    grid: {
-      top: '15%',
-      bottom: '10%',
-      left: '10%',
-      right: '3%'
-    },
-    dataZoom: [
-      {
-        type: 'slider'
-      }
-    ],
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-        label: {
-          show: true
-        }
-      }
-    },
-    legend: {
-      right: 0
-    },
-    xAxis: {
-      data: data.map((e) => e.recodeTime),
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#000000'
-        }
-      },
-      axisTick: {
-        show: true
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: '#000000'
-        }
-      }
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: '温度(℃)',
-        nameTextStyle: {
-          color: '#000000'
-        },
-        splitLine: {
-          show: false
-        },
-        axisTick: {
-          show: true
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#000000'
-          }
-        },
-        axisLabel: {
-          show: true,
-          textStyle: {
-            color: '#000000'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '温度(℃)',
-        connectNulls: true,
-        type: 'line',
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        data: data.map((e) => e.temperature)
-      }
-    ]
-  };
-  Chart2.value.setData(option);
-};
-
-const createNoiseChart = (data) => {
-  const option = {
-    title: {
-      text: selectMonitorName.value + ' 噪声曲线',
-      x: 'center'
-    },
-    grid: {
-      top: '15%',
-      bottom: '10%',
-      left: '10%',
-      right: '3%'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-        label: {
-          show: true
-        }
-      }
-    },
-    dataZoom: [
-      {
-        type: 'slider'
-      }
-    ],
-    legend: {
-      right: 0
-    },
-    xAxis: {
-      data: data.map((e) => e.recodeTime),
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#000000'
-        }
-      },
-      axisTick: {
-        show: true
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: '#000000'
-        }
-      }
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: '噪声(dB)',
-        nameTextStyle: {
-          color: '#000000'
-        },
-        splitLine: {
-          show: false
-        },
-        axisTick: {
-          show: true
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: '#000000'
-          }
-        },
-        axisLabel: {
-          show: true,
-          textStyle: {
-            color: '#000000'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '噪声',
-        connectNulls: true,
-        type: 'line',
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        data: data.map((e) => e.noise)
-      }
-    ]
-  };
-  Chart4.value.setData(option);
-};
-
-const linkCharts = (chartRefs: Array<Ref<CurveChartExpose | null>>) => {
-  if (chartRefs.length < 2) return;
-
-  // 连接图表
-  const charts = chartRefs.map((item) => item.value?.chart).filter((item): item is echarts.ECharts => Boolean(item));
-  echarts.connect(charts);
-
-  // 设置缩放联动
-  chartRefs.forEach((chartRef, index) => {
-    chartRef.value?.chart?.on('datazoom', (event) => {
-      const zoomEvent = event as { start: number; end: number };
-      chartRefs.forEach((otherRef, otherIndex) => {
-        if (index !== otherIndex) {
-          // 更新其他图表的缩放
-          otherRef.value?.chart?.dispatchAction({
-            type: 'dataZoom',
-            start: zoomEvent.start,
-            end: zoomEvent.end
-          });
-        }
-      });
-    });
-  });
-};
-
-watch(workUnitName, (val) => {
-  treeRef.value?.filter(val);
+watch(workUnitName, (value) => {
+  treeRef.value?.filter(value);
 });
 
-onMounted(() => {
+watch(chartPanels, () => {
+  renderChartLinkage();
+});
+
+onMounted(async () => {
   const nowDate = parseTime(new Date(), '{y}-{m}-{d}');
-  daterangeRecordTime.value[0] = nowDate + ' 09:00:00';
-  daterangeRecordTime.value[1] = nowDate + ' 09:10:00';
-  getTreeselect();
-  getList();
+  daterangeRecordTime.value = [`${nowDate} 09:00:00`, `${nowDate} 09:10:00`];
+  await getTreeselect();
+});
+
+onBeforeUnmount(() => {
+  disconnectChartGroup.value();
 });
 </script>
+
 <style scoped>
-/* 单个图表样式（type=5温度 或 type=7噪声） */
-.chart-single {
-  width: 100%;
-  height: 60vh;
-  margin: 20px 0;
+.historical-iot-page {
+  --page-bg-start: #f5f7ff;
+  --page-bg-end: #fbfcff;
+  --panel-border: rgba(148, 163, 184, 0.22);
+  --panel-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+  --hero-shadow: 0 28px 64px rgba(15, 23, 42, 0.14);
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --accent: #0f766e;
+  min-height: calc(100vh - 84px);
+  background:
+    radial-gradient(circle at left top, rgba(20, 184, 166, 0.14), transparent 30%),
+    radial-gradient(circle at right top, rgba(37, 99, 235, 0.12), transparent 26%),
+    linear-gradient(180deg, var(--page-bg-start), var(--page-bg-end));
 }
 
-/* 双图表样式（type=6温湿度） */
-.chart-half {
-  width: 50%;
-  height: 45vh;
-  display: inline-block;
-  margin: 10px 0;
+.glass-panel,
+.hero-panel {
+  border: 1px solid var(--panel-border);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--panel-shadow);
 }
 
-/* 提示信息样式 */
-.no-data-tip {
-  text-align: center;
-  padding: 60px 20px;
-  color: #999;
+.tree-panel,
+.filter-panel,
+.chart-panel {
+  padding: 20px;
+}
+
+.hero-panel {
+  padding: 24px;
+  margin-bottom: 20px;
+  background:
+    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(37, 99, 235, 0.92)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
+  color: #ffffff;
+  box-shadow: var(--hero-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-panel::after {
+  content: '';
+  position: absolute;
+  inset: auto -40px -90px auto;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.panel-heading,
+.hero-main,
+.hero-metrics,
+.chart-grid,
+.chart-summary-bar {
+  display: grid;
+}
+
+.panel-heading {
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.panel-heading.compact {
+  margin-bottom: 16px;
+}
+
+.panel-eyebrow,
+.hero-eyebrow {
+  margin: 0 0 6px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.panel-eyebrow {
+  color: var(--accent);
+}
+
+.panel-heading h3,
+.hero-copy h2 {
+  margin: 0;
+}
+
+.hero-main {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: start;
+}
+
+.hero-copy h2 {
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.hero-eyebrow {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.hero-desc {
+  max-width: 760px;
+  margin: 14px 0 0;
+  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.84);
+}
+
+.hero-tags,
+.panel-actions,
+.chart-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.hero-metrics {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.metric-card {
+  padding: 16px 18px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.metric-label {
+  display: block;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.metric-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.metric-time {
   font-size: 16px;
 }
 
-/* 保留原有样式以防兼容性问题 */
-.chart1 {
-  width: 50%;
-  height: 40vh;
-  display: inline-block;
+.metric-hint {
+  margin: 10px 0 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.78);
 }
-.chart2 {
-  width: 50%;
-  height: 40vh;
-  display: inline-block;
+
+.tree-search {
+  margin-bottom: 16px;
 }
-.chart3 {
-  width: 50%;
-  height: 40vh;
-  display: inline-block;
+
+.tree-wrapper {
+  min-height: 640px;
+  max-height: 72vh;
+  overflow: auto;
+  padding: 12px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.88));
 }
-.chart4 {
-  width: 50%;
-  display: inline-block;
-  height: 40vh;
+
+.filter-panel,
+.chart-panel {
+  margin-bottom: 20px;
 }
-.chart5 {
-  width: 50%;
-  display: inline-block;
-  height: 40vh;
+
+.query-form :deep(.el-form-item) {
+  margin-right: 18px;
+}
+
+.field-suffix {
+  margin-left: 8px;
+  color: var(--text-secondary);
+}
+
+.chart-summary-bar {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: linear-gradient(90deg, rgba(15, 118, 110, 0.08), rgba(37, 99, 235, 0.06));
+  color: var(--text-secondary);
+}
+
+.chart-grid {
+  gap: 16px;
+}
+
+.chart-grid-single {
+  grid-template-columns: 1fr;
+}
+
+.chart-grid-multi {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.chart-card {
+  padding: 16px;
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
+    linear-gradient(135deg, rgba(15, 118, 110, 0.05), rgba(37, 99, 235, 0.05));
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.chart-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.chart-card-head h4 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 16px;
+}
+
+.chart-card-head p {
+  margin: 6px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 48vh;
+  min-height: 380px;
+  border-radius: 18px;
+}
+
+.empty-block {
+  min-height: 56vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 1400px) {
+  .hero-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 992px) {
+  .hero-main,
+  .chart-grid-multi {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-tags,
+  .panel-actions,
+  .chart-status {
+    justify-content: flex-start;
+  }
+
+  .chart-canvas {
+    height: 42vh;
+    min-height: 320px;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-panel,
+  .tree-panel,
+  .filter-panel,
+  .chart-panel {
+    padding: 16px;
+    border-radius: 20px;
+  }
+
+  .hero-copy h2 {
+    font-size: 24px;
+  }
+
+  .hero-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .tree-wrapper {
+    min-height: 360px;
+  }
 }
 </style>