<template>
|
<!-- 使用原生实现替代 wd-popup -->
|
<view
|
v-if="visible"
|
style="
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.5);
|
z-index: 10000;
|
"
|
>
|
<view
|
class="statistics-modal"
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
|
>
|
<view class="modal-header">
|
<text class="title">单丝领用统计</text>
|
<wd-icon name="close" @click="handleClose" />
|
</view>
|
|
<view class="modal-content">
|
<view class="summary-section">
|
<view class="summary-item">
|
<text class="label">总盘数：</text>
|
<text class="value">{{ totalCount }} 盘</text>
|
</view>
|
<view class="summary-item">
|
<text class="label">总重量：</text>
|
<text class="value">{{ totalWeight.toFixed(2) }} kg</text>
|
</view>
|
<view class="summary-item">
|
<text class="label">总长度：</text>
|
<text class="value">{{ totalLength.toFixed(2) }} M</text>
|
</view>
|
</view>
|
|
<view class="layer-section">
|
<text class="section-title">各层统计</text>
|
<view class="layer-list">
|
<view v-for="layer in layerStatistics" :key="layer.twistedLayer" class="layer-item">
|
<view class="layer-header">
|
<text class="layer-name">{{ layer.twistedLayer }}</text>
|
<text class="layer-count">{{ layer.count }} 盘</text>
|
</view>
|
<view class="layer-details">
|
<text class="detail-text">重量：{{ layer.weight.toFixed(2) }} kg</text>
|
<text class="detail-text">长度：{{ layer.length.toFixed(2) }} M</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="modal-footer">
|
<wd-button @click="handleClose" type="default">取消</wd-button>
|
<wd-button type="primary" @click="handleConfirm" custom-class="confirm-btn">
|
确认保存
|
</wd-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
interface LayerStatistic {
|
twistedLayer: string;
|
count: number;
|
weight: number;
|
length: number;
|
}
|
|
const props = defineProps<{
|
visible: boolean;
|
nodeList: any[];
|
}>();
|
|
// 监听 visible 变化
|
watch(
|
() => props.visible,
|
() => {
|
// 可以在这里添加需要的逻辑
|
}
|
);
|
|
const emit = defineEmits<{
|
"update:visible": [value: boolean];
|
confirm: [];
|
}>();
|
|
// 计算统计数据
|
const layerStatistics = computed<LayerStatistic[]>(() => {
|
const stats: { [key: string]: LayerStatistic } = {};
|
|
// 遍历每层的单丝数据
|
props.nodeList.forEach((node) => {
|
const layerName = node.twistedLayer;
|
if (!stats[layerName]) {
|
stats[layerName] = {
|
twistedLayer: layerName,
|
count: 0,
|
weight: 0,
|
length: 0,
|
};
|
}
|
|
// 统计该层的单丝数据
|
if (node.strandedWireDish && Array.isArray(node.strandedWireDish)) {
|
node.strandedWireDish.forEach((item: any) => {
|
stats[layerName].count++;
|
stats[layerName].weight += parseFloat(item.actuallyWeight || 0);
|
stats[layerName].length += parseFloat(item.amount || 0);
|
});
|
}
|
});
|
|
return Object.values(stats);
|
});
|
|
// 计算总数据
|
const totalCount = computed(() => {
|
return layerStatistics.value.reduce((sum, layer) => sum + layer.count, 0);
|
});
|
|
const totalWeight = computed(() => {
|
return layerStatistics.value.reduce((sum, layer) => sum + layer.weight, 0);
|
});
|
|
const totalLength = computed(() => {
|
return layerStatistics.value.reduce((sum, layer) => sum + layer.length, 0);
|
});
|
|
const handleClose = () => {
|
emit("update:visible", false);
|
};
|
|
const handleConfirm = () => {
|
emit("confirm");
|
emit("update:visible", false);
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.statistics-modal {
|
width: 320px;
|
background: #fff;
|
border-radius: 12px;
|
overflow: hidden;
|
}
|
|
.modal-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px 20px;
|
border-bottom: 1px solid #f0f0f0;
|
|
.title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
}
|
|
.modal-content {
|
padding: 20px;
|
}
|
|
.summary-section {
|
margin-bottom: 20px;
|
|
.summary-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 8px;
|
|
.label {
|
font-size: 16px;
|
color: #666;
|
}
|
|
.value {
|
font-size: 16px;
|
font-weight: 600;
|
color: #0d867f;
|
}
|
}
|
}
|
|
.layer-section {
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 12px;
|
display: block;
|
}
|
|
.layer-list {
|
.layer-item {
|
background: #f8f9fa;
|
border-radius: 8px;
|
padding: 12px;
|
margin-bottom: 8px;
|
|
.layer-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 4px;
|
|
.layer-name {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.layer-count {
|
font-size: 14px;
|
color: #0d867f;
|
font-weight: 600;
|
}
|
}
|
|
.layer-details {
|
.detail-text {
|
font-size: 12px;
|
color: #666;
|
}
|
}
|
}
|
}
|
}
|
|
.modal-footer {
|
display: flex;
|
gap: 12px;
|
padding: 16px 20px;
|
border-top: 1px solid #f0f0f0;
|
|
.cancel-btn {
|
flex: 1;
|
}
|
|
.confirm-btn {
|
flex: 1;
|
}
|
}
|
|
// 确认按钮样式
|
:deep(.confirm-btn) {
|
background-color: #0d867f !important;
|
border-color: #0d867f !important;
|
}
|
|
:deep(.confirm-btn .wd-button__content) {
|
color: #fff !important;
|
}
|
</style>
|
