xfrontend/web/pages/route.html

<!-- 路径分析 -->
<div class="analysis-zhanwei">

</div>

<div class="analysis-navigation-bar-box">
    <div class="analysis-navigation-bar">
        <div class="analysis-navigation-bar-left">
            <span>路径分析</span><img src="./static/img/capytishi.png" title="记录用户每次会话时的访问循序，通过桑基图直观掌握用户行为扩展路线，以供优化节点内容，提升整体转化效率"/>
        </div>
        <div class="analysis-navigation-bar-right">
            <div class="analysis-navigation-bar-right-img" title="最后更新时间：2021-04-29 14:44:39">
                <img src="./static/img/gengxin.png">
            </div>
            <div class="analysis-navigation-bar-right-img sqlquery" title="查看条件代码">
                <i class="iconfont" style="font-size: 18px; color: #67729d;">&#xe727;</i>
            </div>
            <div class="analysis-navigation-bar-right-img analysis-navigation-bar-right-img-baobiao" title="报表">
                <img src="./static/img/baobiao2.png">
            </div>
        </div>
    </div>

    <div class="analysis-bg">
        <!-- 左侧条件筛选区域 -->
        <div class="analysis-con-left">
            <!-- 伸缩按钮 -->
            <div class="analysis-con-left-shrink"></div>

            <div class="root___2a4tb">

                <div class="block___2n0We">
                    <div class="analysis-con-left-title">参与分析的事件</div>
                    <div class="analysis-con-left-screen-list-box" id="-event">
                        
                    </div>
                </div>

                <div class="block___2n0We">
                    <div class="analysis-con-left-title">分析路径以</div>
                    <div class="analysis-con-left-screen-list-box" id="-event">
                        
                    </div>
                </div>

                <div class="block___2n0We">
                    <div class="analysis-con-left-title">且用户符合</div>
                    <div class="analysis-con-left-screen-list-box" id="-event">
                        
                    </div>
                    <div class="analysis-foot___P797w">
                        <span class="route-updataevent">
                            <img src="./static/img/fenzu.png">
                            添加条件
                        </span>
                    </div>
                </div>

                <div class="block___2n0We">
                    <div class="analysis-con-left-title">会话间隔时长</div>
                    <div class="analysis-con-left-screen-box" >
                        <div class="analtsis-condition analtsis-timeParticleSize windows_gap">7天</div>
                    </div>
                </div>



            </div>

            <div class="analysis-but-box">
                <div class="analysis-savereport">保存报表</div>
                <div class="analysis-calculation">计 算</div>
            </div>


        </div>
        <!-- 右边图表显示区域 -->
        <div class="analysis-con-right">
            <div class="analtsis-con-box">
                <div class="analtsis-con-right-box">
                    <div class="analtsis-con-right-top-title">
                        玩法参与情况
                    </div>
                    <div class="analtsis-condition-box">
                        <div class="analtsis-time-box">
                            <div class="analtsis-condition" > <input id="retained-condition-date" readonly="readonly"></input> </div>
                        </div>

                        <div class="analtsis-condition-right-box">
                            <!-- <div class="analtsis-condition">指标</div>
                            <div class="analtsis-condition">分组</div> -->
                            <div class="analtsis-chart-switch-box">
                                <div class="analtsis-chart-switch select-chart" title="转化图"> <i class="iconfont" style="font-size: 18px; ">&#xe670;</i> </div>
                                <div class="analtsis-chart-switch  " title="趋势图"> <i class="iconfont" style="font-size: 18px; ">&#xe601;</i> </div>
                            </div>
                        </div>

                    </div>
                    <!-- 统计图 -->
                    <div class="analysis-echarts" id="funnel-echarts" ></div>

                    <div class="table-div-box" style="height: 100%; margin-top: 16px;">
                        <table class="table-fenxi-box">
                            <thead>
                            <tr class="table-fenxi-th">
                                
                            </tr> 
                            </thead>
                            <tbody class="table-fenxi-td">
                            
                               
                            </tbody>
                        </table>
                    </div>
                </div>



            </div>
        </div>
    </div>

</div>

<script id="table-fenxi-th-dot" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        {{#  if(item == "第0日"){ }}
            <th>当日</th>
        {{#  } else { }}
            <th>{{item}}</th>
        {{#  } }} 
    {{#  }); }}
</script>

<script id="table-fenxi-td-dot" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <tr >
        <td>{{item.title}}</td>
        {{#  layui.each(item.data, function(indexs, items){ }}
        <td>
            <p>{{items.n}}</p>
            <p>{{items.p}}%</p>
        </td>
        {{#  }); }}
    </tr>
    {{#  }); }}
</script>