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

12544
18

方菁 小试身手Lv3

发表于2018-7-24 19:30

楼主
一、页面分析
1、整体简介
主题表:F_CUSTOMER_SHOPPING,F_GOODS_PURCHASE,F_INVENTORY,F_SALE_M
页面结构:宽百分比,高百分比
页面一览:
零售行业.gif

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

占比图属性

占比图属性

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. }

  88. checkBtnAndAutoHighlight();
复制代码

脚本2:数字滚动效果
    数字滚动效果.gif
文本“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.         }

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

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

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

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

脚本3:表格内容自动轮播
    表格内容自动轮播.gif
调用函数: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、 报表资源
    说明.png
    说明:.rptttpl后缀文件新建空报表后如下图所示上传
   

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

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

最近看过此主题的会员

ncjindsif

liucca

980

wulili

刘玉胜

esen_3T3F9HBK8R8

13407717840

Ninini

chestnut

esen_4PG7NJS3QF

wangtongxue

槐序

咏之

zhzh

18个回答

只看楼主

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页

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

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

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流