2026-08-24 13:55:18 +08:00
3 changed files with 201 additions and 49 deletions
--- a/src/views/flow/components/RuntimeAssignmentsEditor.vue
+++ b/src/views/flow/components/RuntimeAssignmentsEditor.vue
@ -11,7 +11,7 @@
            :model-value="memberOf(role).robotId"
            clearable
            filterable
-            :loading="robotLoading"
+            :loading="robotLoading || autoAssigning"
            placeholder="请选择机器人"
            style="width: 100%"
            @change="(robotId) => changeRobot(role, robotId)"
@ -23,7 +23,7 @@
          <el-select
            v-model="memberOf(role).devices[slot.slotKey]"
            filterable
-            :loading="loadingRoleKey === role.roleKey"
+            :loading="autoAssigning || loadingRoleKey === role.roleKey"
            :disabled="!memberOf(role).robotId"
            :placeholder="memberOf(role).robotId ? '请选择设备' : '请先选择机器人'"
            style="width: 100%"
@ -59,9 +59,11 @@ const assignments = ref([])
 const robotOptions = ref([])
 const devicesByRole = reactive({})
 const robotLoading = ref(false)
+const autoAssigning = ref(false)
 const loadingRoleKey = ref('')
 const robotLoadError = ref('')
 const deviceLoadErrors = reactive({})
+const onlineDevicesByRobot = new Map()
 const loadError = computed(() => robotLoadError.value || Object.values(deviceLoadErrors).find(Boolean) || '')
 const clone = (value) => JSON.parse(JSON.stringify(value || []))

