top50

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

@@ -38,6 +38,7 @@ import PriceWidget from '../widgets/PriceWidget';
 import LineChartWidget from '../widgets/LineChartWidget';
 import BarChartWidget from '../widgets/BarChartWidget';
 import PieChartWidget from '../widgets/PieChartWidget';
+import TopWidget from '../widgets/TopWidget'
 
 export default {
     created() {},
@@ -48,7 +49,8 @@ export default {
                 { x: 0, y: 0, w: 3, h: 4, i: '2', name: 'PriceWidget' },
                 { 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: 4, w: 6, h: 12, i: '6', name: 'PieChartWidget' },
+                { x: 0, y: 20, w: 12, h: 10, i: '6', name: 'TopWidget' }
             ],
             editable: false,
             info: {}
@@ -73,7 +75,8 @@ export default {
         PriceWidget,
         LineChartWidget,
         BarChartWidget,
-        PieChartWidget
+        PieChartWidget,
+        TopWidget
     }
 };
 </script>

src/main/vue/src/widgets/TopWidget.vue

@@ -0,0 +1,156 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <template #header>
+            <div class="header">
+                <span>Top50</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="list">
+            <div class="empty" v-if="list.length === 0">
+                暂无记录
+            </div>
+            <router-link
+                :to="{
+                    path: '/minterEdit',
+                    query: {
+                        id: item.to_user_id
+                    }
+                }"
+                class="card"
+                v-for="(item, index) in list"
+                :key="index"
+            >
+                <div class="no">NO.{{ index + 1 }}</div>
+                <div class="content">
+                    <div class="text1">{{ item.to_user }}</div>
+                    <div class="text2">{{ item.total }}元</div>
+                </div>
+            </router-link>
+        </div>
+    </widget-card>
+</template>
+<script>
+import { format, parse, addMonths } from 'date-fns';
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                overflow: 'auto'
+            },
+            value: '',
+            options: [],
+            list: []
+        };
+    },
+    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/top', {
+                        year: format(parse(this.value, 'yyyy-MM', new Date()), 'yyyy'),
+                        month: format(parse(this.value, 'yyyy-MM', new Date()), 'M')
+                    })
+                    .then(res => {
+                        this.list = res;
+                    });
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/deep/.el-card {
+    overflow: hidden;
+}
+
+.list {
+    display: flex;
+    flex-wrap: wrap;
+    .card {
+        display: flex;
+        align-items: center;
+        padding: 25px 25px;
+        border-radius: 4px;
+        cursor: pointer;
+        background-color: #f5f7fa;
+        margin: 20px 30px 0 0;
+        border: 1px solid #f2f4f5;
+        box-shadow: 0 2px 10px 0px #f2f4f5;
+        .no {
+            color: #4dcc6f;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .content {
+            margin-left: 10px;
+            .text1 {
+                font-size: 14px;
+                color: #666666;
+                font-weight: bold;
+                text-align: center;
+            }
+            .text2 {
+                font-size: 16px;
+                color: #000;
+                text-align: center;
+                margin-top: 3px;
+            }
+        }
+
+        &:nth-child(n + 4) {
+            .no {
+                color: #000;
+            }
+        }
+
+        &:hover {
+            box-shadow: 0 2px 10px 0px #feb30e70;
+            .text2 {
+                color: #feb30e;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.empty {
+    font-size: 14px;
+    text-align: center;
+    flex-grow: 1;
+    padding: 30px;
+}
+</style>