统一卧转立扫码、卧转立、大车、大理片笼的定时器逻辑和步骤状态；添加设备拓扑图清除数据、联机状态切换按钮，

huang

2025-12-03 8f3a85044b6e4b56a8dd0b104ca023933f1f129c

 mes-web/src/views/plcTest/MultiDeviceWorkbench.vue

@@ -5,21 +5,48 @@
        <GroupList @select="handleGroupSelect" />
      </div>
      <div class="right-panel">
        <TaskOrchestration :group="selectedGroup" @task-started="refreshMonitor" />
        <ExecutionMonitor ref="monitorRef" :group-id="selectedGroupId" class="monitor-panel" />
        <el-tabs v-model="activeTab" type="card" class="workbench-tabs">
          <el-tab-pane label="任务编排" name="orchestration">
            <TaskOrchestration
              :group="selectedGroup"
              @task-started="handleTaskStarted"
            />
          </el-tab-pane>
          <el-tab-pane label="执行监控" name="monitor">
            <ExecutionMonitor
              ref="monitorRef"
              :group-id="selectedGroupId"
              :task-id="selectedTaskId"
              class="monitor-panel"
              @task-selected="handleTaskSelected"
            />
          </el-tab-pane>
          <el-tab-pane label="结果分析" name="analysis">
            <ResultAnalysis
              ref="analysisRef"
              :task="selectedTask"
              class="analysis-panel"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { computed, ref, watch } from 'vue'
import GroupList from './components/DeviceGroup/GroupList.vue'
import TaskOrchestration from './components/MultiDeviceTest/TaskOrchestration.vue'
import ExecutionMonitor from './components/MultiDeviceTest/ExecutionMonitor.vue'
import ResultAnalysis from './components/MultiDeviceTest/ResultAnalysis.vue'

const selectedGroup = ref(null)
const monitorRef = ref(null)
const analysisRef = ref(null)
const activeTab = ref('orchestration')
const selectedTaskId = ref(null)
const selectedTask = ref(null)

const selectedGroupId = computed(() => {
  if (!selectedGroup.value) return null
@@ -28,10 +55,43 @@

const handleGroupSelect = (group) => {
  selectedGroup.value = group
  selectedTask.value = null
  selectedTaskId.value = null
  // 切换到编排标签页
  activeTab.value = 'orchestration'
}

const refreshMonitor = () => {
  monitorRef.value?.fetchTasks?.()
const handleTaskStarted = (task) => {
  // 任务启动后，切换到监控标签页（如果当前不在监控页）
  if (activeTab.value !== 'monitor') {
    activeTab.value = 'monitor'
  }
  // 立即刷新监控列表，显示新启动的任务
  setTimeout(() => {
    monitorRef.value?.fetchTasks?.()
  }, 300)
  
  // 如果传入了任务信息，可以自动选中
  if (task && task.taskId) {
    selectedTaskId.value = task.taskId
    // 稍后自动打开该任务的步骤详情抽屉
    setTimeout(() => {
      monitorRef.value?.openTaskDrawer?.(task.taskId)
    }, 600)
  }
}

const handleTaskSelected = (task) => {
  selectedTask.value = task
  selectedTaskId.value = task?.taskId || null
  // 如果任务已完成或失败，切换到结果分析标签页
  if (task && (task.status === 'COMPLETED' || task.status === 'FAILED')) {
    activeTab.value = 'analysis'
    // 刷新分析数据
    setTimeout(() => {
      analysisRef.value?.fetchSteps?.()
    }, 100)
  }
}
</script>

@@ -48,14 +108,38 @@
  gap: 24px;
}

.right-panel {
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.monitor-panel {
.right-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
}

.workbench-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.monitor-panel,
.analysis-panel {
  flex: 1;
  min-height: 500px;
}

@media (max-width: 1200px) {