This commit is contained in:
parent
896a4b82c0
commit
3bf971dca1
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 当日订单数
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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: "每日统计" }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue