vue 甘特图（三）：甘特图右侧内容拖动展示

vue,甘特图,右侧,内容,拖动,展示 · 浏览次数 : 61

小编点评

```js //初始化甘特图const initGantt = () => { let dateToStr = gantt.date.date_to_str('%Y.%m.%d') gantt.config.grid_width = 350 gantt.config.add_column = false //添加符号 //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。 gantt.config.autofit = false gantt.config.row_height = 60 gantt.config.bar_height = 34 // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务 gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务 gantt.config.xml_date = '%Y-%m-%d' //甘特图时间数据格式 gantt.config.readonly = true //是否只读 gantt.templates.task_text = function (start, end, task) { return task.projectName } gantt.config.columns = [ { name: 'projectName', label: '项目名称', tree: true, width: '*' }, { name: '', label: '时间', align: 'center', width: 150, template: function (item) { return `<div class=\"project-time\">${ dateToStr(item.start_date) + '-' + item.endTime.replace(/[-]/g, '.') }</div>` } } ] gantt.i18n.setLocale('cn') //设置语言 gantt.init('gantt_here') //初始化 gantt.parse(data.demoData) //填充数据 scrollInit() //拖拽滚动视图 gantt.ext.zoom.init(zoomConfig) //配置初始化扩展 gantt.ext.zoom.setLevel('month') //切换到指定的缩放级别 };const scrollInit = () => => { const nav = document.querySelectorAll('.gantt_task')[0] const parNav = document.querySelectorAll('.gantt_hor_scroll')[0] parNav.scrollLeft = 0 let flag let downX let scrollLeft nav.addEventListener('mousedown', function (event) { flag = true downX = event.clientX // 获取到点击的x下标 scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量 nav.addEventListener('mousemove', function (event) { if (flag) { let moveX = event.clientX let scrollX = moveX - downX parNav.scrollLeft = scrollLeft - scrollX } }) // 鼠标离开元素停止拖动 nav.addEventListener('mouseleave', function (event) { flag = false }) // 鼠标离开元素停止拖动 };const changeTime = () => => { gantt.ext.zoom.setLevel(data.timeState)}onBeforeMount(() => {})onMounted(() => { initGantt()})watchEffect(() => {})defineExpose({ ...toRefs(data)})</script><style scoped lang=\"scss\">.my-gantt { height: 800px; width: 100vw; .time-box { text-align: center; margin-bottom: 20px; } ::v-deep .gantt-container { width: 100%; height: 100%; .weekend { background: #ff9e2f; color: #fff; } }}</style>　　后续：任务条展示多种数据，或一行任务展示多个子任务 }; ```

正文

vue3 甘特图（三）：甘特图右侧内容拖动展示内容

　　解决因多个项目周期跨度不同，在一页屏幕里展示不完全，需要通过拖动甘特图下方的滚动条，去查看对应时间段内的内容

　　

　拖拽滚动视图，展示对应时间甘特图

　 构思，通过监听内容拖拽的距离，同时使滚动条滑动相同距离，从而达到效果。
//拖拽滚动视图
const scrollInit = () => {
  const nav = document.querySelectorAll('.gantt_task')[0]
  const parNav = document.querySelectorAll('.gantt_hor_scroll')[0]
  parNav.scrollLeft = 0
  let flag
  let downX
  let scrollLeft
  nav.addEventListener('mousedown', function (event) {
    flag = true
    downX = event.clientX // 获取到点击的x下标
    scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
  })
  nav.addEventListener('mousemove', function (event) {
    if (flag) {
      let moveX = event.clientX
      let scrollX = moveX - downX
      parNav.scrollLeft = scrollLeft - scrollX
    }
  })
  // 鼠标抬起停止拖动
  nav.addEventListener('mouseup', function () {
    flag = false
  })
  // 鼠标离开元素停止拖动
  nav.addEventListener('mouseleave', function (event) {
    flag = false
  })
}

　　

 　完整代码

　　

