Skip to content

G
gantt-project
Commit 76c842c6 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

加上基线

parent e5c5c4f3
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 47 deletions
index.html
View file @ 76c842c6
......@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>gantt-project</title>
</head>
<body>
......
src/components/GanttChart/gantt-chart.vue
View file @ 76c842c6
......@@ -7,8 +7,7 @@
</template>
<script>
import moment from 'moment'
import 'dhtmlx-gantt'
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip'
import GanttModal from './gantt-modal'
import './locale_cn'
......@@ -60,7 +59,13 @@ export default {
}
})
this.setHolidays()
gantt.attachEvent('onTaskLoading', function (task) {
task.planned_start = gantt.date.parseDate(task.planned_start, 'xml_date')
task.planned_end = gantt.date.parseDate(task.planned_end, 'xml_date')
return true
})
gantt.init(this.$refs.gantt)
this.addBaseline()
gantt.parse(this.tasks)
},
reset(config = {}){
......@@ -69,16 +74,36 @@ export default {
}
gantt.config.columns = config.columns || this.columns
gantt.init(this.$refs.gantt)
this.addBaseline()
gantt.parse(this.tasks)
gantt.render()
},
addBaseline() { // 添加基线
gantt.addTaskLayer({
renderer: {
render: function draw_planned(task) {
if (task.planned_start && task.planned_end) {
const sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end)
const el = document.createElement('div')
el.className = 'baseline'
el.style.left = sizes.left + 'px'
el.style.width = sizes.width + 'px'
el.style.height = sizes.height + 'px'
el.style.top = (sizes.top + 9) + 'px'
return el
}
return false
},
}
})
},
handleSave({id, text, name, date}) {
let task = gantt.getTask(id)
task = Object.assign(task, {
name,
text,
start_date: new Date(moment(date[0])),
end_date: new Date(moment(date[1])),
start_date: gantt.date.parseDate(date[0], 'xml_date'),
end_date: gantt.date.parseDate(date[1], 'xml_date'),
})
if(task.$new) {
delete task.$new
......@@ -127,7 +152,7 @@ export default {
gantt.setWorkTime({date: date, hours: false})
})
},
}
},
}
</script>
......@@ -139,6 +164,17 @@ export default {
.gantt_selected .weekend {
background: #f7eb91;
}
.baseline {
position: absolute;
border-radius: 2px;
opacity: 0.6;
margin-top: -7px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.3);
}
.gantt_side_content.gantt_left {
padding-right: 10px;
}
</style>
<style scoped>
.container {
......
src/components/GanttChart/gantt-config.js
View file @ 76c842c6
......@@ -16,22 +16,30 @@ export const config = {
}
export const template = {
task_text: (start, end, task) => {
task_text: (start, end, task) => { // 柱上加进度百分比
return Math.round(task.progress * 100) + '%'
},
tooltip_text: (start, end, task) => {
tooltip_text: (start, end, task) => { // 浮框
return `
<b>任务名：${task.text}</b><br/>
<b>姓名：${task.name}</b><br/>
<b>开始时间：${gantt.templates.tooltip_date_format(task.start_date)}</b><br/>
<b>结束时间：${gantt.templates.tooltip_date_format(task.end_date)}</b><br/>
<b>周期：${task.duration}</b><br/>
<b>周期：${task.duration}天</b><br/>
<b>当前进度：${Math.round(100 * task.progress)}%</b><br/>
${template.leftside_text(start, end, task)}
`
},
timeline_cell_class: (task, date) => {
timeline_cell_class: (task, date) => { // 给周末加上classname
if (!gantt.isWorkTime({task, date})) {
return 'weekend'
}
},
leftside_text: (start, end, task) => { // 柱左边显示推迟时间
if (task.planned_start && start.getTime() > task.planned_start.getTime()) {
const overdue = Math.ceil(Math.abs((start.getTime() - task.planned_start.getTime()) / (24 * 60 * 60 * 1000)))
return `<b>推迟：${overdue}天</b>`
}
return ''
},
}
src/components/GanttChart/gantt-modal.vue
View file @ 76c842c6
......@@ -73,7 +73,7 @@ export default {
computed: {
title() {
const {text, name} = this.task
return `${text} ${name}`
return `${text || ''} ${name || ''}`
},
model() {
const task = {...this.task}
......
src/components/login.vue
View file @ 76c842c6
......@@ -5,7 +5,7 @@
<ActiveForm :layout="layout" :model="model" ref="form" :label-width="90">
<h2 class="login-title" slot="title">登录</h2>
<div class="login-btn">
<a-button @click="handleLogin" type="primary" block>登录</a-button>
<a-button html-type="submit" @click="handleLogin" type="primary" block>登录</a-button>
</div>
</ActiveForm>
</div>
......@@ -78,7 +78,7 @@ export default {
bottom: 0;
right: 0;
overflow: hidden;
background-color: #fff;
background: linear-gradient(45deg, black, transparent);
display: flex;
align-items: center;
justify-content: center;
......
src/components/main.vue
View file @ 76c842c6
......@@ -47,38 +47,53 @@ export default {
this.info = this.$com.confirm(res, 'data.content', {})
})
},
formatDataBaseOnPerson(data) { // 转换人员数据用
const result = []
data.forEach(item => {
// TODO 这里把没有任务的人员去掉了，看以后需不需要
if (item.task && item.task.length > 0) {
result.push({
name: item.resource || '',
id: item.id,
dataId: item.id,
text: '',
start_date: null,
end_date: null,
})
item.task.forEach(task => {
result.push({
id: task.tid,
dataId: task.id,
name: item.resource || '',
text: task.name || '',
start_date: this.$com.formatDate(task.start),
end_date: this.$com.formatDate(task.finish),
progress: task.speed ? Number(task.speed) : 0,
parent: item.id,
})
})
}
})
return result
},
getData(key = '1', id = '329795521284190208') {
if (key == '2') {
this.$ajax.get({
url: this.$api.GET_PLAN_BY_PERSON.replace('{id}', id),
}).then(res => {
const data = this.$com.confirm(res, 'data.content', [])
const result = []
data.forEach(item => {
if (item.task && item.task.length > 0) {
result.push({
name: item.resource || '',
id: item.id,
dataId: item.id,
text: '',
start_date: null,
end_date: null,
})
item.task.forEach(task => {
result.push({
id: task.tid,
dataId: task.id,
name: item.resource || '',
text: task.name || '',
start_date: this.$com.formatDate(task.start),
end_date: this.$com.formatDate(task.finish),
progress: task.speed ? Number(task.speed) : 0,
parent: item.id,
})
})
this.$ajax.all(
this.$ajax.get({url: this.$api.GET_PLAN_BY_PERSON.replace('{id}', id)}),
this.$ajax.get({url: this.$api.GET_BASELINE.replace('{planId}', id)})
).then(res => {
const data = this.$com.confirm(res[0], 'data.content', [])
const baseData = this.$com.confirm(res[1], 'data.content.content2', [])
const dataList = this.formatDataBaseOnPerson(data)
const baseList = this.formatDataBaseOnPerson(baseData)
this.tasks.data = dataList.map(item => {
const plan = baseList.find(base => base.id === item.id)
if (plan && plan.start_date && plan.end_date) {
item.planned_start = this.$com.formatDate(plan.start_date)
item.planned_end = this.$com.formatDate(plan.end_date)
}
return item
})
this.tasks.data = result
const columns = [
{name:'name', label:'人员', tree: true, align: 'left', max_width: 200},
{name:'text', label:'任务名', align: 'center'},
......@@ -91,12 +106,15 @@ export default {
})
return
}
this.$ajax.get({
url: this.$api.GET_PLAN.replace('{id}', id)
}).then(res => {
const data = this.$com.confirm(res, 'data.content', [])
this.$ajax.all(
this.$ajax.get({url: this.$api.GET_PLAN.replace('{id}', id)}),
this.$ajax.get({url: this.$api.GET_BASELINE.replace('{planId}', id)})
).then(res => {
const data = this.$com.confirm(res[0], 'data.content', [])
const baseData = this.$com.confirm(res[1], 'data.content.content1', [])
this.tasks.data = data.map(item => {
return {
const plan = baseData.find(base => base.id === item.id)
const result = {
id: item.tid,
dataId: item.id,
name: item.resource || '',
......@@ -104,8 +122,13 @@ export default {
start_date: this.$com.formatDate(item.start),
end_date: this.$com.formatDate(item.finish),
progress: item.speed ? Number(item.speed) : 0,
parent: item.fid == '0' ? null : item.fid
parent: item.fid,
}
if (plan && plan.start && plan.finish) {
result.planned_start = this.$com.formatDate(plan.start)
result.planned_end = this.$com.formatDate(plan.finish)
}
return result
})
this.$refs.gantt.reset()
})
......@@ -143,6 +166,10 @@ export default {
margin-bottom: 1px;
padding: 0 16px;
}
.gantt_task_line.gantt_bar_task.gantt_split_parent {
background-color: #000;
color: #000;
}
</style>
<style scoped>
.main {
......
src/server/api.js
View file @ 76c842c6
let BASE_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
BASE_URL = ''
BASE_URL = 'http://plan.omniview.pro'
break
default:
BASE_URL = 'http://47.100.45.230:30000/mock/277'
......@@ -15,4 +15,5 @@ export default {
GET_PLAN: '/plan/{id}/format',
GET_PLAN_BY_PERSON: '/plan/{id}/resource',
POST_SPEED: '/plan/{id}/speed',
GET_BASELINE: '/baseline/{planId}',
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment