├── public └── favicon.ico ├── screenshot ├── vue_drag_gantt_1.gif ├── vue_drag_gantt_2.gif ├── vue_drag_gantt_3.gif ├── vue_drag_gantt_4.gif └── vue_drag_gantt_5.gif ├── index.html ├── .gitignore ├── src ├── components │ ├── v-gantt │ │ ├── index.js │ │ ├── block-row │ │ │ └── block-row.vue │ │ ├── mark-line │ │ │ ├── current-time.vue │ │ │ └── index.vue │ │ ├── block-group │ │ │ └── block-group.vue │ │ ├── left-bar │ │ │ └── index.vue │ │ ├── mixin │ │ │ └── dynamic-render.js │ │ ├── gantt.scss │ │ ├── time-line │ │ │ └── index.vue │ │ └── gantt.vue │ └── demo │ │ ├── menu-item.vue │ │ ├── task-item.vue │ │ └── checkAdjust.vue ├── main.js ├── style │ ├── reset.scss │ └── index.sass ├── api │ ├── dataTemplate.json │ └── mock-data.js ├── store │ └── index.js ├── utils │ ├── gtUtils.js │ ├── timeLineUtils.js │ └── tool.js └── App.vue ├── .github └── workflows │ └── deploy.yml ├── package.json ├── vite.config.js ├── LICENSE └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /screenshot/vue_drag_gantt_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/screenshot/vue_drag_gantt_1.gif -------------------------------------------------------------------------------- /screenshot/vue_drag_gantt_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/screenshot/vue_drag_gantt_2.gif -------------------------------------------------------------------------------- /screenshot/vue_drag_gantt_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/screenshot/vue_drag_gantt_3.gif -------------------------------------------------------------------------------- /screenshot/vue_drag_gantt_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/screenshot/vue_drag_gantt_4.gif -------------------------------------------------------------------------------- /screenshot/vue_drag_gantt_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang5945/vue-drag-gantt-chart/HEAD/screenshot/vue_drag_gantt_5.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-drag-gantt-chart 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | package-lock.json 14 | *.local 15 | 16 | # Editor directories and files 17 | webstorm.config.js 18 | .vscode/* 19 | !.vscode/extensions.json 20 | .idea 21 | .DS_Store 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | -------------------------------------------------------------------------------- /src/components/v-gantt/index.js: -------------------------------------------------------------------------------- 1 | import gantt from "./gantt.vue"; 2 | 3 | gantt.version = "__VERSION__"; 4 | gantt.install = function(Vue) { 5 | // // 将其注册为vue的组件，'gantt'是组件名 6 | Vue.component("v-gantt-chart", gantt); 7 | }; 8 | // 新增 9 | if (typeof window !== "undefined" && window.Vue) { 10 | window.Vue.use(gantt); 11 | } 12 | 13 | // 最后将插件导出，并在main.js中通过Vue.use()即可使用插件 14 | export default gantt; 15 | // export const vGanttChart = gantt; 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: 4 | - master 5 | pull_request: 6 | 7 | jobs: 8 | deploy: 9 | runs-on: ubuntu-20.04 10 | concurrency: 11 | group: ${{ github.workflow }}-${{ github.ref }} 12 | steps: 13 | - uses: actions/checkout@v3 14 | 15 | - name: Install and Build 16 | run: | 17 | npm install 18 | npm run build 19 | - name: Deploy 20 | uses: JamesIves/github-pages-deploy-action@v4.3.3 21 | with: 22 | branch: gh-pages 23 | folder: dist 24 | single-commit: true 25 | -------------------------------------------------------------------------------- /src/components/v-gantt/block-row/block-row.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-drag-gantt-chart", 3 | "private": true, 4 | "version": "1.0.0", 5 | "scripts": { 6 | "dev": "vite --host", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "axios": "^1.3.5", 12 | "dayjs": "^1.11.7", 13 | "element-ui": "^2.15.13", 14 | "iscroll": "^5.2.0", 15 | "lodash": "^4.17.21", 16 | "mockjs": "^1.1.0", 17 | "resize-observer-polyfill": "^1.5.1", 18 | "v-contextmenu": "^2.9.0", 19 | "vue": "2.7.14", 20 | "vuex": "^3.6.2" 21 | }, 22 | "devDependencies": { 23 | "@vitejs/plugin-vue2": "^2.2.0", 24 | "sass": "^1.58.3", 25 | "vite": "^4.2.1", 26 | "unplugin-vue-components": "^0.24.1", 27 | "vue-template-compiler": "^2.7.14" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import store from "./store"; 4 | 5 | import vGanttChart from "@/components/v-gantt/index"; 6 | import "@/style/index.sass"; 7 | 8 | import "element-ui/lib/theme-chalk/index.css"; 9 | import loading from "element-ui/lib/loading"; 10 | import Message from "element-ui/lib/message"; 11 | 12 | Vue.prototype.$ELEMENT = { size: "mini" }; 13 | 14 | Vue.use(loading.directive); 15 | Vue.prototype.$loading = loading.service; 16 | Vue.prototype.$message = Message; 17 | 18 | Vue.prototype.$bus = new Vue(); // 事件总线 19 | 20 | import contentMenu from "v-contextmenu/src/index.js"; //右键菜单组件 21 | import "v-contextmenu/dist/index.css"; 22 | 23 | Vue.use(contentMenu); 24 | Vue.use(vGanttChart); 25 | new Vue({ 26 | store, 27 | render: (h) => h(App) 28 | }).$mount("#app"); 29 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { fileURLToPath, URL } from 'node:url' 3 | import Components from 'unplugin-vue-components/vite' 4 | import { ElementUiResolver } from 'unplugin-vue-components/resolvers' 5 | import vue2 from '@vitejs/plugin-vue2' 6 | 7 | export default defineConfig({ 8 | base: "./", 9 | plugins: [ 10 | vue2({ 11 | template: { 12 | compilerOptions: { 13 | preserveWhitespace: true, 14 | whitespace: "preserve" 15 | }, 16 | }, 17 | }), 18 | Components({ 19 | resolvers: [ 20 | ElementUiResolver({ 21 | importStyle: false 22 | }), 23 | ] 24 | }), 25 | ], 26 | resolve: { 27 | alias: { 28 | '@': fileURLToPath(new URL('./src', import.meta.url)) 29 | } 30 | }, 31 | server: { 32 | port: 3001, 33 | } 34 | }) 35 | -------------------------------------------------------------------------------- /src/components/v-gantt/mark-line/current-time.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 liyang5945 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/style/reset.scss: -------------------------------------------------------------------------------- 1 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, label, button, input, select, option, textarea, optgroup, table, thead, tbody, tfoot, tr, th, td, div, span, img, a, em, i, iframe, :before, :after { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body, button, input, select, option, textarea, optgroup, img { 8 | font: 16px/1 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 9 | outline: none; 10 | border: none; 11 | } 12 | 13 | textarea { 14 | resize: none; 15 | overflow: auto; 16 | } 17 | 18 | ul, ol { 19 | list-style: none; 20 | } 21 | 22 | a { 23 | text-decoration: none; 24 | background-color: transparent; 25 | color: #000; 26 | } 27 | 28 | table { 29 | border-collapse: collapse; 30 | border-spacing: 0; 31 | } 32 | 33 | h1, h2, h3, h4, h5, h6 { 34 | font-size: 100%; 35 | font-weight: normal; 36 | } 37 | 38 | article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { 39 | display: block; 40 | box-sizing: border-box; 41 | margin: 0; 42 | padding: 0; 43 | } 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/v-gantt/mark-line/index.vue: -------------------------------------------------------------------------------- 1 | 19 | 54 | -------------------------------------------------------------------------------- /src/api/dataTemplate.json: -------------------------------------------------------------------------------- 1 | { 2 | "rawIndex": 2, 3 | "id": "JHR725ST", 4 | "type": "🚄", 5 | "speed": 88, 6 | "name": "警官号", 7 | "colorPair": { 8 | "dark": "rgb(247, 167, 71,0.8)", 9 | "light": "rgb(247, 167, 71,0.1)" 10 | }, 11 | "gtArray": [ 12 | { 13 | "id": "UM4366", 14 | "passenger": 40, 15 | "start": "Tue, 31 May 2022 21:00:28 GMT", 16 | "end": "Wed, 01 Jun 2022 02:00:28 GMT", 17 | "type": "🚄", 18 | "parentId": "JHR725ST" 19 | }, 20 | { 21 | "id": "RA6062", 22 | "passenger": 120, 23 | "start": "Wed, 01 Jun 2022 06:00:28 GMT", 24 | "end": "Wed, 01 Jun 2022 10:00:28 GMT", 25 | "type": "🚄", 26 | "parentId": "JHR725ST" 27 | }, 28 | { 29 | "id": "TR8476", 30 | "passenger": 52, 31 | "start": "Wed, 01 Jun 2022 15:00:28 GMT", 32 | "end": "Wed, 01 Jun 2022 20:00:28 GMT", 33 | "type": "🚄", 34 | "parentId": "JHR725ST" 35 | }, 36 | { 37 | "id": "VX5715", 38 | "passenger": 44, 39 | "start": "Wed, 01 Jun 2022 23:00:28 GMT", 40 | "end": "Thu, 02 Jun 2022 04:00:28 GMT", 41 | "type": "🚄", 42 | "parentId": "JHR725ST" 43 | } 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /src/style/index.sass: -------------------------------------------------------------------------------- 1 | @import './reset.scss' 2 | html 3 | height: 100% 4 | body 5 | height: 100% 6 | -moz-osx-font-smoothing: grayscale 7 | -webkit-font-smoothing: antialiased 8 | text-rendering: optimizeLegibility 9 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif 10 | -moz-user-select: none /*火狐*/ 11 | -webkit-user-select: none /*webkit浏览器*/ 12 | -ms-user-select: none /*IE10*/ 13 | -khtml-user-select: none /*早期浏览器*/ 14 | user-select: none 15 | overflow: hidden 16 | 17 | .clearfix 18 | &:after 19 | visibility: hidden 20 | display: block 21 | font-size: 0 22 | content: " " 23 | clear: both 24 | height: 0 25 | 26 | #app 27 | width: 100% 28 | height: 100% 29 | display: flex 30 | flex-direction: column 31 | 32 | .page-head 33 | min-height: 60px 34 | width: 100% 35 | padding-top: 15px 36 | flex-shrink: 0 37 | display: flex 38 | flex-direction: row 39 | .el-input,.el-button 40 | vertical-align: top 41 | margin-left: 10px 42 | .sub-title 43 | font-size: 16px 44 | height: 28px 45 | line-height: 28px 46 | color: #A0A7B3 47 | margin-right: 20px 48 | margin-left: 20px 49 | flex-shrink: 0 50 | .head-btn-box 51 | flex: 1 52 | .form-title 53 | font-size: 14px 54 | color: #999 55 | margin-left: 10px 56 | 57 | .page-body 58 | overflow: hidden 59 | display: flex 60 | -webkit-box-orient: vertical 61 | -webkit-box-direction: normal 62 | -ms-flex-direction: column 63 | flex-direction: column 64 | -webkit-box-flex: 1 65 | -ms-flex: 1 66 | flex: 1 67 | 68 | 69 | @keyframes colorful 70 | from 71 | background-color: deepskyblue 72 | to 73 | background-color: #39b36b 74 | -------------------------------------------------------------------------------- /src/components/demo/menu-item.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 39 | 40 | 68 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | filterBlockId: "", // 筛选的甘特块id 9 | currentBlock: {}, //当前点击的甘特块 10 | currentRow: {}, //当前点击的甘特行 11 | cutBlock: {}, //剪切的甘特块 12 | cutRow: {}, //剪切的甘特行 13 | targetBlock: {}, //目标甘特块 14 | targetRow: {}, //目标甘特行 15 | handleBlock: {}, //右键操作的甘特块 16 | handleRow: {}, //右键操作的甘特行 17 | showRowList: [], // 筛选后在界面显示的列数据 18 | rawRowList: [], // 列原始数据，用于恢复 19 | showMovedBlock: true, // 是否显示拖拽之前的甘特状态 20 | showDragConfirm: false // 调整任务时是否显示确认弹窗 21 | }, 22 | mutations: { 23 | setFilterBlockId(state, str) { 24 | state.filterBlockId = str; 25 | }, 26 | setCurrentBlock(state, object) { 27 | state.currentBlock = object; 28 | }, 29 | setCurrentRow(state, object) { 30 | state.currentRow = object; 31 | }, 32 | setCutBlock(state, object) { 33 | state.cutBlock = object; 34 | }, 35 | setCutRow(state, object) { 36 | state.cutRow = object; 37 | }, 38 | setTargetBlock(state, object) { 39 | state.targetBlock = object; 40 | }, 41 | setTargetRow(state, object) { 42 | state.targetRow = object; 43 | }, 44 | setHandleBlock(state, object) { 45 | state.handleBlock = object; 46 | }, 47 | setHandleRow(state, object) { 48 | state.handleRow = object; 49 | }, 50 | setShowRowList(state, object) { 51 | state.showRowList = object; 52 | }, 53 | setRawRowList(state, object) { 54 | state.rawRowList = object; 55 | }, 56 | setShowMovedBlock(state, bool) { 57 | state.showMovedBlock = bool; 58 | }, 59 | setShowDragConfirm(state, bool) { 60 | state.showDragConfirm = bool; 61 | } 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /src/api/mock-data.js: -------------------------------------------------------------------------------- 1 | import dayjs from "dayjs"; 2 | import Mock from "mockjs"; 3 | 4 | const colorList = [ 5 | "(252, 105, 100)", 6 | "(247, 167, 71)", 7 | "(116, 202, 90)", 8 | "(83, 186, 241)", 9 | "(208, 142, 2231)" 10 | ]; 11 | const nameList = "希望号,飞翼号,光明号,窥探号,力神号,警官号,闪电流星号,博士号,霹雳火神号,狙击手号,希望之光号,南海忍者号,火速E3号,山神号,安全卫士号,铁锤号,寿星号,星星号,罗曼斯卡,欲望号,霹雳雷电号,消防号,欧洲之星号".split( 12 | "," 13 | ); 14 | 15 | const typeList = "🚅,🚈,🚄".split(","); 16 | 17 | const Random = Mock.Random; 18 | let colNum = 10; 19 | let times = [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]; 20 | 21 | 22 | function generateRow() { 23 | let rowId = "JHR" + 24 | Random.natural(100, 999) + 25 | Random.character("upper") + 26 | Random.character("upper"); 27 | let rowType = Random.pick(typeList); 28 | let rowSpeed = Random.natural(0, 200); 29 | let template = { 30 | name: () => Random.pick(nameList), 31 | id: rowId, 32 | type: rowType, 33 | speed: rowSpeed, 34 | colorPair: () => { 35 | let a = "rgb" + Random.pick(colorList); 36 | return { 37 | dark: a.replace(")", ",0.8)"), 38 | light: a.replace(")", ",0.1)") 39 | }; 40 | }, 41 | gtArray: () => { 42 | let temp = []; 43 | let i = 0; 44 | let j = Random.natural(colNum - 1, colNum); 45 | let tempStart = dayjs(times[0]); 46 | let tempEnd = dayjs(times[0]); 47 | 48 | while (i < j) { 49 | tempStart = tempEnd.add(Random.natural(1, 6), "hour"); 50 | tempEnd = tempStart.add(Random.natural(2, 6), "hour"); 51 | temp.push({ 52 | id: 53 | Random.character("upper") + 54 | Random.character("upper") + 55 | Random.natural(1000, 9999), 56 | passenger: Random.natural(10, 200), 57 | start: tempStart.toString(), 58 | end: tempEnd.toString(), 59 | type: rowType, 60 | parentId: rowId 61 | }); 62 | 63 | i++; 64 | } 65 | return temp; 66 | } 67 | }; 68 | return Mock.mock(template) 69 | 70 | } 71 | 72 | export function mockDatas(nums, col, t) { 73 | colNum = col; 74 | times = t; 75 | let datas = []; 76 | for (let i = 0, j = Random.natural(nums, nums); i < j; i++) { 77 | datas.push(Object.assign({rawIndex: i}, generateRow())); 78 | } 79 | return datas; 80 | } 81 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

