HTML中使用Vue+Dhtmlxgantt制作任务进度图

Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/

参考文章

甘特图配置大佬翻译的官方文档 ,https://blog.csdn.net/qq_24472595/article/details/81630117;
实现搜索 新增 编辑 删除 设置具体时间格式 突出周末显示https://blog.csdn.net/CX_silent/article/details/83589451
从0开始使用Dhtmlxgantt https://blog.csdn.net/honantic/article/details/51314672 ;
代码部分

HTML部分:

       //需要引用dhtmlxgantt.css、dhtmlxgantt.js、locale_cn.js(汉化文件)
<div>
<div id="gantt_here" style='width:100%; height:550px;' ref="gantt"></div>
</div>

js部分:

 $(function () {
window.App = new Vue({
el: "#app",
data: function () {
return {
tasks: {
data: []
}
}
};
},
methods: {
QueryClick: function () {
var that = this;
//每次点击查询前清空
that.InitData();
that.Ajax({
url: "/JHProcess/GetProcessContrast",//从后台读取数据
data: {
XXXX//后台查询条件
},
success: function (result) {
var data = result.Data.Data;
var arry = [];
for (var i = 0; i < data.length; i++) {
var current = data[i];
arry.push({
text: current.名称,
start_date: new Date(current.开始时间),
end_date: new Date(current.结束时间),
duration: that.DateDifference(current.开始时间, current.结束时间),
progress: Number((current.计划进度 / current.本年投资计划完成).toFixed(2))
});
}
that.tasks.data = arry;
that.Init(); //加载数据之后初始化
}
});
},
weekScaleTemplate: function (date) {
var dateToStr = gantt.date.date_to_str("%d%M");
var weekNum = gantt.date.date_to_str("(周%W)");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), - 1, "day");
return dateToStr(date) + " - " + dateToStr(endDate) + "" + weekNum(date);
},
DateDifference: function (strDateStart, strDateEnd) {
var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, "/"))); //begintime 为开始时间
var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, "/"))); // endtime 为结束时间
var date3 = endtime_ms - begintime_ms; //时间差的毫秒数
var days = Math.floor(date3 / (24 * 3600 * 1000));
return days;
},
Init: function () {
var that = this;
gantt.config.scale_unit = "month"; //时间坐标轴单位“minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
gantt.config.date_scale = "%d,%D";//日期格式 先数字后文字
gantt.config.row_height = 30; //甘特图的行高
gantt.config.scale_height = 20;//甘特图的表头高度
gantt.config.scroll_on_click = false;
gantt.config.min_column_width = 60;
gantt.config.duration_unit = "day";
gantt.config.scale_height = 20 * 3;
//gantt.config.row_height = 28;
gantt.config.drag_resize = false;//两边不可拖动
gantt.config.readonly = true;//只读模式
gantt.config.subscales = [{ //时间坐标为月份的时候 先显示年份再月份
unit: "month",
step: 1,
date: "%Y,%F"
}];
//配置显示列 //name:绑定数据的名称 align:对其方式 label显示在表头的名称
gantt.config.columns = [
{ name: "text", tree: true, width: '*', align: "center", label: "计划名称", resize: true },
{ name: "start_date", align: "center", resize: true },
{ name: "end_date", align: "center", label: "结束时间", resize: true },
{ name: "duration", align: "center" }
];
//显示到进度条上的文本 计划名称和任务进度百分比
gantt.templates.task_text = function (start, end, task) {
return "<b style='text-align:left;'>计划名称:</b> " + task.text +" <span style='text-align:left;'>" +"完成计划:"+ Math.round(task.progress * 100) + "% </span>";
};
gantt.init(that.$refs.gantt); gantt.parse(that.tasks);
},
InitData: function () {
//清空数据
gantt.clearAll();
}
},
mounted() {
var that = this;
that.Ajax = top.Helper.Current.Ajax;
//注入一个用户信息
that.User = top.Helper.Current.User;
console.log(that.$refs.gantt);
that.SizeChange = function () {
var that = this;
var h = $("#app").height();
if (that.WindowSize != h) {
that.WindowSize = (h - 135);
console.log(that.WindowSize);
}
};
gantt.config.min_column_width = 60;
gantt.config.scale_height = 20 * 3;
gantt.config.subscales = [{
unit: "month",
step: 1,
date: "%Y,%F"
}];
//配置显示列 //name:绑定数据的名称 align:对其方式 label显示在表头的名称
gantt.config.columns = [
{ name: "text", tree: true, width: '*', align: "center", label: "计划名称", resize: true },
{ name: "start_date", align: "center", resize: true },
{ name: "end_date", align: "center", label: "结束时间", resize: true },
{ name: "duration", align: "center" }
];
gantt.init(that.$refs.gantt);
}
});
});

