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

<template>

  <headerBar
      title="拍摄商品"
      showUser
      :menu="menu"
  />

  <hardware-check/>

  <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" />-->
        <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">
            <span class="step-title">第一步：获取商品货号</span>
            <img class="step-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/step1-icon.png" />
            <img class="step-divider" referrerpolicy="no-referrer"
              src="@/assets/images/Photography/step-divider-line.png" />
          </div>
          <div class="step-content flex-row justify-between">
            <div class="method-container flex-col">
              <div class="input-container flex-row">
                <el-input class="input-item" v-model="goods_art_no" placeholder="请输入货号"> </el-input>

              </div>
              <div class="auto-method flex-row justify-between">
                <div class="text-method-tag flex-col"><span class="text_4">自动获取</span></div>
                <span class="method-description">用遥控器扫描商品资料二维码</span>
              </div>
              <div class="scan-method flex-row justify-between">
                <div class="remote-control flex-col">
                </div>
<!--                <span class="scan-label">遥控器扫描键</span>-->
              </div>
            </div>
            <img class="remote-image" referrerpolicy="no-referrer"
              src="@/assets/images/Photography/remote-control.png" />
          </div>
        </div>
        <div class="step-number flex-col"><span class="text_22">2</span></div>
        <div class="step-two flex-col justify-between">
          <span class="step-title">第二步：启动拍摄（根据按遥控器左右键启动）</span>
          <div class="shooting-container flex-col">
            <div class="shooting-tips flex-row justify-between">
              <img class="info-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/info-icon.png" />
              <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
            </div>
            <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>

          </div>
        </div>

      </div>

      <div class="last-photo" v-show="showlastPhoto" v-key="lastPhoto.image_path">
        <div>{{lastPhtotoName[lastPhoto.image_index] || ''}}</div>
        <el-image  :src="getFilePath(lastPhoto.image_path)"  fit="contain" ></el-image>
      </div>
      <div class="history-section flex-col">
          <span class="history-title flex between">
            <div>拍摄记录</div>
            <div class="c-666 fs-12" v-if="goodsList.length">
                    <el-button @click="delAll" class="input-button" type="primary" size="mini">一键删除</el-button>
            </div>
          </span>
          <img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />



          <div class="history-warp">
            <div v-if="!goodsList.length" class="fs-14 c-666 mar-top-50">
              {{ loading ? '数据正在加载中，请稍候...' : '暂无数据，请先进行拍摄'}}
            </div>
              <div v-else class="history-item clearfix"  v-for="item,index in goodsList" style="padding:10px;">
                <div class="flex  between flex-item  c-333">
                  <div class="chaochu flex-item flex left">货号：{{ item.goods_art_no }}</div>
                  <div>
                    <el-button size="small"  type="primary"  @click="reTakePictureNos(item.goods_art_no,item)" plain>重拍</el-button>
                    <el-button size="small" @click="delGoods({goods_art_nos:[item.goods_art_no]})">删除</el-button>
                  </div>
                </div>
                <div class="flex  between flex-item  c-333">
                  <div class="c-999 fs-12">{{ getTime(item.action_time) }}</div>
                </div>
                <div class="mar-top-10 clearfix history-item_image_wrap" style="width: 100%" >
                    <component class="history-item_image"
                         v-loading="!image.image_path && runAction.goods_art_no == item.goods_art_no"
                         v-for="image in item.items"
                               :is="image.image_path ? 'div' : 'p'"

                    >
                      <el-popover
                          popper-class="shot-image-popper"
                          placement="left"
                          :hide-after="0"
                          v-if="image.image_path"
                      >
                        <template #reference>
                          <div class="flex el-image_view">
                            <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
                              <template #error>
                                <div class="image-slot"></div>
                              </template>
                            </el-image>
                            <div class="reset-button" @click="reTakePicture(image)">重拍</div>
                          </div>
                        </template>


                        <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
                          <template #error>
                            <div class="image-slot"></div>
                          </template>
                        </el-image>
                      </el-popover>


                      <el-image :src="getFilePath(image.image_path)"  fit="contain" v-else>
                        <template #error>
                          <div class="image-slot"></div>
                        </template>
                      </el-image>
                    </component>
                </div>
              </div>

          </div>

          <!-- 无数据 -->
