甘特图调试

applications/dee-doc/src/asyncCompontents/DxDocument/DxDocumentProcessHistory.vue

@@ -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,

applications/dee-mes/src/privateComponents/components/MBOMConfig/config.js

 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
+
       })
     }
 

applications/dee-mes/src/privateComponents/components/MBOMConfig/data.js

@@ -36,7 +36,7 @@ export default {
     search() {
 
     },
-    import() {
+    export() {
 
     },
     save() {

applications/dee-mes/src/privateComponents/components/MBOMConfig/gatt.vue

@@ -49,7 +49,7 @@ export default {
         icon: '/icons/c-export.png',
         handler: {
           click: () => {
-            this.import()
+            this.export()
           }
         }
       }]

applications/dee-mes/src/privateComponents/components/MBOMConfig/step.vue

@@ -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
+      })
     }
 
   }

applications/dee-mes/src/privateComponents/components/MBOMConfig/unit.vue

@@ -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>

applications/dee-mes/src/privateComponents/components/MBOMConfig/view.vue

@@ -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>