财务管理-数据汇总

master
panqihua 2 years ago
parent 194ac97041
commit 223471fec8
  1. 175
      src/views/platform/financial_management/summary.vue

@ -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…
Cancel
Save