fix: 受理跳转办理页面为空白的bug

zhangyongtian

2024-09-13 394e04ba31f0822255862033b8dffef17530495c

 gz-customerSystem/src/views/register/visit/component/levelDetail.jsx

@@ -2,19 +2,27 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 16:47:12
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-02 20:21:12
 * @LastEditTime: 2024-09-12 17:19:32
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\levelDetail.jsx
 * @Description: 右抽屉提示
 */
import React from 'react';
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 }) => {
    return (
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事件等级指南"
            title="事件等级"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
@@ -22,7 +30,7 @@
        >
            <div style={{ marginTop: '-8px' }}>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px' }}>一类重点事件</div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px' }}>一级重点事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
@@ -32,7 +40,7 @@
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>二类重点事件</div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>二级重点事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
@@ -42,7 +50,7 @@
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>三类普通事件</div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>三级普通事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
@@ -62,7 +70,7 @@
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事项概况指南"
            title="事项概况"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
@@ -79,26 +87,160 @@

const NoHandleReason = ({ visible, onClose }) => {
    return (
        <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 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 }) => {
    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)


export { EventLevelDrawer, MattersDetail, NoHandleReason };
        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])

    return (
        <>
            <MyDrawer
                visible={visible}
                onClose={onClose}
                title="穗调解数智人"
                width={1200}
                // style={{ position: 'absolute' }}
                bodyStyle={{ marginTop: '-8px' }}
                titleBefore={true}
            >
                <div style={{ display: 'flex' }}>
                    <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' >
                            根据当事人的事项概况和事项申请，推荐以下类案和法条参考：
                        </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>
            </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'>和解协议</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>

        </>

    )
}



export { EventLevelDrawer, MattersDetail, NoHandleReason, AiQuestion };