Commit 888e2870 authored by arvin's avatar arvin

甘特图调试

parent 4b8e5378
......@@ -17,9 +17,9 @@
import { getWFInsts, instDetail } from '@/api/workflow'
export default {
name: 'DxDocumentProcessHistory',
displayName: '流程历史记录',
modelRelationObjs: ['DxDocument', 'DxPart', 'DxBaseline', 'DxAbstractChangeIssue',
'DxChangeItem', 'DxProcessExecutor', 'ExtECM', 'DxCADDocument'],
// displayName: '流程历史记录',
// modelRelationObjs: ['DxDocument', 'DxPart', 'DxBaseline', 'DxAbstractChangeIssue',
// 'DxChangeItem', 'DxProcessExecutor', 'ExtECM', 'DxCADDocument'],
props: {
basicData: {
type: Object,
......
export default {
data() {
return {
// eslint-disable-next-line no-undef
gantt: Gantt.getGanttInstance()
}
},
mounted() {
......@@ -10,51 +9,21 @@ export default {
},
methods: {
initGantt() {
this.gantt.init(this.ganttElId)
this.setColumnsConfig()
this.setScaleConfig(this.type)
this.configLayout()
this.gantt.init(this.ganttElId)
this.gantt.i18n.setLocale('cn')
},
setColumnsConfig() {
this.gantt.config.columns = this.columns
},
configLayout() {
this.gantt.config.layout = {
css: 'gantt_container',
rows: [
{
cols: [
{ view: 'grid', id: 'grid', scrollX: 'scrollHor', scrollY: 'scrollVer' },
{ resizer: true, width: 2 },
{ view: 'timeline', id: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
{ view: 'scrollbar', scroll: 'y', id: 'scrollVer' }
]
},
{ view: 'scrollbar', scroll: 'x', id: 'scrollHor', height: 20 }
]
}
},
setScaleConfig(type) {
if (type === 'month-week') {
var weekScaleTemplate = function(date) {
var dateToStr = this.gantt.date.date_to_str('%d %M')
var endDate = this.gantt.date.add(this.gantt.date.add(date, 1, 'week'), -1, 'day')
return dateToStr(date) + ' - ' + dateToStr(endDate)
}
this.gantt.config.scales = [
{ unit: 'month', step: 1, format: '%M月' },
{ unit: 'week', step: 1, format: weekScaleTemplate }
]
this.gantt.config.scale_height = 50
return
}
},
usePlugins() {
this.gantt.plugins({
drag_timeline: true, // 整体拖拽时间线
fullscreen: true, // 全屏模式,
tooltip: true
tooltip: true,
critical_path: true,
auto_scheduling: true
})
}
......
......@@ -36,7 +36,7 @@ export default {
search() {
},
import() {
export() {
},
save() {
......
......@@ -49,7 +49,7 @@ export default {
icon: '/icons/c-export.png',
handler: {
click: () => {
this.import()
this.export()
}
}
}]
......
......@@ -5,7 +5,6 @@
</template>
<script>
import moment from 'moment'
import config from './config'
import data from './data'
export default {
......@@ -23,6 +22,8 @@ export default {
},
data() {
return {
// eslint-disable-next-line no-undef
gantt: Gantt.getGanttInstance(),
ganttElId: 'unit-gantt',
type: 'month-week',
ganttData: [],
......@@ -34,10 +35,22 @@ export default {
computed: {
columns() {
return [
{ name: 'ganttId', label: '节点', width: 60, align: 'center', resize: true },
{ name: 'index', label: '节点', width: 60, align: 'center', resize: true },
{ name: 'text', label: '站位号', width: 160, align: 'center', resize: true },
{ name: 'duration', label: '工期(天)', width: 100, align: 'center', resize: true },
{ name: 'prevIndex', label: '前置', width: 150, align: 'center', resize: true, editor: { type: 'date', map_to: 'start_date' }}
{ name: 'duration', label: '工期(天)', width: 100, align: 'center', resize: true, editor: { type: 'number', map_to: 'duration', min: 0, max: 100 }},
{ name: '', label: '前置', width: 150, align: 'center', resize: true, template: (task) => {
var links = task.$target
var labels = []
for (var i = 0; i < links.length; i++) {
var link = this.gantt.getLink(links[i])
const label = this.gantt.getTask(link.source).index
if (!labels.includes(label)) {
labels.push(label)
}
}
return '<span>' + labels.join(',') + '</span>'
}
}
]
}
},
......@@ -56,25 +69,24 @@ export default {
links: []
}
val.forEach((item, index) => {
const link = item.extProcessExecutorRoutes && item.extProcessExecutorRoutes[0]
params.data.push({
ganttId: index + 1,
index: index + 1,
text: item.serialNumber,
rowId: item.id,
prevIndex: '',
start_date: new Date(item.createTime), // moment(item.createTime).format('DD-MM-yyyy'),
id: item.id,
parenId: link && link.prevNodeId || '',
start_date: '2007-1-1',
duration: item.workHour ? (item.workHour / 8) : 0
})
})
val.forEach((item) => {
if (item.extProcessExecutorRoutes && item.extProcessExecutorRoutes[0]) {
const ganttRow = params.data.find(r => r.rowId === item.id)
const prevRow = params.data.find(r => r.rowId === item.extProcessExecutorRoutes[0].prevNodeId)
ganttRow.prevIndex = prevRow.ganttId
const idx = params.links.length + 1
if (link) {
params.links.push({
id: idx,
source: prevRow.ganttId,
target: ganttRow.ganttId
cid: link.id,
tid: link.currNodeId,
source: link.prevNodeId,
target: link.currNodeId,
type: '0',
isCritical: link.isCritical
})
}
})
......@@ -106,8 +118,186 @@ export default {
this.refreshGantt()
})
},
dataWash() {
configLayout() {
const ganttAg = this.gantt
const that = this
const getInput = function(node) {
return node.querySelector('input')
}
const zoomConfig = {
levels: [
[
{
unit: 'month',
// step: 1,
format: function(date) {
var month =
(new Date(date).getFullYear() - 2007) * 12 +
new Date(date).getMonth() +
1
return month + '月' // ganttAg.date.getWeek(date)
}
},
{
unit: 'week',
format: function(date) {
var newDate = new Date(date)
var oldDate = new Date('2007/01/01')
var days = (newDate - oldDate) / (1 * 24 * 60 * 60 * 7 * 1000)
return Math.ceil(days + 1) + '周' // ganttAg.date.getWeek(date)
}
}
],
[
{
unit: 'week',
format: function(date) {
var newDate = new Date(date)
var oldDate = new Date('2007/01/01')
var days = (newDate - oldDate) / (1 * 24 * 60 * 60 * 7 * 1000)
return Math.ceil(days + 1) + '周' // ganttAg.date.getWeek(date)
}
},
{
unit: 'day',
format: function(date) {
var newDate = new Date(date)
var oldDate = new Date('2007/01/01')
var days = (newDate - oldDate) / (1 * 24 * 60 * 60 * 1000)
return Math.ceil(days + 1) + '日' // ganttAg.date.getWeek(date)
}
}
]
],
useKey: 'ctrlKey',
trigger: 'wheel',
element: function() {
return ganttAg.$root.querySelector('.gantt_task')
}
}
ganttAg.config.date_format = '%Y-%m-%d'
// ganttAg.config.duration_unit = 'minute'
ganttAg.config.branch_loading = true
ganttAg.config.scale_height = 70
ganttAg.config.show_task_cells = true
ganttAg.config.autofit = false
ganttAg.config.drag_move = false
ganttAg.config.details_on_dblclick = false
ganttAg.config.auto_scheduling = true
// 指定在选择显示所选任务时是否滚动时间线区域
ganttAg.config.scroll_on_click = true
ganttAg.config.min_column_width = 60
ganttAg.config.autoscroll = true
ganttAg.config.drag_progress = false
ganttAg.ext.zoom.init(zoomConfig)
// 允许通过拖放来调整任务大小
ganttAg.config.drag_resize = true
ganttAg.config.highlight_critical_path = false
ganttAg.config.editor_types.custom_datepicker_editor = {
show: function(id, column, config, placeholder) {
var html =
"<div><input type='text' id='datepicker' name='" +
column.name +
"'></div>"
placeholder.innerHTML = html
},
hide: function() {},
get_value: function(id, column, node) {
return getInput(node).value || 0
},
is_valid: function(value, id, column, node) {},
focus: function(node) {},
set_value: function(value, id, column, node) {
// eslint-disable-next-line eqeqeq
var data = that.data.links
.filter((p) => p.target === id)
.map((p) => ganttAg.getWBSCode(ganttAg.getTask(p.source)))
ganttAg.getWBSCode(ganttAg.getTask(id))
getInput(node).value = data.join(',')
},
is_changed: function(value, id, column, node) {
var olddata = ganttAg
.getTask(id)
.$target.map((p) =>
ganttAg.getWBSCode(ganttAg.getTask(ganttAg.getLink(p).source))
)
if (olddata.join() === getInput(node).value) return
var newdata = getInput(node).value
? getInput(node).value.split(',')
: []
var oldLinks = ganttAg.getTask(id).$target.map((p) => {
return ganttAg.getLink(p)
})
olddata
.filter((p) => !newdata.includes(p))
.forEach((p) => {
var link = oldLinks.find(
(t) => Number(t.source) === ganttAg.getTaskByWBSCode(p).id
)
if (link) {
ganttAg.deleteLink(link.id)
}
})
newdata
.filter((p) => !olddata.includes(p))
.map((p) => ganttAg.getTaskByWBSCode(p))
.forEach((p) => {
ganttAg.addLink({
source: p.id,
target: id,
type: '0'
})
})
ganttAg.render()
}
}
ganttAg.templates.link_class = function(link) {
if (link.isCritical) {
return 'critical_path'
}
}
ganttAg.templates.tooltip_text = function(start, end, task) {
return `<b>站位: </b>${task.text}<br><b>工期: </b> ${task.duration}天`
}
ganttAg.templates.link_description = function(link) {
// 处理插件首次触发传入空值
// if (!link) return false
var from = ganttAg.getTask(link.source) || ''
var to = ganttAg.getTask(link.target) || ''
var text = '<b>' + from.text + '</b> -'
text += '<b>' + to.text + '</b>的 '
return text
}
ganttAg.templates.task_class = function(start, end, task) {
return 'workday_over'
}
// 删除连接后触发
ganttAg.attachEvent('onAfterLinkDelete', function(id, item) {
var target = ganttAg.getTask(item.target)
console.log(ganttAg, target)
var targetLength = target.$target.length
if (!targetLength) {
var data = {
links: this.gantt.getTableData().data.links,
data: this.gantt.getTableData().data.data.map((p) => {
delete p.end_date
p.start_date = new Date(2007, 0, 1)
return p
})
}
ganttAg.parse(data)
}
})
// 在将新链接添加到甘特图之前触发
ganttAg.attachEvent('onBeforeLinkAdd', function(id, link) {
if (link.type !== '0') {
return false
}
return true
})
}
}
......
......@@ -34,34 +34,6 @@ export default {
}
},
watch: {
showFlag(val) {
if (!val) {
return
}
if (!this.node) {
return
}
if (this.node.id === this.currentId) {
return
}
this.getData()
},
node: {
immediate: true,
deep: true,
handler(val) {
if (!this.showFlag) {
return
}
if (!val) {
return
}
if (val.id === this.currentId) {
return
}
this.getData()
}
}
},
mounted() {
......@@ -69,18 +41,10 @@ export default {
},
methods: {
search() {
},
getData() {
},
import() {
},
save() {
}
configLayout() {}
}
}
</script>
......
......@@ -35,34 +35,7 @@ export default {
}
},
watch: {
showFlag(val) {
if (!val) {
return
}
if (!this.node) {
return
}
if (this.node.id === this.currentId) {
return
}
this.getData()
},
node: {
immediate: true,
deep: true,
handler(val) {
if (!this.showFlag) {
return
}
if (!val) {
return
}
if (val.id === this.currentId) {
return
}
this.getData()
}
}
},
mounted() {
......@@ -71,7 +44,8 @@ export default {
methods: {
getData() {
}
},
configLayout() {}
}
}
</script>
......
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