/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2023-12-13 10:40:08
|
* @LastEditTime: 2023-12-26 11:38:44
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 类案对比
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useVirtual } from 'react-virtual';
|
import { Spin, Space } from 'antd';
|
import { mediationRoom } from '../../../assets/images/icon';
|
import mediateDynamicStatus from '../../../status/mediateDynamicStatus';
|
import * as $$ from '../../../utils/utility';
|
import timer from '../../../utils/timer';
|
|
function getCaseGuideContrastApi(submitData) {
|
return $$.ax.request({ url: `guide/getCaseGuideContrast`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
const MediateRatio = ({ caseId, guideInfoId, guideId }) => {
|
|
const [tag, setTag] = useState('1');
|
const [data, setData] = useState({});
|
const [spin, setSpin] = useState(false)
|
|
|
async function getCaseGuideContrast() {
|
setSpin(true)
|
global.setSpinning(true);
|
const res = await getCaseGuideContrastApi({ caseId, guideInfoId, guideId });
|
global.setSpinning(false);
|
if (res.type) {
|
let newData = res.data || {};
|
setData(newData);
|
setSpin(false)
|
// setSuggestList(newData?.find(i => i.guideName === '类案推荐')?.guideInfoList || [])
|
|
}
|
}
|
|
useEffect(() => {
|
getCaseGuideContrast();
|
}, []);
|
|
function highlightKeywords(text, keywords) {
|
const regex = new RegExp(keywords.join('|'), 'gi');
|
return text.replace(regex, '<span style="color: red;">$&</span>');
|
}
|
|
return (
|
<div className='mediate-ratio-main' >
|
<Spin spinning={spin}>
|
{/* tag头部 */}
|
< div className='mediate-ratio-main-head' >
|
<div onClick={() => setTag('1')} className={`mediate-ratio-main-tag ${tag === '1' && 'mediate-ratio-main-tagActive'}`}>主体信息<br /><span className={`mediate-ratio-main-tag-subtitle ${tag === '1' && 'mediate-ratio-main-tag-subtitle-tagActive'}`}>【{data.similarity || '-'}相似】</span></div>
|
{/* <div onClick={() => setTag('2')} className={`mediate-ratio-main-tag ${tag === '2' && 'mediate-ratio-main-tagActive'}`}>纠纷描述<br /><span className={`mediate-ratio-main-tag-subtitle ${tag === '2' && 'mediate-ratio-main-tag-subtitle-tagActive'}`}>【3%相似】</span></div>
|
<div onClick={() => setTag('3')} className={`mediate-ratio-main-tag ${tag === '3' && 'mediate-ratio-main-tagActive'}`}>调解请求<br /><span className={`mediate-ratio-main-tag-subtitle ${tag === '3' && 'mediate-ratio-main-tag-subtitle-tagActive'}`}>【3%相似】</span></div>
|
<div onClick={() => setTag('4')} className={`mediate-ratio-main-tag ${tag === '4' && 'mediate-ratio-main-tagActive'}`}>争议焦点<br /><span className={`mediate-ratio-main-tag-subtitle ${tag === '4' && 'mediate-ratio-main-tag-subtitle-tagActive'}`}>【3%相似】</span></div> */}
|
</div >
|
<div className='mediate-ratio-main-content'>
|
<div className='mediate-ratio-main-content-l' style={{ overflow: 'auto' }}>
|
<div className='mediate-ratio-main-content-l-title'>{data.guideTitle || '-'}</div>
|
<div className='mediate-ratio-main-content-l-tip'>对比内容：【主体信息】 | 相似度：{data.similarity || '-'}</div>
|
{
|
data.guideText ?
|
<div dangerouslySetInnerHTML={{ __html: highlightKeywords(data.guideText, data.guideSimilarTextList) }} ></div> : '-'
|
}
|
</div>
|
<div style={{ width: '24px' }}></div>
|
<div className='mediate-ratio-main-content-l' style={{ overflow: 'auto' }}>
|
<div className='mediate-ratio-main-content-l-title'>本案</div>
|
{
|
data.caseText ?
|
<div dangerouslySetInnerHTML={{ __html: highlightKeywords(data.caseText, data.caseSimilarTextList) }} ></div> : '-'
|
}
|
{/* <div>{data.caseText || '-'}</div> */}
|
</div>
|
</div>
|
|
</Spin>
|
</div >
|
)
|
}
|
|
|
export default MediateRatio;
|
