feat: 首页接口对接

src/router/index.js

@@ -22,28 +22,6 @@ export const globalRoutes = [
             global: true,
         },
     },
-    {
-        path: '/',
-        name: 'App',
-        redirect: { name: 'Home' },
-        component: () => import('@/layouts/default.vue'),
-        meta: {
-            layout: true,
-            title: '首页',
-            icon: 'home-fill',
-        },
-        children: [
-            {
-                path: '/home',
-                name: 'Home',
-                component: () => import('@/views/home/index.vue'),
-                meta: {
-                    title: '首页',
-                    icon: 'home-fill',
-                },
-            },
-        ],
-    },
 ];
 
 export const demoRoutes = import.meta.env.MODE === 'development' ? demoModule : [];

src/store/modules/home/home.js

@@ -16,11 +16,13 @@ const state = () => ({
                 label: '今日销售额',
                 value: 5000,
                 icon: 'money-cny-box',
+                type: 'money',
             },
             {
                 label: '近7天销售总额',
                 value: 50000,
                 icon: 'line-chart',
+                type: 'money',
             },
         ],
         order: [
@@ -181,21 +183,6 @@ const state = () => ({
             },
         ],
     },
-    condition1: {
-        today: false,
-        beginDateTime: null,
-        endDateTime: null,
-    },
-    condition2: {
-        today: false,
-        beginDateTime: null,
-        endDateTime: null,
-    },
-    condition3: {
-        today: false,
-        beginDateTime: null,
-        endDateTime: null,
-    },
 });
 const getters = {};
 const mutations = {
@@ -267,19 +254,25 @@ const actions = {
         commit('setChartInfo3', res);
         return res;
     },
-    loadChartData1: async ({ state, commit }) => {
-        let res = await (state.condition1.today ? api.customerToday : api.customerSummary)(state.condition1);
-        commit('setChartData1', res);
+    loadChartData1: async ({ commit }, data) => {
+        let today =
+            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        let res = await (today ? api.customerToday : api.customerSummary)(data);
+        commit('setChartData1', res || []);
         return res;
     },
-    loadChartData2: async ({ state, commit }) => {
-        let res = await (state.condition2.today ? api.orderToday : api.orderSummary)(state.condition2);
-        commit('setChartData2', res);
+    loadChartData2: async ({ commit }, data) => {
+        let today =
+            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        let res = await (today ? api.orderToday : api.orderSummary)(data);
+        commit('setChartData2', res || []);
         return res;
     },
-    loadChartData3: async ({ state, commit }) => {
-        let res = await (state.condition3.today ? api.orderToday : api.orderSummary)(state.condition3);
-        commit('setChartData3', res);
+    loadChartData3: async ({ commit }, data) => {
+        let today =
+            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        let res = await (today ? api.orderToday : api.orderSummary)(data);
+        commit('setChartData3', res || []);
         return res;
     },
     load: async ({ dispatch }) => {
@@ -291,9 +284,6 @@ const actions = {
             dispatch('loadChartInfo1'),
             dispatch('loadChartInfo2'),
             dispatch('loadChartInfo3'),
-            dispatch('loadChartData1'),
-            dispatch('loadChartData2'),
-            dispatch('loadChartData3'),
         ]);
     },
 };

src/views/home/dateRange.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="date-range">
+        <el-button
+            v-for="(item, index) in opts"
+            :key="index"
+            :plain="active === item.value"
+            :type="active === item.value ? 'primary' : 'text'"
+            @click="handleRange(item.value)"
+        >
+            {{ item.label }}
+        </el-button>
+        <el-date-picker
+            v-model="value"
+            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+        />
+    </div>
+</template>
+
+<script setup>
+    const opts = ref([
+        {
+            label: '今天',
+            value: 'today',
+        },
+        {
+            label: '本周',
+            value: 'week',
+        },
+        {
+            label: '本月',
+            value: 'month',
+        },
+    ]);
+    const active = ref('week');
+    const value = ref([]);
+    const emits = defineEmits(['update:modelValue']);
+    watch(value, (value) => {
+        emits('update:modelValue', value);
+        if (unref(click)) {
+            click.value = false;
+        } else {
+            active.value = null;
+        }
+    });
+    const click = ref(false);
+    const handleRange = (range) => {
+        click.value = true;
+        active.value = range;
+        switch (range) {
+            case 'today':
+                value.value = [
+                    dayjs(new Date()).format('YYYY-MM-DD 00:00:00'),
+                    dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
+                ];
+                break;
+            case 'week':
+                value.value = [
+                    dayjs(
+                        new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24)
+                    ).format('YYYY-MM-DD 00:00:00'),
+                    dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
+                ];
+                break;
+            case 'month':
+                value.value = [
+                    dayjs(new Date(new Date().getTime() - (new Date().getDate() - 1) * 1000 * 60 * 60 * 24)).format(
+                        'YYYY-MM-DD 00:00:00'
+                    ),
+                    dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
+                ];
+                break;
+        }
+    };
+    handleRange('week');
+</script>
+
+<style lang="less" scoped>
+    .date-range {
+        display: flex;
+        align-items: center;
+        :deep(.el-date-editor) {
+            margin-left: @layout-space;
+        }
+    }
+</style>

src/views/home/index.vue

@@ -5,7 +5,7 @@
                 <div class="flex">
                     <div class="text">
                         <p class="label">{{ item.label }}</p>
-                        <p class="value">{{ item.value }}</p>
+                        <p class="value">{{ handleValue(item) }}</p>
                     </div>
                     <el-icon :name="item.icon" :size="54" />
                 </div>
@@ -42,7 +42,7 @@
         <div class="flex row row-4">
             <el-card header="商品总览">
                 <ul>
-                    <li v-for="(item, index) in opts.product" :key="index" @click="handleRoute(item.route)">
+                    <li v-for="(item, index) in opts.product" :key="index">
                         <p class="value red">
                             {{ item.value }}
                         </p>
@@ -54,7 +54,7 @@
             </el-card>
             <el-card header="用户总览">
                 <ul>
-                    <li v-for="(item, index) in opts.customer" :key="index" @click="handleRoute(item.route)">
+                    <li v-for="(item, index) in opts.customer" :key="index">
                         <p class="value red">
                             {{ item.value }}
                         </p>
@@ -88,9 +88,7 @@
                 <div class="right">
                     <div class="header flex">
                         <p class="title">近一周访客统计</p>
-                        <div class="condition">
-                            <el-date-picker type="daterange" />
-                        </div>
+                        <date-range v-model="condition1" />
                     </div>
                     <div class="chart"></div>
                 </div>
@@ -119,9 +117,7 @@
                 <div class="right">
                     <div class="header flex">
                         <p class="title">近一周订单统计</p>
-                        <div class="condition">
-                            <el-date-picker type="daterange" />
-                        </div>
+                        <date-range v-model="condition2" />
                     </div>
                     <div class="chart"></div>
                 </div>
@@ -150,9 +146,7 @@
                 <div class="right">
                     <div class="header flex">
                         <p class="title">近一周销售统计</p>
-                        <div class="condition">
-                            <el-date-picker type="daterange" />
-                        </div>
+                        <date-range v-model="condition3" />
                     </div>
                     <div class="chart"></div>
                 </div>
@@ -163,9 +157,39 @@
 
 <script setup>
     import * as echarts from 'echarts';
+    import DateRange from './dateRange.vue';
     const router = useRouter();
     const store = useStore();
     const opts = computed(() => store.state.home.opts);
+    const condition1 = ref([]);
+    watch(condition1, (value) => {
+        store.dispatch('home/loadChartData1', {
+            beginDateTime: value[0].split(' ')[0],
+            endDateTime: value[1].split(' ')[0],
+        });
+    });
+    const condition2 = ref([]);
+    watch(condition2, (value) => {
+        store.dispatch('home/loadChartData2', {
+            beginDateTime: value[0].split(' ')[0],
+            endDateTime: value[1].split(' ')[0],
+        });
+    });
+    const condition3 = ref([]);
+    watch(condition3, (value) => {
+        store.dispatch('home/loadChartData3', {
+            beginDateTime: value[0].split(' ')[0],
+            endDateTime: value[1].split(' ')[0],
+        });
+    });
+    const handleValue = (item) => {
+        let res = new Number(item.value).toLocaleString();
+        if (item.type === 'money') {
+            res = '￥' + res;
+        }
+        return res;
+    };
+
     const handleRoute = (route) => router.push(route);
     const handleChart = (selector, color, name, data) => {
         const chart = echarts.init(document.querySelector(selector));
@@ -269,6 +293,9 @@
                     justify-content: space-around;
                     align-items: center;
                 }
+                .value {
+                    font-size: calc(@big-font * 0.8);
+                }
                 .x-icon {
                     color: var(--el-color-success);
                 }