xfrontend/web/pages/analysis.html

445 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 分析 -->
<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 class="analysis-navigation-bar-datetime">当前时区</div>
</div>
<div class="analysis-navigation-bar-right">
<div class="analysis-navigation-bar-right-jisuan">
<span>近似计算</span>
<div class="layui-form" title="开启后,将近似计算触发用户数,人均次数,人均值和去重数,极大优化性能减少计算时间,结果偏差控制在千分之四内">
<div class="layui-form-item modify-layui-form-item" style="margin-bottom: 0px !important;">
<input type="checkbox" name="close" lay-skin="switch" lay-text="" class="sqsz">
</div>
</div>
</div>
<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 download-table" title="以页面格式下载全量数据">
<img src="./static/img/xiazai.png">
</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">分析指标</div>
<div class="analysis-con-left-screen-box">
<div class="analysis-con-left-screen-list-box" id="analysis-con-left-screen-list-box">
</div>
<div class="analysis-bottom-box">
<div class="analysis-bottom-jia1">
<span>+</span> 添加指标
</div>
<!-- <div class="analysis-bottom-jiagongshi">
<span>
<img src="./static/img/gongshi.png"/>
</span> 添加公式
</div> -->
</div>
</div>
</div>
<div class="block___2n0We analysis-overall">
<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">
<!-- <div class="analysis-overall-situation-list">
<div class="analysis-overall-situation-attr">最后登录时间</div>
<div class="analysis-overall-situation-fuhao">相对事件发生时刻</div>
<div class="analysis-overall-situation-input"> <input type="text" placeholder="多个用,隔开"/> </div> -->
<!-- <span class="analysis-overall-situation-section-box">
在 <div> 区间 </div> <div> <input type="text" value="-1" /> </div> <span>到</span> <div> <input type="text" value="-1" /> </div>
<div>天(相对)</div>
<span>天</span>
</span> -->
<!-- <span class="analysis-overall-situation-time-box">
<span class="layui-form">
<input type="text" id="analysis-overall-situation-time1" placeholder=" - ">
</span>
</span> -->
<!-- <p class="analysis-overall-situation-del"> <img src="./static/img/cha1.png"> </p>
</div> -->
</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>
<!-- <div class="analysis-event-splitting"><img src="./static/img/chaifen.png"> 事件拆分</div> -->
</div>
<div class="analysis-con-left-screen-box">
<div class="analysis-gpmain___3YGfw">
<!-- <div class="analysis-action-row">
<div class="analysis-action-left">
<div class="analysis-num bgcolor">1</div>
<div class="analysis-ant-dropdown-trigger">
<img src="./static/img/shaix2.png"/>
<span>SDK类型</span>
</div>
</div>
<div class="analysis-ta-property-range analysis-granularity"> <img src="./static/img/shezhi2.png"> </div>
<div class="analysis-ta-property-range analysis-section"> <img src="./static/img/shezhi2.png"> </div>
<div class="analysis-action-right"> <img src="./static/img/cha1.png"/> </div>
</div> -->
</div>
<div class="analysis-foot___P797w">
<span class="analysis-footadd___2D4YB">
<img src="./static/img/fenzu.png">
添加分组项
</span>
</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="analtsis-condition-date" readonly="readonly"></input> </div>
<div class="analtsis-condition analtsis-timeParticleSize">按天</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" title="趋势图"> <i class="iconfont" style="font-size: 18px; ">&#xe600;</i> </div>
<div class="analtsis-chart-switch select-chart" title="堆积图"> <i class="iconfont" style="font-size: 18px; ">&#xe61f;</i> </div>
<!-- <div class="analtsis-chart-switch" title="累计图"> <i class="iconfont" style="font-size: 18px; ">&#xe711;</i> </div> -->
<div class="analtsis-chart-switch" title="分布图"> <i class="iconfont" style="font-size: 18px; ">&#xe60b;</i> </div>
<!-- <div class="analtsis-chart-switch" title="饼状分布"> <i class="iconfont" style="font-size: 18px;">&#xe684;</i> </div> -->
</div>
</div>
</div>
<div class="chawushuj" style="display: none;">
<img src="./static/img/wushujv3.png">
</div>
<!-- 统计图 -->
<div class="analysis-echarts" id="analysis-echarts"></div>
<div class="table-div-box">
<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){ }}
<th>{{item}}</th>
{{# }); }}
</script>
<script id="table-fenxi-td-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<tr>
{{# layui.each(d[index], function(indexs, items){ }}
<td>{{items}}</td>
{{# }); }}
</tr>
{{# }); }}
</script>
<script id="analysis-con-left-screen-list-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="analysis-con-left-screen-list">
<!-- 指标选择 -->
{{# if(item.customEvent != "" && item.customEvent != undefined){ }}
<div class="analysis-con-left-screen-list-left-box" id="analysis-con-left-screen-list-left-box-{{index}}" style="display: none;">
{{# } else { }}
<div class="analysis-con-left-screen-list-left-box" id="analysis-con-left-screen-list-left-box-{{index}}">
{{# } }}
{{# if(item.eventNameDisplay != "" && item.eventNameDisplay != undefined){ }}
<div class="analysis-con-left-screen-list-left-zhibiaoname" id="analysis-con-left-screen-list-left-zhibiaoname-{{index}}" style="display: block;">
<input type="text" placeholder="请输入指标名" value="{{item.eventNameDisplay}}" class="analysis-con-left-screen-list-left-zhibiaoname-txt" data-index="{{index}}"/>
</div>
{{# } else { }}
<div class="analysis-con-left-screen-list-left-zhibiaoname" id="analysis-con-left-screen-list-left-zhibiaoname-{{index}}">
<input type="text" placeholder="请输入指标名" class="analysis-con-left-screen-list-left-zhibiaoname-txt" data-index="{{index}}"/>
</div>
{{# } }}
<div class="analysis-con-left-screen-list-left">
<div class="analysis-num">{{index}}</div>
<div class="analysis-zhibiao-list">
<div class="ant-dropdown-trigger analysis-zhibiao-list-type1 analysis-background" data-index="{{index}}"> {{item.event_desc}}</div>
<span style="margin-left: 6px;"></span>
<div id="analysis-zhibiao-list-type2-{{index}}" class="analysis-zhibiao-list-type2 analysis-background" data-index="{{index}}">{{item.event_attr}}</div>
{{# if(item.event_attr_id != "*"){ }}
<div id="analysis-zhibiao-list-type3-{{index}}" class="analysis-zhibiao-list-type3 analysis-background analysis-zhibiao-condition" data-index="{{index}}" data-type="{{item.event_attr_type}}">{{item.analysisname}}</div>
{{# } else { }}
<!-- <div id="analysis-zhibiao-list-type3-{{index}}" class="analysis-zhibiao-list-type3 analysis-background analysis-zhibiao-condition" data-index="{{index}}"></div> -->
{{# } }}
</div>
</div>
{{# if(item.filts.length > 0){ }}
<div class="analysis-con-left-screen-list-right-screen-bg" id="analysis-con-left-screen-list-right-screen-bg-{{index}}">
<div class="analysis-con-left-screen-list-right-screen-box">
<div class="analysis-con-left-screen-list-right-screen-qh">
<div class="analysis-con-left-screen-list-right-screen-qh-xian"></div>
{{# if(item.filts.length > 1){ }}
{{# if(item.relation === "and"){ }}
<div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}"></div>
{{# } else { }}
<div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}"></div>
{{# } }}
{{# } }}
</div>
<div style="padding-bottom: 10px;" class="analysis-zhibiao-list2-box">
{{# layui.each(item.filts, function(indexs, items){ }}
<div class="analysis-zhibiao-list analysis-zhibiao-list-mar" id="analysis-zhibiao-list-mar-{{index}}-{{indexs}}">
<div id="ta-property-select-{{index}}-{{indexs}}" class="ta-property-select analysis-zhibiao-list-type1 analysis-background" data-index="{{index}}" data-indexs="{{indexs}}"> {{items.columnDesc}}</div>
<div class="analysis-zhibiao-list-type3 analysis-background analysis-choicetypename" data-index="{{index}}" data-indexs="{{indexs}}" data-type="{{items.data_type}}">{{items.comparator_name}}</div>
<!-- {{# if(item.comparator_id != "is null" && item.comparator_id != "is not null" && item.comparator_id !="not null" && item.comparator_id != "range"){ }} -->
{{# if(items.tableType != "user_label"){ }}
<div class="analysis-zhibiao-list-type4" id="analysis-zhibiao-list-type4-{{index}}-{{indexs}}" data-index="{{index}}" data-indexs="{{indexs}}">
<input type="text" data-index="{{index}}" data-indexs="{{indexs}}" placeholder="多个条件用,隔开" value="{{items.strftv}}" autocomplete="off">
</div>
{{# } }}
<!-- {{# } }} -->
<div class="analysis-zhibiao-list-del" data-index="{{index}}" data-twonum="{{indexs}}"></div>
</div>
{{# }); }}
</div>
</div>
<div class="analysis-zhibiao-updata-list-box">
<span class="analysis-zhibiao-updata" data-index={{index}}> <img src="./static/img/shaix.png" /> 添加条件 </span>
</div>
</div>
{{# } }}
</div>
<!-- 公式 -->
{{# if(item.customEvent != "" && item.customEvent != undefined){ }}
<div class="analysis-custom-box" id="analysis-custom-box-{{index}}" style="display: block;">
{{# } else { }}
<div class="analysis-custom-box" id="analysis-custom-box-{{index}}">
{{# } }}
<div class="analysis-custom-top">
<div class="analysis-num">{{index}}</div>
<div class="analysis-con-left-screen-list-left-zhibiaoname2"> <input autocomplete="off" data-index="{{index}}" type="text" value="{{item.eventNameDisplay}}" placeholder="请出入指标名"/></div>
</div>
<div class="analysis-custom-event-box">
<input class="analysis-custom-event-txt" data-index="{{index}}" type="text" value="{{item.customEvent}}" placeholder="直接输入运算符或点击选择事件" autocomplete="off"/>
</div>
<div class="analysis-custom-event-dis-box" id="analysis-custom-event-dis-box-{{index}}">
<div class="analysis-custom-event-box analysis-custom-event-box-display">
<div class="analysis-custom-event-type">用户登录</div>
<div class="analysis-custom-event-img"></div>
<div class="">.</div>
<div class="analysis-custom-event-type">触发用户数</div>
</div>
</div>
{{# if(item.filts.length > 0){ }}
<div class="analysis-con-left-screen-list-right-screen-bg">
<div class="analysis-con-left-screen-list-right-screen-box">
<div class="analysis-con-left-screen-list-right-screen-qh">
<div class="analysis-con-left-screen-list-right-screen-qh-xian"></div>
{{# if(item.filts.length > 1){ }}
{{# if(item.condrelation === "and"){ }}
<div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}"></div>
{{# } else { }}
<div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}"></div>
{{# } }}
{{# } }}
</div>
<div style="padding-bottom: 10px;" class="analysis-zhibiao-list2-box">
{{# layui.each(item.filts, function(indexs, items){ }}
<div class="analysis-zhibiao-list analysis-zhibiao-list-mar" id="analysis-zhibiao-list-mar-{{index}}-{{indexs}}">
<div id="ta-property-select-{{index}}-{{indexs}}" class="ta-property-select analysis-zhibiao-list-type1 analysis-background" data-index="{{index}}" data-indexs="{{indexs}}"> {{items.columnDesc}}</div>
<div class="analysis-zhibiao-list-type3 analysis-background analysis-choicetypename" data-index="{{index}}" data-indexs="{{indexs}}">{{items.comparator_name}}</div>
<!-- {{# if(item.comparator_id != "is null" && item.comparator_id != "is not null" && item.comparator_id !="not null" && item.comparator_id != "range"){ }} -->
<div class="analysis-zhibiao-list-type4" id="analysis-zhibiao-list-type4-{{index}}-{{indexs}}" data-index="{{index}}" data-indexs="{{indexs}}"> <input type="text" data-index="{{index}}" data-indexs="{{indexs}}" placeholder="多个条件用,隔开" value="{{items.strftv}}"> </div>
<!-- {{# } }} -->
<div class="analysis-zhibiao-list-del" data-index="{{index}}" data-twonum="{{indexs}}"></div>
</div>
{{# }); }}
</div>
</div>
<!-- <div class="analysis-zhibiao-updata-list-box">
<span class="analysis-zhibiao-updata" data-index={{index}}> <img src="./static/img/shaix.png" /> 添加条件 </span>
</div> -->
</div>
{{# } }}
{{# if(item.formatname == undefined){ }}
<div class="ant-select-selector" data-index="{{index}}">两位小数</div>
{{# } else { }}
<div class="ant-select-selector" data-index="{{index}}">{{item.formatname}}</div>
{{# } }}
</div>
<!-- 操作按钮 -->
<div class="analysis-con-left-screen-list-right-box">
<div class="analysis-con-left-screen-list-right" id="analysis-con-left-screen-list-right-{{index}}">
<div class="analysis-chongmingming" data-index="{{index}}" title="重命名指标"></div>
<div class="analysis-chongmingming-del" data-index="{{index}}" title="取消重命名"></div>
<div class="analysis-shaix analysis-shaix-jinting" data-index="{{index}}" title="指标筛选"></div>
<div class="analysis-gongshi analysis-zuhe" data-index="{{index}}" data-type="combination" title="组合"></div>
<div class="analysis-gongshi" data-index="{{index}}" data-type="formula" title="切换为指标公式"></div>
<div class="analysis-zhibiao" data-index="{{index}}" title="切换为指标选择"></div>
<div class="analysis-jia1" data-index="{{index}}" title="添加指标"></div>
<div class="analysis-fuzhi" title="复制指标" data-index="{{index}}"></div>
{{# if(item.is_show || item.is_show == undefined){ }}
<div class="analysis-isshow analysis-isshow-click" title="显示" data-type="true" data-index="{{index}}"></div>
{{# } else { }}
<div class="analysis-ishide analysis-isshow-click" title="隐藏" data-type="false" data-index="{{index}}"></div>
{{# } }}
<div class="analysis-del" data-index="{{index}}" title="删除指标"></div>
</div>
</div>
</div>
{{# }); }}
</script>
<script id="analysis-gpmain___3YGfw-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="analysis-action-row">
<div class="analysis-action-left">
<div class="analysis-num bgcolor">{{index}}</div>
<div class="analysis-ant-dropdown-trigger" data-index="{{index}}">
<!-- <img src="./static/img/shaix2.png"/> -->
<span>{{item.columnDesc}}</span>
</div>
</div>
<!-- <div class="analysis-ta-property-range analysis-granularity" data-index="{{index}}" data-type="{{item.data_type}}"> <img src="./static/img/shezhi2.png"> </div> -->
<!-- {{# if(item.data_type === "int"){ }}
<div class="analysis-ta-property-range analysis-section"> <img src="./static/img/shezhi2.png"> </div>
{{# } }} -->
{{# if(item.data_type === "datetime"){ }}
<div class="analysis-ta-property-range analysis-granularity" data-index="{{index}}" data-type="{{item.data_type}}"> <img src="./static/img/shezhi2.png"> </div>
{{# } }}
{{# if(item.data_type === "array"){ }}
<div class="analysis-ta-property-range analysis-granularity" data-index="{{index}}" data-type="{{item.data_type}}"> <img src="./static/img/shezhi2.png"> </div>
{{# } }}
<div class="analysis-action-right" data-index="{{index}}"> <img src="./static/img/cha1.png"/> </div>
</div>
{{# }); }}
</script>
<script id="analysis-overall-situation-list-box-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="analysis-overall-situation-list">
<div class="analysis-overall-situation-attr" data-index="{{index}}">{{item.columnDesc}}</div>
<div class="analysis-overall-situation-fuhao" id="analysis-overall-situation-fuhao-{{index}}" data-index="{{index}}" data-type="{{item.data_type}}" >{{item.comparator_name}}</div>
{{# if(item.comparator_id != "is null" && item.comparator_id != "is not null" && item.comparator_id !="not null" && item.comparator_id != "range"){ }}
<!-- <div class="analysis-overall-situation-input" > <input type="text" data-index="{{index}}" placeholder="多个用,隔开" value="{{item.strftv}}" /> </div> -->
{{# if(item.data_type != "datetime" && item.data_type != "user_label"){ }}
<div class="analysis-overall-situation-input" data-type="{{item.data_type}}" data-index="{{index}}">
<input type="text" data-index="{{index}}" placeholder="多个用,隔开" value="{{item.strftv}}" data-type="{{item.data_type}}" autocomplete="off"/>
</div>
{{# } else if(item.data_type == "user_label"){ }}
{{# } else { }}
<div class="analysis-overall-situation-date" id="analysis-overall-situation-date{{index}}" data-type="{{item.data_type}}" data-index="{{index}}">
{{item.ftv}}
</div>
{{# } }}
{{# } }}
{{# if(item.comparator_id === "range"){ }}
<div class="analysis-overall-situation-input2" > <input data-index="{{index}}" type="text" value="{{item.section[0]}}" name="start" autocomplete="off"/> <span></span> <input autocomplete="off" data-index="{{index}}" name="end" type="text" value="{{item.section[1]}}"/> <span>之间</span> </div>
{{# } }}
<p class="analysis-overall-situation-del" data-index="{{index}}"> <img src="./static/img/cha1.png"> </p>
</div>
{{# }); }}
</script>