Browse Source

长传超限提示

liuqiang 1 year ago
parent
commit
db994fdb50

+ 96 - 0
src/components/Camera/Camera.vue

@@ -0,0 +1,96 @@
+<template>
+  <!-- 主页面容器,红色背景,居中显示 -->
+  <div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">
+    <!-- 视频元素容器 -->
+    <video ref="videoEl" />
+    <!-- 拍摄按钮 -->
+    <div
+      @click="shoot"
+      class="w-100px leading-100px text-center bg-black text-30px"
+      style="cursor: pointer"
+    >
+      拍摄
+    </div>
+  </div>
+</template>
+   
+  <script setup>
+import { ref, onMounted } from "vue";
+
+//使用 ref 对象来获取 DOM 元素
+const wrapper = ref();
+const videoEl = ref();
+
+// 存储拍摄后的图片路径
+const imageUrl = ref(null);
+
+// 检查摄像头并设置视频流
+async function checkCamera() {
+  // 获取媒体设备信息
+  const navigator = window.parent.navigator.mediaDevices;
+  if(!navigator){
+    window.alert("该浏览器不支持开启摄像头,请更换最新版浏览器");
+  }
+//   console.log(navigator, "navigator");
+  //判断用户是否拥有摄像头
+  const devices = await navigator.enumerateDevices();
+
+  // 如果存在媒体设备,获取摄像头视频流
+  if (devices) {
+    // 请求用户媒体设备(摄像头)
+    const stream = await navigator.getUserMedia({
+      audio: false,
+      video: {
+        width: 300, // 设置视频宽度
+        height: 300, // 设置视频高度
+        facingMode: "user", // 使用前置摄像头
+      },
+    });
+
+    // 如果视频元素存在,将视频流绑定到视频元素上并开始播放
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream;
+      videoEl.value.play();
+    }
+  }
+}
+
+// 拍摄函数,截取摄像头当前帧并显示在页面上
+function shoot() {
+  // 检查视频元素和页面容器是否存在
+  if (!videoEl.value || !wrapper.value) return;
+
+  // 创建一个画布元素,设置画布尺寸为视频流的尺寸
+  const canvas = document.createElement("canvas");
+  canvas.width = videoEl.value.videoWidth;
+  canvas.height = videoEl.value.videoHeight;
+
+  // 获取画布上下文对象
+  const ctx = canvas.getContext("2d");
+
+  // 绘制当前视频帧到画布上
+  ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
+
+  // 将画布内容转为 Base64 数据
+  const imageDataUrl = canvas.toDataURL("image/png");
+
+  // 存储图片路径
+  imageUrl.value = imageDataUrl;
+
+  // 创建一个图片元素
+  const imageElement = new Image();
+
+  // 将 Base64 数据设置为图片的 src 属性
+  imageElement.src = imageDataUrl;
+
+  console.log(imageElement, "图片路径");
+
+  // 将图片元素添加到页面容器中
+  wrapper.value.appendChild(imageElement);
+}
+
+// 在组件挂载后执行检查摄像头的操作
+onMounted(() => {
+  checkCamera();
+});
+</script>

+ 7 - 1
src/layout/components/TopMenu/TopMenu.vue

@@ -35,6 +35,12 @@
         <img src="@/assets/images/newIndex/bot.png" alt="" />
         <span>智聚AI</span>
       </div>
+      <!-- <img
+        src="@/assets/images/newIndex/p2w.png"
+        @click="openTab('Pdf转Word', '/camera')"
+        class="hand"
+        alt=""
+      /> -->
       <img
         src="@/assets/images/newIndex/p2w.png"
         @click="openTab('Pdf转Word', '/pdf2word')"
@@ -54,7 +60,7 @@
           class="hand"
           alt=""
         />
-        <span class="yuandian" v-if="false"></span>
+        <span class="yuandian" v-if="hasNewMessage"></span>
       </div>
       <img
         v-if="hasRole"

+ 6 - 0
src/router/index.js

@@ -376,6 +376,12 @@ export const constantRoutes = [{
 	}
 },
 {
+	path: "/camera",
+	component: () => import("@/components/Camera/Camera.vue"),
+	name: "camera",
+	hidden: true,
+},
+{
 	path: "/aipage",
 	component: () => import("@/layout/components/AIPage/AIPage.vue"),
 	name: "aipage",

+ 8 - 3
src/views/department/MyFile.vue

@@ -394,7 +394,7 @@
             <!-- 文件上传 -->
             <div>
                 <el-dialog :close-on-click-modal="false" v-model="uploadModal" title="文件上传" width="30%" @close="closeUpload">
-                    <el-upload class="upload-demo" :file-list="fileArr" :limit="10" :on-change="upBefore" drag :http-request="onSuccess" multiple
+                    <el-upload class="upload-demo" :file-list="fileArr" :limit="10" :on-exceed="beforeupload" :on-change="upBefore" drag :http-request="onSuccess" multiple
                     :on-remove="handleRemove"  
                     element-loading-text="上传中..."
                     element-loading-background="rgba(255, 255, 255, 0.8)"
@@ -403,7 +403,7 @@
                         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                         <div class="el-upload__text">拖入或<em>点击上传</em></div>
                         <template #tip>
-                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)&nbsp;&nbsp;&nbsp;仅支持上传文件格式</div>
+                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)&nbsp;&nbsp;&nbsp;</div>
                         </template>
                     </el-upload>
                     <template #footer>
