xfrontend/web/pages/routeanalysis.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 class="analysis-navigation-bar-right-img analysis-fanhui" title="返回">
                <img src="./static/img/fanhui.png">
                <span>返回</span>
            </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"> <span>参与分析的事件</span> <span class="eventsplit"> 事件拆分</span> </div>
                    <div class="analysis-con-left-screen-list-box">
                        <div class="participate-box">事件(<span class="participate-num">0</span>)</div>
                    </div>

                    <div class="eventsplit-box">
                        

                    </div>

                </div>

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

                <div class="block___2n0We analysis-overall" style="display: block;">
                    <div class="analysis-con-left-title">且用户符合</div>

                    <div class="analysis-con-left-screen-box">
                        
                        <div class="analysis-overall-situation-box">

                            <div class="analysis-overall-situation-left-box">
                                <div class="analysis-overall-situation-left-xian"></div>
                                <div class="analysis-overall-situation-left-guanxi">且</div>
                            </div>

                            <div class="analysis-overall-situation-list-box" id="xinwei-whole">


                            </div>

                        </div>

                        <div class="analysis-foot___P797w">
                            <span class="analysis-overall-situation-add">
                                <img src="./static/img/fenzu.png">
                                添加条件
                            </span>
                        </div>
                    </div>

                </div>

                <div class="block___2n0We">
                    <div class="analysis-con-left-title">会话间隔时长</div>
                    <div class="analysis-con-left-screen-box2" >
                        <input type="number" class="route-time-input" min="0" max="999" value="30">
                        <div class="route-condition">分钟</div>
                        <img class="route-duration-explain" src="./static/img/capytishi.png" title="即路径中相邻事件的最大间隔时间"/>
                    </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="route-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="routeanalysis-echarts" style="height: 900px;"></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="eventsplit-box-dot" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        <div class="action-row">
            <div class="action-left">
                <div class="ant-select-selector2 route-ant-select-selector1" data-index="{{index}}"> {{item.eventDesc}} </div>
                <span class="word___2ZSA5"> 按 </span>
                <div class="ant-select-selector2 route-ant-select-selector2" data-index="{{index}}"> {{item.fieDesc}} </div>
                <div class="analysis-ta-property-range analysis-granularity userevent-granularity" data-index="{{index}}"> <img src="./static/img/shezhi2.png"> </div>
                <span class="word___2ZSA5">拆分</span>
            </div>
            <div class="action-right route-action-right" data-index="{{index}}">
                <img src="./static/img/del.png">
            </div>
        </div>
    {{#  }); }}
</script>