diff --git a/hb_client/src/api/srm.js b/hb_client/src/api/srm.js
index 7e3a614..ea41540 100644
--- a/hb_client/src/api/srm.js
+++ b/hb_client/src/api/srm.js
@@ -7,3 +7,11 @@ export function getPlanGantt(data) {
     params: data
   })
 }
+//合格率
+export function getProcessYield(data) {
+  return request({
+    url: '/srm/process/yield/',
+    method: 'post',
+    data
+  })
+}
diff --git a/hb_client/src/components/Gantt/components/dashLeftMenu.vue b/hb_client/src/components/Gantt/components/dashLeftMenu.vue
new file mode 100644
index 0000000..a4d8be2
--- /dev/null
+++ b/hb_client/src/components/Gantt/components/dashLeftMenu.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="tableMneu">
+    <div
+      class="mask"
+      v-if="isShowHeaderBox || menuOpen"
+      @click="maskClick"
+    ></div>
+    <el-table
+      ref="tableMenu"
+      :data="tableData"
+      border
+      fit
+      style="width: 100%"
+      row-key="id"
+      height="100%"
+      default-expand-all
+      highlight-current-row
+      @row-click="handlerRowClick"
+      @expand-change="handlerExpand"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column label="任务编号" prop="name" width="140" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column label="产品名称" prop="productName" width="120" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column label="产品型号" prop="productNum">
+      </el-table-column>
+      <el-table-column label="生产数量" prop="per">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: Array,
+    BGScrollTop: Number
+  },
+  computed: {
+    tableData() {
+      return this.list;
+    }
+  },
+  watch: {
+    BGScrollTop: {
+      handler: function(newValue) {
+        let table = this.$refs.tableMenu.bodyWrapper;
+        table.scrollTo(0, newValue);
+      }
+    }
+  },
+  data() {
+    return {
+      checkList: [],
+      isShowHeaderBox: false,
+      menuOpen: false,
+      //当前点击的row
+      currentRow: {}
+    };
+  },
+  methods: {
+    handlerWatchScroll() {
+      let table = this.$refs.tableMenu.bodyWrapper;
+      table.addEventListener("scroll", e => {
+        this.$emit("TableScrollTop", e.srcElement.scrollTop);
+      });
+    },
+    handlerSelect(row) {
+      this.$refs.tableMenu.setCurrentRow(row);
+    },
+    handlerExpand(row, expand) {
+      // console.log(row, expanded);
+      this.$emit("handlerExpand", row, expand);
+    },
+    maskClick() {
+      this.isShowHeaderBox = false;
+      this.menuOpen = false;
+      this.currentRow = {};
+    },
+    handlerRowClick(row) {
+      this.$emit("handlerRowClick", row);
+    },
+  },
+  mounted() {
+    this.handlerWatchScroll();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tableMneu {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    z-index: 9999;
+  }
+}
+.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;
+  }
+}
+.el-table th.el-table__cell>.cell{
+  font-size: 12px!important;
+}
+</style>
diff --git a/hb_client/src/components/Gantt/dashGantt.vue b/hb_client/src/components/Gantt/dashGantt.vue
new file mode 100644
index 0000000..e34814b
--- /dev/null
+++ b/hb_client/src/components/Gantt/dashGantt.vue
@@ -0,0 +1,1411 @@
+<template>
+  <div>
+    <el-row id="searchWrap" class="searchWrap">
+      <el-date-picker
+        v-model="timeRange"
+        type="monthrange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        range-separator="至"
+        format="yyyy 年 MM 月"
+        value-format="yyyy-MM"
+        @change="timeRangeChange"
+      >
+      </el-date-picker>
+      <div
+        class="toolTip"
+        style="width: 60px;height: 30px;padding-left: 10px; background: white;margin-left: 10px;border: 1px solid #DCDFE6;line-height: 30px;border-radius: 4px"
+      >
+        <el-dropdown trigger="click">
+            <span class="base">
+              {{currentDaySize.label}}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+          <el-dropdown-menu
+            slot="dropdown"
+            :style="{ left: this.left + 'px !important' }"
+          >
+            <el-dropdown-item
+              v-for="item in currentDaySizeOptions"
+              :key="item.value + 'ee'"
+              @click.native="handleSetDaySize(item)"
+            >
+              {{ item.label }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-row>
+    <div class="left leftTable" :style="{ height: ganttHeight + 'px' }">
+      <leftMenu
+        :list="list"
+        ref="leftMenu"
+        :BGScrollTop.sync="BGScrollTop"
+        @TableScrollTop="TableScrollTop"
+        @handlerRowClick="handlerRowClick"
+        @handlerGroup="handlerGroup"
+        @handlerExpand="handlerExpand"
+      ></leftMenu>
+      <div class="rightLine" :style="{ left: rightLineX + 'px' }"></div>
+      <div
+        class="rightLine"
+        :style="{ left: rightLineX + 'px' }"
+        ref="rightLine"
+        @mousedown="rightLineMousedown"
+      ></div>
+    </div>
+    <div class="chart" ref="chart" :style="{height:ganttHeight+'px'}">
+      <div class="date">
+        <div class="years" v-for="item in allDays" :key="item.year">
+          <div
+            class="month"
+            v-for="(value, key) in item.month[0]"
+            :key="value + 'aa' + key"
+            :style="{ width: value.length * currentDaySize.value + 'px' }"
+          >
+            <div class="month-top">{{ item.year }}年{{ key }}月</div>
+          </div>
+        </div>
+        <div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
+        <div class="allDaysArray">
+          <div class="alldays">
+            <div
+              v-for="(j, index) in days"
+              :key="j + 'bb' + index"
+              class="day"
+              :style="{ width: currentDaySize.value + 'px' }"
+            >
+              <template v-if="currentDaySize.value === 20">
+                <span
+                  v-if="j.today"
+                  class="dateNum todayDateNum"
+                  style="border-left:1px solid #d7d7d7;"
+                >
+                  今天
+                </span>
+                <span
+                  v-else
+                  class="dateNum"
+                  :style="{
+                    borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
+                  }"
+                  :class="{
+                    weekday: j.weekday == 0 || j.weekday == 6,
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >{{ j.date }}</span>
+                <span
+                  class="dateBG"
+                  :class="{
+                    weekday2: j.weekday == 0,
+                    weekday1: j.weekday == 6,
+                    today: j.today
+                  }"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+              <template v-if="currentDaySize.value == 10">
+                <span
+                  class="dateNum"
+                  :class="{
+                    weekday: j.weekday == 0 || j.weekday == 6,
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end,
+                    nodBorder:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >
+                  <div
+                    v-show="
+                      (j.width === currentLineDay.end &&isHover &&j.weekday !== 1) ||
+                        (j.width === currentLineDay.start &&isHover &&j.weekday !== 1) ||
+                        j.weekday === 1
+                    "
+                    style="width:100%;height:100%;"
+                    :style="{
+                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
+                    }"
+                  >
+                    {{ j.date }}
+                  </div>
+                </span>
+                <span
+                  class="dateBG"
+                  :class="{
+                    weekday2: j.weekday === 0,
+                    weekday1: j.weekday === 6,
+                    today: j.today
+                  }"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+              <template v-if="currentDaySize.value === 5">
+                <span
+                  class="dateNum"
+                  :class="{
+                    isHover:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end,
+                    nodBorder:
+                      j.width >= currentLineDay.start &&
+                      j.width <= currentLineDay.end
+                  }"
+                >
+                  <div
+                    v-show="
+                      (j.width === currentLineDay.end && isHover && j.date !== 1) ||
+                        (j.width === currentLineDay.start &&isHover &&j.date !== 1) ||
+                        j.date === 1
+                    "
+                    style="width:100%;height:100%;font-size:10px!important;"
+                    :style="{
+                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
+                    }"
+                  >
+                    {{ j.date }}
+                  </div>
+                </span>
+                <span
+                  class="dateBG weekday2"
+                  :class="{today: j.today}"
+                  style="border-right:none;"
+                  :style="{
+                    width: currentDaySize.value + 'px',
+                    height:j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
+                  }"
+                ></span>
+              </template>
+            </div>
+          </div>
+          <div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
+            <template v-for="(item, index) in computedList">
+              <!--<div :key="item.id" class="tetst">{{item.isShow}}</div>-->
+              <div
+                v-show="item.isShow"
+                :ref="'line' + item.id"
+                :key="item.id + 'cc'+ index"
+
+                class="line"
+                :style="{
+                  left: item.left + 'px',
+                  width: item.widthMe + 'px',
+                  top: item.top + 'px'
+                }"
+                @mouseleave="lineMouseleave"
+                @mouseenter="
+                  lineMouseenter(
+                    `line${item.id}`,
+                    $event,
+                    item.id,
+                    item.parentId,
+                    index
+                  )"
+              >
+                <slider
+                  v-show="item.type == 1"
+                  :id="item.id"
+                  v-model="item.per"
+                  :min="0"
+                  :max="item.per"
+                  :per1="item.per1"
+                  :disabled="disable"
+                  :widths="item.widthChild"
+                ></slider>
+              </div>
+              <div
+                v-if="item.type == 3"
+                :key="item.id+'dd'+index"
+                class="group"
+                :style="{
+                  top: item.top + 'px',
+                  left: item.left + 'px',
+                  width: item.widthMe + 'px'
+                }"
+              >
+                <div class="progress" :style="{ width: item.per + '%' }"></div>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <transition name="el-zoom-in-center">
+          <div
+            v-show="isShowMsg"
+            :style="{
+              left: currentProjectMsg.left + 'px',
+              top: currentProjectMsg.top + 'px'
+            }"
+            class="projectMsg"
+          >
+            <div class="lineMsg projectName">
+              {{ currentProjectMsg.name }}
+            </div>
+            <div class="lineMsg">
+              <span class="title">工作周期：</span>
+              <span>{{ currentProjectMsg.allTime }}天</span>
+            </div>
+            <div class="lineMsg" v-if="currentProjectMsg.per1">
+              <span class="title">当前进度：</span>
+              <span>{{ currentProjectMsg.per }}</span>
+            </div>
+            <div class="lineMsg" v-if="currentProjectMsg.per1">
+              <span class="title">合格数量：</span>
+              <span>{{ currentProjectMsg.per1 }}</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">开始时间：</span>
+              <span>{{ currentProjectMsg.startTime }}</span>
+            </div>
+            <div class="lineMsg">
+              <span class="title">结束时间：</span>
+              <span>{{ currentProjectMsg.endTime }}</span>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import slider from "./components/slider";
+  import leftMenu from "./components/dashLeftMenu";
+  export default {
+    components: {
+      slider,
+      leftMenu,
+    },
+    props: {
+      proList:{
+        type:Array,
+        default: () => {
+          return []
+        }
+      } ,
+      ganttHeight:{
+        type:Number,
+        default: () => {
+          return 300
+        }
+      } ,
+    },
+    data() {
+      return {
+        windowWidth:0,
+        windowHeight:0,
+        leftYear:2021,
+        timeRange: [],
+        disable: true,
+        //当前项是否是子集
+        isChildren: false,
+        dialogVal: false,
+        //title
+        title: "新建",
+        //定时器
+        timer: null,
+        //leftMenu的右侧伸缩线
+        rightLineX: 400,
+        fixdTopMonth: "",
+        //近三年的所有年月日
+        allDays: [],
+        //所有的天数
+        days: [],
+        //月数
+        monthArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        //当前hover的项目起止时间
+        currentLineDay: {
+          start: 0,
+          end: 0
+        },
+        //当前的时间大小
+        currentDaySize: {
+          label: "天",
+          value: 20
+        },
+        currentDaySizeOptions: [
+          {
+            label: "天",
+            value: 20
+          },
+          {
+            label: "周",
+            value: 10
+          },
+          {
+            label: "月",
+            value: 5
+          }
+        ],
+        //是否显示信息
+        isShowMsg: false,
+        //当前hover的项目信息
+        currentProjectMsg: {
+          name: "",
+          allTime: 0,
+          per: 0,
+          per1: 0,
+          startTime: 0,
+          endTime: 0,
+          left: 0,
+          top: 0
+        },
+        isHover: false,
+        showFixdTopMonth: false,
+        currentListIndex: "",
+        //正在编辑的row
+        editRow: [],
+        currentRow: null,
+        // BG滚动高度
+        BGScrollTop: 0,
+        // 背景高度
+        lineBGHeight: 0,
+        expandArr: [],
+        list:[],
+      };
+    },
+    mounted(){
+      this.ganttHeight = this.ganttHeight-45;
+      if(window.innerHeight){
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+      }else{
+        this.windowHeight=document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight;
+        this.windowWidth=document.body.clientWidth?document.body.clientWidth:document.documentElement.clientWidth;
+      }
+      let currentYear = new Date().getFullYear();
+      this.timeRange = [currentYear+'-01',(currentYear+1)+'-12'];
+      this.list = [...this.proList];
+      document.addEventListener("scroll", this.handleScroll);
+      this.list=[...this.list];
+      this.handlerCheckList(this.list);
+      this.getDay();
+      this.setStoneLine();
+    },
+    computed: {
+      computedList() {
+        let arr = [];
+        this.list.forEach(item => {
+          if (!item.children || item.children.length < 1) {
+            arr.push(item);
+          } else if (item.children && item.children.length >= 1) {
+            arr.push(item);
+            arr = arr.concat(item.children);
+          }
+        });
+        return arr;
+      },
+      left() {
+        return window.innerWidth - 30;
+      },
+      //当前年份
+      currentYear() {
+        return new Date().getFullYear();
+      },
+      //当前月份
+      currentMonth() {
+        return new Date().getMonth() + 1;
+      },
+      //当前日
+      currentDay() {
+        return new Date().getDate();
+      }
+    },
+    methods: {
+      timeRangeChange(){
+        this.getAllDate();
+        this.handlerCheckList(this.list);
+        this.getDay();
+        this.setStoneLine();
+      },
+      TableScrollTop(val) {
+        let lineBG = this.$refs.lineBG;
+        lineBG.scrollTo(0, val);
+      },
+      handlerBGScroll(e) {
+        this.BGScrollTop = this.$refs.chart.scrollTop;
+      },
+      //过滤导入的数据
+      handlerCheckList(list) {
+        list.forEach((item, index) => {
+          item.planTime = [item.startTime, item.endTime];
+          item.left = this.computedTimeWidth(item.startTime);
+          item.widthMe = item.widthChild = this.computedTimeWidth(item.startTime, item.endTime);
+          item.isShow = true;
+          if (index - 1 < 0) {
+            item.top = 15;
+            if (item.type == 3) {
+              item.isexpand = true;
+              if (item.children.length > 0) {
+                item.children.forEach((k, i) => {
+                  k.planTime = [k.startTime, k.endTime];
+                  k.top = item.top + i * 40 + 40;
+                  k.isShow = true;
+                  k.left = this.computedTimeWidth(k.startTime);
+                  k.widthMe = k.widthChild = this.computedTimeWidth(k.startTime, k.endTime, k);
+                });
+              }
+            }
+          } else {
+            if (list[index - 1].type == 3) {
+              item.top =
+                list[index - 1].top + list[index - 1].children.length * 40 + 40;
+              if (item.type == 3) {
+                item.isexpand = true;
+                if (item.children.length > 0) {
+                  item.children.forEach((z, o) => {
+                    z.planTime = [z.startTime, z.endTime];
+                    z.top = item.top + o * 40 + 40;
+                    z.isShow = true;
+                    z.left = this.computedTimeWidth(z.startTime);
+                    z.widthMe = z.widthChild = this.computedTimeWidth(z.startTime, z.endTime, z);
+                  });
+                }
+              }
+            } else {
+              item.top = list[index - 1].top + 40;
+            }
+          }
+        });
+        list.forEach(item => {
+          if (item.type == 3) {
+            this.setGroupWidth(item.id, list);
+            this.setGroupPer(item.id, list);
+          }
+        });
+        this.list = list;
+        this.setStoneLine(list);
+        window.scrollTo({
+          top: 0,
+          left: 400,
+          behavior: "smooth"
+        });
+      },
+      //设置左侧leftmenu高亮
+      handlerSelect(row) {
+        this.$refs.leftMenu.handlerSelect(row);
+      },
+      //分组是否展开
+      handlerExpand(row, expand) {
+        let rowIndex = this.list.findIndex(item => {
+          return item.id == row.id;
+        });
+        this.list[rowIndex].expand = expand;
+        if (
+          this.list[rowIndex].children &&
+          this.list[rowIndex].children.length > 0
+        ) {
+          this.list[rowIndex].children.forEach(k => {
+            k.isShow = expand;
+          });
+        }
+        this.resetTop(rowIndex, !expand, true);
+      },
+      // 根据时间计算距离
+      computedTimeWidth(startTime, endTime) {
+        if (!endTime) {
+          let leftY = this.leftYear+'-01-01';
+          let leftTime = new Date(leftY).getTime();
+          let left = (Math.floor(startTime - leftTime) /
+              (1000 * 60 * 60 * 24)) * this.currentDaySize.value;
+          return left;
+        } else {
+          let width = (Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) * this.currentDaySize.value + this.currentDaySize.value;
+          return width;
+        }
+      },
+      //修改后续高度
+      resetTop(zindex, reduce, isexpand) {
+        let num = reduce ? -40 : 40;
+        if (!reduce && !isexpand) {
+          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 {
+          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;
+      },
+      // 转为分组
+      handlerGroup(row) {
+        let index = this.list.findIndex(item => {
+          return item.id == row.id;
+        });
+        this.list[index].type = "3";
+        this.list[index].per = 0;
+        this.list[index].id = new Date().getTime();
+        this.list[index].left = 0;
+        this.list[index].widthMe = this.list[index].widthChild = 0;
+        this.$set(this.list, index, this.list[index]);
+      },
+      //leftMenu宽度设置
+      rightLineMousedown(e) {
+        let cx = e.clientX;
+        let result;
+        document.onmousemove = event => {
+          result = event.clientX - cx;
+          if (cx + result <= 441) return;
+          this.$refs.rightLine.style.left = cx + result + "px";
+        };
+        document.onmouseup = () => {
+          document.onmousemove = document.onmouseup = null;
+          if (cx + result <= 441) {
+            this.rightLineX = 441;
+            return;
+          }
+          this.rightLineX = cx + result;
+        };
+      },
+      //rowClick事件
+      handlerRowClick(row) {
+        this.currentRow = row;
+        this.$refs.chart.scrollTo({
+          top: 0,
+          left: row.left - 100,
+          behavior: "smooth"
+        });
+      },
+      //更改daySize-----按天/按周/按月
+      handleSetDaySize(item) {
+        this.currentDaySize = item;
+        this.days.forEach((item, index) => {
+          item.width = (index + 1) * this.currentDaySize.value;
+        });
+        this.handleScroll();
+        if (this.currentRow) {
+          let rs = this.computedList.find(o => {
+            return o.id == this.currentRow.id;
+          });
+          this.$nextTick(() => {
+          });
+        }
+      },
+      //滑动进度条事件
+      thunkMousemove() {
+        this.isShowMsg = false;
+      },
+      //滑动进度条事件
+      thunkMousedown() {
+        this.isShowMsg = false;
+      },
+      //滑动进度条事件
+      thunkMouseup(per, e, id, parentId) {
+        // console.log(per, id, parentId);
+        let cindex = this.computedList.findIndex(z => {
+          return z.id == id;
+        });
+        if (parentId) {
+          let index = this.list.findIndex(k => {
+            return k.id == parentId;
+          });
+          this.list.forEach(item => {
+            if (item.id == parentId) {
+              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.leftYear}/01/01`).getTime()
+            ) /
+            (1000 * 60 * 60 * 24)) *
+          this.currentDaySize.value - s;
+        window.scrollTo({
+          top: 0,
+          left: width,
+          behavior: "smooth"
+        });
+      },
+      //根据距离计算时间
+      /**
+       * @param  {Number} width
+       * @param  {Boolean|String} time
+       */
+      computedWithTime(width, time) {
+        let startTime = (width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
+          new Date(`${this.leftYear}/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;
+        let infoDomX=0,infoDomY = 0;
+        if(this.windowWidth-e.clientX>230){
+          infoDomX = e.clientX;
+        }else{
+          infoDomX = this.windowWidth-230;
+        }
+        if(this.windowHeight-e.clientY>200){
+          infoDomY = e.clientY;
+        }else{
+          infoDomY = this.windowHeight-200;
+        }
+        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:infoDomX ,
+          top: infoDomY
+        };
+        /*
+        * left:
+            e.clientX + 220 - this.$refs.chart.scrollLeft >= this.$refs.chart.clientWidth
+              ? e.clientX - 220 - 400
+              : e.clientX ,
+        * */
+        this.isShowMsg = true;
+      },
+      //鼠标离开信息消失，时间显示消失
+      /**
+       * @param  {Object} e $event
+       * @param  {Boolean} move 是否移动状态
+       */
+      lineMouseleave(e, move) {
+        if (move) {
+          this.isShowMsg = false;
+          this.currentProjectMsg = {
+            name: "",
+            allTime: 0,
+            per: 0,
+            startTime: 0,
+            endTime: 0,
+            left: 0,
+            top: 0
+          };
+          return;
+        }
+        this.currentLineDay = {
+          start: 0,
+          end: 0
+        };
+        this.isHover = false;
+        this.isShowMsg = false;
+        this.currentProjectMsg = {
+          name: "",
+          allTime: 0,
+          per: 0,
+          startTime: 0,
+          endTime: 0,
+          left: 0,
+          top: 0
+        };
+        this.handlerSelect();
+      },
+      //获取要显示的所有天数
+      getDay() {
+        this.getAllDate();
+      },
+      //判断是否为闰年
+      /**
+       * @param  {Number} year 传入年份
+       */
+      isLeapYear(year) {
+        if (year % 4 > 0) {
+          return true;
+        }
+        return false;
+      },
+      getAllDate() {
+        let obj = {}, arr = [];
+        let start = parseInt(this.timeRange[0].split('-')[0]);
+        let end = parseInt(this.timeRange[1].split('-')[0]);
+        // let end = new Date(this.timeRange[1]).getFullYear();
+        for (let i = start; i < end + 1; i++) {
+          arr.push(i)
+        }
+        this.leftYear = arr[0];
+        // arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1];
+        this.allDays = [];
+        arr.forEach(item => {
+          obj.year = item;
+          obj.days = this.isLeapYear(item) ? 365 : 366;
+          this.allDays.push(obj);
+          obj = {};
+        });
+        this.checkDate();
+      },
+      //根据年份天数创建月份及月份天数数组
+      checkDate() {
+        this.allDays.forEach(item => {
+          item.month = this.handleMonthDay(item.days, item.year);
+        });
+        this.allDays.forEach(element => {
+          if (element.year == this.currentYear) {
+            element.month[0][this.currentMonth].forEach(k => {
+              if (k.date == this.currentDay) {
+                k.today = true;
+              }
+            });
+          }
+        });
+        let arr = [];
+        this.allDays.forEach(item => {
+          arr = arr.concat(item.month);
+        });
+        this.days = [];
+        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;
+            break;
+          case 4:
+          case 6:
+          case 9:
+          case 11:
+            return 30;
+            break;
+          case 2:
+            day = days == 365 ? 28 : 29;
+            return day;
+            break;
+        }
+      },
+      //设置里程碑线的高度
+      setStoneLine(isFirst) {
+        this.$nextTick(() => {
+          let height = window.getComputedStyle(
+            document.getElementsByClassName("lineBG")[0]
+          ).height;
+          this.lineBGHeight = height;
+        });
+      },
+      //顶部固定时间
+      handleScroll() {
+        let w = window.scrollX;
+        if (w <= 62) {
+          this.showFixdTopMonth = false;
+        } else {
+          this.showFixdTopMonth = true;
+        }
+        let time = this.computedWithTime(w, "YD");
+        this.fixdTopMonth = time;
+      }
+    },
+    watch: {
+      proList() {
+        this.list=[...this.proList];
+        this.handlerCheckList(this.list);
+        // this.proList = this.proList;
+      },
+      currentDaySize(newValue, oldValue) {
+        this.list.forEach(item => {
+          item.left = (item.left / oldValue.value) * newValue.value;
+          item.widthMe = item.widthChild =
+            (item.widthMe / oldValue.value) * newValue.value;
+          if (item.children && item.children.length > 0) {
+            item.children.forEach(k => {
+              k.left = (k.left / oldValue.value) * newValue.value;
+              k.widthMe = k.widthChild =
+                (k.widthMe / oldValue.value) * newValue.value;
+            });
+          }
+        });
+      }
+    },
+    beforeDestroy() {
+      window.removeEventListener("scroll", this.handleScroll);
+      document.onmousemove = document.onmouseup = null;
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .chart {
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+    overflow-x: scroll;
+    background: #ffffff;
+
+    .header {
+      height: 40px;
+      position: relative;
+
+      .header-left {
+        margin-left: 10px;
+        box-sizing: border-box;
+        padding-top: 5px;
+        height: 40px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+      }
+    }
+
+    .left {
+      position: absolute;
+      height: 89vh;
+      background-color: #fff;
+      z-index: 999;
+      border-right: 1px solid #d7d7d7;
+      .rightLine {
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 2px;
+        background-color: #d7d7d7;
+        box-shadow: 4px 2px 12px 0 rgba(0, 0, 0, 0.2);
+        cursor: col-resize;
+
+        &:hover {
+          background-color: #409eff;
+        }
+      }
+    }
+
+    .showCurrentLineDate {
+      position: fixed;
+      top: 0;
+      background-color: #409eff;
+      color: #fff;
+      height: 20px;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .projectMsg {
+      box-sizing: border-box;
+      padding: 20px;
+      position: fixed;
+      width: 230px;
+      /*height: 230px;*/
+      z-index: 12000;
+      background-color: #fff;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      border: 1px solid #ebeef5;
+      pointer-events: none;
+
+      .lineMsg {
+        margin-bottom: 10px;
+
+        &.projectName {
+          font-size: 22px;
+          color: #333333;
+          text-align: center;
+          border-bottom: 1px solid #999999;
+        }
+
+        span {
+          font-size: 14px;
+          color: #909090;
+        }
+
+        .title {
+          margin-right: 5px;
+          color: #666666
+
+        }
+      }
+    }
+
+    .date {
+      display: flex;
+      height: 100%;
+      position: relative;
+      /*overflow: scroll;*/
+      .topMonth {
+        // width: 100px;
+        background-color: #fff;
+        position: fixed;
+        top: 40px;
+        height: 21px;
+        line-height: 21px;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        color: #909090 !important;
+      }
+
+      .toolTip {
+
+        .base {
+          display: inline-block;
+          text-align: center;
+          height: 30px;
+          line-height: 30px;
+          padding: 0 15px;
+          background-color: #fff;
+          font-size: 14px;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+          font-weight: 400;
+          color: #303030;
+          border-radius: 3px;
+          box-shadow: 0 3px 12px 0 rgba(48, 48, 48, 0.05),
+          0 3px 6px 0 rgba(48, 48, 48, 0.1);
+          margin-right: 20px;
+
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+
+      .group {
+        position: absolute;
+        background-color: #909090 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        height: 14px !important;
+        line-height: 14px !important;
+        // margin-top: 5px;
+        clip-path: polygon(
+            100% 0,
+            100% 100%,
+            calc(100% - 8px) 60%,
+            8px 60%,
+            0 100%,
+            0 0
+        );
+        // > div {
+        //   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        // }
+        .progress {
+          // width: 50px;
+          background-color: #606060 !important;
+          height: 100%;
+        }
+      }
+    }
+
+    .line {
+      position: absolute;
+      height: 20px;
+      background: #abf7f7;
+
+      .rightCurDrag {
+        cursor: e-resize;
+        width: 10px;
+        background-color: #000;
+        height: 16px;
+        position: absolute;
+        right: -15px;
+        transform: translateY(-50%);
+        top: 50%;
+        border-radius: 3px;
+        user-select: none;
+      }
+
+      .leftCurDrag {
+        cursor: e-resize;
+        width: 10px;
+        background-color: #000;
+        height: 16px !important;
+        position: absolute;
+        left: -15px;
+        transform: translateY(-50%);
+        top: 50%;
+        border-radius: 3px;
+        user-select: none;
+      }
+
+      .stoneLine {
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        margin-left: -1px;
+        width: 2px;
+        background-color: #24b47e;
+      }
+
+      .milestone {
+        position: absolute;
+        left: 50%;
+        // transform: translateX(-50%);
+        cursor: move;
+        margin-left: -10px;
+        width: 20px;
+        height: 20px;
+        background-color: #24b47e;
+        transform: rotate(-45deg);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        i {
+          transform: rotate(45deg);
+          color: #fff;
+          z-index: 1;
+        }
+      }
+    }
+
+    .years {
+      display: flex;
+      height: 100%;
+      border-top: 1px solid #f5f5f5;
+
+      .month {
+        height: 100%;
+
+        .month-top {
+          height: 20px;
+          line-height: 20px;
+          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: 19px;
+          display: block;
+          height: 19px;
+          // 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;
+        }
+      }
+    }
+  }
+  .leftTable{
+    width: 50% ;
+    float: left;
+    border-right: 1px solid #f7f7f7;
+  }
+  .searchWrap{
+    position: absolute;
+    z-index: 2000;
+    top: -38px;
+    display: flex
+  }
+  #searchWrap .el-range-editor--medium.el-input__inner{
+    height: 30px!important;
+  }
+  #searchWrap .el-range-editor.el-input__inner{
+    height: 30px!important;
+    padding: 0 5px!important;
+  }
+  #searchWrap .toolTip{
+    height: 30px!important;
+    line-height: 30px!important;
+  }
+</style>
diff --git a/hb_client/src/components/faceLogin/faceLogin.vue b/hb_client/src/components/faceLogin/faceLogin.vue
index 269d70f..d1aaaf3 100644
--- a/hb_client/src/components/faceLogin/faceLogin.vue
+++ b/hb_client/src/components/faceLogin/faceLogin.vue
@@ -35,12 +35,56 @@
       }
     },
     mounted() {
-      this.init();
+      this.openTheCamera();
     },
     methods: {
+      openTheCamera () {
+        this.$nextTick(function () {
+          let _this = this;
+          this.video = document.getElementById('video');
+          // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
+          if (navigator.mediaDevices === undefined) {
+            navigator.mediaDevices = {}
+          }
+          // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
+          // 使用getUserMedia，因为它会覆盖现有的属性。
+          // 这里，如果缺少getUserMedia属性，就添加它。
+          if (navigator.mediaDevices.getUserMedia === undefined) {
+            navigator.mediaDevices.getUserMedia = function (constraints) {
+              // 首先获取现存的getUserMedia(如果存在)
+              let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
+              // 有些浏览器不支持，会返回错误信息
+              // 保持接口一致
+              if (!getUserMedia) {
+                return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
+              }
+              // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
+              return new Promise(function (resolve, reject) {
+                getUserMedia.call(navigator, constraints, resolve, reject)
+              })
+            }
+          }
+          let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
+          navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+            // 旧的浏览器可能没有srcObject
+            if ('srcObject' in _this.video) {
+              _this.video.srcObject = stream
+            } else {
+              // 避免在新的浏览器中使用它，因为它正在被弃用。
+              _this.video.src = window.URL.createObjectURL(stream)
+            }
+            _this.video.onloadedmetadata = function (e) {
+              _this.video.play();
+            };
+            _this.init();
+          }).catch(err => {
+            console.log(err)
+          })
+        });
+      },
       // 初始化设置
       init() {
-        this.video = document.getElementById('video');
+        // this.video = document.getElementById('video');
         this.screenshotCanvas = document.getElementById('screenshotCanvas');
         let canvas = document.getElementById('canvas');
         let context = canvas.getContext('2d');
@@ -64,7 +108,6 @@
           event.data.forEach(function (rect) {
             context.strokeStyle = '#0764B7';
             context.strokeRect(rect.x, rect.y, rect.width, rect.height);
-            // window.plot(rect.x, rect.y, rect.width, rect.height+20);
             // 避免重复发送请求
             if(!_this.uploadLock){
               _this.uploadLock = true;
@@ -133,7 +176,10 @@
           that.uploadLock = false;
           // this.$message.error('面部识别失败请重新验证');
         });
-      }
+      },
+      closeCamera () {
+        this.video.srcObject.getTracks()[0].stop();
+      },
     }
   }
 </script>
