经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 甘特图（三）：甘特图右侧内容拖动展示
来源：cnblogs　　作者：根号九九　　时间：2023/10/11 16:12:07　　对本文有异议

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

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

　　

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

　 构思，通过监听内容拖拽的距离，同时使滚动条滑动相同距离，从而达到效果。
  1. //拖拽滚动视图
  2. const scrollInit = () => {
  3.   const nav = document.querySelectorAll('.gantt_task')[0]
  4.   const parNav = document.querySelectorAll('.gantt_hor_scroll')[0]
  5.   parNav.scrollLeft = 0
  6.   let flag
  7.   let downX
  8.   let scrollLeft
  9.   nav.addEventListener('mousedown', function (event) {
  10.     flag = true
  11.     downX = event.clientX // 获取到点击的x下标
  12.     scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
  13.   })
  14.   nav.addEventListener('mousemove', function (event) {
  15.     if (flag) {
  16.       let moveX = event.clientX
  17.       let scrollX = moveX - downX
  18.       parNav.scrollLeft = scrollLeft - scrollX
  19.     }
  20.   })
  21.   // 鼠标抬起停止拖动
  22.   nav.addEventListener('mouseup', function () {
  23.     flag = false
  24.   })
  25.   // 鼠标离开元素停止拖动
  26.   nav.addEventListener('mouseleave', function (event) {
  27.     flag = false
  28.   })
  29. }

　　

 　完整代码

　　

  1. <template>
  2.   <section class="my-gantt">
  3.     <div class="time-box">
  4.       <el-radio-group v-model="data.timeState" @change="changeTime">
  5.         <el-radio-button
  6.           v-for="(time, t_index) in data.timeList"
  7.           :key="t_index"
  8.           :label="time.code"
  9.           size="default"
  10.           border
  11.           >{{ time.name }}</el-radio-button
  12.         >
  13.       </el-radio-group>
  14.     </div>
  15.     <div id="gantt_here" class="gantt-container"></div>
  16.   </section>
  17. </template>
  18.  
  19. <script setup>
  20. import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'
  21.  
  22. import { gantt } from 'dhtmlx-gantt'
  23. import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  24.  
  25. const data = reactive({
  26.   timeList: [
  27.     // {
  28.     //     name: "周",
  29.     //     code: "week",
  30.     // },
  31.     {
  32.       name: '月',
  33.       code: 'month'
  34.     },
  35.     {
  36.       name: '季',
  37.       code: 'quarter'
  38.     },
  39.     {
  40.       name: '年',
  41.       code: 'year'
  42.     }
  43.   ],
  44.   timeState: 'month',
  45.   demoData: {
  46.     data: [
  47.       {
  48.         id: 520,
  49.         projectName: '项目1',
  50.         startTime: '2023-09-25',
  51.         endTime: '2023-10-31',
  52.         showEndTime: '2023-11-01',
  53.         projectStatus: '暂无任务',
  54.         projectProgress: 0,
  55.         projectRatio: '',
  56.         projectTotalTime: 0,
  57.         projectUsedTime: 0,
  58.         functionName: '',
  59.         xmdj: '2',
  60.         cityName: '成都',
  61.         name: '1',
  62.         projectMap: {},
  63.         parent: 0,
  64.         start_date: '2023-09-24 16:00:00.000',
  65.         end_date: '2023-10-31 16:00:00.000',
  66.         progress: 0.5,
  67.         duration: 37
  68.       },
  69.       {
  70.         id: 517,
  71.         projectName: '项目2',
  72.         startTime: '2023-09-18',
  73.         endTime: '2023-10-23',
  74.         showEndTime: '2023-10-24',
  75.         projectStatus: '暂无任务',
  76.         projectProgress: 0,
  77.         projectRatio: '',
  78.         projectTotalTime: 0,
  79.         projectUsedTime: 0,
  80.         functionName: '',
  81.         xmdj: '0',
  82.         cityName: '深圳',
  83.         name: '2',
  84.         projectMap: {},
  85.         parent: 0,
  86.         start_date: '2023-09-17 16:00:00.000',
  87.         end_date: '2023-10-23 16:00:00.000',
  88.         progress: 0.2
  89.       },
  90.       {
  91.         id: 505,
  92.         projectName: '项目3',
  93.         startTime: '2023-09-04',
  94.         endTime: '2023-09-30',
  95.         showEndTime: '2023-10-01',
  96.         projectStatus: '滞后',
  97.         projectProgress: 0.76,
  98.         projectRatio: 0.12,
  99.         projectTotalTime: 3267.6,
  100.         projectUsedTime: 2477.7,
  101.         functionName: '现状还原',
  102.         xmdj: '3',
  103.         cityName: '成都',
  104.         name: '3',
  105.         projectMap: {},
  106.         parent: 0,
  107.         start_date: '2023-09-03 16:00:00.000',
  108.         end_date: '2023-09-30 16:00:00.000',
  109.         progress: 0.1
  110.       },
  111.       {
  112.         id: 508,
  113.         projectName: '项目4',
  114.         startTime: '2023-09-04',
  115.         endTime: '2023-10-20',
  116.         showEndTime: '2023-10-21',
  117.         projectStatus: '滞后',
  118.         projectProgress: 0.57,
  119.         projectRatio: 0.04,
  120.         projectTotalTime: 3582.5,
  121.         projectUsedTime: 2033.2,
  122.         functionName: '生活圈',
  123.         xmdj: '1',
  124.         cityName: '成都',
  125.         name: '4',
  126.         projectMap: {},
  127.         parent: 0,
  128.         start_date: '2023-09-03 16:00:00.000',
  129.         end_date: '2023-10-20 16:00:00.000',
  130.         progress: 0.15
  131.       },
  132.       {
  133.         id: 511,
  134.         projectName: '项目5',
  135.         startTime: '2023-09-01',
  136.         endTime: '2023-10-31',
  137.         showEndTime: '2023-11-01',
  138.         projectStatus: '滞后',
  139.         projectProgress: 0.07,
  140.         projectRatio: 0.03,
  141.         projectTotalTime: 2150.5,
  142.         projectUsedTime: 140,
  143.         functionName: '悬浮球',
  144.         xmdj: '1',
  145.         cityName: '成都',
  146.         name: '5',
  147.         projectMap: {},
  148.         parent: 0,
  149.         start_date: '2023-07-31 16:00:00.000',
  150.         end_date: '2023-10-31 16:00:00.000',
  151.         progress: 0.28
  152.       },
  153.       {
  154.         id: 507,
  155.         projectName: '项目6',
  156.         startTime: '2023-08-28',
  157.         endTime: '2023-10-01',
  158.         showEndTime: '2023-10-02',
  159.         projectStatus: '滞后',
  160.         projectProgress: 0.48,
  161.         projectRatio: 0.21,
  162.         projectTotalTime: 4957,
  163.         projectUsedTime: 2367,
  164.         functionName: '产品原型图',
  165.         xmdj: '1',
  166.         cityName: '三亚',
  167.         name: '6',
  168.         projectMap: {
  169.           美术: 1
  170.         },
  171.         parent: 0,
  172.         start_date: '2023-07-27 16:00:00.000',
  173.         end_date: '2023-10-01 16:00:00.000',
  174.         progress: 0.33
  175.       },
  176.       {
  177.         id: 1,
  178.         projectName: '项目7',
  179.         startTime: '2023-08-28',
  180.         endTime: '2023-10-25',
  181.         showEndTime: '2023-10-26',
  182.         projectStatus: '滞后',
  183.         projectProgress: 0.27,
  184.         projectRatio: 0.15,
  185.         projectTotalTime: 2027.5,
  186.         projectUsedTime: 557,
  187.         functionName: '测量工具',
  188.         xmdj: '1',
  189.         cityName: '佛山',
  190.         name: '7',
  191.         projectMap: {},
  192.         parent: 0,
  193.         start_date: '2023-06-27 16:00:00.000',
  194.         end_date: '2023-10-25 16:00:00.000',
  195.         progress: 0.67
  196.       },
  197.       {
  198.         id: 2,
  199.         projectName: '项目7',
  200.         startTime: '2023-08-28',
  201.         endTime: '2023-10-25',
  202.         showEndTime: '2023-10-26',
  203.         projectStatus: '滞后',
  204.         projectProgress: 0.27,
  205.         projectRatio: 0.15,
  206.         projectTotalTime: 2027.5,
  207.         projectUsedTime: 557,
  208.         functionName: '测量工具',
  209.         xmdj: '1',
  210.         cityName: '佛山',
  211.         name: '7',
  212.         projectMap: {},
  213.         parent: 0,
  214.         start_date: '2023-06-27 16:00:00.000',
  215.         end_date: '2023-10-25 16:00:00.000',
  216.         progress: 0.67
  217.       },
  218.       {
  219.         id: 3,
  220.         projectName: '项目7',
  221.         startTime: '2023-08-28',
  222.         endTime: '2023-10-25',
  223.         showEndTime: '2023-10-26',
  224.         projectStatus: '滞后',
  225.         projectProgress: 0.27,
  226.         projectRatio: 0.15,
  227.         projectTotalTime: 2027.5,
  228.         projectUsedTime: 557,
  229.         functionName: '测量工具',
  230.         xmdj: '1',
  231.         cityName: '佛山',
  232.         name: '7',
  233.         projectMap: {},
  234.         parent: 0,
  235.         start_date: '2023-06-27 16:00:00.000',
  236.         end_date: '2023-10-25 16:00:00.000',
  237.         progress: 0.67
  238.       },
  239.       {
  240.         id: 4,
  241.         projectName: '项目7',
  242.         startTime: '2023-08-28',
  243.         endTime: '2023-10-25',
  244.         showEndTime: '2023-10-26',
  245.         projectStatus: '滞后',
  246.         projectProgress: 0.27,
  247.         projectRatio: 0.15,
  248.         projectTotalTime: 2027.5,
  249.         projectUsedTime: 557,
  250.         functionName: '测量工具',
  251.         xmdj: '1',
  252.         cityName: '佛山',
  253.         name: '7',
  254.         projectMap: {},
  255.         parent: 0,
  256.         start_date: '2023-06-27 16:00:00.000',
  257.         end_date: '2023-10-25 16:00:00.000',
  258.         progress: 0.67
  259.       },
  260.       {
  261.         id: 5,
  262.         projectName: '项目7',
  263.         startTime: '2023-08-28',
  264.         endTime: '2023-10-25',
  265.         showEndTime: '2023-10-26',
  266.         projectStatus: '滞后',
  267.         projectProgress: 0.27,
  268.         projectRatio: 0.15,
  269.         projectTotalTime: 2027.5,
  270.         projectUsedTime: 557,
  271.         functionName: '测量工具',
  272.         xmdj: '1',
  273.         cityName: '佛山',
  274.         name: '7',
  275.         projectMap: {},
  276.         parent: 0,
  277.         start_date: '2023-06-27 16:00:00.000',
  278.         end_date: '2023-10-25 16:00:00.000',
  279.         progress: 0.67
  280.       },
  281.       {
  282.         id: 6,
  283.         projectName: '项目7',
  284.         startTime: '2023-08-28',
  285.         endTime: '2023-10-25',
  286.         showEndTime: '2023-10-26',
  287.         projectStatus: '滞后',
  288.         projectProgress: 0.27,
  289.         projectRatio: 0.15,
  290.         projectTotalTime: 2027.5,
  291.         projectUsedTime: 557,
  292.         functionName: '测量工具',
  293.         xmdj: '1',
  294.         cityName: '佛山',
  295.         name: '7',
  296.         projectMap: {},
  297.         parent: 0,
  298.         start_date: '2023-06-27 16:00:00.000',
  299.         end_date: '2023-10-25 16:00:00.000',
  300.         progress: 0.67
  301.       },
  302.       {
  303.         id: 7,
  304.         projectName: '项目7',
  305.         startTime: '2023-08-28',
  306.         endTime: '2023-10-25',
  307.         showEndTime: '2023-10-26',
  308.         projectStatus: '滞后',
  309.         projectProgress: 0.27,
  310.         projectRatio: 0.15,
  311.         projectTotalTime: 2027.5,
  312.         projectUsedTime: 557,
  313.         functionName: '测量工具',
  314.         xmdj: '1',
  315.         cityName: '佛山',
  316.         name: '7',
  317.         projectMap: {},
  318.         parent: 0,
  319.         start_date: '2023-06-27 16:00:00.000',
  320.         end_date: '2023-10-25 16:00:00.000',
  321.         progress: 0.67
  322.       },
  323.       {
  324.         id: 8,
  325.         projectName: '项目7',
  326.         startTime: '2023-08-28',
  327.         endTime: '2023-10-25',
  328.         showEndTime: '2023-10-26',
  329.         projectStatus: '滞后',
  330.         projectProgress: 0.27,
  331.         projectRatio: 0.15,
  332.         projectTotalTime: 2027.5,
  333.         projectUsedTime: 557,
  334.         functionName: '测量工具',
  335.         xmdj: '1',
  336.         cityName: '佛山',
  337.         name: '7',
  338.         projectMap: {},
  339.         parent: 0,
  340.         start_date: '2023-06-27 16:00:00.000',
  341.         end_date: '2023-10-25 16:00:00.000',
  342.         progress: 0.67
  343.       },
  344.       {
  345.         id: 9,
  346.         projectName: '项目7',
  347.         startTime: '2023-08-28',
  348.         endTime: '2023-10-25',
  349.         showEndTime: '2023-10-26',
  350.         projectStatus: '滞后',
  351.         projectProgress: 0.27,
  352.         projectRatio: 0.15,
  353.         projectTotalTime: 2027.5,
  354.         projectUsedTime: 557,
  355.         functionName: '测量工具',
  356.         xmdj: '1',
  357.         cityName: '佛山',
  358.         name: '7',
  359.         projectMap: {},
  360.         parent: 0,
  361.         start_date: '2023-06-27 16:00:00.000',
  362.         end_date: '2023-10-25 16:00:00.000',
  363.         progress: 0.67
  364.       }
  365.     ]
  366.   }
  367. })
  368.  
  369. const zoomConfig = {
  370.   levels: [
  371.     {
  372.       name: 'day',
  373.       scale_height: 60,
  374.       scales: [{ unit: 'day', step: 1, format: '%d %M' }]
  375.     },
  376.     {
  377.       name: 'week',
  378.       scale_height: 60,
  379.       scales: [
  380.         {
  381.           unit: 'week',
  382.           step: 1,
  383.           format: function (date) {
  384.             let dateToStr = gantt.date.date_to_str('%m-%d')
  385.             let endDate = gantt.date.add(date, -6, 'day')
  386.             let weekNum = gantt.date.date_to_str('%W')(date) //第几周
  387.             return dateToStr(endDate) + ' 至 ' + dateToStr(date)
  388.           }
  389.         },
  390.         {
  391.           unit: 'day',
  392.           step: 1,
  393.           format: '%d', // + "周%D"
  394.           css: function (date) {
  395.             if (date.getDay() == 0 || date.getDay() == 6) {
  396.               return 'day-item weekend weekend-border-bottom'
  397.             } else {
  398.               return 'day-item'
  399.             }
  400.           }
  401.         }
  402.       ]
  403.     },
  404.     {
  405.       name: 'month',
  406.       scale_height: 60,
  407.       min_column_width: 18,
  408.       scales: [
  409.         { unit: 'month', format: '%Y-%m' },
  410.         {
  411.           unit: 'day',
  412.           step: 1,
  413.           format: '%d',
  414.           css: function (date) {
  415.             if (date.getDay() == 0 || date.getDay() == 6) {
  416.               return 'day-item weekend weekend-border-bottom'
  417.             } else {
  418.               return 'day-item'
  419.             }
  420.           }
  421.         }
  422.       ]
  423.     },
  424.     {
  425.       name: 'quarter',
  426.       height: 60,
  427.       min_column_width: 110,
  428.       scales: [
  429.         {
  430.           unit: 'quarter',
  431.           step: 1,
  432.           format: function (date) {
  433.             let yearStr = new Date(date).getFullYear() + '年'
  434.             let dateToStr = gantt.date.date_to_str('%M')
  435.             let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
  436.             return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)
  437.           }
  438.         },
  439.         {
  440.           unit: 'week',
  441.           step: 1,
  442.           format: function (date) {
  443.             let dateToStr = gantt.date.date_to_str('%m-%d')
  444.             let endDate = gantt.date.add(date, 6, 'day')
  445.             let weekNum = gantt.date.date_to_str('%W')(date)
  446.             return dateToStr(date) + ' 至 ' + dateToStr(endDate)
  447.           }
  448.         }
  449.       ]
  450.     },
  451.     {
  452.       name: 'year',
  453.       scale_height: 50,
  454.       min_column_width: 150,
  455.       scales: [
  456.         { unit: 'year', step: 1, format: '%Y年' },
  457.         { unit: 'month', format: '%Y-%m' }
  458.       ]
  459.     }
  460.   ]
  461. }
  462.  
  463. //初始化甘特图
  464. const initGantt = () => {
  465.   let dateToStr = gantt.date.date_to_str('%Y.%m.%d')
  466.   gantt.config.grid_width = 350
  467.   gantt.config.add_column = false //添加符号
  468.  
  469.   //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  470.   gantt.config.autofit = false
  471.   gantt.config.row_height = 60
  472.   gantt.config.bar_height = 34
  473.   // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  474.   gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  475.   gantt.config.xml_date = '%Y-%m-%d' //甘特图时间数据格式
  476.   gantt.config.readonly = true //是否只读
  477.  
  478.   gantt.templates.task_text = function (start, end, task) {
  479.     return task.projectName
  480.   }
  481.  
  482.   gantt.config.columns = [
  483.     {
  484.       name: 'projectName',
  485.       label: '项目名称',
  486.       tree: true,
  487.       width: '*'
  488.     },
  489.     {
  490.       name: '',
  491.       label: '时间',
  492.       align: 'center',
  493.       width: 150,
  494.       template: function (item) {
  495.         return `<div class="project-time">${
  496.           dateToStr(item.start_date) + '-' + item.endTime.replace(/[-]/g, '.')
  497.         }</div>`
  498.       }
  499.     }
  500.   ]
  501.  
  502.   gantt.i18n.setLocale('cn') //设置语言
  503.   gantt.init('gantt_here') //初始化
  504.   gantt.parse(data.demoData) //填充数据
  505.   scrollInit()
  506.   gantt.ext.zoom.init(zoomConfig) //配置初始化扩展
  507.   gantt.ext.zoom.setLevel('month') //切换到指定的缩放级别
  508. }
  509.  
  510. //拖拽滚动视图
  511. const scrollInit = () => {
  512.   const nav = document.querySelectorAll('.gantt_task')[0]
  513.   const parNav = document.querySelectorAll('.gantt_hor_scroll')[0]
  514.   parNav.scrollLeft = 0
  515.   let flag
  516.   let downX
  517.   let scrollLeft
  518.   nav.addEventListener('mousedown', function (event) {
  519.     flag = true
  520.     downX = event.clientX // 获取到点击的x下标
  521.     scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
  522.   })
  523.   nav.addEventListener('mousemove', function (event) {
  524.     if (flag) {
  525.       let moveX = event.clientX
  526.       let scrollX = moveX - downX
  527.       parNav.scrollLeft = scrollLeft - scrollX
  528.     }
  529.   })
  530.   // 鼠标抬起停止拖动
  531.   nav.addEventListener('mouseup', function () {
  532.     flag = false
  533.   })
  534.   // 鼠标离开元素停止拖动
  535.   nav.addEventListener('mouseleave', function (event) {
  536.     flag = false
  537.   })
  538. }
  539.  
  540. const changeTime = () => {
  541.   gantt.ext.zoom.setLevel(data.timeState)
  542. }
  543.  
  544. onBeforeMount(() => {})
  545. onMounted(() => {
  546.   initGantt()
  547. })
  548. watchEffect(() => {})
  549. defineExpose({
  550.   ...toRefs(data)
  551. })
  552. </script>
  553. <style scoped lang="scss">
  554. .my-gantt {
  555.   height: 800px;
  556.   width: 100vw;
  557.   .time-box {
  558.     text-align: center;
  559.     margin-bottom: 20px;
  560.   }
  561.   ::v-deep .gantt-container {
  562.     width: 100%;
  563.     height: 100%;
  564.     .weekend {
  565.       background: #ff9e2f;
  566.       color: #fff;
  567.     }
  568.   }
  569. }
  570. </style>

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

　　

 

原文链接：https://www.cnblogs.com/Llshy/p/17752169.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号