Skip to content

M
marketing
Commit 3d2d36f5 by caoyanzhi
Options

update: ai营销

parent 1b7cf2a0
Showing with 119 additions and 95 deletions
src/views/ai/ai-data-detail.vue
......@@ -3,7 +3,7 @@
<dm-sub-title style="margin-bottom: 5px">客户明细</dm-sub-title>
<div v-if="analyseFlag" class="page-tip">活动转化金额每天更新 1 次</div>
<el-input v-model="search.search" @change="handleCurrentChange(1)" type="text" placeholder="请输入姓名/昵称/手机号/会员卡号" prefix-icon="el-icon-search" clearable class="search-bar"></el-input>
<el-table :data="tableData" v-loading="loading" tooltipEffect="light">
<el-table :data="tableData" v-loading="loading">
<el-table-column label="基本信息" min-width="200px" show-overflow-tooltip fixed="left">
<div slot-scope="{ row }" class="member-info">
<img class="member-logo" v-if="row.memberImage" :src="row.memberImage" alt="" />
......
src/views/ai/ai-data-report/conversion.vue
......@@ -29,14 +29,36 @@
<el-table-column label="ROI" prop="ROI" min-width="70" :formatter="(row, col, val) => (val == null ? '--' : `1:${val}`)"></el-table-column>
</el-table>
<div class="chart-box">
<div class="chart-member-count" id="chart-member-count">
<div class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
<div class="chart-member-count" v-if="funnelData.hasData">
<div class="funnel">
<div class="funnel-item plan-count">
<p class="item-label">营销人数</p>
<p class="item-value">{{ numFormat(funnelData.marketingNumber) }}</p>
</div>
<div class="funnel-item target-count">
<p class="item-label">触达人数</p>
<p class="item-value">{{ numFormat(funnelData.reachNumber) }}</p>
<div class="item-rate">
<p class="rate-label">触达率</p>
<p class="rate-value">{{ funnelData.reachRate }}</p>
</div>
</div>
<div class="funnel-item change-count">
<p class="item-label">转化人数</p>
<p class="item-value">{{ numFormat(funnelData.conversionNumber) }}</p>
<div class="item-rate">
<p class="rate-label">转化率</p>
<p class="rate-value">{{ funnelData.conversionRate }}</p>
</div>
</div>
</div>
</div>
<div v-else class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
</div>
<el-row :gutter="20" class="target-list">
<el-col :span="index == 0 ? 24 : 12" v-for="(el, index) in targetList" :key="index">
<target-group :data-list="el"></target-group>
......@@ -47,8 +69,6 @@
</template>
<script>
import G2 from '@antv/g2';
import DataSet from '@antv/data-set';
import { getPlanStatistics, getMemberCrowd, getComparativeData } from '@/service/api/aiApi.js';
import { numFormat } from '@/utils/index.js';
import TargetGroup from './target-group.vue';
......@@ -71,6 +91,9 @@ export default {
numFormat,
activityId: '',
planId: '',
funnelData: {
hasData: false
},
targetList: [
[
{
......@@ -176,81 +199,19 @@ export default {
});
});
if (targetData.marketingNumber == null && targetData.reachNumber == null && targetData.conversionNumber == null) {
return;
}
let data = [
{ action: '营销人数', label: '营销率', count: targetData.marketingNumber, rate: '' },
{ action: '触达人数', label: '触达率', count: targetData.reachNumber, rate: targetData.reachRate },
{ action: '转化人数', label: '转化率', count: targetData.conversionNumber, rate: targetData.conversionRate }
];
const totalCount = data.reduce((total, el) => (total += el.count), 0);
const dv = new DataSet.DataView().source(data);
dv.transform({
type: 'map',
callback(row) {
row.percent = row.count / totalCount;
return row;
}
});
data = dv.rows;
document.getElementById('chart-member-count').innerHTML = '';
const chart = new G2.Chart({
container: 'chart-member-count',
forceFit: true,
height: 224,
padding: [17, '30%', 0, '20%']
});
chart.source(data, {
percent: { nice: false }
});
chart.axis(false);
chart.legend(false);
chart.tooltip({ showTitle: false });
chart
.coord('rect')
.transpose()
.scale(1, -1);
chart
.intervalSymmetric()
.position('action*percent')
.shape('funnel')
.color('action', ['#2F54EB', '#597EF7', '#85A5FF'])
.label(
'label*rate',
(label, rate) => {
return rate ? label + '\n' + rate : '';
},
{
offset: 35,
labelLine: {
lineWidth: 1,
stroke: 'rgba(0, 0, 0, 0.15)'
}
}
)
.tooltip('action*count', (action, count) => {
return { name: action + ' ' + numFormat(count) };
});
data.forEach(obj => {
// 中间标签文本
chart.guide().text({
top: true,
position: {
action: obj.action,
percent: 'median'
},
content: obj.action + '\n' + numFormat(obj.count), // 显示的文本内容
style: {
fill: '#fff',
fontSize: '12',
textAlign: 'center',
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, .45)'
}
});
});
chart.render();
this.funnelData = {
hasData: targetData.marketingNumber != null || targetData.reachNumber != null || targetData.conversionNumber != null,
// 营销人数
marketingNumber: targetData.marketingNumber,
// 触达人数
reachNumber: targetData.reachNumber,
// 触达率
reachRate: targetData.reachRate,
// 转化人数
conversionNumber: targetData.conversionNumber,
// 转化率
conversionRate: targetData.conversionRate
};
});
},
getMemberCrowd() {
......@@ -399,17 +360,80 @@ export default {
min-height: 272px;
}
.chart-member-count {
text-align: center;
.no-data {
text-align: center;
color: #606266;
font-size: 14px;
.no-data-icon {
display: block;
width: 120px;
height: auto;
margin: 20px auto 0;
width: calc(50% - 100px);
margin-right: 100px;
.funnel {
margin: 16px auto 0;
width: 300px;
background-image: url('../../../assets/img/ai-chart.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
.funnel-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-right: 17px;
.item-label {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
.item-value {
margin-top: 4px;
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #ffffff;
line-height: 28px;
}
.item-rate {
position: absolute;
top: 0;
right: -16px;
z-index: 1;
transform: translate(100%, -50%);
.rate-label {
font-size: 14px;
font-weight: 400;
color: #606266;
line-height: 20px;
}
.rate-value {
margin-top: 4px;
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
}
.plan-count {
height: 75px;
}
.target-count {
height: 68px;
}
.change-count {
height: 69px;
}
}
}
.no-data {
width: 50%;
text-align: center;
color: #606266;
font-size: 14px;
transform: translateY(-40px);
.no-data-icon {
display: block;
width: 120px;
height: auto;
margin: 0 auto;
}
}
}
......
src/views/ai/manage.vue
......@@ -337,7 +337,7 @@ export default {
}
.temp-detail-list {
padding: 0 20px;
max-height: 50vh;
max-height: 616px;
overflow-y: auto;
}
}
......
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