diff --git a/hb_client/src/components/faceLogin/tracking.vue b/hb_client/src/components/faceLogin/tracking.vue
index 67457c6..4ef978b 100644
--- a/hb_client/src/components/faceLogin/tracking.vue
+++ b/hb_client/src/components/faceLogin/tracking.vue
@@ -24,12 +24,55 @@
       }
     },
     mounted() {
-      this.init();
+      this.openTheCamera();
     },
     methods: {
+      openTheCamera () {
+        this.$nextTick(function () {
+          let _this = this;
+          this.video = document.getElementById('video');
+          // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
+          if (navigator.mediaDevices === undefined) {
+            navigator.mediaDevices = {}
+          }
+          // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
+          // 使用getUserMedia，因为它会覆盖现有的属性。
+          // 这里，如果缺少getUserMedia属性，就添加它。
+          if (navigator.mediaDevices.getUserMedia === undefined) {
+            navigator.mediaDevices.getUserMedia = function (constraints) {
+              // 首先获取现存的getUserMedia(如果存在)
+              let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
+              // 有些浏览器不支持，会返回错误信息
+              // 保持接口一致
+              if (!getUserMedia) {
+                return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
+              }
+              // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
+              return new Promise(function (resolve, reject) {
+                getUserMedia.call(navigator, constraints, resolve, reject)
+              })
+            }
+          }
+          let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
+          navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+            // 旧的浏览器可能没有srcObject
+            if ('srcObject' in _this.video) {
+              _this.video.srcObject = stream
+            } else {
+              // 避免在新的浏览器中使用它，因为它正在被弃用。
+              _this.video.src = window.URL.createObjectURL(stream)
+            }
+            _this.video.onloadedmetadata = function (e) {
+              _this.video.play();
+            };
+            _this.init();
+          }).catch(err => {
+            console.log(err)
+          })
+        });
+      },
       // 初始化设置
       init() {
-        this.video = document.getElementById('video');
         this.screenshotCanvas = document.getElementById('screenshotCanvas');
         let canvas = document.getElementById('canvas');
         let context = canvas.getContext('2d');
@@ -46,7 +89,6 @@
         let _this = this;
         //添加事件
         tracker.on('track', function (event) {
-
           // 检测出人脸 绘画人脸位置
           context.clearRect(0, 0, canvas.width, canvas.height);
           // 给每个人脸绘制对应的框
@@ -112,7 +154,10 @@
           that.uploadLock = false;
           // this.$message.error('面部识别失败请重新验证');
         });
-      }
+      },
+      closeCamera () {
+        this.video.srcObject.getTracks()[0].stop();
+      },
     }
   }
 </script>