<template>
  <section class="my-gantt">
    <div class="time-box">
      <el-radio-group v-model="data.timeState" @change="changeTime">
        <el-radio-button
          v-for="(time, t_index) in data.timeList"
          :key="t_index"
          :label="time.code"
          size="default"
          border
          >{{ time.name }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div id="gantt_here" class="gantt-container"></div>
  </section>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'

import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

const data = reactive({
  timeList: [
    // {
    //     name: "周",
    //     code: "week",
    // },
    {
      name: '月',
      code: 'month'
    },
    {
      name: '季',
      code: 'quarter'
    },
    {
      name: '年',
      code: 'year'
    }
  ],
  timeState: 'month',
  demoData: {
    data: [
      {
        id: 520,
        projectName: '项目1',
        startTime: '2023-09-25',
        endTime: '2023-10-31',
        showEndTime: '2023-11-01',
        projectStatus: '暂无任务',
        projectProgress: 0,
        projectRatio: '',
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: '',
        xmdj: '2',
        cityName: '成都',
        name: '1',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-24 16:00:00.000',
        end_date: '2023-10-31 16:00:00.000',
        progress: 0.5,
        duration: 37
      },
      {
        id: 517,
        projectName: '项目2',
        startTime: '2023-09-18',
        endTime: '2023-10-23',
        showEndTime: '2023-10-24',
        projectStatus: '暂无任务',
        projectProgress: 0,
        projectRatio: '',
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: '',
        xmdj: '0',
        cityName: '深圳',
        name: '2',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-17 16:00:00.000',
        end_date: '2023-10-23 16:00:00.000',
        progress: 0.2
      },
      {
        id: 505,
        projectName: '项目3',
        startTime: '2023-09-04',
        endTime: '2023-09-30',
        showEndTime: '2023-10-01',
        projectStatus: '滞后',
        projectProgress: 0.76,
        projectRatio: 0.12,
        projectTotalTime: 3267.6,
        projectUsedTime: 2477.7,
        functionName: '现状还原',
        xmdj: '3',
        cityName: '成都',
        name: '3',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-03 16:00:00.000',
        end_date: '2023-09-30 16:00:00.000',
        progress: 0.1
      },
      {
        id: 508,
        projectName: '项目4',
        startTime: '2023-09-04',
        endTime: '2023-10-20',
        showEndTime: '2023-10-21',
        projectStatus: '滞后',
        projectProgress: 0.57,
        projectRatio: 0.04,
        projectTotalTime: 3582.5,
        projectUsedTime: 2033.2,
        functionName: '生活圈',
        xmdj: '1',
        cityName: '成都',
        name: '4',
        projectMap: {},
        parent: 0,
        start_date: '2023-09-03 16:00:00.000',
        end_date: '2023-10-20 16:00:00.000',
        progress: 0.15
      },
      {
        id: 511,
        projectName: '项目5',
        startTime: '2023-09-01',
        endTime: '2023-10-31',
        showEndTime: '2023-11-01',
        projectStatus: '滞后',
        projectProgress: 0.07,
        projectRatio: 0.03,
        projectTotalTime: 2150.5,
        projectUsedTime: 140,
        functionName: '悬浮球',
        xmdj: '1',
        cityName: '成都',
        name: '5',
        projectMap: {},
        parent: 0,
        start_date: '2023-07-31 16:00:00.000',
        end_date: '2023-10-31 16:00:00.000',
        progress: 0.28
      },
      {
        id: 507,
        projectName: '项目6',
        startTime: '2023-08-28',
        endTime: '2023-10-01',
        showEndTime: '2023-10-02',
        projectStatus: '滞后',
        projectProgress: 0.48,
        projectRatio: 0.21,
        projectTotalTime: 4957,
        projectUsedTime: 2367,
        functionName: '产品原型图',
        xmdj: '1',
        cityName: '三亚',
        name: '6',
        projectMap: {
          美术: 1
        },
        parent: 0,
        start_date: '2023-07-27 16:00:00.000',
        end_date: '2023-10-01 16:00:00.000',
        progress: 0.33
      },
      {
        id: 1,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 2,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 3,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 4,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 5,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 6,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 7,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 8,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      },
      {
        id: 9,
        projectName: '项目7',
        startTime: '2023-08-28',
        endTime: '2023-10-25',
        showEndTime: '2023-10-26',
        projectStatus: '滞后',
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: '测量工具',
        xmdj: '1',
        cityName: '佛山',
        name: '7',
        projectMap: {},
        parent: 0,
        start_date: '2023-06-27 16:00:00.000',
        end_date: '2023-10-25 16:00:00.000',
        progress: 0.67
      }
    ]
  }
})

const zoomConfig = {
  levels: [
    {
      name: 'day',
      scale_height: 60,
      scales: [{ unit: 'day', step: 1, format: '%d %M' }]
    },
    {
      name: 'week',
      scale_height: 60,
      scales: [
        {
          unit: 'week',
          step: 1,
          format: function (date) {
            let dateToStr = gantt.date.date_to_str('%m-%d')
            let endDate = gantt.date.add(date, -6, 'day')
            let weekNum = gantt.date.date_to_str('%W')(date) //第几周
            return dateToStr(endDate) + ' 至 ' + dateToStr(date)
          }
        },
        {
          unit: 'day',
          step: 1,
          format: '%d', // + "周%D"
          css: function (date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return 'day-item weekend weekend-border-bottom'
            } else {
              return 'day-item'
            }
          }
        }
      ]
    },
    {
      name: 'month',
      scale_height: 60,
      min_column_width: 18,
      scales: [
        { unit: 'month', format: '%Y-%m' },
        {
          unit: 'day',
          step: 1,
          format: '%d',
          css: function (date) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return 'day-item weekend weekend-border-bottom'
            } else {
              return 'day-item'
            }
          }
        }
      ]
    },
    {
      name: 'quarter',
      height: 60,
      min_column_width: 110,
      scales: [
        {
          unit: 'quarter',
          step: 1,
          format: function (date) {
            let yearStr = new Date(date).getFullYear() + '年'
            let dateToStr = gantt.date.date_to_str('%M')
            let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
            return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)
          }
        },
        {
          unit: 'week',
          step: 1,
          format: function (date) {
            let dateToStr = gantt.date.date_to_str('%m-%d')
            let endDate = gantt.date.add(date, 6, 'day')
            let weekNum = gantt.date.date_to_str('%W')(date)
            return dateToStr(date) + ' 至 ' + dateToStr(endDate)
          }
        }
      ]
    },
    {
      name: 'year',
      scale_height: 50,
      min_column_width: 150,
      scales: [
        { unit: 'year', step: 1, format: '%Y年' },
        { unit: 'month', format: '%Y-%m' }
      ]
    }
  ]
}

