DEMO解析第一期：领导驾驶舱之公司简介

复制链接 | 收藏本帖

12031

楼主

一、页面分析
1、整体简介

主题表：DM_ENTERPRISE_YEAR，DM_ENTERPRISE_AREA

页面结构：宽百分比，高百分比

页面一览：

2、模块详解
1) 亿信用户分布

主要组件为html5中国地图（标点图+渲染图），地图上的4个标点分别代表本公司总部和三个分部，渲染图表示用户分布情况，颜色越深说明用户数越多。

左边是用户分布的图例，使用的是一张静态图片，无交互效果。

2) 亿信概览

展示本公司的3个重要指标，彰显公司实力。用容器、图片和文本组件制作，背景图片是自动撑满，图标为固定大小。

3) 人员增长情况

面积图反映了本公司06年到17年员工的增长情况。

4) 亿信产品热词

该模块使用的是热词球图，罗列了与本公司相关的关键词语。背景是一张地球的图片，大小自动撑满，因此地球可能会出现变形。

需要注意的是页面刷新之后，热词球图会停止旋转，在页面中添加了脚本来处理此问题。

5) 产品体系

此区域左侧的按钮代表数据生命周期的四个领域，右侧是Tab标签页分别概述了对应领域的核心产品。

按钮和Tab页签是通过脚本进行关联的，并且使用脚本实现了页签自动跳转的功能。

6) 营业收入年趋势

柱状图反映了本公司07年到17年的营业收入情况。

二、脚本说明
1、按钮和Tab页签联动

脚本中定义了checkBtnAndBindTab(btns,tabctrlId)函数，只需在最后运用该函数即可：

checkBtnAndBindTab(["@cc","@cl","@zl","@fx"],"HHH87");

1- ["@cc","@cl","@zl","@fx"]：第一个参数按顺序罗列了四个按钮的名称

2- "HHH87"：第二个参数为Tab页签的代号

注意：按钮必须使用同一个分组名；Tab页属性中去掉标签页头可见。

/***
*按钮必须使用同一个分组名
**/
function checkBtnAndBindTab(btns, tabctrlId) {
var ready = true;
var btnDoms = [];
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 = checkBtnAndBindTab.bind(window,btns,tabctrlId);
setTimeout(func,50);
}else{
window["current_active_btn_idx"] = 0;
var bindTabClick = function(tabctrlId,idx){
window["current_active_btn_idx"] = idx;
g_rptpage.widgets[tabctrlId].setActive(idx);
};
var bindTabHover = function(tabCtrlId,idx){
stopAutoCheckBtn();
execDomEvent(btnDoms[idx],"click");
};
var autoCheckBtn = function(){
var nextidx = (window["current_active_btn_idx"]+1)%btnDoms.length;
execDomEvent(btnDoms[nextidx],"click");
window["_auto_check_btn_timer"]= setTimeout(autoCheckBtn,2000);
};
var stopAutoCheckBtn = function(){
if(window["_auto_check_btn_timer"]){
clearTimeout(window["_auto_check_btn_timer"]);
window["_auto_check_btn_timer"] = null;
}
};
var startAutoCheckBtn = function(){
window["_auto_check_btn_timer"]= setTimeout(autoCheckBtn,2000);
};
for(var i=0,l=btnDoms.length;i<l;i++){
addEvent(btnDoms[i],"click",bindTabClick.bind(btnDoms[i],tabctrlId,i));
jQuery(btnDoms[i]).hover(bindTabHover.bind(btnDoms[i],tabctrlId,i),startAutoCheckBtn);
}
startAutoCheckBtn();
}
}
checkBtnAndBindTab(["@cc","@cl","@zl","@fx"],"HHH87");

复制代码

2、修复热词球图不自动旋转

将脚本中的HHH69为热词球图的代号。

/**修复词云图不自动转动的问题**/
function checkHHH69Active(){
if(g_rptpage&&g_rptpage.chartMng&&g_rptpage.chartMng.getChartById("HHH69")&&g_rptpage.chartMng.getChartById("HHH69").thirdchart){
if(!g_rptpage.chartMng.getChartById("HHH69").thirdchart.objAry["HHH69Esen"].active){
g_rptpage.chartMng.getChartById("HHH69").thirdchart.objAry["HHH69Esen"].mouseX=g_rptpage.chartMng.getChartById("HHH69").thirdchart.size/5;
g_rptpage.chartMng.getChartById("HHH69").thirdchart.objAry["HHH69Esen"].mouseY=10;
g_rptpage.chartMng.getChartById("HHH69").thirdchart.objAry["HHH69Esen"].active=true;
}
}
setTimeout(checkHHH69Active,100);
}
checkHHH69Active();