✨ feat: 增加智慧库房,完善项目盈亏
This commit is contained in:
119
pages/workbench/smartWM/components/SummaryCards.vue
Normal file
119
pages/workbench/smartWM/components/SummaryCards.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="summary-cards-container">
|
||||
<scroll-view
|
||||
scroll-x="true"
|
||||
class="cards-scroll"
|
||||
show-scrollbar="false"
|
||||
>
|
||||
<view class="cards-wrapper">
|
||||
<view
|
||||
class="summary-card"
|
||||
v-for="(card, index) in cardsData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="card-title">{{ card.title }}</view>
|
||||
<view class="card-value">{{ formatNumber(card.value) }}</view>
|
||||
<view
|
||||
class="card-trend"
|
||||
:class="{ 'trend-up': card.trend > 0, 'trend-down': card.trend < 0, 'trend-flat': card.trend === 0 }"
|
||||
>
|
||||
<text v-if="card.trend !== 0">
|
||||
<uni-icons
|
||||
:type="card.trend > 0 ? 'arrowup' : 'arrowdown'"
|
||||
size="16"
|
||||
></uni-icons>
|
||||
{{ Math.abs(card.trend) }}%
|
||||
{{ card.trend > 0 ? '环比上月' : '环比昨日' }}
|
||||
</text>
|
||||
<text v-else>持平</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SummaryCards',
|
||||
props: {
|
||||
// 接收卡片数据,格式为数组对象
|
||||
cardsData: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ title: '当前总库存量', value: 0, trend: 0 },
|
||||
{ title: '在途物料数量', value: 0, trend: 0 },
|
||||
{ title: '今日入库量', value: 0, trend: 0 },
|
||||
{ title: '今日出库量', value: 0, trend: 0 },
|
||||
{ title: '预警信息', value: 0, trend: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 格式化数字,添加千位分隔符
|
||||
formatNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.summary-cards-container {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cards-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
min-width: 240rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.trend-up {
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.trend-down {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.trend-flat {
|
||||
color: #888888;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user