优化

src/views/projectManage/requirement/components/ganntViews.vue

@@ -1,49 +1,237 @@
 <template>
-  <gantt-elastic
-    v-if="visible"
-    ref="ganttElastic"
-    :tasks="tasks"
-    :options="options"
-  >
-    <gantt-elastic-header v-show="false" slot="header" ref="ganttHeader" />
-  </gantt-elastic>
+  <div class="ganntt-parent">
+    <gantt-elastic
+      :options="options"
+      :tasks="tasks"
+      @tasks-changed="tasksUpdate"
+      @options-changed="optionsUpdate"
+      @dynamic-style-changed="styleUpdate"
+    >
+      <gantt-header slot="header" />
+    </gantt-elastic>
+  </div>
 </template>
 
 <script>
-import { listByRequire } from '@/api/requirement.js'
 import GanttElastic from 'gantt-elastic'
 import GanttHeader from 'gantt-elastic-header'
+import teamGanttOptions from './../gannttOptions/requireGannt'
+import { listByRequire } from '@/api/requirement.js'
 import moment from 'moment'
-import requireOptions from '../gannttOptions/requireGannt'
+const tasks = [
+  {
+    id: 1,
+    label: 'Make some noise',
+    user:
+      '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
+    start: (-24 * 5),
+    duration: 15 * 24 * 60 * 60 * 1000,
+    percent: 85,
+    type: 'project'
+    // collapsed: true,
+  },
+  {
+    id: 2,
+    label: 'With great power comes great responsibility',
+    user:
+      '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
+    parentId: 1,
+    start: (-24 * 4),
+    duration: 4 * 24 * 60 * 60 * 1000,
+    percent: 50,
+    type: 'milestone',
+    collapsed: true,
+    style: {
+      base: {
+        fill: '#1EBC61',
+        stroke: '#0EAC51'
+      }
+    }
+  },
+  {
+    id: 3,
+    label: 'Courage is being scared to death, but saddling up anyway.',
+    user:
+      '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
+    parentId: 2,
+    start: (-24 * 3),
+    duration: 2 * 24 * 60 * 60 * 1000,
+    percent: 100,
+    type: 'task'
+  },
+  {
+    id: 4,
+    label: 'Put that toy AWAY!',
+    user:
+      '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
+    start: (-24 * 2),
+    duration: 2 * 24 * 60 * 60 * 1000,
+    percent: 50,
+    type: 'task',
+    dependentOn: [3]
+  },
+  {
+    id: 5,
+    label:
+      'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.',
+    user:
+      '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
+    parentId: 4,
+    start: (0),
+    duration: 2 * 24 * 60 * 60 * 1000,
+    percent: 10,
+    type: 'milestone',
+    style: {
+      base: {
+        fill: '#0287D0',
+        stroke: '#0077C0'
+      }
+    }
+  },
+  {
+    id: 6,
+    label: 'Butch Mario and the Luigi Kid',
+    user:
+      '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
+    parentId: 5,
+    start: (24),
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 50,
+    type: 'task',
+    collapsed: true,
+    style: {
+      base: {
+        fill: '#8E44AD',
+        stroke: '#7E349D'
+      }
+    }
+  },
+  {
+    id: 7,
+    label: 'Devon, the old man wanted me, it was his dying request',
+    user:
+      '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
+    parentId: 2,
+    dependentOn: [6],
+    start: (24 * 2),
+    duration: 4 * 60 * 60 * 1000,
+    percent: 20,
+    type: 'task',
+    collapsed: true
+  },
+  {
+    id: 8,
+    label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?',
+    user:
+      '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
+    parentId: 7,
+    dependentOn: [7],
+    start: (24 * 3),
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  },
+  {
+    id: 9,
+    label:
+      'This better be important, woman. You are interrupting my very delicate calculations.',
+    user:
+      '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
+    parentId: 8,
+    dependentOn: [8, 7],
+    start: (24 * 4),
+    duration: 4 * 60 * 60 * 1000,
+    percent: 20,
+    type: 'task',
+    style: {
+      base: {
+        fill: '#8E44AD',
+        stroke: '#7E349D'
+      }
+    }
+  },
+  {
+    id: 10,
+    label: 'current task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 5),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  },
+  {
+    id: 11,
+    label: 'test task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 6),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  },
+  {
+    id: 12,
+    label: 'test task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 7),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task',
+    parentId: 11
+  },
+  {
+    id: 13,
+    label: 'test task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 8),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  },
+  {
+    id: 14,
+    label: 'test task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 9),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  },
+  {
+    id: 15,
+    label: 'test task',
+    user:
+      '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
+    start: (24 * 16),
+    duration: 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: 'task'
+  }
+]
+
 export default {
-  name: 'GanntViewsVue',
   components: {
-    ganttElasticHeader: GanttHeader,
-    ganttElastic: GanttElastic
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-      required: true
-    }
+    GanttElastic,
+    GanttHeader
   },
   data() {
     return {
-      ganttShow: false,
-      tasks: [], // 甘特图任务
-      options: requireOptions
-    }
-  },
-  watch: {
-    visible: {
-      handler(newV) {
-        this.visible = newV
-      },
-      immediate: true
+      tasks,
+      options: teamGanttOptions, // 甘特图配置
+      dynamicStyle: {}
     }
   },
   mounted() {
+    const box = document.getElementsByClassName('gantt-elastic__header-label')
+    for (const i in box) {
+      console.log(box[3], 'cdscd')
+      i === '3' ? '' : box[i].style = 'display: none;'
+    }
+    console.log(box)
     this.listByRequire()
   },
   methods: {
@@ -68,7 +256,7 @@ export default {
         description: item.description || '',
         startDate: item.optionsObject.startTime ? moment(item.optionsObject.startTime).format('YYYY-MM-DD') : '',
         endDate: item.optionsObject.endTime ? moment(item.optionsObject.endTime).format('YYYY-MM-DD') : '',
-        needLegalAllDays: item.workNum.needDays + '/' + item.workNum.legalDays + '/' + item.workNum.allDays,
+        needLegalAllDays: '1/3', // item.workNum.needDays + '/' + item.workNum.legalDays + '/' + item.workNum.allDays,
         type: 'task',
         style: {
           base: {
@@ -76,11 +264,36 @@ export default {
           }
         }
       }
+    },
+
+    tasksUpdate(tasks) {
+      this.tasks = tasks
+    },
+    optionsUpdate(options) {
+      this.options = options
+    },
+    styleUpdate(style) {
+      this.dynamicStyle = style
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.ganntt-parent {
+  margin: 0 20px 20px;
+  >>>.gantt-elastic__header {
+    display: block !important;
+    background: #FFF !important;
+  }
+  >>>.gantt-elastic__header-title {
+    display: none;
+  }
+ >>>.gantt-elastic__header-btn-recenter {
+    display: none;
+ }
+ >>>.gantt-elastic__header-task-list-switch--wrapper {
+    display: none;
+ }
+}
 </style>

src/views/projectManage/requirement/gannttOptions/requireGannt.js

@@ -1,11 +1,9 @@
 const options = {
-  locale: {
-    name: 'zh_cn',
-    weekdays: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
-    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+  taskMapping: {
+    progress: 'percent'
   },
   maxRows: 100,
-  maxHeight: 460,
+  maxHeight: 500,
   title: {
     label: 'Your project title as html (link or whatever...)',
     html: false
@@ -50,7 +48,9 @@ const options = {
         id: 2,
         label: '所属模块',
         value: 'belongModules',
-        width: 80,
+        width: 200,
+        expander: true,
+        html: true,
         style: {
           'task-list-header-label': {
             'text-align': 'center',
@@ -60,6 +60,11 @@ const options = {
             'font-weight': '500'
           }
         }
+        // events: {
+        //   click({ data, column }) {
+        //     alert('description clicked!\n' + data.label)
+        //   }
+        // }
       },
       {
         id: 3,
@@ -96,7 +101,6 @@ const options = {
         label: '排期类型及描述',
         value: 'description',
         width: 180,
-        expander: true,
         style: {
           'task-list-header-label': {
             'text-align': 'center',
@@ -156,6 +160,17 @@ const options = {
         }
       }
     ]
+  },
+  locale: {
+    Now: 'Now',
+    'X-Scale': 'Zoom-X',
+    'Y-Scale': 'Zoom-Y',
+    'Task list width': 'Task1 list',
+    'Before/After': 'Expand',
+    'Display task list': 'Task list',
+    name: 'zh_cn',
+    weekdays: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
   }
 } // 甘特图配置
 export default options

src/views/projectManage/requirement/requirementDetail.vue

@@ -210,7 +210,7 @@
               <div v-if="SchedulingContent.length === 0" style="width: 270px; margin: 50% 20px; text-align: center;"> 暂无排期变更记录!</div>
             </el-aside>
           </el-container>
-          <gannt-views :id="requirementId" :visible="listOrGannt === '甘特图'" />
+          <gannt-views v-if="listOrGannt === '甘特图'" />
         </section>
         <section class="main-section">
           <div class="el-main-title">