1.步骤下面的el-scrollbar添加宽度。2.多媒体采集测试通过。

src/components/Upload/CameraUpload.vue

@@ -10,41 +10,59 @@
     </div>
 
     <input v-show="false" id="fileInput" accept="image/*" type="file" />
+    <el-dialog
+      id="carmer-dialog"
+      v-model="visible"
+      :close-on-click-modal="false"
+      :title="null"
+      close-icon="null"
+      width="840px"
+    >
+      <div v-loading="isLoading">
+        <video
+          id="video"
+          :height="photoSize + 'px'"
+          :width="photoSize + 'px'"
+          autoplay="autoplay"
+        ></video>
+        <canvas
+          v-show="false"
+          id="canvas"
+          :height="photoSize + 'px'"
+          :width="photoSize + 'px'"
+        ></canvas>
+        <div class="bottom-btns">
+          <el-button class="cancelBtn" @click="closeMedia">关闭</el-button>
+          <el-button class="sureBtn" type="primary" @click="takePhoto"
+            >拍照
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
-
-  <el-dialog
-    id="carmer-dialog"
-    v-model="visible"
-    :close-on-click-modal="false"
-    :title="null"
-    close-icon="null"
-  >
-    <video id="video" autoplay="autoplay" height="500px" width="500px"></video>
-    <canvas id="canvas" height="500px" width="500px"></canvas>
-    <img id="imgTag" alt="imgTag" src="" />
-    <div class="bottom-btns">
-      <el-button class="cancelBtn" @click="closeMedia">关闭</el-button>
-      <el-button class="sureBtn" type="primary" @click="takePhoto"
-        >拍照
-      </el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script setup>
 import { uploadFileApi } from "@/api/file";
 import { Delete, RefreshRight } from "@element-plus/icons-vue";
 
+const isLoading = ref(false);
 let mediaStreamTrack = null; // 视频对象(全局)
 let video;
