Skip to content

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

漏斗接口联调

上级 fc396ea6
隐藏空白字符变更
内嵌 并排
正在显示 包含 194 行增加 和 99 行删除
src/common/env.js
浏览文件 @ 5070f21b
...@@ -19,6 +19,7 @@ export const getAddress = () => { ...@@ -19,6 +19,7 @@ export const getAddress = () => {
let ipAddress = "https://" + window.location.host; let ipAddress = "https://" + window.location.host;
// let ipAddress = "http://localhost:8099"; // let ipAddress = "http://localhost:8099";
let env = getTestEnv(ipAddress); let env = getTestEnv(ipAddress);
let versionUrl = "";
let preViewUrl = "" let preViewUrl = ""
let qiniuImgUrl = ""; let qiniuImgUrl = "";
let qiniuFileUrl = ''; let qiniuFileUrl = '';
...@@ -41,6 +42,7 @@ export const getAddress = () => { ...@@ -41,6 +42,7 @@ export const getAddress = () => {
//本地 //本地
if (ipAddress.indexOf("localhost") > -1 || ipAddress.indexOf("10.177.10.118") > -1 || ipAddress.indexOf("test-kf") > -1) { if (ipAddress.indexOf("localhost") > -1 || ipAddress.indexOf("10.177.10.118") > -1 || ipAddress.indexOf("test-kf") > -1) {
ipAddress = "http://localhost:7070"; ipAddress = "http://localhost:7070";
versionUrl = 'https://dev-dev.yunqueyi.com';
preViewUrl = "http://localhost:9090/#/template"; preViewUrl = "http://localhost:9090/#/template";
qiniuImgUrl = "https://test1-file.yunqueyi.com"; qiniuImgUrl = "https://test1-file.yunqueyi.com";
resource_url = "https://test-file.yunqueyi.com"; resource_url = "https://test-file.yunqueyi.com";
...@@ -64,6 +66,7 @@ export const getAddress = () => { ...@@ -64,6 +66,7 @@ export const getAddress = () => {
qiniuFileUrl = "http://dev-sc.yunqueyi.com/contents/admin/qiniu/token1"; qiniuFileUrl = "http://dev-sc.yunqueyi.com/contents/admin/qiniu/token1";
qiniuResourceUrl = "https://test1-videos.yunqueyi.com"; qiniuResourceUrl = "https://test1-videos.yunqueyi.com";
} else if (isNotEmptyUtils(env)) {//测试test1 test2 uat } else if (isNotEmptyUtils(env)) {//测试test1 test2 uat
versionUrl = 'https://' + env + '-dev.yunqueyi.com';
preViewUrl = "https://" + env + "-phome.yunqueyi.com" + "/template/#/template" preViewUrl = "https://" + env + "-phome.yunqueyi.com" + "/template/#/template"
qiniuFileUrl = "https://" + env + "-sc.yunqueyi.com" + "/contents/admin/qiniu/token1"; qiniuFileUrl = "https://" + env + "-sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
qiniuImgUrl = "https://test1-file.yunqueyi.com"; qiniuImgUrl = "https://test1-file.yunqueyi.com";
...@@ -97,6 +100,7 @@ export const getAddress = () => { ...@@ -97,6 +100,7 @@ export const getAddress = () => {
lectureUrl = "https://" + env + "-sc.yunqueyi.com" lectureUrl = "https://" + env + "-sc.yunqueyi.com"
} }
} else {//生产环境 } else {//生产环境
versionUrl = 'https://dev.yunqueyi.com';
preViewUrl = "https://phome.yunqueyi.com" + "/template/#/template" preViewUrl = "https://phome.yunqueyi.com" + "/template/#/template"
qiniuFileUrl = "https://sc.yunqueyi.com" + "/contents/admin/qiniu/token1"; qiniuFileUrl = "https://sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
qiniuImgUrl = "https://files.yunqueyi.com";//qiniu存储域名 qiniuImgUrl = "https://files.yunqueyi.com";//qiniu存储域名
...@@ -116,6 +120,7 @@ export const getAddress = () => { ...@@ -116,6 +120,7 @@ export const getAddress = () => {
qiniuResourceUrl = "https://video.yunqueyi.com";//qiniu存储域名 qiniuResourceUrl = "https://video.yunqueyi.com";//qiniu存储域名
exam_url = "https://sc.yunqueyi.com/exams"; exam_url = "https://sc.yunqueyi.com/exams";
} }
localStorage.setItem("versionUrl",versionUrl);
localStorage.setItem("preViewUrl",preViewUrl); localStorage.setItem("preViewUrl",preViewUrl);
localStorage.setItem("qiniuFileUrl", qiniuFileUrl); localStorage.setItem("qiniuFileUrl", qiniuFileUrl);
localStorage.setItem("qiniuImgUrl", qiniuImgUrl); localStorage.setItem("qiniuImgUrl", qiniuImgUrl);
......
src/views/user-path/add-funnel.vue
浏览文件 @ 5070f21b
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,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.name" maxlength="30" 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;">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="add-step"> <div class="add-step">
<p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p> <p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p>
</div> </div>
<div class="step-content" v-for="(item,index) in stepArray" :key="index"> <div class="step-content" v-for="(item,index) in searchParam.actionModelList" :key="index">
<span>步骤{{index + 1}}</span> <span>步骤{{index + 1}}</span>
<el-form <el-form
ref="form" ref="form"
...@@ -31,17 +31,17 @@ ...@@ -31,17 +31,17 @@
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.actionName" maxlength="30" 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.eventId" filterable 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.eventName"
:value="eItem.value"> :value="eItem.eventId">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -56,35 +56,100 @@ ...@@ -56,35 +56,100 @@
</div> </div>
</template> </template>
<script> <script>
import { openLoading, closeLoading } from "../../common/utils";
export default { export default {
data() { data() {
return { return {
funnelId: '',
searchParam: { searchParam: {
name: '' name: '',
}, actionModelList: [
stepArray: [
{ {
name: '', actionName: '',
event: '' eventId: ''
} }]
], },
eventSelect: [] eventSelect: []
} }
}, },
created() {
this.funnelId = this.$route.query.id;
},
mounted() {
this.getEventList();
if(this.funnelId) this.getFunnelDetail();
},
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);
}
})
},
// 获取触发事件列表
getEventList() {
let req = this.searchParam.name;
this.getData(
"get", `/session/funnel/eventList?searchName=${req}`, {},
res => {
this.eventSelect = res.data;
}
);
},
// 编辑获取漏斗详情
getFunnelDetail() {
this.getData(
"get", `/session/funnel/detail/${this.funnelId}`, {},
res => {
if(res.code == '000000') {
this.searchParam = res.data;
}
}
);
},
// 保存 // 保存
saveAddAndEdit() { saveAddAndEdit() {
if(!this.searchParam.name) {
this.$message.error('请输入漏斗名称');
return;
}
for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
if(!this.searchParam.actionModelList[i].eventId) {
this.$message.error('触发事件不能为空');
return;
}
}
let req = this.searchParam;
this.getData(
"post", `/session/funnel/save`, req,
res => {
if(res.code == '000000') {
this.$message.success('转化漏斗创建成功');
this.$router.push({ path: 'user-path' });
}else {
this.$message.error(res.message);
}
}
);
}, },
// 删除步骤 // 删除步骤
deleteSteps(i) { deleteSteps(i) {
this.stepArray.splice(i,1); this.$message.success('删除成功');
this.searchParam.actionModelList.splice(i,1);
}, },
// 增加步骤 // 增加步骤
addSteps() { addSteps() {
this.stepArray.push({ this.searchParam.actionModelList.push({
name: '', actionName: '',
event: '' eventId: ''
}); });
} }
} }
......
src/views/user-path/funnel-data.vue
浏览文件 @ 5070f21b
...@@ -11,11 +11,23 @@ ...@@ -11,11 +11,23 @@
<el-col :span="10"> <el-col :span="10">
<el-form-item label="时间"> <el-form-item label="时间">
<el-date-picker <el-date-picker
v-model="searchParam.time" type="date"
type="daterange" placeholder="开始时间"
range-separator="-" v-model="searchParam.startDate"
start-placeholder="开始日期" style="width: 200px;"
end-placeholder="结束日期"> :picker-options="endDateOpt"
value-format="yyyy-MM-dd 00:00:00"
>
</el-date-picker>
<span>-</span>
<el-date-picker
type="date"
placeholder="结束时间"
v-model="searchParam.endDate"
style="width: 200px;"
:picker-options="endDateOpt1"
value-format="yyyy-MM-dd 23:59:59"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -41,19 +53,19 @@ ...@@ -41,19 +53,19 @@
<div class="data-num"> <div class="data-num">
<div class="num-text first-num"> <div class="num-text first-num">
<span>总人数</span> <span>总人数</span>
<p>543233<span>人</span></p> <p>{{funnelData.userCountTotal}}<span>人</span></p>
</div> </div>
<div class="num-text"> <div class="num-text">
<span>总转化率</span> <span>总转化率</span>
<p>20.47%</p> <p>{{funnelData.inversionRateTotal}}%</p>
</div> </div>
<div class="num-text"> <div class="num-text">
<span>达成目标人数</span> <span>达成目标人数</span>
<p>234<span>人</span></p> <p>{{funnelData.userCountLast}}<span>人</span></p>
</div> </div>
<div class="num-text num"> <div class="num-text num">
<span>转化率最低步骤</span> <span>转化率最低步骤</span>
<p>点击【相关推荐内容】</p> <p>{{funnelData.funnelNameLast}}</p>
</div> </div>
</div> </div>
<div class="data-analysis"> <div class="data-analysis">
...@@ -61,13 +73,13 @@ ...@@ -61,13 +73,13 @@
<div ref="chart" class="echart"></div> <div ref="chart" class="echart"></div>
<el-table <el-table
class="data-table" class="data-table"
:data="tableData" :data="funnelData.funnelReportModels"
style="width: 100%"> style="width: 100%">
<el-table-column prop="step" label="步骤" min-width="140" align="center"></el-table-column> <el-table-column prop="funnel" 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="funnelName" label="步骤名称" min-width="140" align="center"></el-table-column>
<el-table-column prop="userNum" label="用户数" min-width="150" align="center"></el-table-column> <el-table-column prop="userCount" label="用户数" min-width="150" align="center"></el-table-column>
<el-table-column prop="pre" label="较上一步转化率" min-width="150" align="center"></el-table-column> <el-table-column prop="inversionRate" label="较上一步转化率" min-width="150" align="center"></el-table-column>
<el-table-column prop="all" label="总转化率" min-width="150" align="center"></el-table-column> <el-table-column prop="inversionRateTotal" label="总转化率" min-width="150" align="center"></el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -76,72 +88,85 @@ ...@@ -76,72 +88,85 @@
</template> </template>
<script> <script>
let url = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAMAAACLgl7OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEUAAADBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcEAAAD45xibAAAAInRSTlMAmT6WJYwSfBMGZAFHmEgtkBeCCW0KAlI1k5QeiA10A1tc7ah1owAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAB7SURBVCjPtZDZDoAgDAQXvA+8bwX1/3/SGKIBEd+cx07TdgtIiAF0/mygDvnAoYDr2b3nnjP8wOaDUG6J4ncfR9cdScpMzbJECZEXT1/kesyy0n1VPv6AulF908Kg6+9DWN/hjWGUfhpgYV5Ov8ywwgUhguODddtXvXIAjuUEs/70/t4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMTZUMTU6MzM6MDkrMDg6MDCzL2BEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTE2VDE1OjMzOjA5KzA4OjAwwnLY+AAAAABJRU5ErkJggg=='; let url = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAMAAACLgl7OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEUAAADBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcEAAAD45xibAAAAInRSTlMAmT6WJYwSfBMGZAFHmEgtkBeCCW0KAlI1k5QeiA10A1tc7ah1owAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAB7SURBVCjPtZDZDoAgDAQXvA+8bwX1/3/SGKIBEd+cx07TdgtIiAF0/mygDvnAoYDr2b3nnjP8wOaDUG6J4ncfR9cdScpMzbJECZEXT1/kesyy0n1VPv6AulF908Kg6+9DWN/hjWGUfhpgYV5Ov8ywwgUhguODddtXvXIAjuUEs/70/t4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMTZUMTU6MzM6MDkrMDg6MDCzL2BEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTE2VDE1OjMzOjA5KzA4OjAwwnLY+AAAAABJRU5ErkJggg==';
import { openLoading, closeLoading } from "../../common/utils";
export default { export default {
data() { data() {
return { return {
name: '测试', funnelId: '',
name: '',
searchParam: { searchParam: {
time: '', endDate: '2020-11-23',
startDate: '2020-11-20',
version: '' version: ''
}, },
versionSelect: [], // 版本下拉数据 versionSelect: [], // 版本下拉数据
tableData: [{ funnelData: {},
step: '步骤1', endDateOpt: {
name: '点击【微专业】', disabledData: (time) => {
userNum: 54343, if ( this.searchParam.endDate != "" && this.searchParam.endDate != null) {
pre: 98.00, return (
all: 67.34 time.getTime() > new Date(this.searchParam.endDate).getTime()
},{ );
step: '步骤2', }
name: '点击【课程】', }
userNum: 54343, },
pre: 98.00, endDateOpt1: {
all: 67.34 disabledDate: time => {
}] return (
time.getTime() < new Date(this.searchParam.startDate).getTime()
);
}
}
} }
}, },
created() {
this.funnelId = this.$route.query.id;
this.name = this.$route.query.name;
},
mounted() { mounted() {
this.initCharts(); this.getAnalysisData();
this.getVersionData();
}, },
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);
}
})
},
// 获取版本号数据
getVersionData() {
openLoading(this);
this.$axios.get(localStorage.getItem("versionUrl") + '/api/PICAVersionServiceImpl/getVersionList', {})
.then(res => {
closeLoading(this);
})
},
// 获取漏斗分析数据
getAnalysisData() {
let req = this.searchParam;
this.getData(
"get", `/session/funnel/report?endDate=${req.endDate}&funnelId=${this.funnelId}&startDate=${req.endDate}&version=${req.version}`, {},
res => {
if(res.code == '000000') {
this.funnelData = res.data;
this.initCharts();
}
}
);
},
// 初始化图标 // 初始化图标
initCharts() { initCharts() {
let lineargroup = [{ let lineargroup = this.funnelData.funnelReportModels;
value: 200,
oriname: "点击【微专业】",
number: 98756,
color: ["rgba(29,211,137,0.8)", "rgba(29,211,137,0)"]
},
{
value: 150,
oriname: "点击【课程】",
number: 88756,
pointValue: 69.23,
color: ["rgba(102,142,255,0.7)", "rgba(102,142,255,0)"]
},
{
value: 100,
oriname: "点击【相关推荐内容】",
number: 78756,
pointValue: 35.21,
color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
},
{
value: 60,
oriname: "点击【健康漫画】",
number: 456,
pointValue: 15.21,
color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
},
{
value:30,
oriname: "点击【更多】",
number: 56,
pointValue: 5.21,
color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
},
];
let len = lineargroup.length; let len = lineargroup.length;
let colorObj = { let colorObj = {
type: 'linear', type: 'linear',
...@@ -161,28 +186,28 @@ export default { ...@@ -161,28 +186,28 @@ export default {
let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = []; let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = [];
for (let i = 0; i < lineargroup.length; i++) { for (let i = 0; i < lineargroup.length; i++) {
let obj1 = { let obj1 = {
value: lineargroup[i].value, value: 200 - i * 40,
num: lineargroup[i].number, num: lineargroup[i].userCount,
name: lineargroup[i].oriname name: lineargroup[i].funnelName
}; };
data1.push(obj1); data1.push(obj1);
if(i != (lineargroup.length - 1)) { if(i != (lineargroup.length - 1)) {
dataArr.push('转化率'); dataArr.push('转化率');
valueArr.push({value: '100'}); // 步骤箭头 valueArr.push({value: '100'}); // 步骤箭头
linksArr.push({ // 转化率线 linksArr.push({ // 转化率线
source: lineargroup[i].oriname, source: lineargroup[i].funnelName,
target: lineargroup[i + 1].oriname, target: lineargroup[i + 1].funnelName,
value: lineargroup[i + 1].pointValue, value: lineargroup[i + 1].inversionRate,
lineStyle: { lineStyle: {
normal: { normal: {
curveness: parseInt(len - i) + 1, curveness: parseInt(len - i) + 4,
color: colorObj color: colorObj
} }
} }
}) })
} }
lineArr.push({ lineArr.push({
name: lineargroup[i].oriname, name: lineargroup[i].funnelName,
x: 400, x: 400,
y: 0 + i*15 y: 0 + i*15
}); });
...@@ -190,10 +215,10 @@ export default { ...@@ -190,10 +215,10 @@ export default {
let option = { let option = {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
grid: { grid: {
top: 110 - len * 5, // 箭头距离顶部高度 top: 115 - len * 4, // 箭头距离顶部高度 3-115 4-
left: "-34%", left: "-34%",
right: 20, right: 20,
height: 115 + len * 15, // 箭头之间的距离 height: 50 + len * 30, // 箭头之间的距离 3-145 4-
bottom: '0' bottom: '0'
}, },
xAxis: { xAxis: {
...@@ -244,7 +269,7 @@ export default { ...@@ -244,7 +269,7 @@ export default {
z: 1, z: 1,
top: 20, top: 20,
left: 500, left: 500,
height: 286, height: 306,
type: 'graph', type: 'graph',
layout: 'none', layout: 'none',
symbolSize: 0, symbolSize: 0,
......
src/views/user-path/funnel.vue
浏览文件 @ 5070f21b
...@@ -114,12 +114,12 @@ export default { ...@@ -114,12 +114,12 @@ export default {
this.$router.push({ path: 'add-funnel' }); this.$router.push({ path: 'add-funnel' });
}, },
// 查看数据 // 查看数据
visitData() { visitData(row) {
this.$router.push({ path: 'path-data' }); this.$router.push({ path: 'path-data',query: {id: row.id, name: row.name} });
}, },
// 编辑 // 编辑
editColumn(row) { editColumn(row) {
this.$router.push({ path: 'add-funnel' ,query: {id: row.id}}); this.$router.push({ path: 'add-funnel',query: {id: row.id}});
}, },
// 删除确认框 // 删除确认框
deleteConfirm(row) { deleteConfirm(row) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或