/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-04-08 09:12:50
|
* @LastEditTime: 2024-04-22 15:41:16
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 调解导航（新导航）
|
*/
|
import '../index.less';
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { Select, Drawer, Space, Typography, Popconfirm, Rate, Form, Col, Row, Button, Spin, Pagination, Empty } from 'antd';
|
import { useVirtual } from 'react-virtual';
|
import { SyncOutlined, LikeOutlined } from '@ant-design/icons';
|
import { nav1, nav2, nav3, nav4, nav5, toppingUp, toppingUp2, toppingDown, fullScreen, navBg } from '../../../assets/images/icon';
|
import { ai_1, ai_2, ai_3, ai_4, ai_5, ai_6 } from '../../../assets/images/AIImg';
|
import { ActionModal } from './index';
|
import * as $$ from '../../../utils/utility';
|
import timer from '../../../utils/timer';
|
|
//推荐接口
|
function getDataApi(submitData) {
|
return $$.ax.request({ url: `guide/windowCaseGuideByDb`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 案件特征
|
function getCaseFeatureApi(submitData) {
|
return $$.ax.request({ url: 'guide/getCaseFeature', type: 'get', data: submitData, service: 'mediate' });
|
|
}
|
|
function cacheOpenAiCaseGuideListApi(submitData) {
|
return $$.ax.request({ url: `guide/cacheOpenAiCaseGuideList`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 类案推荐缓存接口
|
function cacheLatjCaseGuideApi(submitData) {
|
return $$.ax.request({ url: `guide/cacheLatjCaseGuide`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 案件特征缓存接口
|
function cacheCaseFeatureApi(submitData) {
|
return $$.ax.request({ url: `guide/cacheCaseFeature`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 右侧弹窗字典值
|
function getCaseFeatureNameApi(submitData) {
|
return $$.ax.request({ url: `guide/getFeatureCount`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
|
// 右侧弹窗典型案例列表
|
function getPageCaseGuideListApi(submitData) {
|
return $$.ax.request({ url: `guide/getPageCaseGuideList`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
function rateApi(submitData) {
|
return $$.ax.request({ url: `guideRatings/saveGuideRatings`, type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
|
// 类案推荐的案件特征缓存接口
|
function cacheLatjCaseFeatureListApi(submitData) {
|
return $$.ax.request({ url: `guide/cacheLatjCaseFeatureList`, type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
|
const { Paragraph } = Typography;
|
const { Option } = Select;
|
|
const MediationNav1 = ({ newData, onClickRatio, createAgreement }) => {
|
const [form] = Form.useForm();
|
|
const [searchParams] = useSearchParams();
|
|
let navigate = useNavigate();
|
|
const recordRef = useRef();
|
|
const caseId = searchParams.get('caseId');
|
const taskId = searchParams.get('taskId');
|
|
// 数据
|
const [data, setData] = useState([]);
|
|
// 那件特征
|
|
const [caseTZList, setCaseTZList] = useState([]);
|
|
// 类案推荐
|
const [suggestList, setSuggestList] = useState([]);
|
|
const [suggestListPage, setSuggestListPage] = useState(1);
|
|
// 法条推荐
|
const [fttjList, setFttjList] = useState([]);
|
|
// 置顶数据
|
const [fixedList, setFixedList] = useState({ list: [], ids: [] });
|
|
// 当前选择的数据
|
const [activeData, setActiveData] = useState({});
|
|
// tabs选择项
|
const [tabActive, setTabActive] = useState([]);
|
|
// 导航数量动画控制
|
const [guideNumAnimated, setGuideNumAnimated] = useState(null);
|
|
// 是否全屏
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
// 折叠
|
const [show, setShow] = useState([]);
|
|
// 评价的星星等级
|
const [rate, setRate] = useState([]);
|
|
// 操作modal
|
const [modal, setModal] = useState({ visible: null });
|
|
const [rightModal, setRightModal] = useState({ visible: false });
|
|
const [isHovering, setIsHovering] = useState([])
|
|
const [rightData, setRightData] = useState({})
|
|
const [searchRightData, setSearchRightData] = useState({ page: 1, size: 10, direction: '1' });
|
|
const [rightSearch, setRightSearch] = useState([])
|
|
const [spinning, setSpinning] = useState(false)
|
|
|
|
// 数据筛选
|
function handleScreen(value) {
|
let list = [];
|
value.forEach((x) => (list = list.concat(data.data[x - 1]?.guideInfoList || [])));
|
list.sort((a, b) => ($$.timeFormat(a.guideTime) < $$.timeFormat(b.guideTime) ? 1 : -1));
|
setData({ ...data, list });
|
setTabActive(value);
|
global.tabActive = value;
|
}
|
|
// 点击案例
|
function handleClickItem(item, index) {
|
global.activeDataId = item?.id;
|
setActiveData({ ...item, index: index - fixedList.ids.length });
|
}
|
|
// 置顶 or 取消置顶
|
function handleTopping() {
|
if (fixedList.ids.includes(activeData.id)) {
|
let index = fixedList.ids.indexOf(activeData.id);
|
data.list = [activeData, ...data.list];
|
fixedList.list.splice(index, 1);
|
fixedList.ids.splice(index, 1);
|
setData({ ...data });
|
setFixedList({ ...fixedList });
|
} else {
|
fixedList.list.push({ ...activeData, fixedIndex: fixedList.list.length });
|
fixedList.ids.push(activeData.id);
|
data.list.splice(activeData.index, 1);
|
setData({ ...data });
|
setFixedList({ ...fixedList });
|
}
|
}
|
|
// 系列案展开折叠
|
function handleCaseShow(t) {
|
let index = show.indexOf(t);
|
if (index !== -1) {
|
show.splice(index, 1);
|
setShow([...show]);
|
} else {
|
setShow([...show, t]);
|
}
|
}
|
|
|
// 鼠标移入
|
function handleMouseEnter(t) {
|
let index = isHovering.indexOf(t);
|
if (index !== -1) {
|
isHovering.splice(index, 1);
|
setIsHovering([...isHovering]);
|
} else {
|
setIsHovering([...isHovering, t]);
|
}
|
}
|
// 鼠标移除
|
function handleMouseLeave(t) {
|
let index = isHovering.indexOf(t);
|
if (index !== -1) {
|
isHovering.splice(index, 1);
|
setIsHovering([...isHovering]);
|
} else {
|
setIsHovering([...isHovering, t]);
|
}
|
}
|
|
// 案件特征
|
async function getCaseFeature() {
|
global.setSpinning(true);
|
const res = await getCaseFeatureApi({ caseId });
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseTZList(res.data || [])
|
}
|
}
|
|
// 评价接口
|
async function RateConfirm(id) {
|
global.setSpinning(true);
|
const res = await rateApi({ serviceId: id, rating: rate, });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '感谢您的评价' });
|
}
|
}
|
|
// 获取数据
|
async function getData() {
|
global.setSpinning(true);
|
const res = await getDataApi({ caseId });
|
global.setSpinning(false);
|
console.log(res);
|
if (res.type) {
|
let newData = res.data;
|
setData(newData);
|
}
|
}
|
|
|
// 弹窗详情
|
function handleSearch(values) {
|
|
console.log(typeof (values.featureName));
|
if (typeof (values.featureName) === 'string') {
|
showRightModal({ ...searchRightData, featureName: values?.featureName ? values?.featureName : '' });
|
} else {
|
showRightModal({ ...searchRightData, featureName: values?.featureName ? values?.featureName?.join() : '' });
|
}
|
}
|
|
function handleValuesChange(changedValues) {
|
// showRightModal({ ...searchRightData, ...changedValues });
|
}
|
|
|
|
// 右侧弹窗典型案例
|
async function showRightModal(data) {
|
setSpinning(true)
|
const res = await getPageCaseGuideListApi({ ...data, caseId });
|
setSpinning(false)
|
console.log(res);
|
if (res.type) {
|
let newData = res.data;
|
setRightData({ tableData: newData.content || [], total: newData.totalElements });
|
}
|
}
|
|
// 右侧弹窗筛选字典值
|
async function getCaseFeatureName() {
|
const res = await getCaseFeatureNameApi({ caseId });
|
if (res.type) {
|
let newData = res.data || [];
|
setRightSearch(newData || []);
|
}
|
}
|
|
async function cacheLatjCaseFeatureList(submitData) {
|
$$.setLocal(`cacheLatjCaseFeatureList${submitData.caseId}`, '')
|
const res = await cacheLatjCaseFeatureListApi(submitData);
|
if (res.type) {
|
$$.clearLocal(`cacheLatjCaseFeatureList${submitData.caseId}`)
|
}
|
}
|
|
|
useEffect(() => {
|
getCaseFeature();
|
// cacheLatjCaseFeatureList({ caseId })
|
// cacheCaseFeature()
|
// cacheOpenAiCaseGuideList();
|
// cacheLatjCaseGuide();
|
// getData();
|
// timer.setInterval(
|
// 'getAiData',
|
// () => {
|
// if (window.location.hash.indexOf('mediationWindow') !== -1) getData();
|
// },
|
// 20000
|
// );
|
// return () => {
|
// timer.clearInterval('getAiData');
|
// global.tabActive = void 0;
|
// global.activeDataId = void 0;
|
// };
|
|
setData(newData);
|
setSuggestList(newData?.find(i => i.guideName === '类案推荐')?.guideInfoList || []);
|
setFttjList(newData?.find(i => i.guideName === '法条推荐')?.guideInfoList || [])
|
}, [newData]);
|
|
async function setAnimated() {
|
setGuideNumAnimated(false);
|
await $$.sleep(300);
|
setGuideNumAnimated(true);
|
}
|
|
return (
|
<div className={`mediationWindow-card ${isFullScreen ? 'mediationWindow-fullScreenNav' : 'mediationWindow-nav'}`}>
|
{
|
($$.getLocal(`cacheCaseFeature${caseId}`) === '' || $$.getLocal(`cacheLatjCaseFeatureList${caseId}`) === '' || $$.getLocal(`cacheLatjCaseGuide${caseId}`) === '' || $$.getLocal(`cacheOpenAiCaseGuideList${caseId}`) === '') ?
|
<div className="mediationWindow-card">
|
<h5>调解导航</h5>
|
<div className="mediationWindow-nav-empty">{$$.MyEmpty({ description: 'AI正在为您生成中' })}</div>
|
</div> :
|
<>
|
{data.length === 0 ? (
|
<div className="mediationWindow-card">
|
<h5>调解导航</h5>
|
<div className="mediationWindow-nav-empty">{$$.MyEmpty({ description: '暂无相关内容推荐' })}</div>
|
</div>
|
) : (
|
<>
|
<div className="mediationWindow-nav-center">
|
<div className="mediationWindow-nav-left-title">
|
<Space size={4}>
|
<div style={{ display: 'flex', alignItems: 'center' }}><img style={{ width: '16px' }} src={ai_1} alt="" srcset="" /> <div style={{ color: '#d10202', fontSize: '16px', fontWeight: '600' }}>调解导航</div></div>
|
</Space>
|
</div>
|
<div className="mediationWindow-nav-center-div">
|
{/* 案件特征 */}
|
<div style={{ paddingBottom: '4px' }}>
|
<h4>案件特征</h4>
|
</div>
|
<div style={{ paddingBottom: '8px', overflowX: 'auto' }}>
|
<div className={`mediationWindow-nav-center-row flipInX`}>
|
{
|
caseTZList.map((item, index) => (
|
<div key={index} className="mediationWindow-nav-center-col">
|
<div className="mediationWindow-nav-center-tag public-tag public-tag-default">{item.featureName}</div>
|
<div className="mediationWindow-nav-center-text">相似案例<span className='public-a' onClick={() => {
|
setRightModal({ visible: true })
|
showRightModal({ ...searchRightData, featureName: item.featureName });
|
form.setFieldValue('featureName', item.featureName);
|
getCaseFeatureName()
|
|
}} style={{ color: '#d10202' }}> {item.featureCount} </span>件</div>
|
</div>
|
))
|
}
|
</div>
|
</div>
|
</div>
|
|
<div className="mediationWindow-nav-center-div">
|
{/* 争议焦点 */}
|
<div style={{ paddingBottom: '4px' }}>
|
<h4>争议焦点</h4>
|
</div>
|
{data?.find(i => i.guideName === '争议焦点')?.guideInfoList[0]?.guideText?.length > 128 ?
|
<div onClick={() => handleCaseShow(`1`)} className={show.includes(`1`) ? 'caseFolderCheck-folderMain-show' : 'public-a'} style={{ backgroundColor: '#F6F7FB', borderRadius: '4px', padding: '8px 12px', color: 'rgba(23,26,29,0.70)' }}>
|
{show.includes(`1`) ? data?.find(i => i.guideName === '争议焦点')?.guideInfoList[0]?.guideText : $$.ellipsis((data?.find(i => i.guideName === '争议焦点')?.guideInfoList[0]?.guideText + data?.find(i => i.guideName === '争议焦点')?.guideInfoList[0]?.guideText), 128)}
|
<span style={{ marginRight: '4px' }}>{show.includes(`1`) ? '[折叠]' : '[展开]'}</span>
|
</div> :
|
<div style={{ backgroundColor: '#F6F7FB', borderRadius: '4px', padding: '8px 12px', color: 'rgba(23,26,29,0.70)' }}>
|
{data?.find(i => i.guideName === '争议焦点')?.guideInfoList[0]?.guideText}
|
</div>
|
}
|
</div>
|
|
<div className="mediationWindow-nav-center-div">
|
{/* 调解策略 */}
|
<div style={{ paddingBottom: '4px' }}>
|
<h4>调解策略</h4>
|
</div>
|
{data?.find(i => i.guideName === '调解策略')?.guideInfoList[0]?.guideText?.length > 128 ?
|
<div onClick={() => handleCaseShow(`2`)} className={show.includes(`2`) ? 'caseFolderCheck-folderMain-show' : 'public-a'} style={{ backgroundColor: '#F6F7FB', borderRadius: '4px', padding: '8px 12px', color: 'rgba(23,26,29,0.70)' }}>
|
{show.includes(`2`) ? data?.find(i => i.guideName === '调解策略')?.guideInfoList[0]?.guideText : $$.ellipsis((data?.find(i => i.guideName === '调解策略')?.guideInfoList[0]?.guideText + data?.find(i => i.guideName === '调解策略')?.guideInfoList[0]?.guideText), 128)}
|
<span className='public-a' style={{ marginRight: '4px' }}>{show.includes(`2`) ? '[折叠]' : '[展开]'}</span>
|
</div> :
|
<div style={{ backgroundColor: '#F6F7FB', borderRadius: '4px', padding: '8px 12px', color: 'rgba(23,26,29,0.70)' }}>
|
{data?.find(i => i.guideName === '调解策略')?.guideInfoList[0]?.guideText}
|
</div>
|
}
|
</div>
|
|
<div className="mediationWindow-nav-center-div">
|
{/* 典型类案 */}
|
<div style={{ paddingBottom: '4px', display: 'flex', justifyContent: 'space-between' }}>
|
<h4>典型类案</h4>
|
</div>
|
<div style={{ minHeight: '120px', maxHeight: '340px', overflowY: 'scroll' }}>
|
{
|
suggestList?.map((item, index) => (
|
<div key={index}
|
onMouseEnter={() => handleMouseEnter(index)}
|
onMouseLeave={() => handleMouseLeave(index)} className='mediationWindow-nav-center-div-radius-div'>
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
<div onClick={() => window.open(`/dyh/dev/index.html#/mediate/myAdjust/mediationWindow/detail?cpwsCaseInfoId=${item.guideInfoId}&cpwsCaseTextId=${item.id}`)}><span className='mediationWindow-nav-center-div-radius'></span><span className='mediationWindow-nav-center-div-title'>{item.guideTitle}</span></div>
|
{
|
isHovering.includes(index) &&
|
<Space
|
style={{ color: '#d1021c' }} size={8}>
|
<div onClick={() => onClickRatio(item.guideInfoId, item.id)} className='mediationWindow-nav-center-div-img'><img src={ai_2} alt="" srcset="" /> 对比</div>
|
{/* <div onClick={() => createAgreement(item.guideInfoId)} className='mediationWindow-nav-center-div-img'><img src={ai_3} alt="" srcset="" /> 生成协议</div> */}
|
<Popconfirm
|
placement="bottomRight"
|
okText="评价"
|
onConfirm={() => { RateConfirm(item.id) }}
|
title={<div>
|
<div>推荐内容对您有帮助吗？</div>
|
<div><Rate onChange={(value) => { setRate(value) }} className='mediationWindow-nav-center-div-rate' allowHalf defaultValue={1} /></div>
|
</div>}
|
icon=''
|
>
|
<div className='mediationWindow-nav-center-div-img'><img src={ai_4} alt="" srcset="" /> 评价</div>
|
</Popconfirm>
|
</Space>
|
}
|
</div>
|
{/* <Space className="casePerfection-file-bottom" style={{ fontSize: '14px', lineHeight: '22px' }} size={11}>
|
<span>离婚纠纷</span>
|
<span className="public-span">广东省广州市</span>
|
<span className="public-span">2020.3.1</span>
|
<span className="public-span">人民调解</span>
|
</Space> */}
|
<div>
|
<Space wrap align="center" className="casePerfection-file-bottom" style={{ fontSize: '14px', lineHeight: '22px', paddingLeft: '4px' }} size={8}>
|
<span>案件特征：</span>
|
{
|
item.featureList?.map((it, idx) => (
|
<div key={'it' + idx} className=" public-tag public-tag-default">{it}</div>
|
))
|
}
|
{/* <div className=" public-tag public-tag-default">财产分割</div>
|
<div className=" public-tag public-tag-default">继承权</div> */}
|
</Space>
|
</div>
|
</div>
|
))
|
}
|
</div>
|
</div>
|
|
<div className="mediationWindow-nav-center-div">
|
{/* 相关法条 */}
|
<div style={{ paddingBottom: '4px', display: 'flex', justifyContent: 'space-between' }}>
|
<h4>相关法条</h4>
|
</div>
|
<div style={{ minHeight: '120px', maxHeight: '340px', overflowY: 'scroll' }}>
|
{
|
fttjList?.map((item, index) => (
|
<div className='mediationWindow-nav-center-div-radius-div'>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
{/* <div onClick={() => navigate(`/mediate/myAdjust/mediationWindow/detail?id=${item.guideInfoId}`)}><span className='mediationWindow-nav-center-div-radius'></span><span className='mediationWindow-nav-center-div-title'>{item.guideTitle}</span></div> */}
|
</div>
|
<div onClick={() => handleCaseShow(String(index + 2))} className={show.includes(String(index + 2)) ? 'caseFolderCheck-folderMain-show' : 'public-a'} style={{ backgroundColor: '#F6F7FB', borderRadius: '4px', padding: '8px 12px', color: 'rgba(23,26,29,0.70)' }}>
|
{show.includes(String(index + 2)) ? item.guideText : $$.ellipsis(item.guideText, 128)}
|
{
|
item.guideText?.length > 128 &&
|
<span className='public-a' style={{ marginRight: '4px' }}>{show.includes(String(index + 2)) ? '[折叠]' : '[展开]'}</span>
|
}
|
</div>
|
</div>
|
))
|
}
|
</div>
|
</div>
|
</div>
|
|
</>
|
)
|
}
|
</>
|
}
|
|
|
<Drawer
|
title="典型案例"
|
width='720px'
|
placement='right'
|
closable={false}
|
onClose={() => setRightModal({ visible: false })}
|
open={rightModal.visible}
|
>
|
<Spin spinning={spinning}>
|
<div style={{ borderBottom: '1px solid rgba(5,5,5,0.06)', paddingBottom: '8px' }}>
|
<Form
|
form={form}
|
onValuesChange={handleValuesChange}
|
onFinish={(values) => handleSearch(values)}
|
>
|
<Row gutter={[16, 2]}>
|
<Col span={12} >
|
<Form.Item name={'featureName'} label={<div >案件特征</div>}>
|
<Select mode='tags' allowClear placeholder="请选择案件特征">
|
{rightSearch?.map((y) => (
|
<Option key={y}></Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={12} style={{ display: 'flex', justifyContent: 'end' }} ><Button type="primary" onClick={() => form.submit()}>查询案例</Button></Col>
|
</Row>
|
</Form>
|
<div style={{ paddingTop: '16px' }}>
|
<Space>
|
<div>排序：</div>
|
{/* <div style={{ display: 'flex', alignItems: 'center' }} onClick={() => { setSearchRightData({ ...searchRightData, direction: searchRightData.direction === '1' ? '-1' : '1' }) }} className='public-color'>综合排序 <img style={{ width: '14px' }} src={ai_5} alt="" srcset="" /></div> */}
|
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => { setSearchRightData({ ...searchRightData, direction: searchRightData.direction === '1' ? '-1' : '1' }) }} className={searchRightData.direction === '1' ? '' : 'public-color'}>发生时间 <img style={{ width: '14px' }} src={searchRightData.direction === '1' ? ai_6 : ai_5} alt="" srcset="" /></div>
|
</Space>
|
</div>
|
</div>
|
<div style={{ minHeight: '680px', maxHeight: '680px', overflowY: 'hidden' }}>
|
{
|
rightData?.tableData?.length > 0 ? rightData?.tableData?.map((item, index) => (
|
<div style={{ marginBottom: '12px', padding: '8px 0', borderBottom: '1px solid rgba(5,5,5,0.06)' }}>
|
<div onClick={() => { window.open(`/dyh/dev/index.html#/mediate/myAdjust/mediationWindow/detail?id=${item.guideInfoId}`) }} className='public-a' style={{ fontSize: '16px', lineHeight: '24px', marginBottom: '4px' }}>{item.guideTitle}</div>
|
{/* <Space className="casePerfection-file-bottom" style={{ fontSize: '14px', lineHeight: '22px', marginBottom: '4px' }} size={11}>
|
<span>离婚纠纷</span>
|
<span className="public-span">广东省广州市</span>
|
<span className="public-span">2020.3.1</span>
|
<span className="public-span">人民调解</span>
|
</Space> */}
|
< div >
|
{/* <Space align="center" className="casePerfection-file-bottom" style={{ fontSize: '14px', lineHeight: '22px' }} size={8}> */}
|
< div style={{ paddingBottom: '4px' }} className={`mediationWindow-nav-center-row1 ${item?.featureList?.length > 5 && 'mediationWindow-nav-center-row1-scroll1'}`}>
|
<div style={{ whiteSpace: 'nowrap' }}>案件特征：</div>
|
{
|
item?.featureList?.map((x, t) => (
|
<div style={{ whiteSpace: 'nowrap' }} key={'featureList' + t} className="public-tag public-tag-default">{x}</div>
|
))
|
}
|
</div>
|
{/* </Space> */}
|
</div>
|
</div>
|
)) : <Empty />
|
}
|
</div >
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'end', paddingTop: '12px' }}>
|
<Pagination onChange={(page, pageSize) => {
|
setSearchRightData({ ...searchRightData, page, size: pageSize });
|
showRightModal({ page, size: pageSize })
|
}} current={searchRightData.page} pageSize={searchRightData.size} total={rightData.total} />
|
</div>
|
</Spin >
|
</Drawer >
|
</div >
|
);
|
};
|
|
MediationNav1.propTypes = {};
|
|
export default MediationNav1;
|
