新增用户搜索事件管理，更新使用手册

web/main.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="./static/css/daterangepicker.css"><!-- 时间选择控件样式 -->
   <!-- <link rel="stylesheet" href="./static/css/fixed-table.css"> table -->
   <link rel="stylesheet" href="./static/css/mmGrid.css">
+  <link rel="stylesheet" href="./static/css/ySelect.css">
  
   <!-- <link rel="stylesheet" href="./static/img/iconfont/iconfont.css"> -->
   <script src="./src/jquery.min.js"></script>
@@ -43,6 +44,7 @@
   
   <script src="./src/mmGrid.js"  type="text/javascript"></script>
   <script src="./src/mmPaginator.js"  type="text/javascript"></script>
+  <script src="./src/ySelect.js"  type="text/javascript"></script>
   
   
   <!-- <script src="./src/doT.js"></script> -->

web/pages/dashboard.html

@@ -53,6 +53,7 @@
                       <dd><a class="ajax-content" href="userattradmin" data-id="conetnt">用户属性管理</a></dd>
                       <dd><a class="ajax-content" href="customname" data-id="conetnt">埋点数据管理</a></dd>
                       <dd><a class="ajax-content" href="datacheck" data-id="conetnt">埋点数据检查</a></dd>
+                      <dd><a class="ajax-content" href="usermodelevent" data-id="conetnt">用户搜索事件管理</a></dd>
                     </dl>
                   </li>
                 </ul>

web/pages/manual.html

@@ -206,7 +206,17 @@
             <p><img src="../static/img/manual/390A7109-3566-4ffc-8D0E-EE4178217A01.png"  referrerpolicy="no-referrer" alt="390A7109-3566-4ffc-8D0E-EE4178217A01"></p>
             <p>添加完的用户标签可在分析看板里使用</p>
             <p><img src="../static/img/manual/32D36F11-FFC8-49c2-AC31-8A048FCAC1A0.png"  referrerpolicy="no-referrer" alt="32D36F11-FFC8-49c2-AC31-8A048FCAC1A0"></p>
-            
+             
+            <h2> <a name='usersearch'>用户搜索 </a></h2>
+            <p>通过各类用户属性查询出对应用户数据</p>
+            <p><img src="../static/img/manual/94F442A8-F82D-4e6d-AF98-C7CC9D98B78E.png"  referrerpolicy="no-referrer" alt="94F442A8-F82D-4e6d-AF98-C7CC9D98B78E"></p>
+            <P>点击查看用户列表，进入用户列表界面</P>
+            <p><img src="../static/img/manual/E7C1AEDA-058D-49c7-8A0C-116B18904558.png"  referrerpolicy="no-referrer" alt="E7C1AEDA-058D-49c7-8A0C-116B18904558"></p>
+            <p>用户列表界面展示，查询出所有用户信息，并可下载导出报表数据</p>
+            <p><img src="../static/img/manual/5E0C9290-7E9E-45e0-A080-410EB8AA6AC6.png"  referrerpolicy="no-referrer" alt="5E0C9290-7E9E-45e0-A080-410EB8AA6AC6"></p>
+            <p>点击单个account_id可进入单个用户行为序列界面</p>
+            <p><img src="../static/img/manual/0DB0946C-38DD-457d-BFC0-AC44E76285E5.png"  referrerpolicy="no-referrer" alt="0DB0946C-38DD-457d-BFC0-AC44E76285E5"></p>
+            <P>用户行为序列界面，左边展示为用户各类属性数据，右上展示一段时间内用户行为柱状图和饼状图，右下展示各类行为具体时间和详情</P>
         </div>
 
         <div class="anchor-point-box">
@@ -228,6 +238,7 @@
             <div><a href="#screendata">15.筛选看板数据</a></div>
             <div><a href="#customalias">16.自动以别名</a></div>
             <div><a href="#userlable">17.用户标签</a></div>
+            <div> <a href="#usersearch">18.用户搜索</a> </div>
         </div>     
     </div>
 </body>

web/pages/userinfo.html

@@ -39,6 +39,9 @@
                     <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>
+                        <select class="userinfo-event-select" multiple="multiple" >
+
+                        </select>
                     </div>
 
                     <div class="analtsis-condition-right-box">
@@ -90,6 +93,14 @@
 
 </div>
 
+<script id="userinfo-event-select-dot" type="text/html">
+
+    {{#  layui.each(d, function(index, item){ }}
+        <option value="{{item.event}}">{{item.event_name}}</option>
+    {{#  }); }}
+
+</script>
+
 <script id="user-left-content-box-dot" type="text/html">
 
     {{#  layui.each(d.new_columns, function(index, item){ }}

web/pages/usermodelevent.html

@@ -0,0 +1,46 @@
+
+<div class="eventattradmin-bg-box">
+
+    <div class="eventattradmin-box">
+        <div class="eventattradmin-top-box">
+            <div class="eventattradmin-left___y490Q">用户搜索模块事件<i class="layui-icon" title="">&#xe60b;</i> </div>
+
+            <div class="eventattradmin-right___1TIt8">
+                <input id="fileupload-user" type="file" class="form-control"  name="file"  >
+                <button type="button" class="layui-btn" id="test9" style="background-color:#3d90ff;">开始上传</button>
+            </div>
+        </div>
+
+
+        <div class="customname-table-box">
+            <div class="customname-info-bg">
+                <div class="customname-content-box">
+
+                       
+                    <div class="layui-tab-content">
+                        
+
+                    </div>
+               
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+<script id="layui-tab-content-dot" type="text/html">
+    {{# layui.each(d, function(index, item) {  }}
+
+        <div class="customname-val-right-box">
+            <div class="customname-val-right">
+                <div class="customname-val-right-val">{{item.event_name}}</div>
+                <div class="customname-val-right-val">{{item.event}}</div>
+            </div>
+        </div>
+
+    {{#  }); }}
+</script>

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'] = {

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('<div class="fs-wrap' + multiple + '"></div>');
+                this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');
+                this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');
+                this.$select.addClass('hidden');
+                this.$wrap = this.$select.closest('.fs-wrap');
+                this.reload();
+            },
+
+            reload: function() {
+                if (this.settings.showSearch) {
+                    var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /><span class="fs-selectAll"><i class="fa fa-check-square-o"></i></span></div>';
+                    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 += '<div class="fs-optgroup">';
+                        choices += '<div class="fs-optgroup-label">' + $el.prop('label') + '</div>';
+                        choices += $this.buildOptions($el);
+                        choices += '</div>';
+                    }
+                    else {
+                        var selected = $el.is('[selected]') ? ' selected' : '';
+                        choices += '<div class="fs-option selected' + selected + '" data-value="' + $el.prop('value') + '"><span class="fs-checkbox"><i></i></span><div class="fs-option-label">' + $el.html() + '</div></div>';
+                    }
+                });
+
+                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);

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);

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);
                     }

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());
+                    
+                })
+            };
+            
+        }
+    };
+})();

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;

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