Skip to content

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

添加数据分析页面

上级 42890d80
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 502 行增加 和 52 行删除
package-lock.json
浏览文件 @ fc396ea6
...@@ -2767,6 +2767,14 @@ ...@@ -2767,6 +2767,14 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"echarts": {
"version": "4.9.0",
"resolved": "http://192.168.110.93:4873/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
"requires": {
"zrender": "4.3.2"
}
},
"editorconfig": { "editorconfig": {
"version": "0.13.3", "version": "0.13.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz", "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz",
...@@ -8766,6 +8774,11 @@ ...@@ -8766,6 +8774,11 @@
"dev": true "dev": true
} }
} }
},
"zrender": {
"version": "4.3.2",
"resolved": "http://192.168.110.93:4873/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
} }
} }
} }
package.json
浏览文件 @ fc396ea6
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-polyfill": "^6.23.0", "babel-polyfill": "^6.23.0",
"echarts": "^4.9.0",
"element-ui": "^2.7.2", "element-ui": "^2.7.2",
"vue": "^2.3.2", "vue": "^2.3.2",
"vue-core-image-upload": "2.1.11", "vue-core-image-upload": "2.1.11",
......
src/main.js
浏览文件 @ fc396ea6
...@@ -5,9 +5,10 @@ import router from './router'; ...@@ -5,9 +5,10 @@ import router from './router';
import store from './vuex/store' import store from './vuex/store'
import axios from 'axios'; import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import echarts from 'echarts';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题 import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
import {getAddress, loadCommonFilter} from './common/env' import {getAddress, loadCommonFilter} from './common/env'
import vueFilter from './common/filter' import vueFilter from './common/filter';
//加载环境变量 //加载环境变量
...@@ -15,6 +16,7 @@ getAddress(); ...@@ -15,6 +16,7 @@ getAddress();
loadCommonFilter(); loadCommonFilter();
//加载elementUi //加载elementUi
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.prototype.$echarts = echarts;
// Vue.use(vueXlsxTable, {rABS: false}) // Vue.use(vueXlsxTable, {rABS: false})
if (localStorage.getItem("token")) { if (localStorage.getItem("token")) {
......
src/router/index.js
浏览文件 @ fc396ea6
...@@ -39,6 +39,10 @@ export default new Router({ ...@@ -39,6 +39,10 @@ export default new Router({
path: '/add-funnel', path: '/add-funnel',
component: resolve => require(['../views/user-path/add-funnel.vue'], resolve) component: resolve => require(['../views/user-path/add-funnel.vue'], resolve)
}, },
{ // 用户路径分析--查看数据
path: '/path-data',
component: resolve => require(['../views/user-path/funnel-data.vue'], resolve)
},
] ]
}, },
{ // 短信中的 数据查看页面 { // 短信中的 数据查看页面
......
src/views/user-path/add-funnel.vue
浏览文件 @ fc396ea6
...@@ -21,37 +21,35 @@ ...@@ -21,37 +21,35 @@
<div class="add-step"> <div class="add-step">
<p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p> <p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p>
</div> </div>
<div class="step-content"> <div class="step-content" v-for="(item,index) in stepArray" :key="index">
<div v-for="(item,index) in stepArray" :key="index"> <span>步骤{{index + 1}}</span>
<span>步骤{{index + 1}}</span> <el-form
<el-form ref="form"
ref="form" class="step-form"
class="step-form" :model="item"
:model="item" label-suffix=":"
label-suffix=":" style="width:100%;">
style="width:100%;"> <el-col :span="11">
<el-col :span="11"> <el-form-item label="步骤名称">
<el-form-item label="步骤名称"> <el-input v-model="item.name" maxlength="20" placeholder="请输入步骤名称" style="width:200px;"></el-input>
<el-input v-model="item.name" maxlength="20" placeholder="请输入步骤名称" style="width:200px;"></el-input> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="11">
<el-col :span="11"> <el-form-item label="触发事件">
<el-form-item label="触发事件"> <el-select v-model="item.event" placeholder="请选择用户触发事件" style="width:200px">
<el-select v-model="item.event" placeholder="请选择用户触发事件" style="width:200px"> <el-option
<el-option v-for="(eItem,eIndex) in eventSelect"
v-for="(eItem,eIndex) in eventSelect" :key="eIndex"
:key="eIndex" :label="eItem.label"
:label="eItem.label" :value="eItem.value">
:value="eItem.value"> </el-option>
</el-option> </el-select>
</el-select> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-form>
</el-form> <i v-if="index == 0" class="el-icon-remove-outline disable-step"></i>
<i v-if="index == 0" class="el-icon-remove-outline"></i> <i v-if="index > 0" class="el-icon-remove-outline delete-step" @click="deleteSteps(index)"></i>
<i v-if="index > 0" class="el-icon-remove-outline"></i> <i class="el-icon-circle-plus-outline add-step" @click="addSteps"></i>
<i class="el-icon-circle-plus-outline"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -74,8 +72,20 @@ export default { ...@@ -74,8 +72,20 @@ export default {
} }
}, },
methods: { methods: {
// 保存
saveAddAndEdit() { saveAddAndEdit() {
},
// 删除步骤
deleteSteps(i) {
this.stepArray.splice(i,1);
},
// 增加步骤
addSteps() {
this.stepArray.push({
name: '',
event: ''
});
} }
} }
} }
...@@ -114,7 +124,7 @@ export default { ...@@ -114,7 +124,7 @@ export default {
font-size: 14px; font-size: 14px;
color: #58ADE8; color: #58ADE8;
padding: 5px; padding: 5px;
margin: 20px 0 0 20px; margin: 20px 20px 0 20px;
border: 1px solid #58ADE8; border: 1px solid #58ADE8;
border-radius: 3px; border-radius: 3px;
} }
...@@ -122,9 +132,19 @@ export default { ...@@ -122,9 +132,19 @@ export default {
width: 80% !important; width: 80% !important;
padding: 15px 0 0 30px; padding: 15px 0 0 30px;
} }
} i {
i.disable { padding: 10px 20px;
color: #CFCED0; font-size: 20px;
}
.disable-step {
color: #D2D2D3;
}
.delete-step {
color: #58ADE8;
}
.add-step {
color: #58ADE8;
}
} }
} }
} }
......
src/views/user-path/funnel-data.vue 0 → 100644
浏览文件 @ fc396ea6
此差异已折叠。
src/views/user-path/funnel.vue
浏览文件 @ fc396ea6
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;"> <el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
<el-col :span="21"> <el-col :span="21">
<el-form-item label="漏斗名称"> <el-form-item label="漏斗名称">
<el-input v-model="searchParam.name" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input> <el-input v-model="searchParam.searchName" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3" style="padding:0;text-align:right;padding-right:15px;"> <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
...@@ -25,13 +25,13 @@ ...@@ -25,13 +25,13 @@
:data="tableData" :data="tableData"
style="width: 100%"> style="width: 100%">
<el-table-column prop="name" label="漏斗名称" min-width="140" align="center"></el-table-column> <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="stepStartName" 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 prop="stepEndName" label="转化目标" min-width="150" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200"> <el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="primary" size="small" @click="visitData(scope.row)">查看数据</el-button> <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="editColumn(scope.row)">编辑</el-button>
<el-button type="primary" size="small" @click="deleteConfirm(scope.row)">删除</el-button> <el-button type="danger" size="small" @click="deleteConfirm(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<span class="tip">删除该转化漏斗数据将不会保留</span> <span class="tip">删除该转化漏斗数据将不会保留</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click="confirm">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
...@@ -66,40 +66,77 @@ ...@@ -66,40 +66,77 @@
</div> </div>
</template> </template>
<script> <script>
import { openLoading, closeLoading } from "../../common/utils";
export default { export default {
data() { data() {
return { return {
searchParam: { searchParam: {
name: '', searchName: '',
pageNo: 1, pageNo: 1,
pageSize: 15 pageSize: 15
}, },
totalRows: 0, totalRows: 0,
tableData: [ tableData: [],
{name: '测试', begin: '点击微专业', target: '点击播放'} dialogVisible: false,
], deleteId: ''
dialogVisible: false
} }
}, },
mounted() {
this.search();
},
methods: { methods: {
// 封装一下请求通用的方法
getData(type, url, req, callback) {
openLoading(this);
this.$axios[type](localStorage.getItem("lectureUrl") + url, req)
.then(res => {
closeLoading(this);
let data = res.data;
if (data.code == "000000") {
if (callback) callback(data);
} else {
this.$message.error(data.message);
}
})
},
search() { search() {
let req = this.searchParam;
this.getData(
"get", `/session/funnel/list?searchName=${this.searchParam.searchName}&pageNo=${this.searchParam.pageNo}&pageSize=${this.searchParam.pageSize}`, {},
res => {
this.tableData = res.data.data;
this.totalRows = res.data.totalRows;
}
);
}, },
// 新增漏斗 // 新增漏斗
addData() { addData() {
this.$router.push({ path: 'add-funnel' }) this.$router.push({ path: 'add-funnel' });
}, },
// 查看数据 // 查看数据
visitData() { visitData() {
this.$router.push({ path: 'path-data' });
}, },
// 编辑 // 编辑
editColumn() { editColumn(row) {
this.$router.push({ path: 'add-funnel' ,query: {id: row.id}});
}, },
// 删除确认框 // 删除确认框
deleteConfirm() { deleteConfirm(row) {
this.dialogVisible = true; this.dialogVisible = true;
this.deleteId = row.id;
},
confirm() {
this.getData(
"delete", `/session/funnel/remove/${this.deleteId}`, {},
res => {
if(res.code == '000000') {
this.dialogVisible = false;
this.$message.success('删除成功');
this.search();
}
}
);
}, },
handleSizeChange(value) { handleSizeChange(value) {
this.searchParam.pageSize = value; this.searchParam.pageSize = value;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或