Skip to content

M
marketing
Commit 4c18e5da by liuchenxi
Options

触达效果测试

parent 54f3b207
Showing with 121 additions and 24 deletions
src/service/api/ecmApi.js
......@@ -51,6 +51,10 @@ export const ecmTouchEffectFunnelChart = params => requests(PREFIX + 'ecmTouchEf
export const ecmGuideCluesColumnDiagram = params => requests(PREFIX + 'ecmGuideCluesColumnDiagram', params);
export const ecmGuideCluesTable = params => requests(PREFIX + 'ecmGuideCluesTable', params);
export const ecmGuideCluesTaskTable = params => requests(PREFIX + 'ecmGuideCluesTaskTable', params); // 任务完成情况表格
export const ecmGuideCluesTouchEffectTotalTab = params => requests(PREFIX + 'ecmGuideCluesTouchEffectTotalTab', params); // 触达效果-整体转化-表格
export const ecmGuideCluesTouchEffectTabTotalHead = params => requests(PREFIX + 'ecmGuideCluesTouchEffectTabTotalHead', params); // 触达效果-整体转化-表头
export const ecmGuideCluesTouchEffectTab = params => requests(PREFIX + 'ecmGuideCluesTouchEffectTab', params); // 触达效果-其他tab-表格
export const ecmGuideCluesTouchEffectTabHead = params => requests(PREFIX + 'ecmGuideCluesTouchEffectTabHead', params); // 触达效果-其他tab-表头
// 智能营销--后台线索
export const ecmHeadCluesColumnDiagram = params => requests(PREFIX + 'ecmHeadCluesColumnDiagram', params);
export const ecmHeadGuideCluesTable = params => requests(PREFIX + 'ecmHeadGuideCluesTable', params);
......
src/views/ecm/touch-clue.vue
......@@ -2,17 +2,19 @@
<div class="clue" v-loading="loading">
<div class="dm-wrap draw_wrap">
<h2 class="title">{{ type == 1 ? '导购线索概况' : '后台线索概况' }}</h2>
<touch-charts :style="{ marginBottom: '3px' }" :type="type" />
<touch-charts :style="{ marginBottom: '3px' }" :type="$route.query.type" />
<market-list :isCluePage="true" :isRepeat="true" :isReference="false" :data="marketListData" />
</div>
<div class="dm-wrap area">
<div class="areatitle">区域详情</div>
<div class="areatitle">
<span class="txt">区域详情</span>
</div>
<div class="tabs" v-if="type == 1">
<div class="tab1">
<span v-for="(item, index) in listTabs" :key="index" :class="{ active: index == listTabsIndex }" @click="changeListTab(index)">{{ item }}</span>
</div>
<div class="tab2">
<span v-for="(item, index) in listTabsIndex == 1 ? touchTabs : taskTabs" :key="index" :class="{ active2: index == tabsIndex }" @click="changeTabs(index)">{{ item }}</span>
<span v-for="item in listTabsIndex == 1 ? touchTabs : taskTabs" :key="item.value" :class="{ active2: item.value == tabsIndex }" @click="changeTabs(item.value)">{{ item.name }}</span>
</div>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中" @sort-change="sortChange" :style="{ marginTop: '20px', padding: '0 20px 0 22px' }">
......@@ -29,7 +31,8 @@
</template>
<script>
import { ecmGuideCluesTable, ecmHeadCluesTaskTab, ecmHeadGuideCluesTable, ecmHeadCluesTaskTabHead, ecmGuideCluesTaskTable } from '@/service/api/ecmApi.js';
import { ecmGuideCluesTable, ecmHeadCluesTaskTab, ecmHeadGuideCluesTable, ecmHeadCluesTaskTabHead, ecmGuideCluesTaskTable, ecmGuideCluesTouchEffectTotalTab, ecmGuideCluesTouchEffectTabTotalHead, ecmGuideCluesTouchEffectTab, ecmGuideCluesTouchEffectTabHead } from '@/service/api/ecmApi.js';
// import { ecmGuideCluesTable, ecmHeadCluesTaskTab, ecmHeadGuideCluesTable, ecmHeadCluesTaskTabHead, ecmGuideCluesTaskTable, ecmGuideCluesTouchEffectTotalTab } from '@/service/api/ecmApi.js';ecmGuideCluesTouchEffectTab
import marketList from '@/views/ecm/touch-components/market-list.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
export default {
......@@ -42,12 +45,46 @@ export default {
return {
tableHeader: [],
tableList: [],
touchTabs: ['整体转化', '企业电话', '私人电话', '私人短信', '话务'],
taskTabs: ['合计', '群发', '话务', '企微任务'],
touchTabs: [
{
name: '整体转化',
value: 0
},
{
name: '企业电话',
value: 1
},
{
name: '私人电话',
value: 2
},
{
name: '企业微信',
value: 3
},
{
name: '私人短信',
value: 4
},
{
name: '话务',
value: 999
}
],
taskTabs: [
{
name: '企业微信',
value: 1
},
{
name: '话务',
value: 999
}
],
listTabs: ['任务完成情况', '触达效果'],
tabsIndex: 0,
listTabsIndex: 1,
type: 1, // 1导购 0后台
type: 1, // 1导购 2后台
marketListData: [],
currentPage: 1,
pageSize: 20,
......@@ -79,6 +116,7 @@ export default {
},
changeTabs(index) {
this.tabsIndex = index;
this.getTableFirstData();
},
changeListTab(index) {
this.listTabsIndex = index;
......@@ -101,7 +139,7 @@ export default {
});
},
getTableHeader() {
if (this.type == 2) {
if (this.listTabsIndex != 0) {
this.tableHeader = [
{
label: '排名',
......@@ -132,25 +170,65 @@ export default {
{ label: '折扣率', prop: 'discountRate', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' }
];
}
if (this.type == 1 && this.listTabsIndex == 0) {
this.tableHeader = [
{
label: '排名',
prop: 'index',
minWidth: '160',
align: 'left',
fixed: 'left',
formatter(row) {
let color = '#F0F5FF';
if (row.index == 1) {
color = '#F5222D';
} else if (row.index == 2) {
color = '#FAAD14';
} else if (row.index == 3) {
color = '#FFCB48';
} else if (!row.index) {
return '--';
}
return `<span style="background:${color};width: 16px; display: inline-block; text-align: center; line-height:16px">${row.index}</span>`;
}
},
{ label: '门店名称', prop: 'storeName', minWidth: '160', align: 'left', fixed: 'left' },
{ label: '任务总数', prop: 'taskCnt', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
{ label: '任务完成数', prop: 'cplTaskCnt', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
{ label: '任务完成率', prop: 'taskCompletionRate', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
{ label: '任务放弃数', prop: 'tasksAbandonedNum', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
{ label: '逾期未完成', prop: 'overdueNotCompleted', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' },
{ label: '未完成', prop: 'notCompleted', minWidth: '160', align: 'left', fixed: 'left', sortable: 'custom' }
];
}
},
getTableList() {
let meth;
let params = { ecmPlanId: 1, pageNum: this.currentPage, pageSize: this.pageSize, orderBy: this.orderBy ? this.orderBy : '' };
console.log(params);
if (this.type == 2) {
// 后台线索
meth = ecmHeadCluesTaskTab;
} else {
// 列表类型切换
// 导购线索
// 列表类型切换listTabsIndex 0 为任务完成情况 1为触达效果
if (this.listTabsIndex == 0) {
// 任务完成情况
meth = ecmGuideCluesTaskTable;
params.taskType = this.tabsIndex;
} else {
meth = ecmGuideCluesTaskTable;
if (this.tabsIndex == 0) {
// 整体计划tab是单独的接口
meth = ecmGuideCluesTouchEffectTotalTab;
} else {
// 其他几个tab接口 带参
meth = ecmGuideCluesTouchEffectTab;
params.touchTypes = this.tabsIndex;
}
}
params.touchTypes = 1; // 获取子tab切换的值
}
meth(params).then(res => {
if (this.currentPage == 1) {
if (this.currentPage == 1 && this.listTabsIndex != 0) {
// 任务完成情况无表头
let resetArr = [];
resetArr[0] = this.tableFirstData;
this.tableList = resetArr.concat(res.result.result);
......@@ -164,12 +242,24 @@ export default {
},
getTableFirstData() {
let meth;
let params = { ecmPlanId: 1 };
if (this.type == 2) meth = ecmHeadCluesTaskTabHead;
else meth = ecmHeadCluesTaskTabHead;
meth({ ecmPlanId: 1 }).then(res => {
else {
if (this.listTabsIndex == 1) {
if (this.tabsIndex == 0) {
meth = ecmGuideCluesTouchEffectTabTotalHead;
} else {
meth = ecmGuideCluesTouchEffectTabHead;
params.touchTypes = this.tabsIndex;
}
} else {
this.getTableList();
return;
}
}
meth(params).then(res => {
let data = res.result;
data.storeName = '合计';
data.reachRate = 200;
this.tableFirstData = res.result;
this.getTableList();
});
......@@ -215,15 +305,17 @@ export default {
margin-bottom: 38px;
}
.areatitle {
width: 64px;
height: 22px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #303133;
line-height: 22px;
padding-left: 32px;
margin-bottom: 8px;
.txt {
font-family: PingFangSC-Medium, PingFang SC;
width: 64px;
font-weight: 600;
height: 22px;
color: #303133;
line-height: 22px;
}
}
.tabs {
.tab2 {
......
src/views/ecm/touch-components/touch-charts.vue
......@@ -5,7 +5,7 @@
</template>
<script>
import * as G2 from '@antv/g2';
import { ecmTouchEffectColumnDiagram, ecmGuideCluesColumnDiagram, ecmHeadGuideCluesTable } from '@/service/api/ecmApi.js';
import { ecmTouchEffectColumnDiagram, ecmGuideCluesColumnDiagram, ecmHeadCluesColumnDiagram } from '@/service/api/ecmApi.js';
export default {
name: 'touch-charts',
props: {
......@@ -96,9 +96,10 @@ export default {
},
getChartData() {
let meth;
console.log('charts', this.type);
if (this.type == 0) meth = ecmTouchEffectColumnDiagram;
else if (this.type == 1) meth = ecmGuideCluesColumnDiagram;
else meth = ecmHeadGuideCluesTable;
else meth = ecmHeadCluesColumnDiagram;
meth({ ecmPlanId: 1 }).then(res => {
this.chartData = res.result.map(item => {
if (item.name == '线索转化收益') {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment