完善设备查看会话记录功能，新增客户名称解析，更新统计输出和查询输入结构，优化前端筛选界面以支持设备名称和查看内容的模糊筛选。

“wangming”
1 parent a382d270
Showing 13 changed files with 858 additions and 216 deletions
docs/md/sbRecords接口测试报告.md
docs/md/移动端设备查看埋点方案.md
docs/sql/add_sb_records_content_name.sql
docs/sql/add_sb_records_customer_name.sql
docs/sql/add_sb_records_device_name.sql
uniapp_jiju/apis/modules/oauth.js
uniapp_jiju/common/mixins/viewRecordMixin.js
机具（服务端）/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/SbRecords/SbRecordsStatisticsOutput.cs
机具（服务端）/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/SbRecordsListQueryInput.cs
机具（服务端）/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/SbRecordsEntity.cs
机具（服务端）/netcore/src/Modularity/Extend/NCC.Extend.Entitys/NCC.Extend.Entitys.xml
机具（服务端）/netcore/src/Modularity/Extend/NCC.Extend/SbRecordsService.cs
机具（管理端）/src/views/sbRecords/index.vue
+# sbRecords 统计接口测试报告
+
+## 测试时间
+2025-02-17
+
+## 一、Statistics 接口
+
+**接口**：`GET /api/Extend/SbRecords/Actions/Statistics`
+
+**参数**：与列表查询一致，支持 addTime、type、addUser、reId、customerName、deviceName、contentName
+
+**返回结构**：
+```json
+{
+  "totalCount": 25,
+  "completeCount": 24,
+  "totalDurationSeconds": 212,
+  "avgDurationSeconds": 8.83,
+  "byType": [{ "name": "备件支持", "value": 6 }, ...],
+  "byEquipment": [{ "name": "设备名称", "value": 3 }, ...],
+  "byContent": [{ "name": "查看内容", "value": 1 }, ...],
+  "byCustomer": [...],
+  "byUser": [...]
+}
+```
+
+**测试结果**：✅ 通过
+- 返回新增字段：completeCount、totalDurationSeconds、avgDurationSeconds、byContent
+- byEquipment 已改为按 F_DeviceName 分组
+- 筛选参数生效
+
+## 二、GetList 接口
+
+**接口**：`GET /api/Extend/SbRecords`
+
+**新增筛选参数**：deviceName、contentName（模糊匹配）
+
+**测试结果**：✅ 通过
+- deviceName=动力、contentName=猫 等筛选正常
+- 返回 deviceName、contentName 字段
+
+## 三、curl 示例
+
+```bash
+# 1. 获取 Token
+TOKEN=$(curl -s -X POST "http://localhost:2011/api/oauth/Login" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "account=admin&password=66762a3ccde2a2cff3060d7a4a0a576b" \
+  | python3 -c "import sys,json; print(json.load(sys.stdin)['data']['token'])")
+
+# 2. 调用 Statistics
+curl -s -X GET "http://localhost:2011/api/Extend/SbRecords/Actions/Statistics" \
+  -H "Authorization: $TOKEN"
+
+# 3. 带筛选参数
+curl -s -X GET "http://localhost:2011/api/Extend/SbRecords/Actions/Statistics?type=故障排查" \
+  -H "Authorization: $TOKEN"
+
+# 4. 列表筛选
+curl -s -X GET "http://localhost:2011/api/Extend/SbRecords?deviceName=动力&contentName=猫" \
+  -H "Authorization: $TOKEN"
+```
+
+## 四、结论
+
+| 接口 | 状态 |
+|------|------|
+| Statistics | ✅ 通过 |
+| GetList（deviceName/contentName 筛选） | ✅ 通过 |
+
+## 五、页面 UI 修复验证（2025-02-17）
+
+### 修复项
+
+| 问题 | 修复方案 | 验证要点 |
+|------|----------|----------|
+| 表格重复「序号」列 | NCC-table 默认 `hasNO=true` 会渲染序号列，与自定义 `indexMethod` 列重复；设置 `:has-n-o="false"` 关闭内置序号 | 表头仅有一列「序号」，分页序号正确 |
+| 空值显示不规范 | 项目规范：没有信息的字段显示「无」 | 设备名称、查看内容、查看客户、查看用户、记录类型 为空时显示「无」 |
+| 操作列未左对齐 | 项目规范：操作按钮必须左对齐 | 操作列「删除」按钮左对齐 |
+| 统计卡片内边距 | 项目规范：卡片内边距 12px | 统计卡片 padding 为 12px |
+
+### 验证清单
+
+- [ ] 表格表头无重复「序号」列
+- [ ] 分页切换后序号连续（如第 2 页从 21 开始）
+- [ ] 空值字段显示「无」而非空白或「-」
+- [ ] 操作列「删除」按钮左对齐
+- [ ] 统计卡片布局符合规范（100px 高、12px 内边距、12px 圆角）
+- [ ] 图表展开后主内容区可正常滚动
+# 移动端设备查看埋点方案
+
+## 一、需求与目标
+
+- **需求**：记录用户**在哪个板块**看了**哪个设备**，以及**停留时长**
+- **对接接口**：`StartViewRecord`（开始会话）、`EndViewRecord`（结束会话）
+- **数据落库**：`sb_records` 表（F_ReId、F_Type、F_ContentName、F_DeviceName、F_AddTime、F_LeaveTime、F_DurationSeconds）
+
+---
+
+## 二、首页 8 个板块 vs 需埋点 6 个
+
+| 序号 | 板块名称 | 路由/页面 | 是否埋点 | 说明 |
+|------|----------|-----------|----------|------|
+| 1 | 故障排查 | `/pages/new/gzpc/gzpc` → `detail` | ✅ | 有设备/故障关联 |
+| 2 | 知识库 | `/pages/new/zsk/zsk` → `detail` | ✅ | 有产品/设备关联 |
+| 3 | 我的设备 | `/pages/myDevice/myDevice` → `detail` | ✅ | 直接是设备 |
+| 4 | 资料管理 | `/pages/new/zlgl/zlgl` → `detail` | ✅ | 有设备/资料关联 |
+| 5 | 备件支持 | `/pages/new/bjzc/bjzc` → `detail` | ✅ | 有产品/设备关联 |
+| 6 | 培训展示 | `/pages/new/pxzs/pxzs` → `detail` | ✅ | 有产品关联 |
+| 7 | 信息推送 | `/pages/new/xxts/xxts` | ❌ | 无设备维度 |
+| 8 | 用户反馈 | `/pages/new/yhfk/yhfk` | ❌ | 无设备维度 |
+
+---
+
+## 三、埋点粒度与 reId 约定
+
+**原则**：只在**详情页**埋点（列表页无具体“设备/资料”对象）。  
+**reId**：当前详情对应的**主实体 id**（用于 sb_records 的 F_ReId）。  
+**type**：板块名称，用于区分来源。
+
+| 板块 | 详情页路径 | reId 来源 | type 值 | deviceName（设备名称） | contentName（查看内容） |
+|------|------------|-----------|---------|------------------------|-------------------------|
+| 故障排查 | `gzpc/detail` | `info.id` | 故障排查 | `info.sbmc` | `info.code`（故障代码） |
+| 知识库 | `zsk/detail` | `detail.id` | 知识库 | 后端根据 sssb 查 cpgl | `detail.sbm` |
+| 我的设备 | `myDevice/detail` | `options.id` | 我的设备 | `detail.sbmc` | `detail.sbmc` |
+| 资料管理 | `zlgl/detail` | `info.id` | 资料管理 | `info.zlm` | `info.zlm` |
+| 备件支持 | `bjzc/detail` | `info.id` | 备件支持 | `info.glcpmc` | `info.mc` |
+| 培训展示 | `pxzs/detail` | `info.id` | 培训展示 | `info.sbmc` | `info.pxmc` |
+
+> **说明**：sb_records 通过 **记录类型 + 设备名称 + 查看内容** 三字段定位。F_Type、F_DeviceName、F_ContentName 均可由前端传入，未传时后端根据 type+reId 从对应表自动解析。
+
+---
+
+## 四、埋点时机
+
+| 时机 | 动作 | 说明 |
+|------|------|------|
+| 进入详情页 | 调用 `StartViewRecord` | `onLoad` 或 `onShow` 中，拿到 reId、type 后调用 |
+| 离开详情页 | 调用 `EndViewRecord` | `onUnload` 或 `onHide` 中，传入之前保存的 recordId |
+
+**推荐**：
+- **Start**：在详情数据加载完成后（如 `gzpcxq`、`fetchDetail` 等接口返回后）调用，确保有 reId
+- **End**：在 `onUnload` 中调用（页面销毁时），`onHide` 可能因切后台未真正离开，可选补充
+
+---
+
+## 五、各详情页数据流与埋点接入点
+
+### 5.1 故障排查详情 `gzpc/detail.vue`
+
+- **进入**：`onLoad` 从 `uni.getStorageSync("detail")` 取 `info`，调用 `gzpcxq({ id: info.id })`
+- **reId**：`this.info.id`（故障 id）或 `this.info.sssbId`（若有）
+- **type**：`"故障排查"`
+- **埋点**：`gzpcxq` 成功后 `StartViewRecord`；`ht()` 返回 / `onUnload` 时 `EndViewRecord`
+
+### 5.2 知识库详情 `zsk/detail.vue`
+
+- **进入**：`onLoad(options)` 取 `options.id`，调用 `fetchDetail` → `zskxq({ id })`
+- **reId**：`this.id` 或 `this.detail.id`
+- **type**：`"知识库"`
+- **埋点**：`fetchDetail` 成功后 `StartViewRecord`；`onUnload` 时 `EndViewRecord`
+
+### 5.3 我的设备详情 `myDevice/detail.vue`
+
+- **进入**：`onLoad(options)` 取 `options.id`，调用 `fetchDeviceDetail(deviceId)`
+- **reId**：`options.id` 或 `this.detail.id`
+- **type**：`"我的设备"`
+- **埋点**：`fetchDeviceDetail` 成功后 `StartViewRecord`；`onUnload` 时 `EndViewRecord`
+
+### 5.4 资料管理详情 `zlgl/detail.vue`
+
+- **进入**：`onLoad(options)` 取 `options.id`，调用详情接口
+- **reId**：`options.id` 或 `this.info.id`
+- **type**：`"资料管理"`
+- **埋点**：详情加载成功后 `StartViewRecord`；`onUnload` 时 `EndViewRecord`
+
+### 5.5 备件支持详情 `bjzc/detail.vue`
+
+- **进入**：`onLoad` 从 `uni.getStorageSync("detail")` 取 info，调用 `bjzcxq`
+- **reId**：`this.info.id`（备件 id）
+- **type**：`"备件支持"`
+- **埋点**：`bjzcxq` 成功后 `StartViewRecord`；`onUnload` 时 `EndViewRecord`
+
+### 5.6 培训展示详情 `pxzs/detail.vue`
+
+- **进入**：`onLoad` 从 `uni.getStorageSync("detail")` 取 info，调用 `pxzsxqs`
+- **reId**：`info.id`（培训 id）
+- **type**：`"培训展示"`
+- **埋点**：`pxzsxqs` 成功后 `StartViewRecord`；`onUnload` 时 `EndViewRecord`
+
+---
+
+## 六、前端实现要点
+
+### 6.1 API 封装
+
+在 `uniapp_jiju/apis/modules/oauth.js`（或新建 `sbRecords.js`）中增加：
+
+```javascript
+// 开始设备查看会话（进入详情页时调用）
+startViewRecord(data) {
+  return request.post('/api/Extend/SbRecords/Actions/StartViewRecord', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+},
+// 结束设备查看会话（离开详情页时调用）
+endViewRecord(data) {
+  return request.post('/api/Extend/SbRecords/Actions/EndViewRecord', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+```
+
+> 注意：项目规范 GET 用 data 传参；POST 表单可用 `application/x-www-form-urlencoded`，参数为 `reId`、`type`、`recordId`。
+
+### 6.2 参数格式
+
+- **StartViewRecord**：`reId`（必填）、`type`（必填）、`contentName`（可选，查看内容）、`deviceName`（可选，设备名称）、`item1`（可选）、`item2`（可选）
+- **EndViewRecord**：`recordId`（必填，Start 返回的 id）
+
+> contentName、deviceName 未传时，后端根据 type+reId 从对应表自动解析。
+
+### 6.3 通用逻辑（可抽成 mixin）
+
+```javascript
+// 伪代码
+data() {
+  return { viewRecordId: null }
+},
+methods: {
+  async startViewTracking(reId, type, contentName, deviceName) {
+    if (!reId || !type) return
+    try {
+      const data = { reId, type }
+      if (contentName) data.contentName = contentName
+      if (deviceName) data.deviceName = deviceName
+      const res = await this.API.startViewRecord(data)
+  async endViewTracking() {
+    if (!this.viewRecordId) return
+    try {
+      await this.API.endViewRecord({ recordId: this.viewRecordId })
+    } catch (e) { console.warn('EndViewRecord failed', e) }
+    this.viewRecordId = null
+  }
+},
+onUnload() {
+  this.endViewTracking()
+}
+```
+
+各详情页在数据加载成功后调用 `this.startViewTracking(reId, type, contentName, deviceName)`，在 `onUnload` 中调用 `this.endViewTracking()`。
+
+---
+
+## 七、实现顺序建议
+
+1. **API 封装**：在 `oauth.js` 或新建模块中增加 `startViewRecord`、`endViewRecord`
+2. **Mixin 或工具函数**：抽 `startViewTracking`、`endViewTracking`，避免重复代码
+3. **按页面接入**：依次在 6 个详情页接入埋点（建议顺序：我的设备 → 故障排查 → 知识库 → 资料管理 → 备件支持 → 培训展示）
+4. **联调与验证**：真机/模拟器操作，查 `sb_records` 表确认 F_Type、F_DeviceName、F_ContentName、F_DurationSeconds 正确
+
+---
+
+## 八、注意事项
+
+- **未登录**：若接口需 Token，未登录用户可能调用失败，可静默失败或跳过埋点
+- **快速返回**：用户进入后立即返回，End 仍会执行，Duration 可能为 0 或很小，属正常
+- **页面栈**：`navigateBack` 会触发 `onUnload`，可正常执行 End；`reLaunch`、`redirectTo` 同理
+- **recordId 存储**：必须存在组件 data 中，`onUnload` 时能访问到，避免用全局变量导致多页面冲突
+-- 为 sb_records 表新增字段，实现「记录类型+设备名称+查看内容」三字段定位
+-- 执行时间：按需执行（若 F_ContentName 已存在，可跳过第一条）
+
+-- 1. 查看内容（故障代码、知识名、资料名、备件名、培训名等）
+ALTER TABLE `sb_records`
+  ADD COLUMN `F_ContentName` varchar(200) NULL COMMENT '查看内容（故障代码、知识名、资料名等）' AFTER `F_Type`;
+
+-- 2. 设备名称（所属设备、关联产品/设备名）
+ALTER TABLE `sb_records`
+  ADD COLUMN `F_DeviceName` varchar(200) NULL COMMENT '设备名称（所属设备、关联产品名）' AFTER `F_Type`;
+-- 为 sb_records 表新增 F_CustomerName 字段
+-- 用于存储「查看客户」，根据记录类型+ReId 从 Khsb/Zlgl/Gzcx 等表解析
+-- 新记录由 StartViewRecord 自动填充；历史记录可保留空，列表接口会回退到 Khsb 子查询（仅对「我的设备」有效）
+
+ALTER TABLE `sb_records`
+  ADD COLUMN `F_CustomerName` varchar(200) NULL COMMENT '查看客户（所属客户）' AFTER `F_DeviceName`;
+-- 为 sb_records 表新增 F_DeviceName 字段（若已执行 add_sb_records_content_name.sql 可单独执行本脚本）
+-- 实现「记录类型+设备名称+查看内容」三字段定位
+
+ALTER TABLE `sb_records`
+  ADD COLUMN `F_DeviceName` varchar(200) NULL COMMENT '设备名称（所属设备、关联产品名）' AFTER `F_Type`;
@@ -236,4 +236,12 @@ export default {
 	hqlogo(data){
 		return request.get('/api/Extend/Logogl?lx=' + '移动端')
 	},
+	// 开始设备查看会话（进入详情页时调用，用于记录停留时长）
+	startViewRecord(data) {
+		return request.postFormData('/api/Extend/SbRecords/Actions/StartViewRecord', data)
+	},
+	// 结束设备查看会话（离开详情页时调用，用于计算停留时长）
+	endViewRecord(data) {
+		return request.postFormData('/api/Extend/SbRecords/Actions/EndViewRecord', data)
+	},
 }
