<template>
|
<div class="workstation-transfer-config">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="扫码间隔(秒)">
|
<el-input-number
|
v-model="scanIntervalSeconds"
|
:min="1"
|
:max="60"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">定时查询最近扫码玻璃的时间间隔,默认10秒</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="缓冲判定时间(秒)">
|
<el-input-number
|
v-model="transferDelaySeconds"
|
:min="5"
|
:max="120"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">30秒内无新玻璃扫码则判定为最后一片,默认30秒</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="车辆容量(mm)">
|
<el-input-number
|
v-model="config.vehicleCapacity"
|
:min="1000"
|
:max="20000"
|
:step="100"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">可装载的最大宽度(毫米),默认6000mm</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="监控间隔(秒)">
|
<el-input-number
|
v-model="monitorIntervalSeconds"
|
:min="1"
|
:max="60"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">批次处理监控间隔,默认使用扫码间隔</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="产线编号">
|
<el-input-number
|
v-model="config.workLine"
|
:min="1"
|
:max="100"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">产线编号,用于过滤玻璃信息</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="位置值(格)">
|
<el-input-number
|
v-model="config.inPosition"
|
:min="0"
|
:max="1000"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">写入PLC的inPosition值(格子)</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
// 配置数据
|
const config = ref({
|
scanIntervalMs: 10000,
|
transferDelayMs: 30000,
|
vehicleCapacity: 6000,
|
monitorIntervalMs: 10000,
|
workLine: null,
|
inPosition: null
|
})
|
|
// 时间字段(秒)- 用于前端显示和输入
|
const scanIntervalSeconds = ref(10)
|
const transferDelaySeconds = ref(30)
|
const monitorIntervalSeconds = ref(10)
|
|
// 监听props变化
|
watch(() => props.modelValue, (newVal) => {
|
if (newVal && Object.keys(newVal).length > 0) {
|
config.value = {
|
scanIntervalMs: newVal.scanIntervalMs ?? 10000,
|
transferDelayMs: newVal.transferDelayMs ?? 30000,
|
vehicleCapacity: newVal.vehicleCapacity ?? 6000,
|
monitorIntervalMs: newVal.monitorIntervalMs ?? newVal.scanIntervalMs ?? 10000,
|
workLine: newVal.workLine ?? null,
|
inPosition: newVal.inPosition ?? null
|
}
|
// 将毫秒转换为秒用于显示
|
scanIntervalSeconds.value = (config.value.scanIntervalMs ?? 10000) / 1000
|
transferDelaySeconds.value = (config.value.transferDelayMs ?? 30000) / 1000
|
monitorIntervalSeconds.value = (config.value.monitorIntervalMs ?? 10000) / 1000
|
}
|
}, { immediate: true, deep: true })
|
|
// 监听秒字段变化,转换为毫秒并更新config
|
watch(scanIntervalSeconds, (val) => {
|
config.value.scanIntervalMs = Math.round(val * 1000)
|
// 如果monitorIntervalMs未设置,则使用scanIntervalMs
|
if (!props.modelValue?.monitorIntervalMs) {
|
config.value.monitorIntervalMs = config.value.scanIntervalMs
|
monitorIntervalSeconds.value = val
|
}
|
emit('update:modelValue', { ...config.value })
|
})
|
|
watch(transferDelaySeconds, (val) => {
|
config.value.transferDelayMs = Math.round(val * 1000)
|
emit('update:modelValue', { ...config.value })
|
})
|
|
watch(monitorIntervalSeconds, (val) => {
|
config.value.monitorIntervalMs = Math.round(val * 1000)
|
emit('update:modelValue', { ...config.value })
|
})
|
|
// 监听config其他字段变化,同步到父组件
|
watch(() => [
|
config.value.vehicleCapacity,
|
config.value.workLine,
|
config.value.inPosition
|
], () => {
|
emit('update:modelValue', { ...config.value })
|
}, { deep: true })
|
</script>
|
|
<style scoped>
|
.form-tip {
|
margin-left: 10px;
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|