parent
194ac97041
commit
223471fec8
@ -0,0 +1,175 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card> |
||||
<div class="title">数据汇总</div> |
||||
<el-row type="flex" justify="space-around" class="data-summary"> |
||||
<el-col :span="4" class="gray"> |
||||
<div class="text-center label">总订单交易额(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
</el-col> |
||||
<el-col :span="4" class="gray"> |
||||
<div class="text-center label">平台佣金总收入(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
</el-col> |
||||
<el-col :span="4" class="gray"> |
||||
<div class="text-center label">用户收入(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
</el-col> |
||||
<el-col :span="4" class="gray"> |
||||
<div class="text-center label">提现支出(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
</el-col> |
||||
<el-col :span="4" class="gray"> |
||||
<div class="text-center label">邀请补贴(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
<el-card class="mt-card"> |
||||
<div class="title"> |
||||
月汇总 |
||||
<el-select v-model="form.value" placeholder="请选择" class="ml"> |
||||
<el-option v-for="item in 3" :key="item" :label="`2022年${item.toString().padStart(2, '0')}月`" |
||||
:value="item"> |
||||
</el-option> |
||||
</el-select> |
||||
</div> |
||||
<el-row type="flex" justify="space-around" class="data-summary"> |
||||
<el-col :span="4" class="reverse"> |
||||
<div class="text-center label">订单交易额(元)</div> |
||||
<div class="text-center value">12333.00</div> |
||||
|
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<div class="text-center value">12333.00</div> |
||||
<div class="text-center label">平台佣金总收入(元)</div> |
||||
|
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<div class="text-center value">12333.00</div> |
||||
<div class="text-center label">用户收入(元)</div> |
||||
|
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<div class="text-center value">12333.00</div> |
||||
<div class="text-center label">提现支出(元)</div> |
||||
|
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<div class="text-center value">12333.00</div> |
||||
<div class="text-center label">邀请补贴(元)</div> |
||||
|
||||
</el-col> |
||||
</el-row> |
||||
<div class="title">趋势图</div> |
||||
<el-tabs :activeName="activeName" type="card"> |
||||
<el-tab-pane name="trade" label="订单交易"></el-tab-pane> |
||||
<el-tab-pane name="income" label="用户收入"></el-tab-pane> |
||||
<el-tab-pane name="expenditure" label="提现支出"></el-tab-pane> |
||||
<el-tab-pane name="subsidy" label="邀请补贴"></el-tab-pane> |
||||
</el-tabs> |
||||
<div ref="chart" class="chart"></div> |
||||
</el-card> |
||||
|
||||
</div> |
||||
</template> |
||||
<script> |
||||
import echarts from "@/plugins/echarts" |
||||
export default { |
||||
name: 'Summary', |
||||
data() { |
||||
return { |
||||
activeName: 'trade', |
||||
form: { |
||||
value: undefined |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.initChart() |
||||
}, |
||||
methods: { |
||||
//TODO:需要封装组件 |
||||
initChart() { |
||||
let myChart = echarts.init(this.$refs.chart); |
||||
let option; |
||||
|
||||
option = { |
||||
xAxis: { |
||||
type: 'category', |
||||
data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`) |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
tooltip: { |
||||
show: true, |
||||
trigger: 'axis' |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line' |
||||
}, |
||||
{ |
||||
data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line' |
||||
} |
||||
] |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.chart { |
||||
height: 400px; |
||||
} |
||||
|
||||
.ml { |
||||
margin-left: 30px; |
||||
} |
||||
|
||||
.mt-card { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.title { |
||||
color: rgba(16, 16, 16, 1); |
||||
font-size: 14px; |
||||
text-align: left; |
||||
font-family: SourceHanSansSC-regular; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.data-summary { |
||||
&>div.gray { |
||||
background-color: rgba(239, 239, 239, 1); |
||||
} |
||||
|
||||
&>div.reverse { |
||||
display: flex; |
||||
flex-direction: column-reverse; |
||||
} |
||||
|
||||
&>div { |
||||
border-radius: 5px; |
||||
|
||||
padding: 20px; |
||||
|
||||
&>.label { |
||||
font-size: 14px; |
||||
font-family: SourceHanSansSC-regular; |
||||
margin: 20px 0; |
||||
} |
||||
|
||||
&>.value { |
||||
font-size: 20px; |
||||
font-family: SourceHanSansSC-regular; |
||||
} |
||||
} |
||||
} |
||||
</style> |
Loading…
Reference in new issue