1.4.4 • Published 2 years ago

v-gantt-drapdrop v1.4.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

Install

npm 安装

npm i v-gantt-drapdrop --save

Include plugin in your main.js file.

import Vue from "vue";

import vGanttChart from "v-gantt-drapdrop";

Vue.use(vGanttChart);

使用链接引入

<script src="https://unpkg.com/v-gantt-drapdrop/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>

Use

template code

<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>

script code

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数据
    };
  }
};

data

默认情况下(即customGenerateBlocksfalse)的渲染的数据需要特殊格式 ,目前要求数组中每一个值均为对象,且有gtAarry对象数组这个属性(默认取gtArray,也可以通过arrayKeys属性自定义需要渲染的数组)

数组中每一个对象需有两个属性,startend(不提供的情况,偏移与宽度将为 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'
      }
    ]
  }
]

Slot

// 假设你传入的数据为
[
  {
    id:'arrayOne',
    name:'sala',
    gtArray:[
      {
        name:'itemOne',
        start:'2019-01-11 18:18:18',
        end:'2019-01-11 18:18:18'
        // ...其他属性
      }
    ],
    //...其他属性
  }
  //... 其他数组数据
]

block 容器块 slot 有 两种 需要注意

⭐️ customGenerateBlocksfalse(默认值) 的情况

<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'
  //...
}

⭐️ customGenerateBlockstrue 的情况

此时arrayKeysitemkey将不再次生效,如何渲染,渲染什么,将由你自己决定,下方是一个例子

<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 判定给定的时间是否跨越了屏幕显示的时间轴范围之内

left 行名 slot

<template v-slot:left="{data}">
  <!-- 你的行名组件 -->
  <TestLeft :data="data"></TestLeft>
</template>

data 为 gantt 图表中每一行的所有数据

{
  id:'test',
  name:'sala',
  gtArray:[{...}],
  //...
}

timeline 时间轴 slot

<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>

markline 时间标记线 slot

<template v-slot:markLine="{timeConfig, getPosition}">
  <!-- 你的时间标记线组件 -->
  <TestMarkline
    :timeConfig="timeConfig"
    :getPosition="getPosition"
  ></TestMarkline>
</template>

timeConfig 为 传入的timelines的每一个值

getPosition(day:string):number 计算当前时间的偏移值,参数为 day,返回偏移值

title 标题 slot

<template v-slot:title>
  <!-- 你的表头组件 -->
  hola
</template>

API

Param

paramrequiredtypedefaultdescribe
startTimestring当前时间时间轴开始时间,需为合法的时间字符串,如:2019-01-11 18:18:18
endTimestring当前时间时间轴结束时间,需为合法的时间字符串,如:2019-01-11 18:18:18
cellWidthnumber50时间区间的宽度
cellHeightnumber20时间区间的高度
titleHeightnumber40表头的高度
titleWidthnumber200表头和行的宽度
scalenumber60时间轴的刻度值。单位:分钟,允许值[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60, 120,180,240,360, 720, 1440]
datasarray[]默认情况下(即customGenerateBlocksfalse)的渲染的数据需要特殊格式 ,目前要求数组中每一个值均为对象,且有 gtAarry 对象数组这个属性,gtArray 中每一个对象需有两个属性,start 和 end(不提供的情况,偏移与宽度将为 0),需为合法的时间字符串.例如[{id:'test',gtArray:[{start:'2019-01-11 18:18:18',end:'2019-01-11 18:18:18'}]}] 其他不做限制。
arrayKeysarray"gtArray"需要渲染的数组的 key
dataKeystring--渲染的每一行的 key
itemKeystring--渲染的每一个 gantt 容器的 key
showCurrentTimebooleanfalse显示当前时间,每秒钟更新
timelinesarray--显示标记时间,有特殊格式 [{time:'2019-01-11 18:18:18',color:'#00000'}]
scrollToTimestring--滚动到指定的时间,需为合法的时间字符串
scrollToPostionobject--滚动到指定的位置 格式为{x:number,y:number}
hideHeaderbooleanfalse隐藏时间轴和表头
hideXScrollBarbooleanfalse隐藏横向滚动轴
hideYScrollBarbooleanfalse隐藏纵向滚动轴
enableGrabbooleantrue启动按住拖拽
customGenerateBlocksbooleanfalse开启自定义生成渲染块,具体使用见说明
timeRangeCorrectionbooleantrue时间矫正,默认开启。关闭后时间轴不会自动填充剩余空间,错误的先后时间会引起错误
preloadnumber1可视范围外渲染行数。如值为 1 时,屏幕只能显示 10 条,但是会顶部,底部会多渲染一条,避免滚动时出现空白。当值为 0,渲染全部数据

Method

通过使用vueref来调用组件内部的方法,params中的scrollToTimescrollToPostion可能会择机废弃,最好使用下方的方法替代。

methodargsdescrible
scrollToPositionHandlepositon:{x:number,y:number}滚动到指定位置
scrollToTimehandletime:string滚动到指定时间

example

<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

eventtypedescrible
scrollLeftnumberX 轴的滚动值
scrollTopnumberY 轴的滚动值

Run Demo

注意项目需要 node 环境

#clone项目,进入项目根目录
#安装
npm i
# 启动
npm run serve
or
yarn serve
#打开浏览器地址栏输入localhost:8080即可

Caution

  • IE 需要自己处理一些 ployfill,应该是 promise
  • IE 浏览器内无法使用 yyyy-MM-dd hh:mm:ss 的字符串形式初始化,需要注意时间的格式
  • MacOS  系统需要在偏好设置中的通用开启始终显示滚动条,否则可能会看不到滚动条
  • 注意查看 vue 版本,不是 2.6 以上 vue 版本,不能直接使用 demo 中的 v-slot 的语法,需要使用旧的 slot 语法2.6 之前的 slot 语法 js // 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>

    	```js
    	// 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.4.4

2 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.2.9

3 years ago

1.2.12

3 years ago

1.2.13

3 years ago

1.2.10

3 years ago

1.2.11

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.0

4 years ago

1.0.0

4 years ago