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

<script setup>
import { reactive, toRefs, onMounted, onUnmounted, watch, computed } from "vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { deviceTeach, deviceUpdateProfile } from "@/api/device/register.js";
import { formatNumber } from "@/views/device/register/components/index.js";
import { convertNumbersToStringAndRemoveNulls } from "@/utils/fn.js";

const data = reactive({
  form: {
    workModule: 1,
    posStep: 1,
    postureStep: 1,
    jointStep: 1,
    joint1: 0.000012,
    joint2: 0.000012,
    joint3: 0.000012,
    joint4: 0.000012,
    joint5: 0.000012,
    joint6: 0.000012,
    x: 11,
    y: 11,
    z: 11,
    rx: 11,
    ry: 11,
    rz: 11,
    arm: 1,
    coordinate: 1,
  },
  speed: 20,
  zeroPos: {
    x: 0,
    y: 0,
    z: 0,
    rx: 0,
    ry: 0,
    rz: 0,
  },
  initPos: {
    x: 1,
    y: 1,
    z: 1,
    rx: 1,
    ry: 1,
    rz: 1,
  },
  armList: [
    { label: '目标1', value: 1 },
    { label: '目标2', value: 2 },
    { label: '目标3', value: 3 },
  ],
  time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});

const { form, time, zeroPos, initPos, armList } = toRefs(data);

const route = useRoute();
let timer = null;

onUnmounted(() => {
  clearInterval(timer);
});

const getDeviceInfo = () => {
  deviceTeach(devId.value).then((res) => {
    let dataRes = formatNumber(res.data);
    Object.assign(form.value, dataRes);
    initPos.value.x = dataRes.x;
    initPos.value.y = dataRes.y;
    initPos.value.z = dataRes.z;
    initPos.value.rx = dataRes.rx;
    initPos.value.ry = dataRes.ry;
    initPos.value.rz = dataRes.rz;
  });
};

onMounted(() => {
  getDeviceInfo();
  const posControls = document.querySelectorAll(".pos-btn");
  posControls.forEach((item) => {
    item.addEventListener('click', (e) => {
      const target = e.currentTarget.dataset.target;
      const [pos, direction] = target.split("_");
      const step = (pos === 'x' || pos === 'y' || pos === 'z') ? form.value.posStep : form.value.postureStep;
      const delta = direction === 'plus' ? step : -step;
      form.value[pos] += delta * (data.speed / 100);
    });
  });
});

watch(() => JSON.parse(JSON.stringify(form.value)), (newData) => {
  const dataToSend = convertNumbersToStringAndRemoveNulls(newData);
  deviceUpdateProfile({ idDeDeviceRegistration: devId.value, ...dataToSend }).then((res) => {
    console.log(res);
  });
});

const devId = computed(() => {
  return route.path.split("/")[2];
});

const handleResets = (type) => {
  if (type === "zero") {
    Object.assign(form.value, zeroPos.value);
    return;
  }
  if (type === "init") {
    Object.assign(form.value, initPos.value);
  }
};
</script>

