feat(钢卷管理): 新增生产时间记录及耗时计算功能

添加TimeInput组件用于时间输入,并在钢卷合并、分条、打字、分步操作中增加生产开始/结束时间字段
实现生产耗时自动计算功能,支持显示xx天xx小时xx分钟格式
在基础面板中增加生产时间修正对话框,支持批量修改时间
This commit is contained in:
砂糖
2026-03-17 18:01:46 +08:00
parent 3c9f82add4
commit 3d6391bf32
7 changed files with 552 additions and 42 deletions

View File

@@ -149,6 +149,15 @@
<el-form-item label="镀层种类" prop="coatingType">
<MemoInput storageKey="coatingType" v-model="splitForm.coatingType" placeholder="请输入镀层种类" />
</el-form-item>
<el-form-item label="生产开始时间" prop="productionStartTime">
<TimeInput v-model="splitForm.productionStartTime" @input="calculateProductionDuration" />
</el-form-item>
<el-form-item label="生产结束时间" prop="productionEndTime">
<TimeInput v-model="splitForm.productionEndTime" @input="calculateProductionDuration" :show-now-button="true" />
</el-form-item>
<el-form-item label="生产耗时" prop="productionDuration">
<el-input v-model="splitForm.formattedDuration" placeholder="自动计算" disabled />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="splitForm.remark" placeholder="请输入备注" type="textarea" />
</el-form-item>
@@ -187,6 +196,9 @@
m</el-descriptions-item>
<el-descriptions-item label="调制度">{{ selectedSplitItem.temperGrade || '-' }}</el-descriptions-item>
<el-descriptions-item label="镀层种类">{{ selectedSplitItem.coatingType || '-' }}</el-descriptions-item>
<el-descriptions-item label="生产开始时间">{{ selectedSplitItem.productionStartTime || '-' }}</el-descriptions-item>
<el-descriptions-item label="生产结束时间">{{ selectedSplitItem.productionEndTime || '-' }}</el-descriptions-item>
<el-descriptions-item label="生产耗时">{{ selectedSplitItem.formattedDuration || (selectedSplitItem.productionDuration ? selectedSplitItem.productionDuration + ' 分钟' : '-') }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ selectedSplitItem.remark || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
@@ -208,6 +220,7 @@ import ProductSelect from "@/components/KLPService/ProductSelect";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import TimeInput from "@/components/TimeInput";
import { generateCoilNoPrefix } from "@/utils/coil/coilNo";
export default {
@@ -231,6 +244,7 @@ export default {
RawMaterialSelect,
WarehouseSelect,
ActualWarehouseSelect,
TimeInput,
},
dicts: ['coil_quality_status'],
data() {
@@ -264,6 +278,10 @@ export default {
temperGrade: '',
coatingType: '',
remark: '',
productionStartTime: '',
productionEndTime: '',
productionDuration: '',
formattedDuration: '',
},
// 已分条钢卷列表
splitList: [],
@@ -443,6 +461,10 @@ export default {
temperGrade: '',
coatingType: '',
remark: '',
productionStartTime: '',
productionEndTime: '',
productionDuration: '',
formattedDuration: '',
parentCoilId: this.coilId,
}
},
@@ -547,6 +569,49 @@ export default {
}
})
},
// 格式化毫秒值为xx天xx小时xx分钟
formatDuration(milliseconds) {
if (!milliseconds || milliseconds < 0) return '';
const seconds = Math.floor(milliseconds / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const remainingHours = hours % 24;
const remainingMinutes = minutes % 60;
let result = '';
if (days > 0) result += `${days}`;
if (remainingHours > 0) result += `${remainingHours}小时`;
if (remainingMinutes > 0) result += `${remainingMinutes}分钟`;
return result || '0分钟';
},
// 计算生产耗时
calculateProductionDuration() {
const { productionStartTime, productionEndTime } = this.splitForm;
if (productionStartTime && productionEndTime) {
const start = new Date(productionStartTime).getTime();
const end = new Date(productionEndTime).getTime();
if (end < start) {
this.$message({
message: '结束时间不能早于开始时间',
type: 'error',
});
this.$set(this.splitForm, 'productionDuration', '');
this.$set(this.splitForm, 'formattedDuration', '');
} else {
const durationMs = end - start;
const durationMinutes = Math.round(durationMs / (1000 * 60));
this.$set(this.splitForm, 'productionDuration', durationMinutes);
this.$set(this.splitForm, 'formattedDuration', this.formatDuration(durationMinutes * 60 * 1000));
}
} else {
this.$set(this.splitForm, 'productionDuration', '');
this.$set(this.splitForm, 'formattedDuration', '');
}
}
},
}
</script>