@@ -2249,6 +2249,10 @@ export default {
                 reader.readAsText(res);
             })
         }
+        // 超出上传最大数量限制
+        const beforeupload = ()=>{
+            ElMessage({ message: "超过上传最大数量限制", type: "info" })
+        }
         // 触底加载事件
         const setScroll =async ()=>{
             if(tableBeEnd.value)return
@@ -2841,7 +2845,8 @@ export default {
             closeHis,
             hisIfarmeData,
             noHis,
-            hasThisTab
+            hasThisTab,
+            beforeupload
         }
     },
     watch: {

+ 8 - 3
src/views/myfile/MyFile.vue

@@ -441,14 +441,14 @@
             <!-- 文件上传 -->
             <div>
                 <el-dialog v-model="uploadModal" title="文件上传" :close-on-click-modal="false" width="30%" @close="closeUpload">
-                    <el-upload class="upload-demo" :file-list="fileArr" :limit="10" :on-change="upBefore"  drag :http-request="onSuccess" multiple :on-remove="handleRemove"  
+                    <el-upload class="upload-demo" :file-list="fileArr" :limit="10" :on-change="upBefore" :on-exceed="beforeupload"  drag :http-request="onSuccess" multiple :on-remove="handleRemove"  
                     element-loading-text="上传中..."
                     element-loading-background="rgba(255, 255, 255, 0.8)"
                     v-loading="loadingUpload" >
                         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                         <div class="el-upload__text">拖入或<em>点击上传</em></div>
                         <template #tip>
-                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)&nbsp;&nbsp;&nbsp;仅支持上传文件格式</div>
+                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)</div>
                         </template>
                     </el-upload>
                     <template #footer>
@@ -2500,6 +2500,10 @@ export default {
             }
             // console.log('filesend',files);
         }
+        // 超出上传最大数量限制
+        const beforeupload = ()=>{
+            ElMessage({ message: "超过上传最大数量限制", type: "info" })
+        }
         //获取扫描仪列表
         const scannerFile =async ()=>{
             const res = await selectInfo()
@@ -3133,7 +3137,8 @@ export default {
             historyDocId,
             historyFileId,
             noHis,
-            hasThisTab
+            hasThisTab,
+            beforeupload
         }
     },
     watch: {

+ 8 - 3
src/views/publicment/MyFile.vue

@@ -388,7 +388,7 @@
             <!-- 文件上传 -->
             <div>
                 <el-dialog v-model="uploadModal" :close-on-click-modal="false" title="文件上传" width="30%" @close="closeUpload">
-                    <el-upload class="upload-demo" :limit="10" :on-change="upBefore" :file-list="fileArr"  drag :http-request="onSuccess" multiple
+                    <el-upload class="upload-demo" :limit="10" :on-change="upBefore" :on-exceed="beforeupload"   :file-list="fileArr"  drag :http-request="onSuccess" multiple
                     :on-remove="handleRemove"  
                     element-loading-text="上传中..."
                     element-loading-background="rgba(255, 255, 255, 0.8)"
@@ -396,7 +396,7 @@
                         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                         <div class="el-upload__text">拖入或<em>点击上传</em></div>
                         <template #tip>
-                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)&nbsp;&nbsp;&nbsp;仅支持上传文件格式</div>
+                            <div class="el-upload__tip">请选择或拖入文件(一次最多上传10个文件)&nbsp;&nbsp;&nbsp;</div>
                         </template>
                     </el-upload>
                     <template #footer>
@@ -1128,6 +1128,10 @@ export default {
             showTreeMenu.value = true
           
         }
+        // 超出上传最大数量限制
+        const beforeupload = ()=>{
+            ElMessage({ message: "超过上传最大数量限制", type: "info" })
+        }
         // 申请扩容
        async function askApply() {
             const res =  await fileSpace.querySpace(impSpaceId.value)
@@ -2821,7 +2825,8 @@ export default {
             closeHis,
             hisIfarmeData,
             noHis,
-            hasThisTab
+            hasThisTab,
+            beforeupload
         }
     },
     watch: {