登录/注册
    我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI522移动门户调整分析表样式脚本说明 ...

    ABI522移动门户调整分析表样式脚本说明

    复制链接 | 收藏本帖
    4337
    1

    xxxl 数据领袖Lv6

    发表于2020-8-5 17:24

    楼主
    1.脚本调整移动端报表样式方法
      
    组件
      
    脚本方法
    调整计算参数位置
    function adjustCalcparamPosition()
    WidgetsBuilder 报表加载完毕后的事件,可以调整样式
    function adjustWidgetBuilder(bodyarea)
    WidgetObj 统计图或其他组件样式调整
    function  adjustWidgetObj(className,bodyarea,basedom)
    WidgetObj 调整高度
    function  adjustWidgetObj_getChildMaxHeight(childnodes,max)
    WidgetParamComboBox 下拉框样式
    function  adjustWidgetCombox(basedom,pnode,edit,label)
    WidgetParamComboBox 加载前
    function  adjustWidgetCombox_initDom(basedom,pnode,edit,label)
    WidgetParamComboBoxTree 下拉树组件
    function  adjustWidgetComboxTree(basedom,pnode,edit,label)
    WidgetParamComboBoxTree 加载前
    function  adjustWidgetComboxTree_initDom(basedom,pnode,edit,label)
    WidgetParamDate 日期组件
    function  adjustWidgetDate(basedom,pnode,edit,label)
    WidgetParamDate 加载前
    function  adjustWidgetDate_initDom(basedom,pnode,edit,label)
    WidgetParamEdit 输入框组件
    function  adjustWidgetEdit(basedom,pnode,edit,label)
    WidgetParamEdit 加载前
    function  adjustWidgetEdit_initDom(basedom,pnode,edit,label)
    WidgetTab tab组件样式
    function adjustWidgetTab(tab)
    WidgetTab 切换tab页 active 页
    function  adjustWidgetTabActive(active,tab)
    WidgetContainer 容器布局
    function adjustWidgetContainer(basedom)
    WidgetContainer 加载前
    function  adjustWidgetContainer_initDom(basedom)
    WidgetContainer 渲染完成后
    function  adjustWidgetContainer_delayInit(basedom)
    WidgetLayout sheet容器调整
    function adjustAddSheet(widget)
    WidgetResultGrid 表格样式
    function  adjustWidgetResultGrid(basedom,table)
    统计图参数设置调整（这里可以看下echart官网配置项
      
    ，datajson里面可以修改，添加属性）
    function renderChart(datajson){ return  datajson; }
    注入脚本格式如下
    1. //提前注入移动端脚本
    2. if((typeof(isInjectionMobileJs)!="undefined")&&!isInjectionMobileJs){
    3.     //不显示钻取等待框
    4.     isShowZqWaitToast = false;
    5.     //固定tab标签页+调整参数框位置
    6.     function adjustWidgetTab() {
    7.         ......
    8.     }
    9. }
    复制代码
    2.使用示例
    2.1表格不分页，一屏宽
    1、设置表格外容器|布局，取消勾选【手机自适应】选择
    2、适当调整表格中文字大小，12px以上比较好
    3、报表添加脚本
    1. function adjustWidgetResultGrid(basedom,table){
    2.     var width = this.document.body.clientWidth;
    3.     var tableWidth = table.clientWidth;
    4.     var scalenum = width/basedom.clientWidth;
    5.     if(tableWidth > basedom.clientWidth){
    6.         scalenum = width/tableWidth;
    7.     }
    8.     basedom.style.top= "-"+table.clientHeight*(1-scalenum)/2+"px";
    9.     basedom.style.transform="scale("+scalenum +")";
    10.     basedom.style.transformOrigin="left";  
    11. }
    复制代码
    2.2tab标签头样式修改
    1. function adjustWidgetTab() {
    2.      //标签头字号
    3.      $(".headcontainer .subhead, .headcontainer .subhead_active").css("font-size", "10px");
    4.      //标签头高度
    5.      $(".headcontainer").css({"height":"35px","line-height":"32px"});
    6.      $(".bodycontainer").css({"top":"35px"});
    7. }
    复制代码
    2.3报表下拉框样式
    1. function adjustWidgetCombox(basedom, pnode, editinput, editlabel) {
    2.     //是否是横屏
    3.     var isHorScreen = false;
    4.     if (window.screen.width > window.screen.height) {
    5.         isHorScreen = true;
    6.     } else {
    7.         if (window.orientation == 90 || window.orientation == -90) {//ios
    8.             isHorScreen = true;
    9.         }
    10.     }
    11.     if(isHorScreen){//横屏情况下下拉框 左右间距20px  宽度占屏幕宽度的三分之一
    12.         basedom.style.left = "0px";
    13.         basedom.style.width = (window.screen.width - 40) / 3 + "px";
    14.     }else{//竖屏情况下下拉框  宽度占屏幕宽度的二分之一
    15.         basedom.style.width = (window.screen.width) / 2 + "px";
    16.     }
    17.      
    18. }
    复制代码
    2.4容器加载完成后显示内容（避免容器渲染时看到内容位置闪动）
    1. function adjustWidgetContainer_initDom(basedom){
    2.     var wid = basedom.getAttribute("wid");
    3.     if(wid==="WidgetContainer78"){
    4.         basedom.style.visibility="hidden";
    5.     }
    6. }
    7. function adjustWidgetContainer_delayInit(basedom){
    8.     var wid = basedom.getAttribute("wid");
    9.     if(wid==="WidgetContainer78"){
    10.         basedom.style.visibility="";
    11.     }
    12. }
    复制代码
    2.5定时刷新
    [size=13.3333px]PC端分析表支持定时刷新功能，移动端暂不支持。变通解决脚本，采用热区式脚本。
    1. if ((typeof(isInjectionMobileJs) != "undefined") && !isInjectionMobileJs) {
    2.      
    3.      setInterval(function(){
    4.         //钻取时，不显示黑色等待框
    5.          isShowZqWaitToast = false;
    6.             //热区钻取
    7.           _zcalcn([
    8.             ['Widget1', 'HHH51','@a=1'],
    9.             ['Widget2', 'HHH55','@a=1'],
    10.             ['Widget3', 'HHH59','@a=1'],
    11.             ['Widget4', 'HHH63','@a=1'],
    12.          
    13.         ]);
    14.         //恢复黑色等待框
    15.         isShowZqWaitToast = true;
    16.     },10000);
    17. }
    复制代码
    2.6表格之间的间距
    在分析表中设置合适高度后，写脚本如下。

    2. //生成的表格，空的单元格有  会影响表格高度，这个脚本去掉
    3.     function adjustWidgetResultGrid(basedom, table) {
    4.         for (var i = 0; i < table.rows.length; i++) { //遍历每行
    5.             var tr = table.rows[i];
    6.             var cells = tr.cells;
    7.             for (var j = 0; j < cells.length; j++) {
    8.                 if (cells[j].innerHTML === ' ') {
    9.                     cells[j].innerHTML = "";
    10.                 }
    11.             }
    12.         }
    13.     }
    复制代码


    最近看过此主题的会员

    杨凯

    cghb

    esen_514DF7NJDJ

    QQ空间 微信
    1个回答

    只看楼主

    yangqh 数据老手Lv5

    发表于2020-8-5 18:21

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    厉害了！专业！

    回复

    登录后可回答问题，请登录或注册

    用产品，聊感受！
    我要发帖
    热门推荐
    热门视频
    热门产品推荐
    快速回复 返回顶部 返回列表

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

    明星产品
    一站式数据分析平台-亿信ABI
    智能数据治理平台-睿治
    解决方案
    大数据治理方案
    数据标准化及质量管控方案
    主数据管理方案
    数据资产盘点方案
    联系合作

    400咨询：400-0011-866

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

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

    版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号