Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
v-gantt-chart
Advanced tools
Readme
基于 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);
<script src="https://unpkg.com/v-gantt-chart/dist/v-gantt-chart.umd.min.js"></script>
<body>
<div id="app">
<v-gantt-chart></v-gantt-chart>
</div>
</body>
<!-- 先引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 再引入v-gantt-chart.js -->
<script src="./v-gantt-chart.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</html>
<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 dayjs from "dayjs" //时间库
export default {
name: "App",
components: { Test, TestLeft },
data() {
return {
startTime: dayjs().toString(),//时间轴开始时间
endTime: dayjs()
.add(2, "d")
.add(2, "h")
.add(5, "s").toString(), //时间结束时间
datas: mockDatas(100), // gantt数据
};
},
};
在默认情况下(即customGenerateBlocks
为false
)的渲染的数据需要特殊格式 ,目前要求数组中每一个值均为对象,且有gtAarry
对象数组这个属性(默认取gtArray
,也可以通过arrayKeys
属性自定义需要渲染的数组)
数组中每一个对象需有两个属性,start
和end
(不提供的情况,偏移与宽度将为0),数值需为合法的时间字符串.例如
[
{
id:'test', //非必须
gtArray:[ //默认的需要渲染的数组
{
name:'test', //非必须
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
}
],
customKey:[ //自定义的需要渲染的数组
{
id:'test', //非必须
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
}
]
}
]
// 假设你传入的数据为
[
{
id:'arrayOne',
name:'sala',
gtArray:[
{
name:'itemOne',
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
// ...其他属性
}
],
//...其他属性
}
//... 其他数组数据
]
两种
需要注意customGenerateBlocks
为 false
(默认值) 的情况<template v-slot:block="{data,item}">
<!-- 你的容器块组件 -->
<Test :data="data" :item="item"></Test>
</template>
data
为 gantt图表中每一行的所有数据
如下
{
id:'arrayOne',
name:'sala',
gtArray:[{...}],
//...
}
item
为 gantt图表中一个小方块对数据
如下
{
name:'itemOne',
start:'2019-01-11 18:18:18',
end:'2019-01-11 18:18:18'
//...
}
customGenerateBlocks
为 true
的情况此时arrayKeys
,itemkey
将不再次生效,如何渲染,渲染什么,将由你自己决定,下方是一个例子
<template v-slot:block="{data,
getPositonOffset,
getWidthAbout2Times,
isInRenderingTimeRange,
startTimeOfRenderArea,
isAcrossRenderingTimeRange,
endTimeOfRenderArea}">
<div class="myBlockContainer"
v-for="item in data.gtArray"
v-if="isInRenderingTimeRange(item.start)||isAcrossRenderingTimeRange(item.start,item.end)
||isInRenderingTimeRange(item.end)"
:key="item.id"
:style="{position:'absolute',
left:getPositonOffset(item.start)+'px',
width:getWidthAbout2Times(item.start,item.end)+'px'}">
<Test :data="data"
:item="item"></Test>
</div>
</template>
data
为gantt图表中每一行的所有数据
{
id:'test',
name:'sala',
gtArray:[{...}],
//...
}
除了data,还会提供以下属性和函数供调用
startTimeOfRenderArea
为当前渲染范围的时间轴开始时间的毫秒数
endTimeOfRenderArea
为当前渲染范围的时间轴结束时间的毫秒数
getPositonOffset(time:string):number
定位函数,根据给定字符串形式的时间生成相对时间轴起点的的偏移值
getWidthAbout2Times(start:string,end:string):number
为宽度计算函数,根据给定字符串形式的时间计算两个时间差的宽度值
isInRenderingTimeRange(time:string):boolean
判定给定的时间是否在屏幕显示的时间轴范围之内
isAcrossRenderingTimeRange(timeStart,timeEnd):boolean
判定给定的时间是否跨越了屏幕显示的时间轴范围之内
<template v-slot:left="{data}">
<!-- 你的行名组件 -->
<TestLeft :data="data"></TestLeft>
</template>
data
为 gantt图表中每一行的所有数据
{
id:'test',
name:'sala',
gtArray:[{...}],
//...
}
<template v-slot:timeline="{day , getTimeScales}">
<!-- 你的时间刻度组件 -->
<TestTimeline :day="day"></TestTimeline>
</template>
day
为 每一个刻度对应的dayjs 对象
getTimeScales(day:dayjs):dayjs[]
计算当前day可以分划多少刻度,参数为day,返回dayjs对象数组
<template v-slot:timeline="{day , getTimeScales}">
<!-- 你的时间刻度组件 -->
<span v-for="i in getTimeScales(day)"> {{i.format('HH:mm')}}</span>
</template>
<template v-slot:markLine="{timeConfig, getPosition}">
<!-- 你的时间标记线组件 -->
<TestMarkline :timeConfig="timeConfig" :getPosition="getPosition"></TestMarkline>
</template>
timeConfig
为 传入的timelines
的每一个值
getPosition(day:string):number
计算当前时间的偏移值,参数为day,返回偏移值
<template v-slot:title>
<!-- 你的表头组件 -->
hola
</template>
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 | [] | 在默认情况下(即customGenerateBlocks 为false )的渲染的数据需要特殊格式 ,目前要求数组中每一个值均为对象,且有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 | 隐藏时间轴和表头 |
hideXScrollBar | ❌ | boolean | false | 隐藏横向滚动轴 |
hideYScrollBar | ❌ | boolean | false | 隐藏纵向滚动轴 |
enableGrab | ❌ | boolean | true | 启动按住拖拽 |
customGenerateBlocks | ❌ | boolean | false | 开启自定义生成渲染块,具体使用见说明 |
timeRangeCorrection | ❌ | boolean | true | 时间矫正,默认开启。关闭后时间轴不会自动填充剩余空间,错误的先后时间会引起错误 |
preload | ❌ | number | 1 | 可视范围外渲染行数。如值为1时,屏幕只能显示10条,但是会顶部,底部会多渲染一条,避免滚动时出现空白。当值为0,渲染全部数据 |
通过使用vue
的ref
来调用组件内部的方法,params
中的scrollToTime
和scrollToPostion
可能会择机废弃,最好使用下方的方法替代。
method | args | describle |
---|---|---|
scrollToPositionHandle | positon:{x:number,y:number} | 滚动到指定位置 |
scrollToTimehandle | time:string | 滚动到指定时间 |
<template>
<v-gantt-chart ref="gantt"></v-gantt-chart>
</template>
export default {
methods:{
doScrollToPostion(){
this.$refs.gantt.scrollToPostionHandle({x:100,y:100})
},
doScrollToTime(){
this.$refs.gantt.scrollToTimehandle("Fri, 31 Jul 2020 12:41:39 GMT")
}
}
};
event | type | describle |
---|---|---|
scrollLeft | number | X轴的滚动值 |
scrollTop | number | Y轴的滚动值 |
#clone项目,进入项目根目录
#安装
npm i
# 启动
npm run serve
or
yarn serve
#打开浏览器地址栏输入localhost:8080即可
IE 需要自己处理一些ployfill,应该是promise
IE 浏览器内无法使用yyyy-MM-dd hh:mm:ss的字符串形式初始化,需要注意时间的格式
MacOS 系统需要在偏好设置中的通用开启始终显示滚动条,否则可能会看不到滚动条
注意查看vue 版本,不是2.6以上vue版本,不能直接使用demo中的v-slot的语法,需要使用旧的slot 语法2.6之前的slot 语法
// 2.6+语法
<template>
<v-gantt-chart :startTime="startTime"
:endTime="endTime"
:datas="datas">
<template v-slot:block="{data,item}">
<!-- 你的容器块组件 -->
<Test :data="data" :item="item"></Test>
</template>
</template>
// 2.6之前的语法
<template>
<v-gantt-chart :startTime="startTime"
:endTime="endTime"
:datas="datas">
<template slot="block" slot-scope="{data,item}"> //<--------区别在这里
<!-- 你的容器块组件 -->
<Test :data="data" :item="item"></Test>
</template>
</template>
1.6.1
1.6.0
1.5.2
1.5.1
1.5.0
1.4.0
1.3.7
1.3.6
1.3.5
1.3.4
1.3.3
1.3.2
1.3.1
1.3.0
1.2.6
1.2.5
1.2.4
1.2.3
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 54 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
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.