zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页历史统计新增 历史记录对比

master
lemon橪 2022-05-13 14:17:33 +08:00
parent 68d2c25ff5
commit d433ff02cb
1 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
manager/src/views/home/home.vue
View File

@ -2,16 +2,14 @@
<div> <div>
<!-- 统计 --> <!-- 统计 -->
<div class="card"> <div class="card">
<h4> <h4>基本信息</h4>
基本信息
</h4>
<div class="count-list flex"> <div class="count-list flex">
<div class="count-item" @click="navigateTo('managerGoods')"> <div class="count-item" @click="navigateTo('managerGoods')">
<div> <div>
<Icon class="icon" size="31" type="md-photos" /> <Icon class="icon" size="31" type="md-photos" />
</div> </div>
<div> <div>
<div class="counts">{{homeData.goodsNum ||0}}</div> <div class="counts">{{ homeData.goodsNum || 0 }}</div>
<div>商品数量</div> <div>商品数量</div>
</div> </div>
</div> </div>
@ -20,30 +18,27 @@
<Icon class="icon" size="31" type="md-person" /> <Icon class="icon" size="31" type="md-person" />
</div> </div>
<div> <div>
<div class="counts">{{homeData.memberNum ||0}}</div> <div class="counts">{{ homeData.memberNum || 0 }}</div>
<div>会员数量</div> <div>会员数量</div>
</div> </div>
</div> </div>
<div class="count-item" @click="navigateTo('orderList')"> <div class="count-item" @click="navigateTo('orderList')">
<div> <div>
<Icon class="icon" size="31" type="md-list" /> <Icon class="icon" size="31" type="md-list" />
</div> </div>
<div> <div>
<div class="counts">{{homeData.orderNum ||0}}</div> <div class="counts">{{ homeData.orderNum || 0 }}</div>
<div>订单数量</div> <div>订单数量</div>
</div> </div>
</div> </div>
<div class="count-item" @click="navigateTo('shopList')"> <div class="count-item" @click="navigateTo('shopList')">
<div> <div>
<Icon class="icon" size="31" type="ios-stats" /> <Icon class="icon" size="31" type="ios-stats" />
</div> </div>
<div> <div>
<div class="counts">{{homeData.storeNum ||0}}</div> <div class="counts">{{ homeData.storeNum || 0 }}</div>
<div>店铺数量</div> <div>店铺数量</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -53,27 +48,29 @@
<h4>今日待办</h4> <h4>今日待办</h4>
<div class="todo-list flex"> <div class="todo-list flex">
<div class="todo-item" @click="navigateTo('applyGoods')"> <div class="todo-item" @click="navigateTo('applyGoods')">
<div class="counts">{{$store.state.notices.goods || 0}}</div> <div class="counts">{{ $store.state.notices.goods || 0 }}</div>
<div>待审核商品</div> <div>待审核商品</div>
</div> </div>
<div class="todo-item" @click="navigateTo('shopAuth')"> <div class="todo-item" @click="navigateTo('shopAuth')">
<div class="counts">{{$store.state.notices.store|| 0}}</div> <div class="counts">{{ $store.state.notices.store || 0 }}</div>
<div>待审核店铺</div> <div>待审核店铺</div>
</div> </div>
<div class="todo-item" @click="navigateTo('orderComplaint')"> <div class="todo-item" @click="navigateTo('orderComplaint')">
<div class="counts">{{$store.state.notices.complain|| 0}}</div> <div class="counts">{{ $store.state.notices.complain || 0 }}</div>
<div>待审核投诉</div> <div>待审核投诉</div>
</div> </div>
<div class="todo-item" @click="navigateTo('afterSaleOrder')"> <div class="todo-item" @click="navigateTo('afterSaleOrder')">
<div class="counts">{{$store.state.notices.refund|| 0}}</div> <div class="counts">{{ $store.state.notices.refund || 0 }}</div>
<div>待审核售后</div> <div>待审核售后</div>
</div> </div>
<div class="todo-item"> <div class="todo-item">
<div class="counts">{{$store.state.notices.distributionCash|| 0}}</div> <div class="counts">
{{ $store.state.notices.distributionCash || 0 }}
</div>
<div>待审核分销提现</div> <div>待审核分销提现</div>
</div> </div>
<div class="todo-item" @click="navigateTo('accountStatementBill')"> <div class="todo-item" @click="navigateTo('accountStatementBill')">
<div class="counts">{{$store.state.notices.waitPayBill|| 0}}</div> <div class="counts">{{ $store.state.notices.waitPayBill || 0 }}</div>
<div>待审核分账</div> <div>待审核分账</div>
</div> </div>
</div> </div>
@ -82,84 +79,75 @@
<!-- 今日，流量概括 --> <!-- 今日，流量概括 -->
<div class="card flow"> <div class="card flow">
<div class="flow-list flex"> <div class="flow-list flex">
<div class="flow-item "> <div class="flow-item">
<div class="flow-member"> <div class="flow-member">
<div>当前在线人数</div> <div>当前在线人数</div>
<span> <span>
{{homeData.currentNumberPeopleOnline || 0}} {{ homeData.currentNumberPeopleOnline || 0 }}
</span> </span>
</div> </div>
<div class="flow-wrapper"> <div class="flow-wrapper">
<h4> <h4>流量概括</h4>
流量概括
</h4>
<div class="card flow-box flex"> <div class="card flow-box flex">
<div class="flow-box-item"> <div class="flow-box-item">
<div> <div>今日访客数</div>
今日访客数
</div>
<div class="counts"> <div class="counts">
{{ homeData.todayUV || 0 }}
{{homeData.todayUV || 0}}
</div> </div>
</div> </div>
<div class="flow-box-item"> <div class="flow-box-item">
<div> <div>昨日访客数</div>
昨日访客数
</div>
<div class="counts"> <div class="counts">
{{homeData.yesterdayUV || 0}} {{ homeData.yesterdayUV || 0 }}
</div> </div>
</div> </div>
</div> </div>
<div class="flow-splice flex"> <div class="flow-splice flex">
<div class="flow-box-splice"> <div class="flow-box-splice">
<div> <div>前七日访客数</div>
前七日访客数
</div>
<div class="counts"> <div class="counts">
{{homeData.lastSevenUV || 0}} {{ homeData.lastSevenUV || 0 }}
</div> </div>
</div> </div>
<div class="flow-box-splice"> <div class="flow-box-splice">
<div> <div>前三十日访客数</div>
前三十日访客数
</div>
<div class="counts"> <div class="counts">
{{homeData.lastThirtyUV || 0}} {{ homeData.lastThirtyUV || 0 }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="today-box"> <div class="today-box">
<h4> 今日概括</h4> <h4>今日概括</h4>
<div class="today-list flex"> <div class="today-list flex">
<div class="today-item"> <div class="today-item">
<div>今日订单数</div> <div>今日订单数</div>
<span>{{homeData.todayOrderNum}}</span> <span>{{ homeData.todayOrderNum }}</span>
</div> </div>
<div class="today-item"> <div class="today-item">
<div>今日交易额</div> <div>今日交易额</div>
<span v-if="homeData.todayOrderPrice">￥{{homeData.todayOrderPrice | unitPrice}}</span> <span v-if="homeData.todayOrderPrice"
>￥{{ homeData.todayOrderPrice | unitPrice }}</span
>
<span v-else>￥0.00</span> <span v-else>￥0.00</span>
</div> </div>
<div class="today-item"> <div class="today-item">
<div>今日新增店铺</div> <div>今日新增店铺</div>
<span>{{homeData.todayStoreNum || 0}}</span> <span>{{ homeData.todayStoreNum || 0 }}</span>
</div> </div>
<div class="today-item"> <div class="today-item">
<div>今日新增会员数</div> <div>今日新增会员数</div>
<span>{{homeData.todayMemberNum || 0}}</span> <span>{{ homeData.todayMemberNum || 0 }}</span>
</div> </div>
<div class="today-item"> <div class="today-item">
<div>今日上架商品数量</div> <div>今日上架商品数量</div>
<span>{{homeData.todayGoodsNum || 0}}</span> <span>{{ homeData.todayGoodsNum || 0 }}</span>
</div> </div>
<div class="today-item"> <div class="today-item">
<div>今日新增评论</div> <div>今日新增评论</div>
<span>{{homeData.todayMemberEvaluation || 0}}</span> <span>{{ homeData.todayMemberEvaluation || 0 }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -174,7 +162,7 @@
</div> </div>
</div> </div>
<!-- chart --> <!-- chart -->
<div class="charts flex"> <div class="charts flex">
<div class="chart-item"> <div class="chart-item">
<h4>流量走势</h4> <h4>流量走势</h4>
<div id="pvChart"></div> <div id="pvChart"></div>
@ -188,16 +176,22 @@
<!-- top10商品 --> <!-- top10商品 -->
<div class="card transform"> <div class="card transform">
<h4>热卖商品TOP10</h4> <h4>热卖商品TOP10</h4>
<Table stripe :columns="tophotGoodsColumns" :data="topHotGoodsData"></Table> <Table
stripe
:columns="tophotGoodsColumns"
:data="topHotGoodsData"
></Table>
</div> </div>
<!-- top10店铺 --> <!-- top10店铺 -->
<div class="card transform"> <div class="card transform">
<h4>热卖店铺TOP10</h4> <h4>热卖店铺TOP10</h4>
<Table stripe :columns="tophotShopsColumns" :data="topHotShopsData"></Table> <Table
stripe
:columns="tophotShopsColumns"
:data="topHotShopsData"
></Table>
</div> </div>
</div> </div>
</template> </template>
@ -217,7 +211,7 @@ export default {
// 测试数据 // 测试数据
test: { test: {
a: "test", a: "test",
languages:[] languages: [],
}, },
// 测试数据结束 // 测试数据结束
tophotShopsColumns: [ tophotShopsColumns: [
@ -418,6 +412,7 @@ export default {
let data = [...uv, ...pv]; let data = [...uv, ...pv];
console.log("pv", data);
this.pvChart.data(data); this.pvChart.data(data);
this.pvChart.scale({ this.pvChart.scale({
activeQuantity: { activeQuantity: {
@ -491,13 +486,31 @@ export default {
initHistoryMemberChart() { initHistoryMemberChart() {
// 默认已经加载 legend-filter 交互 // 默认已经加载 legend-filter 交互
let data = this.chartList; let data = this.chartList;
let num = [];
let lastNum = [];
data.forEach((item) => { data.forEach((item) => {
item.title = "历史在线人数"; num.push({
item.date = item.date.substring(5); date: item.date.substring(5),
}); title: "最近48小时",
this.historyMemberChart.data(data); 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.scale({
activeQuantity: {
range: [0, 1],
nice: true,
},
});
this.historyMemberChart.tooltip({ this.historyMemberChart.tooltip({
showCrosshairs: true, showCrosshairs: true,
shared: true, shared: true,
@ -505,14 +518,15 @@ export default {
this.historyMemberChart this.historyMemberChart
.line() .line()
.position("date*num") .position("date*res")
.color("title", ["#ffaa71"]) .color("title", ["#ffaa71", "#398AB9"])
.label("res")
.shape("smooth"); .shape("smooth");
this.historyMemberChart this.historyMemberChart
.point() .point()
.position("date*num") .position("date*res")
.color("title", ["#ffaa71"]) .color("title", ["#ffaa71", "#398AB9"])
.label("res")
.shape("circle"); .shape("circle");
this.historyMemberChart.render(); this.historyMemberChart.render();
}, },