Browse Source

甘特图框架

yuhan 1 year ago
parent
commit
5bdd950e7f

+ 38 - 38
itdmWeb/src/components/module-iTDM/uGantt/index.vue

@@ -78,85 +78,85 @@
         //     id: 0,
         //     testItems: 'ceshi',
         //     sampleName: 'ceshi',
-        //     task_start: '2023-07-03',
-        //     task_end: '2023-07-04',
+        //     start_date: '2023-07-03',
+        //     end_date: '2023-07-04',
         //     statusC: '0',
         //     content: '111'
         //   }, {
         //     id: 1,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '0',
         //   }, {
         //     id: 2,
         //     testItems: 'ceshi',
         //     sampleName: 'ceshi',
-        //     task_start: '2023-07-06',
-        //     task_end: '2023-07-10',
+        //     start_date: '2023-07-06',
+        //     end_date: '2023-07-10',
         //     statusC: '1',
         //   }, {
         //     id: 3,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },{
         //     id: 4,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },
         //   {
         //     id: 5,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },
         //   {
         //     id: 6,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },
         //   {
         //     id: 7,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },
         //   {
         //     id: 8,
         //     testItems: '测试',
         //     sampleName: '测试',
-        //     task_start: '',
-        //     task_end: '',
+        //     start_date: '',
+        //     end_date: '',
         //     statusC: '1',
         //   },
         //   {
         //     id: 21,
         //     testItems: 'ceshi1',
         //     sampleName: 'ceshi',
-        //     task_start: '2023-07-05',
-        //     task_end: '2023-07-08',
+        //     start_date: '2023-07-05',
+        //     end_date: '2023-07-08',
         //     statusC: '1',
         //     parentId: 2
         //   }, {
         //     id: 23,
         //     testItems: 'ceshi3',
         //     sampleName: 'ceshi',
-        //     task_start: '2023-07-02',
-        //     task_end: '2023-07-04',
+        //     start_date: '2023-07-02',
+        //     end_date: '2023-07-04',
         //     statusC: '1',
         //     parentId: 2
         //   },
@@ -164,8 +164,8 @@
         //     id: 22,
         //     testItems: 'ceshi2',
         //     sampleName: 'ceshi',
-        //     task_start: '2023-07-06',
-        //     task_end: '2023-07-10',
+        //     start_date: '2023-07-06',
+        //     end_date: '2023-07-10',
         //     statusC: '1',
         //     parentId: 2
         //   }
