CMVR-IOT-UI/src/views/device/register/components/DexHand/index.vue

<!-- index.vue -->
<template>
  <div class="container">
    <div class="left-panel">
      <div class="hand-container">
        <!-- 确保这里使用的是 index.vue 中响应式的 deviceId ref -->
        <LeftTopHand :initialDeviceId="deviceId" :initialTerminalId="terminalId" @update:topSeriesData="handleUpdateTopSeriesData" />
      </div>
      <div class="hand-container">
        <!-- 确保这里使用的是 index.vue 中响应式的 terminalId ref -->
        <LeftBottomHand :initialDeviceId="deviceId" :initialTerminalId="terminalId" @update:bottomSeriesData="handleUpdateBottomSeriesData" />
      </div>
    </div>
    <div class="right-panel">
      <RightTopCharts :top-series-data="topSeriesData" style="height: 50%;" />
      <RightBottomCharts :max-data="maxData" :avg-data="avgData" style="height: 50%;" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'; // 引入 watch
// 假设你的 router 实例是这样获取的
import { useRoute } from 'vue-router'; // 确保你已经安装并配置了 vue-router
import RightTopCharts from './RightTopCharts.vue';
import LeftTopHand from './LeftTopHand.vue';
import LeftBottomHand from './LeftBottomHand.vue';
import RightBottomCharts from './RightBottomCharts.vue';
import { getRegister } from "@/api/device/register";

// 1. 定义 props
const props = defineProps({
  initialDeviceId: {
    type: String,
    default: null,
  },
  initialTerminalId: {
    type: String,
    default: null,
  },
});

// 响应式数据
const topSeriesData = ref([0, 0, 0, 0, 0, 0]);
const bottomSeriesData = ref([0, 0, 0, 0, 0, 0]);
const maxData = ref({
  thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
  indexFinger: { end: 0, tip: 0, middle: 0 },
  middleFinger: { end: 0, tip: 0, middle: 0 },
  ringFinger: { end: 0, tip: 0, middle: 0 },
  littleFinger: { end: 0, tip: 0, middle: 0 },
  palm: { touch: 0 }
});
const avgData = ref({
  thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
  indexFinger: { end: 0, tip: 0, middle: 0 },
  middleFinger: { end: 0, tip: 0, middle: 0 },
  ringFinger: { end: 0, tip: 0, middle: 0 },
  littleFinger: { end: 0, tip: 0, middle: 0 },
  palm: { touch: 0 }
});

// 声明组件内部使用的响应式变量
const deviceId = ref("");
const terminalId = ref("");

const handleUpdateTopSeriesData = (newData) => {
  topSeriesData.value = newData;
};

const handleUpdateBottomSeriesData = ({ maxData: newMaxData, avgData: newAvgData }) => {
  maxData.value = newMaxData;
  avgData.value = newAvgData;
};

// 获取路由实例
const route = useRoute();
// 统一处理获取 register 数据的方法
const fetchRegisterData = (currentDeviceId) => {
  if (currentDeviceId) {
    getRegister(currentDeviceId).then(res => {
      deviceId.value = res.data.deviceCode; // 再次更新，确保与 API 返回一致
      terminalId.value = res.data.idDeDeviceTerminalConfig;
    }).catch(error => {
      console.error("Error fetching register:", error);
      // 可以根据需要重置 deviceId 和 terminalId
      deviceId.value = "";
      terminalId.value = "";
    });
  } else {
    // 如果 deviceId 为空，可以考虑重置 terminalId
    terminalId.value = "";
  }
};

// 2. 使用 watch 侦听 props 和路由的变化
// 当 initialDeviceId prop 变化时，更新 deviceId ref
watch(() => props.initialDeviceId, (newVal) => {
  if (newVal) {
    deviceId.value = newVal;
    // 当 props.initialDeviceId 确定后，再调用 getRegister
    fetchRegisterData(deviceId.value);
  }
}, { immediate: true }); // immediate: true 会在组件挂载时立即执行一次 watch

// 如果 props.initialDeviceId 为空，则尝试从路由获取
// 注意：这里假设 route.path.split("/")[3] 是cameraId
// 如果你的路由结构不同，请调整这里的逻辑
watch(() => route.path, (newPath) => {
  const routeDeviceId = newPath.split("/")[3];
  if (!deviceId.value && routeDeviceId) { // 只有当 deviceId 尚未从 props 或其他地方设置时才从路由获取
    deviceId.value = routeDeviceId;
    fetchRegisterData(deviceId.value);
  }
}, { immediate: true }); // immediate: true 确保在组件挂载时也检查路由


// 如果需要 initialTerminalId prop 也影响 terminalId ref，可以添加一个 watch
watch(() => props.initialTerminalId, (newVal) => {
  if (newVal) {
    terminalId.value = newVal;
  }
}, { immediate: true });
</script>

<style scoped>
.container {
  display: flex;
  flex: 1; /* 占据父容器所有可用空间 */
  width: 100%;
  height: 100%; /* 占满父容器高度 */
  min-height: 0; /* 防止 flex 子项最小高度问题 */
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden; /* 防止内容溢出 */
  box-sizing: border-box; /* 包含 padding 和 border */
  padding: 20px; /* 与父容器一致，避免双重 padding */
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  height: 100%; /* 占满 container 高度 */
  padding: 0; /* 移除子面板内边距，交给 container 处理 */
  box-sizing: border-box;
  overflow: hidden;
}

.hand-container {
  position: relative;
  height: 50%; /* 每个 hand-container 占左面板的 50% 高度 */
  width: 100%;
  overflow: hidden;
}
</style>