+/**
+ * 设备查看记录埋点 mixin
+ * 用于详情页：进入时 StartViewRecord，离开时 EndViewRecord
+ * 使用：在详情页 mixins: [viewRecordMixin]，数据加载成功后调用 this.startViewTracking(reId, type, contentName, deviceName)
+ * 记录类型、设备名称、查看内容 三字段便于定位
+ */
+export default {
+	data() {
+		return {
+			viewRecordId: null
+		}
+	},
+	methods: {
+		async startViewTracking(reId, type, contentName, deviceName) {
+			if (!reId || !type) return
+			try {
+				const data = { reId: String(reId), type }
+				if (contentName) data.contentName = String(contentName)
+				if (deviceName) data.deviceName = String(deviceName)
+				const res = await this.API.startViewRecord(data)
+				if (res && res.data) {
+					this.viewRecordId = res.data
+				}
+			} catch (e) {
+				console.warn('StartViewRecord failed', e)
+			}
+		},
+		async endViewTracking() {
+			if (!this.viewRecordId) return
+			try {
+				await this.API.endViewRecord({ recordId: this.viewRecordId })
+			} catch (e) {
+				console.warn('EndViewRecord failed', e)
+			}
+			this.viewRecordId = null
+		}
+	},
+	onUnload() {
+		this.endViewTracking()
+	}
+}
@@ -10,12 +10,24 @@ namespace NCC.Extend.Entitys.Dto.SbRecords
         /// <summary>总记录数</summary>
         public int TotalCount { get; set; }