diff --git a/hb_client/src/views/dashboard/index.vue b/hb_client/src/views/dashboard/index.vue
index 8536aa4..7f11fc3 100644
--- a/hb_client/src/views/dashboard/index.vue
+++ b/hb_client/src/views/dashboard/index.vue
@@ -1,58 +1,121 @@
 <template>
   <div class="dashboard-container">
-    <el-card class="dashboardTopCard">
-     <div class="CardTitleWrap">
+    <div class="dashboardTopCard">
+      <div class="CardTitleWrap">
         <span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span>
       </div>
-      <div class="cards" @click="toDetail('1')">
-        <div class="cardCurrentText">本月：{{contractTotalCurrent}}</div>
-        <div class="cardTotalText">{{contractTotalCount}}</div>
-        <div>合同总数</div>
-      </div>
-      <div class="cards" @click="toDetail('2')">
-        <div class="cardCurrentText">本月：{{orderTotalCurrent}}</div>
-        <div class="cardTotalText">{{orderTotalCount}}</div>
-        <div>生产订单总数</div>
-      </div>
-      <div class="cards" @click="toDetail('3')">
-        <div class="cardCurrentText">在制：{{planTotalCurrent}}</div>
-        <div class="cardTotalText">{{planTotalCount}}</div>
-        <div>已排产生产任务</div>
-      </div>
-      <div class="cards" @click="toDetail('4')">
-        <div class="cardCurrentText">本月：4</div>
-        <div class="cardTotalText">20</div>
-        <div>累计交付产品数</div>
-      </div>
-      <div class="cards" @click="toDetail('5')">
-        <div class="cardCurrentText">本月：2</div>
-        <div class="cardTotalText">2</div>
-        <div>累计不合格产品数</div>
-      </div>
-    </el-card>
-    <el-card class="box-card dashboardSubRow" >
-      <div style="height: 40px;line-height: 40px;background: #F5F7FA;padding-left: 20px;">甘特图</div>
-      <!--<div :style="{height:cardTabelHeight+'px'}">-->
-      <div>
-        <gantt
-          style="position: relative"
-          v-if="proList.length>0"
-          :proList="proList"
-        ></gantt>
-      </div>
-    </el-card>
-    <el-row class="dashboardSubRow" :gutter="5">
-      <el-col :span="12">
-        <el-card style="border-radius: 10px;">
-          <div class="dashboardCardHand">
-            <div class="CardTitleWrap">
-              <span class="verticalLine"></span><span class="dashboardCardTitle">任务排期</span>
+      <div style="padding: 20px;overflow: hidden;">
+        <div class="cardsWrap" @click="toDetail('1')">
+          <div class="svgIconWrap">
+            <svg-icon
+              icon-class="form"
+              class="svgIcon"
+            />
+          </div>
+          <div class="totalCountWrap">
+            <span class="totalCountText">本月合同数</span>
+            <div class="totalCountNum">
+              <span class="totalCount">30</span>
+              <span>个</span>
             </div>
