{{ src/App.vue }}
<template>
  <div class="container">
    <div class="gantt_head">
      <div class="head_RorX">
        
      <el-radio-group v-model="radio1" @change="selChange()" size="small" style="margin-right:9px">
        <el-radio-button label="按人员查看" value="renyuan"></el-radio-button>
        <el-radio-button label="按项目查看" value="xiangmu"></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>{{(this.radio1 == "按人员查看" ? "人员" : "项目")}}</span>
        <span v-if="!reqpar1">
      <el-select ref="screenchg1" v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:200px" @change="optupdata()">
        <el-option
          v-for="item in screenList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          >
        </el-option>
      </el-select>
      </span>
      <span v-if="reqpar1">
      <el-select ref="screenchg2" v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:200px" @change="optupdata()">
        <el-option
          v-for="item in screenList"
          :key="item.id"
          :label="item.projectName"
          :value="item.id"
          >
        </el-option>
      </el-select>
      </span>
      </div>
    </div>
    <gantt v-if="isDataLoaded" ref="ganttTable1" class="left-container" :tasks="tasks" 
    :stafforpro="radio1" 
    :valueDate="valueDate"
    :key="updatakey1"></gantt>
    <!-- <gantt v-show="!isDataLoaded" ref="ganttTable2" class="left-container" :tasks="tasks2" 
    :stafforpro="radio1" 
    :valueDate="valueDate"
    :key="updatakey2"></gantt> -->
  </div>
</template>
 
<script>
import { error } from 'dingtalk-jsapi';
import Gantt from './gantt.vue';
 
