<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">￥{{ (countData.totalPrice ||0).toFixed(2) }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item yellow">
|
<div>{{tabName}}成交订单量</div>
|
<div class="data-num">{{ countData.totalNum ||0}}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item green">
|
<div>{{tabName}}退款金额</div>
|
<div class="data-num">￥{{( countData.totalRefundPrice ||0).toFixed(2) }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item orange">
|
<div>{{tabName}}退款订单量</div>
|
<div class="data-num">{{ countData.totalRefundNum ||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"
|
clearable value-format="yyyy" format="yyyy'年'" placeholder="年份" ></el-date-picker>
|
<el-date-picker style="width: 100px;height: 22px;" v-model="searchForm.topMonth" type="month"
|
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="num2" 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 * as echarts from 'echarts'
|
export default {
|
components: {
|
TableLayout
|
},
|
data () {
|
return {
|
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: '近1年' }],
|
tabName: '今日',
|
tabIndex: 0,
|
tabIndex1: 0,
|
tabIndex2: 0,
|
searchForm:{
|
topYear:null,
|
topMonth:null,
|
topYear2:null,
|
},
|
countData: {
|
totalPrice: 1000,
|
totalNum: 1000,
|
totalRefundPrice: 10000,
|
totalRefundNum: 100
|
},
|
dataList1:[],
|
dataList2:[],
|
orderCorderCount: [10, 10, 20, 10, 40, 10, 30],
|
opinionData: ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26'],
|
myChart0: null,
|
myChart1: null
|
}
|
},
|
mounted () {
|
this.initCountData()
|
},
|
methods: {
|
initCountData () {
|
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.renderOrderChange(this.myChart0)
|
this.renderOrderChange(this.myChart1)
|
},
|
changeTab (item) {
|
this.tabName = item.name
|
this.tabIndex = item.index
|
},
|
changeTab1 (item) {
|
this.tabIndex1 = item.index
|
},
|
changeTab2 (item) {
|
this.tabIndex2 = item.index
|
},
|
renderOrderChange (chart) {
|
chart.setOption({
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.opinionData
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [{
|
name: '订单',
|
type: 'line',
|
stack: '总量',
|
data: this.orderCorderCount
|
}]
|
})
|
},
|
changeCount (page) {
|
if (page == 7) {
|
this.orderCorderCount = [10, 10, 20, 10, 40, 10, 30]
|
this.opinionData = ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26']
|
} else {
|
this.orderCorderCount = [11, 10, 20, 10, 40, 10, 30, 20, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 20, 40]
|
this.opinionData = ['3.01', '3.02', '3.03', '3.04', '3.05', '3.06', '3.07', '3.08', '3.09', '3.10', '3.11', '3.12', '3.13', '3.14', '3.15', '3.16', '3.17', '3.18', '3.19', '3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26', '3.27', '3.28', '3.28', '3.30']
|
}
|
// this.orderCorderCount.push(1)
|
// this.opinionData.push(1)
|
this.renderOrderChange()
|
}
|
}
|
}
|
</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>
|
