beizeValveMesVue/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.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>