+        /// <summary>完整记录数（有离开时间的记录）</summary>
+        public int CompleteCount { get; set; }
+
+        /// <summary>总停留时长（秒）</summary>
+        public long TotalDurationSeconds { get; set; }
+
+        /// <summary>平均停留时长（秒，仅统计完整记录）</summary>
+        public double AvgDurationSeconds { get; set; }
+
         /// <summary>按记录类型统计 [{ name, value }]</summary>
         public List<SbRecordsStatisticsItem> ByType { get; set; }
-        /// <summary>按关联设备统计（前 N 条）</summary>
+        /// <summary>按设备名称统计（前 N 条，使用 F_DeviceName）</summary>
         public List<SbRecordsStatisticsItem> ByEquipment { get; set; }
+        /// <summary>按查看内容统计（前 N 条，故障代码、知识名、培训名等）</summary>
+        public List<SbRecordsStatisticsItem> ByContent { get; set; }
+
         /// <summary>按客户统计（前 N 条）</summary>
         public List<SbRecordsStatisticsItem> ByCustomer { get; set; }
@@ -53,6 +53,15 @@ namespace NCC.Extend.Entitys.Dto.SbRecords
         /// 记录类型
         /// </summary>
         public string type { get; set; }
-        
+
+        /// <summary>
+        /// 设备名称（模糊筛选）
+        /// </summary>
+        public string deviceName { get; set; }
+
+        /// <summary>
+        /// 查看内容（模糊筛选）
+        /// </summary>
+        public string contentName { get; set; }
     }
 }
@@ -82,6 +82,12 @@ namespace NCC.Extend.Entitys
         /// </summary>
         [SugarColumn(ColumnName = "F_DeviceName")]
         public string DeviceName { get; set; }
+
+        /// <summary>
+        /// 查看客户（所属客户，根据记录类型+ReId 从 Khsb/Zlgl/Gzcx 等表解析）
+        /// </summary>
+        [SugarColumn(ColumnName = "F_CustomerName")]
+        public string CustomerName { get; set; }
     }
 }
 \ No newline at end of file
@@ -3737,11 +3737,23 @@
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.TotalCount">
             <summary>总记录数</summary>
         </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.CompleteCount">
+            <summary>完整记录数（有离开时间的记录）</summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.TotalDurationSeconds">
+            <summary>总停留时长（秒）</summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.AvgDurationSeconds">
+            <summary>平均停留时长（秒，仅统计完整记录）</summary>
+        </member>
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.ByType">
             <summary>按记录类型统计 [{ name, value }]</summary>
         </member>
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.ByEquipment">
-            <summary>按关联设备统计（前 N 条）</summary>
+            <summary>按设备名称统计（前 N 条，使用 F_DeviceName）</summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.ByContent">
+            <summary>按查看内容统计（前 N 条，故障代码、知识名、培训名等）</summary>
         </member>
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsStatisticsOutput.ByCustomer">
             <summary>按客户统计（前 N 条）</summary>
@@ -3879,9 +3891,19 @@
             记录类型
             </summary>
         </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListOutput.contentName">
+            <summary>
+            查看内容（故障代码、知识名、资料名、备件名、培训名等）
+            </summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListOutput.deviceName">
+            <summary>
+            设备名称（所属设备、关联产品名；优先 F_DeviceName，无则根据 reId 查表）
+            </summary>
+        </member>
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListOutput.equipmentName">
             <summary>
-            关联设备（原关联记录，展示设备名称）
+            关联设备（兼容旧逻辑，展示设备名称；优先使用 deviceName）
             </summary>
         </member>
         <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListOutput.customerName">
@@ -3949,6 +3971,16 @@
             记录类型
             </summary>
         </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListQueryInput.deviceName">
+            <summary>
+            设备名称（模糊筛选）
+            </summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsListQueryInput.contentName">
+            <summary>
+            查看内容（模糊筛选）
+            </summary>
+        </member>
         <member name="T:NCC.Extend.Entitys.Dto.SbRecords.SbRecordsUpInput">
             <summary>
             查看历史记录更新输入参数
@@ -8763,6 +8795,21 @@
             记录类型
             </summary>
         </member>
+        <member name="P:NCC.Extend.Entitys.SbRecordsEntity.ContentName">
+            <summary>
+            查看内容（故障代码、知识名、资料名、备件名、培训名等）
+            </summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.SbRecordsEntity.DeviceName">
+            <summary>
+            设备名称（所属设备、关联产品名，便于「记录类型+设备名称+查看内容」三字段定位）
+            </summary>
+        </member>
+        <member name="P:NCC.Extend.Entitys.SbRecordsEntity.CustomerName">
+            <summary>
+            查看客户（所属客户，根据记录类型+ReId 从 Khsb/Zlgl/Gzcx 等表解析）
+            </summary>
+        </member>
         <member name="T:NCC.Extend.Entitys.SbwhryEntity">
             <summary>
             设备维护人员
@@ -65,6 +65,7 @@ namespace NCC.Extend.SbRecords
             var now = DateTime.Now;
             var resolvedContentName = !string.IsNullOrWhiteSpace(contentName) ? contentName : await ResolveContentNameAsync(type, reId);
             var resolvedDeviceName = !string.IsNullOrWhiteSpace(deviceName) ? deviceName : await ResolveDeviceNameAsync(type, reId);