-
-const cameraEmit = defineEmits(["uploadFinish", "resetSelect", "deleteAll"]);
+let photoSize = 800;
+let realSize = 1200;
+const cameraEmit = defineEmits([
+  "uploadFinish",
+  "resetSelect",
+  "deleteAll",
+  "close",
+]);
 
 const openMedia = async () => {
   visible.value = true;
   nextTick(() => {
     let constraints = {
-      video: { width: 500, height: 500 },
+      video: { width: photoSize, height: photoSize },
       audio: false,
     };
     //获得video摄像头
@@ -83,18 +101,20 @@ function takePhoto() {
   //获得Canvas对象
   let video = document.getElementById("video");
   let canvas = document.getElementById("canvas");
+  canvas.width = realSize; // 实际渲染像素
+  canvas.height = realSize; // 实际渲染像素
   let ctx = canvas.getContext("2d");
-  ctx.drawImage(video, 0, 0, 500, 500);
+  ctx.drawImage(video, 0, 0, realSize, realSize);
 
+  isLoading.value = true;
   // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
   let base64Data = document.getElementById("canvas").toDataURL();
   let blob = dataURItoBlob(base64Data);
   let file = new File([blob], `photo.png`, { type: "image/png" });
 
   uploadFileApi(file).then((res) => {
-    console.log("上传图片", res);
-    cameraEmit("uploadFinish", res);
-    closeMedia();
+    cameraEmit("uploadFinish", res.data.fileUrl);
+    isLoading.value = false;
   });
 }
 
@@ -111,6 +131,7 @@ function closeMedia() {
 
   document.getElementById("video").srcObject = null;
   visible.value = false;
+  cameraEmit("close");
 }
 
 const visible = ref(false);

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

@@ -2,6 +2,7 @@
   <el-scrollbar style="width: 100%; height: 100%">
     <div class="media-container">
       <CameraUpload
+        @close="closeCamera"
         @reset-select="clickReset"
         @upload-finish="finish"
         @delete-all="clickDeleteAll"
@@ -12,14 +13,24 @@
         class="media-item"
         @click="item.isSelected = !item.isSelected"
       >
+        <!--        <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />-->
+        <el-image
+          :initial-index="index"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="urlList"
+          :src="getImgurl(item)"
+          :zoom-rate="1.2"
+          class="img-box"
+          fit="cover"
+        />
+        <div class="checkB-border"></div>
         <i-ep-delete
           v-show="item.isSelected"
           class="check"
           color="#ff4d4f"
           size="20px"
         />
-
-        <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
       </div>
     </div>
   </el-scrollbar>
@@ -33,6 +44,7 @@ import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
 const proStore = useProcessStore();
 const medias = ref<any>([]);
+const urlList = ref<string[]>([]);
 
 defineOptions({
   name: "Wuliaocaiji",
@@ -47,10 +59,15 @@ const finish = (value: string) => {
     processId: proStore.scanInfo.id,
     seqNo: proStore.scanInfo.seqNo,
   }).then((res) => {
-    getListData();
+    // getListData();
+    ElMessage.success("上传成功");
   });
 };
 
+const closeCamera = () => {
+  getListData();
+};
+
 onMounted(() => {
   getListData();
 });
@@ -60,8 +77,11 @@ const getListData = () => {
     proStore.odersData.operationId,
     proStore.scanInfo.id,
     proStore.scanInfo.seqNo
-  ).then((res) => {
+  ).then((res: any) => {
     medias.value = res.data.records || [];
+    urlList.value = res.data.records.map((item: any) => {
+      return import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
+    });
   });
 };
 
@@ -94,13 +114,16 @@ const clickDeleteAll = () => {
   width: 100%;
   display: grid;
   /*行间距*/
-  grid-row-gap: 24px;
-  /*列间距*/
-  grid-column-gap: 24px;
+  //grid-row-gap: 24px;
+  ///*列间距*/
+  //grid-column-gap: 24px;
   /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
   //grid-template-columns: repeat(4, calc(33.33% - 16px));
   //grid-template-rows: repeat(4, calc(33.33% - 16px));
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  //grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, 300px);
+  grid-auto-rows: 300px;
+  grid-gap: 24px; /* 设置元素之间的间距 */
   overflow-y: auto;
 }
 
@@ -119,10 +142,19 @@ const clickDeleteAll = () => {
     height: 292px;
   }
 
-  .check {
+  .checkB-border {
     position: absolute;
     top: 20px;
     right: 20px;
+    width: 40px;
+    height: 40px;
+    border: 2px solid #1482f0;
+  }
+
+  .check {
+    position: absolute;
+    top: 30px;
+    right: 30px;
   }
 }
 </style>

src/views/pro-steps/index.vue

@@ -1,3 +1,4 @@
+`
 <template>
   <div class="mainContentBox">
     <el-row :gutter="20">
@@ -9,9 +10,17 @@
         <div class="typeContainer">
           <el-scrollbar>
             <div style="display: flex">
-              <div v-for="(item, index) in stepComponents" :key="index" class="scrollbar-demo-item">
+              <div
+                v-for="(item, index) in stepComponents"
+                :key="index"
+                class="scrollbar-demo-item"
+              >
                 <router-link :to="{ name: item.name }" replace>
-                  <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
+                  <div
+                    :class="getNameClass(index)"
+                    class="typeBox"
+                    @click="setSelectIndex(index)"
+                  >
                     <div class="svgIcon">
                       <svg-icon :icon-class="item.iconName" size="30" />
                     </div>
@@ -24,10 +33,11 @@
         </div>
         <Empty v-if="stepComponents.length == 0" />
         <div class="routerView">
-          <el-scrollbar>
+          <el-scrollbar style="width: 100%">
             <router-view v-slot="{ Component, route }">
               <keep-alive
-                include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji">
+                include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji"
+              >
                 <component :is="Component" :key="route.fullPath" />
               </keep-alive>
             </router-view>
@@ -39,7 +49,6 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
 import OperationBar from "@/views/pro-steps/operationBar.vue";
 import { useProcessStore } from "@/store";
 import { getOpCompent } from "@/api/prosteps";