cmc / huaheng-cmc · Files

<template>
	<div class="device-management">
		<div class="parent-container">
			<task-list-panel :task-list="taskList" :active-device="activeDevice" @select="getTask" />

			<div class="right-div" v-show="isRightDetailVisible">
				<task-detail-panel :active-step="temp" :device-status="deviceStatus" :field-list="fieldList" />

				<div class="reserved-area">
					<div v-if="isLoadingOperationPanel" class="operation-loading">加载中...</div>
					<task-operation-panel v-else :task-id="taskId" :current-task-id="currentTaskId" :base-url-button="baseUrlButton" :base-url-off-two="baseUrlOffTwo" :qust-data="qustData" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { CMC_OFFLINE_TASK_API, CMC_REQUEST_URL } from '@/api/cmcApi'
import TaskListPanel from './TaskListPanel.vue'
import TaskDetailPanel from './TaskDetailPanel.vue'
import TaskOperationPanel from './TaskOperationPanel.vue'

export default {
	name: 'CurrentTaskView',
	components: {
		TaskListPanel,
		TaskDetailPanel,
		TaskOperationPanel,
	},
	props: {
		userName: {
			type: String,
			default: '',
		},
	},
	watch: {
		userName: {
			immediate: true,
			handler() {
				this.getData()
			},
		},
		taskList: {
			immediate: true,
			handler(newList) {
				if (!newList || newList.length === 0) {
					this.isRightDetailVisible = false
					this.activeDevice = null
					this.currentTaskId = null
					if (this.taskRefreshTimer) {
						clearInterval(this.taskRefreshTimer)
						this.taskRefreshTimer = null
					}
					return
				}

				const isCurrentTaskExist = newList.some((item) => item.taskId === this.currentTaskId)
				if (this.activeDevice === null || !isCurrentTaskExist) {
					this.getTask(0, newList[0])
					return
				}

				this.activeDevice = newList.findIndex((item) => item.taskId === this.currentTaskId)
			},
		},
	},
	data() {
		return {
			baseUrlOffOne: CMC_OFFLINE_TASK_API,
			baseUrlOnLineOne: window.appConfig.baseUrlintTwo,
			baseUrlOffTwo: CMC_OFFLINE_TASK_API,
			baseUrlOnLineTwo: window.appConfig.baseUrlintTotalConversion,
			sysData: {},
			activeDevice: null,
			taskList: [],
			operation: '',
			fieldList: [
				{ label: '任务ID', value: '' },
				{ label: '任务类型', value: '' },
				{ label: '库区', value: '' },
				{ label: '任务起始位置', value: '' },
				{ label: '任务目标位置', value: '' },
				{ label: '托盘编码', value: '' },
				{ label: '托盘当前位置', value: '' },
				{ label: '任务优先级', value: '' },
				{ label: '任务状态', value: '' },
				{ label: '执行设备', value: '' },
				{ label: '设备状态', value: '' },
				{ label: '设备运行模式', value: '' },
				{ label: '设备当前位置', value: '' },
				{ label: '任务持续时间', value: '' },
			],
			deviceStatus: [],
			qustData: [],
			temp: 0,
			currentTaskId: null,
			taskRefreshTimer: null,
			globalTimer: null,
			isRightDetailVisible: true,
			isLoadingOperationPanel: false,
			baseUrlButton: window.appConfig.baseUrlintTotalConversion || CMC_OFFLINE_TASK_API,
			taskId: 1234,
		}
	},
	methods: {
		pauseApiRequest() {
			if (this.globalTimer) {
				clearInterval(this.globalTimer)
				this.globalTimer = null
			}
			if (this.taskRefreshTimer) {
				clearInterval(this.taskRefreshTimer)
				this.taskRefreshTimer = null
			}
		},
		getData() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? `${this.baseUrlOnLineOne}?zoneCode=${this.userName}` : `${this.baseUrlOffOne}?zoneCode=${this.userName}`,
				logTitle: '任务列表',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.querdata(res.data.result)
				res.data.result.forEach((x) => {
					x.taskDurationSeconds = Number((x.taskDurationSeconds / 60).toFixed(2))
				})
				this.taskList = res.data.result
			}
			''.ajax(this, opt, callBackFn)
		},
		priority() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineTwo : this.baseUrlOffTwo,
				logTitle: '更改优先级',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: CMC_REQUEST_URL.updatePriority,
					requestService: 'WMS',
					requestBody: {
						id: this.operation.taskId,
						priority: this.operation.taskPriority,
					},
				},
			}
			const callBackFn = (res) => {
				this.$message({
					showClose: true,
					message: res.data.message,
					type: res.data.code == 200 ? 'success' : 'error',
				})
			}
			''.ajax(this, opt, callBackFn)
		},
		cancelTask() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineTwo : this.baseUrlOffTwo,
				logTitle: '取消任务',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: CMC_REQUEST_URL.cancelTask,
					requestService: 'WMS',
					requestBody: {
						id: this.operation.taskId,
					},
				},
			}
			const callBackFn = (res) => {
				this.$message({
					showClose: true,
					message: res.data.message,
					type: res.data.code == 200 ? 'success' : 'error',
				})
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null || res.data.result.length === 0) {
				this.sysData = []
				this.taskList = []
				this.querdata([])
				''.Log(`${title}无数据`, 'getData')
				return false
			}
			return true
		},
		getTask(index, data) {
			this.isLoadingOperationPanel = true
			this.qustData = []
			this.deviceStatus = []

			if (this.currentTaskId === data.taskId) {
				this.isRightDetailVisible = false
				this.currentTaskId = null
				this.activeDevice = null
				this.isLoadingOperationPanel = false
				if (this.taskRefreshTimer) {
					clearInterval(this.taskRefreshTimer)
					this.taskRefreshTimer = null
				}
				return
			}

			this.isRightDetailVisible = true
			this.activeDevice = index
			this.currentTaskId = data.taskId
			this.progress(data)
			this.refreshTaskStatus(data)

			if (this.taskRefreshTimer) clearInterval(this.taskRefreshTimer)
			this.taskRefreshTimer = setInterval(() => {
				this.getData()
				setTimeout(() => {
					const latestTask = this.taskList.find((item) => item.taskId === this.currentTaskId)
					if (!latestTask) return
					this.isLoadingOperationPanel = true
					this.progress(latestTask)
					this.refreshTaskStatus(latestTask)
				}, 200)
			}, 1000)
		},
		refreshTaskStatus(task) {
			const taskStatusList = Object.entries(task.taskStatusTimestamps || {}).map(([key, value]) => ({
				key: key,
				value: value,
				color: task.taskStatusColor,
				Message: task.exceptionMessage,
				handlePlan: task.exceptionHandlePlan,
				taskId: task.taskId,
				taskPriority: task.taskPriority,
				executionEquipmentId: task.executionEquipmentId,
				fromLocation: task.fromLocation,
				toLocation: task.toLocation,
			}))
			if (!taskStatusList.length) {
				this.temp = -1
				this.deviceStatus = []
				this.qustData = []
				this.isLoadingOperationPanel = false
				return
			}

			let lastValidIndex = -1
			taskStatusList.forEach((item, idx) => {
				if (item.color == 'red') {
					if (item.value !== null) lastValidIndex = idx - 1
				} else if (item.value !== null) {
					lastValidIndex = idx
				}
			})
			this.temp = lastValidIndex
			this.deviceStatus = this.dataHandle(taskStatusList)
			this.qustData = JSON.parse(JSON.stringify(this.deviceStatus))
			this.isLoadingOperationPanel = false
		},
		dataHandle(data) {
			const temp = data.map((item) => ({ ...item, time: '' }))
			const lastValidIndex = temp.findLastIndex((item) => item.value !== null)
			temp.forEach((item, idx) => {
				if (idx !== lastValidIndex) {
					item.handlePlan = item.Message = ''
				}
			})
			return temp
		},
		progress(item) {
			this.fieldList[0].value = item.taskId
			this.fieldList[1].value = item.taskTypeDescription
			this.fieldList[2].value = item.zoneCodeDescription
			this.fieldList[3].value = item.fromLocation
			this.fieldList[4].value = item.toLocation
			this.fieldList[5].value = item.containerCode
			this.fieldList[6].value = item.containerCurrentLocation
			this.fieldList[7].value = item.taskPriority
			this.fieldList[8].value = item.taskStatusDescription
			this.fieldList[9].value = item.executionEquipmentId
			this.fieldList[10].value = item.equipmentStatusDescription
			this.fieldList[11].value = item.equipmentOperationModeDescription
			this.fieldList[12].value = item.equipmentCurrentPosition
			this.fieldList[13].value = item.taskDurationSecondsFormat
		},
		querdata(data) {
			const targetItem = data.find((item) => item.exceptionMessage)
			this.sendToParent(targetItem ? targetItem.exceptionMessage : '')
		},
		sendToParent(data) {
			this.$emit('send-data', data)
		},
		intInterval() {
			if (this.globalTimer) clearInterval(this.globalTimer)
			this.globalTimer = setInterval(() => {
				this.getData()
			}, 1000)
		},
	},
	mounted() {
		if (!this.userName) {
			this.taskList = []
			this.isRightDetailVisible = false
		}
	},
	beforeDestroy() {
		this.pauseApiRequest()
	},
}
</script>

<style src="../../styles/current-task.css"></style>