优化轴详情布局,添加生产计算功能,支持总轴数编辑和小时/天产量计算

master
huangjinysf 2 months ago
parent d8c2c7eaeb
commit 82e777fcc6

@ -61,21 +61,21 @@
<el-table-column prop="breakdown_name" label="故障名称" width="120" align="center" />
<el-table-column prop="breakdown_description" label="故障描述" min-width="150" show-overflow-tooltip />
<el-table-column prop="repair_method" label="维修方法" min-width="150" show-overflow-tooltip />
<el-table-column prop="apply_time" label="报修时间" width="160" align="center">
<el-table-column prop="apply_time" label="报修时间" width="200" align="center">
<template #default="scope">
<span :class="{ 'recent': isRecent(scope.row.repair_time) }">
{{ scope.row.apply_time || '无' }}
</span>
</template>
</el-table-column>
<el-table-column prop="repair_time" label="维修时间" width="160" align="center">
<el-table-column prop="repair_time" label="维修时间" width="200" align="center">
<template #default="scope">
<span :class="{ 'recent': isRecent(scope.row.repair_time) }">
{{ scope.row.repair_time || '无' }}
</span>
</template>
</el-table-column>
<el-table-column label="维修时长" width="100" align="center">
<el-table-column label="维修时长" width="160" align="center">
<template #default="scope">
{{ calculateRepairDuration(scope.row.apply_time, scope.row.repair_time) }}
</template>

@ -141,7 +141,7 @@ const equipmentTypes = ref([
])
const queryForm = ref({
selectedTimeRange: "近1年",
selectedTimeRange: "近2年",
selectedEquipmentType: "漆包机"
})
const paretoData = ref([])

