自行受理

dminyi

2024-08-28 536dd41739f6dcdc50862d169568428320b75582

自行受理

 gz-customerSystem/src/api/apiHandler.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:28:12
 * @LastEditTime: 2024-08-26 09:54:37
 * @LastEditTime: 2024-08-27 11:18:41
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: axios处理方法
@@ -57,8 +57,8 @@
    
    const url =
        value.service === 'sys'
            ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/web/${value.url}`
            : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/web/${value.url}`;
            ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}`
            : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}`;

    if (value.type === 'get') {
        return ax

 gz-customerSystem/src/api/appUrl.js

@@ -2,20 +2,20 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2024-08-27 10:02:01
 * @LastEditTime: 2024-08-27 11:18:00
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: api地址
 */
export const debug = {
    // web服务
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://192.168.3.108:9002',
    baseUrl: 'http://gz.hugeinfo.com.cn',
    // baseUrl: 'http://192.168.3.108:9002',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    fileUrl: 'http://192.168.3.108:9002',
    // fileUrl: 'http://gz.hugeinfo.com.cn',
    // fileUrl: 'http://192.168.3.108:9002',
    fileUrl: 'http://gz.hugeinfo.com.cn',


    // 文件查看url 后面接附件编号

 gz-customerSystem/src/assets/images/index.js

@@ -44,6 +44,7 @@
import closeIcon from './closeIcon.png';
import backgroundImage from './backgroundImage.jpg'
import logo1 from './logo1.png';
import register from './register.png';

export {
  ledger_1,
@@ -82,5 +83,6 @@
  evidenceMaterials_active,
  closeIcon,
  backgroundImage,
  logo1
  logo1,
  register
};

 gz-customerSystem/src/assets/images/register.png

 gz-customerSystem/src/router/router.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-28 11:22:41
 * @LastEditTime: 2024-08-09 15:56:47
 * @LastEditTime: 2024-08-27 10:42:32
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 路由
@@ -136,6 +136,8 @@

//来访登记
import Visit from "../views/register/visit"
//自行排查
import Check from "../views/register/visit/check"

import Test from "../views/test";

@@ -209,6 +211,7 @@
                        <Route path="judicialOverview" element={<JudicialOverview />} />
                        {/* 来访登记*/}
                        <Route path="visit" element={<Visit />} />
                        <Route path="visit/check" element={<Check />} />
                        {/* 工作流模块 */}
                        <Route path="workflowTemplate" element={<WorkflowTemplate />} />
                        <Route path="workflowTemplate/workflowTemplateEdit" element={<WorkflowTemplateEdit />} />

 gz-customerSystem/src/views/register/index.less

@@ -196,4 +196,14 @@
// .arco-radio-checked .arco-radio-mask {
//     background-color: #1A6FB8;
//     border-color: #1A6FB8;
// }
// }

.must {
    font-size: 12px;
    color: rgb(245, 63, 63);
    background-color: rgb(255, 236, 232);
    line-height: 20px;
    padding: 0px 4px;
    border-radius: 2px;
    margin-left: 8px;
 }

 gz-customerSystem/src/views/register/visit/check.jsx

New file
@@ -0,0 +1,127 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 10:39:24
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-27 10:39:57
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\check.jsx
 * @Description: 自行排查
 */
import React, { useState, useEffect, useRef, Fragment } from "react";
import NewPage from '@/components/NewPage';
import RegisterTab from '@/components/registerTab';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { Button, Steps } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';

const Step = Steps.Step;

function getCaseDataApi(submitData) {
    return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' });
}



const Check = () => {
    const formRef = useRef();

    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(1);
    const [tabsActive, setTabsActive] = useState('1');

    const tabs = [
        { label: '事件登记', key: '1' },
        { label: '事件流转', key: '2' },
        { label: '办理反馈', key: '3' },
        { label: '申请结案', key: '4' },
        { label: '当事人评价', key: '5' },
        { label: '结案归档', key: '6', img1: true },

    ];

    //提交信息，需要校验规则
    const handleSubmit = async () => {
        if (formRef.current) {
            formRef.current.validate(undefined, (errors, values) => {
                console.log(errors, values);
            });
        }
    }

    //保存草稿信息,不需要校验规则
    const handleSave = async () => {
        if (formRef.current) {
            const data = formRef.current.getFields()
            console.log(data);
        }
    }

    //预览信息
    const handleReview = () => {
        setIsReview(!isReview)
    }

    function selfAcceptance() {
        $$.modalInfo({
            title: '自行受理确认',
            content: '确定自行受理本次登记事项吗？自行受理成功后事项将直接进入到本单位办理流程',
            okText: '确定受理',
            cancelText: '我再想想',
            onOk: async () => {
                console.log('1111111')
            },
        });

    }

    function submit() {
        $$.info({ type: 'warning', content: '您没有预约记录，暂时无法提交' })
    }
    console.log(current, 'current')


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                {/*onChange={(activeKey) => setTabsActive(activeKey)}*/}
                <RegisterTab tabs={tabs} activeKey={tabsActive}  style={{ background: '#fff' }} />
                {/* <div style={{backgroundColor: '#fff',margin:'12px 16px 0px 16px',paddingTop:'16px',paddingLeft:'91px'}}>
                    <Steps type='navigation' current={current} onChange={setCurrent} style={{ }}>
                        <Step title='来访登记' style={{ color: '#1A6FB8' }} disabled/>
                        <Step title='事件流转' disabled/>
                        <Step title='办理反馈' disabled/>
                        <Step title='结案审核' disabled/>
                        <Step title='当事人评价' disabled/>
                        <Step title='结案归档' disabled/>
                    </Steps>

                </div> */}
                {current === 1 &&
                    <Fragment>
                        {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />}
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>
                    </Fragment>
                }
                {/* {preview && <Preview />} */}
            </NewPage>

        </div>
    )
}

export default Check;

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

New file
@@ -0,0 +1,334 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 11:31:01
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-27 19:47:05
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\MattersInfo.jsx
 * @Description: 事项详情
 */

import React, { useState } from 'react';
import PersonCard from '@/components/personCard'
import { Row, Col, Space, Button, Switch } from 'antd';
import TableView from '@/components/TableView'
import { question, register } from '../../../../assets/images'
import * as $$ from '@/utils/utility';
import { Tabs, Typography } from '@arco-design/web-react';
import "@arco-themes/react-gzzz/css/arco.css";
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle'
const TabPane = Tabs.TabPane;

const style = {
    // textAlign: 'center',
    // marginTop: 20,
};

const MattersInfo = () => {

    const [fakeData, setFakeData] = useState([]);//当事人信息数据
    const [agentVisible, setAgentVisible] = useState(false);
    const [dialogType, setDialogType] = useState(0);//添加当事人的类型
    const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
    const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
    const [upload, setUpLoad] = useState(false);
    const [filesCheck, setFilesCheck] = useState(false);


    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
            width: 100,
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
            width: 60,

        },
        {
            title: '材料数量',
            dataIndex: 'inputUserName',
            key: 'perClassName',
            width: 180,
            render: (text) => (
                <>
                    {text}份
                </>
            )


        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
            width: 180,

        },
        {
            title: '最新上传时间',
            dataIndex: 'mediateUserName',
            key: 'mediateUserName',
            width: 180,

        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            width: 200,
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div onClick={() => setFilesCheck(true)}>查看</div>
                    <div>删除</div>
                    <div>下载</div>
                    <div onClick={() => setUpLoad(true)}>上传</div>
                </div>
            )
        },
        // 更多列配置...
    ];

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: '申请材料',
            perClassName: '李晓明的纠纷化解申请表、身份证...',
            inputUserName: '0',
            mediateUserName: '2024-7-12 12:00',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },
        {
            id: 2,
            caseNo: 'A20230101',
            judicNo: '证据材料',
            perClassName: '李晓明的纠纷化解申请表、身份证...',
            inputUserName: '0',
            mediateUserName: '2024-7-12 12:00',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },

        // 更多数据...
    ];


    //查看
    const handleCheckParty = (value) => {
        console.log(value);
        setDialogType(value.partyType)
        setDetailVisabled(true)
    }

    //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3
    const handleAdd = (type) => {
        if (type === 2 || type === 3) {
            setAgentVisible(true)
        } else {
            setAddVisabled(true)
        }
        setDialogType(type)
    }

    //删除当事人
    const handleDeleteParty = (event, value) => {
        event.stopPropagation();
        const filterData = fakeData.filter(item => item.id !== value.id)
        setFakeData(filterData)
    }

    return (
        <div style={{ position: 'relative' }}>
            <Tabs defaultActiveTab='1'>
                <TabPane
                    key='1'
                    title={
                        <span>
                            <IconCalendar style={{ marginRight: 6 }} />
                            <span style={{ fontSize: '16px' }}>事项详情</span>
                        </span>
                    }
                >
                    <Typography.Paragraph style={style}>
                        <div className='dataSync-page'>

                            <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <Space size='small'>
                                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
                                </Space>
                                <div>
                                    <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
                                </div>
                            </Col>
                            <div style={{ margin: '16px 0' }}>
                                <PersonCard
                                    isCheck={true}
                                    partyType={'applicant'} // 这里设定为申请人
                                    data={fakeData}
                                    handleCheckParty={handleCheckParty}
                                    handleAdd={handleAdd}
                                    handleDeleteParty={handleDeleteParty}
                                />
                            </div>
                            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                                <Space size='small'>
                                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
                                </Space>
                            </Col>
                            <Row gutter={[16, 16]}>
                                <Col span={8}>
                                    <div><div className="title-text">事项状态</div></div>
                                    <div style={{ color: '#1A6FB8' }}>待办理</div>
                                </Col>
                                <Col span={16}>
                                    <div><div className="title-text">事项编号</div></div>
                                    <div>GZ202408010001</div>
                                </Col>
                                {/*事项等级分为三级，颜色需要做判断*/}
                                <Col span={8}>
                                    <div className="title"><div className="title-text">事项等级</div></div>
                                    <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div>
                                </Col>
                                <Col span={8}>
                                    <div><div className="title-text">来访时间</div></div>
                                    <div>2024-7-12 10:00</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">来访人数（人）</div></div>
                                    <div>2</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">纠纷类型</div></div>
                                    <div>市场监管/金融纠纷</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">纠纷发生时间</div></div>
                                    <div>2024-7-11</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">纠纷发生地点</div></div>
                                    <div>广州市天河区中山七路康王柏德来商业城</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">问题属地</div></div>
                                    <div>广州市/天河区/棠下街道</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">涉及人数（人）</div></div>
                                    <div>2</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">涉及金额（元）</div></div>
                                    <div>{$$.thousands(20000)}</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">事项来源</div></div>
                                    <div>大厅来访</div>
                                </Col>
                                <Col span={16}>
                                    <div ><div className="title-text">来访形式</div></div>
                                    <div>来访</div>
                                </Col>
                                <Col span={24}>
                                    <div className="title"><div className="title-text">事项概况</div></div>
                                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                                </Col>
                                <Col span={24}>
                                    <div className="title"><div className="title-text">事项申请</div></div>
                                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                                </Col>
                                <Col span={16}>
                                    <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                                    <div>否</div>
                                </Col>
                            </Row>
                            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
                                <Space size='small'>
                                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5>
                                </Space>
                            </Col>

                            <TableView
                                columns={fakeColumns}
                                dataSource={fakeData1}
                                size="small"
                                rowKey="id"
                                bordered={true}
                                style={{ marginBottom: '20px' }}
                            />
                            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                                <Space size='small'>
                                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>登记信息</h5>
                                </Space>
                            </Col>
                            <Row gutter={[16, 16]}>
                                {/*事项等级分为三级，颜色需要做判断*/}
                                <Col span={8}>
                                    <div className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                                    <div>天河区棠下街道综治中心</div>
                                </Col>
                                <Col span={8}>
                                    <div><div className="title-text">登记人</div></div>
                                    <div style={{ display: 'flex' }}>
                                        <div>李晓明</div>
                                        <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                                    </div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">登记时间</div></div>
                                    <div>2024-7-8 10:00</div>
                                </Col>
                            </Row>
                            <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
                        </div>

                    </Typography.Paragraph>
                </TabPane>
                <TabPane
                    key='3'
                    title={
                        <span>
                            <IconUser style={{ marginRight: 6 }} />
                            <span style={{ fontSize: '16px' }}>流转办理</span>
                        </span>
                    }
                >
                    <Typography.Paragraph style={style}>
                        <Handle />
                    </Typography.Paragraph>
                </TabPane>
            </Tabs>
        </div>
    )
}

