123
This commit is contained in:
parent
b5e0e31cb1
commit
e18f095e82
@ -1,120 +1,157 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-box">
|
<div class="main-box">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="18">
|
<el-col :span="18">
|
||||||
<el-steps direction="horizontal" :active="deviceStepsActive" finish-status="success">
|
<!-- 添加 steps-wrapper 容器 -->
|
||||||
<el-step v-for="(item, index) in deviceStepsList" :title="item.deviceName" :key="index" />
|
<div ref="stepsWrapperRef" class="steps-wrapper">
|
||||||
</el-steps>
|
<el-steps direction="horizontal" :active="deviceStepsActive" finish-status="success" class="custom-steps">
|
||||||
</el-col>
|
<el-step v-for="(item, index) in deviceStepsList" :title="item.deviceName" :key="index" class="custom-step" />
|
||||||
<el-col :span="6">
|
</el-steps>
|
||||||
<div>
|
</div>
|
||||||
<el-button v-if="deviceStepsActive > 0" type="info" @click="doDeviceStepsBack">上一个设备</el-button>
|
</el-col>
|
||||||
<el-button v-if="deviceStepsActive < deviceStepsList.length" type="primary"
|
<el-col :span="6">
|
||||||
@click="doDeviceStepsNext">下一个设备</el-button>
|
<div>
|
||||||
</div>
|
<el-button v-if="deviceStepsActive > 0" type="info" @click="doDeviceStepsBack">上一个设备</el-button>
|
||||||
</el-col>
|
<el-button v-if="deviceStepsActive < deviceStepsList.length" type="primary" @click="doDeviceStepsNext">下一个设备</el-button>
|
||||||
</el-row>
|
</div>
|
||||||
<TheTaskExecuteDeviceItemStep ref="ItemStepRef" v-loading="loading" :deviceItem="deviceStepData"
|
</el-col>
|
||||||
:fkPlanId="fkPlanId" :planType="planType" :innerType="innerType" :executeKey="executeKey" @doClose="close">
|
</el-row>
|
||||||
</TheTaskExecuteDeviceItemStep>
|
<TheTaskExecuteDeviceItemStep
|
||||||
</div>
|
ref="ItemStepRef"
|
||||||
|
v-loading="loading"
|
||||||
|
:deviceItem="deviceStepData"
|
||||||
|
:fkPlanId="fkPlanId"
|
||||||
|
:planType="planType"
|
||||||
|
:innerType="innerType"
|
||||||
|
:executeKey="executeKey"
|
||||||
|
@doClose="close">
|
||||||
|
</TheTaskExecuteDeviceItemStep>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, computed, onMounted, getCurrentInstance, nextTick } from 'vue'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import {
|
import { AchieveTaskbindDevice } from '@/api/deviceManagement/devicetaskexecute.js'
|
||||||
AchieveTaskbindDevice,
|
|
||||||
} from '@/api/deviceManagement/devicetaskexecute.js'
|
|
||||||
import { default as TheTaskExecuteDeviceItemStep } from './TheTaskExecuteDeviceItemStep'
|
import { default as TheTaskExecuteDeviceItemStep } from './TheTaskExecuteDeviceItemStep'
|
||||||
|
|
||||||
const emit = defineEmits()
|
const emit = defineEmits()
|
||||||
const { proxy } = getCurrentInstance()
|
const { proxy } = getCurrentInstance()
|
||||||
// const form = reactive({})
|
const stepsWrapperRef = ref(null)
|
||||||
|
|
||||||
const fkPlanId = ref("");
|
const fkPlanId = ref('')
|
||||||
const executeKey = ref("");
|
const executeKey = ref('')
|
||||||
// 1-检查 2-保养
|
// 1-检查 2-保养
|
||||||
const innerType = ref(null);
|
const innerType = ref(null)
|
||||||
// 1-巡检 2-点检
|
// 1-巡检 2-点检
|
||||||
const planType = ref(null);
|
const planType = ref(null)
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
planType.value = proxy.$route.query.planType;
|
planType.value = proxy.$route.query.planType
|
||||||
innerType.value = proxy.$route.query.innerType;
|
innerType.value = proxy.$route.query.innerType
|
||||||
fkPlanId.value = proxy.$route.query.fkPlanId;
|
fkPlanId.value = proxy.$route.query.fkPlanId
|
||||||
executeKey.value = proxy.$route.query.executeKey;
|
executeKey.value = proxy.$route.query.executeKey
|
||||||
|
|
||||||
deviceStepsActive.value = 0;
|
deviceStepsActive.value = 0
|
||||||
deviceStepsList.value = [];
|
deviceStepsList.value = []
|
||||||
getDeviceStepsData();
|
getDeviceStepsData()
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
proxy.$router.back();
|
proxy.$router.back()
|
||||||
}
|
}
|
||||||
const deviceStepsList = ref([]);
|
const deviceStepsList = ref([])
|
||||||
const deviceStepsActive = ref(0);
|
const deviceStepsActive = ref(0)
|
||||||
// 获取设备步进
|
// 获取设备步进
|
||||||
function getDeviceStepsData() {
|
function getDeviceStepsData() {
|
||||||
AchieveTaskbindDevice(executeKey.value).then(res => {
|
AchieveTaskbindDevice(executeKey.value).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res
|
||||||
// console.log(1, 'getDeviceStepsData', data);
|
if (code === 200) {
|
||||||
if (code === 200) {
|
deviceStepsList.value = data
|
||||||
// console.log(2, data);
|
}
|
||||||
deviceStepsList.value = data;
|
})
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
// 计算当前选择设备
|
// 计算当前选择设备
|
||||||
const deviceStepData = computed(() => {
|
const deviceStepData = computed(() => {
|
||||||
try {
|
try {
|
||||||
return deviceStepsList.value[deviceStepsActive.value];
|
return deviceStepsList.value[deviceStepsActive.value]
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return null;
|
return null
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// 设备Steps前进
|
// 设备Steps前进
|
||||||
function doDeviceStepsNext() {
|
function doDeviceStepsNext() {
|
||||||
if (deviceStepsActive.value >= deviceStepsList.value.length) {
|
if (deviceStepsActive.value >= deviceStepsList.value.length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
deviceStepsActive.value += 1;
|
deviceStepsActive.value += 1
|
||||||
// getItemSetup();
|
doLoading()
|
||||||
doLoading();
|
scrollToActiveStep()
|
||||||
}
|
}
|
||||||
// 设备Steps后退
|
// 设备Steps后退
|
||||||
function doDeviceStepsBack() {
|
function doDeviceStepsBack() {
|
||||||
if (deviceStepsActive.value <= 0) {
|
if (deviceStepsActive.value <= 0) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
deviceStepsActive.value -= 1;
|
deviceStepsActive.value -= 1
|
||||||
// getItemSetup();
|
doLoading()
|
||||||
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缓冲
|
// loading缓冲
|
||||||
const loading = ref(false);
|
const loading = ref(false)
|
||||||
|
|
||||||
function doLoading() {
|
function doLoading() {
|
||||||
loading.value = true;
|
loading.value = true
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
loading.value = false;
|
loading.value = false
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
const ItemStepRef = ref(null);
|
const ItemStepRef = ref(null)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init();
|
init()
|
||||||
});
|
})
|
||||||
// init();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dialog-footer-left {
|
.dialog-footer-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-box {
|
.main-box {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
/* 步骤容器：允许横向滚动，禁止换行 */
|
||||||
|
.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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user