团员数据统计加订单筛选
This commit is contained in:
dengbw
@@ -12,13 +12,30 @@
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="day"
|
||||
placeholder="全部日期"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="updateValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in data"
|
||||
v-for="item in data.days"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="list-tool-divider">
|
||||
<el-divider direction="vertical" />
|
||||
</div>
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="itemId"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="updateValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in data.goods"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
@@ -37,11 +54,12 @@
|
||||
import { pageTeamStatisticsBiz } from '@/api/sylive/activity';
|
||||
|
||||
export default {
|
||||
props: { data: [] },
|
||||
props: { data: { days: [], goods: [] } },
|
||||
data() {
|
||||
return {
|
||||
// 表格选中数据
|
||||
day: '',
|
||||
itemId: '',
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
@@ -116,12 +134,14 @@
|
||||
return;
|
||||
}
|
||||
const day = this.day;
|
||||
const itemId = this.itemId;
|
||||
return pageTeamStatisticsBiz({
|
||||
...order,
|
||||
page,
|
||||
limit,
|
||||
activityId,
|
||||
day
|
||||
day,
|
||||
itemId
|
||||
});
|
||||
},
|
||||
/* 更新选中数据 */
|
||||
|
||||
@@ -12,13 +12,30 @@
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="day"
|
||||
placeholder="全部日期"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="updateValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in data"
|
||||
v-for="item in data.days"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="list-tool-divider">
|
||||
<el-divider direction="vertical" />
|
||||
</div>
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="itemId"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="updateValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in data.goods"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
@@ -37,15 +54,16 @@
|
||||
import { pageTeamStatisticsConsultant } from '@/api/sylive/activity';
|
||||
|
||||
export default {
|
||||
props: { data: [] },
|
||||
props: { data: { days: [], goods: [] } },
|
||||
data() {
|
||||
return {
|
||||
day: '',
|
||||
itemId: '',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
prop: 'consultantName',
|
||||
label: '顾问名称',
|
||||
label: '团员名称',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 150
|
||||
@@ -107,12 +125,14 @@
|
||||
return;
|
||||
}
|
||||
const day = this.day;
|
||||
const itemId = this.itemId;
|
||||
return pageTeamStatisticsConsultant({
|
||||
...order,
|
||||
page,
|
||||
limit,
|
||||
activityId,
|
||||
day
|
||||
day,
|
||||
itemId
|
||||
});
|
||||
},
|
||||
/* 更新选中数据 */
|
||||
|
||||
@@ -45,15 +45,39 @@
|
||||
v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
|
||||
style="width: 50%"
|
||||
>
|
||||
<el-card shadow="never" :header="funnelBrowse.title">
|
||||
<el-card shadow="never" body-style="padding: 0px">
|
||||
<div class="ele-table-tool ranking-order-header">
|
||||
<div class="ele-table-tool-title">
|
||||
<div class="ele-table-tool-title-label">
|
||||
<h6 style="font-size: 15px">
|
||||
{{ preheatingChartOption.title }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="itemIdPreheating"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="funnelQuery('left')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statistics.tableData.goods"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 500px; margin: 0 auto"
|
||||
v-if="funnelBrowse.actual_data"
|
||||
style="width: 500px; margin: 0 auto; padding-top: 7px"
|
||||
v-if="preheatingChartOption.title"
|
||||
>
|
||||
<v-chart
|
||||
ref="funnelChart"
|
||||
style="width: 500px; height: 303px"
|
||||
:option="browseChartOption"
|
||||
:option="preheatingChartOption.chartOption"
|
||||
/>
|
||||
</div>
|
||||
<ele-empty v-else v-show="true"></ele-empty>
|
||||
@@ -63,15 +87,37 @@
|
||||
v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
|
||||
style="width: 50%"
|
||||
>
|
||||
<el-card shadow="never" :header="funnelSubscribe.title">
|
||||
<el-card shadow="never" body-style="padding: 0px">
|
||||
<div class="ele-table-tool ranking-order-header">
|
||||
<div class="ele-table-tool-title">
|
||||
<div class="ele-table-tool-title-label">
|
||||
<h6 style="font-size: 15px">{{ liveChartOption.title }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="itemIdLive"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="funnelQuery('right')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statistics.tableData.goods"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 500px; margin: 0 auto"
|
||||
v-if="funnelSubscribe.actual_data"
|
||||
style="width: 500px; margin: 0 auto; padding-top: 7px"
|
||||
v-if="liveChartOption.title"
|
||||
>
|
||||
<v-chart
|
||||
ref="funnelChart"
|
||||
style="width: 500px; height: 303px"
|
||||
:option="subscribeChartOption"
|
||||
:option="liveChartOption.chartOption"
|
||||
/>
|
||||
</div>
|
||||
<ele-empty v-else v-show="true"></ele-empty>
|
||||
@@ -221,12 +267,33 @@
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="订单数排名"
|
||||
body-style="padding: 11px;"
|
||||
class="workplace-table-card"
|
||||
body-style="padding: 0px"
|
||||
>
|
||||
<div class="ele-table-tool ranking-order-header">
|
||||
<div class="ele-table-tool-title">
|
||||
<div class="ele-table-tool-title-label">
|
||||
<h6 style="font-size: 15px">订单数排名</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-tool-item">
|
||||
<el-select
|
||||
v-model="itemIdRanking"
|
||||
clearable
|
||||
class="ele-fluid"
|
||||
@input="updateValueRanking"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statistics.tableData.goods"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div style="padding: 10px 10px 10px 21px">
|
||||
<div
|
||||
v-for="(item, index) in orderRank.biz"
|
||||
:key="index"
|
||||
@@ -246,7 +313,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div style="padding: 10px 21px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in orderRank.consultant"
|
||||
:key="index"
|
||||
@@ -266,8 +333,8 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<biz-table :data="statistics.days" />
|
||||
<consultant-table :data="statistics.days" />
|
||||
<biz-table :data="statistics.tableData" />
|
||||
<consultant-table :data="statistics.tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -275,7 +342,8 @@
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import {
|
||||
getActivityStatisticsTeam,
|
||||
getStatisticsRanking
|
||||
getStatisticsRanking,
|
||||
getStatisticsFunnel
|
||||
} from '@/api/sylive/activity';
|
||||
const ROUTE_PATH = '/sylive/activity/statistics-team';
|
||||
import { use } from 'echarts/core';
|
||||
@@ -297,11 +365,15 @@
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
itemIdRanking: '',
|
||||
itemIdPreheating: '',
|
||||
itemIdLive: '',
|
||||
statistics: {
|
||||
activityId: null,
|
||||
timeStart: null,
|
||||
activityData1: { list: [], style: '' },
|
||||
activityData2: { list: [], style: '' },
|
||||
days: []
|
||||
tableData: { days: [], goods: [] }
|
||||
},
|
||||
loading: true,
|
||||
browseRank: { area: [], biz: [], consultant: [] },
|
||||
@@ -309,10 +381,8 @@
|
||||
watchRank: { area: [], biz: [], consultant: [] },
|
||||
orderRank: { area: [], biz: [], consultant: [] },
|
||||
// 词云图表配置
|
||||
browseChartOption: {},
|
||||
subscribeChartOption: {},
|
||||
funnelBrowse: {},
|
||||
funnelSubscribe: {}
|
||||
preheatingChartOption: { title: '', chartOption: {} },
|
||||
liveChartOption: { title: '', chartOption: {} }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -328,6 +398,128 @@
|
||||
this.$router.replace(url + '&title=' + title);
|
||||
}
|
||||
},
|
||||
funnelQuery(show) {
|
||||
let itemId = '';
|
||||
if (show == 'left') {
|
||||
itemId = this.itemIdPreheating;
|
||||
} else if (show == 'right') {
|
||||
itemId = this.itemIdLive;
|
||||
}
|
||||
getStatisticsFunnel({
|
||||
activityId: this.statistics.activityId,
|
||||
show: show,
|
||||
type: 1,
|
||||
timeStart: this.statistics.timeStart,
|
||||
itemId: itemId
|
||||
}).then((data) => {
|
||||
//浏览转化漏斗((预热阶段)
|
||||
if (data.funnelPreheating.title) {
|
||||
this.preheatingChartOption.title = data.funnelPreheating.title;
|
||||
this.preheatingChartOption.chartOption = {
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '2%',
|
||||
width: '72%',
|
||||
label: {
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.7
|
||||
},
|
||||
data: data.funnelPreheating.expectedData
|
||||
},
|
||||
{
|
||||
name: 'Actual',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '7%',
|
||||
width: '62%',
|
||||
maxSize: '62%',
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}',
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: data.funnelPreheating.actualData,
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
//浏览转化漏斗(直播阶段)
|
||||
if (data.funnelLive.title) {
|
||||
this.liveChartOption.title = data.funnelLive.title;
|
||||
this.liveChartOption.chartOption = {
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '2%',
|
||||
width: '72%',
|
||||
label: {
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.7
|
||||
},
|
||||
data: data.funnelLive.expectedData
|
||||
},
|
||||
{
|
||||
name: 'Actual',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '7%',
|
||||
width: '62%',
|
||||
maxSize: '62%',
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}',
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: data.funnelLive.actualData,
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
updateValueRanking() {
|
||||
getStatisticsRanking({
|
||||
activityId: this.statistics.activityId,
|
||||
type: 1,
|
||||
kpi: 'order',
|
||||
itemId: this.itemIdRanking
|
||||
}).then((list) => {
|
||||
this.orderRank = list;
|
||||
});
|
||||
},
|
||||
query() {
|
||||
const id = this.$route.query.id;
|
||||
this.id = id;
|
||||
@@ -341,106 +533,11 @@
|
||||
this.$util.assignObject(this.statistics, {
|
||||
...data
|
||||
});
|
||||
this.funnelBrowse = data.funnelBrowse;
|
||||
this.funnelSubscribe = data.funnelSubscribe;
|
||||
//浏览转化漏斗
|
||||
if (data.funnelBrowse.actual_data[0].value > 0) {
|
||||
this.browseChartOption = {
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '2%',
|
||||
width: '72%',
|
||||
label: {
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.7
|
||||
},
|
||||
data: data.funnelBrowse.expected_data
|
||||
},
|
||||
{
|
||||
name: 'Actual',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '7%',
|
||||
width: '62%',
|
||||
maxSize: '62%',
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}',
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: data.funnelBrowse.actual_data,
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
//预约转化漏斗
|
||||
if (data.funnelSubscribe.actual_data[0].value > 0) {
|
||||
this.subscribeChartOption = {
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '2%',
|
||||
width: '72%',
|
||||
label: {
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.7
|
||||
},
|
||||
data: data.funnelSubscribe.expected_data
|
||||
},
|
||||
{
|
||||
name: 'Actual',
|
||||
type: 'funnel',
|
||||
top: '1%',
|
||||
bottom: '5%',
|
||||
left: '7%',
|
||||
width: '62%',
|
||||
maxSize: '62%',
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}',
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
data: data.funnelSubscribe.actual_data,
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
// 修改页签标题
|
||||
if (this.$route.path === ROUTE_PATH) {
|
||||
setPageTabTitle(data.title + '的团队数据统计');
|
||||
}
|
||||
this.funnelQuery();
|
||||
this.rankingQuery();
|
||||
})
|
||||
.catch((e) => {
|
||||
@@ -538,4 +635,9 @@
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ranking-order-header {
|
||||
border-bottom: 1px solid var(--border-color-lighter);
|
||||
box-sizing: border-box;
|
||||
padding: 10px 17px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user