Przeglądaj źródła

feat(RemoteControl): 添加 LED 控制功能

- 在遥控器界面添加 LED 开关功能
- 实现 switchLED 函数,用于控制 LED 的开闭
-通过 WebSocket 发送控制指令
panqiuyao 4 miesięcy temu
rodzic
commit
ff7b5da5e9
1 zmienionych plików z 33 dodań i 2 usunięć
  1. 33 2
      frontend/src/views/RemoteControl/index.vue

+ 33 - 2
frontend/src/views/RemoteControl/index.vue

@@ -14,8 +14,27 @@
       <el-col :span="6"><div class="button up" @click="runRight">右脚</div></el-col>
       <el-col :span="3"></el-col>
     </el-row>
-    <div class="te-c mar-top-50 fs-14"  style="color: #8C92A7">左脚控制左脚鞋启动拍摄</div>
-    <div class="te-c mar-top-10 fs-14"  style="color: #8C92A7">右脚控制右脚鞋启动拍摄</div>
+    <el-row align="middle">
+      <el-col :span="9"></el-col>
+      <el-col :span="6">
+          <el-dropdown>
+
+
+            <div class="button up">
+              LED
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click.native="switchLED(1)">开</el-dropdown-item>
+                <el-dropdown-item @click.native="switchLED(0)">关</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+      </el-col>
+      <el-col :span="9"></el-col>
+    </el-row>
+    <div class="te-c  fs-14"  style="color: #8C92A7">左脚控制左脚鞋启动拍摄</div>
+    <div class="te-c  fs-14"  style="color: #8C92A7">右脚控制右脚鞋启动拍摄</div>
   </div>
 
 </template>
@@ -26,6 +45,7 @@ import headerBar from '@/components/header-bar/index.vue'
 import icpList from '@/utils/ipc'
 import client from "@/stores/modules/client";
 import socket from "@/stores/modules/socket";
+import {Switch} from "@element-plus/icons-vue";
 
 const clientStore = client();
 // 初始化 WebSocket 状态管理
@@ -47,6 +67,17 @@ const run_take_picture = () => {
   emit('onRemoteControl','take_picture')
 }
 
+//LED
+const switchLED = async (value) => {
+  socketStore.sendMessage({
+    type: 'control_mcu',
+    data: {
+      device_name: "laser_position",
+      value,
+    }
+  });
+}
+
 </script>
 
 <style scoped lang="scss">