Skip to content

E
ElectricitySheep
Commit 8b4e54b6 authored by 黄奎's avatar 黄奎
Browse files
Options

首页统计

parent 02d25a01
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 90 deletions
src/components/zanIndex.vue
View file @ 8b4e54b6
...@@ -304,7 +304,7 @@ ...@@ -304,7 +304,7 @@
<div class="zanIndex_Second"> <div class="zanIndex_Second">
<div class="searchDiv"> <div class="searchDiv">
<div> <div>
<el-select v-model="searchMsg.plat" class="w120"> <el-select v-model="basicQMsg.Source" class="w120" @change="getChange">
<el-option label="全部平台" :value='0'></el-option> <el-option label="全部平台" :value='0'></el-option>
<el-option label="微信" :value='1'></el-option> <el-option label="微信" :value='1'></el-option>
<el-option label="支付宝" :value='2'></el-option> <el-option label="支付宝" :value='2'></el-option>
...@@ -312,29 +312,24 @@ ...@@ -312,29 +312,24 @@
<el-option label="百度" :value='4'></el-option> <el-option label="百度" :value='4'></el-option>
</el-select> </el-select>
</div> </div>
<div>
<el-select v-model="searchMsg.plat2" filterable class="w160">
<el-option label="全部" :value='0'></el-option>
</el-select>
</div>
<div style="margin-right:50px;"> <div style="margin-right:50px;">
<el-date-picker class="indataPicker" type="daterange" v-model="searchMsg.dateArr" range-separator="至" <el-date-picker class="indataPicker" type="daterange" v-model="basicQMsg.dateStr" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期"> start-placeholder="开始日期" end-placeholder="结束日期" @change="getChange" value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
</div> </div>
<div> <div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick" @change="getChange">
<el-tab-pane label="7日" name="first"></el-tab-pane> <el-tab-pane label="7日" name="first"></el-tab-pane>
<el-tab-pane label="30日" name="second"></el-tab-pane> <el-tab-pane label="30日" name="second"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div> <div>
<span class="clean">清空筛选</span> <span class="clean" @click="ClearMsg()" @change="getChange">清空筛选</span>
</div> </div>
</div> </div>
<div class="num-info"> <div class="num-info">
<div class="num-info-item"> <div class="num-info-item">
<div>1094</div> <div>{{basicData.UserTotalNum}}</div>
<div class="info-item-name"> <div class="info-item-name">
<span>用户数</span> <span>用户数</span>
<el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom"> <el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
...@@ -343,19 +338,19 @@ ...@@ -343,19 +338,19 @@
</div> </div>
</div> </div>
<div class="num-info-item"> <div class="num-info-item">
<div>103</div> <div>{{basicData.GoodsTotalNum}}</div>
<div class="info-item-name">商品数</div> <div class="info-item-name">商品数</div>
</div> </div>
<div class="num-info-item"> <div class="num-info-item">
<div>477</div> <div>{{basicData.TotalOrderNum}}</div>
<div class="info-item-name">订单数</div> <div class="info-item-name">订单数</div>
</div> </div>
<div class="num-info-item"> <div class="num-info-item">
<div>41</div> <div>{{basicData.NoSendOrderNum}}</div>
<div class="info-item-name">待发货订单数</div> <div class="info-item-name">待发货订单数</div>
</div> </div>
<div class="num-info-item"> <div class="num-info-item">
<div>0</div> <div>{{basicData.ActivistOrderNum}}</div>
<div class="info-item-name">维权订单数</div> <div class="info-item-name">维权订单数</div>
</div> </div>
</div> </div>
...@@ -366,7 +361,7 @@ ...@@ -366,7 +361,7 @@
<span>销售情况</span> <span>销售情况</span>
</div> </div>
<div class="tab-pay"> <div class="tab-pay">
<el-tabs v-model="activeSell"> <el-tabs v-model="activeSell" @tab-click="handleSellClick">
<el-tab-pane label="昨日" name="first"></el-tab-pane> <el-tab-pane label="昨日" name="first"></el-tab-pane>
<el-tab-pane label="7日" name="second"></el-tab-pane> <el-tab-pane label="7日" name="second"></el-tab-pane>
</el-tabs> </el-tabs>
...@@ -376,22 +371,22 @@ ...@@ -376,22 +371,22 @@
<div class="pay-info"> <div class="pay-info">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()"> <div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
<img src="../assets/img/active.png" alt="" /> <img src="../assets/img/active.png" alt="" />
<div>24</div> <div>{{salesData.OrderCount}}</div>
<div class="info-item-name">支付订单数</div> <div class="info-item-name">支付订单数</div>
</div> </div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()"> <div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt="" /> <img src="../assets/img/active.png" alt="" />
<div>5456.00</div> <div>{{salesData.Income}}</div>
<div class="info-item-name">支付金额</div> <div class="info-item-name">支付金额</div>
</div> </div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()"> <div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt="" /> <img src="../assets/img/active.png" alt="" />
<div>24</div> <div>{{salesData.UserCount}}</div>
<div class="info-item-name">支付人数</div> <div class="info-item-name">支付人数</div>
</div> </div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()"> <div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt="" /> <img src="../assets/img/active.png" alt="" />
<div>24</div> <div>{{salesData.GoodCount}}</div>
<div class="info-item-name">支付件数</div> <div class="info-item-name">支付件数</div>
</div> </div>
</div> </div>
...@@ -425,7 +420,7 @@ ...@@ -425,7 +420,7 @@
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div> </div>
<div class="table_Inner"> <div class="table_Inner">
<el-table :data="tableData" style="width: 100%"> <el-table :data="saleIncomeData" style="width: 100%">
<el-table-column label="排名" width="120"> <el-table-column label="排名" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="rankIng"> <div class="rankIng">
...@@ -440,24 +435,24 @@ ...@@ -440,24 +435,24 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="商品" width="400"> <el-table-column prop="GoodsName" label="商品" width="400">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="text-omit"> <div class="text-omit">
{{scope.row.name}} {{scope.row.GoodsName}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sales" label="销售额" sortable width="150"> <el-table-column prop="Income" label="销售额" sortable width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="padding-left:10px;"> <div style="padding-left:10px;">
{{scope.row.sales}} {{scope.row.Income}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="Numer" sortable label="销量" width="150"> <el-table-column prop="SaleCount" sortable label="销量" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="padding-left:10px;"> <div style="padding-left:10px;">
{{scope.row.Numer}} {{scope.row.SaleCount}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -470,7 +465,7 @@ ...@@ -470,7 +465,7 @@
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div> </div>
<div class="table_Inner table2"> <div class="table_Inner table2">
<el-table :data="tableData" style="width: 100%"> <el-table :data="saleUserData" style="width: 100%">
<el-table-column label="排名" width="120"> <el-table-column label="排名" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="rankIng"> <div class="rankIng">
...@@ -485,25 +480,30 @@ ...@@ -485,25 +480,30 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="用户" width="400"> <el-table-column prop="UserName" label="用户" width="400">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="Zheader_image"> <div class="Zheader_image">
<img src="../assets/img/id-card.png" alt="" /> <template v-if="scope.row.Photo">
<img :src="scope.row.Photo" alt="" />
</template>
<template v-else>
<img src="../assets/img/id-card.png" alt="" />
</template>
</div> </div>
<span class="nameList">印象日本地接～谢军</span> <span class="nameList"> {{scope.row.UserName}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sales" label="支付金额" sortable width="150"> <el-table-column prop="Income" label="支付金额" sortable width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="padding-left:10px;"> <div style="padding-left:10px;">
{{scope.row.sales}} {{scope.row.Income}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="Numer" sortable label="支付件数" width="150"> <el-table-column prop="SaleCount" sortable label="支付件数" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="padding-left:10px;"> <div style="padding-left:10px;">
{{scope.row.Numer}} {{scope.row.SaleCount}}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -511,14 +511,15 @@ ...@@ -511,14 +511,15 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
activeName: 'first', //基础数据
activeName: '',
//销售情况
activeSell: 'first', activeSell: 'first',
//过滤支付订单数 //过滤支付订单数
isShowOrder: true, isShowOrder: true,
...@@ -528,58 +529,113 @@ ...@@ -528,58 +529,113 @@
isShowPay: true, isShowPay: true,
//过滤支付件数 //过滤支付件数
isShowPayNum: true, isShowPayNum: true,
searchMsg: { //查询数据
plat: 0, basicQMsg: {
plat2: 0, Source: 0, //来源
dateArr: [] dateStr: [], //日期
StartDate: "", //开始时间
EndDate: "", //结束时间
SalesTimeType: 1, //默认昨日
}, },
//商品购买力data basicData: {}, //基础数据
tableData: [{ salesData: {}, //销售数据
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】', saleIncomeData: [], //商品购买力TOP排行
sales: '23450.00', saleUserData: [], //用户购买力TOP排行
Numer: '109',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23440.00',
Numer: '108',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23420.00',
Numer: '105',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}]
}; };
}, },
created() {}, created() {},
methods: { methods: {
handleClick() {}, //清空选择
ClearMsg() {
this.basicQMsg.Source = 0;
this.basicQMsg.dateStr = [];
this.basicQMsg.StartDate = "";
this.basicQMsg.EndDate = "";
this.activeName = "";
this.getChange();
},
//数据改变
getChange() {
this.getBasicData();
this.getMallIndexSalesStatistics();
this.GetMallIndesSalesIncomeStatistics();
this.GetMallIndesSalesUserStatistics();
},
//基础数据日期切换
handleClick(tab, event) {
this.basicQMsg.dateStr = [];
//7日
if (tab.name == 'first') {
this.basicQMsg.dateStr.push(this.$commonUtils.AddDay('', -7));
}
//30日
else if (tab.name == "second") {
this.basicQMsg.dateStr.push(this.$commonUtils.AddDay('', -30))
}
this.basicQMsg.dateStr.push(this.$commonUtils.AddDay('', -0));
this.getChange();
},
//获取基础数据
getBasicData() {
if (this.dateStr && this.dateStr.length > 0) {
this.basicQMsg.StartDate = this.dateStr[0];
this.basicQMsg.EndDate = this.dateStr[1];
} else {
this.basicQMsg.StartDate = '';
this.basicQMsg.EndDate = '';
}
this.apipost("/api/Tenant/MallIndexStatistics", this.basicQMsg, res => {
if (res.data.resultCode == 1) {
this.basicData = res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//销售情况统计
getMallIndexSalesStatistics() {
this.apipost("/api/Tenant/MallIndexSalesStatistics", this.basicQMsg, res => {
if (res.data.resultCode == 1) {
this.salesData = res.data.data;
this.initMap()
} else {
this.Info(res.data.message);
}
})
},
//商品购买力TOP排行
GetMallIndesSalesIncomeStatistics() {
this.apipost("/api/Tenant/MallIndesSalesIncomeStatistics", this.basicQMsg, res => {
if (res.data.resultCode == 1) {
this.saleIncomeData = res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//用户购买力TOP排行
GetMallIndesSalesUserStatistics() {
this.apipost("/api/Tenant/MallIndesSalesUserStatistics", this.basicQMsg, res => {
if (res.data.resultCode == 1) {
this.saleUserData = res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//销售情况统计切换
handleSellClick(tab, event) {
//昨日
if (tab.name == 'first') {
this.basicQMsg.SalesTimeType = 1;
}
//7日
else if (tab.name == "second") {
this.basicQMsg.SalesTimeType = 7;
}
this.getChange();
},
//数字加0 //数字加0
getNumber(num) { getNumber(num) {
let str = ''; let str = '';
...@@ -609,6 +665,20 @@ ...@@ -609,6 +665,20 @@
//初始化图标 //初始化图标
initMap() { initMap() {
var myChart = this.$echarts.init(this.$refs.myecharts); var myChart = this.$echarts.init(this.$refs.myecharts);
var xData = []; //x轴数据
var orderArray = []; //订单数量
var orderIncome = []; //支付金额
var userArray = []; //支付人数
var goodArray = []; //商品件数
if (this.salesData && this.salesData.subList && this.salesData.subList.length > 0) {
this.salesData.subList.forEach(item => {
xData.push(item.TimeStr);
orderArray.push(item.OrderCount);
orderIncome.push(item.Income)
userArray.push(item.UserCount);
goodArray.push(item.GoodCount);
});
}
var option = { var option = {
title: { title: {
text: '' text: ''
...@@ -625,7 +695,7 @@ ...@@ -625,7 +695,7 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] data: xData
}, },
yAxis: { yAxis: {
axisLine: { //y轴 axisLine: { //y轴
...@@ -649,28 +719,28 @@ ...@@ -649,28 +719,28 @@
type: 'line', type: 'line',
stack: '总量', stack: '总量',
color: '#3399ff', color: '#3399ff',
data: [120, 132, 101, 134, 90, 230, 210] data: orderArray
}, },
{ {
name: '支付金额', name: '支付金额',
type: 'line', type: 'line',
stack: '总量', stack: '总量',
color: 'rgb(255, 163, 96)', color: 'rgb(255, 163, 96)',
data: [220, 182, 191, 234, 290, 330, 310] data: orderIncome
}, },
{ {
name: '支付人数', name: '支付人数',
type: 'line', type: 'line',
stack: '总量', stack: '总量',
color: 'rgb(75, 194, 130)', color: 'rgb(75, 194, 130)',
data: [150, 232, 201, 154, 190, 330, 410] data: userArray
}, },
{ {
name: '支付件数', name: '支付件数',
type: 'line', type: 'line',
stack: '总量', stack: '总量',
color: 'rgb(255, 133, 133)', color: 'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320] data: goodArray
}, },
] ]
}; };
...@@ -678,7 +748,7 @@ ...@@ -678,7 +748,7 @@
}, },
}, },
mounted() { mounted() {
this.getChange();
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment