forked from gzzfw/frontEnd/gzDyh

liuwh
2024-09-14 221546808c11df777199def992e4abbf1fc31b5a
gz-customerSystem/src/views/register/visit/component/levelDetail.jsx
@@ -2,13 +2,19 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 16:47:12
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-08 10:36:03
 * @LastEditTime: 2024-09-12 17:19:32
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\levelDetail.jsx
 * @Description: 右抽屉提示
 */
import React, { useEffect, useState } from 'react';
import MyDrawer from '@/components/MyDrawer';
import { caselogo } from '@/assets/images';
import * as $$ from '@/utils/utility';
function getCaseDetailApi(data) {
    return $$.ax.request({ urlAi: `case-law/get-case-detail`, typeAi: 'get', service: 'mediate', data });
}
const EventLevelDrawer = ({ visible, onClose }) => {
@@ -16,7 +22,7 @@
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事件等级指南"
            title="事件等级"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
@@ -64,7 +70,7 @@
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事项概况指南"
            title="事项概况"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
@@ -104,89 +110,79 @@
}
const AiQuestion = ({ visible, onClose, aiData,aiLawData,caseDetailView }) => {
    const [list, setList] = useState([
        // {
        //     id: '1',
        //     type: '典型案例',
        //     name: '唐某某诉重庆某工业有限公司劳动合同纠纷案'
        // },
        // {
        //     id: '2',
        //     type: '相似案例',
        //     name: '曾某某诉某网络科技公司劳动争议案'
        // },
        // {
        //     id: '3',
        //     type: '相似案例',
        //     name: '曾某某诉某网络科技公司劳动争议案'
        // },
    ])
    const [layerList, setLayerList] = useState([
        {
            id: '1',
            name: '法条一'
        },
        {
            id: '2',
            name: '法条二'
        },
        {
            id: '3',
            name: '法条三'
        },
    ])
const AiQuestion = ({ visible, onClose, aiData, aiLawData, caseDetailAi }) => {
    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) => {
        console.log(id, 'iddddddd')
    const toggleView = (type, id, caseType, name) => {
        setCaseDetail(true)
        if(type==='case'){
            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 })
        }
    }
    useEffect(() => {
        setList(aiData)
        setLayerList(aiLawData)
    }, [aiData,aiLawData])
        setList(aiData);
        setLayerList(aiLawData);
    }, [aiData, aiLawData])
    return (
        <>
            <MyDrawer
                visible={visible}
                onClose={onClose}
                title="智能调解助理"
                title="穗调解数智人"
                width={1200}
                style={{ position: 'absolute' }}
                // style={{ position: 'absolute' }}
                bodyStyle={{ marginTop: '-8px' }}
                titleBefore={true}
            >
                <div style={{ display: 'flex' }}>
                    <div style={{ width: '100px' }}></div>
                    <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 }}>刘家健入职吴昆物流公司工作6天,因不适应工作内容、环境等,向吴昆物流公司提出离职申请,但公司称入职1周内因个人原因辞职不予支付工资。刘家健因此向社区调委会申请调解。刘家健希望吴昆物流公司支付6天的工资。经调解,双方达成一致意见,吴昆物流公司同意支付刘家健6天的工资共计1575元。基于这个案件生成合理的调解策略.</div>
                            <div style={{ flex: 1, marginTop: '4px' }}>{caseDetailAi}</div>
                        </div>
                        <div className='marginLeft-tip' >
                            根据当事人的事项概况和事项申请,推荐以下类案和法条参考:
                        </div>
                        <div className='marginLeft'>
                            <div className='marginLeft-title'>相关案例:</div>
                            <div className='aiBox-list'>
                                {list?.map((item, index) => (
                                    <div className='aiBox-list-item'>
                                    <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.id)}>查看</div>
                                        <div className='aiBox-list-item-btn' onClick={() => toggleView('case', item.caseId, item.caseType, item.caseName)} >查看</div>
                                    </div>
                                ))}
                            </div>
@@ -195,10 +191,10 @@
                            <div className='marginLeft-title'>相关法条:</div>
                            <div className='aiBox-list'>
                                {layerList?.map((item, index) => (
                                    <div className='aiBox-list-item'>
                                    <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 className='aiBox-list-item-btn' onClick={() => toggleView('law', item.lawInfoId)} >查看</div>
                                    </div>
                                ))}
                            </div>
@@ -211,20 +207,33 @@
                <MyDrawer
                    visible={caseDetail}
                    onClose={caseDetailOnClose}
                    title="查看相关案例"
                    width={400}
                    style={{ position: 'absolute' }}
                    title={modalType === 'case' ? "查看相关案例" : "查看相关法条"}
                    width={700}
                    // style={{ position: 'absolute' }}
                    bodyStyle={{ marginTop: '-8px' }}
                    titleBefore={true}
                >
                    <div className='layerDetail'>
                        <div className='layerDetail-title'>参考案例</div>
                        <div className='layerDetail-name'>唐某某诉重庆某工业有限公司劳动合同纠纷案</div>
                        <div className='layerDetail-littleTitle'>智能摘要</div>
                        <div className='layerDetail-content'>法院生效裁判认为,本案是肖某某要求某工业公司支付经济补偿金,原审法院已经确认某工业公司存在未足额支付肖某某工资、未休年休假工资情形,故依照《中华人民共和国劳动合同法》(以下简称劳动合同法)第三十八条第一款的规定,某工业公司应当支付解除合同的经济补偿金。</div>
                    </div>
                    {
                        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'>和解协议</div>
                            <div className='layerDetail-content'>{caseDetailView?.agreeContent || '-'}</div>
                        </div>
                    }
                    {
                        modalType === 'law' &&
                        <div className='layerDetail'>
                            <div className='layerDetail-title'>{lawDetail?.lawIndex}&nbsp;&nbsp;{lawDetail?.lawTitle}</div>
                            <div className='layerDetail-littleTitle'>{lawDetail.lawDesc}</div>
                        </div>
                    }
                </MyDrawer>
            </div>
        </>