+          </div>
+        </div>
+        <div class="cardsWrap" @click="toDetail('2')">
+          <div class="svgIconWrap">
+            <svg-icon
+              icon-class="form"
+              class="svgIcon"
+            />
+          </div>
+          <div class="totalCountWrap">
+            <span class="totalCountText">本月生产订单数</span>
+            <div class="totalCountNum">
+              <span class="totalCount">30</span>
+              <span>个</span>
+            </div>
+          </div>
+        </div>
+        <div class="cardsWrap" @click="toDetail('3')">
+          <div class="svgIconWrap">
+            <svg-icon
+              icon-class="form"
+              class="svgIcon"
+            />
+          </div>
+          <div class="totalCountWrap">
+            <span class="totalCountText">本月在制任务</span>
+            <div class="totalCountNum">
+              <span class="totalCount">30</span>
+              <span>个</span>
+            </div>
+          </div>
+        </div>
+        <div class="cardsWrap" @click="toDetail('4')">
+          <div class="svgIconWrap">
+            <svg-icon
+              icon-class="form"
+              class="svgIcon"
+            />
+          </div>
+          <div class="totalCountWrap">
+            <span class="totalCountText">本月交付产品</span>
+            <div class="totalCountNum">
+              <span class="totalCount">30</span>
+              <span>个</span>
+            </div>
+          </div>
+        </div>
+        <div class="cardsWrap" @click="toDetail('5')">
+          <div class="svgIconWrap">
+            <svg-icon
+              icon-class="form"
+              class="svgIcon"
+            />
+          </div>
+          <div class="totalCountWrap">
+            <span class="totalCountText">本月不合格产品</span>
+            <div class="totalCountNum">
+              <span class="totalCount">30</span>
+              <span>个</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="dashboardMiddle" class="dashboardMiddle">
+      <el-row>
+        <el-col :span="16">
+          <div class="CardTitleWrap">
+            <span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="CardTitleWrap">
+            <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="padding: 5px 20px 20px 20px;">
+        <el-col :span="15">
+          <div style="height: 40px;line-height: 40px;"></div>
+          <div>
+            <gantt
+              style="position: relative"
+              v-if="proList.length>0"
+              :proList="proList"
+              :ganttHeight="cardTabelHeight"
+            ></gantt>
+          </div>
+        </el-col>
+        <el-col :span="1" style="height: 1px"></el-col>
+        <el-col :span="8">
+          <div class="dashboardCardHand">
             <div class="dashboardCardFilter">
               <el-date-picker
