diff --git a/src/store/modules/home/home.js b/src/store/modules/home/home.js index cf4db1d..2cf8da3 100644 --- a/src/store/modules/home/home.js +++ b/src/store/modules/home/home.js @@ -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, + }, }, }, { diff --git a/src/views/home/dateRange.vue b/src/views/home/dateRange.vue index 0f6875d..a4f46a1 100644 --- a/src/views/home/dateRange.vue +++ b/src/views/home/dateRange.vue @@ -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': diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 00cda10..a3e6f1d 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -89,7 +89,6 @@
-

近一周访客统计

@@ -122,7 +121,6 @@
-

近一周订单统计

@@ -155,7 +153,6 @@
-

近一周销售统计

@@ -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
●${params[0].seriesName} ${params[0].value}` + ); } 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
●${params[0].seriesName} ${params[0].value}` + ); } 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
●${params[0].seriesName} ${params[0].value}` + ); } 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}
●${params[0].seriesName}${params[0].value}` + ) => { 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 {