vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)

目录

• 前言：参考文档文章
• 一、实现效果：
• 二、安装插件及依赖：
• 三、封装组件：
• 1.html部分：
• 2.引入依赖：
• 3.父组件传入数据：
• 4.js部分全部配置
• 四、父组件调用
• 1.引入子组件
• 2.初始数据
• 3.父组件按钮及事件

前言：参考文档文章

vis官方配置文档：文档地址
参考使用文章：文章地址

一、实现效果：

二、安装插件及依赖：

cnpm install -S vis-linetime
cnpm install -S vis-data
cnpm install -S moment

三、封装组件：

下端时间轴单独封装成组件

1.html部分：

2.引入依赖：

import { DataSet } from 'vis-data/peer'
import { dateFormat } from '@/util' //封装的时间格式化函数，如下所示
import { Timeline } from 'vis-timeline/peer'
import 'vis-timeline/styles/vis-timeline-graph2d.css'
const moment = require('moment')

时间格式化函数：

export function dateFormat(date, fmt) { //date是日期，fmt是格式
    let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'H+': date.getHours(), // 小时
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
    }
    return fmt
}

3.父组件传入数据：

let props = defineProps({
  ganntData: { // 初始传入数据
    type: Object,
    default: () => {}
  },
  ganntHistoryData: { // 全部的历史数据，为了实现撤销上一步
    type: Object,
    default: () => {}
  }
})

4.js部分全部配置

配置项参考官方文档，仅注释解释个别方法。

四、父组件调用

1.引入子组件

 // loading是为了有个加载效果，为了美观
	
	

import TimeLine from '@/components/modules/planControl/TimeLine'

2.初始数据

let props = defineProps({
 // 因为这个父组件是通过点击进来的，所以有传入的数据，也可以直接赋值ganntData 数据，可以省略watch里面的转格式
  conflictList: {
    type: Array,
    default: null
  }
})
const ganntData = reactive([
  {
    name: 'confilct',
    trackTimeWindows: [
    ]
  }
])

const ganntHistoryData = ref([])

// 传入数据变化时为ganntData和ganntHistoryData赋值。
watch(
  () => props.conflictList, (newValue) => {
    ganntData[0].trackTimeWindows.length = 0
    newValue.forEach(element => {
      ganntData[0].trackTimeWindows.push({
        deviceId: element.content,
        timeWindows: [
          {
            startTime: element.startTime,
            stopTime: element.stopTime
          }
        ]
      })
    })
    // 记录操作历史
    ganntHistoryData.value.length = 0
    ganntHistoryData.value.push(ganntData)
  },
  {
    deep: true,
    immediate: true
  }
)

原数据（省略部分未使用参数）：

[
    {
        "id": 1,
        "content": "xxxxxxxxxxxxxx计划1",
        "time": "2023.08~10",
        "startTime": "2023-08-09",
        "stopTime": "2023-10-20"
    },
    {
        "id": 2,
        "content": "xxxxxxxxxxxxxx计划2",
        "time": "2023.09~11",
        "startTime": "2023-09-09",
        "stopTime": "2023-11-1"
    },
    {
        "id": 3,
        "content": "xxxxxxxxxxxxxx计划3",
        "time": "2023.08~10",
        "startTime": "2023-08-20",
        "stopTime": "2023-10-1"
    }
]

3.父组件按钮及事件

仅展示原始图、撤销事件。

    

      

        原始图
        撤销
        一键调整
      
      

        取消
        保存并退出
      
    

回归原始图事件：
大致思路：先把ganntData清空，将拿到的props.conflictList里的数据赋值给ganntData，再把ganntData的数据push进ganntHistoryData中

 // showResetTip 是显示一个“已回到初始状态”的提示框，可以自己封装或者使用组件，此处不展示
const showResetTip = ref(false)
const loading = ref(false)
const reset = () => {
  // loading是加载效果
  loading.value = true
  ganntData[0].trackTimeWindows.length = 0
  props.conflictList.forEach(element => {
    ganntData[0].trackTimeWindows.push({
      deviceId: element.content,
      timeWindows: [
        {
          startTime: element.startTime,
          stopTime: element.stopTime
        }
      ]
    })
  })
  showResetTip.value = true
  ganntHistoryData.value.splice(0)
  ganntHistoryData.value.push(ganntData)
  setTimeout(() => {
    showResetTip.value = false
    loading.value = false
  }, 1000)
}

撤销事件：
大致思路：拿到子组件返回的ganntHistoryData历史数据数组，删掉最后一组数据后：
如果历史数据数组的长度<= 1，代表再撤销就回到原始状态了，那就直接调用reset()回到原始图；
否则，将ganntHistoryData删掉最后一组数据后的ganntHistoryDataClone最后一组值赋给ganntData，

const preNode = () => {
  // loading是加载效果
  loading.value = true
  let ganntHistoryDataClone = []
  ganntHistoryDataClone = JSON.parse(JSON.stringify(ganntHistoryData.value))
  ganntHistoryDataClone.splice(ganntHistoryDataClone.length - 1, 1)
  if (ganntHistoryDataClone.length <= 1) {
    reset()
  } else {
    ganntData[0] = ganntHistoryDataClone[ganntHistoryDataClone.length - 1][0]
    ganntHistoryData.value = JSON.parse(JSON.stringify(ganntHistoryDataClone))
  }
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

到此这篇关于vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化的文章就介绍到这了,更多相关vue3用vis绘制甘特图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！