CameraMachine/frontend/src/views/RemoteControl/index.vue

<template>

<!--
  <headerBar
    title="遥控模拟器"
  />-->

  <div class="remote-control_main-container">
    <div class="te-c"  style="color: #8C92A7">遥控器模拟器</div>
    <el-row align="middle" class="mar-top-50">
      <el-col :span="3"></el-col>
      <el-col :span="6"><div class="button up" @click="runLeft">左脚</div></el-col>
      <el-col :span="6"><div class="button up" @click="run_take_picture">拍照</div></el-col>
      <el-col :span="6"><div class="button up" @click="runRight">右脚</div></el-col>
      <el-col :span="3"></el-col>
    </el-row>
    <el-row align="middle">
      <el-col :span="9"></el-col>
      <el-col :span="6">
        <el-col :span="6">
          <div class="button up" @click.native="switchLED(1)"  @contextmenu.native="switchLED(0)">LED</div>
        </el-col>
<!--          <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>

<script setup lang="ts">
import { defineEmits } from 'vue'
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 状态管理
const socketStore = socket()

const emit = defineEmits(['onRemoteControl'])
const runLeft = async () => {
  emit('onRemoteControl','left')
}


const runRight = async () => {
  emit('onRemoteControl','right')
}



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">
.remote-control_main-container {
  background: #EAECED;
  height: 358px;
  width: 300px;
  margin:  0 auto;
  margin-top: 10px;
  padding-top: 30px;
  background: url(@/assets/images/Photography/yk.png) 0px 0px no-repeat;
  background-size: 300px 358px;

}
.button {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 60px;
  line-height: 60px;
  color: #474747;
  margin: 0 auto;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);

  background: url(@/assets/images/Photography/hui.png) 0px 0px no-repeat;
  background-size: 60px 60px;
}
.el-row {
  min-height: 100px;
}
.button:hover {
  background: url(@/assets/images/Photography/lan.png) 0px 0px no-repeat;
  background-size: 60px 60px;
  cursor: pointer;
}
</style>