测试语音

src/styles/page/using/query.scss

@@ -236,58 +236,3 @@
         height: 100%;
     }
 }
-
-.el-dialog.hc-media-recorder-dialog {
-    --el-dialog-margin-top: 30vh;
-    .el-dialog__header {
-        padding: 10px 20px;
-        padding-bottom: 10px !important;
-        border-color: #EEEEEE !important;
-        .el-dialog__title {
-            color: #464646;
-        }
-        .el-dialog__headerbtn {
-            right: 6px;
-            width: 32px;
-            height: 32px;
-        }
-    }
-    .el-dialog__body {
-        padding: 10px;
-    }
-    .el-dialog__footer {
-        display: none;
-    }
-    .hc-media-recorder-box {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        img {
-            width: 300px;
-        }
-        .content-box {
-            position: absolute;
-            width: 140px;
-            height: 60px;
-            text-align: center;
-            color: #464646;
-            .shut-down-icon {
-                font-size: 24px;
-                margin-bottom: 14px;
-            }
-            .time-box {
-                position: relative;
-                .time {
-                    color: #FFAF75;
-                }
-            }
-        }
-    }
-}
-
-html.dark {
-    .el-dialog.hc-media-recorder-dialog {
-        --el-dialog-bg-color: #ffffff !important;
-    }
-}

src/styles/theme/login.scss

@@ -0,0 +1,80 @@
+html.dark {
+    .login-body {
+        color-scheme: light;
+        --el-color-white: #ffffff;
+        --el-color-black: #000000;
+        --el-color-success: #67c23a;
+        --el-color-success-light-3: #95d475;
+        --el-color-success-light-5: #b3e19d;
+        --el-color-success-light-7: #d1edc4;
+        --el-color-success-light-8: #e1f3d8;
+        --el-color-success-light-9: #f0f9eb;
+        --el-color-success-dark-2: #529b2e;
+        --el-color-warning: #e6a23c;
+        --el-color-warning-light-3: #eebe77;
+        --el-color-warning-light-5: #f3d19e;
+        --el-color-warning-light-7: #f8e3c5;
+        --el-color-warning-light-8: #faecd8;
+        --el-color-warning-light-9: #fdf6ec;
+        --el-color-warning-dark-2: #b88230;
+        --el-color-danger: #f56c6c;
+        --el-color-danger-light-3: #f89898;
+        --el-color-danger-light-5: #fab6b6;
+        --el-color-danger-light-7: #fcd3d3;
+        --el-color-danger-light-8: #fde2e2;
+        --el-color-danger-light-9: #fef0f0;
+        --el-color-danger-dark-2: #c45656;
+        --el-color-error: #f56c6c;
+        --el-color-error-light-3: #f89898;
+        --el-color-error-light-5: #fab6b6;
+        --el-color-error-light-7: #fcd3d3;
+        --el-color-error-light-8: #fde2e2;
+        --el-color-error-light-9: #fef0f0;
+        --el-color-error-dark-2: #c45656;
+        --el-color-info: #909399;
+        --el-color-info-light-3: #b1b3b8;
+        --el-color-info-light-5: #c8c9cc;
+        --el-color-info-light-7: #dedfe0;
+        --el-color-info-light-8: #e9e9eb;
+        --el-color-info-light-9: #f4f4f5;
+        --el-color-info-dark-2: #73767a;
+        --el-bg-color: #ffffff;
+        --el-bg-color-page: #f2f3f5;
+        --el-bg-color-overlay: #ffffff;
+        --el-text-color-primary: #303133;
+        --el-text-color-regular: #606266;
+        --el-text-color-secondary: #909399;
+        --el-text-color-placeholder: #a8abb2;
+        --el-text-color-disabled: #c0c4cc;
+        --el-border-color: #dcdfe6;
+        --el-border-color-light: #e4e7ed;
+        --el-border-color-lighter: #ebeef5;
+        --el-border-color-extra-light: #f2f6fc;
+        --el-border-color-dark: #d4d7de;
+        --el-border-color-darker: #cdd0d6;
+        --el-fill-color: #f0f2f5;
+        --el-fill-color-light: #f5f7fa;
+        --el-fill-color-lighter: #fafafa;
+        --el-fill-color-extra-light: #fafcff;
+        --el-fill-color-dark: #ebedf0;
+        --el-fill-color-darker: #e6e8eb;
+        --el-fill-color-blank: #ffffff;
+        --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),0px 8px 20px rgba(0, 0, 0, 0.08);
+        --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+        --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+        --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+        --el-disabled-bg-color: var(--el-fill-color-light);
+        --el-disabled-text-color: var(--el-text-color-placeholder);
+        --el-disabled-border-color: var(--el-border-color-light);
+        --el-overlay-color: rgba(0, 0, 0, 0.8);
+        --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+        --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+        --el-mask-color: rgba(255, 255, 255, 0.9);
+        --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+        --el-border-width: 1px;
+        --el-border-style: solid;
+        --el-border-color-hover: var(--el-text-color-disabled);
+        --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+        --el-svg-monochrome-grey: var(--el-border-color);
+    }
+}

