当前位置: 首页 > news >正文

「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?

DHTMLX Scheduler是一个全面的 UI 组件,用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是,某些场景可能需要自定义解决方案。例如,如果项目的资源(即劳动力)有限,则需要确保以更高的精度分配他们的工作量。为此,应用条形图等数据可视化工具会很有用。

DHTMLX Suite允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件,这些组件可以轻松组合到单个应用程序界面中。

DHTMLX Scheduler 最新版下载   DHTMLX Suite 最新版下载

在本教程中,您将学习如何将我们的 Scheduler 组件连接到DHTMLX Suite中的 JavaScript Chart 库,从而增强对调度应用程序任何视图中的资源工作负载的控制。

DHTMLX Scheduler 与 Suite 图表库的连接指南

如果您需要在我们的JavaScript 调度库中添加一种用于管理资源工作量的辅助机制,您可以使用基于 Suite 的 Chart 小部件的条形图对其进行补充,如下面的示例所示。使用此示例,您可以更改员工的工作时间,这些更改将动态显示在图表中。此外,您还可以通过单击图表图例中的员工姓名来隐藏和显示两个小部件中特定员工的数据。

步骤 1:初始化并配置调度程序

一般来说,DHTMLX Scheduler 可以通过调度程序的标记或标头配置属性在页面上初始化。

在这篇文章中,我们使用第二种选择:

scheduler.init ( " scheduler_here " , new Date ( 2024 , 5 , 24 ) , "week" ) ;

现在,我们进行调度程序配置:

  • 限制显示的工作时间,并将时间步长设置为30分钟:
scheduler.config.first_hour = 9;
scheduler.config.last_hour = 22;
scheduler.config.time_step = 30;
scheduler.config.cascade_event_display = true;
  • 添加通过灯箱将事件分配给不同人员/员工的功能,并根据他们的工作场所为其着色。为此,您需要创建一个员工数组 ( owner_opts ),并将他们的选择控件添加到灯箱:
let owners = [{ key: 1, label: 'John' },{ key: 2, label: 'Hannah' },{ key: 3, label: 'David' }
];scheduler.locale.labels.section_select = 'Owner';scheduler.config.lightbox.sections = [{ name:"text", height:50, map_to:"text", type:"textarea", focus:true },{ name:"select", height:40, map_to:"owner_id", type:"select", options:owners},{ name:"time", height:72, type:"time", map_to:"auto"}
];scheduler.templates.event_class = function(start, end, ev){return `owner_${ev.owner_id}`;
}
  • 在 CSS 文件中设置这些事件的样式:
