feat: 结案归档

zhangyongtian

2024-09-10 1373ca4e2cd04896254690e0bd24316067f1645d

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

@@ -1,28 +1,50 @@
import React, { useState } from 'react';
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 } from '@/assets/images';
import { Steps, Tabs, Button } from '@arco-design/web-react';
import { apply, floating } from '@/assets/images';
import { result } from '@/assets/images/icon';
import * as $$ from '@/utils/utility';
import { ApplyDialog, AgentDialog, Respondent } from '../visit/component/previewTable';
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 ApplyInfo from './ApplyInfo';
import Preview from '../visit/preview';
import HandleRecord from './HandleRecord';
import { Scrollbars } from "react-custom-scrollbars";
import RateModule from './RateModule';
import RegisInfoModule from './RegisInfoModule';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;

function getTransactResultApi(caseId) {
  return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?caseId=${caseId}`, type: 'get', service: 'mediate' });
}

function getByCaseIdApi(caseId) {
  return $$.ax.request({ url: `caseEvaluate/getByCaseId?caseId=${caseId}`, type: 'get', service: 'mediate' });
}

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

function listFeedbackApi(id) {
  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 });
}


const FileMessage = (props) => {

  const caseTaskId = $$.getQueryString('caseTaskId')
  const caseId = $$.getQueryString('caseId')
  const [tabsActive, setTabsActive] = useState('1');
  const [current, setCurrent] = useState(7);
  const [filesCheck, setFilesCheck] = useState(false);
  const [infoData, setInfoData] = useState({});
  const [grade, setGrade] = useState(null);
  const [caseInfo, setCaseInfo] = useState({})
  const [TransactResult, setTransactResult] = useState({})
  const [tabsList, setTabList] = useState([
    {
      img: result,
@@ -31,656 +53,148 @@
      isNeedStep: true
    },
    {
      img: floating,
      label: '流转督办',
      key: '2',
    },
    {
      img: apply,
      label: '申请记录',
      key: '2',
      isNeedStep: true,//加上这个就有进度条
      key: '3',
    },
  ])
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [list, setList] = useState([])
  const [progressData, setProgressData] = useState({});

  useEffect(() => {
    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 applyDialog = [
    {
      trueName: '李四',
      perClassName: '高级',
      phone: '13700137000',
      sex: '女',
      certiTypeName: '护照',
      certiNo: 'G12345678',
      nationName: '满',
      addr: '上海市浦东新区某公寓2号楼2单元202室',
      placeAddr: '上海市黄浦区某路3号',
      extreme: '否',
      workUnit: '上海某金融公司',
      person: '/path/to/anotherPerson.jpg', // 这应该是图片的实际路径
      link: '/path/to/anotherLink.png',     // 这应该是链接图标的实际路径
  const getTransactResult = async (id) => {
    const res = await getTransactResultApi(id)
    if (res.type) {
      setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList.map(item => item.trueName) })
    }
    // 可以根据需要添加更多的对象来模拟更多条目的数据
  ];
  }

  const agentDialog = [
    {
      trueName: '王五',
      perClassName: '自然人',
      phone: '13600136000',
      sex: '男',
      certiTypeName: '身份证',
      certiNo: '110101199501012345',
      nationName: '汉',
      addr: '广州市天河区某大厦A座501室',
      placeAddr: '广州市越秀区某街4号',
      extreme: '否',
      workUnit: '广州某贸易公司',
      agentRelateName: '配偶',
      agentTypeName: '法定代理人',
      perTypeName: '成年人',
      person: '/path/to/person.jpg', // 应该是图片的实际路径
      link: '/path/to/link.png',     // 应该是链接图标的实际路径
    },
  ];
  const getByCaseId = async (id) => {
    const res = await getByCaseIdApi(id)
    if (res.type) {
      setGrade(res.data)
    }
  }

  const respondent = [
    {
      orgaType: '广东好又多贸易有限公司',
      perClassName: '企业法人',
      phone: '020-12345678',
      address: '广州市天河区珠江新城花城大道66号',
      companyType: '有限责任公司',
      legalPerson: '江照月',
      creditCode: '914401011234567890',
      president: '广州市天河区珠江新城花城大道66号A座20层',
      link: '/path/to/link.png', // 应该是链接图标的实际路径
    },
  ];

  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,
        };
  const getCaseInfo = async (id) => {
    const res = await getCaseInfoApi(id)
    if (res.type) {
      const { agentList, personList, ...rest } = res.data
      const parList = agentList.concat(personList)
      const obj = {
        ...rest,
        fakeData: parList,
      }
      return record;
    }));
  };
      setCaseInfo(obj)
    }
  }

  const listFeedback = async (id) => {
    const res = await listFeedbackApi(id)
    if (res.type) {
      let data = res.data.caseFeedbackList
      setList(data)
    }
  }





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

  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} />
                    </div>
                  }
                  {grade &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RateModule grade={grade} />
                    </div>
                  }
                  <div style={{ backgroundColor: '#ffff', margin: '8px 16px 65px 16px', padding: '12px' }}>
                    <RegisInfoModule caseInfo={caseInfo} />
                  </div>
                </Scrollbars>
                <div className="dataSync-excel">
                  <Space size="large" style={{ margin: '4px 14px' }}>
                    <Button type='primary' >导出</Button>
                    <Button type='secondary' >返回上级页面</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 applyDialog={applyDialog} />
                    <AgentDialog agentDialog={agentDialog} />
                    <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>
                    <Respondent respondent={respondent} />
                    <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' }}>{infoData?.statusName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div><div className="title-text">事项编号</div></div>
                        <div>{infoData?.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' }}>{infoData.caseLevel || '-'}</div></div>级</div>
                      </Col>
                      <Col span={8}>
                        <div><div className="title-text">来访时间</div></div>
                        <div>{infoData.visitTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">来访人数（人）</div></div>
                        <div>{infoData.visitPeopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷类型</div></div>
                        <div>{infoData.caseType || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生时间</div></div>
                        <div>{infoData.occurTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生地点</div></div>
                        <div>{infoData.addr || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">问题属地</div></div>
                        <div>{infoData.questionName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及人数（人）</div></div>
                        <div>{infoData.peopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及金额（元）</div></div>
                        <div>{$$.thousands(infoData.amount) || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">事项来源</div></div>
                        <div>{infoData.canalName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div ><div className="title-text">来访形式</div></div>
                        <div>{infoData.visitWayName || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项概况</div></div>
                        <div>{infoData.caseDes || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项申请</div></div>
                        <div>{infoData.caseClaim || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                        <div>{infoData.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'>化解成功</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
                        <td width='380'>李晓明</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
                        <td>天河区棠下街综治中心</td>
                        <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
                        <td>-</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'>2024-7-15 11:45</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
                        <td width='380' colspan='3'>调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导被申请人详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，被申请人理解了自身行为给申请人带来的不便，在相关证据的出示下，被申请人同意了申请方的申请请求，双方最终达成一致，签署了调解协议。</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
                        <td width='380' colspan='3'>经过协商，李女士同意承担主要维修费用，但考虑到水管老化属自然磨损，张先生也表示愿意承担一小部分费用以示友好特申请结案。</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th>
                        <td width='380' colspan='3'>考虑到事项已经得到平息，过程材料也都比较完善，现申请结案</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>
                      <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 defaultValue={3} disabled /></div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价时间</div>
                        </div>
                        <div>2024-8-1 12:00</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价人</div>
                        </div>
                        <div>张梦雨</div>
                      </Col>
                      <Col span={12}>
                        <div className="title">
                          <div className="title-text">评语</div>
                        </div>
                        <div>实名表扬天河区棠下街综治中心，真的很有耐心处置我提出的问题，得到满意的答复。</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>天河区棠下街道综治中心</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记人</div>
                        </div>
                        <div>
                          李晓明
                          <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>2024-7-8 10:00</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' &&
                <></>
              }
            </TabPane>
          })}
        </Tabs>


      </NewPage>
    </>
              </>
            }
            {
              tabsActive === '2' &&
              <ProgressStep progressData={progressData} />
            }
            {
              tabsActive === '3' &&
              <ApplyInfo />
            }
          </TabPane>
        })}
      </Tabs>
    </NewPage>
  )
}