+            var resolvedCustomerName = await ResolveCustomerNameAsync(type, reId);
             var entity = new SbRecordsEntity
             {
@@ -79,7 +80,8 @@ namespace NCC.Extend.SbRecords
                 Item2 = item2,
                 Type = type,
                 ContentName = resolvedContentName,
-                DeviceName = resolvedDeviceName
+                DeviceName = resolvedDeviceName,
+                CustomerName = resolvedCustomerName
             };
             var isOk = await _db.Insertable(entity).IgnoreColumns(ignoreNullColumn: true).ExecuteCommandAsync();
@@ -196,6 +198,59 @@ namespace NCC.Extend.SbRecords
         }
         /// <summary>
+        /// 根据 type 和 reId 从对应业务表解析查看客户（所属客户）。
+        /// 我的设备：ReId=Khsb.Id；故障排查/知识库/资料管理/备件支持/培训展示：通过产品关联 Khsb.Fl 获取 Sskh。
+        /// </summary>
+        private async Task<string> ResolveCustomerNameAsync(string type, string reId)
+        {
+            if (string.IsNullOrWhiteSpace(reId)) return null;
+            var t = (type ?? "").Trim();
+
+            if (t.Contains("我的设备") || t.Contains("查看设备"))
+            {
+                var sskh = await _db.Queryable<KhsbEntity>().Where(x => x.Id == reId).Select(x => x.Sskh).FirstAsync();
+                return sskh;
+            }
+            if (t.Contains("故障排查") || t.Contains("故障查询"))
+            {
+                var zlFl = await _db.Queryable<GzcxEntity, ZlglEntity>((g, z) => g.Sssb == z.Id)
+                    .Where((g, z) => g.Id == reId)
+                    .Select((g, z) => z.Fl)
+                    .FirstAsync();
+                if (string.IsNullOrEmpty(zlFl)) return null;
+                return await _db.Queryable<KhsbEntity>().Where(k => k.Fl == zlFl && k.Sskh != null && k.Sskh != "").Select(k => k.Sskh).FirstAsync();
+            }
+            if (t.Contains("知识库"))
+            {
+                var sssb = await _db.Queryable<ZskEntity>().Where(x => x.Id == reId).Select(x => x.Sssb).FirstAsync();
+                if (string.IsNullOrEmpty(sssb)) return null;
+                return await _db.Queryable<KhsbEntity>().Where(k => (k.Fl == sssb) && k.Sskh != null && k.Sskh != "").Select(k => k.Sskh).FirstAsync();
+            }
+            if (t.Contains("资料管理"))
+            {
+                var zlFl = await _db.Queryable<ZlglEntity>().Where(x => x.Id == reId).Select(x => x.Fl).FirstAsync();
+                if (string.IsNullOrEmpty(zlFl)) return null;
+                return await _db.Queryable<KhsbEntity>().Where(k => k.Fl == zlFl && k.Sskh != null && k.Sskh != "").Select(k => k.Sskh).FirstAsync();
+            }
+            if (t.Contains("备件支持"))
+            {
+                var zlFl = await _db.Queryable<BjxxEntity, ZlglEntity>((b, z) => b.Sssb == z.Id)
+                    .Where((b, z) => b.Id == reId)
+                    .Select((b, z) => z.Fl)
+                    .FirstAsync();
+                if (string.IsNullOrEmpty(zlFl)) return null;
+                return await _db.Queryable<KhsbEntity>().Where(k => k.Fl == zlFl && k.Sskh != null && k.Sskh != "").Select(k => k.Sskh).FirstAsync();
+            }
+            if (t.Contains("培训展示"))
+            {
+                var sssb = await _db.Queryable<PxzsEntity>().Where(x => x.Id == reId).Select(x => x.Sssb).FirstAsync();
+                if (string.IsNullOrEmpty(sssb)) return null;
+                return await _db.Queryable<KhsbEntity>().Where(k => k.Fl == sssb && k.Sskh != null && k.Sskh != "").Select(k => k.Sskh).FirstAsync();
+            }
+            return null;
+        }
+
+        /// <summary>
         /// 结束一条设备查看会话记录（离开页面时调用），并计算停留时长。
         /// </summary>
         /// <param name="recordId">开始会话时返回的记录 Id。</param>
@@ -270,35 +325,60 @@ namespace NCC.Extend.SbRecords
                 .WhereIF(queryAddTime != null, p => p.AddTime <= new DateTime(endAddTime.ToDate().Year, endAddTime.ToDate().Month, endAddTime.ToDate().Day, 23, 59, 59))
                 .WhereIF(!string.IsNullOrEmpty(input.addUser), p => p.AddUser.Equals(input.addUser))
                 .WhereIF(!string.IsNullOrEmpty(input.type), p => p.Type.Contains(input.type))
+                .WhereIF(!string.IsNullOrEmpty(input.deviceName), p => p.DeviceName != null && p.DeviceName.Contains(input.deviceName))
+                .WhereIF(!string.IsNullOrEmpty(input.contentName), p => p.ContentName != null && p.ContentName.Contains(input.contentName))
                 .WhereIF(!string.IsNullOrEmpty(input.customerName), p => SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == p.ReId && k.Sskh != null && k.Sskh.Contains(input.customerName)).Any());
             var total = await baseQuery.CountAsync();
             const int topN = 10;
+
+            var completeQuery = baseQuery.Where(p => p.LeaveTime != null);
+            var completeCount = await completeQuery.CountAsync();
+            var totalDuration = completeCount > 0 ? await completeQuery.SumAsync(p => p.DurationSeconds) : 0L;
+            var avgDuration = completeCount > 0 ? (double)totalDuration / completeCount : 0;
+
             var byTypeList = await baseQuery.GroupBy(p => p.Type ?? "")
                 .Select(g => new { Name = g.Type ?? "未分类", Value = SqlFunc.AggregateCount(g.Id) })
                 .ToListAsync();
             var byType = byTypeList.OrderByDescending(x => x.Value).Select(x => new SbRecordsStatisticsItem { Name = x.Name ?? "未分类", Value = x.Value }).ToList();
-            var byEquipmentRawList = await baseQuery.GroupBy(p => p.ReId)
-                .Select(g => new { ReId = g.ReId, Value = SqlFunc.AggregateCount(g.Id) })
+
+            var byEquipmentRawList = await baseQuery.GroupBy(p => p.DeviceName ?? "")
+                .Select(g => new { Name = g.DeviceName ?? "未记录", Value = SqlFunc.AggregateCount(g.Id) })
                 .ToListAsync();
