基于jeecg-boot的任务甘特图显示

这篇具有很好参考价值的文章主要介绍了基于jeecg-boot的任务甘特图显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

更多功能看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888

基于项目的任务显示,最直观的就是甘特图显示,所以今天就说甘特图的显示

经过选择,最终选择dhtmlx-gantt组件,使用最新的8.0.3版本,当然这个组件就是一些高级功能需要付费。

1、后端代码

获取项目任务相关信息如下:

@Override
	public Result<?> taskGantt(Map<String, Object> mmap) {
		String projectId = MapUtils.getString(mmap, "projectId");
		List<Map> listStagesGantt = taskStagesMapper.selectTaskStagesGanttByProjectId(projectId);
		List<Map> listTasksGantt = baseMapper.selectTaskGanttByProjectId(projectId);
		if (!CollectionUtils.isEmpty(listStagesGantt)) {
			if (!CollectionUtils.isEmpty(listTasksGantt)) {
				for (Map stagesmap : listStagesGantt) {
					for (Map tasksmap : listTasksGantt) {
						if (ObjectUtils.isEmpty(tasksmap.get("parent"))) {
							tasksmap.replace("parent", stagesmap.get("id"));
						}
					}
				}
				Map<String, Object> tasksmap = new HashMap<String, Object>();
				listStagesGantt.addAll(listTasksGantt);
				tasksmap.put("data", listStagesGantt);
				return Result.OK(tasksmap);
			} else {
				Map<String, Object> tasksmap = new HashMap<String, Object>();
				tasksmap.put("data", listStagesGantt);
				return Result.OK(tasksmap);
			}

		} else {
			return Result.error("获取不到数据");
		}
	}

其中用到的两个sql如下,注意下面对日期做了格式转换:

 @Select("select id,name as text,null assign_to,null as start_date,null as end_date,sort,null parent from tw_task_stages where project_id = #{projectId} order by sort" )
    List<Map> selectTaskStagesGanttByProjectId(@Param("projectId") String  projectId);

@Select("select id,name as text,assign_to,DATE_FORMAT(begin_time,'%d-%m-%Y') as start_date,DATE_FORMAT(end_time,'%d-%m-%Y') as end_date, id_num as sort, pid as parent from tw_task where project_id = #{projectId} order by sort")
    List<Map> selectTaskGanttByProjectId(@Param("projectId") String  projectId);

2、前端代码