<!--           <div  class="empty-state flex-col justify-between">
            <img
              class="empty-icon"
              referrerpolicy="no-referrer"
              src="@/assets/images/Photography/empty-state-icon.png"
            />
            <span class="empty-text">暂无数据</span>
          </div>-->
          <div v-if="goodsList.length" class="next-step button--primary1 flex-col" @click="openPhotographyDetail"><span
              class="next-step-text">拍摄完毕，进入下一步处理</span></div>
        </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import headerBar from '@/components/header-bar/index.vue'
import { ref, reactive, onMounted, onBeforeUnmount,watchEffect, computed} from 'vue'
import icpList from '@/utils/ipc'
import client from "@/stores/modules/client";
import socket from "@/stores/modules/socket";
import { ElMessage ,ElMessageBox } from 'element-plus'
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)
const runLoading = ref(false)
const takePictureLoading = ref(false)


import useUserInfo from "@/stores/modules/user";
const useUserInfoStore = useUserInfo();

const menu = computed(()=>{
  if(useUserInfoStore.userInfo.brand_company_code === '1300'){
    return [
      {
        type:'setting'
      },
      {
        type:'developer'
      }
    ]
  }


  return [
    {
      type:'setting'
    },
  ]


})

const clientStore = client();

const Router = useRouter()
/*const goodsList = ref([
  {
    "goods_art_no": "123456789",
    "items": [
      {
        "record_id":1,
        "image_deal_mode":0,
        "image_path": "C:\\Users\\Administrator\\Pictures\\digiCamControl\\Session1\\DSC_0001.jpg",
      },
      {
        "record_id":2,
        "image_deal_mode":0,
        "image_path": "C:\\Users\\Administrator\\Pictures\\digiCamControl\\Session1\\DSC_0002.jpg",
      },
      {
        "record_id":3,
        "image_deal_mode":0,
        "image_path": "C:\\Users\\Administrator\\Pictures\\digiCamControl\\Session1\\DSC_0003.jpg",
      },
      {
        "record_id":4,
        "image_deal_mode":0,
        "image_path": "C:\\Users\\Administrator\\Pictures\\digiCamControl\\Session1\\DSC_0004.jpg",
      },
      {
        "record_id":5,
        "image_deal_mode":0,
        "image_path": "C:\\Users\\Administrator\\Pictures\\digiCamControl\\Session1\\DSC_0005.jpg",
      }
    ]
  }
])*/
const goodsList = ref([])
const  goods_art_no_tpl = ref('')
const  goods_art_no = ref('')
const runAction = ref({
  "action": "",
  "goods_art_no": ""
})

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

/**
 * 保存货号模板到货号变量中。
 */
function saveGoodsArtNo(){
  if(goods_art_no_tpl.value){
    goods_art_no.value = goods_art_no_tpl.value
    ElMessage.success('商品货号'+goods_art_no.value+'获取成功，请在遥控器上按下左或右脚按键，启动拍摄')
  }
}

/**
 * 获取拍照记录。
 * @param params - 可选参数，用于分页或其他筛选条件。
 */
