财务管理-数据汇总

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>