跳转到主要内容

交互式可视化图表以显示时间事件

项目描述

Production/Stable License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

定义一个新的视图,以交互式可视化图表显示事件。

该小部件基于外部库 https://visjs.github.io/vis-timeline/examples/timeline

目录

配置

您需要定义一个带有 <timeline> 标签的视图作为基本元素。以下是此标签的可能属性

属性

必需?

描述

date_start

定义包含事件开始日期的字段名称。

date_stop

定义包含事件结束日期的字段名称。date_stop 可以等于 date_start,以在时间轴上显示事件为“点”(瞬时事件)。

date_delay

定义包含事件持续时间(以小时为单位)的字段名称,默认值 = 1。

default_group_by

定义在访问视图或未选择其他分组时用作默认分组的字段名称。

zoomKey

指定是否只有在按下其他键时才放大时间轴。可用值是:‘’(不适用)、‘altKey’、‘ctrlKey’或‘metaKey’。如果您想能够在具有许多事件的视图中使用滚动来垂直导航,则设置此选项。

mode

指定初始可见窗口。可用值是:‘day’以显示当前日,‘week’、‘month’和‘fit’。默认值是‘fit’,以调整可见窗口以适应所有项目。

margin

指定项目周围的边距。应遵守JSON格式。例如:‘{“item”:{“horizontal”:-10}}’。可用值包括:‘{“axis”:}’(项目与时间轴之间的最小像素边距)‘{“item”:}’(水平和垂直方向上项目之间的最小像素边距),‘{“item”:{“horizontal”:}’(项目之间的最小水平像素边距),‘{“item”:{“vertical”:}’(项目之间的最小垂直像素边距),‘{“item”:{“horizontal”:,”vertical”:}}’(项目之间水平和垂直像素边距的组合)。

event_open_popup

当设置为true时,允许在弹出窗口中编辑事件。如果没有设置(默认值),则通过更改到表单视图来编辑记录。

stack

当设置为false时,项目将不会堆叠在彼此之上,因此它们不会重叠。

colors

允许在满足特定条件(JS语法)时设置某些特定颜色。

dependency_arrow

将该属性设置为x2many字段,以在x2many字段引用的记录之间绘制箭头。

可选地,您可以声明一个自定义模板,该模板将用于渲染时间轴项目。您必须将模板命名为‘timeline-item’。以下是模板渲染中可用的变量

  • record:用于访问在时间轴定义中选择的字段值。

  • field_utils:用于格式化和解析值(请参阅web.field_utils中可用的函数)。

您还需要在涉及的模型的操作窗口中声明视图。

示例

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="view_task_timeline" model="ir.ui.view">
        <field name="model">project.task</field>
        <field name="type">timeline</field>
        <field name="arch" type="xml">
            <timeline date_start="date_assign"
                      date_stop="date_end"
                      string="Tasks"
                      default_group_by="user_id"
                      event_open_popup="true"
                      zoomKey="ctrlKey"
                      colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';"
                      dependency_arrow="task_dependency_ids">
                <field name="user_id"/>
                <templates>
                    <div t-name="timeline-item">
                        <div t-esc="record.display_name"/>
                        Assigned to:
                        <span t-esc="record.user_id[1]"/>
                    </div>
                </templates>
            </timeline>
        </field>
    </record>

    <record id="project.action_view_task" model="ir.actions.act_window">
        <field name="view_mode">kanban,tree,form,calendar,gantt,timeline,graph</field>
    </record>
</odoo>

用法

要访问时间轴视图,您必须单击视图切换器中的时钟图标按钮。第一次访问时,时间轴窗口将缩放到适合所有当前元素,就像执行搜索、过滤或按组操作一样。

您可以使用鼠标滚轮在时间轴上放大或缩小,并单击任何空白区域并拖动以在该方向上平移视图。

您的模型记录将显示为矩形,其宽度根据我们的定义表示事件的持续时间。您可以单击此矩形来选择它们。您还可以使用Ctrl或Shift键进行离散或范围选择。所选记录以不同的颜色突出显示(但差异将取决于背景颜色)。一旦选择,您就可以拖动并移动所选记录穿过时间轴。

当记录被选中时,在左上角会出现一个红色十字按钮,允许删除该记录。虽然已选择多个记录,但这不起作用。

记录将根据选定的按组分组标准(如果没有指定,则应用默认的按组分组)分组在不同的块中。将记录从一个块拖动到另一个块将更改相应的字段,以表示该块。您还可以单击组名称以直接编辑涉及记录。

双击记录以编辑它。在打开的区域中双击以创建一个新的记录,并将组以及开始日期链接到您单击的区域。通过按住Ctrl键并从左到右拖动,您可以创建一个新的记录,该记录具有被拖动的开始和结束日期。

已知问题/路线图

  • 在记录更新后实现更有效的时间轴刷新方式;

  • 使attrs属性正常工作;

  • 使动作属性(创建、编辑、删除)在表单和树视图中像在表单和树视图中一样工作。

错误跟踪器

错误追踪在 GitHub Issues 上。如果在那里遇到问题,请检查您的问题是否已经被报告。如果您是第一个发现它的,请帮助我们通过提供详细且受欢迎的 反馈 来解决它。

请不要直接联系贡献者寻求支持或技术问题的帮助。

致谢

作者

  • ACSONE SA/NV

  • Tecnativa

  • Monk Software

  • Onestein

  • Trobz

贡献者

维护者

本模块由OCA维护。

Odoo Community Association

OCA,即Odoo社区协会,是一个非营利组织,其使命是支持Odoo功能的协作开发并推广其广泛使用。

当前 维护者

tarteo

本模块是GitHub上的OCA/web项目的组成部分。

欢迎您贡献力量。有关如何贡献的信息,请访问https://odoo-community.org/page/Contribute

项目详情


下载文件

下载适合您平台的文件。如果您不确定选择哪个,请了解更多关于安装软件包的信息。

源代码分发

本版本没有可用的源代码分发文件。有关生成分发存档的教程,请参阅生成分发存档

构建分发

odoo14_addon_web_timeline-14.0.2.0.3-py3-none-any.whl (402.6 kB 查看哈希值)

上传时间 Python 3

由以下支持

AWSAWS 云计算和安全赞助商 DatadogDatadog 监控 FastlyFastly CDN GoogleGoogle 下载分析 MicrosoftMicrosoft PSF赞助商 PingdomPingdom 监控 SentrySentry 错误日志 StatusPageStatusPage 状态页面