Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
v-gantt-chart
Advanced tools
基于 Vue 实现的 gantt-like 图表 ,用于排班展示
npm i v-gantt-chart --save
Include plugin in your main.js
file.
import Vue from 'vue'
import vGanttChart from 'v-gantt-chart';
Vue.use(vGanttChart});
<template>
<v-gantt-chart :startTime="startTime"
:endTime="endTime"
:datas="datas">
<template v-slot:block="{data,item}">
<!-- 你的容器块组件 -->
<Test :data="data" :item="item"></Test>
</template>
<template v-slot:left="{data}">
<!-- 你的行名组件 -->
<TestLeft :data="data"></TestLeft>
</template>
<template v-slot:title>
<!-- 你的表头组件 -->
hola
</template>
</v-gantt-chart>
</template>
import Test from "./test.vue"; //你自己的gantt条容器
import TestLeft from "./test-left.vue"; //你自己的行名称组件
import { mockDatas } from "@src/mock/index.js"; //伪造的数据
import moment from "moment" //时间库
export default {
name: "App",
components: { Test, TestLeft },
data() {
return {
startTime: moment().toString(),//时间轴开始时间
endTime: moment()
.add(2, "d")
.add(2, "h")
.add(5, "s").toString(), //时间结束时间
datas: mockDatas(100), // gantt数据
};
},
};
//渲染的数据,有特殊格式 ,目前要求数组中每一个值均为对象,且有gtAarry对象数组这个属性(默认取gtArray,也可以自定义多个数组key值)
//数组中每一个对象需有两个属性,start和end(不提供的情况,偏移与宽度将为0),需为合法的时间字符串.例如
[
{
id:'test', //非必须
gtArray:[ //默认的需要渲染的数组的key
{
name:'test', //非必须
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
}
],
customKey:[ //自定义的需要渲染的数组的key
{
id:'test', //非必须
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
}
]
}
]
// 假设你传入的数据为
[
{
id:'test',
name:'sala',
gtArray:[
{
name:'test',
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
//...
}
],
//...
}
//...
]
<template v-slot:block="{data,item}">
<!-- 你的容器块组件 -->
<Test :data="data" :item="item"></Test>
</template>
//则data 为
{
id:'test',
name:'sala',
gtArray:[{...}],
//...
}
//item 为
{
name:'test',
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
//...
}
<template v-slot:left="{data}">
<!-- 你的行名组件 -->
<TestLeft :data="data"></TestLeft>
</template>
//则data 为
{
id:'test',
name:'sala',
gtArray:[{...}],
//...
}
param | required | type | default | describe |
---|---|---|---|---|
startTime | ✅ | string | -- | 时间轴开始时间,需为合法的时间字符串,如:‘2019-01-11 18:18:18’ |
endTime | ✅ | string | -- | 时间轴结束时间,需为合法的时间字符串,如:‘2019-01-11 18:18:18’ |
cellWidth | ❌ | number | 50 | 时间区间的宽度 |
cellHeight | ❌ | number | 20 | 时间区间的高度 |
titleHeight | ❌ | number | 40 | 表头的高度 |
titleWidth | ❌ | number | 200 | 表头和行的宽度 |
scale | ❌ | number | 60 | 时间轴的刻度值。单位:分钟,允许值[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60, 120,180,240,360, 720, 1440] |
datas | ✅ | array | -- | 渲染的数据,有特殊格式 ,目前要求数组中每一个值均为对象,且有gtAarry对象数组这个属性,gtArray中每一个对象需有两个属性,start和end(不提供的情况,偏移与宽度将为0),需为合法的时间字符串.例如[{id:'test',gtArray:[{start:'2019-01-11 18:18:18',end:'2019-01-11 18:18:18'}]}] 其他不做限制。 |
arrayKeys | ❌ | array | ["gtArray"] | 需要渲染的数组的key |
dataKey | ❌ | string | -- | 渲染的每一行的key |
itemKey | ❌ | string | -- | 渲染的每一个gantt容器的key |
showCurrentTime | ❌ | boolean | false | 显示当前时间,每秒钟更新 |
timelines | ❌ | array | -- | 显示标记时间,有特殊格式 [{time:'2019-01-11 18:18:18',color:'#00000'}] |
scrollToTime | ❌ | string | -- | 滚动到指定的时间,需为合法的时间字符串 |
scrollToPostion | ❌ | object | -- | 滚动到指定的位置 格式为 {x:number,y:number} |
hideHeader | ❌ | boolean | false | 隐藏时间轴和表头 |
hideXS | ❌ | boolean | false | 隐藏时间轴和表头 |
hideXScrollBar | ❌ | boolean | false | 隐藏横向滚动轴 |
hideYScrollBar | ❌ | boolean | false | 隐藏纵向滚动轴 |
event | type | describle |
---|---|---|
scrollLeft | number | X轴的滚动值 |
scrollTop | number | Y轴的滚动值 |
#clone项目,进入项目根目录
#安装
npm i
# 启动
npm run serve
or
yarn serve
#打开浏览器地址栏输入localhost:8080即可
IE 需要注意一下
1.2.2
1.2.1
1.2.0
1.1.3
1.1.2
MIT ©wuchouchou
FAQs
display gantt-like vaule,like use this to order bus schedule.
The npm package v-gantt-chart receives a total of 29 weekly downloads. As such, v-gantt-chart popularity was classified as not popular.
We found that v-gantt-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.