bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

供应链数据总览页面绘制

This commit is contained in:
zzyuan 2025-07-21 13:09:22 +08:00
parent 01ac3190ab
commit 35fa2f5eb8
2 changed files with 1403 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
src/views/foodManage/dashboard/PanelGroup.vue Normal file
View File

@ -0,0 +1,259 @@
<template>
<el-row :gutter="36" class="panel-group">
<el-col :span="3" class="card-panel-col" v-for="(item,index) in topData" :key="index">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
{{item.name}}
</div>
<count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0">
<div style="font-size: 0.75rem;color: #07B78A;">
同比昨日 +{{item.rate}}％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0">
<div style="font-size: 0.75rem;color: #d81e06;">
同比昨日 {{item.rate}}％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col>
<!-- <el-col :span="4" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
今日食堂订单量（个）
</div>
<count-to :start-val="0" :end-val="360" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #07B78A;">
同比昨日 +1.6％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #d81e06;">
同比昨日 -05％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="4" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
今日就餐人数（人）
</div>
<count-to :start-val="0" :end-val="211" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #07B78A;">
同比昨日 +1.6％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #d81e06;">
同比昨日 -05％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="4" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
今日菜品数量（个）
</div>
<count-to :start-val="0" :end-val="14" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #07B78A;">
同比昨日 +1.6％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #d81e06;">
同比昨日 -05％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="4" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
今日商超营业额（元）
</div>
<count-to :start-val="0" :end-val="5200" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #07B78A;">
同比昨日 +1.6％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #d81e06;">
同比昨日 -05％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="4" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
今日商超订单
</div>
<count-to :start-val="0" :end-val="435" :duration="2000" class="card-panel-num" />
</div>
<div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #07B78A;">
同比昨日 +1.6％
</div>
<div>
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
</div>
</div>
<div style="display: flex;justify-content: space-between;width: 70%;">
<div style="font-size: 12px;color: #d81e06;">
同比昨日 -05％
</div>
<div>
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
</el-col> -->
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
props: {
topData: {
type: Array,
default: []
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.panel-group {
// margin-top: 5px;
padding-left: 10px;
padding-right: 10px;
.card-panel-col {
margin-bottom: 10px;
padding-left: 6px!important;
padding-right: 6px!important;
}
.card-panel {
height: 120px;
// cursor: pointer;
font-size: 0.75rem;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
padding: 15px;
border-radius: 4px;
// &:hover {
// .icon-message {
// background: #36a3f7;
// }
// }
// .icon-message {
// color: #36a3f7;
// }
.card-panel-description {
font-weight: bold;
margin: 0px;
margin-left: 0px;
margin-bottom: 10px;
.card-panel-text {
line-height: 18px;
// color: rgba(0, 0, 0, 0.5);
font-weight: normal;
font-size: 0.75rem;
margin-bottom: 15px;
}
.card-panel-num {
font-size: 1.5rem;
color: #000;
}
}
}
}
</style>

1144
src/views/foodManage/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff