From 1a8ecd746e49598545ad0c5c27959e65fa528e91 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Thu, 16 Oct 2025 10:18:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E9=BA=A6=E5=85=8B=E9=A3=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/microphone.js                  |  46 ++++
 src/router/index.js                           |  10 +-
 .../register/components/Microphone/index.vue  | 225 ++++++++++++++++++
 src/views/device/register/index.vue           |   4 +
 4 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 src/api/device/microphone.js
 create mode 100644 src/views/device/register/components/Microphone/index.vue

diff --git a/src/api/device/microphone.js b/src/api/device/microphone.js
new file mode 100644
index 0000000..e5fa841
--- /dev/null
+++ b/src/api/device/microphone.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 开始录音
+export function startMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/start',
+      method: 'post',
+      params: data
+  })
+}
+
+// 暂停录音
+export function pauseMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/pause',
+      method: 'post',
+      params: data
+  })
+}
+
+// 恢复录音
+export function resumeMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/resume',
+      method: 'post',
+      params: data
+  })
+}
+
+// 停止录音
+export function stopMicrophoneApi(data) {
+ return request({
+    url: '/api/Microphone/stop',
+    method: 'post',
+    params: data
+  })
+}
+
+// 播放音频
+export function playSpeaker(data) {
+  return request({
+    url: '/api/Speaker/play',
+    method: 'post',
+    params: data
+  })
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index dbabe71..5c17dd3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 /* Layout */
 import Layout from "@/layout";
+import path from "path";
 
 /**
  * Note: 路由配置项
@@ -92,7 +93,14 @@ export const constantRoutes = [
         name: "灵巧手示教",
         meta: { title: "灵巧手详情" },
         hidden: true,
-      },
+      },{
+        path: "microphone/:id",
+        component: () =>
+          import("@/views/device/register/components/Microphone/index.vue"),
+        name: "麦克风示教",
+        meta: { title: "麦克风详情" },
+        hidden: true,
+      }
     ],
   },
   {
diff --git a/src/views/device/register/components/Microphone/index.vue b/src/views/device/register/components/Microphone/index.vue
new file mode 100644
index 0000000..fa76496
--- /dev/null
+++ b/src/views/device/register/components/Microphone/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="microphone-container">
+    <div class="title">远程麦克风</div>
+    <div class="audiosList" v-if="audiosList.length > 0">
+      <div class="speaker-container">
+          <div class="speaker-title">选择扬声器</div>
+          <el-select v-model="speaker" size="small">
+            <el-option
+            v-for="item in speakerOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="audioItem" v-for="item in audiosList">
+        <div>{{ item }}</div>
+        <div>
+          <el-button
+            circle
+            size="small"
+            :icon="VideoPlay"
+            @click="handlePlay(item)"
+          ></el-button>
+        </div>
+      </div>
+    </div>
+    <div class="btn-container">
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击开始录音"
+        placement="top-start"
+        v-if="recordStatus === 'end'"
+      >
+        <el-icon class="btn" :size="40" @click="startRecording"><Microphone /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击暂停录音"
+        placement="top-start"
+        v-if="recordStatus === 'recording'"
+      >
+        <el-icon class="btn" :size="40" @click="pauseRecording"><VideoPause /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击恢复录音"
+        placement="top-start"
+        v-if="recordStatus === 'pause'"
+      >
+        <el-icon class="btn" :size="40" @click="recoverRecording"><Mic /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击结束录音"
+        placement="top-start"
+        v-if="recordStatus !== 'end'"
+      >
+        <el-icon class="btn" :size="40" @click="stopRecording"><Mute /></el-icon>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Microphone, VideoPause, Mute, Mic, VideoPlay } from "@element-plus/icons-vue";
+import {
+  startMicrophoneApi,
+  pauseMicrophoneApi,
+  resumeMicrophoneApi,
+  stopMicrophoneApi,
+  playSpeaker
+} from '@/api/device/microphone'
+import { useRoute } from 'vue-router'
+import { ElMessage } from "element-plus";
+
+const route = useRoute()
+
+
+const terminalId = route.query.terminalId
+const deviceId = route.query.deviceId
+
+const recordStatus = ref('end');
+const isRecording = ref(false)
+const list = []
+const audiosList = ref([])
+const speaker = ref('spk1')
+const speakerOptions = ref(['spk1'])
+
+/**
+ * 开始录音
+ */
+const startRecording = async () => {
+  const fileName = new Date().getTime() + '.wav'
+  isRecording.value = true
+  const res = await startMicrophoneApi({
+    terminalId,
+    deviceId,
+    filePath: `/home/share/record/audios/${terminalId}_${deviceId}_${fileName}`
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'recording'
+    list.push(`${terminalId}_${deviceId}_${fileName}`)
+  }
+};
+
+/**
+ * 暂停录音
+ */
+const pauseRecording = async () => {
+  const res = await pauseMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'pause'
+  }
+};
+
+/**
+ * 恢复录音
+ */
+const recoverRecording = async () => {
+  const res = await resumeMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'recording'
+  }
+}
+
+/**
+ * 结束录音
+ */
+const stopRecording = async () => {
+  const res = await stopMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'end'
+    audiosList.value.unshift(list[list.length - 1])
+  }
+  isRecording.value = false
+};
+
+/**
+ * 播放录音
+ */
+const handlePlay = async (audioPath) => {
+  const res = await playSpeaker({
+    terminalId,
+    deviceId: speaker.value,
+    audioPath: `/home/share/record/audios/${audioPath}`
+  })
+  if (res.code === 200) {
+    ElMessage.success('播放成功')
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.microphone-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  max-width: 800px;
+  width: 100%;
+  height: calc(100vh - 125px);
+  background-color: #fff;
+  border-radius: 20px;
+  margin: auto;
+
+  .audiosList {
+    margin: 20px;
+    max-height: 280px;
+    overflow-y: auto;
+
+    .speaker-container {
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .speaker-title {
+        width: 80px;
+      }
+
+      .el-select {
+        width: 200px;
+      }
+    }
+
+    .audioItem {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+  }
+
+  .title {
+    padding-top: 20px;
+    font-size: 20px;
+    text-align: center;
+    color: #333;
+  }
+
+  .btn-container {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/device/register/index.vue b/src/views/device/register/index.vue
index 986fb2d..7520614 100644
--- a/src/views/device/register/index.vue
+++ b/src/views/device/register/index.vue
@@ -378,6 +378,10 @@ function handleControl(row) {
   const fullPath = `${row.deviceModel}/${row.id}`; // 构造路由路径
   router.push({
     path: fullPath,
+    query: {
+      terminalId: row.idDeDeviceTerminalConfig,
+      deviceId: row.deviceCode
+    }
   }); // 使用路由跳转
   // intoControlPage(`/${row.deviceModel}`, `${row.id}`)
 }