-                v-model="tableDate"
-                type="month"
-                placeholder="查询日期"
+                v-model="chartDate"
+                type="monthrange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
                 range-separator="至"
                 format="yyyy 年 MM 月"
                 value-format="yyyy-MM"
@@ -60,66 +123,17 @@
               >
               </el-date-picker>
               <div class="convenientWrap">
-                <div class="convenientBtn" :class="{activeIndex:tableIndex==='1'}" @click="convenientClick('1','week')">本周</div>
-                <div class="convenientBtn" :class="{activeIndex:tableIndex==='2'}" @click="convenientClick('1','month')">本月</div>
-                <div class="convenientBtn" :class="{activeIndex:tableIndex==='3'}" @click="convenientClick('1','quarter')">三个月</div>
+                <div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('1','week')">本周</div>
+                <div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}" @click="convenientClick('1','month')">本月</div>
+                <div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}" @click="convenientClick('1','quarter')">三个月</div>
               </div>
             </div>
           </div>
-          <el-table
-            v-loading="listLoadingPlan"
-            :data="planList"
-            border fit stripe
-            :height="cardTabelHeight"
-          >
-            <el-table-column type="index" width="50" />
-            <el-table-column label="任务编号" prop="number">
-            </el-table-column>
-            <el-table-column label="产品名称">
-              <template slot-scope="scope">{{ scope.row.product_.name }}</template>
-            </el-table-column>
-            <el-table-column label="产品型号">
-              <template slot-scope="scope">{{ scope.row.product_.specification }}</template>
-            </el-table-column>
-            <el-table-column label="生产数量" prop="count">
-            </el-table-column>
-            <el-table-column label="开始时间" prop="start_date">
-            </el-table-column>
-            <el-table-column label="结束时间" prop="end_date">
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card style="border-radius: 10px;">
-          <div class="dashboardCardHand">
-            <div class="CardTitleWrap">
-              <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
-            </div>
-            <!--<div class="dashboardCardTitle">成品率</div>-->
-            <div class="dashboardCardFilter">
-              <el-date-picker
-                v-model="chartDate"
-                type="month"
-                placeholder="查询日期"
-                range-separator="至"
-                format="yyyy 年 MM 月"
-                value-format="yyyy-MM"
-                @change="searchTimeChange('2')"
-              >
-              </el-date-picker>
-              <div class="convenientWrap">
-                <div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('2','week')">本周</div>
-                <div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}" @click="convenientClick('2','month')">本月</div>
-                <div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}" @click="convenientClick('2','quarter')">三个月</div>
-              </div>
-            </div>
-          </div>
-          <div id="chartColumn" style="width:100%;" :style="{height:cardTabelHeight+'px'}"></div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <!--<el-row class="dashboardSubRow" :gutter="5">
+          <div id="chartColumn" style="width:100%;height: 300px;"></div>
+        </el-col>
+      </el-row>
+    </div>
+    <el-row class="dashboardSubRow" :gutter="5">
       <el-col :span="12">
         <el-card style="border-radius: 10px;">
           <div class="dashboardCardHand">
