供应链数据总览页面绘制
This commit is contained in:
parent
01ac3190ab
commit
35fa2f5eb8
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue