GanttElastic的使⽤
<template>
<!--<q-page class="q-pa-sm">-->
<div v-if="tasks.length > 0">
<gantt-elastic
:options="options"
:tasks="tasks"
@tasks-changed="tasksUpdate"
@options-changed="optionsUpdate"
@dynamic-style-changed="styleUpdate"
>
<gantt-header class="gantt":options="options" slot="header"
>13224437</gantt-header
>
</gantt-elastic>
<!--任务详细信息模态框-->
<el-dialog
:title="taskName"
width="870px"
:visible.sync="taskInfoDialogFormVisible"
@clod="reloadGantInfo"
:clo-on-click-modal="fal"
>
<TaskDetailDialog :taskId="taskId"></TaskDetailDialog>
</el-dialog>
</div>
</template>
<style>
</style>
<script>
import TaskDetailDialog from"@/common/TaskDetailDialog";
import GanttElastic from"gantt-elastic";
import GanttHeader from"gantt-elastic-header";
import dayjs from"dayjs";
// just helper to get current dates
function getDate(hours){
msq
const currentDate =new Date();
const currentYear = FullYear();
const currentMonth = Month();
const currentDay = Date();
const timeStamp =new Date(
currentYear,
currentMonth,
currentDay,
0,
0,
).getTime();
var date =new Date(timeStamp + hours *60*60*1000).getTime();
// console.log(date);
return new Date(timeStamp + hours *60*60*1000).getTime();
}
会计从业资格考试书
var vue_lf ="";
function getVueSelf(data){
//得到vue中this
vue_lf = data;
kuroshitsuji
/
/ console.log("vue_lf", vue_lf);
}
let options ={
progress:"percent",
},
maxRows:100,
// maxHeight: 480,
title:{
label:"Your project title as html (link )",
html:fal,
},
times:{esl下载
//设置时间尺度timeZoom: 20,//设置右侧⽢特图进度的列宽 timeZoom:21,
// timeZoom: 20,
// timeScale: 60 * 1000,
},
scope:{
before:10,
after:10,
},
row:{
height:24,
},
calendar:{
hour:{
display:fal,
},
},
chart:{
progress:{
bar:fal,
},
expander:{
display:true,
},
},
title:{
label:"任务视⾓",
html:fal,
},
taskList:{
expander:{
straight:fal,
},
columns:[
// {
// id: 1,
i am down// label: "ID",unexpected
// value: "id",
// width: 40,
// },
{
id:2,
label:"名称",
value:"label",
width:180,
expander:true,
html:true,
events:{
click({ data, column }){
if(data.parent){
vue_lf.taskInfoDialogFormVisible =true;
vue_lf.taskId = data.id;
vue_lf.taskName = data.label;
},
{
id:3,
六级及格线label:"负责⼈",
value:"ur",
width:60,
html:true,
},
{
id:3,
label:"Start",
value:(task)=>dayjs(task.start).format("YYYY-MM-DD"),
width:80,
},
{
id:4,
label:"End",
value:(task)=>
},
// {
// id: 4,
// label: "Type",
// value: "type",
/
/ width: 68,
// },
// {
// id: 5,
// label: "%",
// value: "progress",
// width: 35,
// style: {
// "task-list-header-label": {
// "text-align": "center",
// width: "100%",
/
/ },
// "task-list-item-value-container": {
// "text-align": "center",
// width: "100%",
// },
// },
// },
],
},
locale:{
name:"en",
Now:"当前时间",
"X-Scale":"宽",
"Y-Scale":"⾼",
"Task list width":"列头宽度",
"Before/After":"时间跨度",
"Display task list":"显⽰列头",
weekdays:["周⽇","周⼀","周⼆","周三","周四","周五","周六"],
months:[
"⼀⽉",
"⼆⽉",
"三⽉",
"四⽉",
"五⽉",
"六⽉",
"七⽉",
"⼗⼀⽉",
"⼗⼆⽉",
],
},
};
export default{
name:"Gantt",
components:{
GanttElastic,
GanttHeader,
TaskDetailDialog,
},
// props: {
// theTask: Array,
// },
inject:["reload"],
data(){
return{2014考研
dateArr:[],
//任务详细信息模态框的显⽰
taskInfoDialogFormVisible:fal, options,
dynamicStyle:{},
lastId:16,
tasks:[
{
duration:604800000,
start:1605196800000,
style:{
ba:{
fill:"#6E86D6",
stroke:"#5FA1E0",
},
},
end:1605715200000,
label:"已完成",
id:171,
type:"milestone",
ur:" ",
percent:0,
},
{
duration:518400000,
start:1605196800000,
style:{
ba:{
fill:"#54B3E8",
stroke:"#48C5EE",
},
},
end:1605628800000,
id:10000283,
label:"修改易拉宝设计",
type:"milestone",
重庆外语培训
ur:"蔡素妮",
percent:0,
parentId:171,
},
{
duration:604800000,
start:1605196800000,
fill:"#54B3E8",
stroke:"#48C5EE",
},
},
end:1605715200000, id:10000284,
label:"ppt内容修改制作", type:"milestone",
ur:"蔡素妮",
percent:0,
parentId:171,
},
{
duration:604800000,
start:1605196800000, style:{
ba:{
fill:"#6E86D6",
stroke:"#5FA1E0",
},
},
end:1605715200000, label:"已完成",
id:"z-172",
卖咖啡type:"milestone",
ur:" ",
percent:0,
},
{
duration:518400000,
start:1605196800000, style:{
ba:{
fill:"#54B3E8",
stroke:"#48C5EE",
},
},
end:1605628800000, id:"10000287",
label:"修改易拉宝设计", type:"milestone",
ur:"蔡素妮",
percent:0,
parentId:"z-172",
},
{
duration:604800000,
start:1605196800000, style:{
ba:{
fill:"#54B3E8",
stroke:"#48C5EE",
},
},
end:1605715200000, id:10000289,
label:"ppt内容修改制作", type:"milestone",
ur:"蔡素妮",
percent:0,
parentId:"z-172",
},
],
