dev_1.2
tangjie 2026-07-20 15:40:12 +08:00
parent d69ebfc72b
commit 07027325f5
3 changed files with 399 additions and 82 deletions

View File

@ -1,31 +1,95 @@
import React from "react";
import { Card, Descriptions, Table } from "antd";
import React, { useState } from "react";
import { Tag, Button, Card, Table, Select, Input, Flex, Typography, Row, Col } from "antd";
const InternalReviewContent = () => (
<Card title="内部审核">
<Descriptions bordered column={2}>
<Descriptions.Item label="审核版本">V1.3</Descriptions.Item>
<Descriptions.Item label="内审人">王丽萍</Descriptions.Item>
<Descriptions.Item label="审核项">7</Descriptions.Item>
<Descriptions.Item label="待修改">2</Descriptions.Item>
</Descriptions>
<Table
dataSource={[
{ id: 1, dim: "评价依据", focus: "充分、有效", result: "符合", opinion: "补充地方标准有效版本", feedback: "已验证" },
{ id: 2, dim: "危险辨识", focus: "全面、无遗漏", result: "需修改", opinion: "补充液氨装卸泄漏场景", feedback: "待反馈" },
]}
columns={[
{ title: "审核维度", dataIndex: "dim" },
{ title: "审核重点", dataIndex: "focus" },
{ title: "结论", dataIndex: "result" },
{ title: "审核意见", dataIndex: "opinion" },
{ title: "修改反馈", dataIndex: "feedback" },
]}
rowKey="id"
pagination={false}
className="pf-table-mt"
/>
</Card>
);
const { TextArea } = Input;
const INITIAL_ROWS = [
{ dim: "评价依据", focus: "充分、有效", result: "符合", opinion: "补充地方标准有效版本", feedback: "已验证", feedbackType: "success" },
{ dim: "危险辨识", focus: "全面、无遗漏", result: "需修改", opinion: "补充液氨装卸泄漏场景", feedback: "待反馈", feedbackType: "warning" },
{ dim: "单元划分", focus: "科学合理", result: "符合", opinion: "划分合理", feedback: "—", feedbackType: "default" },
{ dim: "评价方法", focus: "适用、过程正确", result: "符合", opinion: "方法适用", feedback: "—", feedbackType: "default" },
{ dim: "对策措施", focus: "针对性、可操作性", result: "需修改", opinion: "细化报警联锁措施", feedback: "已验证", feedbackType: "success" },
{ dim: "评价结论", focus: "客观、正确", result: "符合", opinion: "结论客观", feedback: "—", feedbackType: "default" },
{ dim: "报告规范", focus: "格式、文字、数据逻辑", result: "符合", opinion: "统一图表编号", feedback: "—", feedbackType: "default" },
];
const InternalReviewContent = () => {
const [rows, setRows] = useState(INITIAL_ROWS);
const updateRow = (index, field, value) => {
const next = [...rows];
next[index] = { ...next[index], [field]: value };
setRows(next);
};
return (
<div>
<div className="pf-permission">
<Tag color="blue" className="pf-tag">内部审核人</Tag>
<span className="pf-desc">审核修改反馈验证闭环</span>
</div>
<Row gutter={16} style={{ marginBottom: 16 }}>
<Col span={6}><Card size="small"><Typography.Text type="secondary">审核版本</Typography.Text><div><strong>V1.3</strong></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">内审人</Typography.Text><div><strong></strong></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">审核项</Typography.Text><div><strong>7</strong></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">问题</Typography.Text><div><Typography.Text strong type="warning">2</Typography.Text></div></Card></Col>
</Row>
<Table
dataSource={rows}
columns={[
{ title: "审核维度", dataIndex: "dim", width: 100 },
{ title: "审核重点", dataIndex: "focus", width: 160 },
{
title: "结论", dataIndex: "result", width: 120,
render: (val, _, idx) => (
<Select value={val} size="small" style={{ width: 100 }} onChange={(v) => updateRow(idx, "result", v)}>
<Select.Option value="符合">符合</Select.Option>
<Select.Option value="需修改">需修改</Select.Option>
</Select>
),
},
{
title: "审核意见", dataIndex: "opinion", width: 180,
render: (val, _, idx) => (
<Input size="small" value={val} onChange={(e) => updateRow(idx, "opinion", e.target.value)} />
),
},
{
title: "修改反馈", dataIndex: "feedback", width: 120,
render: (val, record) => {
if (record.feedbackType === "success") return <Tag color="success">已验证</Tag>;
if (record.feedbackType === "warning") return <Tag color="warning">待反馈</Tag>;
return <span style={{ color: "#999" }}></span>;
},
},
]}
rowKey="dim"
pagination={false}
size="small"
/>
<div style={{ marginTop: 12 }}>
<Typography.Text strong>总体审核意见</Typography.Text>
<TextArea rows={2} defaultValue="完成危险辨识修改后通过内部审核。" style={{ marginTop: 4 }} />
</div>
<Flex justify="space-between" align="center" style={{ marginTop: 10 }}>
<Flex gap={8} align="center">
<Typography.Text type="secondary">内审人独立签字</Typography.Text>
<strong>王丽萍</strong>
<Button size="small">下发APP签字</Button>
</Flex>
</Flex>
<Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
<Button>保存意见</Button>
<Button type="primary">确认修改并提交技审</Button>
</Flex>
</div>
);
};
export default InternalReviewContent;

