数据统计加订单筛选
This commit is contained in:
dengbw
@@ -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));
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
ref="table"
|
||||
title="区域统计"
|
||||
:columns="columns"
|
||||
:pageSize="100"
|
||||
:datasource="datasource"
|
||||
size="mini"
|
||||
>
|
||||
@@ -12,13 +13,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 +55,12 @@
|
||||
import { pageStatisticsArea } from '@/api/sylive/activity';
|
||||
|
||||
export default {
|
||||
props: { data: [] },
|
||||
props: { data: { days: [], goods: [] } },
|
||||
data() {
|
||||
return {
|
||||
// 表格选中数据
|
||||
day: '',
|
||||
itemId: '',
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
@@ -123,12 +142,14 @@
|
||||
return;
|
||||
}
|
||||
const day = this.day;
|
||||
const itemId = this.itemId;
|
||||
return pageStatisticsArea({
|
||||
...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,11 +54,12 @@
|
||||
import { pageStatisticsBiz } 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 pageStatisticsBiz({
|
||||
...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,10 +54,11 @@
|
||||
import { pageStatisticsConsultant } from '@/api/sylive/activity';
|
||||
|
||||
export default {
|
||||
props: { data: [] },
|
||||
props: { data: { days: [], goods: [] } },
|
||||
data() {
|
||||
return {
|
||||
day: '',
|
||||
itemId: '',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
@@ -107,12 +125,14 @@
|
||||
return;
|
||||
}
|
||||
const day = this.day;
|
||||
const itemId = this.itemId;
|
||||
return pageStatisticsConsultant({
|
||||
...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>
|
||||
@@ -281,12 +327,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: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div style="padding: 10px 10px 10px 21px">
|
||||
<div
|
||||
v-for="(item, index) in orderRank.area"
|
||||
:key="index"
|
||||
@@ -326,7 +393,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div style="padding: 10px 21px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in orderRank.consultant"
|
||||
:key="index"
|
||||
@@ -346,9 +413,9 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<area-table :data="statistics.days" />
|
||||
<biz-table :data="statistics.days" />
|
||||
<consultant-table :data="statistics.days" />
|
||||
<area-table :data="statistics.tableData" />
|
||||
<biz-table :data="statistics.tableData" />
|
||||
<consultant-table :data="statistics.tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user