<template>
  <div class="project-space-gantt">
    <div class="project-navigation">
      <div class="project-nav-header">
        <a-breadcrumb>
          <a-breadcrumb-item>
            <a>
              <a-icon type="home" />
              首页
            </a>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <section class="nav-body">
        <ul class="nav-wrapper nav nav-underscore pull-left">
          <li><a class="app" data-app="tasks" @click="$router.push('/estar/teamwork/space/task/' + id)">任务</a></li>
          <li class="app"><a class="app" data-app="works" @click="$router.push('/estar/teamwork/space/files/' + id)">
              文件</a>
          <li><a class="app" data-app="build" @click="$router.push('/estar/teamwork/space/overview/' + id)">
              概览</a>
          </li>
          <li class=""><a class="app" data-app="build" @click="$router.push('/estar/teamwork/space/features/' + id)">
              版本</a>
          </li>
          <li class="actives"><a class="app" data-app="build"
              @click="$router.push('/estar/teamwork/space/gantt/' + id)">
              甘特图</a>
          </li>
        </ul>
      </section>
    </div>
    <wrapper-content :showHeader="false">
      <div class="content-wrapper">
        <div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
          <div ref="gantt" class="gantt-container" />
        </div>
      </div>
    </wrapper-content>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {
    getTasksGanttByProjectId
  } from "@/api/teamwork/task";
  import WrapperContent from '../components/WrapperContent'
  import '@/assets/tw/css/theme.less';
  import gantt from 'dhtmlx-gantt';
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

  export default {
    name: "project-space-gantt",
    components: {
      WrapperContent
    },
    data() {
      return {
        id: this.$route.params.id,
        loading: true,
        showLoading: false,
        loadingMore: false,
        //gantt高度
        ganttHeight: innerHeight - 50 + 'px',
        ganttLoading: false,
        projectId: '',
        tasksGantt: {
        },

      }
    },
    created() {
      //清空gantt数据
      gantt.clearAll();
      this.projectId = this.$route.params.id;
      this.getTasksGantt();
    },
    mounted() {
      var that = this;
      //本地化
      gantt.i18n.setLocale("cn");

      //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.autosize = false;
      //只读模式:打开后不可以操作甘特图
      gantt.config.readonly = false;
      //是否显示左侧树表格
      gantt.config.show_grid = true;
      //表格列设置:我们在后台获取数据后,会解析到这个表格列中,这里面会含有很多隐藏列,作用是甘特图中不需要看隐藏列,但当我们获取甘特图的任务时,这些隐藏列会跟随任务方便使用
      gantt.config.columns = [{
          //最左侧新增符号列,甘特图内置可选使用列
          name: 'add',
          label: '',
          width: '40'
        },
        {
          name: 'text',
          label: '任务名称',
          tree: true,
          width: '150'
        },
        {
          name: 'assign_to',
          label: '执行人',
          width: '100'
        },
        {
          name: 'start_date',
          label: '开始时间',
          align: 'center',
          width: '90'
        },
        {
          name: 'end_date',
          label: '结束时间',
          align: 'center',
          width: '90'
        }
      ];

      //自适应
      //gantt.config.fit_tasks = true;

      //开启提示:鼠标悬浮在gantt行上显示
      gantt.plugins({
        tooltip: true
      });

      gantt.attachEvent('onGanttReady', function() {
        var tooltips = gantt.ext.tooltips;
        gantt.templates.tooltip_text = function(start, end, task) {
          return '任务编号:' + task.id + '<br/>任务:' + task.text + '<br/>执行人:' +
            task.assign_to + '<br/>计划开始时间:' + gantt.templates.tooltip_date_format(start) + '<br/>结束时间:' + gantt
            .templates.tooltip_date_format(end);
        };
      });

      //禁用双击事件
      gantt.config.details_on_dblclick = false;
      //关闭所有错误提示信息:gantt有自己的异常消息,如果不关闭可能页面会弹出异常消息
      gantt.config.show_errors = false;

      //灯箱事件
      gantt.attachEvent('onBeforeLightbox', function(task_id) {
        //刷新灯箱数据
        //gantt.resetLightbox();
        //true:打开灯箱
        //return true;

        //这里调用了自己的页面,没有打开默认灯箱
        that.addTask(task_id);
      });

      //禁止拖动设置任务长度
      gantt.attachEvent('onBeforeTaskDrag', function(id, mode, e) {
        return false;
      });
      //禁止拖动任务
      gantt.config.drag_move = false;
      //禁止拖动任务进度
      gantt.config.drag_progress = false;
      //禁止拖放添加Link
      gantt.config.drag_links = false;

      //开启标记
      gantt.plugins({
        marker: true
      });

      //标记当前日期
      var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
      var markerId = gantt.addMarker({
        start_date: new Date(),
        css: 'today', //标记样式,style中对应
        text: 'Today',
        title: dateToStr(new Date())
      });
      gantt.getMarker(markerId);

      //设置 scale_unit 属性为 month,以显示月刻度
      gantt.config.scale_unit = "month";
      //设置 step 属性为 1,以每个月显示一个刻度
      gantt.config.step = 1;
      //设置 date_scale 属性为 %Y-%m-%d,以显示年月日格式的刻度
      gantt.config.date_scale = "%Y-%m-%d";
      //设置 scale_date 属性为 gantt.date.monthStart,以从每个月的第一天开始显示刻度。
      gantt.config.scale_date = gantt.date.monthStart;
      //表头高度
      gantt.config.scale_height = 60;
      
      gantt.config.scales = [
      	{unit: "month", format: "%F, %Y"},
      	{unit: "day", step: 1, format: "%j, %D"}
      ];
  
      //设置 subscale 属性为一个包含两个刻度的对象,分别为 day 和 week。
      gantt.config.subscales = [ // 配置时间
        {
          unit: "day",
          step: 1,
          date: "%j %D"
        },
      ];
      // 初始化
      gantt.init(this.$refs.gantt);
      //gantt.clearAll(); // 防止数据缓存问题
      //gantt.parse(tasks);
    },
    methods: {
      //获取甘特图数据
      
      getTasksGantt() {
        let that = this;
        getTasksGanttByProjectId({
          projectId: that.id
        }).then((res) => {
          console.log("getTasksGanttByProjectId res=", res);
          this.tasksGantt = res.result;
          // 数据解析:将数据解析到gantt列数据中
          gantt.parse(this.tasksGantt);
          // 刷新数据
          gantt.refreshData();
          this.ganttLoading = false;
        });
      },
      //自定义新增任务
      addTask(taskId) {
        var that = this;
        this.$nextTick(() => {
          that.$refs.taskAdd.init(task, action, parentTask, $this.milestoneOriginalData);
        });
        //删除任务:每次调用gantt内置新增事件时,gantt会直接新增任务到甘特图中,而我们需要的是自定义新增任务
        gantt.deleteTask(taskId);
        //灯箱事件必须返回布尔值,这里使用了自定义灯箱返回false,即不打开灯箱
        return false;
      }
    },
  }
</script>

<style lang="less">
  .project-space-gantt {

    .project-navigation {
      top: 0px;
      z-index: 4;
    }

    .layout-content {
      padding: 0px;
      width: 100%;
      margin: 0px 0px 0px;
      background: initial;

      .content-item {
        background: #fff;
        padding: 0px 0px 0px 0px;
        border-radius: 4px;
      }
    }

    .wrapper-main {
      padding: 24px 0 12px 0px;
      background: initial;
    }
  }

  .gantt-container {
    height: 100%;
    width: 100%;
  }

  .ganntClass {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
  }

  //今日标记样式
  .today {}
