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

<template>


  <headerBar
    title="拍摄物体镜头矫正"
    :menu="[
        {
          type:'setting'
        },
        {
          type:'remoteControl'
        },
    ]"
  />
  <div class="mb-4">

    <template v-if="!show">
      <div>{{useUserInfoStore.userInfo.account_name}}</div>
      <div>{{useUserInfoStore.userInfo.phone}}</div>
    </template>
    <template v-else>
      <img :src="src" width="500px" height="500px"/>
      <img :src="preview" width="500px" height="500px"/>
  </template>

<!--
    <el-button @click="showVideo">实时预览</el-button>
    <el-button @click="hideVideo">关闭预览</el-button>
    <el-button @click="takePictures">拍照</el-button>
    <el-button @click="socketConnect">socket 连接</el-button>
    <el-button @click="connect_mcu">发送设备连接检测请求</el-button>
    <el-button @click="connect_bluetooth">发送遥控器请求</el-button>
    <el-button @click="socketDisconnect">socket 断开</el-button>
    <el-button @click="loginError">登录失败</el-button>
    <el-button type="primary" @click="loginIn">登录成功</el-button>
    <el-button type="success" @click="showLoginDialog">登录</el-button>
    <el-button type="info" @click="checkVisible = true">软件检查</el-button>


-->

    <el-button type="info"  @click="openSeeting">打开设置</el-button>
    <el-button type="info"  @click="openTplSeeting">打开主图和详情设置</el-button>



    <el-button type="info"  @click="connect_mcu">链接MCU</el-button>
    <el-button type="info"  @click="connect_bluetooth">连接蓝牙</el-button>
    <el-button @click="socketDisconnect">socket 断开</el-button>
    <router-link
        class="mar-left-10"
        :to="{
          name:'PhotographyCheck'
      }"
    >
      <el-button type="warning">拍摄物体</el-button>
    </router-link>
    <router-link
        class="mar-left-10"
      :to="{
          name:'PhotographyShot'
      }"
  >
    <el-button type="warning">拍摄商品</el-button>
  </router-link>

<!--    <hardware-check v-model="checkVisible" @confirm="onCheckComplete"></hardware-check>-->
    <Login v-model:dialogVisible="dialogVisible" @login-success="handleLoginSuccess"/>
    <el-button
        class="mar-left-10"
        type="primary"  @click="loginIn">登录成功</el-button>
  </div>


  <div class="mb-4">
      <el-input v-model="paramsKey" placeholder="参数名称"></el-input>
      <el-input v-model="paramsValue" placeholder="参数值"></el-input>
      <el-button @click="setParams">保存</el-button>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import useUserInfo from "@/stores/modules/user";
import { login, getUserInfo } from '@/apis/user';
import Login from '@/components/login/index.vue';
import HardwareCheck from '@/components/check/index.vue'
import headerBar from '@/components/header-bar/index.vue'

import { getFilePath,getRouterUrl } from '@/utils/appfun'
import {useRouter} from "vue-router";
const Router = useRouter()



const useUserInfoStore = useUserInfo();
const dialogVisible = ref(false);
const checkVisible = ref(false)
import client from "@/stores/modules/client";
import  icpList from '@/utils/ipc'
import socket from "@/stores/modules/socket";
const clientStore = client();

function showLoginDialog() {
  dialogVisible.value = true;
}

function handleLoginSuccess() {
  // 处理登录成功后的逻辑
  console.log('登录成功');
}
function onCheckComplete(){

}

async function loginIn() {
  console.log('aaa')
  const res = await login({
    "site":1,
    "username":"13777879245",
    "password":"753159",
    "type":1,
    "device":"aigc-photo"
  })

  const userRes = await getUserInfo({
    "site":1,
    "token":res.data.token
  })

  useUserInfoStore.updateUserInfo(userRes.data)
}

async function loginError() {
  const res = await login({
    "site":1,
    "username":"18679381902",
    "password":"123456",
    "device":"aigc-photo"
  })
  console.log(res)
}

const show = ref(false)
const imgKey = ref(0)
const src = ref('http://localhost:5513/liveview.jpg')
let interval:any = null
function showVideo(){
  if(clientStore.isClient){


    clientStore.ipc.removeAllListeners(icpList.camera.PreviewShow);

    clientStore.ipc.send(icpList.camera.PreviewShow);
    clientStore.ipc.on(icpList.camera.PreviewShow, async (event, result) => {

      show.value = true;
      src.value = `http://localhost:5513/liveview.jpg?key=${imgKey.value}`
      interval = setInterval(()=>{
        imgKey.value++;
        src.value = `http://localhost:5513/liveview.jpg?key=${imgKey.value}`
      },100)

    })
  }

}

const preview = ref('http://localhost:5513/preview.jpg')
const previewKey = ref(0)

function hideVideo(){
  if(clientStore.isClient){

    clientStore.ipc.removeAllListeners(icpList.camera.PreviewHide);

    clientStore.ipc.send(icpList.camera.PreviewHide);
    clientStore.ipc.on(icpList.camera.PreviewHide, async (event, result) => {
      show.value = false;
      if(interval) clearInterval(interval)
    })
  }

}

const paramsKey = ref('')
const paramsValue = ref('')


function setParams(){
  if(clientStore.isClient){

    clientStore.ipc.removeAllListeners(icpList.camera.setParams);

    clientStore.ipc.send(icpList.camera.setParams,{
      key:paramsKey.value,
      value:paramsValue.value
    });
  }

}


function takePictures(){
  if(clientStore.isClient){

    clientStore.ipc.removeAllListeners(icpList.camera.takePictures);

    clientStore.ipc.send(icpList.camera.takePictures);

    clientStore.ipc.on(icpList.camera.takePictures, async (event, result) => {


      setTimeout(()=>{
        previewKey.value++;
        preview.value = `http://localhost:5513/preview.jpg?key=${previewKey.value}`
      },1000)
    })
  }
}

// 初始化 WebSocket 状态管理
const socketStore = socket()

function socketConnect(){

  if(clientStore.isClient){
    socketStore.connectSocket()

    clientStore.ipc.on(icpList.socket.message, async (event, result) => {
      console.log(result)
    })
  }

}



async function connect_mcu(){

  if(clientStore.isClient){

    await socketStore.connectSocket();
     socketStore.sendMessage({
      type: 'connect_mcu',
       data:"connect_mcu"
    })
  }

}

async function connect_bluetooth(){

  await socketStore.connectSocket();
     socketStore.sendMessage({type: 'connect_bluetooth',})

      clientStore.ipc.on(icpList.socket.message+'_blue_tooth', (event, result) => {
        console.log('4')
        console.log(result)
      });

}



function socketDisconnect(){

  if(clientStore.isClient){

    socketStore.disconnectSocket()
  }
}



function openSeeting(){
  console.log('aaaaa')
  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '设置',
    width: 900,
    height: 630,
    frame: true,
    id:"seeting",
    url:"http://localhost:3000/#/setting"
  }
  clientStore.ipc.send(icpList.utils.openMain,params);
}
function openTplSeeting(){

  const { href } = Router.resolve({
    name: 'PhotographyDetail',
    query:{
      goods_art_nos:['ARN1411512'],
    }
  })
  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '主图和详情设置',
    width: 900,
    height: 650,
    frame: true,
    id:"photographyDetail",
    url:getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain,params);
}



</script>

<style scoped>

</style>