@@ -127,7 +141,7 @@
               <span class="verticalLine"></span><span class="dashboardCardTitle">库存列表</span>
               <span class="stockMore" @click="stockMore">更多>></span>
             </div>
-            &lt;!&ndash;<div class="dashboardCardTitle">库存列表 </div>&ndash;&gt;
+            <!--<div class="dashboardCardTitle">库存列表 </div>-->
             <div class="block">
               <el-pagination
                 :current-page.sync="stockPage"
@@ -149,7 +163,7 @@
             <el-table-column label="物料编号" prop="material_">
               <template slot-scope="scope">{{ scope.row.material_.number }}</template>
             </el-table-column>
-            <el-table-column label="物料名称" prop="material_">
+            <el-table-column label="物料名称" prop="material_" show-overflow-tooltip>
               <template slot-scope="scope">{{ scope.row.material_.name }}</template>
             </el-table-column>
             <el-table-column label="规格型号" prop="material_">
@@ -175,7 +189,7 @@
             <div class="CardTitleWrap">
               <span class="verticalLine"></span><span class="dashboardCardTitle">提醒</span>
             </div>
-            &lt;!&ndash;<div class="dashboardCardTitle">提醒</div>&ndash;&gt;
+            <!--<div class="dashboardCardTitle">提醒</div>-->
             <div class="block">
               <el-pagination
                 :current-page.sync="remindPage"
@@ -201,16 +215,6 @@
                     <span>{{item}}</span><span>2021-12-20</span>
                   </div>
                 </li>
-                &lt;!&ndash;<li class="listItem">
-                  <div class="itemText">
-                    <span>玻璃低于安全库存</span><span>2021-11-30</span>
-                  </div>
-                </li>
-                <li class="listItem">
-                  <div class="itemText">
-                    <span>某某批货临近交货日期</span><span>2021-11-20</span>
-                  </div>
-                </li>&ndash;&gt;
               </ul>
             </el-tab-pane>
             <el-tab-pane label="临近交货" name="临近交货">
@@ -244,7 +248,7 @@
           </el-tabs>
         </el-card>
       </el-col>
-    </el-row>-->
+    </el-row>
   </div>
 </template>
 
@@ -252,11 +256,12 @@
 import echarts from 'echarts'
 import { mapGetters } from 'vuex';
 import {getPlanGantt} from "@/api/srm";
+import { getProcessYield } from "@/api/srm";
 import { getMaterialList } from "@/api/mtm";
-import gantt from "@/components/Gantt/index";
 import { getInventoryList } from "@/api/inm";
 import { getProductionplanList} from "@/api/pm";
 import { getmaterialbatchList } from "@/api/inm";
+import gantt from "@/components/Gantt/dashGantt";
 import { getContractList , getOrderList } from "@/api/sam";
 
 export default {
@@ -279,7 +284,7 @@ export default {
       tableIndex:null,
       chartIndex:null,
       tableDate:'2021-12',
-      chartDate:'2021-12',
+      chartDate:[],
       proList: [],
       planList:[],
       stockList:[],
@@ -299,7 +304,10 @@ export default {
         "6":'辅助工装',
       },
       activeName:'库存警告',
-      seriesData:[80,95,96, 96, 96, 98, 99,100],
+      chartData:{
+        xAxisData:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
+        seriesData:[80,95,96, 96, 96, 98, 99,100],
+      },
       contractTotalCount:null,//合同总数
       contractTotalCurrent:null,
       orderTotalCount:null,//生产订单总数
@@ -321,9 +329,6 @@ export default {
     ])
   },
   methods:{
-    openWord(){
-      window.open("http://47.95.0.242:2222/media/2021/09/07/004-%E8%AF%B7%E5%81%87%E5%8D%95_LL8uZdx.docx");
-    },
     getStatisticsData(){
       let that = this;
       let dat = new Date();
@@ -368,13 +373,31 @@ export default {
         }
       });
       //获取交付产品
+
       //获取不合格产品
 