</style>

2、效果如下:

基于jeecg-boot的任务甘特图显示,jeecg-boot,java开发,前端vue,甘特图,vue.js,java文章来源地址https://www.toymoban.com/news/detail-604456.html

到了这里,关于基于jeecg-boot的任务甘特图显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Jeecg-Boot 低代码开发平台之路(一) —— 开始从零学起

    今天开始详细学习下 Jeecg-Boot 低代码开发平台,官方网站对该平台的介绍是如下。 JeecgBoot是一款基于BPM的低代码平台!前后端分离架构 SpringBoot 2.x,SpringCloud,Ant DesignVue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发! Jee

    2023年04月08日
    浏览(89)
  • 基于jeecg-boot的nbcio-boot亿事达企业管理平台发布

    目前这个演示系统与代码都同步,以后也尽量保持同步。 更多功能看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H5) : http://122.227.135.243:9888   这次主要更新增加的内容如下: 1、我的日历    

    2024年02月17日
    浏览(52)
  • Jeecg-Boot /jeecg-boot/jmreport/qurestSql接口sql注入漏洞复现

    一、Jeecg-Boot介绍 JeecgBoot 是一款基于代码生成器的 低代码开发平台 !前后端分离架构 SpringBoot2.x,SpringCloud,Ant DesignVue,Mybatis-plus,Shiro,JWT,支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding- 代码生成器

    2024年02月09日
    浏览(63)
  • 解决服务器报错java.nio.file.AccessDeniedException: /opt/jeecg-boot/upload

    文章长了点,着急解决问题的朋友可以直接看最后(三)。 这两天线上的项目的下载文件这一块出问题了,本地调试了一下,发现文件能正常下载,说明不是代码的问题。 看了一下服务器对应的报错日志,报如下错: java.nio.file.AccessDeniedException: /opt/jeecg-boot/upload 原因: 网上

    2024年02月05日
    浏览(35)
  • jeecg-boot微服务部署步骤详细说明

    大家好,我是小龙人。 通常小企业是如何成长起来的?接外包,然后将公司慢慢的养起来,最后开始研发自己的产品,产品上线,上市! 哈哈,可能有点理想化了,但是身边好多朋友都自己出去创业了,今儿个张三开了个公司,明儿个李四也注册了个公司,但是了解了下,

    2023年04月09日
    浏览(88)
  • Jeecg-Boot 集成Activiti 6 (含源码)

    本项目是2020 年集成的,采用的是当时版本的Jeecg-Boot,集成时请注意版本。 Jeecg-Boot 免费版没有工作流,于是我简单集成了一套,并且运用于公司项目中。 论坛中的Activiti 功能介绍,都来自该代码。 本项目中是多租户模式,如不需要多租户将想要接口中tenantId 赋值删除即可

    2024年02月16日
    浏览(59)
  • 详解 Jeecg-boot 框架如何配置 elasticsearch

    目录 一、下载安装 Elasticsearch 1、 地址:https://www.elastic.co/cn/downloads/elasticsearch 2、下载完成后,解压缩,进入config目录更改配置文件 3、 修改配置完成后,前往bin目录启动el 4、访问:localhost:9200 测试  二、配置 Jeecg-boot 框架 1、导入jeecg项目后,打开application-dev.yml配置文件,

    2024年01月17日
    浏览(49)
  • jeecg-boot批量导入问题注意事项

    由于批量导入数据速度很快, 因为数据库中的create time字段的时间可能一样,并且jeecg框架自带的是根据生成时间排序, 因此在前端翻页查询的时候,数据每次排序可能会不一样, 会出现第一页已经出现过一次的数据在第二页还会出现。 在后端的查询接口中,要在拼接一个

    2024年02月12日
    浏览(57)
  • Jeecg-Boot 未授权SQL注入漏洞(CVE-2023-1454)

    原创文章创作不易,个人博客charis3306.top  JDK: 1.8+ (小于11) Maven: 3.5+ MySql: 5.7+ Redis: 3.2 + Node Js: 10.0 + Npm: 5.6.0+ Yarn: 1.21.1+ 下载源码 后端源码 https://github.com/jeecgboot/jeecg-boot/tree/v3.5.0 前端源码 https://github.com/jeecgboot/jeecgboot-vue3 安装手册 http://doc.jeecg.com/2043871 下载完成后放在bc中。

    2024年02月05日
    浏览(46)
  • 【vue】vue中Mixins的用法(jeecg-boot为例):

    一、jeecg-boot本身只有JeecgListMixin.js Mixin是为将页面的一些 公共方法 放在一起处理(节省重复性代码,方便维护) 优先级: 页面里面的方法 Mixin里面的方法=》所以维护时要注意查找 二、使用Mixin: 注意: 这里import 导入的js文件,要在js文件里面有导出 三、mixins详解: 【1】由

    2024年02月14日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包