Skip to content

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

加上基线

parent e5c5c4f3
Show whitespace changes
Inline Side-by-side
Showing with 120 additions and 47 deletions
index.html
View file @ 76c842c6
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title>gantt-project</title>
</head> </head>
<body> <body>
......
src/components/GanttChart/gantt-chart.vue
View file @ 76c842c6
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
</template> </template>
<script> <script>
import moment from 'moment' import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip' import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip'
import GanttModal from './gantt-modal' import GanttModal from './gantt-modal'
import './locale_cn' import './locale_cn'
...@@ -60,7 +59,13 @@ export default { ...@@ -60,7 +59,13 @@ export default {
} }
}) })
this.setHolidays() 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) gantt.init(this.$refs.gantt)
this.addBaseline()
gantt.parse(this.tasks) gantt.parse(this.tasks)
}, },
reset(config = {}){ reset(config = {}){
...@@ -69,16 +74,36 @@ export default { ...@@ -69,16 +74,36 @@ export default {
} }
gantt.config.columns = config.columns || this.columns gantt.config.columns = config.columns || this.columns
gantt.init(this.$refs.gantt) gantt.init(this.$refs.gantt)
this.addBaseline()
gantt.parse(this.tasks) gantt.parse(this.tasks)
gantt.render() 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}) { handleSave({id, text, name, date}) {
let task = gantt.getTask(id) let task = gantt.getTask(id)
task = Object.assign(task, { task = Object.assign(task, {
name, name,
text, text,
start_date: new Date(moment(date[0])), start_date: gantt.date.parseDate(date[0], 'xml_date'),
end_date: new Date(moment(date[1])), end_date: gantt.date.parseDate(date[1], 'xml_date'),
}) })
if(task.$new) { if(task.$new) {
delete task.$new delete task.$new
...@@ -127,7 +152,7 @@ export default { ...@@ -127,7 +152,7 @@ export default {
gantt.setWorkTime({date: date, hours: false}) gantt.setWorkTime({date: date, hours: false})
}) })
}, },
} },
} }
</script> </script>
...@@ -139,6 +164,17 @@ export default { ...@@ -139,6 +164,17 @@ export default {
.gantt_selected .weekend { .gantt_selected .weekend {
background: #f7eb91; 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>
<style scoped> <style scoped>
.container { .container {
......
src/components/GanttChart/gantt-config.js
View file @ 76c842c6
...@@ -16,22 +16,30 @@ export const config = { ...@@ -16,22 +16,30 @@ export const config = {
} }
export const template = { export const template = {
task_text: (start, end, task) => { task_text: (start, end, task) => { // 柱上加进度百分比
return Math.round(task.progress * 100) + '%' return Math.round(task.progress * 100) + '%'
}, },
tooltip_text: (start, end, task) => { tooltip_text: (start, end, task) => { // 浮框
return ` return `
<b>任务名：${task.text}</b><br/> <b>任务名：${task.text}</b><br/>
<b>姓名：${task.name}</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.start_date)}</b><br/>
<b>结束时间：${gantt.templates.tooltip_date_format(task.end_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/> <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})) { if (!gantt.isWorkTime({task, date})) {
return 'weekend' 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 { ...@@ -73,7 +73,7 @@ export default {
computed: { computed: {
title() { title() {
const {text, name} = this.task const {text, name} = this.task
return `${text} ${name}` return `${text || ''} ${name || ''}`
}, },
model() { model() {
const task = {...this.task} const task = {...this.task}
......
src/components/login.vue
View file @ 76c842c6
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<ActiveForm :layout="layout" :model="model" ref="form" :label-width="90"> <ActiveForm :layout="layout" :model="model" ref="form" :label-width="90">
<h2 class="login-title" slot="title">登录</h2> <h2 class="login-title" slot="title">登录</h2>
<div class="login-btn"> <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> </div>
</ActiveForm> </ActiveForm>
</div> </div>
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
bottom: 0; bottom: 0;
right: 0; right: 0;
overflow: hidden; overflow: hidden;
background-color: #fff; background: linear-gradient(45deg, black, transparent);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
......
src/components/main.vue
View file @ 76c842c6
...@@ -47,14 +47,10 @@ export default { ...@@ -47,14 +47,10 @@ export default {
this.info = this.$com.confirm(res, 'data.content', {}) this.info = this.$com.confirm(res, 'data.content', {})
}) })
}, },
getData(key = '1', id = '329795521284190208') { formatDataBaseOnPerson(data) { // 转换人员数据用
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 = [] const result = []
data.forEach(item => { data.forEach(item => {
// TODO 这里把没有任务的人员去掉了，看以后需不需要
if (item.task && item.task.length > 0) { if (item.task && item.task.length > 0) {
result.push({ result.push({
name: item.resource || '', name: item.resource || '',
...@@ -78,7 +74,26 @@ export default { ...@@ -78,7 +74,26 @@ export default {
}) })
} }
}) })
this.tasks.data = result return result
},
getData(key = '1', id = '329795521284190208') {
if (key == '2') {
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
})
const columns = [ const columns = [
{name:'name', label:'人员', tree: true, align: 'left', max_width: 200}, {name:'name', label:'人员', tree: true, align: 'left', max_width: 200},
{name:'text', label:'任务名', align: 'center'}, {name:'text', label:'任务名', align: 'center'},
...@@ -91,12 +106,15 @@ export default { ...@@ -91,12 +106,15 @@ export default {
}) })
return return
} }
this.$ajax.get({ this.$ajax.all(
url: this.$api.GET_PLAN.replace('{id}', id) this.$ajax.get({url: this.$api.GET_PLAN.replace('{id}', id)}),
}).then(res => { this.$ajax.get({url: this.$api.GET_BASELINE.replace('{planId}', id)})
const data = this.$com.confirm(res, 'data.content', []) ).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 => { this.tasks.data = data.map(item => {
return { const plan = baseData.find(base => base.id === item.id)
const result = {
id: item.tid, id: item.tid,
dataId: item.id, dataId: item.id,
name: item.resource || '', name: item.resource || '',
...@@ -104,8 +122,13 @@ export default { ...@@ -104,8 +122,13 @@ export default {
start_date: this.$com.formatDate(item.start), start_date: this.$com.formatDate(item.start),
end_date: this.$com.formatDate(item.finish), end_date: this.$com.formatDate(item.finish),
progress: item.speed ? Number(item.speed) : 0, 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() this.$refs.gantt.reset()
}) })
...@@ -143,6 +166,10 @@ export default { ...@@ -143,6 +166,10 @@ export default {
margin-bottom: 1px; margin-bottom: 1px;
padding: 0 16px; padding: 0 16px;
} }
.gantt_task_line.gantt_bar_task.gantt_split_parent {
background-color: #000;
color: #000;
}
</style> </style>
<style scoped> <style scoped>
.main { .main {
......
src/server/api.js
View file @ 76c842c6
let BASE_URL = '' let BASE_URL = ''
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case 'production': case 'production':
BASE_URL = '' BASE_URL = 'http://plan.omniview.pro'
break break
default: default:
BASE_URL = 'http://47.100.45.230:30000/mock/277' BASE_URL = 'http://47.100.45.230:30000/mock/277'
...@@ -15,4 +15,5 @@ export default { ...@@ -15,4 +15,5 @@ export default {
GET_PLAN: '/plan/{id}/format', GET_PLAN: '/plan/{id}/format',
GET_PLAN_BY_PERSON: '/plan/{id}/resource', GET_PLAN_BY_PERSON: '/plan/{id}/resource',
POST_SPEED: '/plan/{id}/speed', 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