Skip to content

M
marketing
Commit 44549b3d by caoyanzhi
Options

update: ui调整

parent 172e95d1
Showing with 93 additions and 58 deletions
src/views/ai/ai-data-detail.vue
<template>
<div class="data-detail">
<dm-sub-title style="margin-bottom: 5px">客户明细</dm-sub-title>
<div v-if="analyseFlag" class="page-tip">活动转化数据每天更新 1 次</div>
<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-column label="基本信息" min-width="200px" show-overflow-tooltip>
<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="" />
<img class="member-logo" v-else src="@/assets/img/head_default.png" alt="" />
......@@ -16,24 +16,24 @@
</div>
</div>
</el-table-column>
<el-table-column label="会员卡号" min-width="130px" prop="memberCard" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="会员卡号" min-width="130px" prop="memberCard" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="会员等级" min-width="90px" prop="memberGradeName" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="服务门店" min-width="190px" prop="mainStoreName" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="通话状态" min-width="80px" prop="aiStatus" show-overflow-tooltip :formatter="(row, col, val) => formatAiStatus(val)"></el-table-column>
<el-table-column label="通话状态" min-width="80px" prop="aiThirdStatus" show-overflow-tooltip :formatter="(row, col, val) => formatAiStatus(val)"></el-table-column>
<el-table-column label="通话时长" min-width="80px" prop="aiDurationSec" :formatter="(row, col, val) => (val > 0 ? `${val}s` : '0s')"></el-table-column>
<el-table-column label="意向标签" min-width="130px" prop="aiLabel" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column v-if="analyseFlag" label="活动转化金额(实付)" min-width="160px" prop="orderPayAmount" :formatter="(row, col, val) => (val == null ? '--' : val)"></el-table-column>
<el-table-column label="外呼时间" min-width="100px" prop="aiTime">
<template slot-scope="{ row }">
<div style="line-height: 20px" slot-scope="{ row }">
<p>{{ formatDateTimeByType(row.aiTime, 'yyyy-MM-dd') || '--' }}</p>
<p>{{ formatDateTimeByType(row.aiTime, 'HH:mm:ss') || '--' }}</p>
</template>
</div>
</el-table-column>
<el-table-column v-if="showSendTime" label="短信发送时间" min-width="110px" prop="smsSendTime">
<template slot-scope="{ row }">
<el-table-column v-if="showSendTime" label="短信发送时间" min-width="110px" prop="smsSendTime" fixed="right">
<div style="line-height: 20px" slot-scope="{ row }">
<p>{{ formatDateTimeByType(row.smsSendTime, 'yyyy-MM-dd') || '--' }}</p>
<p>{{ formatDateTimeByType(row.smsSendTime, 'HH:mm:ss') || '--' }}</p>
</template>
</div>
</el-table-column>
</el-table>
<dm-pagination v-if="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="search.pageNum" :page-size="search.pageSize" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"></dm-pagination>
......@@ -88,12 +88,24 @@ export default {
this.handleCurrentChange(1);
},
formatAiStatus(state) {
// "aiThirdStatus":5, //第三方：已完成通话状态 0:已接听,1:拒接,2:无法接通,3:外呼失败,4:空号,5:关机,6:占线,7:停机,8:未接,9:主叫欠费,10:呼损,11:黑名单,12:天盾拦截,22:线路盲区,23呼出拦截,25:无可用线路(可选线路为空、线路超频等)
const status = {
1: '已提交',
2: '已删除',
3: '已接通',
4: '线路问题',
5: '被叫问题'
0: '已接听',
1: '拒接',
2: '无法接通',
3: '外呼失败',
4: '空号',
5: '关机',
6: '占线',
7: '停机',
8: '未接',
9: '主叫欠费',
10: '呼损',
11: '黑名单',
12: '天盾拦截',
22: '线路盲区',
23: '呼出拦截',
25: '无可用线路' //(可选线路为空、线路超频等)
};
return status[state] || '--';
}
......
src/views/ai/ai-data-report.vue
......@@ -7,8 +7,7 @@
<div class="report-module">
<dm-sub-title title-align="space-between">
<div>
AI外呼数据
<span class="title-tip">(数据实时更新)</span>
AI外呼数据<span class="title-tip">(数据实时更新)</span>
<el-button class="check-detail" @click="toDetailPage">查看详情</el-button>
</div>
</dm-sub-title>
......@@ -17,8 +16,7 @@
<div class="report-module" v-if="flags.analyseFlag == 1">
<dm-sub-title title-align="space-between">
<div>
活动转化数据
<span class="title-tip">(数据每天更新 1 次)</span>
活动转化数据<span class="title-tip">(数据每天更新 1 次)</span>
<el-button class="check-detail" @click="toDetailPage">查看详情</el-button>
</div>
</dm-sub-title>
......@@ -68,7 +66,7 @@ export default {
margin-top: 16px;
}
.title-tip {
margin-left: 16px;
margin-left: 4px;
font-size: 12px;
font-weight: 400;
color: #606266;
......@@ -79,6 +77,9 @@ export default {
color: #2f54eb;
background: #ebeffe;
border: none;
&:hover {
background: #dee3fc;
}
}
}
}
......
src/views/ai/ai-data-report/activity-info.vue
......@@ -87,7 +87,7 @@ export default {
<style lang="scss" scoped>
.activity-info {
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
margin-top: 16px;
font-size: 14px;
......
src/views/ai/ai-data-report/ai-data.vue
......@@ -9,9 +9,12 @@
<el-col :span="8">
<div class="chart-title">意向标签</div>
<div class="chart-box" id="chart-tag">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
<div class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
</div>
</div>
</el-col>
<el-col :span="8">
......@@ -28,23 +31,31 @@
</el-tooltip>
</div>
<div class="chart-box" id="chart-record">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
<div class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
</div>
</div>
</el-col>
<el-col :span="8">
<div class="chart-title">通话时长</div>
<div class="chart-box">
<div id="chart-duration">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
<div class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
</div>
</div>
<div v-if="talkTimeData.length > 0">
<div class="talk-legend" v-for="el in talkTimeData" :key="el.color">
<i class="talk-legend-icon" :style="{ background: el.color }"></i>
<span class="talk-legend-label">{{ el.label }}</span>
<span class="talk-legend-label">
<i class="talk-legend-icon" :style="{ background: el.color }"></i>
{{ el.label }}
</span>
<span class="talk-legend-count">{{ numFormat(el.count) }}</span>
<span class="talk-legend-percent">{{ el.percent }}</span>
</div>
......@@ -110,7 +121,7 @@ export default {
],
[
{
label: 'A/B类客户意向',
label: 'A/B类客户意向数',
value: '',
key: 'customerIntentionsNumber',
type: 'number'
......@@ -411,18 +422,22 @@ export default {
.chart-box {
width: 100%;
height: 220px;
text-align: center;
.no-data-icon {
width: 80px;
height: auto;
margin-top: 20px;
.no-data {
text-align: center;
color: #606266;
font-size: 14px;
.no-data-icon {
display: block;
width: 120px;
height: auto;
margin: 20px auto 0;
}
}
.talk-legend {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
max-width: 400px;
font-size: 12px;
font-weight: 400;
color: #606266;
......@@ -430,22 +445,20 @@ export default {
+ .talk-legend {
margin-top: 10px;
}
.talk-legend-icon {
flex-shrink: 0;
margin-right: 10px;
width: 9px;
height: 9px;
border-radius: 9px;
}
.talk-legend-label {
width: 100%;
text-align: left;
.talk-legend-icon {
display: inline-block;
margin-right: 10px;
width: 9px;
height: 9px;
border-radius: 9px;
}
}
.talk-legend-label,
.talk-legend-count,
.talk-legend-percent {
width: 33.33%;
flex-shrink: 0;
width: 120px;
text-align: right;
}
}
}
......
src/views/ai/ai-data-report/conversion.vue
......@@ -30,9 +30,12 @@
</el-table>
<div class="chart-box">
<div class="chart-member-count" id="chart-member-count">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
<div class="no-data">
<svg aria-hidden="true" class="no-data-icon">
<use xlink:href="#icon-cp-no-data"></use>
</svg>
暂无数据
</div>
</div>
<el-row :gutter="20" class="target-list">
<el-col :span="index == 0 ? 24 : 12" v-for="(el, index) in targetList" :key="index">
......@@ -397,10 +400,16 @@ export default {
}
.chart-member-count {
text-align: center;
.no-data-icon {
width: 80px;
height: auto;
margin-top: 20px;
.no-data {
text-align: center;
color: #606266;
font-size: 14px;
.no-data-icon {
display: block;
width: 120px;
height: auto;
margin: 20px auto 0;
}
}
}
}
......
src/views/ai/ai-data-report/target-group.vue
......@@ -3,7 +3,7 @@
<div class="target" :style="{ width: `${100 / dataList.length}%` }" v-for="(el, index) in dataList" :key="index">
<div class="target-label">
{{ el.label }}
<el-tooltip v-if="el.tips" effect="light" placement="top" popper-class="target-tooltip">
<el-tooltip v-if="el.tips" placement="top" popper-class="target-tooltip">
<div slot="content" v-html="el.tips" style="max-width: 450px"></div>
<i class="iconfont icon-QuestionCircleOutlined target-label-icon"></i>
</el-tooltip>
......@@ -56,7 +56,7 @@ export default {
align-items: flex-end;
margin-top: 8px;
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-family: DIN Alternate-Bold, DIN Alternate;
font-weight: bold;
color: #303133;
line-height: 28px;
......
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