登录/注册
    我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-问题求助 › 移动端脚本

    [ABI 5.1] 移动端脚本

    复制链接 | 收藏本帖
    10461
    7

    xiao12 数据达人Lv4

    发表于2020-7-30 17:47

    悬赏10

    已解决

    楼主
    移动端的脚本有没有人知道使用方法类型等等，有没有文档之类的
    最佳答案

    xxxl

    发表于2020-7-30 17:47

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    本帖最后由 xxxl 于 2020-7-31 16:28 编辑
    xiao12 发表于 2020-7-31 11:06
    他的脚本我看了，有一部分要自己改，现在怎么改也不清楚

    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; }
    2.使用示例
    2.1注入脚本格式如下
    1. //提前注入移动端脚本
    2. if((typeof(isInjectionMobileJs)!="undefined")&&!isInjectionMobileJs){
    3.     //不显示钻取等待框
    4.     isShowZqWaitToast = false;
    5.     //固定tab标签页+调整参数框位置
    6.     function adjustWidgetTab() {
    7.         ......
    8.     }
    9. }
    复制代码
    2.2表格不分页，一屏宽
    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.3tab标签头样式修改

    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.4报表下拉框样式
    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. }
    复制代码
    这里展示部分示例给您作参考看一下
    QQ空间 微信
    7个回答

    只看楼主

    xxxl 数据领袖Lv6

    发表于2020-7-30 17:59

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    您是想做移动端什么相关的脚本呢

    回复

    xiao12 数据达人Lv4

    发表于2020-7-30 18:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    xxxl 发表于 2020-7-30 17:59
    您是想做移动端什么相关的脚本呢

    就是筛选的几个条件放在一排上，边框去掉，调整下筛选的框大小

    回复

    xxxl 数据领袖Lv6

    发表于2020-7-30 18:35

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    xiao12 发表于 2020-7-30 18:03
    就是筛选的几个条件放在一排上，边框去掉，调整下筛选的框大小

    在报表中写脚本，移动端这里没有生效吗

    回复

    xiao12 数据达人Lv4

    发表于2020-7-31 08:48

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    xxxl 发表于 2020-7-30 18:35
    在报表中写脚本，移动端这里没有生效吗

    不知道，怎么写，他的脚本看不懂没有说明

    回复

    xxxl 数据领袖Lv6

    发表于2020-7-31 11:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    6#

    xiao12 发表于 2020-7-31 08:48
    不知道，怎么写，他的脚本看不懂没有说明

    把他的脚本直接放在报表属性客户端脚本中就可以了

    回复

    xiao12 数据达人Lv4

    发表于2020-7-31 11:06

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    7#

    xxxl 发表于 2020-7-31 11:03
    把他的脚本直接放在报表属性客户端脚本中就可以了

    他的脚本我看了，有一部分要自己改，现在怎么改也不清楚

    回复

    xxxl 数据领袖Lv6

    发表于2020-7-30 17:47

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    8#

    本帖最后由 xxxl 于 2020-7-31 16:28 编辑

    xiao12 发表于 2020-7-31 11:06
    他的脚本我看了，有一部分要自己改，现在怎么改也不清楚

    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; }
    2.使用示例
    2.1注入脚本格式如下
    1. //提前注入移动端脚本
    2. if((typeof(isInjectionMobileJs)!="undefined")&&!isInjectionMobileJs){
    3.     //不显示钻取等待框
    4.     isShowZqWaitToast = false;
    5.     //固定tab标签页+调整参数框位置
    6.     function adjustWidgetTab() {
    7.         ......
    8.     }
    9. }
    复制代码
    2.2表格不分页，一屏宽
    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.3tab标签头样式修改

    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.4报表下拉框样式
    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. }
    复制代码
    这里展示部分示例给您作参考看一下

    回复

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

    有问题，来提问！
    我要发帖
    热门推荐
    热门视频
    热门产品推荐
    快速回复 返回顶部 返回列表

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

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

    400咨询：400-0011-866

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

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

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