|
|
|
|
@ -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;
|
|
|
|
|
|