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 甘特图（三）：甘特图右侧内容拖动展示的更多相关文章

  1. Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图

    Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...

  2. 在博客文章中使用mermaid 定义流程图，序列图，甘特图

    概述 Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图.序列图.甘特图等等. 它的官方网站是 https://mermaid-js.github ...

  3. 甘特图和PERT图

    gantt图又叫甘特图.进度是按时间顺序计划活动的一个列表,我们称之为Gantt图,它有以下几个关键的成分:1.横跨图顶部排列的是日历表.2.最左边的一列包含了每项任务的标识号(ID).3.左边第二列 ...

  4. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

  5. HTML中使用Vue+Dhtmlxgantt制作任务进度图

    HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配 ...

  6. 通过三张图了解Redux中的重要概念

    上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比 ...

  7. Tensorflow框架实现中的“三”种图

    https://zhuanlan.zhihu.com/p/31308381 图(graph)是 tensorflow 用于表达计算任务的一个核心概念.从前端(python)描述神经网络的结构,到后端在 ...

  8. 【转帖】自助式BI的崛起：三张图看清商业智能和大数据分析市场趋势

    自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势 大数据时代,商业智能和数据分析软件市场正在经历一场巨变,那些强调易用性的,人人都能使用的分析软件正在取代传统复杂的商业智能和分析软件成为市场的 ...

  9. 三张图彻底了解Java中字符串的不变性

    转载: 三张图彻底了解Java中字符串的不变性 定义一个字符串 String s = "abcd"; s中保存了string对象的引用.下面的箭头可以理解为"存储他的引用 ...

  10. vue 弹性布局 实现长图垂直居上，短图垂直居中

    vue 弹性布局 实现长图垂直居上,短图垂直居中 大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class=" ...

随机推荐

  1. SpringBoot中的yml文件中读取自定义配置信息

    SpringBoot中的yml文件中读取自定义配置信息 开发中遇到的问题,百度的答案我都没有找到,去找大佬获取到的经验总结,这只是其中的一种方法,如果其他大佬有新的方法,可以分享分享. 一.非静态属性 ...

  2. ArcPy批量对大量遥感影像相减做差

      本文介绍基于Python中ArcPy模块,对大量栅格遥感影像文件批量进行相减做差的方法.   首先,我们来明确一下本文的具体需求.现有一个存储有多张.tif格式遥感影像的文件夹,其中每一个遥感影像 ...

  3. [渗透测试]—7.1 漏洞利用开发和Shellcode编写

    在本章节中,我们将学习漏洞利用开发和Shellcode编写的基本概念和技巧.我们会尽量详细.通俗易懂地讲解,并提供尽可能多的实例. 7.1 漏洞利用开发 漏洞利用开发是渗透测试中的高级技能.当你发现一 ...

  4. 2023-07-09：给定N、M两个参数， 一共有N个格子，每个格子可以涂上一种颜色，颜色在M种里选， 当涂满N个格子，并且M种颜色都使用了，叫一种有效方法。 求一共有多少种有效方法。 1 ＜= N,

    2023-07-09:给定N.M两个参数, 一共有N个格子,每个格子可以涂上一种颜色,颜色在M种里选, 当涂满N个格子,并且M种颜色都使用了,叫一种有效方法. 求一共有多少种有效方法. 1 <= ...

  5. Day14_Java_作业

    编程题: 1:获取10个1-20之间的随机数,要求不能重复 答: package StudentWork; import java.util.ArrayList; /** * * 需求: 1:获取10 ...

  6. 【转载】Linux虚拟化KVM-Qemu分析（一）

    原文信息 作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者 ...

  7. 如何使用CCXT交易数字货币现货

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 数字货币现货标准化接口 数字货币市场与股票.期货市场最大的不同点在于数字货币主流交易所数量很多.举个例子 ...

  8. CSP-S复习列表

    DP:序列,区间,背包,多维,状压,树型 优化:滚动,单调性,树状数组 数据结构:栈,队,链,deque,priority_queue,vector,set,map 树状数组,分块思想 前缀和,差分思 ...

  9. 探究eFuse：硬件保障与系统安全的核心

    探究eFuse:硬件保障与系统安全的核心 图1: 编程熔断的 eFuse eFUSE的全名是"Electrically Programmable Read-Only Memory Fuse& ...

  10. rest-apiV2.0.0升级为simplest-api开源框架生态之simplest-jpa发布

    什么是 simplest simplest 追求存粹简单和极致. 旨在为项目快速开发提供一系列的基础能力,方便用户根据项目需求快速进行功能拓展 不在去关心一些繁琐.重复工作,而是把重点聚焦到业务. 前 ...