vue-drag-gantt-chart

2 | 3 | ## 4 | 5 | 基于[Vue-Gantt-chart](https://github.com/w1301625107/Vue-Gantt-chart) 修改而来，改动如下： 6 | 7 | - 样式调整，添加顶部部的时间刻度格和左侧日期。滚动插件使用 [iscroll](https://github.com/cubiq/iscroll) 实现，使滚动条样式在各浏览器下保持一致，支持鼠标按住拖动，类似手机上的按住滚动效果。 8 | 9 | - 数据分组：不同属性的甘特行可以分组，分组后数据渲染也是动态的，即只渲染浏览器视口内的数据，我本机测试万级数据(500行25列)轻微卡顿。 10 | 11 | - 数据搜索：搜索后高亮显示结果，并滚动到相应任务位置，若搜索到多个结果，继续点搜索按钮跳转到下一个结果。 12 | 13 | - 甘特块拖拽调整：基于浏览器原生拖拽事件实现，不同行之间的甘特块可以拖拽调整，调整时可以做一些校验，代码里暂时只做了时间校验，拖拽后默认会有一个黑色阴影块显示原来的任务，在配置项里可以设置为不显示，调整确认弹窗也可以选择显示或不显示(默认不显示)。 14 | 15 | - 右键菜单：若想要调整的行竖向间距过大不方便拖拽时，可使用右键菜单调整任务，可以选择复制或交换。 16 | 17 | 18 | ### demo: [在线演示](https://liyang5945.github.io/vue-drag-gantt-chart) 19 | 20 | ### 动图演示 21 | 拖拽移动 22 | 23 | ![](screenshot/vue_drag_gantt_1.gif) 24 | 25 | 数据分组 26 | 27 | ![](screenshot/vue_drag_gantt_2.gif) 28 | 29 | 搜索 30 | 31 | ![](screenshot/vue_drag_gantt_3.gif) 32 | 33 | 拖拽调整任务 34 | 35 | ![](screenshot/vue_drag_gantt_4.gif) 36 | 37 | 右键菜单调整任务 38 | 39 | ![](screenshot/vue_drag_gantt_5.gif) 40 | 41 | 42 | 数据格式，每一行的数据如下，rawIndex这个字段是每一行的原始顺序，用来确定垂直方向的位置(计算绝对定位的top值)，gtArray里面是每一个小块的数据。 43 | 44 | ```json 45 | 46 | { 47 | "rawIndex": 2, 48 | "id": "JHR725ST", 49 | "type": "🚄", 50 | "speed": 88, 51 | "name": "警官号", 52 | "colorPair": { 53 | "dark": "rgb(247, 167, 71,0.8)", 54 | "light": "rgb(247, 167, 71,0.1)" 55 | }, 56 | "gtArray": [ 57 | { 58 | "id": "UM4366", 59 | "passenger": 40, 60 | "start": "Tue, 31 May 2022 21:00:28 GMT", 61 | "end": "Wed, 01 Jun 2022 02:00:28 GMT", 62 | "type": "🚄", 63 | "parentId": "JHR725ST" 64 | }, 65 | { 66 | "id": "RA6062", 67 | "passenger": 120, 68 | "start": "Wed, 01 Jun 2022 06:00:28 GMT", 69 | "end": "Wed, 01 Jun 2022 10:00:28 GMT", 70 | "type": "🚄", 71 | "parentId": "JHR725ST" 72 | }, 73 | { 74 | "id": "TR8476", 75 | "passenger": 52, 76 | "start": "Wed, 01 Jun 2022 15:00:28 GMT", 77 | "end": "Wed, 01 Jun 2022 20:00:28 GMT", 78 | "type": "🚄", 79 | "parentId": "JHR725ST" 80 | }, 81 | { 82 | "id": "VX5715", 83 | "passenger": 44, 84 | "start": "Wed, 01 Jun 2022 23:00:28 GMT", 85 | "end": "Thu, 02 Jun 2022 04:00:28 GMT", 86 | "type": "🚄", 87 | "parentId": "JHR725ST" 88 | } 89 | ] 90 | } 91 | 92 | ``` 93 | -------------------------------------------------------------------------------- /src/components/v-gantt/block-group/block-group.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 87 | -------------------------------------------------------------------------------- /src/utils/gtUtils.js: -------------------------------------------------------------------------------- 1 | // import dayjs from 'dayjs' //替换dayjs 兼容性会好一点，但是速度就很慢了，之前测了一下，大概快30倍？有点忘记了 2 | 3 | //缓存解析值，加速一点点吧 4 | 5 | const cacheParseTime = (function() { 6 | let cacheString = {}; 7 | let cacheValue = {}; 8 | let count = 0; 9 | 10 | return function(timeName, timeString) { 11 | if (cacheString[timeName] !== timeString) { 12 | // 避免缓存过多对象 13 | if (count++ > 10000) { 14 | cacheString = {}; 15 | cacheValue = {}; 16 | } 17 | cacheString[timeName] = timeString; 18 | return (cacheValue[timeName] = parseTime(timeString)); 19 | } 20 | 21 | return cacheValue[timeName]; 22 | }; 23 | })(); 24 | 25 | // pStart 关于缓存这个值是因为getWidthAbout2Times和getPositionOffset通常是前后连续调用，start 值会再两个函数中分别用到一次 26 | 27 | /** 28 | * 根据配置项计算两个时间的在gantt 图中的长度 29 | * 注：时间上start 早， end 晚 30 | * 31 | * @export 32 | * @param {string} start 33 | * @param {string} end 34 | * @param {{scale:number,cellWidth:number}} arg 35 | * @returns number 36 | */ 37 | export function getWidthAbout2Times(start, end, arg) { 38 | const { scale, cellWidth } = arg; 39 | const pStart = cacheParseTime("pStart", start); 40 | const pEnd = parseTime(end); 41 | return (diffTimeByMinutes(pStart, pEnd) / scale) * cellWidth; 42 | } 43 | 44 | /** 45 | * 根据配置项计算相对于时间轴起始时间的距离是 getWidthAbout2Times 的特化 46 | * 注：时间上，time 晚 beginTimeOfTimeLine 早 47 | * 48 | * @export 49 | * @param {string} time 50 | * @param {string} beginTimeOfTimeLine 51 | * @param {{scale:number,cellWidth:number}} arg 52 | * @returns number 53 | */ 54 | export function getPositionOffset(time, beginTimeOfTimeLine, arg) { 55 | const { scale, cellWidth } = arg; 56 | const pTime = cacheParseTime("pStart", time); 57 | const pBeginTimeOfTimeLine = cacheParseTime( 58 | "pBeginTimeOfTimeLine", 59 | beginTimeOfTimeLine 60 | ); 61 | return (diffTimeByMinutes(pBeginTimeOfTimeLine, pTime) / scale) * cellWidth; 62 | } 63 | 64 | function parseTime(time) { 65 | return new Date(time); 66 | } 67 | /** 68 | * 计算两个时间相差的分钟数 69 | * 70 | * @param {string} start 71 | * @param {string} end 72 | * @returns 73 | */ 74 | function diffTimeByMinutes(start, end) { 75 | const diff = end.getTime() - start.getTime(); 76 | return diff / 1000 / 60; 77 | } 78 | 79 | // function parseTime(time){ 80 | // return dayjs(time) 81 | // } 82 | 83 | // function diffTimeByMinutes(start,end){ 84 | // return end.diff(start, "m", true) 85 | // } 86 | -------------------------------------------------------------------------------- /src/components/v-gantt/left-bar/index.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 94 | -------------------------------------------------------------------------------- /src/utils/timeLineUtils.js: -------------------------------------------------------------------------------- 1 | // import dayjs from "dayjs"; 2 | 3 | export const scaleList = [ 4 | 1, 5 | 2, 6 | 3, 7 | 4, 8 | 5, 9 | 6, 10 | 10, 11 | 12, 12 | 15, 13 | 20, 14 | 30, 15 | 60, 16 | 120, 17 | 180, 18 | 240, 19 | 360, 20 | 720, 21 | 1440 22 | ]; 23 | 24 | export const MINUTE_OF_ONE_DAY = 60 * 24; 25 | 26 | export function isDayScale(scale) { 27 | return scale >= MINUTE_OF_ONE_DAY && scale % MINUTE_OF_ONE_DAY === 0; 28 | } 29 | 30 | /** 31 | * 验证是否合法scale值 32 | * 33 | * @export 34 | * @param {number} scale 35 | * @returns 36 | */ 37 | export function validateScale(scale) { 38 | if (!scaleList.includes(scale) && !isDayScale(scale)) { 39 | throw new RangeError( 40 | `错误的scale值，输入值为${scale},可用的scale值为${scaleList.join( 41 | "," 42 | )},或者为1440的整数倍` 43 | ); 44 | } 45 | return true; 46 | } 47 | 48 | /** 49 | * 根据给出的scale 和 start 时间计算出用于计算和生成图表的启始时间 50 | * eg：Start 为10:10分刻度为60，getBeginTimeOfTimeLine函数给出的时间为 10:00分 51 | * 刻度为5，getBeginTimeOfTimeLine函数给出的时间为 10:10分 52 | * 刻度为3，getBeginTimeOfTimeLine函数给出的时间为 10:09分 53 | * 54 | * @export 55 | * @param {dayjs} start 56 | * @param {number} [scale=60] 57 | * @returns {dayjs}计算的启始时间 58 | */ 59 | export function getBeginTimeOfTimeLine(start, scale = 60) { 60 | validateScale(scale); 61 | let timeBlocks; 62 | let result = start.clone(); 63 | let rate = scale / 60; 64 | if (scale > 60) { 65 | timeBlocks = Math.floor(start.hour() / rate); 66 | result = result 67 | .hour(timeBlocks * rate) 68 | .minute(0) 69 | .second(0); 70 | } else { 71 | timeBlocks = Math.floor(start.minute() / scale); 72 | result = result.minute(timeBlocks * scale).second(0); 73 | } 74 | 75 | return result; 76 | } 77 | /** 78 | * 根据所给 scale计算两个时间差一共可以分成多少个刻度 79 | * 注意： timdStart 并不是实际的开始计算的时间，会通过getBeginTimeOfTimeLine 函数计算出分割开始时间 80 | * 81 | * @export 82 | * @param {dayjs} timeStart 开始时间 83 | * @param {dayjs} timeEnd 结束时间 84 | * @param {number} [scale=60] 分割的刻度 85 | * @returns 时间块数量 86 | */ 87 | export function calcScalesAbout2Times(timeStart, timeEnd, scale = 60) { 88 | if (timeStart.isAfter(timeEnd)) { 89 | throw new TypeError( 90 | "错误的参数顺序，函数calcScalesAbout2Times的第一个时间参数必须大于第二个时间参数" 91 | ); 92 | } 93 | 94 | validateScale(scale); 95 | 96 | let startBlocksTime = getBeginTimeOfTimeLine(timeStart, scale); 97 | let result = 0; 98 | while (!startBlocksTime.isAfter(timeEnd)) { 99 | result++; 100 | startBlocksTime = startBlocksTime.add(scale, "minute"); 101 | } 102 | 103 | return result; 104 | } 105 | -------------------------------------------------------------------------------- /src/utils/tool.js: -------------------------------------------------------------------------------- 1 | import dayjs from "dayjs"; 2 | /** 3 | * 是否没有值 4 | * 5 | * @export 6 | * @param {*} v 7 | * @returns 8 | */ 9 | export function isUndef(v) { 10 | return v === undefined || v === null; 11 | } 12 | /** 13 | * 是否有值 14 | * 15 | * @export 16 | * @param {*} v 17 | * @returns 18 | */ 19 | export function isDef(v) { 20 | return v !== undefined && v !== null; 21 | } 22 | 23 | export function warn(str) { 24 | // eslint-disable-next-line 25 | console.warn(str) 26 | } 27 | 28 | export function noop() {} 29 | 30 | export function debounce(fn, interval = 500, immediate = false) { 31 | //fn为要执行的函数 32 | //interval为等待的时间 33 | //immediate判断是否立即执行 34 | var timeout; //定时器 35 | 36 | return function() { 37 | //返回一个闭包 38 | var context = this, 39 | args = arguments; //先把变量缓存 40 | var later = function() { 41 | //把稍后要执行的代码封装起来 42 | timeout = null; //成功调用后清除定时器 43 | if (!immediate) fn.apply(context, args); //不立即执行时才可以调用 44 | }; 45 | 46 | var callNow = immediate && !timeout; //判断是否立即调用，并且如果定时器存在，则不立即调用 47 | clearTimeout(timeout); //不管什么情况，先清除定时器，这是最稳妥的 48 | timeout = setTimeout(later, interval); //延迟执行 49 | if (callNow) fn.apply(context, args); //如果是第一次触发，并且immediate为true，则立即执行 50 | }; 51 | } 52 | 53 | export function throttle(fn, interval = 100) { 54 | //fn为要执行的函数，interval为延迟时间 55 | var _self = fn, //保存需要被延迟执行的函数引用 56 | timer, //定时器 57 | firstTime = true; //是否第一次调用 58 | return function() { 59 | //返回一个函数，形成闭包，持久化变量 60 | var args = arguments, //缓存变量 61 | _me = this; 62 | if (firstTime) { 63 | //如果是第一次调用，不用延迟执行 64 | _self.apply(_me, args); 65 | return (firstTime = false); 66 | } 67 | if (timer) { 68 | //如果定时器还在，说明上一次延迟执行还没有完成 69 | return false; 70 | } 71 | timer = setTimeout(function() { 72 | //延迟一段时间执行 73 | clearTimeout(timer); 74 | timer = null; 75 | _self.apply(_me, args); 76 | }, interval); 77 | }; 78 | } 79 | 80 | export function checkConflict(blockItem, row, targetBlockItem) { 81 | function convertTimeStr(time) { 82 | return dayjs(time).format("MM-DD HH:mm"); 83 | } 84 | 85 | let currentBlock = blockItem; //要移动的航班 86 | let blockList = row.gtArray.filter((item) => { 87 | return ( 88 | item.movedStatus !== "before" && 89 | (targetBlockItem ? item.id !== targetBlockItem.id : true) 90 | ); 91 | }); //该桥桥位航班列表，过滤拖拽后黑色的 92 | 93 | let conflictList = []; 94 | 95 | /*判断时间冲突*/ 96 | 97 | let blockStart = dayjs(currentBlock.start).valueOf(); 98 | let blockEnd = dayjs(currentBlock.end).valueOf(); 99 | for (let i = 0; i < blockList.length; i++) { 100 | let compareBlock = blockList[i]; 101 | let compareBlockStart = dayjs(compareBlock.start).valueOf(); 102 | let compareBlockEnd = dayjs(compareBlock.end).valueOf(); 103 | if ( 104 | (compareBlockStart < blockStart && blockStart < compareBlockEnd) || //当前甘特块开始时间在目标甘特块里存在交集 105 | (compareBlockStart < blockEnd && blockEnd < compareBlockEnd) || //当前甘特块结束时间在目标甘特块里存在交集 106 | (compareBlockStart >= blockStart && blockEnd >= compareBlockEnd) //目标甘特块开始结束时间均在当前甘特块时间里目标块是当前块的子集 107 | ) { 108 | let timeConflictStr = `${currentBlock.id}:(${convertTimeStr( 109 | currentBlock.start 110 | )}-${convertTimeStr(currentBlock.end)})与目标：${ 111 | compareBlock.id 112 | }(${convertTimeStr(compareBlock.start)}-${convertTimeStr( 113 | compareBlock.end 114 | )})时间冲突`; 115 | 116 | conflictList.push({ 117 | conflictType: "时间校验冲突", 118 | conflictDesc: timeConflictStr, 119 | isIgnore: false 120 | }); 121 | } 122 | } 123 | return { 124 | blockItem: blockItem, 125 | targetRowId: row.id, 126 | blockId: blockItem.id, 127 | adjustType: "移动", 128 | conflictList: conflictList 129 | }; 130 | } 131 | -------------------------------------------------------------------------------- /src/components/v-gantt/mixin/dynamic-render.js: -------------------------------------------------------------------------------- 1 | const dynamicRender = { 2 | props: { 3 | scrollTop: { 4 | type: Number, 5 | required: true 6 | }, 7 | heightOfBlocksWrapper: { 8 | type: Number, 9 | required: true 10 | }, 11 | isOpen: { 12 | type: Boolean, 13 | default: true 14 | }, 15 | cellHeight: { 16 | type: Number, 17 | required: true 18 | }, 19 | datas: { 20 | type: Array, 21 | required: true 22 | }, 23 | // 为 0 时加载全部行, 24 | //预加载的数量,是前后都计算 25 | preload: { 26 | type: Number, 27 | default: 1 28 | }, 29 | totalHeight: { 30 | type: Number, 31 | default: 0 32 | }, 33 | groupIndex: Number 34 | }, 35 | 36 | data() { 37 | return { 38 | //上一次加载的第一个节点 39 | wrapperElement: null, 40 | oldTopIndex: 0, 41 | startRenderNum: 0, 42 | endRenderNum: 0, 43 | topSpace: 0, 44 | renderPosition: [], 45 | top: 0, 46 | bottom: 0 47 | }; 48 | }, 49 | 50 | computed: { 51 | //计算当前屏幕显示的第一行数据的index 52 | showDatas() { 53 | const { startRenderNum, endRenderNum, datas } = this; 54 | return datas.slice(startRenderNum, endRenderNum); 55 | } 56 | }, 57 | 58 | watch: { 59 | scrollTop() { 60 | this.sliceData(); 61 | }, 62 | datas() { 63 | this.sliceData(); 64 | }, 65 | totalHeight() { 66 | this.$nextTick(() => { 67 | this.sliceData(); 68 | }); 69 | }, 70 | heightOfBlocksWrapper() { 71 | this.sliceData(); 72 | }, 73 | cellHeight() { 74 | this.sliceData(); 75 | }, 76 | preload() { 77 | this.sliceData(); 78 | } 79 | }, 80 | 81 | created() { 82 | this.sliceData(); 83 | }, 84 | mounted() { 85 | this.wrapperElement = this.$refs.wrapperElement || null; 86 | }, 87 | 88 | methods: { 89 | /** 90 | * 分割出dom中需要显示的数据 91 | */ 92 | sliceData() { 93 | if (!this.wrapperElement) return false; 94 | 95 | const { 96 | unVisibleHeight, 97 | heightOfBlocksWrapper, 98 | cellHeight, 99 | preload, 100 | datas 101 | } = this; 102 | 103 | const ClientRect = this.wrapperElement.getBoundingClientRect(); 104 | const windowHeight = window.innerHeight; 105 | let startPosition = 0; 106 | let endPosition = 0; 107 | const top = ClientRect.top; 108 | const bottom = ClientRect.bottom; 109 | this.top = top; 110 | this.bottom = bottom; 111 | if (top <= 0) { 112 | startPosition = Math.abs(top) + unVisibleHeight; 113 | endPosition = startPosition + heightOfBlocksWrapper; 114 | if (bottom > unVisibleHeight && bottom <= windowHeight) { 115 | endPosition = startPosition + bottom; 116 | } else if (bottom <= unVisibleHeight) { 117 | this.startRenderNum = 0; 118 | this.endRenderNum = 0; 119 | return; 120 | } 121 | } else if (top > 0 && top <= unVisibleHeight) { 122 | startPosition = unVisibleHeight - top; 123 | endPosition = startPosition + heightOfBlocksWrapper; 124 | } else if (top > unVisibleHeight && top <= windowHeight) { 125 | startPosition = 0; 126 | endPosition = windowHeight - top; 127 | } else if (top > windowHeight) { 128 | this.startRenderNum = 0; 129 | this.endRenderNum = 0; 130 | return; 131 | } 132 | 133 | //没有高度，不需要渲染元素 134 | if (heightOfBlocksWrapper === 0 || cellHeight === 0) { 135 | this.startRenderNum = 0; 136 | this.endRenderNum = 0; 137 | return; 138 | } 139 | 140 | // 为 0 全部渲染 141 | if (preload === 0) { 142 | this.startRenderNum = 0; 143 | this.endRenderNum = datas.length; 144 | return; 145 | } 146 | const startRenderNum = Math.ceil(startPosition / cellHeight) - preload; 147 | this.startRenderNum = startRenderNum < 0 ? 0 : startRenderNum; 148 | 149 | const endRenderNum = Math.ceil(endPosition / cellHeight) + preload; 150 | this.endRenderNum = 151 | endRenderNum > datas.length ? datas.length : endRenderNum; 152 | } 153 | } 154 | }; 155 | 156 | export default dynamicRender; 157 | -------------------------------------------------------------------------------- /src/components/v-gantt/gantt.scss: -------------------------------------------------------------------------------- 1 | $gray: #ccc; 2 | 3 | $font-gray:#666; 4 | 5 | .gantt { 6 | &-chart { 7 | will-change: transform; 8 | position: relative; 9 | overflow: hidden; 10 | height: 100%; 11 | width: 100%; 12 | } 13 | 14 | &-container{ 15 | width: 100%; 16 | height: 100%; 17 | } 18 | 19 | &-header { 20 | display: flex; 21 | background-color: #fff; 22 | border-top: 1px solid $gray; 23 | border-bottom: 1px solid $gray; 24 | height: 60px; 25 | &-title { 26 | flex: none; 27 | height: 60px; 28 | padding: 15px 0; 29 | color: #666; 30 | text-align: center; 31 | border-right: 1px solid $gray; 32 | } 33 | .date-control{ 34 | height: 30px; 35 | line-height: 30px; 36 | font-size: 14px; 37 | text-align: center; 38 | .btn-date-ctrl{ 39 | display: inline-block; 40 | font-size: 16px; 41 | cursor: pointer; 42 | padding: 2px 3px; 43 | border: none; 44 | background: none; 45 | } 46 | } 47 | &-timeline { 48 | overflow: hidden; 49 | } 50 | &-timeline-container{ 51 | &:before{ 52 | content: ''; 53 | display: inline-block; 54 | width: 1px; 55 | height: 100%; 56 | background-color: $gray; 57 | position: absolute; 58 | top: 0; 59 | left: -1px; 60 | } 61 | } 62 | } 63 | 64 | &-body { 65 | position: relative; 66 | } 67 | 68 | &-timeline { 69 | position: relative; 70 | text-align: center; 71 | display: flex; 72 | 73 | &-day { 74 | overflow: hidden; 75 | font-weight: bold; 76 | color: $font-gray; 77 | border-right: 1px solid #aaa; 78 | border-bottom: 1px solid #ddd; 79 | } 80 | 81 | &-scale { 82 | display: flex; 83 | border-right: 1px solid #aaa; 84 | &>div { 85 | height: 100%; 86 | font-size: 14px; 87 | color: $font-gray; 88 | border-right: 1px solid #ddd; 89 | &:last-child{ 90 | border-right: none; 91 | } 92 | } 93 | } 94 | 95 | // 隐藏第一个时间节点，不然会只显示一半，不好看 96 | &-block:first-child &-scale div:first-child { 97 | visibility: hidden; 98 | } 99 | } 100 | 101 | &-leftbar { 102 | width: 100%; 103 | background: #fff; 104 | color: $font-gray; 105 | font-size: 0.8rem; 106 | position: relative; 107 | &-container { 108 | flex: none; 109 | position: relative; 110 | overflow: hidden; 111 | background: #fff; 112 | border-right: 1px solid $gray; 113 | z-index: 100; 114 | .left-scroll-wrapper { 115 | width: 100%; 116 | position: absolute; 117 | top: 0; 118 | left: 0; 119 | } 120 | } 121 | .gannt-group-menu{ 122 | background-color: rgba(#408984,.8); 123 | border-bottom: 1px solid $gray; 124 | display: flex; 125 | box-sizing: border-box; 126 | overflow: hidden; 127 | height: 100%; 128 | width: 100%; 129 | padding: 0 10px; 130 | border-radius: 8px 0 0 8px; 131 | align-items: center; 132 | color: #ffffff; 133 | .type-title{ 134 | font-size: 12px; 135 | line-height: 16px; 136 | flex-shrink: 0; 137 | } 138 | .btn-toggle{ 139 | display: inline-block; 140 | width: 20px; 141 | height: 20px; 142 | line-height: 20px; 143 | text-align: center; 144 | flex-shrink: 0; 145 | cursor: pointer; 146 | } 147 | .classify-tags{ 148 | flex: 1; 149 | } 150 | .classify-tag{ 151 | display: inline-block; 152 | padding: 0 5px; 153 | line-height: 20px; 154 | height: 20px; 155 | font-size: 14px; 156 | color: #fff; 157 | background-color: #3d847f; 158 | text-align: center; 159 | } 160 | 161 | } 162 | .left-bar-wrapper{ 163 | position: relative; 164 | } 165 | 166 | &-item { 167 | position: absolute; 168 | width: 100%; 169 | } 170 | 171 | &-defalutItem { 172 | width: 100%; 173 | height: 100%; 174 | outline: 1px solid $gray 175 | } 176 | } 177 | 178 | &-table { 179 | display: flex; 180 | width: 100%; 181 | height: 100%; 182 | } 183 | 184 | &-markline-area { 185 | position: absolute; 186 | z-index: 99; 187 | } 188 | 189 | &-markline { 190 | position: absolute; 191 | z-index: 100; 192 | width: 2px; 193 | height: 100vh; 194 | 195 | &-label { 196 | padding: 3px; 197 | float: left; 198 | color: #fff; 199 | font-size: 0.7rem; 200 | } 201 | } 202 | 203 | &-blocks { 204 | background-color: #fff; 205 | &-wrapper { 206 | height: 100%; 207 | overflow: hidden; 208 | position: relative; 209 | background-color: #f1f1f1; 210 | -webkit-touch-callout: none; /* iOS Safari */ 211 | -webkit-user-select: none; /* Chrome/Safari/Opera */ 212 | -moz-user-select: none; /* Firefox */ 213 | -ms-user-select: none; /* Internet Explorer/Edge */ 214 | user-select: none; /* Non-prefixed version, currently 禁止鼠标拖动时 */ 215 | } 216 | } 217 | 218 | &-block { 219 | &-container { 220 | position: relative; 221 | height: 100%; 222 | } 223 | &-top-space{ 224 | background-color: rgba(#408984,.8); 225 | border-bottom: 1px solid $gray; 226 | } 227 | &-row-wrapper{ 228 | position: relative; 229 | } 230 | &-row{ 231 | width: 100%; 232 | border-bottom: 1px solid $gray; 233 | position: absolute; 234 | } 235 | &-item { 236 | position: absolute; 237 | height: 100%; 238 | } 239 | &-defaultBlock { 240 | width: 100%; 241 | height: 100%; 242 | outline: 1px solid $gray; 243 | background: $gray; 244 | } 245 | } 246 | } 247 | -------------------------------------------------------------------------------- /src/components/v-gantt/time-line/index.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 228 | -------------------------------------------------------------------------------- /src/components/demo/task-item.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 174 | 175 | 253 | -------------------------------------------------------------------------------- /src/components/demo/checkAdjust.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 214 | 215 | 276 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 157 | 158 | 600 | -------------------------------------------------------------------------------- /src/components/v-gantt/gantt.vue: -------------------------------------------------------------------------------- 1 | 184 | 185 | 645 | 646 | 649 | --------------------------------------------------------------------------------

vue-drag-gantt-chart

{{ index + 1 + "." + conflictItem.conflictType }}

拖拽甘特图