路径分析
This commit is contained in:
parent
bd0958f56d
commit
390babb8bc
@ -15,7 +15,8 @@
|
||||
|
||||
<!-- <link rel="stylesheet" href="./static/img/iconfont/iconfont.css"> -->
|
||||
<script src="./src/jquery.min.js"></script>
|
||||
<script src="./src/echarts.min.js"></script><!-- 图标控件 -->
|
||||
<script src="./src/echarts.min.js"></script><!-- 图表控件 -->
|
||||
<script src="./src/macarons.js"></script><!-- 图表主题 -->
|
||||
<script src="./src/eventemitter.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./src/selectM.js"></script>
|
||||
|
||||
@ -203,7 +203,7 @@
|
||||
|
||||
{{# } else { }}
|
||||
|
||||
{{# if(d.cat != "user_property" && d.cat != "scatter" ){ }}
|
||||
{{# if(d.cat != "user_property" && d.cat != "scatter" && d.cat != "trace"){ }}
|
||||
|
||||
<div class="data-box">
|
||||
<div style="display: flex; align-items: center;">
|
||||
|
||||
@ -7,15 +7,15 @@
|
||||
</div>
|
||||
{{# } else { }}
|
||||
|
||||
{{# if(d.modeltype === "table"){ }}
|
||||
{{# if(d.modeltype === "table" && d.cat != "trace"){ }}
|
||||
|
||||
<div class="condition-box controlhover">
|
||||
<div class="time-cond">
|
||||
{{# if(d.cat != "user_property"){ }}
|
||||
{{# if(d.cat != "user_property" ){ }}
|
||||
{{# if(d.date != ""){ }}
|
||||
<span class="model-times" id="times{{d.id}}" data-id="{{d.id}}" data-cat="{{d.cat}}" data-modelsize="{{d.modelsize}}" data-modeltype="{{d.modeltype}}" data-name="{{d.name}}">{{d.date}}</span><img src="./static/img/xiajiantou.png">
|
||||
{{# } }}
|
||||
{{# if(d.cat != "scatter" && d.cat != "retention" ){ }}
|
||||
{{# if(d.cat != "scatter" && d.cat != "retention"){ }}
|
||||
<div class="xian"></div>
|
||||
<span class="model-screenlist" id="screenlist{{d.id}}" data-modelsize="{{d.modelsize}}" data-modeltype="{{d.modeltype}}" data-name="{{d.name}}" data-cat="{{d.cat}}" data-id="{{d.id}}">{{d.timeParticleSize}}</span><img src="./static/img/xiajiantou.png">
|
||||
{{# } }}
|
||||
@ -52,7 +52,7 @@
|
||||
{{# if(d.cat != "user_property"){ }}
|
||||
<span class="model-times" id="times{{d.id}}" data-id="{{d.id}}" data-cat="{{d.cat}}" data-modelsize="{{d.modelsize}}" data-modeltype="{{d.modeltype}}" data-name="{{d.name}}" >{{d.date}}</span><img src="./static/img/xiajiantou.png">
|
||||
<div class="xian"></div>
|
||||
{{# if(d.date != "" && d.cat != "scatter" && d.cat != "retention"){ }}
|
||||
{{# if(d.date != "" && d.cat != "scatter" && d.cat != "retention" && d.cat != "trace"){ }}
|
||||
<span class="model-screenlist" id="screenlist{{d.id}}" data-modelsize="{{d.modelsize}}" data-modeltype="{{d.modeltype}}" data-name="{{d.name}}" data-cat="{{d.cat}}" data-id="{{d.id}}" >{{d.timeParticleSize}}</span><img src="./static/img/xiajiantou.png">
|
||||
{{# } }}
|
||||
{{# if(d.cat === "retention"){ }}
|
||||
@ -66,7 +66,7 @@
|
||||
{{# } }}
|
||||
|
||||
</div>
|
||||
{{# if(d.authority == "rw"){ }}
|
||||
{{# if(d.authority == "rw" && d.cat != "trace"){ }}
|
||||
<div class="card-tow-right">
|
||||
<div class="shaixjeiguo" title="查看筛选条件" data-id="{{d.id}}" id="sxjg{{d.id}}">
|
||||
<img src="./static/img/jeiguo.png">
|
||||
|
||||
14
web/pages/nodedetails.html
Normal file
14
web/pages/nodedetails.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="nodedetails-box">
|
||||
|
||||
<div class="nodedetails-top-box">
|
||||
<span>节点详情</span>
|
||||
<img src="./static/img/cha.png">
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<p>节点事件：<span>开始战斗</span></p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -96,6 +96,7 @@
|
||||
</div>
|
||||
|
||||
<div class="analysis-but-box">
|
||||
<div class="analysis-saveas">另存为</div>
|
||||
<div class="analysis-savereport">保存报表</div>
|
||||
<div class="analysis-calculation">计 算</div>
|
||||
</div>
|
||||
@ -125,9 +126,13 @@
|
||||
|
||||
</div>
|
||||
<!-- 统计图 -->
|
||||
<div class="analysis-echarts" id="routeanalysis-echarts" style="height: 900px;"></div>
|
||||
<div class="routeanalysis-echarts">
|
||||
<div class="routeanalysis-echarts-overflow">
|
||||
<div class="analysis-echarts" id="routeanalysis-echarts" style="height: 660px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-div-box" style="height: 100%; margin-top: 16px;">
|
||||
<!-- <div class="table-div-box" style="height: 100%; margin-top: 16px;">
|
||||
<table class="table-fenxi-box">
|
||||
<thead>
|
||||
<tr class="table-fenxi-th">
|
||||
@ -139,7 +144,7 @@
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
47
web/src/echarts.min.js
vendored
47
web/src/echarts.min.js
vendored
File diff suppressed because one or more lines are too long
264
web/src/x.min.js
vendored
264
web/src/x.min.js
vendored
@ -6247,18 +6247,27 @@ var X = window.X || {
|
||||
|
||||
//筛选
|
||||
$(document).off('click','.tab-right-box .tjsx').on("click",".tab-right-box .tjsx",function(){
|
||||
layer.msg('该功能暂未开放');
|
||||
return;
|
||||
|
||||
X.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shade:0,
|
||||
shadeClose: false,
|
||||
offset: [120,270],
|
||||
url: "screen",
|
||||
extData : {}
|
||||
shadeClose: true,
|
||||
skin: 'yourclass',
|
||||
url: 'nodedetails'
|
||||
})
|
||||
// layer.msg('该功能暂未开放');
|
||||
// return;
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shade:0,
|
||||
// shadeClose: false,
|
||||
// offset: [120,270],
|
||||
// url: "screen",
|
||||
// extData : {}
|
||||
// })
|
||||
})
|
||||
|
||||
// 单个表格筛选
|
||||
@ -6497,6 +6506,8 @@ var X = window.X || {
|
||||
gourl = 'attribute';
|
||||
}else if(cat == 'scatter'){
|
||||
gourl = 'distribution';
|
||||
}else if(cat == 'trace'){
|
||||
gourl = 'routeanalysis';
|
||||
}
|
||||
X.gourl(gourl,'conetnt');//跳到对应的分析页面
|
||||
X.DATA[cat+'id'] = id;
|
||||
@ -7234,7 +7245,7 @@ var X = window.X || {
|
||||
eventdata[0]['condata'] = condataascend;
|
||||
}
|
||||
})
|
||||
}else {
|
||||
}else{
|
||||
X.scatterchart(val,function(data){
|
||||
data['name'] = d['name'];
|
||||
data['modeltype'] = d['graph_type'];
|
||||
@ -7247,7 +7258,21 @@ var X = window.X || {
|
||||
eventdata.push(data);
|
||||
})
|
||||
}
|
||||
|
||||
}else if(d['model'] == "trace"){
|
||||
|
||||
var data = {};
|
||||
data['name'] = d['name'];
|
||||
data['modeltype'] = d['graph_type'];
|
||||
data['id'] = d['report_id'];
|
||||
data['modelsize'] = d['graph_size'];
|
||||
data['cat'] = d['model'];
|
||||
data['desc'] = d['desc'];
|
||||
data['avesumdata']=d['avesumdata'];
|
||||
data['daydata'] = d['daydata'];
|
||||
data['links'] = val['links'];
|
||||
data['nodes'] = val['nodes'];
|
||||
data['date'] = val['start_date'] + " - " + val['end_date'];
|
||||
eventdata.push(data);
|
||||
|
||||
}
|
||||
eventdata[0]['authority'] = X.DATA.authority;
|
||||
@ -7315,7 +7340,9 @@ var X = window.X || {
|
||||
var startmonth = Date.parse(startdate)/1000;
|
||||
query['eventView']['e_days'] = parseInt((sameday - endmonth)/86400);
|
||||
query['eventView']['s_days'] = parseInt((sameday - startmonth)/86400);
|
||||
// 获取选择后的时间粒度
|
||||
|
||||
if(q[0]['cat'] != "trace"){
|
||||
// 获取选择后的时间粒度
|
||||
var timeParticleSizeid = "screenlist"+oclickarr.id;
|
||||
var timeParticleSizename = $("#"+timeParticleSizeid).html();
|
||||
var timeParticleSize;
|
||||
@ -7357,6 +7384,33 @@ var X = window.X || {
|
||||
|
||||
})
|
||||
});
|
||||
}else {
|
||||
X.api("ck/"+ oclickarr.cat +"_model","post",query,function(val){
|
||||
if(JSON.stringify(val) != "{}" && JSON.stringify(val) != "[]"){
|
||||
var bbsetdata = {
|
||||
graph_size:oclickarr['modelsize'],
|
||||
graph_type:oclickarr['modeltype'],
|
||||
model:oclickarr['cat'],
|
||||
name:oclickarr['name'],
|
||||
report_id:oclickarr['id'],
|
||||
query:query,
|
||||
modelswitch:q[0].show_config.modelswitch,
|
||||
ascending:q[0].show_config.ascending
|
||||
}
|
||||
|
||||
var modeldata = X.pageLogic['dashboard'].modeldata(bbsetdata,val);
|
||||
//渲染模板和数据
|
||||
X.template("modeltable",'conent-box'+modeldata[0]['id'],modeldata[0],function(){
|
||||
X.pageLogic['dashboard'].morefeatures(modeldata[0]);
|
||||
});
|
||||
|
||||
}else {
|
||||
layer.msg('无数据!!!');
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}else {
|
||||
layer.msg('无数据qqq');
|
||||
}
|
||||
@ -7407,6 +7461,59 @@ var X = window.X || {
|
||||
|
||||
}]
|
||||
};
|
||||
}else if(eventdata.cat == "trace"){
|
||||
|
||||
|
||||
var colordata = X.DATA['echartscolor'];
|
||||
var levelsdata = [];
|
||||
for(let i in colordata){
|
||||
var arr = {
|
||||
depth: i,
|
||||
itemStyle: {
|
||||
color: '#3ea7fd'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#eeeeee',
|
||||
opacity: 0.8
|
||||
}
|
||||
};
|
||||
levelsdata.push(arr);
|
||||
}
|
||||
console.log(eventdata);
|
||||
option = {
|
||||
title: {
|
||||
// text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
left: '1%',
|
||||
right: '0%',
|
||||
top: "5%",
|
||||
data: eventdata.nodes,
|
||||
links: eventdata.links,
|
||||
nodeWidth: 100,
|
||||
nodeGap: 10,
|
||||
draggable:false,
|
||||
nodeAlign: 'left',
|
||||
label:{
|
||||
position:'',
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency'
|
||||
},
|
||||
levels: levelsdata,
|
||||
lineStyle: {
|
||||
curveness: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
}else{
|
||||
var option = {
|
||||
color: X.DATA.echartscolor,
|
||||
@ -11797,12 +11904,14 @@ var X = window.X || {
|
||||
filteringdata.push(arr);
|
||||
}
|
||||
}
|
||||
console.log(filteringdata);
|
||||
// console.log(filteringdata);
|
||||
X.laytpldata("#judge-box-dot",filteringdata,".setgrouping-box2 .setgrouping-content-box2");
|
||||
|
||||
}else {
|
||||
$(".setgrouping-sousuo-txt-box img").hide();
|
||||
X.laytpldata("#judge-box-dot",data.list,".setgrouping-box2 .setgrouping-content-box2");
|
||||
}
|
||||
layui.form.render();
|
||||
})
|
||||
|
||||
//清空按钮
|
||||
@ -11810,6 +11919,7 @@ var X = window.X || {
|
||||
$(".setgrouping-sousuo-txt-box input").val("");
|
||||
$(".setgrouping-sousuo-txt-box img").hide();
|
||||
X.laytpldata("#judge-box-dot",data.list,".setgrouping-box2 .setgrouping-content-box2");
|
||||
layui.form.render();
|
||||
})
|
||||
|
||||
layui.form.on('checkbox(checkboxexample)', function(){
|
||||
@ -13340,7 +13450,9 @@ var X = window.X || {
|
||||
"startTime":"",
|
||||
"session_interval":30,
|
||||
"session_type":"minute",
|
||||
"endTime":""
|
||||
"endTime":"",
|
||||
"e_days":0,
|
||||
"s_days":7,
|
||||
},
|
||||
"events":{
|
||||
"by_fields":[
|
||||
@ -13368,15 +13480,33 @@ var X = window.X || {
|
||||
|
||||
X.template("route","event-roue-event",data['events']['source_event']);
|
||||
|
||||
// 日期渲染
|
||||
// X.daterender("#route-condition-date",function(start, end, label){
|
||||
// var startTime = start.format('YYYY-MM-DD')+ " "+ "00:00:00";
|
||||
// var endTime = end.format('YYYY-MM-DD')+ " "+ "23:59:59";
|
||||
// data['eventView']['startTime'] = startTime;
|
||||
// data['eventView']['endTime'] = endTime;
|
||||
// X.api("ck/trace_model","post",data,function(d){
|
||||
// routeanalysisdata(d);
|
||||
// })
|
||||
// })
|
||||
|
||||
// 日期渲染
|
||||
X.daterender("#route-condition-date",function(start, end, label){
|
||||
var startTime = start.format('YYYY-MM-DD')+ " "+ "00:00:00";
|
||||
var endTime = end.format('YYYY-MM-DD')+ " "+ "23:59:59";
|
||||
data['eventView']['startTime'] = startTime;
|
||||
data['eventView']['endTime'] = endTime;
|
||||
X.api("ck/trace_model","post",data,function(d){
|
||||
routeanalysisdata(d);
|
||||
})
|
||||
var sameday = Date.parse(new Date()) / 1000; //当天时间戳
|
||||
|
||||
var enddate = new Date(end.format('YYYY-MM-DD'));
|
||||
var endmonth = Date.parse(enddate)/1000;
|
||||
|
||||
var startdate = new Date(start.format('YYYY-MM-DD'));
|
||||
var startmonth = Date.parse(startdate)/1000;
|
||||
data['eventView']['e_days'] = parseInt((sameday - endmonth)/86400);
|
||||
data['eventView']['s_days'] = parseInt((sameday - startmonth)/86400);
|
||||
// calculationdata();
|
||||
})
|
||||
|
||||
var time = $("#route-condition-date").val();
|
||||
@ -13398,7 +13528,47 @@ var X = window.X || {
|
||||
X.api("data_auth/filter_map","get",{},function(d){
|
||||
filter_map = d;
|
||||
});
|
||||
|
||||
|
||||
//从数据看板点击进来触发事件
|
||||
if(X.DATA.traceid && X.DATA.traceid != ''){
|
||||
var report_idarr = [];
|
||||
report_idarr.push(X.DATA.traceid);
|
||||
if(X.DATA.authority != 'rw'){
|
||||
$('.analysis-savereport').hide();
|
||||
}else {
|
||||
$('.analysis-saveas').show();
|
||||
}
|
||||
X.api('report/read_report','post',{project_id:X.DATA.projectid,report_id:report_idarr},function(d){
|
||||
backfilldata(d[0]);
|
||||
// console.log(d);
|
||||
})
|
||||
}
|
||||
function backfilldata(d){
|
||||
if(d){
|
||||
data = d.query;
|
||||
$('.route-time-input').val(data['eventView']['session_interval']);
|
||||
if(data['eventView']['session_type'] == "second"){
|
||||
$(".route-condition").html("秒");
|
||||
}else if(data['eventView']['session_type'] == "minute"){
|
||||
$(".route-condition").html("分钟");
|
||||
}else {
|
||||
$(".route-condition").html("小时");
|
||||
}
|
||||
routeevent = data.cachedata.event_names;
|
||||
// $('.participate-num').html(data.cachedata.event_names.length);
|
||||
|
||||
X.template("route","event-roue-event",data['events']['source_event']);
|
||||
$('.participate-num').html(data.events.event_names.length);
|
||||
eventdata['select'] = data.events.event_names;
|
||||
X.template("globalfilter","xinwei-whole",data['events']['user_filter']['filts'],function(){
|
||||
renderdate()
|
||||
});
|
||||
X.laytpldata("#eventsplit-box-dot",data['events']['by_fields'],".eventsplit-box");
|
||||
// X.template("userpar","userpar-event",data['events']);
|
||||
|
||||
calculationdata();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).off('click','.eventsplit').on('click','.eventsplit',function(){
|
||||
|
||||
@ -13429,16 +13599,16 @@ var X = window.X || {
|
||||
var obj = $(this);
|
||||
var offset = obj.offset();
|
||||
X.querycriteriapop(eventdata,'participate',offset.left,offset.top+obj.height(),function(val){
|
||||
console.log(val);
|
||||
var selectdata = []; //选中事件的id数组
|
||||
// var selectdescdata = []; //选中事件的别名数组
|
||||
for(let i in val){
|
||||
selectdata.push(val[i]['event_name']);
|
||||
// selectdescdata.push(val[i]['event_desc']);
|
||||
}
|
||||
eventdata['select'] = selectdata;
|
||||
data['events']['event_names'] = selectdata;
|
||||
$('.participate-num').html(selectdata.length);
|
||||
|
||||
data['events']['event_namesdes'] = val;
|
||||
$('.participate-num').html(val.length);
|
||||
routeevent = [];
|
||||
for(let i in val){
|
||||
var arr = {
|
||||
title: val[i]['event_desc']
|
||||
@ -13540,6 +13710,7 @@ var X = window.X || {
|
||||
$(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function(){
|
||||
var obj = $(this);
|
||||
var offset = obj.offset();
|
||||
console.log(routeevent)
|
||||
X.querycriteriapop(routeevent,'dropdownlist',offset.left,offset.top+obj.height(),function(val){
|
||||
obj.html(val.title);
|
||||
data['events']['source_event']['eventDesc']= val.title;
|
||||
@ -13732,14 +13903,7 @@ var X = window.X || {
|
||||
//计算按钮
|
||||
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
|
||||
calculationdata();
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shadeClose: true,
|
||||
// skin: 'yourclass',
|
||||
// url: 'nodedetails'
|
||||
// })
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -13798,22 +13962,17 @@ var X = window.X || {
|
||||
|
||||
function routeanalysisdata(d){
|
||||
var myChart = echarts.init(document.getElementById('routeanalysis-echarts'));
|
||||
|
||||
var colordata = X.DATA['echartscolor'];
|
||||
var levelsdata = [];
|
||||
for(let i in colordata){
|
||||
var arr = {
|
||||
depth: i,
|
||||
itemStyle: {
|
||||
color: colordata[i]
|
||||
},
|
||||
label: {
|
||||
show:true,
|
||||
position: 'center'
|
||||
color: '#3ea7fd'
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'source',
|
||||
opacity: 0.6
|
||||
color: '#eeeeee',
|
||||
opacity: 0.9
|
||||
}
|
||||
};
|
||||
levelsdata.push(arr);
|
||||
@ -13823,13 +13982,6 @@ var X = window.X || {
|
||||
title: {
|
||||
text: '用户行为路径'
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
@ -13837,8 +13989,21 @@ var X = window.X || {
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
left: '1%',
|
||||
right: '0%',
|
||||
data: d.nodes,
|
||||
links: d.links,
|
||||
nodeWidth: 100,
|
||||
nodeGap: 10,
|
||||
draggable:false,
|
||||
nodeAlign: 'left',
|
||||
label:{
|
||||
position:'',
|
||||
formatter: function(event){
|
||||
// console.log(event)
|
||||
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency'
|
||||
},
|
||||
@ -13852,14 +14017,19 @@ var X = window.X || {
|
||||
|
||||
// 图表单击事件
|
||||
myChart.setOption(option);
|
||||
myChart.on('click', function (params) {
|
||||
console.log(params);
|
||||
});
|
||||
|
||||
|
||||
// 跳转节点详情弹窗
|
||||
myChart.on('click', function (params) {
|
||||
// console.log(params);
|
||||
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shadeClose: true,
|
||||
// skin: 'yourclass',
|
||||
// url: 'nodedetails'
|
||||
// })
|
||||
|
||||
|
||||
});
|
||||
|
||||
24
web/src/旧echarts.min.js
vendored
Normal file
24
web/src/旧echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -193,18 +193,27 @@
|
||||
|
||||
//筛选
|
||||
$(document).off('click','.tab-right-box .tjsx').on("click",".tab-right-box .tjsx",function(){
|
||||
layer.msg('该功能暂未开放');
|
||||
return;
|
||||
|
||||
X.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shade:0,
|
||||
shadeClose: false,
|
||||
offset: [120,270],
|
||||
url: "screen",
|
||||
extData : {}
|
||||
shadeClose: true,
|
||||
skin: 'yourclass',
|
||||
url: 'nodedetails'
|
||||
})
|
||||
// layer.msg('该功能暂未开放');
|
||||
// return;
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shade:0,
|
||||
// shadeClose: false,
|
||||
// offset: [120,270],
|
||||
// url: "screen",
|
||||
// extData : {}
|
||||
// })
|
||||
})
|
||||
|
||||
// 单个表格筛选
|
||||
@ -443,6 +452,8 @@
|
||||
gourl = 'attribute';
|
||||
}else if(cat == 'scatter'){
|
||||
gourl = 'distribution';
|
||||
}else if(cat == 'trace'){
|
||||
gourl = 'routeanalysis';
|
||||
}
|
||||
X.gourl(gourl,'conetnt');//跳到对应的分析页面
|
||||
X.DATA[cat+'id'] = id;
|
||||
@ -1180,7 +1191,7 @@
|
||||
eventdata[0]['condata'] = condataascend;
|
||||
}
|
||||
})
|
||||
}else {
|
||||
}else{
|
||||
X.scatterchart(val,function(data){
|
||||
data['name'] = d['name'];
|
||||
data['modeltype'] = d['graph_type'];
|
||||
@ -1193,7 +1204,21 @@
|
||||
eventdata.push(data);
|
||||
})
|
||||
}
|
||||
|
||||
}else if(d['model'] == "trace"){
|
||||
|
||||
var data = {};
|
||||
data['name'] = d['name'];
|
||||
data['modeltype'] = d['graph_type'];
|
||||
data['id'] = d['report_id'];
|
||||
data['modelsize'] = d['graph_size'];
|
||||
data['cat'] = d['model'];
|
||||
data['desc'] = d['desc'];
|
||||
data['avesumdata']=d['avesumdata'];
|
||||
data['daydata'] = d['daydata'];
|
||||
data['links'] = val['links'];
|
||||
data['nodes'] = val['nodes'];
|
||||
data['date'] = val['start_date'] + " - " + val['end_date'];
|
||||
eventdata.push(data);
|
||||
|
||||
}
|
||||
eventdata[0]['authority'] = X.DATA.authority;
|
||||
@ -1261,7 +1286,9 @@
|
||||
var startmonth = Date.parse(startdate)/1000;
|
||||
query['eventView']['e_days'] = parseInt((sameday - endmonth)/86400);
|
||||
query['eventView']['s_days'] = parseInt((sameday - startmonth)/86400);
|
||||
// 获取选择后的时间粒度
|
||||
|
||||
if(q[0]['cat'] != "trace"){
|
||||
// 获取选择后的时间粒度
|
||||
var timeParticleSizeid = "screenlist"+oclickarr.id;
|
||||
var timeParticleSizename = $("#"+timeParticleSizeid).html();
|
||||
var timeParticleSize;
|
||||
@ -1303,6 +1330,33 @@
|
||||
|
||||
})
|
||||
});
|
||||
}else {
|
||||
X.api("ck/"+ oclickarr.cat +"_model","post",query,function(val){
|
||||
if(JSON.stringify(val) != "{}" && JSON.stringify(val) != "[]"){
|
||||
var bbsetdata = {
|
||||
graph_size:oclickarr['modelsize'],
|
||||
graph_type:oclickarr['modeltype'],
|
||||
model:oclickarr['cat'],
|
||||
name:oclickarr['name'],
|
||||
report_id:oclickarr['id'],
|
||||
query:query,
|
||||
modelswitch:q[0].show_config.modelswitch,
|
||||
ascending:q[0].show_config.ascending
|
||||
}
|
||||
|
||||
var modeldata = X.pageLogic['dashboard'].modeldata(bbsetdata,val);
|
||||
//渲染模板和数据
|
||||
X.template("modeltable",'conent-box'+modeldata[0]['id'],modeldata[0],function(){
|
||||
X.pageLogic['dashboard'].morefeatures(modeldata[0]);
|
||||
});
|
||||
|
||||
}else {
|
||||
layer.msg('无数据!!!');
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}else {
|
||||
layer.msg('无数据qqq');
|
||||
}
|
||||
@ -1353,6 +1407,59 @@
|
||||
|
||||
}]
|
||||
};
|
||||
}else if(eventdata.cat == "trace"){
|
||||
|
||||
|
||||
var colordata = X.DATA['echartscolor'];
|
||||
var levelsdata = [];
|
||||
for(let i in colordata){
|
||||
var arr = {
|
||||
depth: i,
|
||||
itemStyle: {
|
||||
color: '#3ea7fd'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#eeeeee',
|
||||
opacity: 0.8
|
||||
}
|
||||
};
|
||||
levelsdata.push(arr);
|
||||
}
|
||||
console.log(eventdata);
|
||||
option = {
|
||||
title: {
|
||||
// text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
left: '1%',
|
||||
right: '0%',
|
||||
top: "5%",
|
||||
data: eventdata.nodes,
|
||||
links: eventdata.links,
|
||||
nodeWidth: 100,
|
||||
nodeGap: 10,
|
||||
draggable:false,
|
||||
nodeAlign: 'left',
|
||||
label:{
|
||||
position:'',
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency'
|
||||
},
|
||||
levels: levelsdata,
|
||||
lineStyle: {
|
||||
curveness: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
}else{
|
||||
var option = {
|
||||
color: X.DATA.echartscolor,
|
||||
|
||||
@ -43,12 +43,14 @@
|
||||
filteringdata.push(arr);
|
||||
}
|
||||
}
|
||||
console.log(filteringdata);
|
||||
// console.log(filteringdata);
|
||||
X.laytpldata("#judge-box-dot",filteringdata,".setgrouping-box2 .setgrouping-content-box2");
|
||||
|
||||
}else {
|
||||
$(".setgrouping-sousuo-txt-box img").hide();
|
||||
X.laytpldata("#judge-box-dot",data.list,".setgrouping-box2 .setgrouping-content-box2");
|
||||
}
|
||||
layui.form.render();
|
||||
})
|
||||
|
||||
//清空按钮
|
||||
@ -56,6 +58,7 @@
|
||||
$(".setgrouping-sousuo-txt-box input").val("");
|
||||
$(".setgrouping-sousuo-txt-box img").hide();
|
||||
X.laytpldata("#judge-box-dot",data.list,".setgrouping-box2 .setgrouping-content-box2");
|
||||
layui.form.render();
|
||||
})
|
||||
|
||||
layui.form.on('checkbox(checkboxexample)', function(){
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
"startTime":"",
|
||||
"session_interval":30,
|
||||
"session_type":"minute",
|
||||
"endTime":""
|
||||
"endTime":"",
|
||||
"e_days":0,
|
||||
"s_days":7,
|
||||
},
|
||||
"events":{
|
||||
"by_fields":[
|
||||
@ -37,15 +39,33 @@
|
||||
|
||||
X.template("route","event-roue-event",data['events']['source_event']);
|
||||
|
||||
// 日期渲染
|
||||
// X.daterender("#route-condition-date",function(start, end, label){
|
||||
// var startTime = start.format('YYYY-MM-DD')+ " "+ "00:00:00";
|
||||
// var endTime = end.format('YYYY-MM-DD')+ " "+ "23:59:59";
|
||||
// data['eventView']['startTime'] = startTime;
|
||||
// data['eventView']['endTime'] = endTime;
|
||||
// X.api("ck/trace_model","post",data,function(d){
|
||||
// routeanalysisdata(d);
|
||||
// })
|
||||
// })
|
||||
|
||||
// 日期渲染
|
||||
X.daterender("#route-condition-date",function(start, end, label){
|
||||
var startTime = start.format('YYYY-MM-DD')+ " "+ "00:00:00";
|
||||
var endTime = end.format('YYYY-MM-DD')+ " "+ "23:59:59";
|
||||
data['eventView']['startTime'] = startTime;
|
||||
data['eventView']['endTime'] = endTime;
|
||||
X.api("ck/trace_model","post",data,function(d){
|
||||
routeanalysisdata(d);
|
||||
})
|
||||
var sameday = Date.parse(new Date()) / 1000; //当天时间戳
|
||||
|
||||
var enddate = new Date(end.format('YYYY-MM-DD'));
|
||||
var endmonth = Date.parse(enddate)/1000;
|
||||
|
||||
var startdate = new Date(start.format('YYYY-MM-DD'));
|
||||
var startmonth = Date.parse(startdate)/1000;
|
||||
data['eventView']['e_days'] = parseInt((sameday - endmonth)/86400);
|
||||
data['eventView']['s_days'] = parseInt((sameday - startmonth)/86400);
|
||||
// calculationdata();
|
||||
})
|
||||
|
||||
var time = $("#route-condition-date").val();
|
||||
@ -67,7 +87,47 @@
|
||||
X.api("data_auth/filter_map","get",{},function(d){
|
||||
filter_map = d;
|
||||
});
|
||||
|
||||
|
||||
//从数据看板点击进来触发事件
|
||||
if(X.DATA.traceid && X.DATA.traceid != ''){
|
||||
var report_idarr = [];
|
||||
report_idarr.push(X.DATA.traceid);
|
||||
if(X.DATA.authority != 'rw'){
|
||||
$('.analysis-savereport').hide();
|
||||
}else {
|
||||
$('.analysis-saveas').show();
|
||||
}
|
||||
X.api('report/read_report','post',{project_id:X.DATA.projectid,report_id:report_idarr},function(d){
|
||||
backfilldata(d[0]);
|
||||
// console.log(d);
|
||||
})
|
||||
}
|
||||
function backfilldata(d){
|
||||
if(d){
|
||||
data = d.query;
|
||||
$('.route-time-input').val(data['eventView']['session_interval']);
|
||||
if(data['eventView']['session_type'] == "second"){
|
||||
$(".route-condition").html("秒");
|
||||
}else if(data['eventView']['session_type'] == "minute"){
|
||||
$(".route-condition").html("分钟");
|
||||
}else {
|
||||
$(".route-condition").html("小时");
|
||||
}
|
||||
routeevent = data.cachedata.event_names;
|
||||
// $('.participate-num').html(data.cachedata.event_names.length);
|
||||
|
||||
X.template("route","event-roue-event",data['events']['source_event']);
|
||||
$('.participate-num').html(data.events.event_names.length);
|
||||
eventdata['select'] = data.events.event_names;
|
||||
X.template("globalfilter","xinwei-whole",data['events']['user_filter']['filts'],function(){
|
||||
renderdate()
|
||||
});
|
||||
X.laytpldata("#eventsplit-box-dot",data['events']['by_fields'],".eventsplit-box");
|
||||
// X.template("userpar","userpar-event",data['events']);
|
||||
|
||||
calculationdata();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).off('click','.eventsplit').on('click','.eventsplit',function(){
|
||||
|
||||
@ -98,16 +158,16 @@
|
||||
var obj = $(this);
|
||||
var offset = obj.offset();
|
||||
X.querycriteriapop(eventdata,'participate',offset.left,offset.top+obj.height(),function(val){
|
||||
console.log(val);
|
||||
var selectdata = []; //选中事件的id数组
|
||||
// var selectdescdata = []; //选中事件的别名数组
|
||||
for(let i in val){
|
||||
selectdata.push(val[i]['event_name']);
|
||||
// selectdescdata.push(val[i]['event_desc']);
|
||||
}
|
||||
eventdata['select'] = selectdata;
|
||||
data['events']['event_names'] = selectdata;
|
||||
$('.participate-num').html(selectdata.length);
|
||||
|
||||
data['events']['event_namesdes'] = val;
|
||||
$('.participate-num').html(val.length);
|
||||
routeevent = [];
|
||||
for(let i in val){
|
||||
var arr = {
|
||||
title: val[i]['event_desc']
|
||||
@ -209,6 +269,7 @@
|
||||
$(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function(){
|
||||
var obj = $(this);
|
||||
var offset = obj.offset();
|
||||
console.log(routeevent)
|
||||
X.querycriteriapop(routeevent,'dropdownlist',offset.left,offset.top+obj.height(),function(val){
|
||||
obj.html(val.title);
|
||||
data['events']['source_event']['eventDesc']= val.title;
|
||||
@ -401,14 +462,7 @@
|
||||
//计算按钮
|
||||
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
|
||||
calculationdata();
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shadeClose: true,
|
||||
// skin: 'yourclass',
|
||||
// url: 'nodedetails'
|
||||
// })
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -467,22 +521,17 @@
|
||||
|
||||
function routeanalysisdata(d){
|
||||
var myChart = echarts.init(document.getElementById('routeanalysis-echarts'));
|
||||
|
||||
var colordata = X.DATA['echartscolor'];
|
||||
var levelsdata = [];
|
||||
for(let i in colordata){
|
||||
var arr = {
|
||||
depth: i,
|
||||
itemStyle: {
|
||||
color: colordata[i]
|
||||
},
|
||||
label: {
|
||||
show:true,
|
||||
position: 'center'
|
||||
color: '#3ea7fd'
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'source',
|
||||
opacity: 0.6
|
||||
color: '#eeeeee',
|
||||
opacity: 0.9
|
||||
}
|
||||
};
|
||||
levelsdata.push(arr);
|
||||
@ -492,13 +541,6 @@
|
||||
title: {
|
||||
text: '用户行为路径'
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
@ -506,8 +548,21 @@
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
left: '1%',
|
||||
right: '0%',
|
||||
data: d.nodes,
|
||||
links: d.links,
|
||||
nodeWidth: 100,
|
||||
nodeGap: 10,
|
||||
draggable:false,
|
||||
nodeAlign: 'left',
|
||||
label:{
|
||||
position:'',
|
||||
formatter: function(event){
|
||||
// console.log(event)
|
||||
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency'
|
||||
},
|
||||
@ -521,14 +576,19 @@
|
||||
|
||||
// 图表单击事件
|
||||
myChart.setOption(option);
|
||||
myChart.on('click', function (params) {
|
||||
console.log(params);
|
||||
});
|
||||
|
||||
|
||||
// 跳转节点详情弹窗
|
||||
myChart.on('click', function (params) {
|
||||
// console.log(params);
|
||||
|
||||
// X.open({
|
||||
// type: 1,
|
||||
// title: false,
|
||||
// closeBtn: 0,
|
||||
// shadeClose: true,
|
||||
// skin: 'yourclass',
|
||||
// url: 'nodedetails'
|
||||
// })
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -61,6 +61,10 @@
|
||||
|
||||
|
||||
.analysis-echarts { width: 100%; height: 400px; }
|
||||
|
||||
.routeanalysis-echarts { width: 100%; height: 660px; overflow: scroll; }
|
||||
.routeanalysis-echarts-overflow { width: 2000px; overflow-x: auto;}
|
||||
|
||||
.eventsplit:hover { color: #4fa1ff; cursor: pointer; }
|
||||
.eventsplit-box { padding: 0 8px; margin: 8px 8px; font-size: 13px; margin-bottom: 0; background-color: #f0f2f5; }
|
||||
.action-left { display: flex; align-items: center; }
|
||||
@ -385,4 +389,8 @@
|
||||
}
|
||||
.table-grouptable-div-box { height: 600px; }
|
||||
|
||||
.nodedetails-box { width: 500px; height: 400px; }
|
||||
.nodedetails-top-box { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; color: rgba(0, 0, 0, 0.85); font-size: 16px; font-weight: 500; border-bottom: 1px solid #f0f0f0;}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user