diff --git a/hb_client/src/App.vue b/hb_client/src/App.vue
index d55de5c..14f48dc 100644
--- a/hb_client/src/App.vue
+++ b/hb_client/src/App.vue
@@ -53,6 +53,10 @@ export default {
   .adopt input.el-input__inner{
     border: 1px solid #46ce7a!important;
   }
+  .fail .originBlock  input.el-input__inner,
+  .adopt .originBlock  input.el-input__inner{
+    border: none!important;
+  }
   #customerForm .el-form-item{
     margin-bottom: 30px!important;
   }
diff --git a/hb_client/src/components/customForm/index.vue b/hb_client/src/components/customForm/index.vue
index 8928485..7bf1fa1 100644
--- a/hb_client/src/components/customForm/index.vue
+++ b/hb_client/src/components/customForm/index.vue
@@ -123,7 +123,7 @@
       <el-row v-show="hasPicture">
         <el-form-item label="图表">
           <div>
-            <img id="canvasImg" src="./../../assets/glass.png" style="width:500px;height: 300px;display: none">
+            <img id="canvasImg" :src="img" style="width:500px;height: 300px;display: none">
             <div style="position: relative;display: flex;flex-direction: column;
                  border: 1px solid #DCDFE6;">
               <canvas id="canvas" width="500" height="300">
@@ -174,10 +174,6 @@
         default: () => {
           return []
         }} ,
-      step: {
-        type:String,
-        default:''
-      },
       formID: {
         type:Number,
         default:0
@@ -195,7 +191,6 @@
       let that = this;
       this.form = this.formID;
       let formData=this.results;
-      this.checkType=this.step;
       that.wproductId=this.wproduct;
       formData.forEach(item => {
         let obj = new Object();
@@ -219,6 +214,12 @@
         obj = item;
         that.judgeList.push(obj)
       });
+      let  imag= this.formData.filter(item => {
+        return item.field_type === 'draw';
+      });
+      that.img = new Image();
+      that.img.crossOrigin = '';
+      that.img = 'http://47.95.0.242:2222'+imag[0].draw_template;
       setTimeout(function(){
         that.canvasInit();
       },500);
@@ -239,6 +240,7 @@
         myCanvas_rect:null,
         Txt:null,
         word:null,
+        img:null,
         widths:0,
         heights:0,
         lineW:3,
@@ -246,7 +248,6 @@
         imgUrl:'',
         imgData:'',
         canvasImg:'',
-        checkType:'',
         formData:[],//表单数组
         judgeList:[],//判定数组
         is_testok:true,
@@ -399,6 +400,7 @@
       //画布添加背景模板图
       draw(){
         let canvasImg = document.getElementById("canvasImg");
+        canvasImg.setAttribute("crossOrigin",'anonymous');
         canvasImg.style.width = '500px';
         canvasImg.style.height = '300px';
         this.ctx.drawImage(canvasImg,0,0,500,300);
@@ -629,10 +631,10 @@
         });
         if(real.length>0){
           that.is_testok = false;
-          alert("检验不合格！")
+          // alert("检验不合格！")
         }else{
           that.is_testok = true;
-          alert("检验合格！")
+          // alert("检验合格！")
         }
       },
       //提交检查项目
