This commit is contained in:
faiz 2024-07-09 18:20:29 +08:00
parent 896a4b82c0
commit 3bf971dca1
6 changed files with 497 additions and 2 deletions

View File

@ -3,11 +3,11 @@ ENV = 'development'
# http://192.168.1.43:8324/admin
# http://mer.crmeb.net/admin
# base api
VUE_APP_BASE_API = 'http://192.168.1.18:8080'
VUE_APP_BASE_API = 'http://192.168.1.12:8080'
# VUE_APP_BASE_API = 'https://api.tropjoin.com/'
# socket 连接地址
VUE_APP_WS_URL = 'ws://http://192.168.1.18:8080'
VUE_APP_WS_URL = 'ws://http://192.168.1.12:8080'
# VUE_APP_WS_URL = 'ws://https://api.tropjoin.com/'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,

View File

@ -12,6 +12,12 @@ export function statisticsApi() {
export function statisticsOrderApi() {
return request.get('statistics/order')
}
/**
* @description 每日统计
*/
export function statisticsDayApi(data) {
return request.get('statistics/day', data)
}
/**
* @description 当日订单数
*/

View File

@ -72,6 +72,12 @@ export const constantRoutes = [
component: () => import("@/views/user-consumption/index"),
name: "user-consumption",
meta: { title: "用户消费统计" }
},
{
path: `${roterPre}/daily-statistics`,
component: () => import("@/views/daily-statistics/index"),
name: "daily-statistics",
meta: { title: "每日统计" }
}
]
},

View File

@ -0,0 +1,358 @@
<template>
<div class="box-card statistics">
<el-tabs stretch v-model="activeName">
<el-tab-pane label="用户分析图" name="first">
<echarts-from v-if="activeName=='first'" ref="optionUserData" :option-data="optionUserData" :styles="style" height="100%" width="100%" />
</el-tab-pane>
<el-tab-pane label="订单数量分析图" name="second">
<echarts-from v-if="activeName=='second'" ref="optionOrderData" :option-data="optionOrderData" :styles="style" height="100%" width="100%" />
</el-tab-pane>
<el-tab-pane label="订单金额分析图" name="third">
<echarts-from v-if="activeName=='third'" ref="optionOrderNumber" :option-data="optionOrderNumber" :styles="style" height="100%" width="100%" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import echartsFrom from '@/components/echarts/index'
import { roterPre } from '@/settings'
export default {
name: 'DayData',
components: {
echartsFrom
},
props:{
tableData: {
type: Array,
default: () => []
}
},
data() {
return {
statisticsData: [],
roterPre: roterPre,
optionUserData:{},
optionOrderData:{},
optionOrderNumber:{},
newUserList:[],
order_amount:[],
order_coupon:[],
refund_amount:[],
pay_count:[],
order_count:[],
userList:[],
timer:[],
listLoading:true,
activeName:'first',
style:{
height: '360px'
}
}
},
watch:{
tableData(){
this.getList()
}
},
methods: {
getLine(newUserList,userList,timer){
const seriesData = [
{
name: "新增用户(人)",
type: "line",
stack: "用户量",
itemStyle: {
normal: {
color: "#5AD8A6",
lineStyle: {
color: "#5AD8A6"
}
}
},
data: newUserList,
smooth: false
},
{
name: "累计用户(人)",
type: "line",
stack: "用户量",
yAxisIndex: 1,
itemStyle: {
normal: {
color: "#5B8FF9",
lineStyle: {
color: "#5B8FF9"
}
}
},
data: userList,
smooth: false
}
];
this.optionUserData = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
data: ["新增用户(人)", "累计用户(人)"],
orient: "vertical",
x:'right',
y:'center',
align:'left'
},
grid: {
top:'8%',
left: "2%",
right: "8%",
bottom: "3%",
containLabel: true
},
axisLine: {
show: false
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: "#D7DDE4"
}
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
rotate: 50,
textStyle: {
color: "#7F8B9C"
}
},
data: Array.from(new Set(timer))
}
],
yAxis: [
{
type: "value",
inverse: false,
},
{
type: "value",
splitLine: {
show: false
}
}
],
series: seriesData
};
},
getOrderLine(order_amount,order_coupon,refund_amount,timer){
this.optionOrderData = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['实付订单金额(含运费/元)', '抵扣券使用数量', '退订单退款金额(元)'],
orient: "vertical",
x:'right',
y:'center',
align:'left'
},
grid: {
left: '3%',
right: '12%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: "#D7DDE4"
}
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
rotate: 50,
textStyle: {
color: "#7F8B9C"
}
},
data: Array.from(new Set(timer))
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '实付订单金额(含运费/元)',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: order_amount
},
{
name: '抵扣券使用数量',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: order_coupon
},
{
name: '退订单退款金额(元)',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: refund_amount
}
]
};
},
getBar(order_count,pay_count,timer){
this.optionOrderNumber = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['支付人数(人)', '支付订单数(单)'],
orient: "vertical",
x:'right',
y:'center',
align:'left'
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: "#D7DDE4"
}
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
rotate: 50,
textStyle: {
color: "#7F8B9C"
}
},
data: Array.from(new Set(timer))
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '支付人数(人)',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: order_count
},
{
name: '支付订单数(单)',
type: 'bar',
emphasis: {
focus: 'series'
},
data: pay_count
}
]
}
},
getList(){
this.newUserList= []
this.userList= []
this.timer= []
this.order_coupon= []
this.refund_amount= []
this.order_count= []
this.pay_count= []
this.order_amount = []//
this.tableData.map(item => {
this.newUserList.push(item.reg_count);
this.userList.push(item.user_count);
this.timer.push(item.date);
this.order_amount.push(item.order_amount) //
this.order_coupon.push(item.order_coupon) //
this.refund_amount.push(item.refund_amount) //退
this.order_count.push(item.order_count)
this.pay_count.push(item.pay_count)
});
this.getLine(this.newUserList,this.userList,this.timer);
this.getOrderLine(this.order_amount,this.order_coupon,this.refund_amount,this.timer);
this.getBar(this.order_count,this.pay_count,this.timer)
}
}
}
</script>
<style lang="scss" scoped>
.statistics {
min-width: 700px;
margin-top: 0;
background: #fff;
}
</style>

