zkthink
522 lines
13 KiB
Vue
522 lines
13 KiB
Vue
<template>
|
|
<div class="market_data_page">
|
|
<div class="data_list">
|
|
<ul>
|
|
<li v-for="(item,index) in dataList" :key="index">
|
|
<p>{{ item.value }}</p>
|
|
<p>{{ item.name }} <i class="el-icon-warning-outline" :title="item.tips"></i></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="false" class="visit_data">
|
|
<div class="item_box">
|
|
<p class="echart_title">访问分布情况</p>
|
|
<map-chart :mapdata="mapData" />
|
|
</div>
|
|
<div class="item_box">
|
|
<div class="item_box-chart">
|
|
<p class="echart_title">访问占比</p>
|
|
<div class="chart_box"><cake :chart-data="cakeData" /></div>
|
|
<div class="chart_box"><cake :chart-data="cakeData" /></div>
|
|
</div>
|
|
<div class="item_box-chart">
|
|
<p class="echart_title">终端分布</p>
|
|
<div class="chart_box"><cake :chart-data="cakeData" /></div>
|
|
<div class="chart_box"><cake :chart-data="cakeData" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tendency_data">
|
|
<div class="item_box">
|
|
<p class="echart_title">趋势图</p>
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name" :name="item.id" />
|
|
</el-tabs>
|
|
<bar :chart-data="tendencyData" style="height: calc(100% - 54px)" />
|
|
</div>
|
|
<div class="item_box">
|
|
<p class="title">
|
|
商家成交排行榜
|
|
<span>成交额/元</span>
|
|
</p>
|
|
<ul v-if="merchantRank.length">
|
|
<li v-for="(item,index) in merchantRank" :key="index">
|
|
<p>
|
|
<span>{{ index + 1 }}</span>
|
|
</p>
|
|
<p>{{ item.storeName }}</p>
|
|
<p>{{ item.tradeAmount / 100 }}</p>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
v-else
|
|
class="empty"
|
|
>
|
|
<img
|
|
:src="empty"
|
|
alt=""
|
|
/>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="false" class="sale_data">
|
|
<div class="item_box">
|
|
<p class="echart_title">销售类别分类</p>
|
|
<pie :chart-data="saleData" />
|
|
</div>
|
|
<div class="item_box">
|
|
<p class="title">
|
|
畅销商品排行榜
|
|
<span>售卖数/个</span>
|
|
</p>
|
|
<ul>
|
|
<li v-for="(item,index) in rankList" :key="index">
|
|
<p>
|
|
<span>{{ index + 1 }}</span>
|
|
</p>
|
|
<p>{{ item.name }}</p>
|
|
<p>{{ item.value }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="merchants_detail">
|
|
<p>
|
|
商家数据明细
|
|
<span v-if="false">导出</span>
|
|
</p>
|
|
<el-table
|
|
:data="tableData.statItemDTOList"
|
|
border
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="storeName"
|
|
label="店铺名称"
|
|
/>
|
|
<el-table-column
|
|
prop="tenantCode"
|
|
label="店铺编码"
|
|
/>
|
|
<el-table-column
|
|
prop="tradeProductCount"
|
|
:formatter="getNum"
|
|
label="参与商品数 (件)"
|
|
/>
|
|
<el-table-column
|
|
prop="tradeUserCount"
|
|
:formatter="getNum"
|
|
label="访客数 (人)"
|
|
/>
|
|
<el-table-column
|
|
prop="orderCount"
|
|
:formatter="getNum"
|
|
label="订单数 (笔)"
|
|
/>
|
|
<el-table-column
|
|
prop="payedUserCount"
|
|
:formatter="getNum"
|
|
label="成交客户数 (笔)"
|
|
/>
|
|
<el-table-column
|
|
:formatter="getPrice"
|
|
prop="pricePerUser"
|
|
label="客单件 (元)"
|
|
/>
|
|
<el-table-column
|
|
:formatter="getPrice"
|
|
prop="tradeAmount"
|
|
label="成交总额 (元)"
|
|
/>
|
|
</el-table>
|
|
<pagination
|
|
v-show="tableData.total > 0"
|
|
:limit.sync="formParams.pageSize"
|
|
:page.sync="formParams.pageIndex"
|
|
:total="Number(tableData.total)"
|
|
@pagination="fetch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import empty from '@/assets/empty.png'
|
|
import Marketing from '@/api/Marketing'
|
|
import Pagination from '@/components/Pagination'
|
|
import bar from '@/components/marketEchart/bar'
|
|
import pie from '@/components/marketEchart/pie'
|
|
import echarts from 'echarts'
|
|
import mapChart from '@/components/marketEchart/map'
|
|
import cake from '@/components/marketEchart/cake'
|
|
export default {
|
|
components: {
|
|
Pagination,
|
|
bar,
|
|
pie,
|
|
cake,
|
|
mapChart
|
|
},
|
|
props: {
|
|
params: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
empty: empty,
|
|
dataList: [
|
|
{ name: '成交总额(元)', value: 0, tips: '活动开始之后参与活动的商品总成交额', field: 'tradeAmout' },
|
|
{ name: '支付订单数(笔)', value: 0, tips: '活动期间活动商品带来的支付成功订单数，不包括退款订单', field: 'tradeOrderCount' },
|
|
{ name: '支付客户数(人)', value: 0, tips: '对活动商品进行支付的客户数', field: 'tradeUserCount' },
|
|
{ name: '参与商家数(家)', value: 0, tips: '本活动报名成功的商家数量', field: 'tradeTenantCount' },
|
|
{ name: '参与商品数(件)', value: 0, tips: '本活动报名中的商家所有的活动商品数，不按最小SKU算', field: 'tradeProductCount' }
|
|
|
|
],
|
|
rankList: [
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' },
|
|
{ name: '阿里巴巴小店', value: '12321,3232' }
|
|
|
|
],
|
|
merchantRank: [],
|
|
tabList: [
|
|
{ name: '销售额', id: 'sale' }
|
|
// { name: '访问量', id: 'visit' }
|
|
],
|
|
activeName: 'sale',
|
|
tendencyData: {
|
|
xData: [],
|
|
series: {
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#74D6FF'
|
|
}, {
|
|
offset: 1,
|
|
color: '#3A68F1'
|
|
}])
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#fff',
|
|
formatter: function (p) {
|
|
return p.value || ''
|
|
}
|
|
}
|
|
},
|
|
data: [],
|
|
barMaxWidth: '20px'
|
|
}
|
|
},
|
|
saleData: {
|
|
series: {
|
|
data: [
|
|
{ name: '家用电器', value: 4544 },
|
|
{ name: '食用酒水', value: 4544 },
|
|
{ name: '个护健康', value: 4544 },
|
|
{ name: '服饰箱包', value: 4544 },
|
|
{ name: '母婴产品', value: 4544 },
|
|
{ name: '其它', value: 4544 }
|
|
]
|
|
}
|
|
},
|
|
cakeData: {
|
|
series: {
|
|
data: [
|
|
{ name: '湖北省', value: 75 },
|
|
{ name: '广东省', value: 20 }
|
|
]
|
|
}
|
|
},
|
|
mapData: [{ fProvince: "北京", fCity: '北京', fVisitCount: 199 }],
|
|
formParams: {
|
|
pageSize: 10,
|
|
pageIndex: 1
|
|
},
|
|
tableData: {
|
|
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getDetail()
|
|
this.findTenantStatDetail()
|
|
},
|
|
methods: {
|
|
async getDetail() {
|
|
const arr = this.dataList
|
|
const res = await Marketing.getDetail(this.params.id)
|
|
const resData = res.data
|
|
if (resData.code === 0) {
|
|
const d = resData.data
|
|
const x = []
|
|
const y = []
|
|
arr.map(item => {
|
|
item.value = d[item.field] || 0
|
|
if (item.field === 'tradeAmout') {
|
|
item.value /= 100
|
|
}
|
|
})
|
|
if (d.promotionStatDayDTOList && d.promotionStatDayDTOList.length) {
|
|
d.promotionStatDayDTOList.forEach(item => {
|
|
x.push(item.statDay.replace(/-/, '/'))
|
|
y.push(item.tradeAmount / 100)
|
|
})
|
|
}
|
|
this.tendencyData.xData = x
|
|
this.tendencyData.series.data = y
|
|
this.merchantRank = d.promotionTenantRankDTOList || []
|
|
}
|
|
},
|
|
async findTenantStatDetail() {
|
|
const res = await Marketing.findTenantStatDetail(Object.assign({}, this.formParams, { promotionId: this.params.id }))
|
|
const resData = res.data
|
|
if (resData.code === 0) {
|
|
this.tableData = resData.data
|
|
}
|
|
},
|
|
fetch() {
|
|
this.findTenantStatDetail()
|
|
},
|
|
getPrice(row, item, value) {
|
|
return value / 100
|
|
},
|
|
getNum(row, item, value) {
|
|
return value || 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
.market_data_page {
|
|
.data_list {
|
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
|
|
border-radius:4px;
|
|
ul {
|
|
height: 140px;
|
|
overflow: hidden;
|
|
list-style: none;
|
|
li {
|
|
float: left;
|
|
width: 20%;
|
|
text-align: center;
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
i {
|
|
color: red;
|
|
}
|
|
&:nth-child(1) {
|
|
font-size:40px;
|
|
color:rgba(255,173,17,1);
|
|
font-weight: 600;
|
|
line-height: 100px;
|
|
}
|
|
&:nth-child(2) {
|
|
font-size:18px;
|
|
color:rgba(51,51,51,1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.visit_data {
|
|
overflow: hidden;
|
|
.item_box {
|
|
position: relative;
|
|
height: 520px;
|
|
width: calc(50% - 10px);
|
|
margin: 10px 0;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
border-radius:4px;
|
|
&:nth-child(1) {
|
|
margin-right: 20px;
|
|
border-left: 1px solid rgba(51,51,51,0.15);
|
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
|
|
}
|
|
&:nth-child(2) {
|
|
.item_box-chart {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: calc(50% - 10px);
|
|
margin-bottom: 20px;
|
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
|
|
border-right: 1px solid rgba(51,51,51,0.15);
|
|
.chart_box {
|
|
width: 50%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tendency_data, .sale_data {
|
|
overflow: hidden;
|
|
.item_box {
|
|
position: relative;
|
|
float: left;
|
|
height: 520px;
|
|
margin: 10px 0;
|
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
|
|
border-radius:4px;
|
|
box-sizing: border-box;
|
|
&:nth-child(1) {
|
|
width: calc(60% - 20px);
|
|
margin-right: 20px;
|
|
border-left: 1px solid rgba(51,51,51,0.15);
|
|
}
|
|
&:nth-child(2) {
|
|
width: 40%;
|
|
border-right: 1px solid rgba(51,51,51,0.15);
|
|
padding: 20px;
|
|
p.title {
|
|
font-size:18px;
|
|
color: #333333;
|
|
span {
|
|
font-size:16px;
|
|
float: right;
|
|
}
|
|
}
|
|
ul {
|
|
li {
|
|
display: flex;
|
|
p {
|
|
flex: 2;
|
|
margin: 0;
|
|
margin-bottom: 20px;
|
|
&:nth-child(1) {
|
|
span {
|
|
display: inline-block;
|
|
width:26px;
|
|
height:26px;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
background:rgba(221,221,221,1);
|
|
border-radius:50%;
|
|
}
|
|
|
|
}
|
|
&:nth-child(2) {
|
|
flex: 7;
|
|
}
|
|
&:nth-child(3) {
|
|
flex: 5;
|
|
}
|
|
}
|
|
&:nth-child(-n + 3) {
|
|
p {
|
|
&:nth-child(1) {
|
|
span {
|
|
background:rgba(255,121,17,1);
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tendency_data {
|
|
.item_box {
|
|
&:nth-child(1) {
|
|
padding: 50px 80px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.merchants_detail {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
|
|
min-height: 100px;
|
|
border-radius:4px;
|
|
p {
|
|
font-size:18px;
|
|
color: #333333;
|
|
line-height: 38px;
|
|
height:38px;
|
|
span {
|
|
display: inline-block;
|
|
float: right;
|
|
color: #fff;
|
|
text-align: center;
|
|
width:60px;
|
|
height:38px;
|
|
font-size:14px;
|
|
background:rgba(58,104,241,1);
|
|
border-radius:4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
// height: calc(100% - 50px);
|
|
|
|
img {
|
|
width:80px;
|
|
height:80px;
|
|
margin: 100px auto 10px;
|
|
display: block;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-table {
|
|
th {
|
|
background: #EEF3FF;
|
|
color:#333333;
|
|
font-size:16px;
|
|
font-weight: 400;
|
|
border-color: #E0E5EB;
|
|
text-align: center;
|
|
}
|
|
td {
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.echart_title {
|
|
font-size:18px;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-tabs {
|
|
|
|
}
|
|
</style>
|