前端可排程的vue 排程甘特图

已于 2023-02-09 13:42:43 修改
阅读量2.1k 收藏 8
点赞数
文章标签： vue.js 前端 甘特图
于 2023-02-08 10:11:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46087919/article/details/128930371
版权

话不多说 直接上图 结合全网的开源码，又根据echart 图 做出了前端可排程的vue 排程甘特图

在这里插入图片描述
在这里插入图片描述

首先要引入echart 模板 这里就不再赘述了 在这里插入图片描述

在这里插入图片描述

之后对它进行魔改 将横轴改为时间 纵轴改为所需要展示的东西名称

仅对option 进行更改即可
然后自己引入数据源

  const dataSource = [
       
        {
          id: 1,
          versionCode: '2023131134241',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764356',
          productName: '防爆灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 2,
          versionCode: '2023131134242',
          lineCode: 'P1112',
          lineName: '合成线体',
          orderNo: 'G-764357',
          productName: '螺丝灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-27 00:00:00',
        },
        {
          id: 3,
          versionCode: '2023131134243',
          lineCode: 'P1113',
          lineName: '辊压线体',
          orderNo: 'G-764358',
          productName: '鼠标灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 4,
          versionCode: '2023131134244',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764359',
          productName: '布料灯',
          beginTime: '2023-01-26 00:00:00',
          endTime: '2023-01-28 00:00:00',
        },
        {
          id: 5,
          versionCode: '2023131134245',
          lineCode: 'P1114',
          lineName: '切割线体',
          orderNo: 'G-764351',
          productName: '飘带灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 6,
          versionCode: '2023131134246',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764352',
          productName: '石板灯',
          beginTime: '2023-01-29 00:00:00',
          endTime: '2023-01-31 00:00:00',
        },
        {
          id: 7,
          versionCode: '2023131134247',
          lineCode: 'P1112',
          lineName: '合成线体',
          orderNo: 'G-764353',
          productName: '铁板灯',
          beginTime: '2023-01-27 00:00:00',
          endTime: '2023-01-28 00:00:00',
        },
        {
          id: 8,
          versionCode: '2023131134248',
          lineCode: 'P1114',
          lineName: '切割线体',
          orderNo: 'G-764354',
          productName: '棉花灯',
          beginTime: '2023-01-25 00:00:00',
          endTime: '2023-01-26 00:00:00',
        },
        {
          id: 9,
          versionCode: '2023131134249',
          lineCode: 'P1113',
          lineName: '辊压线体',
          orderNo: 'G-764355',
          productName: '兔子灯',
          beginTime: '2023-01-25 00:00:00',
          endTime: '2023-01-29 00:00:00',
        },
      ]

数据源加号后 对显示进行调整即可 在最后附上核心代码 之后有需要全部源码的小伙伴可以联系我

数据源目前是写死的哦 方便展示 ，后期可以自己定义后台接口获取



<script>
//导入包