View File

@ -0,0 +1,124 @@
<template>
<div class="divBox" style="background: #F0F2F5;">
<DayData :tableData="tableData.data" class="mb15" />
<el-card>
<el-form size="small" inline :model="tableFrom" ref="searchForm" label-width="85px">
<el-form-item label="时间选择:">
<el-date-picker
v-model="timeVal"
value-format="yyyy/MM/dd"
format="yyyy/MM/dd"
size="small"
type="daterange"
placement="bottom-end"
placeholder="自定义时间"
style="width: 280px;"
:picker-options="pickerOptions"
@change="onchangeTime"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
<el-button size="small" @click="searchReset()">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="listLoading"
:data="tableData.data"
size="small"
class="table"
align="center"
>
<el-table-column label="id" min-width="130" prop="id"></el-table-column>
<el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column>
<el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column>
<el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column>
<el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column>
<el-table-column label="实付订单金额(含运费/元)" min-width="130" prop="order_amount"></el-table-column>
<el-table-column label="抵扣券使用数量" min-width="130" prop="order_coupon"></el-table-column>
<el-table-column label="退订单退款金额(元)" min-width="130" prop="refund_amount"></el-table-column>
</el-table>
<div class="block">
<el-pagination
background
:page-size="tableFrom.limit"
:current-page="tableFrom.page"
layout="total, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
</div>
</el-card>
</div>
</template>
<script>
import DayData from './components/DayData'
import {statisticsDayApi} from '@/api/home'
import timeOptions from '@/utils/timeOptions';
export default {
name: 'dailyStatistics',
components: { DayData },
data() {
return {
listLoading: true,
timeVal: [],
pickerOptions: timeOptions,
tableData:{},
tableFrom: {
date: "",
page: 1,
limit: 30,
}
}
},
mounted() {
this.getList()
},
methods: {
//
onchangeTime(e) {
this.timeVal = e;
console.log(e);
this.tableFrom.date = e ? this.timeVal.join("-") : "";
this.tableFrom.page = 1;
this.getList(1);
},
/**重置 */
searchReset(){
this.timeVal = []
this.tableFrom.date = ""
this.$refs.searchForm.resetFields()
this.getList(1)
},
//
getList(num) {
this.listLoading = true;
this.tableFrom.page = num ? num : this.tableFrom.page;
statisticsDayApi(this.tableFrom)
.then((res) => {
this.tableData.data = res.data.list;
this.tableData.total = res.data.count;
this.listLoading = false;
})
.catch((res) => {
this.$message.error(res.message);
this.listLoading = false;
});
},
pageChange(page) {
this.tableFrom.page = page;
this.getList('');
},
handleSizeChange(val) {
this.tableFrom.limit = val;
this.getList('');
},
}
}
</script>
<style scoped lang="scss">
</style>

View File

@ -434,6 +434,7 @@
</el-table-column>
<el-table-column prop="rank" label="排序" min-width="60" />
<el-table-column prop="sales" label="销量" min-width="70" />
<el-table-column prop="browse" label="浏览量" min-width="70" />
<el-table-column prop="stock" label="库存" min-width="70" />
<el-table-column key="8" label="操作" min-width="260" fixed="right">
<template slot-scope="scope">