Skip to content

M
marketing
Commit 9f35121a by liuchenxi
Options

update: 触达效果

parent 668543ca
Showing with 216 additions and 33 deletions
src/components/layout/index.vue
......@@ -11,7 +11,7 @@
</el-breadcrumb>
<h3>
<div>
<span class="content-title">{{ contentTitle }}<span class="title_tip">每日上午更新昨日数据</span></span>
<span class="content-title">{{ contentTitle }}<span v-if="contentTitle == '触达效果'" class="title_tip">每日上午更新昨日数据</span></span>
<div v-html="layoutTips" class="layout--tips--wrap"></div>
</div>
<div v-if="showDescription" class="intro_wrap"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro" @click="() => (drawer = true)">指标说明</span></div>
......@@ -224,8 +224,8 @@ export default {
display: flex;
align-items: center;
.title_tip {
font-size: 16px;
color: #606266;
font-size: 14px;
color: #909399;
margin-left: 10px;
}
}
......
src/views/ecm/touch-clue.vue
......@@ -25,8 +25,12 @@
</div>
<div class="map_area">
<div class="top">
<span class="txt" v-if="type == '计划整体'">区域详情转化效果</span>
<span v-else></span>
<span class="txt" v-if="type == '计划整体'">
区域详情转化效果
</span>
<span v-else>
<span class="uncredited_num" v-if="showUncreditedNum">（另外有{{ uncreditedNum }}名顾客没有归属门店，无法下发任务。）</span>
</span>
<div>
<el-checkbox label="展开所选区域下门店明细" v-model="expendStoreFlag" @change="changeExpendFlag" class="expend_store"></el-checkbox>
<el-button type="primary" class="btn" @click="cdkeyExport"><i class="iconfont icon-icon_yunxiazai" style="marginRight:6px;fontSize:14px"></i>导出</el-button>
......@@ -104,7 +108,8 @@ export default {
exportDialog: false,
excelUrl: '', // 下载数据的地址
params: {}, // 导出数据传递的参数
expendStoreFlag: false // 导出分组下所有得门店数据
expendStoreFlag: false, // 导出分组下所有得门店数据
uncreditedNum: 0 // 无归属门店会员数量
};
},
mounted() {
......@@ -170,11 +175,13 @@ export default {
data.touchRate = data.touchMbrNum * 1 && data.planMbrNum * 1 ? ((data.touchMbrNum / data.planMbrNum) * 100).toFixed(2) : 0;
data.transformRate = data.convMbrNum * 1 && data.touchMbrNum * 1 ? ((data.convMbrNum / data.touchMbrNum) * 100).toFixed(2) : 0;
this.dynamicParams = [{ ...data }];
this.uncreditedNum = this.dynamicParams[0].noGroupNum;
} else {
if (this.type == '群发') {
data.massExecuteNum = data.taskExecuteNum;
}
this.dynamicParams = data;
this.uncreditedNum = this.dynamicParams.noGroupNum;
}
});
},
......@@ -213,7 +220,7 @@ export default {
formatter(row) {
if (!row.groupName) return '--';
else if (row.groupName == '-1') return '【无归属门店】';
else if (row.groupName == '区域合计' || row.groupId == '-1') return row.groupName;
else if (row.groupName == '区域合计' || row.groupId == '-1') return row.groupName; // row.groupId == '-1' 是最后一层
return `<span style="color:#1890FF;cursor:pointer;" data-type="groupName">${row.groupName}</span>`;
}
}
......@@ -321,8 +328,8 @@ export default {
return;
}
this.tableList = res.result.result.map((el, index) => {
el.customrPrice = el.convSalesAmt / el.convMbrNum;
el.relatedRate = el.convGoodsCnt && el.convOrderCnt ? (el.convGoodsCnt / el.convOrderCnt).toFixed(2) : '--';
el.customrPrice = el.convSalesAmt * 1 && el.convMbrNum * 1 ? (el.convSalesAmt / el.convMbrNum).toFixed(2) : '--';
el.relatedRate = el.convGoodsCnt * 1 && el.convOrderCnt * 1 ? (el.convGoodsCnt / el.convOrderCnt).toFixed(2) : '--';
if (el.groupName == '区域合计') {
el.index = '';
return el;
......@@ -441,6 +448,9 @@ export default {
'text-align': 'center',
'line-height': '16px'
};
},
showUncreditedNum() {
return this.uncreditedNum > 0 && this.listTabsIndex == 1 && this.level == 1;
}
}
};
......@@ -469,7 +479,8 @@ export default {
font-weight: 600;
height: 22px;
color: #303133;
line-height: 22px;
display: flex;
align-items: center;
}
.area_content {
display: flex;
......@@ -570,6 +581,10 @@ export default {
}
}
}
.uncredited_num {
color: #909399;
font-size: 14px;
}
}
.area {
margin-top: 0 !important;
......
src/views/ecm/touch-components/batch-send/index.vue
......@@ -6,14 +6,14 @@
<img :src="require('@/assets/img/icon-send.png')" class="img" />
<h2>群发任务</h2>
</div>
<el-link type="primary" :underline="false" style="color: #1890ff" @click="$emit('toClue', '群发')">查看详情<i class="el-icon-arrow-right" style="margin-left: 10px"></i></el-link>
<div class="detail" @click="$emit('toClue', '群发')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</div>
</div>
<batch-send-sum v-if="taskList" :data="taskList" />
<div class="wrap" v-if="telTrafficList || msgList">
<div v-if="telTrafficList">
<div class="flex_between" style="margin-bottom: 12px;padding-right: 20px">
<h3>群发失败-话务</h3>
<el-link type="primary" :underline="false" style="color: #1890ff" @click="$emit('toClue', '群发转话务')">查看详情<i class="el-icon-arrow-right" style="margin-left: 10px"></i></el-link>
<div class="detail" @click="$emit('toClue', '群发转话务')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</div>
</div>
<div style="padding: 0px 20px"><batch-fail-phone :data="telTrafficList" /></div>
</div>
......@@ -57,9 +57,9 @@ export default {
margin-bottom: 10px !important;
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
height: 32px;
margin-bottom: 10px;
line-height: 22px;
line-height: 32px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
......@@ -94,5 +94,19 @@ export default {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
}
.detail {
padding: 0 10px;
background: rgba(24, 144, 255, 0.1);
border-radius: 4px;
height: 32px;
color: #1890ff;
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
i {
margin-right: 2px;
}
}
}
</style>
src/views/ecm/touch-components/description.vue
......@@ -80,7 +80,7 @@
<span class="squre"></span>
<div class="text">
<p>转化收益</p>
<p>当前智能营销实际触达顾客中，在收益有效期内消费的顾客应收订单金额。只计销售单，不看退货单和换货单。</p>
<p>当前智能营销实际触达顾客中，在收益有效期内消费的顾客实付订单金额。只计销售单，不看退货单和换货单。</p>
</div>
</li>
<li>
......
src/views/ecm/touch-components/phone-traffic/index.vue
......@@ -5,7 +5,7 @@
<img :src="require('@/assets/img/icon-phone.png')" class="img" />
<h2>话务</h2>
</div>
<el-link type="primary" :underline="false" style="color: #1890ff" @click="$emit('toClue', '话务')">查看详情<i class="el-icon-arrow-right" style="margin-left: 10px"></i></el-link>
<div class="detail" @click="$emit('toClue', '话务')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</div>
</div>
<phone-traffic-sum v-bind="$attrs" />
</div>
......@@ -25,9 +25,9 @@ export default {
padding: 22px 20px 30px !important;
font-family: PingFangSC-Regular, PingFang SC;
.title {
height: 22px;
margin-bottom: 20px;
line-height: 22px;
height: 32px;
margin-bottom: 10px;
line-height: 32px;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
......@@ -44,5 +44,19 @@ export default {
justify-content: space-between;
align-items: center;
}
.detail {
padding: 0 10px;
background: rgba(24, 144, 255, 0.1);
border-radius: 4px;
height: 32px;
color: #1890ff;
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
i {
margin-right: 2px;
}
}
}
</style>
src/views/ecm/touch-components/touch-charts.vue
......@@ -36,8 +36,8 @@ export default {
const chart = new G2.Chart({
container: 'draw_g2',
forceFit: true,
height: 376,
padding: [55, 90, 46, 68]
height: 385,
padding: [55, 90, 60, 68]
});
chart.source(this.chartData);
chart.tooltip({
......@@ -45,8 +45,8 @@ export default {
shared: true
});
chart.legend({
position: 'top',
offsetY: -20
position: 'bottom',
offsetY: 8
});
chart.axis('value', {
grid: {
......@@ -199,6 +199,7 @@ export default {
</script>
<style lang="scss" scoped>
.draw {
margin-bottom: 30px;
.title {
padding-left: 12px;
font-size: 16px;
......@@ -209,7 +210,7 @@ export default {
margin-bottom: 36px;
}
#draw_g2 {
height: 376px;
height: 385px;
margin: 0 auto;
position: relative;
font-size: 12px;
......
src/views/ecm/touch-effect.vue
......@@ -3,7 +3,7 @@
<div class="dm-wrap effect">
<div class="title">
<h2>计划整体效果</h2>
<el-link type="primary" :underline="false" class="detail" @click="toClue('计划整体')"><i class="el-icon-arrow-right"></i>查看详情</el-link>
<div class="detail" @click="toClue('计划整体')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</div>
</div>
<touch-charts :type="0" :createTime="$route.query.createTime" />
<market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" @toClue="toClue" />
......@@ -181,12 +181,15 @@ export default {
}
}
.detail {
padding: 6px 10px;
padding: 0 10px;
background: rgba(24, 144, 255, 0.1);
border-radius: 4px;
line-height: 20px;
height: 32px;
color: #1890ff;
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
i {
margin-right: 2px;
}
......
static/fonts/demo_index.html
......@@ -55,6 +55,30 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe892;</span>
<div class="name">查看详情</div>
<div class="code-name">&amp;#xe892;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f8;</span>
<div class="name">教程</div>
<div class="code-name">&amp;#xe6f8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe675;</span>
<div class="name">操作日志</div>
<div class="code-name">&amp;#xe675;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe671;</span>
<div class="name">确认 圆 正确 对勾 提交 成功 完成 </div>
<div class="code-name">&amp;#xe671;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66d;</span>
<div class="name">支付宝</div>
<div class="code-name">&amp;#xe66d;</div>
......@@ -1548,9 +1572,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1629873400222') format('woff2'),
url('iconfont.woff?t=1629873400222') format('woff'),
url('iconfont.ttf?t=1629873400222') format('truetype');
src: url('iconfont.woff2?t=1634537158782') format('woff2'),
url('iconfont.woff?t=1634537158782') format('woff'),
url('iconfont.ttf?t=1634537158782') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -1577,6 +1601,42 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-chakanxiangqing"></span>
<div class="name">
查看详情
</div>
<div class="code-name">.icon-chakanxiangqing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaocheng"></span>
<div class="name">
教程
</div>
<div class="code-name">.icon-jiaocheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caozuorizhi"></span>
<div class="name">
操作日志
</div>
<div class="code-name">.icon-caozuorizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-querenyuanzhengqueduigoutijiaochenggongwancheng"></span>
<div class="name">
确认 圆 正确 对勾 提交 成功 完成
</div>
<div class="code-name">.icon-querenyuanzhengqueduigoutijiaochenggongwancheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-umidd17"></span>
<div class="name">
支付宝
......@@ -3819,6 +3879,38 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chakanxiangqing"></use>
</svg>
<div class="name">查看详情</div>
<div class="code-name">#icon-chakanxiangqing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaocheng"></use>
</svg>
<div class="name">教程</div>
<div class="code-name">#icon-jiaocheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caozuorizhi"></use>
</svg>
<div class="name">操作日志</div>
<div class="code-name">#icon-caozuorizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-querenyuanzhengqueduigoutijiaochenggongwancheng"></use>
</svg>
<div class="name">确认 圆 正确 对勾 提交 成功 完成 </div>
<div class="code-name">#icon-querenyuanzhengqueduigoutijiaochenggongwancheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-umidd17"></use>
</svg>
<div class="name">支付宝</div>
......
static/fonts/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 688955 */
src: url('iconfont.woff2?t=1629873400222') format('woff2'),
url('iconfont.woff?t=1629873400222') format('woff'),
url('iconfont.ttf?t=1629873400222') format('truetype');
src: url('iconfont.woff2?t=1634537158782') format('woff2'),
url('iconfont.woff?t=1634537158782') format('woff'),
url('iconfont.ttf?t=1634537158782') format('truetype');
}
.iconfont {
......@@ -13,6 +13,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-chakanxiangqing:before {
content: "\e892";
}
.icon-jiaocheng:before {
content: "\e6f8";
}
.icon-caozuorizhi:before {
content: "\e675";
}
.icon-querenyuanzhengqueduigoutijiaochenggongwancheng:before {
content: "\e671";
}
.icon-umidd17:before {
content: "\e66d";
}
......
static/fonts/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.json
......@@ -6,6 +6,34 @@
"description": "",
"glyphs": [
{
"icon_id": "9002691",
"name": "查看详情",
"font_class": "chakanxiangqing",
"unicode": "e892",
"unicode_decimal": 59538
},
{
"icon_id": "22607678",
"name": "教程",
"font_class": "jiaocheng",
"unicode": "e6f8",
"unicode_decimal": 59128
},
{
"icon_id": "10605659",
"name": "操作日志",
"font_class": "caozuorizhi",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "23089611",
"name": "确认 圆 正确 对勾 提交 成功 完成 ",
"font_class": "querenyuanzhengqueduigoutijiaochenggongwancheng",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "18516314",
"name": "支付宝",
"font_class": "umidd17",
......
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