-
方菁 小试身手Lv3
发表于2018-7-24 19:30
楼主
一、页面分析
1、整体简介
2、模块详解
1) 本月销售趋势
2) 销售概览
3) 月销售完成率
4) 整体运营状况
5) 库房库存预警
二、脚本说明
脚本1:指标循环高亮
复制代码
脚本2:数字滚动效果
复制代码
脚本3:表格内容自动轮播
复制代码
三、配色信息
零售行业.rar
(410.07 KB, 下载次数: )
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);
三、配色信息
底色:#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、 资源文件
18个回答
您好 我用指标高亮循环的这个脚本会报错 能帮忙看下是什么原因吗
Uncaught ReferenceError: addEvent is not defined
gelin 发表于 2020-10-23 15:19
您好 我用指标高亮循环的这个脚本会报错 能帮忙看下是什么原因吗
Uncaught ReferenceError: addEvent is no ...
你好,请问这个问题你解决了吗?是怎么解决的呢?能告诉一下吗?
本帖最后由 bobcardif 于 2022-4-6 17:01 编辑
学习了