//初始化甘特图
const initGantt = () => {
  let dateToStr = gantt.date.date_to_str('%Y.%m.%d')
  gantt.config.grid_width = 350
  gantt.config.add_column = false //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  gantt.config.xml_date = '%Y-%m-%d' //甘特图时间数据格式
  gantt.config.readonly = true //是否只读

  gantt.templates.task_text = function (start, end, task) {
    return task.projectName
  }

  gantt.config.columns = [
    {
      name: 'projectName',
      label: '项目名称',
      tree: true,
      width: '*'
    },
    {
      name: '',
      label: '时间',
      align: 'center',
      width: 150,
      template: function (item) {
        return `<div class="project-time">${
          dateToStr(item.start_date) + '-' + item.endTime.replace(/[-]/g, '.')
        }</div>`
      }
    }
  ]

  gantt.i18n.setLocale('cn') //设置语言
  gantt.init('gantt_here') //初始化
  gantt.parse(data.demoData) //填充数据
  scrollInit()
  gantt.ext.zoom.init(zoomConfig) //配置初始化扩展
  gantt.ext.zoom.setLevel('month') //切换到指定的缩放级别
}

//拖拽滚动视图
const scrollInit = () => {
  const nav = document.querySelectorAll('.gantt_task')[0]
  const parNav = document.querySelectorAll('.gantt_hor_scroll')[0]
  parNav.scrollLeft = 0
  let flag
  let downX
  let scrollLeft
  nav.addEventListener('mousedown', function (event) {
    flag = true
    downX = event.clientX // 获取到点击的x下标
    scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
  })
  nav.addEventListener('mousemove', function (event) {
    if (flag) {
      let moveX = event.clientX
      let scrollX = moveX - downX
      parNav.scrollLeft = scrollLeft - scrollX
    }
  })
  // 鼠标抬起停止拖动
  nav.addEventListener('mouseup', function () {
    flag = false
  })
  // 鼠标离开元素停止拖动
  nav.addEventListener('mouseleave', function (event) {
    flag = false
  })
}

