From e18f095e82e0dffdf349c8e8e70c713655e7e09d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Thu, 8 May 2025 14:27:55 +0800
Subject: [PATCH] 123

---
 .../deviceTaskExecute/TheTaskExecuteView.vue  | 189 +++++++++++-------
 1 file changed, 113 insertions(+), 76 deletions(-)

diff --git a/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue b/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue
index 8e07315..8538f15 100644
--- a/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue
+++ b/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue
@@ -1,120 +1,157 @@
 <template>
-	<div class="main-box">
-		<el-row :gutter="20">
-			<el-col :span="18">
-				<el-steps direction="horizontal" :active="deviceStepsActive" finish-status="success">
-					<el-step v-for="(item, index) in deviceStepsList" :title="item.deviceName" :key="index" />
-				</el-steps>
-			</el-col>
-			<el-col :span="6">
-				<div>
-					<el-button v-if="deviceStepsActive > 0" type="info" @click="doDeviceStepsBack">上一个设备</el-button>
-					<el-button v-if="deviceStepsActive < deviceStepsList.length" type="primary"
-						@click="doDeviceStepsNext">下一个设备</el-button>
-				</div>
-			</el-col>
-		</el-row>
-		<TheTaskExecuteDeviceItemStep ref="ItemStepRef" v-loading="loading" :deviceItem="deviceStepData"
-			:fkPlanId="fkPlanId" :planType="planType" :innerType="innerType" :executeKey="executeKey" @doClose="close">
-		</TheTaskExecuteDeviceItemStep>
-	</div>
+    <div class="main-box">
+        <el-row :gutter="20">
+            <el-col :span="18">
+                <!-- 添加 steps-wrapper 容器 -->
+                <div ref="stepsWrapperRef" class="steps-wrapper">
+                    <el-steps direction="horizontal" :active="deviceStepsActive" finish-status="success" class="custom-steps">
+                        <el-step v-for="(item, index) in deviceStepsList" :title="item.deviceName" :key="index" class="custom-step" />
+                    </el-steps>
+                </div>
+            </el-col>
+            <el-col :span="6">
+                <div>
+                    <el-button v-if="deviceStepsActive > 0" type="info" @click="doDeviceStepsBack">上一个设备</el-button>
+                    <el-button v-if="deviceStepsActive < deviceStepsList.length" type="primary" @click="doDeviceStepsNext">下一个设备</el-button>
+                </div>
+            </el-col>
+        </el-row>
+        <TheTaskExecuteDeviceItemStep
+            ref="ItemStepRef"
+            v-loading="loading"
+            :deviceItem="deviceStepData"
+            :fkPlanId="fkPlanId"
+            :planType="planType"
+            :innerType="innerType"
+            :executeKey="executeKey"
+            @doClose="close">
+        </TheTaskExecuteDeviceItemStep>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted, getCurrentInstance, nextTick } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import {
-	AchieveTaskbindDevice,
-} from '@/api/deviceManagement/devicetaskexecute.js'
+import { AchieveTaskbindDevice } from '@/api/deviceManagement/devicetaskexecute.js'
 import { default as TheTaskExecuteDeviceItemStep } from './TheTaskExecuteDeviceItemStep'
 
 const emit = defineEmits()
 const { proxy } = getCurrentInstance()
-// const form = reactive({})
+const stepsWrapperRef = ref(null)
 
-const fkPlanId = ref("");
-const executeKey = ref("");
+const fkPlanId = ref('')
+const executeKey = ref('')
 // 1-检查 2-保养
-const innerType = ref(null);
+const innerType = ref(null)
 // 1-巡检 2-点检
-const planType = ref(null);
+const planType = ref(null)
 
 function init() {
-	planType.value = proxy.$route.query.planType;
-	innerType.value = proxy.$route.query.innerType;
-	fkPlanId.value = proxy.$route.query.fkPlanId;
-	executeKey.value = proxy.$route.query.executeKey;
+    planType.value = proxy.$route.query.planType
+    innerType.value = proxy.$route.query.innerType
+    fkPlanId.value = proxy.$route.query.fkPlanId
+    executeKey.value = proxy.$route.query.executeKey
 
-	deviceStepsActive.value = 0;
-	deviceStepsList.value = [];
-	getDeviceStepsData();
+    deviceStepsActive.value = 0
+    deviceStepsList.value = []
+    getDeviceStepsData()
 }
 
 function close() {
-	proxy.$router.back();
+    proxy.$router.back()
 }
