mod:虚拟遥控器

frontend/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
 import { authGuard } from './plugins/authGuard'
 
@@ -68,13 +68,13 @@ const routes: RouteRecordRaw[] = [
         name: "developer",
         component: () => import("@/views/Developer/index.vue"),
         meta: {
-            title: '遥控器'
+            title: '开发者设置'
         }
     },
 ];
 
 const router = createRouter({
-    history: createWebHashHistory(), // 修改: 将 createWebHistory 改为 createWebHashHistory
+    history: createWebHistory(), // 修改: 将 createWebHistory 改为 createWebHashHistory
     routes
 });
 

frontend/src/utils/appfun.ts

@@ -8,6 +8,6 @@ export  function getFilePath (file_path){
 
 //获取路由地址
 export  function getRouterUrl (href){
-    return window.location.origin+window.location.pathname+href
+    return window.location.origin+href
 }
 

frontend/src/views/Photography/shot.vue

@@ -11,7 +11,7 @@
   <div class="photography-page flex-col">
     <div class="main-container">
       <div class="content-wrapper flex-row">
-        <img class="camera-image" referrerpolicy="no-referrer" src="@/assets/images/Photography/camera-icon.png" />
+<!--        <img class="camera-image" referrerpolicy="no-referrer" src="@/assets/images/Photography/camera-icon.png" />-->
         <div class="step-number flex-col"><span class="text_22">1</span></div>
         <div class="step-one flex-col justify-between">
           <div class="step-header flex-row">
@@ -32,11 +32,8 @@
               </div>
               <div class="scan-method flex-row justify-between">
                 <div class="remote-control flex-col">
-                  <div class="scan-button flex-col"></div>
-                  <img class="scan-line" referrerpolicy="no-referrer"
-                    src="@/assets/images/Photography/remote-scan-line.png" />
                 </div>
-                <span class="scan-label">遥控器扫描键</span>
+<!--                <span class="scan-label">遥控器扫描键</span>-->
               </div>
             </div>
             <img class="remote-image" referrerpolicy="no-referrer"
@@ -51,18 +48,16 @@
               <img class="info-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/info-icon.png" />
               <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
             </div>
-            <span class="left-foot-text">遥控器左键：控制左脚鞋启动拍摄</span>
-            <div class="remote-control-container flex-row justify-end">
-              <div class="remote-buttons flex-row">
-                <div class="left-button flex-col"></div>
-                <div class="right-button flex-col"></div>
-              </div>
-              <img class="left-button-image" referrerpolicy="no-referrer"
-                src="@/assets/images/Photography/remote-left-button.png" />
-              <img class="right-button-image" referrerpolicy="no-referrer"
-                src="@/assets/images/Photography/remote-right-button.png" />
+            <div class="wifi mar-top-20">
+              <img  referrerpolicy="no-referrer"
+                   src="@/assets/images/Photography/wifi.png" style="width: 60px" />
+            </div>
+            <div class="remote-control-wrap">
+              <RemoteControl
+                  @onRemoteControl="onRemoteControl"
+              />
             </div>
-            <span class="right-foot-text">遥控器右键：控制右脚鞋启动拍摄</span>
+
           </div>
         </div>
 
@@ -164,6 +159,7 @@ import { getFilePath,getRouterUrl } from '@/utils/appfun'
 import {useRouter} from "vue-router";
 import HardwareCheck from '@/components/check/index.vue'
 import checkInfo from "@/stores/modules/check";
+import RemoteControl from '@/views/RemoteControl/index'
 
 
 const loading = ref(false)
@@ -361,7 +357,7 @@ onMounted(async () => {
     }
   });
 
-  window.addEventListener('storage', handleStorageEvent);
+/*  window.addEventListener('storage', handleStorageEvent);*/
 
 
 
@@ -429,8 +425,20 @@ onMounted(async () => {
 })
 
 
