CameraMachine/frontend/src/views/Photography/check.vue

<template>
  <div class="check-wrap flex">

    <div class="check-page flex-col">
      <div class="main-container flex-col">
        <div class="content-wrapper flex-row justify-between">
          <div class="left-panel flex-col justify-between">
            <div class="tips-container flex-row" v-if="show">
              <img class="tips-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/tips-icon.png" />
              <span class="tips-tex">请在圆盘上摆上鞋子（注意左右脚），要求鞋外侧朝向拍照机，鞋子中轴线和红外线对齐</span>
              <img class="close-icon cu-p" referrerpolicy="no-referrer" src="@/assets/images/Photography/close-icon.png"  @click="show = false"/>
            </div>
            <div class="camera-preview  flex col center ">
              <span v-if="step === 1" class="fs-14">
                 <img v-if="previewKey" class="camera-img" :src="preview+'?key='+previewKey" />
              </span>
              <template v-if="step === 2" >
                <img class="camera-img" :src="imageUrl+'?key='+imageUrlkey" />
                <span  class="camera-description">这是一张用于检查镜头是否合适的测试图</span>
              </template>
            </div>
          </div>
          <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
        </div>
        <div v-if="step === 1" class="action-button flex cente">
          <div @click="takePictures" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
          </div>
        </div>

        <div v-else class="action-button flex center">
          <div @click="checkConfirm" class="check-button  button--white flex-col">
            <span class="button-text cu-p">重新拍照检查</span>
          </div>
          <router-link class="mar-left-20 " :to="{
            name: 'PhotographyShot'
          }">
            <div class="check-button   button--primary1 flex-col">
              <span class="button-text cu-p">确认无误，下一步</span>
            </div>
          </router-link>

        </div>
      </div>
    </div>

  </div>

  <hardware-check
   @confirm="checkConfirm"
  />
</template>
<script setup lang="ts">
import  { watchEffect } from  'vue'
import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
import useUserInfo from "@/stores/modules/user";
const clientStore = client();

const show = ref(true)

const useUserInfoStore = useUserInfo()
import HardwareCheck from '@/components/check/index.vue'
function onCheckComplete(){

}

import { ref } from 'vue'
import socket from "../../stores/modules/socket";
import { digiCamControlWEB } from  '@/utils/appconfig'
const imageUrl = ref(digiCamControlWEB+'preview.jpg')
const imageUrlkey = ref(0)
const previewKey = ref(0)
const preview = ref(digiCamControlWEB+'liveview.jpg')

const step = ref(1)
function checkConfirm(){
  step.value =1
  showVideo()
}






let interval:any = null
function showVideo(){

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

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

      setTimeout(()=>{
        interval = setInterval(()=>{
          previewKey.value++;
        },200)
      },2000)

    })

}

function hideVideo(){

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

}


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(()=>{
        hideVideo()
        step.value = 2
        imageUrlkey.value++;
      },5000)
    })
  }
}
</script>
<style scoped lang="scss">
.check-wrap {

  background-color: rgba(234, 236, 237, 1);
  width: 100%;
  min-height: 100vh;
  display: flex;
}
.check-page {
  position: relative;
  width: 1200px;
  height: 768px;
  overflow: hidden;

  .main-container {
    width: 1200px;
    height: 739px;
    margin-bottom: 1px;

    .content-wrapper {
      width: 896px;
      height: 644px;
      margin: 10px 0 0 284px;

      .left-panel {
        width: 633px;
        height: 644px;

        .tips-container {
          background-color: rgba(255, 241, 222, 0.8);
          border-radius: 4px;
          width: 633px;
          height: 40px;
          border: 1px solid rgba(255, 228, 190, 1);
          justify-content: flex-center;

          .tips-icon {
            width: 16px;
            height: 16px;
            margin: 12px 0 0 16px;
          }

          .tips-tex {
            width: 549px;
            height: 22px;
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
            margin: 9px 0 0 7px;
          }

          .close-icon {
            width: 12px;
            height: 12px;
            margin: 14px 16px 0 17px;
          }
        }

        .camera-preview {
          box-shadow: 0px 2px 10px 0px rgba(0, 32, 78, 0.1);
          background-color: rgba(255, 255, 255, 1);
          height: 600px;
          width: 600px;
          margin: 4px 0 0 16px;
          position: relative;

          .camera-description {
            position: absolute;
            bottom: 20px;
            width: 60%;
            padding: 8px 20px;
            background: rgba($color: #ffffff, $alpha: .2);
            border-radius: 20px;
            font-size: 14px;
          }

          .camera-img {
            width: 100%;

          }
        }
      }

      .example-image {
        background-color: rgba(216, 216, 216, 1);
        height: 200px;
        margin-top: 10px;
        width: 200px;

        .example-text {
          width: 56px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(71, 71, 71, 1);
          font-size: 14px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          margin: 90px 0 0 72px;
        }
      }
    }

    .action-button {
      width: 100%;
      text-align: center;
      margin-top: 28px;

      .check-button {
        .button-text {
          width: 180px;
          overflow-wrap: break-word;
          font-size: 16px;
          text-align: center;
          white-space: nowrap;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
}
</style>