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. C++面试八股文：什么是空指针/野指针/悬垂指针？

    某日二师兄参加XXX科技公司的C++工程师开发岗位第30面: 面试官:什么是空指针? 二师兄:一般我们将等于0/NULL/nullptr的指针称为空指针.空指针不能被解引用,但是可以对空指针取地址. ...

  2. CentOS 8搭建Docker镜像私有仓库-registry

    目录 简介 安装Docker 添加docker yum源 安装docker 确保网络模块开机自动加载 使桥接流量对iptables可见 配置docker 验证docker是否正常 添加用户到docke ...

  3. Blazor前后端框架Known-V1.2.4

    V1.2.4 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行. Gitee: https://gitee.com/known/Known Gith ...

  4. 【转载】Linux虚拟化KVM-Qemu分析（二）之ARMv8虚拟化

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

  5. Semantic Kernel Java SDK，为Java应用程序提供AI功能集成

    美国时间 2023 年 7 月 19 日,Semantic Kernel 团队在其官方博客[1]上宣布发布 Java 版Semantic Kernel. Samantic Kernel系列的源代码可在 ...

  6. Java生成图片(简版)

    1.图片模板示例 2.Java代码(简版) public static void main(String[] args) throws FileNotFoundException, IOExcepti ...

  7. 我开源了团队内部基于SpringBoot Web快速开发的API脚手架v1.6.0更新

    什么是 rest-api-spring-boot-starter rest-api-spring-boot-starter 适用于SpringBoot Web API 快速构建让开发人员快速构建统一规 ...

  8. 微服务性能分析工具 Pyroscope 初体验

    Go 自带接口性能分析工具 pprof,较为常用的有以下 4 种分析: CPU Profiling: CPU 分析,按照一定的频率采集所监听的应用程序 CPU(含寄存器)的使用情况,可确定应用程序在主 ...

  9. Designer属性编辑器简介

    objectName,控件对象名称. ● geometry,相对坐标系. ● sizePolicy,控件大小策略. ● minimumSize,最小宽度.高度. ● maximumSize,最大宽度. ...

  10. Hugging News #0807: ChatUI 官方 Docker 模板发布、🤗 Hub 和开源生态介绍视频来啦！

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...