FR报表中调用py接口返回数据成功后，刷新报表报表

FR报表中调用py接口返回数据成功后，刷新报表报表

有时候需要调用py接口处理数据后，拿到返回值，再填入报表中，下面的具体的代码实现方案（已测可用）

方式一 基础方式，用FR自己的接口提示数据加载中

1.1 点击查询，提示加载中（加载提示一定时间后会自动消失）。

1.2 查询结束，提示数据查询完成。

1.3 代码如下：

var kongjian = _g().getParameterContainer().getWidgetByName("kongjian");
var kongjian = _g().getParameterContainer().getWidgetByName("kongjian");
var st = _g().getParameterContainer().getWidgetByName("st").getValue();
var end = _g().getParameterContainer().getWidgetByName("end").getValue();
var para1 = _g().getParameterContainer().getWidgetByName("para1").getValue();

//kongjian.setValue("1")
// 显示加载提示
function showLoading() {
    // 使用帆软内置的加载提示
    FR.Msg.toast('加载中...' ); 
}

// 加载结束提示
function showEnding() {
    // 帆软内置的结束提示
    //FR.Msg.hideToast();
	FR.Msg.toast('数据查询完成', 'loading', 0);
}

// 调用Python接口并处理返回结果
function callPythonAPIAndRefresh() {
    // 显示加载
    showLoading();
    
    // 调用Python接口 
    $.ajax({
        url: 'http://localhost:8000/api/v1/calculate',
        type: 'POST',
        contentType: 'application/json',
		timeout: 30000, // 添加超时设置，单位毫秒（30秒）
        data: JSON.stringify({
            start_date: st,
            end_date: end,
            security_codes: para1
        }), 
        success: function(response) {
            console.log('✅ 请求成功');
            //console.log('响应数据:', response);
			if (response) {
 				kongjian.setValue(JSON.stringify(response.data));
				// 加载结束
				showEnding();
					
				// 刷新报表
				_g().parameterCommit();
			} else { 
					FR.Msg.alert('提示', response.message || '操作失败');
				}
        },
        error: function(xhr, status, error) {
            console.error('❌ 请求失败:', status, error);
			console.error('接口调用失败:', error); 
			if (status === 'timeout') {
            FR.Msg.alert('错误', '请求超时，请检查网络连接或稍后重试');
            } else {
            FR.Msg.alert('错误', '接口调用失败: ' + error);
            }
        }
    }); 

    
}

// 绑定按钮点击事件或其它触发方式
// 例如在按钮的点击事件中调用：
callPythonAPIAndRefresh();

方式二 升级方式，增加转圈加载样式

2.1 点击查询，提示加载中（加载转圈圈一直持续）。

2.2 查询结束，提示消失（成功或者接口调用失败、超时，加载动画消失）

2.3 代码如下：

// 添加CSS样式
const style = document.createElement('style');
style.textContent = `
    .custom-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-color: rgba(0, 0, 0, 0.7); */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        flex-direction: column;
    }
    
    .loader-spinner {
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #3498db;
        animation: spin 1s ease-in-out infinite;
    }
    
    .loader-text {
        color: #0083dc;
        margin-top: 15px;
        font-size: 18px;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .hidden {
        display: none;
    }
`;



document.head.appendChild(style);


// 显示自定义加载动画
function showCustomLoader(message) {
    // 如果已经存在，先移除
    hideCustomLoader();
    
    // 创建加载元素
    const loader = document.createElement('div');
    loader.className = 'custom-loader';
    loader.id = 'customLoader';
    loader.innerHTML = `
        <div class="loader-spinner"></div>
        <div class="loader-text">${message || '加载中...'}</div>
    `;
    
    // 添加到页面
    document.body.appendChild(loader);
}

// 隐藏自定义加载动画
function hideCustomLoader() {
    const loader = document.getElementById('customLoader');
    if (loader) {
        document.body.removeChild(loader);
    }
}

// 在控件点击事件中调用
// showCustomLoader('数据加载中，请稍候...');

// 当操作完成时调用隐藏
// hideCustomLoader();





var kongjian = _g().getParameterContainer().getWidgetByName("kongjian");
var st = _g().getParameterContainer().getWidgetByName("st").getValue();
var end = _g().getParameterContainer().getWidgetByName("end").getValue();
var para1 = _g().getParameterContainer().getWidgetByName("para1").getValue();



//kongjian.setValue("1")
// 显示加载动画


// 调用Python接口并处理返回结果
function callPythonAPIAndRefresh() {
    // 显示加载动画
    showCustomLoader('数据加载中，请稍候...');
    
    // 调用Python接口 
    $.ajax({
        url: 'http://localhost:8000/api/v1/calculate',
        type: 'POST',
        contentType: 'application/json',
		timeout: 30000, // 添加超时设置，单位毫秒（30秒）
        data: JSON.stringify({
            start_date: st,
            end_date: end,
            security_codes: para1
        }), 
        success: function(response) {
            console.log('✅ 请求成功');
            //console.log('响应数据:', response);
			if (response) { 
				kongjian.setValue(JSON.stringify(response.data));
				 
				// 当操作完成时调用隐藏
                hideCustomLoader();	
				// 刷新报表
				_g().parameterCommit();
			} else { 
					FR.Msg.alert('提示', response.message || '操作失败');
				}
        },
        error: function(xhr, status, error) {
		    hideCustomLoader();	
            console.error('❌ 请求失败:', status, error);
			console.error('接口调用失败:', error); 
			if (status === 'timeout') {
				FR.Msg.alert('错误', '请求超时，请检查网络连接或稍后重试');
            } else {
				FR.Msg.alert('错误', '接口调用失败: ' + error);
            }
        }
    }); 

    
}


callPythonAPIAndRefresh();

方案三 Fetch API 的方式（更现代）

思路都是差不多的，仅放其中核心代码块示例：

async function generateReportModern() {
    try {
        console.log("请求发送...");
        
        // fetch返回Promise，await会等待响应
        const response = await fetch('http://localhost:8000/api/v1/calculate');
        
        // 这里API肯定已经返回了
        const data = await response.json(); 
        
        console.log("数据已到位:", data);
        generateReport(data); // 安全使用
        
    } catch (error) {
        console.error("错误:", error);
    }
}

最后，关于超时时间、加载动画样式、接口调用方式等根据需求微调即可。