/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-27 16:47:12
|
* @LastEditors: lwh
|
* @LastEditTime: 2024-10-21 15:38:19
|
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\levelDetail.jsx
|
* @Description: 右抽屉提示
|
*/
|
import React, { useEffect, useRef, useState } from 'react';
|
import MyDrawer from '@/components/MyDrawer';
|
import { caselogo } from '@/assets/images';
|
import * as $$ from '@/utils/utility';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import { Col, Button, Input, Form } from 'antd';
|
// import { Form } from '@arco-design/web-react';
|
import { aiSubmit, Aimge } from '@/assets/images';
|
|
|
function getCaseDetailApi(data) {
|
return $$.ax.request({ urlAi: `case-law/get-case-detail`, typeAi: 'get', service: 'mediate', data });
|
}
|
|
//创建对话
|
function createAiChatMessageApi(data) {
|
return $$.ax.request({ urlAi: `case-law/createAiChatMessage`, typeAi: 'post', service: 'mediate', data });
|
}
|
|
const EventLevelDrawer = ({ visible, onClose }) => {
|
return (
|
<MyDrawer
|
visible={visible}
|
onClose={onClose}
|
title={<div style={{ fontSize: '16px', fontWeight: '400', color: '#1D2129', paddingLeft: '8px' }}>事件等级</div>}
|
width={1000}
|
style={{ position: 'absolute' }}
|
bodyStyle={{ marginTop: '-8px' }}
|
titleBefore={true}
|
>
|
<div style={{ marginTop: '-8px' }}>
|
<div>
|
<div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px' }}>一级重点事件</div>
|
1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
|
2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公共场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
|
3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
|
4、拖欠工资总金额5万元以上，经济合同外涉金额20万元以上；<br />
|
5、扬言到市赴省进京越级上访；<br />
|
6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
|
7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；<br />
|
8、存在重大安全隐患、重大不稳定因素的矛盾；<br />
|
9、涉及政治类，非宗教类的非法宣传（在出租屋内从事涉及邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）<br />
|
10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
|
</div>
|
<div>
|
<div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>二级重点事件</div>
|
1、3-4人到非接待场所聚集；<br />
|
2、拖欠工资、劳资纠纷涉及人数3-4人；<br />
|
3、拖欠工资总金额3-5万，经济合同纠纷金额10-20万元；<br />
|
4、扬言到县（市、区）越级上访；<br />
|
5、反映商家经营异常（商家被持续停水停电，供应商抱怨商家拖欠货款等现象）；<br />
|
6、反映家庭邻里纠纷（家庭成员、邻里间较激烈，可能恶化为人身财产冲突的矛盾纠纷）；<br />
|
7、反映物业纠纷（物业租赁、小区业主与开发商或物业公司问的房屋质量问题、物业服务质量、乱收费等矛盾纠紛）；<br />
|
8、反映企业生产经营异常（工业园企业被持续停水停电、企业有搬迁、转产或停产传闻，企业员工抱怨企业拖欠工资等现象）等。
|
</div>
|
<div>
|
<div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>三级普通事件</div>
|
1、反映诉求人员1-2人；<br />
|
2、拖欠工资、劳资纠纷涉及人数1-2人；<br />
|
3、拖欠工资总金额3万以下，经济合同纠纷金额10万元以下；<br />
|
4、其他普通矛盾纠纷。<br />
|
</div>
|
|
</div>
|
</MyDrawer>
|
);
|
};
|
|
const MattersDetail = ({ visible, onClose }) => {
|
return (
|
<MyDrawer
|
visible={visible}
|
onClose={onClose}
|
title="事项概况"
|
width={1000}
|
style={{ position: 'absolute' }}
|
bodyStyle={{ marginTop: '-8px' }}
|
titleBefore={true}
|
>
|
<div style={{ marginTop: '-8px' }}>
|
事项简述应该填写完整，完整的事项简述应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过。<br />
|
例如：<br />
|
2024年8月13日，张某与女性好友王某在某烧烤档就餐期间发生矛盾争执，报警人称女方从今年一月份开始，以各种理由让其帮忙付了外卖费，送金链等首饰，但又不确认关系，女方后期还拉黑了报警人，因此报警人认为女方涉嫌诈骗。
|
</div>
|
</MyDrawer>
|
);
|
}
|
|
const NoHandleReason = ({ visible, onClose }) => {
|
return (
|
<div className='MyDrawer'>
|
<MyDrawer
|
visible={visible}
|
onClose={onClose}
|
title="无法化解理由"
|
width={1000}
|
style={{ position: 'absolute' }}
|
bodyStyle={{ marginTop: '-8px' }}
|
titleBefore={true}
|
>
|
<div style={{ marginTop: '-8px' }}>
|
完整的无法化解理由至少应具备3要素：调解过程中提供的解决方案+最终难以调和的原因
|
例如：
|
调解工作于2024年1月10日在某街道人民调解委员会进行，双方当事人均到场参与。调解员首先听取了双方当事人的陈述，随后进行了多次单独会谈，根据被申请方的实际情况提出分期支付欠款的解决方案。在调解过程中，双方就具体支付方式进行了反复讨论，但未能达成一致意见。双方的主要分歧点在与被申请方不想一次性支付欠款。双方在沟通过程中情绪激动，互不相让。尽管调解员尝试缓和气氛，并引导双方从利益出发寻求解决方案，但双方仍坚持各自的立场，不愿妥协。
|
</div>
|
</MyDrawer>
|
|
</div>
|
|
)
|
|
}
|
|
const AiQuestion = ({ visible, onClose, aiData, aiLawData, caseDetailAi, AiChatList, caseClaim }) => {
|
const { TextArea } = Input;
|
|
const [form] = Form.useForm();
|
const [list, setList] = useState([])
|
const [caseDetailView, setCaseDetailView] = useState({})
|
const [modalType, setModalType] = useState('case')
|
const [lawDetail, setLawDetail] = useState({})
|
const [layerList, setLayerList] = useState([])
|
const [caseDetail, setCaseDetail] = useState(false)
|
|
const toggleView = (type, id, caseType, name) => {
|
setCaseDetail(true)
|
setModalType(type)
|
|
if (type === 'case') {
|
getCaseDetail(id, caseType, name);
|
}
|
if (type === 'law') {
|
const lawItem = aiLawData.find(item => item.lawInfoId === id)
|
setLawDetail(lawItem)
|
}
|
};
|
|
|
const caseDetailOnClose = () => {
|
setCaseDetail(false)
|
}
|
|
const getCaseDetail = async (id, type, name) => {
|
const res = await getCaseDetailApi({
|
caseId: id,
|
type: type
|
})
|
if (res.type) {
|
setCaseDetailView({ ...res.data, caseTitle: name, type: type })
|
}
|
}
|
|
|
|
const createAiChat = async () => {
|
let data = form.getFieldsValue()
|
const res = await createAiChatMessageApi({ aiConversationId: '2409231144461224', caseDes: caseDetailAi, caseClaim: caseClaim, userMessage: data.auditContent })
|
console.log(data, 'form1')
|
}
|
|
useEffect(() => {
|
setList(aiData);
|
setLayerList(aiLawData);
|
}, [aiData, aiLawData])
|
|
return (
|
<>
|
<MyDrawer
|
visible={visible}
|
onClose={onClose}
|
title="解纷数智人"
|
width={1200}
|
// style={{ position: 'absolute' }}
|
titleBefore={true}
|
>
|
<Scrollbars style={{ height: '848px', position: 'relative' }} autoHide >
|
<div style={{ display: 'flex', paddingBottom: '50px' }}>
|
<div className='aiBox'>
|
<div className='aiBox-case'>
|
<div className='aiBox-case-logo'>
|
<img src={caselogo} alt='' className='aiBox-case-logo-img' />
|
</div>
|
<div style={{ flex: 1, marginTop: '4px' }}>{caseDetailAi}</div>
|
</div>
|
<div className='marginLeft-tip' >
|
根据当事人的事项概况和事项申请，推荐以下类案和法条参考(<span style={{ color: '#1A6FB8' }}>首次咨询可能需要等待20秒左右</span>)：
|
</div>
|
<div className='marginLeft'>
|
<div className='marginLeft-title'>相关案例：</div>
|
<div className='aiBox-list'>
|
{list?.map((item, index) => (
|
<div className='aiBox-list-item' key={item.caseId}>
|
<div className='aiBox-list-item-type'>{item.caseType === 1 ? '典型案例' : '相似案例'}</div>
|
<div className='aiBox-list-item-name'>{item.caseName}</div>
|
<div className='aiBox-list-item-btn' onClick={() => toggleView('case', item.caseId, item.caseType, item.caseName)} >查看</div>
|
</div>
|
))}
|
</div>
|
</div>
|
<div className='marginLeft'>
|
<div className='marginLeft-title'>相关法条：</div>
|
<div className='aiBox-list'>
|
{layerList?.map((item, index) => (
|
<div className='aiBox-list-item' key={item.lawInfoId}>
|
<div className='aiBox-list-item-type'>相关法条</div>
|
<div className='aiBox-list-item-name'>{item.lawTitle}{item.lawIndex}</div>
|
<div className='aiBox-list-item-btn' onClick={() => toggleView('law', item.lawInfoId)} >查看</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
|
</div>
|
{/* {
|
AiChatList.length > 0 &&
|
<div style={{ paddingBottom: '120px', backgroundColor: '#f2f3f5', marginTop: '-100px', paddingLeft: '20px' }}>
|
{AiChatList?.map((item, index) => (
|
<div style={{ display: 'flex', marginBottom: '20px' }} key={item.aiMessageId}>
|
<img src={Aimge} alt='' style={{ width: '26px', height: '26px' }} />
|
<div>{item.messageContent}</div>
|
</div>
|
)
|
)}
|
</div>
|
}
|
<div style={{ display: 'flex' }}>
|
<Form
|
form={form}
|
layout='vertical'
|
scrollToFirstError
|
style={{ position: 'fixed', bottom: '-40px' }}
|
>
|
<Col span={24}>
|
<Form.Item
|
label=''
|
name='auditContent'
|
>
|
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='您想咨询什么...'
|
style={{ width: '1170px', borderRadius: '20px' }}
|
/>
|
</Form.Item>
|
<Button type='primary' className='aiBtn' onClick={() => createAiChat()} ><img src={aiSubmit} alt='' style={{ width: '20px', borderRadius: '10px' }} />发送</Button>
|
|
</Col>
|
</Form>
|
|
</div> */}
|
|
</Scrollbars>
|
|
</MyDrawer>
|
<div className='MyDrawer'>
|
<MyDrawer
|
visible={caseDetail}
|
onClose={caseDetailOnClose}
|
title={modalType === 'case' ? "查看相关案例" : "查看相关法条"}
|
width={700}
|
// style={{ position: 'absolute' }}
|
bodyStyle={{ marginTop: '-8px' }}
|
titleBefore={true}
|
>
|
{
|
modalType === 'case' &&
|
<div className='layerDetail'>
|
<div className='layerDetail-title'>参考案例</div>
|
<div className='layerDetail-name'>{caseDetailView?.caseTitle || '-'}</div>
|
<div className='layerDetail-littleTitle'>案件描述</div>
|
<div className='layerDetail-content'>{caseDetailView?.caseDesc || '-'}</div>
|
<div className='layerDetail-littleTitle'>群众诉求</div>
|
<div className='layerDetail-content'>{caseDetailView?.caseClaim || '-'}</div>
|
<div className='layerDetail-littleTitle'>{caseDetailView?.type === 1 ? '和解协议' : '判决结果'}</div>
|
<div className='layerDetail-content'>{caseDetailView?.agreeContent || '-'}</div>
|
</div>
|
}
|
{
|
modalType === 'law' &&
|
<div className='layerDetail'>
|
<div className='layerDetail-title'>{lawDetail?.lawIndex} {lawDetail?.lawTitle}</div>
|
<div className='layerDetail-littleTitle'>{lawDetail.lawDesc}</div>
|
</div>
|
}
|
</MyDrawer>
|
</div>
|
</>
|
|
)
|
}
|
|
|
|
export { EventLevelDrawer, MattersDetail, NoHandleReason, AiQuestion };
|
