登录/注册
    我的位置：首页 › 大数据分析-亿信BI › BI-辰哥课堂 › DEMO解析第二期：领导驾驶舱之零售行业 ...

    DEMO解析第二期：领导驾驶舱之零售行业

    复制链接 | 收藏本帖
    13719
    19

    方菁 小试身手Lv3

    发表于2018-7-24 19:30

    楼主
    一、页面分析
    1、整体简介
    主题表：F_CUSTOMER_SHOPPING，F_GOODS_PURCHASE，F_INVENTORY，F_SALE_M
    页面结构：宽百分比，高百分比
    页面一览：

    2、模块详解
    1) 本月销售趋势
    本块上半部分是本月实际销售额和本月目标销售额，以及完成率的占比图。
    下半部分为本月的销售额趋势，蓝色系列为每日实际销售额，黄色系列为每日的目标销售额。可以清晰的观察到日销售额的完成情况。
    此模块的技术难点在于上面两个数值的滚动效果，首先需要将数值按照背景图片的样式拉开间距，在文本的自定义样式中添加：letter-spacing:8px;然后在报表脚本处使用脚本实现数字滚动的效果（脚本2）。
    电池占比条的制作方法：上层为镂空的电池图片 （白色部分是透明的），下层为迷你占比图。迷你占比图的背景和未完成部分也是透明的，最后将两者重叠，加上背景图片。

    2) 销售概览
    本月和上月的销售指标进行对比，上面的本月和上月是两个按钮，下面是Tab标签页。
    按钮和Tab页签是通过脚本进行关联的，并且使用脚本实现了循环高亮的功能（脚本1）。中间的房子为gif动图。
    注意：1、标签页：去掉勾选标签页头可见；2、按钮：设置相同的分组名，设置其中一个按钮为默认选中。

    3) 月销售完成率
    用四个百分比指标展示了月销售额的完成情况。
    点击右上角的“more”可以跳转到子页面。（详情见领导驾驶舱之零售子页面）
    注意：“more”使用的不是按钮组件，用的图片组件。

    4)  整体运营状况
    该模块左侧使用的是雷达图，从5个方面分析整体的运营状况。右侧是柱状图，显示综合分数前三名的店铺。
    点击右上角的“more”可以跳转到子页面。（详情见领导驾驶舱之零售子页面）

    5) 库房库存预警
    此区域上部分为库房的两个总指标，下方为库房商品库存量，数值颜色有预警效果：库存量小于10为红色，库存量大于10小于30为黄色。
    表格内容自动轮播的功能使用了脚本（脚本3）。

    二、脚本说明
    脚本1：指标循环高亮                 
       
    该脚本使按钮和tab页签产生联动效果，并且让tab页签中的指标进行高亮循环播放。
    脚本中有以下几个变量需要注意：
    1- var btns = ["@by","@sy"]; //@by和@sy为按钮的名称
    2- var autoSelectAreas =[["HHH50","HHH58","HHH66","HHH62"],["HHH71","HHH75","HHH83","HHH79"]];//这8个代号分别为两个页签中四个容器的代号
    3- var texts =[["HHH52","HHH59","HHH67","HHH63"],["HHH72","HHH76","HHH84","HHH80"]];//这8个代号分别为两个页签中四个文本的代号
    4- var tabctrlId = "HHH46";//“HHH46”为tab页的代码
    1. //指标高亮循环
    2. function checkBtnAndAutoHighlight(){
    3.         var btns = ["@by","@sy"];
    4.         var autoSelectAreas = [["HHH50","HHH58","HHH66","HHH62"],["HHH71","HHH75","HHH83","HHH79"]];
    5.         var texts = [["HHH52","HHH59","HHH67","HHH63"],["HHH72","HHH76","HHH84","HHH80"]];
    6.         var ready = true;
    7.         var tabctrlId = "HHH46";
    8.         var btnDoms = [];
    9.         var textDoms = [];
    10.         if(!g_rptpage.calcParam){
    11.                 ready = false;
    12.         }else{
    13.                 for (var i = 0, l = btns.length; i < l; i++) {
    14.                         var param = g_rptpage.calcParam.getParamByName(btns[i]);
    15.                         if(!param){
    16.                                 ready = false;
    17.                                 break;
    18.                         }
    19.                         btnDoms.push(param.getBaseDom());
    20.                 }
    21.         }
    22.         if(!ready){
    23.                 var func = checkBtnAndAutoHighlight.bind(window);
    24.                 setTimeout(func,50);
    25.         }else{
    26.                 window["_auto_select_timer"] = null;
    27.                 var bindBtnClick = function(tabctrlId,idx){
    28.                         window["current_active_btn_idx_HHH46"] = idx;
    29.                         g_rptpage.widgets[tabctrlId].setActive(idx);
    30.                         changeTabSelect();
    31.                 };
    32.                 var changeTabSelect = function(){
    33.                         if(window["_auto_select_timer"]){
    34.                                 clearTimeout(window["_auto_select_timer"]);
    35.                                 window["_auto_select_timer"] = null;
    36.                         }
    37.                         window["_current_highlight_area"]=-1;
    38.                         resetAllSelectBorderStyle();
    39.                         resetAllSelectTextStyle();
    40.                         autoSelectAreaInTab();
    41.                 };
    42.                
    43.                 var setSelectBorderStyle = function(headerId){
    44.                         jQuery("#"+headerId).addClass("auto-select-area-border");
    45.                 };
    46.                 var resetSelectBorderStyle = function(headerId){
    47.                         jQuery("#"+headerId).removeClass("auto-select-area-border");
    48.                 };
    49.                 var selectTextStyle = function(headerId){
    50.                         jQuery("#" + headerId + " span").addClass("auto_select-text-color");        
    51.                 };
    52.                 var resetSelectTextStyle = function(headerId){
    53.                         jQuery("#" + headerId + " span").removeClass("auto_select-text-color");        
    54.                 };
    55.                 var resetAllSelectTextStyle = function(){
    56.                         for(var i=0,l=texts.length;i<l;i++){
    57.                                 for(var j = 0,jl = texts[i].length;j<jl;j++){
    58.                                         resetSelectTextStyle(texts[i][j]);
    59.                                 }
    60.                         }
    61.                 };
    62.                 var resetAllSelectBorderStyle = function(){
    63.                         for(var i=0,l=autoSelectAreas.length;i<l;i++){
    64.                                 for(var j = 0,jl = autoSelectAreas[i].length;j<jl;j++){
    65.                                         resetSelectBorderStyle(autoSelectAreas[i][j]);
    66.                                 }
    67.                         }
    68.                 };
    69.                 var autoSelectAreaInTab = function(){
    70.                         var idx = window["current_active_btn_idx_HHH46"];
    71.                         if(window["_current_highlight_area"]!=-1){
    72.                                 resetSelectBorderStyle(autoSelectAreas[idx][window["_current_highlight_area"]]);
    73.                                 resetSelectTextStyle(texts[idx][window["_current_highlight_area"]]);
    74.                         }
    75.                         window["_current_highlight_area"] = (window["_current_highlight_area"] + 1)%autoSelectAreas[idx].length;
    76.                         setSelectBorderStyle(autoSelectAreas[idx][window["_current_highlight_area"]]);
    77.                         selectTextStyle(texts[idx][window["_current_highlight_area"]]);
    78.                         window["_auto_select_timer"] = setTimeout(autoSelectAreaInTab,2000);
    79.                 };
    80.                 for(var i=0,l=btnDoms.length;i<l;i++){
    81.                         addEvent(btnDoms[i],"click",bindBtnClick.bind(btnDoms[i],tabctrlId,i));
    82.                 }
    83.                 addStyleSheet(".auto-select-area-border{border:1px solid #A1ACFF !important;border-radius:5px !important;}");
    84.                 addStyleSheet(".auto_select-text-color{color:#F8BB38 !important;}");
    85.                 execDomEvent(btnDoms[0],"click");
    86.         }
    87. }

    89. checkBtnAndAutoHighlight();
    复制代码

    脚本2：数字滚动效果
       
    文本“HHH88”和“HHH179”在页面刷新之后有一个滚动的出场效果，本月销售的数值有实时变动的效果。
    1. //数字滚动效果
    2. (function($){
    3.         $.fn.countTo = function (options) {
    4.                 options = options || {};
    5.                
    6.                 return $(this).each(function () {
    7.                         // set options for current element
    8.                         var settings = $.extend({}, $.fn.countTo.defaults, {
    9.                                 from:            $(this).data('from'),
    10.                                 to:              $(this).data('to'),
    11.                                 speed:           $(this).data('speed'),
    12.                                 refreshInterval: $(this).data('refresh-interval'),
    13.                                 decimals:        $(this).data('decimals')
    14.                         }, options);
    15.                         
    16.                         // how many times to update the value, and how much to increment the value on each update
    17.                         var loops = Math.ceil(settings.speed / settings.refreshInterval),
    18.                                 increment = (settings.to - settings.from) / loops;
    19.                         
    20.                         // references & variables that will change with each update
    21.                         var self = this,
    22.                                 $self = $(this),
    23.                                 loopCount = 0,
    24.                                 value = settings.from,
    25.                                 data = $self.data('countTo') || {};
    26.                         
    27.                         $self.data('countTo', data);
    28.                         
    29.                         // if an existing interval can be found, clear it first
    30.                         if (data.interval) {
    31.                                 clearInterval(data.interval);
    32.                         }
    33.                         data.interval = setInterval(updateTimer, settings.refreshInterval);
    34.                         
    35.                         // initialize the element with the starting value
    36.                         render(value);
    37.                         
    38.                         function updateTimer() {
    39.                                 value += increment;
    40.                                 loopCount++;
    41.                                 
    42.                                 render(value);
    43.                                 
    44.                                 if (typeof(settings.onUpdate) == 'function') {
    45.                                         settings.onUpdate.call(self, value);
    46.                                 }
    47.                                 
    48.                                 if (loopCount >= loops) {
    49.                                         // remove the interval
    50.                                         $self.removeData('countTo');
    51.                                         clearInterval(data.interval);
    52.                                         value = settings.to;
    53.                                        
    54.                                         if (typeof(settings.onComplete) == 'function') {
    55.                                                 settings.onComplete.call(self, value);
    56.                                         }
    57.                                 }
    58.                         }
    59.                         
    60.                         function render(value) {
    61.                                 var formattedValue = settings.formatter.call(self, value, settings);
    62.                                 $self.html(formattedValue);
    63.                         }
    64.                 });
    65.         };
    66.         
    67.         $.fn.countTo.defaults = {
    68.                 from: 0,               // the number the element should start at
    69.                 to: 0,                 // the number the element should end at
    70.                 speed: 1000,           // how long it should take to count between the target numbers
    71.                 refreshInterval: 100,  // how often the element should be updated
    72.                 decimals: 0,           // the number of decimal places to show
    73.                 formatter: formatter,  // handler for formatting the value before rendering
    74.                 onUpdate: null,        // callback method for every time the element is updated
    75.                 onComplete: null       // callback method for when the element finishes updating
    76.         };
    77.         
    78.         function formatter(value, settings) {
    79.                 return value.toFixed(settings.decimals);
    80.         }

    82.   // custom formatting example
    83.   $('#count-number').data('countToOptions', {
    84.         formatter: function (value, options) {
    85.           return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    86.         }
    87.   });
    88.   
    89.   // start all the timers
    90.   $('.timer').each(count);  
    91.   
    92.   function count(options) {
    93.         var $this = $(this);
    94.         options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    95.         $this.countTo(options);
    96.   }
    97. })(jQuery);

    99. function autoIncreHHH88(){
    100.         var txt =jQuery("#HHH88 span").text();
    101.         var from= parseInt(txt);
    102.         var to = from + parseInt(Math.random()*1000) % 10;
    103.         if(to == from){        
    104.                 to = from +1;
    105.         }
    106.         if(to>100000){
    107.                 return ;
    108.         }
    109.         var valueLength = (""+to).length;
    110.         var str = "";
    111.         for(var i=0;i<5 - valueLength;i++){
    112.                 str = str+"0";
    113.         }
    114.         str = str+to;
    115.         jQuery("#HHH88 span").text(str);
    116.         setTimeout(autoIncreHHH88,2000);
    117. }

    119. jQuery("#HHH88 span").countTo({from:0,to:1869,numberCount:5,onComplete:function(){
    120.                 setTimeout(autoIncreHHH88,2000);
    121.         },formatter:function(value,option){
    122.                 var numberCount = option.numberCount || (""+to).length;
    123.                 value  = parseInt(value);
    124.                 var valueLength = (""+value).length;
    125.                 var str = "";
    126.                 for(var i=0;i<numberCount - valueLength;i++){
    127.                         str = str+"0";
    128.                 }
    129.                 str = str+value;
    130.                 return str;
    131. }});

    133. jQuery("#HHH179 span").countTo({from:0,to:3427,numberCount:5,formatter:function(value,option){
    134.         var numberCount = option.numberCount || (""+to).length;
    135.         value  = parseInt(value);
    136.         var valueLength = (""+value).length;
    137.         var str = "";
    138.         for(var i=0;i<numberCount - valueLength;i++){
    139.                 str = str+"0";
    140.         }
    141.         str = str+value;
    142.         return str;
    143. }});
    复制代码

    脚本3：表格内容自动轮播
       
    调用函数：autoScrollTable(document.getElementById('GRID2'),document.getElementById("HHH148").clientHeight);
    “GRID2”为表格代号，“HHH148”为表格所在容器的代号。
    1. /***
    2. **表格内容自动轮播脚本
    3. **@param tableDom内容滚动的表格，最好是表格的父DIV
    4. **@param visibleHeight 可视区的高度
    5. ***/
    6. function autoScrollTable(tableDom, visibleHeight) {
    7.         var marqueesHeight = visibleHeight;
    8.         var stopscroll = false;
    9.         var scrollElem = tableDom;
    10.         var preTop = 0;
    11.         var currentTop = 0;
    12.         var stoptime = 0;
    13.         with (scrollElem) {
    14.                 style.height = parseFloat(marqueesHeight) + "px";
    15.                 style.overflow = 'hidden';
    16.                 noWrap = true;
    17.         }
    18.         var scrollUp = function () {
    19.                 if (stopscroll) {
    20.                         setTimeout(scrollUp, 50);
    21.                         return;
    22.                 }
    23.                 currentTop += 1;
    24.                 if (currentTop == (marqueesHeight + 1)) {
    25.                         stoptime += 1;
    26.                         currentTop -= 1;
    27.                         if (stoptime == 1) {
    28.                                 currentTop = 0;
    29.                                 stoptime = 0;
    30.                         }
    31.                 } else {
    32.                         preTop = scrollElem.scrollTop;
    33.                         scrollElem.scrollTop += 1;
    34.                         if (preTop == scrollElem.scrollTop) {
    35.                                 scrollElem.scrollTop = 0;
    36.                                 scrollElem.scrollTop += 1;
    37.                         }
    38.                 }
    39.                 setTimeout(scrollUp, 50);
    40.         };
    41.         var restartScroll = function () {
    42.                 scrollElem.scrollTop = 0;
    43.                 setTimeout(scrollUp, 50);
    44.         };
    45.         jQuery(tableDom).hover(function () {
    46.                 stopscroll = true;
    47.         }, function () {
    48.                 stopscroll = false;
    49.         });
    50.         setTimeout(restartScroll, 2000);
    51. }
    52. autoScrollTable(document.getElementById('GRID2'),document.getElementById("HHH148").clientHeight);
    复制代码

    三、配色信息
    底色：#0A0F31
    标题：图片
    模块
             边框：图片
             标题：#E2E5FF14px
             文字：#C3CAFF12px      高亮文字：#F8BB38
             面积图
                       填充：#7E88FF（70的透明度）
                       坐标轴/网格线： #26348F
             雷达图
                       填充：#4C60F2（60的透明度）
                       网格线：#3B2FA5
             柱状图
                       填充：第一名 #7F8EFF，第二/三名 #4646C9
             统计图提示信息
                       背景：#192069
                       文字：#FFFFFF 12px
             表格
                       列头文字：#E2E5FF 12px
                       内容文字：#DADEFF 12px
                       预警：值<10 #FF4669， 10<值<30 #FFC956

    四、资源文件
    1、 报表资源
       
        说明：.rptttpl后缀文件新建空报表后如下图所示上传
       

    2、 图片资源
        直接上传到资源管理器，默认的路径：
        /root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业
        注意：可以压缩为zip文件后上传。路径不要轻易修改，报表中在引用时使用了文件路径。

    3、 资源文件
    零售行业.rar (410.07 KB, 下载次数: )

    最近看过此主题的会员

    esen_4XMY0N6IMU

    esen_53NRBDQS8T

    leony

    yyzyy

    esen_4Y3L5ADO80

    esen_3H03HK78MGNH

    wangtuihei

    wxw

    九天

    刘子瑜

    esen_4UIBLD8PRN4M

    hyb

    不如相忘

    esen_513E25YO2T

    chenzyd

    ly.

    徐实力

    QQ空间 微信
    19个回答

    只看楼主

    yangqh 数据老手Lv5

    发表于2019-1-27 14:49

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    13#

    demo中 表格内容自动轮播脚本（脚本3），呈现的效果是滚完最后一行后瞬间跳回第一行，而无法将分析表格第一行衔接到最后一行连续滚动。如果需要实现最后一行和第一行衔接起来连续滚动，可换成如下脚本：
    function autoScrollTable(gridId){
            var timer = null;
            var stopped = false;
            var grid2 = document.getElementById(gridId);
            var table = getChildNodeAt(grid2,"table",0);
            var moveFirst2Last = function(){
                    var firstRow = table.rows[0].cloneNode(true);
                    if(!stopped){
                            var height = 0-$(table.rows[0]).height();
                            $("#"+gridId).animate({top:height+"px"},2000,function(){
                                    table.appendChild(firstRow);
                                    table.deleteRow(0);
                                    $("#"+gridId).css("top","0px");
                                    timer = setTimeout(moveFirst2Last,10);
                            });
                    }else{
                            timer = setTimeout(moveFirst2Last,10);
                    }
            };
            var stopTableScroll = function(){
                    stopped =true;
            };
            var startTableScroll = function(){
                    stopped = false;
            };
            startTableScroll();
            moveFirst2Last();
            jQuery(table).hover(stopTableScroll,startTableScroll);
    }
    autoScrollTable("GRID1");
    //grid1是需要设置滚动的分析表格代号

    回复

    混乱七星天 数据达人Lv4

    发表于2018-7-25 10:13

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    电池占比的idea简直太赞了
    指标循环高亮也很棒
    get到了好多新技能

    回复

    野蛮女汉子 初学数据Lv2

    发表于2018-7-25 10:14

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    挺详细  学习了

    回复

    ever 小试身手Lv3

    发表于2018-7-25 10:15

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    棒棒棒，正想学习这个页面就来啦

    回复

    zhangyadong 初学数据Lv2

    发表于2018-7-25 10:22

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    回复

    数据王 初学数据Lv2

    发表于2018-7-25 10:40

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    6#

    表格内容自动轮播 这个效果超级赞，已经学会la

    回复

    Roue 初学数据Lv2

    发表于2018-7-25 11:08

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    7#

    数字滚动效果不错

    回复

    瑞艾 数据达人Lv4

    发表于2018-7-25 11:17

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    8#

    向大神学习

    回复

    芒果哥 初学数据Lv2

    发表于2018-7-30 15:22

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    9#

    楼主，啥时候再更新，好想一口气看完你们的demo解析！

    回复

    想晴的天 数据小白Lv1

    发表于2018-8-6 15:55

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    10#

    赞

    回复
    上一页12下一页共2页

    登录后可回答问题，请登录或注册

    和辰哥，话技术！
    我要发帖
    热门推荐
    热门视频
    热门产品推荐
    快速回复 返回顶部 返回列表

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

    明星产品
    一站式数据分析平台-亿信ABI
    智能数据治理平台-睿治
    解决方案
    大数据治理方案
    数据标准化及质量管控方案
    主数据管理方案
    数据资产盘点方案
    联系合作

    400咨询：400-0011-866

    技术支持QQ：400-0011-866(工作日9:00-18:00)

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

    版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号