From ba3acc5da8a7bf829510d28569b68634ad335a05 Mon Sep 17 00:00:00 2001
From: lixiaolong <702156524@qq.com>
Date: Tue, 20 Jan 2026 10:01:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=BA=BA?=
 =?UTF-8?q?=E5=B7=A5=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enum/index.js                             |   4 +
 src/router/index.js                           |   8 +
 .../device/register/components/Head/index.vue | 314 ++++++++++++++++++
 3 files changed, 326 insertions(+)
 create mode 100644 src/views/device/register/components/Head/index.vue

diff --git a/src/enum/index.js b/src/enum/index.js
index 14b25f1..cbfc14a 100644
--- a/src/enum/index.js
+++ b/src/enum/index.js
@@ -39,6 +39,10 @@ export const controlModuleList = [
     {
         label: "灵巧手",
         value: "hand"
+    },
+    {
+        label: "人工头",
+        value: "head"
     }
 ]
 
diff --git a/src/router/index.js b/src/router/index.js
index 184bd81..d820c03 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -77,6 +77,14 @@ export const constantRoutes = [
         name: "摄像头示教",
         meta: { title: "摄像头详情" },
         hidden: true,
+      },
+       {
+        path: "head/:id",
+        component: () =>
+          import("@/views/device/register/components/Head/index.vue"),
+        name: "人工头示教",
+        meta: { title: "人工头详情" },
+        hidden: true,
       },
       {
         path: "speaker/:id",
diff --git a/src/views/device/register/components/Head/index.vue b/src/views/device/register/components/Head/index.vue
new file mode 100644
index 0000000..3142033
--- /dev/null
+++ b/src/views/device/register/components/Head/index.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="head-control">
+    <h2 class="title">人工头舵机控制</h2>
+    <div class="main-content">
+      <!-- 左侧：10个Yaw预设输入框 -->
+      <div class="preset-panel left-panel">
+        <h3>Yaw 预设位（左右转头）</h3>
+        <div v-for="(preset, index) in leftPresets" :key="index" class="preset-item">
+          <span class="label">位 {{ index + 1 }}</span>
+          <el-input-number
+            v-model="preset.value"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            :precision="2"
+            size="small"
+            controls-position="right"
+            @change="onPresetChange"
+          />
+        </div>
+        <el-button type="primary" size="small" @click="applyYawFromPresets">应用当前 Yaw</el-button>
+      </div>
+
+      <!-- 中央图片 + 20个控制点 -->
+      <div class="image-container">
+        <img
+          src="https://cdn.head-acoustics.com/_processed_/3/5/csm_HMS_V_frontal_seitlich_67c86d4fad.jpg"
+          alt="人工头"
+          class="head-image"
+        />
+        <!-- 20 个控制点 -->
+        <div
+          v-for="(point, index) in points"
+          :key="index"
+          class="control-point"
+          :style="{ left: point.x + '%', top: point.y + '%' }"
+          :class="{ active: point.active }"
+          @click="applyPreset(index)"
+          :title="`点 ${index + 1}: Yaw=${point.yaw.toFixed(2)}, Pitch=${point.pitch.toFixed(2)}`"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+
+      <!-- 右侧：10个Pitch预设输入框 -->
+      <div class="preset-panel right-panel">
+        <h3>Pitch 预设位（上下点头）</h3>
+        <div v-for="(preset, index) in rightPresets" :key="index" class="preset-item">
+          <span class="label">位 {{ index + 1 }}</span>
+          <el-input-number
+            v-model="preset.value"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            :precision="2"
+            size="small"
+            controls-position="right"
+            @change="onPresetChange"
+          />
+        </div>
+        <el-button type="primary" size="small" @click="applyPitchFromPresets">应用当前 Pitch</el-button>
+      </div>
+    </div>
+
+    <!-- 当前值显示与下发 -->
+    <div class="current-display">
+      <div class="current-item">
+        <span>当前 Yaw：</span>
+        <span class="value">{{ servo1.toFixed(2) }}</span>
+      </div>
+      <div class="current-item">
+        <span>当前 Pitch：</span>
+        <span class="value">{{ servo2.toFixed(2) }}</span>
+      </div>
+      <el-button type="primary" @click="sendServoValues">立即下发舵机值</el-button>
+      <el-button @click="resetToCenter">复位到中心 (0.50, 0.50)</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+// import { setServo } from '@/api/device/head'; // 假设接口
+
+const terminalId = ref('25449ff3fcc7b27da5f69462c5efcec2');
+const deviceId = ref('head1');
+
+const servo1 = ref(0.5); // 当前 Yaw
+const servo2 = ref(0.5); // 当前 Pitch
+
+// 左侧10个Yaw预设（对应左侧10个点）
+const leftPresets = ref([
+  { value: 0.10 }, { value: 0.15 }, { value: 0.08 }, { value: 0.12 }, { value: 0.18 },
+  { value: 0.05 }, { value: 0.10 }, { value: 0.15 }, { value: 0.08 }, { value: 0.12 }
+]);
+
+// 右侧10个Pitch预设（对应右侧10个点，但Pitch值可独立调整）
+const rightPresets = ref([
+  { value: 0.20 }, { value: 0.30 }, { value: 0.40 }, { value: 0.50 }, { value: 0.60 },
+  { value: 0.70 }, { value: 0.80 }, { value: 0.90 }, { value: 0.95 }, { value: 1.00 }
+]);
+
+// 当预设值改变时，自动同步到对应的点（可选）
+const onPresetChange = () => {
+  // 可选：同步到 points 数组的 yaw/pitch
+  leftPresets.value.forEach((p, i) => {
+    points.value[i].yaw = p.value;
+  });
+  rightPresets.value.forEach((p, i) => {
+    points.value[i + 10].pitch = p.value;
+  });
+};
+
+// 点击图片上的点 → 应用对应预设，并同步到输入框
+const applyPreset = (index) => {
+  points.value.forEach(p => p.active = false);
+  points.value[index].active = true;
+
+  const yaw = points.value[index].yaw;
+  const pitch = points.value[index].pitch;
+
+  servo1.value = yaw;
+  servo2.value = pitch;
+
+  // 同步到左侧/右侧输入框（高亮当前对应的预设）
+  if (index < 10) {
+    leftPresets.value.forEach((p, i) => p.value = i === index ? yaw : p.value);
+  } else {
+    rightPresets.value.forEach((p, i) => p.value = i === (index - 10) ? pitch : p.value);
+  }
+
+  sendServoValues();
+};
+
+// 从左侧预设应用当前选中的Yaw（假设用户先在输入框选中一个，这里用最后一个修改的近似，或添加选中逻辑）
+let lastLeftIndex = null;
+let lastRightIndex = null;
+
+// 简化：提供按钮直接应用当前所有输入框的平均或手动选择。这里提供“应用当前Yaw”按钮，使用第一个非默认的值或手动。
+// 为简化，这里按钮应用“第一个输入框的值”作为Yaw，你可以改为添加选中高亮。
+const applyYawFromPresets = () => {
+  servo1.value = leftPresets.value[0].value; // 示例：使用第一个，你可改为选中机制
+  sendServoValues();
+};
+
+const applyPitchFromPresets = () => {
+  servo2.value = rightPresets.value[0].value; // 示例：使用第一个
+  sendServoValues();
+};
+
+const sendServoValues = async () => {
+  try {
+    // await setServo({
+    //   terminalId: terminalId.value,
+    //   deviceId: deviceId.value,
+    //   servo1: servo1.value,
+    //   servo2: servo2.value,
+    // });
+  } catch (error) {
+    console.error('舵机下发失败:', error);
+  }
+};
+
+const resetToCenter = () => {
+  servo1.value = 0.5;
+  servo2.value = 0.5;
+  points.value.forEach(p => p.active = false);
+  sendServoValues();
+};
+
+// 20个点坐标（已调整适应新图片）
+const points = ref([
+  // 左侧10点
+  { x: 18, y: 20, yaw: 0.10, pitch: 0.20, active: false },
+  { x: 22, y: 30, yaw: 0.15, pitch: 0.30, active: false },
+  { x: 15, y: 40, yaw: 0.08, pitch: 0.40, active: false },
+  { x: 20, y: 50, yaw: 0.12, pitch: 0.50, active: false },
+  { x: 25, y: 60, yaw: 0.18, pitch: 0.60, active: false },
+  { x: 12, y: 70, yaw: 0.05, pitch: 0.70, active: false },
+  { x: 18, y: 80, yaw: 0.10, pitch: 0.80, active: false },
+  { x: 22, y: 90, yaw: 0.15, pitch: 0.90, active: false },
+  { x: 15, y: 95, yaw: 0.08, pitch: 0.95, active: false },
+  { x: 20, y: 98, yaw: 0.12, pitch: 1.00, active: false },
+
+  // 右侧10点（Yaw偏大）
+  { x: 82, y: 20, yaw: 0.90, pitch: 0.20, active: false },
+  { x: 78, y: 30, yaw: 0.85, pitch: 0.30, active: false },
+  { x: 85, y: 40, yaw: 0.92, pitch: 0.40, active: false },
+  { x: 80, y: 50, yaw: 0.88, pitch: 0.50, active: false },
+  { x: 75, y: 60, yaw: 0.82, pitch: 0.60, active: false },
+  { x: 88, y: 70, yaw: 0.95, pitch: 0.70, active: false },
+  { x: 82, y: 80, yaw: 0.90, pitch: 0.80, active: false },
+  { x: 78, y: 90, yaw: 0.85, pitch: 0.90, active: false },
+  { x: 85, y: 95, yaw: 0.92, pitch: 0.95, active: false },
+  { x: 80, y: 98, yaw: 0.88, pitch: 1.00, active: false },
+]);
+</script>
+
+<style scoped>
+.head-control {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px;
+  height: calc(100vh - 125px);
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+}
+
+.preset-panel {
+  width: 220px;
+  background: #f5f7fa;
+  padding: 20px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.preset-panel h3 {
+  margin: 0 0 10px 0;
+  text-align: center;
+  font-size: 16px;
+}
+
+.preset-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.label {
+  width: 50px;
+  font-size: 14px;
+}
+
+.image-container {
+  position: relative;
+  max-width: 600px;
+}
+
+.head-image {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.control-point {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background: rgba(64, 158, 255, 0.8);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 14px;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  transition: all 0.2s;
+  border: 3px solid #fff;
+}
+
+.control-point:hover {
+  background: #409eff;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.control-point.active {
+  background: #f56c6c;
+  transform: translate(-50%, -50%) scale(1.4);
+}
+
+.current-display {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  margin-top: 30px;
+  flex-wrap: wrap;
+}
+
+.current-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+}
+
+.value {
+  font-weight: bold;
+  color: #409eff;
+  min-width: 60px;
+}
+</style>
\ No newline at end of file