feat: 图片

zhangyongtian

2024-09-13 621a3268a8c2cebf899e3ba824c49a1513cb619b

 gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx

@@ -1,18 +1,19 @@
import React, { useEffect, useState } from 'react';
import NewPage from '@/components/NewPage';
import { Row, Col, Space } from 'antd';
import { Steps, Tabs, Typography, Rate, Button } from '@arco-design/web-react';
import { apply,floating } from '@/assets/images';
import { Steps, Tabs, Button, Badge } from '@arco-design/web-react';
import { apply, floating } from '@/assets/images';
import { result } from '@/assets/images/icon';
import * as $$ from '@/utils/utility';
import TableView from '../../../components/TableView';
import { register, fold, down, empty, link } from '@/assets/images';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';
import { ApplyDialog, AgentDialog, Respondent, Company } from '../visit/component/previewTable';
import ApplyInfo from './ApplyInfo';
import Preview from '../visit/preview';
import HandleRecord from './HandleRecord';
import { useParams } from 'react-router-dom';
import ApplyInfo from './ApplyInfo'

import { Scrollbars } from "react-custom-scrollbars";
import RateModule from './RateModule';
import RegisInfoModule from './RegisInfoModule';
import SupervisingView from "./Supervising";
import { useNavigate } from 'react-router-dom';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
@@ -33,19 +34,19 @@
  return $$.ax.request({ url: `caseFeedback/listFeedback?id=` + id, type: 'get', service: 'mediate' });
}

