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

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

复制链接 | 收藏本帖

13725

: 方菁小试身手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页的代码

//指标高亮循环
function checkBtnAndAutoHighlight(){
var btns = ["@by","@sy"];
var autoSelectAreas = [["HHH50","HHH58","HHH66","HHH62"],["HHH71","HHH75","HHH83","HHH79"]];
var texts = [["HHH52","HHH59","HHH67","HHH63"],["HHH72","HHH76","HHH84","HHH80"]];
var ready = true;
var tabctrlId = "HHH46";
var btnDoms = [];
var textDoms = [];
if(!g_rptpage.calcParam){
ready = false;
}else{
for (var i = 0, l = btns.length; i < l; i++) {
var param = g_rptpage.calcParam.getParamByName(btns[i]);
if(!param){
ready = false;
break;
}
btnDoms.push(param.getBaseDom());
}
}
if(!ready){
var func = checkBtnAndAutoHighlight.bind(window);
setTimeout(func,50);
}else{
window["_auto_select_timer"] = null;
var bindBtnClick = function(tabctrlId,idx){
window["current_active_btn_idx_HHH46"] = idx;
g_rptpage.widgets[tabctrlId].setActive(idx);
changeTabSelect();
};
var changeTabSelect = function(){
if(window["_auto_select_timer"]){
clearTimeout(window["_auto_select_timer"]);
window["_auto_select_timer"] = null;
}
window["_current_highlight_area"]=-1;
resetAllSelectBorderStyle();
resetAllSelectTextStyle();
autoSelectAreaInTab();
};
var setSelectBorderStyle = function(headerId){
jQuery("#"+headerId).addClass("auto-select-area-border");
};
var resetSelectBorderStyle = function(headerId){
jQuery("#"+headerId).removeClass("auto-select-area-border");
};
var selectTextStyle = function(headerId){
jQuery("#" + headerId + " span").addClass("auto_select-text-color");
};
var resetSelectTextStyle = function(headerId){
jQuery("#" + headerId + " span").removeClass("auto_select-text-color");
};
var resetAllSelectTextStyle = function(){
for(var i=0,l=texts.length;i<l;i++){
for(var j = 0,jl = texts[i].length;j<jl;j++){
resetSelectTextStyle(texts[i][j]);
}
}
};
var resetAllSelectBorderStyle = function(){
for(var i=0,l=autoSelectAreas.length;i<l;i++){
for(var j = 0,jl = autoSelectAreas[i].length;j<jl;j++){
resetSelectBorderStyle(autoSelectAreas[i][j]);
}
}
};
var autoSelectAreaInTab = function(){
var idx = window["current_active_btn_idx_HHH46"];
if(window["_current_highlight_area"]!=-1){
resetSelectBorderStyle(autoSelectAreas[idx][window["_current_highlight_area"]]);
resetSelectTextStyle(texts[idx][window["_current_highlight_area"]]);
}
window["_current_highlight_area"] = (window["_current_highlight_area"] + 1)%autoSelectAreas[idx].length;
setSelectBorderStyle(autoSelectAreas[idx][window["_current_highlight_area"]]);
selectTextStyle(texts[idx][window["_current_highlight_area"]]);
window["_auto_select_timer"] = setTimeout(autoSelectAreaInTab,2000);
};
for(var i=0,l=btnDoms.length;i<l;i++){
addEvent(btnDoms[i],"click",bindBtnClick.bind(btnDoms[i],tabctrlId,i));
}
addStyleSheet(".auto-select-area-border{border:1px solid #A1ACFF !important;border-radius:5px !important;}");
addStyleSheet(".auto_select-text-color{color:#F8BB38 !important;}");
execDomEvent(btnDoms[0],"click");
}
}
checkBtnAndAutoHighlight();

复制代码

脚本2：数字滚动效果

文本“HHH88”和“HHH179”在页面刷新之后有一个滚动的出场效果，本月销售的数值有实时变动的效果。

//数字滚动效果
(function($){
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
})(jQuery);
function autoIncreHHH88(){
var txt =jQuery("#HHH88 span").text();
var from= parseInt(txt);
var to = from + parseInt(Math.random()*1000) % 10;
if(to == from){
to = from +1;
}
if(to>100000){
return ;
}
var valueLength = (""+to).length;
var str = "";
for(var i=0;i<5 - valueLength;i++){
str = str+"0";
}
str = str+to;
jQuery("#HHH88 span").text(str);
setTimeout(autoIncreHHH88,2000);
}
jQuery("#HHH88 span").countTo({from:0,to:1869,numberCount:5,onComplete:function(){
setTimeout(autoIncreHHH88,2000);
},formatter:function(value,option){
var numberCount = option.numberCount || (""+to).length;
value = parseInt(value);
var valueLength = (""+value).length;
var str = "";
for(var i=0;i<numberCount - valueLength;i++){
str = str+"0";
}
str = str+value;
return str;
}});
jQuery("#HHH179 span").countTo({from:0,to:3427,numberCount:5,formatter:function(value,option){
var numberCount = option.numberCount || (""+to).length;
value = parseInt(value);
var valueLength = (""+value).length;
var str = "";
for(var i=0;i<numberCount - valueLength;i++){
str = str+"0";
}
str = str+value;
return str;
}});

复制代码

脚本3：表格内容自动轮播

调用函数：autoScrollTable(document.getElementById('GRID2'),document.getElementById("HHH148").clientHeight);

“GRID2”为表格代号，“HHH148”为表格所在容器的代号。

/***
**表格内容自动轮播脚本
**@param tableDom内容滚动的表格，最好是表格的父DIV
**@param visibleHeight 可视区的高度
***/
function autoScrollTable(tableDom, visibleHeight) {
var marqueesHeight = visibleHeight;
var stopscroll = false;
var scrollElem = tableDom;
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
with (scrollElem) {
style.height = parseFloat(marqueesHeight) + "px";
style.overflow = 'hidden';
noWrap = true;
}
var scrollUp = function () {
if (stopscroll) {
setTimeout(scrollUp, 50);
return;
}
currentTop += 1;
if (currentTop == (marqueesHeight + 1)) {
stoptime += 1;
currentTop -= 1;
if (stoptime == 1) {
currentTop = 0;
stoptime = 0;
}
} else {
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if (preTop == scrollElem.scrollTop) {
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
setTimeout(scrollUp, 50);
};
var restartScroll = function () {
scrollElem.scrollTop = 0;
setTimeout(scrollUp, 50);
};
jQuery(tableDom).hover(function () {
stopscroll = true;
}, function () {
stopscroll = false;
});
setTimeout(restartScroll, 2000);
}
autoScrollTable(document.getElementById('GRID2'),document.getElementById("HHH148").clientHeight);