Forráskód Böngészése

feat(setting): 优化相机配置界面状态显示和刷新功能

- 替换点位连接状态显示逻辑,支持已连接/未连接/未设置三种状态
- 添加刷新按钮,允许手动更新相机连接状态
- 实现实时监听相机列表变化,自动更新各点位状态
- 重构点位标签显示方式,提供更准确的状态反馈
- 调整界面布局,添加对齐样式和刷新按钮位置
- 移除旧的连接状态更新方法,优化相机列表获取流程
panqiuyao 2 napja
szülő
commit
4b3ae84f62
1 módosított fájl, 89 hozzáadás és 42 törlés
  1. 89 42
      frontend/src/views/Setting/components/CameraConfig.vue

+ 89 - 42
frontend/src/views/Setting/components/CameraConfig.vue

@@ -15,10 +15,20 @@
           @click="switchPoint(point.key)"
         >
           <span class="tab-name">点位 {{ point.key }}</span>
-          <el-tag v-if="isMultiCameraMode" :type="point.connected ? 'success' : 'danger'" size="small">
-            {{ point.connected ? '已连接' : '未连接' }}
+          <el-tag :type="getPointTagInfo(point.key).type" size="small">
+            {{ getPointTagInfo(point.key).text }}
           </el-tag>
         </div>
+        <el-button
+          type="primary"
+          link
+          class="refresh-btn"
+          :loading="refreshing"
+          @click="handleRefresh"
+        >
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
       </div>
 
       <!-- 当前点位配置 -->
@@ -133,12 +143,32 @@ const activePoint = ref('A')
 // 相机列表(通过 IPC 获取,不再依赖 store)
 const cameraList = ref([])
 
-// 点位列表
-const pointList = [
-  { key: 'A', connected: false },
-  { key: 'B', connected: false },
-  { key: 'C', connected: false },
-]
+// 刷新中
+const refreshing = ref(false)
+
+// 点位列表(带相机名,用于显示)
+const pointList = reactive([
+  { key: 'A', cameraName: '' },
+  { key: 'B', cameraName: '' },
+  { key: 'C', cameraName: '' },
+])
+
+// 获取点位状态(三态:已连接/未连接/未设置)
+const getPointStatus = (pointKey) => {
+  const config = multiConfig[pointKey]
+  if (!config || !config.CameraKey) return 'unset'
+  const camera = cameraList.value.find(c => c.CameraKey === config.CameraKey)
+  if (!camera) return 'disconnected'
+  return camera.CameraStatus ? 'connected' : 'disconnected'
+}
+
+// 获取点位的标签文字和类型
+const getPointTagInfo = (pointKey) => {
+  const status = getPointStatus(pointKey)
+  if (status === 'connected') return { text: '已连接相机', type: 'success' }
+  if (status === 'disconnected') return { text: '未连接相机', type: 'danger' }
+  return { text: '未设置相机', type: 'info' }
+}
 
 // 多相机模式的配置结构(统一数据结构)
 // 使用原始 CameraKey 作为存储和显示
@@ -228,49 +258,35 @@ const switchPoint = (pointKey) => {
   }
 }
 
-// 更新点位连接状态
-const updatePointConnectionStatus = () => {
-  const cameras = cameraList.value || []
-  pointList.forEach(point => {
-    const boundCamera = multiConfig[point.key].CameraKey
-    if (boundCamera) {
-      const camera = cameras.find(c => c.CameraKey === boundCamera)
-      point.connected = camera ? camera.CameraStatus : false
-    } else {
-      point.connected = false
-    }
-  })
-}
-
-  // 通过 IPC 获取相机列表
+// 通过 IPC 获取相机列表
   const fetchCameraList = () => {
-    clientStore.ipc.invoke(icpList.camera.getCameraList).then(result => {
-
-      console.log('icpList.camera.getCameraList');
-      console.log(result);
+    return clientStore.ipc.invoke(icpList.camera.getCameraList).then(result => {
       if (result && result.CameraLists && Array.isArray(result.CameraLists)) {
         cameraList.value = result.CameraLists
-        // 更新各点位对应相机的 ISO 选项
-        updateIsoOptionsForAllPoints()
-        updatePointConnectionStatus()
+        return true
       }
+      return false
     }).catch(err => {
       console.error('获取相机列表失败:', err)
+      throw err
     })
   }
 
-  // 更新所有点位的 ISO 选项
-  const updateIsoOptionsForAllPoints = () => {
-    const cameras = cameraList.value || []
-    Object.keys(multiConfig).forEach(pointKey => {
-      const cameraKey = multiConfig[pointKey].CameraKey
-      if (cameraKey) {
-        const camera = cameras.find(c => c.CameraKey === cameraKey)
-        if (camera && camera.CameraISO) {
-          multiConfig[pointKey].iso_options = camera.CameraISO
-        }
+  const handleRefresh = async () => {
+    if (refreshing.value) return
+    refreshing.value = true
+    try {
+      const ok = await fetchCameraList()
+      if (ok) {
+        ElMessage.success('相机连接状态已更新')
+      } else {
+        ElMessage.warning('未获取到相机列表')
       }
-    })
+    } catch {
+      ElMessage.error('刷新失败,请稍后重试')
+    } finally {
+      refreshing.value = false
+    }
   }
 
   // 从 smart_shooter_getinfo 获取 ISO 配置(保留作为备用)
@@ -317,7 +333,6 @@ const onCameraChange = (pointKey) => {
     multiConfig[pointKey].CameraName = ''
     multiConfig[pointKey].iso_options = ['auto', 100, 200, 400, 800, 1600, 3200, 6400, 12800]
   }
-  updatePointConnectionStatus()
 }
 
 // 确保当前绑定的相机在列表中(即使断开连接也显示)
@@ -337,6 +352,32 @@ const ensureCurrentCameraInList = () => {
   }
 }
 
+// 监听相机列表变化,实时更新各点位状态
+watch(
+  () => cameraList.value,
+  () => {
+    Object.keys(multiConfig).forEach(pointKey => {
+      const config = multiConfig[pointKey]
+      if (config.CameraKey) {
+        const camera = cameraList.value.find(c => c.CameraKey === config.CameraKey)
+        if (camera) {
+          config.CameraName = camera.CameraName || config.CameraKey
+          if (camera.CameraISO && Array.isArray(camera.CameraISO)) {
+            config.iso_options = camera.CameraISO
+            if (!camera.CameraISO.includes(config.iso.low)) {
+              config.iso.low = camera.CameraISO[0]
+            }
+            if (!camera.CameraISO.includes(config.iso.high)) {
+              config.iso.high = camera.CameraISO[0]
+            }
+          }
+        }
+      }
+    })
+  },
+  { deep: true }
+)
+
 // 监听multiConfig变化并更新父组件
 watch(multiConfig, (newVal) => {
   // 过滤掉 iso_options 字段,只保留配置数据
@@ -434,6 +475,7 @@ defineExpose({ save })
 // 点位切换Tab
 .point-tabs {
   display: flex;
+  align-items: center;
   gap: 12px;
   margin-bottom: 20px;
 }
@@ -462,6 +504,11 @@ defineExpose({ save })
     font-weight: bold;
     color: #303133;
   }
+
+}
+
+.refresh-btn {
+  margin-left: auto;
 }
 
 // 当前点位配置卡片