feat: 首页接口对接

fix-0609-xwk
向文可 3 years ago
parent 1cf91f6b47
commit e2204323df

@ -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 : [];

@ -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'),
]);
},
};

@ -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>

@ -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);
}

Loading…
Cancel
Save