-            var byEquipmentRaw = byEquipmentRawList.OrderByDescending(x => x.Value).Take(topN).ToList();
-            var reIds = byEquipmentRaw.Select(x => x.ReId).Distinct().ToList();
-            var eqNames = await _db.Queryable<ZsbtzEntity>().Where(t => reIds.Contains(t.Id)).Select(t => new { t.Id, t.Sbmc }).ToListAsync();
-            var khsbNames = await _db.Queryable<KhsbEntity>().Where(k => reIds.Contains(k.Id)).Select(k => new { k.Id, k.Sbmc }).ToListAsync();
-            var byEquipment = byEquipmentRaw.Select(x => new SbRecordsStatisticsItem
-            {
-                Name = eqNames.FirstOrDefault(e => e.Id == x.ReId)?.Sbmc ?? khsbNames.FirstOrDefault(k => k.Id == x.ReId)?.Sbmc ?? x.ReId ?? "-",
-                Value = x.Value
-            }).ToList();
-            var byUserRawList = await baseQuery.GroupBy(p => p.AddUser)
-                .Select(g => new { AddUser = g.AddUser, Value = SqlFunc.AggregateCount(g.Id) })
+            var byEquipment = byEquipmentRawList
+                .Where(x => !string.IsNullOrEmpty(x.Name))
+                .OrderByDescending(x => x.Value)
+                .Take(topN)
+                .Select(x => new SbRecordsStatisticsItem { Name = x.Name ?? "未记录", Value = x.Value })
+                .ToList();
+
+            var byContentRawList = await baseQuery.GroupBy(p => p.ContentName ?? "")
+                .Select(g => new { Name = g.ContentName ?? "未记录", Value = SqlFunc.AggregateCount(g.Id) })
+                .ToListAsync();
+            var byContent = byContentRawList
+                .Where(x => !string.IsNullOrEmpty(x.Name))
+                .OrderByDescending(x => x.Value)
+                .Take(topN)
+                .Select(x => new SbRecordsStatisticsItem { Name = x.Name ?? "未记录", Value = x.Value })
+                .ToList();
+            // 按查看用户统计：LEFT JOIN UserEntity 直接获取 RealName，避免 GroupBy 分组键与后续查表不一致
+            var byUserQuery = _db.Queryable<SbRecordsEntity, UserEntity>((r, u) => new JoinQueryInfos(JoinType.Left, r.AddUser == u.Id))
+                .WhereIF(!string.IsNullOrEmpty(input.reId), (r, u) => r.ReId.Equals(input.reId))
+                .WhereIF(queryAddTime != null, (r, u) => r.AddTime >= new DateTime(startAddTime.ToDate().Year, startAddTime.ToDate().Month, startAddTime.ToDate().Day, 0, 0, 0))
+                .WhereIF(queryAddTime != null, (r, u) => r.AddTime <= new DateTime(endAddTime.ToDate().Year, endAddTime.ToDate().Month, endAddTime.ToDate().Day, 23, 59, 59))
+                .WhereIF(!string.IsNullOrEmpty(input.addUser), (r, u) => r.AddUser.Equals(input.addUser))
+                .WhereIF(!string.IsNullOrEmpty(input.type), (r, u) => r.Type != null && r.Type.Contains(input.type))
+                .WhereIF(!string.IsNullOrEmpty(input.deviceName), (r, u) => r.DeviceName != null && r.DeviceName.Contains(input.deviceName))
+                .WhereIF(!string.IsNullOrEmpty(input.contentName), (r, u) => r.ContentName != null && r.ContentName.Contains(input.contentName))
+                .WhereIF(!string.IsNullOrEmpty(input.customerName), (r, u) => SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == r.ReId && k.Sskh != null && k.Sskh.Contains(input.customerName)).Any());
+            var byUserRawList = await byUserQuery
+                .GroupBy((r, u) => r.AddUser ?? "")
+                .Select((r, u) => new { AddUser = r.AddUser ?? "", RealName = SqlFunc.AggregateMax(u.RealName), Value = SqlFunc.AggregateCount(r.Id) })
                 .ToListAsync();
-            var byUserRaw = byUserRawList.OrderByDescending(x => x.Value).Take(topN).ToList();
-            var userIds = byUserRaw.Select(x => x.AddUser).Where(x => !string.IsNullOrEmpty(x)).Distinct().ToList();
-            var userNames = await _db.Queryable<UserEntity>().Where(u => userIds.Contains(u.Id)).Select(u => new { u.Id, u.RealName }).ToListAsync();
+            var byUserRaw = byUserRawList.Where(x => !string.IsNullOrEmpty(x.AddUser)).OrderByDescending(x => x.Value).Take(topN).ToList();
             var byUser = byUserRaw.Select(x => new SbRecordsStatisticsItem
             {
-                Name = string.IsNullOrEmpty(x.AddUser) ? "-" : (userNames.FirstOrDefault(u => u.Id == x.AddUser)?.RealName ?? x.AddUser),
+                Name = string.IsNullOrEmpty(x.RealName) ? x.AddUser : x.RealName,
                 Value = x.Value
             }).ToList();
             var byCustomerRawList = await _db.Queryable<SbRecordsEntity, KhsbEntity>((r, k) => r.ReId == k.Id)
@@ -317,8 +397,12 @@ namespace NCC.Extend.SbRecords
             return new SbRecordsStatisticsOutput
             {
                 TotalCount = total,
+                CompleteCount = completeCount,
+                TotalDurationSeconds = totalDuration,
+                AvgDurationSeconds = Math.Round(avgDuration, 2),
                 ByType = byType.Select(x => new SbRecordsStatisticsItem { Name = x.Name, Value = x.Value }).ToList(),
                 ByEquipment = byEquipment,
+                ByContent = byContent,
                 ByCustomer = byCustomer,
                 ByUser = byUser
             };
@@ -375,6 +459,8 @@ namespace NCC.Extend.SbRecords
                 .WhereIF(queryAddTime != null, p => p.AddTime >= new DateTime(startAddTime.ToDate().Year, startAddTime.ToDate().Month, startAddTime.ToDate().Day, 0, 0, 0))
                 .WhereIF(queryAddTime != null, p => p.AddTime <= new DateTime(endAddTime.ToDate().Year, endAddTime.ToDate().Month, endAddTime.ToDate().Day, 23, 59, 59))
                 .WhereIF(!string.IsNullOrEmpty(input.addUser), p => p.AddUser.Equals(input.addUser))
+                .WhereIF(!string.IsNullOrEmpty(input.deviceName), p => p.DeviceName != null && p.DeviceName.Contains(input.deviceName))
+                .WhereIF(!string.IsNullOrEmpty(input.contentName), p => p.ContentName != null && p.ContentName.Contains(input.contentName))
                 .WhereIF(!string.IsNullOrEmpty(input.customerName), p => SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == p.ReId && k.Sskh != null && k.Sskh.Contains(input.customerName)).Any())
                 .WhereIF(!string.IsNullOrEmpty(input.item1), p => p.Item1.Contains(input.item1))
                 .WhereIF(!string.IsNullOrEmpty(input.item2), p => p.Item2.Contains(input.item2))
@@ -386,7 +472,7 @@ namespace NCC.Extend.SbRecords
                     contentName = it.ContentName,
                     deviceName = it.DeviceName,
                     equipmentName = SqlFunc.IsNull(it.DeviceName, SqlFunc.IsNull(SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sbmc), SqlFunc.Subqueryable<ZsbtzEntity>().Where(t => t.Id == it.ReId).Select(t => t.Sbmc))),
-                    customerName = SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sskh),
+                    customerName = SqlFunc.IsNull(it.CustomerName, SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sskh)),
                     addTime = it.AddTime,
                     addUser = SqlFunc.Subqueryable<UserEntity>().Where(u => u.Id == it.AddUser).Select(u => u.RealName),
                     enable = it.Enable,
@@ -429,6 +515,8 @@ namespace NCC.Extend.SbRecords
                 .WhereIF(queryAddTime != null, p => p.AddTime >= new DateTime(startAddTime.ToDate().Year, startAddTime.ToDate().Month, startAddTime.ToDate().Day, 0, 0, 0))
                 .WhereIF(queryAddTime != null, p => p.AddTime <= new DateTime(endAddTime.ToDate().Year, endAddTime.ToDate().Month, endAddTime.ToDate().Day, 23, 59, 59))
                 .WhereIF(!string.IsNullOrEmpty(input.addUser), p => p.AddUser.Equals(input.addUser))
+                .WhereIF(!string.IsNullOrEmpty(input.deviceName), p => p.DeviceName != null && p.DeviceName.Contains(input.deviceName))
+                .WhereIF(!string.IsNullOrEmpty(input.contentName), p => p.ContentName != null && p.ContentName.Contains(input.contentName))
                 .WhereIF(!string.IsNullOrEmpty(input.customerName), p => SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == p.ReId && k.Sskh != null && k.Sskh.Contains(input.customerName)).Any())
                 .WhereIF(!string.IsNullOrEmpty(input.item1), p => p.Item1.Contains(input.item1))
                 .WhereIF(!string.IsNullOrEmpty(input.item2), p => p.Item2.Contains(input.item2))
