diff --git a/hb_client/src/components/Gantt/components/leftMenu.vue b/hb_client/src/components/Gantt/components/leftMenu.vue
new file mode 100644
index 0000000..2167e1c
--- /dev/null
+++ b/hb_client/src/components/Gantt/components/leftMenu.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="tableMneu">
+    <div
+      class="mask"
+      v-if="isShowHeaderBox || menuOpen"
+      @click="maskClick"
+    ></div>
+    <el-table
+      ref="tableMenu"
+      :data="tableData"
+      border
+      fit
+      style="width: 100%"
+      row-key="id"
+      height="100%"
+      default-expand-all
+      highlight-current-row
+      @row-click="handlerRowClick"
+      @expand-change="handlerExpand"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column label="名称">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="进度">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: Array,
+    BGScrollTop: Number
+  },
+  computed: {
+    tableData() {
+      return this.list;
+    }
+  },
+  watch: {
+    BGScrollTop: {
+      handler: function(newValue) {
+        let table = this.$refs.tableMenu.bodyWrapper;
+        // console.log(newValue, table);
+        table.scrollTo(0, newValue);
+        // table.scrollTo({
+        //   top: newValue,
+        //   left: 0,
+        //   behavior: "smooth"
+        // });
+      }
+    }
+  },
+  data() {
+    return {
+      // tableData: [],
+      checkList: [],
+      isShowHeaderBox: false,
+      menuOpen: false,
+      //当前点击的row
+      currentRow: {}
+    };
+  },
+  methods: {
+    handlerWatchScroll() {
+      let table = this.$refs.tableMenu.bodyWrapper;
+      table.addEventListener("scroll", e => {
+        // console.log(e.srcElement.scrollTop);
+        this.$emit("TableScrollTop", e.srcElement.scrollTop);
+      });
+    },
+    handlerSelect(row) {
+      this.$refs.tableMenu.setCurrentRow(row);
+    },
+    handlerExpand(row, expand) {
+      // console.log(row, expanded);
+      this.$emit("handlerExpand", row, expand);
+    },
+    maskClick() {
+      this.isShowHeaderBox = false;
+      this.menuOpen = false;
+      this.currentRow = {};
+    },
+    handlerRowClick(row) {
+      this.$emit("handlerRowClick", row);
+    },
+  },
+  mounted() {
+    this.handlerWatchScroll();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tableMneu {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    z-index: 9999;
+  }
+  .icons {
+    cursor: pointer;
+    &:hover {
+      color: #409eff;
+    }
+  }
+  .menulist {
+    width: 100px;
+    position: absolute;
+    background-color: rgb(255, 255, 255);
+    border-radius: 5px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: 0.3s;
+    width: 70px;
+    z-index: 9999;
+
+    .item {
+      background-color: rgb(255, 255, 255);
+      line-height: 30px;
+      text-align: center;
+      font-size: 12px;
+      color: rgb(102, 102, 102);
+      cursor: pointer;
+      height: 30px;
+    }
+
+    .item:hover {
+      color: #409eff;
+    }
+  }
+  .headerBox {
+    z-index: 9999;
+    position: absolute;
+    right: -128px;
+    top: 50px;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+    width: 170px;
+    background-color: #fff;
+    &::after {
+      content: " ";
+      position: absolute;
+      top: -5px;
+      left: 16px;
+      width: 0;
+      height: 0;
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+      border-bottom: 7px solid #fff;
+    }
+    .title {
+      margin: 0;
+      padding: 8px 16px;
+      min-height: 32px;
+      border-bottom: 1px solid #e9e9e9;
+      color: #303030;
+      font-weight: 500;
+    }
+    .main {
+      .line {
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 150px;
+        .pre {
+          flex: 1 1 auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" >
+.tableMneu {
+  .el-table th.gutter {
+    display: table-cell !important;
+  }
+  .el-table td,
+  .el-table th {
+    padding: 8px 0;
+  }
+  .el-table--border td {
+    border-right: none;
+  }
+}
+</style>
diff --git a/hb_client/src/components/Gantt/components/slider.vue b/hb_client/src/components/Gantt/components/slider.vue
new file mode 100644
index 0000000..b355b75
--- /dev/null
+++ b/hb_client/src/components/Gantt/components/slider.vue
@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="slider"
+    ref="slider"
+  >
+    <div
+      class="process"
+      :style="{ width }"
+      style="font-size: 12px;color: #ffffff;text-align: right"
+    >
+      <span v-if="per">{{ per }}</span>
+      <span v-else>{{ per }}</span>
+    </div>
+    <div class="process1"
+         :style="{width:process1Width}"
+         style="font-size: 12px;color: #ffffff;text-align: right"
+    >
+      <span v-if="per1"> {{ per1 }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["min", "max", "value", "widths", "per1", "id", "parentId"],
+  data() {
+    return {
+      //滚动条DOM元素
+      slider: null,
+      //拖拽DOM元素
+      thunk: null,
+      //当前值
+      per: this.value,
+      perOk: this.per1,
+      //当前是否拖拽tip
+      isMove: false,
+      // process1Width:'10px',
+    };
+  },
+  watch: {
+    value(newValue, oldValue) {
+      this.per = newValue;
+    }
+  },
+  methods: {
+    thunkMousedown(e) {
+      let width = parseInt(this.width);
+      let disX = e.clientX;
+      this.$emit("thunkMousedown");
+      this.isMove = true;
+      console.log(this.isMove);
+      document.onmousemove = e => {
+        let newWidth = e.clientX - disX + width;
+        let scale = newWidth / this.slider.offsetWidth;
+        this.per = Math.ceil((this.max - this.min) * scale + this.min);
+        this.per = Math.max(this.per, this.min);
+        this.per = Math.min(this.per, this.max);
+        this.$emit("thunkMousemove", e, this.index);
+      };
+      document.onmouseup = event => {
+        this.isMove = false;
+        this.$emit(
+          "thunkMouseup",
+          parseInt(this.scale * 100),
+          event,
+          this.id,
+          this.parentId
+        );
+        document.onmousemove = document.onmouseup = null;
+      };
+      return false;
+    }
+  },
+  //渲染到页面的时候
+  mounted() {
+    this.slider = this.$refs.slider;
+    this.thunk = this.$refs.trunk;
+  },
+  computed: {
+    scale() {
+      return (this.per - this.min) / (this.max - this.min);
+    },
+    width() {
+      if (this.slider) {
+        return this.widths * this.scale + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
+    process1Width() {
+      if (this.slider) {
+        let scale1 = (this.perOk - this.min) / (this.max - this.min);
+        return this.widths * scale1 + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
+    left() {
+      if (this.slider) {
+        return this.widths * this.scale - this.thunk.offsetWidth / 2 + "px";
+      } else {
+        return 0 + "px";
+      }
+    }
+  }
+};
+</script>
+<style>
+
+.slider {
+  position: relative;
+  height: 20px;
+  background: #e4e7ed;
+  border-radius: 3px;
+  cursor: text;
+  user-select: none;
+  width: 100%;
+  display: inline-block
+}
+.slider .process {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 112px;
+  height: 20px;
+  border-radius: 3px;
+  background: #409eff;
+}
+.slider .process1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 10px;
+  height: 20px;
+  border-radius: 3px;
+  background: #11c750;
+}
+
+
+.slider .block i {
+  font-size: 25px;
+  position: relative;
+  left: -3px;
+  top: 15px;
+  cursor: pointer;
+}
+
+.slider .tips i {
+  position: absolute;
+  margin-left: -5px;
+  left: 50%;
+  bottom: -9px;
+  font-size: 16px;
+  color: #000;
+}
+
+</style>
diff --git a/hb_client/src/components/Gantt/index.vue b/hb_client/src/components/Gantt/index.vue
new file mode 100644
index 0000000..1ba94e5
--- /dev/null
+++ b/hb_client/src/components/Gantt/index.vue
@@ -0,0 +1,1374 @@
+<template>
+  <div>
+    <div class="left" style=" width: 400px ;float: left;border-right: 1px solid #f7f7f7">
+      <leftMenu
+        :list="list"
+        ref="leftMenu"
+        :BGScrollTop.sync="BGScrollTop"
+        @TableScrollTop="TableScrollTop"
+        @handlerRowClick="handlerRowClick"
+        @handlerGroup="handlerGroup"
+        @handlerExpand="handlerExpand"
+      ></leftMenu>
+      <div class="rightLine" :style="{ left: rightLineX + 'px' }"></div>
+      <div
+        class="rightLine"
+        :style="{ left: rightLineX + 'px' }"
+        ref="rightLine"
+        @mousedown="rightLineMousedown"
+      ></div>
+    </div>
+    <div class="chart" ref="chart">
+      <!--<div class="left" :style="{ width: rightLineX + 'px' }">
+        <leftMenu
+          :list="list"
+          ref="leftMenu"
+          :BGScrollTop.sync="BGScrollTop"
+          @TableScrollTop="TableScrollTop"
+          @handlerRowClick="handlerRowClick"
+          @handlerGroup="handlerGroup"
+          @handlerExpand="handlerExpand"
+        ></leftMenu>
+        <div class="rightLine" :style="{ left: rightLineX + 'px' }"></div>
+        <div
+          class="rightLine"
+          :style="{ left: rightLineX + 'px' }"
+          ref="rightLine"
+          @mousedown="rightLineMousedown"
+        ></div>
+      </div>-->
+      <div class="date">
+        <div class="years" v-for="item in allDays" :key="item.year">
+          <div
+            class="month"
+            v-for="(value, key) in item.month[0]"
+            :key="value + 'aa' + key"
+            :style="{ width: value.length * currentDaySize.value + 'px' }"
+          >
+            <div class="month-top">{{ item.year }}年{{ key }}月</div>
+          </div>
+        </div>
+        <div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
+        <div class="allDaysArray">
+          <div class="alldays">
+            <div
+              v-for="(j, index) in days"
+              :key="j + 'bb' + index"
+              class="day"
+              :style="{ width: currentDaySize.value + 'px' }"
+            >
+              <template v-if="currentDaySize.value === 20">
+                <span
+                  v-if="j.today"
+                  class="dateNum todayDateNum"
+                  style="border-left:1px solid #d7d7d7;"
+                >
+                  今天
+                </span>
+                <span
+                  v-else
+                  class="dateNum"
+                  :style="{
+                    borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
+                  }"
+                  :class="{
+                    weekday: j.weekday == 0 || j.weekday == 6,
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >{{ j.date }}</span>
+                <span
+                  class="dateBG"
+                  :class="{
+                    weekday2: j.weekday == 0,
+                    weekday1: j.weekday == 6,
+                    today: j.today
+                  }"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+              <template v-if="currentDaySize.value == 10">
+                <span
+                  class="dateNum"
+                  :class="{
+                    weekday: j.weekday == 0 || j.weekday == 6,
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end,
+                    nodBorder:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >
+                  <div
+                    v-show="
+                      (j.width === currentLineDay.end &&isHover &&j.weekday !== 1) ||
+                        (j.width === currentLineDay.start &&isHover &&j.weekday !== 1) ||
+                        j.weekday === 1
+                    "
+                    style="width:100%;height:100%;"
+                    :style="{
+                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
+                    }"
+                  >
+                    {{ j.date }}
+                  </div>
+                </span>
+                <span
+                  class="dateBG"
+                  :class="{
+                    weekday2: j.weekday === 0,
+                    weekday1: j.weekday === 6,
+                    today: j.today
+                  }"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+              <template v-if="currentDaySize.value === 2">
+                <span
+                  class="dateNum"
+                  :class="{
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end,
+                    nodBorder:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >
+                  <div
+                    v-show="
+                      (j.width === currentLineDay.end && isHover && j.date !== 1) ||
+                        (j.width === currentLineDay.start &&isHover &&j.date !== 1) ||
+                        j.date === 1
+                    "
+                    style="width:100%;height:100%;font-size:10px!important;"
+                    :style="{
+                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
+                    }"
+                  >
+                    {{ j.date }}
+                  </div>
+                </span>
+                <span
+                  class="dateBG weekday2"
+                  :class="{today: j.today}"
+                  style="border-right:none;"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+            </div>
+          </div>
+          <div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
+            <template v-for="(item, index) in computedList">
+              <!--<div :key="item.id" class="tetst">{{item.isShow}}</div>-->
+              <div
+                v-show="item.isShow"
+                :ref="'line' + item.id"
+                :key="item.id + 'cc'+ index"
+
+                class="line"
+                :style="{
+                  left: item.left + 'px',
+                  width: item.widthMe + 'px',
+                  top: item.top + 'px'
+                }"
+                @mouseover="
+                  lineMouseover(
+                    `line${item.id}`,
+                    $event,
+                    item.id,
+                    item.parentId,
+                    index
+                  )"
+                @mouseleave="lineMouseleave"
+                @mouseenter="
+                  lineMouseenter(
+                    `line${item.id}`,
+                    $event,
+                    item.id,
+                    item.parentId,
+                    index
+                  )"
+              >
+                <slider
+                  v-show="item.type == 1"
+                  :id="item.id"
+                  v-model="item.per"
+                  :min="0"
+                  :max="item.per"
+                  :per1="item.per1"
+                  :disabled="disable"
+                  :widths="item.widthChild"
+                ></slider>
+              </div>
+              <div
+                v-if="item.type == 3"
+                :key="item.id+'dd'+index"
+                class="group"
+                :style="{
+                  top: item.top + 'px',
+                  left: item.left + 'px',
+                  width: item.widthMe + 'px'
+                }"
+              >
+                <div class="progress" :style="{ width: item.per + '%' }"></div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div class="toolTip">
+          <!--<div class="today base" @click="handleGoToday">今天</div>-->
+          <el-dropdown trigger="click">
+            <span class="base">
+              {{currentDaySize.label}}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu
+              slot="dropdown"
+              :style="{ left: this.left + 'px !important' }"
+            >
+              <el-dropdown-item
+                v-for="item in currentDaySizeOptions"
+                :key="item.value + 'ee'"
+                @click.native="handleSetDaySize(item)"
+              >
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <transition name="el-zoom-in-center">
+          <div
+            v-show="isShowMsg"
+            :style="{
+              left: currentProjectMsg.left + 'px',
+              top: currentProjectMsg.top + 'px'
+            }"
+            class="projectMsg"
+          >
+            <div class="lineMsg projectName">
+              {{ currentProjectMsg.name }}
+            </div>
+            <div class="lineMsg">
+              <span class="title">工作周期：</span>
+              <span>{{ currentProjectMsg.allTime }}天</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">当前进度：</span>
+              <span>{{ currentProjectMsg.per }}</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">合格数量：</span>
+              <span>{{ currentProjectMsg.per1 }}</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">开始时间：</span>
+              <span>{{ currentProjectMsg.startTime }}</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">结束时间：</span>
+              <span>{{ currentProjectMsg.endTime }}</span>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import slider from "./components/slider";
+  import leftMenu from "./components/leftMenu";
+  export default {
+    components: {
+      slider,
+      leftMenu,
+    },
+    props: {
+      proList:{
+        type:Array,
+        default: () => {
+          return []
+        }} ,
+    },
+    data() {
+      return {
+        timeRange: [],
+        disable: true,
+        //当前项是否是子集
+        isChildren: false,
+        dialogVal: false,
+        //title
+        title: "新建",
+        //定时器
+        timer: null,
+        //leftMenu的右侧伸缩线
+        rightLineX: 400,
+        fixdTopMonth: "",
+        //近三年的所有年月日
+        allDays: [],
+        //所有的天数
+        days: [],
+        //月数
+        monthArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        //当前hover的项目起止时间
+        currentLineDay: {
+          start: 0,
+          end: 0
+        },
+        //当前的时间大小
+        currentDaySize: {
+          label: "天",
+          value: 20
+        },
+        currentDaySizeOptions: [
+          {
+            label: "天",
+            value: 20
+          },
+          {
+            label: "周",
+            value: 10
+          },
+          {
+            label: "月",
+            value: 2
+          }
+        ],
+        //是否显示信息
+        isShowMsg: false,
+        //当前hover的项目信息
+        currentProjectMsg: {
+          name: "",
+          allTime: 0,
+          per: 0,
+          per1: 0,
+          startTime: 0,
+          endTime: 0,
+          left: 0,
+          top: 0
+        },
+        isHover: false,
+        showFixdTopMonth: false,
+        currentListIndex: "",
+        //正在编辑的row
+        editRow: [],
+        currentRow: null,
+        // BG滚动高度
+        BGScrollTop: 0,
+        // 背景高度
+        lineBGHeight: 0,
+        expandArr: [],
+        list:[],
+      };
+    },
+    mounted(){
+      debugger;
+      this.list = [...this.proList];
+      document.addEventListener("scroll", this.handleScroll);
+      this.list=[...this.list];
+      this.handlerCheckList(this.list);
+      this.getDay();
+      this.setStoneLine();
+    },
+    computed: {
+      computedList() {
+        let arr = [];
+        this.list.forEach(item => {
+          if (!item.children || item.children.length < 1) {
+            arr.push(item);
+          } else if (item.children && item.children.length >= 1) {
+            arr.push(item);
+            arr = arr.concat(item.children);
+          }
+        });
+        return arr;
+      },
+      left() {
+        return window.innerWidth - 30;
+      },
+      //当前年份
+      currentYear() {
+        return new Date().getFullYear();
+      },
+      //当前月份
+      currentMonth() {
+        return new Date().getMonth() + 1;
+      },
+      //当前日
+      currentDay() {
+        return new Date().getDate();
+      }
+    },
+    methods: {
+      TableScrollTop(val) {
+        let lineBG = this.$refs.lineBG;
+        lineBG.scrollTo(0, val);
+        // lineBG.scrollTo({
+        //   top: val,
+        //   left: 0,
+        //   behavior: "smooth"
+        // });
+      },
+      handlerBGScroll(e) {
+        this.BGScrollTop = this.$refs.chart.scrollTop;
+      },
+      //过滤导入的数据
+      handlerCheckList(list) {
+        list.forEach((item, index) => {
+          item.planTime = [item.startTime, item.endTime];
+          item.left = this.computedTimeWidth(item.startTime);
+          item.widthMe = item.widthChild = this.computedTimeWidth(item.startTime, item.endTime);
+          item.isShow = true;
+          if (index - 1 < 0) {
+            item.top = 15;
+            if (item.type == 3) {
+              item.isexpand = true;
+              if (item.children.length > 0) {
+                item.children.forEach((k, i) => {
+                  k.planTime = [k.startTime, k.endTime];
+                  k.top = item.top + i * 40 + 40;
+                  k.isShow = true;
+                  k.left = this.computedTimeWidth(k.startTime);
+                  k.widthMe = k.widthChild = this.computedTimeWidth(k.startTime, k.endTime, k);
+                });
+              }
+            }
+          } else {
+            if (list[index - 1].type == 3) {
+              item.top =
+                list[index - 1].top + list[index - 1].children.length * 40 + 40;
+              if (item.type == 3) {
+                item.isexpand = true;
+                if (item.children.length > 0) {
+                  item.children.forEach((z, o) => {
+                    z.planTime = [z.startTime, z.endTime];
+                    z.top = item.top + o * 40 + 40;
+                    z.isShow = true;
+                    z.left = this.computedTimeWidth(z.startTime);
+                    z.widthMe = z.widthChild = this.computedTimeWidth(z.startTime, z.endTime, z);
+                  });
+                }
+              }
+            } else {
+              item.top = list[index - 1].top + 40;
+            }
+          }
+        });
+        list.forEach(item => {
+          if (item.type == 3) {
+            this.setGroupWidth(item.id, list);
+            this.setGroupPer(item.id, list);
+          }
+        });
+        this.list = list;
+        this.setStoneLine(list);
+        window.scrollTo({
+          top: 0,
+          left: 400,
+          behavior: "smooth"
+        });
+      },
+      //设置左侧leftmenu高亮
+      handlerSelect(row) {
+        this.$refs.leftMenu.handlerSelect(row);
+      },
+      //分组是否展开
+      handlerExpand(row, expand) {
+        let rowIndex = this.list.findIndex(item => {
+          return item.id == row.id;
+        });
+        this.list[rowIndex].expand = expand;
+        if (
+          this.list[rowIndex].children &&
+          this.list[rowIndex].children.length > 0
+        ) {
+          this.list[rowIndex].children.forEach(k => {
+            k.isShow = expand;
+          });
+        }
+        this.resetTop(rowIndex, !expand, true);
+      },
+      // 根据时间计算距离
+      computedTimeWidth(startTime, endTime) {
+        debugger;
+        if (!endTime) {
+          let left =
+            (Math.floor(startTime - new Date(`${this.currentYear - 1}/01/01`).getTime()) /
+              (1000 * 60 * 60 * 24)) * this.currentDaySize.value;
+          return left;
+        } else {
+          let width = (Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) * this.currentDaySize.value + this.currentDaySize.value;
+          console.log(width);
+          return width;
+        }
+      },
+      //修改后续高度
+      resetTop(zindex, reduce, isexpand) {
+        // console.log(zindex, reduce, isexpand);
+        let num = reduce ? -40 : 40;
+        if (!reduce && !isexpand) {
+          // console.log(2);
+          this.list.forEach((item, index) => {
+            if (index > zindex) {
+              item.top = item.top + 40;
+              if (item.children && item.children.length > 0) {
+                item.children.forEach((k, i) => {
+                  k.top = item.top + 40 * i + 40;
+                });
+              }
+            }
+          });
+        } else {
+          // console.log(1);
+          this.list.forEach((item, index) => {
+            if (index > zindex) {
+              item.top = item.top + num * this.list[zindex].children.length;
+              if (item.children && item.children.length > 0) {
+                item.children.forEach((k, i) => {
+                  k.top = item.top + 40 * i + 40;
+                });
+              }
+            }
+          });
+        }
+      },
+      retDelTop(zindex, length) {
+        this.list.forEach((item, index) => {
+          if (index >= zindex) {
+            item.top = item.top - 40 * length;
+            if (item.children && item.children.length > 0) {
+              item.children.forEach((k, i) => {
+                k.top = item.top + 40 * i + 40;
+              });
+            }
+          }
+        });
+      },
+      //根据id设置group的宽度
+      setGroupWidth(id, lists) {
+        let parent;
+        if (lists) {
+          parent = lists.find(item => {
+            return item.id == id;
+          });
+        } else {
+          parent = this.list.find(item => {
+            return item.id == id;
+          });
+        }
+        let left = Math.min.apply(
+          Math,
+          parent.children.map(o => {
+            return o.left;
+          })
+        );
+        let arr = [];
+        parent.children.forEach(item => {
+          arr.push(item.left + item.widthMe);
+        });
+        let width = Math.max.apply(Math, arr);
+        let widthMe = width - left;
+        parent.widthMe = parent.widthChild = widthMe;
+        parent.left = left;
+        // return parent;
+      },
+      // 转为分组
+      handlerGroup(row) {
+        let index = this.list.findIndex(item => {
+          return item.id == row.id;
+        });
+        this.list[index].type = "3";
+        this.list[index].per = 0;
+        this.list[index].id = new Date().getTime();
+        this.list[index].left = 0;
+        this.list[index].widthMe = this.list[index].widthChild = 0;
+        this.$set(this.list, index, this.list[index]);
+      },
+      //leftMenu宽度设置
+      rightLineMousedown(e) {
+        let cx = e.clientX;
+        let result;
+        document.onmousemove = event => {
+          result = event.clientX - cx;
+          if (cx + result <= 441) return;
+          this.$refs.rightLine.style.left = cx + result + "px";
+        };
+        document.onmouseup = () => {
+          document.onmousemove = document.onmouseup = null;
+          if (cx + result <= 441) {
+            this.rightLineX = 441;
+            return;
+          }
+          this.rightLineX = cx + result;
+        };
+      },
+      //rowClick事件
+      handlerRowClick(row) {
+        this.currentRow = row;
+        this.$refs.chart.scrollTo({
+          top: 0,
+          left: row.left - 100,
+          behavior: "smooth"
+        });
+      },
+      //更改daySize-----按天/按周/按月
+      handleSetDaySize(item) {
+        this.currentDaySize = item;
+        this.days.forEach((item, index) => {
+          item.width = (index + 1) * this.currentDaySize.value;
+        });
+        this.handleScroll();
+        if (this.currentRow) {
+          let rs = this.computedList.find(o => {
+            return o.id == this.currentRow.id;
+          });
+          this.$nextTick(() => {
+          });
+        }
+      },
+      //滑动进度条事件
+      thunkMousemove() {
+        this.isShowMsg = false;
+      },
+      //滑动进度条事件
+      thunkMousedown() {
+        this.isShowMsg = false;
+      },
+      //滑动进度条事件
+      thunkMouseup(per, e, id, parentId) {
+        // console.log(per, id, parentId);
+        let cindex = this.computedList.findIndex(z => {
+          return z.id == id;
+        });
+        if (parentId) {
+          let index = this.list.findIndex(k => {
+            return k.id == parentId;
+          });
+          // console.log(parentId);
+          this.list.forEach(item => {
+            if (item.id == parentId) {
+              // console.log(item, this.list);
+              item.children.forEach(k => {
+                if (k.id == id) {
+                  k.per = per;
+                }
+              });
+            }
+          });
+          this.setGroupPer(parentId);
+          this.$set(this.list, index, this.list[index]);
+        } else {
+          this.list.forEach(item => {
+            if (item.id == id) {
+              item.per = per;
+            }
+          });
+        }
+        this.checkIsin(`line${id}`, e, id, parentId, cindex);
+      },
+      //设置分组百分比
+      setGroupPer(id, lists) {
+        let z;
+        if (lists) {
+          z = lists.find(o => {
+            return o.id == id;
+          });
+        } else {
+          z = this.list.find(o => {
+            return o.id == id;
+          });
+        }
+        let count = 0;
+        let length = z.children.length;
+        z.children.forEach(item => {
+          count = count + (item.per / 100) * (1 / length);
+        });
+        z.per = Math.round(count * 100);
+      },
+      //回到今天
+      handleGoToday() {
+        let s =
+          Math.round(window.innerWidth / this.currentDaySize.value / 2) *
+          this.currentDaySize.value - this.rightLineX;
+        let width =
+          (Math.floor(
+            new Date(
+              `${this.currentYear}/${this.currentMonth}/${this.currentDay}`
+            ).getTime() - new Date(`${this.currentYear - 1}/01/01`).getTime()
+            ) /
+            (1000 * 60 * 60 * 24)) *
+          this.currentDaySize.value - s;
+        window.scrollTo({
+          top: 0,
+          left: width,
+          behavior: "smooth"
+        });
+      },
+      //根据距离计算时间
+      /**
+       * @param  {Number} width
+       * @param  {Boolean|String} time
+       */
+      computedWithTime(width, time) {
+        let startTime = (width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
+          new Date(`${this.currentYear - 1}/01/01`).getTime();
+        let s = new Date(startTime);
+        if (time && time == true) {
+          return s.getTime();
+        } else if (time && time == "YD") {
+          return `${s.getFullYear()}/${s.getMonth() + 1}`;
+        } else {
+          return `${s.getFullYear()}/${s.getMonth() + 1}/${s.getDate()}`;
+        }
+      },
+      //根据index值和e判断是否在当前line的范围里，是否展示时间和msg框
+      /**
+       * @param  {String} dom ref
+       * @param  {Object} events $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      checkIsin(dom, events, id, parentId, index) {
+        let line = this.$refs[dom][0];
+        let lineTop = parseInt(line.style.top);
+        let lineDown = lineTop + 16;
+        let lineLeft = parseInt(line.style.left);
+        let lineRight = parseInt(this.computedList[index].widthMe) + lineLeft;
+        if (
+          events.pageX - this.rightLineX >= lineLeft &&
+          events.pageX - this.rightLineX <= lineRight &&
+          events.y - 40 >= lineTop &&
+          events.y - 40 <= lineDown
+        ) {
+          this.lineMouseover(dom, events, id, parentId, index);
+          this.lineMouseenter(dom, events, id, parentId, index);
+        } else {
+          this.isShowMsg = false;
+          this.currentLineDay = {
+            start: 0,
+            end: 0
+          };
+        }
+      },
+      /**
+       * @param  {String} dom ref
+       * @param  {Object} events $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      //鼠标悬停展示上部日期
+      lineMouseover(dom, e, id, parentId, index) {
+        let start =
+          Math.round(
+            parseInt(this.$refs[dom][0].style.left) / this.currentDaySize.value
+          ) *
+          this.currentDaySize.value +
+          this.currentDaySize.value;
+        let end =
+          parseInt(this.$refs[dom][0].style.left) +
+          parseInt(this.$refs[dom][0].style.width);
+        end =
+          Math.round(end / this.currentDaySize.value) * this.currentDaySize.value;
+        this.currentLineDay = {
+          start,
+          end
+        };
+        this.isHover = true;
+        this.handlerSelect(this.computedList[index]);
+        this.lineMouseenter(dom, e, id, parentId, index);
+      },
+      /**
+       * @param  {String} dom ref
+       * @param  {Object} events $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      //鼠标进入显示当前项目的基本信息框
+      lineMouseenter(dom, e, id, parentId, index) {
+        let start =
+          Math.round(
+            parseInt(this.$refs[dom][0].style.left) / this.currentDaySize.value
+          ) * this.currentDaySize.value;
+        let end =
+          parseInt(this.$refs[dom][0].style.left) +
+          parseInt(this.$refs[dom][0].style.width);
+        end =
+          Math.round(end / this.currentDaySize.value) *
+          this.currentDaySize.value -
+          this.currentDaySize.value;
+        this.currentProjectMsg = {
+          name: this.computedList[index].name,
+          allTime: (end - start) / this.currentDaySize.value + 1,
+          per: this.computedList[index].per,
+          per1: this.computedList[index].per1,
+          startTime: this.computedWithTime(start),
+          endTime: this.computedWithTime(end),
+          left: e.clientX,
+          top: e.clientY + 20
+        };
+        /*
+        * left:
+            e.clientX + 220 - this.$refs.chart.scrollLeft >= this.$refs.chart.clientWidth
+              ? e.clientX - 220 - 400
+              : e.clientX ,
+        * */
+        this.isShowMsg = true;
+      },
+      //鼠标离开信息消失，时间显示消失
+      /**
+       * @param  {Object} e $event
+       * @param  {Boolean} move 是否移动状态
+       */
+      lineMouseleave(e, move) {
+        if (move) {
+          this.isShowMsg = false;
+          this.currentProjectMsg = {
+            name: "",
+            allTime: 0,
+            per: 0,
+            startTime: 0,
+            endTime: 0,
+            left: 0,
+            top: 0
+          };
+          // this.handlerSelect();
+          return;
+        }
+        this.currentLineDay = {
+          start: 0,
+          end: 0
+        };
+        this.isHover = false;
+        this.isShowMsg = false;
+        this.currentProjectMsg = {
+          name: "",
+          allTime: 0,
+          per: 0,
+          startTime: 0,
+          endTime: 0,
+          left: 0,
+          top: 0
+        };
+        this.handlerSelect();
+      },
+      //获取要显示的所有天数
+      getDay() {
+        this.getAllDate();
+      },
+      //判断是否为闰年
+      /**
+       * @param  {Number} year 传入年份
+       */
+      isLeapYear(year) {
+        if (year % 4 > 0) {
+          return true;
+        }
+        return false;
+      },
+      getAllDate() {
+        let obj = {}, arr = [];
+       /* let start = new Date(this.timeRange[0]).getFullYear();
+        let end = new Date(this.timeRange[1]).getFullYear();*/
+        /*for (let i = start; i < end + 1; i++) {
+          arr.push(i)
+        }*/
+        arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1];
+        arr.forEach(item => {
+          obj.year = item;
+          obj.days = this.isLeapYear(item) ? 365 : 366;
+          this.allDays.push(obj);
+          obj = {};
+        });
+        this.checkDate();
+      },
+      //根据年份天数创建月份及月份天数数组
+      checkDate() {
+        this.allDays.forEach(item => {
+          item.month = this.handleMonthDay(item.days, item.year);
+        });
+        this.allDays.forEach(element => {
+          if (element.year == this.currentYear) {
+            element.month[0][this.currentMonth].forEach(k => {
+              if (k.date == this.currentDay) {
+                k.today = true;
+              }
+            });
+          }
+        });
+        let arr = [];
+        this.allDays.forEach(item => {
+          arr = arr.concat(item.month);
+        });
+        arr.forEach(item => {
+          for (var j in item) {
+            this.days = this.days.concat(item[j]);
+          }
+        });
+        this.days.forEach((item, index) => {
+          item.width = (index + 1) * this.currentDaySize.value;
+        });
+      },
+      /**
+       * @param  {Number} days
+       * @param  {Number} year
+       */
+      handleMonthDay(days, year) {
+        let arr = [];
+        let obj = {};
+        this.monthArr.forEach(item => {
+          obj[item] = this.checkMonthDays(item, days);
+        });
+        arr.push(obj);
+        let s = arr[0];
+        for (let item in s) {
+          s[item] = this.addNum(s[item], item, year);
+        }
+        // console.log(arr);
+        return arr;
+      },
+      /**
+       * @param  {number} num 天数
+       * @param  {number} month 月份
+       * @param  {number} year 年份
+       */
+      addNum(num, month, year) {
+        let arr = [];
+        let obj = {};
+        for (let i = 1; i <= num; i++) {
+          obj.date = i;
+          obj.weekday = new Date(`${year}/ ${month} / ${i}`).getDay();
+          arr.push(obj);
+          obj = {};
+        }
+        return arr;
+      },
+      //根据月份返回天数
+      /**
+       * @param  {Number} month 月份
+       * @param  {Number} days 天数
+       */
+      checkMonthDays(month, days) {
+        let day;
+        switch (month) {
+          case 1:
+          case 3:
+          case 5:
+          case 7:
+          case 8:
+          case 10:
+          case 12:
+            return 31;
+            // eslint-disable-next-line no-unreachable
+            break;
+          case 4:
+          case 6:
+          case 9:
+          case 11:
+            return 30;
+            // eslint-disable-next-line no-unreachable
+            break;
+          case 2:
+            day = days == 365 ? 28 : 29;
+            return day;
+            // eslint-disable-next-line no-unreachable
+            break;
+        }
+      },
+      //设置里程碑线的高度
+      setStoneLine(isFirst) {
+        this.$nextTick(() => {
+          let height = window.getComputedStyle(
+            document.getElementsByClassName("lineBG")[0]
+          ).height;
+          this.lineBGHeight = height;
+        });
+      },
+      //顶部固定时间
+      handleScroll() {
+        let w = window.scrollX;
+        if (w <= 62) {
+          this.showFixdTopMonth = false;
+        } else {
+          this.showFixdTopMonth = true;
+        }
+        let time = this.computedWithTime(w, "YD");
+        this.fixdTopMonth = time;
+      }
+    },
+    watch: {
+      currentDaySize(newValue, oldValue) {
+        this.list.forEach(item => {
+          item.left = (item.left / oldValue.value) * newValue.value;
+          item.widthMe = item.widthChild =
+            (item.widthMe / oldValue.value) * newValue.value;
+          if (item.children && item.children.length > 0) {
+            item.children.forEach(k => {
+              k.left = (k.left / oldValue.value) * newValue.value;
+              k.widthMe = k.widthChild =
+                (k.widthMe / oldValue.value) * newValue.value;
+            });
+          }
+        });
+      }
+    },
+
+    beforeDestroy() {
+      window.removeEventListener("scroll", this.handleScroll);
+      document.onmousemove = document.onmouseup = null;
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .chart {
+    height: 40vh;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+    overflow-x: scroll;
+    background: #ffffff;
+
+    .header {
+      height: 40px;
+      position: relative;
+
+      .header-left {
+        margin-left: 10px;
+        box-sizing: border-box;
+        padding-top: 5px;
+        height: 40px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+      }
+    }
+
+    .left {
+      position: absolute;
+      height: 89vh;
+      background-color: #fff;
+      z-index: 999;
+      border-right: 1px solid #d7d7d7;
+      .rightLine {
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 2px;
+        background-color: #d7d7d7;
+        box-shadow: 4px 2px 12px 0 rgba(0, 0, 0, 0.2);
+        cursor: col-resize;
+
+        &:hover {
+          background-color: #409eff;
+        }
+      }
+    }
+
+    .showCurrentLineDate {
+      position: fixed;
+      top: 0;
+      background-color: #409eff;
+      color: #fff;
+      height: 20px;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .projectMsg {
+      box-sizing: border-box;
+      padding: 20px;
+      position: fixed;
+      width: 230px;
+      /*height: 230px;*/
+      z-index: 12000;
+      background-color: #fff;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      border: 1px solid #ebeef5;
+
+      .lineMsg {
+        margin-bottom: 10px;
+
+        &.projectName {
+          font-size: 22px;
+          color: #333333;
+          text-align: center;
+          border-bottom: 1px solid #999999;
+        }
+
+        span {
+          font-size: 14px;
+          color: #909090;
+        }
+
+        .title {
+          margin-right: 5px;
+          color: #666666
+
+        }
+      }
+    }
+
+    .date {
+      display: flex;
+      height: 100%;
+      position: relative;
+      /*overflow: scroll;*/
+      .topMonth {
+        // width: 100px;
+        background-color: #fff;
+        position: fixed;
+        top: 40px;
+        height: 21px;
+        line-height: 21px;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        color: #909090 !important;
+      }
+
+      .toolTip {
+        position: fixed;
+        right: 0;
+        top: 90px;
+        z-index: 999;
+
+        .base {
+          display: inline-block;
+          text-align: center;
+          height: 30px;
+          line-height: 30px;
+          padding: 0 15px;
+          background-color: #fff;
+          font-size: 14px;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+          font-weight: 400;
+          color: #303030;
+          border-radius: 3px;
+          box-shadow: 0 3px 12px 0 rgba(48, 48, 48, 0.05),
+          0 3px 6px 0 rgba(48, 48, 48, 0.1);
+          margin-right: 20px;
+
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+
+      .group {
+        position: absolute;
+        background-color: #909090 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        height: 14px !important;
+        line-height: 14px !important;
+        // margin-top: 5px;
+        clip-path: polygon(
+            100% 0,
+            100% 100%,
+            calc(100% - 8px) 60%,
+            8px 60%,
+            0 100%,
+            0 0
+        );
+        // > div {
+        //   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        // }
+        .progress {
+          // width: 50px;
+          background-color: #606060 !important;
+          height: 100%;
+        }
+      }
+    }
+
+    .line {
+      position: absolute;
+      height: 20px;
+      background: #abf7f7;
+
+      .rightCurDrag {
+        cursor: e-resize;
+        width: 10px;
+        background-color: #000;
+        height: 16px;
+        position: absolute;
+        right: -15px;
+        transform: translateY(-50%);
+        top: 50%;
+        border-radius: 3px;
+        user-select: none;
+      }
+
+      .leftCurDrag {
+        cursor: e-resize;
+        width: 10px;
+        background-color: #000;
+        height: 16px !important;
+        position: absolute;
+        left: -15px;
+        transform: translateY(-50%);
+        top: 50%;
+        border-radius: 3px;
+        user-select: none;
+      }
+
+      .stoneLine {
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        margin-left: -1px;
+        width: 2px;
+        background-color: #24b47e;
+      }
+
+      .milestone {
+        position: absolute;
+        left: 50%;
+        // transform: translateX(-50%);
+        cursor: move;
+        margin-left: -10px;
+        width: 20px;
+        height: 20px;
+        background-color: #24b47e;
+        transform: rotate(-45deg);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        i {
+          transform: rotate(45deg);
+          color: #fff;
+          z-index: 1;
+        }
+      }
+    }
+
+    .years {
+      display: flex;
+      height: 100%;
+
+      .month {
+        height: 100%;
+
+        .month-top {
+          height: 21px;
+          line-height: 21px;
+          font-size: 12px !important;
+          font-weight: 600 !important;
+          color: #909090 !important;
+        }
+      }
+    }
+
+    .allDaysArray {
+      position: absolute;
+      left: 0px;
+      top: 21px;
+      height: calc(100% - 21px);
+
+      .alldays {
+        display: flex;
+      }
+
+      .lineBG {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: scroll;
+      }
+
+      .weekday {
+        color: #c7c7c7;
+      }
+
+      .weekday1 {
+        border-left: 1px solid #d7d7d7;
+        background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
+      }
+
+      .weekday2 {
+        border-right: 1px solid #d7d7d7;
+        background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
+        width: 100%;
+      }
+
+      .day {
+        // width: 40px;
+        position: relative;
+        display: inline-block;
+        height: calc(100% - 21px);
+        box-sizing: border-box;
+        text-align: center;
+
+        .isHover {
+          background-color: #409eff;
+          color: #fff;
+        }
+
+        .nodBorder {
+          div {
+            border-left: none !important;
+          }
+        }
+
+        .dateNum {
+          font-size: 12px;
+          line-height: 20px;
+          display: block;
+          height: 20px;
+          // border-left: 1px solid #d7d7d7;
+          border-bottom: 1px solid #d7d7d7;
+          box-sizing: border-box;
+        }
+
+        .todayDateNum {
+          background-color: #f0a100;
+          color: #fff;
+        }
+
+        .dateBG {
+          position: absolute;
+          top: 20px;
+          left: 0px;
+          display: block;
+          // height: 100%;
+        }
+
+        .today {
+          position: relative;
+        }
+
+        .today::after {
+          content: "";
+          height: 100%;
+          width: 2px;
+          background-color: #f0a100;
+          position: absolute;
+          // left: 20px;
+          top: 0px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/hb_client/src/views/pm/gantt.vue b/hb_client/src/views/pm/gantt.vue
index 36b3b6c..564d3b3 100644
--- a/hb_client/src/views/pm/gantt.vue
+++ b/hb_client/src/views/pm/gantt.vue
@@ -4,11 +4,12 @@
       <el-date-picker
         v-model="timeRange"
         type="daterange"
-        start-placeholder="计划开始日期"
-        end-placeholder="计划结束日期"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
         format="yyyy 年 MM 月 dd 日"
         value-format="yyyy-MM-dd"
       >
+        <!--   @change="timeRangeChange"-->
       </el-date-picker>
     </el-row>
     <div class="chart" ref="chart">
@@ -944,7 +945,7 @@
         };
         this.handlerSelect();
       },
-      //获取近三年的所有天数
+      //获取要显示的所有天数
       getDay() {
         this.getAllDate();
       },
@@ -959,8 +960,13 @@
         return false;
       },
       getAllDate() {
-        let obj = {};
-        let arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1];
+        let obj = {},arr=[];
+        let start = new Date(this.timeRange[0]).getFullYear();
+        let end = new Date(this.timeRange[1]).getFullYear();
+        for(let i=start;i<end+1;i++){
+          arr.push(i)
+        }
+        arr = [  this.currentYear -1,this.currentYear, this.currentYear + 1];
         arr.forEach(item => {
           obj.year = item;
           obj.days = this.isLeapYear(item) ? 365 : 366;
@@ -974,7 +980,6 @@
         this.allDays.forEach(item => {
           item.month = this.handleMonthDay(item.days, item.year);
         });
-        // console.log(this.allDays);
         this.allDays.forEach(element => {
           if (element.year == this.currentYear) {
             element.month[0][this.currentMonth].forEach(k => {
@@ -1063,15 +1068,6 @@
             break;
         }
       },
-      setList() {
-        /*getPlanGantt().then(res=>{
-          if(res.code===200){
-            this.list = res.data.results;
-          }else{
-            this.$message.error(res.msg);
-          }
-        })*/
-      },
       //设置里程碑线的高度
       setStoneLine(isFirst) {
         this.$nextTick(() => {
@@ -1112,7 +1108,6 @@
     mounted() {
       document.addEventListener("scroll", this.handleScroll);
       this.getDay();
-      this.setList();
       this.setStoneLine();
     },
     beforeDestroy() {
diff --git a/hb_client/src/views/pm/plan.vue b/hb_client/src/views/pm/plan.vue
index 7cc3913..4d114e1 100644
--- a/hb_client/src/views/pm/plan.vue
+++ b/hb_client/src/views/pm/plan.vue
@@ -1,63 +1,62 @@
 <template>
   <div class="app-container">
     <el-card class="box-card">
-     <div slot="header" class="clearfix">
-    <span>生产任务列表</span>
-  
-  </div>
-        
-         <el-table
+      <div slot="header" class="clearfix">
+        <span>生产任务列表</span>
+
+      </div>
+
+      <el-table
         :data="productionplanList.results"
-       border
+        border
         fit
         stripe
         style="width: 100%"
-         height="300"
-        
+        height="300"
+
       >
-        <el-table-column type="index" width="50" />
-        
-      
-        
-         <el-table-column label="任务编号" width="110"> 
+        <el-table-column type="index" width="50"/>
+
+
+        <el-table-column label="任务编号" width="110">
           <template slot-scope="scope">{{ scope.row.number }}</template>
         </el-table-column>
-         <el-table-column label="订单编号" width="110">
+        <el-table-column label="订单编号" width="110">
           <template slot-scope="scope">{{ scope.row.order_.number }}</template>
         </el-table-column>
-         <el-table-column label="合同编号" width="110">
+        <el-table-column label="合同编号" width="110">
           <template slot-scope="scope">{{ scope.row.order_.contract_.number }}</template>
         </el-table-column>
-        
-         <el-table-column label="产品名称" width="150" show-overflow-tooltip>
+
+        <el-table-column label="产品名称" width="150" show-overflow-tooltip>
           <template slot-scope="scope">{{ scope.row.product_.name }}</template>
         </el-table-column>
-       <el-table-column label="产品型号" width="110">
+        <el-table-column label="产品型号" width="110">
           <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
         </el-table-column>
-         <el-table-column label="产品单位" width="110">
+        <el-table-column label="产品单位" width="110">
           <template slot-scope="scope">{{ scope.row.product_.unit }}</template>
         </el-table-column>
-         <el-table-column label="生产数量" width="110">
+        <el-table-column label="生产数量" width="110">
           <template slot-scope="scope">{{ scope.row.count }}</template>
         </el-table-column>
-         <el-table-column label="计划开工时间" width="110">
+        <el-table-column label="计划开工时间" width="110">
           <template slot-scope="scope">{{ scope.row.start_date }}</template>
         </el-table-column>
-         <el-table-column label="计划完工时间" width="110"> 
+        <el-table-column label="计划完工时间" width="110">
           <template slot-scope="scope">{{ scope.row.end_date }}</template>
         </el-table-column>
-         <el-table-column label="交付截止时间" width="110">
+        <el-table-column label="交付截止时间" width="110">
           <template slot-scope="scope">{{ scope.row.order_.delivery_date }}</template>
         </el-table-column>
-        
-          <el-table-column label="是否生成子计划" width="120">
-          <template slot-scope="scope" >
+
+        <el-table-column label="是否生成子计划" width="120">
+          <template slot-scope="scope">
             <el-tag v-if="scope.row.is_planed==false">否</el-tag>
-             <el-tag  v-if="scope.row.is_planed==true">是</el-tag>
-            </template>
+            <el-tag v-if="scope.row.is_planed==true">是</el-tag>
+          </template>
         </el-table-column>
-  <el-table-column label="创建时间" width="160">
+        <el-table-column label="创建时间" width="160">
           <template slot-scope="scope">{{ scope.row.create_time }}</template>
         </el-table-column>
         <el-table-column
@@ -68,17 +67,19 @@
         >
           <template slot-scope="scope">
             <el-link type="primary"
-              v-if="scope.row.is_planed"
-              @click="handleselectplan(scope)"
-              >查看子计划</el-link>
-           <el-link type="primary"
-              v-else
-              @click="handleWork(scope)"
-              >生成子计划</el-link>
+                     v-if="scope.row.is_planed"
+                     @click="handleselectplan(scope)"
+            >查看子计划
+            </el-link>
+            <el-link type="primary"
+                     v-else
+                     @click="handleWork(scope)"
+            >生成子计划
+            </el-link>
           </template>
         </el-table-column>
       </el-table>
-    <pagination
+      <pagination
         v-show="productionplanList.count > 0"
         :total="productionplanList.count"
         :page.sync="listQuery1.page"
@@ -86,270 +87,311 @@
         @pagination="getplanList"
       />
     </el-card>
-    <el-tabs type="border-card">
-  <el-tab-pane label="订单排产">
-   
-       
-         <el-table
-        :data="orderList.results"
-       border
-        fit
-        stripe
-        style="width: 100%"
-        height="250"
-      
-    
-      >
-        <el-table-column type="index" width="50" />
-        
-        <el-table-column label="订单编号" width="110">
-          <template slot-scope="scope">{{ scope.row.number }}</template>
-        </el-table-column>
-         <el-table-column label="客户名称" width="110">
-          <template slot-scope="scope" show-overflow-tooltip>{{ scope.row.customer_.name }}</template>
-        </el-table-column>
-        
-          <el-table-column label="合同编号" width="110">
-          <template slot-scope="scope">{{ scope.row.contract_.number }}</template>
-        </el-table-column>
-          <el-table-column label="合同名称" show-overflow-tooltip width="110">
-          <template slot-scope="scope">{{ scope.row.contract_.name }}</template>
-        </el-table-column>
-         <el-table-column label="所需产品" show-overflow-tooltip width="150">
-          <template slot-scope="scope">{{ scope.row.product_.name }}</template>
-        </el-table-column>
-          <el-table-column label="产品型号" width="110">
-          <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
-        </el-table-column>
-       <el-table-column label="产品数量" width="110">
-          <template slot-scope="scope">{{ scope.row.count }}</template>
-        </el-table-column>
-         <el-table-column label="已派数量" width="110">
-          <template slot-scope="scope">{{ scope.row.planed_count }}</template>
-        </el-table-column>
-        
-         <el-table-column label="交货日期" width="110">
-          <template slot-scope="scope">{{ scope.row.delivery_date }}</template>
-        </el-table-column>
-       
-       
-        
-  <el-table-column label="创建时间">
-          <template slot-scope="scope">{{ scope.row.create_time }}</template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          label="操作"
-          width="220px"
+    <el-tabs type="border-card" v-model="activeName" @tab-click="activeNameClick">
+      <el-tab-pane label="订单排产" name="订单排产">
+        <el-table
+          :data="orderList.results"
+          border
+          fit
+          stripe
+          style="width: 100%"
+          height="250"
+
+
         >
-          <template slot-scope="scope">
-           
-            <el-link type="primary"
-              v-if="checkPermission(['warehouse_update'])"
-              @click="handleclick(scope)"
-              >排产</el-link
-            >
-           
-          </template>
-        </el-table-column>
-      </el-table>
-    <pagination
-        v-show="orderList.count > 0"
-        :total="orderList.count"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.page_size"
-        @pagination="getorderList"
-      />
-    <el-dialog
-      :visible.sync="dialogVisible"
-      :close-on-click-modal="false"
-      :title="'排产计划'"
-    >
-      <el-form
-        ref="Form"
-        :model="orderplan"
-        label-width="120px"
-        label-position="right"
-        :rules="rule1"
-      >
-        
-        <el-form-item label="排产数量" prop="count">
-           <el-input-number v-model="orderplan.count" :min="0"></el-input-number>
-        </el-form-item>
-        
-  
-         <el-form-item label="计划排产时间" prop="value1">
+          <el-table-column type="index" width="50"/>
+
+          <el-table-column label="订单编号" width="110">
+            <template slot-scope="scope">{{ scope.row.number }}</template>
+          </el-table-column>
+          <el-table-column label="客户名称" width="110">
+            <template slot-scope="scope" show-overflow-tooltip>{{ scope.row.customer_.name }}</template>
+          </el-table-column>
+
+          <el-table-column label="合同编号" width="110">
+            <template slot-scope="scope">{{ scope.row.contract_.number }}</template>
+          </el-table-column>
+          <el-table-column label="合同名称" show-overflow-tooltip width="110">
+            <template slot-scope="scope">{{ scope.row.contract_.name }}</template>
+          </el-table-column>
+          <el-table-column label="所需产品" show-overflow-tooltip width="150">
+            <template slot-scope="scope">{{ scope.row.product_.name }}</template>
+          </el-table-column>
+          <el-table-column label="产品型号" width="110">
+            <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
+          </el-table-column>
+          <el-table-column label="产品数量" width="110">
+            <template slot-scope="scope">{{ scope.row.count }}</template>
+          </el-table-column>
+          <el-table-column label="已派数量" width="110">
+            <template slot-scope="scope">{{ scope.row.planed_count }}</template>
+          </el-table-column>
+
+          <el-table-column label="交货日期" width="110">
+            <template slot-scope="scope">{{ scope.row.delivery_date }}</template>
+          </el-table-column>
+
+
+          <el-table-column label="创建时间">
+            <template slot-scope="scope">{{ scope.row.create_time }}</template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="操作"
+            width="220px"
+          >
+            <template slot-scope="scope">
+
+              <el-link type="primary"
+                       v-if="checkPermission(['warehouse_update'])"
+                       @click="handleclick(scope)"
+              >排产
+              </el-link
+              >
+
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="orderList.count > 0"
+          :total="orderList.count"
+          :page.sync="listQuery.page"
+          :limit.sync="listQuery.page_size"
+          @pagination="getorderList"
+        />
+        <el-dialog
+          :visible.sync="dialogVisible"
+          :close-on-click-modal="false"
+          :title="'排产计划'"
+        >
+          <el-form
+            ref="Form"
+            :model="orderplan"
+            label-width="120px"
+            label-position="right"
+            :rules="rule1"
+          >
+
+            <el-form-item label="排产数量" prop="count">
+              <el-input-number v-model="orderplan.count" :min="0"></el-input-number>
+            </el-form-item>
+
+
+            <el-form-item label="计划排产时间" prop="value1">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+
+                start-placeholder="计划开始日期"
+                end-placeholder="计划结束日期"
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+          </el-form>
+          <div style="text-align: right">
+            <el-button type="danger" @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="confirm('Form')">确认</el-button>
+          </div>
+        </el-dialog>
+      </el-tab-pane>
+      <el-tab-pane label="甘特图" name="甘特图">
+        <gantt
+          v-if="ganttShow"
+          :proList="proList"
+        ></gantt>
+      </el-tab-pane>
+      <!--<el-row style="position: absolute;z-index: 20000;top: 0;right: 0;">
         <el-date-picker
-      v-model="value1"
-      type="daterange"
-     
-      start-placeholder="计划开始日期"
-      end-placeholder="计划结束日期"
-      format="yyyy 年 MM 月 dd 日"
-      value-format="yyyy-MM-dd"
-     >
-    </el-date-picker>
-         </el-form-item>
-        
-      </el-form>
-      <div style="text-align: right">
-        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirm('Form')">确认</el-button>
-      </div>
-    </el-dialog>
-    </el-tab-pane>
-      
-  <el-tab-pane label="甘特图">甘特图</el-tab-pane>
-</el-tabs>
+          v-model="timeRange"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd"
+        >
+          &lt;!&ndash;   @change="timeRangeChange"&ndash;&gt;
+        </el-date-picker>
+      </el-row>-->
+    </el-tabs>
   </div>
 </template>
-  <script>
-  import { getordertoplan } from "@/api/sam";
-  import { createProductionplan,getProductionplanList,createsubplan} from "@/api/pm";
-import { getMaterialList } from "@/api/mtm";
-import checkPermission from "@/utils/permission";
+<script>
+  import gantt  from "@/components/Gantt/index";
+  import {getordertoplan} from "@/api/sam";
+  import {createProductionplan, getProductionplanList, createsubplan} from "@/api/pm";
+  import {getMaterialList} from "@/api/mtm";
+  import checkPermission from "@/utils/permission";
 
 
-import { genTree } from "@/utils";
-import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
-const defaulteorderplan = {
-};
-export default {
-  components: { Pagination },
-  data() {
-    return {
-       
-     orderplan: defaulteorderplan,
-      orderList: {
-        count: 0,
-      },
-      listQuery: {
-        page: 1,
-        page_size: 20,
-      },
+  import {genTree} from "@/utils";
+  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+  const defaulteorderplan = {};
+  export default {
+    components: {Pagination,gantt},
+    data() {
+      return {
+
+        orderplan: defaulteorderplan,
+        orderList: {
+          count: 0,
+        },
+        listQuery: {
+          page: 1,
+          page_size: 20,
+        },
         productionplanList: {
-        count: 0,
-      },
-      listQuery1: {
-        page: 1,
-        page_size: 20,
-      },
-   value1: '',
-      listLoading: true,
-      dialogVisible: false,
-      dialogType: "new",
-      rule1: {
-        number: [{ required: true, message: "请输入", trigger: "blur" }],
-       
-      },
-     
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {
-     
-    this.getorderList();
-     this.getplanList();
-  },
-  methods: {
-    checkPermission,
-    
-  //订单列表
-    getorderList() {
-      this.listLoading = true;
-      getordertoplan(this.listQuery).then((response) => {
-        if (response.data) {
-          this.orderList = response.data;
-        }
-        this.listLoading = false;
-      });
-    },
-   //生产计划列表
-   //列表
-    getplanList() {
-      this.listLoading = true;
-      getProductionplanList(this.listQuery).then((response) => {
-        if (response.data) {
-          this.productionplanList = response.data;
-        }
-        this.listLoading = false;
-      });
-    },
-     handleclick(scope){
-      this.orderID =  scope.row.id;
-      this.countsx = scope.row.count;
-       this.planed_count = scope.row.planed_count;
-       this.delivery_date = scope.row.delivery_date;
-      this.dialogVisible = true;
-      this.$nextTick(() => {
-        this.$refs["Form"].clearValidate();
-      });
+          count: 0,
+        },
+        listQuery1: {
+          page: 1,
+          page_size: 20,
+        },
+        value1: '',
+        listLoading: true,
+        ganttShow: false,
+        dialogVisible: false,
+        dialogType: "new",
+        activeName: "订单排产",
+        rule1: {
+          number: [{required: true, message: "请输入", trigger: "blur"}],
 
+        },
+        timeRange:[],
+        proList:[],
+      };
     },
-    async confirm(form) {
-    
-       this.orderplan.start_date = this.value1[0];
-      
-       if( this.delivery_date>=this.value1[1])
-       {
-          this.orderplan.end_date  = this.value1[1];
-       }
-       else{
-          this.$message.error("计划完成时间超过订单交付日期，请从新选择日期！");
-       }
-        
-         this.orderplan.order  = this.orderID
-         if( this.orderplan.count<=(this.countsx-this.planed_count)){
-                  createProductionplan(this.orderplan).then((res) => {
-              if (res.code >= 200) {
-                this.getorderList();
-                 this.getplanList();
-                 this.dialogVisible = false;
-                this.$message.success("成功");
+    computed: {},
+    watch: {},
+    created() {
+
+      this.getorderList();
+      this.getplanList();
+    },
+    methods: {
+      checkPermission,
+
+      //订单列表
+      getorderList() {
+        this.listLoading = true;
+        getordertoplan(this.listQuery).then((response) => {
+          if (response.data) {
+            this.orderList = response.data;
+          }
+          this.listLoading = false;
+        });
+      },
+      //生产计划列表
+      //列表
+      getplanList() {
+        let that = this;
+        this.listLoading = true;
+        getProductionplanList(this.listQuery).then((response) => {
+          if (response.data) {
+            this.productionplanList = response.data;
+            let list = response.data.results;
+            let arr= [];
+            list.forEach(item => {
+              if (!item.children || item.children.length < 1) {
+                let startTime = new Date(item.start_date).getTime();
+                let endTime = new Date(item.end_date).getTime();
+                let obj = new Object();
+                obj.name = item.number;
+                obj.id = item.id;
+                obj.top = 20;
+                obj.startTime = startTime;
+                obj.endTime = endTime;
+                obj.planTime = [startTime, endTime];
+                obj.per = item.count;
+                obj.type = 1;
+                obj.isShow = true;
+                arr.push(obj);
               }
+              that.proList = arr;
             });
-         }
-         else
-            {
-               this.$message.error("排产数超过所需数，请合理排产！");
+          }
+          this.listLoading = false;
+        });
+      },
+      handleclick(scope) {
+        this.orderID = scope.row.id;
+        this.countsx = scope.row.count;
+        this.planed_count = scope.row.planed_count;
+        this.delivery_date = scope.row.delivery_date;
+        this.dialogVisible = true;
+        this.$nextTick(() => {
+          this.$refs["Form"].clearValidate();
+        });
+
+      },
+      async confirm(form) {
+
+        this.orderplan.start_date = this.value1[0];
+
+        if (this.delivery_date >= this.value1[1]) {
+          this.orderplan.end_date = this.value1[1];
+        } else {
+          this.$message.error("计划完成时间超过订单交付日期，请从新选择日期！");
+        }
+
+        this.orderplan.order = this.orderID
+        if (this.orderplan.count <= (this.countsx - this.planed_count)) {
+          createProductionplan(this.orderplan).then((res) => {
+            if (res.code >= 200) {
+              this.getorderList();
+              this.getplanList();
+              this.dialogVisible = false;
+              this.$message.success("成功");
             }
-    
-    },
-    handleWork(scope)
-    {
-       this.$confirm("确认生成子计划?", "提醒", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "error",
-      })
-        .then(async () => {
-          await  createsubplan(scope.row.id).then((res) => {
+          });
+        } else {
+          this.$message.error("排产数超过所需数，请合理排产！");
+        }
+
+      },
+      handleWork(scope) {
+        this.$confirm("确认生成子计划?", "提醒", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "error",
+        })
+          .then(async () => {
+            await createsubplan(scope.row.id).then((res) => {
               if (res.code >= 200) {
                 this.$message.success("生成子计划成功！");
-                 this.$router.push({name: "work", params: { id: scope.row.id }, })
-                 this.getplanList()
+                this.$router.push({name: "work", params: {id: scope.row.id},})
+                this.getplanList()
               }
             });
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-      
+          })
+          .catch((err) => {
+            console.error(err);
+          });
+
+      },
+      activeNameClick(tab, event){
+        debugger;
+        console.log(tab, event);
+        if(tab.label==='甘特图'){
+          this.ganttShow = true;
+        }else{
+          this.ganttShow = false;
+        }
+      },
+      //查看子计划
+      handleselectplan(scope) {
+        this.$router.push({name: "work", params: {id: scope.row.id},})
+      }
+
     },
-    //查看子计划
-    handleselectplan(scope)
-    {
-           this.$router.push({name: "work", params: { id: scope.row.id }, })
-    }
+  };
 
-  },
-};
-    
-  </script>
+</script>
 
 
-  <style>
+<style>
   .el-table .warning-row {
     background: oldlace;
   }
@@ -357,4 +399,4 @@ export default {
   .el-table .success-row {
     background: #f0f9eb;
   }
-</style>
\ No newline at end of file
+</style>