<template>
|
<TableLayout>
|
<div slot="search-form" class="data">
|
<div class="top-tab">
|
<div class="tab-title">经营数据分析</div>
|
<div class="tab-item">
|
<span v-for="(item,index) in tabs" :key="'tab'+index" :class="item.index==tabIndex?'active-tab tab-btn':'tab-btn'" @click="changeTab(item)">{{item.name}}</span>
|
</div>
|
</div>
|
<div class="item-title"> </div>
|
<div class="data-summary">
|
<div class="data-item blue">
|
<div>{{tabName}}销售额</div>
|
<div class="data-num">￥{{ (topData.price ||0).toFixed(2) }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item yellow">
|
<div>{{tabName}}成交订单量</div>
|
<div class="data-num">{{ topData.num||0}}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item green">
|
<div>{{tabName}}退款金额</div>
|
<div class="data-num">￥{{( topData.price1 ||0).toFixed(2) }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item orange">
|
<div>{{tabName}}退款订单量</div>
|
<div class="data-num">{{ topData.num1 ||0 }}</div>
|
</div>
|
<div class="parting"></div>
|
</div>
|
</div>
|
<template v-slot:table-wrap>
|
<div class="change-style">
|
<div class="count-left">
|
<div class="item-title">订单量与销售额趋势</div>
|
<div ref="orderCount" class="bottom" ></div>
|
</div>
|
<div class="count-right">
|
<div class="item-title">各品类销售额占比</div>
|
<div ref="cateCount" class="bottom"></div>
|
</div>
|
</div>
|
<div class="change-style">
|
<div class="tab-title" style="display: flex;align-items: center; ">
|
<span style="">排名分析</span>
|
<div class="tab-item" style="margin-left: 20px;" >
|
<el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear" type="year" @change="changeYearMonth"
|
clearable value-format="yyyy" format="yyyy'年'" placeholder="年份" ></el-date-picker>
|
<el-date-picker style="width: 100px;height: 22px;" v-model="searchForm.topMonth" type="month" @change="changeYearMonth"
|
clearable value-format="MM" format="MM'月'" placeholder="月份" ></el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div class="change-style">
|
<div class="count-left">
|
<div class="item-title" style="display: flex;">
|
<span style="flex: 1">经销商IOP10</span>
|
<div class="tab-item" style="text-align: right;flex: 1.5; ">
|
<span v-for="(item,index) in tabs1" :key="'tab'+index" :class="item.index==tabIndex1?'active-tab tab-btn':'tab-btn'" @click="changeTab1(item)">{{item.name}}</span>
|
</div>
|
</div>
|
<div class="bottom1">
|
<el-table :data="dataList1||[]" stripe border inline >
|
<el-table-column prop="sortnum" label="排名" align="center">
|
<template slot-scope="scope">{{scope.$index +1}}</template>
|
</el-table-column>
|
<el-table-column prop="name" label="经销商名称" align="center" > </el-table-column>
|
<el-table-column prop="num" label="订单量" align="center" > </el-table-column>
|
<el-table-column prop="price" label="销售额（元）" align="center" ></el-table-column>
|
<el-table-column prop="num1" label="会员数" align="center" ></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="count-right">
|
<div class="item-title">
|
<div class="item-title" style="display: flex;">
|
<span style="flex: 1">单一商品TOP10</span>
|
<div class="tab-item" style="text-align: right;flex: 1.5; ">
|
<span v-for="(item,index) in tabs2" :key="'tab'+index" :class="item.index==tabIndex2?'active-tab tab-btn':'tab-btn'" @click="changeTab2(item)">{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="bottom1">
|
<el-table :data="dataList2||[]" stripe border >
|
<el-table-column prop="sortnum" label="排名" align="center">
|
<template slot-scope="scope">{{scope.$index +1}}</template>
|
</el-table-column>
|
<el-table-column prop="name" label="商品名称" align="center" > </el-table-column>
|
<el-table-column prop="num" label="销量" align="center" > </el-table-column>
|
<el-table-column prop="price" label="销售额（元）" align="center" ></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="change-style">
|
<div class="tab-title" style="display: flex;align-items: center; ">
|
<span style="">营销数据分析</span>
|
<div class="tab-item" style="margin-left: 20px;" >
|
<el-date-picker style="width: 110px;height: 22px;margin-right: 10px;" v-model="searchForm.topYear2" type="year"
|
clearable value-format="yyyy" format="yyyy'年'" placeholder="年份" ></el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div class="change-style">
|
<div class="count-left">
|
<div class="item-title">积分发放类型占比</div>
|
<div class="bottom2" style="display: flex">
|
<div ref="integralCount" style="flex: 1"></div>
|
<div style="flex: 1;font-size: 14px;font-weight: 500;">
|
<div>累计消耗：{{10000}}</div>
|
<div>累计优惠金额：￥{{10000 }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="count-right">
|
<div class="item-title">优惠券发放类型占比</div>
|
<div class="bottom2">
|
<div class="bottom2" style="display: flex">
|
<div ref="couponCount" style="flex: 1"></div>
|
<div style="flex: 1;font-size: 14px;font-weight: 500;">
|
<div>已使用优惠券：{{10000}}</div>
|
<div>累计优惠金额：￥{{10000 }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="change-style" v-if="1==2">
|
<div class="item-title">营销投入费用与销售额分析</div>
|
<div ref="feeCount" class="bottom"></div>
|
</div>
|
</template>
|
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
import BaseTable from '@/components/base/BaseTable'
|
import * as echarts from 'echarts'
|
export default {
|
extends: BaseTable,
|
components: {
|
TableLayout
|
},
|
data () {
|
return {
|
loading1: false,
|
loading2: false,
|
loading3: false,
|
tabs2: [{ index: 0, name: '按销量' }, { index: 1, name: '按销售额' }],
|
tabs1: [{ index: 0, name: '按订单量' }, { index: 1, name: '按销售额' }, { index: 2, name: '按会员数' }],
|
tabs: [{ index: 0, name: '今日' }, { index: 1, name: '近7日' }, { index: 2, name: '近30日' }, { index: 3, name: '近12月' }],
|
tabName: '今日',
|
tabIndex: 0,
|
tabIndex1: 0,
|
tabIndex2: 0,
|
searchForm: {
|
topYear: null,
|
topMonth: null,
|
topYear2: null
|
},
|
topData: {
|
num: 0,
|
num1: 0,
|
price: 0,
|
price1: 0,
|
dateStrList: [],
|
dataList: [],
|
dataList2: [],
|
cateList: [],
|
numList: []
|
},
|
countData: {
|
totalPrice: 1000,
|
totalNum: 1000,
|
totalRefundPrice: 10000,
|
totalRefundNum: 100
|
},
|
dataList1: [],
|
dataList2: [],
|
myChart0: null,
|
myChart1: null
|
}
|
},
|
created () {
|
this.config({
|
module: '工作台数据统计',
|
api: '/business/workbench',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
},
|
mounted () {
|
this.initTopData()
|
this.initShopRankData()
|
this.initGoodsRankData()
|
},
|
methods: {
|
changeYearMonth(){
|
this.initGoodsRankData()
|
this.initShopRankData()
|
},
|
initShopRankData () {
|
this.loading2 = true
|
this.api.shopRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex1}).then(res => {
|
res = res || []
|
this.dataList1 = res
|
}).finally(() => {
|
this.loading2 = false
|
})
|
},
|
initGoodsRankData () {
|
this.loading3 = true
|
this.api.goodsRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex2}).then(res => {
|
res = res || []
|
this.dataList2 = res
|
}).finally(() => {
|
this.loading3 = false
|
})
|
},
|
initTopData () {
|
this.loading1 = true
|
this.initTopEcharts()
|
this.api.businessData({ dateType: this.tabIndex }).then(res => {
|
res = res || {}
|
res.num = res.num || 0
|
res.num1 = res.num1 || 0
|
res.price = res.price || 0
|
res.price1 = res.price1 || 0
|
res.dateStrList = res.dateStrList || []
|
res.datalist2 = res.datalist2 || []
|
res.dataList = res.dataList || []
|
res.cateList = res.cateList || []
|
this.topData = res
|
this.renderEchartOption0()
|
this.renderEchartOption2()
|
}).finally(() => {
|
this.loading1 = false
|
})
|
},
|
initTopEcharts () {
|
this.myChart0 = echarts.init(this.$refs.orderCount)
|
window.addEventListener('resize', () => {
|
this.myChart0.resize()
|
})
|
this.myChart1 = echarts.init(this.$refs.cateCount)
|
window.addEventListener('resize', () => {
|
this.myChart1.resize()
|
})
|
this.renderEchartOption0()
|
this.renderEchartOption2()
|
},
|
changeTab (item) {
|
if (this.loading1) {
|
return
|
}
|
if (item.index !== this.tabIndex) {
|
this.tabName = item.name
|
this.tabIndex = item.index
|
this.initTopData()
|
}
|
},
|
changeTab1 (item) {
|
if (this.loading2) {
|
return
|
}
|
if (item.index !== this.tabIndex1) {
|
this.tabName = item.name
|
this.tabIndex1 = item.index
|
this.initShopRankData()
|
}
|
},
|
changeTab2 (item) {
|
if (this.loading3) {
|
return
|
}
|
if (item.index !== this.tabIndex2) {
|
this.tabName = item.name
|
this.tabIndex2 = item.index
|
this.initGoodsRankData()
|
}
|
},
|
renderEchartOption0 () {
|
this.myChart0.setOption({
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
}
|
},
|
legend: {
|
data: ['订单量', '销售额(元)']
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.topData.dateStrList || []
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: '订单量',
|
min: 0
|
},
|
{
|
type: 'value',
|
name: '销售额(元)',
|
min: 0
|
}
|
],
|
series: [
|
{
|
name: '订单量',
|
data: this.topData.dataList || [],
|
type: 'bar'
|
},
|
{
|
name: '销售额(元)',
|
yAxisIndex: 1,
|
data: this.topData.dataList2 || [],
|
type: 'line'
|
}
|
]
|
})
|
},
|
renderEchartOption2 () {
|
const series = []
|
this.topData.cateList.forEach((item, index) => {
|
series.push( {
|
name: item.name,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
label: {
|
// show: true
|
},
|
data: item.data||[]
|
})
|
})
|
this.myChart1.setOption({
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
}
|
},
|
legend: {
|
data: this.topData.cateList || []
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.topData.dateStrList || []
|
},
|
yAxis: { type: 'value' } ,
|
series
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-input--small .el-input__inner{
|
height: 22px;
|
line-height: 22px;
|
border-radius: 0;
|
}
|
::v-deep .el-input--small .el-input__icon{
|
height: 22px;
|
line-height: 22px;
|
}
|
.top-tab{
|
margin-bottom: 30px;
|
display: block;
|
}
|
.tab-title{
|
font-weight: 600;
|
font-size: 16px;
|
color: #222222;
|
line-height: 22px;
|
display: inline;
|
}
|
.tab-item{
|
display: inline;
|
margin-left: 50px;
|
.active-tab{
|
border: 1px solid #216EEE !important;
|
color: #216EEE !important;
|
}
|
.tab-btn{
|
font-weight: normal;
|
cursor: pointer;
|
border-radius: 0px;
|
margin: 0px 5px;
|
font-size: 12px;
|
border: 1px solid #999;
|
color: #999;
|
padding: 1px 5px;
|
background-color: #f2f2f2;
|
}
|
}
|
.data {
|
padding-bottom: 10px;
|
}
|
.item-title {
|
font-weight: 600;
|
font-size: 14px;
|
color: #222222;
|
margin-left: 20px;
|
line-height: 22px;
|
}
|
.data-summary {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 10px;
|
margin-bottom: 20px;
|
.green{
|
border-left: 8px solid #12bb8b;
|
}
|
.yellow{
|
border-left: 8px solid #f6cf46;
|
}
|
.blue{
|
border-left: 8px solid #216EEE;
|
}
|
.orange{
|
border-left: 8px solid #ff9e56;
|
}
|
.data-item {
|
flex: 1;
|
height: 80px;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1) ;
|
box-sizing: border-box;
|
padding: 15px;
|
display: flex;
|
font-size: 14px;
|
flex-direction: column;
|
justify-content: space-between;
|
background-color: #f4f7fc;
|
color: #666;
|
.data-num {
|
font-size: 20px;
|
font-weight: 800;
|
color: #333;
|
}
|
}
|
.parting {
|
width: 20px;
|
}
|
}
|
.change-style {
|
display: flex;
|
justify-content: space-between;
|
line-height: 31px;
|
margin-bottom: 50px;
|
.count-left{
|
display: inline-block;
|
margin-right: 10px;
|
flex: 1;
|
.bottom {
|
height: 500px;
|
width: 100%;
|
}
|
.bottom2 {
|
height: 300px;
|
width: 100%;
|
}
|
.bottom1 {
|
height: auto;
|
width: 100%;
|
}
|
}
|
.count-right{
|
display: inline-block;
|
margin-left: 10px;
|
flex: 1;
|
.bottom {
|
height: 500px;
|
width: 100%;
|
}
|
.bottom2 {
|
height: 300px;
|
width: 100%;
|
}
|
.bottom1 {
|
height: auto;
|
width: 100%;
|
}
|
}
|
|
}
|
|
</style>
|
