123
This commit is contained in:
@@ -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>
|
||||
/* 步骤容器：允许横向滚动，禁止换行 */
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user