@@ -440,7 +528,7 @@ namespace NCC.Extend.SbRecords
                     contentName = it.ContentName,
                     deviceName = it.DeviceName,
                     equipmentName = SqlFunc.IsNull(it.DeviceName, SqlFunc.IsNull(SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sbmc), SqlFunc.Subqueryable<ZsbtzEntity>().Where(t => t.Id == it.ReId).Select(t => t.Sbmc))),
-                    customerName = SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sskh),
+                    customerName = SqlFunc.IsNull(it.CustomerName, SqlFunc.Subqueryable<KhsbEntity>().Where(k => k.Id == it.ReId).Select(k => k.Sskh)),
                     addTime = it.AddTime,
                     addUser = SqlFunc.Subqueryable<UserEntity>().Where(u => u.Id == it.AddUser).Select(u => u.RealName),
                     enable = it.Enable,
 <template>
-	<div class="NCC-common-layout">
+	<div class="NCC-common-layout sb-records-page">
 		<div class="NCC-common-layout-center">
-			<!-- 统计与图表 -->
-			<section class="sb-records-stats">
-				<div class="stats-total">
-					<span class="stats-total-label">记录总数</span>
-					<span class="stats-total-value">{{ statistics.totalCount }}</span>
-				</div>
-				<el-row :gutter="16" class="charts-row">
-					<el-col :span="12">
-						<div class="chart-card">
-							<div class="chart-title">按记录类型</div>
-							<div ref="chartByType" class="chart-dom"></div>
-						</div>
-					</el-col>
-					<el-col :span="12">
-						<div class="chart-card">
-							<div class="chart-title">按关联设备（Top10）</div>
-							<div ref="chartByEquipment" class="chart-dom"></div>
-						</div>
-					</el-col>
-					<el-col :span="12">
-						<div class="chart-card">
-							<div class="chart-title">按客户（Top10）</div>
-							<div ref="chartByCustomer" class="chart-dom"></div>
-						</div>
-					</el-col>
-					<el-col :span="12">
-						<div class="chart-card">
-							<div class="chart-title">按查看用户（Top10）</div>
-							<div ref="chartByUser" class="chart-dom"></div>
-						</div>
-					</el-col>
-				</el-row>
-			</section>
-
-			<el-row class="NCC-common-search-box" :gutter="16">
-				<el-form @submit.native.prevent>
-					<el-col :span="6">
-						<el-form-item label="关联设备">
-							<el-select v-model="query.reId" placeholder="请选择关联设备" clearable filterable>
-								<el-option v-for="item in reIdOptions" :key="item.id" :label="item.fullName" :value="item.id" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item label="查看客户">
-							<el-input v-model="query.customerName" placeholder="客户名称" clearable />
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item label="查看用户">
-							<userSelect v-model="query.addUser" placeholder="请选择查看用户" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item label="记录类型">
-							<el-input v-model="query.type" placeholder="记录类型" clearable />
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item>
-							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
-							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
-							<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
-							<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
-						</el-form-item>
-					</el-col>
-					<template v-if="showAll">
-						<el-col :span="6">
-							<el-form-item label="记录时间">
-								<el-date-picker v-model="query.addTime" type="datetimerange" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%" />
+			<!-- 1. 筛选区：紧凑卡片 -->
+			<section class="sb-records-filter">
+				<el-form @submit.native.prevent class="sb-records-form">
+					<el-row :gutter="16">
+						<el-col :xs="24" :sm="12" :md="8" :lg="6">
+							<el-form-item label="关联设备">
+								<el-select v-model="query.reId" placeholder="请选择" clearable filterable style="width:100%">
+									<el-option v-for="item in reIdOptions" :key="item.id" :label="item.fullName" :value="item.id" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="8" :lg="6">
+							<el-form-item label="查看客户">
+								<el-input v-model="query.customerName" placeholder="客户名称" clearable />
 							</el-form-item>
 						</el-col>
-					</template>
+						<el-col :xs="24" :sm="12" :md="8" :lg="6">
+							<el-form-item label="查看用户">
+								<userSelect v-model="query.addUser" placeholder="请选择" />
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :md="8" :lg="6">
+							<el-form-item label="记录类型">
+								<el-input v-model="query.type" placeholder="记录类型" clearable />
+							</el-form-item>
+						</el-col>
+						<template v-if="showAll">
+							<el-col :xs="24" :sm="12" :md="8" :lg="6">
+								<el-form-item label="设备名称">
+									<el-input v-model="query.deviceName" placeholder="设备名称" clearable />
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6">
+								<el-form-item label="查看内容">
+									<el-input v-model="query.contentName" placeholder="故障代码、知识名等" clearable />
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6">
+								<el-form-item label="记录时间">
+									<el-date-picker v-model="query.addTime" type="datetimerange" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始" end-placeholder="结束" style="width:100%" />
+								</el-form-item>
+							</el-col>
+						</template>
+						<el-col :xs="24" :sm="12" :md="8" :lg="6">
+							<el-form-item label-width="0" class="sb-records-form-actions">
+								<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
+								<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
+								<el-button type="text" @click="showAll=!showAll">
+									{{ showAll ? '收起' : '展开' }}
+									<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" style="margin-left:4px" />
+								</el-button>
+							</el-form-item>
+						</el-col>
+					</el-row>
 				</el-form>
-			</el-row>
+			</section>
-			<div class="NCC-common-layout-main NCC-flex-main">
-				<div class="NCC-common-head">
-					<div>
-						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
-						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
+			<!-- 2. 主内容区：统计 + 列表 -->
+			<div class="sb-records-scroll-wrap">
+				<section class="sb-records-content">
+					<!-- 统计卡片 -->
+					<div class="sb-records-summary">
+						<el-row :gutter="16">
+							<el-col :xs="12" :sm="12" :md="6">
+								<div class="stat-card stat-card-primary">
+									<div class="stat-card-label">记录总数</div>
+									<div class="stat-card-value">{{ statistics.totalCount }}</div>
+								</div>
+							</el-col>
+							<el-col :xs="12" :sm="12" :md="6">
+								<div class="stat-card stat-card-success">
+									<div class="stat-card-label">完整记录</div>
+									<div class="stat-card-value">{{ statistics.completeCount }}</div>
+								</div>
+							</el-col>
+							<el-col :xs="12" :sm="12" :md="6">
+								<div class="stat-card stat-card-warning">
+									<div class="stat-card-label">总停留时长</div>
+									<div class="stat-card-value">{{ formatDuration(statistics.totalDurationSeconds) }}</div>
+								</div>
+							</el-col>
+							<el-col :xs="12" :sm="12" :md="6">
+								<div class="stat-card stat-card-info">
+									<div class="stat-card-label">平均停留</div>
+									<div class="stat-card-value">{{ formatDuration(Math.round(statistics.avgDurationSeconds || 0)) }}</div>
+								</div>
+							</el-col>
+						</el-row>
 					</div>
-					<div class="NCC-common-head-right">
-						<el-tooltip effect="dark" content="刷新" placement="top">
-							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
-						</el-tooltip>
-						<screenfull isContainer />
+
+					<!-- 列表区 -->
+					<div class="sb-records-list">
+						<h3 class="sb-records-list-title">查看记录列表</h3>
+						<div class="sb-records-table-wrap">
+							<NCC-table v-loading="listLoading" :data="list" :has-n-o="false" class="sb-records-table">
+								<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
+								<el-table-column label="记录类型" align="left" width="100">
+									<template slot-scope="scope">{{ scope.row.type || '无' }}</template>
+								</el-table-column>
+								<el-table-column label="设备名称" align="left" min-width="120" show-overflow-tooltip>
+									<template slot-scope="scope">{{ scope.row.deviceName || scope.row.equipmentName || scope.row.reId || '无' }}</template>
+								</el-table-column>
+								<el-table-column label="查看内容" align="left" min-width="120" show-overflow-tooltip>
+									<template slot-scope="scope">{{ scope.row.contentName || '无' }}</template>
+								</el-table-column>
+								<el-table-column label="查看客户" align="left" min-width="100" show-overflow-tooltip>
+									<template slot-scope="scope">{{ scope.row.customerName || '无' }}</template>
+								</el-table-column>
+								<el-table-column label="查看用户" align="left" min-width="100">
+									<template slot-scope="scope">{{ scope.row.addUser || '无' }}</template>
+								</el-table-column>
+								<el-table-column prop="addTime" label="记录时间" align="left" width="160" :formatter="ncc.tableDateFormat" />
+							</NCC-table>
+						</div>
+						<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
 					</div>
