You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
521 lines
13 KiB
521 lines
13 KiB
<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>
|
|
|