DM-ROW 接口文档

Appearance

数据展示组件 ​

**本文档引用的文件** - [table.vue](file://dm/lemes-web/src/views/devicemate/components/table.vue) - [tableFilter.vue](file://dm/lemes-web/src/views/devicemate/components/tableFilter.vue) - [customer-table-filter.vue](file://dm/lemes-web/src/components/customer-table-filter/customer-table-filter.vue) - [dashboard.vue](file://dm/lemes-web/src/components/dashboard/dashboard.vue) - [dashboardLine.vue](file://dm/lemes-web/src/components/dashboard/dashboardLine.vue) - [dashboard-panel.vue](file://dm/lemes-web/src/components/dashboard/dashboard-panel.vue) - [u-table.vue](file://app/devicemate-app/uview-ui/components/u-table/u-table.vue) - [u-td.vue](file://app/devicemate-app/uview-ui/components/u-td/u-td.vue) - [u-charts.js](file://app/devicemate-app/components/u-charts/u-charts.js) - [mescroll-uni.js](file://app/devicemate-app/components/mescroll-uni/mescroll-uni.js) - [index.js](file://dm/lemes-web/src/utils/index.js)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考量
  8. 故障排查指南
  9. 结论
  10. 附录

简介 ​

本文件面向 DeviceMate 项目的前端与移动端数据展示组件，系统性梳理并解析以下三类组件的设计与实现：

  • 表格组件：支持列显隐控制、排序、分页、自定义渲染、输入编辑与按钮组等能力，覆盖 PC 与移动端双端。
  • 仪表板组件：提供大屏看板容器、面板与时间轴联动，支持全屏与缩放适配。
  • 筛选器组件：提供动态列筛选、条件组合（AND/OR）、多种比较模式与导出能力。

同时，文档给出数据网格 CRUD、排序分页与自定义渲染的实现要点；解释仪表板数据可视化的原理与交互设计；阐述筛选器的动态配置与搜索优化；并提供使用示例、性能优化与扩展建议，以及数据加载策略、缓存机制与用户体验最佳实践。

项目结构 ​

围绕数据展示的组件主要分布在如下路径：

  • PC 端 Devicemate 视图层：表格与筛选器组件位于 views/devicemate/components。
  • 通用仪表板组件：位于 components/dashboard。
  • 移动端 uView UI 表格组件：位于 app/devicemate-app/uview-ui/components。
  • 图表与滚动加载：移动端图表库与长列表滚动加载分别位于 app/devicemate-app/components。

图表来源

章节来源

核心组件 ​

  • 表格组件（PC）：提供列显隐、排序、分页、自定义渲染、按钮组、单选/多选、行点击高亮与跨页合并等能力，支持权限控制与国际化列头。
  • 筛选器组件（PC）：支持列显隐筛选、条件组合（AND/OR）、多种比较模式（等于/大于/包含/日期预设等）、本地/远程过滤与排序、导出 Excel。
  • 仪表板组件（PC/大屏）：提供容器缩放与全屏、标题/时间轴、面板布局与背景适配。
  • 表格组件（移动端）：基于 uView 的轻量表格与单元格组件，统一风格与尺寸。
  • 图表组件（移动端）：基于 uCharts 提供图表绘制与动画过渡。
  • 滚动加载（移动端）：基于 mescroll-uni 实现上拉加载与分页控制。

章节来源

架构总览 ​

数据展示组件在前端层的交互与数据流如下：

图表来源

章节来源

详细组件分析 ​

表格组件（PC：table.vue） ​

  • 设计要点
    • 列显隐控制：通过弹出层与复选框组维护可见列集合，并在计算属性中过滤渲染列。
    • 排序与分页：监听排序变更与分页事件，向父级发出回调，便于外部统一处理。
    • 自定义渲染：支持 render 函数与内置输入编辑、按钮组渲染，满足复杂列需求。
    • 交互增强：单选/多选、行点击高亮、跨页合并、权限控制与国际化列头。
  • 关键实现点
    • 列宽计算：根据列头文本宽度与配置宽度取较大值，确保可读性。
    • 选中行为：单选时整行点击即选中并触发 selection-change。
    • 事件链路：row-click、sort-change、selection-change、size-change、current-change。
  • 使用建议
    • 大数据量优先采用远程排序/过滤与分页，减少前端渲染压力。
    • render 函数尽量保持纯函数与最小 DOM 结构，避免频繁重排。

图表来源

章节来源

筛选器组件（PC：customer-table-filter.vue） ​

  • 设计要点
    • 动态列筛选：支持按列显隐，禁用关键列不可取消。
    • 条件组合：AND/OR 前缀，同一字段多条件聚合，支持“或”优先级。
    • 比较模式：数值/字符串/日期多种比较，含“空值/非空值/昨天/本周/本月/今年”等快捷。
    • 导出功能：按可见列导出 Excel，自动命名工作表与文件名。
    • 本地/远程：支持本地过滤与远程过滤两种模式，结合排序状态。
  • 关键实现点
    • 条件行构建：根据字段与模式生成行，支持增删与输入焦点管理。
    • 运算表达式：通过格式化字符串与 Function 构造器执行比较逻辑，注意安全性。
    • 缓存与复用：离开页面前缓存筛选状态，进入同一列时恢复。
  • 使用建议
    • 控制条件行数量上限，避免过度组合导致性能问题。
    • 日期比较建议统一格式化，避免时区与时分秒差异影响结果。

图表来源

章节来源

仪表板组件（PC：dashboard.vue、dashboardLine.vue、dashboard-panel.vue） ​

  • 设计要点
    • 容器缩放：根据容器尺寸与基准宽高计算缩放比例，支持固定宽高比与自适应高度。
    • 全屏适配：提供全屏切换与定时器更新尺寸，保证大屏显示一致性。
    • 面板布局：面板标题与内容区域分离，支持插槽扩展。
  • 关键实现点
    • 计算属性 scale/baseHeight：按最小比例缩放，保证内容不溢出。
    • mounted/destroyed 生命周期：启动定时器与清理，避免内存泄漏。
  • 使用建议
    • 大屏场景建议固定宽高比，确保视觉一致性。
    • 插槽内容应考虑缩放后的字体与间距，避免拥挤。

图表来源

章节来源

移动端表格与图表组件 ​

  • uView 表格（u-table.vue、u-td.vue）
    • 统一样式与尺寸，支持边框、对齐、字号、内边距与颜色配置。
    • 单元格宽度支持百分比或具体单位，自动继承父组件样式。
  • uCharts 图表（u-charts.js）
    • 支持柱状、温度计、仪表盘等多种图形，提供动画过渡与标签绘制。
    • 通过配置项与上下文绘制，实现灵活的数据可视化。

图表来源

章节来源

移动端滚动加载（mescroll-uni.js） ​

  • 设计要点
    • 上拉加载：通过 endByPage/endBySize 结束加载并判断是否有下一页。
    • 分页控制：设置 pageNum/pageSize 并与后端分页参数对齐。
  • 使用建议
    • 在数据为空或总页数未知时，合理设置 hasNext 与 total 参数，避免无限加载。

章节来源

依赖关系分析 ​

  • 组件耦合
    • 表格组件依赖工具模块进行权限、国际化与列宽计算。
    • 筛选器组件与表格组件通过事件与数据双向协作，实现本地/远程过滤。
    • 仪表板组件与工具模块协作完成时间更新与全屏控制。
  • 外部依赖
    • 网络请求封装：统一 ajax/request/download 等方法，便于替换与测试。
    • 第三方库：uCharts、mescroll-uni、uView UI。

图表来源

章节来源

性能考量 ​

  • 表格渲染
    • 使用虚拟滚动或分页，避免一次性渲染超大数据集。
    • render 函数尽量无副作用，避免不必要的 DOM 重绘。
  • 筛选器
    • 控制条件行数量上限，避免复杂表达式导致卡顿。
    • 日期比较统一格式化，减少字符串比较成本。
  • 仪表板
    • 固定宽高比与缩放计算仅在尺寸变化时更新，避免高频重排。
  • 移动端
    • 图表动画与绘制在主线程执行，建议降低帧率或拆分渲染。
    • 滚动加载分页参数与服务端保持一致，减少无效请求。

[本节为通用指导，无需特定文件引用]

故障排查指南 ​

  • 表格列宽异常
    • 检查列宽计算逻辑与国际化文本长度，确保取较大值。
    • 确认列显隐状态与 checkedCities 同步。
  • 筛选器条件无效
    • 核对条件行输入值与模式，确认 inputDisable 状态。
    • 检查运算表达式构造与 evil 函数调用的安全性与正确性。
  • 仪表板缩放错位
    • 确认定时器是否正常运行，realWidth/realHeight 是否更新。
    • 检查 fixedRatio 与 baseHeight 计算逻辑。
  • 移动端滚动加载
    • 确认 endByPage/endBySize 参数与后端返回一致。
    • 检查 hasNext 判断逻辑，避免无限加载。

章节来源

结论 ​

DeviceMate 的数据展示组件在 PC 与移动端实现了统一的交互体验与可扩展架构。表格组件提供强大的列控制、排序分页与自定义渲染；筛选器组件支持动态配置与条件组合；仪表板组件保障大屏适配与全屏体验；移动端配套的表格、图表与滚动加载组件则提升了跨端一致性与性能表现。通过合理的数据加载策略、缓存与优化手段，可在不同规模数据场景下获得稳定高效的用户体验。

[本节为总结，无需特定文件引用]

附录 ​

[本节为补充说明，无需特定文件引用]