feat(risk-history): 优化风险筛查结果显示逻辑

- 增加筛查中状态的显示
- 根据 checkStatus 字段判断风险状态
- 优化无风险和有风险的显示文案
- 添加筛查中的 loading 状态
This commit is contained in:
陈昱达
2025-07-29 18:00:03 +08:00
parent f67e1a44ab
commit f8d2dae78c
2 changed files with 200 additions and 184 deletions

BIN
public/bpic_eli/loading.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 744 B

View File

@@ -834,13 +834,14 @@
// a.style.border = '1px solid #ddd' // a.style.border = '1px solid #ddd'
a.style.display = 'block'; a.style.display = 'block';
a.innerHTML = a.innerHTML =
// 判断
(navItem.hasRisk === 1 (navItem.hasRisk === 1
? '<img src="error.png" class="png-icon">' ? navItem.checkStatus === 2? '<img src="error.png" class="png-icon">' : '<img src="loading.png" class="png-icon" style="width: 20px;">'
: '<img src="right.png" class="png-icon">') + : navItem.checkStatus === 2?'<img src="right.png" class="png-icon">':'<img src="loading.png" class="png-icon" style="width: 20px;">') +
navItem.taSubmitDate + navItem.taSubmitDate +
(navItem.hasRisk === 1 (navItem.hasRisk === 1
? '<span >【有风险】</span>' ? '<span >' + (navItem.checkStatus === 2 ? '【有风险】' : '【筛查中】') + '</span>'
: '<span >【无风险】</span>'); : '<span >' + (navItem.checkStatus === 2 ? '【无风险】' : '【无风险】') + '</span>');
a.onclick = (function(index, item) { a.onclick = (function(index, item) {
return function() { return function() {
@@ -931,215 +932,230 @@
// 获取详情 // 获取详情
getDetail: function(navItem) { getDetail: function(navItem) {
// 从URL获取taCode console.log(navItem)
StateManager.resultId = navItem.id; if(navItem.checkStatus === 2){
var taCode = Utils.getQueryParam('taCode') || StateManager.navCheckRecord.taCode; // 从URL获取taCode
StateManager.resultId = navItem.id;
var taCode = Utils.getQueryParam('taCode') || StateManager.navCheckRecord.taCode;
// 🔹 调用详情接口(假设用 recordId 查询) // 🔹 调用详情接口(假设用 recordId 查询)
Config.serviceUrl.queryDetail.data = { Config.serviceUrl.queryDetail.data = {
resultId: navItem.id, resultId: navItem.id,
recordId: navItem.recordId, recordId: navItem.recordId,
taCode: taCode taCode: taCode
}; };
var time = document.getElementById('time'); var time = document.getElementById('time');
time.innerHTML = ''; time.innerHTML = '';
// 添加加载提示 // 添加加载提示
var resultDom = document.getElementById('detail-container'); var resultDom = document.getElementById('detail-container');
resultDom.innerHTML = resultDom.innerHTML =
'<div class="loading"><span class="loading-spinner"></span>正在加载详情...</div>'; '<div class="loading"><span class="loading-spinner"></span>正在加载详情...</div>';
DOMHandler.setServiceUrl( DOMHandler.setServiceUrl(
Config.serviceUrl.queryDetail, Config.serviceUrl.queryDetail,
Config.serviceUrl.queryDetail.data, Config.serviceUrl.queryDetail.data,
function(detailData) { function(detailData) {
try { try {
var detailJson = JSON.parse(detailData); var detailJson = JSON.parse(detailData);
var result = detailJson.content.content.ruleTypeList; var result = detailJson.content.content.ruleTypeList;
var fileStorageInfoList = var fileStorageInfoList =
detailJson.content.content.fileBizTypeDictList; detailJson.content.content.fileBizTypeDictList;
time.innerHTML = time.innerHTML =
(StateManager.navCheckRecord.taLatestSubmitDate || '未知时间') + (StateManager.navCheckRecord.taLatestSubmitDate || '未知时间') +
' 共【' + ' 共【' +
(result ? result.length : 0) + (result ? result.length : 0) +
'】条风险提示'; '】条风险提示';
var arrs = []; var arrs = [];
if (result && result.length > 0) { if (result && result.length > 0) {
result[0].tabName = '风险筛查结果'; result[0].tabName = '风险筛查结果';
for (var i = 0; i < result.length; i++) { for (var i = 0; i < result.length; i++) {
arrs.push(result[i]); arrs.push(result[i]);
}
} }
} if (fileStorageInfoList && fileStorageInfoList.length > 0) {
if (fileStorageInfoList && fileStorageInfoList.length > 0) { fileStorageInfoList[0].tabName = '影像件';
fileStorageInfoList[0].tabName = '影像件'; for (var i = 0; i < fileStorageInfoList.length; i++) {
for (var i = 0; i < fileStorageInfoList.length; i++) { arrs.push(fileStorageInfoList[i]);
arrs.push(fileStorageInfoList[i]); }
}
}
if (arrs.length === 0) {
resultDom.innerHTML =
'<div class="empty-message"><img src="empty.png" alt="" style="width:200px;margin: 0 auto"><p>暂无风险</p></div>';
return;
}
resultDom.innerHTML = '';
// 开始生成页面
for (var ind = 0; ind < arrs.length; ind++) {
var resultDetail = arrs[ind];
// 设置标题
var docH4 = document.createElement('h4');
if (resultDetail.tabName) {
docH4.innerHTML = resultDetail.tabName;
docH4.className = 'section-title';
resultDom.appendChild(docH4);
} }
var treeItem = document.createElement('div'); if (arrs.length === 0) {
treeItem.className = 'tree-item-header '; resultDom.innerHTML =
// 添加降级样式 '<div class="empty-message"><img src="empty.png" alt="" style="width:200px;margin: 0 auto"><p>暂无风险</p></div>';
treeItem.style.background = '#f0f4fa'; return;
treeItem.style.cursor = 'pointer'; }
// treeItem.style.border = '1px solid #d6dde6';
// 创建img元素而不是使用innerHTML提高IE8兼容性 resultDom.innerHTML = '';
var treeIcon = document.createElement('img');
treeIcon.src = './toRight.png';
treeIcon.className = 'tree-icon';
treeIcon.alt = '';
// 为IE8添加特殊属性
treeIcon.setAttribute('alt', '');
treeIcon.style.verticalAlign = 'middle';
treeIcon.style.marginRight = '10px';
var textNode = document.createTextNode(resultDetail.typeName // 开始生成页面
? resultDetail.typeName for (var ind = 0; ind < arrs.length; ind++) {
: resultDetail.dictLabel); var resultDetail = arrs[ind];
treeItem.appendChild(treeIcon); // 设置标题
treeItem.appendChild(textNode); var docH4 = document.createElement('h4');
if (resultDetail.tabName) {
docH4.innerHTML = resultDetail.tabName;
docH4.className = 'section-title';
resultDom.appendChild(docH4);
}
resultDom.appendChild(treeItem); var treeItem = document.createElement('div');
treeItem.className = 'tree-item-header ';
// 添加降级样式
treeItem.style.background = '#f0f4fa';
treeItem.style.cursor = 'pointer';
// treeItem.style.border = '1px solid #d6dde6';
// 设置二级标题子元素 // 创建img元素而不是使用innerHTML提高IE8兼容性
var resultContainer = document.createElement('div'); var treeIcon = document.createElement('img');
resultContainer.className = 'result-container-item'; treeIcon.src = './toRight.png';
resultContainer.id = 'result-container-' + ind; treeIcon.className = 'tree-icon';
// 默认隐藏内容,点击标题展开 treeIcon.alt = '';
resultContainer.style.display = 'none'; // 为IE8添加特殊属性
treeIcon.setAttribute('alt', '');
treeIcon.style.verticalAlign = 'middle';
treeIcon.style.marginRight = '10px';
var childItemUl = document.createElement('ul'); var textNode = document.createTextNode(resultDetail.typeName
childItemUl.className = 'result-container-item-child-ul'; ? resultDetail.typeName
: resultDetail.dictLabel);
if (resultDetail.children && resultDetail.children.length > 0) { treeItem.appendChild(treeIcon);
for ( treeItem.appendChild(textNode);
var childIndex = 0;
childIndex < resultDetail.children.length;
childIndex++
) {
var child = resultDetail.children[childIndex];
var childItem = document.createElement('li'); resultDom.appendChild(treeItem);
childItem.className = 'result-container-item-child';
childItem.innerHTML =
'<span class="index">' +
Number(childIndex + 1) +
'</span>' +
((child.warning ? child.warning : child.fileName) ||
'未知项目');
childItem.style.cursor = 'pointer'; // 设置二级标题子元素
// 为不支持某些CSS属性的浏览器添加兼容样式 var resultContainer = document.createElement('div');
childItem.style.listStyle = 'none'; resultContainer.className = 'result-container-item';
childItem.style.marginLeft = '0px'; resultContainer.id = 'result-container-' + ind;
// 默认隐藏内容,点击标题展开
resultContainer.style.display = 'none';
// 为IE8添加特殊样式 var childItemUl = document.createElement('ul');
childItem.style.border = '1px solid #eee'; childItemUl.className = 'result-container-item-child-ul';
childItem.onclick = (function(index, item) { if (resultDetail.children && resultDetail.children.length > 0) {
return function() { for (
if (item.filePath) { var childIndex = 0;
window.open( childIndex < resultDetail.children.length;
Config.ipConfig.ip + childIndex++
Config.serviceUrl.download.url + ) {
'?fileId=' + var child = resultDetail.children[childIndex];
item.id
);
} else {
// alert('该文件暂无链接')
}
};
})(childIndex, child);
childItemUl.appendChild(childItem);
var childItem = document.createElement('li');
childItem.className = 'result-container-item-child';
childItem.innerHTML =
'<span class="index">' +
Number(childIndex + 1) +
'</span>' +
((child.warning ? child.warning : child.fileName) ||
'未知项目');
childItem.style.cursor = 'pointer';
// 为不支持某些CSS属性的浏览器添加兼容样式
childItem.style.listStyle = 'none';
childItem.style.marginLeft = '0px';
// 为IE8添加特殊样式
childItem.style.border = '1px solid #eee';
childItem.onclick = (function(index, item) {
return function() {
if (item.filePath) {
window.open(
Config.ipConfig.ip +
Config.serviceUrl.download.url +
'?fileId=' +
item.id
);
} else {
// alert('该文件暂无链接')
}
};
})(childIndex, child);
childItemUl.appendChild(childItem);
resultContainer.appendChild(childItemUl);
}
} else {
var emptyLi = document.createElement('li');
emptyLi.innerHTML = '暂无数据';
emptyLi.style.color = '#95a5a6';
emptyLi.style.fontStyle = 'italic';
childItemUl.appendChild(emptyLi);
resultContainer.appendChild(childItemUl); resultContainer.appendChild(childItemUl);
} }
} else {
var emptyLi = document.createElement('li');
emptyLi.innerHTML = '暂无数据';
emptyLi.style.color = '#95a5a6';
emptyLi.style.fontStyle = 'italic';
childItemUl.appendChild(emptyLi);
resultContainer.appendChild(childItemUl);
}
resultDom.appendChild(resultContainer); resultDom.appendChild(resultContainer);
// 绑定点击事件展开/收起内容 // 绑定点击事件展开/收起内容
treeItem.onclick = (function(index, item, iconElement) { treeItem.onclick = (function(index, item, iconElement) {
return function() { return function() {
var resultContainer = document.getElementById( var resultContainer = document.getElementById(
'result-container-' + index 'result-container-' + index
); );
if (resultContainer.style.display === 'none') { if (resultContainer.style.display === 'none') {
resultContainer.style.display = 'block'; resultContainer.style.display = 'block';
// 使用setAttribute提高IE8兼容性 // 使用setAttribute提高IE8兼容性
iconElement.setAttribute('src', './toDown.png'); iconElement.setAttribute('src', './toDown.png');
} else { } else {
resultContainer.style.display = 'none'; resultContainer.style.display = 'none';
iconElement.setAttribute('src', './toRight.png'); iconElement.setAttribute('src', './toRight.png');
}
};
})(ind, resultDetail, treeIcon);
resultDom.style.minHeight = 30 * arrs.length + 'px';
resultDom.style.overflowY = 'auto';
// 如果arrs有结果默认打开第一个result-container-0
if (arrs.length > 0) {
// 使用setTimeout确保DOM完全渲染后再触发点击
setTimeout(function() {
var firstTreeItem =
resultDom.querySelector('.tree-item-header') ||
resultDom.getElementsByClassName('tree-item-header')[0];
var firstResultContainer =
resultDom.querySelector('#result-container-0') ||
resultDom.getElementById('result-container-0');
if (firstTreeItem && firstResultContainer) {
// 显示第一个结果容器
firstResultContainer.style.display = 'block';
// 更新第一个树项的图标为展开状态
var firstIcon = firstTreeItem.getElementsByTagName('img')[0];
if (firstIcon) {
firstIcon.setAttribute('src', './toDown.png');
} }
} };
}, 0); })(ind, resultDetail, treeIcon);
resultDom.style.minHeight = 30 * arrs.length + 'px';
resultDom.style.overflowY = 'auto';
// 如果arrs有结果默认打开第一个result-container-0
if (arrs.length > 0) {
// 使用setTimeout确保DOM完全渲染后再触发点击
setTimeout(function() {
var firstTreeItem =
resultDom.querySelector('.tree-item-header') ||
resultDom.getElementsByClassName('tree-item-header')[0];
var firstResultContainer =
resultDom.querySelector('#result-container-0') ||
resultDom.getElementById('result-container-0');
if (firstTreeItem && firstResultContainer) {
// 显示第一个结果容器
firstResultContainer.style.display = 'block';
// 更新第一个树项的图标为展开状态
var firstIcon = firstTreeItem.getElementsByTagName('img')[0];
if (firstIcon) {
firstIcon.setAttribute('src', './toDown.png');
}
}
}, 0);
}
} }
} catch (e) {
console.error('Detail parse error:', e);
resultDom.innerHTML =
'<div style="color:#e74c3c;padding:20px;text-align:center;">加载详情失败,请稍后重试</div>';
} }
} catch (e) {
console.error('Detail parse error:', e);
resultDom.innerHTML =
'<div style="color:#e74c3c;padding:20px;text-align:center;">加载详情失败,请稍后重试</div>';
} }
} );
); } else {
// 添加加载提示
var resultDom = document.getElementById('detail-container');
resultDom.innerHTML =
'<div class="loading" style="text-align: center; line-height: 32px; height: 32px; font-size: 14px;">\n' +
' <img src="./loading.png" alt="加载中"\n' +
' style="height: 24px; width: 24px; vertical-align: middle;">\n' +
' <span style="vertical-align: middle;margin-left: 20px">正在筛查中...</span>\n' +
'</div>';
return false
}
} }
}; };