数据可视化

相关推荐

• Oinone 7天入门到精通

  3.5.2.2 构建View的Template

  我们在很多时候需要自定义模型的管理页面，而不是直接使用默认页面，比如字段的展示与隐藏，Action是否在这个页面上出现，搜索条件自定义等等，那么本章节带您一起学习如何自定义View的Template。 自定义View的Template 在使用默认layout的情况下，我们来做几个自定义视图Template,并把文件放到指定目录下。 图3-5-2-14 自定义View的Template 第一个Tabel Step1 自定义PetTalent的列表 我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\’demo.PetTalent\’，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表格（type = TABLE）】的记录，查看template字段。 图3-5-2-15 base_view表查看template字段 <view name="tableView" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id"/> <field data="writeUid" label="更新人id"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-16 base_view表查看template字段 对比view的template定义与页面差异，从页面上看跟view的定义少了，创建人id和更新人id。因为这两个字段元数据定义里invisible属性。 a. 当XML里面没有配置，则用元数据覆盖了。 b. 当XML里面配置了，则不会用元数据覆盖了。 在下一步中我们只要view的DSL中给这两个字段加上invisible="false"就可以展示出来了 图3-5-2-17 查看列表展示 图3-5-2-18 invisible属性 新建pet_talent_table.xml文件放到对应的pamirs/views/demo_core/template目录下，内容如下 a. 对比默认视图，在自定义视图时需要额外增加属性model="demo.PetTalent" b. name设置为"tableView"，系统重启后会替换掉base_view表中model为"demo.PetTalent"，name为"tableView"，type为"TABLE"的数据记录。 ⅰ. name不同的但type相同，且viewAction没有指定时，根据优先级priority进行选择。小伙伴可以尝试修改name="tableView1"，并设置priority为1，默认生成的优先级为10，越小越优先。 ccreateUid和writeUid字段，增加invisible="false"的属性定义 <view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id" invisible="false"/> <field data="writeUid" label="更新人id" invisible="false"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-19 增加invisible=”false”的属性定义 Step2 重启应用看效果 图3-5-2-20 示例效果 第一个Form Step1 自定义PetTalent的编辑页…

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  报表

  1. 业务场景 报表不局限于表格的样式，还能以各式各样的图表形式展现各项汇总数据 这有利于管理者更为直观地了解公司的经营情况，便于后续进行分析，提高对公司的管理水平。 2. 操作流程 1）进入数据可视化，进入报表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加报表】，对报表进行编辑设计； 3）创建完成后可以【编辑】报表标题、备注； 4）需要通过【选择图表、创建图表】完善报表内容； 5）完善后可以点击【发布】报表，则报表此时可以被引用； 6）如果报表有更新，则可以点击【更新发布】，使业务系统引用对报表变为最新的报表信息； 7）如果报表数据不再可以公开使用，则需要通过【隐藏】功能将报表的引用权限收起，此时数据大屏、前端业务系统均不可再引用该报表，但不影响已被引用的报表； 8）隐藏后可以【取消隐藏】，报表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-报表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-报表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-报表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无报表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只要分组下没有报表的分组才能直接删除成功 3.4 创建报表 1）操作流程：选择二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a. 报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 3.5 删除报表 1）操作流程：选择报表-删除报表 2）操作路径：数据可视化-报表-二级分组-报表名称-删除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，才展示报表菜单名称后的删除图标 4）删除报表后报表消失 3.6 选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-报表-二级分组-报表名称-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a. 需要选择图表的一级分组后才能选择图表； b. 可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 3.7 创建图表 1）操作流程：选择报表-创建图表 2）操作路径：数据可视化-报表-二级分组-创建图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【创建图表】，弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面，创建图表保存后返回，返回到当前报表页面，新创建的图表展示在报表的第一个位置 3.8 拖拽图表 1）操作流程：选择报表-拖拽图表 2) 操作路径：数据可视化-报表-二级分组-报表名称-拖拽图表 3）所有的报表均可拖拽图表，拖拽时需要选择图表，可以上下左右等比拖动，图表的内容也会根据拖动的比例进行缩放，展示全部的被遮挡图表内容 4）拖拽后实时生效，报表信息保持展示最新效果 3.9 移除图表 1）操作流程：选择报表-移除图表 2）操作路径：数据可视化-报表-二级分组-报表名称-移除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，此时可以针对不需要的图表进行移除 4）选择移除后不展示在报表中，不影响原图表 5）报表移除图表后实时更新，更新发布后，前端可以展示最新的报表信息，如果未发布，则仅数据大屏可展示最新的报表信息，前端仍为最近发布的报表 3.10 设置报表筛选项 1）操作流程：选择报表-设置报表筛选项 2）操作路径：数据可视化-报表-二级分组-报表名称-更多-报表筛选项-添加 3）添加时选择筛选项字段的类型，关联每个图表对应的字段，一个图表只能关联一个 4）关联后可以按关联字段查询图表数据 3.11 发布 1）操作流程：选择报表-发布报表 2）操作路径：数据可视化-图表-二级分组-报表-发布 3）选择单个未发布且没有被隐藏的报表，点击【发布】按钮，报表发布后可以被前端引用，报表状态变为已发布，展示最近发布时间； 4）如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表 3.12 查看最近一次发布的版本 1）操作流程：选择报表-查看最近一次发布的版本 2）操作路径：数据可视化-报表-二级分组-报表名称-查看最近一次发布的版本 3）当报表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版 3.13 更新发布 1）操作流程：选择报表-更新发布报表 2）操作路径：数据可视化-报表-二级分组-报表名称-更新发布报表 3）选择单个已发布且没有被隐藏的报表，并且该报表在上次发布后有所更新，可以点击【更新发布】按钮，将最新的报表内容发布至业务系统，业务系统引用的报表为最新内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的报表仍为最近发布的报表 3.14 隐藏 1）操作流程：选择报表-隐藏报表 2）操作路径：数据可视化-报表-二级分组-报表名称-隐藏报表 3）报表默认不隐藏，可以切换是否隐藏=是 a. 未发布的报表，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的图表，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； c. 隐藏后的报表不可以被引用，但不影响已经被引用的数据 3.15 取消隐藏 1) 操作流程：选择报表-取消隐藏报表 2) 操作路径：数据可视化-报表-二级分组-报表名称-取消隐藏报表 3) 隐藏后的报表可以取消隐藏，切换是否隐藏=否，取消隐藏后，报表恢复隐藏前的状态和功能，可以被引用 3.16 查看引用 1）流程：选择报表-查看被哪些页面引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-查看引用 3）选择具体的报表，查看当前报表被引用的所有信息 3.17 不允许别人编辑 1）流程：选择报表-不允许别人编辑 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人编辑 3）选择自己创建的报表，对报表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑报表 3.18 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人引用 3）选择自己创建的报表，对报表是否允许他人引用进行设置；如果设置为不允许，则其他人无法引用到该报表 3.19 导出图片 1) 操作流程：选择报表-导出图片 2) 操作路径：数据可视化-报表-二级分组-报表名称-导出图片 3) 选择报表后，点击【导出图片】按钮可以将当前报表导出为图片 3.20 导出EXCEL 1）操作流程：选择报表-导出EXCEL 2）操作路径：数据可视化-报表-二级分组-报表名称-报表导出EXCEL 3）选择报表后，点击【导出EXCEL】按钮可以将当前报表导出为EXCEL

  史, 昂

  2024年6月20日

  1.8K000

