我的位置：首页 › 数据可视化平台- 酷屏 › 酷屏-心得体验 › ABI-DEMO第八期导航页：自定义酷屏组件 ...

ABI-DEMO第八期导航页：自定义酷屏组件

复制链接 | 收藏本帖

1626

: 前端小姐姐小试身手Lv3

发表于2020-11-3 15:09

楼主

本帖最后由前端小姐姐于 2020-11-10 10:04 编辑

一、页面效果图

二、页面可改变的内容包括：
1、大标题文字（ABI 一站式数据分析平台1）、logo图片，在属性面板改
2、中间3个正方体上的文字（功能演示1、行业案例1、用户试用1），对应左侧3个导航的文字，对应在取数设置面板改
3、以及中间每个正方体周围圆对应的文字和描述、链接，对应在取数设置面板改

三、组件整体js代码：
var name = null;
var title1 = null;
var title2 = null;
var title3 = null;
var text1 = null;
var text2 = null;
var text3 = null;
var href1 = null;
var href2 = null;
var href3 = null;
/*
* 初始化方法
*
* @params cwidget 组件对象
* @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @params storagedata 组件自己需要存储的值，字符串格式
* @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
* @params resources 资源及权限校验，json格式：{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
*/
function init(cwidget, vardata, events, storagedata, resources){
var basedom = cwidget.basedom;

//标题
var title = cwidget.getProperty("title");
$(basedom).find('h3.headlines').text(title || "标题");

//logo
var logo = cwidget.getProperty("logo");
if (logo) {
      setProperty('logo', logo, cwidget);
}

basedom.onclick = events.evt1;
if(cwidget.isresultview){
      //只在结果界面的时候执行，例如只想在结果界面绑定click事件
}

_initData(vardata);
_initDom(cwidget);
}

/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key  属性名
* @param value  属性值
* @param cwidget  组件对象
* @returns
*/
function setProperty(key, value, cwidget) {
if (key === 'title') {
         //修改属性大标题时，触发
      $(cwidget.basedom).find('h3.headlines').text(value);
} else if (key === 'logo') {
         //修改属性logo时，触发
      setLogo(cwidget, value);
}
}

/**
* 初始化数据，并检查
*/
function _initData(vardata){
try {
      if (vardata.name) {
         name = eval(vardata.name);
      } else {
         name = [];
      }
      if (vardata.title1) {
         title1 = eval(vardata.title1);
      } else {
         title1 = [];
      }
      if (vardata.title2) {
         title2 = eval(vardata.title2);
      } else {
         title2 = [];
      }
      if (vardata.title3) {
         title3 = eval(vardata.title3);
      } else {
         title3 = [];
      }
      if (vardata.text1) {
         text1 = eval(vardata.text1);
      } else {
         text1 = [];
      }
      if (vardata.text2) {
         text2 = eval(vardata.text2);
      } else {
         text2 = [];
      }
      if (vardata.text3) {
         text3 = eval(vardata.text3);
      } else {
         text3 = [];
      }
      if (vardata.href1) {
         href1 = eval(vardata.href1);
      } else {
         href1 = [];
      }
      if (vardata.href2) {
         href2 = eval(vardata.href2);
      } else {
         href2 = [];
      }
      if (vardata.href3) {
         href3 = eval(vardata.href3);
      } else {
         href3 = [];
      }
      } catch (e) {
            EUI.showError(e);
      }
}

/**
* 初始化dom结构
*/
function _initDom(cwidget){
   var basedom = cwidget.basedom;
//中间正方体文字
   var listCenter = $(basedom).find(".center").children('li');
   var listNav = $(basedom).find(".left-nav").children('li');
   for (var i = 0; i < name.length; i++) {
      $(listCenter).find("span").html(name);
      $(listNav).html(name);
   }
//中间正方体四周圆的标题和描述文字
var listTitle = $(basedom).find(".around").children('li');
for (var j = 0; j < title1.length; j++) {
      $(listTitle[0]).append('<dl><a href='+href1[j]+' target="blank"><dt></dt><dd><h6>'+title1[j]+'</h6><p>'+text1[j]+'</p></dd></a></dl> ');
   }
for (var k = 0; k < title2.length; k++) {
      $(listTitle[1]).append('<dl><a href='+href2[k]+' target="blank"><dt></dt><dd><h6>'+title2[k]+'</h6><p>'+text2[k]+'</p></dd></a></dl> ');
   }
for (var h = 0; h < title3.length; h++) {
      $(listTitle[2]).append('<dl><a href='+href3[k]+' target="blank"><dt></dt><dd><h6>'+title3[h]+'</h6><p>'+text3[h]+'</p></dd></a></dl> ');
   }

//获取子元素添加类
$(".around li").each(function(index) {
      var len = $(this).children('dl').length;
      $(this).addClass(function() {
            return "aroundWz" + len;
      });
});

//默认给ul的第一个li添加active
$('.center').children('li').first().addClass("active").siblings().removeClass("active");
$('.around').children('li').first().addClass("active").siblings().removeClass("active");
$('.left-nav').children('li').first().addClass("active").siblings().removeClass("active");

}

/**
* 用于设置区域传入的图片路径
*/
function setLogo(cwidget, value){
   $(cwidget.basedom).find('.logo').find('img').attr("src",value);
}

