装配单元路线 设置排序

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

@@ -9,9 +9,9 @@
       <dee-tools mode="normal" :tools="tools" />
     </div>
     <div class="content-model">
-      <step ref="ExtPosition" v-show="viewType === 'ExtPosition'" :show-flag="viewType === 'ExtPosition'" :node="node" />
-      <unit ref="unit" v-show="viewType === 'unit'" :show-flag="viewType === 'unit'" :node="node" />
-      <view2 ref="AircraftSorties" v-show="viewType === 'AircraftSorties'" :show-flag="viewType === 'AircraftSorties'" :node="node" />
+      <step v-if="viewType === 'ExtPosition'" ref="ExtPosition" :show-flag="viewType === 'ExtPosition'" :node="node" />
+      <unit v-if="viewType === 'unit'" ref="unit" :show-flag="viewType === 'unit'" :node="node" />
+      <view2 v-if="viewType === 'AircraftSorties'" ref="AircraftSorties" :show-flag="viewType === 'AircraftSorties'" :node="node" />
     </div>
   </div>
 </template>
@@ -73,7 +73,7 @@ export default {
         icon: '/icons/check.png',
         handler: {
           click: () => {
-            this.config()
+            this.settings()
           }
         }
       })
@@ -102,13 +102,13 @@ export default {
       this.node = params
     },
     export() {
-      this.$refs[this.viewType].export()
+      this.$refs[this.viewType].export && this.$refs[this.viewType].export()
     },
     save() {
-      this.$refs[this.viewType].save()
+      this.$refs[this.viewType].save && this.$refs[this.viewType].save()
     },
-    config() {
-      this.$refs[this.viewType].config()
+    settings() {
+      this.$refs[this.viewType].settings && this.$refs[this.viewType].settings()
     }
   }
 }

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