HTML中使用Vue+Dhtmlxgantt制作任务进度图的更多相关文章

  1. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  2. webstorm中关于vue的一些问题

    在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...

  3. 在pycharm中开发vue

    一.在pycharm中开发vue ''' webstorm(vue) pycharm(python) goland(Go语言) idea(java) andrioStuidio(安卓) Php(PHP ...

  4. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  5. 在webpack构建的项目中使用vue

    一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpa ...

  6. django项目中使用项目环境制作脚本 通过终端命令运行脚本文件

    在实际的django项目开发中,有时候需要制作一些脚本文件对项目数据进行处理,然后通过终端命令运行脚本. 完整的实现流程如下: 1.在一个应用目录下(app, 必须是在应用目录下,可以专门创建一个应用 ...

  7. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  8. IDEA 中使用 Vue 提示 namespace is not bound

    今天在 IDEA 中使用 vue.js 时提示我如下错误信息 解决方法: 把这个校验项目去掉就可以了.

  9. webstorn中的vue文件识别es6代码

    webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...

随机推荐

  1. #干货#小微信贷风控中类IPC模式和集中审批模式

    浅析小微信贷风控中类IPC模式和集中审批模式 席占斌 常言道瑕不掩瑜,反过来讲瑜自然也不能掩瑕,看问题需要客观公正辩证. 在小微信贷中,风控模式依旧是核心,目前比较流行和占比较大的风控模式有很经典的I ...

  2. Bishops Alliance—— 最大上升子序列

    原题链接:http://codeforces.com/gym/101147/problem/F 题意:n*n的棋盘,给m个主教的坐标及其私有距离p,以及常数C,求位于同一对角线上满足条件:dist(i ...

  3. QuartusII 13.0的完美破解

    网络上破解QuartusII 13.0软件的方法都不行,最后经过本人总结测试(独创),最终实现了QuartusII 13.0的破解,破解方法如下: 网上常规操作之后,会得到一个“license.dat ...

  4. zeppelin开启多个

    conf/zeppelin-env.sh 添加行: export ZEPPELIN_PID_DIR=/xx/zeppelin/run_2

  5. 【u201】矩形覆盖

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有N个矩形,矩形的底边边长为1,且均在X轴上,高度给出,第i个矩形的高为h[i],例如h = [3, ...

  6. 2019牛客暑期多校训练营(第八场)E.Explorer

    链接:https://ac.nowcoder.com/acm/contest/888/E来源:牛客网 Gromah and LZR have entered the fifth level. Unli ...

  7. koa2入门--09.art-template高速模板引擎的使用

    首先在项目文件夹下使用 cmd,输入:npm install --save art-template koa-template art-template语法参考:http://aui.github.i ...

  8. ASP.NET WebForm Identity使用

    环境 win10企业版x64+visual studio 2017+.net 4.5 step1 基本使用+邮件确认+密码重置 https://docs.microsoft.com/en-us/asp ...

  9. LeetCode150_Evaluate Reverse Polish Notation评估逆波兰表达式(栈相关问题)

    题目: Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are+, ...

  10. linux c函数参考手册

    一.字符测试 isalnum(测试字符是否为英文字母或数字) isalpha(测试字符是否为英文字母) isascii(测试字符是否为ascii码字符) isblank(测试字符是否为空格字符) is ...