msb-mca
/
shop-admin
mirror of http://internel-git.mashibing.cn/yanxuan-frontend/shop-admin.git
2.1k
2
Code Issues Projects Releases Wiki Activity

Merge branch 'feat-home-0606-xwk' into msb_test

Browse Source
msb_test
向文可 2 years ago
parent 0d384e58ff a3487ce759
commit e5b7af3078
3 changed files with 83 additions and 49 deletions
Show Stats Download Patch File Download Diff File

21
src/store/modules/home/home.js
Unescape View File

@ -46,40 +46,40 @@ const state = () => ({
}, },
}, },
{ {
label: '待处理退款申请', label: '待发货订单',
value: '10', value: '10',
route: { route: {
name: 'ServiceApplication', name: 'OrderManagement',
query: { query: {
status: 1, status: 3,
}, },
}, },
}, },
{ {
label: '待发货订单', label: '已发货订单',
value: '10', value: '10',
route: { route: {
name: 'OrderManagement', name: 'OrderManagement',
query: { query: {
status: 3, status: 4,
}, },
}, },
}, },
{ {
label: '待确认退货订单', label: '待处理退款申请',
value: '10', value: '10',
route: { route: {
name: 'ServiceApplication', name: 'ServiceApplication',
query: { query: {
status: 4, status: 1,
}, },
}, },
}, },
{ {
label: '已发货订单', label: '待确认退货订单',
value: '10', value: '10',
route: { route: {
name: 'OrderManagement', name: 'ServiceApplication',
query: { query: {
status: 4, status: 4,
}, },
@ -99,6 +99,9 @@ const state = () => ({
value: iconOrder, value: iconOrder,
route: { route: {
name: 'OrderManagement', name: 'OrderManagement',
query: {
status: 0,
},
}, },
}, },
{ {

7
src/views/home/dateRange.vue
Unescape View File

@ -53,6 +53,7 @@
click.value = true; click.value = true;
active.value = range; active.value = range;
today.value = false; today.value = false;
let weekStart = new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24);
switch (range) { switch (range) {
case 'today': case 'today':
today.value = true; today.value = true;
@ -63,10 +64,8 @@
break; break;
case 'week': case 'week':
value.value = [ value.value = [
dayjs( dayjs(weekStart).format('YYYY-MM-DD 00:00:00'),
new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24) dayjs(new Date(weekStart.getTime() + 6 * 1000 * 60 * 60 * 24)).format('YYYY-MM-DD 23:59:59'),
).format('YYYY-MM-DD 00:00:00'),
dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
]; ];
break; break;
case 'month': case 'month':

104
src/views/home/index.vue
Unescape View File

@ -89,7 +89,6 @@
</div> </div>
<div class="right"> <div class="right">
<div class="header flex"> <div class="header flex">
<p class="title">近一周访客统计</p>
<date-range v-model="condition1" v-model:today="today1" /> <date-range v-model="condition1" v-model:today="today1" />
</div> </div>
<div class="chart"></div> <div class="chart"></div>
@ -122,7 +121,6 @@
</div> </div>
<div class="right"> <div class="right">
<div class="header flex"> <div class="header flex">
<p class="title">近一周订单统计</p>
<date-range v-model="condition2" v-model:today="today2" /> <date-range v-model="condition2" v-model:today="today2" />
</div> </div>
<div class="chart"></div> <div class="chart"></div>
@ -155,7 +153,6 @@
</div> </div>
<div class="right"> <div class="right">
<div class="header flex"> <div class="header flex">
<p class="title">近一周销售统计</p>
<date-range v-model="condition3" v-model:today="today3" /> <date-range v-model="condition3" v-model:today="today3" />
</div> </div>
<div class="chart"></div> <div class="chart"></div>
@ -176,39 +173,60 @@
watch(condition1, async (value) => { watch(condition1, async (value) => {
if (unref(today1)) { if (unref(today1)) {
await store.dispatch('home/loadChartData11'); await store.dispatch('home/loadChartData11');
handleChart(
'.row-5 .chart',
'访客数量',
unref(opts).chart[0].data,
(params) =>
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
);
} else { } else {
await store.dispatch('home/loadChartData1', { await store.dispatch('home/loadChartData1', {
beginDate: value[0].split(' ')[0], beginDate: value[0].split(' ')[0],
endDate: value[1].split(' ')[0], endDate: value[1].split(' ')[0],
}); });
handleChart('.row-5 .chart', '访客数量', unref(opts).chart[0].data);
} }
handleChart('.row-5 .chart', '访客数量', unref(opts).chart[0].data);
}); });
const condition2 = ref([]); const condition2 = ref([]);
const today2 = ref(false); const today2 = ref(false);
watch(condition2, async (value) => { watch(condition2, async (value) => {
if (unref(today2)) { if (unref(today2)) {
await store.dispatch('home/loadChartData22'); await store.dispatch('home/loadChartData22');
handleChart(
'.row-6 .chart',
'订单数量',
unref(opts).chart[1].data,
(params) =>
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
);
} else { } else {
await store.dispatch('home/loadChartData2', { await store.dispatch('home/loadChartData2', {
beginDate: value[0].split(' ')[0], beginDate: value[0].split(' ')[0],
endDate: value[1].split(' ')[0], endDate: value[1].split(' ')[0],
}); });
handleChart('.row-6 .chart', '订单数量', unref(opts).chart[1].data);
} }
handleChart('.row-6 .chart', '订单数量', unref(opts).chart[1].data);
}); });
const condition3 = ref([]); const condition3 = ref([]);
const today3 = ref(false); const today3 = ref(false);
watch(condition3, async (value) => { watch(condition3, async (value) => {
if (unref(today3)) { if (unref(today3)) {
await store.dispatch('home/loadChartData33'); await store.dispatch('home/loadChartData33');
handleChart(
'.row-7 .chart',
'销售额',
unref(opts).chart[2].data,
(params) =>
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
);
} else { } else {
await store.dispatch('home/loadChartData3', { await store.dispatch('home/loadChartData3', {
beginDate: value[0].split(' ')[0], beginDate: value[0].split(' ')[0],
endDate: value[1].split(' ')[0], endDate: value[1].split(' ')[0],
}); });
handleChart('.row-7 .chart', '销售额', unref(opts).chart[2].data);
} }
handleChart('.row-7 .chart', '销售额', unref(opts).chart[2].data);
}); });
const handleValue = (item) => { const handleValue = (item) => {
let res = new Number(item.value).toLocaleString(); let res = new Number(item.value).toLocaleString();
@ -220,8 +238,15 @@
const handleRate = (num) => new Number(Math.abs(num || 0)).toFixed(2) + '%'; const handleRate = (num) => new Number(Math.abs(num || 0)).toFixed(2) + '%';
const handleRoute = (route) => router.push(route); const handleRoute = (route) => router.push(route);
const handleChart = (selector, name, data) => { const handleChart = (
selector,
name,
data,
formatter = (params) =>
`${params[0].axisValue}<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
) => {
const chart = echarts.init(document.querySelector(selector)); const chart = echarts.init(document.querySelector(selector));
window.addEventListener('resize', () => nextTick(() => chart.resize()));
const option = { const option = {
gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'], gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
visualMap: [ visualMap: [
@ -235,34 +260,40 @@
], ],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter,
}, },
xAxis: [ grid: {
{ left: '0',
data: data.map((item) => item.label), right: '0',
}, bottom: '30px',
], top: '30px',
yAxis: [{}], containLabel: true,
series: [ },
{ xAxis: {
type: 'line', data: data.map((item) => item.label),
name, },
showSymbol: false, yAxis: {
smooth: true, minInterval: 1,
areaStyle: { },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ series: {
{ type: 'line',
offset: 0, name,
color: 'rgba(29, 231, 255, 0.3)', showSymbol: false,
}, smooth: true,
{ areaStyle: {
offset: 1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: 'rgba(29, 231, 255, 0)', {
}, offset: 0,
]), color: 'rgba(29, 231, 255, 0.3)',
}, },
data: data.map((item) => item.value), {
offset: 1,
color: 'rgba(29, 231, 255, 0)',
},
]),
}, },
], data: data.map((item) => item.value),
},
}; };
chart.setOption(option); chart.setOption(option);
}; };
@ -292,7 +323,7 @@
box-shadow: none; box-shadow: none;
border: none; border: none;
:deep(.el-card__header) { :deep(.el-card__header) {
padding: 20px 30px; padding: 20px 30px 0;
font-weight: bolder; font-weight: bolder;
border: none; border: none;
font-size: 16px; font-size: 16px;
@ -330,6 +361,7 @@
} }
.value { .value {
font-size: @big-font; font-size: @big-font;
font-weight: bolder;
} }
img { img {
width: 74px; width: 74px;
@ -341,7 +373,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
width: 45%; width: 29%;
height: 40px; height: 40px;
padding: @layout-space 3%; padding: @layout-space 3%;
margin: 0 2%; margin: 0 2%;
@ -448,7 +480,7 @@
flex: 1; flex: 1;
.header { .header {
margin-bottom: @layout-space; margin-bottom: @layout-space;
justify-content: space-between; justify-content: flex-end;
align-items: center; align-items: center;
} }
.chart { .chart {

Write Preview
Loading…
Cancel
Save