async function getPhotoRecords(params?:{}) {
  clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
  loading.true = true;
  clientStore.ipc.send(icpList.takePhoto.getPhotoRecords,{
    ...params,
    page:1,
    size:100,
  });
  clientStore.ipc.on(icpList.takePhoto.getPhotoRecords, (event, result) => {

    loading.true = false;
    clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
    if(result.code === 0){

      console.log('======================');
      console.log(runAction.value);
     goodsList.value = result.data.list
      if(isDelGoodsGetList.value){
        isDelGoodsGetList.value = false;
        return;
      }
      getLastPhotoRecord()

    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
  });
}

/**
 * 执行拍照操作。
 * @param data - 包含拍摄所需的数据对象。
 */
async function runGoods(data) {
  if(runLoading.value || takePictureLoading.value){
    ElMessage.error('拍摄程序正在运行，请稍候')
    return
  }

  await socketStore.connectSocket();

  socketStore.sendMessage({
    type: 'run_mcu',
    data,
  })
  ElMessage.success('开始拍摄，请稍后')
  runLoading.value = true;
  runAction.value.action = data.action
  runAction.value.goods_art_no = data.goods_art_no
  goods_art_no.value = ''
  goods_art_no_tpl.value = ''
  reNosObj.value.goods_art_no = null;
  reNosObj.value.action = null;

  clientStore.ipc.on(icpList.socket.message + '_run_mcu', (event, result) => {

    clientStore.ipc.removeAllListeners(icpList.socket.message + '_run_mcu');
    console.log('_run_mcu');
    console.log(result);
    if(result.code !== 0 && result.msg){
      ElMessage.error(result.msg)
   //   runLoading.value = false
      return;
    }
  })


}

/**
 * 格式化时间字符串。
 * @param time - 原始时间字符串。
 * @returns 格式化后的时间字符串，若输入为空则返回 null。
 */
const getTime = function(time){
  if(!time) return null
  return time.replace('T',' ').substr(5,11)
}

/**
 * 删除所有商品货号的历史记录。
 */
async function delAll(){
    let params = goodsList.value.map(item=>item.goods_art_no)
    await ElMessageBox.confirm('确定要删除当下的历史记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    })
    del({goods_art_nos:params})
}

/**
 * 删除指定的商品货号。
 * @param params - 包含需要删除的货号列表的对象。
 */
const delGoods = async function(params){


  await ElMessageBox.confirm('确定要删除货号：'+params.goods_art_nos[0]+'的拍摄数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
  del(params)
}

/**
 * 删除指定的商品货号。
 * @param params - 包含需要删除的货号列表的对象。
 */
const isDelGoodsGetList = ref(false)
const del = async function(params){

  clientStore.ipc.removeAllListeners(icpList.takePhoto.delectGoodsArts);
  clientStore.ipc.send(icpList.takePhoto.delectGoodsArts,params);
  clientStore.ipc.on(icpList.takePhoto.delectGoodsArts, (event, result) => {
    clientStore.ipc.removeAllListeners(icpList.takePhoto.delectGoodsArts);
    if(result.code === 0){
      isDelGoodsGetList.value =true
      ElMessage.info('货号删除成功')
      getPhotoRecords()
      if(reNosObj.value.goods_art_no){
        runGoods(reNosObj.value)
      }
    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
  });

}

//单个重拍

const reTakePicture = async (img)=>{
  if(!img.id) return;
  await ElMessageBox.confirm('此操作会先删除此数据，需要继续吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })

  socketStore.sendMessage({
    type: 're_take_picture',
    "data":{"record_id":img.id},
  })

  clientStore.ipc.removeAllListeners(icpList.socket.message + '_re_take_picture');

  clientStore.ipc.on(icpList.socket.message + '_re_take_picture', (event, result) => {
    console.log('_re_take_picture')
    console.log(result)
    if(result.code === 0){
      getPhotoRecords()
      setTimeout(()=>{
        showlastPhoto.value = false
      },6000)
    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
    clientStore.ipc.removeAllListeners(icpList.socket.message + '_re_take_picture');

  })
}

const reNosObj = ref({
  goods_art_no:null,
  action:null,
})
//货号重拍
const reTakePictureNos = async (goods_art_no,item)=>{

  await ElMessageBox.confirm('此操作会先删除删除货号：'+goods_art_no+'的拍摄数据吗，需要继续吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
  reNosObj.value.goods_art_no = goods_art_no
  reNosObj.value.action = '执行左脚程序'
  if(item.items && typeof item.items === 'object' && item.items[0].image_deal_mode){
      reNosObj.value.action = '执行右脚程序'
  }
  del({goods_art_nos:[goods_art_no]})
}

/**
 * 检查是否可以进入下一步操作。
 */
const  next = async function(){
  if(runLoading.value){
    ElMessage.error('正在拍摄中，请稍候')
    return;
  }
  if(goodsList.length){
    ElMessage.error('请先拍摄商品。')
    return;
  }
}

/**
 * 页面挂载时初始化事件监听器并获取初始数据。
 */
onMounted(async () => {
  // 监听蓝牙扫描事件
  clientStore.ipc.on(icpList.socket.message + '_blue_tooth_scan', (event, result) => {

    console.log('_blue_tooth_scan')
    if (result.code === 0 && result.data?.data) {
      console.log(goods_art_no.value);
      if(!goods_art_no.value){
          ElMessage.error('请先扫描货号或者手动输入货号!')
          return;
      }
      runGoods({
        ...result.data?.data,
        goods_art_no: goods_art_no.value
      })

    }
  });

/*  window.addEventListener('storage', handleStorageEvent);*/



  await getPhotoRecords();
  // 监听图片处理完成事件
  clientStore.ipc.on(icpList.socket.message + '_image_process', (event, result) => {
    console.log('_image_process')
    console.log(result)
    getPhotoRecords()
    // 延迟两秒再获取一遍数据
    setTimeout(()=>{
      getPhotoRecords()
    },3000)
  })

  // 监听拍照完成事件
  clientStore.ipc.on(icpList.socket.message + '_photo_take', (event, result) => {
    console.log('_photo_take')
    console.log(result)
    if(result.status === 2 && result.msg.includes('执行完成')){
      getPhotoRecords()
      // 延迟两秒再获取一遍数据
      setTimeout(()=>{
        getPhotoRecords()
      },3000)
      takePictureLoading.value = false;
    }

  })

  // 监听拍照完成后的最终状态事件
  clientStore.ipc.on(icpList.socket.message + '_photo_take_finish', (event, result) => {
    console.log('_photo_take_finish')
    console.log(result)
    if(result.code === 0) {
      runLoading.value = false;
      runAction.value.goods_art_no = '';
      runAction.value.action = '';
      setTimeout(()=>{
        showlastPhoto.value = false
      },5000)
    }

  })

  // 监听手动触发拍照事件
  clientStore.ipc.on(icpList.socket.message + '_handler_take_picture', async (event, result) => {
    console.log('_handler_take_picture')
    console.log(result)
    if(result.code === 0){
      if(runLoading.value || takePictureLoading.value){
        ElMessage.error('拍摄程序正在运行，请稍候')
        return
      }

      ElMessage.success('正在拍摄中，请稍候')

      await socketStore.connectSocket();
      socketStore.sendMessage(result.data)
      takePictureLoading.value = true;

      getPhotoRecords()
      // 延迟两秒再获取一遍数据
      setTimeout(()=>{
        getPhotoRecords()
      },3000)

    }

  })

})


const onRemoteControl = (type)=>{
  if(type == 'take_picture'){

    if(runLoading.value || takePictureLoading.value){
      ElMessage.error('拍摄程序正在运行，请稍候')
      return
    }

    ElMessage.success('正在拍摄中，请稍候')
    socketStore.sendMessage({
      type: 'handler_take_picture',
    })
    return;
  }


  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) => {
  if(e.key === 'run_mcu' && e.newValue){
    if(!goods_art_no.value){
      ElMessage.error('请先扫描货号或者手动输入货号!')
      localStorage.setItem('run_mcu','')
      return;
    }
    let action = '执行左脚程序'
    if(e.newValue  === 'right')  action = '执行右脚程序'
    runGoods({
      "action": action,
      "goods_art_no": goods_art_no.value,
    })
    localStorage.setItem('run_mcu','')

  }
};*/
const checkInfoStore = checkInfo()
checkInfoStore.set_blue_tooth_scan_NO('')
watchEffect(async ()=>{
  if(checkInfoStore.blue_tooth_scan_NO){
    ElMessage.success('商品货号'+checkInfoStore.blue_tooth_scan_NO+'获取成功，请在遥控器上按下左或右脚按键，启动拍摄')
    goods_art_no.value = checkInfoStore.blue_tooth_scan_NO
    checkInfoStore.set_blue_tooth_scan_NO('')
  }
})


/**
 * 页面卸载时移除所有事件监听器。
 */
onBeforeUnmount(() => {
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_blue_tooth_scan');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_image_process');
  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);*/


})

/*
* 打开最近一张拍摄图
* */
const lastPhoto = ref({})
const showlastPhoto = ref(false)
const lastPhtotoName = ref({
  0:"俯视图",
  1:"侧视图",
  2:"后视图",
  3:"鞋底",
  4:"内里",
})
const  getLastPhotoRecord = async ()=>{
  if(goodsList.value && goodsList.value.length === 0) return;
  clientStore.ipc.removeAllListeners(icpList.takePhoto.getLastPhotoRecord);
  clientStore.ipc.send(icpList.takePhoto.getLastPhotoRecord,);

  clientStore.ipc.on(icpList.takePhoto.getLastPhotoRecord, (event, result) => {
    console.log('getLastPhotoRecord')
    console.log(result)
    console.log(runAction.value)
    clientStore.ipc.removeAllListeners(icpList.takePhoto.getLastPhotoRecord);
    if(result.code === 0){
      if(lastPhoto.value.image_path){
        if(  lastPhoto.value.image_path == result.data.image_path) return;

        if(runAction.value.goods_art_no === result.data.goods_art_no){
          showlastPhoto.value = true
        }
      }
      lastPhoto.value = result.data
    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
  });
}


/**
 * 打开主图详情页面。
 */
function openPhotographyDetail() {

  if(takePictureLoading.value){
    ElMessage.error('正在拍摄中，请稍候')
    return;
  }
  const { href } = Router.resolve({
    name: 'PhotographyDetail',
    query:{
      goods_art_nos:goodsList.value.map(item=>item.goods_art_no),
    }
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '主图与详情生成',
    width: 1000,
    height: 630,
    frame: true,
    id: "PhotographyDetail",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}

</script>


<style  lang="scss">
.shot-image-popper {
  width: calc(100vw - 370px) !important;
  left: 20px !important;
  top: 50px !important;
  height: calc(100vh - 70px) !important;
  transform: translate(0px, 0px) !important;

  .el-image {
    width: 100%;
    height:100%;
    display: block;

    .el-image__inner {
      width: 100%;
      height:100%;
      display: block;

    }
  }
}

</style>
<style scoped lang="scss">
.photography-page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  .main-container {
    position: relative;
    display: flex;
    .content-wrapper {
      flex-grow: 1 ;
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin:  auto;
      justify-content: center;


      .step-number {
        background-color: rgba(22, 119, 255, 1);
        border-radius: 50%;
        height: 32px;
        margin-top: 51px;
        width: 32px;

        .text_22 {
          width: 6px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          font-weight: NaN;
          text-align: right;
          white-space: nowrap;
          line-height: 22px;
          margin: 5px 0 0 13px;
        }
      }

      .step-one {
        width: 426px;
        height: 521px;
        margin: 55px 0 0 5px;

        .step-header {
          width: 391px;
          height: 24px;
          margin-left: 3px;

          .step-title {
            width: 160px;
            height: 24px;
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 24px;
          }

          .step-icon {
            width: 32px;
            height: 20px;
            margin-top: 4px;
          }

          .step-divider {
            width: 191px;
            height: 1px;
            margin: 13px 0 0 8px;
          }
        }

        .step-content {
          width: 426px;
          height: 469px;
          margin-top: 28px;

          .method-container {
            background-color: rgba(247, 247, 247, 1);
            height: 484px;
            width: 353px;

            .auto-method {
              width: 253px;
              height: 24px;
              margin: 28px 0 0 14px;

              .text-method-tag {
                background-color: rgba(0, 174, 30, 1);
                height: 24px;
                width: 65px;

                .text_4 {
                  width: 56px;
                  height: 20px;
                  overflow-wrap: break-word;
                  color: rgba(255, 255, 255, 1);
                  font-size: 14px;
                  font-family: PingFangSC-Semibold;
                  font-weight: 600;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 20px;
                  margin: 2px 0 0 4px;
                }
              }

              .method-description {
                width: 182px;
                height: 20px;
                overflow-wrap: break-word;
                color: rgba(71, 71, 71, 1);
                font-size: 14px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                margin-top: 2px;
              }
            }

            .scan-method {
              width: 350px;
              height: 350px;
              margin: 10px;

              .remote-control {
                width: 350px;
                height: 350px;
                background: url(@/assets/images/Photography/left.png) 0px 0px no-repeat;
                background-size: 300px 300px;
                position: relative;

                .scan-button {
                  background-color: rgba(0, 174, 30, 1);
                  border-radius: 50%;
                  width: 27px;
                  height: 27px;
                  margin: 27px 0 0 34px;
                }

                .scan-line {
                  position: absolute;
                  left: 52px;
                  top: 40px;
                  width: 112px;
                  height: 1px;
                }
              }

              .scan-label {
                width: 96px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(0, 174, 30, 1);
                font-size: 16px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                margin-top: 30px;
              }
            }

            .manual-method {
              width: 155px;
              height: 24px;
              margin: 53px 0 0 14px;

              .method-tag {
                background-color: rgba(0, 148, 174, 1);
                height: 24px;
                width: 65px;

                .text_7 {
                  width: 56px;
                  height: 20px;
                  overflow-wrap: break-word;
                  color: rgba(255, 255, 255, 1);
                  font-size: 14px;
                  font-family: PingFangSC-Semibold;
                  font-weight: 600;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 20px;
                  margin: 2px 0 0 4px;
                }
              }

              .method-description {
                width: 84px;
                height: 20px;
                overflow-wrap: break-word;
                color: rgba(71, 71, 71, 1);
                font-size: 14px;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                margin-top: 2px;
              }
            }

            .input-container {
              width: calc(100% - 20px );
              height: 36px;
              margin: 20px 10px 0;

              .input-item {
                :deep(.el-input__inner){
                    height: 36px;
                    line-height: 36px;
                  }
              }

            }
          }

          .remote-image {
            width: 61px;
            height: 38px;
            margin-top: 216px;
          }
        }
      }

      .step-two {
        width: 384px;
        height: 521px;
        margin: 55px 0 0 7px;

        .step-title {
          width: 384px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
        }

        .shooting-container {
          background-color: rgba(247, 247, 247, 1);
          width: 353px;
          height: 484px;
          margin: 28px 0 0 2px;
          .remote-control-wrap {
            width: 353px;
            height: 300px;
          }

          .shooting-tips {
            width: 325px;
            height: 40px;
            margin: 12px 0 0 15px;

            .info-icon {
              width: 16px;
              height: 16px;
              margin-top: 2px;
            }

            .tips-text {
              width: 302px;
              height: 40px;
              overflow-wrap: break-word;
              color: rgba(255, 76, 0, 1);
              font-size: 14px;
              font-weight: NaN;
              text-align: left;
              line-height: 20px;
            }
          }

          .left-foot-text {
            width: 240px;
            height: 22px;
            overflow-wrap: break-word;
            color: rgba(0, 174, 30, 1);
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
            margin: 36px 0 0 9px;
          }

          .remote-control-container {
            position: relative;
            width: 280px;
            height: 298px;
            margin: 9px 0 0 35px;

            .remote-buttons {
              width: 206px;
              height: 233px;
              background: url(@/assets/images/Photography/right-button.png) 100% no-repeat;
              background-size: 100% 100%;
              margin: 30px 0 0 37px;

              .left-button {
                background-color: rgba(0, 174, 30, 1);
                border-radius: 50%;
                width: 55px;
                height: 55px;
                margin: 91px 0 0 1px;
              }

              .right-button {
                background-color: rgba(0, 148, 174, 1);
                border-radius: 50%;
                width: 55px;
                height: 55px;
                margin: 91px 2px 0 93px;
              }
            }

            .left-button-image {
              width: 40px;
              height: 148px;
              margin: 150px 0 0 -3px;
            }

            .right-button-image {
              position: absolute;
              left: 0;
              top: 0;
              width: 40px;
              height: 148px;
            }
          }

          .right-foot-text {
            width: 240px;
            height: 22px;
            overflow-wrap: break-word;
            color: rgba(0, 148, 174, 1);
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
            margin: 12px 0 18px 98px;
          }
        }
      }


    }

    .camera-image {
      position: absolute;
      left: 620px;
      top: 220px;
      width: 111px;
      height: 111px;
    }

    .step-number-two {
      background-color: rgba(22, 119, 255, 1);
      border-radius: 50%;
      height: 32px;
      width: 32px;
      position: absolute;
      left: 450px;
      top: 51px;

      .step-text {
        width: 9px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        font-weight: NaN;
        text-align: right;
        white-space: nowrap;
        line-height: 22px;
        margin: 5px 0 0 12px;
      }
    }
  }
}

.history-section {
        background-color: rgba(234, 236, 237, 1);
        width: 332px;
        height: calc(100vh - 30px);

        .history-title {
          width: calc(100% - 20px);
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: center;
          white-space: nowrap;
          line-height: 22px;
          margin: 9px 0 0 10px;
        }

        .divider-line {
          width: 100%;
          height: 1px;
          margin-top: 9px;
        }

        .history-warp {
          flex-grow: 1;
          overflow: auto;
          height: calc(100% - 125px);

          .history-item {
            .history-item_image_wrap {
              padding-bottom: 20px;
              border-bottom: 1px solid #CCCCCC;
            }
            .history-item_image {
              &::before{
                color: #bbb;
                position: absolute;
                left: 0;
                right: 0;
                top:50%;
                margin-top: -15px;
                line-height: 30px;
              }

              &:nth-child(1)::before{
                content:"俯视图";
              }
              &:nth-child(2)::before{
                content:"侧视图";
              }
              &:nth-child(3)::before{
                content:"后视图";
              }
              &:nth-child(4)::before{
                content:"鞋底";
              }
              &:nth-child(5)::before{
                content:"内里";
              }

              position: relative;
              width: 70px;
              height: 70px;
              float: left;
              margin: 6px 0 0 6px;
              background: #F7F7F7;
              .el-image {
                display: block;
                width:100%;
                height: 100%;
              }
              &:first-child {
                width: 146px;
                height: 146px;
              }
              &.el-loading-parent--relative{
                ::v-deep {
                  .el-loading-mask { display: none}
                }
              }

            }


            .el-image_view {
              display: flex;
              width: 100%;
              height: 100%;

              .reset-button {
                width: 40px;
                text-align: center;
                height: 20px;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-20px;
                margin-top:-10px;
                color: #ffffff;
                font-size: 14px;
                background: rgba(0,0,0,0.6);
                border-radius: 12px;
                display: none;
                cursor: pointer;
              }
              &:hover {
                .reset-button {
                  display: block;
                }
              }
            }
            p:first-of-type {
              ::v-deep {
                .el-loading-mask { display: block !important;}
              }
            }


          }
        }

        .empty-state {
          width: 56px;
          height: 48px;

          .empty-icon {
            width: 32px;
            height: 18px;
            margin-left: 12px;
          }

          .empty-text {
            width: 56px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 14px;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 10px;
          }
        }

        .next-step {
          height: 50px;
          background-size: 100% 100%;
          width: 100%;
          line-height: 50px;

          .next-step-text {
            width: 100%;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-weight: NaN;
            text-align: center;
            white-space: nowrap;

          }
        }
      }
.last-photo{
  position: fixed;
  left: 20px;
  top: 50px;
  bottom: 20px;
  right: 350px;
  z-index: 10;
}
</style>