月度统计

src/main/vue/src/views/Dashboard.vue

@@ -39,6 +39,7 @@ import LineChartWidget from '../widgets/LineChartWidget';
 import BarChartWidget from '../widgets/BarChartWidget';
 import PieChartWidget from '../widgets/PieChartWidget';
 import TopWidget from '../widgets/TopWidget';
+import MonthWidget from '../widgets/MonthWidget';
 
 export default {
     created() {},
@@ -64,7 +65,8 @@ export default {
                 { x: 3, y: 0, w: 3, h: 4, i: '1', name: 'NumWidget' },
                 // { x: 0, y: 12, w: 6, h: 6, i: '4', name: 'BarChartWidget' },
                 { x: 0, y: 4, w: 6, h: 12, i: '6', name: 'PieChartWidget' },
-                { x: 0, y: 20, w: 12, h: 10, i: '7', name: 'TopWidget' }
+                { x: 0, y: 20, w: 6, h: 10, i: '8', name: 'MonthWidget' },
+                { x: 6, y: 20, w: 6, h: 10, i: '7', name: 'TopWidget' }
             ];
         }
         this.$http.get('/statistic/total').then(res => {
@@ -86,7 +88,8 @@ export default {
         LineChartWidget,
         BarChartWidget,
         PieChartWidget,
-        TopWidget
+        TopWidget,
+        MonthWidget
     }
 };
 </script>

src/main/vue/src/widgets/MonthWidget.vue

@@ -0,0 +1,148 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <template #header>
+            <div class="header">
+                <span>月度统计</span>
+                <el-select
+                    style="width: 120px;"
+                    size="mini"
+                    v-model="value"
+                    @change="changeSelect"
+                    placeholder="请选择"
+                >
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </div>
+        </template>
+        <div class="box-content">
+            <div class="box">
+                <div class="text1">官方销售额/二手市场</div>
+                <div class="text2">
+                    <span v-html="getNum(order.official, true)"></span>/
+                    <span v-html="getNum(order.transfer, true)"></span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="text1">拉新数(人)</div>
+                <div class="text2">{{ user }}</div>
+            </div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import { format, parse, addMonths } from 'date-fns';
+import WidgetCard from './WidgetCard';
+import acc from '../mixins/acc';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                overflow: 'auto'
+            },
+            value: '',
+            options: [],
+            user: 0,
+            order: {
+                official: 0,
+                transfer: 0
+            }
+        };
+    },
+    mixins: [acc],
+    components: {
+        WidgetCard
+    },
+    mounted() {
+        let options = [];
+        this.value = format(new Date(), 'yyyy-MM');
+        for (let i = 0; i < 7; i++) {
+            options.push({
+                label: format(addMonths(new Date(), 0 - i), 'yyyy-MM'),
+                value: format(addMonths(new Date(), 0 - i), 'yyyy-MM')
+            });
+        }
+        this.options = options;
+
+        this.changeSelect();
+    },
+    methods: {
+        changeSelect() {
+            this.$nextTick(() => {
+                this.$http
+                    .get('/statistic/userTrendV2', {
+                        yearMonth: this.value
+                    })
+                    .then(res => {
+                        this.user = res;
+                    });
+                this.$http
+                    .get('/statistic/orderPriceTrendV2', {
+                        yearMonth: this.value
+                    })
+                    .then(res => {
+                        this.order = res;
+                    });
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/deep/.el-card {
+    overflow: hidden;
+}
+
+.box-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    align-self: stretch;
+    padding: 30px;
+    height: 100%;
+    box-sizing: border-box;
+}
+.box {
+    padding: 0 20px;
+    height: 125px;
+    background: #f5f7fa;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 153px;
+    box-sizing: border-box;
+    .text1 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #666666;
+        line-height: 20px;
+        white-space: nowrap;
+    }
+    .text2 {
+        color: #feb30e;
+        font-size: 22px;
+        font-weight: bold;
+        line-height: 29px;
+        margin-top: 2px;
+        white-space: nowrap;
+        /deep/small {
+            font-size: 12px;
+        }
+    }
+
+    &:nth-child(2) {
+        .text2 {
+            color: #4dcc6f;
+        }
+    }
+}
+</style>