页面历史

该宏示例在 V10.5上 验证通过

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

该宏示例需注意的事项如下：

1. 暂停轮播后点击开始轮播：继续当前值进行轮播；
2. 停止轮播后点击开始轮播：从头开始轮播。
3. 多选的筛选器，每次也只轮播一个参数值。
4. 筛选器类型为“列表单选/多选”、“下拉单选/多选”时无需配置参数值；筛选器类型为日期与文本时，则需要在宏代码中配置轮播的参数值。
5. 宏中可以修改轮播速度以及是否循环播放。
6. 设置的轮播间隔时间不包含数据刷新时间。比如：假设轮播间隔时间设置为1s，数据切换刷新的时间1s，则实际间隔时间为2s。
7. “开始轮播”、“暂停轮播”以及“停止轮播”的按钮图标可以自定义。

function main(page: IPage, portlet: IFilterPortlet) {

    renderOptions(portlet)
}


function renderOptions(portlet: IFilterPortlet) { 
    // 去掉产品内置的单选框背景颜色，设为透明
    portlet.appendCss('.theme__filter-color .el-radio__inner::after', `{
        background-color: transparent;
    }`)
    portlet.appendCss('.el-radio', `{
        display: flex;
        flex-direction: column;
        height: 32px;
    }`)
    portlet.appendCss('.el-radio__inner', `{
        background-color: #fff !important;
        z-index: 2;
    }`)
    portlet.appendCss('.el-radio__label', `{
        padding-left: 0;
    }`)
    portlet.appendCss('.el-radio__input.is-checked .el-radio__inner', `{
        border-color: red;
        width: 16px;
        height: 16px;
    }`)
    portlet.appendCss('.el-radio__input.is-checked .el-radio__inner::after', `{
        background-color: red;
        width: 11px;
        height: 11px;
    }`)
    portlet.appendCss('.el-radio__input .el-radio__inner::after', `{
        transition: 0;
    }`)
    portlet.appendCss('.filter-list__td', `{
        padding: 0;
    }`)
    portlet.appendCss('.filter-list__td .el-radio::after', `{
        content: " ";
        display: block;
        width: 100%;
        height: 2px;
        background-color: blue;
        position: relative;
        top: -24px;
        right: -50%;
        z-index: 1
    }`)

    portlet.appendCss('.filter-list__td:last-child .el-radio::after', `{
        display: none;
    }`)

    portlet.appendCss('.el-radio__input', `{
        flex: 1
    }`)
}

function main(page: IPage) {
    // 通过筛选器标题获取筛选器对象
    const portlet: IFilterPortlet = page.getPortletsByTitle('年份')[0] as IFilterPortlet;
    // 浏览状态的菜单
    let pageMenu = page.getPageToolbar()
    setTimeout(() => {
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '开启轮播',
            color: '#0f0',
            handler: function () {
                launchCarousel(portlet);
            }
        }, 1)
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '暂停轮播',
            color: 'yellow',
            handler: function () {
                portlet.pauseCarousel();
            }
        }, 1)
        pageMenu.addButton({
            icon: 'sx-icon-liked icon-16',
            tooltip: '停止轮播',
            color: 'red',
            handler: function () {
                portlet.turnOffCarousel();
            }
        }, 1)
        launchCarousel(portlet)
    }, 1000)
    
}

/**
 * 启动筛选器轮播
 */
function launchCarousel(portlet: IFilterPortlet) {
    // 轮播配置项
    let options: ICarouselOptions = {
        timeout: 1.5, // 时间间隔1.5秒
        infinite: true // 无限循环
    };
    portlet.turnOnCarousel(options);
}