@@ -226,14 +226,14 @@
       // 获取最开始和最末尾时间
       getStartEndTime(){
         // var setTimeData = JSON.parse(JSON.stringify(this.taskLists))
-        var setTimeData = this.taskLists.filter(res=> res.task_start)
+        var setTimeData = this.taskLists.filter(res=> res.start_date)
         setTimeData.sort(function(a, b) {
-          return b.task_start < a.task_start ? 1 : -1
+          return b.start_date < a.start_date ? 1 : -1
         })
-        console.log(setTimeData[0].task_start)
-        console.log(setTimeData[setTimeData.length - 1].task_end)
-        var end = this.addDate(setTimeData[setTimeData.length - 1].task_end, 2)
-        this.uGanttColumns = this.getBetweenDate(setTimeData[0].task_start, end)
+        console.log(setTimeData[0].start_date)
+        console.log(setTimeData[setTimeData.length - 1].end_date)
+        var end = this.addDate(setTimeData[setTimeData.length - 1].end_date, 2)
+        this.uGanttColumns = this.getBetweenDate(setTimeData[0].start_date, end)
       },
       /**
        * 计算某个日期几天后的日期
@@ -308,8 +308,8 @@
       },
       // 绘制甘特条
       setStyle(item){
-        var startIndex = this.uGanttColumns.findIndex(res => res.name === item.task_start)
-        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.task_end)
+        var startIndex = this.uGanttColumns.findIndex(res => res.name === item.start_date)
+        var endIndex = this.uGanttColumns.findIndex(res => res.name === item.end_date)
         var trIndex = this.ganttLists.findIndex(res => res.id === item.id)
         // console.log(trIndex, this.ganttLists)
         var style = {
@@ -370,8 +370,8 @@
               // 获取最终右侧停在第几列
               var endNum = (offsetWidth / 70) + startNum
               // 找到对应的时间强制赋值刷新
-              _this.$set(_this.ganttLists[ganttIndex], 'task_start', _this.uGanttColumns[startNum].name)
-              _this.$set(_this.ganttLists[ganttIndex], 'task_end', _this.uGanttColumns[endNum - 1].name)
+              _this.$set(_this.ganttLists[ganttIndex], 'start_date', _this.uGanttColumns[startNum].name)
+              _this.$set(_this.ganttLists[ganttIndex], 'end_date', _this.uGanttColumns[endNum - 1].name)
               // 鼠标变回手型
               uGanttDrag[i].style.cursor = 'pointer'
               // 释放
@@ -415,10 +415,10 @@
               var num = (uGanttTaskItem[i].offsetLeft)/70
               console.log(num)
               // 普通赋值
-              // _this.ganttLists[0].task_end = _this.uGanttColumns[num - 1].name
+              // _this.ganttLists[0].end_date = _this.uGanttColumns[num - 1].name
               // 强制赋值刷新
               console.log(ganttIndex)
-              _this.$set(_this.ganttLists[ganttIndex], 'task_start', _this.uGanttColumns[num].name)
+              _this.$set(_this.ganttLists[ganttIndex], 'start_date', _this.uGanttColumns[num].name)
               // 强制刷新
               // _this.$forceUpdate()
               document.onmousemove = null;
@@ -475,9 +475,9 @@
               // 2.获取当前甘特条最后位置在第几列--用于赋值
               var num = (uGanttTaskItem[i].offsetLeft + uGanttTaskItem[i].offsetWidth)/70
               // 普通赋值
-              // _this.ganttLists[0].task_end = _this.uGanttColumns[num - 1].name
+              // _this.ganttLists[0].end_date = _this.uGanttColumns[num - 1].name
               // 3.强制赋值刷新--获取列对应的时间,赋值给左侧的第ganttIndex个项目的task_end
-              _this.$set(_this.ganttLists[ganttIndex], 'task_end', _this.uGanttColumns[num - 1].name)
+              _this.$set(_this.ganttLists[ganttIndex], 'end_date', _this.uGanttColumns[num - 1].name)
               // 强制刷新
               // _this.$forceUpdate()
               // 4.释放鼠标事件

+ 31 - 31
itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt.vue

@@ -6,10 +6,10 @@
       <el-dialog title="修改" :visible.sync="dialogVisible" width="40%">
         <div>
           <!-- 参数设定是固定格式,千万别改 -->
-          开始:<el-date-picker v-model="currentDbEdit.task_start" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
+          开始:<el-date-picker v-model="currentDbEdit.start_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
         </div>
         <div>
-          结束:<el-date-picker v-model="currentDbEdit.task_end" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
+          结束:<el-date-picker v-model="currentDbEdit.end_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
         </div>
         <!-- 其他需要自定义的弹窗数据 -->
         <slot/>
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import uGantt from './components/uGantt.vue'
+import uGantt from '@/components/module-iTDM/uGantt/index.vue'
 export default {
   name: '',
   components: { uGantt },
@@ -38,8 +38,8 @@ export default {
       configColumns: [
         { name: "testItems", label: "检测项目", width: 100, fixed: true, resize: true, align: "center", tree: true },
         { name: "sampleName", label: "样品名称", width: 90, fixed: true, resize: true, align: "center" },
-        { name: "task_start", label: "开始时间", width: 100, fixed: true, resize: true, align: "center" },
-        { name: "task_end", label: "结束时间", width: 100, fixed: true, resize: true, align: "center" },
+        { name: "start_date", label: "开始时间", width: 100, fixed: true, resize: true, align: "center" },
+        { name: "end_date", label: "结束时间", width: 100, fixed: true, resize: true, align: "center" },
         // { name: "statusC", label: "状态", width: 60, fixed: true, resize: true, align: "center" },
         // { name: "add", label:"", width: 30 }
       ],
@@ -49,85 +49,85 @@ export default {
           id: 0,
           testItems: 'ceshi',
           sampleName: 'ceshi',
-          task_start: '2023-07-03',
-          task_end: '2023-07-04',
+          start_date: '2023-07-03',
+          end_date: '2023-07-04',
           statusC: '0',
           content: '111'
         }, {
           id: 1,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '0',
         }, {
           id: 2,
           testItems: 'ceshi',
           sampleName: 'ceshi',
-          task_start: '2023-07-06',
-          task_end: '2023-07-10',
+          start_date: '2023-07-06',
+          end_date: '2023-07-10',
           statusC: '1',
         }, {
           id: 3,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },{
           id: 4,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },
         {
           id: 5,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },
         {
           id: 6,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },
         {
           id: 7,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },
         {
           id: 8,
           testItems: '测试',
           sampleName: '测试',
-          task_start: '',
-          task_end: '',
+          start_date: '',
+          end_date: '',
           statusC: '1',
         },
         {
           id: 21,
           testItems: 'ceshi1',
           sampleName: 'ceshi',
-          task_start: '2023-07-05',
-          task_end: '2023-07-08',
+          start_date: '2023-07-05',
+          end_date: '2023-07-08',
           statusC: '1',
           parentId: 2
         }, {
           id: 23,
           testItems: 'ceshi3',
           sampleName: 'ceshi',
-          task_start: '2023-07-02',
-          task_end: '2023-07-04',
+          start_date: '2023-07-02',
+          end_date: '2023-07-04',
           statusC: '1',
           parentId: 2
         },
@@ -135,8 +135,8 @@ export default {
           id: 22,
           testItems: 'ceshi2',
           sampleName: 'ceshi',
-          task_start: '2023-07-06',
-          task_end: '2023-07-10',
+          start_date: '2023-07-06',
+          end_date: '2023-07-10',
           statusC: '1',
           parentId: 2
         }
@@ -166,8 +166,8 @@ export default {
       this.dialogVisible = false
     },
     submit(){
-      this.taskLists[this.currentIndex].task_start = this.currentDbEdit.task_start
-      this.taskLists[this.currentIndex].task_end = this.currentDbEdit.task_end
+      this.taskLists[this.currentIndex].start_date = this.currentDbEdit.start_date
+      this.taskLists[this.currentIndex].end_date = this.currentDbEdit.end_date
       this.dialogVisible = false
       this.currentDbEdit = {}
     }