-      getMaterialList({page:0,tag:'low_inm'}).then((response) => {
+      //获取成品率
+      let d = new Date(that.currentYear, month, 0);
+      let days = d.getDate();
+      let start = that.currentYear+'-'+that.currentMonth;
+      let startDate = start + '-01';
+      let endDate = start+ '-'+days;
+      that.chartDate=[start,start];
+      getProcessYield({datetime_start:startDate,datetime_end:endDate}).then((response) => {
         if (response.data) {
-          that.warningList = response.data;
+          let list = response.data;
+          let xAxisData = [],seriesData = [];
+          list.forEach(item =>{
+            xAxisData.push(item.name);
+            let rate = item.rate*100;
+            seriesData.push(rate.toFixed(2))
+          });
+          that.chartData.xAxisData = xAxisData;
+          that.chartData.seriesData = seriesData;
+          this.drawChart();
         }
       });
+
     },
     gotoTicketPage(){
       let path = this.$route.path;
@@ -409,6 +432,7 @@ export default {
     },
     //图标渲染
     drawChart() {
+      let that = this;
       this.chartColumn = echarts.init(document.getElementById('chartColumn'));
       this.chartColumn.setOption({
         // title: { text: '成品率' },
@@ -444,7 +468,7 @@ export default {
           splitLine: {
             show: false, //去掉X轴分割线
           },
-          data: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框", "成品"]
+          data:  that.chartData.xAxisData,
         },
         yAxis: {
           axisLine:{
@@ -466,8 +490,8 @@ export default {
         series: [{
           name: '成品率',
           type: 'bar',
-          barWidth: 40,
-          data: this.seriesData,
+          barWidth: 20,
+          data: that.chartData.seriesData,
           label: {
             show: true, //开启显示
             position: 'top', //在上方显示
@@ -479,13 +503,13 @@ export default {
           },
           itemStyle: {
             normal: {
-              /*color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: '#adcff3'
               }, {
                 offset: 1,
                 color: '#409EFF'
-              }]),*/
+              }]),
 
               /*color: function(params) {
                 let colorList = [
@@ -507,13 +531,13 @@ export default {
                   }
                 ]);
               },*/
-                color: function(params) {
+                /*color: function(params) {
                 let colorList = [
                   '#5fcdc2','#a378e4','#fea94c','#f27197',
                   '#409eff','#5fcdc2','#a378e4','#fea94c'
                 ];
                 return colorList[params.dataIndex]
-              },
+              },*/
             }
           },
         }]
@@ -528,7 +552,7 @@ export default {
       }else if(index==='2'){
         this.$router.push({name:'order',params:{page:1,page_size:20}})
       }else if(index==='3'){
-        this.$router.push({name:'plan',params:{page:1,page_size:20}})
+        this.$router.push({name:'management',params:{page:1,page_size:20}})
       }else if(index==='4'){
         this.$router.push({name:'product',params:{page:1,page_size:20,material__type:1}})
       }else if(index==='5'){
@@ -571,18 +595,22 @@ export default {
         startTime = yea+'-'+mon+'-01';
       }
       if(index==='1'){
-        this.tableDate = null;
-        this.tableIndex = activeIndex;
-        this.listLoadingPlan = true;
-        getProductionplanList({page:0,create_time_start:startTime,create_time_end:endTime}).then((response) => {
-          if (response.data) {
-            that.planList = response.data;
-          }
-          this.listLoadingPlan = false;
-        });
-      }else{
-        this.chartDate = null;
         this.chartIndex = activeIndex;
+        getProcessYield({datetime_start:startTime,datetime_end:endTime}).then((response) => {
+          if (response.data) {
+            let list = response.data;
+            let xAxisData = [],seriesData = [];
+            list.forEach(item =>{
+              xAxisData.push(item.name);
+              let rate = item.rate*100;
+              seriesData.push(rate.toFixed(2))
+            });
+            that.chartData.xAxisData = xAxisData;
+            that.chartData.seriesData = seriesData;
+            this.drawChart();
+          }
+        });
+
       }
       //根据时间和类型获取数据
     },
@@ -593,33 +621,34 @@ export default {
       let year = null,month = null,days = null;
       if(index==='1'){
         this.tableIndex = null;
-        startDate = this.tableDate+'-01';
-        year = this.tableDate.split("-")[0];
-        month = this.tableDate.split("-")[1];
+        startDate = that.chartDate[0]+'-01';
+        year =that.chartDate[1].split("-")[0];
+        month = that.chartDate[1].split("-")[1];
         let d = new Date(year, month, 0);
         days = d.getDate();
         endDate = this.tableDate + '-'+days;
-        this.listLoadingPlan = true;
-        getProductionplanList({page:0,create_time_start:startDate,create_time_end:endDate}).then((response) => {
+        getProcessYield({datetime_start:startDate,datetime_end:endDate}).then((response) => {
           if (response.data) {
-            that.planList = response.data;
+            let list = response.data;
+            let xAxisData = [],seriesData = [];
+            list.forEach(item =>{
+              xAxisData.push(item.name);
+              let rate = item.rate*100;
+              seriesData.push(rate.toFixed(2))
+            });
+            that.chartData.xAxisData = xAxisData;
+            that.chartData.seriesData = seriesData;
+            this.drawChart();
           }
-          this.listLoadingPlan = false;
         });
-      }else{
-        this.chartIndex = null;
-        startDate = this.chartDate+'-01';
-        year = this.chartDate.split("-")[0];
-        month = this.chartDate.split("-")[1];
-        let d = new Date(year, month, 0);
-        days = d.getDate();
-        endDate = this.chartDate + '-'+days;
       }
     },
+    //库存
     handleStockSizeChange(val){
       this.stockPageSize = val;
       this.stockPage = 1;
     },
+    //库存
     handleStockCurrentChange(val){
       let that = this;
       this.listLoading = true;
@@ -632,6 +661,7 @@ export default {
         this.listLoading = false;
       });
     },
+    //提示
     activeNameClick(tab, event) {
       let that = this;
       // debugger;
@@ -748,11 +778,12 @@ export default {
     let hei  = document.getElementsByClassName('app-main')[0].clientHeight;
     let heig  = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
     this.cardTabelHeight = ((hei-heig-130)/2);
-    document.getElementById('chartColumn').style.height = this.cardTabelHeight+'px';
-    this.drawChart();
+    document.getElementById('chartColumn').style.height = this.cardTabelHeight-35+'px';
+    // this.drawChart();
     this.getPlanList();
     this.getStockList();
     this.getGanttData();
+    // this.getYield();
     this.getStatisticsData();
   },
   updated () {
@@ -768,70 +799,109 @@ export default {
   .el-card.is-always-shadow{
     height: auto!important;
   }
-.dashboard-container {
-  margin: 5px 6px;
-}
-.dashboard-text {
-  font-size: 30px;
-  line-height: 46px;
-}
-.dashboardTopCard{
-  margin-bottom: 5px;
-  border-radius: 10px;
-  .cards{
-    width: 18%;
-    color: #ffffff;
-    background: #5fcdc2;
-    text-align: center;
-    border-radius: 10px;
-    padding: 10px;
-    line-height: 30px;
+  .dashboard-container {
+    margin: 5px 6px;
+  }
+  .dashboardTopCard,.dashboardMiddle{
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    margin-bottom: 5px;
+    background: #ffffff;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  }
+/**/
+  .cardsWrap{
+    display: flex;
+    width: 20%;
+    color: #777777;
     float: left;
-    margin: 15px 1%;
-    .cardCurrentText{
-      text-align: left;
-      padding-left: 20px;
-    }
-    .cardTotalText{
-      font-size: 30px;
+    font-size: 14px;
+  }
+  .svgIconWrap{
+    margin-right:20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 15px;
+    text-align: center;
+    .svgIcon{
+      font-size:24px;
+      margin-top: 13px
     }
   }
-  .cards:nth-of-type(2){
-    background:#5fcdc2;;
+  .cardsWrap:nth-child(1){
+    .svgIconWrap{
+      background:#e9f3ff;
+      .svgIcon{
+        color: #409EFF;
+      }
+    }
   }
-  .cards:nth-child(3){
-    background:#a378e4;;
+  .cardsWrap:nth-child(2){
+    .svgIconWrap{
+      background:#fff1de;
+      .svgIcon{
+        color: #ffb23f;
+      }
+    }
   }
-  .cards:nth-of-type(4){
-    background:#fea94c;;
+
+ .cardsWrap:nth-child(3){
+    .svgIconWrap{
+      background:#d9f6d8;
+      .svgIcon{
+        color: #54cb48;
+      }
+    }
   }
-  .cards:nth-of-type(5){
-    background:#f27197;;
+  .cardsWrap:nth-child(4){
+    .svgIconWrap{
+      background:#f0e8fd;
+      .svgIcon{
+        color: #a378e4;
+      }
+    }
   }
-  .cards:nth-of-type(6){
-    background:#409eff;;
+  .cardsWrap:nth-child(5){
+    .svgIconWrap{
+      background:#f7e5ea;
+      .svgIcon{
+        color: #f27197;
+      }
+    }
   }
-  .cards:hover{
-    box-shadow: 0 0 12px 5px rgba(0,0,0,.1);
+  .totalCountText{
+    height: 20px;
+    line-height: 20px
   }
-}
+  .totalCountNum{
+    height: 30px;
+  }
+  .totalCount{
+    font-size: 25px;
+    font-weight: bold;
+    color: #626262;
+  }
+  /**/
 .CardTitleWrap{
   display: flex;
   height: 35px;
   line-height: 35px;
   padding-left: 1%;
-  padding-top: 6px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f5f5f5;
+  /*padding-top: 6px;*/
   .verticalLine{
     width: 4px;
-    height: 20px;
-    background: orangered;
+    height: 15px;
+    background: #409EFF;
     margin-right: 7px;
-    margin-top: 6px;
+    margin-top: 8px;
   }
   .dashboardCardTitle{
-    height: 35px;
-    line-height:35px;
-    font-size: 20px;
+    height: 34px;
+    line-height:34px;
+    font-size: 14px;
     font-weight: bold;
     vertical-align: middle;
     margin-right: 7px;
@@ -843,9 +913,7 @@ export default {
     cursor: pointer;
   }
 }
-
-.dashboardSubRow{
-  margin-bottom: 5px;
+/*成品率筛选条件*/
   .dashboardCardHand{
     display: flex;
     justify-content: space-between;
@@ -855,12 +923,13 @@ export default {
         display: flex;
         border: 1px solid #DCDFE6;
         border-radius: 6px;
-        height: 35px;
-        line-height:35px;
+        height: 30px;
+        line-height:30px;
         margin-left: 10px;
+        font-size: 12px;
         .convenientBtn{
           cursor: pointer;
-          width: 60px;
+          width: 50px;
           text-align:center;
           border-right: 1px solid #DCDFE6;
         }
@@ -880,8 +949,6 @@ export default {
 
   }
 
-}
-
   .lists{
     padding-right: 40px;
     .listItem{
@@ -900,4 +967,8 @@ export default {
       height: 100%!important;
     }
   }
+  #dashboardMiddle .el-range-editor--medium.el-input__inner,
+  #dashboardMiddle .el-range-editor.el-input__inner{
+    height: 30px!important;
+  }
 </style>
diff --git a/hb_client/src/views/login/index.vue b/hb_client/src/views/login/index.vue
index 4f256c6..53da72e 100644
--- a/hb_client/src/views/login/index.vue
+++ b/hb_client/src/views/login/index.vue
@@ -64,10 +64,10 @@
         </el-tabs>
       </div>
     </div>
-    <el-dialog :visible.sync="limitedPhoto">
+    <el-dialog :visible.sync="limitedPhoto" @close="closeCamera">
       <div style="font-size: 28px;color: #333333;text-align: center;font-weight: bold;margin-bottom: 15px;">打卡</div>
       <div class="testTracking">
-        <faceLogin name="faceLogin" @func="getMsgFormSon"></faceLogin>
+        <faceLogin ref="faceTracking" name="faceLogin" @func="getMsgFormSon"></faceLogin>
       </div>
     </el-dialog>
   </div>
@@ -179,9 +179,61 @@
       //人脸登录
       takePhoto(){
         this.limitedPhoto = true;
+        this.openTheCamera();
+      },
+      /*打开相机*/
+      openTheCamera () {
+        this.$nextTick(function () {
+          let _this = this;
+          this.thisVideo = document.getElementById('videoCamera');
+          // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
+          if (navigator.mediaDevices === undefined) {
+            navigator.mediaDevices = {}
+          }
+          // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
+          // 使用getUserMedia，因为它会覆盖现有的属性。
+          // 这里，如果缺少getUserMedia属性，就添加它。
+          if (navigator.mediaDevices.getUserMedia === undefined) {
+            navigator.mediaDevices.getUserMedia = function (constraints) {
+              // 首先获取现存的getUserMedia(如果存在)
+              let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
+              // 有些浏览器不支持，会返回错误信息
+              // 保持接口一致
+              if (!getUserMedia) {
+                return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
+              }
+              // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
+              return new Promise(function (resolve, reject) {
+                getUserMedia.call(navigator, constraints, resolve, reject)
+              })
+            }
+          }
+
+          let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
+          navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
+            // 旧的浏览器可能没有srcObject
+            if ('srcObject' in _this.thisVideo) {
+              _this.thisVideo.srcObject = stream
+            } else {
+              // 避免在新的浏览器中使用它，因为它正在被弃用。
+              _this.thisVideo.src = window.URL.createObjectURL(stream)
+            }
+            _this.thisVideo.onloadedmetadata = function (e) {
+              _this.thisVideo.play();
+            }
+          }).catch(err => {
+            console.log(err)
+          })
+        });
+      },
+      /*关闭相机*/
+      closeCamera () {
+        debugger;
+        this.$refs.faceTracking.closeCamera();
+        // this.thisVideo.srcObject.getTracks()[0].stop();
       },
       getMsgFormSon(data){
-        this.limitedPhoto = data;
+        // this.limitedPhoto = data;
       },
     },
   };
diff --git a/hb_client/src/views/mtm/materialdo.vue b/hb_client/src/views/mtm/materialdo.vue
index 19b98e6..b42acd3 100644
--- a/hb_client/src/views/mtm/materialdo.vue
+++ b/hb_client/src/views/mtm/materialdo.vue
@@ -82,8 +82,8 @@
               <div style="text-align: right">
                 <el-button type="danger" @click="dialogVisible = false">取消
                 </el-button>
-                <!--<el-button type="primary" @click="recordformconfirm('Forms')">确认</el-button>-->
-                <el-button type="primary" @click="recordformcon">管理员授权</el-button>
+                <el-button type="primary" @click="recordformconfirm('Forms')">确认</el-button>
+                <!--<el-button type="primary" @click="recordformcon">管理员授权</el-button>-->
               </div>
             </el-dialog>
             <!--表格展示-->
diff --git a/hb_client/src/views/workflow/index.vue b/hb_client/src/views/workflow/index.vue
index 5a57a88..1694c63 100644
--- a/hb_client/src/views/workflow/index.vue
+++ b/hb_client/src/views/workflow/index.vue
@@ -102,8 +102,10 @@
             <p>创建时间 ：{{watchedCreateTime}}</p>
           </el-col>
         </el-row>
-        <svg height=800 id="mySvg" style="width: 100%;">
-        </svg>
+        <div style="width: 90%;margin: auto;">
+          <svg height=1000 id="mySvg" style="width:100%!important;">
+          </svg>
+        </div>
       </div>
     </div>
     <el-dialog
@@ -481,7 +483,7 @@ export default {
     margin: 10vh auto 0;
     text-align: center;
     border-radius: 2px;
-    max-height: 75vh;
+    max-height: 80vh;
     overflow-y: scroll;
   }
   .svgItem{
diff --git a/hb_client/src/views/workflow/ticket.vue b/hb_client/src/views/workflow/ticket.vue
index 93744ba..14971fd 100644
--- a/hb_client/src/views/workflow/ticket.vue
+++ b/hb_client/src/views/workflow/ticket.vue
@@ -241,7 +241,7 @@
           </el-step>
         </el-steps>
         <div style="width: 90%;margin: auto;">
-          <svg height=800 id="mySvg" style="width:100%!important;">
+          <svg height=1000 id="mySvg" style="width:100%!important;">
           </svg>
         </div>