Skip to content

M
marketing
Commit edcd2d7c by liuchenxi
Options

update: 触达效果调整

parent 89d20b82
Showing with 1212 additions and 69 deletions
src/mixins/validateNum.js
......@@ -8,6 +8,9 @@ export default {
},
formatterRate() {
return val => (!val ? '0.00%' : parseFloat(val).toFixed(2) + '%');
},
formatterNumAndFixed() {
return val => parseFloat(val || 0).toLocaleString('zh', { minimumFractionDigits: 2 });
}
}
};
src/service/api/ecmApi.js
......@@ -49,7 +49,8 @@ export const exportCurrentSendDetails = config.api + PREFIX + 'export-current-se
// 智能营销--触达效果
export const ecmTouchEffectColumnDiagram = params => requests(PREFIX + 'ecmTouchEffectColumnDiagram', params);
export const ecmTouchEffectTable = params => requests(PREFIX + 'ecmTouchEffectTable', params);
export const ecmTouchEffectFunnelChart = params => requests(PREFIX + 'ecmTouchEffectFunnelChart', params);
export const ecmTouchTypeTableList = params => requests(PREFIX + 'ecmTouchTypeTableList', params); // 获取（1 群发任务、2 群发失败-话务、3 群发失败-短信、4 话务、5 短信、6 微信）列表
// export const ecmTouchEffectFunnelChart = params => requests(PREFIX + 'ecmTouchEffectFunnelChart', params);
export const ecmPlanTouchConfig = params => requests(PREFIX + 'ecmPlanTouchConfig', params);
export const getCardLeads = params => requests(PREFIX + 'getCardLeads', params); // 卡券收益
export const getCardLeadsList = params => requests(PREFIX + 'getCardLeadsList', params); // 卡券收益表格
......
src/views/ecm/list.vue
......@@ -340,7 +340,7 @@ export default {
},
// 触达效果
toTouch(row) {
this.$router.push({ path: `/ecm/touch/${row.ecmPlanId}`, query: { name: row.ecmPlanName, createTime: row.createTime } });
this.$router.push({ path: `/ecm/touch/${row.ecmPlanId}`, query: { name: row.ecmPlanName, createTime: row.createTime, effectType: row.effectType } });
},
// 删除
async delData(row) {
......
src/views/ecm/touch-clue.vue
......@@ -118,6 +118,7 @@ export default {
let planId = this.$route.query.id;
let createTime = this.$route.query.createTime;
this.type = this.$route.query.type;
this.effectType = this.$route.query.effectType;
this.getMarketList();
this.getTabData();
if (this.type == 2) {
......@@ -127,7 +128,7 @@ export default {
name = '导购线索';
this.touchOrderBy = 'reachConvMbrRate desc';
}
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果`, path: `/ecm/touch/${planId}?name=${planName}&&createTime=${createTime}` }, { name }]); // eslint-disable-line
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果`, path: `/ecm/touch/${planId}?name=${planName}&&createTime=${createTime}&&effectType=${effectType}` }, { name }]); // eslint-disable-line
},
methods: {
handleSizeChange(val) {
......
src/views/ecm/touch-components/batch-send/batch-fail-msg.vue 0 → 100644
<!--群发失败-短信总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>计划触达人数<tip /></p>
<p>{{ formatterNum(data.planMbrNum) }}</p>
</div>
</div>
<div class="item-arrow purper center_flex" style="width: 107px;background-size: 100% 100%">
<p style="width: 80px;">发送成功率</p>
<p style="width: 80px;">{{ formatterRate((data.touchMbrNum / data.planMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>实际触达人数<tip /></p>
<p>{{ formatterNum(data.touchMbrNum) }}</p>
</div>
</div>
<div class="item-arrow purper center_flex">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper center_flex min-w-212">
<div>
<p>触达顾客转化人数<tip /></p>
<p>{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-purper min-w-489">
<div>
<p>触达顾客订单数 <tip /></p>
<p>{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p>触达顾客转化收益（元）<tip /></p>
<p>{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'batch-fail-msg',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100%;
border-radius: 6px;
box-sizing: border-box;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
p {
&:nth-child(1) {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
&:nth-child(2) {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
}
.item-arrow {
width: 89px;
height: 71px;
margin-right: 9px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
}
&.green {
background: url('~@/assets/img/arrow_green.png');
}
p {
width: 47px;
font-size: 12px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.min-w-173 {
min-width: 173px;
}
.min-w-212 {
min-width: 212px;
}
.min-w-489 {
min-width: 489px;
margin-left: 5px;
display: flex;
align-items: center;
padding: 0 42px 0 47px;
box-sizing: border-box;
div {
flex: 1;
text-align: left;
}
}
</style>
src/views/ecm/touch-components/batch-send/batch-fail-phone.vue 0 → 100644
<!--群发失败-话务总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">计划触达人数<tip /></p>
<p class="value">{{ formatterNum(data.planMbrNum) }}</p>
</div>
<div class="item-arrow purper">
<p>成功率</p>
<p>{{ formatterRate((data.taskExecuteNum / data.planMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">任务执行人数<tip /></p>
<p class="value">{{ formatterNum(data.taskExecuteNum) }}</p>
</div>
<div class="item-arrow purper">
<p>触达率</p>
<p>{{ formatterRate((data.touchMbrNum / data.taskExecuteNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">实际触达人数<tip /></p>
<p class="value">{{ formatterNum(data.touchMbrNum) }}</p>
</div>
<div class="item-arrow green">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-green center_flex min-w-200">
<div style="padding-left: 10px">
<p class="key">触达顾客转化人数<tip /></p>
<p class="value">{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green min-w-403">
<div>
<p class="key">触达顾客订单数<tip /></p>
<p class="value">{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p class="key">触达顾客转化收益（元）<tip /></p>
<p class="value">{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'batch-send-phone',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100%;
border-radius: 6px;
margin-right: 47px;
box-sizing: border-box;
position: relative;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
.key {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
.value {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
.item-arrow {
width: 78px;
height: 65px;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 7px;
box-sizing: border-box;
z-index: 3;
right: -77px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
background-size: 100% 100%;
}
&.green {
background: url('~@/assets/img/arrow_green.png');
background-size: 100% 100%;
}
p {
width: 47px;
font-size: 12px;
margin-top: -3px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.min-w-173 {
min-width: 173px;
}
.min-w-200 {
min-width: 200px;
margin-right: 7px !important;
}
.min-w-403 {
min-width: 403px;
margin-right: 0 !important;
display: flex;
align-items: center;
padding: 0 34px 0 22px;
box-sizing: border-box;
div {
flex: 1;
text-align: left;
}
}
</style>
src/views/ecm/touch-components/batch-send/batch-send-sum.vue 0 → 100644
<!--群发任务 总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">计划触达人数<tip /></p>
<p class="value">{{ formatterNum(data.planMbrNum) }}</p>
</div>
<div class="item-arrow purper">
<p>成功率</p>
<p>{{ formatterRate((data.taskCreateNum / data.planMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div style="padding-left: 20px">
<p class="key">任务创建成功顾客数<tip /></p>
<p class="value">{{ formatterNum(data.taskCreateNum) }}</p>
</div>
<div class="item-arrow purper">
<p>执行率</p>
<p>{{ formatterRate((data.massExecuteNum / data.taskCreateNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">群发执行顾客数<tip /></p>
<p class="value">{{ formatterNum(data.massExecuteNum) }}</p>
</div>
<div class="item-arrow purper">
<p>触达率</p>
<p>{{ formatterRate((data.touchMbrNum / data.massExecuteNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">实际触达人数<tip /></p>
<p class="value">{{ formatterNum(data.touchMbrNum) }}</p>
</div>
<div class="item-arrow green">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-green center_flex min-w-188 h143">
<div style="padding-left: 10px">
<p class="key">触达顾客转化人数<tip /></p>
<p class="value">{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green min-w-235 h143">
<div class="center_wrap">
<div>
<p class="key">触达顾客订单数<tip /></p>
<p class="value">{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p class="key">触达顾客转化收益（元）<tip /></p>
<p class="value">{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'batch-send-sum',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 143px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100px;
border-radius: 6px;
margin-right: 47px;
box-sizing: border-box;
position: relative;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
.key {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
.value {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
.item-arrow {
width: 78px;
height: 65px;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 7px;
box-sizing: border-box;
z-index: 3;
right: -77px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
background-size: 100% 100%;
}
&.green {
background: url('~@/assets/img/arrow_green.png');
background-size: 100% 100%;
}
p {
width: 47px;
font-size: 12px;
margin-top: -3px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.h143 {
height: 143px !important;
}
.min-w-173 {
min-width: 173px;
}
.min-w-188 {
min-width: 188px;
margin-right: 7px !important;
}
.min-w-235 {
min-width: 235px;
margin-right: 0 !important;
display: flex;
justify-content: center;
padding: 7px 0;
.center_wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
</style>
src/views/ecm/touch-components/batch-send/index.vue
......@@ -6,19 +6,45 @@
<img :src="require('@/assets/img/icon-send.png')" class="img" />
<h2>群发任务</h2>
</div>
<el-link type="primary" :underline="false" style="color: #1890ff">主要链接</el-link>
<el-link type="primary" :underline="false" style="color: #1890ff">查看详情<i class="el-icon-arrow-right" style="margin-left: 10px"></i></el-link>
</div>
<batch-send-sum v-if="taskList" :data="taskList" />
<div class="wrap">
<div v-if="telTrafficList">
<h3>群发失败-话务</h3>
<div style="padding: 0px 20px"><batch-fail-phone :data="telTrafficList" /></div>
</div>
<div v-if="msgList" :style="{ marginTop: telTrafficList ? '26px' : '0' }">
<h3>群发失败-话务</h3>
<div style="padding: 0px 20px"><batch-fail-msg :data="msgList" /></div>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import batchSendSum from './batch-send-sum';
import batchFailPhone from './batch-fail-phone';
import batchFailMsg from './batch-fail-msg';
export default {
name: 'batch-send',
mixins: [formatterNum],
components: { batchSendSum, batchFailPhone, batchFailMsg },
data() {
return {};
},
props: {
taskList: {
type: Object || undefined
},
telTrafficList: {
type: Object || undefined
},
msgList: {
type: Object || undefined
}
},
methods: {}
};
</script>
......@@ -30,13 +56,14 @@ export default {
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
margin-bottom: 30px;
margin-bottom: 10px;
line-height: 22px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700;
color: #303133;
margin-left: 2px;
}
}
.img {
......@@ -47,5 +74,24 @@ export default {
justify-content: space-between;
align-items: center;
}
.wrap {
margin-top: 20px;
padding: 20px 0 30px;
border-radius: 2px;
border: 2px dashed #c9dafd;
}
h3 {
width: 139px;
height: 25px;
background: #bad9ff;
line-height: 25px;
text-align: center;
border-radius: 2px;
margin-left: -2px;
color: #303133;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
margin-bottom: 12px;
}
}
</style>
src/views/ecm/touch-components/card/card-profit-sum.vue
<!--卡券收益总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper item center_flex min-w-173">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>触达人数<tip /></p>
<p>{{ formatterNum(list.touchMbrNum) }}</p>
......@@ -11,7 +11,7 @@
<p>领取率</p>
<p>{{ formatterRate((list.getMbrNum / list.touchMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper item center_flex min-w-173">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>领取人数<tip /></p>
<p>{{ formatterNum(list.getMbrNum) }}</p>
......@@ -21,20 +21,20 @@
<p>使用率</p>
<p>{{ formatterRate((list.useMbrNum / list.getMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper item center_flex min-w-214">
<div class="item-bg bg-purper center_flex min-w-214">
<div>
<p>使用人数<tip /></p>
<p>{{ formatterNum(list.useMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-purper item min-w-517">
<div class="item-bg bg-purper min-w-527">
<div>
<p>销售单数 <tip /></p>
<p>{{ formatterNum(list.orderCnt) }}</p>
</div>
<div>
<p>销售单金额（元）<tip /></p>
<p>{{ parseFloat(list.salesAmt || 0).toLocaleString('zh', { minimumFractionDigits: 2 }) }}</p>
<p>{{ formatterNumAndFixed(list.salesAmt) }}</p>
</div>
</div>
</div>
......@@ -44,7 +44,7 @@
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'market-list',
name: 'card-profit-sum',
components: { tip },
props: {
list: {
......@@ -89,16 +89,12 @@ export default {
color: #303133;
line-height: 28px;
}
.active {
color: #f5222d;
margin-left: 4px;
}
}
}
.item-arrow {
width: 96px;
width: 89px;
height: 71px;
margin-right: 8px;
margin-right: 14px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
}
......@@ -131,8 +127,8 @@ export default {
.min-w-214 {
min-width: 214px;
}
.min-w-517 {
min-width: 517px;
.min-w-527 {
min-width: 527px;
margin-left: 5px;
display: flex;
align-items: center;
......
src/views/ecm/touch-components/card/card-profit.vue
......@@ -4,7 +4,7 @@
<h2>卡券收益</h2>
<span>计划中的卡券，计划中卡券触达的人群使用该卡券消费的收益，包含已过计划收益有效期的数据</span>
</div>
<template v-if="tableData.length">
<template>
<card-profit-sum :list="list" />
<el-table :data="tableData" v-if="tableData.length > 1" style="margin:20px 0 20px" max-height="710">
<el-table-column :prop="cardName" label="卡券名称" min-width="150">
......@@ -30,12 +30,6 @@
</el-table-column>
</el-table>
</template>
<div class="empty" v-else>
<div class="content">
<span class="icon iconfont">&#xe76e;</span>
<span class="none-tip">本计划未使用卡券营销</span>
</div>
</div>
</div>
</template>
......@@ -65,7 +59,7 @@ export default {
{ label: '使用人数', prop: 'useMbrNum', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.useMbrNum) },
{ label: '使用率', prop: 'useRate', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterRate((row.useMbrNum / row.getMbrNum) * 100) },
{ label: '销售单数', prop: 'orderCnt', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNum(row.orderCnt) },
{ label: '销售单金额', prop: 'salesAmt', minWidth: '160', align: 'left', fixed: 'left', formatter: row => parseFloat(row.salesAmt || 0).toLocaleString('zh', { minimumFractionDigits: 2 }) }
{ label: '销售单金额', prop: 'salesAmt', minWidth: '160', align: 'left', fixed: 'left', formatter: row => this.formatterNumAndFixed(row.salesAmt) }
]
};
},
......@@ -140,25 +134,5 @@ export default {
line-height: 22px;
}
}
.empty {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: #909399;
font-size: 16px;
.content {
display: flex;
align-items: center;
.icon {
font-size: 30px;
margin-right: 10px;
}
.none-tip {
color: #c0c4cc;
font-size: 14px;
}
}
}
}
</style>
src/views/ecm/touch-components/market-list.vue
......@@ -25,7 +25,7 @@
</template>
<!--非线索页列表-->
<div class="right">
<div class="item-bg bg-purper item center_flex min-w-173">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>{{ item.isSales == 1 ? '计划触达人数' : '参照组人数' }}<tip /></p>
<p>{{ formatterNum(item.planMbrNum) }}</p>
......@@ -36,7 +36,7 @@
<p>{{ formatterRate(item.touchRate) }}</p>
</div>
<div v-else style="width: 96px"></div>
<div class="item-bg bg-purper item center_flex min-w-173" v-if="item.isSales == 1">
<div class="item-bg bg-purper center_flex min-w-173" v-if="item.isSales == 1">
<div>
<p>实际触达人数<tip /></p>
<p>{{ formatterNum(item.touchMbrNum) }}</p>
......@@ -47,20 +47,20 @@
<p :class="{ active: isReference && item.isSales == 1 && data[0].transformRate < data[1].transformRate }">转化率</p>
<p :class="{ active: isReference && item.isSales == 1 && data[0].transformRate < data[1].transformRate }">{{ formatterRate(item.transformRate) }}</p>
</div>
<div class="item-bg bg-green item center_flex min-w-206">
<div class="item-bg bg-green center_flex min-w-206">
<div>
<p>{{ item.isSales == 1 ? '触达顾客转化人数' : '转化人数' }}<tip /></p>
<p>{{ formatterNum(item.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green item min-w-389">
<div class="item-bg bg-green min-w-389">
<div>
<p>{{ item.isSales == 1 ? '触达顾客订单数' : '转化订单数' }}<tip /></p>
<p>{{ formatterNum(item.convOrderCnt) }}</p>
</div>
<div>
<p>{{ item.isSales == 1 ? '触达顾客转化收益' : '转化收益' }}<tip /></p>
<p>{{ parseFloat(item.convSalesAmt || 0).toLocaleString('zh', { minimumFractionDigits: 2 }) }}</p>
<p>{{ formatterNumAndFixed(item.convSalesAmt) }}</p>
</div>
</div>
</div>
......@@ -201,11 +201,14 @@ export default {
.item-arrow {
width: 96px;
height: 71px;
align-items: flex-start;
padding-left: 18px;
box-sizing: border-box;
&.purper {
background: url('../../../assets/img/arrow_purper.png');
background: url('~@/assets/img/arrow_purper.png');
}
&.green {
background: url('../../../assets/img/arrow_green.png');
background: url('~@/assets/img/arrow_green.png');
}
p {
width: 47px;
......
src/views/ecm/touch-components/phone-traffic/index.vue 0 → 100644
<template>
<div class="dm-wrap phone-traffic">
<div class="title flex_between">
<div class="flex_between">
<img :src="require('@/assets/img/icon-phone.png')" class="img" />
<h2>话务</h2>
</div>
<el-link type="primary" :underline="false" style="color: #1890ff">查看详情<i class="el-icon-arrow-right" style="margin-left: 10px"></i></el-link>
</div>
<phone-traffic-sum v-bind="$attrs" />
</div>
</template>
<script>
import phoneTrafficSum from './phone-traffic-sum';
export default {
name: 'phone-traffic',
components: { phoneTrafficSum },
inheritAttrs: false
};
</script>
<style lang="scss" scoped>
.phone-traffic {
padding: 22px 20px 30px !important;
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
margin-bottom: 20px;
line-height: 22px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700;
color: #303133;
margin-left: 2px;
}
}
.img {
transform: scale(0.5);
}
.flex_between {
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
src/views/ecm/touch-components/phone-traffic/phone-traffic-sum.vue
<!--话务总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">计划触达人数<tip /></p>
<p class="value">{{ formatterNum(data.planMbrNum) }}</p>
</div>
<div class="item-arrow purper">
<p>执行率</p>
<p>{{ formatterRate((data.taskExecuteNum / data.planMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">任务执行人数<tip /></p>
<p class="value">{{ formatterNum(data.taskExecuteNum) }}</p>
</div>
<div class="item-arrow purper">
<p>触达率</p>
<p>{{ formatterRate((data.touchMbrNum / data.taskExecuteNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p class="key">实际触达人数<tip /></p>
<p class="value">{{ formatterNum(data.touchMbrNum) }}</p>
</div>
<div class="item-arrow green">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
</div>
<div class="item-bg bg-green center_flex min-w-210">
<div>
<p class="key">触达顾客转化人数<tip /></p>
<p class="value">{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green min-w-433">
<div>
<p class="key">触达顾客订单数<tip /></p>
<p class="value">{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p class="key">触达顾客转化收益（元）<tip /></p>
<p class="value">{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'phone-traffic-sum',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100%;
border-radius: 6px;
margin-right: 47px;
box-sizing: border-box;
position: relative;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
.key {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
.value {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
.item-arrow {
width: 78px;
height: 65px;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 7px;
box-sizing: border-box;
z-index: 3;
right: -77px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
background-size: 100% 100%;
}
&.green {
background: url('~@/assets/img/arrow_green.png');
background-size: 100% 100%;
}
p {
width: 47px;
font-size: 12px;
margin-top: -3px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.min-w-173 {
min-width: 173px;
}
.min-w-210 {
min-width: 210px;
margin-right: 7px !important;
}
.min-w-433 {
min-width: 433px;
margin-right: 0 !important;
display: flex;
align-items: center;
padding: 0 50px 0 36px;
box-sizing: border-box;
div {
flex: 1;
text-align: left;
}
}
</style>
src/views/ecm/touch-components/short-msg/index.vue 0 → 100644
<template>
<div class="dm-wrap short-msg">
<div class="title flex_between">
<div class="flex_between">
<img :src="require('@/assets/img/icon-talk.png')" class="img" />
<h2>短信</h2>
</div>
</div>
<short-msg-sum v-bind="$attrs" />
</div>
</template>
<script>
import shortMsgSum from './short-msg-sum.vue';
export default {
name: 'short-msg',
components: { shortMsgSum },
inheritAttrs: false
};
</script>
<style lang="scss" scoped>
.short-msg {
padding: 22px 20px 30px !important;
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
margin-bottom: 20px;
line-height: 22px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700;
color: #303133;
margin-left: 2px;
}
}
.img {
transform: scale(0.5);
}
.flex_between {
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
src/views/ecm/touch-components/short-msg/short-msg-sum.vue
<!--短信总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>计划触达人数<tip /></p>
<p>{{ formatterNum(data.planMbrNum) }}</p>
</div>
</div>
<div class="item-arrow purper center_flex">
<p>执行率</p>
<p>{{ formatterRate((data.touchMbrNum / data.planMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>实际触达人数<tip /></p>
<p>{{ formatterNum(data.touchMbrNum) }}</p>
</div>
</div>
<div class="item-arrow green center_flex">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-green center_flex min-w-214">
<div>
<p>触达顾客转化人数<tip /></p>
<p>{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green min-w-527">
<div>
<p>触达顾客订单数 <tip /></p>
<p>{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p>触达顾客转化收益（元）<tip /></p>
<p>{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'short-msg-sum',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100%;
border-radius: 6px;
box-sizing: border-box;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
p {
&:nth-child(1) {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
&:nth-child(2) {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
}
.item-arrow {
width: 89px;
height: 71px;
margin-right: 14px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
}
&.green {
background: url('~@/assets/img/arrow_green.png');
}
p {
width: 47px;
font-size: 12px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.min-w-173 {
min-width: 173px;
}
.min-w-214 {
min-width: 214px;
}
.min-w-527 {
min-width: 527px;
margin-left: 7px;
display: flex;
align-items: center;
padding: 0 51px 0 107px;
box-sizing: border-box;
div {
flex: 1;
text-align: left;
}
}
</style>
src/views/ecm/touch-components/touch-charts.vue
......@@ -124,7 +124,7 @@ export default {
this.isNone = true;
} else {
this.chartData = res.result.map(item => {
if (item.name == '线索转化收益') {
if (item.name == '转化收益') {
item.rate = item.vaule ? parseFloat(item.vaule) : 0;
delete item.vaule;
} else {
......@@ -147,7 +147,7 @@ export default {
let obj = [
{ date: item, value: 0, name: '触达人数' },
{ date: item, value: 0, name: '转化人数' },
{ date: item, rate: 0, name: '线索转化收益' }
{ date: item, rate: 0, name: '转化收益' }
];
arr.unshift(...obj);
}
......@@ -158,7 +158,7 @@ export default {
chartData.forEach(item => {
dateArr.forEach(el => {
if (item.date == this.formatterTime(el.date) && item.name == el.name) {
if (el.name == '线索转化收益') el.rate = item.rate;
if (el.name == '转化收益') el.rate = item.rate;
else el.value = item.value;
}
});
......
src/views/ecm/touch-components/wechat/index.vue 0 → 100644
<template>
<div class="dm-wrap wechat">
<div class="title flex_between">
<div class="flex_between">
<img :src="require('@/assets/img/icon-weixin.png')" class="img" />
<h2>微信</h2>
</div>
</div>
<div v-if="customServiceData">
<h3>{{ $route.query.effectType == 0 ? '客服接口（文本、图文、图片、小程序）' : '客服接口（小程序）' }}</h3>
<wechat-sum :data="customServiceData" />
</div>
<div v-if="batchData" style="margin-top: 30px">
<h3>群发接口（文本、图文、图片）</h3>
<wechat-sum :data="batchData" />
</div>
</div>
</template>
<script>
import wechatSum from './wechat-sum.vue';
export default {
name: 'wechat',
components: { wechatSum },
props: {
customServiceData: {
type: Object || undefined
},
batchData: {
type: Object || undefined
}
}
};
</script>
<style lang="scss" scoped>
.wechat {
padding: 22px 20px 30px !important;
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
margin-bottom: 30px;
line-height: 22px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700;
color: #303133;
margin-left: 2px;
}
}
.img {
transform: scale(0.5);
}
.flex_between {
display: flex;
justify-content: space-between;
align-items: center;
}
h3 {
display: inline-block;
height: 25px;
background: #bad9ff;
line-height: 25px;
text-align: center;
border-radius: 2px;
color: #303133;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
margin-bottom: 20px;
padding: 0 20px;
}
}
</style>
src/views/ecm/touch-components/wechat/wechat-sum.vue
<!--微信总数据-->
<template>
<div class="middle">
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>计划触达人数<tip /></p>
<p>{{ formatterNum(data.planMbrNum) }}</p>
</div>
</div>
<div class="item-arrow purper center_flex">
<p>执行率</p>
<p>{{ formatterRate((data.touchMbrNum / data.planMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-purper center_flex min-w-173">
<div>
<p>实际触达人数<tip /></p>
<p>{{ formatterNum(data.touchMbrNum) }}</p>
</div>
</div>
<div class="item-arrow green center_flex">
<p>转化率</p>
<p>{{ formatterRate((data.convMbrNum / data.touchMbrNum) * 100) }}</p>
</div>
<div class="item-bg bg-green center_flex min-w-214">
<div>
<p>触达顾客转化人数<tip /></p>
<p>{{ formatterNum(data.convMbrNum) }}</p>
</div>
</div>
<div class="item-bg bg-green min-w-527">
<div>
<p>触达顾客订单数 <tip /></p>
<p>{{ formatterNum(data.convOrderCnt) }}</p>
</div>
<div>
<p>触达顾客转化收益（元）<tip /></p>
<p>{{ formatterNumAndFixed(data.convSalesAmt) }}</p>
</div>
</div>
</div>
</template>
<script>
import formatterNum from '@/mixins/validateNum';
import tip from '@/components/tip';
export default {
name: 'wechat-sum',
components: { tip },
props: {
data: {
type: Object,
default: () => {}
}
},
mixins: [formatterNum]
};
</script>
<style lang="scss" scoped>
.middle {
font-family: PingFangSC-Medium, PingFang SC;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
.item-bg {
flex: 1;
height: 100%;
border-radius: 6px;
box-sizing: border-box;
&.bg-green {
background: #e3fff8;
}
&.bg-purper {
background: #f0f5ff;
}
p {
&:nth-child(1) {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
color: #606266;
line-height: 20px;
padding-top: 4px;
margin-bottom: 6px;
}
&:nth-child(2) {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
}
.item-arrow {
width: 89px;
height: 71px;
margin-right: 14px;
&.purper {
background: url('~@/assets/img/arrow_purper.png');
}
&.green {
background: url('~@/assets/img/arrow_green.png');
}
p {
width: 47px;
font-size: 12px;
line-height: 20px;
color: #606266;
font-family: PingFangSC-Regular, PingFang SC;
&:nth-child(2) {
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
}
}
}
}
.center_flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.min-w-173 {
min-width: 173px;
}
.min-w-214 {
min-width: 214px;
}
.min-w-527 {
min-width: 527px;
margin-left: 7px;
display: flex;
align-items: center;
padding: 0 51px 0 107px;
box-sizing: border-box;
div {
flex: 1;
text-align: left;
}
}
</style>
src/views/ecm/touch-effect.vue
......@@ -7,8 +7,11 @@
<touch-charts :type="0" :createTime="$route.query.createTime" />
<market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" />
</div>
<card-profit :list="cardLead" :tableData="cardLeadTable" />
<batch-send />
<card-profit v-if="cardLeadTable.length" :list="cardLead" :tableData="cardLeadTable" />
<batch-send v-if="findTypeIsExist(1) || findTypeIsExist(2) || findTypeIsExist(3)" :task-list="findTypeObj(optionsList, 1)" :tel-traffic-list="findTypeObj(optionsList, 2)" :msg-list="findTypeObj(optionsList, 3)" />
<phone-traffic v-if="findTypeIsExist(4)" :data="findTypeObj(optionsList, 4)" />
<short-msg v-if="findTypeIsExist(5)" :data="findTypeObj(optionsList, 5)" />
<wechat v-if="findTypeIsExist(6) || findTypeIsExist(7)" :custom-service-data="findTypeObj(optionsList, 6)" :batch-data="findTypeObj(optionsList, 7)" />
</div>
</template>
<script>
......@@ -16,7 +19,10 @@ import marketList from '@/views/ecm/touch-components/market-list.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
import cardProfit from '@/views/ecm/touch-components/card/card-profit.vue';
import batchSend from '@/views/ecm/touch-components/batch-send/index.vue';
import { ecmTouchEffectTable, ecmPlanTouchConfig, getCardLeads, getCardLeadsList } from '@/service/api/ecmApi.js';
import phoneTraffic from '@/views/ecm/touch-components/phone-traffic/index.vue';
import shortMsg from '@/views/ecm/touch-components/short-msg/index.vue';
import wechat from '@/views/ecm/touch-components/wechat/index.vue';
import { ecmTouchEffectTable, ecmPlanTouchConfig, getCardLeads, getCardLeadsList, ecmTouchTypeTableList } from '@/service/api/ecmApi.js';
export default {
name: 'ecm',
data() {
......@@ -29,19 +35,24 @@ export default {
batchNum: 0, // 批次数量
batchTime: '', // 批次时间
cardLead: {},
cardLeadTable: []
cardLeadTable: [],
optionsList: [] //type 1 群发任务、2 群发失败-话务、3 群发失败-短信、4 话务、5 短信、6 微信-触点 、7 微信-文本、图文、图片
};
},
components: {
marketList,
touchCharts,
cardProfit,
batchSend
batchSend,
phoneTraffic,
shortMsg,
wechat
},
mounted() {
this.ecmPlanId = this.$route.params.id;
let planName = this.$route.query.name;
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果` }]); // eslint-disable-line
this.getOtherList();
this.getMarketList();
this.getTouchConfig();
this.getCardLeadsSum();
......@@ -59,7 +70,10 @@ export default {
// 获取计划整体效果的总数据
getMarketList() {
ecmTouchEffectTable({ ecmPlanId: this.ecmPlanId }).then(res => {
if (!res.result || !res.result.length) res.result = [{ isSales: 1 }, { isSales: 0 }];
if (!res.result || !res.result.length) {
this.marketListData = [{ isSales: 1 }, { isSales: 0 }];
return;
}
this.marketListData = res.result.map(item => {
item.touchRate = item.touchMbrNum * 1 && item.planMbrNum * 1 ? ((item.touchMbrNum / item.planMbrNum) * 100).toFixed(2) : 0;
item.transformRate = item.touchMbrNum * 1 && item.planMbrNum * 1 ? ((item.convMbrNum / item.planMbrNum) * 100).toFixed(2) : 0;
......@@ -70,6 +84,7 @@ export default {
// 获取配置信息
getTouchConfig() {
ecmPlanTouchConfig({ ecmPlanId: this.ecmPlanId }).then(res => {
if (!res.result) return;
this.batchNum = res.result.times ? res.result.times : 0;
this.batchTime = res.result.lastTime ? new Date(parseInt(res.result.lastTime)).toLocaleString('zh', { hour12: false }).replace(/[\/]/g, '-') : '--';
let analyseJson = JSON.parse(res.result.analyseJson);
......@@ -96,14 +111,24 @@ export default {
getCardLeadsList({ ecmPlanId: this.$route.params.id }).then(res => {
this.cardLeadTable = res.result || [];
});
},
// 获取其他所有模块数据
getOtherList() {
ecmTouchTypeTableList({ ecmPlanId: this.ecmPlanId }).then(res => {
this.optionsList = res.result || [];
});
}
},
computed: {
formatterNum() {
return val => (!val ? '0' : parseInt(val).toLocaleString());
findTypeObj() {
return (arr, type) => {
return arr.find(el => el.type == type); // {} 或 undefined
};
},
formatterRate() {
return val => (!val ? '0.00%' : parseFloat(val).toFixed(2) + '%');
findTypeIsExist() {
return type => {
return this.findTypeObj(this.optionsList, type);
};
}
}
};
......
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