<template>
|
<div class="multi-device-workbench">
|
<div class="main-grid">
|
<div class="left-panel">
|
<GroupList @select="handleGroupSelect" />
|
</div>
|
<div class="right-panel">
|
<TaskOrchestration :group="selectedGroup" @task-started="refreshMonitor" />
|
<ExecutionMonitor ref="monitorRef" :group-id="selectedGroupId" class="monitor-panel" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, ref } from 'vue'
|
import GroupList from './components/DeviceGroup/GroupList.vue'
|
import TaskOrchestration from './components/MultiDeviceTest/TaskOrchestration.vue'
|
import ExecutionMonitor from './components/MultiDeviceTest/ExecutionMonitor.vue'
|
|
const selectedGroup = ref(null)
|
const monitorRef = ref(null)
|
|
const selectedGroupId = computed(() => {
|
if (!selectedGroup.value) return null
|
return selectedGroup.value.id || selectedGroup.value.groupId
|
})
|
|
const handleGroupSelect = (group) => {
|
selectedGroup.value = group
|
}
|
|
const refreshMonitor = () => {
|
monitorRef.value?.fetchTasks?.()
|
}
|
</script>
|
|
<style scoped>
|
.multi-device-workbench {
|
padding: 24px;
|
min-height: 100%;
|
background: linear-gradient(180deg, #f6f9ff 0%, #f4f6fb 100%);
|
}
|
|
.main-grid {
|
display: grid;
|
grid-template-columns: 360px 1fr;
|
gap: 24px;
|
}
|
|
.right-panel {
|
display: flex;
|
flex-direction: column;
|
gap: 24px;
|
}
|
|
.monitor-panel {
|
flex: 1;
|
}
|
|
@media (max-width: 1200px) {
|
.main-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
</style>
|
