From 223471fec8ae6df9f91f4647ef40b733d59facac Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Thu, 19 Jan 2023 01:22:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E7=AE=A1=E7=90=86-=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B1=87=E6=80=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/financial_management/summary.vue | 175 ++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/views/platform/financial_management/summary.vue

diff --git a/src/views/platform/financial_management/summary.vue b/src/views/platform/financial_management/summary.vue
new file mode 100644
index 0000000..1390292
--- /dev/null
+++ b/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>
\ No newline at end of file