This commit is contained in:
parent
896a4b82c0
commit
3bf971dca1
|
|
@ -3,11 +3,11 @@ ENV = 'development'
|
||||||
# http://192.168.1.43:8324/admin
|
# http://192.168.1.43:8324/admin
|
||||||
# http://mer.crmeb.net/admin
|
# http://mer.crmeb.net/admin
|
||||||
# base api
|
# 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/'
|
# VUE_APP_BASE_API = 'https://api.tropjoin.com/'
|
||||||
|
|
||||||
# socket 连接地址
|
# 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_APP_WS_URL = 'ws://https://api.tropjoin.com/'
|
||||||
|
|
||||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,12 @@ export function statisticsApi() {
|
||||||
export function statisticsOrderApi() {
|
export function statisticsOrderApi() {
|
||||||
return request.get('statistics/order')
|
return request.get('statistics/order')
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @description 每日统计
|
||||||
|
*/
|
||||||
|
export function statisticsDayApi(data) {
|
||||||
|
return request.get('statistics/day', data)
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* @description 当日订单数
|
* @description 当日订单数
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,12 @@ export const constantRoutes = [
|
||||||
component: () => import("@/views/user-consumption/index"),
|
component: () => import("@/views/user-consumption/index"),
|
||||||
name: "user-consumption",
|
name: "user-consumption",
|
||||||
meta: { title: "用户消费统计" }
|
meta: { title: "用户消费统计" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: `${roterPre}/daily-statistics`,
|
||||||
|
component: () => import("@/views/daily-statistics/index"),
|
||||||
|
name: "daily-statistics",
|
||||||
|
meta: { title: "每日统计" }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -434,6 +434,7 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="rank" label="排序" min-width="60" />
|
<el-table-column prop="rank" label="排序" min-width="60" />
|
||||||
<el-table-column prop="sales" label="销量" min-width="70" />
|
<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 prop="stock" label="库存" min-width="70" />
|
||||||
<el-table-column key="8" label="操作" min-width="260" fixed="right">
|
<el-table-column key="8" label="操作" min-width="260" fixed="right">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue