111 lines
2.8 KiB
Vue
111 lines
2.8 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" :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 planType = ref("");
|
||
|
|
const fkPlanId = ref("");
|
||
|
|
const executeKey = ref("");
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
planType.value = proxy.$route.query.planType;
|
||
|
|
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>
|