报表/报告组件(二)-实例与实现解释

article/2025/6/15 17:30:16

        上篇《报表/报告组件(一)-指标/属性组件设计》介绍了组件核心指标/属性设计,本文以实例介绍各个特性的实现和效果,实例是多个报告融合,显示所有的特性。

设计

        指标/属性组件是报告/报表关键部分,上篇已介绍过,本节回顾一下

指标模型 指标可有多个测量字段,满足专业和挑剔的显示样式,格式,数值精度和范围需要

> 格式(format) 支持多个字段合并显示的格式,例如,颜色指标RGB,录入3个字段,显示使用格式 R/G/B 或 R-G-B等,带上样式,R/G/B

> 单位

> 类型 TEXT/NUMBER/DATETIME, ... 可扩展

> 参考范围, 精度

参考范围 数值的合理值/正常值,分为基准参考和范围参考

精度 测量的有效值,通常超过精度适用>xxx, <yyy展示,不使用原本值

> 验证指标数值

> 样式规范,底色/图标资源/字体,设定与精度范围相关

> 图片类型字段,图表类型字段

> list类型字段,支持多行表格

> 图表类型,生成图表,导出图片

本组件使用MVC模式,M 模型,数据和数据存储;C 指输出器,承上(模型)启下(视图),一个数据可以输出docx,pdf,xlsx。。。;V 视图,如本文的示例,docx文档模板

实现解释

     本节以实例说明各特性,实例是真实客户设备检测报告,为了介绍所有特性融合了多个报告内容,因此实例数据内容可能不是很相关。

数据模型

 本节以单元测试解释数据模型的实现

 回顾一下设计图,数据模型分两部分,左侧红圈部分指标/属性数据,右侧篮圈是指标/属性定义,包括报告类型,报告类型关联zhib/属性,指标,指标属性,下面以时间属性介绍

1. 指标/属性定义

> 指标组

下图新建指标组

> 指标和指标字段 

下图新建指标和指标字段

上图构建指标,groupCode是上面的指标组,该指标有两个字段,均为日期类型,用于合并显示,组合出报告需要的日期格式 

2. 报告类型,关联指标/属性

报告分类

关联指标

 3. 报告,指标/属性数据

数据选择需要属于报告,也即需先新建报告,再写入数据

下图新建报告

报告对象也是三板斧,编码,名称,描述

报告数据分两部分,记录,对应指标,下图新建记录(Record),其中的reportId是上面新建的报告id

IndicatorCode对应的指标,实现记录是指标负责构建

下图是数据,指标报告时间(REPORT-DATETIME)的数据 

上面通过单元测试构建核心对象,解释了各类对象的结构,下面详细解释不同类型的指标 

合并显示

      合并显示是一个指标多个字段合成一个字段显示,例如上面的RGB,录入的时候3个数值,R/G/B,显示是合为一个字段,RGB这是颜色的常用的显示方式。

> 指标模板

上图是报告模板, {{REPORT-DATETIME.报告日期}} 是替代符,REPORT-DATETIME是属性/指标编码,全局唯一,"报告日期"是属性/指标下的item。

> 数据

该指标和数据在上面数据模型介绍过,这里不重复

> 导出效果

报告日期的格式通过合并显示的format定义 

段落文本/表格文本

这两类是最简单的文本显示,区别只是识别是段落,还是表格的段落

> 指标模板

> 数据

下图对应的指标和数据

> 导出效果

样式

样式大致分两类,一是显示状态,支持状态文本域联动;二是直接指定颜色

> 指标模板

下图指标模板定义,看着都一样,其实有三类的字段,翼根前面的叶片123是显示状态,颜色联动,前缘粘接是指定颜色,备注是图片类型

> 数据

1. 文本,文本与背景色联动

下图首先创建背景色感应器实现,BgAware,目前有两个实现,TextValueBgAware,支持背景色与文本联动;ConstBgAware,指定背景色

下图构建指标和指标字段项,字段项使用TextValueBgAware实现文本与颜色联动

下图数值,数值也可以设置TextValueBgAware,数值设置的优先级高 

2. 指定背景色 

下图构建指定背景色的数值

> 导出效果

测量数据

指标是设备的检测数据,该数据是周期性的,如,一天一测,有着严谨的数值表示,样式要求,例如,超限,超精度,要所见即所得

> 指标模板

 > 数据

下图是测量指标字段项,可设置上下限,是否包括边界;上精度,下精度