<template>
  <div class="mechanical-arm">
    <div class="top card">
      <div class="controls flex align-center" style="justify-content: flex-start;">
        <div class="control-label">目标</div>
        <el-select v-model="form.arm" placeholder="选择目标" style="width: 100px; margin-right: 20px;">
          <el-option v-for="item in armList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button @click="handleResets('zero')" style="margin-right: 10px;">零位姿态</el-button>
        <el-button @click="handleResets('init')">初始位置</el-button>
      </div>
      <div class="pose-info flex align-center">
        <div class="pose-item">X: {{ form.x.toFixed(6) }} m</div>
        <div class="pose-item">Y: {{ form.y.toFixed(6) }} m</div>
        <div class="pose-item">Z: {{ form.z.toFixed(6) }} m</div>
        <div class="pose-item">RX: {{ form.rx.toFixed(6) }} deg</div>
        <div class="pose-item">RY: {{ form.ry.toFixed(6) }} deg</div>
        <div class="pose-item">RZ: {{ form.rz.toFixed(6) }} deg</div>
      </div>
    </div>
    <div class="bottom flex">
      <div class="left card" style="flex: 1;">
        <div class="title">姿态与位置控制</div>
        <div class="control-buttons">
          <div class="axis-controls flex">
            <div class="axis-group">
              <span>X: {{ form.x.toFixed(6) }} m</span>
              <button class="pos-btn" data-target="x_minus">-</button>
              <button class="pos-btn" data-target="x_plus">+</button>
            </div>
            <div class="axis-group">
              <span>Y: {{ form.y.toFixed(6) }} m</span>
              <button class="pos-btn" data-target="y_minus">-</button>
              <button class="pos-btn" data-target="y_plus">+</button>
            </div>
            <div class="axis-group">
              <span>Z: {{ form.z.toFixed(6) }} m</span>
              <button class="pos-btn" data-target="z_minus">-</button>
              <button class="pos-btn" data-target="z_plus">+</button>
            </div>
            <div class="axis-group">
              <span>RX: {{ form.rx.toFixed(6) }} deg</span>
              <button class="pos-btn rotation" data-target="rx_minus">
                <svg t="1747126605366" class="turn-up" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
              <button class="pos-btn rotation" data-target="rx_plus">
                <svg t="1747126605366" class="turn-bottom" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
            </div>
            <div class="axis-group">
              <span>RY: {{ form.ry.toFixed(6) }} deg</span>
              <button class="pos-btn rotation" data-target="ry_minus">
                <svg t="1747126605366" class="turn-left" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
              <button class="pos-btn rotation" data-target="ry_plus">
                <svg t="1747126605366" class="turn-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
            </div>
            <div class="axis-group">
              <span>RZ: {{ form.rz.toFixed(6) }} deg</span>
              <button class="pos-btn rotation" data-target="rz_minus">
                <svg t="1747126605366" class="turn-lb" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
              <button class="pos-btn rotation" data-target="rz_plus">
                <svg t="1747126605366" class="turn-rb" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="20" height="20">
                  <path d="M311.432533 448.170667H163.84L510.293333 3.413333 856.746667 448.170667h-147.592534L760.832 1006.933333H259.754667z" fill="#4076ff" p-id="1462"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="coordinate-system">
          <svg width="400" height="400" viewBox="0 0 400 400" class="coordinate-svg">
            <!-- X axis (positive) -->
            <line x1="200" y1="200" x2="350" y2="200" stroke="#f00" stroke-width="4" />
            <text x="360" y="205" fill="#f00">X</text>
            <!-- X axis (negative) -->
            <line x1="200" y1="200" x2="50" y2="200" stroke="#f00" stroke-width="4" />
            <text x="40" y="205" fill="#f00">-X</text>
            <!-- Y axis (positive) -->
            <line x1="200" y1="200" x2="200" y2="50" stroke="#0f0" stroke-width="4" />
            <text x="195" y="40" fill="#0f0">Y</text>
            <!-- Y axis (negative) -->
            <line x1="200" y1="200" x2="200" y2="350" stroke="#0f0" stroke-width="4" />
            <text x="195" y="360" fill="#0f0">-Y</text>
            <!-- Z axis (positive) -->
            <line x1="200" y1="200" x2="300" y2="100" stroke="#00f" stroke-width="4" />
            <text x="305" y="95" fill="#00f">Z</text>
            <!-- Z axis (negative) -->
            <line x1="200" y1="200" x2="100" y2="300" stroke="#00f" stroke-width="4" />
            <text x="95" y="305" fill="#00f">-Z</text>
          </svg>
        </div>
      </div>
      <div class="right card" style="flex: 1;">
        <div class="title">关节控制 (deg)</div>
        <div class="input-list">
          <div class="input-item">
            <span>关节1</span>
            <el-input-number v-model="form.joint1" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节2</span>
            <el-input-number v-model="form.joint2" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节3</span>
            <el-input-number v-model="form.joint3" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节4</span>
            <el-input-number v-model="form.joint4" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节5</span>
            <el-input-number v-model="form.joint5" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节6</span>
            <el-input-number v-model="form.joint6" :step="form.jointStep" :precision="6" />
          </div>
          <div class="input-item">
            <span>关节步进</span>
            <el-input-number v-model="form.jointStep" :step="0.1" :precision="1" />
          </div>
        </div>
      </div>
    </div>
    <div class="footer card flex align-center between">
      <div class="time">{{ time }}</div>
      <div class="speed flex align-center">
        <span>速度</span>
        <el-slider v-model="data.speed" :min="0" :max="100" style="width: 200px; margin: 0 10px;" />
        <span>{{ data.speed }}%</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mechanical-arm {
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;

  .card {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .controls {
    gap: 10px;
    padding: 10px;
  }

  .top {
    .pose-info {
      justify-content: space-around;
      padding: 10px 0;

      .pose-item {
        font-size: 16px;
        user-select: none;
      }
    }
  }

  .bottom {
    flex: 1;
    gap: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      user-select: none;
    }

    .left {
      display: flex;
      flex-direction: column;

      .control-buttons {
        margin-bottom: 20px;

        .axis-controls {
          justify-content: space-around;
          flex-wrap: wrap;
          gap: 10px;

          .axis-group {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 150px;

            span {
              width: 80px;
              text-align: center;
              user-select: none;
            }

            button {
              width: 30px;
              height: 30px;
              background: #4076ff;
              color: white;
              border: none;
              cursor: pointer;
              font-size: 16px;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .rotation svg {
              transform-origin: center;
            }

            .turn-up {
              transform: rotate(0deg);
            }

            .turn-bottom {
              transform: rotate(180deg);
            }

            .turn-left {
              transform: rotate(-90deg);
            }

            .turn-right {
              transform: rotate(90deg);
            }

            .turn-lb {
              transform: rotate(-135deg);
            }

            .turn-rb {
              transform: rotate(135deg);
            }
          }
        }
      }

      .coordinate-system {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .coordinate-svg {
          background: #f5f7fa;
          border-radius: 4px;
        }
      }
    }

    .right {
      .input-list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .input-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            width: 80px;
            user-select: none;
          }

          .el-input-number {
            width: calc(100% - 90px);
          }
        }
      }
    }
  }

  .footer {
    height: 50px;

    .time {
      font-size: 14px;
    }

    .speed {
      gap: 10px;

      span {
        user-select: none;
      }
    }
  }
}
</style>