@ -77,17 +77,13 @@
{{ selectedAxle.update_time ? '运行中' : '不在运行' }}
</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<div v-if="selectedAxle.update_time" class="detail-row specification-row">
<span class="detail-label">规格:</span>
<span class="detail-value">{{ selectedAxle.specification || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">型号:</span>
<span class="detail-value">{{ selectedAxle.model || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">线盘:</span>
<span class="detail-value">{{ selectedAxle.raw_wire_disc || '无' }}</span>
<span class="detail-value spec-item">{{ selectedAxle.specification || '无' }}</span>
<span class="detail-label model-label">型号:</span>
<span class="detail-value model-item">{{ selectedAxle.model || '无' }}</span>
<span class="detail-label disc-label">线盘:</span>
<span class="detail-value disc-item">{{ selectedAxle.raw_wire_disc || '无' }}</span>
</div>
<div v-if="selectedAxle.update_time" class="detail-row">
<span class="detail-label">完成度:</span>
@ -95,17 +91,13 @@
</div>
<div v-if="selectedAxle.update_time && (selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight)" class="stock-details">
<div class="detail-title">库存信息</div>
<div v-if="selectedAxle.total_number" class="detail-row">
<span class="detail-label">总箱数:</span>
<span class="detail-value">{{ selectedAxle.total_number }}</span>
</div>
<div v-if="selectedAxle.total_net_weight" class="detail-row">
<span class="detail-label">总净重:</span>
<span class="detail-value">{{ selectedAxle.total_net_weight }}kg</span>
</div>
<div v-if="selectedAxle.total_gross_weight" class="detail-row">
<span class="detail-label">总毛重:</span>
<span class="detail-value">{{ selectedAxle.total_gross_weight }}kg</span>
<div v-if="selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight" class="detail-row stock-row">
<span v-if="selectedAxle.total_number" class="detail-label stock-label">:</span>
<span v-if="selectedAxle.total_number" class="detail-value stock-item-number">{{ selectedAxle.total_number }}</span>
<span v-if="selectedAxle.total_net_weight" class="detail-label stock-label">:</span>
<span v-if="selectedAxle.total_net_weight" class="detail-value stock-item-weight">{{ selectedAxle.total_net_weight }}kg</span>
<span v-if="selectedAxle.total_gross_weight" class="detail-label stock-label">:</span>
<span v-if="selectedAxle.total_gross_weight" class="detail-value stock-item-weight">{{ selectedAxle.total_gross_weight }}kg</span>
</div>
</div>
@ -129,7 +121,26 @@
</div>
<div v-if="selectedAxle.total_quantity" class="detail-row">
<span class="detail-label">总轴数:</span>
<span class="detail-value">{{ selectedAxle.total_quantity }}</span>
<el-input-number
v-model="editableTotalQuantity"
:min="1"
:precision="0"
size="small"
@change="onTotalQuantityChange"
class="editable-input"
></el-input-number>
</div>
</div>
<div v-if="selectedAxle.update_time && selectedAxle.total_quantity && productionScheduleData && productionScheduleData.axle_final_average_speed && productionScheduleData.axle_final_average_weight" class="calculation-details">
<div class="detail-title">生产计算</div>
<div class="detail-row">
<span class="detail-label">小时轴数:</span>
<span class="detail-value">{{ calculateAxlesPerHour() }} </span>
</div>
<div class="detail-row">
<span class="detail-label">每天轴数:</span>
<span class="detail-value">{{ calculateAxlesPerDay() }} </span>
</div>
</div>
</div>
@ -180,7 +191,7 @@
<script setup>
import { defineProps, computed, ref, onMounted, nextTick, watch } from 'vue';
import { ElDialog, ElButton, ElSelect, ElOption, ElTabs, ElTabPane } from 'element-plus';
import { ElDialog, ElButton, ElSelect, ElOption, ElTabs, ElTabPane, ElInputNumber } from 'element-plus';
import { getDateRangeByTimeRange } from '@/utils/dateFormat';
import * as echarts from 'echarts';
import { API_CONFIG } from "@/config/api";
@ -477,7 +488,7 @@ const selectedEquipmentCode = ref('');
//
const historyDataLoading = ref(false);
const historyData = ref([]);
const selectedTimeRange = ref('近1周');
const selectedTimeRange = ref('近1月'); //
const activeChartTab = ref('totalNumber');
const hasHistoryData = ref(false);
@ -485,6 +496,9 @@ const hasHistoryData = ref(false);
const productionScheduleData = ref(null);
const productionScheduleLoading = ref(false);
//
const editableTotalQuantity = ref(0);
//
const totalNumberChartRef = ref(null);
const totalNetWeightChartRef = ref(null);
@ -670,6 +684,42 @@ const fetchProductionScheduleData = (model, specification, wireDisc, equipmentCo
});
};
// = * /
const calculateAxlesPerHour = () => {
if (!selectedAxle.value || !editableTotalQuantity.value ||
!productionScheduleData.value || !productionScheduleData.value.axle_final_average_speed ||
!productionScheduleData.value.axle_final_average_weight) {
return 0;
}
const totalQuantity = editableTotalQuantity.value;
const speed = productionScheduleData.value.axle_final_average_speed;
const weightPerAxle = productionScheduleData.value.axle_final_average_weight;
// * /
const result = (totalQuantity * speed / weightPerAxle);
return result.toFixed(2);
};
// = * 24
const calculateAxlesPerDay = () => {
const axlesPerHour = calculateAxlesPerHour();
return (axlesPerHour * 24).toFixed(2);
};
//
const onTotalQuantityChange = (newValue) => {
//
// Vue
};
//
watch(selectedAxle, (newVal) => {
if (newVal && newVal.total_quantity) {
editableTotalQuantity.value = newVal.total_quantity;
}
}, { immediate: true });
//
const initCharts = () => {
//
@ -1108,6 +1158,65 @@ const updateCharts = () => {
line-height: 1.5;
}
/* 规格、型号、线盘在同一行显示的特殊样式 */
.specification-row {
flex-wrap: wrap;
}
.spec-item {
background-color: rgba(64, 158, 255, 0.1);
padding: 2px 6px;
border-radius: 3px;
margin-right: 10px;
}
.model-label {
min-width: auto;
margin-left: 5px;
}
.model-item {
background-color: rgba(103, 194, 58, 0.1);
padding: 2px 6px;
border-radius: 3px;
margin-right: 10px;
}
.disc-label {
min-width: auto;
margin-left: 5px;
}
.disc-item {
background-color: rgba(230, 162, 60, 0.1);
padding: 2px 6px;
border-radius: 3px;
}
/* 库存信息在同一行显示的特殊样式 */
.stock-row {
flex-wrap: wrap;
}
.stock-label {
min-width: auto;
margin-left: 5px;
}
.stock-item-number {
background-color: rgba(64, 158, 255, 0.1);
padding: 2px 6px;
border-radius: 3px;
margin-right: 10px;
}
.stock-item-weight {
background-color: rgba(144, 147, 153, 0.1);
padding: 2px 6px;
border-radius: 3px;
margin-right: 10px;
}
.detail-label {
min-width: 100px;
font-weight: bold;
@ -1191,6 +1300,16 @@ const updateCharts = () => {
margin-top: 10px;
}
/* 生产计算面板样式 */
.calculation-details {
margin-top: 10px;
}
/* 可编辑输入框样式 */
.editable-input {
width: 100px;
}
/* 添加悬停效果,提示用户可以双击 */
.axle-item {
cursor: pointer;

Loading…
Cancel
Save