diff --git a/web/main.html b/web/main.html index a8c244c..8373b6d 100644 --- a/web/main.html +++ b/web/main.html @@ -11,6 +11,7 @@ + @@ -43,6 +44,7 @@ + diff --git a/web/pages/dashboard.html b/web/pages/dashboard.html index d712a89..f5c1d7a 100644 --- a/web/pages/dashboard.html +++ b/web/pages/dashboard.html @@ -53,6 +53,7 @@
用户属性管理
埋点数据管理
埋点数据检查
+
用户搜索事件管理
diff --git a/web/pages/manual.html b/web/pages/manual.html index 4eb2ec5..950dccf 100644 --- a/web/pages/manual.html +++ b/web/pages/manual.html @@ -206,7 +206,17 @@

390A7109-3566-4ffc-8D0E-EE4178217A01

添加完的用户标签可在分析看板里使用

32D36F11-FFC8-49c2-AC31-8A048FCAC1A0

- + +

用户搜索

+

通过各类用户属性查询出对应用户数据

+

94F442A8-F82D-4e6d-AF98-C7CC9D98B78E

+

点击查看用户列表，进入用户列表界面

+

E7C1AEDA-058D-49c7-8A0C-116B18904558

+

用户列表界面展示，查询出所有用户信息，并可下载导出报表数据

+

5E0C9290-7E9E-45e0-A080-410EB8AA6AC6

+

点击单个account_id可进入单个用户行为序列界面

+

0DB0946C-38DD-457d-BFC0-AC44E76285E5

+

用户行为序列界面，左边展示为用户各类属性数据，右上展示一段时间内用户行为柱状图和饼状图，右下展示各类行为具体时间和详情

