diff --git a/src/api/sylive/activity/index.js b/src/api/sylive/activity/index.js index f9bc972..d0a405c 100644 --- a/src/api/sylive/activity/index.js +++ b/src/api/sylive/activity/index.js @@ -279,3 +279,17 @@ export async function getStatisticsRanking(params) { } return Promise.reject(new Error(res.data.message)); } + +/** + * 获取漏头数据 + * @param params 查询条件 + */ +export async function getStatisticsFunnel(params) { + const res = await request.get('/sylive/statistics/funnel', { + params + }); + if (res.data.code === 0) { + return res.data.data; + } + return Promise.reject(new Error(res.data.message)); +} diff --git a/src/views/sylive/activity/statistics/components/area-table.vue b/src/views/sylive/activity/statistics/components/area-table.vue index 01bb82d..1f5cdfa 100644 --- a/src/views/sylive/activity/statistics/components/area-table.vue +++ b/src/views/sylive/activity/statistics/components/area-table.vue @@ -5,6 +5,7 @@ ref="table" title="区域统计" :columns="columns" + :pageSize="100" :datasource="datasource" size="mini" > @@ -12,13 +13,30 @@
+ +
+
+ +
+
+ + + +
+
+ +
+
+ + + +
+
+ +
+
+ + - + +
+
+
+
+ {{ preheatingChartOption.title }} +
+
+
+
+ + + +
+
@@ -63,15 +87,37 @@ v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }" style="width: 50%" > - + +
+
+
+
{{ liveChartOption.title }}
+
+
+
+ + + +
+
@@ -281,12 +327,33 @@
+
+
+
+
订单数排名
+
+
+
+ + + +
+
-
+
-
+
- - - + + +
@@ -356,7 +423,8 @@ import { setPageTabTitle } from '@/utils/page-tab-util'; import { getActivityStatistics, - getStatisticsRanking + getStatisticsRanking, + getStatisticsFunnel } from '@/api/sylive/activity'; const ROUTE_PATH = '/sylive/activity/statistics'; import { use } from 'echarts/core'; @@ -379,11 +447,15 @@ data() { return { id: '', + itemIdRanking: null, + itemIdPreheating: null, + itemIdLive: null, statistics: { activityId: null, + timeStart: null, activityData1: { list: [], style: '' }, activityData2: { list: [], style: '' }, - days: [] + tableData: { days: [], goods: [] } }, loading: true, browseRank: { area: [], biz: [], consultant: [] }, @@ -391,10 +463,8 @@ watchRank: { area: [], biz: [], consultant: [] }, orderRank: { area: [], biz: [], consultant: [] }, // 词云图表配置 - browseChartOption: {}, - subscribeChartOption: {}, - funnelBrowse: {}, - funnelSubscribe: {} + preheatingChartOption: { title: '', chartOption: {} }, + liveChartOption: { title: '', chartOption: {} } }; }, computed: { @@ -410,6 +480,128 @@ this.$router.replace(url + '&title=' + title); } }, + funnelQuery(show) { + let itemId = 0; + if (show == 'left') { + itemId = this.itemIdPreheating; + } else if (show == 'right') { + itemId = this.itemIdLive; + } + getStatisticsFunnel({ + activityId: this.statistics.activityId, + show: show, + type: 0, + 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: 0, + kpi: 'order', + itemId: this.itemIdRanking + }).then((list) => { + this.orderRank = list; + }); + }, query() { const id = this.$route.query.id; this.id = id; @@ -423,106 +615,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) => { @@ -620,4 +717,9 @@ color: #409eff; cursor: pointer; } + .ranking-order-header { + border-bottom: 1px solid var(--border-color-lighter); + box-sizing: border-box; + padding: 10px 17px; + }