View File

@ -1,30 +1,227 @@
import React from "react";
import { Card, Steps, Descriptions } from "antd";
import React, { useState } from "react";
import { Tag, Button, Card, Table, Flex, Typography, Steps } from "antd";
import { CheckCircleFilled } from "@ant-design/icons";
const SurveyContent = () => (
<Card title="现场踏勘">
<Steps current={5} size="small">
<Steps.Step title="从业告知" description="已完成" />
<Steps.Step title="现场勘查" description="已完成" />
<Steps.Step title="整改通知" description="已完成" />
<Steps.Step title="企业整改" description="已完成" />
<Steps.Step title="整改复查" description="已完成" />
</Steps>
<Descriptions bordered column={2}>
<Descriptions.Item label="现场人员打卡" span={3}>
至少2名项目组专职人员完成有效签到签退
</Descriptions.Item>
<Descriptions.Item label="影像留痕" span={3}>
厂区入口生产装置区末次会议等关键影像已上传
</Descriptions.Item>
<Descriptions.Item label="检查表" span={3}>
现场检查表已上传
</Descriptions.Item>
<Descriptions.Item label="整改复查" span={3}>
整改通知和复查单双方已签字
</Descriptions.Item>
</Descriptions>
</Card>
const STAGES = [
{ key: "notice", index: "01", label: "从业告知",},
{ key: "inspection", index: "02", label: "现场勘查", },
{ key: "rectification", index: "03", label: "整改通知", },
{ key: "enterprise", index: "04", label: "企业整改",},
{ key: "review", index: "05", label: "整改复查", },
];
const NoticePanel = () => (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<div>
<span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>01</span>
<Typography.Text strong style={{ fontSize: 15 }}>安全评价检测检验机构从业告知书</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0 }}>支持在线填写后打印阶段试行期间以机构盖章版上传归档作为完成依据</Typography.Paragraph>
</div>
<Tag color="success">盖章件已上传</Tag>
</div>
<div style={{ background: "#f0f5ff", padding: "8px 12px", borderRadius: 6, marginBottom: 16, display: "flex", gap: 16, fontSize: 13 }}>
<strong>办理方式</strong>
<span>在线填写用于生成打印标准告知书</span>
<span>打印盖章后上传扫描件或清晰照片</span>
<Tag color="blue">完成节点必须留存盖章件</Tag>
</div>
<Card type="inner" size="small" title="已上传盖章件" extra={<Tag color="success">已上传</Tag>} style={{ marginBottom: 12 }}>
<Flex justify="space-between" align="center">
<Flex gap={8} align="center">
<span style={{ background: "#1677ff", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>PDF</span>
<div>
<Typography.Text strong>安全评价检测检验机构从业告知书盖章版.pdf</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>2.4MB · 2026-07-07 10:28 上传</Typography.Paragraph>
</div>
</Flex>
<Flex gap={8}>
<Button size="small">查看</Button>
<Button size="small">重新上传</Button>
</Flex>
</Flex>
</Card>
<div style={{ display: "flex", gap: 16, fontSize: 12 }}>
<div><CheckCircleFilled style={{ color: "#52c41a" }} /> 机构公章清晰</div>
<div><CheckCircleFilled style={{ color: "#52c41a" }} /> 填写内容完整</div>
<div><CheckCircleFilled style={{ color: "#52c41a" }} /> 归档版本一致</div>
</div>
<Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
<Button>打印告知书</Button>
<Button type="primary">确认从业告知完成</Button>
</Flex>
</div>
);
const InspectionPanel = () => (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<div>
<span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>02</span>
<Typography.Text strong style={{ fontSize: 15 }}>现场人员打卡与检查表</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0 }}>主要核验项目组人员是否真实到场留存APP人脸GPS签到签退现场照片及本人签字记录</Typography.Paragraph>
</div>
<Tag color="success">打卡与检查表完整</Tag>
</div>
<Card type="inner" size="small" title="人员现场打卡情况" style={{ marginBottom: 12 }}>
<Table
dataSource={[
{ name: "张建国", role: "项目负责人", face: "通过", gps: "正常", signIn: "08:52", signOut: "16:45", duration: "7h53m", photos: 12, sign: "已签字" },
{ name: "李明华", role: "报告编制人", face: "通过", gps: "正常", signIn: "08:55", signOut: "16:43", duration: "7h48m", photos: 9, sign: "已签字" },
{ name: "赵东升", role: "专业组员", face: "通过", gps: "正常", signIn: "08:57", signOut: "16:40", duration: "7h43m", photos: 7, sign: "已签字" },
]}
columns={[
{ title: "人员", dataIndex: "name" },
{ title: "项目角色", dataIndex: "role" },
{ title: "人脸识别", dataIndex: "face", render: (v) => <Tag color="success">{v}</Tag> },
{ title: "GPS定位", dataIndex: "gps", render: (v) => <Tag color="success">{v}</Tag> },
{ title: "签到时间", dataIndex: "signIn" },
{ title: "签退时间", dataIndex: "signOut" },
{ title: "在场时长", dataIndex: "duration" },
{ title: "现场照片", dataIndex: "photos", render: (v) => <Button type="link" size="small">{v}</Button> },
{ title: "本人签字", dataIndex: "sign", render: (v) => <Tag color="success">{v}</Tag> },
]}
rowKey="name"
pagination={false}
size="small"
/>
<div style={{ display: "flex", gap: 24, marginTop: 8, fontSize: 12 }}>
<span>打卡企业地址重庆市渝北区化工园区东路18号</span>
<span>允许打卡范围企业地址周边500米</span>
<span>签到日期2026-07-15</span>
</div>
</Card>
<Card type="inner" size="small" title="现场检查表">
<Flex justify="space-between" align="center">
<Flex gap={8} align="center">
<span style={{ background: "#52c41a", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>XLSX</span>
<div>
<Typography.Text strong>华安化工园区现场安全检查表.xlsx</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>1.8MB · 李明华 · 2026-07-15 17:06 上传</Typography.Paragraph>
</div>
</Flex>
<Flex gap={8} align="center">
<Tag color="success">已归档</Tag>
<Button size="small">查看</Button>
<Button size="small">删除</Button>
</Flex>
</Flex>
</Card>
<Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
<Button>刷新打卡状态</Button>
<Button>导出打卡记录</Button>
<Button type="primary">确认现场勘查完成</Button>
</Flex>
</div>
);
const SimpleUploadPanel = ({ index, title, desc, icon, fileType, fileName, fileSize, uploader, date }) => (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<div>
<span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>{index}</span>
<Typography.Text strong style={{ fontSize: 15 }}>{title}</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0 }}>{desc}</Typography.Paragraph>
</div>
<Tag color="success">已完成</Tag>
</div>
<Flex gap={16}>
<Card style={{ flex: 1, textAlign: "center" }}>
<div style={{ fontSize: 32, marginBottom: 8 }}>{icon}</div>
<Typography.Text strong>上传{title}</Typography.Text>
<Typography.Paragraph type="secondary" style={{ fontSize: 12 }}>支持 PDFWordJPGPNG</Typography.Paragraph>
<Button type="primary">选择文件</Button>
<div style={{ marginTop: 8, fontSize: 12, color: "#999" }}>上传后本节点自动标记完成</div>
</Card>
<Card style={{ flex: 1 }}>
<Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
<Typography.Text strong>已归档文件</Typography.Text>
<Tag color="success">已上传</Tag>
</Flex>
<Flex gap={8} align="center">
<span style={{ background: "#1677ff", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>{fileType}</span>
<div>
<Typography.Text strong>{fileName}</Typography.Text>
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>{fileSize} · {uploader} · {date} 上传</Typography.Paragraph>
</div>
</Flex>
<Flex justify="flex-end" gap={8} style={{ marginTop: 8 }}>
<Button size="small">查看</Button>
<Button size="small">替换修改</Button>
</Flex>
</Card>
</Flex>
<Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
<Button>重新上传</Button>
<Button type="primary">确认完成</Button>
</Flex>
</div>
);
const SurveyContent = () => {
const [activeStage, setActiveStage] = useState("notice");
return (
<div>
<div className="pf-permission">
<Tag color="blue" className="pf-tag">项目组专职人员 2</Tag>
<span className="pf-desc">从业告知现场勘查整改与复查全过程留痕</span>
</div>
<Steps
current={STAGES.findIndex((s) => s.key === activeStage)}
onChange={(idx) => setActiveStage(STAGES[idx].key)}
style={{ marginBottom: 16 }}
items={STAGES.map((s) => ({
title: s.label,
status: "process",
}))}
/>
{activeStage === "notice" && <NoticePanel />}
{activeStage === "inspection" && <InspectionPanel />}
{activeStage === "rectification" && (
<SimpleUploadPanel
index="03" title="整改通知单上传"
desc="本节点不在线编制整改通知,只归档机构已出具的《整改通知单》文件;上传成功即完成,后续可替换修改。"
icon="📄" fileType="PDF"
fileName="华安化工园区建设项目整改通知单.pdf"
fileSize="2.1MB" uploader="张建国" date="2026-07-15 17:20"
/>
)}
{activeStage === "enterprise" && (
<SimpleUploadPanel
index="04" title="企业整改报告上传"
desc="企业线下提交《整改报告》后,由机构人员上传归档;本系统不提供企业在线提交和逐项整改流程。"
icon="📄" fileType="PDF"
fileName="华安化工园区企业整改报告.pdf"
fileSize="3.5MB" uploader="李明华" date="2026-07-16 09:15"
/>
)}
{activeStage === "review" && (
<SimpleUploadPanel
index="05" title="整改复查单上传"
desc="机构人员现场复查后,将经双方签字确认的《整改复查单》上传归档;上传后本节点自动标记完成。"
icon="📄" fileType="PDF"
fileName="华安化工园区整改复查单(双方签字).pdf"
fileSize="1.6MB" uploader="张建国" date="2026-07-18 11:30"
/>
)}
</div>
);
};
export default SurveyContent;

View File

@ -1,31 +1,87 @@
import React from "react";
import { Card, Descriptions, Table } from "antd";
import React, { useState } from "react";
import { Tag, Button, Card, Row, Col, Table, Select, Input, Flex, Typography } from "antd";
const TechnicalReviewContent = () => (
<Card title="技术审核">
<Descriptions bordered column={2}>
<Descriptions.Item label="审核版本">V1.4</Descriptions.Item>
<Descriptions.Item label="技术负责人">陈志强</Descriptions.Item>
<Descriptions.Item label="专业匹配">化工安全</Descriptions.Item>
<Descriptions.Item label="备案校验">有效</Descriptions.Item>
</Descriptions>
<Table
dataSource={[
{ id: 1, dim: "资料有效性", focus: "现场资料和检测报告齐全有效", result: "符合", opinion: "资料有效" },
{ id: 2, dim: "危险辨识", focus: "辨识充分、规律准确", result: "符合", opinion: "辨识充分" },
{ id: 3, dim: "评价方法", focus: "选型合理、计算正确", result: "需修改", opinion: "补充事故模拟参数来源" },
]}
columns={[
{ title: "审核维度", dataIndex: "dim" },
{ title: "技术审核重点", dataIndex: "focus" },
{ title: "结论", dataIndex: "result" },
{ title: "技术意见", dataIndex: "opinion" },
]}
rowKey="id"
pagination={false}
className="pf-table-mt"
/>
</Card>
);
const { TextArea } = Input;
const INITIAL_ROWS = [
{ dim: "资料有效性", focus: "现场资料和检测报告齐全有效", result: "符合", opinion: "资料有效" },
{ dim: "危险辨识", focus: "辨识充分、规律准确", result: "符合", opinion: "辨识充分" },
{ dim: "评价方法", focus: "选型合理、计算正确", result: "需修改", opinion: "补充事故模拟参数来源" },
{ dim: "对策措施", focus: "针对性和可行性", result: "符合", opinion: "措施可行" },
{ dim: "评价结论", focus: "结论正确、反映风险", result: "符合", opinion: "结论正确" },
];
const TechnicalReviewContent = () => {
const [rows, setRows] = useState(INITIAL_ROWS);
const updateRow = (index, field, value) => {
const next = [...rows];
next[index] = { ...next[index], [field]: value };
setRows(next);
};
return (
<div>
<div className="pf-permission">
<Tag color="blue" className="pf-tag">技术负责人</Tag>
<span className="pf-desc">技术负责人独立审核技术路线和结论</span>
</div>
<Row gutter={16} style={{ marginBottom: 16 }}>
<Col span={6}><Card size="small"><Typography.Text type="secondary">审核版本</Typography.Text><div><strong>V1.4</strong></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">技术负责人</Typography.Text><div><strong></strong></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">专业匹配</Typography.Text><div><Typography.Text strong type="success"></Typography.Text></div></Card></Col>
<Col span={6}><Card size="small"><Typography.Text type="secondary">备案校验</Typography.Text><div><Typography.Text strong type="success"></Typography.Text></div></Card></Col>
</Row>
<Table
dataSource={rows}
columns={[
{ title: "审核维度", dataIndex: "dim", width: 120 },
{ title: "技术审核重点", dataIndex: "focus", width: 200 },
{
title: "结论", dataIndex: "result", width: 120,
render: (val, _, idx) => (
<Select value={val} size="small" style={{ width: 100 }} onChange={(v) => updateRow(idx, "result", v)}>
<Select.Option value="符合">符合</Select.Option>
<Select.Option value="需修改">需修改</Select.Option>
</Select>
),
},
{
title: "技术意见", dataIndex: "opinion",
render: (val, _, idx) => (
<Input size="small" value={val} onChange={(e) => updateRow(idx, "opinion", e.target.value)} />
),
},
]}
rowKey="dim"
pagination={false}
size="small"
/>
<div style={{ marginTop: 12 }}>
<Typography.Text strong>技术审核意见</Typography.Text>
<TextArea rows={2} defaultValue="补充定量评价参数来源后通过技术审核。" style={{ marginTop: 4 }} />
</div>
<Flex justify="space-between" align="center" style={{ marginTop: 10 }}>
<Flex gap={8} align="center">
<Typography.Text type="secondary">技术负责人签字</Typography.Text>
<strong>陈志强</strong>
<Button size="small">下发APP签字</Button>
</Flex>
</Flex>
<Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
<Button>保存意见</Button>
<Button>查看修改反馈</Button>
<Button type="primary">确认技审并提交过程控制</Button>
</Flex>
</div>
);
};
export default TechnicalReviewContent;