market_api_1008
This commit is contained in:
dengbw
@@ -7,11 +7,6 @@
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
||||
<el-form-item label="订单号:">
|
||||
<el-input clearable v-model="where.sid" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
||||
<el-form-item label="姓名:">
|
||||
<el-input clearable v-model="where.name" placeholder="请输入" />
|
||||
@@ -65,7 +60,6 @@
|
||||
status: 1,
|
||||
name: '',
|
||||
mobile: '',
|
||||
sid: '',
|
||||
item_title: ''
|
||||
};
|
||||
return {
|
||||
|
||||
@@ -39,12 +39,6 @@
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'sid',
|
||||
label: '订单号',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '姓名',
|
||||
@@ -91,6 +85,12 @@
|
||||
return this.$util.toDateString(cellValue);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'consultant',
|
||||
label: '顾问',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
prop: 'statusName',
|
||||
label: '状态',
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="ele-body ele-body-card" v-loading="loading">
|
||||
<el-row :gutter="15">
|
||||
<el-col
|
||||
v-for="(item, index) in statistics.activityData"
|
||||
v-for="(item, index) in statistics.activityData1"
|
||||
:key="index"
|
||||
v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }"
|
||||
v-bind="styleResponsive ? { lg: 8, md: 14 } : { span: 8 }"
|
||||
>
|
||||
<el-card class="analysis-chart-card" shadow="never">
|
||||
<template v-slot:header>
|
||||
@@ -18,6 +18,280 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="15">
|
||||
<el-col
|
||||
v-for="(item, index) in statistics.activityData2"
|
||||
:key="index"
|
||||
v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
|
||||
>
|
||||
<el-card class="analysis-chart-card" shadow="never">
|
||||
<template v-slot:header>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">{{ item.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="analysis-chart-card-num ele-text-heading">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="浏览人数排名"
|
||||
body-style="padding: 11px;"
|
||||
class="workplace-table-card"
|
||||
>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in browseAreaRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in browseBizRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in browseConsultantRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="预约人数排名"
|
||||
body-style="padding: 11px;"
|
||||
class="workplace-table-card"
|
||||
>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in subscribeAreaRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in subscribeBizRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in subscribeConsultantRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="观看人数排名"
|
||||
body-style="padding: 11px;"
|
||||
class="workplace-table-card"
|
||||
>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in watchAreaRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in watchBizRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in watchConsultantRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="订单数排名"
|
||||
body-style="padding: 11px;"
|
||||
class="workplace-table-card"
|
||||
>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in orderAreaRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in orderBizRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { sm: 8 } : { span: 8 }">
|
||||
<div style="padding: 10px 10px 10px 10px">
|
||||
<div
|
||||
v-for="(item, index) in orderConsultantRank"
|
||||
:key="index"
|
||||
class="monitor-user-count-item ele-cell"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="ele-cell-content">
|
||||
<el-progress
|
||||
:stroke-width="10"
|
||||
:show-text="false"
|
||||
:percentage="item.percent"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card
|
||||
shadow="never"
|
||||
header="区域统计"
|
||||
@@ -203,12 +477,25 @@
|
||||
return {
|
||||
statistics: {
|
||||
activityId: null,
|
||||
activityData: [],
|
||||
activityData1: [],
|
||||
activityData2: [],
|
||||
areaData: [],
|
||||
bizData: [],
|
||||
consultantData: []
|
||||
},
|
||||
loading: true
|
||||
loading: true,
|
||||
browseAreaRank:[],
|
||||
browseBizRank:[],
|
||||
browseConsultantRank:[],
|
||||
subscribeAreaRank:[],
|
||||
subscribeBizRank:[],
|
||||
subscribeConsultantRank:[],
|
||||
watchAreaRank:[],
|
||||
watchBizRank:[],
|
||||
watchConsultantRank:[],
|
||||
orderAreaRank:[],
|
||||
orderBizRank:[],
|
||||
orderConsultantRank:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -234,6 +521,143 @@
|
||||
if (this.$route.path === ROUTE_PATH) {
|
||||
setPageTabTitle(data.title + '的数据统计');
|
||||
}
|
||||
//浏览人数排名-区域
|
||||
var temp,max,list;
|
||||
temp = this.statistics.areaData.sort((a, b) => b.browse - a.browse);
|
||||
max = temp[0].browse || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.browseAreaRank = list.map((d) => {
|
||||
return {
|
||||
name: d.areaName,
|
||||
value: d.browse,
|
||||
percent: (d.browse / max) * 100
|
||||
};
|
||||
});
|
||||
//浏览人数排名-门店
|
||||
temp = this.statistics.bizData.sort((a, b) => b.browse - a.browse);
|
||||
max = temp[0].browse || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.browseBizRank = list.map((d) => {
|
||||
return {
|
||||
name: d.bizName,
|
||||
value: d.browse,
|
||||
percent: (d.browse / max) * 100
|
||||
};
|
||||
});
|
||||
//浏览人数排名-顾问
|
||||
temp = this.statistics.consultantData.sort((a, b) => b.browse - a.browse);
|
||||
max = temp[0].browse || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.browseConsultantRank = list.map((d) => {
|
||||
return {
|
||||
name: d.consultantName,
|
||||
value: d.browse,
|
||||
percent: (d.browse / max) * 100
|
||||
};
|
||||
});
|
||||
|
||||
//预约人数排名-区域
|
||||
temp = this.statistics.areaData.sort((a, b) => b.subscribe - a.subscribe);
|
||||
max = temp[0].subscribe || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.subscribeAreaRank = list.map((d) => {
|
||||
return {
|
||||
name: d.areaName,
|
||||
value: d.subscribe,
|
||||
percent: (d.subscribe / max) * 100
|
||||
};
|
||||
});
|
||||
//预约人数排名-门店
|
||||
temp = this.statistics.bizData.sort((a, b) => b.subscribe - a.subscribe);
|
||||
max = temp[0].subscribe || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.subscribeBizRank = list.map((d) => {
|
||||
return {
|
||||
name: d.bizName,
|
||||
value: d.subscribe,
|
||||
percent: (d.subscribe / max) * 100
|
||||
};
|
||||
});
|
||||
//预约人数排名-顾问
|
||||
temp = this.statistics.consultantData.sort((a, b) => b.subscribe - a.subscribe);
|
||||
max = temp[0].subscribe || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.subscribeConsultantRank = list.map((d) => {
|
||||
return {
|
||||
name: d.consultantName,
|
||||
value: d.subscribe,
|
||||
percent: (d.subscribe / max) * 100
|
||||
};
|
||||
});
|
||||
|
||||
//观看人数排名-区域
|
||||
temp = this.statistics.areaData.sort((a, b) => b.watch - a.watch);
|
||||
max = temp[0].watch || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.watchAreaRank = list.map((d) => {
|
||||
return {
|
||||
name: d.areaName,
|
||||
value: d.watch,
|
||||
percent: (d.watch / max) * 100
|
||||
};
|
||||
});
|
||||
//观看人数排名-门店
|
||||
temp = this.statistics.bizData.sort((a, b) => b.watch - a.watch);
|
||||
max = temp[0].watch || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.watchBizRank = list.map((d) => {
|
||||
return {
|
||||
name: d.bizName,
|
||||
value: d.watch,
|
||||
percent: (d.watch / max) * 100
|
||||
};
|
||||
});
|
||||
//观看人数排名-顾问
|
||||
temp = this.statistics.consultantData.sort((a, b) => b.watch - a.watch);
|
||||
max = temp[0].watch || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.watchConsultantRank = list.map((d) => {
|
||||
return {
|
||||
name: d.consultantName,
|
||||
value: d.watch,
|
||||
percent: (d.watch / max) * 100
|
||||
};
|
||||
});
|
||||
|
||||
//订单数排名-区域
|
||||
temp = this.statistics.areaData.sort((a, b) => b.order - a.order);
|
||||
max = temp[0].order || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.orderAreaRank = list.map((d) => {
|
||||
return {
|
||||
name: d.areaName,
|
||||
value: d.order,
|
||||
percent: (d.order / max) * 100
|
||||
};
|
||||
});
|
||||
//观看人数排名-门店
|
||||
temp = this.statistics.bizData.sort((a, b) => b.order - a.order);
|
||||
max = temp[0].order || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.orderBizRank = list.map((d) => {
|
||||
return {
|
||||
name: d.bizName,
|
||||
value: d.order,
|
||||
percent: (d.order / max) * 100
|
||||
};
|
||||
});
|
||||
//观看人数排名-顾问
|
||||
temp = this.statistics.consultantData.sort((a, b) => b.order - a.order);
|
||||
max = temp[0].order || 1;
|
||||
list = temp.length > 10 ? temp.slice(0, 10) : temp;
|
||||
this.orderConsultantRank = list.map((d) => {
|
||||
return {
|
||||
name: d.consultantName,
|
||||
value: d.order,
|
||||
percent: (d.order / max) * 100
|
||||
};
|
||||
});
|
||||
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
@@ -257,6 +681,18 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 人数分布排名 */
|
||||
.monitor-user-count-item {
|
||||
margin-bottom: 8px;
|
||||
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ele-cell-content {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
.analysis-chart-card-num {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user