src/styles/view/login.scss

@@ -55,6 +55,7 @@
                 font-size: 40px;
                 line-height: 48px;
                 margin-bottom: 32px;
+                color: initial;
             }
             .title-tab {
                 overflow: hidden;

src/views/login/index.vue

@@ -238,6 +238,7 @@ const clickableClick = () => {
 </style>
 
 <style lang="scss">
+@import "../../styles/theme/login.scss";
 .form-box {
     .el-input__wrapper.is-focus{
         box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset;

src/views/using/components/media-mic/index.vue

@@ -0,0 +1,292 @@
+<template>
+    <div class="hc-media-mic-box">
+        <div class="hc-icon-mic" v-loading="isLoading" @click="startClick">
+            <HcIcon name="mic" :fill="isMicShow"/>
+        </div>
+
+        <!--语音识别-->
+        <HcDialog ui="hc-media-recorder-dialog" bgColor="#fff" title="语音识别搜索" widths="360px" saveText="确认" :show="isMicShow" @close="closeClick">
+            <!--录音中-->
+            <div class="hc-media-recorder-box" @click="endClick" v-if="isMicType === 0">
+                <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>
+            <!--语音转换中-->
+            <div class="hc-media-recorder-box ban" v-if="isMicType === 1">
+                <img :src="imageViewMic" alt="">
+                <div class="content-box">
+                    <div class="shut-down-icon">
+                        <HcIcon name="mic-off"/>
+                    </div>
+                    <div class="time-box">
+                        <span class="time">语音转换中...</span>
+                    </div>
+                </div>
+            </div>
+            <!--语音转换完成-->
+            <div class="content-search-word" v-if="isMicType === 2">
+                <div class="content-word-box">
+                    <div class="title">识别结果：</div>
+                    <div class="search-word">{{searchInfo.searchWord??'未识别到内容，请重新录入语音'}}</div>
+                </div>
+                <div class="word-btn-box">
+                    <el-row :gutter="10">
+                        <el-col :span="8">
+                            <el-button block type="warning" @click="startClick">
+                                <HcIcon name="mic"/>
+                                <span>重录语音</span>
+                            </el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-button block type="info" :loading="downloadLoading" :disabled="!fileBlobUrl" @click="fileDownload">
+                                <HcIcon name="download"/>
+                                <span>下载语音</span>
+                            </el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-button block type="primary" :disabled="!searchInfo.searchWord" @click="searchClick">
+                                <HcIcon name="search-2"/>
+                                <span>确认搜索</span>
+                            </el-button>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+        </HcDialog>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+import archiveQueryApi from "~api/using/query.js"
+import imageViewMic from "~src/assets/view/mic.gif"
+import {getObjValue} from "js-fast-way"
+
+//参数
+const props = defineProps({
+    loading: {
+        type: Boolean,
+        default: false
+    },
+})
+
+const isLoading = ref(props.loading)
+
+//监听
+watch(() => [
+    props.loading
+], ([loading]) => {
+    isLoading.value = loading
+})
+
+//弹窗变量
+const isMicShow = ref(false)
+
+//类型变量，0录音中, 1识别转换中，2转换完
+const isMicType = ref(2)
+
+//时间变量
+const micTime = ref('00:00')
+const micTimeRef = ref(null)
+
+//语音API变量
+const streamRef = ref(null)
+const mediaRecorderRef = ref(null)
+
+//事件
+const emit = defineEmits(['change'])
+
+//开始录音
+const startClick = async () => {
+    isMicType.value = 0
+    if (streamRef.value === null) {
+        const stream = await getUserMedia()
+        if (stream === false) {
+            return false;
+        }
+        streamRef.value = stream
+    }
+    isMicShow.value = true
+    startRecorder() //执行录音
+}
+
+//结束录音
+const endClick = () => {
+    isClose.value = false
+    isMicType.value = 1
+    mediaRecorderRef.value?.stop()
+    mediaRecorderRef.value = null
+    clearTimeout(micTimeRef.value);
+    micTimeRef.value = null
+    micTime.value = '00:00'
+}
+
+//关闭
+const isClose = ref(false)
+const closeClick = () => {
+    isClose.value = true
+    isMicShow.value = false
+    endClick()
+}
+
+//开始录音
+const startRecorder = () => {
+    //获取音频流
+    const {stream} = setSampleRate()
+    let mediaRecorder = new MediaRecorder(stream), chunks;
+    //开始录音
+    mediaRecorder.start();
+    setMicTimeFormat() //开始计时
+    // 录音结束时，停止并下载录音文件
+    mediaRecorder.addEventListener("dataavailable", (e) => {
+        clearTimeout(micTimeRef.value);
+        micTimeRef.value = null
+        chunks = e.data;
+    });
+    // 录音结束
+    mediaRecorder.addEventListener("stop", () => {
+        if (!isClose.value) {
+            //获取wav格式音频数据
+            let blob = new Blob([chunks], {type: "audio/wav"});
+            const fileName = new Date().getTime() + ".wav"
+            fileBlobName.value = fileName
+            let file = new window.File([blob],fileName, {type: "audio/wav"});
+            // 创建一个blob的对象，把Json转化为字符串作为我们的值
+            fileBlobUrl.value = window.URL.createObjectURL(blob);
+            // 准备上传
+            const formData = new FormData()
+            formData.append('file', file)
+            transcribeApi(formData)
+        }
+    });
+    mediaRecorderRef.value = mediaRecorder
+}
+
+//下载录音文件
+const downloadLoading = ref(false)
+const fileBlobUrl = ref(null)
+const fileBlobName = ref('')
+const fileDownload = () => {
+    if (fileBlobUrl.value) {
+        downloadLoading.value = true
+        // 创建一个链接元素，是属于 a 标签的链接元素，所以括号里才是a，
+        let link = document.createElement("a");
+        link.href = fileBlobUrl.value;
+        // 把上面获得的blob的对象链接赋值给新创建的这个 a 链接
+        link.setAttribute("download", fileBlobName.value ?? "录音.wav");
+        // 后面的是文件名字，可以更改
+        link.click();
+        setTimeout(() => {
+            downloadLoading.value = false
+        }, 5000)
+    }
+}
+
+//发起请求
+const searchInfo = ref({})
+const transcribeApi = async (formData) => {
+    const { error, code, data } = await archiveQueryApi.micSearchInfo(formData)
+    //处理数据
+    isMicType.value = 2
+    if (!error && code === 200) {
+        searchInfo.value = getObjValue(data)
+    } else {
+        searchInfo.value = {}
+    }
+}
+
+//确认搜索
+const searchClick = () => {
+    emit('change', searchInfo.value)
+    isMicShow.value = false
+    isMicType.value = 0
+    mediaRecorderRef.value = null
+    streamRef.value = null
+}
+
+//设置采样率
+const setSampleRate = () => {
+    if (streamRef.value) {
+        const audioContext = new AudioContext({
+            sampleRate: 16000
+        });
+        const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, {
+            mediaStream: streamRef.value
+        });
+        const mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);
+        mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
+        return mediaStreamAudioDestinationNode
+    } else {
+        return {}
+    }
+}
+
+//获取录音权限
+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);
+                });
+            }
+        }
+        // 使用新方法的API
+        navigator.mediaDevices.getUserMedia({
+            audio: true
+        }).then(stream => {
+            resolve(stream)
+        }).catch(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 {
+            clearTimeout(micTimeRef.value);
+            micTimeRef.value = null
+            micTime.value = '00:00'
+            endClick()
+        }
+    },1000)
+}
+</script>
+
+<style lang="scss">
+@import "style";
+</style>