export default MattersInfo;

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

New file
@@ -0,0 +1,73 @@
import React, { useState } from 'react';
import { Steps } from '@arco-design/web-react';
import { Col, Space, Row } from 'antd';
import { register } from '../../../../assets/images'


const Handle = () => {
    const [current, setCurrent] = useState(3);
    const Step = Steps.Step;

    return (
        <div style={{ position: 'relative' }}>
            <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                <Steps type='navigation' current={current} onChange={setCurrent} style={{}}>
                    <Step title='来访登记' disabled />
                    <Step title='事件流转' disabled />
                    <Step title='办理反馈' disabled />
                    <Step title='结案审核' disabled />
                    <Step title='当事人评价' disabled />
                    <Step title='结案归档' disabled />
                </Steps>
            </div>
            <div>
                <div className='dataSync-page' style={{ height: 'fit-content', paddingBottom: '12px' }}>
                    <Col span={24}>
                        <Space size='small'>
                            <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
                        </Space>
                    </Col>
                    <Row gutter={[16, 16]}>
                        <Col span={8} style={{ display: 'flex' }}>
                            <div><div className="title-text">承办部门：</div></div>
                            <div>天河区棠下街综治中心</div>
                        </Col>
                        <Col span={8} style={{ display: 'flex' }}>
                            <div><div className="title-text">经办人：</div></div>
                            <div style={{ display: 'flex' }}>
                                <div>王一顺</div>
                                <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                            </div>
                        </Col>
                        <Col span={8} style={{ display: 'flex' }}>
                            <div><div className="title-text">配合部门：</div></div>
                            <div>-</div>
                        </Col>
                        <Col span={8} style={{ display: 'flex' }}>
                            <div><div className="title-text">受理时间：</div></div>
                            <div>2024-7-5 11:45</div>
                        </Col>
                    </Row>

                </div>
                <div style={{ display: 'flex', flexDirection: 'row', columnGap: '8px', margin: '8px 16px 22px 16px' }}>
                    <div style={{ flex: 3, backgroundColor: '#fff' }}>
                        <div className='dataSync-page' style={{ margin: 0 }}>
                            <Col span={24}>
                                <Space size='small'>
                                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>办理反馈</h5>
                                </Space>
                            </Col>

                        </div>

                    </div>
                    <div style={{ flex: 1, backgroundColor: '#fff' }}>22</div>
                </div>
            </div>
        </div>
    )

}

