120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import {
|
|
AchieveTaskbindDevice,
|
|
} from '@/api/deviceManagement/devicetaskexecute.js'
|
|
import { default as TheTaskExecuteDeviceItemStep } from './TheTaskExecuteDeviceItemStep'
|
|
|
|
const emit = defineEmits()
|
|
const { proxy } = getCurrentInstance()
|
|
// const form = reactive({})
|
|
|
|
const fkPlanId = ref("");
|
|
const executeKey = ref("");
|
|
// 1-检查 2-保养
|
|
const innerType = ref(null);
|
|
// 1-巡检 2-点检
|
|
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;
|
|
|
|
deviceStepsActive.value = 0;
|
|
deviceStepsList.value = [];
|
|
getDeviceStepsData();
|
|
}
|
|
|
|
function close() {
|
|
proxy.$router.back();
|
|
}
|
|
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;
|
|
}
|
|
})
|
|
}
|
|
// 计算当前选择设备
|
|
const deviceStepData = computed(() => {
|
|
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();
|
|
}
|
|
// 设备Steps后退
|
|
function doDeviceStepsBack() {
|
|
if (deviceStepsActive.value <= 0) {
|
|
return;
|
|
}
|
|
deviceStepsActive.value -= 1;
|
|
// getItemSetup();
|
|
doLoading();
|
|
}
|
|
// loading缓冲
|
|
const loading = ref(false);
|
|
|
|
function doLoading() {
|
|
loading.value = true;
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 500)
|
|
}
|
|
const ItemStepRef = ref(null);
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
// init();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-footer-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.main-box {
|
|
padding: 10px;
|
|
}
|
|
</style> |