<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 || 0 }}</span>
|
</div>
|
<div class="today-item">
|
<div>今日交易额</div>
|
<span v-if="homeData.todayOrderPrice"
|
>￥{{ homeData.todayOrderPrice | unitPrice }}</span
|
>
|
<span v-else>￥0.00</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 * as API_Goods from "@/api/goods";
|
import { Chart } from "@antv/g2";
|
import * as API_Member from "@/api/member";
|
|
export default {
|
name: "home",
|
|
data() {
|
return {
|
// 测试数据
|
test: {
|
a: "test",
|
languages: [],
|
},
|
// 测试数据结束
|
tophotShopsColumns: [
|
// 表格表头
|
{
|
type: "index",
|
width: 100,
|
title: "排名",
|
align: "center",
|
},
|
{
|
title: "店铺名称",
|
key: "storeName",
|
},
|
|
{
|
title: "价格",
|
key: "price",
|
|
render: (h, params) => {
|
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
|
},
|
},
|
{
|
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("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
|
},
|
},
|
{
|
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: "",
|
},
|
};
|
},
|
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) {
|
this.orderChart ? this.orderChart.clear() : ''
|
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, 70, 70, 70],
|
});
|
}
|
|
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.area().position("createTime*price").color("title").shape("smooth");
|
|
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];
|
|
console.log("pv", data);
|
this.pvChart.data(data);
|
|
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.area().position("date*pv").color("title").shape("smooth");
|
|
this.pvChart.render();
|
},
|
|
// 浏览量
|
async getPvChart() {
|
this.pvChart ? this.pvChart.clear() : ''
|
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, 70, 70, 70],
|
});
|
}
|
this.initPvChart();
|
}
|
});
|
},
|
// 实例化会员流量图表
|
async initHistoryMemberChartList() {
|
this.historyMemberChart ? this.historyMemberChart.clear() : ''
|
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, 70, 70, 70],
|
});
|
}
|
|
this.initHistoryMemberChart();
|
}
|
},
|
// 历史在线人数
|
initHistoryMemberChart() {
|
// 默认已经加载 legend-filter 交互
|
let data = this.chartList;
|
let num = [];
|
let lastNum = [];
|
data.forEach((item) => {
|
num.push({
|
date: item.date.substring(5),
|
title: "最近48小时",
|
num: item.num,
|
res: item.num,
|
});
|
|
lastNum.push({
|
date: item.date.substring(5),
|
title: "上一周期",
|
lastNum: item.lastNum || 0,
|
res: item.lastNum || 0,
|
});
|
});
|
let params = [...num, ...lastNum];
|
this.historyMemberChart.data(params);
|
|
this.historyMemberChart.tooltip({
|
showCrosshairs: true,
|
shared: true,
|
});
|
|
this.historyMemberChart
|
.line()
|
.position("date*res")
|
.color("title")
|
.label("res")
|
.shape("smooth");
|
this.historyMemberChart
|
.point()
|
.position("date*res")
|
.color("title")
|
.label("res")
|
.shape("circle");
|
|
this.historyMemberChart
|
.area()
|
.position("date*res")
|
.color("title")
|
.shape("smooth");
|
|
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>
|