export default Handle;

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

New file
@@ -0,0 +1,72 @@
import React from 'react';
import MyDrawer from '@/components/MyDrawer';

const EventLevelDrawer = ({ visible, onClose }) => {
    return (
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事件等级指南"
            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、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>二类重点事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
                    4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
                    5、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>三类普通事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
                    4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
                    5、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </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>
    );
}

export { EventLevelDrawer, MattersDetail };

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

@@ -23,6 +23,7 @@
import MapView from './map'
import { scan } from '@/assets/images/icon'
import MyDrawer from '@/components/MyDrawer';
import { EventLevelDrawer, MattersDetail } from './levelDetail'

const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
@@ -421,7 +422,14 @@
      >
        <Row gutter={[32, 0]}>
          <Col span={8}>
            <FormItem label='事项等级' field='level' tooltip={<div className='question'>Username is required </div>} >
            <FormItem label={<div style={{ display: 'flex' }}>
              事项等级
              <Tooltip onClick={() => setApply(true)}>
                <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
              </Tooltip>
            </div>
            }
              field='level' >
              <Select placeholder='Select city' allowClear>
                {['一级', '二级', '三级', '四级'].map((option, index) => (
                  <Option key={option} value={option}>
@@ -519,9 +527,9 @@
              label={<div style={{ display: 'flex' }}>
                事项概况
                <Tooltip onClick={() => setVisible(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} />
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                </Tooltip>
                <div className="must">必填</div>
                <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
              </div>
@@ -542,9 +550,9 @@
            <FormItem
              label={<div style={{ display: 'flex' }}>
                申请请求
                <Tooltip onClick={() => setApply(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} />
                </Tooltip>
                {/* <Tooltip onClick={() => setApply(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', margin:'4px 4px 0px 4px' }} />
                </Tooltip> */}
                <div className="must">必填</div>
                <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
@@ -771,63 +779,14 @@
      >
        <MapView />
      </Modal>
      <MyDrawer
        title='事项概况指南'
      <MattersDetail
        visible={visible}
        width={1000}
        style={{ position: 'absolute' }}
        onClose={() => setVisible(false)}
        titleBefore={true}
      >
        <div style={{ marginTop: '-8px' }}>
          事项简述应该填写完整，完整的事项简述应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过。<br />
          例如：<br />
          2024年8月13日，张某与女性好友王某在某烧烤档就餐期间发生场盾争执，报警人称女方从今年一月份开始，以各种理由让其帮忙付了外卖费，送金链等首饰，但又不确认关系，女方后期还拉黑了报警人，因此报警人认为女方涉嫌诈骗。
        </div>
      </MyDrawer>
      <MyDrawer
        title='事件等级指南'
      />
      <EventLevelDrawer
        visible={apply}
        width={1000}
        style={{ position: 'absolute' }}
        onClose={() => setApply(false)}
        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、扬言到市赴省进京越级上访；
            6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
            7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
          </div>
          <div>
            <div style={{ color: '#1A6FB8', fontSize: '15px',lineHeight:'23px',marginBottom:'8px',marginTop:'20px' }}>二类重点事件</div>
            1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
            2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
            3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
            4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
            5、扬言到市赴省进京越级上访；
            6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
            7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
          </div>
          <div>
            <div style={{ color: '#1A6FB8', fontSize: '15px',lineHeight:'23px',marginBottom:'8px',marginTop:'20px' }}>三类普通事件</div>
            1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
            2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
            3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
            4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
            5、扬言到市赴省进京越级上访；
            6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
            7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
          </div>

        </div>
      </MyDrawer>

      />
    </div>
  )
}

 gz-customerSystem/src/views/register/visit/index.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-23 15:49:08
 * @LastEditTime: 2024-08-27 20:05:31
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */
@@ -17,6 +17,7 @@
import { Button, Steps } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';
import MattersInfo from './component/MattersInfo';

const Step = Steps.Step;

@@ -72,7 +73,7 @@
            okText: '确定受理',
            cancelText: '我再想想',
            onOk: async () => {
                console.log('1111111')
                setTabsActive('2')
            },
        });

@@ -86,41 +87,55 @@

    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                {/*onChange={(activeKey) => setTabsActive(activeKey)}*/}
                <RegisterTab tabs={tabs} activeKey={tabsActive}  style={{ background: '#fff' }} />
                {/* <div style={{backgroundColor: '#fff',margin:'12px 16px 0px 16px',paddingTop:'16px',paddingLeft:'91px'}}>
                    <Steps type='navigation' current={current} onChange={setCurrent} style={{ }}>
                        <Step title='来访登记' style={{ color: '#1A6FB8' }} disabled/>
                        <Step title='事件流转' disabled/>
                        <Step title='办理反馈' disabled/>
                        <Step title='结案审核' disabled/>
                        <Step title='当事人评价' disabled/>
                        <Step title='结案归档' disabled/>
                    </Steps>
            {tabsActive !== '2' &&

                </div> */}
                {current === 1 &&
                <NewPage
                    pageHead={
                        { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                    }
                >
                    {/*onChange={(activeKey) => setTabsActive(activeKey)}*/}

                    {/* <RegisterTab tabs={tabs} activeKey={tabsActive} style={{ background: '#fff' }} /> */}

                    <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                        <Steps type='navigation' current={current} onChange={setCurrent} style={{}}>
                            <Step title='来访登记' disabled />
                            <Step title='事件流转' disabled />
                            <Step title='办理反馈' disabled />
                            <Step title='结案审核' disabled />
                            <Step title='当事人评价' disabled />
                            <Step title='结案归档' disabled />
                        </Steps>

                    </div>
                    {tabsActive === '1' &&
                        <Fragment>
                            {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />}
                            <div className="dataSync-excel">
                                <Space size="large" style={{ margin: '4px 14px' }}>
                                    <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                    <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                    <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                    <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                    <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                                </Space>
                            </div>
                        </Fragment>
                    }
                </NewPage>
            }
            {tabsActive === '2' &&
                <NewPage
                    pageHead={
                        { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                    }
                >
                    <Fragment>
                        {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />}
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>
                        <MattersInfo />
                    </Fragment>
                }
                {/* {preview && <Preview />} */}
            </NewPage>

                </NewPage>
            }
        </div>
    )
}

 gz-customerSystem/src/views/register/visit/preview.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-13 15:19:57
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-19 11:42:52
 * @LastEditTime: 2024-08-27 19:25:55
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
@@ -14,12 +14,13 @@
import { Modal } from '@arco-design/web-react';
import NewFileCheck from '../../filesCheck/newFileCheck';
import * as $$ from '../../../utils/utility';

import { EventLevelDrawer, MattersDetail } from './component/levelDetail'


const Preview = () => {
    const [filesCheck, setFilesCheck] = useState(false);

    const [apply, setApply] = useState(false);
    const [visible, setVisible] = useState(false);

    const fakeData1 = [
        {
@@ -284,8 +285,10 @@
            </Col>
            <Row gutter={[16, 16]}>
                <Col span={8}>
                    <div className="title"><div className="title-text">事项等级</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#1A6FB8', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div>
                    <div className="title">
                        <div className="title-text">事项等级</div>
                    </div>
                    <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div>
                </Col>
                <Col span={8}>
                    <div><div className="title-text">来访时间</div></div>
@@ -328,11 +331,11 @@
                    <div>来访</div>
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项概况</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div className="title"><div className="title-text">事项概况</div></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项申请</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                    <div className="title"><div className="title-text">事项申请</div></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                </Col>
                <Col span={16}>
@@ -357,7 +360,7 @@

            <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
                {/* <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> */}
                <div style={{marginTop:'-16px'}}>
                <div style={{ marginTop: '-16px' }}>
                    <NewFileCheck />
                </div>

@@ -365,6 +368,7 @@
            </Modal>



        </div>
    )
}

 gz-customerSystem/src/views/test/index.jsx

@@ -10,6 +10,7 @@
import React, { useEffect, useState } from 'react';
import './index.less'
import * as $$ from '../../utils/utility';
import { Row, Col, Space, Tabs, Button } from 'antd';

// 获取各类型案件数
function getCaseNumDataApi(submitData) {
@@ -37,6 +38,28 @@

  return (
    <>
      <Tabs
        defaultActiveKey="1"
        items={[
          {
            label: 'Tab 1',
            key: '1',
            children: 'Tab 1',
          },
          {
            label: 'Tab 2',
            key: '2',
            children: 'Tab 2',
            disabled: true,
          },
          {
            label: 'Tab 3',
            key: '3',
            children: 'Tab 3',
          },
        ]}
      />

      {/* <div className='card'>
        <div className='card-head'>
          <div className='card-head-left'>countSfqrJudic:{data.countSfqrJudic}</div>
@@ -51,7 +74,7 @@
          <div className='card-main-row'></div>
        </div>
      </div> */}
      

    </>
  )
}