-				</div>
-				<NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
-					<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
-					<el-table-column prop="type" label="记录类型" align="left" width="100" />
-					<el-table-column label="设备名称" align="left" min-width="120" show-overflow-tooltip>
-						<template slot-scope="scope">{{ scope.row.deviceName || scope.row.equipmentName || scope.row.reId || '-' }}</template>
-					</el-table-column>
-					<el-table-column prop="contentName" label="查看内容" align="left" min-width="120" show-overflow-tooltip />
-					<el-table-column prop="customerName" label="查看客户" align="left" min-width="100" show-overflow-tooltip />
-					<el-table-column prop="addUser" label="查看用户" align="left" min-width="100" />
-					<el-table-column prop="addTime" label="记录时间" align="left" width="160" :formatter="ncc.tableDateFormat" />
-					<el-table-column label="操作" fixed="right" width="100">
-						<template slot-scope="scope">
-							<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除</el-button>
-						</template>
-					</el-table-column>
-				</NCC-table>
-				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
+				</section>
+
+				<!-- 3. 统计图表：可折叠 -->
+				<section class="sb-records-charts">
+					<el-collapse v-model="chartsExpanded" @change="handleChartsExpand">
+						<el-collapse-item name="charts">
+							<template slot="title">
+								<span class="charts-collapse-title">
+									<i class="el-icon-data-analysis"></i>
+									统计图表
+								</span>
+							</template>
+							<el-row :gutter="16">
+								<el-col :xs="24" :sm="24" :md="12">
+									<div class="chart-card">
+										<div class="chart-title">按记录类型</div>
+										<div ref="chartByType" class="chart-dom"></div>
+									</div>
+								</el-col>
+								<el-col :xs="24" :sm="24" :md="12">
+									<div class="chart-card">
+										<div class="chart-title">按设备名称（Top10）</div>
+										<div ref="chartByEquipment" class="chart-dom"></div>
+									</div>
+								</el-col>
+								<el-col :xs="24" :sm="24" :md="12">
+									<div class="chart-card">
+										<div class="chart-title">按查看内容（Top10）</div>
+										<div ref="chartByContent" class="chart-dom"></div>
+									</div>
+								</el-col>
+								<el-col :xs="24" :sm="24" :md="12">
+									<div class="chart-card">
+										<div class="chart-title">按客户（Top10）</div>
+										<div ref="chartByCustomer" class="chart-dom"></div>
+									</div>
+								</el-col>
+								<el-col :xs="24" :sm="24" :md="12">
+									<div class="chart-card">
+										<div class="chart-title">按查看用户（Top10）</div>
+										<div ref="chartByUser" class="chart-dom"></div>
+									</div>
+								</el-col>
+							</el-row>
+						</el-collapse-item>
+					</el-collapse>
+				</section>
 			</div>
 		</div>
 		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
-		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
 	</div>
 </template>
 <script>
 import request from '@/utils/request'
 import NCCForm from './Form'