function getListCaseFlow(data) {
  return $$.ax.request({ url: `caseTask/listCaseFlow`, type: 'get', service: 'mediate', data });
function getListCaseFlow(caseId) {
  return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=` + caseId, type: 'get', service: 'mediate' });
}


const FileMessage = (props) => {
   const routeData = useParams();
  const navigate = useNavigate();
  const caseTaskId = $$.getQueryString('caseTaskId')
  const caseId = $$.getQueryString('caseId')
  const [tabsActive, setTabsActive] = useState('1');
  const [current, setCurrent] = useState(7);
  const [grade, setGrade] = useState(0);
  const [grade, setGrade] = useState(null);
  const [caseInfo, setCaseInfo] = useState({})
  const [TransactResult, setTransactResult] = useState({})
  const [filesCheck, setFilesCheck] = useState(false);
  const [TransactResult, setTransactResult] = useState(null)
  const [tabsList, setTabList] = useState([
    {
      img: result,
@@ -58,94 +59,54 @@
      label: '流转督办',
      key: '2',
    },
    {
      img: apply,
      label: '申请记录',
      key: '3',
    },
    // {
    //   img: apply,
    //   label: '申请记录',
    //   key: '3',
    // },
  ])
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [list, setList] = useState([])
  const [progressData, setProgressData] = useState({})
  const [progressData, setProgressData] = useState({});

  useEffect(() => {
    console.log(caseId, 'caseId')
    getByCaseId(caseId);
    getTransactResult(caseId);
    getCaseInfo(caseId);
    listFeedback(caseId);
    getData(caseId)
  }, [])

  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];
  const fakeData = [
    {
      handlerUserName: '天河区棠下街综治中心',
      finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '来访登记',
      mediResult: '22_00025-1',
      handleContent: '调解成功，双方达成一致意见。',
      operationName: '李晓明'
    },
    {
      handlerUserName: '系统派单',
      finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '派单至：白云区新市街市场监管所',
    },
    {
      handlerUserName: '白云区新市街市场监管所',
      finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '已签收',
      operationName: '赵菲菲'
    },
    {
      handlerUserName: '白云区新市街市场监管所',
      finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '3',
      taskNodeName: '事件回退',
      mediResult: '22_00025-1',
      // handleContent: '已签收',
      operationName: '赵菲菲'
    },
    {
      handlerUserName: '天河区棠下街综治中心',
      finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
      handleResult: '2',
      status: '1',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '案件已被签收，准备开始调解。',
      operationName: '李晓明'
    },
  ];

  const handleTabChange = (newTabIndex) => {
    setSelectedTab(newTabIndex);
  };

  const getTransactResult = async () => {
    const res = await getTransactResultApi('24083010062110001')
  const getTransactResult = async (id) => {
    const res = await getTransactResultApi(id)
    console.log(res);
    if (res.type) {
      setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList.map(item => item.trueName) })
      if (res.data) {
        setTransactResult({ ...res.data })
      } else {
        setTransactResult(null)
      }

    }
  }

  const getByCaseId = async () => {
    const res = await getByCaseIdApi('24083010062110001')
    setGrade(res.data)
    console.log(res, 'resrs')
  const getByCaseId = async (id) => {
    const res = await getByCaseIdApi(id)
    if (res.type) {
      setGrade(res.data)
    }
  }

  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
  const getCaseInfo = async (id) => {
    const res = await getCaseInfoApi(id)
    if (res.type) {
      setCaseInfo(res.data)
      const { agentList, personList, ...rest } = res.data
      const parList = agentList.concat(personList)
      const obj = {
        ...rest,
        fakeData: parList,
      }
      setCaseInfo(obj)
    }
  }

@@ -157,594 +118,121 @@
    }
  }

  const getData = async () => {
    const res = await getListCaseFlow({
      caseId: routeData.caseId
    })
  const getData = async (id) => {
    const res = await getListCaseFlow(id)
    if (res.type) {
      setProgressData(res.data)
    }
  }

  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: 'perClassName',
      key: 'perClassName',
      width: 200,
      render: (text) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div onClick={() => setFilesCheck(true)}>查看</div>
          <div>下载</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 [records, setRecords] = useState([
    {
      id: 1,
      date: '2024 - 7 - 1 10:00',
      location: '天河区棠下街综治中心',
      remark: '配合部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>李晓明</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导王先生详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，银行同意调整还款计划，降低利率，并给予王先生一定的宽限期。王先生则承诺按新计划履行还款义务，双方最终达成一致，签署了调解协议。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: (
            <a href="your-link-here.html" target="_blank">
              <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
            </a>
          ),
        },
      ],
    },
    {
      id: 2,
      date: '2024 - 7 - 2 14:00',
      location: '天河区天河南街道办事处',
      remark: '承办部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>张伟</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              在本次协调会议中，我们成功解决了双方之间的纠纷，确保了所有参与方的利益得到了妥善处理。通过深入交流，各方达成了共识，同意采取一系列措施来解决现存的问题。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: '广州市天河区天河南路200号',
        },
      ],
    },
  ]);
  const toggleView = (id) => {
    setRecords(records.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };


  useEffect(() => {
    getByCaseId();
    getTransactResult();
    getCaseInfo();
    listFeedback('24083010062110001');
    getData()
  }, [])


  const applyData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "自然人");
  const agentData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方代理人");
  const company = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "非法人组织");
  const respondentData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "法人");

  const applyData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "自然人");
  const agentData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方代理人");
  const company1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "非法人组织");
  const respondentData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "法人");




  return (
    <>
      <NewPage
        pageHead={
          { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
        }
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
      }
    >
      <Tabs
        defaultActiveTab='1'
        onChange={(v) => setTabsActive(v)}
        className='myTabContent'
      >
        <Tabs
          defaultActiveTab='1'
          onChange={(v) => setTabsActive(v)}
          className='myTabContent'
        >
          {tabsList?.map(item => {
            return <TabPane
              key={item.key}
              title={
                <span>
                  {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                  <span style={{ fontSize: '16px' }}>{item.label}</span>
                </span>
              }
            >
              {
                item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                  <Steps type='navigation' current={current}>
                    <Step title='来访登记' disabled />
                    <Step title='事件流转' disabled />
                    <Step title='办理反馈' disabled />
                    <Step title='结案审核' disabled />
                    <Step title='当事人评价' disabled />
                    <Step title='结案归档' disabled />
                  </Steps>
        {tabsList?.map(item => {
          return <TabPane
            key={item.key}
            title={
              <span>
                {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                <span style={{ fontSize: '16px' }}>{item.label}</span>
              </span>
            }
          >
            {
              item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '0 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                <Steps type='navigation' current={current}>
                  <Step title='来访登记' disabled />
                  <Step title='事件流转' disabled />
                  <Step title='办理反馈' disabled />
                  <Step title='结案审核' disabled />
                  <Step title='当事人评价' disabled />
                  <Step title='结案归档' disabled />
                </Steps>
              </div>
            }
            {
              tabsActive === '1' &&
              <>
                <Scrollbars style={{ height: 'calc(100vh - 291px)', marginTop: '8px' }} autoHide>
                  <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
                    <Preview mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} />
                  </div>
                  {list.length != 0 &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理记录（{list.length}）</h4>
                      </Space>
                      <HandleRecord isReview={true} data={list} noEdit/>
                    </div>
                  }
                  {grade &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RateModule grade={grade} />
                    </div>
                  }
                  {caseInfo?.canal === '22_00001-1' &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RegisInfoModule caseInfo={caseInfo} />
                    </div>
                  }
                  <div style={{ backgroundColor: '#ffff', margin: '0 16px 64px 16px', padding: '12px' }}></div>
                </Scrollbars>
                <div className="dataSync-excel">
                  <Space size="large" style={{ margin: '4px 14px' }}>
                    <Button type='primary' >导出</Button>
                    <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
                  </Space>
                </div>
              }
              {tabsActive === '1' &&
                <>
                  <div style={{ backgroundColor: '#ffff', margin: '8px 8px 0px 16px', padding: '12px 18px 16px 16px', height: 'calc(100vh - 278px)', overflowY: 'scroll' }}>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4>
                      </Space>
                    </Col>
                    <div style={{ marginBottom: '8px' }}>申请方</div>
                    <div className="line-container" style={{ marginBottom: '20px' }}>
                      <div className="line left-line"></div>
                      <div className="line middle-line"></div>
                      <div className="line right-line"></div>
                    </div>
                    {/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 */}
                    {applyData && applyData.length > 0 ? (
                      <ApplyDialog applyDialog={applyData} />
                    ) : null}

                    {/* AgentDialog 只有在 agentData 存在且不为空时才渲染 */}
                    {agentData && agentData.length > 0 ? (
                      <AgentDialog agentDialog={agentData} />
                    ) : null}

                    {/* Respondent 只有在 respondentData 存在且不为空时才渲染 */}
                    {respondentData && respondentData.length > 0 ? (
                      <Respondent respondent={respondentData} />
                    ) : null}

                    {company && company.length > 0 ? (
                      <Company company={company} />
                    ) : null}

                    <div style={{ marginBottom: '8px' }}>被申请方</div>
                    <div className="line-container" style={{ marginBottom: '20px' }}>
                      <div className="line left-line"></div>
                      <div className="line middle-line"></div>
                      <div className="line right-line"></div>
                    </div>
                    {applyData1 && applyData1.length > 0 ? (
                      <ApplyDialog applyDialog={applyData1} />
                    ) : null}

                    {agentData1 && agentData1.length > 0 ? (
                      <AgentDialog agentDialog={agentData1} />
                    ) : null}

                    {respondentData1 && respondentData1.length > 0 ? (
                      <Respondent respondent={respondentData1} />
                    ) : null}

                    {company1 && company1.length > 0 ? (
                      <Company company={company1} />
                    ) : null}
                    <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' }}>{caseInfo?.statusName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div><div className="title-text">事项编号</div></div>
                        <div>{caseInfo?.caseRef || '-'}</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' }}>{caseInfo?.caseLevel || '-'}</div></div>级</div>
                      </Col>
                      <Col span={8}>
                        <div><div className="title-text">来访时间</div></div>
                        <div>{caseInfo?.visitTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">来访人数（人）</div></div>
                        <div>{caseInfo?.visitPeopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷类型</div></div>
                        <div>{caseInfo?.caseType || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生时间</div></div>
                        <div>{caseInfo?.occurTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生地点</div></div>
                        <div>{caseInfo?.addr || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">问题属地</div></div>
                        <div>{caseInfo?.questionName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及人数（人）</div></div>
                        <div>{caseInfo?.peopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及金额（元）</div></div>
                        <div>{$$.thousands(caseInfo?.amount) || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">事项来源</div></div>
                        <div>{caseInfo?.canalName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div ><div className="title-text">来访形式</div></div>
                        <div>{caseInfo?.visitWayName || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项概况</div></div>
                        <div>{caseInfo?.caseDes || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项申请</div></div>
                        <div>{caseInfo?.caseClaim || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                        <div>{caseInfo?.majorStatus === '0' ? '否' : '是'}</div>
                      </Col>
                    </Row>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></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'>{TransactResult.mediResultName || '-'}</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
                        <td width='380'>{TransactResult.mediator || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
                        <td>{TransactResult.mediateUnitName || '-'}</td>
                        <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
                        <td>{TransactResult.applyAssistUnitName || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th>
                        <td width='380'>2024-7-1 10:00</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
                        <td width='380'>{TransactResult?.fileTime || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
                        <td width='380' colspan='3'>{TransactResult?.windupContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
                        <td width='380' colspan='3'>{TransactResult?.agreeContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th>
                        <td width='380' colspan='3'>{TransactResult?.windupContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
                        <td colspan='3'>
                          <a href="your-link-here.html" target="_blank">
                            <img src={link} alt="" className="title-file" />申请人张三丰的人民调解协议书.pdf
                          </a>
                        </td>
                      </tr>
                    </table>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
                      </Space>
                    </Col>
                    <TableView
                      columns={fakeColumns}
                      dataSource={fakeData1}
                      size="small"
                      rowKey="id"
                      bordered={true}
                      style={{ marginBottom: '16px' }}
                    />
                    <div className='gap'></div>
                    <Col span={24} style={{ marginTop: '12px' }}>
                      <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                      <HandleRecord isReview={false} data={list} />

                      {/* <div>
                        {records.map(record => (
                          <div key={record.id} className='container-bottom-left-record'>
                            <div className='container-bottom-left-record-top'>
                              {
                                record.showView ? (
                                  <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} />
                                ) : (
                                  <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} />
                                )
                              }
                              <div>{`${record.date} ${record.location}`}</div>
                              <div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div>
                            </div>
                            <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}>
                              <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'>
                                {record.details.map(detail => (
                                  <tr key={detail.title}>
                                    <th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th>
                                    <td>{detail.content}</td>
                                  </tr>
                                ))}
                              </table>
                            </div>
                          </div>
                        ))}
                      </div> */}
                    </Col>
                    <div className='gap'></div>
                    <div style={{ marginLeft: '-16px' }}>
                      <Tabs defaultActiveTab='1'>
                        <TabPane
                          key='1'
                          title={
                            <span style={{ fontSize: '15px' }}>
                              流转进度
                            </span>
                          }
                        >
                          <Typography.Paragraph>
                            <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}>
                              {tabs.map((tab) => (
                                <div
                                  key={tab.index}
                                  style={{
                                    color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                                    padding: '6px 12px',
                                    border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                                    borderRadius: '4px',
                                    cursor: 'pointer',
                                  }}
                                  onClick={() => handleTabChange(tab.index)}
                                >
                                  {tab.label}
                                </div>
                              ))}
                            </div>
                            {selectedTab === '1' &&
                              <div className='progress'>
                                <ProgressStep progressData={fakeData} />
                              </div>
                            }
                          </Typography.Paragraph>
                        </TabPane>
                        <TabPane
                          key='2'
                          title={
                            <span style={{ fontSize: '15px' }}>
                              督办信息
                            </span>
                          }
                        >
                          <Typography.Paragraph>Content of Tab Panel 2</Typography.Paragraph>
                        </TabPane>
                      </Tabs>

                    </div>
                    <div className='gap'></div>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人评价</h4>
                      </Space>
                    </Col>
                    <Row gutter={[16, 16]}>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价等级</div>
                        </div>
                        <div style={{ display: 'flex' }}><Rate value={grade?.evaluateGrade} disabled /></div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价时间</div>
                        </div>
                        <div>{grade?.createTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价人</div>
                        </div>
                        <div>{grade?.evaluateUserName || '-'}</div>
                      </Col>
                      <Col span={12}>
                        <div className="title">
                          <div className="title-text">评语</div>
                        </div>
                        <div>{grade?.evaluateContent}</div>
                      </Col>
                    </Row>
                    <div className='gap'></div>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>登记信息</h4>
                      </Space>
                    </Col>
                    <Row gutter={[16, 16]} style={{ marginBottom: '90px' }}>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记机构</div>
                        </div>
                        <div>{caseInfo?.inputUnitName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记人</div>
                        </div>
                        <div>
                          {caseInfo.inputUserName}
                          <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记时间</div>
                        </div>
                        <div>{caseInfo?.visitTime || '-'}</div>
                      </Col>
                    </Row>
                  </div>
                  <div className="dataSync-excel">
                    <Space size="large" style={{ margin: '4px 14px' }}>
                      <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} >导出</Button>
                      <Button type='secondary'>返回上级页面</Button>
                    </Space>
                  </div>
                </>
              }
              {
                tabsActive === '2' &&
                <ProgressStep progressData={progressData} />
              }
              {tabsActive === '3' &&
                <ApplyInfo />
              }
            </TabPane>
          })}
        </Tabs>


      </NewPage>
    </>
              </>
            }
            {
              tabsActive === '2' &&
              <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
                <Tabs defaultActiveTab='1' >
                  <TabPane
                    key='1'
                    title={
                      <span style={{ fontSize: '15px' }}>
                        流转进度
                      </span>
                    }
                  >
                    <Scrollbars style={{ height: 'calc(100vh - 300px)' }} autoHide>
                      <ProgressStep progressData={progressData} hasTab={true} />
                    </Scrollbars>
                  </TabPane>
                  <TabPane
                    key='2'
                    title={
                      <span style={{ fontSize: '15px' }}>
                        督办信息
                        <Badge maxCount={99} count={1000} />
                      </span>
                    }
                  >
                    <Scrollbars style={{ height: 'calc(100vh - 300px)' }} autoHide>
                      <SupervisingView id={''} />
                    </Scrollbars>
                  </TabPane>
                </Tabs>
              </div>
            }
            {
              tabsActive === '3' &&
              <ApplyInfo />
            }
          </TabPane>
        })}
      </Tabs>
    </NewPage>
  )
}