export default {
  name: 'project_gantt',
  components: {Gantt},
  data () {
    return {
      isDataLoaded:false,
      tasks: {
        data : [],
        // data:[{"id":"7913998191517310976","userId":"7913998191517310976","text":"杨峰","duration":-19,"start_date":"2021-04-01","end_date":"2021-07-29","parent":null},{"id":"7913998191517310976_328","userId":"7913998191517310976","text":"体育场订场项目","duration":464826496,"start_date":"2021-04-01","end_date":"2021-05-31","parent":"7913998191517310976"},{"id":"7913998191517310976_363","userId":"7913998191517310976","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"7913998191517310976"},{"id":"7913998535412490240","userId":"7913998535412490240","text":"吴子旭","duration":-19,"start_date":"2021-04-01","end_date":"2021-07-29","parent":null},{"id":"7913998535412490240_328","userId":"7913998535412490240","text":"体育场订场项目","duration":464826496,"start_date":"2021-04-01","end_date":"2021-05-31","parent":"7913998535412490240"},{"id":"7913998535412490240_269","userId":"7913998535412490240","text":"民族印象平面设计","duration":25,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"7913998535412490240"},{"id":"7913998535412490240_363","userId":"7913998535412490240","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"7913998535412490240"},{"id":"7913998867093856256","userId":"7913998867093856256","text":"张林霄","duration":-19,"start_date":"2021-04-01","end_date":"2021-07-29","parent":null},{"id":"7913998867093856256_328","userId":"7913998867093856256","text":"体育场订场项目","duration":464826496,"start_date":"2021-04-01","end_date":"2021-05-31","parent":"7913998867093856256"},{"id":"7913998867093856256_269","userId":"7913998867093856256","text":"民族印象平面设计","duration":25,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"7913998867093856256"},{"id":"7913998867093856256_363","userId":"7913998867093856256","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"7913998867093856256"},{"id":"7913999017669369856","userId":"7913999017669369856","text":"张海彦","duration":14,"start_date":"2021-05-05","end_date":"2021-07-29","parent":null},{"id":"7913999017669369856_269","userId":"7913999017669369856","text":"民族印象平面设计","duration":554491648,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"7913999017669369856"},{"id":"7913999017669369856_363","userId":"7913999017669369856","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"7913999017669369856"},{"id":"8051384341375688704","userId":"8051384341375688704","text":"徐乐","duration":14,"start_date":"2021-05-05","end_date":"2021-07-29","parent":null},{"id":"8051384341375688704_269","userId":"8051384341375688704","text":"民族印象平面设计","duration":554491648,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"8051384341375688704"},{"id":"8051384341375688704_363","userId":"8051384341375688704","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"8051384341375688704"},{"id":"8051387850351386624","userId":"8051387850351386624","text":"任一葱","duration":14,"start_date":"2021-05-05","end_date":"2021-07-29","parent":null},{"id":"8051387850351386624_269","userId":"8051387850351386624","text":"民族印象平面设计","duration":554491648,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"8051387850351386624"},{"id":"8051387850351386624_363","userId":"8051387850351386624","text":"hs001","duration":24,"start_date":"2021-07-05","end_date":"2021-07-29","parent":"8051387850351386624"},{"id":"8051388052521033728","userId":"8051388052521033728","text":"陈润福","duration":-24,"start_date":"2021-05-05","end_date":"2021-05-30","parent":null},{"id":"8051388052521033728_269","userId":"8051388052521033728","text":"民族印象平面设计","duration":554491648,"start_date":"2021-05-05","end_date":"2021-05-30","parent":"8051388052521033728"}],
        links: [
          // {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
      tasks1: {links:[]},
      tasks2: {links:[]},
      updatakey1: 1,
      updatakey2: -1,
      radio1:"按人员查看",
      valueDate:[],
      options:[{value:"选项1",label:"全部"},{value:"选项2",label:"人员1"}],
      valuex:'',
      screenList:[],

      // 请求参数
      reqpar1:0,
      reqpar2:[],
      reqpar3:"人员范围/项目范围",

    }
  },

  
  methods: {
      setGroup() {
          this.$refs.ganttTable1.setGroup();
          // this.$refs.ganttTable2.setGroup();
      },
      // 人员/项目切换
      selChange(){
        console.log("切换按钮");
        if (this.radio1 == "按人员查看") {
          this.reqpar1 = 0
          this.getList()
          this.getScreen()
          // this.tasks1 = this.tasks
          // this.updatakey1 += 1
          // this.isDataLoaded = true
        }else{
          this.reqpar1 = 1
          this.getList()
          this.getXmScreen()
          // this.tasks2 = this.tasks
          // this.updatakey2 -= 1
          // this.isDataLoaded = false
        }
        // console.log(this.valuex1);
        this.valuex == ''
        
        
      },
      // 时间段改变
      dateupdata(){
        this.reqpar2 = this.valueDate
        this.getList()
        // if (this.reqpar1 = 0) {
        //   this.getList()
        //   // this.tasks1 = this.tasks
        //   // this.updatakey1 += 1
        // } else {
        //   this.getList()
        //   // this.tasks2 = this.tasks
        //   // this.updatakey2 -= 1
        // }
      },
      // 人员/项目筛选改变
      optupdata(){
        this.reqpar3 = this.valuex
        console.log("reqpar3",this.valuex);
        this.getList()
        // if (this.reqpar1 = 0) {
        //   console.log(this.valuex);
        //   this.getList()
        //   // this.updatakey1 += 1
        // } else {
        //   // this.updatakey2 -= 1
        // }
      },

      // 获取人员项目筛选列表
      getScreen(){
        this.http.get('/project/getMyUsers',
            res => {
              if (res.code == "ok") {
                this.screenList = res.data
              }else{
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.$message({
                message : error,
                type : "error"
              })
            }
        )
      },
      getXmScreen(){
        this.http.get('/project/getProjectList',
            res => {
              if (res.code == "ok") {
                this.screenList = res.data
                console.log("screen",this.screenList);
              }else{
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.$message({
                message : error,
                type : "error"
              })
            }
        )
      },

      getList() {
        let getlistcs = {}
        if (this.valuex != ''){
          if (!this.reqpar1) {
            getlistcs = {type : 0 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1], userId : this.reqpar3}
          }else{
            getlistcs = {type : 1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1], projectId : this.reqpar3}
          }
        }else{
          getlistcs = {type : this.reqpar1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1]}
        }
        
        this.http.post('/project/getGanttData', getlistcs ,
                        res => {
                            if (res.code == "ok") {
                                this.tasks = {data:res.data};
                                this.isDataLoaded = true;
                                // console.log("getlist",res.data);
                                
                                this.$nextTick(()=>{
                                  // if (this.reqpar1 = 0) {
                                  // this.tasks1 = this.tasks
                                  this.updatakey1 += 1
                                  // this.$refs.ganttTable1.doLayout()
                                // } else {
                                //   this.tasks2 = this.tasks
                                //   this.updatakey2 -= 1
                                //   this.$refs.ganttTable1.doLayout()
                                // }
                          })
                        
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
          
      }
  },
  mounted: function () {
    let nowdate = new Date()
    let nowmonth = nowdate.getMonth() + 1
    let startdate = nowdate.getFullYear() + "-" + (nowmonth < 10 ? "0" + nowmonth : nowmonth) + "-" + (nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate())
    let udate = new Date(nowdate.getFullYear(),nowdate.getMonth(),nowdate.getDate() + 30)
    let endmonth = udate.getMonth() + 1
    let enddate = udate.getFullYear() + "-" + (endmonth < 10 ? "0" + endmonth : endmonth) + "-" + (udate.getDate() < 10 ? "0" + udate.getDate() : udate.getDate())
    this.valueDate = [startdate,enddate]
    this.reqpar2 = this.valueDate
    console.log("date",this.valueDate);
    this.getList();
    this.getScreen()
    // this.tasks1 = this.tasks
    this.isDataLoaded = true
  }
}
</script>

<style>
  /* html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  } */
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 90%;
  }
  .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: left;
  }
  .gantt_head .head_date{
    height: 60px;
    line-height: 60px;
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .gantt_head .head_select{
    height: 60px;
    line-height: 60px;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>