//切换效果
function clickSwitch(ele1,ele2){
      $(ele1).each(function(index) {
                  $(this).click(function() {
                        $(".center li:eq(" + index + ")").addClass("active").siblings().removeClass("active");
                        $(".left-nav li:eq(" + index + ")").addClass("active").siblings().removeClass("active");
                        $(".around li:eq(" + index + ")").addClass("active move").siblings().removeClass("active move");
                                    $(ele2).attr("class", "center").addClass(function() {
                                                return "active" + (index+1);
                                    });
                     });
               });
}

clickSwitch( $(".center li"),$(".center") );
clickSwitch( $(".left-nav li"),$(".center") );

/**
* 刷新操作，数据改变时，调用该方法，重新渲染数据
* @param cwidget 组件对象
* @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @param storagedata  组件自己需要存储的值，字符串格式
* @returns
*/
function refreshDatas(cwidget, vardata, storagedata){
var basedom = cwidget.basedom;

}

/**
* 组件大小改变时执行
* @param cwidget 组件对象
* @returns
*/
function resize(cwidget){

//针对不同屏幕缩放
var basedom = cwidget.basedom,
      screenWidth = $(window).width(),
      zoom = screenWidth / 1920;
$(basedom).css({
      "zoom":zoom
});
$(basedom).parent().parent().css({
      "overflow":"hidden"
});
}

/**
* 获取组件的参数值
* @param cwidget 组件对象
* @returns
*/
function getValue(cwidget){

}

/**
* 获取组件的参数名称
* @param cwidget 组件对象
* @returns
*/
function getParamName(cwidget){

}

/*
* 销毁操作,销毁自己相关的东西
*/
function dispose(cwidget){

}

1、和title相关代码是实现更改大标题文字（ABI 一站式数据分析平台1），和logo相关代码是实现更改logo图片；
//标题
var title = cwidget.getProperty("title");
$(basedom).find('h3.headlines').text(title || "标题");

//logo
var logo = cwidget.getProperty("logo");
if (logo) {
      setProperty('logo', logo, cwidget);
}

function setProperty(key, value, cwidget) {
if (key === 'title') {
         //修改属性大标题时，触发
      $(cwidget.basedom).find('h3.headlines').text(value);
} else if (key === 'logo') {
         //修改属性logo时，触发
      setLogo(cwidget, value);
}
}

/**
* 用于设置区域传入的图片路径
*/
function setLogo(cwidget, value){
   $(cwidget.basedom).find('.logo').find('img').attr("src",value);
}

这4段代码是实现属性面板去更改大标题和logo图片

2、和name相关代码是实现更改中间3个正方体和对应左侧3个导航上的文字；第一个正方体四周圆对应的标题title1、描述text1文字以及链接href1;第二个正方体四周圆对应的标题title2、描述text2文字以及链接href2;;第三个正方体四周圆对应的标题title3、描述text3文字以及链接href3；需要注意的点是3个值对应的个数要保持一致。
var name = null;
var title1 = null;
var title2 = null;
var title3 = null;
var text1 = null;
var text2 = null;
var text3 = null;
var href1 = null;
var href2 = null;
var href3 = null;

/**
* 初始化数据，并检查
*/
function _initData(vardata){
try {
      if (vardata.name) {
         name = eval(vardata.name);
      } else {
         name = [];
      }
      if (vardata.title1) {
         title1 = eval(vardata.title1);
      } else {
         title1 = [];
      }
      if (vardata.title2) {
         title2 = eval(vardata.title2);
      } else {
         title2 = [];
      }
      if (vardata.title3) {
         title3 = eval(vardata.title3);
      } else {
         title3 = [];
      }
      if (vardata.text1) {
         text1 = eval(vardata.text1);
      } else {
         text1 = [];
      }
      if (vardata.text2) {
         text2 = eval(vardata.text2);
      } else {
         text2 = [];
      }
      if (vardata.text3) {
         text3 = eval(vardata.text3);
      } else {
         text3 = [];
      }
      if (vardata.href1) {
         href1 = eval(vardata.href1);
      } else {
         href1 = [];
      }
      if (vardata.href2) {
         href2 = eval(vardata.href2);
      } else {
         href2 = [];
      }
      if (vardata.href3) {
         href3 = eval(vardata.href3);
      } else {
         href3 = [];
      }
      } catch (e) {
            EUI.showError(e);
      }
}

/**
* 初始化dom结构
*/
function _initDom(cwidget){
   var basedom = cwidget.basedom;
//中间正方体文字
   var listCenter = $(basedom).find(".center").children('li');
   var listNav = $(basedom).find(".left-nav").children('li');
   for (var i = 0; i < name.length; i++) {
      $(listCenter).find("span").html(name);
      $(listNav).html(name);
   }
//中间正方体四周圆的标题和描述文字
var listTitle = $(basedom).find(".around").children('li');
for (var j = 0; j < title1.length; j++) {
      $(listTitle[0]).append('<dl><a href='+href1[j]+' target="blank"><dt></dt><dd><h6>'+title1[j]+'</h6><p>'+text1[j]+'</p></dd></a></dl> ');
   }
for (var k = 0; k < title2.length; k++) {
      $(listTitle[1]).append('<dl><a href='+href2[k]+' target="blank"><dt></dt><dd><h6>'+title2[k]+'</h6><p>'+text2[k]+'</p></dd></a></dl> ');
   }
for (var h = 0; h < title3.length; h++) {
      $(listTitle[2]).append('<dl><a href='+href3[k]+' target="blank"><dt></dt><dd><h6>'+title3[h]+'</h6><p>'+text3[h]+'</p></dd></a></dl> ');
   }
}

上边代码是实现取数面板去更改中间3个正方体以及对应左侧3个导航上的文字和中间每个正方体周围圆对应的文字和描述、链接