@ -74,10 +76,10 @@ const loadRobots = async () => {
  robotLoadError.value = ''
  try {
    const response = await getRobotList({
+      ...props.robotQuery,
      pageNum: 1,
      pageSize: 1000,
      connectStatus: '1',
-      ...props.robotQuery,
    })
    robotOptions.value = (response.rows || []).map((robot) => ({
      label: `${robot.robotName || robot.robotId} (${robot.robotId})`,
@ -98,6 +100,96 @@ const robotOptionsOf = (role) => {
  return robotOptions.value.filter((robot) => String(robot.currentMapId || '') === String(props.requiredMapId))
 }

+const getOnlineDevices = async (robotId) => {
+  if (!onlineDevicesByRobot.has(robotId)) {
+    const request = getRobotDevicesByRobotId(robotId).then((response) => (
+      Array.isArray(response.data) ? response.data : []
+    ))
+    onlineDevicesByRobot.set(robotId, request)
+  }
+  try {
+    return await onlineDevicesByRobot.get(robotId)
+  } catch (error) {
+    onlineDevicesByRobot.delete(robotId)
+    throw error
+  }
+}
+
+const itemScopeOf = (role) => role.itemId == null
+  ? 'task'
+  : `${role.itemId}:${role.itemOccurrence || 1}`
+
+const planRoleDevices = (role, robotId, devices, committedUses, preferredDevices = {}) => {
+  const plannedUses = new Map(committedUses)
+  const selectedDevices = {}
+  for (const slot of role.deviceSlots || []) {
+    const matchingDevices = devices.filter((device) => (
+      device?.deviceId
+      && (slot.deviceKind == null || Number(device.deviceKind) === Number(slot.deviceKind))
+    ))
+    const preferredId = preferredDevices[slot.slotKey]
+    const orderedDevices = preferredId
+      ? [
+          ...matchingDevices.filter((device) => device.deviceId === preferredId),
+          ...matchingDevices.filter((device) => device.deviceId !== preferredId),
+        ]
+      : matchingDevices
+    const selected = orderedDevices.find((device) => {
+      const physicalKey = `${itemScopeOf(role)}:${robotId}:${device.deviceId}`
+      const existingUse = plannedUses.get(physicalKey)
+      return !existingUse || (slot.allowReuse && existingUse.allowReuse)
+    })
+    if (!selected && slot.required) return null
+    selectedDevices[slot.slotKey] = selected?.deviceId || ''
+    if (selected) {
+      plannedUses.set(`${itemScopeOf(role)}:${robotId}:${selected.deviceId}`, {
+        allowReuse: slot.allowReuse === true,
+      })
+    }
+  }
+  return { selectedDevices, plannedUses }
+}
+
+const autoAssignRoles = async () => {
+  let committedUses = new Map()
+  autoAssigning.value = true
+  try {
+    for (const role of props.roles) {
+      const member = memberOf(role)
+      const candidates = robotOptionsOf(role)
+      let match = null
+      for (const robot of candidates) {
+        try {
+          const devices = (role.deviceSlots || []).length
+            ? await getOnlineDevices(robot.value)
+            : []
+          const preferredDevices = robot.value === member.robotId ? member.devices : {}
+          const plan = planRoleDevices(role, robot.value, devices, committedUses, preferredDevices)
+          if (plan) {
+            match = { robot, devices, ...plan }
+            break
+          }
+        } catch (error) {
+          // A failed device query makes this robot ineligible for automatic assignment.
+        }
+      }
+      if (match) {
+        member.robotId = match.robot.value
+        member.devices = match.selectedDevices
+        devicesByRole[role.roleKey] = match.devices
+        committedUses = match.plannedUses
+      } else {
+        member.robotId = ''
+        member.devices = Object.fromEntries((role.deviceSlots || []).map((slot) => [slot.slotKey, '']))
+        devicesByRole[role.roleKey] = []
+      }
+    }
+    emitValue()
+  } finally {
+    autoAssigning.value = false
+  }
+}
+
 const optionsOf = (role, slot) => {
  const member = memberOf(role)
  const unavailableDeviceIds = new Set((role.deviceSlots || [])
@ -122,12 +214,11 @@ const loadDevices = async (role, preserve = true) => {
  loadingRoleKey.value = role.roleKey
  delete deviceLoadErrors[role.roleKey]
  try {
-    const response = await getRobotDevicesByRobotId(member.robotId)
-    devicesByRole[role.roleKey] = Array.isArray(response.data) ? response.data : []
+    devicesByRole[role.roleKey] = await getOnlineDevices(member.robotId)
    ;(role.deviceSlots || []).forEach((slot) => {
      const options = optionsOf(role, slot)
      if (!preserve || !options.some((option) => option.value === member.devices[slot.slotKey])) {
-        member.devices[slot.slotKey] = options.length === 1 ? options[0].value : ''
+        member.devices[slot.slotKey] = options[0]?.value || ''
      }
    })
    emitValue()
@ -148,6 +239,8 @@ const changeRobot = async (role, robotId) => {

 const initialize = async () => {
  Object.keys(deviceLoadErrors).forEach((roleKey) => delete deviceLoadErrors[roleKey])
+  Object.keys(devicesByRole).forEach((roleKey) => delete devicesByRole[roleKey])
+  onlineDevicesByRobot.clear()
  const existing = clone(props.modelValue)
  assignments.value = props.roles.map((role) => {
    const existingAssignment = existing.find((item) => item.roleKey === role.roleKey)
@ -170,10 +263,11 @@ const initialize = async () => {
  })
  emitValue()
  await loadRobots()
-  await Promise.all(props.roles.filter((role) => memberOf(role).robotId).map((role) => loadDevices(role)))
+  await autoAssignRoles()
 }

 const validate = () => {
+  if (robotLoading.value || autoAssigning.value) return '正在自动匹配在线机器人和设备，请稍候'
  const physicalDeviceUses = new Map()
  for (const role of props.roles) {
    const member = memberOf(role)
--- a/src/views/inspection/runTask/task-steps.vue
+++ b/src/views/inspection/runTask/task-steps.vue
@ -1,8 +1,13 @@
 <template>
+    <div v-if="list.length" class="step-current">
+        <span class="step-current__count">{{ currentStepText }}</span>
+        <span class="step-current__name">{{ currentStep?.waypointName || '未命名点位' }}</span>
+    </div>
    <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
        <div class="step-wrapper" ref="stepWrapperRef">
-            <el-steps :active="activeStep" finish-status="success">
-                <el-step v-for="item in list" :key="value" :title="item.waypointName" :description="item.remark" />
+            <el-steps :active="normalizedActiveStep" finish-status="success" process-status="process">
+                <el-step v-for="(item, index) in list" :key="item.id || item.waypointId || item.detectItemId || index"
+                    :title="item.waypointName" :description="item.remark" />
            </el-steps>
        </div>
    </el-scrollbar>
@ -22,6 +27,13 @@ const props = defineProps({
 const scrollbarRef = ref(null)
 const stepWrapperRef = ref(null)

+const currentStepIndex = computed(() => Math.min(Math.max(props.activeStep, 0), Math.max(props.list.length - 1, 0)))
+const currentStep = computed(() => props.list[currentStepIndex.value])
+const normalizedActiveStep = computed(() => Math.min(Math.max(props.activeStep, 0), props.list.length))
+const currentStepText = computed(() => props.activeStep >= props.list.length
+    ? `已完成 ${props.list.length}/${props.list.length}`
+    : `当前 ${currentStepIndex.value + 1}/${props.list.length}`)
+

 /**
 * 滚动到当前激活的步骤
@ -37,52 +49,69 @@ const scrollToActiveStep = () => {

        // 获取所有 step 元素
        const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
-        if (!steps || !steps[props.activeStep]) return
+        if (!steps || !steps[currentStepIndex.value]) return

        // 计算激活 step 的位置
-        const activeEl = steps[props.activeStep]
+        const activeEl = steps[currentStepIndex.value]
        const stepLeft = activeEl.offsetLeft
        const stepWidth = activeEl.offsetWidth

        // 让激活 step 居中显示
        const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
-        console.log('滚动位置：', scrollLeft)
-        // 使用 el-scrollbar 提供的方法滚动
        scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
    })
 }

-setTimeout(() => {
-    scrollToActiveStep()
-}, 1000)
+watch(
+    () => [props.activeStep, props.list.length],
+    scrollToActiveStep,
+    { immediate: true, flush: 'post' }
+)
 </script>

 <style lang="scss" scoped>
-.step-scrollbar {
+.step-current {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
    margin-top: 12px;
+    color: #303133;
+}
+
+.step-current__count {
+    flex: none;
+    color: #409eff;
+    font-weight: 600;
+}
+
+.step-current__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.step-scrollbar {
+    margin-top: 4px;
    white-space: nowrap;

    .step-wrapper {
        display: inline-block;
-        /* 让wrapper宽度由内容决定 */
-        width: 100%;
-        /* 至少和容器一样宽 */
+        width: max-content;
+        min-width: 100%;
        white-space: nowrap;
-        /* 防止 flex 项换行 */
-
        margin: 10px 0 20px 0;

        :deep(.el-steps) {
            flex-wrap: nowrap;
-            width: calc(100% - 150px);
+            width: max-content;
+            min-width: 100%;

            .el-step {
-                flex-shrink: 0 !important;
-                /* 禁止步骤项被压缩 */
-                min-width: 150px;
-                /* 每个步骤的最小宽度，按需调整 */
+                flex: 0 0 180px !important;
+                min-width: 180px;
            }
        }
    }
 }
-</style>
+</style>
--- a/src/views/intelligenceTest/runningTask/task-steps.vue
+++ b/src/views/intelligenceTest/runningTask/task-steps.vue
@ -1,8 +1,13 @@
 <template>
+    <div v-if="list.length" class="step-current">
+        <span class="step-current__count">{{ currentStepText }}</span>
+        <span class="step-current__name">{{ currentStep?.caseName || '未命名检测项' }}</span>
+    </div>
    <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
        <div class="step-wrapper" ref="stepWrapperRef">
-            <el-steps :active="activeStep" finish-status="success">
-                <el-step v-for="item in list" :key="value" :title="item.caseName" :description="item.remark" />
+            <el-steps :active="normalizedActiveStep" finish-status="success" process-status="process">
+                <el-step v-for="(item, index) in list" :key="item.id || item.testCaseId || item.detectItemId || index"
+                    :title="item.caseName" :description="item.remark" />
            </el-steps>
        </div>
    </el-scrollbar>
@ -22,6 +27,13 @@ const props = defineProps({
 const scrollbarRef = ref(null)
 const stepWrapperRef = ref(null)

+const currentStepIndex = computed(() => Math.min(Math.max(props.activeStep, 0), Math.max(props.list.length - 1, 0)))
+const currentStep = computed(() => props.list[currentStepIndex.value])
+const normalizedActiveStep = computed(() => Math.min(Math.max(props.activeStep, 0), props.list.length))
+const currentStepText = computed(() => props.activeStep >= props.list.length
+    ? `已完成 ${props.list.length}/${props.list.length}`
+    : `当前 ${currentStepIndex.value + 1}/${props.list.length}`)
+

 /**
 * 滚动到当前激活的步骤
@ -37,52 +49,69 @@ const scrollToActiveStep = () => {

        // 获取所有 step 元素
        const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
-        if (!steps || !steps[props.activeStep]) return
+        if (!steps || !steps[currentStepIndex.value]) return

        // 计算激活 step 的位置
-        const activeEl = steps[props.activeStep]
+        const activeEl = steps[currentStepIndex.value]
        const stepLeft = activeEl.offsetLeft
        const stepWidth = activeEl.offsetWidth

        // 让激活 step 居中显示
        const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
-        console.log('滚动位置：', scrollLeft)
-        // 使用 el-scrollbar 提供的方法滚动
        scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
    })
 }

-setTimeout(() => {
-    scrollToActiveStep()
-}, 1000)
+watch(
+    () => [props.activeStep, props.list.length],
+    scrollToActiveStep,
+    { immediate: true, flush: 'post' }
+)
 </script>

 <style lang="scss" scoped>
-.step-scrollbar {
+.step-current {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
    margin-top: 12px;
+    color: #303133;
+}
+
+.step-current__count {
+    flex: none;
+    color: #409eff;
+    font-weight: 600;
+}
+
+.step-current__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.step-scrollbar {
+    margin-top: 4px;
    white-space: nowrap;

    .step-wrapper {
        display: inline-block;
-        /* 让wrapper宽度由内容决定 */
-        width: 100%;
-        /* 至少和容器一样宽 */
+        width: max-content;
+        min-width: 100%;
        white-space: nowrap;
-        /* 防止 flex 项换行 */
-
        margin: 10px 0 20px 0;

        :deep(.el-steps) {
            flex-wrap: nowrap;
-            width: calc(100% - 150px);
+            width: max-content;
+            min-width: 100%;

            .el-step {
-                flex-shrink: 0 !important;
-                /* 禁止步骤项被压缩 */
-                min-width: 150px;
-                /* 每个步骤的最小宽度，按需调整 */
+                flex: 0 0 180px !important;
+                min-width: 180px;
            }
        }
    }
 }
-</style>
+</style>