样式调整

main
liuyiliang 3 months ago
parent 90bad9816a
commit 7f30b57151
  1. 1
      packages/examination/package.json
  2. 21
      packages/examination/src/style/common.css
  3. 4
      packages/examination/src/utils/exportPdf.js
  4. 111
      packages/examination/src/views/exam-online/compoents/ExamDetailAnalysisPage.tsx
  5. 253
      packages/examination/src/views/exam-online/compoents/ExamEditPage.tsx
  6. 87
      packages/examination/src/views/exam-online/compoents/ExamListPage.tsx
  7. 80
      packages/examination/src/views/exam-online/compoents/ExamPaperAnalysisPage.tsx
  8. 20
      packages/examination/src/views/exam-online/compoents/ExamStatisticsPage.tsx
  9. 305
      packages/examination/src/views/statistical/enterpriseFile.tsx

@ -22,6 +22,7 @@
"process": "^0.11.10",
"quill-emoji": "^0.2.0",
"react": "^17.0.0",
"react-countup": "^6.5.3",
"react-dom": "^17.0.0",
"react-qrcode-logo": "^3.0.0",
"react-quill": "^1.3.5",

@ -93,7 +93,7 @@ body {
.special-class .ant-table-body{
max-height: max-content !important;
overflow-y: hidden !important;
/*overflow-y: hidden !important;*/
}
.left{
@ -133,6 +133,18 @@ body {
font-weight: 600;
}
.ant-descriptions-header {
color: #323232;
margin-bottom: 15px;
border-left: 4px solid #7ea0f9;
padding-left: 10px;
}
.ant-descriptions-header .ant-descriptions-title {
font-size: medium;
font-weight: 600;
}
.list-filter {
position: relative;
margin: 0;
@ -385,4 +397,11 @@ table.ikd-input-table {
.ant-btn-dangerous {
color: #ff4d4f !important;
border-color: #ff4d4f !important;
}
.form_item_no_check label {
margin-left: 10px;
}
.main-customer-htm {
border: 1px solid #f1f3ff;
border-radius: 5px;
}

@ -10,7 +10,7 @@ export const downPdf = (title,className) => {
var mapIndex = index;
html2canvas(elements[index], {
useCORS: true, // 是否允许网页中img元素跨域,这个设置需要img元素支持及服务器支持
scale: 1, // 这个影响生成图片的清晰度
// scale: 1, // 这个影响生成图片的清晰度
// background: "#F5F5F5" //背景
}).then((canvas) => {
var img = new Image();
@ -34,9 +34,9 @@ export const downPdf = (title,className) => {
// 所有图片添加完毕,保存
pdf.save(title+".pdf");
}
return true;
});
};
return true;
});
}

@ -167,60 +167,62 @@ const ExamDetailAnalysisPage: React.FC = () => {
});
return (
<div style={{ padding: 20 }}>
{/* 检索条件行 */}
<Row gutter={16}>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="考试名称"
value={examName}
onChange={(e) => setExamName(e.target.value)}
style={{ width: 'calc(100% - 100px)' }} // 调整输入框宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="试卷名称"
value={paperName}
onChange={(e) => setPaperName(e.target.value)}
style={{ width: 'calc(100% - 100px)' }} // 调整输入框宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Cascader
options={convertToCascaderData()}
placeholder="请选择考试区域"
onChange={(values) => setExamArea(convertArrToRegion(values))}
style={{ width: 'calc(100% - 100px)' }} // 调整级联选择器宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Select
placeholder="监管行业"
value={industry}
onChange={(value) => setIndustry(value)}
style={{ width: 150 }} // 调整下拉框宽度
>
<Option key="" value=""></Option>
{industryOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Col>
<Col span={4}>
<Space>
<Button onClick={handleReset}></Button>
<Button type="primary" onClick={handleSearch}></Button>
</Space>
</Col>
</Row>
{/* 表格 */}
<div>
<div className="header-filter">
<div className="list-filter" style={{display: 'flex', padding: 15}}>
<Row gutter={16}>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="考试名称"
value={examName}
onChange={(e) => setExamName(e.target.value)}
style={{ width: 'calc(100% - 100px)' }} // 调整输入框宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="试卷名称"
value={paperName}
onChange={(e) => setPaperName(e.target.value)}
style={{ width: 'calc(100% - 100px)' }} // 调整输入框宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Cascader
options={convertToCascaderData()}
placeholder="请选择考试区域"
onChange={(values) => setExamArea(convertArrToRegion(values))}
style={{ width: 'calc(100% - 100px)' }} // 调整级联选择器宽度
/>
</Col>
<Col span={5}>
<span style={{ marginRight: 8 }}>:</span>
<Select
placeholder="监管行业"
value={industry}
onChange={(value) => setIndustry(value)}
style={{ width: 150 }} // 调整下拉框宽度
>
<Option key="" value=""></Option>
{industryOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Col>
<Col span={4}>
<Space>
<Button onClick={handleReset}></Button>
<Button type="primary" onClick={handleSearch}></Button>
</Space>
</Col>
</Row>
</div>
</div>
<Table
columns={columns}
dataSource={tableData}
@ -230,7 +232,6 @@ const ExamDetailAnalysisPage: React.FC = () => {
onChange={handleTableChange}
style={{ marginTop: 20 }}
/>
<Modal
title="成绩分布"
visible={visible}

@ -102,6 +102,7 @@ const ExamBasicInfoForm: React.FC<PropsWithRouter> = (props) => {
const formattedValues = {
...otherValues,
id:values.examId,
industryId: values.regulatedIndustry,
examRegion: formattedRegion,
validFrom: formattedValidFrom,
validTo: formattedValidTo
@ -215,9 +216,7 @@ const ExamBasicInfoForm: React.FC<PropsWithRouter> = (props) => {
setPaperOptions(allPaperOptions);
} else {
const filteredPapers = allPaperOptions.filter(paper => String(paper.regulatedIndustry) === String(value));
if (filteredPapers.length > 0) {
setPaperOptions(filteredPapers);
}
setPaperOptions(filteredPapers);
}
// @ts-ignore
@ -239,135 +238,137 @@ const ExamBasicInfoForm: React.FC<PropsWithRouter> = (props) => {
const validateValidTo = (rule: Rule, value: Moment | null) => {
const validFrom = formRef.current?.getFieldValue('validFrom');
if (validFrom && value && value.isBefore(validFrom)) {
return Promise.reject(new Error('考试失效时间不得小于考试有效时间'));
return Promise.reject(new Error('考试失效日期不得小于考试有效日期'));
}
return Promise.resolve();
};
return (
<div>
<h1></h1>
<Form
ref={formRef}
{...props}
name="examBasicInfo"
onFinish={onFinish}
autoComplete="off"
labelCol={labelCol}
wrapperCol={wrapperCol}
>
{/* 隐藏的 examId 输入框 */}
<Form.Item name="examId" style={{ display: 'none' }}>
<Input />
</Form.Item>
<Form.Item
label="考试名称"
name="examName"
rules={[
{
required: true,
message: '请输入考试名称',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="监管行业"
name="regulatedIndustry"
rules={[
{
required: true,
message: '请选择监管行业',
},
]}
>
<Select placeholder="请选择监管行业" onChange={handleIndustryChange}>
{industryOptions.map(option => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
label="试卷名称"
name="paperId"
rules={[
{
required: true,
message: '请选择试卷名称',
},
]}
>
<Select placeholder="请选择试卷名称" onChange={handlePaperChange}>
{paperOptions.map(option => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Form.Item>
<Form.Item label="考试分值" name="examScore">
<Input disabled />
</Form.Item>
<Form.Item label="考试时长" name="examDuration">
<Input disabled />
</Form.Item>
<Form.Item
label="考试区域"
name="examRegion"
rules={[
{
required: true,
message: '请选择考试区域',
},
]}
>
<Cascader
options={convertToCascaderData()}
placeholder="请选择考试区域"
/>
</Form.Item>
<Form.Item
label="考试有效时间"
name="validFrom"
rules={[
{
required: true,
message: '请选择考试有效时间',
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label="考试失效时间"
name="validTo"
rules={[
{
required: true,
message: '请选择考试失效时间',
},
{ validator: validateValidTo }
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label="内容描述"
name="remark"
<div className="header-filter">
<div className="list-filter" style={{padding: 15}}>
<div className="ikd-page-header"><div className="title"></div></div>
<Form
ref={formRef}
{...props}
name="examBasicInfo"
onFinish={onFinish}
autoComplete="off"
labelCol={labelCol}
wrapperCol={wrapperCol}
>
<Input.TextArea rows={4} maxLength={200} showCount/>
</Form.Item>
<Form.Item wrapperCol={{ ...wrapperCol, offset: labelCol.span }}>
<div style={{ textAlign: "right" }}>
<Button type="default" onClick={onCancel}></Button>
<span style={{ marginRight: 20 }} />
<Button type="primary" onClick={handleSubmit}></Button>
</div>
</Form.Item>
</Form>
{/* 隐藏的 examId 输入框 */}
<Form.Item name="examId" style={{ display: 'none' }}>
<Input />
</Form.Item>
<Form.Item
label="考试名称"
name="examName"
rules={[
{
required: true,
message: '请输入考试名称',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="监管行业"
name="regulatedIndustry"
rules={[
{
required: true,
message: '请选择监管行业',
},
]}
>
<Select placeholder="请选择监管行业" onChange={handleIndustryChange}>
{industryOptions.map(option => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
label="试卷名称"
name="paperId"
rules={[
{
required: true,
message: '请选择试卷名称',
},
]}
>
<Select placeholder="请选择试卷名称" onChange={handlePaperChange}>
{paperOptions.map(option => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Form.Item>
<Form.Item label="考试分值" name="examScore" className="form_item_no_check">
<Input disabled />
</Form.Item>
<Form.Item label="考试时长" name="examDuration" className="form_item_no_check">
<Input disabled />
</Form.Item>
<Form.Item
label="考试区域"
name="examRegion"
rules={[
{
required: true,
message: '请选择考试区域',
},
]}
>
<Cascader
options={convertToCascaderData()}
placeholder="请选择考试区域"
/>
</Form.Item>
<Form.Item
label="考试有效日期"
name="validFrom"
rules={[
{
required: true,
message: '请选择考试有效日期',
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label="考试失效时间"
name="validTo"
rules={[
{
required: true,
message: '请选择考试失效时间',
},
{ validator: validateValidTo }
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label="内容描述"
name="remark"
className="form_item_no_check">
<Input.TextArea rows={4} maxLength={200} showCount/>
</Form.Item>
<Form.Item wrapperCol={{ ...wrapperCol, offset: labelCol.span }}>
<div style={{ textAlign: "right" }}>
<Button type="default" onClick={onCancel}></Button>
<span style={{ marginRight: 20 }} />
<Button type="primary" onClick={handleSubmit}></Button>
</div>
</Form.Item>
</Form>
</div>
</div>
);
};

@ -107,11 +107,12 @@ const ExamListPage = ({ history }: { history: any }) => {
title: '确认删除',
content: '你确定要删除这些选中的考试吗?',
onOk: () => {
const res = doDelete(ids);
if (!res) {
return;
}
research();
doDelete(ids).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
},
onCancel: () => {
},
@ -142,11 +143,12 @@ const ExamListPage = ({ history }: { history: any }) => {
const validIds = validExams.map(exam => String(exam.examId));
if (validIds.length > 0) {
const res = doCancel(validIds);
if (!res) {
return;
}
research();
doCancel(validIds).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
}
},
onCancel: () => {
@ -178,11 +180,12 @@ const ExamListPage = ({ history }: { history: any }) => {
const validIds = validExams.map(exam => String(exam.examId));
if (validIds.length > 0) {
const res = doPublish(validIds);
if (!res) {
return;
}
research();
doPublish(validIds).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
}
},
onCancel: () => {
@ -238,11 +241,12 @@ const ExamListPage = ({ history }: { history: any }) => {
content: '你确定要发布这个考试吗?',
onOk: () => {
const ids = [String(examId)];
const res = doPublish(ids);
if (!res) {
return;
}
research();
doPublish(ids).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
},
onCancel: () => {
},
@ -256,11 +260,12 @@ const ExamListPage = ({ history }: { history: any }) => {
content: '你确定要撤回这个考试吗?',
onOk: () => {
const ids = [String(examId)];
const res = doCancel(ids);
if (!res) {
return;
}
research();
doCancel(ids).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
},
onCancel: () => {
},
@ -274,11 +279,12 @@ const ExamListPage = ({ history }: { history: any }) => {
content: '你确定要删除这个考试吗?',
onOk: () => {
const ids = [String(examId)];
const res = doDelete(ids);
if (!res) {
return;
}
research();
doDelete(ids).then(res => {
if (!res) {
return;
}
research();
}).catch(() => { })
},
onCancel: () => {
},
@ -363,7 +369,7 @@ const ExamListPage = ({ history }: { history: any }) => {
key: 'validFrom',
},
{
title: '考试效日期',
title: '考试效日期',
dataIndex: 'validTo',
key: 'validTo',
},
@ -395,7 +401,7 @@ const ExamListPage = ({ history }: { history: any }) => {
render: (cellValue: number, record: Exam) => (
<Space size="middle">
<a onClick={() => handleEdit(record.examId)}></a>
{record.publishStatus === 1 ? (
{record.publishStatus === 1 && (
<a onClick={(e) => {
if (record.publishStatus !== 1) {
e.preventDefault();
@ -405,21 +411,12 @@ const ExamListPage = ({ history }: { history: any }) => {
}}
>
</a>) : (
<span style={{ color: 'gray' }} ></span>
)}
{/*<a onClick={(e) => {*/}
{/* handleGenerateQrCode(record);*/}
{/*}}*/}
{/*>*/}
{/* 生成考试码*/}
{/*</a>*/}
{record.publishStatus === 0 ? (
</a>)}
{record.publishStatus === 0 || record.publishStatus === 2 && (
<a onClick={() => handlePublishSingle(record.examId)}></a>
) : record.publishStatus === 1 ? (
)}
{record.publishStatus === 1 && (
<a onClick={() => handleWithdrawSingle(record.examId)}></a>
) : (
<span style={{ color: 'gray' }}></span>
)}
<a onClick={() => handleDeleteSingle(record.examId)}></a>
</Space>

@ -141,48 +141,50 @@ const ExamPaperAnalysisPage: React.FC<RouteComponentProps> = ({history}) => {
];
return (
<div style={{ padding: 20 }}>
{/* 检索条件行 */}
<Row gutter={16}>
<Col span={6}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="试卷名称"
value={paperName}
onChange={(e) => setPaperName(e.target.value)}
style={{ width: 'calc(100% - 100px)' }}
/>
</Col>
<Col span={6}>
<span style={{ marginRight: 8 }}>:</span>
<Select
placeholder="监管行业"
value={industry}
onChange={(value) => setIndustry(value)}
style={{ width: 150 }}
>
<Option key="" value=""></Option>
{industryOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Col>
<Col span={4}>
<Space>
<Button onClick={handleReset}></Button>
<Button type="primary" onClick={handleSearch}></Button>
</Space>
</Col>
</Row>
{/* 试卷数量行 */}
<div>
<div className="header-filter">
<div className="list-filter" style={{ padding: 15}}>
<Row gutter={24}>
<Col span={8}>
<span style={{ marginRight: 8 }}>:</span>
<Input
placeholder="试卷名称"
value={paperName}
onChange={(e) => setPaperName(e.target.value)}
style={{ width: 300 }}
/>
</Col>
<Col span={8}>
<span style={{ marginRight: 8 }}>:</span>
<Select
placeholder="监管行业"
value={industry}
onChange={(value) => setIndustry(value)}
style={{ width: 300 }}
>
<Option key="" value=""></Option>
{industryOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Col>
<Col span={8}>
<Space>
<Button onClick={handleReset}></Button>
<Button type="primary" onClick={handleSearch}></Button>
</Space>
</Col>
</Row>
</div>
</div>
<Row gutter={24} style={{ marginTop: 40 }}>
<Col span={8}>
<div className="exam-statistic-box">
<div className="exam-statistic">
<span style={{ color: 'black' }}></span>
<span style={{ color: '#86A3E7' }}>{totalCount}</span>
<span style={{ color: '#86A3E7', margin: 10 }}>{totalCount}</span>
<span style={{ color: 'black' }}></span>
</div>
</div>
@ -191,7 +193,7 @@ const ExamPaperAnalysisPage: React.FC<RouteComponentProps> = ({history}) => {
<div className="exam-statistic-box">
<div className="exam-statistic">
<span style={{ color: 'black' }}>使</span>
<span style={{ color: '#86A3E7' }}>{usedCount}</span>
<span style={{ color: '#86A3E7', margin: 10 }}>{usedCount}</span>
<span style={{ color: 'black' }}></span>
</div>
</div>
@ -200,7 +202,7 @@ const ExamPaperAnalysisPage: React.FC<RouteComponentProps> = ({history}) => {
<div className="exam-statistic-box">
<div className="exam-statistic">
<span style={{ color: 'black' }}></span>
<span style={{ color: '#86A3E7' }}>{disabledCount}</span>
<span style={{ color: '#86A3E7', margin: 10 }}>{disabledCount}</span>
<span style={{ color: 'black' }}></span>
</div>
</div>

@ -1,10 +1,10 @@
import CountUp from 'react-countup';
import React, { useEffect, useState, useRef } from 'react';
import { Row, Col, Select, Table, Card } from 'antd';
import ReactECharts from 'echarts-for-react';
import {examStatisticsChange, examStatisticsInit, getIndustryList} from "api/exam-online/index"; // 修改接口为获取带详情的试卷列表
import { Link } from 'react-router-dom';
const { Option } = Select;
const examTableColumns = [
{
title: '考试次数',
@ -214,17 +214,29 @@ const Dashboard: React.FC = () => {
<Row gutter={16}>
<Col span={8}>
<div className="exam-statistic-box">
<div className="exam-statistic"><span style={{color:"#86A3E7"}}>{questionCount}</span></div>
<div className="exam-statistic">
<span style={{color:"#86A3E7", margin: 10}}>
<CountUp end={questionCount as number} separator="," duration={2}/>
</span>
</div>
</div>
</Col>
<Col span={8}>
<div className="exam-statistic-box">
<div className="exam-statistic"><span style={{color:"#86A3E7"}}>{paperCount}</span></div>
<div className="exam-statistic">
<span style={{color: "#86A3E7", margin: 10}}>
<CountUp end={paperCount as number} separator="," duration={2}/>
</span>
</div>
</div>
</Col>
<Col span={8}>
<div className="exam-statistic-box">
<div className="exam-statistic"><span style={{color:"#86A3E7"}}>{examCount}</span></div>
<div className="exam-statistic">
<span style={{color:"#86A3E7", margin: 10}}>
<CountUp end={examCount as number} separator="," duration={2}/>
</span>
</div>
</div>
</Col>
</Row>

@ -356,8 +356,8 @@ const EnterpriseFile: React.FC<CustomerRetentionProps> = ({ customer }) => {
const columnsHivePolicyInnerCoInsurer = [
{
title: '联保机构',
dataIndex: 'innerCoOrgCode',
key: 'innerCoOrgCode',
dataIndex: 'orgName',
key: 'orgName',
},
{
title: '联保份额',
@ -475,18 +475,24 @@ const EnterpriseFile: React.FC<CustomerRetentionProps> = ({ customer }) => {
},
];
const handleCapture = () => {
setLoading(true);
setDownloadStat(true);
setTimeout(function () {
downPdf("企业档案", "main-customer-htm").then(() => {
console.log("PDF已经生成并保存!");
}).catch((error: any) => {
console.error("生成PDF时发生错误: ", error);
});
setLoading(false);
setDownloadStat(false);
setLoading(true);
setTimeout(() => {
downPdf("企业档案", "main-customer-htm")
.then(() => {
console.log("PDF已经生成并保存!");
setLoading(false);
setDownloadStat(false);
})
.catch((error: any) => {
console.error("生成PDF时发生错误: ", error);
setLoading(false);
setDownloadStat(false);
});
}, 7000);
}
// }, 200);
};
return (
<div>
<div style={{ height: 40 }}>
@ -506,145 +512,158 @@ const EnterpriseFile: React.FC<CustomerRetentionProps> = ({ customer }) => {
textAlign: 'center',
display: 'flex',
alignItems: 'center'
}}></div></div>
}}>{customer.customerName}</div></div>
<div>
<Descriptions title="企业基本信息">
{items.map(item => (
<Descriptions.Item label={item.label} key={item.key}>
{item.children}
</Descriptions.Item>
))}
</Descriptions>
<br />
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items2.map(pItem => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a',
marginTop: 10}}>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{pItem.baseData.map((item: { label: string, key: string, children: string }) => (
<Descriptions.Item label={item.label} key={item.key}>
{item.children}
</Descriptions.Item>
))}
<div className={downloadStat? 'asd': 'header-filter'} style={downloadStat?{}:{width: '99%', marginLeft: '0.5%'}}>
<div className={downloadStat? 'asd': 'list-filter'} style={downloadStat?{}:{display: 'flex', padding: 7}}>
<Descriptions title="企业基本信息">
{items.map(item => (
<Descriptions.Item label={item.label} key={item.key}>
{item.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={pItem.policyCoverageList}
columns={columnsPolicyCoverage}
bordered={true}
size={'small'}
rowKey="key"
scroll={{ y: 300 }}
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={pItem.hivePolicyInnerCoInsurerList}
columns={columnsHivePolicyInnerCoInsurer}
bordered={true}
size={'small'}
rowKey="key"
scroll={{ y: 300 }}
pagination={false}
/>
<br />
</div>
))}
<br />
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items3.map((item3, index) => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a'}}>
{(index === 0 || item3[0].children !== items3[index - 1][0].children) && (
<div style={{ marginBottom: 20, fontWeight: 600 }}>
{item3[0].children}
<div className={downloadStat? 'asd': 'header-filter'} style={downloadStat?{}:{width: '99%', marginLeft: '0.5%'}}>
<div className={downloadStat? 'asd': 'list-filter'} style={downloadStat?{}:{padding: 7}}>
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items2.map(pItem => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a',
marginTop: 10}}>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{pItem.baseData.map((item: { label: string, key: string, children: string }) => (
<Descriptions.Item label={item.label} key={item.key}>
{item.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={pItem.policyCoverageList}
columns={columnsPolicyCoverage}
bordered={true}
size={'small'}
rowKey="key"
scroll={{ y: 300 }}
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={pItem.hivePolicyInnerCoInsurerList}
columns={columnsHivePolicyInnerCoInsurer}
bordered={true}
size={'small'}
rowKey="key"
scroll={{ y: 300 }}
pagination={false}
/>
<br />
</div>
)}
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(1, 4).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(5, 13).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(14, 24).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
))}
</div>
))}
<br />
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items4.map((item4, index) => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a'}}>
<div style={{marginBottom: 20, fontWeight: 600}}> {item4.policyNumber}</div>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.accidentPreventionList}
columns={columnsAccidentPrevention}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
rowKey="key"
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.riskList}
columns={columnsRisk}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.hazardInvestigationList}
columns={columnsHazardInvestigation}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
rowKey="key"
pagination={false}
/>
<div className={downloadStat? 'asd': 'header-filter'} style={downloadStat?{}:{width: '99%', marginLeft: '0.5%'}}>
<div className={downloadStat? 'asd': 'list-filter'} style={downloadStat?{}:{padding: 7}}>
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items3.map((item3, index) => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a'}}>
{(index === 0 || item3[0].children !== items3[index - 1][0].children) && (
<div style={{ marginBottom: 20, fontWeight: 600 }}>
{item3[0].children}
</div>
)}
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(1, 4).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(5, 13).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Descriptions>
{item3.slice(14, 24).map(tim => (
<Descriptions.Item label={tim.title} key={tim.key}>
{tim.children}
</Descriptions.Item>
))}
</Descriptions>
</div>
))}
</div>
))}
</div>
<div className={downloadStat? 'asd': 'header-filter'} style={downloadStat?{}:{width: '99%', marginLeft: '0.5%'}}>
<div className={downloadStat? 'asd': 'list-filter'} style={downloadStat?{}:{padding: 7}}>
<div className="ant-descriptions-header">
<div className="ant-descriptions-title"></div>
</div>
{items4.map((item4, index) => (
<div style={{border: '1px solid #dce4f84a',
borderRadius: 5,
padding: 10,
backgroundColor: '#dce4f84a'}}>
<div style={{marginBottom: 20, fontWeight: 600}}> {item4.policyNumber}</div>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.accidentPreventionList}
columns={columnsAccidentPrevention}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
rowKey="key"
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.riskList}
columns={columnsRisk}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
pagination={false}
/>
<br/>
<div style={{marginBottom: 20, color: '#4F85EA', fontWeight: 600}}></div>
<Table
className={downloadStat ? 'special-class' : 'regular-class'}
dataSource={item4.hazardInvestigationList}
columns={columnsHazardInvestigation}
bordered={true}
size={'small'}
scroll={{ y: 300 }}
rowKey="key"
pagination={false}
/>
</div>
))}
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save