2022.3.21甘特图数据筛选

fhKeeper/formulahousekeeper/timesheet/src/views/project/gantt.vue

@@ -20,7 +20,8 @@ export default {
       default () {
         return {data: [], links: []}
       }
-    }
+    },
+    stafforpro: ''
   },
  
   methods: {
@@ -80,7 +81,7 @@ export default {
       gantt.config.drag_move = false;
     gantt.config.xml_date = "%Y-%m-%d";
     gantt.config.columns=[
-        {name:"text",       label:"员工/项目名称",  tree:true, width:'*', align: "left" },
+        {name:"text",       label:(this.stafforpro == "人员" ? "员工名称" : "项目名称"),  tree:true, width:'*', align: "left" },
         // {name:"start_date", label:"开始时间", width:'*' , align: "center" },
         // {name:"duration",   label:"工时(天)", width:'*' ,   align: "center" }
     ];
@@ -105,7 +106,7 @@ export default {
     //     group_id: "key",
     //     group_text: "label"
     // });
-    
+    console.log("props",this.stafforpro);
   }
 }
 </script>

fhKeeper/formulahousekeeper/timesheet/src/views/project/project_gantt.vue

@@ -1,7 +1,43 @@
 {{ src/App.vue }}
 <template>
   <div class="container">
-    <gantt v-if="isDataLoaded" ref="ganttTable" class="left-container" :tasks="tasks"></gantt>
+    <div class="gantt_head">
+      <div class="head_RorX">
+        按
+      <el-radio-group v-model="radio1" @change="selChange()" size="small" style="margin-left:9px;margin-right:9px">
+        <el-radio-button label="人员" value="1"></el-radio-button>
+        <el-radio-button label="项目" value="2"></el-radio-button>
+      </el-radio-group>
+      查看
+      </div>
+      <div class="head_date">
+      <span>时间段</span>
+      <el-date-picker
+        style="margin-left:9px"
+        size="small"
+        v-model="valueDate"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        @change="dateupdata()">
+      </el-date-picker>
+      </div>
+      <div class="head_select">
+        <span>{{radio1}}</span>
+      <el-select v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:120px">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          @change="optupdata()">
+        </el-option>
+      </el-select>
+      </div>
+    </div>
+    <gantt v-if="isDataLoaded" ref="ganttTable" class="left-container" :tasks="tasks" :stafforpro="radio1" :key="updatakey"></gantt>
   </div>
 </template>
  
@@ -20,6 +56,16 @@ export default {
           // {id: 1, source: 1, target: 2, type: '0'}
         ]
       },
+      updatakey: 1,
+      radio1:"人员",
+      valueDate:["2022-03-01","2022-03-10"],
+      options:[{value:"选项1",label:"全部"},{value:"选项2",label:"人员1"}],
+      valuex:'全部',
+
+      // 请求参数
+      reqpar1:"人员/项目",
+      reqpar2:"时间段",
+      reqpar3:"人员范围/项目范围"
     }
   },
 
@@ -28,9 +74,27 @@ export default {
       setGroup() {
           this.$refs.ganttTable.setGroup();
       },
+      // 人员/项目切换
+      selChange(){
+        this.reqpar1 = this.radio1
+        // this.getList()
+        this.updatakey += 1
+      },
+      // 时间段改变
+      dateupdata(){
+        this.reqpar2 = this.valeuDate
+        // this.getList()
+        this.updatakey += 1
+      },
+      // 人员/项目筛选改变
+      optupdata(){
+        this.reqpar3 = this.valuex
+        // this.getList()
+        this.updatakey += 1
+      },
 
       getList() {
-        this.http.post('/project/getGanttData',{type:0, startDate:'2022-03-01', endDate:'2022-03-31'},
+        this.http.post('/project/getGanttData',{},
                         res => {
                             if (res.code == "ok") {
                                 this.tasks = {data:res.data};
@@ -74,4 +138,35 @@ export default {
     position: relative;
     height: 100%;
   }
+  .gantt_head{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+  .gantt_head .head_RorX{
+    height: 60px;
+    line-height: 60px;
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .gantt_head .head_date{
+    height: 60px;
+    line-height: 60px;
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .gantt_head .head_select{
+    height: 60px;
+    line-height: 60px;
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>