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. 自然语言处理 Paddle NLP - 情感分析技术及应用SKEP-实践

    Part A. 情感分析任务 众所周知,人类自然语言中包含了丰富的情感色彩:表达人的情绪(如悲伤.快乐).表达人的心情(如倦怠.忧郁).表达人的喜好(如喜欢.讨厌).表达人的个性特征和表达人的立场等等 ...

  2. TiDB简介与应用场景

    引言 在当今互联网时代,数据的规模和复杂性不断增长,传统关系型数据库面临着无法满足高并发和大规模数据存储需求的挑战.为了解决这一问题,开源社区涌现出了一系列分布式数据库解决方案,其中TiDB作为一种新 ...

  3. C++面试八股文：std::vector了解吗？

    某日二师兄参加XXX科技公司的C++工程师开发岗位第23面: 面试官:vector了解吗? 二师兄:嗯,用过. 面试官:那你知道vector底层是如何实现的吗? 二师兄:vector底层使用动态数组来 ...

  4. ASP.NET Core 6框架揭秘实例演示[42]：检查应用的健康状况

    现代化的应用及服务的部署场景主要体现在集群化.微服务和容器化,这一切都建立在针对部署应用或者服务的健康检查上.ASP.NET提供的健康检查不仅可能确定目标应用或者服务的可用性,还具有健康报告发布功能. ...

  5. 【转载】Linux虚拟化KVM-Qemu分析（十）之virtio驱动

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

  6. 你知道.NET的字符串在内存中是如何存储的吗？

    毫无疑问,字符串是我们使用频率最高的类型.但是如果我问大家一个问题:"一个字符串对象在内存中如何表示的?",我相信绝大部分人回答不上来.我们今天就来讨论这个问题. 一.字符串对象的 ...

  7. 【NestJS系列】DI依赖注入与IOC控制反转

    前言 上篇文章我们学习了如何使用nest-cli来快速生成一个NestJS后端项目,当我们打开编辑器查看代码时,会发现整个代码风格有点类似JAVA的spring框架,并且你会发现一些service类在 ...

  8. 行行AI人才直播第11期：墨尔本大学数据科学高级讲师-宫明明《机器学习：从统计到因果，人工智能的发展之路》

    行行AI人才是博客园和顺顺智慧共同运营的AI行业人才全生命周期服务平台. 马克斯·普朗克智能系统中心主任曾在国际数学家大会进行了题为 From Statistical to Causal Learni ...

  9. HBase架构和技术原理介绍

    一.HBase数据模型(☆) 1．NameSpace 命名空间,类似于关系型数据库的 DataBase 概念,每个命名空间下有多个表.HBase有两个自带的命名空间,分别是 hbase 和 defau ...

  10. shell 并发

    #!/bin/bash # 设置并发数 thread_num=3 # 创建管道文件 FIFO=/tmp/$$-FIFO mkfifo $FIFO # 使用句柄打开管道文件 exec 1000<& ...