-const deviceStepsList = ref([]);
-const deviceStepsActive = ref(0);
+const deviceStepsList = ref([])
+const deviceStepsActive = ref(0)
 // 获取设备步进
 function getDeviceStepsData() {
-	AchieveTaskbindDevice(executeKey.value).then(res => {
-		const { code, data } = res;
-		// console.log(1, 'getDeviceStepsData', data);
-		if (code === 200) {
-			// console.log(2, data);
-			deviceStepsList.value = data;
-		}
-	})
+    AchieveTaskbindDevice(executeKey.value).then((res) => {
+        const { code, data } = res
+        if (code === 200) {
+            deviceStepsList.value = data
+        }
+    })
 }
 // 计算当前选择设备
 const deviceStepData = computed(() => {
-	try {
-		return deviceStepsList.value[deviceStepsActive.value];
-	} catch (e) {
-		return null;
-	}
-});
+    try {
+        return deviceStepsList.value[deviceStepsActive.value]
+    } catch (e) {
+        return null
+    }
+})
 
 // 设备Steps前进
 function doDeviceStepsNext() {
-	if (deviceStepsActive.value >= deviceStepsList.value.length) {
-		return;
-	}
-	deviceStepsActive.value += 1;
-	// getItemSetup();
-	doLoading();
+    if (deviceStepsActive.value >= deviceStepsList.value.length) {
+        return
+    }
+    deviceStepsActive.value += 1
+    doLoading()
+    scrollToActiveStep()
 }
 // 设备Steps后退
 function doDeviceStepsBack() {
-	if (deviceStepsActive.value <= 0) {
-		return;
-	}
-	deviceStepsActive.value -= 1;
-	// getItemSetup();
-	doLoading();
+    if (deviceStepsActive.value <= 0) {
+        return
+    }
+    deviceStepsActive.value -= 1
+    doLoading()
+    scrollToActiveStep()
 }
+
+// 滚动到激活的步骤
+function scrollToActiveStep() {
+    nextTick(() => {
+        const stepsWrapper = stepsWrapperRef.value
+        const activeStep = stepsWrapper.querySelector(`.custom-step:nth-child(${deviceStepsActive.value + 1})`)
+        if (activeStep) {
+            const wrapperRect = stepsWrapper.getBoundingClientRect()
+            const stepRect = activeStep.getBoundingClientRect()
+            const offset = stepRect.left - wrapperRect.left
+            if (offset < 0 || offset + stepRect.width > wrapperRect.width) {
+                stepsWrapper.scrollLeft += offset - (wrapperRect.width - stepRect.width) / 2
+            }
+        }
+    })
+}
+
 // loading缓冲
-const loading = ref(false);
+const loading = ref(false)
 
 function doLoading() {
-	loading.value = true;
-	setTimeout(() => {
-		loading.value = false;
-	}, 500)
+    loading.value = true
+    setTimeout(() => {
+        loading.value = false
+    }, 500)
 }
-const ItemStepRef = ref(null);
+const ItemStepRef = ref(null)
 onMounted(() => {
-	init();
-});
-// init();
+    init()
+})
 </script>
 
 <style scoped>
 .dialog-footer-left {
-	text-align: left;
+    text-align: left;
 }
 
 .main-box {
-	padding: 10px;
+    padding: 10px;
 }
-</style>
\ No newline at end of file
+/* 步骤容器：允许横向滚动，禁止换行 */
+.steps-wrapper {
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 10px 0;
+}
+
+/* 自定义 el-steps 样式：取消弹性收缩，避免步骤被压缩 */
+.custom-steps {
+    display: inline-flex;
+    width: max-content;
+}
+
+.custom-step {
+    flex-shrink: 0;
+}
+</style>