diff --git a/apps/web/src/components/ImageDetection.vue b/apps/web/src/components/ImageDetection.vue
index 645f635..28fbeb9 100644
--- a/apps/web/src/components/ImageDetection.vue
+++ b/apps/web/src/components/ImageDetection.vue
@@ -5,7 +5,7 @@
@@ -351,13 +351,17 @@ const props = defineProps({
models: {
type: Array,
default: () => []
+ },
+ selectedModel: {
+ type: String,
+ default: ''
}
})
-const emit = defineEmits(['type-change'])
+const emit = defineEmits(['type-change', 'model-change'])
const config = ref({
- model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
+ model: props.selectedModel || (props.models.length > 0 ? props.models[0].id : 'fire_detection'),
confidence: 0.5,
iou: 0.45,
composite: false,
@@ -369,7 +373,12 @@ const onTypeChange = (type) => {
}
const onConfigChange = (newConfig) => {
+ const oldModel = config.value.model
config.value = { ...newConfig }
+ // 模型变化时通知父组件
+ if (newConfig.model && newConfig.model !== oldModel) {
+ emit('model-change', newConfig.model)
+ }
}
// 可拖拽调整宽度相关
diff --git a/apps/web/src/components/VideoDetection.vue b/apps/web/src/components/VideoDetection.vue
index 314831f..fbd06c0 100644
--- a/apps/web/src/components/VideoDetection.vue
+++ b/apps/web/src/components/VideoDetection.vue
@@ -5,7 +5,7 @@
@@ -223,13 +223,17 @@ const props = defineProps({
models: {
type: Array,
default: () => []
+ },
+ selectedModel: {
+ type: String,
+ default: ''
}
})
-const emit = defineEmits(['type-change'])
+const emit = defineEmits(['type-change', 'model-change'])
const config = ref({
- model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
+ model: props.selectedModel || (props.models.length > 0 ? props.models[0].id : 'fire_detection'),
confidence: 0.5,
iou: 0.45,
composite: false,
@@ -241,8 +245,13 @@ const onTypeChange = (type) => {
}
const onConfigChange = (newConfig) => {
+ const oldModel = config.value.model
config.value = { ...newConfig }
-
+ // 模型变化时通知父组件
+ if (newConfig.model && newConfig.model !== oldModel) {
+ emit('model-change', newConfig.model)
+ }
+
// 如果摄像头已连接,实时更新配置
if (websocket.value && cameraConnected.value) {
updateCameraConfig()
diff --git a/apps/web/src/views/Home.vue b/apps/web/src/views/Home.vue
index f386414..b5f7d8b 100644
--- a/apps/web/src/views/Home.vue
+++ b/apps/web/src/views/Home.vue
@@ -4,14 +4,18 @@
@@ -26,15 +30,24 @@ import VideoDetection from '@/components/VideoDetection.vue'
const activeTab = ref('image')
const models = ref([])
+const selectedModel = ref('')
const handleTypeChange = (type) => {
activeTab.value = type
}
+const handleModelChange = (modelId) => {
+ selectedModel.value = modelId
+}
+
const loadModels = async () => {
try {
const response = await detectionApi.getModels()
models.value = response.data
+ // 初始化默认选中第一个模型
+ if (models.value.length > 0 && !selectedModel.value) {
+ selectedModel.value = models.value[0].id
+ }
} catch (error) {
ElMessage.error('加载模型列表失败')
}