-
-
+
+
@@ -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;
+ }