-import ExportBox from './ExportBox'
 import echarts from 'echarts'
 export default {
-	components: { NCCForm, ExportBox },
+	components: { NCCForm },
 	data() {
 		return {
 			showAll: false,
@@ -130,11 +185,12 @@ export default {
 				addTime: undefined,
 				reId: undefined,
 				customerName: undefined,
-				type: undefined
+				type: undefined,
+				deviceName: undefined,
+				contentName: undefined
 			},
 			list: [],
 			listLoading: true,
-			multipleSelection: [],
 			total: 0,
 			listQuery: {
 				currentPage: 1,
@@ -143,26 +199,19 @@ export default {
 				sidx: ''
 			},
 			formVisible: false,
-			exportBoxVisible: false,
+			chartsExpanded: [], // 默认折叠；['charts'] 则展开统计图表
 			statistics: {
 				totalCount: 0,
+				completeCount: 0,
+				totalDurationSeconds: 0,
+				avgDurationSeconds: 0,
 				byType: [],
 				byEquipment: [],
+				byContent: [],
 				byCustomer: [],
 				byUser: []
 			},
 			charts: {},
-			columnList: [
-				{ prop: 'index', label: '序号' },
-				{ prop: 'customerName', label: '客户' },
-				{ prop: 'addUser', label: '用户' },
-				{ prop: 'type', label: '记录类型' },
-				{ prop: 'deviceName', label: '设备名称' },
-				{ prop: 'contentName', label: '查看内容' },
-				{ prop: 'equipmentName', label: '设备' },
-				{ prop: 'addTime', label: '时间' },
-				{ prop: 'countNum', label: '次数' }
-			],
 			reIdOptions: []
 		}
 	},
@@ -193,13 +242,17 @@ export default {
 				method: 'GET',
 				data: query
 			}).then(res => {
-				const data = res.data || {}
+				const d = res.data || {}
 				this.statistics = {
-					totalCount: data.totalCount != null ? data.totalCount : 0,
-					byType: data.byType || [],
-					byEquipment: data.byEquipment || [],
-					byCustomer: data.byCustomer || [],
-					byUser: data.byUser || []
+					totalCount: d.totalCount != null ? d.totalCount : (d.TotalCount != null ? d.TotalCount : 0),
+					completeCount: d.completeCount != null ? d.completeCount : (d.CompleteCount != null ? d.CompleteCount : 0),
+					totalDurationSeconds: d.totalDurationSeconds != null ? d.totalDurationSeconds : (d.TotalDurationSeconds != null ? d.TotalDurationSeconds : 0),
+					avgDurationSeconds: d.avgDurationSeconds != null ? d.avgDurationSeconds : (d.AvgDurationSeconds != null ? d.AvgDurationSeconds : 0),
+					byType: d.byType || d.ByType || [],
+					byEquipment: d.byEquipment || d.ByEquipment || [],
+					byContent: d.byContent || d.ByContent || [],
+					byCustomer: d.byCustomer || d.ByCustomer || [],
+					byUser: d.byUser || d.ByUser || []
 				}
 				this.$nextTick(() => {
 					this.renderCharts()
@@ -208,6 +261,9 @@ export default {
 				this.$nextTick(() => this.renderCharts())
 			})
 		},
+		handleChartsExpand() {
+			this.$nextTick(() => this.renderCharts())
+		},
 		buildQuery() {
 			const _query = { ...this.listQuery, ...this.query }
 			const query = {}
@@ -221,10 +277,23 @@ export default {
 			return query
 		},
 		renderCharts() {
-			this.renderPie('chartByType', this.statistics.byType, '记录类型')
-			this.renderBar('chartByEquipment', this.statistics.byEquipment, '关联设备')
-			this.renderBar('chartByCustomer', this.statistics.byCustomer, '客户')
-			this.renderBar('chartByUser', this.statistics.byUser, '查看用户')
+			if (!this.chartsExpanded.includes('charts')) return
+			this.$nextTick(() => {
+				this.renderPie('chartByType', this.statistics.byType, '记录类型')
+				this.renderBar('chartByEquipment', this.statistics.byEquipment, '设备名称')
+				this.renderBar('chartByContent', this.statistics.byContent, '查看内容')
+				this.renderBar('chartByCustomer', this.statistics.byCustomer, '客户')
+				this.renderBar('chartByUser', this.statistics.byUser, '查看用户')
+			})
+		},
+		formatDuration(seconds) {
+			if (seconds == null || seconds < 0) return '0秒'
+			if (seconds < 60) return seconds + '秒'
+			if (seconds < 3600) return Math.floor(seconds / 60) + '分' + (seconds % 60 ? seconds % 60 + '秒' : '')
+			const h = Math.floor(seconds / 3600)
+			const m = Math.floor((seconds % 3600) / 60)
+			const s = seconds % 60
+			return h + '时' + (m ? m + '分' : '') + (s ? s + '秒' : '')
 		},
 		renderPie(refName, data, title) {
 			const el = this.$refs[refName]
@@ -238,7 +307,7 @@ export default {
 			this.charts[refName] = chart
 			const option = {
 				tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-				series: [{ type: 'pie', radius: '60%', data: data.map(d => ({ name: d.name || '-', value: d.value })) }]
+				series: [{ type: 'pie', radius: '60%', data: data.map(d => ({ name: d.name || d.Name || '-', value: d.value != null ? d.value : (d.Value != null ? d.Value : 0) })) }]
 			}
 			chart.setOption(option)
 		},
@@ -248,8 +317,8 @@ export default {
 			if (this.charts[refName]) this.charts[refName].dispose()
 			const chart = echarts.init(el)
 			this.charts[refName] = chart
-			const names = (data || []).map(d => (d.name || '-').substring(0, 8))
-			const values = (data || []).map(d => d.value)
+			const names = (data || []).map(d => ((d.name || d.Name || '-') + '').substring(0, 12))
+			const values = (data || []).map(d => d.value != null ? d.value : (d.Value != null ? d.Value : 0))
 			const option = {
 				tooltip: { trigger: 'axis' },
 				grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -285,53 +354,10 @@ export default {
 			this.initData()
 			this.loadStatistics()
 		},
-		handleDel(id) {
-			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { type: 'warning' }).then(() => {
-				request({ url: `/api/Extend/SbRecords/${id}`, method: 'DELETE' }).then(res => {
-					this.$message.success(res.msg)
-					this.initData()
-					this.loadStatistics()
-				})
-			}).catch(() => {})
-		},
-		handleSelectionChange(val) {
-			this.multipleSelection = (val || []).map(item => item.id)
-		},
-		handleBatchRemoveDel() {
-			if (!this.multipleSelection.length) {
-				this.$message.error('请选择一条数据')
-				return
-			}
-			this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', { type: 'warning' }).then(() => {
-				request({ url: '/api/Extend/SbRecords/batchRemove', method: 'POST', data: this.multipleSelection }).then(res => {
-					this.$message.success(res.msg)
-					this.initData()
-					this.loadStatistics()
-				})
-			}).catch(() => {})
-		},
 		addOrUpdateHandle(id, isDetail) {
 			this.formVisible = true
 			this.$nextTick(() => this.$refs.NCCForm.init(id, isDetail))
 		},
-		exportData() {
-			this.exportBoxVisible = true
-			this.$nextTick(() => this.$refs.ExportBox.init(this.columnList))
-		},
-		download(data) {
-			const query = { ...data, ...this.listQuery, ...this.query }
-			const q = {}
-			for (const key in query) {
-				if (Array.isArray(query[key])) q[key] = query[key].join()
-				else q[key] = query[key]
-			}
-			request({ url: '/api/Extend/SbRecords/Actions/Export', method: 'GET', data: q }).then(res => {
-				if (!res.data || !res.data.url) return
-				window.location.href = this.define.comUrl + res.data.url
-				this.$refs.ExportBox.visible = false
-				this.exportBoxVisible = false
-			})
-		},
 		refresh(isrRefresh) {
 			this.formVisible = false
 			if (isrRefresh) {
@@ -344,26 +370,141 @@ export default {
 </script>
 <style lang="scss" scoped>
-.sb-records-stats {
+/* 页面整体：Data-Dense Dashboard 风格 */
+.sb-records-page .NCC-common-layout-center {
+	background: #F8FAFC;
+	padding: 16px;
+}
+
+/* 1. 筛选区 */
+.sb-records-filter {
+	background: #fff;
+	border-radius: 12px;
+	padding: 20px;
+	margin-bottom: 16px;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+	flex-shrink: 0;
+}
+.sb-records-form {
+	.el-form-item { margin-bottom: 16px; }
+	.el-form-item__label { padding-right: 12px; }
+}
+.sb-records-form-actions {
+	.el-button + .el-button { margin-left: 8px; }
+}
+
+/* 2. 可滚动内容区 */
+.sb-records-scroll-wrap {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* 3. 主内容区：统计 + 列表 */
+.sb-records-content {
+	background: #fff;
+	border-radius: 12px;
+	padding: 20px;
 	margin-bottom: 16px;
-	.stats-total {
-		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		color: #fff;
-		padding: 16px 24px;
-		border-radius: 8px;
-		margin-bottom: 16px;
-		.stats-total-label { font-size: 14px; opacity: 0.9; }
-		.stats-total-value { font-size: 28px; font-weight: 700; margin-left: 12px; }
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+/* 统计卡片 */
+.sb-records-summary {
+	margin-bottom: 20px;
+	.el-row { margin: 0 -8px; }
+	.el-col { padding: 0 8px; margin-bottom: 16px; }
+	.stat-card {
+		height: 100px;
+		padding: 12px;
+		border-radius: 12px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+		transition: box-shadow 0.2s ease, transform 0.2s ease;
+		cursor: default;
+		&:hover {
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+		}
+		.stat-card-label {
+			font-size: 13px;
+			color: rgba(255, 255, 255, 0.9);
+			margin-bottom: 6px;
+			letter-spacing: 0.3px;
+		}
+		.stat-card-value {
+			font-size: 22px;
+			font-weight: 600;
+			color: #fff;
+			letter-spacing: 0.5px;
+		}
+		&.stat-card-primary { background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%); }
+		&.stat-card-success { background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%); }
+		&.stat-card-warning { background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%); }
+		&.stat-card-info { background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%); }
 	}
-	.charts-row { margin-top: 12px; }
-	.chart-card {
-		background: #fff;
-		border-radius: 8px;
-		padding: 16px;
-		margin-bottom: 16px;
-		box-shadow: 0 1px 4px rgba(0,0,0,0.08);
-		.chart-title { font-size: 14px; color: #303133; margin-bottom: 12px; font-weight: 500; }
-		.chart-dom { height: 260px; }
+}
+
+/* 列表区 */
+.sb-records-list {
+	.sb-records-list-title {
+		font-size: 16px;
+		font-weight: 600;
+		color: #303133;
+		margin: 0 0 16px;
+		padding-bottom: 12px;
+		border-bottom: 1px solid #ebeef5;
+		letter-spacing: 0.3px;
 	}
 }
+.sb-records-table-wrap {
+	margin-bottom: 16px;
+}
+::v-deep .sb-records-table .el-table__row:hover {
+	background-color: #f5f7fa;
+}
+
+/* 4. 统计图表 */
+.sb-records-charts {
+	background: #fff;
+	border-radius: 12px;
+	padding: 0;
+	margin-bottom: 16px;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+	overflow: hidden;
+}
+.sb-records-charts .charts-collapse-title {
+	font-size: 14px;
+	font-weight: 600;
+	letter-spacing: 0.3px;
+	i { margin-right: 8px; color: #409EFF; }
+}
+.sb-records-charts .el-row { margin: 0 -8px; }
+.sb-records-charts .el-col { padding: 0 8px; margin-bottom: 16px; }
+.sb-records-charts .chart-card {
+	background: #fafbfc;
+	border-radius: 8px;
+	padding: 16px 20px;
+	border: 1px solid #ebeef5;
+	.chart-title {
+		font-size: 14px;
+		color: #303133;
+		margin-bottom: 12px;
+		font-weight: 500;
+	}
+	.chart-dom { height: 260px; }
+}
+
+::v-deep .el-collapse-item__header {
+	height: 52px;
+	font-size: 14px;
+	padding: 0 20px;
+	background: #fff;
+}
+::v-deep .el-collapse-item__content {
+	padding: 20px;
+	background: #fff;
+}
 </style>