SmartBench/CMVR-IOT-UI
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lxl-dev #3

Merged
zhanghao merged 122 commits from lxl-dev into dev 2026-08-24 13:55:18 +08:00
Conversation 0 Commits 122 Files Changed 120 +100 -42
2 changed files with 100 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e50a6a481f - Show all commits

71
src/views/inspection/runTask/task-steps.vue
View File

@ -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>

71
src/views/intelligenceTest/runningTask/task-steps.vue
View File

@ -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>