|
@@ -8,316 +8,226 @@
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="home-page">
|
|
|
- <div class="top-box">
|
|
|
- <div class="left">
|
|
|
- <div class="tab-box">
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active == 1 ? 'active' : '']"
|
|
|
- @click="handleTab(1, 'active')"
|
|
|
- >
|
|
|
- 累积用户总量
|
|
|
+ <!-- <div class="top-box">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="8" :offset="0">
|
|
|
+ <div>
|
|
|
+ <div class="text">待审核商品</div>
|
|
|
+ <div class="num"> 23 </div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active == 2 ? 'active' : '']"
|
|
|
- @click="handleTab(2, 'active')"
|
|
|
- >
|
|
|
- 七日新增用户
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :offset="0">
|
|
|
+ <div>
|
|
|
+ <div class="text">待审核商品</div>
|
|
|
+ <div class="num"> 23 </div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active == 3 ? 'active' : '']"
|
|
|
- @click="handleTab(3, 'active')"
|
|
|
- >
|
|
|
- 今日新增用户
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :offset="0">
|
|
|
+ <div>
|
|
|
+ <div class="text">待审核商品</div>
|
|
|
+ <div class="num"> 23 </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div id="chart" v-loading="vipLoading" style="width: 500px; height: 300px"></div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="tab-box">
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active1 == 1 ? 'active' : '']"
|
|
|
- @click="handleTab(1, 'active1')"
|
|
|
- >
|
|
|
- 去年店铺增长
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="title">订单数据 <span>更新于{{ updateTime }}</span></div>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>支付订单数</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.orderCount }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.orderCount }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>支付金额(元)</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.paymentAmount }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.paymentAmount }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>退款金额</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.refundedAmount }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.refundedAmount }} </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 40px;">
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>待核销订单</div>
|
|
|
+ <div>昨日</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active1 == 2 ? 'active' : '']"
|
|
|
- @click="handleTab(2, 'active1')"
|
|
|
- >
|
|
|
- 今年店铺增长
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.waitUse }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.waitUse }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div id="chart1" v-loading="shopLoading" style="height: 300px"></div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>已核销订单</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.used }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.used }} </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>已经退款订单</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ today.refunded }}</div>
|
|
|
+ <div class="lastDay">{{ yesterday.refunded }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <div class="bottom">
|
|
|
- <div class="tab-box">
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active2 == 1 ? 'active' : '']"
|
|
|
- @click="handleTab(1, 'active2')"
|
|
|
- >
|
|
|
- 七日订单趋势
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active2 == 2 ? 'active' : '']"
|
|
|
- @click="handleTab(2, 'active2')"
|
|
|
- >
|
|
|
- 十五日订单趋势
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="tab"
|
|
|
- :class="[active2 == 3 ? 'active' : '']"
|
|
|
- @click="handleTab(3, 'active2')"
|
|
|
- >
|
|
|
- 三十日订单趋势
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="chart2" v-loading="orderLoading" style="width: 100%; height: 400px"></div>
|
|
|
+ <div class="bottom" style="margin-top: 30px;">
|
|
|
+ <div class="title">用户数据 <span>更新于{{ updateTime }}</span></div>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>新增注册</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ userData.dayRegister }} </div>
|
|
|
+ <div class="lastDay">{{ userData.yesterdayRegister }} </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>新增会员</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ userData.dayVip }} </div>
|
|
|
+ <div class="lastDay">{{ userData.yesterdayVip }} </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>当前注册用户总数</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ userData.totalRegister }}</div>
|
|
|
+ <div class="lastDay">{{ userData.yesterdayRegister }} </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 40px;">
|
|
|
+ <el-col class="item-box" :span="8" :offset="0">
|
|
|
+ <div class="item">
|
|
|
+ <div>当前会员总数</div>
|
|
|
+ <div>昨日</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="today">{{ userData.totalVip }} </div>
|
|
|
+ <div class="lastDay">{{ userData.yesterdayTotalVip }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import * as echarts from "echarts";
|
|
|
-import {shopCountDetails,vipCountDetails,orderCountDetails} from '@/api/home';
|
|
|
-import {getTime} from '@/utils/index'
|
|
|
+
|
|
|
+import { orderCount } from '@/api/order';
|
|
|
+import { userStatistics } from '@/api/invite';
|
|
|
+
|
|
|
export default {
|
|
|
name: "home",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- active: 1,
|
|
|
- active1: 1,
|
|
|
- active2: 1,
|
|
|
- chart: null,
|
|
|
- chart1: null,
|
|
|
- chart2: null,
|
|
|
- vipLoading:false,
|
|
|
- shopLoading:false,
|
|
|
- orderLoading:false,
|
|
|
- vipData:[],
|
|
|
- shopData:[],
|
|
|
- orderData:[],
|
|
|
- vipQuery:{
|
|
|
- "endTime": new Date(getTime(0)+' 23:59:59').getTime(),
|
|
|
- "startTime": new Date('2023-01-01 00:00:00').getTime()
|
|
|
+ userData: {
|
|
|
+ dayRegister: 0,
|
|
|
+ dayVip: 0,
|
|
|
+ totalRegister: 0,
|
|
|
+ totalVip: 0,
|
|
|
+ yesterdayRegister: 0,
|
|
|
+ yesterdayTotalVip: 0,
|
|
|
+ yesterdayVip: 0,
|
|
|
},
|
|
|
- shopQuery:{
|
|
|
- "endTime": new Date(new Date().getFullYear()+'-01-01 23:59:59').getTime() - 1000*60*60*24,//去年最后一天
|
|
|
- "startTime": new Date( (new Date().getFullYear()- 1) +'-01-01 00:00:00').getTime(),//去年第一天
|
|
|
- "timeType": "MONTHS"
|
|
|
+ today: {
|
|
|
+ orderCount: 0,
|
|
|
+ waitUse: 0,
|
|
|
+ used: 0,
|
|
|
+ refunded: 0,
|
|
|
+ paymentAmount: 0,
|
|
|
+ refundedAmount: 0
|
|
|
},
|
|
|
- orderQuery:{
|
|
|
- "endTime": new Date(getTime(0)+' 23:59:59').getTime(),//今天
|
|
|
- "startTime":new Date(getTime(-6)+' 00:00:00').getTime(),//七天前
|
|
|
- "timeType": "DAY"
|
|
|
+ yesterday: {
|
|
|
+ orderCount: 0,
|
|
|
+ waitUse: 0,
|
|
|
+ used: 0,
|
|
|
+ refunded: 0,
|
|
|
+ paymentAmount: 0,
|
|
|
+ refundedAmount: 0
|
|
|
},
|
|
|
-
|
|
|
+ updateTime: '',
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- option(){
|
|
|
- let colorList = ['#FF9216','#FF2B27','#2836FE']
|
|
|
- let data = []
|
|
|
- this.vipData.map((item,index)=>{
|
|
|
- data.push({
|
|
|
- name:item.moment,
|
|
|
- value:item.count,
|
|
|
- itemStyle:{
|
|
|
- color:colorList[index]
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- let obj = {
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: "25%",
|
|
|
- right: "right",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "",
|
|
|
- type: "pie",
|
|
|
- radius: ["40%", "70%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: "center",
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: 20,
|
|
|
- fontWeight: "bold",
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
-
|
|
|
- return obj
|
|
|
- } ,
|
|
|
- option1(){
|
|
|
- let date = []
|
|
|
- let data = []
|
|
|
- this.shopData.map((item,index)=>{
|
|
|
- date.push(item.moment)
|
|
|
- data.push(item.count)
|
|
|
- })
|
|
|
- let obj = {
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: date,
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data,
|
|
|
- type: "bar",
|
|
|
- itemStyle:{color:'#2836FE'}
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- return obj
|
|
|
-
|
|
|
- },
|
|
|
- option2(){
|
|
|
- let date = []
|
|
|
- let data = []
|
|
|
- this.shopData.map((item,index)=>{
|
|
|
- date.push(item.moment)
|
|
|
- data.push(item.count)
|
|
|
- })
|
|
|
- let obj = {
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data:date,
|
|
|
- boundaryGap: false
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- },
|
|
|
-
|
|
|
- series: [
|
|
|
- {
|
|
|
- data,
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- itemStyle:{color:'#5B8FF9'},
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgb(233, 234, 255)",
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgb(233, 234, 255)",
|
|
|
- },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- return obj
|
|
|
|
|
|
- }
|
|
|
},
|
|
|
methods: {
|
|
|
- handleTab(val, key) {
|
|
|
- console.log(getTime(-1)+' 00:00:00');
|
|
|
- this[key] = val;
|
|
|
- if(key == 'active'){
|
|
|
- if(val == 1){
|
|
|
- this.vipQuery.startTime = new Date('2023-01-01 00:00:00').getTime()
|
|
|
- }
|
|
|
- else if(val == 2){
|
|
|
- this.vipQuery.startTime = new Date(getTime(-6)+' 00:00:00').getTime()
|
|
|
- }else if(val == 3){
|
|
|
- this.vipQuery.startTime = new Date(getTime(0)+' 00:00:00').getTime()
|
|
|
- }
|
|
|
- this.vipQuery.endTime = new Date(getTime(0)+' 23:59:59').getTime()
|
|
|
- this.vipCountDetails()
|
|
|
- }else if(key == 'active1'){
|
|
|
- if(val == 1){
|
|
|
- this.shopQuery = {
|
|
|
- "endTime": new Date(new Date().getFullYear()+'-01-01 23:59:59').getTime() - 1000*60*60*24,//去年最后一天
|
|
|
- "startTime": new Date( (new Date().getFullYear()- 1) +'-01-01 00:00:00').getTime(),//去年第一天
|
|
|
- "timeType": "MONTHS"
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.shopQuery = {
|
|
|
- "endTime": new Date((new Date().getFullYear()+1)+'-01-01 23:59:59').getTime() - 1000*60*60*24,//今年最后一天
|
|
|
- "startTime": new Date( new Date().getFullYear() +'-01-01 00:00:00').getTime(),//今年第一天
|
|
|
- "timeType": "MONTHS"
|
|
|
- }
|
|
|
- }
|
|
|
- this.shopCountDetails()
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- vipCountDetails(){
|
|
|
- this.vipLoading = true
|
|
|
- vipCountDetails(this.vipQuery).then(res=>{
|
|
|
- this.vipLoading = false
|
|
|
- if(res.state == 'Success'){
|
|
|
- this.vipData = res.content.vipDetail
|
|
|
- this.chart = echarts.init(document.getElementById("chart"));
|
|
|
- this.chart.setOption(this.option);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- shopCountDetails(){
|
|
|
- this.shopLoading = true
|
|
|
- shopCountDetails(this.shopQuery).then(res=>{
|
|
|
- this.shopLoading = false
|
|
|
- if(res.state == 'Success'){
|
|
|
- this.shopData = res.content
|
|
|
- this.chart1 = echarts.init(document.getElementById("chart1"));
|
|
|
- this.chart1.setOption(this.option1);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- orderCountDetails(){
|
|
|
- this.orderLoading = true
|
|
|
- orderCountDetails(this.orderQuery).then(res=>{
|
|
|
- this.orderLoading = false
|
|
|
- if(res.state == 'Success'){
|
|
|
- this.orderData = res.content
|
|
|
- this.chart2 = echarts.init(document.getElementById("chart2"));
|
|
|
- this.chart2.setOption(this.option2);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() { },
|
|
|
mounted() {
|
|
|
- this.vipCountDetails()
|
|
|
- this.shopCountDetails()
|
|
|
- this.orderCountDetails()
|
|
|
+ this.updateTime = new Date().toLocaleString();
|
|
|
+ const thisDayStartTime = new Date(new Date().toLocaleDateString()).getTime();
|
|
|
+ const thisDayEndTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
|
|
|
+ const yesterdayStartTime = thisDayStartTime - 24 * 60 * 60 * 1000;
|
|
|
+ const yesterdayEndTime = thisDayEndTime - 24 * 60 * 60 * 1000;
|
|
|
+
|
|
|
+ orderCount({
|
|
|
+ startTime: thisDayStartTime,
|
|
|
+ endTime: thisDayEndTime
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state == 'Success') {
|
|
|
+ this.today = res.content;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ orderCount({
|
|
|
+ startTime: yesterdayStartTime,
|
|
|
+ endTime: yesterdayEndTime
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state == 'Success') {
|
|
|
+ this.yesterday = res.content;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ userStatistics().then(res => {
|
|
|
+ if (res.state == 'Success') {
|
|
|
+ this.userData = res.content;
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
},
|
|
|
};
|
|
@@ -328,45 +238,93 @@ export default {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 50px);
|
|
|
background: #f6f6f6;
|
|
|
+
|
|
|
.tab-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
top: 20px;
|
|
|
z-index: 2;
|
|
|
+
|
|
|
.tab {
|
|
|
padding: 8px 10px;
|
|
|
margin: 0 15px;
|
|
|
font-size: 14px;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
- color: rgba(0,0,0,0.6);;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
background: #F6F6F6;
|
|
|
}
|
|
|
+
|
|
|
.active {
|
|
|
background: #E8E9FE;
|
|
|
color: #2836FE;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.top-box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px 24px;
|
|
|
margin-bottom: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
- .left {
|
|
|
- background: #fff;
|
|
|
- margin-right: 30px;
|
|
|
- border-radius: 8px;
|
|
|
+ .text {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 25px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.bottom {
|
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
|
+ padding: 20px 0;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ padding: 0 20px;
|
|
|
+ border-left: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .today {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lastDay {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</style>
|