//然后
export default {
  components: { HeatMap },
  name: 'cproductct',
  data() {
    return {
      versionList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100000,
        sort: undefined,
        sortType: undefined,
        versionCode: undefined,
      },
    }
  },
  created() {
    this.HistoryList()
  },
  mounted() {
    this.drawLine()
  },

  watch: {},
  computed: {},

  beforeDestrory() {},
  destroyed() {},
  methods: {
    //得到版本下拉列表
    HistoryList() {
      GetHistoryList().then((res) => {
        if (res.code == 200) {
          this.versionList = res.data
        }
      })
    },
    //得到现有版本的数据
    getList() {
      listCScheduleHistory(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.result
          console.log(this.dataList, ' 数据列表')
                  }
      })
    },
    //柱状图
    drawLine() {
      var data = []

      var startTime = undefined


      const dataSource = [
       
        {
          id: 1,
          versionCode: '2023131134241',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764356',
          productName: '防爆灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 2,
          versionCode: '2023131134242',
          lineCode: 'P1112',
          lineName: '合成线体',
          orderNo: 'G-764357',
          productName: '螺丝灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-27 00:00:00',
        },
        {
          id: 3,
          versionCode: '2023131134243',
          lineCode: 'P1113',
          lineName: '辊压线体',
          orderNo: 'G-764358',
          productName: '鼠标灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 4,
          versionCode: '2023131134244',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764359',
          productName: '布料灯',
          beginTime: '2023-01-26 00:00:00',
          endTime: '2023-01-28 00:00:00',
        },
        {
          id: 5,
          versionCode: '2023131134245',
          lineCode: 'P1114',
          lineName: '切割线体',
          orderNo: 'G-764351',
          productName: '飘带灯',
          beginTime: '2023-01-24 00:00:00',
          endTime: '2023-01-25 00:00:00',
        },
        {
          id: 6,
          versionCode: '2023131134246',
          lineCode: 'P1111',
          lineName: '组装线体',
          orderNo: 'G-764352',
          productName: '石板灯',
          beginTime: '2023-01-29 00:00:00',
          endTime: '2023-01-31 00:00:00',
        },
        {
          id: 7,
          versionCode: '2023131134247',
          lineCode: 'P1112',
          lineName: '合成线体',
          orderNo: 'G-764353',
          productName: '铁板灯',
          beginTime: '2023-01-27 00:00:00',
          endTime: '2023-01-28 00:00:00',
        },
        {
          id: 8,
          versionCode: '2023131134248',
          lineCode: 'P1114',
          lineName: '切割线体',
          orderNo: 'G-764354',
          productName: '棉花灯',
          beginTime: '2023-01-25 00:00:00',
          endTime: '2023-01-26 00:00:00',
        },
        {
          id: 9,
          versionCode: '2023131134249',
          lineCode: 'P1113',
          lineName: '辊压线体',
          orderNo: 'G-764355',
          productName: '兔子灯',
          beginTime: '2023-01-25 00:00:00',
          endTime: '2023-01-29 00:00:00',
        },
      ]
      // 一堆颜色集，画每一个图块需要
      const Colors = [
        '#BB86D7',
        '#FFAFF0',
        '#5BC3EB',
        '#B5E2FA',
        '#A9D5C3',
        '#73DCFF',
        '#DCB0C6',
        '#F9CDA5',
        '#FBE6D2',
        '#B5E2FA',
        '#B8FFCE',
        '#FFE4E2',
        '#F7AF9D',
        '#BBF9B4',
        '#FFEE93',
        '#2CEAA3',
        '#ECC2C2',
        '#C8CACA',
      ]
      const { keys } = Object

 
  
      let machines = dataSource.reduce((acc, cur) => {
        acc[cur.lineName] ? acc[cur.lineName].push(cur) : (acc[cur.lineName] = [cur])
        return acc
      }, {})

      let workpieces = dataSource.reduce((acc, cur) => {
        acc[cur.id] ? acc[cur.id].push(cur) : (acc[cur.id] = [cur])
        return acc
      }, {})

      let workpieceColors = {} // 颜色映射
  
      keys(workpieces).forEach((v, i) => (workpieceColors[v] = Colors[i]))
      //let data = [];
      // 关键
      keys(machines).forEach((k) => {
        machines[k].forEach((v) => {
          //  beginTime endTime\
          var data1 = new Date(v.beginTime)
          var data2 = new Date(v.endTime)
          var s1 = data1.getTime()
          var s2 = data2.getTime()

          let duration = s2 - s1
          data.push({
            name: v.id, // 图块名称
            value: [k, v.beginTime, v.endTime, duration,v.orderNo,v.productName], // 名称， 起始时间， 终止时间，持续时间
            itemStyle: {
              normal: {
                color: workpieceColors[v.id], // 图块颜色
              },
            },
          })
        })
      })


      //基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'mousemove|click',

          textStyle: {//数值样式
                        fontSize: '7px',
                        color: '#666'
                    },

          formatter: function (params) {
           
            return  '生成产品   :' + params.value[5] + '<br/>'+ '开始时间    :'+ params.value[1] +'<br/>'+ '结束时间    :' + params.value[2] + '<br/>'+ '备注 :'
            
          },
      
        },
        title: {
          text: '排程甘特图',
          left: 'center',
        },
        dataZoom: [
          {
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 600,
            labelFormatter: '',
          },
          {
            type: 'inside',
            filterMode: 'weakFilter',
          },
        ],
        grid: {
          height: 500,
        },
        xAxis: {
          type: 'category',
          data: [
            '2023-01-24 00:00:00',
            '2023-01-25 00:00:00',
            '2023-01-26 00:00:00',
            '2023-01-27 00:00:00',
            '2023-01-28 00:00:00',
            '2023-01-29 00:00:00',
            '2023-01-30 00:00:00',
            '2023-01-31 00:00:00',
            '2023-02-01 00:00:00',
            '2023-02-02 00:00:00',
            '2023-02-03 00:00:00',
          ],
          //  min: startTime,
          //  scale: true,
          show: true,
          name: '时间',
          nameLocation: 'end',
          axisTick: {
            show: true,
          },
          axisLabel: {
            formatter: '{value} ',
          },
        },
        yAxis: {
          type: 'category',
          data: keys(machines),
          name: '线体',
          nameLocation: 'end',
          axisTick: {
            show: true,
          }, // data: ,
          axisLabel: {
            formatter: '{value} ',
          },
        },

        series: [
          {
            name: 'xilie',
            type: 'custom',
            renderItem: function (params, api) {
              var categoryIndex = api.value(0)
              var start = api.coord([api.value(1), categoryIndex])
              var end = api.coord([api.value(2), categoryIndex])
              var height = api.size([0, 1])[1] * 0.6
              var rectShape = echarts.graphic.clipRectByRect(
                {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height,
                },
                {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height,
                },
              )
              return (
                rectShape && {
                  type: 'rect',
                  // transition: ['shape'],
                  shape: rectShape,
                  style: api.style(),
                }
              )
            },
            label: {
              show: true,
              position: 'center',
              formatter: function (params) {
              
                return params.value[4]
              },
              textStyle: {
                
                fontSize: '15px',
                color: '#666',
                lineHeight: 70,
              },
            },
            itemStyle: {
              opacity: 0.8,
            },
            encode: {
              x: [1, 2],
              y: 0,
            },
            //  data: data,
            data: data,
          },
        ],
      })
    },
  },
}
</script>