指标/属性定义4个样式,分别是超上限,超下限,超上精度,超下精度 

> 导出示例

图片

图片样式那节已经展示过

上图定义图片类型字段项,PNG类型,还有宽和高

相应地,数据是PicValue类型,itemName对应的item名称,value是地址,当然也可以支持minio,ftp等 

列表

列表数据支持用户输入不定行的表格行,实例的列表数据是设备检测发现的损伤问题,不定行数,多少项填报多少项

>  指标定义

其中,@@是特殊符号,生成序列号 

>  数据

下图列表行指标,行的列是字段项,listType设为true,标识此指标是列表指标

>  导出效果

图表

图表也属于计算指标/属性,使用报告的其他指标/属性,生成图表,本节以柱状图为例

> 指标/属性模板定义

图表的指标/属性的模板定义

> 数据

下图构建图表指标/属性,本文的示例图表都在一个指标下,一个字段对应一个图表

下图 柱状图图表字段项,图表有两个序列,Fe,Cu,每个序列有两个数据,本次和上次

图表没有数据写入,使用的是报告内的数据,上面数据是引用"指标数据

>  输出效果

下一篇 导出器的实现解释


http://www.hkcw.cn/article/eOOyUALwcf.shtml

相关文章

django入门-orm数据库操作

一&#xff1a;下载数据库依赖项mysqlclient pip install mysqlclient 二&#xff1a;django配置文件配置数据库链接 路径&#xff1a;mysite2\mysite2\settings.py DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: data, # 数据库名称USER: root, …

开疆智能Profinet转Profibus网关连接CMDF5-8ADe分布式IO配置案例

本案例是客户通过开疆智能研发的Profinet转Profibus网关将PLC的Profinet协议数据转换成IO使用的Profibus协议&#xff0c;操作步骤如下。 配置过程&#xff1a; Profinet一侧设置 1. 打开西门子组态软件进行组态&#xff0c;导入网关在Profinet一侧的GSD文件。 2. 新建项目并…

【RabbitMQ】- Channel和Delivery Tag机制

在 RabbitMQ 的消费者代码中&#xff0c;Channel 和 tag 参数的存在是为了实现消息确认机制&#xff08;Acknowledgment&#xff09;和精细化的消息控制。 Channel 参数 作用 Channel 是 AMQP 协议的核心操作接口&#xff0c;通过它可以直接与 RabbitMQ 交互&#xff1a; 手…

详解代理型RAG与MCP服务器集成

检索增强型生成(RAG)将语言模型与外部知识检索相结合,让模型的回答基于最新的事实,而不仅仅是其训练数据呢。 RAG(高级别) 在 RAG 流程中,用户查询用于搜索知识库(通常通过向量数据库中的嵌入来实现),并将检索到的最相关文档“增强”到模型的提示中,以帮助生成事实…

Keil 中因未引入源文件导致的函数调用与索引失败:从找不到定义到全局搜索无效

我在头文件中声明函数&#xff0c;源文件有定义&#xff0c;在有引入头文件的情况下调用的时候却找不到函数&#xff0c;头文件点击函数跳转不到源文件&#xff0c;全局搜索函数时找不到源文件的这个函数&#xff0c;最后是因为没有引入这个源文件 一、我在MQTT_Client_Task中使…

vue3学习

p3 创建vue3工程 1.创建命令 npm create vuelatest p4 编写APP组件 入口文件是index.html Vite 项目中&#xff0c; index.htm 是项目的入口文件&#xff0c;在项目最外层 加载index.html后&#xff0c;Vite解析 script typemoduleSrCXXX 指向的javascript Vue 中是通过 cr…

Vue3 + Vite:我的 Qiankun 微前端主子应用实践指南

前言 实践文章指南 vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制>>>>实战指南&#xff1a;Vue 2基座 Vue 3 Vite TypeScript微前端架构实现动态菜单与登录共享>>>>构建安全的Vue前后端分离架构&#xff1a;利用长Token与短Tok…

CloudFront 加速详解:AWS CDN 怎么用?

让全球访问更快速稳定&#xff0c;深入解读 AWS 的内容分发网络 在上一篇中&#xff0c;我们介绍了 Amazon S3 对象存储&#xff0c;它非常适合托管静态资源&#xff0c;比如图片、视频、网页等。但你可能遇到过这样的问题&#xff1a; “我把网站静态文件部署到了 S3&#xf…

