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. Java:错误:不支持发行版本5

    #解决方案1 1.点击File--Project Structure 2.点击Project 3.查看jdk版本是否和安装的一样 4.点击Modules 查看版本 5.点击Preferences--B ...

  2. 1. Spring 简介

    1. Spring 概述 ‍ 官网地址:​https://spring.io/ ‍ Spring 是最受欢迎的企业级 Java 应用程序开发框架,数以百万的来自世界各地的开发人员使用 Spring 框 ...

  3. Go 语言 for-range 的两个坑，你踩过吗？

    坑一:迭代时协程引用索引和值 先看看下面的例子,你知道最终输出的结果是什么吗? package main import ( "fmt" "time" ) fun ...

  4. Vue-treeselect 实现下拉树懒加载，末节点不要箭头

    项目需要,可选择的下拉树,由于数据过多,显示要有层级感,所以使用了懒加载模式 vue-treeselect官网:https://www.vue-treeselect.cn/ 1.前端代码 1.下载依赖 ...

  5. Mysql高级1-存储引擎

    一.Mysql体系结构 1.1.连接层 最上层是一个客户端和链接服务,主要完成一些类似于链接处理,授权认证,及相关的安全方案,服务器也会为安全接入的而每个客户端验证它所具有的操作权限 1.2.服务层 ...

  6. 【题解】Educational Codeforces Round 150（CF1841）

    赛时过了 A-E,然后就开摆了,为什么感觉 C 那么无厘头[发怒][发怒] 排名:25th A.Game with Board 题目描述: Alice 和 Bob 玩游戏,他们有一块黑板.最初,有 \ ...

  7. 层叠样式表（CSS）1

    一.css的简介 1.层叠样式表的含义 层叠样式表:css是不仅是表现HTML的语言.还是进行样式修饰的语言 层叠:是对一个元素多次设置同一个样式,层层叠加覆盖,如不同的样式对一html标签进行修饰, ...

  8. Angular 报错 Cannot Resolve Module

    file:///E:/C#/angular-client/src/app/app.component.sass?FngResource 一些文件解释不到,最后发现是这个目录的问题,里面有个特殊的字符 ...

  9. Oracle 11g手工建库

    搭建环境 1.建立相应的目录 mkdir /u01/app/oracle/oradata/test1 mkdir /u01/app/oracle/fast_recovery_area/test1 mk ...

  10. Numpy，一篇足以

    numpy 用于数值计算 ndarray, 一个有效的多维数组,能提供以数组为导向的快速数值计算和灵活的广播功能(broadcasting) 便利的数学函数 用于读取/写入(reading/writi ...