加客户列表
This commit is contained in:
@@ -68,6 +68,20 @@ export async function getGroupsStatisticsConsultant(params) {
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取客户数据
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function getGroupsStatisticsCustomer(params) {
|
||||
const res = await request.get('/sylive/groupsStatistics/customer', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取观看下单统计折线图数据
|
||||
* @param params 查询条件
|
||||
@@ -109,3 +123,17 @@ export async function exportGroupsStatisticsConsultant(params) {
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出客户
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function exportGroupsStatisticsCustomer(params) {
|
||||
const res = await request.get('/sylive/groupsStatistics/customer_export', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
title="客户列表"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
size="mini"
|
||||
>
|
||||
<template v-slot:toolkit>
|
||||
<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"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="list-tool-divider">
|
||||
<el-divider direction="vertical" />
|
||||
</div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
icon="el-icon-download"
|
||||
@click="exportData"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
<div class="list-tool-divider">
|
||||
<el-divider direction="vertical" />
|
||||
</div>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getGroupsStatisticsCustomer,
|
||||
exportGroupsStatisticsCustomer
|
||||
} from '@/api/sylive/groups-statistics';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
|
||||
export default {
|
||||
props: { data: Object },
|
||||
data() {
|
||||
return {
|
||||
activityId: null,
|
||||
itemId: '',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
prop: 'nickname',
|
||||
label: '昵称',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
prop: 'browseTime',
|
||||
label: '首次浏览时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
prop: 'subscribeTime',
|
||||
label: '预约时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
prop: 'liveTime',
|
||||
label: '首次观看时间',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
prop: 'playDuration',
|
||||
label: '观看时长(分)',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'livePV',
|
||||
label: '观看次数',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'insiders',
|
||||
label: '内部人员',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'consultantName',
|
||||
label: '归属顾问',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'levelName1',
|
||||
label: '战区',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'levelName2',
|
||||
label: '战队',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'bizName',
|
||||
label: '门店',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 110
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, order }) {
|
||||
return getGroupsStatisticsCustomer({
|
||||
...order,
|
||||
page,
|
||||
limit,
|
||||
activityId: this.activityId,
|
||||
itemId: this.itemId
|
||||
});
|
||||
},
|
||||
/* 导出数据 */
|
||||
exportData() {
|
||||
const array = [
|
||||
[
|
||||
'昵称',
|
||||
'创建时间',
|
||||
'首次浏览时间',
|
||||
'预约时间',
|
||||
'首次观看时间',
|
||||
'观看时长(分)',
|
||||
'观看次数',
|
||||
'内部人员',
|
||||
'归属顾问',
|
||||
'战区',
|
||||
'战队',
|
||||
'门店'
|
||||
]
|
||||
];
|
||||
const loading = this.$loading({ lock: true });
|
||||
this.$refs.table.doRequest(({ where, order }) => {
|
||||
exportGroupsStatisticsCustomer({
|
||||
...where,
|
||||
...order,
|
||||
activityId: this.activityId,
|
||||
itemId: this.itemId
|
||||
})
|
||||
.then((data) => {
|
||||
loading.close();
|
||||
data.forEach((d) => {
|
||||
array.push([
|
||||
d.nickname,
|
||||
d.createTime,
|
||||
d.browseTime,
|
||||
d.subscribeTime,
|
||||
d.liveTime,
|
||||
d.playDuration,
|
||||
d.livePV,
|
||||
d.insiders,
|
||||
d.consultantName,
|
||||
d.levelName1,
|
||||
d.levelName2,
|
||||
d.bizName
|
||||
]);
|
||||
});
|
||||
writeFile(
|
||||
{
|
||||
SheetNames: ['Sheet1'],
|
||||
Sheets: {
|
||||
Sheet1: utils.aoa_to_sheet(array)
|
||||
}
|
||||
},
|
||||
'客户列表.xlsx'
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新选中数据 */
|
||||
updateValue() {
|
||||
this.$refs.table.reload({ page: 1 });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(route) {
|
||||
const { path } = route;
|
||||
if (path !== '/sylive/groups-statistics') {
|
||||
return;
|
||||
}
|
||||
const activityId = this.$route.query.id;
|
||||
if (!activityId || activityId == this.activityId) {
|
||||
return;
|
||||
}
|
||||
this.activityId = activityId;
|
||||
if (this.$refs.table) {
|
||||
this.$refs.table.reload({ page: 1 });
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.list-tool-divider {
|
||||
padding: 0 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -134,6 +134,7 @@
|
||||
/>
|
||||
<biz-table :data="statistics.tableData" />
|
||||
<consultant-table :data="statistics.tableData" />
|
||||
<customer-table :data="statistics.tableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -154,6 +155,7 @@
|
||||
import LevelTable from './components/level-table.vue';
|
||||
import BizTable from './components/biz-table.vue';
|
||||
import ConsultantTable from './components/consultant-table.vue';
|
||||
import CustomerTable from './components/customer-table.vue';
|
||||
import watchOrderLinechart from './components/watchOrder-linechart.vue';
|
||||
|
||||
use([CanvasRenderer, TooltipComponent, FunnelChart]);
|
||||
@@ -165,6 +167,7 @@
|
||||
LevelTable,
|
||||
BizTable,
|
||||
ConsultantTable,
|
||||
CustomerTable,
|
||||
watchOrderLinechart
|
||||
},
|
||||
mixins: [echartsMixin(['funnelChart'])],
|
||||
|
||||
Reference in New Issue
Block a user