src/views/using/components/media-mic/style.scss

@@ -0,0 +1,89 @@
+.hc-media-mic-box {
+
+}
+
+.el-dialog.hc-media-recorder-dialog {
+    --el-dialog-margin-top: 30vh;
+    .el-dialog__header {
+        padding: 10px 20px !important;
+        border-color: #EEEEEE !important;
+        .el-dialog__title {
+            color: #464646;
+        }
+        .el-dialog__headerbtn {
+            right: 6px;
+            width: 32px;
+            height: 32px;
+        }
+    }
+    .el-dialog__body {
+        padding: 10px;
+    }
+    .el-dialog__footer {
+        display: none;
+    }
+    .hc-media-recorder-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        img {
+            width: 300px;
+        }
+        .content-box {
+            position: absolute;
+            width: 140px;
+            height: 60px;
+            text-align: center;
+            color: #464646;
+            .shut-down-icon {
+                font-size: 24px;
+                margin-bottom: 14px;
+            }
+            .time-box {
+                position: relative;
+                .time {
+                    color: #FFAF75;
+                }
+            }
+        }
+        &.ban {
+            cursor: not-allowed;
+        }
+    }
+    .content-search-word {
+        position: relative;
+        height: 300px;
+        .content-word-box {
+            font-size: 16px;
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            color: #444444;
+            .search-word {
+                position: relative;
+                color: #ec7c2b;
+                flex: 1;
+            }
+        }
+        .word-btn-box {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            bottom: 0;
+        }
+    }
+}
+
+html.dark {
+    .hc-media-mic-box .hc-icon-mic .el-loading-mask{
+        backdrop-filter: none;
+        background-color: var(--el-mask-color);
+        .el-loading-spinner {
+            top: 50%;
+        }
+    }
+    .el-dialog.hc-media-recorder-dialog {
+        --el-dialog-bg-color: #ffffff !important;
+    }
+}