diff --git a/hb_client/src/components/customForm/review.vue b/hb_client/src/components/customForm/review.vue
new file mode 100644
index 0000000..63f94c3
--- /dev/null
+++ b/hb_client/src/components/customForm/review.vue
@@ -0,0 +1,878 @@
+<template>
+  <div>
+    <el-form
+      id="customerForm"
+      ref="checkForm"
+      label-width="100px"
+      :model="checkForm"
+    >
+      <el-row>
+        <el-col
+          v-for="(item, $index) in formData"
+          v-show="filterBlock(item.parent,item.display_expression)"
+          :key="$index"
+          :span="12"
+          style="position: relative"
+          :class="item.need_judge&&item.is_testok===true?'adopt':item.need_judge&&item.is_testok===false?'fail':''"
+        >
+          <el-form-item
+            v-if="item.field_type === 'string'"
+            :label="item.field_name"
+          >
+            <el-input
+              disabled
+              class="halfWidth originBlock"
+              v-model="originForm[item.field_key]"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+            <el-input
+              class="halfWidth"
+              v-model="checkForm[item.field_key]"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'int'"
+            :label="item.field_name"
+          >
+            <el-input
+              disabled
+              class="halfWidth originBlock"
+              v-model="originForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+            <el-input
+              class="halfWidth"
+              v-model="checkForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'float'"
+            :label="item.field_name"
+          >
+            <el-input
+              disabled
+              class="halfWidth originBlock"
+              v-model="originForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+            <el-input
+              class="halfWidth"
+              v-model="checkForm[item.field_key]"
+              type="number"
+              placeholder="请输入"
+              @input="keyChange($index,item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'date'"
+            :label="item.field_name"
+          >
+            <el-date-picker
+              disabled
+              v-model="originForm[item.field_key]"
+              class="halfWidth originBlock"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              @change="keyChange($index,item.field_key)"
+            />
+            <el-date-picker
+              v-model="checkForm[item.field_key]"
+              class="halfWidth"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              @change="keyChange($index,item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'datetime'"
+            :label="item.field_name"
+          >
+            <el-date-picker
+              disabled
+              v-model="originForm[item.field_key]"
+              class="halfWidth originBlock"
+              type="datetime"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @change="keyChange($index,item.field_key)"
+            />
+            <el-date-picker
+              v-model="checkForm[item.field_key]"
+              class="halfWidth"
+              type="datetime"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @change="keyChange($index,item.field_key)"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'select'"
+            :label="item.field_name"
+          >
+            <el-select
+              disabled
+              v-model="originForm[item.field_key]"
+              class="halfWidth originBlock"
+              placeholder="请选择"
+              @change="keyChange($index,item.field_key)"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+              />
+            </el-select>
+            <el-select
+              v-model="checkForm[item.field_key]"
+              class="halfWidth"
+              placeholder="请选择"
+              @change="keyChange($index,item.field_key)"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-else-if="item.field_type === 'selects'"
+            :label="item.field_name"
+          >
+            <el-select
+              disabled
+              v-model="originForm[item.field_key]"
+              class="halfWidth originBlock"
+              multiple
+              placeholder="请选择"
+              @change="keyChange($index,item.field_key)"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+                @change="keyChange($index,item.field_key)"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              v-model="checkForm[item.field_key]"
+              class="halfWidth"
+              multiple
+              placeholder="请选择"
+              @change="keyChange($index,item.field_key)"
+            >
+              <el-option
+                v-for="item1 in item.field_choice"
+                :key="item1"
+                :label="item1"
+                :value="item1"
+                @change="keyChange($index,item.field_key)"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <span v-show="item.help_text" class="helpText">说明：{{item.help_text}}</span>
+          <span v-if="item.need_judge&&item.is_testok===true" class="adoptTip">合格</span>
+          <span v-if="item.need_judge&&item.is_testok===false" class="failTip">不合格</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="hasPicture">
+
+        <el-form-item label="图表">
+          <div class="halfWidth">
+            <img :src="originImg">
+          </div>
+          <div class="halfWidth">
+            <img id="canvasImg" :src="img" style="width:500px;height: 300px;display: none">
+            <div style="position: relative;display: flex;flex-direction: column;
+                 border: 1px solid #DCDFE6;">
+              <canvas id="canvas" width="500" height="300">
+                您的浏览器不支持绘图，请升级或更换浏览器！
+              </canvas>
+              <input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
+              <textarea class="hide" id="word" cols="15" rows="5" placeholder="请输入文字" autofocus></textarea>
+              <input id="inputV" type="hidden" value="1">
+              <div class="canvasBtnWrap">
+                <div class="canvasBtn" @click="error1">标记</div>
+                <div class="canvasBtn" @click="word1()">文字</div>
+                <div class="canvasBtn" @click="back()">回退</div>
+              </div>
+              <div id="res"></div>
+            </div>
+          </div>
+        </el-form-item>
+      </el-row>
+
+      <el-row>
+        <el-form-item label="是否合格">
+          <el-radio v-model="is_testok" :label="testokTrue">检查合格</el-radio>
+          <el-radio v-model="is_testok" :label="testokFalse">检查不合格</el-radio>
+        </el-form-item>
+        <div class="dialog-footer" style="text-align: right">
+          <el-button @click="innerVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitfield">提交检查项目</el-button>
+        </div>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { upFile } from "@/api/file";
+  let preDrawAry = [];
+  export default {
+    name: "review",
+    props: {
+      results:{
+        type:Array,
+        default: () => {
+          return []
+        }} ,
+      originList:{
+        type:Array,
+        default: () => {
+          return []
+        }} ,
+      formID: {
+        type:Number,
+        default:0
+      },
+      wproduct: {
+        type:Number,
+        default:0
+      },
+      origintest: {
+        type:Number,
+        default:0
+      },
+      hasPicture:{
+        type:Boolean,
+        default:false
+      }
+    },
+    mounted() {
+      let that = this;
+      this.form = this.formID;
+      let formData=this.results;
+      this.origins=this.originList;
+      that.wproductId=this.wproduct;
+      that.origin_test=this.origintest;
+      formData.forEach(item => {
+        let obj = new Object();
+        obj = item;
+        obj.is_testok = null;//是否合格
+        that.formData.push(obj)
+      });
+      that.formData=[...that.formData];
+      //当前表的数据存储
+      for(let i=0;i<this.results.length;i++){
+        let key = this.results[i].field_key;
+        //checkForm接收表单数据的对象
+        that.checkForm[key]='';
+        that.$set(that.checkForm,key,'')
+      }
+      //判定项
+      let listJudge = this.formData.filter(item => {
+        return item.need_judge === true;
+      });
+      listJudge.forEach(item => {
+        let obj = new Object();
+        obj = item;
+        that.judgeList.push(obj)
+      });
+      //原始表的数据
+      for(let i=0;i<this.origins.length;i++){
+        let key = this.origins[i].field_key;
+        that.originForm[key]=this.origins[i].field_key;
+        that.$set(that.originForm,key,this.origins[i].field_value)
+      }
+      //图片地址
+      let  imag= this.formData.filter(item => {
+        return item.field_type === 'draw';
+      });
+      that.img = 'http://47.95.0.242:2222'+imag[0].draw_template;
+
+      let  originImag= this.origins.filter(item => {
+        return item.field_type === 'draw';
+      });
+      that.originImg = new Image();
+      that.originImg.crossOrigin = '';
+      that.originImg = originImag[0].field_value;
+
+      listJudge.forEach(item => {
+        let obj = new Object();
+        obj = item;
+        that.judgeList.push(obj)
+      });
+      setTimeout(function(){
+        that.canvasInit();
+      },500);
+    },
+    data(){
+      return{
+        field:[],
+        origins:[],
+        checkForm:{},
+        originForm:{},
+        testrecord:{
+          form:this.formID,
+          record_data:[],
+          is_testok:true,
+          wproduct:null,
+        },
+        origin_test:null,
+        canvas:null,
+        wproductId:null,
+        ctx:null,
+        myCanvas_rect:null,
+        Txt:null,
+        word:null,
+        img:null,
+        originImg:null,
+        widths:0,
+        heights:0,
+        lineW:3,
+        colorF:"#e42343",
+        imgUrl:'',
+        imgData:'',
+        canvasImg:'',
+        checkType:'',
+        formData:[],//表单数组
+        judgeList:[],//判定数组
+        is_testok:true,
+        testokTrue:true,
+        testokFalse:false,
+      }
+    },
+    methods:{
+      filterBlock(parent,rule){
+        // debugger;
+        let that = this;
+        if(parent!==''&&parent!==null&&parent!==undefined){
+          if(rule!==''&&rule!==null&&rule!==undefined){
+            let reg = /\{(.+?)\}/g;
+            if(rule.indexOf('||')>-1||rule.indexOf('&&')>-1){
+              let tam = '', arr = [];
+              if(rule.indexOf('||')>-1){
+                arr = rule.split('||');
+              }else{
+                arr = rule.split('&&');
+              }
+              for (let i = 0;i<arr.length;i++){
+                //获取判断依据
+                let a = '';
+                a = arr[i].replace(/`/g,'');
+                a = '`'+ a+'`';
+                let tem =a.match(reg)[0];
+                let ky = tem.replace(/\{|\}/g, '');//qipao
+                if(that.checkForm[ky]){
+                  //替换变量
+                  a = a.replace(ky, 'yyy');
+                  let yyy = "'"+that.checkForm[ky]+"'";
+                  if(eval(eval( a))){
+                    tam += 'true';
+                  }else{
+                    tam += 'false';
+                  }
+                }else{
+                  tam += 'false';
+                }
+              }
+              let rea = true;
+              if(rule.indexOf('||')>-1){
+                if( tam.indexOf('true')>-1){
+                  rea = true;
+                }else{
+                  rea = false;
+                }
+              }else{
+                if( tam.indexOf('false')>-1){
+                  rea = false;
+                }else{
+                  rea = true;
+                }
+              }
+              return rea;
+            }else{
+              let temp =rule.match(reg)[0];
+              let key = temp.replace(/\{|\}/g, '');//qipao
+              let  a = rule.replace(key, 'yy');
+              a = a.replace(key, 'yy');
+              let yy = "'"+that.checkForm[key]+"'";
+              return eval(eval(a));
+              // return eval("'"+y+"'"+str);
+            }
+          }else{
+            return false;
+          }
+        }else{
+          return true;
+        }
+      },
+      keyChange(index,key){
+        let that = this;
+        let reg = /\{(.+?)\}/g;
+        that.$forceUpdate();
+        that.$nextTick(()=>{
+          if(that.formData[index].need_judge===true){
+            let arr = [],str = '';
+            let item = that.formData[index].rule_expression.replace(/`/g,'');
+            if(item.indexOf('||')>-1){
+              arr = item.split('||');
+            }else if(item.indexOf('&&')>-1){
+              arr = item.split('&&');
+            }else{
+              arr.push(item);
+            }
+            //对每个条件进行判定，如果符合，
+            for (let i = 0;i<arr.length;i++){
+              //获取判断依据
+              let a = '`'+ arr[i]+'`';
+              let tem =a.match(reg)[0];
+              let ky = tem.replace(/\{|\}/g, '');//qipao
+              //有值时进行判断
+              if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
+                //替换变量
+                a = a.replace(ky, 'yyy');
+                let yyy = "'"+that.checkForm[ky]+"'";
+                if(eval(eval( a))){
+                  str += 'true';
+                }else{
+                  str += 'false';
+                }
+              }
+            }
+            if(item.indexOf('&&')>-1){
+              if(str.indexOf('false')>-1){
+                that.formData[index].is_testok = true;
+                that.$set(that.formData[index],'is_testok',true)
+              }else{
+                that.formData[index].is_testok = false;
+                that.$set(that.formData[index],'is_testok',false)
+              }
+            }else{
+              if(str.indexOf('true')>-1){
+                that.formData[index].is_testok = false;
+                that.$set(that.formData[index],'is_testok',false)
+              }else{
+                that.formData[index].is_testok = true;
+                that.$set(that.formData[index],'is_testok',true)
+              }
+            }
+            that.$forceUpdate();
+          }
+          that.$forceUpdate();
+          that.judgeList = that.formData.filter(item => {
+            return item.need_judge === true;
+          });
+          that.judgeForm();
+        })
+      },
+      /*  图片保存  */
+      //初始化canvas
+      canvasInit(){
+        let that = this;
+        preDrawAry = [];
+        that.canvas = document.getElementById('canvas');
+        that.ctx = that.canvas.getContext('2d');
+        that.myCanvas_rect = that.canvas.getBoundingClientRect();
+        that.Txt = document.getElementById('txt');
+        that.word = document.getElementById('word');
+        that.widths = that.myCanvas_rect.width;
+        that.heights = that.myCanvas_rect.height;
+        setTimeout(function(){
+          that.draw();
+        },500);
+      },
+      //画布添加背景模板图
+      draw(){
+        let canvasImg = document.getElementById("canvasImg");
+        canvasImg.setAttribute("crossOrigin",'anonymous');
+        canvasImg.style.width = '500px';
+        canvasImg.style.height = '300px';
+        this.ctx.drawImage(canvasImg,0,0,500,300);
+      },
+      // 叉号
+      error1(){
+        let canvas1 = document.getElementById('canvas');
+        let ctx1 = canvas1.getContext('2d');
+        this.Txt.style.display="none";
+        document.getElementById('word').style.display="none";
+        ctx1.closePath();
+        canvas1.onmousedown=function () {
+          this.imgData= ctx1.getImageData(0,0,canvas1.width,canvas1.height);
+          preDrawAry.push(this.imgData);
+          ctx1.beginPath();
+          ctx1.strokeStyle = "#e42343";
+          ctx1.lineWidth = "3";
+          ctx1.lineJoin="round";
+        };
+        //鼠标按下的位置
+        canvas1.onmouseup=function (ev) {
+          let oldX = ev.offsetX;
+          let oldY = ev.offsetY;
+          ctx1.moveTo(oldX,oldY);
+          ctx1.lineTo(ev.offsetX+10,ev.offsetY+10);
+          ctx1.moveTo(ev.offsetX+10,ev.offsetY);
+          ctx1.lineTo(ev.offsetX,ev.offsetY+10);
+          ctx1.stroke();
+        };
+        this.ctx.closePath();
+      },
+      // 文字先写字
+      text(){
+        let canvas2 = document.getElementById('canvas');
+        let ctx2 = canvas2.getContext('2d');
+        let Txt2 = document.getElementById('txt');
+        Txt2.style.display="block";
+        document.getElementById('word').style.display="none";
+        ctx2.font="16px Microsoft Yahei";
+        canvas2.onmousedown=function (ev) {
+          this.imgData=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
+          preDrawAry.push(this.imgData);
+          var v = Txt2.value;
+          //            console.log(v);
+          if (v != '') {
+            var oldX = ev.offsetX;
+            var oldY = ev.offsetY;
+            // console.log(oldX,oldY);
+            ctx2.moveTo(oldX,oldY);
+            canvas2.onmouseup=function () {
+              ctx2.fillStyle=this.colorF;
+              ctx2.fillText(v,oldX,oldY);
+              canvas2.TextAutoLine(v,canvas2,oldX,oldY,20);
+              // Txt.value = "";
+              Txt2.style.display="none";
+            }
+          }
+        }
+      },
+      // 文字
+      word1(){
+        let canvas3 = document.getElementById('canvas');
+        let ctx3 = canvas3.getContext('2d');
+        let Txt3 = document.getElementById('txt');
+        let word3 = document.getElementById('word');
+        Txt3.style.display="none";
+        ctx3.font="16px Microsoft Yahei";
+        canvas3.onmousedown=function () {
+          ctx3.closePath();
+        }
+        canvas3.onmouseup=function (ev) {
+          var inputV= document.getElementById('inputV').value;
+          if(inputV == 1){
+            document.getElementById('word').focus();
+            //               console.log(ev.offsetX,ev.offsetY);
+            var oldX = ev.offsetX;
+            var oldY = ev.offsetY;
+            word3.style.display="block";
+            word3.style.left=oldX+'px';
+            word3.style.top =oldY+'px';
+
+            word3.onblur=function () {
+              let v = word3.value;
+              if(v != '' && v != ' '){
+                this.imgData=ctx3.getImageData(0,0,canvas3.width,canvas3.height);
+                let img = ctx3.getImageData(0,0,canvas3.width,canvas3.height);
+                // debugger;
+                preDrawAry.push(img);
+                ctx3.moveTo(oldX,oldY);
+                ctx3.fillStyle="#e42343";
+                let lineWidth = 0;
+                let canvasWidth = canvas3.width;
+                let lastSubStrIndex= 0;
+                for(let i=0;i<v.length;i++){
+                  lineWidth+=ctx3.measureText(v[i]).width;
+                  if(lineWidth>canvasWidth-oldX){
+                    ctx3.fillText(v.substring(lastSubStrIndex,i),oldX,(oldY+10));
+                    oldY+=20;
+                    lineWidth=0;
+                    lastSubStrIndex=i;
+                  }
+                  if(i==v.length-1){
+                    ctx3.fillText(v.substring(lastSubStrIndex,i+1),oldX,(oldY+10));
+                  }
+                }
+                inputV ="2";
+                word3.value = "";
+              }
+            }
+          }
+        }
+      },
+      // 文字过长超出换行toDataURL()
+      canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
+        let ctx = canvas.getContext("2d");
+        let lineWidth = 0;
+        let canvasWidth = canvas.width;
+        let lastSubStrIndex= 0;
+        for(let i=0;i<str.length;i++){
+          lineWidth+=ctx.measureText(str[i]).width;
+          if(lineWidth>canvasWidth-initX){
+            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
+            initY+=lineHeight;
+            lineWidth=0;
+            lastSubStrIndex=i;
+          }
+          if(i==str.length-1){
+            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
+          }
+        }
+      },
+      // 撤销
+      back(){
+        this.word.style.display="none";
+        this.Txt.style.display="none";
+        if(preDrawAry.length>0) {
+          var popData = preDrawAry.pop();
+          this.ctx.putImageData(popData, 0, 0);
+        }
+      },
+      // 回退一次
+      put(){
+        this.ctx.putImageData(this.imgData,0,0);
+      },
+      //保存
+      saveTu(){
+        let that = this;
+        this.word.style.display="none";
+        this.Txt.style.display="none";
+        let canvas = document.getElementById('canvas');
+        let image = new Image();
+        image = canvas.toDataURL('image/png');
+        this.canvasImg = image;
+        let file = this.base64ToFile(image);
+        let formData = new FormData();
+        formData.append('file', file);
+        upFile(formData).then((res) => {
+          debugger;
+          console.log(res);
+          that.imgUrl=res.data.field;
+          // console.log(res);
+        })
+      },
+      //base64ToFile
+      base64ToFile(baseUrl) {
+        let arr = baseUrl.split(',');
+        // let type = arr[0].match(/:(.*?);/)[1];   // 解锁图片类型
+        let bytes = atob(arr[1]); // 解码base64
+        let n = bytes .length;
+        let bufferArray = new Uint8Array(n);
+        while (n--) {
+          bufferArray[n] = bytes.charCodeAt(n);
+        }
+        // let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
+        return new File([bufferArray ],'draw.jpg');
+      },
+      /*  图片保存  */
+      //最终表格判定
+      judgeForm(){
+        let that = this ,
+          reg = /\{(.+?)\}/g,
+          judgeList = this.judgeList;
+        for(let i=0;i<judgeList.length;i++){
+          let arr = [],str = '';
+          let item = judgeList[i].rule_expression.replace(/`/g,'');
+          if(item.indexOf('||')>-1){
+            arr = item.split('||');
+          }else if(item.indexOf('&&')>-1){
+            arr = item.split('&&');
+          }else{
+            arr.push(item);
+          }
+          //对每个条件进行判定，如果符合，
+          for (let i = 0;i<arr.length;i++){
+            //获取判断依据
+            let a = '`'+ arr[i]+'`';
+            let tem =a.match(reg)[0];
+            let ky = tem.replace(/\{|\}/g, '');//qipao
+            //有值时进行判断
+            if(that.checkForm[ky]!==''&&that.checkForm[ky]!==null&&that.checkForm[ky]!==undefined){
+              //替换变量
+              a = a.replace(ky, 'yyy');
+              let yyy = "'"+that.checkForm[ky]+"'";
+              // debugger;
+              if(eval(eval( a))){
+                str += 'true';
+              }else{
+                str += 'false';
+              }
+            }
+          }
+          if(item.indexOf('&&')>-1){
+            if(str.indexOf('false')>-1){
+              that.judgeList[i].is_testok = true;
+            }else{
+              that.judgeList[i].is_testok = false;
+            }
+          }else{
+            if(str.indexOf('true')>-1){
+              that.judgeList[i].is_testok = false;
+            }else{
+              that.judgeList[i].is_testok = true;
+            }
+          }
+        }
+        let real = that.judgeList.filter(item=>{
+          return item.is_testok===false;
+        });
+        if(real.length>0){
+          that.is_testok = false;
+          // alert("检验不合格！")
+        }else{
+          that.is_testok = true;
+          // alert("检验合格！")
+        }
+      },
+      //提交检查项目
+      submitfield() {
+        let that = this;
+        let drawArr = that.formData.filter(item=>{
+          return item.field_type==='draw';
+        });
+        if(drawArr.length>0){
+          that.word.style.display="none";
+          that.Txt.style.display="none";
+          let canvas = document.getElementById('canvas');
+          let image = new Image();
+          image = canvas.toDataURL('image/png');
+          that.canvasImg = image;
+          let file = that.base64ToFile(image);
+          let formData = new FormData();
+          formData.append('file', file);
+          upFile(formData).then((res) => {
+            if(res){
+              let key = drawArr[0].field_key;
+              that.imgUrl=res.data.file;
+              that.checkForm[key] = that.imgUrl;
+              that.fieldData();
+            }
+          });
+        }else{
+          that.fieldData();
+        }
+      },
+      fieldData(){
+        let that = this;
+        that.field = []; //检查项目
+        that.formData.forEach((item) => {
+          that.field.push({
+            form_field: item.id,
+            field_value: that.checkForm[item.field_key],
+            is_testok: item.is_testok//单项检查结果
+          });
+        });
+        that.testrecord.form = that.formID;//检查表
+        that.testrecord.record_data = that.field;//检查项列表
+        that.testrecord.is_testok = that.is_testok;//检查表检查结果
+        that.testrecord.wproduct = that.wproductId;//半成品ID
+        this.$emit('formFunc',that.testrecord);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  canvas {
+    width:500px!important;
+    /*border: 1px solid #000000;*/
+    cursor: crosshair;
+    margin: auto;
+  }
+
+  .canvasBtnWrap {
+    display: flex;
+    /*flex-direction: column;*/
+    /*width: 80px;*/
+    /*padding-left: 20px;*/
+    justify-content: flex-end;
+  }
+
+  .canvasBtn {
+    width: 70px;
+    height: 35px;
+    line-height: 35px;
+    border: 1px solid #aaaaaa;
+    text-align: center;
+    border-radius: 15px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  .hide {
+    display: none;
+  }
+
+  #txt {
+    position: absolute;
+    top: 1%;
+    left: 1%;
+    width: 150px;
+    height: 30px;
+    border: 1px solid #e42343;
+  }
+
+  #word {
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    padding: 0 2px;
+    background: none;
+    color: #e42343;
+    border: 1px dashed #b9b9b9;
+  }
+
+  #word::-webkit-input-placeholder {
+    color: #e42343;
+  }
+
+  #word::-moz-placeholder {
+    color: #e42343;
+  }
+
+  #word::placeholder {
+    color: #e42343;
+  }
+
+  #res {
+    display: inline-block;
+  }
+  .helpText{
+    position: absolute;
+    top: 40px;
+    left: 100px;
+  }
+  .adoptTip{
+    position: absolute;
+    top: 38px;
+    right: 0;
+    font-size: 12px;
+    color: #46ce7a;
+  }
+  .failTip{
+    position: absolute;
+    top: 38px;
+    right: 0;
+    font-size: 12px;
+    color: #ff0000;
+  }
+  .halfWidth{
+    width: 49%!important;
+    display: inline-block!important;
+  }
+</style>
diff --git a/hb_client/src/main.js b/hb_client/src/main.js
index b2c7b55..d9d4487 100644
--- a/hb_client/src/main.js
+++ b/hb_client/src/main.js
@@ -4,6 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import "element-ui/lib/theme-chalk/base.css";
+import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
 import '@/styles/index.scss' // global css
@@ -11,11 +13,13 @@ import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
-
+import { plugin } from "vue-function-api";
 import '@/icons' // icon
 import '@/permission' // permission control
 import tableHeight from '@/directive/el-table/index'
-Vue.use(tableHeight)
+Vue.component(CollapseTransition.name, CollapseTransition);
+Vue.use(tableHeight).use(plugin);
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
diff --git a/hb_client/src/router/index.js b/hb_client/src/router/index.js
index bb1f9c7..6c15619 100644
--- a/hb_client/src/router/index.js
+++ b/hb_client/src/router/index.js
@@ -178,6 +178,14 @@ export const asyncRoutes = [
         component: () => import('@/views/pm/resources'),
         meta: { title: '生产资源配置', icon: 'example', perms: ['pm_resources'] }
       }
+      ,
+      {
+        path: 'gantt',
+        name: 'gantt',
+        component: () => import('@/views/pm/gantt'),
+        meta: { title: '甘特图', perms: ['vendor_manage'] },
+        hidden: true
+      },
     ]
   }
   ,
diff --git a/hb_client/src/views/pm/components/leftMenu.vue b/hb_client/src/views/pm/components/leftMenu.vue
new file mode 100644
index 0000000..4b66728
--- /dev/null
+++ b/hb_client/src/views/pm/components/leftMenu.vue
@@ -0,0 +1,396 @@
+<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
+        v-for="col in columns"
+        :prop="col.prop"
+        :key="col.prop"
+        :label="col.label"
+        :align="col.align"
+        :resizable="col.resizable"
+      >
+        <template slot-scope="scope">
+          <span v-if="col.prop == 'type'">{{
+            projectType[scope.row.type]
+          }}</span>
+          <span v-else>{{ scope.row[col.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-collapse-transition>
+    </el-collapse-transition>
+    <transition name="el-zoom-in-top">
+      <div class="menulist" v-show="menuOpen" ref="menulist">
+        <div
+          class="item"
+          v-for="(item, index) in menuLists"
+          @click="handleMenuClick(index, item)"
+          :key="item + index"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </transition>
+  </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,
+      headerList: {
+        name: true,
+        ower: true,
+        per: true,
+        type: true
+      },
+      projectType: {
+        1: "计划项目",
+        2: "里程碑",
+        3: "分组"
+      },
+      menuLists: ["编辑", "里程碑", "分组", "删除"],
+      columns: [
+        {
+          prop: "name",
+          label: "名称",
+          width: "200px",
+          resizable: false
+        },
+        {
+          prop: "ower",
+          label: "负责人",
+          align: "center",
+          resizable: false
+        },
+        {
+          prop: "per",
+          label: "进度",
+          align: "center",
+          resizable: false
+        },
+        {
+          prop: "type",
+          label: "项目类型",
+          align: "center",
+          resizable: false
+        }
+      ],
+      columnsCopy: [
+        {
+          prop: "name",
+          label: "名称",
+          width: "200px",
+          resizable: false
+        },
+        {
+          prop: "ower",
+          label: "负责人",
+          align: "center",
+          resizable: false
+        },
+        {
+          prop: "per",
+          label: "进度",
+          align: "center",
+          resizable: false
+        },
+        {
+          prop: "type",
+          label: "项目类型",
+          align: "center",
+          resizable: 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);
+    },
+    handlerSave() {
+      this.isShowHeaderBox = false;
+      let arr = [];
+      this.columnsCopy.forEach(item => {
+        if (this.headerList[item.prop] == true) {
+          arr.push(item);
+        }
+      });
+      this.columns = arr;
+    },
+    maskClick() {
+      this.isShowHeaderBox = false;
+      this.menuOpen = false;
+      this.currentRow = {};
+    },
+    handlerRowClick(row, column) {
+      // console.log(column);
+      if (row.type != 3) {
+        this.$emit("handlerRowClick", row);
+      }
+    },
+    handleRowMore(row, e) {
+      this.menuLists = ["编辑", "里程碑", "分组", "删除"];
+      if (row.parentId) {
+        this.menuLists = ["编辑", "里程碑", "删除"];
+      }
+      if (row.type == "1") {
+        this.menuLists[1] = "里程碑";
+      } else if (row.type == "2") {
+        this.menuLists[1] = "计划项目";
+      } else if (row.type == "3") {
+        this.menuLists = ["编辑", "添加任务", "删除分组"];
+      }
+      this.menuOpen = true;
+      this.currentRow = row;
+      let s = this.$refs.menulist.style;
+      s.top = e.y - 10 - 40 + "px";
+      s.left = e.x + 20 + "px";
+    },
+    handleShowHeaderCheckBox() {
+      this.isShowHeaderBox = !this.isShowHeaderBox;
+    },
+    handleMenuClick(index, name) {
+      this.menuOpen = false;
+      if (index == 3) {
+        this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+          center: true
+        })
+          .then(() => {
+            this.$emit("handlerDel", this.currentRow);
+          })
+          .catch(() => {});
+      } else if (index == 1) {
+        if (this.currentRow.type == 3) {
+          console.log("添加任务");
+          this.$emit("handleGroupAdd", this.currentRow);
+          return;
+        }
+        this.$confirm(`确定转为${this.menuLists[1]}？`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "info",
+          center: true
+        })
+          .then(() => {
+            if (this.currentRow.type == "1") {
+              this.$emit("milestone", this.currentRow);
+            } else if (this.currentRow.type == "2") {
+              this.$emit("planProject", this.currentRow);
+            }
+          })
+          .catch(() => {});
+      } else if (index == 0) {
+        this.$emit("handlerEdit", this.currentRow);
+      } else if (index == 2) {
+        console.log(name);
+        if (this.currentRow.type == 3 && name == "删除分组") {
+          this.$confirm("此操作将永久删除该分组及其子项目, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+            center: true
+          })
+            .then(() => {
+              this.$emit("handlerDel", this.currentRow);
+            })
+            .catch(() => {});
+          return;
+        }
+        if (name == "删除") {
+          this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+            center: true
+          })
+            .then(() => {
+              this.$emit("handlerDel", this.currentRow);
+            })
+            .catch(() => {});
+          return;
+        }
+        this.$confirm(`确定转为分组？`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "info",
+          center: true
+        })
+          .then(() => {
+            this.$emit("handlerGroup", this.currentRow);
+          })
+          .catch(() => {});
+      }
+    }
+  },
+  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/views/pm/components/slider.vue b/hb_client/src/views/pm/components/slider.vue
new file mode 100644
index 0000000..d4e0260
--- /dev/null
+++ b/hb_client/src/views/pm/components/slider.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="slider" ref="slider" :style="{ width: '100%' }">
+    <div class="process" :style="{ width }" style="font-size: 12px;color: #ffffff;text-align: right">
+      {{ per }}
+    </div>
+    <div class="process1" :style="{width:process1Width}" style="font-size: 12px;color: #ffffff;text-align: right"> {{ per1 }}</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>
+.box {
+  margin: 100px auto 0;
+  width: 80%;
+}
+.clear:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.slider {
+  position: relative;
+  height: 20px;
+  background: #e4e7ed;
+  border-radius: 3px;
+  cursor: move;
+  user-select: none;
+}
+.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 .thunk {
+  position: absolute;
+  left: 100px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}
+.slider .block {
+  transition: 0.2s all;
+}
+.slider .block i {
+  font-size: 25px;
+  position: relative;
+  left: -3px;
+  top: 15px;
+  cursor: pointer;
+}
+.slider .tips {
+  position: absolute;
+  left: -3px;
+  bottom: 0px;
+  font-size: 12px;
+  line-height: 24px;
+  min-width: 15px;
+  text-align: center;
+  padding: 1px 5px;
+  background: #000;
+  border-radius: 5px;
+  height: 24px;
+  color: #fff;
+}
+.slider .tips i {
+  position: absolute;
+  margin-left: -5px;
+  left: 50%;
+  bottom: -9px;
+  font-size: 16px;
+  color: #000;
+}
+.slider .block:hover {
+  transform: scale(1.1);
+  opacity: 0.6;
+}
+</style>
\ No newline at end of file
diff --git a/hb_client/src/views/pm/gantt.vue b/hb_client/src/views/pm/gantt.vue
new file mode 100644
index 0000000..4d36fcd
--- /dev/null
+++ b/hb_client/src/views/pm/gantt.vue
@@ -0,0 +1,2153 @@
+<template>
+  <div class="chart" ref="chart">
+    <div class="left" :style="{ width: rightLineX + 'px' }">
+      <leftMenu
+        :list="list"
+        ref="leftMenu"
+        :BGScrollTop.sync="BGScrollTop"
+        @TableScrollTop="TableScrollTop"
+        @handlerRowClick="handlerRowClick"
+        @milestone="handlerMilestone"
+        @planProject="handlerPlanProject"
+        @handlerGroup="handlerGroup"
+        @handlerEdit="handlerEdit"
+        @handleGroupAdd="handleGroupAdd"
+        @handlerExpand="handlerExpand"
+        @handlerDel="handlerDel"
+      ></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" :style="{ left: rightLineX + 2 + 'px' }">
+      <div class="years" v-for="item in allDays" :key="item.year">
+        <div
+          class="month"
+          v-for="(value, key) in item.month[0]"
+          :key="value + 'zz' + 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="index + 'cc'"
+            class="day"
+            :style="{ width: currentDaySize.value + 'px' }"
+          >
+            <template v-if="currentDaySize.value == 40">
+              <span
+                class="dateNum todayDateNum"
+                v-if="j.today"
+                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 == 24">
+              <!-- <span class="dateNum todayDateNum" v-if="j.today">
+              {{ j.date }}
+            </span> -->
+              <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
+                  style="width:100%21px;height:100%;"
+                  :style="{
+                    borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
+                  }"
+                  v-show="
+                    (j.width == currentLineDay.end &&
+                      isHover &&
+                      j.weekday != 1) ||
+                      (j.width == currentLineDay.start &&
+                        isHover &&
+                        j.weekday != 1) ||
+                      j.weekday == 1
+                  "
+                >
+                  {{ 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 == 12">
+              <!-- <span class="dateNum todayDateNum" v-if="j.today">
+              {{ j.date }}
+            </span> -->
+              <span
+                class="dateNum"
+                :class="{
+                  isHover:
+                    j.width >= currentLineDay.start &&
+                    j.width <= currentLineDay.end,
+                  nodBorder:
+                    j.width >= currentLineDay.start &&
+                    j.width <= currentLineDay.end
+                }"
+              >
+                <div
+                  style="width:100%;height:100%;font-size:10px!important;"
+                  :style="{
+                    borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
+                  }"
+                  v-show="
+                    (j.width == currentLineDay.end && isHover && j.date != 1) ||
+                      (j.width == currentLineDay.start &&
+                        isHover &&
+                        j.date != 1) ||
+                      j.date == 1
+                  "
+                >
+                  {{ 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
+              class="line"
+              :style="{
+                left: item.left + 'px',
+                width: item.widthMe + 'px',
+                top: item.top + 'px'
+              }"
+              v-show="(item.type == '1' || item.type == '2') && item.isShow"
+              :ref="'line' + item.id"
+              :key="item.id + index + 'ccc'"
+              @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
+                :min="0"
+                :max="10"
+                v-model="item.per"
+                :id="item.id"
+                :per1="item.per1"
+                :disabled="disable"
+                :parentId="item.parentId"
+                :widths="item.widthChild"
+                v-show="item.type == '1'"
+              ></slider>
+              <!-- <div
+                 class="leftCurDrag"
+                 v-show="item.type == '1'"
+                 @mousedown.stop="
+                   leftCurDragMounsedown(
+                     `line${item.id}`,
+                     $event,
+                     item.id,
+                     item.parentId,
+                     index
+                   )
+                 "
+               ></div>
+               <div
+                 class="rightCurDrag"
+                 v-show="item.type == '1'"
+                 @mousedown.stop="
+                   rightCurDragMounsedown(
+                     `line${item.id}`,
+                     $event,
+                     item.id,
+                     item.parentId,
+                     index
+                   )
+                 "
+               ></div>-->
+              <div
+                class="stoneLine"
+                :style="{ top: -item.top + 'px', height: item.top + 'px' }"
+                v-if="item.type == '2'"
+                @mouseenter="stoneLineMouseenter"
+              ></div>
+              <div class="milestone" v-if="item.type == '2'">
+                <i class="el-icon-check"></i>
+              </div>
+            </div>
+            <div
+              class="group"
+              :style="{
+                top: item.top + 'px',
+                left: item.left + 'px',
+                width: item.widthMe + 'px'
+              }"
+              v-if="item.type == '3'"
+              :key="item.id + 'zzzzz'"
+            >
+              <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">
+            {{ this.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 + 'ck'"
+              @click.native="handleSetDaySize(item)"
+            >{{ item.label }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <transition name="el-zoom-in-center">
+        <div
+          class="projectMsg"
+          v-if="isShowMsg"
+          :style="{
+            left: currentProjectMsg.left + 'px',
+            top: currentProjectMsg.top + 'px'
+          }"
+        >
+          <div class="lineMsg">
+            <span class="projectName">{{ currentProjectMsg.name }}</span>
+          </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>
+</template>
+
+<script>
+  import slider from "./components/slider";
+  import leftMenu from "./components/leftMenu";
+  export default {
+    components: {
+      slider,
+      leftMenu,
+    },
+    data() {
+      return {
+        //当前项是否是子集
+        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],
+        //项目数据
+        list: [
+          {
+            name: "1",
+            ower: "",
+            per: 30,
+            type: "3",
+            planTime: [],
+            stoneTime: "",
+            startTime: "",
+            endTime: "",
+            id: 1589512272596,
+            expand: true,
+            top: 15,
+            isShow: true,
+            children: [
+              {
+                name: "1-1",
+                ower: "",
+                per: 8,
+                per1: 6,
+                type: "1",
+                planTime: [1589472000000, 1589817600000],
+                stoneTime: "",
+                startTime: 1589472000000,
+                endTime: 1589817600000,
+                left: 20000,
+                widthChild: 200,
+                widthMe: 200,
+                top: 55,
+                id: 1589512287571,
+                isShow: true,
+                parentId: 1589512272596
+              },
+              {
+                name: "1-2",
+                ower: "",
+                per: 3,
+                per1: 2,
+                type: "1",
+                planTime: [1589817600000, 1590076800000],
+                stoneTime: "",
+                startTime: 1589817600000,
+                endTime: 1590076800000,
+                left: 20160,
+                widthChild: 160,
+                widthMe: 160,
+                top: 95,
+                id: 1589512309848,
+                isShow: true,
+                parentId: 1589512272596
+              }
+            ],
+            widthChild: 320,
+            widthMe: 320,
+            left: 20000
+          },
+          /*{
+            name: "2",
+            ower: "",
+            per: 100,
+            type: "2",
+            planTime: [],
+            stoneTime: 1590249600000,
+            startTime: 1590249600000,
+            endTime: 1590249600000,
+            left: 20360,
+            widthChild: 40,
+            widthMe: 40,
+            top: 135,
+            id: 1589512324786,
+            isShow: true
+          },
+          {
+            name: "3",
+            ower: "",
+            per: 100,
+            type: "2",
+            planTime: [1589472000000, 1589817600000],
+            stoneTime: 1590422400000,
+            startTime: 1590422400000,
+            endTime: 1590422400000,
+            left: 20440,
+            widthChild: 40,
+            widthMe: 40,
+            top: 175,
+            id: 1589512356185,
+            isShow: true
+          }*/
+        ],
+        // list: [],
+        //当前hover的项目起止时间
+        currentLineDay: {
+          start: 0,
+          end: 0
+        },
+        //当前的时间大小
+        currentDaySize: {
+          label: "天",
+          value: 40
+        },
+        currentDaySizeOptions: [
+          {
+            label: "天",
+            value: 40
+          },
+          {
+            label: "周",
+            value: 24
+          },
+          {
+            label: "月",
+            value: 12
+          }
+        ],
+        //是否显示信息
+        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: []
+      };
+    },
+    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 = e.srcElement.scrollTop;
+      },
+      //保存当前的所有数据
+      handlerSaveData() {
+        // console.log(this.list);
+        // this.handlerCheckList();
+      },
+      //过滤导入的数据
+      handlerCheckList() {
+        let l = [];
+        l.forEach((item, index) => {
+          item.planTime = [];
+          item.left =
+            item.type == 3 ? "" : this.computedTimeWidth(item.startTime);
+          item.widthMe = item.widthChild =
+            item.type == 3
+              ? ""
+              : 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.top = item.top + i * 40 + 35;
+                  k.isShow = true;
+                  k.left = this.computedTimeWidth(k.startTime);
+                  k.widthMe = k.widthChild = this.computedTimeWidth(
+                    k.startTime,
+                    k.endTime
+                  );
+                });
+              }
+            }
+          } else {
+            if (l[index - 1].type == 3) {
+              item.top =
+                l[index - 1].top + l[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.top = item.top + o * 40;
+                    z.isShow = true;
+                    z.left = this.computedTimeWidth(z.startTime);
+                    z.widthMe = z.widthChild = this.computedTimeWidth(
+                      z.startTime,
+                      z.endTime
+                    );
+                  });
+                }
+              }
+            } else {
+              item.top = l[index - 1].top + 40;
+            }
+          }
+        });
+        l.forEach(item => {
+          if (item.type == 3) {
+            this.setGroupWidth(item.id, l);
+            this.setGroupPer(item.id, l);
+          }
+        });
+        // console.log(l);
+        this.list = l;
+        this.setStoneLine(1);
+        // window.scrollTo(this.list[0].left - 100, 0);
+        window.scrollTo({
+          top: 0,
+          left: this.list[0].left - 100,
+          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);
+      },
+      //分组添加子集
+      handleGroupAdd(row) {
+        this.$nextTick(() => {
+          this.$refs.dialogAdd.resetFields();
+        });
+        this.currentListIndex = this.list.findIndex(item => {
+          return item.id == row.id;
+        });
+        this.dialogVal = true;
+        this.isChildren = true;
+      },
+      //编辑
+      handlerEdit(row) {
+        this.title = "编辑";
+        this.dialogVal = true;
+        let obj = {};
+        if (row.parentId) {
+          this.editRow[0] = row.parentId;
+          this.editRow[1] = row.id;
+          let parent = this.list.find(item => {
+            return item.id == row.parentId;
+          });
+          let cur = parent.children.find(item => {
+            return item.id == row.id;
+          });
+          let { name, ower, type, planTime, stoneTime, per } = cur;
+          obj = { name, ower, type, planTime, stoneTime, per };
+          if (type == 2) {
+            obj.stoneTime = this.computedWithTime(cur.left, true);
+          }
+          obj.planTime[0] = this.computedWithTime(cur.left, true);
+          obj.planTime[1] = this.computedWithTime(
+            cur.left + cur.widthMe - this.currentDaySize.value,
+            true
+          );
+          // console.log(obj);
+          this.$nextTick(() => {
+            this.$refs.dialogAdd.form = obj;
+          });
+        } else {
+          this.editRow[0] = row.id;
+          let cur = this.list.find(item => {
+            return item.id == row.id;
+          });
+          let { name, ower, type, planTime, stoneTime, per } = cur;
+          obj = { name, ower, type, planTime, stoneTime, per };
+          if (type == 2) {
+            obj.stoneTime = this.computedWithTime(cur.left, true);
+          }
+          obj.planTime[0] = this.computedWithTime(cur.left, true);
+          obj.planTime[1] = this.computedWithTime(
+            cur.left + cur.widthMe - this.currentDaySize.value,
+            true
+          );
+          this.$nextTick(() => {
+            this.$refs.dialogAdd.form = obj;
+          });
+        }
+      },
+      //删除
+      handlerDel(row) {
+        if (!row.parentId) {
+          let index = this.list.findIndex(item => {
+            return item.id == row.id;
+          });
+          this.list.splice(index, 1);
+          if (row.type == 3) {
+            if (!row.expand) {
+              this.retDelTop(index, 1);
+            } else {
+              this.retDelTop(index, row.children.length + 1);
+            }
+          } else {
+            this.retDelTop(index, 1);
+          }
+        } else {
+          let parent = this.list.find(item => {
+            return item.id == row.parentId;
+          });
+          let parentIndex = this.list.findIndex(item => {
+            return item.id == row.parentId;
+          });
+          let cindex = parent.children.findIndex(k => {
+            return k.id == row.id;
+          });
+          parent.children.splice(cindex, 1);
+          if (parent.children[cindex]) {
+            parent.children.forEach((o, i) => {
+              if (i >= cindex) {
+                o.top = o.top - 40;
+              }
+            });
+          }
+          this.setGroupWidth(row.parentId);
+          this.setGroupPer(row.parentId);
+          this.resetTop(parentIndex, true);
+          this.$set(this.list, parentIndex, parent);
+        }
+      },
+      //dialog beforClose
+      handleClose(done) {
+        this.currentListIndex = "";
+        this.isChildren = false;
+        this.editRow = [];
+        this.$refs.dialogAdd.resetFields();
+        this.$refs.dialogAdd.form.per = 0;
+        done();
+      },
+      //dialog 取消
+      onCancle() {
+        this.currentListIndex = "";
+        this.isChildren = false;
+        this.$refs.dialogAdd.form.per = 0;
+        this.editRow = [];
+      },
+      //编辑保存
+      handleEditSave(row) {
+        // console.log(row);
+        if (this.editRow.length == 1) {
+          let cur = this.list.find(item => {
+            return item.id == this.editRow[0];
+          });
+          cur = Object.assign(cur, row);
+          cur.planTime = row.planTime;
+          if (cur.type != 3) {
+            cur.startTime = row.stoneTime ? row.stoneTime : row.planTime[0];
+            cur.endTime = row.stoneTime ? row.stoneTime : row.planTime[1];
+            cur.left = this.computedTimeWidth(cur.startTime);
+            cur.widthChild = cur.widthMe = this.computedTimeWidth(
+              cur.startTime,
+              cur.endTime
+            );
+            cur.per = row.per;
+          }
+        } else if (this.editRow.length == 2) {
+          let parent = this.list.find(item => {
+            return item.id == this.editRow[0];
+          });
+          let cur = parent.children.find(item => {
+            return item.id == this.editRow[1];
+          });
+          cur = Object.assign(cur, row);
+          cur.planTime = row.planTime;
+          cur.startTime = row.stoneTime ? row.stoneTime : row.planTime[0];
+          cur.endTime = row.stoneTime ? row.stoneTime : row.planTime[1];
+          cur.left = this.computedTimeWidth(cur.startTime);
+          cur.widthChild = cur.widthMe = this.computedTimeWidth(
+            cur.startTime,
+            cur.endTime
+          );
+          this.setGroupWidth(this.editRow[0]);
+        }
+        this.editRow = [];
+        this.$refs.dialogAdd.form.per = 0;
+      },
+      // 根据时间计算距离
+      computedTimeWidth(startTime, endTime) {
+        let left =
+          (Math.floor(
+            startTime - new Date(`${this.currentYear - 1}/01/01`).getTime()
+            ) /
+            (1000 * 60 * 60 * 24)) *
+          this.currentDaySize.value;
+        let width =
+          (Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) *
+          this.currentDaySize.value +
+          this.currentDaySize.value;
+        if (!endTime) {
+          return left;
+        } else {
+          return width;
+        }
+      },
+      //新建保存
+      async handleSave(val, isChildren) {
+        let obj = Object.assign({}, val);
+        // console.log(obj);
+        let index = this.list.length;
+        // obj.per = 0;
+        obj.startTime = obj.planTime.length > 0 ? obj.planTime[0] : obj.stoneTime;
+        obj.endTime = obj.planTime.length > 0 ? obj.planTime[1] : obj.stoneTime;
+
+        if (obj.type != 3) {
+          obj.left = this.computedTimeWidth(obj.startTime);
+          obj.widthMe = obj.widthChild = this.computedTimeWidth(
+            obj.startTime,
+            obj.endTime
+          );
+          // console.log(obj.type);
+          if (index == 0) {
+            obj.top = 15;
+          } else {
+            if (
+              this.list[index - 1].children &&
+              this.list[index - 1].children.length > 0
+            ) {
+              obj.top =
+                this.list[index - 1].children[
+                this.list[index - 1].children.length - 1
+                  ].top + 40;
+              // console.log("ggggggg");
+              // obj.top =
+              //   this.list[index - 1].children.length * 40 +
+              //   this.list[index - 1].top +
+              //   40;
+            } else {
+              // console.log("zzzz");
+              obj.top = this.list[index - 1].top + 40;
+              // console.log(obj.top);
+            }
+          }
+        }
+        if (obj.type == 2) {
+          obj.per = 100;
+          // this.setStoneLine();
+        }
+        if (obj.type == 3) {
+          obj.per = 0;
+          obj.id = new Date().getTime();
+          obj.expand = true;
+          if (index == 0) {
+            obj.top = 15;
+          } else {
+            if (
+              this.list[index - 1].children &&
+              this.list[index - 1].children.length > 0
+            ) {
+              obj.top =
+                this.list[index - 1].children[
+                this.list[index - 1].children.length - 1
+                  ].top + 40;
+            } else {
+              obj.top = this.list[index - 1].top + 40;
+            }
+          }
+        }
+        obj.id = new Date().getTime();
+        obj.isShow = true;
+        // console.log(this.currentListIndex);
+        if (isChildren && this.currentListIndex !== "") {
+          let s = this.list[parseInt(this.currentListIndex)];
+          s.children = s.children ? s.children : [];
+          let cindex = s.children.length;
+          obj.top = 40 + cindex * 40 + s.top;
+          obj.parentId = s.id;
+          s.children.push(obj);
+          s.children.forEach(item => {
+            item.isShow = true;
+          });
+          // console.log(s);
+          this.setGroupWidth(s.id);
+          this.setGroupPer(s.id);
+          this.resetTop(this.currentListIndex);
+          this.$set(this.list, parseInt(this.currentListIndex), s);
+        } else {
+          this.list.push(obj);
+        }
+        this.currentListIndex = "";
+        this.isChildren = false;
+        this.$refs.dialogAdd.resetFields();
+        this.$refs.dialogAdd.form.per = 0;
+        this.handlerRowClick(obj);
+        this.handlerCheckIsExpandRow();
+      },
+      handlerCheckIsExpandRow() {
+        this.$nextTick(() => {
+          if (this.expandArr.length == 0) return;
+          this.expandArr.forEach(i => {
+            this.$refs.leftMenu.$refs.tableMenu.toggleRowExpansion(
+              this.list[i],
+              false
+            );
+          });
+          this.list.forEach((i, index) => {
+            if (index > this.expandArr[0]) {
+              i.top = i.top + 40;
+              if (i.children && i.children.length > 0 && i.expand) {
+                i.children.forEach(z => {
+                  z.top = z.top + 40;
+                });
+              }
+            }
+          });
+        });
+      },
+      //修改后续高度
+      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;
+      },
+      //新建项目
+      handlerAddGantt() {
+        this.dialogVal = true;
+        this.title = "新建";
+        // console.log(this.list);
+        let arr = [];
+        this.list.forEach((i, index) => {
+          if (i.children && i.children.length > 0 && i.expand == false) {
+            console.log(i.children && i.children.length > 0 && i.expand == false);
+            arr.push(index);
+          }
+        });
+        this.expandArr = arr;
+        // console.log(arr);
+        this.$nextTick(() => {
+          this.$refs.dialogAdd.resetFields();
+        });
+      },
+      // 转为分组
+      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]);
+      },
+      //里程碑去掉mouseenter显示
+      stoneLineMouseenter() {
+        this.isShowMsg = false;
+        this.currentLineDay = {
+          start: 0,
+          end: 0
+        };
+      },
+      //转为计划任务
+      handlerPlanProject(row) {
+        if (!row.parentId) {
+          let index = this.list.findIndex(item => {
+            return item.id == row.id;
+          });
+          this.list[index].type = "1";
+          this.list[index].stoneTime = "";
+          this.list[index].per = 0;
+          this.list[index].left =
+            row.left + row.widthMe - this.currentDaySize.value;
+          this.list[index].widthMe = this.currentDaySize.value;
+          this.list[index].widthChild = this.currentDaySize.value;
+        } else {
+          let cindex = this.list.findIndex(item => {
+            return item.id == row.parentId;
+          });
+          this.list[cindex].children.forEach(cl => {
+            if (cl.id == row.id) {
+              cl.type = "1";
+              cl.per = 0;
+              cl.stoneTime = "";
+              cl.left = row.left + row.widthMe - this.currentDaySize.value;
+              cl.widthMe = cl.widthChild = this.currentDaySize.value;
+            }
+          });
+          this.setGroupPer(row.parentId);
+          this.$set(this.list, cindex, this.list[cindex]);
+        }
+      },
+      //转化为里程碑
+      handlerMilestone(row) {
+        if (!row.parentId) {
+          let index = this.list.findIndex(item => {
+            return item.id == row.id;
+          });
+          this.list[index].per = 100;
+          this.list[index].type = "2";
+          // let endTimeWidth = row.left + row.widthMe;
+          this.list[index].left =
+            row.left + row.widthMe - this.currentDaySize.value;
+          this.list[index].widthMe = this.currentDaySize.value;
+          this.list[index].widthChild = this.currentDaySize.value;
+          this.setStoneLine();
+        } else {
+          let cindex = this.list.findIndex(item => {
+            return item.id == row.parentId;
+          });
+          let cur = this.list.find(item => {
+            return item.id == row.parentId;
+          });
+          let cl = cur.children.find(item => {
+            return item.id == row.id;
+          });
+          cl.type = "2";
+          cl.per = 100;
+          cl.left = row.left + row.widthMe - this.currentDaySize.value;
+          cl.widthMe = this.currentDaySize.value;
+          cl.widthChild = this.currentDaySize.value;
+          this.setGroupPer(row.parentId);
+          this.setGroupWidth(row.parentId);
+          this.$set(this.list, cindex, cur);
+          this.setStoneLine();
+        }
+      },
+      //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) {
+        // console.log(row);
+        this.currentRow = row;
+        this.$refs.chart.scrollTo({
+          top: 0,
+          left: row.left - 100,
+          behavior: "smooth"
+        });
+      },
+      //更改daySize
+      handleSetDaySize(item) {
+        // console.log(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  {String} dom ref
+       * @param  {Object} e $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      leftCurDragMounsedown(dom, e, id, parentId, index) {
+        let line = this.$refs[dom][0];
+        let cx = e.pageX;
+        let result;
+        let result1;
+        let z = 0;
+        let x = 0;
+        let addwidth;
+        let timers;
+        document.onmousemove = event => {
+          if (
+            event.clientX <= this.rightLineX + 80 &&
+            event.pageX >= this.rightLineX + 80
+          ) {
+            if (!this.timer) {
+              this.timer = window.setInterval(() => {
+                z = window.scrollX - this.currentDaySize.value;
+                // window.scrollTo(z, 0);
+                window.scrollTo({
+                  top: 0,
+                  left: z,
+                  behavior: "smooth"
+                });
+                addwidth = cx - event.pageX;
+              }, 50);
+            }
+          } else if (event.clientX >= window.innerWidth - 80) {
+            if (!timers) {
+              timers = window.setInterval(() => {
+                x = window.scrollX + this.currentDaySize.value;
+                // window.scrollTo(x, 0);
+                window.scrollTo({
+                  top: 0,
+                  left: x,
+                  behavior: "smooth"
+                });
+                addwidth = -(event.pageX - cx);
+              }, 50);
+            }
+          } else {
+            window.clearInterval(this.timer);
+            window.clearInterval(timers);
+            this.timer = null;
+            timers = null;
+            if (event.pageX <= this.rightLineX) {
+              addwidth = -(this.rightLineX - 2 - cx);
+            } else {
+              addwidth = -(event.pageX - cx);
+            }
+          }
+          result = this.computedList[index].widthMe + addwidth;
+          result1 = this.computedList[index].left - addwidth;
+          if (result <= this.currentDaySize.value) {
+            result = this.currentDaySize.value;
+            result1 =
+              this.computedList[index].left +
+              this.computedList[index].widthMe -
+              this.currentDaySize.value;
+          } else if (result1 <= 0) {
+            result1 = 0;
+            // console.log(result1);
+          }
+          line.style.width = result + "px";
+          line.style.left = result1 + "px";
+          this.computedList[index].widthChild = result;
+          this.lineMouseover(dom, e, id, parentId, index);
+          this.lineMouseleave(e, true);
+        };
+        document.onmouseup = events => {
+          if (!result) {
+            document.onmousemove = document.onmouseup = null;
+            return;
+          }
+          window.clearInterval(this.timer);
+          window.clearInterval(timers);
+          this.timer = null;
+          timers = null;
+          result =
+            Math.round(result / this.currentDaySize.value) *
+            this.currentDaySize.value;
+          result1 =
+            Math.round(parseInt(line.style.left) / this.currentDaySize.value) *
+            this.currentDaySize.value;
+          this.computedList[index].widthMe = result;
+          this.computedList[index].widthChild = result;
+          line.style.width = result + "px";
+          this.computedList[index].left = result1;
+          line.style.left = result1 + "px";
+          this.checkIsin(dom, events, id, parentId, index);
+          // this.setComputedListGroupWidth(parentId);
+          if (parentId) {
+            this.list.forEach(item => {
+              if (item.id == parentId) {
+                item.children.forEach(k => {
+                  if (k.id == id) {
+                    k.widthMe = k.widthChild = result;
+                    k.left = result1;
+                  }
+                });
+              }
+            });
+            this.setGroupWidth(parentId);
+          } else {
+            this.list.forEach(item => {
+              if (item.id == id) {
+                item.widthMe = item.widthChild = result;
+                item.left = result1;
+              }
+            });
+          }
+          document.onmousemove = document.onmouseup = null;
+        };
+      },
+      //右侧边缘增加
+      /**
+       * @param  {String} dom ref
+       * @param  {Object} e $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      rightCurDragMounsedown(dom, e, id, parentId, index) {
+        let line = this.$refs[dom][0];
+        let cx = e.pageX;
+        let result;
+        let z = 0;
+        let x = 0;
+        let wx = window.scrollX;
+        let addwidth;
+        let timers;
+        document.onmousemove = event => {
+          if (event.clientX >= window.innerWidth - 80) {
+            if (!this.timer) {
+              z = 0;
+              wx = window.scrollX;
+              this.timer = window.setInterval(() => {
+                z = z + this.currentDaySize.value;
+                // window.scrollTo(z + wx, 0);
+                window.scrollTo({
+                  top: 0,
+                  left: z + wx,
+                  behavior: "smooth"
+                });
+                addwidth = event.pageX - cx + z;
+              }, 50);
+            }
+          } else if (event.clientX <= this.rightLineX + 80) {
+            if (!timers) {
+              timers = window.setInterval(() => {
+                x = window.scrollX - this.currentDaySize.value;
+                // window.scrollTo(x, 0);
+                window.scrollTo({
+                  top: 0,
+                  left: x,
+                  behavior: "smooth"
+                });
+                addwidth = event.pageX - cx;
+              }, 50);
+            }
+          } else {
+            window.clearInterval(this.timer);
+            window.clearInterval(timers);
+            this.timer = null;
+            timers = null;
+            addwidth = event.pageX - cx;
+          }
+          result = this.computedList[index].widthMe + addwidth;
+          if (
+            result + parseInt(line.style.left) >=
+            this.days.length * this.currentDaySize.value
+          ) {
+            result =
+              this.days.length * this.currentDaySize.value -
+              parseInt(line.style.left);
+          }
+          line.style.width = result + "px";
+          this.computedList[index].widthChild = result;
+          // console.log(line.style.width);
+          if (result <= this.currentDaySize.value) {
+            result = this.currentDaySize.value;
+            line.style.width = result + "px";
+            this.computedList[index].widthMe = result;
+            this.computedList[index].widthChild = result;
+          }
+          this.lineMouseover(dom, e, id, parentId, index);
+          this.lineMouseleave(e, true);
+        };
+        document.onmouseup = events => {
+          if (!result) {
+            document.onmousemove = document.onmouseup = null;
+            return;
+          }
+          window.clearInterval(this.timer);
+          window.clearInterval(timers);
+          this.timer = null;
+          timers = null;
+          result =
+            Math.round(result / this.currentDaySize.value) *
+            this.currentDaySize.value;
+          this.computedList[index].widthMe = result;
+          this.computedList[index].widthChild = result;
+          line.style.width = result + "px";
+          this.checkIsin(dom, events, id, parentId, index);
+          if (parentId) {
+            this.list.forEach(item => {
+              if (item.id == parentId) {
+                item.children.forEach(k => {
+                  if (k.id == id) {
+                    k.widthMe = k.widthChild = result;
+                    // k.left = result1;
+                  }
+                });
+              }
+            });
+            this.setGroupWidth(parentId);
+          } else {
+            this.list.forEach(item => {
+              if (item.id == id) {
+                item.widthMe = item.widthChild = result;
+                // item.left = result1;
+              }
+            });
+          }
+          document.onmousemove = document.onmouseup = null;
+        };
+      },
+      //根据距离计算时间
+      /**
+       * @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.pageX + 220 - window.scrollX >= window.innerWidth
+              ? e.pageX - 220 - 600
+              : e.pageX + 50 - 600,
+          top: e.y + 20
+        };
+        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();
+      },
+      //每一行拖拽
+      /**
+       * @param  {String} dom ref
+       * @param  {Object} events $event
+       * @param  {Number} id id
+       * @param  {Number} parentId parentId
+       * @param  {Number} index index
+       */
+      lineMousedown(dom, e, id, parentId, index) {
+        let line = this.$refs[dom][0];
+        let cp = e.pageX;
+        let result;
+        let z = 0;
+        let left;
+        // console.log(cp);
+        document.onmousemove = event => {
+          if (event.clientX >= window.innerWidth - 40) {
+            z = window.scrollX + this.currentDaySize.value;
+            // window.scrollTo(z, 0);
+            window.scrollTo({
+              top: 0,
+              left: z,
+              behavior: "smooth"
+            });
+            let newWith = event.pageX - cp;
+            result = this.computedList[index].left + newWith;
+            line.style.left = result + "px";
+            if (result <= 0) result = 0;
+          } else if (event.clientX <= 40 + this.rightLineX) {
+            z = window.scrollX - this.currentDaySize.value;
+            // window.scrollTo(z, 0);
+            window.scrollTo({
+              top: 0,
+              left: z,
+              behavior: "smooth"
+            });
+            let newWith = event.pageX - cp;
+            result = this.computedList[index].left + newWith;
+            if (result <= 0) result = 0;
+            line.style.left = result + "px";
+          } else {
+            let newWith = event.pageX - cp;
+            result = this.computedList[index].left + newWith;
+            if (result <= 0) result = 0;
+            line.style.left = result + "px";
+          }
+          this.lineMouseover(dom, e, id, parentId, index);
+          this.lineMouseleave(e, true);
+        };
+        document.onmouseup = events => {
+          if (!result) {
+            document.onmousemove = document.onmouseup = null;
+            return;
+          }
+          left =
+            Math.round(result / this.currentDaySize.value) *
+            this.currentDaySize.value;
+          this.computedList[index].left = left;
+          line.style.left = left + "px";
+          this.checkIsin(dom, events, id, parentId, index);
+          if (parentId) {
+            this.list.forEach(item => {
+              if (item.id == parentId) {
+                item.children.forEach(k => {
+                  if (k.id == id) {
+                    k.left = left;
+                  }
+                });
+              }
+            });
+            this.setGroupWidth(parentId);
+          } else {
+            this.list.forEach(item => {
+              if (item.id == id) {
+                item.left = left;
+              }
+            });
+          }
+          document.onmousemove = document.onmouseup = null;
+        };
+      },
+      //获取近三年的所有天数
+      getDay() {
+        this.getAllDate();
+      },
+      //判断是否为闰年
+      /**
+       * @param  {Number} year 传入年份
+       */
+      isLeapYear(year) {
+        if (year % 4 > 0) {
+          return true;
+        }
+        return false;
+      },
+      getAllDate() {
+        let obj = {};
+        let 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);
+        });
+        // console.log(this.allDays);
+        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;
+        }
+      },
+      setList() {},
+      //设置里程碑线的高度
+      setStoneLine(isFirst) {
+        this.$nextTick(() => {
+          // let arr = Array.from(document.getElementsByClassName("stoneLine"));
+          let height = window.getComputedStyle(
+            document.getElementsByClassName("lineBG")[0]
+          ).height;
+          // console.log(height);
+          this.lineBGHeight = height;
+          // height = isFirst ? parseFloat(height) : parseFloat(height) - 16.8;
+          // arr.forEach(e => {
+          //   // e.style.height = height + "px";
+          //   console.log(e.getBoundingClientRect());
+          // });
+          // console.log(arr[arr.length - 1].getBoundingClientRect());
+          // arr[arr.length - 1].height = "1095px";
+        });
+      },
+      //顶部固定时间
+      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;
+            });
+          }
+        });
+      }
+    },
+    mounted() {
+      document.addEventListener("scroll", this.handleScroll);
+      this.getDay();
+      this.setList();
+      this.setStoneLine();
+    },
+    beforeDestroy() {
+      window.removeEventListener("scroll", this.handleScroll);
+      document.onmousemove = document.onmouseup = null;
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .chart {
+    height: 90vh;
+    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: 0px;
+        left: 0px;
+        background-color: #fff;
+      }
+    }
+    .left {
+      position: fixed;
+      /*height: calc(100% - 40px);*/
+      height: 89vh;
+      background-color: #fff;
+      z-index: 999;
+      // border-right: 1px solid #d7d7d7;
+      .rightLine {
+        z-index: 999;
+        position: absolute;
+        top: 0px;
+        height: 100%;
+        width: 2px;
+        background-color: #d7d7d7;
+        box-shadow: 4px 2px 12px 0px rgba(0, 0, 0, 0.2);
+        cursor: col-resize;
+        &:hover {
+          background-color: #409eff;
+        }
+      }
+    }
+    .showCurrentLineDate {
+      position: fixed;
+      top: 0px;
+      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: absolute;
+      width: 220px;
+      height: 230px;
+      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;
+        }
+        span {
+          font-size: 14px;
+          color: #909090;
+        }
+        .title {
+          margin-right: 10px;
+        }
+      }
+    }
+    .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: 0px;
+        top: 90px;
+        z-index: 999;
+
+        .base {
+          display: inline-block;
+          font-weight: 500;
+          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;
+      .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/wpm/need.vue b/hb_client/src/views/wpm/need.vue
index da5638f..ef1a5da 100644
--- a/hb_client/src/views/wpm/need.vue
+++ b/hb_client/src/views/wpm/need.vue
@@ -34,10 +34,9 @@
               <template slot-scope="scope">
                 <el-link
                   v-if="checkPermission(['warehouse_update'])"
-                  @click="handleInspection(scope,'view')"
+                  @click="handleInspection(scope)"
                 >检验
-                </el-link
-                >
+                </el-link>
               </template>
             </el-table-column>
           </el-table>
@@ -74,7 +73,6 @@
                 {{ actstate_[scope.row.act_state] }}
               </template>
             </el-table-column>
-
             <el-table-column label="所在子工序">
               <template slot-scope="scope">{{ scope.row.step_.name }}</template>
             </el-table-column>
@@ -82,8 +80,8 @@
               <template slot-scope="scope">
                 <el-link
                   v-if="checkPermission(['warehouse_update'])"
-                  @click="handleInspection(scope,'review')"
-                >
+                  @click="handleReview(scope)"
+                  >
                   检验
                 </el-link>
               </template>
@@ -226,7 +224,6 @@
           :results="fieldList"
           :hasPicture="hasPicture"
           :formID="recordform"
-          :step="step"
           :wproduct="wproduct"
           @formFunc="formFunc"
         />
@@ -238,6 +235,21 @@
         <el-button type="primary" @click="submitrecordform">填写检查项目</el-button>
       </div>
     </el-dialog>
+    <el-dialog
+      width="60%"
+      :title="formName"
+      :visible.sync="limitedReview"
+    >
+      <reviewForm
+        :results="fieldList"
+        :originList="originList"
+        :formID="recordform"
+        :hasPicture="hasPicture"
+        :wproduct="wproduct"
+        :origintest="origintest"
+        @formFunc="formFunc"
+      />
+    </el-dialog>
     <el-dialog title="半成品入库" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
       <el-form :model="form">
         <el-form-item label="仓库" :label-width="formLabelWidth">
@@ -296,6 +308,7 @@
 </template>
 <script>
   import customForm from '@/components/customForm/index';
+  import reviewForm from '@/components/customForm/review';
   import {getwproductList, wproductTest, wproductPutin, createputins,wproductReview} from "@/api/wpm";
   import checkPermission from "@/utils/permission";
   import {getWarehouseList} from "@/api/inm";
@@ -304,7 +317,7 @@
   import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
   const defaultetestitem = {};
   export default {
-    components: {Pagination, customForm},
+    components: {Pagination, customForm,reviewForm},
     data() {
       return {
         testitem: defaultetestitem,
@@ -362,6 +375,7 @@
         options: [],
         listLoading: true,
         fieldList: [],
+        originList: [],
         is_testok: "true",
         field: [],
         recordformList: [],
@@ -370,12 +384,13 @@
         listQueryrecordform: {
           page: 0,
         },
-        step:'view',
+        origintest:null,
         mutipID: [],
         wproduct: null,
         hasPicture: false,
         outerVisible: false,
         innerVisible: false,
+        limitedReview: false,
         dialogFormVisible: false,
         dialogFormVisibles: false,
         testrecord: {},
@@ -476,9 +491,9 @@
           }
         });
       },
-      handleInspection(scope,step) {
+      handleInspection(scope) {
         //调该物料对应的检查表
-        this.step = step;
+        // this.step = step;
         this.outerVisible = true;
         this.wproduct = scope.row.id;//半成品ID
         this.wproductactstate = scope.row.act_state;//半成品状态
@@ -491,6 +506,30 @@
           }
         });
       },
+      //半产品复检
+      handleReview(scope) {
+        let that = this;
+        this.wproduct = scope.row.id;//半成品ID
+        wproductReview({ wproduct: this.wproduct}).then((response) => {
+          if (response.data) {
+            that.hasPicture = false;
+            that.formName = response.data.name;
+            let fieldList = response.data.form_fields;
+            that.fieldList = [...fieldList];
+            that.origintest = response.data.origin_test.id;
+            that.recordform = response.data.origin_test.form;
+            let originList = response.data.origin_test.record_data_;
+            that.originList = [...originList];
+            let arr = fieldList.filter(item => {
+              return item.field_type === 'draw'
+            });
+            if (arr.length > 0) {
+              that.hasPicture = true;
+            }
+            this.limitedReview = true;
+          }
+        });
+      },
       recordformChange() {
         let that = this;
         let arr = this.recordformList.filter(item => {
@@ -502,61 +541,37 @@
       submitrecordform() {
         let that = this;
         if (that.recordform != "") {
-          if(that.step==='view'){
-            getrffieldList({form: this.recordform, page: 1, page_size: 100}).then((response) => {
-              if (response.data) {
-                that.hasPicture = false;
-                let fieldList = response.data.results;
-                that.fieldList = [...fieldList];
-                let arr = fieldList.filter(item => {
-                  return item.field_type === 'draw'
-                });
-                if (arr.length > 0) {
-                  that.hasPicture = true;
-                }
-                that.innerVisible = true;
+          getrffieldList({form: this.recordform, page: 1, page_size: 100}).then((response) => {
+            if (response.data) {
+              that.hasPicture = false;
+              let fieldList = response.data.results;
+              that.fieldList = [...fieldList];
+              let arr = fieldList.filter(item => {
+                return item.field_type === 'draw'
+              });
+              if (arr.length > 0) {
+                that.hasPicture = true;
               }
-            });
-          }else{
-            wproductReview({form: this.recordform, wproduct: this.wproduct}).then((response) => {
-              if (response.data) {
-                debugger;
-                console.log(response);
-                that.hasPicture = false;
-                let fieldList = response.data.form_fields;
-                that.fieldList = [...fieldList];
-                let arr = fieldList.filter(item => {
-                  return item.field_type === 'draw'
-                });
-                if (arr.length > 0) {
-                  that.hasPicture = true;
-                }
-                that.innerVisible = true;
-              }
-            });
-          }
+              that.innerVisible = true;
+            }
+          });
         } else this.$message.error("请选择检查表！");
       },
-      //提交检查项目
-      submitfield() {
+
+    /*  submitfield() {
         let _this = this;
         _this.field = []; //检查项目
         this.fieldList.forEach((item) => {
-
           _this.field.push({
             form_field: item.id,
             field_value: item.sort,
             is_testok: item.is_testok//单项检查结果
           });
         });
-
-        console.log(this.recordform);
         this.testrecord.form = this.recordform;//检查表
         this.testrecord.record_data = _this.field;//检查项列表
         this.testrecord.is_testok = this.is_testok;//检查表检查结果
         this.testrecord.wproduct = this.wproduct;//半成品ID
-
-
         wproductTest(this.testrecord).then((res) => {
           if (res.code >= 200) {
             this.innerVisible = false;
@@ -569,7 +584,7 @@
         });
 
 
-      },
+      },*/
       //半成品入库
       handlePutin(scope) {
         this.dialogFormVisible = true;
@@ -585,6 +600,7 @@
           }
         });
       },
+      //提交检查项目
       formFunc(value) {
         wproductTest(value).then((res) => {
           if (res.code >= 200) {