From df084de9f9b376b58962086b5b3da957f199bc70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A3=E4=B8=87=E4=BF=8A?= <X1y3z1wyx4j051sw>
Date: Wed, 27 Aug 2025 18:02:55 +0800
Subject: [PATCH] =?UTF-8?q?fix/=E5=A2=9E=E5=8A=A0=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |   2 +-
 src/view/LargeScreen/cockpit.vue      |   2 +-
 src/view/components/speechControl.vue | 272 +++++++++++++++-----------
 3 files changed, 157 insertions(+), 119 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 86afa4d..47cf043 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@ const showSpeechControl = ref(true);
 // 监听路由变化，切换页面时隐藏语音控制组件
 router.afterEach((to) => {
   if (to.path === "/LargeScreen") {
-    showSpeechControl.value = false;
+    showSpeechControl.value = true;
   } else {
     showSpeechControl.value = true;
   }
diff --git a/src/view/LargeScreen/cockpit.vue b/src/view/LargeScreen/cockpit.vue
index 072e946..5f35e3b 100644
--- a/src/view/LargeScreen/cockpit.vue
+++ b/src/view/LargeScreen/cockpit.vue
@@ -3,7 +3,7 @@
         <!-- <div class="TopBox">
             <h1>仓储可视化数据大屏</h1>
         </div> -->
-        <iframe src="http://172.16.1.130:81/sz/" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+        <iframe src="http://172.16.1.130:81/sz/" id="suzhoudaping" frameborder="0" style="width: 100%;height: 100%;"></iframe>
     </div>
 </template>
 
diff --git a/src/view/components/speechControl.vue b/src/view/components/speechControl.vue
index 8bd853e..b5b709d 100644
--- a/src/view/components/speechControl.vue
+++ b/src/view/components/speechControl.vue
@@ -59,7 +59,7 @@
   </div>
 </template>
   <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 
 const config = {
   page: "Ecommerce Home",
@@ -71,9 +71,98 @@ const config = {
       selector: "#ai-speech-add-project",
       params: [],
     },
+    {
+      command: "switch_jsc",
+      description: "驾驶舱",
+      action: "click",
+      selector: "#ai_speech_jsc",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "switch_zngk",
+      description: "智能管控",
+      action: "click",
+      selector: "#ai_speech_zngk",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "switch_zndd",
+      description: "智能调度",
+      action: "click",
+      selector: "#ai_speech_zndd",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "switch_znyw",
+      description: "智能运维",
+      action: "click",
+      selector: "#ai_speech_znyw",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "switch_nyszzx",
+      description: "能源数据中心",
+      action: "click",
+      selector: "#ai_speech_nyszzx",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "switch_spjkzx",
+      description: "碳排放分析",
+      action: "click",
+      selector: "#ai_speech_spjkzx",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "ai_speech_rygl",
+      description: "人员管理",
+      action: "click",
+      selector: "#ai_speech_rygl",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "ai_speech_sbgl",
+      description: "设备管理",
+      action: "click",
+      selector: "#ai_speech_sbgl",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "ai_speech_gjgl",
+      description: "告警管理",
+      action: "click",
+      selector: "#ai_speech_gjgl",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "ai_speech_zsk",
+      description: "知识库",
+      action: "click",
+      selector: "#ai_speech_zsk",
+      params: [],
+      isIframe: true,
+    },
+    {
+      command: "ai_speech_xcgl",
+      description: "巡查管理",
+      action: "click",
+      selector: "#ai_speech_xcgl",
+      params: [],
+      isIframe: true,
+    },
+    
     {
       command: "search_project",
-      description: "搜索项目",
+      description: "搜索",
       action: "input",
       selector: "#search_project",
       params: [
@@ -86,7 +175,7 @@ const config = {
     },
     {
       command: "input_project_name",
-      description: "项目名称",
+      description: "名称",
       action: "input",
       selector: "#ai-speech-project-name",
       params: [
@@ -97,14 +186,20 @@ const config = {
         },
       ],
     },
+    {
+      command: "close_build_project",
+      description: "取消",
+      action: "click",
+      selector: "#ai-speech-close_buildproject",
+      params: [],
+    },
     {
       command: "build_project",
-      description: "创建项目",
+      description: "创建",
       action: "click",
       selector: "#ai-speech-buildproject",
       params: [],
     },
-    
   ],
 };
 
@@ -118,16 +213,15 @@ const props = defineProps({
 });
 
 watch(config, (newVal, oldVal) => {
-  if (voiceControl.value && voiceControl.value.isListening) {
-    voiceControl.value.stopListening();
-  }
-  initVoiceControl();
+  // if (voiceControl.value && voiceControl.value.isListening) {
+  //   voiceControl.value.stopListening();
+  // }
+  // initVoiceControl();
 });
 
 class VoiceControl {
   constructor(callback) {
     this.config = config;
-    this.isListening = false;
     this.apiKey = "sk-020189889aac40f3b050f7c60ca597f8";
     this.setupSpeechRecognition();
     this.updateUI();
@@ -145,13 +239,13 @@ class VoiceControl {
     this.recognition = new SpeechRecognition();
 
     // 配置识别参数以提高精度
-    this.recognition.continuous = true; // 长时间识别
+    this.recognition.continuous = false; // 长时间识别
     this.recognition.interimResults = true; // 返回临时结果
     this.recognition.maxAlternatives = 1; // 只返回最可能的结果
     this.recognition.lang = "zh-CN"; // 设置为中文识别
 
     // 音频处理参数（重要）
-    this.recognition.energy_threshold = 300; // 能量阈值
+    this.recognition.energy_threshold = 500; // 能量阈值
     this.recognition.pause_threshold = 0.3; // 停顿时间阈值（秒）
     this.recognition.phrase_threshold = 0.2; // 短语识别阈值
 
@@ -159,10 +253,7 @@ class VoiceControl {
     this.isProcessing = false; // 防止并发处理
 
     this.recognition.onstart = () => {
-      this.isListening = true;
       this.updateUI();
-      this.showStatus("正在聆听...", "info");
-      document.querySelector(".status-text").textContent = "正在聆听...";
     };
 
     this.recognition.onresult = async (event) => {
@@ -174,15 +265,13 @@ class VoiceControl {
       const result = event.results[lastResultIndex];
       const transcript = result[0].transcript;
 
-      console.log(event, "-------event");
       this.showTranscript(transcript);
-      this.showStatus("正在处理指令...", "info");
 
       // 显示中间结果（灰色）和最终结果（黑色）
       const commandDisplay = document.querySelector(".command-display");
       const commandText = commandDisplay.querySelector(".command-text");
 
-      console.log(result.isFinal, "----result.isFinal");
+      console.log(result.isFinal, "=====> isFinal");
 
       if (!result.isFinal) {
         // 中间结果 - 可以快速显示但不处理
@@ -199,14 +288,13 @@ class VoiceControl {
         commandText.style.color = "#00000085";
       }
 
-      console.log(transcript, "----");
+      console.log(transcript, "=====> 识别文字");
 
       try {
         // 使用setTimeout将处理放入下一个事件循环，避免阻塞UI
         setTimeout(async () => {
           if (transcript) {
             const sequence = await this.queryDeepSeek(transcript);
-            this.showStatus("指令执行完成", "success");
 
             this.executeSequence(sequence);
 
@@ -220,36 +308,33 @@ class VoiceControl {
         }, 0);
       } catch (error) {
         console.error("处理过程中出错:", error);
-        this.showError(`执行出错: ${error.message}`);
         this.isProcessing = false;
       }
     };
 
-    this.recognition.onerror = (event) => {
-      console.log(event);
-      this.isListening = false;
-      this.updateUI();
-      this.showError(`语音识别错误: ${event.error}`);
-      document.querySelector(".status-text").textContent = "点击开始语音识别";
-      this.isProcessing = false;
-    };
+    // this.recognition.onerror = (event) => {
+    //   console.log(event, "=====> error  event");
+    //   setTimeout(() => {
+    //       this.recognition.start();
+    //     }, 100); // 短暂延迟后重启
+    // };
 
     this.recognition.onend = () => {
       // 快速重启识别，减少等待时间
-      if (this.isListening) {
+      console.log("====> 走到这 ", listenStatus.value);
+
+      if (listenStatus.value) {
         // 只有在用户希望继续聆听时才重启
         setTimeout(() => {
           this.recognition.start();
         }, 100); // 短暂延迟后重启
       } else {
         this.updateUI();
-        document.querySelector(".status-text").textContent = "点击开始语音识别";
         setTimeout(() => {
           document.querySelector(".status-text").classList.remove("show");
         }, 3000);
       }
       this.isProcessing = false;
-      // this.isListening = false;
       // this.updateUI();
       // document.querySelector(".status-text").textContent = "点击开始语音识别";
 
@@ -317,7 +402,7 @@ class VoiceControl {
           ],
           temperature: 0.1,
           stream: false,
-          max_tokens: 200,
+          max_tokens: 500,
         }),
       }
     );
@@ -334,7 +419,7 @@ class VoiceControl {
 
     // 解析JSON响应
     let result = JSON.parse(content);
-    console.log(result, "---result");
+    console.log(result, "=====> deepseek 返回");
     // 验证响应结构
     if (!result.sequence || !Array.isArray(result.sequence)) {
       throw new Error("DeepSeek返回了无效的指令序列格式");
@@ -353,9 +438,8 @@ class VoiceControl {
   }
 
   stopListening() {
-    if (this.recognition && this.isListening) {
-      this.recognition.stop();
-    }
+    this.recognition.stop();
+    this.updateUI();
   }
 
   async executeSequence(sequence) {
@@ -377,18 +461,47 @@ class VoiceControl {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
+  // 向iframe发送命令
+  sendCommand(command) {
+    const targetFrame = document.getElementById("suzhoudaping");
+
+    nextTick(() => {
+      const message = {
+        type: "CONTROL_COMMAND",
+        action: command.action,
+        selector: command.selector,
+        value: command.value,
+        timestamp: Date.now(),
+      };
+
+      try {
+        targetFrame.contentWindow.postMessage(message, "*");
+        console.log("=====> 发送到iframe");
+      } catch (error) {
+        console.log(error, "=====> 发送到iframe");
+      }
+    });
+  }
+
   async executeInstruction(instruction) {
     const commandConfig = this.config.commands.find(
       (c) => c.command === instruction.command
     );
 
+    console.log(commandConfig, "----commandConfig");
+
     if (!commandConfig) {
       throw new Error(`未知指令: ${instruction.command}`);
     }
 
+    if (commandConfig && commandConfig.isIframe) {
+      this.sendCommand(commandConfig);
+      return;
+    }
+
     const element = document.querySelector(commandConfig.selector);
 
-    console.log(element, "-----element");
+    console.log(element, "====> 控制元素");
 
     if (!element) {
       throw new Error(`找不到元素: ${commandConfig.selector}`);
@@ -455,32 +568,22 @@ class VoiceControl {
   updateUI() {
     const voiceBtn = document.getElementById("voice-btn");
     if (voiceBtn) {
-      if (this.isListening) {
+      if (listenStatus.value) {
         voiceBtn.classList.add("listening");
+        document.querySelector(".status-text").textContent = "正在聆听...";
       } else {
         voiceBtn.classList.remove("listening");
+        document.querySelector(".status-text").textContent = "点击开始语音识别";
       }
     }
   }
 
-  showStatus(message, type = "info") {
-    const statusEl = document.getElementById("status");
-    if (statusEl) {
-      statusEl.textContent = `状态: ${message}`;
-      statusEl.className = `status ${type}`;
-    }
-  }
-
   showTranscript(text) {
     const transcriptEl = document.getElementById("transcript");
     if (transcriptEl) {
       transcriptEl.textContent = `识别结果: ${text}`;
     }
   }
-
-  showError(message) {
-    this.showStatus(message, "error");
-  }
 }
 
 const voiceControl = ref(null);
@@ -492,7 +595,6 @@ const initVoiceControl = () => {
 
 const callBackFun = (data) => {
   action.value = data;
-  console.log(data);
 };
 const toggleListening = () => {
   if (!voiceControl.value) {
@@ -500,7 +602,7 @@ const toggleListening = () => {
     return;
   }
 
-  if (voiceControl.value.isListening) {
+  if (listenStatus.value) {
     listenStatus.value = false;
     voiceControl.value.stopListening();
     const voiceBtn = document.getElementById("voice-btn");
@@ -535,22 +637,6 @@ body {
   color: #fff;
 }
 
-.container {
-}
-
-h1 {
-  font-size: 2.8rem;
-  margin-bottom: 20px;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-p {
-  font-size: 1.2rem;
-  max-width: 800px;
-  margin: 0 auto 30px;
-  line-height: 1.6;
-}
-
 /* 固定在左下角的语音控制组件 */
 .voice-control-container {
   position: fixed;
@@ -676,34 +762,6 @@ p {
   font-weight: 500;
 }
 
-.status {
-  padding: 10px;
-  margin: 10px 0;
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
-}
-
-.info {
-  background: rgba(0, 123, 255, 0.2);
-  border-left: 4px solid #007bff;
-}
-
-.success {
-  background: rgba(40, 167, 69, 0.2);
-  border-left: 4px solid #28a745;
-}
-
-.error {
-  background: rgba(220, 53, 69, 0.2);
-  border-left: 4px solid #dc3545;
-}
-
-.warning {
-  background: rgba(255, 193, 7, 0.2);
-  border-left: 4px solid #ffc107;
-}
-
 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 94, 98, 0.7);
@@ -735,24 +793,4 @@ p {
     transform: scale(1.3);
   }
 }
-
-@media (max-width: 768px) {
-  .voice-control-container {
-    left: 20px;
-    bottom: 20px;
-  }
-
-  .command-display {
-    left: 100px;
-    max-width: calc(100vw - 120px);
-  }
-
-  h1 {
-    font-size: 2.2rem;
-  }
-
-  p {
-    font-size: 1rem;
-  }
-}
 </style>
\ No newline at end of file