src/views/using/query.vue

@@ -38,9 +38,7 @@
                         </div>
                     </template>
                 </el-input>
-                <div class="hc-icon-mic" @click="transcribeClick">
-                    <HcIcon name="mic" :fill="isMicShow"/>
-                </div>
+                <HcMediaMic class="hc-query-mic" :loading="tableLoading" @change="mediaMicChange"/>
             </div>
 
             <div class="hc-query-filtering-collapse-box">
@@ -56,7 +54,7 @@
                                 <div class="screening-key" :class="isArrIndex(classes,'key', item.key) ? 'cut': ''" @click="classesClick(item)">{{item.name}}</div>
                             </template>
                         </div>
-                        <div class="hc-search-screening-item mb-4">
+                        <div class="hc-search-screening-item">
                             <div class="title">目录：</div>
                             <!-- <div class="screening-key text-link" @click="nodeTreeClick">
                                 <HcIcon name="node-tree" :line="false"/>
@@ -87,13 +85,12 @@
                                 <div class="screening-key" :class="isArrIndex(deadline,'key', item.key) ? 'cut': ''" @click="deadlineClick(item)">{{item.name}}</div>
                             </template>
                         </div>
-                        <div class="hc-search-screening-item">
+                        <div class="hc-search-screening-item mb-4">
                             <div class="title">密级：</div>
                             <template v-for="item in securitys">
                                 <div class="screening-key" :class="isArrIndex(security,'key', item.key) ? 'cut': ''" @click="securityClick(item)">{{item.name}}</div>
                             </template>
                         </div>
