CameraMachine/frontend/src/views/Setting/components/CameraConfig.vue

<template>
  <div class="selectBox">
    <div class="form-item" style="padding-bottom: 30px;">
      <div class="te-l fw-b fs-16">ISO参数（相机设置ISO auto时无效）</div>
      <div class="iso-inputs mar-top-20">
        <div class="iso-group">
          <span class="iso-label">用曝光灯时：</span>
          <div class="select-wrapper">
            <el-select
              v-model="iso_config.low"
              filterable
              default-first-option
              placeholder="请选择或输入ISO值"
              class="iso-input"
            >
              <el-option
                v-for="item in iso_options"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
        </div>
        <div class="iso-group">
          <span class="iso-label">不用时：</span>
          <div class="select-wrapper">
            <el-select
              v-model="iso_config.high"
              filterable
              default-first-option
              placeholder="请选择或输入ISO值"
              class="iso-input"
            >
              <el-option
                v-for="item in iso_options"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive,onMounted,ref } from 'vue'
import { ElMessage } from 'element-plus'
import client from "@/stores/modules/client";
import icpList from '@/utils/ipc';
import socket from "@/stores/modules/socket.js";
const clientStore = client();
const socketStore = socket(); // WebSocket状态管理实例

const iso_config = reactive({
  low: 100,
  high: 6000,
  mode:"auto22"
})

const iso_options = ref(['auto',100,200,400,800,1600,3200,6400,12800])

onMounted( () => {
  // 读取已保存的相机配置
  clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
  clientStore.ipc.send(icpList.setting.getSysConfig,{key: 'camera_configs'});
  clientStore.ipc.on(icpList.setting.getSysConfig, (event, result) => {
    if(result.code == 0 && result.data){
      iso_config.low = result.data.iso_low ?? iso_config.low
      iso_config.high = result.data.iso_high ?? iso_config.high
    }
    clientStore.ipc.removeAllListeners(icpList.setting.getSysConfig);
  });

  // 读取设备当前可用的 ISO 档位
  clientStore.ipc.removeAllListeners(icpList.socket.message+'_smart_shooter_get_camera_property');
  socketStore.sendMessage({
    type: 'smart_shooter_get_camera_property'
  });

  clientStore.ipc.on(icpList.socket.message+'_smart_shooter_get_camera_property', async (event, result) => {
    if(result.code == 0 && result.data){
      const ISO  =  result.data.filter(item => item.CameraPropertyType == 'ISO')
      if(ISO.length > 0){
        iso_options.value = ISO[0].CameraPropertyRange
      }
    }
    clientStore.ipc.removeAllListeners(icpList.socket.message+'_smart_shooter_get_camera_property');
  })
})

// 暴露保存方法，给父组件调用
const save = async () => {
  // 必填校验（允许填写数字或 'auto'）
  const isEmpty = (v) => v === undefined || v === null || v === ''
  if (isEmpty(iso_config.low)) {
    ElMessage.error('请填写“用曝光灯时”的 ISO 值')
    return false
  }
  if (isEmpty(iso_config.high)) {
    ElMessage.error('请填写“不用时”的 ISO 值')
    return false
  }

  // 若均为数字，做简单范围校验（>0）
  const lowNum = Number(iso_config.low)
  const highNum = Number(iso_config.high)
  if (!Number.isNaN(lowNum) && lowNum <= 0) {
    ElMessage.error('“用曝光灯时”的 ISO 必须大于 0')
    return false
  }
  if (!Number.isNaN(highNum) && highNum <= 0) {
    ElMessage.error('“不用时”的 ISO 必须大于 0')
    return false
  }

  return await new Promise((resolve, reject) => {
    clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
    clientStore.ipc.send(icpList.setting.updateSysConfigs,{
      key: 'camera_configs',
      value: JSON.stringify({
        iso_low: iso_config.low,
        iso_high: iso_config.high
      })
    });

    clientStore.ipc.on(icpList.setting.updateSysConfigs, async (event, result) => {
      clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
      if(result.code === 0 && result.msg){
        resolve(true)
      } else {
        resolve(false)
      }
    });
  });
}

defineExpose({ save })

</script>

<style lang="scss" scoped>
.iso-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.iso-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iso-label {
  min-width: 80px;
  font-size: 14px;
  color: #1A1A1A;
}

.iso-input {
  width: 200px;
}

.select-wrapper {
  :deep(.el-input__inner) {
    border-radius: 6px;
  }
}
</style>