<style>.owner_1 {--dhx-scheduler-event-background: #394E79;--dhx-scheduler-event-color: white;}.owner_2 {--dhx-scheduler-event-background: #5E83BA;--dhx-scheduler-event-color: white;}.owner_3 {--dhx-scheduler-event-background: #C2D2E9;--dhx-scheduler-event-color: white;}
</style>

接下来,我们转到 DHTMLX 图表。

步骤 2:初始化和配置图表

首先,您需要创建一个配置,在其中指定图表的类型和其他设置。使用getConfig函数:

function getConfig() {return {type: "bar",css: "dhx_widget--bg_white dhx_widget--bordered",
// Set the coordinate axes in accordance with the displayed datascales: {"bottom": {text: "day",textTemplate: function(day) {return day;}},"left":{title: "Hours",max: 24}},
// Configure the chart series  series: [{id: "A",value: "John",fill: "#394E79",color: "none"},{id: "B",value: "Hannah",fill: "#5E83BA",color: "none"},{id: "C",value: "David",fill: "#C2D2E9",color: "none"}],
// Add the chart legend configurationlegend: {series: ["A", "B", "C"],form: "rect",valign: "top",halign: "right"}}
}

之后,使用dhx.Chart对象构造函数初始化条形图:

const chart = new dhx.Chart ( " chart " , getConfig ( ) ) ;

步骤 3:将数据从 Scheduler 传输到 Chart

由于 Scheduler 和 Chart 使用不同的数据格式,因此您需要先转换 Scheduler 数据,然后再将其传输到 Chart。为此,您需要获取一周中每一天的所有事件,计算每个事件的持续时间(以小时为单位),并将这些小时数分配给 3 个不同的对象(您的场景中的对象数量可能不同,我们的演示中有 3 个),具体取决于这些事件分配给哪个所有者。

您需要编写自定义函数并使用部分 Scheduler API:

1.创建calculateEventsLoad()函数:

function calculateEventsLoad(){

2.通过 API 获取调度程序视图日期:

 let state = scheduler.getState();let min = state.min_date;

3.声明变量来存储计算的数据:

  let tempDuration_a, tempDuration_b, tempDuration_c;let workload = [];

4.计算每个业主的工作量:

 for(let i = 0; i<7; i++){tempDuration_a = 0;tempDuration_b = 0;tempDuration_c = 0;

5.获取一周中每一天的活动:

 let dayEvs = scheduler.getEvents(scheduler.date.add(new Date(min), i, "day"), scheduler.date.add(new Date(min), i+1, "day"));

6.计算每个业主的活动工作量:

              dayEvs.forEach(ev => {const duration = (ev.end_date - ev.start_date) / (1000 * 60 * 60);switch (ev.owner_id) {case "1":tempDuration_a += duration;break;case "2":tempDuration_b += duration;break;case "3":tempDuration_c += duration;break;}});

7.将结果数据推送到数组中,并将该数据传递给图表组件:

workload[i] = {"workload_a": tempDuration_a,"workload_b": tempDuration_b,"workload_c": tempDuration_c,"day": scheduler.date.add(new Date(min), i, "day").getDate()};}generateChartData(workload);
}

8.创建将准备好的数据转换为图表格式并将其解析为图表的函数:

function generateChartData(workload){// Generate and parse prepared chart's dataconst chartData = workload.map(el => ({day : el.day,"John" : el.workload_a,"Hannah" : el.workload_b,"David" : el.workload_c,}));chart.data.parse(chartData);

调用calculateEventsLoad()函数时,您将看到包含准确数据的图表和调度程序。

步骤 4:将 Scheduler 与 Chart 同步

最后,您需要同步组件以确保在调度日历中所做的更改将立即显示在条形图中。您应该使用调度程序事件侦听器将调度程序更新同步到图表中,如下例所示:

scheduler.attachEvent("onEventChanged", function(id,ev){calculateEventsLoad();
});scheduler.attachEvent("onEventAdded", function(id,ev){calculateEventsLoad();
});scheduler.attachEvent("onEventSave",function(id,ev,is_new){calculateEventsLoad();return true;
})scheduler.attachEvent("onViewChange", function (new_mode , new_date){calculateEventsLoad();
});

步骤 5:同步 Chart 和 Scheduler 中的过滤功能

条形图带有过滤功能,可以通过单击图表的图例来显示和隐藏特定员工的数据。您可以将此过滤功能与调度程序同步,以在那里过滤事件。

首先,您需要创建一个变量来存储过滤器值:

const filterOptions = new Set([1, 2, 3]);

然后,创建一个辅助函数来改变这个变量:

function setFilter(ownerID){if(filterOptions.has(ownerID)){filterOptions.delete(ownerID);}else{filterOptions.add(ownerID);}scheduler.setCurrentView();
}

使用图表组件的toggleSeries事件单击图表图例中的复选框后,将调用此辅助函数:

chart.events.on("toggleSeries", function(id){switch (id) {case "A":setFilter(1);break;case "B":setFilter(2);break;case "C":setFilter(3);break;}
});

现在,您应该使用结果数组在调度程序中进行过滤:

scheduler.filter_week = function(id, event){return filterOptions.has(parseInt(event.owner_id));
}

就是这样。按照上述步骤,您可以像我们的示例中那样使用条形图来丰富您的 JavaScript 调度程序,以更准确地管理资源工作负载。

总结

正确使用资源是任何项目中有效任务管理的关键方面。使用 JavaScript 调度日历,您必须确保资源(员工、房间、设备)以最佳方式加载任务或约会。使用附加工具(例如 Suite 的 Chart 小部件)可以更全面地了解此事,本教程提供了快速顺利完成集成所需的所有信息。

相关文章:

「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?

DHTMLX Scheduler是一个全面的 UI 组件&#xff0c;用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是&#xff0c;某些场景可能需要自定义解决方案。例如&#xff0c;如果项目的资源&#xff08;即劳动力&#xff09;有限&#xff0c;则需要确保以更高的精度分…...

论文阅读《BEVFormer》

BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 目录 摘要1 介绍2 相关工作2.1 基于Transformer的2D感知 摘要 3D视觉感知任务对于自动驾驶系统至关重要&#xff0c;包括基于多相机图像的3D检测和地图分割。…...

sql专题 之 sql的执行顺序

文章目录 sql的执行顺序sql语句的格式实际的执行顺序&#xff1a;虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句&#xff0c;这次我们对于这些语句来个小思索 戳这里→ sql专题 之 常用命令 sql的执行顺序 SQL语句的执行顺序是…...

Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

兼容性注意: Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。【摘抄自vite官网】 这里我用的node版本是 v18.20.2 创建项目: 创建项目我们可以使用npm、yarn、pnpm、bun …...

CTF-RE: TEA系列解密脚本

// // Created by A5rZ on 2024/10/26. //#ifndef WORK_TEA_H #define WORK_TEA_H#endif //WORK_TEA_H#include <cstdint> #include <cstdio>// 定义TEA加密算法的轮次&#xff0c;一般建议为32轮 #define TEA_ROUNDS 32 #define DELTA 0x9e3779b9// TEA加密函数 v…...

信号量和线程池

1.信号量 POSIX信号量&#xff0c;用与同步操作&#xff0c;达到无冲突的访问共享资源目的&#xff0c;POSIX信号量可以用于线程间同步 初始化信号量 #include <semaphore.h> int sem_init(sem_t *sem, int pshared, unsigned int value); sem&#xff1a;指向sem_t类…...

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进

文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…...

「QT」几何数据类 之 QPointF 浮点型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…...

可能是全网第一个MySQL Workbench插件编写技巧

引言 应公司要求&#xff0c;数据库的敏感数据在写入到数据库中要进行加密&#xff0c;但是在测试环境查询数据的时候要手动解密&#xff0c;很不方便&#xff0c;有的时候数据比较多&#xff0c;解密比较麻烦。遂研究了一下如何通过 MySQL Workbench 的插件来实现查询数据一键…...

D62【python 接口自动化学习】- python基础之数据库

day62 SQL 基础 学习日期&#xff1a;20241108 学习目标&#xff1a;MySQL数据库-- 131 SQL基础和DDL 学习笔记&#xff1a; SQL的概述 SQL语言的分类 SQL的语法特征 DDL - 库管理 DDL - 表管理 总结 SQL是结构化查询语言&#xff0c;用于操作数据库&#xff0c;通用于绝大…...

探索美赛:从准备到挑战的详细指南

前言 美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;简称“美赛”&#xff0c;是全球规模最大的数学建模竞赛之一。它鼓励参赛者通过数学建模来解决现实世界中的复杂问题&#xff0c;广受世界各地大学生的欢迎。本文将详细介绍美赛的全过程&#xff0c;从…...

IP地址查询——IP归属地离线库

自从网络监管部门将现实IP地址列入监管条例&#xff0c;IP地址的离线库变成网络企业发展业务的不可或缺的一部分&#xff0c;那么IP地址离线库是什么&#xff0c;又能够给我们带来什么呢&#xff1f; 什么是IP地址离线库&#xff1f; IP地址离线库是IP地址服务商将通过各种合…...

“倒时差”用英语怎么说?生活英语口语学习柯桥外语培训

“倒时差”用英语怎么说&#xff1f; “倒时差”&#xff0c;这个让无数旅人闻之色变的词汇&#xff0c;在英语中对应的正是“Jet Lag”。"Jet" 指的是喷气式飞机&#xff0c;而 "lag" 指的是落后或延迟。这个短语形象地描述了当人们乘坐喷气式飞机快速穿…...

Linux入门攻坚——37、Linux防火墙-iptables-3

私网地址访问公网地址的问题&#xff0c;请求时&#xff0c;目标地址是公网地址&#xff0c;可以在公网路由器中进行路由&#xff0c;但是响应报文的目的地址是私网地址&#xff0c;此时在公网路由器上就会出现问题。公网地址访问私网地址的问题&#xff0c;需要先访问一个公网…...

微服务架构面试内容整理-安全性-Spring Security

Spring Security 是 Spring 框架中用于实现认证和授权的安全模块,它提供了全面的安全解决方案,可以帮助开发者保护 Web 应用、微服务和 API 免受常见的安全攻击。以下是 Spring Security 的主要特点、工作原理和使用场景: 主要特点 1. 身份认证与授权: 提供多种认证方式,…...

新的服务器Centos7.6 安装基础的环境配置(新服务器可直接粘贴使用配置)

常见的基础服务器配置之Centos命令 正常来说都是安装一个docker基本上很多问题都可以解决了&#xff0c;我基本上都是通过docker去管理一些容器如&#xff1a;mysql、redis、mongoDB等之类的镜像&#xff0c;还有一些中间件如kafka。下面就安装一个 docker 和 nginx 的相关配置…...

深度学习:广播机制

广播机制&#xff08;Broadcasting&#xff09;是 PyTorch&#xff08;以及其他深度学习框架如 NumPy&#xff09;中的一种强大功能&#xff0c;它允许不同形状的张量进行逐元素操作&#xff0c;而不需要显式地扩展张量的维度。广播机制通过自动扩展较小的张量来匹配较大张量的…...

音视频入门基础:FLV专题(25)——通过FFprobe显示FLV文件每个packet的信息

音视频入门基础&#xff1a;FLV专题系列文章&#xff1a; 音视频入门基础&#xff1a;FLV专题&#xff08;1&#xff09;——FLV官方文档下载 音视频入门基础&#xff1a;FLV专题&#xff08;2&#xff09;——使用FFmpeg命令生成flv文件 音视频入门基础&#xff1a;FLV专题…...

Openstack7--安装消息队列服务RabbitMQ

只需要在控制节点安装 安装RabbitMQ yum -y install rabbitmq-server 启动RabbitMQ并设置开机自启 systemctl start rabbitmq-server;systemctl enable rabbitmq-server 创建 rabbitmq 用户 并设置密码为 000000 rabbitmqctl add_user rabbitmq 000000 如果你不慎创错了…...

day55 图论章节刷题Part07([53.寻宝]prim算法、kruskal算法)

前言&#xff1a;使用最小生成树的方法解决将所有节点连接起来所需的最小路径问题。 prim算法 Prim算法是一种贪心算法&#xff0c;从任意一个顶点开始构建最小生成树。每次选择当前已加入生成树的顶点中&#xff0c;距离最近的尚未加入生成树的顶点&#xff0c;直到所有顶点…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...