549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 统计 -->
|
||
|
||
<div class="card">
|
||
<h4>
|
||
|
||
基本信息
|
||
</h4>
|
||
<div class="count-list flex">
|
||
<div class="count-item" @click="navigateTo('managerGoods')">
|
||
<div>
|
||
<Icon class="icon" size="31" type="md-photos" />
|
||
</div>
|
||
<div>
|
||
<div class="counts">{{homeData.goodsNum ||0}}</div>
|
||
<div>商品数量</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="count-item" @click="navigateTo('memberList')">
|
||
<div>
|
||
<Icon class="icon" size="31" type="md-person" />
|
||
</div>
|
||
<div>
|
||
<div class="counts">{{homeData.memberNum ||0}}</div>
|
||
<div>会员数量</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="count-item" @click="navigateTo('orderList')">
|
||
<div>
|
||
<Icon class="icon" size="31" type="md-list" />
|
||
</div>
|
||
<div>
|
||
<div class="counts">{{homeData.orderNum ||0}}</div>
|
||
<div>订单数量</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="count-item" @click="navigateTo('shopList')">
|
||
<div>
|
||
<Icon class="icon" size="31" type="ios-stats" />
|
||
</div>
|
||
<div>
|
||
<div class="counts">{{homeData.storeNum ||0}}</div>
|
||
<div>店铺数量</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今日待办 -->
|
||
|
||
<div class="card">
|
||
<h4>今日待办</h4>
|
||
<div class="todo-list flex">
|
||
<div class="todo-item" @click="navigateTo('applyGoods')">
|
||
<div class="counts">{{$store.state.notices.goods || 0}}</div>
|
||
<div>待审核商品</div>
|
||
</div>
|
||
<div class="todo-item" @click="navigateTo('shopAuth')">
|
||
<div class="counts">{{$store.state.notices.store|| 0}}</div>
|
||
<div>待审核店铺</div>
|
||
</div>
|
||
<div class="todo-item" @click="navigateTo('orderComplaint')">
|
||
<div class="counts">{{$store.state.notices.complain|| 0}}</div>
|
||
<div>待审核投诉</div>
|
||
</div>
|
||
<div class="todo-item" @click="navigateTo('afterSaleOrder')">
|
||
<div class="counts">{{$store.state.notices.refund|| 0}}</div>
|
||
<div>待审核售后</div>
|
||
</div>
|
||
<div class="todo-item" >
|
||
<div class="counts">{{$store.state.notices.distributionCash|| 0}}</div>
|
||
<div>待审核分销提现</div>
|
||
</div>
|
||
<div class="todo-item" @click="navigateTo('accountStatementBill')">
|
||
<div class="counts">{{$store.state.notices.waitPayBill|| 0}}</div>
|
||
<div>待审核分账</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今日，流量概括 -->
|
||
<div class="card flow">
|
||
<div class="flow-list flex">
|
||
<div class="flow-item ">
|
||
<div class="flow-member">
|
||
<div>
|
||
|
||
当前在线人数
|
||
</div>
|
||
<span>
|
||
{{homeData.currentNumberPeopleOnline || 0}}
|
||
</span>
|
||
</div>
|
||
<div class="flow-wrapper">
|
||
<h4>
|
||
流量概括
|
||
</h4>
|
||
<div class="card flow-box flex">
|
||
<div class="flow-box-item">
|
||
<div>
|
||
今日访客数
|
||
</div>
|
||
<div class="counts">
|
||
|
||
{{homeData.todayUV || 0}}
|
||
</div>
|
||
</div>
|
||
<div class="flow-box-item">
|
||
<div>
|
||
昨日访客数
|
||
</div>
|
||
<div class="counts">
|
||
{{homeData.yesterdayUV || 0}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-splice flex">
|
||
<div class="flow-box-splice">
|
||
<div>
|
||
前七日访客数
|
||
</div>
|
||
<div class="counts">
|
||
{{homeData.lastSevenUV || 0}}
|
||
</div>
|
||
</div>
|
||
<div class="flow-box-splice">
|
||
<div>
|
||
前三十日访客数
|
||
</div>
|
||
<div class="counts">
|
||
{{homeData.lastThirtyUV || 0}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="today-box">
|
||
<h4> 今日概括</h4>
|
||
<div class="today-list flex">
|
||
<div class="today-item">
|
||
<div>今日订单数</div>
|
||
<span>{{homeData.todayOrderNum}}</span>
|
||
</div>
|
||
<div class="today-item">
|
||
<div>今日交易额</div>
|
||
|
||
<span>￥{{homeData.todayOrderPrice | unitPrice }}</span>
|
||
</div>
|
||
<div class="today-item">
|
||
<div>今日新增店铺</div>
|
||
<span>{{homeData.todayStoreNum || 0}}</span>
|
||
</div>
|
||
<div class="today-item">
|
||
<div>今日新增会员数</div>
|
||
<span>{{homeData.todayMemberNum || 0}}</span>
|
||
</div>
|
||
<div class="today-item">
|
||
<div>今日上架商品数量</div>
|
||
<span>{{homeData.todayGoodsNum || 0}}</span>
|
||
</div>
|
||
<div class="today-item">
|
||
<div>今日新增评论</div>
|
||
<span>{{homeData.todayMemberEvaluation || 0}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- chart -->
|
||
<div class="card transform">
|
||
<div>
|
||
<h4>最近48小时在线人数（整点为准）</h4>
|
||
<div id="historyMemberChart"></div>
|
||
</div>
|
||
</div>
|
||
<!-- chart -->
|
||
<div class="charts flex">
|
||
<div class="chart-item">
|
||
<h4>流量走势</h4>
|
||
<div id="pvChart"></div>
|
||
</div>
|
||
<div class="chart-item">
|
||
<h4>交易趋势</h4>
|
||
<div id="orderChart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- top10商品 -->
|
||
<div class="card transform">
|
||
<h4>热卖商品TOP10</h4>
|
||
<Table stripe :columns="tophotGoodsColumns" :data="topHotGoodsData"></Table>
|
||
</div>
|
||
|
||
<!-- top10店铺 -->
|
||
<div class="card transform">
|
||
<h4>热卖店铺TOP10</h4>
|
||
<Table stripe :columns="tophotShopsColumns" :data="topHotShopsData"></Table>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
|
||
import show from "./show.vue";
|
||
import * as API_Goods from "@/api/goods";
|
||
|
||
import { Chart } from "@antv/g2";
|
||
import * as API_Member from "@/api/member";
|
||
import Cookies from "js-cookie";
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
show,
|
||
},
|
||
data() {
|
||
return {
|
||
tophotShopsColumns: [ // 表格表头
|
||
{
|
||
type: "index",
|
||
width: 100,
|
||
title: "排名",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "店铺名称",
|
||
key: "storeName",
|
||
},
|
||
|
||
{
|
||
title: "价格",
|
||
key: "price",
|
||
render: (h, params) => {
|
||
return h(
|
||
"div",
|
||
this.$options.filters.unitPrice(params.row.price, "￥")
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: "销量",
|
||
key: "num",
|
||
width: 100,
|
||
sortable: true,
|
||
},
|
||
],
|
||
|
||
tophotGoodsColumns: [
|
||
{
|
||
type: "index",
|
||
width: 100,
|
||
title: "排名",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "商品名称",
|
||
key: "goodsName",
|
||
},
|
||
|
||
{
|
||
title: "价格",
|
||
key: "price",
|
||
render: (h, params) => {
|
||
return h(
|
||
"div",
|
||
this.$options.filters.unitPrice(params.row.price, "￥")
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: "销量",
|
||
key: "num",
|
||
width: 100,
|
||
sortable: true,
|
||
},
|
||
],
|
||
topHotGoodsData: [], //热卖商品集合
|
||
topHotShopsData: [], //热卖店铺集合
|
||
awaitTodoData: "", //今日待办集合
|
||
homeData: "", // 首页数据
|
||
pvChart: "", // 流量统计
|
||
orderChart: "", // 订单统计
|
||
historyMemberChart: "", // 最近会员流量统计
|
||
params: { // 请求参数
|
||
searchType: "LAST_SEVEN",
|
||
},
|
||
// 订单传参
|
||
orderParams: {
|
||
searchType: "LAST_SEVEN", // TODAY , YESTERDAY , LAST_SEVEN , LAST_THIRTY
|
||
year: "",
|
||
shopId: "",
|
||
memberId: "",
|
||
},
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
currNav() {
|
||
return this.$store.state.app.currNav;
|
||
},
|
||
avatarPath() {
|
||
return localStorage.avatorImgPath;
|
||
},
|
||
},
|
||
methods: {
|
||
navigateTo(name) {
|
||
this.$router.push({
|
||
name,
|
||
});
|
||
},
|
||
// top10热卖商品
|
||
async toHotGoods() {
|
||
let res = await hotGoods(this.params);
|
||
res.success ? (this.topHotGoodsData = res.result) : "";
|
||
},
|
||
|
||
// top10热卖店铺
|
||
async topHotShops() {
|
||
let res = await hotShops(this.params);
|
||
res.success ? (this.topHotShopsData = res.result) : "";
|
||
},
|
||
// 今日待办
|
||
async awaitTodo() {
|
||
let res = await getNoticePage();
|
||
res.success ? (this.awaitTodoData = res.result) : "";
|
||
},
|
||
|
||
//首页统计数据
|
||
async getHomeData() {
|
||
let res = await homeStatistics();
|
||
if (res.success) {
|
||
if (
|
||
res.result.todayOrderPrice &&
|
||
res.result.todayOrderPrice != "null"
|
||
) {
|
||
res.result.todayOrderPrice = parseInt(res.result.todayOrderPrice);
|
||
} else {
|
||
res.result.todayOrderPrice = 0;
|
||
}
|
||
|
||
this.homeData = res.result;
|
||
}
|
||
},
|
||
|
||
// 实例化订单图表
|
||
async initOrderChartList(name) {
|
||
const res = await API_Goods.getOrderChart(this.orderParams);
|
||
if (res.success) {
|
||
this.chartList = res.result;
|
||
|
||
if (!this.orderChart) {
|
||
this.orderChart = new Chart({
|
||
container: "orderChart",
|
||
autoFit: true,
|
||
height: 500,
|
||
padding: [70, 35, 70, 35],
|
||
});
|
||
}
|
||
|
||
this.initOrderChart(); //订单表
|
||
}
|
||
},
|
||
|
||
|
||
initOrderChart() {
|
||
// 默认已经加载 legend-filter 交互
|
||
let data = this.chartList;
|
||
|
||
data.forEach((item) => {
|
||
item.createTime = item.createTime.split(" ")[0];
|
||
item.title = "交易额";
|
||
});
|
||
this.orderChart.data(data);
|
||
|
||
this.orderChart.tooltip({
|
||
showCrosshairs: true,
|
||
shared: true,
|
||
});
|
||
|
||
this.orderChart
|
||
.line()
|
||
.position("createTime*price")
|
||
.label("price")
|
||
.color("title")
|
||
.shape("smooth");
|
||
|
||
this.orderChart
|
||
.point()
|
||
.position("createTime*price")
|
||
.label("price")
|
||
.color("title")
|
||
.shape("circle")
|
||
.style({
|
||
stroke: "#fff",
|
||
lineWidth: 1,
|
||
});
|
||
this.orderChart.render();
|
||
},
|
||
|
||
|
||
|
||
|
||
// 浏览量统计图
|
||
initPvChart() {
|
||
let uv = [];
|
||
let pv = [];
|
||
this.data.forEach((item) => {
|
||
uv.push({
|
||
date: item.date,
|
||
uvNum: item.uvNum,
|
||
title: "访客数UV",
|
||
pv: item.uvNum,
|
||
});
|
||
|
||
pv.push({
|
||
date: item.date,
|
||
pvNum: item.pvNum,
|
||
pv: item.pvNum,
|
||
title: "浏览量PV",
|
||
});
|
||
});
|
||
|
||
let data = [...uv, ...pv];
|
||
|
||
this.pvChart.data(data);
|
||
this.pvChart.scale({
|
||
activeQuantity: {
|
||
range: [0, 1],
|
||
nice: true,
|
||
},
|
||
});
|
||
this.pvChart.tooltip({
|
||
showCrosshairs: true,
|
||
shared: true,
|
||
});
|
||
|
||
this.pvChart
|
||
.line()
|
||
.position("date*pv")
|
||
.color("title")
|
||
.label("pv")
|
||
.shape("smooth");
|
||
|
||
this.pvChart
|
||
.point()
|
||
.position("date*pv")
|
||
.color("title")
|
||
.label("pv")
|
||
.shape("circle")
|
||
.style({
|
||
stroke: "#fff",
|
||
lineWidth: 1,
|
||
});
|
||
|
||
this.pvChart.render();
|
||
},
|
||
|
||
// 浏览量
|
||
async getPvChart() {
|
||
API_Member.getStatisticsList(this.params).then((res) => {
|
||
if (res.result) {
|
||
this.data = res.result;
|
||
|
||
if (!this.pvChart) {
|
||
this.pvChart = new Chart({
|
||
container: "pvChart",
|
||
autoFit: true,
|
||
height: 500,
|
||
padding: [70, 35, 70, 35],
|
||
});
|
||
}
|
||
this.initPvChart();
|
||
}
|
||
});
|
||
}, // 实例化会员流量图表
|
||
async initHistoryMemberChartList() {
|
||
const res = await API_Member.historyMemberChartList();
|
||
if (res.success) {
|
||
this.chartList = res.result;
|
||
|
||
if (!this.historyMemberChart) {
|
||
this.historyMemberChart = new Chart({
|
||
container: "historyMemberChart",
|
||
autoFit: true,
|
||
height: 500,
|
||
padding: [70, 35, 70, 35],
|
||
});
|
||
}
|
||
|
||
this.initHistoryMemberChart();
|
||
}
|
||
},
|
||
initHistoryMemberChart(){
|
||
// 默认已经加载 legend-filter 交互
|
||
let data = this.chartList;
|
||
|
||
data.forEach((item) => {
|
||
item.title = "历史在线人数";
|
||
});
|
||
this.historyMemberChart.data(data);
|
||
|
||
console.error(data)
|
||
this.historyMemberChart.tooltip({
|
||
showCrosshairs: true,
|
||
shared: true,
|
||
});
|
||
|
||
this.historyMemberChart
|
||
.line()
|
||
.position("date*num")
|
||
.color("title",['#ffaa71'])
|
||
.shape("smooth")
|
||
;
|
||
|
||
this.historyMemberChart
|
||
.point()
|
||
.position("date*num")
|
||
.color("title",['#ffaa71'])
|
||
.shape("circle")
|
||
;
|
||
this.historyMemberChart.render();
|
||
},
|
||
// 初始化信息
|
||
init() {
|
||
this.toHotGoods();
|
||
this.topHotShops();
|
||
this.awaitTodo();
|
||
this.getHomeData();
|
||
this.getPvChart();
|
||
this.initOrderChartList();
|
||
this.initHistoryMemberChartList();
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "./home.scss";
|
||
</style>
|