+const onRemoteControl = (type)=>{
+  if(!goods_art_no.value){
+    ElMessage.error('请先扫描货号或者手动输入货号!')
+    return;
+  }
+  let action = '执行左脚程序'
+  if(type  === 'right')  action = '执行右脚程序'
+  runGoods({
+    "action": action,
+    "goods_art_no": goods_art_no.value,
+  })
 
-const handleStorageEvent = (e) => {
+}
+/*const handleStorageEvent = (e) => {
   if(e.key === 'run_mcu' && e.newValue){
     if(!goods_art_no.value){
       ElMessage.error('请先扫描货号或者手动输入货号!')
@@ -446,7 +454,7 @@ const handleStorageEvent = (e) => {
     localStorage.setItem('run_mcu','')
 
   }
-};
+};*/
 const checkInfoStore = checkInfo()
 checkInfoStore.set_blue_tooth_scan_NO('')
 watchEffect(async ()=>{
@@ -467,7 +475,7 @@ onBeforeUnmount(() => {
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_run_mcu');
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_photo_take');
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_photo_take_finish');
-  window.removeEventListener('storage', handleStorageEvent);
+/*  window.removeEventListener('storage', handleStorageEvent);*/
 
 
 })
@@ -608,7 +616,7 @@ function openPhotographyDetail() {
 
           .method-container {
             background-color: rgba(247, 247, 247, 1);
-            height: 469px;
+            height: 484px;
             width: 353px;
 
             .auto-method {
@@ -652,15 +660,15 @@ function openPhotographyDetail() {
             }
 
             .scan-method {
-              width: 263px;
-              height: 246px;
-              margin: 9px 0 0 85px;
+              width: 350px;
+              height: 350px;
+              margin: 10px;
 
               .remote-control {
-                height: 246px;
-                background: url(@/assets/images/Photography/left-button.png) 0px 0px no-repeat;
-                background-size: 98px 246px;
-                width: 97px;
+                width: 350px;
+                height: 350px;
+                background: url(@/assets/images/Photography/left.png) 0px 0px no-repeat;
+                background-size: 300px 300px;
                 position: relative;
 
                 .scan-button {
@@ -779,8 +787,12 @@ function openPhotographyDetail() {
         .shooting-container {
           background-color: rgba(247, 247, 247, 1);
           width: 353px;
-          height: 469px;
+          height: 484px;
           margin: 28px 0 0 2px;
+          .remote-control-wrap {
+            width: 353px;
+            height: 300px;
+          }
 
           .shooting-tips {
             width: 325px;

frontend/src/views/RemoteControl/index.vue

@@ -1,47 +1,27 @@
 <template>
 
-
+<!--
   <headerBar
     title="遥控模拟器"
-  />
+  />-->
 
-  <div class="main-container">
-    <el-row align="middle">
-      <el-col :span="8"></el-col>
-      <el-col :span="8"></el-col>
-<!--      <el-col :span="8"><div class="button up">上</div></el-col>-->
-      <el-col :span="8"></el-col>
-    </el-row>
-    <el-row align="middle">
-      <el-col :span="8"><div class="button up" @click="runLeft">左脚</div></el-col>
-      <el-col :span="8"><div class="button up" @click="run_take_picture">拍照</div></el-col>
-      <el-col :span="8"><div class="button up" @click="runRight">右脚</div></el-col>
-    </el-row>
-    <el-row align="middle">
-      <el-col :span="2"></el-col>
-      <el-col :span="20" class="fs-12">获取商品货号后，点击左右键启动拍摄程序，在拍摄程序结束后，可点击拍照启动单独拍照程序</el-col>
-      <el-col :span="2"></el-col>
-    </el-row>
-    <el-row align="middle">
-      <el-col :span="8"></el-col>
-      <el-col :span="8"></el-col>
-<!--      <el-col :span="8"><div class="button up">下</div></el-col>-->
-      <el-col :span="8"></el-col>
-    </el-row>
+  <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="8"></el-col>
-<!--      <el-col :span="8"><div class="button up">继续</div></el-col>-->
-      <el-col :span="2"></el-col>
-      <el-col :span="8"></el-col>
-<!--      <el-col :span="8"><div class="button up">停止</div></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>
+    <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>
   </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";
@@ -51,13 +31,14 @@ const clientStore = client();
 // 初始化 WebSocket 状态管理
 const socketStore = socket()
 
+const emit = defineEmits(['onRemoteControl'])
 const runLeft = async () => {
-  localStorage.setItem('run_mcu','left')
+  emit('onRemoteControl','left')
 }
 
 
 const runRight = async () => {
-  localStorage.setItem('run_mcu','right')
+  emit('onRemoteControl','right')
 }
 
 
@@ -71,27 +52,36 @@ const run_take_picture = () => {
 </script>
 
 <style scoped lang="scss">
-.main-container {
+.remote-control_main-container {
   background: #EAECED;
-  height: calc(100vh - 30px);
+  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: 68px;
-  height: 68px;
+  width: 60px;
+  height: 60px;
   background: #fff;
-  border-radius: 68px;
-  line-height: 68px;
+  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: #2957FF;
-  color: #fff;
+  background: url(@/assets/images/Photography/lan.png) 0px 0px no-repeat;
+  background-size: 60px 60px;
   cursor: pointer;
 }
 </style>