路径分析

web/main.html

@@ -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>

web/pages/modeltable.html

@@ -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;">

web/pages/modeltype.html

@@ -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">

web/pages/nodedetails.html

@@ -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>

web/pages/routeanalysis.html

@@ -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>

web/src/x.min.js

@@ -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: true,
-                    shadeClose: false,
+                    skin: 'yourclass',
-                    offset: [120,270],
+                    url: 'nodedetails'
-                    url: "screen",
-                    extData : {}
                 })
+                // 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,6 +7340,8 @@ 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();
@@ -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){
+                var sameday = Date.parse(new Date()) / 1000; //当天时间戳
-                    routeanalysisdata(d);
+                
-                })
+                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();
@@ -13399,6 +13529,46 @@ var X = window.X || {
                 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]
+                            color: '#3ea7fd'
-                        },
-                        label: {
-                            show:true,
-                            position: 'center'
                         },
                         lineStyle: {
-                            color: 'source',
+                            color: '#eeeeee',
-                            opacity: 0.6
+                            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'
+                    // })
                     
 
                 });

web/srczip/logic/dashboard.js

@@ -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: true,
-                    shadeClose: false,
+                    skin: 'yourclass',
-                    offset: [120,270],
+                    url: 'nodedetails'
-                    url: "screen",
-                    extData : {}
                 })
+                // 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,6 +1286,8 @@
                         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();
@@ -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,

web/srczip/logic/participate.js

@@ -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(){

web/srczip/logic/routeanalysis.js

@@ -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){
+                var sameday = Date.parse(new Date()) / 1000; //当天时间戳
-                    routeanalysisdata(d);
+                
-                })
+                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();
@@ -68,6 +88,46 @@
                 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]
+                            color: '#3ea7fd'
-                        },
-                        label: {
-                            show:true,
-                            position: 'center'
                         },
                         lineStyle: {
-                            color: 'source',
+                            color: '#eeeeee',
-                            opacity: 0.6
+                            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'
+                    // })
                     
 
                 });

web/static/css/analysis.css

@@ -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;}
+
+