更新

src/styles/app/theme.scss

@@ -352,4 +352,11 @@ html.dark {
             border-color: var(--el-color-primary);
         }
     }
+    //通知
+    .el-notification {
+        background: #030C3B;
+        border-color: var(--el-color-primary);
+        --el-notification-title-color: white;
+        --el-notification-content-color: white;
+    }
 }

src/views/using/query.vue

@@ -38,6 +38,9 @@
                         </div>
                     </template>
                 </el-input>
+                <div class="hc-icon-mic" @click="transcribeClick">
+                    <HcIcon name="mic" :fill="isMicShow"/>
+                </div>
             </div>
 
             <div class="hc-query-filtering-collapse-box">
@@ -323,8 +326,7 @@
                         </template>
                     </HcTable>
 
-                    <!-- <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'" :ishowFile="checkId.length>0?true:false"/> -->
-                    <MetaTable :loading="cscmetaTableLoading" v-if="tabTypeKey === 'tab5'"  :metaDataTable="cscmetaDataTabledata"   :ishowFile="checkId.length>0?true:false"/>
+                    <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'" :ishowFile="checkId.length>0?true:false"/>
 
                     <HcTable :column="cscTableColumn5" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
 
@@ -347,7 +349,7 @@
 
         <!--使用弹窗查看数据-->
         <HcDialog :show="cscTableDataModal" :title="cscTableDataTitle" widths="1080px" isTable :footer="false" @close="cscTableDataModalClose">
-            <MetaTable :loading="cscmetaTableLoading" v-if="tabTypeKey === 'tab5'"  :metaDataTable="cscmetaDataTabledata"   :ishowFile="checkId.length>0?true:false"/>
+            <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>
             <HcTable :column="cscTableColumn51" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
         </HcDialog>
 
@@ -387,6 +389,29 @@
            <HcNoData v-if="nodeTreeArr.length==0"/>
         </HcDialog>
 
+        <!--语音识别-->
+        <HcDialog ui="hc-media-recorder-dialog"
+                  bgColor="#fff"
+                  title="语音识别搜索"
+                  :show="isMicShow"
+                  widths="360px"
+                  saveText="确认"
+                  @close="transcribeClick"
+        >
+            <div class="hc-media-recorder-box" @click="transcribeClick">
+                <img :src="imageViewMic" alt="">
+                <div class="content-box">
+                    <div class="shut-down-icon">
+                        <HcIcon name="shut-down"/>
+                    </div>
+                    <div class="time-box">
+                        <span class="time">{{micTime}}</span>
+                        <span> / 01:00</span>
+                    </div>
+                </div>
+            </div>
+        </HcDialog>
+
     </div>
 </template>
 
@@ -400,6 +425,7 @@ import tuningApi from "~api/archiveConfig/tuning.js";
 import imageViewGui from "~src/assets/view/gui.png";
 import imageViewGui1 from "~src/assets/view/gui1.png";
 import imageViewGui2 from "~src/assets/view/gui2.png";
+import imageViewMic from "~src/assets/view/mic.gif";
 
 //变量
 const useAppState = useAppStore()
