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

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

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

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

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

Write Preview
Loading…
Cancel
Save