网站根目录文件夹,怎么管理购物网站,qq浏览器直接打开网页,制作一个简单网站的代码1.前言 项目开发中需要使用甘特图展示项目实施进度#xff0c;左侧为表格计划#xff0c;右侧为图表进度展示。wl-gantt-mater#xff0c;dhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单#xff0c;可操作性强#xff0c;基础版本免费。 甘特图#xff08;Gan…1.前言 项目开发中需要使用甘特图展示项目实施进度左侧为表格计划右侧为图表进度展示。wl-gantt-materdhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单可操作性强基础版本免费。 甘特图Gantt chart又称为横道图、条状图Bar chart通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特Henry Laurence Gantt先生的名字命名。 2. gantt-elasticvue2中甘特图实现与引入
2.1 gantt-elastic
官方demo gantt-elastic官网gantt-elastic | Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]https://neuronetio.github.io/gantt-elastic/
2.2 npm install引入
不受网络限制直接npm install在项目中
npm install --save gantt-elastic
npm install --save gantt-elastic-header # 可选根据需求安装
将对应的demo组件引入对应的项目。
2.3内网引入
(1)拉取github上的gantt-elastic项目
将对应需要的依赖进行复制到需要开发的项目依赖中node_module。
需要复制的依赖包相关依赖包已上传到博客资源中可自行下载使用。
dayjs
gantt-elastic
gantt-elastic-header
resize-observe-polyfill
vue-slider-component
vue-switches
(2) package.json版本锁定
dependencies: {dayjs: ^1.8.14,gantt-elastic: ^1.0.12,gantt-elastic-header: ^0.1.11,
}
(3) demo引入
templategantt-elastic:optionsoptions:taskstaskstasks-changedtasksUpdateoptions-changedoptionsUpdatedynamic-style-changedstyleUpdategantt-header slotheader/gantt-header/gantt-elastic
/templatescript
import GanttElastic from gantt-elastic;
import GanttHeader from gantt-elastic-header;
import dayjs from dayjs;// just helper to get current dates
function getDate(hours) {const currentDate new Date();const currentYear currentDate.getFullYear();const currentMonth currentDate.getMonth();const currentDay currentDate.getDate();const timeStamp new Date(currentYear,currentMonth,currentDay,0,0,0).getTime();return new Date(timeStamp hours * 60 * 60 * 1000).getTime();
}let tasks [{id: 1,label: Make some noise,user:a hrefhttps://www.google.com/search?qJohnDoe target_blank stylecolor:#0077c0;John Doe/a,start: getDate(-24 * 5),duration: 15 * 24 * 60 * 60 * 1000,percent: 85,type: project,collapsed: true,},{id: 2,label: With great power comes great responsibility,user:a hrefhttps://www.google.com/search?qPeterParker target_blank stylecolor:#0077c0;Peter Parker/a,parentId: 1,start: getDate(-24 * 4),duration: 4 * 24 * 60 * 60 * 1000,percent: 50,type: milestone,collapsed: true,style: {base: {fill: #1EBC61,stroke: #0EAC51}}},{id: 3,label: Courage is being scared to death, but saddling up anyway.,user:a hrefhttps://www.google.com/search?qJohnWayne target_blank stylecolor:#0077c0;John Wayne/a,parentId: 2,start: getDate(-24 * 3),duration: 2 * 24 * 60 * 60 * 1000,percent: 100,type: task},{id: 4,label: Put that toy AWAY!,user:a hrefhttps://www.google.com/search?qClarkKent target_blank stylecolor:#0077c0;Clark Kent/a,start: getDate(-24 * 2),duration: 2 * 24 * 60 * 60 * 1000,percent: 50,type: task,dependentOn: [3]},{id: 5,label:One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.,user:a hrefhttps://www.google.com/search?qAustinPowers target_blank stylecolor:#0077c0;Austin Powers/a,parentId: 4,start: getDate(0),duration: 2 * 24 * 60 * 60 * 1000,percent: 10,type: milestone,style: {base: {fill: #0287D0,stroke: #0077C0}}},{id: 6,label: Butch Mario and the Luigi Kid,user:a hrefhttps://www.google.com/search?qMarioBros target_blank stylecolor:#0077c0;Mario Bros/a,parentId: 5,start: getDate(24),duration: 1 * 24 * 60 * 60 * 1000,percent: 50,type: task,collapsed: true,style: {base: {fill: #8E44AD,stroke: #7E349D}}},{id: 7,label: Devon, the old man wanted me, it was his dying request,user:a hrefhttps://www.google.com/search?qKnightRider target_blank stylecolor:#0077c0;Knight Rider/a,parentId: 2,dependentOn: [6],start: getDate(24 * 2),duration: 4 * 60 * 60 * 1000,percent: 20,type: task,collapsed: true},{id: 8,label: Hey, Baby! Anybody ever tell you I have beautiful eyes?,user:a hrefhttps://www.google.com/search?qJohhnyBravo target_blank stylecolor:#0077c0;Johhny Bravo/a,parentId: 7,dependentOn: [7],start: getDate(24 * 3),duration: 1 * 24 * 60 * 60 * 1000,percent: 0,type: task},{id: 9,label:This better be important, woman. You are interrupting my very delicate calculations.,user:a hrefhttps://www.google.com/search?qDexter\sLaboratory target_blank stylecolor:#0077c0;Dexter\s Laboratory/a,parentId: 8,dependentOn: [8, 7],start: getDate(24 * 4),duration: 4 * 60 * 60 * 1000,percent: 20,type: task,style: {base: {fill: #8E44AD,stroke: #7E349D}}},{id: 10,label: current task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 5),duration: 24 * 60 * 60 * 1000,percent: 0,type: task},{id: 11,label:test task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 6),duration: 24 * 60 * 60 * 1000,percent: 0,type: task},{id: 12,label: test task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 7),duration: 24 * 60 * 60 * 1000,percent: 0,type: task,parentId: 11},{id: 13,label:test task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 8),duration: 24 * 60 * 60 * 1000,percent: 0,type: task},{id: 14,label: test task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 9),duration: 24 * 60 * 60 * 1000,percent: 0,type: task},{id: 15,label: test task,user:a hrefhttps://www.google.com/search?qJohnattanOwens target_blank stylecolor:#0077c0;Johnattan Owens/a,start: getDate(24 * 16),duration: 24 * 60 * 60 * 1000,percent: 0,type: task}];let options {taskMapping: {progress: percent},maxRows: 100,maxHeight: 500,title: {label: Your project title as html (link or whatever...),html: false},row: {height: 24},calendar: {hour: {display: true}},chart: {progress: {bar: false},expander: {display: true}},taskList: {expander: {straight: false},columns: [{id: 1,label: ID,value: id,width: 40},{id: 2,label: Description,value: label,width: 200,expander: true,html: true,events: {click({ data, column }) {alert(description clicked!\n data.label);}}},{id: 3,label: Assigned to,value: user,width: 130,html: true},{id: 3,label: Start,value: task dayjs(task.start).format(YYYY-MM-DD),width: 78}, {id: 4,label: Type,value: type,width: 68},{id: 5,label: %,value: progress,width: 35,style: {task-list-header-label: {text-align: center,width: 100%},task-list-item-value-container: {text-align: center,width: 100%}}}]},locale: {name: en,Now: Now,X-Scale: Zoom-X,Y-Scale: Zoom-Y,Task list width: Task list,Before/After: Expand,Display task list: Task list}};export default {name: Gantt,components: {GanttElastic,GanttHeader},data() {return {tasks,options,dynamicStyle: {},lastId: 16};},methods: {tasksUpdate(tasks) {this.tasks tasks;},optionsUpdate(options) {this.options options;},styleUpdate(style) {this.dynamicStyle style;}}
};
/scriptstyle
/style3.gantt-elastic-h
基于 gantt-elastic的拓展封装基本功能相较gantt-elastic完善。在使用gantt-elastic可参考gantt-elastic-h的Api文档。也可选择使用gantt-elastic-h来实现参考使用文档自行完成。 使用文档 | gantt-elastic-h | 使用文档https://jianguoht.github.io/gantt-elastic-h/doc.html#options-tasklist-columns
4.参考博客
vue甘特图(内网引入gantt-elastic以及源码扩展)_vue wl-gantt-CSDN博客文章浏览阅读3.2k次点赞2次收藏18次。前言项目要求用甘特图展示计划的实施过程。之前用过dhtmlx用着不是很舒服。又在网上看了jQueryGantt-masterwl-gantt-matergantt-elastic的大概源码最后选定gantt-elastic(源码相对简单易扩展开发没选用他的进阶版本gantt-schedule-timeline-calendar-master的原因是这个要收费)1.外网开发直接去github上npm install就好我是内网开发在github上install下来然后把下下来的nod_vue wl-gantthttps://blog.csdn.net/qq_36566924/article/details/125293765?fromshareblogdetailsharetypeblogdetailsharerId125293765sharereferPCsharesource2301_76671906sharefromfrom_link
