diff --git a/hb_client/src/router/index.js b/hb_client/src/router/index.js
index 980eabf..0efd28e 100644
--- a/hb_client/src/router/index.js
+++ b/hb_client/src/router/index.js
@@ -153,8 +153,7 @@ export const asyncRoutes = [
         meta: { title: '产品管理', icon: 'example', perms: ['mtm_productprocess'] }
       },
     ]
-  }
-  ,
+  },
   {
     path: '/pm',
     component: Layout,
@@ -208,8 +207,7 @@ export const asyncRoutes = [
       }
       
     ]
-  }
-  ,
+  },
   {
     path: '/wpm',
     component: Layout,
@@ -339,8 +337,7 @@ export const asyncRoutes = [
         hidden: true
       }
     ]
-  }
-  ,
+  },
   {
     path: '/qm',
     component: Layout,
@@ -407,7 +404,6 @@ export const asyncRoutes = [
      
     ]
   },
-  
   {
     path: '/personnel',
     component: Layout,
@@ -435,8 +431,7 @@ export const asyncRoutes = [
       },
      
     ]
-  }
-  ,
+  },
   {
     path: '/inm',
     component: Layout,
@@ -492,29 +487,67 @@ export const asyncRoutes = [
      
     ]
   },
-  
-  
-    {
-      path: '/procurement',
-      component: Layout,
-      redirect: '/procurement/vendor',
-      name: 'procurement',
-      meta: { title: '采购管理', icon: 'example', perms: ['procurement_set'] },
-      children: [
-        {
-          path: 'vendor',
-          name: 'vendor',
-          component: () => import('@/views/procurement/vendor'),
-          meta: { title: '供应商', icon: 'example', perms: ['vendor_manage'] }
-        },
-        {
-          path: 'vendor',
-          name: 'vendor',
-          component: () => import('@/views/procurement/vendor'),
-          meta: { title: '采购订单', icon: 'example', perms: ['vendor_manage'] }
-        }
-      ]
-    },
+  {
+    path: '/procurement',
+    component: Layout,
+    redirect: '/procurement/vendor',
+    name: 'procurement',
+    meta: { title: '采购管理', icon: 'example', perms: ['procurement_set'] },
+    children: [
+      {
+        path: 'vendor',
+        name: 'vendor',
+        component: () => import('@/views/procurement/vendor'),
+        meta: { title: '供应商', icon: 'example', perms: ['vendor_manage'] }
+      },
+      {
+        path: 'vendor',
+        name: 'vendor',
+        component: () => import('@/views/procurement/vendor'),
+        meta: { title: '采购订单', icon: 'example', perms: ['vendor_manage'] }
+      }
+    ]
+  },
+  {
+    path: '/statistics',
+    component: Layout,
+    redirect: '/statistics/progressStatistics',
+    name: 'statistics',
+    meta: { title: '统计分析', icon: 'example', perms: ['workflow_manage']  },
+    children: [
+      {
+        path: 'progressStatistics',
+        name: 'progressStatistics',
+        component: () => import('@/views/statistics/progressStatistics'),
+        meta: { title: '进度统计', icon: 'example', perms: ['workflow_index'] }
+      },
+      {
+        path: 'materialStatistics',
+        name: 'materialStatistics',
+        component: () => import('@/views/statistics/materialStatistics'),
+        meta: { title: '物料统计', icon: 'example', perms: ['workflow_index'] }
+      },
+      {
+        path: 'personStatistics',
+        name: 'personStatistics',
+        component: () => import('@/views/statistics/personStatistics'),
+        meta: { title: '人员统计', icon: 'example', perms: ['workflow_index'] }
+      },
+      {
+        path: 'costStatistics',
+        name: 'costStatistics',
+        component: () => import('@/views/statistics/costStatistics'),
+        meta: { title: '成本统计', icon: 'example', perms: ['workflow_index'] }
+      },
+      {
+        path: 'testStatistics',
+        name: 'testStatistics',
+        component: () => import('@/views/statistics/testStatistics'),
+        meta: { title: '检验统计', icon: 'example', perms: ['workflow_index'] }
+      },
+
+    ]
+  },
   {
     path: '/workflow',
     component: Layout,
@@ -700,6 +733,12 @@ export const asyncRoutes = [
         component: () => import('@/views/testModel/faceLogin'),
         meta: { title: '人脸识别登录', icon: 'example' }
       },
+      {
+        path: 'caram',
+        name: 'caram',
+        component: () => import('@/views/testModel/caram'),
+        meta: { title: '相机调用', icon: 'example' }
+      },
       {
         path: 'markImage',
         name: 'markImage',
diff --git a/hb_client/src/views/statistics/charts.vue b/hb_client/src/views/statistics/charts.vue
new file mode 100644
index 0000000..fcf7c81
--- /dev/null
+++ b/hb_client/src/views/statistics/charts.vue
@@ -0,0 +1,69 @@
+<template>
+  <div :id="id" :class="className" style="width: 100%!important;" :style="{ height: height, width: width }"/>
+</template>
+
+<script>
+  export default {
+    name: "charts",
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      id: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '2.5rem'
+      },
+      options: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      options: {
+        handler(options) {
+          this.chart.setOption(options, true)
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      this.initChart();
+      /*window.addEventListener("resize",function () {
+        this.chart = this.$echarts.init(document.getElementById(this.id));
+        let  myCharts=document.getElementById(this.id);  // 增加这一行
+        myCharts.style.width=window.innerWidth-400+ 'px';  // 再增加这一行
+        this.$echarts.init(document.getElementById(this.id)).resize();
+      })*/
+    },
+    beforeDestroy() {
+      this.chart.dispose();
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = this.$echarts.init(document.getElementById(this.id));
+        this.chart.setOption(this.options);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.chartsName{
+  width: 100%!important;
+}
+</style>
diff --git a/hb_client/src/views/dashboard/largeScreen.vue b/hb_client/src/views/statistics/costStatistics.vue
similarity index 67%
rename from hb_client/src/views/dashboard/largeScreen.vue
rename to hb_client/src/views/statistics/costStatistics.vue
index ed331a3..3d4342c 100644
--- a/hb_client/src/views/dashboard/largeScreen.vue
+++ b/hb_client/src/views/statistics/costStatistics.vue
@@ -1,10 +1,10 @@
 <template>
-    
+    <div></div>
 </template>
 
 <script>
     export default {
-        name: "largeScreen"
+        name: "costStatistics"
     }
 </script>
 
diff --git a/hb_client/src/views/statistics/materialStatistics.vue b/hb_client/src/views/statistics/materialStatistics.vue
new file mode 100644
index 0000000..d7b83f5
--- /dev/null
+++ b/hb_client/src/views/statistics/materialStatistics.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+      <el-tab-pane label="废料统计" name="废料统计">
+        <el-row :gutter="5">
+          <el-col :span="3" style="height: 1px"></el-col>
+          <el-col :span="5">
+            <div class="chartsTitle">废料原因占比</div>
+            <Echart
+              :options="pieOptions"
+              id="pieChart"
+              height="400px"
+              width="260px"
+            ></Echart>
+          </el-col>
+          <el-col :span="13">
+            <div class="chartsTitle">废料原因统计</div>
+            <div id="barChart" style="width:100%;height: 400px;"></div>
+          </el-col>
+        </el-row>
+        <div style="padding: 20px;">
+          <div class="chartsTitle">废料明细表</div>
+          <el-table
+            small
+            :data="list"
+            fit stripe
+            size="mini"
+            pager-count="3"
+            style="border-top: 1px solid #f5f5f5;"
+          >
+            <el-table-column label="序号" type="index">
+            </el-table-column>
+            <el-table-column label="物料编号" prop="card">
+            </el-table-column>
+            <el-table-column label="物料型号" prop="sco">
+            </el-table-column>
+            <el-table-column label="物料名称" prop="name" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="报废原因" prop="reason">
+            </el-table-column>
+            <el-table-column label="报废数量" prop="num">
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="采购统计" name="采购统计">
+        <el-row :gutter="5" v-if="activeName==='采购统计'">
+          <el-col :span="2" style="height: 1px;"></el-col>
+          <el-col :span="10">
+            <div class="chartsTitle">采购物料表</div>
+            <charts
+              :id="chartId1"
+              :options="barOptions"
+              :className="chartsName"
+              height="400px"
+              width="600px"
+            >
+            </charts>
+          </el-col>
+          <el-col :span="10">
+            <div class="chartsTitle">采购供应商表</div>
+            <charts
+              :id="chartId2"
+              :options="barOptions"
+              :className="chartsName"
+              height="400px"
+              width="600px"
+            >
+            </charts>
+          </el-col>
+        </el-row>
+        <div style="padding: 20px">
+          <div class="chartsTitle">采购明细表</div>
+          <el-table
+            small
+            :data="list"
+            fit stripe
+            size="mini"
+            pager-count="3"
+            style="border-top: 1px solid #f5f5f5;"
+          >
+            <el-table-column label="序号" type="index" width="50">
+            </el-table-column>
+            <el-table-column label="名称" prop="name" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="数量" prop="num" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="单位" prop="name" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="供应商" prop="sco" show-overflow-tooltip>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="废料来源" name="废料来源">
+        <el-row>
+          <el-col v-if="activeName==='废料来源'">
+            <div class="chartsTitle">废料来源</div>
+            <charts
+              :id="chartId3"
+              :options="barOptions"
+              :className="chartsName"
+              height="400px"
+            >
+            </charts>
+          </el-col>
+        </el-row>
+        <div style="padding: 20px;">
+          <div class="chartsTitle">废料来源明细表</div>
+          <el-table
+            small
+            :data="list"
+            fit stripe
+            size="mini"
+            pager-count="3"
+            style="border-top: 1px solid #f5f5f5;"
+          >
+            <el-table-column label="序号" type="index">
+            </el-table-column>
+            <el-table-column label="编号" prop="card">
+            </el-table-column>
+            <el-table-column label="名称" prop="name" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="数量" prop="num">
+            </el-table-column>
+            <el-table-column label="供应商" prop="sco" show-overflow-tooltip>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import charts from './charts.vue'
+  import Echart from '@/components/echart';
+    export default {
+        name: "materialStatistics",
+      components: {
+        charts,
+        Echart
+      },
+      data() {
+        return {
+          chartId1:'chart1',
+          chartId2:'chart2',
+          chartId3:'chart3',
+          barChart:null,
+          barChart1:null,
+          pieOptions: {},
+          barOptions: {},
+          activeName:'废料统计',
+          chartsName:"chartsName",
+          cdata: {
+            xData: ["气泡", "划痕"],
+            seriesData: [
+              {value: 30, name: "气泡"},
+              {value: 70, name: "划痕"},
+            ]
+          },
+          chartData: {
+            xAxisData: ["气泡", "划痕"],
+            seriesData: [30, 70],
+          },
+          xAxisbar:["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
+          barData: [80, 95, 96, 96, 96, 98, 99],
+          list: [
+            {id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31',num:2,reason:"气泡"},
+            {id: 2, name: 'HIehd92', card: '3332', sco: 'REF-32',num:1,reason:"划痕"},
+            {id: 3, name: 'HIehd93', card: '3333', sco: 'REF-33',num:3,reason:"擦伤"},
+            {id: 4, name: 'HIehd94', card: '3334', sco: 'REF-34',num:2,reason:"气泡"},
+            {id: 5, name: 'HIehd95', card: '3335', sco: 'REF-35',num:1,reason:"擦伤"},
+            {id: 6, name: 'HIehd96', card: '3336', sco: 'REF-36',num:2,reason:"气泡"},
+            {id: 7, name: 'HIehd97', card: '3337', sco: 'REF-37',num:1,reason:"划痕"},
+          ],
+        }
+      },
+      watch: {
+        cdata: {
+          handler(newData) {
+            this.pieOptions = {
+              color: [
+                "#32c5e9",
+                "#ffdb5c"
+              ],
+              tooltip: {
+                trigger: "item",
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+              },
+              toolbox: {
+                show: true
+              },
+              calculable: true,
+              series: [
+                {
+                  name: '废料原因',
+                  type: 'pie',    // 设置图表类型为饼图
+                  radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                  center: ['50%', '50%'], //圆心位置
+                  data:newData.seriesData
+                }
+              ]
+            }
+          },
+          immediate: true,
+        },
+        immediate: true,
+        deep: true
+      },
+      methods: {
+        drawChart() {
+          let that = this;
+          this.barChart = this.$echarts.init(document.getElementById('barChart'));
+          this.barChart.setOption({
+            grid: {
+              top: '10%',
+              left: '3%',
+              right: '5%',
+              bottom: '1%',
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'item',
+              formatter: function (params) {
+                let color = params.color;//图例颜色
+                let htmlStr = '<div>';
+                htmlStr += params.name + '<br/>';
+                htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+                htmlStr += params.seriesName + '：' + params.value + '%';
+                htmlStr += '</div>';
+                return htmlStr;
+              }
+            },
+            xAxis: {
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show: false, //去掉X轴分割线
+              },
+              data: that.chartData.xAxisData,
+            },
+            yAxis: {
+              axisLine: {
+                show: true,//y轴线
+              },
+              axisTick: {
+                show: false//Y轴刻度线
+              },
+              axisLabel: {
+                color: '#333333'//Y轴文本颜色
+              },
+              splitLine: {
+                show: true, //Y轴分割线
+                lineStyle: {
+                  color: '#dddddd'//Y轴分割线颜色
+                }
+              },
+            },
+            series: [{
+              name: '成品率',
+              type: 'bar',
+              barWidth: 20,
+              data: that.chartData.seriesData,
+              label: {
+                show: true, //开启显示
+                position: 'top', //在上方显示
+                formatter: '{c}%',//显示百分号
+                textStyle: { //数值样式
+                  color: 'black',//字体颜色
+                  fontSize: 10//字体大小
+                }
+              },
+              itemStyle: {
+                color: '#409EFF'
+              },
+            }]
+          });
+        },
+        handleClick(tab){
+          // console.log(tab);
+          // debugger;
+        },
+      },
+      mounted() {
+        this.drawChart();
+        this.barOptions ={
+          grid: {
+            top: '10%',
+            left: '3%',
+            right: '5%',
+            bottom: '1%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+              let color = params.color;//图例颜色
+              let htmlStr = '<div>';
+              htmlStr += params.name + '<br/>';
+              htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+              htmlStr += params.seriesName + '：' + params.value + '%';
+              htmlStr += '</div>';
+              return htmlStr;
+            }
+          },
+          xAxis: {
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false, //去掉X轴分割线
+            },
+            data: this.xAxisbar,
+          },
+          yAxis: {
+            axisLine: {
+              show: true,//y轴线
+            },
+            axisTick: {
+              show: false//Y轴刻度线
+            },
+            axisLabel: {
+              color: '#333333'//Y轴文本颜色
+            },
+            splitLine: {
+              show: true, //Y轴分割线
+              lineStyle: {
+                color: '#dddddd'//Y轴分割线颜色
+              }
+            },
+          },
+          series: [{
+            name: '成品率',
+            type: 'bar',
+            barWidth: 20,
+            data: this.barData,
+            label: {
+              show: true, //开启显示
+              position: 'top', //在上方显示
+              formatter: '{c}',//显示百分号
+              textStyle: { //数值样式
+                color: 'black',//字体颜色
+                fontSize: 10//字体大小
+              }
+            },
+            itemStyle: {
+              color: '#409EFF'
+            },
+          }]
+        }
+      }
+    }
+</script>
+
+<style scoped>
+.chartsTitle{
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  font-size: 22px;
+}
+</style>
diff --git a/hb_client/src/views/statistics/personStatistics.vue b/hb_client/src/views/statistics/personStatistics.vue
new file mode 100644
index 0000000..ee6fefe
--- /dev/null
+++ b/hb_client/src/views/statistics/personStatistics.vue
@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+    export default {
+        name: "personStatistics"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/hb_client/src/views/statistics/progressStatistics.vue b/hb_client/src/views/statistics/progressStatistics.vue
new file mode 100644
index 0000000..dece4b0
--- /dev/null
+++ b/hb_client/src/views/statistics/progressStatistics.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="5">
+      <el-col :span="8">
+        <el-card>
+          <Echart
+            :options="pieOptions"
+            id="pieChart"
+            height="400px"
+            width="260px"
+          ></Echart>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card>
+          <charts
+            :id="chartId1"
+            :options="barOptions"
+            :className="chartsName"
+            height="400px"
+            width="600px"
+          >
+          </charts>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-col>
+      <el-card>
+        <charts
+          :id="chartId2"
+          :options="barOptions"
+          :className="chartsName"
+          height="480px"
+          width="100%"
+        >
+        </charts>
+      </el-card>
+    </el-col>
+  </div>
+</template>
+
+<script>
+  import charts from './charts.vue'
+  import Echart from '@/components/echart';
+    export default {
+        name: "progressStatistics",
+      components: {
+        Echart,
+        charts
+      },
+      data() {
+        return {
+          chartsName:'barChart',
+          chartId1:'chart1',
+          chartId2:'chart2',
+          pieOptions: {},
+          barOptions: {},
+          cdata: {
+            xData: ["交付率", "逾期率"],
+            seriesData: [
+              {value: 99, name: "交付率"},
+              {value: 1, name: "逾期率"},
+            ]
+          },
+          xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
+          barData: [80, 95, 96, 96, 96, 98, 99],
+        }
+      },
+      watch: {
+        cdata: {
+          handler(newData) {
+            this.pieOptions = {
+              color: [
+                "#32c5e9",
+                "#ffdb5c"
+              ],
+              tooltip: {
+                trigger: "item",
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+              },
+              toolbox: {
+                show: true
+              },
+              calculable: true,
+              series: [
+                {
+                  name: '访问来源',
+                  type: 'pie',    // 设置图表类型为饼图
+                  radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                  center: ['50%', '50%'], //圆心位置
+                  data:newData.seriesData
+                }
+              ]
+            }
+          },
+          immediate: true,
+        },
+        immediate: true,
+        deep: true
+      },
+      methods: {
+      },
+      mounted() {
+          this.barOptions ={
+            grid: {
+              top: '10%',
+              left: '3%',
+              right: '5%',
+              bottom: '1%',
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'item',
+              formatter: function (params) {
+                let color = params.color;//图例颜色
+                let htmlStr = '<div>';
+                htmlStr += params.name + '<br/>';
+                htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+                htmlStr += params.seriesName + '：' + params.value + '%';
+                htmlStr += '</div>';
+                return htmlStr;
+              }
+            },
+            xAxis: {
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show: false, //去掉X轴分割线
+              },
+              data: this.xAxisbar,
+            },
+            yAxis: {
+              axisLine: {
+                show: true,//y轴线
+              },
+              axisTick: {
+                show: false//Y轴刻度线
+              },
+              axisLabel: {
+                color: '#333333'//Y轴文本颜色
+              },
+              splitLine: {
+                show: true, //Y轴分割线
+                lineStyle: {
+                  color: '#dddddd'//Y轴分割线颜色
+                }
+              },
+            },
+            series: [{
+              name: '成品率',
+              type: 'bar',
+              barWidth: 20,
+              data: this.barData,
+              label: {
+                show: true, //开启显示
+                position: 'top', //在上方显示
+                formatter: '{c}%',//显示百分号
+                textStyle: { //数值样式
+                  color: 'black',//字体颜色
+                  fontSize: 10//字体大小
+                }
+              },
+              itemStyle: {
+                color: '#409EFF'
+              },
+            }]
+          }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/hb_client/src/views/statistics/testStatistics.vue b/hb_client/src/views/statistics/testStatistics.vue
new file mode 100644
index 0000000..b8153af
--- /dev/null
+++ b/hb_client/src/views/statistics/testStatistics.vue
@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+    export default {
+        name: "testStatistics"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/hb_client/src/views/testModel/caram.vue b/hb_client/src/views/testModel/caram.vue
new file mode 100644
index 0000000..1d33058
--- /dev/null
+++ b/hb_client/src/views/testModel/caram.vue
@@ -0,0 +1,117 @@
+<template>
+    <div>
+      <el-button type="primary" @click="openVideo">打开摄像头</el-button>
+      <el-button @click="closeVideo">关闭摄像头</el-button>
+      <el-button type="danger" @click="screenshot">截图</el-button>
+      <div>
+        <video id="video" ref="video" />
+      </div>
+      <canvas ref="canvas" width="400" height="300" style="display:none" />
+      <!-- 截图展示图片 -->
+      <img ref="screenshot">
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "caram",
+      methods:{
+        // 打开摄像头
+        openVideo() {
+          // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+          console.log("navigator.mediaDevices", navigator.mediaDevices);
+          if (navigator.mediaDevices === undefined) {
+            navigator.mediaDevices = {};
+          }
+          // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+          // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+          if (navigator.mediaDevices.getUserMedia === undefined) {
+            navigator.mediaDevices.getUserMedia = constraints => {
+              // 首先，如果有getUserMedia的话，就获得它
+              const getUserMedia =
+                navigator.getUserMedia ||
+                (navigator.getUserMedia =
+                  navigator.mozGetUserMedia ||
+                  navigator.webkitGetUserMedia ||
+                  navigator.msGetUserMedia);
+              console.log("getUserMedia", getUserMedia);
+              // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+              if (!getUserMedia) {
+                return Promise.reject(new Error("该浏览器暂不支持摄像头！"));
+              }
+              // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+              return new Promise((resolve, reject) => {
+                getUserMedia.call(navigator, constraints, resolve, reject);
+              });
+            };
+          }
+          const constraints = {
+            audio: true,
+            video: {
+              width: { ideal: 1280, max: 1920 },
+              height: { ideal: 720, max: 1080 }
+            }
+          };
+          console.log("window.navigator", window.navigator);
+          window.navigator.mediaDevices
+            .getUserMedia(constraints)
+            .then(stream => {
+              const video = this.$refs.video;
+              // 旧的浏览器可能没有srcObject
+              if ("srcObject" in video) {
+                video.srcObject = stream;
+              } else {
+                // 防止在新的浏览器里使用它，因为它已经不再支持了
+                video.src = window.URL.createObjectURL(stream);
+              }
+              video.onloadedmetadata = e => {
+                video.play();
+              };
+            })
+            .catch(err => {
+              console.log(err.name + ": " + err.message);
+            });
+        },
+        // 截图
+        screenshot() {
+          // 获取视频
+          const video = this.$refs.video;
+          // 获取截图的地址
+          const screenshot = this.$refs.screenshot;
+          // 获取canvas
+          const canvas = this.$refs.canvas;
+          // 渲染一个2d平面的视图
+          const ctx = canvas.getContext("2d");
+          // 设置canvas 视图文件地址和大小
+          ctx.drawImage(video, 0, 0, 400, 300);
+          // 将数据转为base64赋值给img标签的src属性
+          screenshot.src = canvas.toDataURL("image/png");
+          console.log("screenshot.src", screenshot.src);
+          const imgData = canvas
+            .toDataURL("image/png")
+            .replace("image/png", "image/octet-stream");
+          // 下载图片到本地
+          const save_link = document.createElementNS(
+            "http://www.w3.org/1999/xhtml",
+            "a"
+          );
+          save_link.href = imgData;
+          save_link.download = "file_" + new Date().getTime() + ".png";
+          save_link.click();
+        },
+        // 关闭摄像头
+        closeVideo() {
+          console.log("srcObject", this.$refs.video.srcObject);
+          const srcObject = this.$refs.video.srcObject ? this.$refs.video.srcObject.getTracks() : this.$refs.video.src.getTracks()
+          srcObject.forEach(track => {
+            track.stop();
+            this.$refs.video.src = null;
+          });
+        },
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>