-
                     </el-collapse-item>
                 </el-collapse>
             </div>
@@ -395,29 +392,6 @@
             </el-collapse>
            <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>
 
@@ -425,13 +399,14 @@
 import {ref, nextTick, onMounted, watch} from "vue";
 import {useAppStore} from "~src/store";
 import MetaTable from "../transfer/components/meta-table.vue"
-import {getArrValue, arrIndex, isArrIndex, isString, getObjValue} from "js-fast-way"
+import HcMediaMic from "./components/media-mic/index.vue"
+import {getArrValue, arrIndex, isArrIndex, getObjValue} from "js-fast-way"
 import archiveQueryApi from "~api/using/query.js";
 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()
@@ -1505,142 +1480,15 @@ const getmetaInfo=async(fileId)=>{
     }
 }
 
-//语音
-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) => {
-    //设置采样率
-    const audioContext = new AudioContext({ sampleRate: 16000 });
-    const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, { mediaStream: stream });
-    const mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);
-    mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
-    //测试
-    let mediaRecorder = new MediaRecorder(mediaStreamAudioDestinationNode.stream), chunks;
-    mediaRecorderRef.value = mediaRecorder
-    //开始录音
-    mediaRecorder.start();
-    setMicTimeFormat() //开始计时
-    // 录音结束时，停止并下载录音文件
-    mediaRecorder.addEventListener("dataavailable", (e) => {
-        clearTimeout(micTimeRef.value);
-        micTimeRef.value = null
-        chunks = e.data;
-    });
-    // 录音结束
-    mediaRecorder.addEventListener("stop", () => {
-        //获取wav格式音频数据
-        let blob = new Blob([chunks], {type: "audio/wav"});
-        let file = new window.File([blob],new Date().getTime() + ".wav", {type: "audio/wav"});
-        //下载文件到本地
-        testDownload(blob)
-        //准备上传
-        const formData = new FormData()
-        formData.append('file', file)
-        transcribeApi(formData)
-    });
-}
-
-const testDownload = (blob) => {
-    // 创建一个blob的对象，把Json转化为字符串作为我们的值
-    let url = window.URL.createObjectURL(blob);
-    // 上面这个是创建一个blob的对象连链接，
-    // 然后创建一个链接元素，是属于 a 标签的链接元素，所以括号里才是a，
-    let link = document.createElement("a");
-    link.href = url;
-    // 把上面获得的blob的对象链接赋值给新创建的这个 a 链接
-    link.setAttribute("download", "录音.wav");
-    // 设置下载的属性（所以使用的是download），这个是a 标签的一个属性
-    // 后面的是文件名字，可以更改
-    link.click();
-}
-
-//发起请求
-const transcribeApi = async (formData) => {
-    const { error, code, data } = await archiveQueryApi.micSearchInfo(formData)
-    console.log(data)
-    if (!error && code === 200) {
-        const res = getObjValue(data)
-        searchInput.value = res.queryValue
-        searchForm.value.searchType = 1
-        searchForm.value.current = 1
-        Object.keys(res).forEach(key => {
-            searchForm.value[key] = res[key]
-        })
-        getTableData().then()
-    }
-}
-
-//获取录音权限
-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 mediaMicChange = (data) => {
+    searchInput.value = data.queryValue
+    searchForm.value.searchType = 1
+    searchForm.value.current = 1
+    Object.keys(data).forEach(key => {
+        searchForm.value[key] = data[key]
     })
-}
-
-//设置时间格式
-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)
+    getTableData()
 }
 </script>
 
@@ -1657,8 +1505,6 @@ const setMicTimeFormat = () => {
     position: relative;
     width: calc(100% - 40px);
     overflow: hidden;
-
-
 }
 .scrollbar-content {
     white-space: nowrap;