gzdyh/front.git

/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-13 15:19:57
 * @LastEditors: lwh
 * @LastEditTime: 2025-04-21 18:57:46
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
import React, { useState, useEffect } from "react";
import { Row, Col, Space, Typography } from 'antd';
import { Modal, Button } from '@arco-design/web-react';
import * as $$ from '../../../utils/utility';
import { ApplyDialog, AgentDialog, Respondent, Company } from './component/previewTable'
import FileTable from "../matterDetail/FileTable";
import { majorStatus_1 } from '@/assets/images';
import NameCard2 from '@/components/NameCard2';
import PreviewImage from '@/components/PreviewImage';
import MyPDF from '@/components/MyPDF';
import TableView from '@/components/TableView';
import DetailDialog from "../../../components/personCard/DetailDialog";
import PersonCard from '../matterDetail/personCard';
import ModalHis from './modalHis';
 
 
// 重点人员信息
function getLabelInfoApi(data) {
  return $$.ax.request({ url: `special/getLabelInfo`, type: 'post', serviceType: 'thrid', service: 'sys', data });
}
// 个人案件统计
function countPersonApi(data) {
  return $$.ax.request({ url: `caseInfo/countPerson`, type: 'get', service: 'mediate', data });
}
// 个人案件查询
function pagePersonApi(data) {
  return $$.ax.request({ url: `/caseInfo/pagePerson`, type: 'get', service: 'mediate', data });
}
 