const changeTime = () => {
  gantt.ext.zoom.setLevel(data.timeState)
}

onBeforeMount(() => {})
onMounted(() => {
  initGantt()
})
watchEffect(() => {})
defineExpose({
  ...toRefs(data)
})
</script>
<style scoped lang="scss">
.my-gantt {
  height: 800px;
  width: 100vw;
  .time-box {
    text-align: center;
    margin-bottom: 20px;
  }
  ::v-deep .gantt-container {
    width: 100%;
    height: 100%;
    .weekend {
      background: #ff9e2f;
      color: #fff;
    }
  }
}
</style>

　　后续：任务条展示多种数据，或一行任务展示多个子任务

　　

 

vue 甘特图 右侧 内容 拖动 展示

与vue 甘特图（三）：甘特图右侧内容拖动展示相似的内容：

vue 甘特图（三）：甘特图右侧内容拖动展示

vue3 甘特图（三）：甘特图右侧内容拖动展示内容 解决因多个项目周期跨度不同，在一页屏幕里展示不完全，需要通过拖动甘特图下方的滚动条，去查看对应时间段内的内容 拖拽滚动视图，展示对应时间甘特图 构思，通过监听内容拖拽的距离，同时使滚动条滑动相同距离，从而达到效果。 //拖拽滚动视图 const s

vue 甘特图 右侧 内容
61
手撕Vue-编译指令数据

经过上一篇的分析，完成了查找指令和模板的功能，接下来就是编译指令的数据了。 所以本章节主要处理的方法则是 buildElement 方法，我们先分析一下我们所拿到的数据在进行编码，这样会更加清晰一些。 我将 name, value 打印出来，分别对应的值是 name: v-model, value:

vue
60
VUE知识体系、VUE面试题

1. computed（计算属性）和方法有什么区别？ 计算属性本质上是包含 getter 和 setter 的方法 当获取计算属性时，实际上是在调用计算属性的 getter 方法。vue 会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 方法没有缓存，每次调用方法都

vue
0
Vue 3入门指南

title: Vue 3入门指南 date: 2024/5/23 19:37:34 updated: 2024/5/23 19:37:34 categories: 前端开发 tags: 框架对比 环境搭建 基础语法 组件开发 响应式系统 状态管理 路由配置 第1章：Vue 3简介 1.1 Vue.j

vue
3
Vue 3 组件基础与模板语法详解

title: Vue 3 组件基础与模板语法详解 date: 2024/5/24 16:31:13 updated: 2024/5/24 16:31:13 categories: 前端开发 tags: Vue3特性 CompositionAPI Teleport Suspense Vue3安装 组件

vue
0
Vue 3指令与事件处理

title: Vue 3指令与事件处理 date: 2024/5/25 18:53:37 updated: 2024/5/25 18:53:37 categories: 前端开发 tags: Vue3基础 指令详解 事件处理 高级事件 实战案例 最佳实践 性能优化 第1章 Vue 3基础 1.1 V

vue
0
理解Vue 3响应式系统原理

title: 理解Vue 3响应式系统原理 date: 2024/5/28 15:44:47 updated: 2024/5/28 15:44:47 categories: 前端开发 tags: Vue3.x TypeScript SFC优化 Composition-API Ref&Reactive

vue
0
Vue源码学习(十一):计算属性computed初步学习

好家伙， 1.Computed实现原理 if (opts.computed) { initComputed(vm,opts.computed); } function initComputed(vm, computed) { // 存放计算属性的watcher const watchers = vm

vue computed
1
在Vue中使用Canvas绘制背景

好家伙， 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别 法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到cancas元素； 创建context对象；getContext() 方法返回一个用于画布上绘图环境；参数 ‘2

vue 使用 canvas 绘制
1514
Vue源码学习(一):数据劫持(对象类型)

好家伙,了解一下Vue如何实现数据劫持 1.Vue中data的使用 首先,我得搞清楚这玩意的概念,我们先从vue的使用开始吧 想想看,我们平时是如何使用vue的data部分的? 无非是这两种情况 (你可千万不要带着惊讶的表情说"啊!原来有两种写法的吗") //函数写法 data() { return

vue 源码 学习 数据
74
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.