帮到了你 我就很开心

是貔貅喔
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 甘特图
ChickenBro_的博客
10-12 2万+
vue做甘特图，先大致介绍下核心功能： （1）横轴、纵轴拖拽； （2）自定义监听点击事件（双击、右键等）（3）任务之间显示父子层级关系；（4）左侧列表信息，右侧时间轴表示任务；（5）每个任务可以订制样式，并且可以动态修改样式；（6）自定义时间粒度显示（小时、天、星期、月、年）；（7）支持大批量数据渲染；（8）支持同行多节点渲染；（9）支持选中，以及批量选中；（9）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图： 　　接下来会介绍用什么实现的，...
前端Vue2自制甘特图组件源码
03-15
根据该https://blog.csdn.net/PorkCanteen/article/details/128075399的文章，修改为vue版本的甘特图源码，增加实际业务的多段显示，更贴合工作日常需要
基于Vue框架的甘特图组件的封装设计.pdf
05-08
目前市面上大多数的项目管理软件都包含甘特图以用于对项目进行管理，尽管各个厂商的项目管理软件不同， 但是其甘特图在功能或结构上却差别不大。为了解决在项目管理软件中复用甘特图的问题，对甘特图组件封装进行 了相应研究。采用调查研究法和文献分析法，通过查阅相关文献，采用目前前端流行 Vue 框架和 Element-ui 组件库 来设计甘特图组件并最终将其应用于项目管理一体化平台之中。通过对平台测试，满足了平台的实践需求。不仅从 项目的代码体量来说减少了冗余的代码，而且封装后的甘特图组件可以根据不同项目甘特图的要求，并在此基础上 进行适当修改就可以复用到项目里，不仅节省了项目开发时间，而且提高了项目的开发效率。
甘特图实现 HTML+CSS
07-22
左侧为任务列表，右侧是甘特图，可以修改任务列表，左右同步 是打包后的，请自行搭建静态服务器查看
vue.js中使用甘特图（gantt-elastic）的使用
最新发布
s_156的博客
06-03 323
公司要使用甘特图插件来跟踪任务的进度 ，在使用这个插件的过程中踩了太多的坑了，很多配置都没有文档的 连英文文档都没有，然后就看了源码研究了下具体的配置，具体的配置我都在下面的文章中截图有备注了。//这个根据需求引入。1.要 import GanttElastic from “gantt-elastic”;gantt-elastic-header 这个可以按照需求安装。4、options设置。
【vue库应用】 - 甘特图 dhtmlx-gantt
star_3344的博客
07-05 3895
甘特图是一种项目管理工具，以直观的方式显示项目的时间轴和任务计划。 dhtmlx-gantt库是一个用于创建交互式和可自定义甘特图的js库。本文对该库进行简单应用，包括安装、引用、初始化及配置
使用Highcharts来画一个简易的甘特图
qq_42263115的博客
08-05 4433
由于在项目中需要画一个基于时间的对比甘特图，但缺乏前端知识，便在网上寻找相关插件或者已有代码。
timeline-vuejs-Vue的简约时间表-Vue.js开发
05-27
时间线Vuejs演示时间线Vue:package:安装npm install timeline-vuejs --save // main.js import'../node_modules/timeline-vuejs/dist/timeline-vuejs.c时间线Vuejs演示时间线Vue:package:安装npm安装时间线-vuejs --save // main.js import'../node_modules/timeline-vuejs/dist/timeline-vuejs.css'// component.vue
前端甘特图组件开发（一）
PorkCanteen的博客
11-28 7135
工作中需要使用甘特图组件展示数据，故考虑自主开发一款基于Angular的甘特图组件以满足业务的需求。基本包含以下几项功能：① 根据数据自动渲染进度图；② 支持树形表格数据展示；③ 支持多层时间轴自定义；④ 支持数据增删改查。其余功能将在后续持续拓展完善。
vue实现甘特图
weixin_41463944的博客
03-16 1万+
1、引入依赖 npm install dhtmlx-gantt@6.3.7 2、组件代码 <template> <div class="app-container"> <div ref="gantt" class="left-container" /> </div> </template> <script> import gantt from 'dhtmlx-gantt' // 引入模块 //import 'd
前端vue实现甘特图
xiaofiy的博客
03-18 6039
前端实现甘特图
vue制作甘特图项目源码
06-08
本项目主要面向需要使用vue来实现甘特图需求的开发者，项目实现了节点的拖拽，并用导航线连接各个节点，实现甘特图进度动态更改，导航线可以随着节点的拖拽动态变换位置，并可以新增、删除和修改任务 本项目只提供了...
基于vue的甘特图，可上下拖拽
05-14
标题"基于vue的甘特图，可上下拖拽"表明这个项目的核心在于Vue.js与甘特图的结合，并且重点在于实现了甘特图的任务条上下拖动的功能。这通常意味着用户可以通过鼠标操作直接调整任务的时间安排，使得界面交互更加...
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求...
甘特图，可以拖拽甘特图模块。
02-23
【标签】包括"vue"、"甘特图"和"可拖拽"，这意味着这个甘特图组件是基于Vue.js框架开发的。Vue.js是一个轻量级的前端JavaScript框架，以其易用性和灵活性受到开发者的喜爱。结合Vue.js和甘特图，可以构建出用户友好...
web前端之甘特图配置、文件的各种引入方式、vue和cdn的不同引入和加载、dhtmlxgantt、DHTMLX
03-25 777
web前端之甘特图配置、文件的各种引入方式、vue和cdn的不同引入和加载、dhtmlxgantt、DHTMLX
全网最新-VUE甘特图
weixin_43891314的博客
11-07 1941
根据时间展示不同状态的甘特图,全网最新最简单
vue2实现甘特图
油墨香^-^的博客
04-10 5595
(1)直接引入dhtmlx甘特实现的图表操作描述全是英文的，所以要对现有的属性数据显示要进行汉化文字代替。使用需要很多配置项，在原生版进行详情介绍，vue版只做基本使用。以上内容只是部分收费内容，并非全部收费内容。收费的甘特图功能一般在这放开。自定义修改gantt样式文件。弹窗表单----见汉化图例。local---本地汉化。gantt加载数据格式。gantt功能插件挂载。
Vue 中使用 Echarts 实现项目进度甘特图
热门推荐
tanqin的博客
10-16 1万+
Vue 中使用 Echarts 实现项目进度甘特图
vue个人任务管理怎么做
03-06
Vue个人任务管理可以通过以下步骤来实现： . 创建Vue项目：首先，你需要创建一个Vue项目。你可以使用Vue CLI来快速搭建一个本的Vue项目。 2. 设计任务数据结构：确定你的任务结构，例如任务的标题、描述、截止日期等。 . 创建任务组件：创建一个任务组件，用于展示单个任务的信息。在组件中，你可以使用Vue的数据绑定和计算属性来展示任务的各个属性。 4. 创建任务列表组件：创建一个任务列表组件，用于展示所有的任务。在该组件中，你可以使用Vue的v-for指令来遍历任务数组，并将每个任务传递给任务组件进行展示。 5. 添加任务功能：在任务列表组件中，你可以添加一个表单，用于输入新的任务信息。通过Vue的双向数据绑定，将表单中的数据与任务数组进行关联，并在提交表单时将新任务添加到数组中。 6. 完成任务功能：为每个任务添加一个完成按钮，并在点击按钮时更新任务的状态。你可以使用Vue的事件处理和条件渲染来实现这一功能。 7. 删除任务功能：为每个任务添加一个删除按钮，并在点击按钮时从任务数组中移除该任务。 8. 保存任务数据：为了保持任务数据的持久化，你可以使用浏览器的本地存储（如localStorage）或者后端服务器来保存任务数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是貔貅喔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值