const { Paragraph, Link, Text } = Typography;
const Preview = (props) => {
  const [data, setData] = useState({});
  const [personView, setPersonView] = useState(false);
  const [personId, setPersonId] = useState('');
  // 预览人员信息
  const [modalData, setModalData] = useState({});
  const [modalHisData, setModalHisData] = useState({});
  const [detailVisabled, setDetailVisabled] = useState(false);
  const levelColorMap = {
    1: '#F53F3F',
    2: '#EF6C24',
    3: '#00B42A',
  }
 
 
  function handleCheckPreview(params) {
    setModalData(params)
    setDetailVisabled(true)
  }
 
  const handlePersonDetail = (id) => {
    setPersonId(id)
    setPersonView(true)
  }
 
  // 弹窗展示反映诉求记录
  function modalClick(item, type) {
    if (type === '1') {
      setModalHisData({ ...item, visible: true, type })
    }
    if (type === '2') {
      const colorList = ['#C64FBE', '#D8A247', '#B82F6E', '#199C8F', '#3ECB7A', '#117AC1', '#6865D7', '#2661CE']
      let labelInfo = item?.LabelInfo?.labelList || [];
      const tagList = labelInfo?.map((i, index) => ({ label: i, color: colorList[index] })) || []
      setModalHisData({ ...item, tagList, visible: true, type })
    }
  }
 
  // 根据个人身份证号查询重点人员信息
  // 根据个人身份证号查询个人案件查询
  // 根据个人身份证号查询个人案件统计
  async function getLabelInfo(idCard) {
    // global.setSpinning(true);
    const [res, res1, res2] = await Promise.all([
      idCard && getLabelInfoApi({ idNumber: idCard }),
      idCard && countPersonApi({ certiNo: idCard }),
      idCard && pagePersonApi({ page: 1, size: 5, certiNo: idCard })
    ]);
    // const res = await getLabelInfoApi({ idNumber: idCard })
    // const res1 = await countPersonApi({ certiNo: idCard })
    // const res2 = await pagePersonApi({ page: 1, size: 5, certiNo: idCard })
    // global.setSpinning(false);
    if (res.type && res1.type && res2.type) {
      let data = res.data || {};
      let data1 = res1.data || {};
      let data2 = res2.data || {};
      let nowData = {
        pagePerson: {
          total: data2?.totalElements || 0,
          tableData: data2?.content || [],
        },
        countPerson: data1 || {},
        LabelInfo: data || {},
      }
      return nowData;
    }
  }
 
 
 
  useEffect(async () => {
    const applyData = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "自然人");
    const agentData = props.data?.fakeData?.filter(item => item.perType === "24_00006-1");
    const company = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "非法人组织");
    const respondentData = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" && item.perClassName === "法人");
    const applyList = props.data?.fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "24_00006-1") || [];
 
    const applyData1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "自然人");
    const agentData1 = props.data?.fakeData?.filter(item => item.perType === "24_00006-2");
    const company1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "非法人组织");
    const respondentData1 = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" && item.perClassName === "法人");
    const applyForList = props.data?.fakeData?.filter(item => item.perType === "15_020008-2" || item.perType === "24_00006-2") || [];
    setData({
      applyData,
      agentData,
      company,
      respondentData,
      applyList,
      applyData1,
      agentData1,
      company1,
      respondentData1,
      applyForList
    })
 
    if (props.isReview) {
      // 根据数组applyData的长度来循环调用getLabelInfo方法,并将
      if (applyData?.length > 0) {
        for (let i = 0; i < applyData.length; i++) {
          let data = applyData[i].certiNo ? await getLabelInfo(applyData[i].certiNo) : applyData[i];
          applyData[i] = { ...applyData[i], ...data };
        }
      }
      if (agentData?.length > 0) {
        for (let i = 0; i < agentData.length; i++) {
          let data = agentData[i].certiNo ? await getLabelInfo(agentData[i].certiNo) : agentData[i];
          agentData[i] = { ...agentData[i], ...data };
        }
      }
      if (company?.length > 0) {
        for (let i = 0; i < company.length; i++) {
          let data = company[i].certiNo ? await getLabelInfo(company[i].certiNo) : company[i];
          company[i] = { ...company[i], ...data };
        }
      }
      if (respondentData?.length > 0) {
        for (let i = 0; i < respondentData.length; i++) {
          let data = respondentData[i].certiNo ? await getLabelInfo(respondentData[i].certiNo) : respondentData[i];
          respondentData[i] = { ...respondentData[i], ...data };
        }
      }
      if (applyData1?.length > 0) {
        for (let i = 0; i < applyData1.length; i++) {
          let data = applyData1[i].certiNo ? await getLabelInfo(applyData1[i].certiNo) : applyData1[i];
          applyData1[i] = { ...applyData1[i], ...data };
        }
      }
      if (agentData1?.length > 0) {
        for (let i = 0; i < agentData1.length; i++) {
          let data = agentData1[i].certiNo ? await getLabelInfo(agentData1[i].certiNo) : agentData1[i];
          agentData1[i] = { ...agentData1[i], ...data };
        }
      }
      if (company1?.length > 0) {
        for (let i = 0; i < company1.length; i++) {
          let data = company1[i].certiNo ? await getLabelInfo(company1[i].certiNo) : company1[i];
          company1[i] = { ...company1[i], ...data };
        }
      }
      if (respondentData1?.length > 0) {
        for (let i = 0; i < respondentData1.length; i++) {
          let data = respondentData1[i].certiNo ? await getLabelInfo(respondentData1[i].certiNo) : respondentData1[i];
          respondentData1[i] = { ...respondentData1[i], ...data };
        }
      }
    }
 
    setData({
      applyData,
      agentData,
      company,
      respondentData,
      applyList,
      applyData1,
      agentData1,
      company1,
      respondentData1,
      applyForList
    })
  }, [props.data])
 
 
  return (
    <div style={{ ...props.style, position: 'relative' }}>
      {props.isNotAccet && <div className="notAccetImg"></div>}
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>当事人信息</h4>
        </Space>
      </Col>
      <div style={{ marginBottom: '8px' }}>申请方</div>
      <div className="line-container" style={{ marginBottom: '20px' }}>
        <div className="line-box">
          <div className="line-box-active" style={{ left: '8px' }}></div>
        </div>
      </div>
      {/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 ,申请方*/}
      {data.applyData && data.applyData.length > 0 ? (
        <ApplyDialog applyDialog={data.applyData} modalClick={modalClick} handleCheckPreview={handleCheckPreview} />
      ) : null}
 
      {/* AgentDialog 只有在 agentData 存在且不为空时才渲染  申请方 代理人*/}
      {data.agentData && data.agentData.length > 0 ? (
        <AgentDialog personData={props.data?.fakeData} agentDialog={data.agentData} handleCheckPreview={handleCheckPreview} />
      ) : null}
 
      {/* Respondent 只有在 respondentData 存在且不为空时才渲染 申请方 法人*/}
      {data.respondentData && data.respondentData.length > 0 ? (
        <Respondent respondent={data.respondentData} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {/* 申请方 非法人组织 */}
      {data.company && data.company.length > 0 ? (
        <Company company={data.company} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {data.applyList?.length === 0 && <div style={{ padding: '10px 0' }}>{$$.MyNewEmpty()}</div>}
 
      <div style={{ marginBottom: '8px' }}>被申请方</div>
      <div className="line-container" style={{ marginBottom: '20px' }}>
        <div className="line-box">
          <div className="line-box-active" style={{ left: '13px' }}></div>
        </div>
      </div>
      {/* 被申请方 */}
      {data.applyData1 && data.applyData1.length > 0 ? (
        <ApplyDialog applyDialog={data.applyData1} modalClick={modalClick} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {/* 被申请方 代理人 */}
      {data.agentData1 && data.agentData1.length > 0 ? (
        <AgentDialog personData={props.data?.fakeData} agentDialog={data.agentData1} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {/* 被申请方 法人 */}
      {data.respondentData1 && data.respondentData1.length > 0 ? (
        <Respondent respondent={data.respondentData1} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {/* 被申请方 非法人组织*/}
      {data.company1 && data.company1.length > 0 ? (
        <Company company={data.company1} handleCheckPreview={handleCheckPreview} />
      ) : null}
      {data.applyForList?.length === 0 && <div style={{ padding: '10px 0' }}>{$$.MyNewEmpty()}</div>}
 
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>纠纷基本情况</h4>
        </Space>
      </Col>
      <Row gutter={[16, 16]}>
        {props.isDoc &&
          <>
            <Col span={8}>
              <div><div className="title-text">事项状态</div></div>
              <div style={{ color: '#1A6FB8' }}>{props.data?.statusName || '-'}</div>
            </Col>
            <Col span={8}>
              <div><div className="title-text">事项编号</div></div>
              <div>{props.data?.caseRef || '-'}</div>
            </Col>
            <Col span={8}>
              <div><div className="title-text">市民编号</div></div>
              <div>{props.data?.cityCode || '-'}</div>
            </Col>
          </>
        }
        <Col span={8}>
          <div className="title">
            <div className="title-text">事项等级</div>
          </div>
          <div style={{ display: 'flex' }}>
            <div style={{ backgroundColor: levelColorMap[props.data?.caseLevel], marginRight: '4px', borderRadius: '4px' }}>
              <div style={{ color: '#FFFFFF', padding: '0px 6px' }}>
                {props.data?.caseLevel || '-'}
              </div>
            </div>级
          </div>
        </Col>
        <Col span={8}>
          <div><div className="title-text">来访时间</div></div>
          <div>{props.data?.visitTime || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">来访人数（人）</div></div>
          <div>{props.data?.visitPeopleNum || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷类型</div></div>
          <div>
            {props.data?.caseTypeFirstName ?
              `${props.data.caseTypeFirstName}/${props.data.caseTypeName}`
              : '-'
            }
          </div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷发生时间</div></div>
          <div>{props.data?.occurTime || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷发生地点</div></div>
          <div>{props.data?.addr || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">{props.data?.canalSecond === '22_00003-1' ? '纠纷发生辖区' : '问题属地'}</div></div>
          <div>
            {props.data?.queAreaName ? `${props.data.queAreaName}${props.data?.queRoadName ? '/' + props.data.queRoadName : ''}` : '-'
            }
          </div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">涉及人数（人）</div></div>
          <div>{props.data?.peopleNum || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">涉及金额（元）</div></div>
          <div>{$$.thousands(props.data?.amount) || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">事项来源</div></div>
          <div>{props.data?.canalName || '大厅来访'}</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>{props.data?.caseDes || '-'} </div>
        </Col>
        <Col span={24}>
          <div className="title"><div className="title-text">事项申请</div></div>
          <div>{props.data?.caseClaim || '-'}</div>
        </Col>
        <Col span={24}>
          <div className="title"><div className="title-text">事项备注</div></div>
          <div>{props.data?.caseRemark || '-'}</div>
        </Col>
        <Col span={8}>
          <div className="title title-gap">
            {props.data?.majorStatus === 1 && <img src={majorStatus_1} alt="" srcset="" />}
            <div style={{ color: props.data?.majorStatus === 1 ? '#F53F3F' : 'inherit' }} className="title-text">是否重大矛盾纠纷</div>
          </div>
          <div>{props.data?.majorStatus === 1 ? '是' : '否'}</div>
        </Col>
        <Col span={16}>
          <div className="title title-gap">
            {props.data?.isRisk === '1' && <img src={majorStatus_1} alt="" srcset="" />}
            <div style={{ color: props.data?.isRisk === '1' ? '#F53F3F' : 'inherit' }} className="title-text">是否扬言风险纠纷</div>
          </div>
          <div>{props.data?.isRisk === '1' ? '是' : '否'}</div>
        </Col>
        {
          props.data?.canalSecond === '22_00003-1' && <>
            <Col span={8}>
              <div className="title"><div className="title-text">上报民警</div></div>
              <div>{props.data?.tcqk?.split('--')?.[0] || '-'}</div>
            </Col>
            <Col span={8}>
              <div className="title"><div className="title-text">上报民警联系电话</div></div>
              <div>{props.data?.tcqk?.split('--')?.[1] || '-'}</div>
            </Col>
            <Col span={8}>
              <div className="title"><div className="title-text">责任民警</div></div>
              <div>{props.data?.tcqk?.split('--')?.[3] || '-'}</div>
            </Col>
            <Col span={8}>
              <div className="title"><div className="title-text">调处人</div></div>
              <div>{props.data?.tcqk?.split('--')?.[4] || '-'}</div>
            </Col>
            <Col span={8}>
              <div className="title"><div className="title-text">调处方案</div></div>
              <div>{props.data?.tcqk?.split('--')?.[5] || '-'}</div>
            </Col>
            <Col span={8}>
              <div className="title"><div className="title-text">风险等级</div></div>
              <div>{props.data?.tcqk?.split('--')?.[2] || '-'}</div>
            </Col>
            <Col span={24}>
              <div className="title"><div className="title-text">前期调处情况</div></div>
              <div>{props.data?.tcqk?.split('--')?.[6] || '-'}</div>
            </Col>
          </>
        }
      </Row>
      {props.transactResult && <>
        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
          <Space size='small'>
            <div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>办理结果</h4>
          </Space>
        </Col>
        <table border="1" align="center" cellpadding="8" className="table" >
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">化解结果</th>
            <td width='380' style={{ color: props.transactResult.mediResult == '22_00025-2' ? '#f53f3f' : '#00b42a' }}>
              {props.transactResult.mediResultName || '-'}
            </td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
            <td width='380'>
              <NameCard2 name={props.transactResult.mediator} userId={props.transactResult.mediatorId} />
            </td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
            <td>{props.transactResult.mediateUnitName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
            <td>{props.transactResult.assistUnitName || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th>
            <td width='380'>{$$.minuteFormat(props.transactResult?.acceptTime) || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
            <td width='380'>{$$.minuteFormat(props.transactResult?.closeTime) || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
            <td width='380' colspan='3'>{props.transactResult?.handleContent || '-'}</td>
          </tr>
          {
            props.transactResult.mediResult == '22_00025-1' && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">协议履行情况</th>
              <td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
            </tr>
          }
          {
            props.transactResult.mediResult == '22_00025-1' && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">协议类型</th>
              <td width='380' colspan='3'>{props.transactResult.agreeType == '24_00003-2' ? '书面协议' : '口头协议'}</td>
            </tr>
          }
          {
            props.transactResult.agreeType == '24_00003-1' && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
              <td width='380' colspan='3'>{props.transactResult?.agreeContent || '-'}</td>
            </tr>
          }
          {
            props.transactResult.agreeType == '24_00003-2' && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
              <td colspan='3'>
                <div style={{ display: 'flex', gap: '8px' }}>
                  {props.transactResult?.fileInfoBaseDTOList?.map((item, index) => {
                    return <div style={{ display: 'inline-block' }}>
                      <MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
                      {/* <PreviewImage name={item.name} src={item.showUrl} /> */}
                      {/* {index !== props.transactResult?.fileInfoBaseDTOList.length - 1 && <>，</>} */}
                    </div>
                  })}
                </div>
              </td>
            </tr>
          }
          {
            props.videoList?.length > 0 && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">调解视频</th>
              <td colspan='3'>
                {props?.videoList?.map((item, index) => {
                  return <div key={'video' + index} style={{ display: 'inline-block' }}>
                    <Space size="middle" className="public-fileCard-action">
                      {/* <Link onClick={() => window.open(item.playUrl)}>在线播放</Link> */}
                      <Link href={item.playUrl}>{item.videoName}</Link>
                    </Space>
                  </div>
                })}
              </td>
            </tr>
          }
          {
            props.transactResult.mediResult == '22_00025-2' && <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">无法化解理由</th>
              <td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
            </tr>
          }
        </table>
      </>}
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>事件材料</h4>
        </Space>
      </Col>
      <FileTable mainId={props.mainId} fileInfoList={props.data?.fileInfoList} isReview={true} />
      <Modal
        title={'查看' + modalData.perTypeName}
        visible={detailVisabled}
        onOk={() => setDetailVisabled(false)}
        onCancel={() => {
          setDetailVisabled(false)
        }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <DetailDialog editData={modalData} personData={props.data?.fakeData} />
      </Modal>
 
      <Modal
        title={modalHisData.trueName + (modalHisData.type === '1' ? '的反映诉求记录' : '的重点人员标签')}
        visible={modalHisData.visible}
        onOk={() => setModalHisData({ ...modalHisData, visible: false })}
        onCancel={() => {
          setModalHisData({ ...modalHisData, visible: false })
        }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        {modalHisData.type === '1' && <ModalHis data={modalHisData.countPerson} search={{ page: 1, size: 5 }} fakeData={modalHisData.pagePerson} />}
        {modalHisData.type === '2' && <Space style={{ marginBottom: '20px' }}>
          {modalHisData?.tagList?.map((item, index) => (
            <div key={index} className="dialogTag" style={{ backgroundColor: item.color }}>{item.label}</div>
          ))}
        </Space>}
      </Modal>
      <PersonCard personView={personView} handleCancel={() => setPersonView(false)} personId={personId} />
    </div>
  )
}
 
export default Preview