Multiple identical requests appear when requesting the backend to obtain data

[YL-Zhang1]

saveButton.addEventListener('click', async () => {
if (isSaving) return; // 如果正在保存，直接返回
isSaving = true; // 开始保存，设置请求锁
const dc = dcInput.value;
const node = nodeInput.value;
const subSystem = subSystemInput.value;
const faultPoint = faultPointInput.value;
const errTime = errTimeInput.value;
const dealTime = dealTimeInput.value;
const statusRadio = htmlNode.querySelector('input[name="status"]:checked').value;
const comments = commentsInput.value;
if (!dc) {
alert('电厂不能为空，请填写完整。');
isSaving = false; // 解除请求锁
return;
}

if (!node) {
    alert('节点不能为空，请填写完整。');
    isSaving = false; // 解除请求锁
    return;
}
if (statusRadio!=="0"&& !dealTime){
    alert('请选择处理时间');
    isSaving = false; // 解除请求锁
    return;
}
if (!errTime) {
    alert('请选择故障时间');
    isSaving = false; // 解除请求锁
    return;
}
if (!statusRadio) {
    alert('请选择处理状态');
    isSaving = false; // 解除请求锁
    return;
}
if (modalTitle.textContent === '新增记录') {
    const manufacturer = manufacturerInput.value;
    if (!manufacturer) {
        alert('机器型号不能为空，请填写完整。');
        isSaving = false; // 解除请求锁
        return;
    }
    const node_type = nodeTypeSelect.value;
    try {
        const response = await fetch('/v1/module/node_rsc_unhealth_manager', {
            method: 'POST',
            headers: {
                'token': `wkqyssr32Wz4orxoWsmj1ec7uulhfy`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                type: "add",
                dc: dc,
                node: node,
                manufacturer: manufacturer,
                node_type: node_type,
                status: statusRadio,
                operation_user: statusRadio !== '0' ? window.grafanaBootData.user.name  : '',
                sub_system: subSystem,
                err_time: errTime,
                deal_time: dealTime,
                comments: comments,
                fault_point: faultPoint
            })
        });
        if (!response.ok) {
            const return_data = await response.json()
            const errmsg = return_data.err
            throw new Error(errmsg);
        }
        fetchData()
    } catch (error) {
        alert('新增记录时出错:' + error.message);
        closeModal()
        fetchData()
        return;
    } finally {
        isSaving = false; // 解除请求锁
    }
} else {
    const editId = sessionStorage.getItem('editId');
    try {
        const response = await fetch('/v1/module/node_rsc_unhealth_manager', {
            method: 'POST',
            headers: {
                'token': `wkqyssr32Wz4orxoWsmj1ec7uulhfy`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                type: "edit",
                id: editId,
                dc: dc,
                node: node,
                status: statusRadio,
                operation_user: statusRadio !== '0' ? window.grafanaBootData.user.name  : '',
                apply_user: window.grafanaBootData.user.name,
                sub_system: subSystem,
                err_time: errTime,
                deal_time: dealTime,
                comments: comments,
                fault_point: faultPoint
            })
        });
        if (!response.ok) {
            const return_data = await response.json()
            const errmsg = return_data.err
            throw new Error(errmsg);
        }
        fetchData(currentPage)
    } catch (error) {
        alert('修改记录时出错:' + error.message);
        closeModal()
        fetchData()
        return;
    } finally {
        isSaving = false; // 解除请求锁
    }
}

closeModal();
renderTable();
renderPagination();

});

[ZuperZee]

A bit hard to tell what's happening, but is the code in onRender? If it is in the onRender then each time the panel is rendered, which happens each time new data is available then the code is ran.
If you only want it to run when the panel is mounted/loaded then you could move the code to onInit.

[ZuperZee]

Could you provide some more details on how the code is ran. A minimal example with the panel options or similar would be helpful.

[YL-Zhang1]

Could you provide some more details on how the code is ran. A minimal example with the panel options or similar would be helpful.您能否提供有关代码如何运行的更多详细信息。带有面板选项或类似选项的最小示例会有所帮助。

the code in onRender，when I click grafana refresh button，the number of requests increases

[ZuperZee]

You are using an addEventListener in onRender. Usually you want events and such which should only be applied once to be in onInit. The easiest would be to just move the code to onInit. If you're using htmlGraphics.data or data then I would suggest checking https://gapit-htmlgraphics-panel.gapit.io/docs/options/#dynamic-htmlgraphics as some of the variables might need an update. In the code you sent I don't see any of them used so it might not be needed in your code.

[YL-Zhang1]

You are using an addEventListener in onRender. Usually you want events and such which should only be applied once to be in onInit. The easiest would be to just move the code to onInit. If you're using htmlGraphics.data or data then I would suggest checking https://gapit-htmlgraphics-panel.gapit.io/docs/options/#dynamic-htmlgraphics as some of the variables might need an update. In the code you sent I don't see any of them used so it might not be needed in your code.

I want to request the backend to fetch data when the filtering conditions of the dashboard change. However, when I moved the code into the onInit , although the filtering conditions changed, there was no request to the backend to fetch data

dashboard.json

[ZuperZee]

You could either wrap the fetchData() at the bottom with htmlNode.addEventListener('panelupdate', () => fetchData()); or move that function to onRender and just keep the addEventListeners in the onInit section.

In general, all event listener should be in the onInit section and all stuff which should update on changes like new data is available, timerange changes, grafana variable changes, ETC. should be in onRender or in onInit with htmlNode.addEventListener('panelupdate', panelUpdate)