嵌入式SDK技术EasyRTC音视频实时通话助力即时通信社交/教育等多场景创新应用

一、引言​ 在数字化时代&#xff0c;即时通信已成为人们生活和工作中不可或缺的部分。音视频功能作为即时通信的核心&#xff0c;能实现更加直观、高效的信息传递。EasyRTC作为一款强大的实时通信框架&#xff0c;具备诸多优势&#xff0c;为即时通信的音视频应用提供了优质解…

Rust 学习笔记:关于 Cargo 的练习题

Rust 学习笔记&#xff1a;关于 Cargo 的练习题 Rust 学习笔记&#xff1a;关于 Cargo 的练习题问题一问题二问题三问题四问题五问题六问题七 Rust 学习笔记&#xff1a;关于 Cargo 的练习题 参考视频&#xff1a; https://www.bilibili.com/video/BV1xjAaeAEUzhttps://www.b…

【时时三省】(C语言基础)数组作为函数参数

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 调用有参函数时&#xff0c;需要提供实参。例如sin ( x )&#xff0c;sqrt ( 2&#xff0c;0 )&#xff0c;max ( a&#xff0c;b )等。实参可以是常量、变量或表达式。数组元素的作用与变量…

基于Android的一周穿搭APP的设计与实现 _springboot+vue

开发语言&#xff1a;Java框架&#xff1a;springboot AndroidJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat12开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.6 系统展示 APP登录 A…

【开源工具】超全Emoji工具箱开发实战:Python+PyQt5打造跨平台表情管理神器

&#x1f31f; 超全Emoji工具箱开发实战&#xff1a;PythonPyQt5打造跨平台表情管理神器 &#x1f308; 个人主页&#xff1a;创客白泽 - CSDN博客 &#x1f525; 系列专栏&#xff1a;&#x1f40d;《Python开源项目实战》 &#x1f4a1; 热爱不止于代码&#xff0c;热情源自每…

当 “欧洲版 Cursor” 遇上安全危机

在 AI 编程助手蓬勃发展的当下&#xff0c;安全问题正成为行业不容忽视的隐忧。近期&#xff0c;AI 编程助手公司 Replit 与号称 “欧洲版 Cursor” 的 Lovable 之间&#xff0c;因安全漏洞问题掀起了一场风波&#xff0c;引发了业界的广泛关注。​ Replit 的员工 Matt Palmer…

Agentic Workflow是什么?Agentic Workflow会成为下一个AI风口吗?

无论是想要学习人工智能当做主业营收&#xff0c;还是像我一样作为开发工程师但依然要运用这个颠覆开发的时代宠儿&#xff0c;都有必要了解、学习一下人工智能。 近期发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;入行门槛低&#x…

遥感影像建筑物变化检测

文章目录 效果1、环境安装2、项目下载3、数据集下载4、模型训练5、模型推理6、推理结果7、批量推理效果 1、环境安装 参考文章 搭建Pytorch的GPU环境超详细 win10安装3DGS环境(GPU)超详细 测试GPU环境可用 2、项目下载 https://gitcode.com/gh_mirrors/ch/change_detectio…

vue+cesium示例:地形开挖(附源码下载)

基于cesium和vue绘制多边形实现地形开挖效果&#xff0c;适合学习Cesium与前端框架结合开发3D可视化项目。 demo源码运行环境以及配置 运行环境&#xff1a;依赖Node安装环境&#xff0c;demo本地Node版本:推荐v18。 运行工具&#xff1a;vscode或者其他工具。 配置方式&#x…

Ubuntu 系统部署 MySQL 入门篇

一、安装 MySQL 1.1 更新软件包 在终端中执行以下命令&#xff0c;更新系统软件包列表&#xff0c;确保安装的是最新版本的软件&#xff1a; sudo apt update 1.2 安装 MySQL 执行以下命令安装 MySQL 服务端&#xff1a; sudo apt install mysql-server 在安装过程中&…

机器学习——主成分分析PCA

主成分分析—PCA 一、主成分分析简介1. PCA概述2. 降维 & PCA3. PCA的优缺点 二、PCA的数学基础1. 方差2. 协方差矩阵3. 特征值和特征向量 三、PCA的算法流程1. 标准化数据2. 计算协方差矩阵3.计算特征值和特征向量4. 选择主成分5. 数据投影 四、代码分析&#xff08;人脸识…