物料采集。

src/components/Upload/CameraUpload.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="camera-upload">
+    <svg-icon icon-class="paizhao" size="80" />
+    <svg-icon icon-class="bendishangchuan" size="80" />
+  </div>
+  <el-button @click="openMedia">开启摄像头</el-button>
+  <video id="video" autoplay="autoplay" height="500px" width="500px"></video>
+  <canvas id="canvas" height="500px" width="500px"></canvas>
+  <el-button @click="takePhoto">拍照</el-button>
+  <img id="imgTag" alt="imgTag" src="" />
+  <el-button @click="closeMedia">关闭摄像头</el-button>
+</template>
+
+<script setup>
+let mediaStreamTrack = null; // 视频对象(全局)
+let video;
+
+const openMedia = async () => {
+  let constraints = {
+    video: { width: 500, height: 500 },
+    audio: false,
+  };
+  //获得video摄像头
+  video = document.getElementById("video");
+  navigator.mediaDevices
+    .getUserMedia(constraints)
+    .then((mediaStream) => {
+      // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
+      mediaStreamTrack = mediaStream.getVideoTracks();
+      video.srcObject = mediaStream;
+      video.play();
+    })
+    .catch((error) => {
+      console.log("Error: " + error);
+    });
+};
+
+// 拍照
+function takePhoto() {
+  //获得Canvas对象
+  let video = document.getElementById("video");
+  let canvas = document.getElementById("canvas");
+  let ctx = canvas.getContext("2d");
+  ctx.drawImage(video, 0, 0, 500, 500);
+
+  // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
+  let img = document.getElementById("canvas").toDataURL();
+  // 这里的img就是得到的图片
+  console.log("img-----", img);
+  document.getElementById("imgTag").src = img;
+  //上传
+  /*$.ajax({
+      url: "/xxxx.do",
+      type: "POST",
+      data: {"imgData": img},
+      success: function (data) {
+          console.log(data);
+          document.gauges.forEach(function (gauge) {
+              gauge.value = data.data
+          });
+      },
+      error: function () {
+          console.log("服务端异常！");
+      }
+  });*/
+}
+
+// 关闭摄像头
+function closeMedia() {
+  let stream = document.getElementById("video").srcObject;
+  let tracks = stream.getTracks();
+
+  tracks.forEach(function (track) {
+    track.stop();
+  });
+
+  document.getElementById("video").srcObject = null;
+}
+</script>
+
+<style lang="scss" scoped>
+.camera-upload {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 292px;
+  height: 292px;
+  border-radius: 16px 16px 16px 16px;
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+
+  .icon-back:nth-child(1) {
+    margin-right: 58px;
+  }
+}
+</style>

src/views/pro-steps/components/wuliaocaiji.vue

@@ -1,11 +1,15 @@
 <template>
-  <!-- 物料采集 -->
   <div>
-    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+    <!-- 物料采集 -->
+
+    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
+    <CameraUpload />
   </div>
 </template>
 
 <script lang="ts" setup>
+import CameraUpload from "@/components/Upload/CameraUpload.vue";
+
 const input = ref("");
 </script>
 

src/views/pro-steps/index.vue

@@ -135,7 +135,7 @@ onMounted(() => {
 .routerView {
   display: flex;
   flex: 1;
-  background-color: red;
+  //background-color: red;
   overflow-y: auto;
 }