tangjie 2026-08-05 14:57:46 +08:00
parent abbb4746b3
commit cb9137eab3
1 changed files with 183 additions and 183 deletions

View File

@ -129,98 +129,98 @@ const App = (props) => {
type="card" type="card"
tabPlacement="top" tabPlacement="top"
items={[ items={[
{ // {
label: "知识库", // label: "知识库",
key: "1", // key: "1",
children: ( // children: (
<div className="WpsEditor-dock"> // <div className="WpsEditor-dock">
<Input.Search placeholder="搜索法规、案例、措施" /> // <Input.Search placeholder="搜索法规、案例、措施" />
<Flex gap={4} className="WpsEditor-dock-cats"> // <Flex gap={4} className="WpsEditor-dock-cats">
{[ // {[
"推荐", // "推荐",
"法规标准", // "法规标准",
"危险因素", // "危险因素",
"评价方法", // "评价方法",
"事故案例", // "事故案例",
].map((cat) => ( // ].map((cat) => (
<Button // <Button
key={cat} // key={cat}
size="small" // size="small"
type={cat === "推荐" ? "primary" : "default"} // type={cat === "推荐" ? "primary" : "default"}
> // >
{cat} // {cat}
</Button> // </Button>
))} // ))}
</Flex> // </Flex>
<div className="WpsEditor-dock-list"> // <div className="WpsEditor-dock-list">
{[ // {[
{ // {
cat: "法规标准", // cat: "法规标准",
title: "中华人民共和国安全生产法", // title: "中华人民共和国安全生产法",
desc: "2021年修正当前有效。可引用至评价依据章节发多少个给梵蒂换个房间官方电话冈的是非观大使馆反对给多少给多少规范化的。", // desc: "2021年修正当前有效。可引用至评价依据章节发多少个给梵蒂换个房间官方电话冈的是非观大使馆反对给多少给多少规范化的。",
}, // },
{ // {
cat: "危险因素", // cat: "危险因素",
title: "液氨泄漏事故场景", // title: "液氨泄漏事故场景",
desc: "包含泄漏扩散、中毒窒息、次生火灾及应急处置要点。", // desc: "包含泄漏扩散、中毒窒息、次生火灾及应急处置要点。",
}, // },
{ // {
cat: "评价方法", // cat: "评价方法",
title: "安全检查表法", // title: "安全检查表法",
desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。", // desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。",
}, // },
{ // {
cat: "评价方法", // cat: "评价方法",
title: "安全检查表法", // title: "安全检查表法",
desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。", // desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。",
}, // },
{ // {
cat: "评价方法", // cat: "评价方法",
title: "安全检查表法", // title: "安全检查表法",
desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。", // desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。",
}, // },
{ // {
cat: "评价方法", // cat: "评价方法",
title: "安全检查表法", // title: "安全检查表法",
desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。", // desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。",
}, // },
{ // {
cat: "评价方法", // cat: "评价方法",
title: "安全检查表法", // title: "安全检查表法",
desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。", // desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。",
}, // },
].map((item, i) => { // ].map((item, i) => {
const expanded = expandedMap[i]; // const expanded = expandedMap[i];
return ( // return (
<div key={i} className="WpsEditor-resourceCard"> // <div key={i} className="WpsEditor-resourceCard">
<Tag color="blue">{item.cat}</Tag> // <Tag color="blue">{item.cat}</Tag>
<Typography.Text // <Typography.Text
strong // strong
className="WpsEditor-resourceTitle" // className="WpsEditor-resourceTitle"
> // >
{item.title} // {item.title}
</Typography.Text> // </Typography.Text>
<Typography.Paragraph // <Typography.Paragraph
type="secondary" // type="secondary"
className="WpsEditor-resourceDesc" // className="WpsEditor-resourceDesc"
ellipsis={expanded ? false : { rows: 2 }} // ellipsis={expanded ? false : { rows: 2 }}
> // >
{item.desc} // {item.desc}
</Typography.Paragraph> // </Typography.Paragraph>
<Button // <Button
type="link" // type="link"
size="small" // size="small"
onClick={() => toggleExpand(i)} // onClick={() => toggleExpand(i)}
> // >
{expanded ? "收起" : "展开"} // {expanded ? "收起" : "展开"}
</Button> // </Button>
</div> // </div>
); // );
})} // })}
</div> // </div>
</div> // </div>
), // ),
}, // },
{ {
label: "模板", label: "模板",
key: "2", key: "2",
@ -282,97 +282,97 @@ const App = (props) => {
</div> </div>
), ),
}, },
{ // {
label: "签字", // label: "签字",
key: "3", // key: "3",
children: ( // children: (
<div className="WpsEditor-dock"> // <div className="WpsEditor-dock">
<Flex // <Flex
justify="space-between" // justify="space-between"
align="center" // align="center"
className="WpsEditor-dock-heading" // className="WpsEditor-dock-heading"
> // >
<Typography.Text strong>责任页签字</Typography.Text> // <Typography.Text strong>责任页签字</Typography.Text>
<span className="WpsEditor-signProgress"> // <span className="WpsEditor-signProgress">
1 / 5 已完成 // 1 / 5 已完成
</span> // </span>
</Flex> // </Flex>
<Progress percent={20} size="small" /> // <Progress percent={20} size="small" />
<div className="WpsEditor-dock-list"> // <div className="WpsEditor-dock-list">
{[ // {[
{ // {
initial: "张", // initial: "张",
name: "张建国", // name: "张建国",
role: "项目负责人", // role: "项目负责人",
status: "signed", // status: "signed",
}, // },
{ // {
initial: "李", // initial: "李",
name: "李明华", // name: "李明华",
role: "报告编制人", // role: "报告编制人",
status: "pending", // status: "pending",
}, // },
{ // {
initial: "王", // initial: "王",
name: "王丽萍", // name: "王丽萍",
role: "内部审核人", // role: "内部审核人",
status: "locked", // status: "locked",
}, // },
{ // {
initial: "陈", // initial: "陈",
name: "陈志强", // name: "陈志强",
role: "技术负责人", // role: "技术负责人",
status: "locked", // status: "locked",
}, // },
{ // {
initial: "王", // initial: "王",
name: "王丽萍", // name: "王丽萍",
role: "过程控制负责人", // role: "过程控制负责人",
status: "locked", // status: "locked",
}, // },
].map((signer, i) => ( // ].map((signer, i) => (
<div // <div
key={i} // key={i}
className={`WpsEditor-signer ${signer.status}`} // className={`WpsEditor-signer ${signer.status}`}
> // >
<div className="WpsEditor-signerAvatar"> // <div className="WpsEditor-signerAvatar">
{signer.initial} // {signer.initial}
</div> // </div>
<div className="WpsEditor-signerInfo"> // <div className="WpsEditor-signerInfo">
<Typography.Text strong> // <Typography.Text strong>
{signer.name} // {signer.name}
</Typography.Text> // </Typography.Text>
<Typography.Paragraph // <Typography.Paragraph
type="secondary" // type="secondary"
style={{ margin: 0, fontSize: 12 }} // style={{ margin: 0, fontSize: 12 }}
> // >
{signer.role} // {signer.role}
</Typography.Paragraph> // </Typography.Paragraph>
</div> // </div>
{signer.status === "signed" && ( // {signer.status === "signed" && (
<Tag color="success">已签字</Tag> // <Tag color="success">已签字</Tag>
)} // )}
{signer.status === "pending" && ( // {signer.status === "pending" && (
<Button size="small" type="primary" ghost> // <Button size="small" type="primary" ghost>
下发APP签字 // 下发APP签字
</Button> // </Button>
)} // )}
{signer.status === "locked" && <Tag>待内审</Tag>} // {signer.status === "locked" && <Tag>待内审</Tag>}
</div> // </div>
))} // ))}
</div> // </div>
<div className="WpsEditor-signRule"> // <div className="WpsEditor-signRule">
<Typography.Paragraph // <Typography.Paragraph
type="secondary" // type="secondary"
style={{ margin: 0, fontSize: 12 }} // style={{ margin: 0, fontSize: 12 }}
> // >
签字由 PC 端下发至本人 // 签字由 PC 端下发至本人
APP手写签署后自动回传各版本签字独立留痕 // APP手写签署后自动回传。各版本签字独立留痕。
</Typography.Paragraph> // </Typography.Paragraph>
</div> // </div>
</div> // </div>
), // ),
}, // },
]} ]}
/> />
</div> </div>