• 3.1 环境搭建

  一、基础环境说明 内容 是否必须 说明 后端基础环境 JDK1.8 必须 java的基础运行环境, 要求高于1.8_221以上，低于这个版本需要覆盖jce (原因：https://www.cnblogs.com/jinloooong/p/10619353.html) Mysql 必须 8.0.26 版本以上需要注意点：修改：my.cnf (macOS ) / my.ini (windows)时区、大小写敏感设置lower_case_table_names = 2default-time-zone = ‘+08:00’ Idea 必须 需要注意点：1.禁用Lombok插件2.java Compiler 增加 -parameters(不然java反射获取方法入参名会变成arg*) 指令3.安装oinone插件 DB GUI 非必须 Datagrip、MySQLWorkbench、DBEaver 选其一 Insomnia 非必须 GraphQL测试工具 Git 必须 2.2.0以上 Maven 必须 3.6.3需要注意点：1配置mvn的settings文件下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员2把settings.xml拷贝一份到maven安装目录conf目录下 RocketMQ 必须 4.7.1以上 Redis 必须 5.0.2以上 Zookeeper 必须 3.5.8以上 前端基础环境 nvm 非必须 方便node的版本管理 nodejs 必须 版本要求为12.12.0注意事项：1.npm的源配置为http://nexus.shushi.pro/repository/kunlun/2.源的用户名、密码见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员 vue-cli 必须 vue脚手架工具 表3-1-1基础环境说明 其他：canal和Es的环境搭建见具体学习章节 二、基础知识准备 前端必备知识 vue3、typescript、graphql 后端必备知识 SpringBoot、MybatisPlus 表3-1-2基础知识准备 三、下载快速安装包 Mac版 Windows版 四、学习安装 推荐，虽然慢点对环境有比较深入的了解，对自身能力提升和日后排查问题都有好处。 mac见：3.1.1【环境准备（Mac版）】一文 windows见：3.1.2【环境准备（Windows版）】一文

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  2.6K001
• Oinone 7天入门到精通

  1.2 Oinone的致敬

  占在巨人的肩膀上，天地孤影任我行 1.2.1 数字化时代Oinone接棒Odoo 在数字化时代，中国在互联网化的应用、技术的领先毋庸置疑，但在软件的工程化、产品化输出方面仍有许多改进的空间。这时，我了解到了Odoo——一个国外非常优秀的开源ERP厂商，全球ERP用户数量排名第一，百级别员工服务全球客户。Odoo的工程化能力和商业模式深深吸引了我，它是软件行业典型的产品制胜和长期主义者的胜利之一。 在2019年，也就是数式刚成立的时候，我们跟很多投资人聊起公司的对标是谁，我不是要成为数字化时代的SAP，而是要成为Odoo。然而，当时大部分国内投资人并不了解Odoo，尽管它已经是全球最大的ERP厂商之一，因为当时Odoo还没有明确的估值。直到2021年7月份获得Summit Partners的2.15亿美元投资后，Odoo才正式成为IT独角兽企业。 Odoo对我们提供了极大的启示，因此我们致敬Odoo，同样选择开源，每年对产品进行升级发布。如今，Odoo15已经发布，而Oinone也已推出第三版，恰好相隔12年，这是一个时代的接棒，从信息化升迁至数字化。 1.2.2Oinone与Odoo的不同之处 技术方面的不同 在技术上，Oinone和Odoo有相同之处，也有不同之处。它们都基于元数据驱动的软件系统，但是它们在如何让元数据运作的机制上存在巨大差异。Odoo是企业管理场景的单体应用，而Oinone则致力于企业商业场景的云原生应用。因此，它们在技术栈的选择、前后端协议设计、架构设计等方面存在差异。 场景方面的不同 在场景上，Oinone和Odoo呈现许多差异。相对于SAP这些老牌ERP厂商，Odoo算是西方在企业级软件领域的后起之秀，其软件构建方式、开源模式和管理理念在国外取得了非凡的成就。然而，在国内，Odoo并没有那么成功或者并没有那么知名。国内做Odoo的伙伴普遍认为，Odoo与中国用户的交互风格不符，收费模式设计以及外汇管制使商业活动受到限制，本地化服务不到位，国内生态没有形成合力，伙伴们交流合作都非常少。另外，Odoo在场景方面主要围绕内部流程管理，与国内老牌ERP如用友、金蝶重叠，市场竞争激烈。相比之下，Oinone看准了企业视角由内部管理转向业务在线、生态在线（协同）带来的新变化，聚焦新场景，利用云、端等新技术的发展，从企业内外部协同入手，以业务在线驱动企业管理流程升级。它先立足于国内，做好国内生态服务，再着眼未来的国际化。 无代码设计器的定位 在无代码设计器的定位上，Odoo的无代码设计器是一个非常轻量的辅助工具，因为ERP场景下，一个企业实施完以后基本几年不会变，流程稳定度非常高。相反，Oinone为适应"企业业务在线化后，所有的业务变化与创新都需要通过系统来触达上下游，从而敏捷响应快速创新"的时代背景，重点打造出五大设计器。（如下图1-2所示）。 图1-2 Oinone五大设计器 在数字化时代中国软件将接棒世界，而Oinone也要接棒Odoo，把数字化业务与技术的最佳实践赋能给企业，帮助企业数字化转型不走弯路！

  史, 昂

  2024年5月23日

  1.9K000
• Oinone 7天入门到精通

  3.5.6.3 布局的配置

  布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。 前沿 在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。 目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。 这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。 图3-5-6-19 Flex布局示意 图3-5-6-20 Flex布局示意 图3-5-6-21 Flex布局示意 从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。 优点 图3-5-6-22 Flex兼容性 Flex的兼容性，可以看得出来，目前主流的浏览器都支持该属性。所以Flex兼容性强，如果你想对局部做布局处理，Flex是最好选择。 缺陷 刚刚也提到了，用户想要的布局是千奇百怪的，如果他想要的布局在现有的功能中无法实现怎么办？让用户放弃？还是说服他使用现在的布局。 Grid布局 Grid布局系统采用的是二维布局，二维布局有四个方向：上、下、左、右，它只有面积没有体积，比如一张纸、网格。 Grid布局 <div id="grid-container-one"> <div class="one-1">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div class="one-6">Grid Item 6</div> </div> <div id="grid-container-two"> <div class="tow-1">Grid Item 1</div> <div class="tow-2">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> </div> <div id="grid-container-three"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div class="grid">Grid Item 3</div> <div class="grid-column">Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> <div>Grid Item 7</div> <div class="grid-column">Grid Item 8</div> </div> HTML CSSResult Skip Results Iframe EDIT ON * { box-sizing: border-box; padding: 0; margin: 0; line-height: 1.5; font-weight: bold; text-align: center; } #grid-container-one{ background-color: black; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); gap: 10px; border: solid black 2px; margin-bottom: 20px; color: salmon; } #grid-container-one div { border: solid white 2px; padding: 10px; } #grid-container-one .one-1 { grid-area: span 1/span 3; text-aligin: center } #grid-container-one .one-6 { grid-column: 3 /4; } #grid-container-two{ background-color: CADETBLUE; display: grid; grid-template-columns: 15% repeat(2, 1fr);…

  史, 昂

  2024年5月23日

  1.4K000