Skip to content

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

首页统计

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