+<template>
+  <dee-dialog
+    title="设置排序"
+    :dialog-visible.sync="visibleSort"
+    width="500px"
+    :before-close="()=>{$emit('close')}"
+    close-on-click-modal
+  >
+    <div>
+      <el-button type="text" @click="selectAll">全选</el-button>
+      <el-button type="text" @click="selectNothings">全清</el-button>
+      <el-button type="text" @click="selectToggle">反选</el-button>
+      <el-tree
+        v-if="visibleSort"
+        ref="treeSort"
+        :data="unitList"
+        node-key="id"
+        show-checkbox
+        draggable
+        :allow-drop="collapseSort"
+        @node-drop="nodeDrop"
+      >
+        <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          序号：<el-input v-model="data.sort" :style="{width:'50px'}" size="mini" @change="changeSort($event,data)" />
+        </span>
+      </el-tree>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveSort">确 定</el-button>
+      <el-button @click="()=>{$emit('close')}">取 消</el-button>
+    </span>
+  </dee-dialog>
+</template>
+
+<script>
+export default {
+  name: 'TfMomWebSortUnit',
+  props: {
+    unitList: {
+      type: Array,
+      default: () => []
+    },
+    dialogFlag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      visibleSort: false
+
+    }
+  },
+  watch: {
+    dialogFlag(val) {
+      this.visibleSort = val
+    },
+    visibleSort(val) {
+      !val && this.$emit('close')
+    }
+  },
+
+  mounted() {
+
+  },
+  methods: {
+    selectAll() {
+      const ids = this.unitList.map(r => r.id)
+      this.$refs.treeSort.setCheckedKeys(ids)
+    },
+    selectNothings() {
+      this.$refs.treeSort.setCheckedKeys([])
+    },
+    selectToggle() {
+      const ids = this.unitList.map(r => r.id)
+      const checkedIds = this.$refs.treeSort.getCheckedKeys()
+      const selecteds = ids.filter(r => !checkedIds.includes(r))
+      this.$refs.treeSort.setCheckedKeys(selecteds)
+    },
+    collapseSort(draggingNode, dropNode, type) {
+      return type !== 'inner'
+    },
+    nodeDrop() {
+      this.unitList.forEach((p, index) => {
+        p.sort = index + 1
+        p.defaultSort = index + 1
+      })
+    },
+    saveSort() {
+      var params = this.$refs.treeSort.getCheckedNodes().map((p, index) => {
+        return {
+          operator: 'MODIFY',
+          id: p.id,
+          dictSeq: index
+        }
+      })
+      this.$api.recursion('ExtProcessPlan', params, true).then(() => {
+        this.$emit('refresh')
+        this.$emit('close')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -232,9 +232,6 @@ export default {
           }
           ganttAg.clearAll()
           ganttAg.parse(data)
-          setTimeout(() => {
-            ganttAg.autoSchedule()
-          }, 1000)
         }
       })
       // 在将新链接添加到甘特图之前触发
@@ -254,7 +251,7 @@ export default {
     refreshGantt() {
       const val = this.ganttData
       if (!val || !val.length) {
-        this.gantt.parse({ data: [] })
+        this.gantt.clearAll()
         return
       }
       const params = {

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

 <template>
-  <div class="TfMomWebUnit-model">
+  <div v-dee-loading="loading" class="TfMomWebUnit-model">
     <div class="search-bar">
-      <el-input>
-        <el-input v-model.trim="AOname" placeholder="AO(号/名称)" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search" @click="search" />
-        </el-input>
+      <el-input v-model="AOname" size="small" placeholder="AO(号/名称)" class="input-with-select">
+        <el-button slot="append" icon="el-icon-search" @click="search" />
       </el-input>
+
     </div>
-    <div id="unit-gatt" class="gatt" />
+    <div :id="ganttElId" :ref="ganttElId" class="gatt" />
+    <sortUnit
+      :dialog-flag="dialogFlag"
+      :unit-list="unitList"
+      @refresh="getData(true)"
+      @close="()=>{dialogFlag = false}"
+    />
   </div>
 </template>
 
 <script>
+import CsvExportor from 'csv-exportor'
 import config from './config'
 import data from './data'
+import sortUnit from './sortUnit.vue'
 export default {
   name: 'TfMomWebUnit',
+  components: { sortUnit },
   mixins: [config, data],
   props: {
     node: {
@@ -29,27 +37,506 @@ export default {
   },
   data() {
     return {
+      ganttElId: 'view-gantt',
       currentId: '',
+      ganttData: [],
+      loading: false,
+      dialogFlag: false,
+      unitList: [],
+      // eslint-disable-next-line no-undef
+      gantt: Gantt.getGanttInstance(),
+      initGanttFlag: false,
+      params: null,
       AOname: ''
     }
+  },
+  computed: {
+
   },
   watch: {
+
   },
 
   mounted() {
 
   },
-
   methods: {
-    getData() {
+    refreshGantt(val) {
+      if (!val || !val.length) {
+        return
+      }
+      this.params = {
+        data: [],
+        links: []
+      }
+      const units = val
+        .filter(link => link.target)
+        .map(link => link.target)
+        .sort((a, b) => a.dictSeq - b.dictSeq)
+      units.forEach((unit) => {
+        if (unit) {
+          this.params.data.push(this.toUnit(unit))
+          this.addLink(unit)
+          // 配置方案
+          if (unit.sourceExtProcessUsageLink && unit.sourceExtProcessUsageLink[0]) {
+            const ExtCas = unit.sourceExtProcessUsageLink[0].target
+            if (ExtCas && ExtCas.sourceExtProcessUsageLink) {
+              ExtCas.sourceExtProcessUsageLink.forEach(AoLink => {
+                // AO AOR
+                if (AoLink.target) {
+                  this.params.data.push(this.toAo(AoLink.target, unit))
+                  this.addLink(AoLink.target)
+                }
+              })
+            }
+          }
+        }
+      })
+      this.gantt.parse(this.params)
+    },
+    toDuration(workHour) {
+      return (Number(workHour || 0) * 3 * 60) || 0.01
+    },
+    addLink(item) {
+      const link = item.extProcessExecutorRoutes && item.extProcessExecutorRoutes[0]
+      link && this.params.links.push(this.toLink(link))
+    },
+    toLink(l) {
+      return {
+        cid: l.id,
+        tid: l.currNodeId,
+        source: l.prevNodeId,
+        target: l.currNodeId,
+        type: '0',
+        isCritical: l.isCritical
+      }
+    },
+    toUnit(n) {
+      return {
+        id: n.id,
+        type: 'project',
+        start_date: '2007-01-01',
+        text: n.serialNumber,
+        edition: n.gaceVersion,
+        parent: 0,
+        parenId: 0,
+        dictSeq: n.dictSeq,
+        right_text: n.name,
+        duration: this.toDuration(n.workHour)
+      }
+    },
+    toAo(n, m) {
+      return {
+        id: n.id,
+        type: 'task',
+        start_date: '2007-01-01',
+        text: n.serialNumber,
+        parent: m.id,
+        parenId: m.id,
+        edition: n.gaceVersion,
+        right_text: n.name,
+        duration: this.toDuration(n.workHour)
+      }
+    },
+    getData(flag) {
+      if (!flag && this.loading && (this.currentId === this.node.id)) {
+        return
+      }
+      this.currentId = this.node.id
+      this.gantt.clearAll()
+      this.AOname = ''
+      this.loading = true
+      const params = {
+        searchItems: { 'items': [{ 'fieldName': 'sourceId', 'operator': 'EQ', 'value': this.currentId }] },
+        'sortItem': [{ 'fieldName': 'modifyTime', 'sortOrder': 'asc' }],
+        openProps: [{
+          'name': 'target',
+          openProps: [{ 'name': 'extProcessExecutorRoutes' }, {
+            'name': 'sourceExtProcessUsageLink', // sourceExtProcessUsageLink targetExtProcessUsageLink
+            openProps: [{
+              'name': 'target',
+              openProps: [{
+                'name': 'sourceExtProcessUsageLink',
+                openProps: [{
+                  'name': 'target',
+                  openProps: [{ 'name': 'extProcessExecutorRoutes' }]
+                }]
+              }]
+            }]
+          }]
+        }]
 
+      }
+      this.$api.searchApi('ExtPositionUsageLink', params).then(res => {
+        this.refreshGantt(res.items.content || [])
+        this.loading = false
+      }).catch(() => {
+        this.refreshGantt([])
+        this.loading = false
+      })
+    },
+    showTextBylevel(level) {
+      if (level === 0) {
+        return '站位'
+      }
+      if (level === 1) {
+        return '装配单元'
+      }
+      if (level === 2) {
+        return 'AO名称'
+      }
+    },
+    configLayout() {
+      const ganttAss = this.gantt
+      const that = this
+      this.usePlugins()
+      var predecessorEditor = {
+        type: 'custom_datepicker_editor'
+      }
+      var getInput = function(node) {
+        return node.querySelector('input')
+      }
+      var zoomConfig = {
+        levels: [
+          [
+            {
+              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) + '周' // ganttAss.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) + '日' // ganttAss.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) + '日' // ganttAss.date.getWeek(date)
+              }
+            },
+            {
+              unit: 'hour',
+              format: '%H'
+            }
+          ],
+
+          [
+            {
+              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) + '周' // ganttAss.date.getWeek(date)
+              }
+            }
+          ]
+        ],
+        startDate: new Date('2007/01/01'),
+        useKey: 'ctrlKey',
+        trigger: 'wheel',
+        element: function() {
+          return ganttAss.$root.querySelector('.gantt_task')
+        }
+      }
+      var colContent = function(task) {
+        var links = task.$target
+        var labels = []
+        for (var i = 0; i < links.length; i++) {
+          var link = ganttAss.getLink(links[i])
+          var label = ganttAss.getWBSCode(ganttAss.getTask(link.source))
+          if (!labels.includes(label)) {
+            labels.push(label)
+          }
+        }
+        return "<span class='predecessors'>" + labels.join(',') + '</span>'
+      }
+      ganttAss.config.date_format = '%Y-%m-%d %H:%i:%s'
+      ganttAss.config.auto_scheduling = true
+      ganttAss.config.duration_unit = 'minute'
+      ganttAss.config.autofit = false
+      ganttAss.config.drag_move = false
+      ganttAss.config.scale_height = 70
+      ganttAss.config.min_column_width = 60
+      ganttAss.config.drag_progress = false
+      ganttAss.config.details_on_dblclick = false
+      ganttAss.config.open_split_tasks = true
+      ganttAss.templates.tooltip_text = function(start, end, task) {
+        var html =
+          '<b >站位：</b> ' +
+            task.text +
+            '<br><b>工期:</b> ' +
+            Math.round((task.duration || 0) / 60) +
+            '小时<br><b>版本:</b> ' +
+            (task.edition || ' ') +
+            '<br><b>' +
+            task.$level ===
+          0
+            ? 'CA/AO号'
+            : 'CA/AO号' + ':</b> ' + (task.right_text || ' ')
+        return html
+      }
+      ganttAss.config.drag_resize = false
+      ganttAss.config.start_on_monday = true
+      ganttAss.config.highlight_critical_path = true
+      ganttAss.config.columns = [
+        {
+          name: 'id',
+          label: '节点',
+          align: 'left',
+          width: 60,
+          resize: true,
+          template: function(task) {
+            return (
+              "<span class='gantt_grid_wbs'>" +
+              (ganttAss.getWBSCode(task) || '') +
+              '</span>'
+            )
+          }
+        },
+        {
+          name: 'text',
+          label: '装配单元号',
+          align: 'left',
+          width: 160,
+          tree: true,
+          resize: true
+        },
+        {
+          name: 'edition',
+          label: '版本',
+          align: 'center',
+          width: 50,
+          resize: true
+        },
+        {
+          name: 'duration',
+          label: '工期(时)',
+          align: 'center',
+          width: 50,
+          resize: true,
+          template: function(task) {
+            return Math.round((task.duration || 0) / 18) / 10
+          }
+        },
+        {
+          name: ' ',
+          label: '前置',
+          width: 60,
+          align: 'center',
+          editor: predecessorEditor,
+          template: colContent
+        }
+      ]
+      ganttAss.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) {
+          return false
+        },
+        set_value: function(value, id, column, node) {
+          if (id) id = Number(id)
+          var data = ganttAss
+            .getTask(id)
+            .$target.map((p) =>
+              ganttAss.getWBSCode(ganttAss.getTask(ganttAss.getLink(p).source))
+            )
+          getInput(node).value = data.join(',')
+        },
+        is_changed: function(value, id, column, node) {
+          var olddata = ganttAss
+            .getTask(id)
+            .$target.map((p) =>
+              ganttAss.getWBSCode(ganttAss.getTask(ganttAss.getLink(p).source))
+            )
+          if (olddata.join() === getInput(node).value) return
+          var newdata = getInput(node).value
+            ? getInput(node).value.split(',')
+            : []
+          var oldLinks = ganttAss.getTask(id).$target.map((p) => {
+            return ganttAss.getLink(p)
+          })
+          olddata
+            .filter((p) => !newdata.includes(p))
+            .forEach((p) => {
+              var link = oldLinks.find(
+                (t) => Number(t.source) === ganttAss.getTaskByWBSCode(p).id
+              )
+              if (link) {
+                ganttAss.deleteLink(link.id)
+              }
+            })
+          newdata
+            .filter((p) => !olddata.includes(p))
+            .map((p) => ganttAss.getTaskByWBSCode(p))
+            .forEach((p) => {
+              ganttAss.addLink({
+                source: p.id,
+                target: id,
+                type: '0'
+              })
+            })
+          ganttAss.render()
+        }
+      }
+      ganttAss.templates.rightside_text = function(start, end, task) {
+        return '<b></b>' + (task.right_text || ' ')
+      }
+      ganttAss.templates.link_class = function(link) {
+        if (link.isCritical) {
+          return 'critical_path'
+        }
+      }
+      ganttAss.templates.task_class = function(task) {
+
+      }
+      ganttAss.templates.link_description = function(link) {
+        // 处理插件首次触发传入空值
+        // if (!link) return false
+        var from = ganttAss.getTask(link.source) || ''
+        var to = ganttAss.getTask(link.target) || ''
+        var text = '<b>' + from.text + '</b> -'
+        text += '<b>' + to.text + '</b>的 '
+        return text
+      }
+      // 删除连接后触发
+      ganttAss.attachEvent('onAfterLinkDelete', function(id, item) {
+        var target = ganttAss.getTask(item.target)
+        var targetLength = target.$target.length
+        if (!targetLength) {
+          var data = {
+            links: ganttAss.getTableData().data.links,
+            data: ganttAss.getTableData().data.data.map((p) => {
+              delete p.end_date
+              p.start_date = new Date(2007, 0, 1)
+              return p
+            })
+          }
+          ganttAss.parse(data)
+        }
+      })
+
+      // 当分支被打开时触发
+      ganttAss.attachEvent('onTaskOpened', function(id) {
+        that.openTree.push(Number(id))
+      })
+      // 当分支关闭时触发
+      ganttAss.attachEvent('onTaskClosed', function(id) {
+        var arr = that.openTree
+        arr.splice(
+          arr.findIndex((item) => item === Number(id)),
+          1
+        )
+      })
+      ganttAss.attachEvent('onBeforeTaskDisplay', function(id, task) {
+        if (task.priority) {
+          return false
+        }
+        return true
+      })
+      // // 在将新链接添加到甘特图之前触发
+      ganttAss.attachEvent('onBeforeLinkAdd', function(id, link) {
+        if (
+          link.type !== '0' ||
+          (ganttAss.getTask(link.target).$level === 0 &&
+            ganttAss.getTask(link.source).$level === 1) ||
+          (ganttAss.getTask(link.target).$level === 1 &&
+            ganttAss.getTask(link.source).$level === 0)
+        ) {
+          return false
+        }
+        return true
+      })
+      that.$nextTick(() => {
+        ganttAss.ext.zoom.init(zoomConfig)
+        ganttAss.init(this.ganttElId)
+      })
+    },
+    settings() {
+      this.unitList = this.gantt.getTableData().data.data.filter(p => p.type === 'project')
+        .map((p, i) => {
+          return {
+            id: p.id,
+            label: p.text,
+            dictSeq: p.dictSeq,
+            sort: i + 1
+          }
+        })
+      this.dialogFlag = true
+    },
+    export() {
+      var dd = this.gantt.getTableData()
+      const tableData = dd.data.data.filter(p => !p.priority).map((p) => {
+        return {
+          _1: Object.values(p)
+            .filter(
+              (item) => item && item.toString().includes('gantt_grid_wbs')
+            )[0]
+            .replace("<span class='gantt_grid_wbs'>", '')
+            .replace('</span>', ''),
+          text1: p.text,
+          // AO名称
+          right_text: p.right_text,
+          edition: p.edition || '',
+          duration: p.duration,
+          predecessors: Object.values(p)
+            .filter(
+              (item) => item && item.toString().includes('predecessors')
+            )[0]
+            .replace("<span class='predecessors'>", '')
+            .replace('</span>', '')
+        }
+      })
+      const header = [
+        '节点',
+        'CA/AO号',
+        'CA/AO名称',
+        '版本',
+        '工期（时）',
+        '前置'
+      ]
+      CsvExportor.downloadCsv(tableData, { header }, '装配单元路线.csv')
     },
-    configLayout() {},
     search() {
       if (!this.AOname) {
         return
       }
-      const tasks = this.params.data.filter(task => task.right_text.includes(this.AOname) || task.text.includes(this.AOname))
+      const tasks = this.params.data.filter(task => task.$level === 2 && (task.right_text.includes(this.AOname) || task.text.includes(this.AOname)))
       const parentTasks = []
       if (tasks.length) {
         tasks.forEach(task => {
@@ -74,8 +561,15 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" >
 .TfMomWebUnit-model{
-    height: 100%;
+  .search-bar{
+    width: 300px;
+    margin-bottom: 8px;
+  }
+  height: 100%;
+  .gatt{
+      height: calc(100% - 40px );
+  }
 }
 </style>

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

@@ -41,65 +41,7 @@ export default {
     }
   },
   computed: {
-    columns() {
-      const ganttIns = this.gantt
-      return [
-        {
-          name: '',
-          label: '节点',
-          align: 'left',
-          width: 60,
-          resize: true,
-          template: function(task) {
-            return (
-              "<span class='gantt_grid_wbs'>" + (ganttIns.getWBSCode(task) ||
-            '') + '</span>'
-            )
-          }
-        },
-        {
-          name: 'text',
-          label: '站位号',
-          align: 'left',
-          width: 160,
-          tree: true,
-          resize: true
-        },
-        {
-          name: 'edition',
-          label: '版本',
-          align: 'center',
-          width: 50,
-          resize: true
-        },
-        {
-          name: 'duration',
-          label: '工期(时)',
-          align: 'center',
-          width: 60,
-          resize: true,
-          template: function(task) {
-            return Math.round((task.duration || 0) / (3 * 60))
-          }
-        },
-        {
-          name: 'predecessors',
-          label: '前置',
-          width: 60,
-          align: 'center',
-          template: function(task) {
-            var links = task.$target
-            var labels = []
-            for (var i = 0; i < links.length; i++) {
-              var link = ganttIns.getLink(links[i])
-              var label = ganttIns.getWBSCode(ganttIns.getTask(link.source))
-              if (!labels.includes(label)) { labels.push(label) }
-            }
-            return "<span class='gantt_grid_predecessors'>" + labels.join(', ') + '</span>'
-          }
-        }
-      ]
-    }
+
   },
   watch: {
 
@@ -203,6 +145,9 @@ export default {
       }
     },
     getData() {
+      if (this.loading && (this.currentId === this.node.id)) {
+        return
+      }
       this.currentId = this.node.id
       this.gantt.clearAll()
       if (!this.node || !this.node.children.length) {