- 博客(24)
- 收藏
- 关注
RSS订阅原创 简易版纵向时间轴组件
效果一实现一个这样的功能其实不难，下面直接贴代码。但是案例中的气泡边框的三角形会有一个可能被忽视的问题。我们实现三角形的带边框的效果其实就是由两个三角形组成，紫色的三角形和白色的三角形叠加实现。如何实现一个三角形(下面示例把绿色当做白色)把背景去掉，两个三角形重叠，紫色部分就是我们需要的气泡角。因为我们要保证紫色部分的宽度（也就是下图黄色箭头的距离）是和我们气泡边框的宽度一致为2的话，我们就要求等腰直角三角形的斜边长度就是我们绿色三角形偏移的距离：2px / cos(45deg)。大部分人可
2023-06-05 14:21:46
494
原创 3、Fabric.js 操作杆
在多种场景中，我们可能会有添加自定义控制点的需求，例如：删除操作、如果有元素连线的需求，我们需要监听四周操作点的点击事件等等…我们会用到，下面先简单介绍一下常用的属性：visible：控制点是否显示，默认true。actionName：操作点的名称，因为默认是缩放，所以默认’scale’。x：操作点的相对位置，0,0是对象的中心，而-0.5（左）或0.5（右）是操作元素的左右边界线。y：操作点的相对位置，0,0是对象的中心，而-0.5（顶部）或0.5（底部）是操作元素的上下边界线。
2023-03-17 15:17:52
1077
原创 1、Fabric.js 入门（vue3 + vite + ts）
此处背景引用的是外部svg，这里只介绍了宽高设置和背景设置，更多配置可去。这只是简单的创建一个页面，更多配置尽请期待…我项目中使用的是这个版本…
2023-03-17 14:58:55
2218
原创 实现一个仪表盘
UI 甩过来了这样的一张图，让我实现，作为一位面向Google百度编程的程序媛，立马打开了搜索引擎，找遍了都没有找到合适的插件。怎么办呢？只能自己来了呀！接下来我们就从这几个点逐步击破，实现效果，哈哈哈哈哈哈哈哈哈哈哈 开始吧！！！
2022-12-13 17:10:34
1513
2
原创 15、Gantt 修改样式部分
指定任务栏中的文本和灯箱的标题https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html// timeLine 文字gantt.templates.task_text = function (start, end, task) { return task.taskSpecification + 'dsfsdihf';};指定任务栏已完成部分的文本https://docs.dhtmlx.com/gantt/api_.
2022-05-11 16:19:11
3523
原创 14、Gantt Link
添加一个新的依赖链接https://docs.dhtmlx.com/gantt/api__gantt_addlink.htmlvar linkId = gantt.addLink({ id:1, source:1, target:2, type:gantt.config.links.finish_to_start});// 在将新链接添加到甘特图之前触发gantt.attachEvent('onBeforeLinkAdd', function (id, link.
2022-05-11 16:11:43
351
原创 13、Gantt 甘特图元素的工具提示
gantt.plugins({ tooltip: true}); // tooltip 自定义gantt.templates.tooltip_text = function (start, end, task) { const equipmentCodes = (task.equipmentList || []).map((v) => v.equipmentCode).join('，'); const inChargeName = task.inChargeName ? task.
2022-05-11 16:08:24
1557
2
原创 12、Gantt 动态改变时间 Scale
<Select v-model:value="scaleConfigValue" style="width: 100px; margin-right: 10px" @select="setScaleConfigFuc"> <Option value="day">按天</Option> <Option value="week">按周</Option> <Option value="month">按月</Op
2022-05-11 16:00:09
867
原创 11、Gantt 动态改变布局 layout
<Select v-model:value="layoutConfigValue" style="width: 100px; margin-right: 10px" @select="setLayoutConfigFuc"> <Option value="gridAndTimeLine">全部</Option> <Option value="grid">仅工单列表</Option> <Option value="ti
2022-05-11 15:57:04
645
原创 10、Gantt 休息日部分 calendar
在甘特图中添加日历https://docs.dhtmlx.com/gantt/api__gantt_addcalendar.htmltask.calendar_id = 'default';// adding a previously created calendarvar calendarId = gantt.addCalendar(calendar); // adding a calendar with a new configvar calendarId = gantt.addCal.
2022-05-11 15:47:47
534
原创 9、Gantt 全屏&取消全屏操作
const ganttData = reactive<{ // 全屏开启状态 fullScreenStatus: boolean;}>({ fullScreenStatus: false,});function collapseExpandFullFuc() { ganttData.fullScreenStatus = gantt.getState().fullscreen;}/** * 开启关闭 & 关闭全屏 */function handleFul
2022-05-09 13:56:14
489
原创 8、Gantt 拖拽操作部分 drag
激活“分支”模式，允许在同一树级别内垂直重新排序任务。https://docs.dhtmlx.com/gantt/api__gantt_order_branch_config.html此选项允许重新排序任务，同时保存它们的树级别位置。例如，子任务永远不会成为父任务。gantt.config.order_branch = true;如果您的甘特图包含大量任务，则分支重新排序的默认模式可能会降低性能。为了加快速度，您可以使用“标记”模式。gantt.config.order_branch = ".
2022-05-09 10:32:35
1937
1
原创 7、Gantt 标记标签部分 marker
向时间线区域添加标记https://docs.dhtmlx.com/gantt/api__gantt_addmarker.htmlvar todayMarker = gantt.addMarker({ start_date: new Date(), css: "today", title:date_to_str( new Date())});setInterval(function(){ var today = gantt.getMarker(todayMarke.
2022-05-09 10:23:26
1206
6
原创 6、Gantt 消息弹窗部分 lightbox
双击task时，弹出lightbox弹出框https://docs.dhtmlx.com/gantt/api__gantt_details_on_dblclick_config.htmlgantt.config.details_on_dblclick = true;// task双击 当用户双击任务时触发 该事件是可阻止的。返回 false 将取消默认处理程序gantt.attachEvent('onTaskDblClick', function (id, e) { console.log(.
2022-05-09 10:08:09
969
原创 5、Gantt 界面相关部分
返回任务的可见高度https://docs.dhtmlx.com/gantt/api__gantt_gettaskheight.htmlvar height = gantt.getTaskHeight(); // -> 30计算任务的DOM元素在时间轴区域的位置和大小https://docs.dhtmlx.com/gantt/api__gantt_gettaskposition.html// adding baseline displaygantt.addTaskLayer(fu.
2022-05-09 10:03:25
600
原创 4、Gantt 任务节点部分
获取任务节点https://docs.dhtmlx.com/gantt/api__gantt_gettask.htmlgantt.addTask({ id:7, text:"Task #5", start_date:"02-09-2013", duration:28}, "pr_2"); gantt.getTask(7);//->{id:7, text:"Task #5", start_date:"02-09-2013", duration:28, /.
2022-05-07 18:35:36
738
原创 3、Gantt 相关配置 链接
配置文档地址（网友整理翻译过的）https://blog.csdn.net/qq_24472595/article/details/81630117?utm_source=blogxgwz1vue——dhtmlxGantt甘特图API精华总结https://blog.csdn.net/qq_24641385/article/details/112464817dhtmlxGantt使用教程：如何重新排序任务https://blog.csdn.net/RoffeyYang/article/detai.
2022-05-07 17:39:13
347
原创 2、Gantt 入门 （vue3 + ts）
首先把 gantt 官网下载的相关文件放入 resource 文件中。下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml在html文件中引入创建一个gantt components，此框架是vue3 + ts + ant design。<template> <div ref="ganttRef"></div></template><script>.
2022-05-07 17:34:38
2488
原创 1、Export to PDF and PNG
官网链接https://docs.dhtmlx.com/gantt/desktop__export.html#customstylefortheoutputfile导出参数列表 参数名 参数类型及注释 name 输出文件的文件名称 skin (‘terrace’, ‘skyblue’, ‘meadow’, ‘broadway’) 导出甘特图的皮肤选项 start 置将在输出甘特图中显示的数.
2022-05-07 17:28:24
325
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人