Skip to content

P
pica-risk-admin
提交 42890d80 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

添加路径分析页面

上级 2325cf25
隐藏空白字符变更
内嵌 并排
正在显示 包含 305 行增加 和 1 行删除
src/router/index.js
浏览文件 @ 42890d80
...@@ -31,13 +31,21 @@ export default new Router({ ...@@ -31,13 +31,21 @@ export default new Router({
path: '/data-view', path: '/data-view',
component: resolve => require(['../views/sensitive-control/data-view.vue'], resolve) component: resolve => require(['../views/sensitive-control/data-view.vue'], resolve)
}, },
{ // 用户路径分析
path: '/user-path',
component: resolve => require(['../views/user-path/funnel.vue'], resolve)
},
{ // 用户路径分析--新增转化漏斗
path: '/add-funnel',
component: resolve => require(['../views/user-path/add-funnel.vue'], resolve)
},
] ]
}, },
{ // 短信中的 数据查看页面 { // 短信中的 数据查看页面
path: '/data-view-message', path: '/data-view-message',
component: resolve => require(['../views/sensitive-control/data-view-message.vue'], resolve) component: resolve => require(['../views/sensitive-control/data-view-message.vue'], resolve)
}, },
] ]
}) })
src/views/user-path/add-funnel.vue 0 → 100644
浏览文件 @ 42890d80
<template>
<div class="add-funnel-container">
<el-breadcrumb separator="/" class="add-title">
<el-breadcrumb-item :to="{ path: '/user-path' }">漏斗分析</el-breadcrumb-item>
<el-breadcrumb-item><a href="/add-funnel">新增转化漏斗</a></el-breadcrumb-item>
</el-breadcrumb>
<div class="add-content">
<div class="con">
<el-row :gutter="30" class="row save" type="flex" style="margin-bottom:0;">
<el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
<el-col :span="21">
<el-form-item label="漏斗名称">
<el-input v-model="searchParam.name" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="saveAddAndEdit">保存</el-button>
</el-col>
</el-form>
</el-row>
<div class="add-step">
<p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p>
</div>
<div class="step-content">
<div v-for="(item,index) in stepArray" :key="index">
<span>步骤{{index + 1}}</span>
<el-form
ref="form"
class="step-form"
:model="item"
label-suffix=":"
style="width:100%;">
<el-col :span="11">
<el-form-item label="步骤名称">
<el-input v-model="item.name" maxlength="20" placeholder="请输入步骤名称" style="width:200px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="触发事件">
<el-select v-model="item.event" placeholder="请选择用户触发事件" style="width:200px">
<el-option
v-for="(eItem,eIndex) in eventSelect"
:key="eIndex"
:label="eItem.label"
:value="eItem.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
<i v-if="index == 0" class="el-icon-remove-outline"></i>
<i v-if="index > 0" class="el-icon-remove-outline"></i>
<i class="el-icon-circle-plus-outline"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchParam: {
name: ''
},
stepArray: [
{
name: '',
event: ''
}
],
eventSelect: []
}
},
methods: {
saveAddAndEdit() {
}
}
}
</script>
<style lang="less" scoped>
.add-funnel-container {
margin: -20px -40px;
.add-title {
height: 60px;
line-height: 60px;
padding-left: 40px;
}
.add-content {
background: #F2F2F4;
padding: 20px 0 0 20px;
height: 85vh;
.con {
height: 82vh;
background: #fff;
.save {
padding: 20px 20px 0;
margin: 0 !important;
border-bottom: 1px solid #EDEDEE;
}
.add-step {
padding: 30px 40px 0;
font-size: 14px;
color: #4D4C4F;
}
.step-content {
overflow: hidden;
margin: 30px 40px 0px;
border: 1px solid #EDEDEE;
span {
float: left;
font-size: 14px;
color: #58ADE8;
padding: 5px;
margin: 20px 0 0 20px;
border: 1px solid #58ADE8;
border-radius: 3px;
}
.step-form {
width: 80% !important;
padding: 15px 0 0 30px;
}
}
i.disable {
color: #CFCED0;
}
}
}
}
</style>
\ No newline at end of file
src/views/user-path/funnel.vue 0 → 100644
浏览文件 @ 42890d80
<template>
<div class="funnel-container">
<div class="funnel-title">漏斗分析</div>
<div class="funnel-content">
<div class="con">
<el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
<el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
<el-col :span="21">
<el-form-item label="漏斗名称">
<el-input v-model="searchParam.name" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="search">搜索</el-button>
</el-col>
</el-form>
</el-row>
<div class="search-table-con">
<el-row :gutter="10" class="row create-button" style="margin-right:0;">
<el-button type="primary" size="small" @click="addData">+新增转化漏斗</el-button>
</el-row>
<!-- 表格 -->
<el-table
class="search-table"
:data="tableData"
style="width: 100%">
<el-table-column prop="name" label="漏斗名称" min-width="140" align="center"></el-table-column>
<el-table-column prop="begin" label="起始步骤" min-width="140" align="center"></el-table-column>
<el-table-column prop="target" label="转化目标" min-width="150" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="visitData(scope.row)">查看数据</el-button>
<el-button type="primary" size="small" @click="editColumn(scope.row)">编辑</el-button>
<el-button type="primary" size="small" @click="deleteConfirm(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows">
</el-pagination>
</div>
<!-- 删除确认框 -->
<el-dialog
class="delete-dialog"
:visible.sync="dialogVisible"
width="30%">
<span><i class="el-icon-circle-close" style="color: red"></i>确认要删除这条转化漏斗吗？</span>
<span class="tip">删除该转化漏斗数据将不会保留</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchParam: {
name: '',
pageNo: 1,
pageSize: 15
},
totalRows: 0,
tableData: [
{name: '测试', begin: '点击微专业', target: '点击播放'}
],
dialogVisible: false
}
},
methods: {
search() {
},
// 新增漏斗
addData() {
this.$router.push({ path: 'add-funnel' })
},
// 查看数据
visitData() {
},
// 编辑
editColumn() {
},
// 删除确认框
deleteConfirm() {
this.dialogVisible = true;
},
handleSizeChange(value) {
this.searchParam.pageSize = value;
this.search();
},
handleCurrentChange(value) {
this.searchParam.pageNo = value;
this.search();
}
}
}
</script>
<style lang="less" scoped>
.funnel-container {
margin: -20px -40px;
.funnel-title {
height: 60px;
line-height: 60px;
padding-left: 40px;
}
.funnel-content {
background: #F2F2F4;
padding: 20px 0 0 20px;
height: 85vh;
.con {
height: 82vh;
background: #fff;
.search {
padding: 20px 20px 0;
margin: 0 !important;
border-bottom: 1px solid #EDEDEE;
}
.search-table-con {
padding: 0 40px;
.create-button {
margin-top: 20px;
}
}
.delete-dialog {
span{
display: block;
font-size: 16px;
font-weight: 700;
margin-left: 40px;
i {
display: inline-block;
font-size: 20px;
color: red;
margin-right: 10px;
}
}
span.tip {
font-size: 14px;
font-weight: 400;
color: #aaa;
margin: 15px 0 0 70px;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或