@@ -228,6 +238,7 @@
15.筛选看板数据
16.自动以别名
17.用户标签
+
18.用户搜索
diff --git a/web/pages/userinfo.html b/web/pages/userinfo.html index eee994f..fb659f2 100644 --- a/web/pages/userinfo.html +++ b/web/pages/userinfo.html @@ -39,6 +39,9 @@
按天
+
@@ -90,6 +93,14 @@
+ + diff --git a/web/src/x.min.js b/web/src/x.min.js index e7b5d00..9e9a8c7 100644 --- a/web/src/x.min.js +++ b/web/src/x.min.js @@ -188,7 +188,6 @@ var X = window.X || { }, success:function(d){ layer.close(index); - console.log(d); if(d.code == 0){ if( JSON.stringify(d.data) != "{}" && JSON.stringify(d.data) != "[]" && d.data != null && d.data != ""){ callback && callback(d.data); @@ -203,7 +202,7 @@ var X = window.X || { X.gourl("login"); location.reload(); }else if(d.code == -9){ - callback && callback("查无数据"); + layer.msg(d.msg); }else { layer.msg(d.msg); } @@ -264,7 +263,6 @@ var X = window.X || { X.gourl("login"); location.reload(); }else if(d.code == -9){ - callback && callback("查无数据"); }else { layer.msg(d.msg); @@ -15016,6 +15014,7 @@ var X = window.X || { var event_list,start_time,end_time,userdata; + // 日期渲染 X.daterender("#analtsis-condition-date",function(start, end, label){ @@ -15049,11 +15048,43 @@ var X = window.X || { X.api("ck/event_list","get",{},function(d){ event_list = d; + X.laytpldata("#userinfo-event-select-dot",d,".userinfo-event-select",function(){ + $('.userinfo-event-select').ySelect( + { + placeholder: '全部事件', + searchText: '搜索', + showSearch: true, + numDisplayed: 2, + overflowText: '{n}项', + isCheck: false + } + ); + }); if(X['DATA']['search-user-id']){ updatasolouser(); } }); + $(document).off('change','.userinfo-event-select').on('change','.userinfo-event-select',function(){ + var Values = $('.userinfo-event-select').ySelectedValues(","); + var Texts = $('.userinfo-event-select').ySelectedTexts(","); + if(Values && Texts){ + var Valuesarr = Values.split(','); + var Textsarr = Texts.split(','); + const eventarr = []; + for(let i in Valuesarr){ + var arr = { + 'event': Valuesarr[i], + 'event_name': Textsarr[i] + } + eventarr.push(arr); + } + event_list = eventarr; + updatasolouser(); + } + + + }); $(document).off('click','.analtsis-condition').on('click','.analtsis-condition',function(){ var type = $(".userinfo-pie-echarts").css("display"); @@ -15077,7 +15108,7 @@ var X = window.X || { // 520_624fc7b902e7a090f2225612 // X.DATA['search-user-id'] X.api("ck/solo_user","post",{account_id: X.DATA['search-user-id'] ,event_list:event_list,start_time:start_time,end_time:end_time},function(val){ - userdata = val + userdata = val; if(val.event_count.date.length > 0){ userinfoechert(val.event_count); } @@ -15616,6 +15647,30 @@ var X = window.X || { } }; })(); +// srczip/logic/usermodelevent.js +(function(){ + X.pageLogic['usermodelevent'] = { + init : function(){ + + updataselect_list(); + + X.uploadfile("ck/add_event_list","#fileupload-user",function(res){ + updataselect_list(); + }); + + function updataselect_list(){ + + X.api("ck/event_list","get",{},function(res){ + X.laytpldata('#layui-tab-content-dot',res,'.layui-tab-content'); + + $(".layui-tab-content").css('height',$(".customname-content-box").height()); + + }) + }; + + } + }; +})(); // srczip/logic/userpar.js (function(){ X.pageLogic['userpar'] = { diff --git a/web/src/ySelect.js b/web/src/ySelect.js new file mode 100644 index 0000000..6324e3e --- /dev/null +++ b/web/src/ySelect.js @@ -0,0 +1,315 @@ +(function($) { + $.fn.ySelect = function(options) { + var defaultOptions={ + placeholder: '请选择', + numDisplayed: 4, + overflowText: '{n} 项', + searchText: '搜索', + showSearch: true + } + if (typeof options == 'string' ) { + var settings = options; + } + else { + + var settings = $.extend(true,{},defaultOptions, options); + } + + + /** + * Constructor + */ + function ySelect(select, settings) { + this.$select = $(select); + this.settings = settings; + this.create(); + } + + + /** + * Prototype class + */ + ySelect.prototype = { + create: function() { + var multiple = this.$select.is('[multiple]') ? ' multiple' : ''; + this.$select.wrap('
'); + this.$select.before('
' + this.settings.placeholder + '
'); + this.$select.before(''); + this.$select.addClass('hidden'); + this.$wrap = this.$select.closest('.fs-wrap'); + this.reload(); + }, + + reload: function() { + if (this.settings.showSearch) { + var search = '
'; + this.$wrap.find('.fs-dropdown').prepend(search); + } + var choices = this.buildOptions(this.$select); + this.$wrap.find('.fs-options').html(choices); + this.reloadDropdownLabel(); + }, + + destroy: function() { + this.$wrap.find('.fs-label-wrap').remove(); + this.$wrap.find('.fs-dropdown').remove(); + this.$select.unwrap().removeClass('hidden'); + }, + + buildOptions: function($element) { + var $this = this; + + var choices = ''; + $element.children().each(function(i, el) { + var $el = $(el); + + if ('optgroup' == $el.prop('nodeName').toLowerCase()) { + choices += '
'; + choices += '
' + $el.prop('label') + '
'; + choices += $this.buildOptions($el); + choices += '
'; + } + else { + var selected = $el.is('[selected]') ? ' selected' : ''; + choices += '
' + $el.html() + '
'; + } + }); + + return choices; + }, + + reloadDropdownLabel: function() { + var settings = this.settings; + var labelText = []; + + this.$wrap.find('.fs-option.selected').each(function(i, el) { + labelText.push($(el).find('.fs-option-label').text()); + }); + + if (labelText.length < 1) { + labelText = settings.placeholder; + } + else if (labelText.length > settings.numDisplayed) { + labelText = settings.overflowText.replace('{n}', labelText.length); + } + else { + labelText = labelText.join(', '); + } + + this.$wrap.find('.fs-label').html(labelText); + this.$select.change(); + + + }, + setwrap: function() { + // if(settings.isCheck==false) + // this.$wrap.find('.fs-dropdown').addClass('hidden'); + return "123"; + }, + } + + + /** + * Loop through each matching element + */ + return this.each(function() { + var data = $(this).data('ySelect'); + + if (!data) { + data = new ySelect(this, settings); + $(this).data('ySelect', data); + } + + if (typeof settings == 'string') { + data[settings](); + } + }); + } + + + /** + * Events + */ + window.ySelect = { + 'active': null, + 'idx': -1 + }; + + function setIndexes($wrap) { + $wrap.find('.fs-option:not(.hidden)').each(function(i, el) { + $(el).attr('data-index', i); + $wrap.find('.fs-option').removeClass('hl'); + }); + $wrap.find('.fs-search input').focus(); + window.ySelect.idx = -1; + } + + function setScroll($wrap) { + var $container = $wrap.find('.fs-options'); + var $selected = $wrap.find('.fs-option.hl'); + + var itemMin = $selected.offset().top + $container.scrollTop(); + var itemMax = itemMin + $selected.outerHeight(); + var containerMin = $container.offset().top + $container.scrollTop(); + var containerMax = containerMin + $container.outerHeight(); + + if (itemMax > containerMax) { // scroll down + var to = $container.scrollTop() + itemMax - containerMax; + $container.scrollTop(to); + } + else if (itemMin < containerMin) { // scroll up + var to = $container.scrollTop() - containerMin - itemMin; + $container.scrollTop(to); + } + } + + $(document).on('click', '.fs-selectAll', function() { + $(this).parent().next().find('.fs-option.selected').click(); + $(this).parent().next().find('.fs-option').click(); + $(this).addClass('selected'); + }); + $(document).on('click', '.fs-selectAll.selected', function() { + $(this).parent().next().find('.fs-option.selected').click(); + $(this).removeClass('selected'); + }); + + $(document).on('click', '.fs-option', function() { + var $wrap = $(this).closest('.fs-wrap'); + + if ($wrap.hasClass('multiple')) { + var selected = []; + + $(this).toggleClass('selected'); + $wrap.find('.fs-option.selected').each(function(i, el) { + selected.push($(el).attr('data-value')); + }); + } + else { + var selected = $(this).attr('data-value'); + $wrap.find('.fs-option').removeClass('selected'); + $(this).addClass('selected'); + $wrap.find('.fs-dropdown').hide(); + } + + $wrap.find('select').val(selected); + $wrap.find('select').ySelect('reloadDropdownLabel'); + $wrap.find('select').ySelect('setwrap'); + }); + $(document).on('keyup', '.fs-search input', function(e) { + if (40 == e.which) { + $(this).blur(); + return; + } + + var $wrap = $(this).closest('.fs-wrap'); + var keywords = $(this).val(); + + $wrap.find('.fs-option, .fs-optgroup-label').removeClass('hidden'); + + if ('' != keywords) { + $wrap.find('.fs-option').each(function() { + var regex = new RegExp(keywords, 'gi'); + if (null === $(this).find('.fs-option-label').text().match(regex)) { + $(this).addClass('hidden'); + } + }); + + $wrap.find('.fs-optgroup-label').each(function() { + var num_visible = $(this).closest('.fs-optgroup').find('.fs-option:not(.hidden)').length; + if (num_visible < 1) { + $(this).addClass('hidden'); + } + }); + } + + setIndexes($wrap); + }); + + $(document).on('click', function(e) { + var $el = $(e.target); + var $wrap = $el.closest('.fs-wrap'); + + if (0 < $wrap.length) { + if ($el.hasClass('fs-label')||$el.hasClass('fs-arrow')) { + window.ySelect.active = $wrap; + var is_hidden = $wrap.find('.fs-dropdown').hasClass('hidden'); + $('.fs-dropdown').addClass('hidden'); + + if (is_hidden) { + $wrap.find('.fs-dropdown').removeClass('hidden'); + } + else { + $wrap.find('.fs-dropdown').addClass('hidden'); + } + + setIndexes($wrap); + } + } + else { + $('.fs-dropdown').addClass('hidden'); + window.ySelect.active = null; + } + }); + + $(document).on('keydown', function(e) { + var $wrap = window.ySelect.active; + + if (null === $wrap) { + return; + } + else if (38 == e.which) { // up + e.preventDefault(); + + $wrap.find('.fs-option').removeClass('hl'); + + if (window.ySelect.idx > 0) { + window.ySelect.idx--; + $wrap.find('.fs-option[data-index=' + window.ySelect.idx + ']').addClass('hl'); + setScroll($wrap); + } + else { + window.ySelect.idx = -1; + $wrap.find('.fs-search input').focus(); + } + } + else if (40 == e.which) { // down + e.preventDefault(); + + var last_index = $wrap.find('.fs-option:last').attr('data-index'); + if (window.ySelect.idx < parseInt(last_index)) { + window.ySelect.idx++; + $wrap.find('.fs-option').removeClass('hl'); + $wrap.find('.fs-option[data-index=' + window.ySelect.idx + ']').addClass('hl'); + setScroll($wrap); + } + } + else if (32 == e.which || 13 == e.which) { // space, enter + $wrap.find('.fs-option.hl').click(); + } + else if (27 == e.which) { // esc + $('.fs-dropdown').addClass('hidden'); + window.ySelect.active = null; + } + }); + + //update by ycx,for this plugin to get selected values + $.fn.ySelectedValues=function (splitString) + { + var result=""; + var $selects=this.find("option:selected"); + for (var i = 0; i < $selects.length; i++) { + result+=$selects[i].value+((i==$selects.length-1)?"":splitString); + } + return result; + } + $.fn.ySelectedTexts=function (splitString) + { + var result=""; + var $selects=this.find("option:selected"); + for (var i = 0; i < $selects.length; i++) { + result+=$selects[i].text+((i==$selects.length-1)?"":splitString); + } + return result; + } + +})(jQuery); diff --git a/web/srczip/common.js b/web/srczip/common.js index 936d746..8e3e2b2 100644 --- a/web/srczip/common.js +++ b/web/srczip/common.js @@ -187,7 +187,6 @@ var X = window.X || { }, success:function(d){ layer.close(index); - console.log(d); if(d.code == 0){ if( JSON.stringify(d.data) != "{}" && JSON.stringify(d.data) != "[]" && d.data != null && d.data != ""){ callback && callback(d.data); @@ -202,7 +201,7 @@ var X = window.X || { X.gourl("login"); location.reload(); }else if(d.code == -9){ - callback && callback("查无数据"); + layer.msg(d.msg); }else { layer.msg(d.msg); } @@ -263,7 +262,6 @@ var X = window.X || { X.gourl("login"); location.reload(); }else if(d.code == -9){ - callback && callback("查无数据"); }else { layer.msg(d.msg); diff --git a/web/srczip/logic/userinfo.js b/web/srczip/logic/userinfo.js index 6f3ed9f..793666d 100644 --- a/web/srczip/logic/userinfo.js +++ b/web/srczip/logic/userinfo.js @@ -5,6 +5,7 @@ var event_list,start_time,end_time,userdata; + // 日期渲染 X.daterender("#analtsis-condition-date",function(start, end, label){ @@ -38,11 +39,43 @@ X.api("ck/event_list","get",{},function(d){ event_list = d; + X.laytpldata("#userinfo-event-select-dot",d,".userinfo-event-select",function(){ + $('.userinfo-event-select').ySelect( + { + placeholder: '全部事件', + searchText: '搜索', + showSearch: true, + numDisplayed: 2, + overflowText: '{n}项', + isCheck: false + } + ); + }); if(X['DATA']['search-user-id']){ updatasolouser(); } }); + $(document).off('change','.userinfo-event-select').on('change','.userinfo-event-select',function(){ + var Values = $('.userinfo-event-select').ySelectedValues(","); + var Texts = $('.userinfo-event-select').ySelectedTexts(","); + if(Values && Texts){ + var Valuesarr = Values.split(','); + var Textsarr = Texts.split(','); + const eventarr = []; + for(let i in Valuesarr){ + var arr = { + 'event': Valuesarr[i], + 'event_name': Textsarr[i] + } + eventarr.push(arr); + } + event_list = eventarr; + updatasolouser(); + } + + + }); $(document).off('click','.analtsis-condition').on('click','.analtsis-condition',function(){ var type = $(".userinfo-pie-echarts").css("display"); @@ -66,7 +99,7 @@ // 520_624fc7b902e7a090f2225612 // X.DATA['search-user-id'] X.api("ck/solo_user","post",{account_id: X.DATA['search-user-id'] ,event_list:event_list,start_time:start_time,end_time:end_time},function(val){ - userdata = val + userdata = val; if(val.event_count.date.length > 0){ userinfoechert(val.event_count); } diff --git a/web/srczip/logic/usermodelevent.js b/web/srczip/logic/usermodelevent.js new file mode 100644 index 0000000..aaebab2 --- /dev/null +++ b/web/srczip/logic/usermodelevent.js @@ -0,0 +1,23 @@ +(function(){ + X.pageLogic['usermodelevent'] = { + init : function(){ + + updataselect_list(); + + X.uploadfile("ck/add_event_list","#fileupload-user",function(res){ + updataselect_list(); + }); + + function updataselect_list(){ + + X.api("ck/event_list","get",{},function(res){ + X.laytpldata('#layui-tab-content-dot',res,'.layui-tab-content'); + + $(".layui-tab-content").css('height',$(".customname-content-box").height()); + + }) + }; + + } + }; +})(); \ No newline at end of file diff --git a/web/static/css/style.css b/web/static/css/style.css index 063bf8c..75da6ad 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -1068,15 +1068,18 @@ input.editable-select { .userinfolist-page_table .table-fenxi-box tr td{ max-width: 240px; - padding: 16px; + padding: 0 16px; } .userinfolist-page_table .table-bordered tr th{ max-width: 240px; - padding: 16px; + padding: 0 16px; } .table-view .table th, .table-view .table td{ /* padding: 16.3px 0; */ - height: 48px; + height: 45px; +} +.table-view .table-striped th, .table-view .table-striped td { + height: 45px !important; } .userinfo-left-box { width: 270px; diff --git a/web/static/css/ySelect.css b/web/static/css/ySelect.css new file mode 100644 index 0000000..bb52e39 --- /dev/null +++ b/web/static/css/ySelect.css @@ -0,0 +1,177 @@ +.fs-wrap { + position: relative; + display: inline-block; + width: 95px; + margin: 3px; + font-size: 12px; + line-height: 1; +} + +.fs-label-wrap { + position: relative; + border: 1px solid #f0f0f0; + cursor: default; + color: #555; + /* border-radius: 4px; */ + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); +} + +.fs-label-wrap, +.fs-dropdown { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.fs-label-wrap .fs-label { + height: 20px; + line-height: 20px; + padding: 4px 22px 4px 8px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + cursor: pointer; +} + +.fs-arrow { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 6px solid #000; + position: absolute; + top: 0; + right: 4px; + bottom: 0; + margin: auto; + cursor: pointer; +} + +.fs-dropdown { + position: absolute; + background-color: #fff; + border: 1px solid #ccc; + /*margin-top: 2px;*/ + width: 100%; + z-index: 1000; + border-radius: 4px; +} + +.fs-dropdown .fs-options { + max-height: 200px; + overflow: auto; +} + +.fs-search input { + width: 90%; + padding: 2px 4px; + border: 0; + +} + +.fs-selectAll { + float: right; + cursor: pointer; + margin-top: 4px; + height: auto; +} + +.fs-selectAll.selected { + float: right; + cursor: pointer; + margin-top: 4px; + height: auto; + color: green; +} + +.fs-selectAll:hover{ + background-color: #eee; +} + +.fs-option, +.fs-search, +.fs-optgroup-label { + padding: 6px 8px; + border-bottom: 1px solid #eee; + cursor: default; +} + +.fs-option { + cursor: pointer; +} + +.fs-option.hl { + background-color: #f5f5f5; +} + +.fs-wrap.multiple .fs-option { + position: relative; + padding-left: 30px; +} + +.fs-wrap.multiple .fs-checkbox { + position: absolute; + display: block; + width: 30px; + top: 0; + left: 0; + bottom: 0; +} + +.fs-wrap.multiple .fs-option .fs-checkbox i { + position: absolute; + margin: auto; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 14px; + height: 14px; + border: 1px solid #aeaeae; + border-radius: 4px; + background-color: #fff; +} + +.fs-wrap.multiple .fs-option.selected .fs-checkbox i { + background-color: rgb(17, 169, 17); + border-color: transparent; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; + background-position: center; +} + + +.fs-wrap .fs-option:hover { + /*background-color: #f5f5f5;*/ + background: #D1F3E5; + border-radius: 4px; + margin-left:0px; + margin-right:2px; +} + +.fs-optgroup-label { + font-weight: bold; +} + +.hidden { + display: none; +} + +.fs-options::-webkit-scrollbar { + width: 6px; +} + .fs-options::-webkit-scrollbar-track { + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius:2em; + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); + background: rgba(0,0,0,0.1); +} + .fs-options::-webkit-scrollbar-thumb { + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); + background: rgba(0,0,0,0.2); + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius:2em; +} diff --git a/web/static/img/manual/0DB0946C-38DD-457d-BFC0-AC44E76285E5.png b/web/static/img/manual/0DB0946C-38DD-457d-BFC0-AC44E76285E5.png new file mode 100644 index 0000000..476d427 Binary files /dev/null and b/web/static/img/manual/0DB0946C-38DD-457d-BFC0-AC44E76285E5.png differ diff --git a/web/static/img/manual/5E0C9290-7E9E-45e0-A080-410EB8AA6AC6.png b/web/static/img/manual/5E0C9290-7E9E-45e0-A080-410EB8AA6AC6.png new file mode 100644 index 0000000..88b85fe Binary files /dev/null and b/web/static/img/manual/5E0C9290-7E9E-45e0-A080-410EB8AA6AC6.png differ diff --git a/web/static/img/manual/94F442A8-F82D-4e6d-AF98-C7CC9D98B78E.png b/web/static/img/manual/94F442A8-F82D-4e6d-AF98-C7CC9D98B78E.png new file mode 100644 index 0000000..7037199 Binary files /dev/null and b/web/static/img/manual/94F442A8-F82D-4e6d-AF98-C7CC9D98B78E.png differ diff --git a/web/static/img/manual/E7C1AEDA-058D-49c7-8A0C-116B18904558.png b/web/static/img/manual/E7C1AEDA-058D-49c7-8A0C-116B18904558.png new file mode 100644 index 0000000..4ab17d1 Binary files /dev/null and b/web/static/img/manual/E7C1AEDA-058D-49c7-8A0C-116B18904558.png differ