@@ -975,7 +1001,6 @@ const tableFileSelection = (rows) => {
 
 //表格行被点击
 const tableFileShow = ref(false)
-const  checkmetaFileId=ref('')
 const tableRowClick = ({row}) => {
     tableAllShow.value = true;
     tableFileShow.value = true;
@@ -1023,10 +1048,6 @@ const consultFileClick =async (row,type) => {
    if(type===1){
     cscTableData1.value=row.approvalFileList
     fileInfo.value=row
-    if(cscTableData1.value.length>0){
-        checkmetaFileId.value= cscTableData1.value[0].id
-    }
-
     // fileInfo.value.pageN=row['approvalFileList'].length||0
     // fileInfo.value.pageNumber=row['approvalFileList'].length||0
    }else if(type==2){
@@ -1061,7 +1082,6 @@ const changePdf=(row)=>{
     console.log(row,'row');
     pdfUrl.value=row['pdfFileUrl']||''
     checkId.value=row.id
-    checkmetaFileId.value=row.id
 
 }
 
@@ -1077,9 +1097,6 @@ const tabTypeTab = ref([
 ]);
 const tabTypeChange = ({key}) => {
     tabTypeKey.value = key
-    if(key==='tab5'){
-        getmetaInfo()
-    }
 }
 
 const cscTableLoading = ref(false)
@@ -1160,7 +1177,6 @@ const cscTableDataModalShow = () => {
     const key = tabTypeKey.value;
     if (key === 'tab5') {
         cscTableDataTitle.value = '元数据'
-        getmetaInfo()
     } else if (key === 'tab6') {
         cscTableDataTitle.value = '验签包'
     }
@@ -1176,7 +1192,6 @@ const cscTableDataModalClose = () => {
 const onCarrySpotChecksDrawerClose = () => {
     isCarrySpotChecksDrawer.value = false
     pdfUrl.value=''
-    tabTypeKey.value='tab1'
 }
 
 //tab数据和相关处理
@@ -1466,6 +1481,105 @@ const getmetaInfo=async(fileId)=>{
         cscmetaDataTabledata.value=[]
     }
 }
+
+//语音
+const isMicShow = ref(false)
+const mediaRecorderRef = ref(null)
+const micTime = ref('00:00')
+const micTimeRef = ref(null)
+const transcribeClick = async () => {
+    if (isMicShow.value) { //停止录音
+        mediaRecorderRef.value?.stop()
+        mediaRecorderRef.value = null
+        isMicShow.value = false
+        clearTimeout(micTimeRef.value);
+        micTimeRef.value = null
+        micTime.value = '00:00'
+    } else {
+        const stream = await getUserMedia()
+        if (stream === false) return false;
+        isMicShow.value = true
+        startRecorder(stream)
+    }
+}
+
+//开始录音
+const startRecorder = (stream) => {
+    let mediaRecorder = new MediaRecorder(stream);
+    mediaRecorderRef.value = mediaRecorder
+    //开始录音
+    mediaRecorder.start();
+    setMicTimeFormat() //开始计时
+    // 录音结束时，停止并下载录音文件
+    mediaRecorder.addEventListener("dataavailable", event => {
+        clearTimeout(micTimeRef.value);
+        micTimeRef.value = null
+        let audioFile = new Blob([event.data], { type: "audio/wav" });
+        transcribeApi(audioFile)
+    });
+}
+
+//发起请求
+const transcribeApi = async (file) => {
+    let formData = new FormData();
+    formData.append("file", file);
+    const { error, code, data } = await archiveQueryApi.micSearchInfo(formData)
+    console.log(data)
+}
+
+//获取录音权限
+const getUserMedia = () => {
+    return new Promise((resolve) => {
+        // 老的浏览器可能根本没有实现 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;
+                // 一些浏览器根本没实现它 - 那么就返回一个 error 到 promise 的 reject 来保持一个统一的接口
+                if (!getUserMedia) {
+                    window?.$message.error('当前浏览器不支持语音功能')
+                    resolve(false)
+                }
+                // 否则，为老的 navigator.getUserMedia 方法包裹一个 Promise
+                return new Promise(function(resolve, reject) {
+                    getUserMedia.call(navigator, constraints, resolve, reject);
+                });
+            }
+        }
+        navigator.mediaDevices.getUserMedia({
+            audio: true
+        }).then(stream => {
+            resolve(stream)
+        }).catch(err => {
+            console.log(err)
+            window?.$message.error('获取麦克风权限失败了')
+            resolve(false)
+        });
+    })
+}
+
+//设置时间格式
+const setMicTimeFormat = () => {
+    let startNum = 0
+    micTime.value = '00:00'
+    micTimeRef.value = setInterval(() => {
+        if (startNum < 60) {
+            startNum++
+            let min = Math.floor(startNum / 60) //分
+            let sec = Math.floor(startNum % 60) //秒
+            min = min < 10 ? '0' + min : min
+            sec = sec < 10 ? '0' + sec : sec
+            micTime.value = `${min}:${sec}`
+        } else {
+            transcribeClick()
+        }
+    },1000)
+}
 </script>
 
 <style lang="scss" scoped>