危险作业地图标点和详情弹窗

2026-07-22 10:38:03 +08:00 · 2026-07-22 10:38:03 +08:00 · 8b819fa652
parent 1ce00bc82c
commit 8b819fa652
19 changed files with 1707 additions and 33 deletions
--- a/src/api/biMark/index.js
+++ b/src/api/biMark/index.js
@ -28,3 +28,7 @@ export const getPumpRoomScreenList = declareRequest(
  "biFullLoading",
  "Post > @/fireResource/pumpRoom/screenList",
 );
+export const getEightWorkInfoScreenWorkList = declareRequest(
+  "biFullLoading",
+  "Post > @/eightwork/eightworkInfo/screenWorkPage",
+);
--- a/src/api/biMarkInfo/index.js
+++ b/src/api/biMarkInfo/index.js
@ -24,3 +24,15 @@ export const sensorDeviceInfo = declareRequest(
  "biFullLoading",
  `Get > /iotalarm/sensorDevice/{id}`,
 );
+export const eightWorkInfo = declareRequest(
+  "biFullLoading",
+  `Get > /eightwork/eightworkInfo/{id}`,
+);
+export const eightWorkSupplementaryInfo = declareRequest(
+  "biFullLoading",
+  `Post > @/eightwork/eightworkSupplementaryInfo/list`,
+);
+export const eightWorkMeasuresLogs = declareRequest(
+  "biFullLoading",
+  `Get > /eightwork/measuresLogs/listAll/{workId}`,
+);
--- a/src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js
+++ b/src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js
@ -28,51 +28,67 @@ export const branchOfficeUtilsList = [
    list: [
      {
        label: "动火作业",
-        type: "hotWork",
+        type: "hot_work",
        check: false,
        markIcon: pointIco9,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "受限空间作业",
-        type: "confinedSpace",
+        type: "confinedspace_work",
        check: false,
        markIcon: pointIco10,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "临时用电作业",
-        type: "electricity",
+        type: "electricity_work",
        check: false,
        markIcon: pointIco11,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "高处作业",
-        type: "highWork",
+        type: "high_work",
        check: false,
        markIcon: pointIco12,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "断路作业",
-        type: "cutRoad",
+        type: "cutroad_work",
        check: false,
        markIcon: pointIco13,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "动土作业",
-        type: "breakGround",
+        type: "breakground_work",
        check: false,
        markIcon: pointIco14,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "吊装作业",
-        type: "hoisting",
+        type: "hoisting_work",
        check: false,
        markIcon: pointIco15,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "盲板抽堵作业",
-        type: "blindBoard",
+        type: "blindboard_work",
        check: false,
        markIcon: pointIco16,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "摄像头",
--- a/src/pages/Container/Map/components/BottomUtils/index.js
+++ b/src/pages/Container/Map/components/BottomUtils/index.js
@ -13,6 +13,17 @@ import { portUtilsList } from "./portUtilsList";
 import { usePortUtilsAnimation } from "./usePortUtilsAnimation";
 import "./index.less";

+const dangerWorkTypes = [
+  "hot_work",
+  "confinedspace_work",
+  "electricity_work",
+  "high_work",
+  "cutroad_work",
+  "breakground_work",
+  "hoisting_work",
+  "blindboard_work",
+];
+
 const bottomUtilsAnimation = {
  initial: { y: 100, opacity: 0 },
  animate: { y: 0, opacity: 1, transition: { duration: 0.5, ease: "easeOut" } },
@ -107,7 +118,17 @@ function BottomUtils(props) {
    const check = !list[index].list[index1].check;
    if (check) {
      if (item1.request) {
-        const { data = [] } = await props[item1.request]({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 });
+        const requestParams = { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 };
+        if (dangerWorkTypes.includes(item1.type)) {
+          requestParams.workType = item1.type;
+        }
+        const { data = [] } = await props[item1.request](requestParams);
+        if (dangerWorkTypes.includes(item1.type)) {
+          for (let i = 0; i < data.length; i++) {
+            data[i].latitude = data[i].info.latitude;
+            data[i].longitude = data[i].info.longitude;
+          }
+        }
        mapMethods.current.addMarkPoint(data, {
          markType: item1.type,
          markIcon: item1.markIcon,
--- a/src/pages/Container/Map/components/BottomUtils/portUtilsList.js
+++ b/src/pages/Container/Map/components/BottomUtils/portUtilsList.js
@ -216,67 +216,83 @@ export const portUtilsList = [
    list: [
      {
        label: "动火作业",
-        type: "hotWork",
+        type: "hot_work",
        check: false,
        img: ico9,
        checkImg: ico9On,
        markIcon: pointIco9,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "受限空间作业",
-        type: "confinedSpace",
+        type: "confinedspace_work",
        check: false,
        img: ico10,
        checkImg: ico10On,
        markIcon: pointIco10,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "临时用电作业",
-        type: "electricity",
+        type: "electricity_work",
        check: false,
        img: ico11,
        checkImg: ico11On,
        markIcon: pointIco11,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "高处作业",
-        type: "highWork",
+        type: "high_work",
        check: false,
        img: ico12,
        checkImg: ico12On,
        markIcon: pointIco12,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "断路作业",
-        type: "cutRoad",
+        type: "cutroad_work",
        check: false,
        img: ico13,
        checkImg: ico13On,
        markIcon: pointIco13,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "动土作业",
-        type: "breakGround",
+        type: "breakground_work",
        check: false,
        img: ico14,
        checkImg: ico14On,
        markIcon: pointIco14,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "吊装作业",
-        type: "hoisting",
+        type: "hoisting_work",
        check: false,
        img: ico15,
        checkImg: ico15On,
        markIcon: pointIco15,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "盲板抽堵作业",
-        type: "blindBoard",
+        type: "blindboard_work",
        check: false,
        img: ico16,
        checkImg: ico16On,
        markIcon: pointIco16,
+        request: "getEightWorkInfoScreenWorkList",
+        titleKey: "checkNo",
      },
      {
        label: "摄像头",
--- a/src/pages/Container/Map/components/Content/modal/BlindBoardWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/BlindBoardWork/index.js
@ -0,0 +1,178 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const blindboardWorkParams = Array.isArray(info?.info?.blindboardWorkParams)
+    && info.info.blindboardWorkParams.length > 0
+    ? info.info.blindboardWorkParams
+    : [{}];
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={7} style={{ border: "none" }}>
+              <Divider orientation="left">盲板抽堵安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={7} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td colSpan={3}>{info?.info?.applyUnit}</td>
+            <td className="title">作业单位</td>
+            <td colSpan={2}>{info?.info?.step_21?.actUserDepartmentName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业人</td>
+            <td colSpan={3}>{info?.info?.workUserName}</td>
+            <td className="title">作业类型</td>
+            <td colSpan={2}>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title center" rowSpan={2}>设备管道名称</td>
+            <td className="title center" colSpan={3}>管道参数</td>
+            <td className="title center" colSpan={3}>盲板参数</td>
+          </tr>
+          <tr>
+            <td className="title center">介质</td>
+            <td className="title center">温度</td>
+            <td className="title center">压力</td>
+            <td className="title center">材质</td>
+            <td className="title center">规格</td>
+            <td className="title center">编号</td>
+          </tr>
+          {blindboardWorkParams.map((item, index) => (
+            <tr key={item.id || index}>
+              {index === 0 && (
+                <>
+                  <td className="center" rowSpan={blindboardWorkParams.length}>{info?.info?.devicePipelineName}</td>
+                  <td className="center" rowSpan={blindboardWorkParams.length}>{info?.info?.mediumName}</td>
+                  <td className="center" rowSpan={blindboardWorkParams.length}>{info?.info?.temperature}</td>
+                  <td className="center" rowSpan={blindboardWorkParams.length}>{info?.info?.pressure}</td>
+                </>
+              )}
+              <td className="center">{item?.matertal}</td>
+              <td className="center">{item?.specification}</td>
+              <td className="center">{item?.number}</td>
+            </tr>
+          ))}
+          <tr>
+            <td className="title">作业类别</td>
+            <td colSpan={6}>
+              {
+                { blindboardWorkType001: "抽盲板", blindboardWorkType002: "堵盲板" }[info?.info?.blindboardWorkType]
+              }
+            </td>
+          </tr>
+          <tr>
+            <td className="title">盲板抽堵位置图</td>
+            <td colSpan={3}>
+              {info?.info?.workScopeAndMethodImage
+                && <Image src={getFileUrl() + info?.info?.workScopeAndMethodImage} width={50} height={50} />}
+            </td>
+            <td className="title">作业单位</td>
+            <td colSpan={2}>{info?.info?.step_21?.actUserDepartmentName}</td>
+          </tr>
+          <tr>
+            <td className="title">监护人</td>
+            <td colSpan={3}>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+            <td className="title">作业负责人</td>
+            <td colSpan={2}>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={6}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={6}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">实际作业开始时间</td>
+            <td colSpan={6}>{info?.info?.workStartTime}</td>
+          </tr>
+          <SafetyMeasures colSpan={7} workId={props.workId} />
+          <DisclaimerSign
+            firstColSpan={4}
+            lastColSpan={3}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业负责人意见"
+            colSpan={7}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="所在单位意见"
+            colSpan={7}
+            remarks={info?.info?.step_22?.remarks}
+            signPath={info?.info?.step_22?.signPath}
+            signTime={info?.info?.step_22?.status !== 0 && info?.info?.step_22?.signTime}
+          />
+          <OpinionSign
+            title="审核部门意见"
+            colSpan={7}
+            remarks={info?.info?.step_23?.remarks}
+            signPath={info?.info?.step_23?.signPath}
+            signTime={info?.info?.step_23?.status !== 0 && info?.info?.step_23?.signTime}
+          />
+          <OpinionSign
+            title="审批部门意见"
+            colSpan={7}
+            remarks={info?.info?.step_24?.remarks}
+            signPath={info?.info?.step_24?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_24?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={7}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/BreakGroundWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/BreakGroundWork/index.js
@ -0,0 +1,147 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">动土安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">作业地点</td>
+            <td>{info?.info?.workLocation}</td>
+            <td className="title">作业类型</td>
+            <td>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业内容</td>
+            <td>{info?.info?.workContent}</td>
+            <td className="title">作业级别</td>
+            <td>{info?.info?.workLevelName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业内容、范围、方式</td>
+            <td>{info?.info?.workScopeAndMethod}</td>
+            <td className="title">作业内容、范围、方式简图</td>
+            <td>
+              {info?.info?.workScopeAndMethodImage
+                && <Image src={getFileUrl() + info?.info?.workScopeAndMethodImage} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业单位</td>
+            <td>{info?.info?.step_21?.actUserDepartmentName}</td>
+            <td className="title">监护人</td>
+            <td>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业负责人</td>
+            <td colSpan={3}>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={3}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">实际作业开始时间</td>
+            <td colSpan={3}>{info?.info?.workStartTime}</td>
+          </tr>
+          <SafetyMeasures colSpan={4} workId={props.workId} />
+          <DisclaimerSign
+            colSpan={2}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业负责人意见"
+            colSpan={4}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="所在单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_22?.remarks}
+            signPath={info?.info?.step_22?.signPath}
+            signTime={info?.info?.step_22?.status !== 0 && info?.info?.step_22?.signTime}
+          />
+          <OpinionSign
+            title="有关部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_26?.remarks}
+            signPath={info?.info?.step_26?.signPath}
+            signTime={info?.info?.step_26?.status !== 0 && info?.info?.step_26?.signTime}
+          />
+          <OpinionSign
+            title="审批部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_24?.remarks}
+            signPath={info?.info?.step_24?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_24?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={4}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/ConfinedSpaceWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/ConfinedSpaceWork/index.js
@ -0,0 +1,209 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+  const [safetyMeasures, setSafetyMeasures] = useState([]);
+  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([]);
+  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+    const { data: supplementaryInfo } = await props.eightWorkSupplementaryInfo({
+      eqWorkId: props.workId,
+      pageSize: 999,
+      pageIndex: 1,
+    });
+    setGasMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
+    const { data: measuresLogs } = await props.eightworkMeasuresLogs({ workId: props.workId });
+    setSafetyMeasures(measuresLogs.filter(item => item.type === 1));
+    setOtherSafetyMeasures(measuresLogs.filter(item => item.type === 2));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={6} style={{ border: "none" }}>
+              <Divider orientation="left">有限空间作业许可证</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={6} style={{ border: "none" }} className="right">
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td colSpan={2}>{info?.info?.applyUnit}</td>
+            <td className="title">作业单位</td>
+            <td colSpan={2}>{info?.info?.workDepartmentName}</td>
+          </tr>
+          <tr>
+            <td className="title">有限空间名称及编号</td>
+            <td colSpan={2}>{info?.info?.limitedSpaceNameAndCode}</td>
+            <td className="title">作业内容</td>
+            <td colSpan={2}>{info?.info?.workContent}</td>
+          </tr>
+          <tr>
+            <td className="title">主要介质</td>
+            <td colSpan={2}>{info?.info?.chooseLimitedSpace?.mediumInfo}</td>
+            <td className="title" rowSpan={2}>应急装备</td>
+            <td rowSpan={2} colSpan={2}>{info?.info?.emergencyEquipment}</td>
+          </tr>
+          <tr>
+            <td className="title">主要危险因素</td>
+            <td colSpan={2}>{info?.info?.chooseLimitedSpace?.hazards}</td>
+          </tr>
+          <tr>
+            <td className="title">隔绝安全措施</td>
+            <td colSpan={5}>{info?.info?.isNeedWork === 1 ? "是" : "否"}</td>
+          </tr>
+          <tr>
+            <td colSpan={6}>
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 50px" }}>
+                <div>
+                  <span style={{ padding: "0 10px" }}>作业负责人：</span>
+                  <span>{info?.info?.workChargeUserName}</span>
+                </div>
+                <div>
+                  <span style={{ padding: "0 10px" }}>监护人：</span>
+                  <span>{info?.info?.workGuardianUserName}</span>
+                </div>
+                <div>
+                  <span style={{ padding: "0 10px" }}>作业人：</span>
+                  <span>{info?.info?.workUserName}</span>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={6} style={{ border: "none", padding: 0 }}>
+              <table>
+                <tbody>
+                  <tr>
+                    <td className="center title" style={{ width: 80 }}>序号</td>
+                    <td className="center title" style={{ width: "auto" }}>主要安全措施</td>
+                    <td className="center title" style={{ width: 100 }}>是否涉及</td>
+                    <td className="center title" style={{ width: 100 }}>确认人</td>
+                  </tr>
+                  {safetyMeasures.map((item, index) => (
+                    <tr key={index}>
+                      <td className="center">{index + 1}</td>
+                      <td>{item.content}</td>
+                      <td className="center">符合</td>
+                      <td className="center">
+                        {item.signPath && <Image src={getFileUrl() + item.signPath} width={50} height={50} />}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={6} style={{ border: "none", padding: 0 }}>
+              <table>
+                <tbody>
+                  <tr>
+                    <td className="center title" style={{ width: 80 }}>序号</td>
+                    <td className="center title" style={{ width: "auto" }}>其它安全措施</td>
+                    <td className="center title" style={{ width: 100 }}>确认人</td>
+                  </tr>
+                  {otherSafetyMeasures.map((item, index) => (
+                    <tr key={index}>
+                      <td className="center">{index + 1}</td>
+                      <td>{item.content}</td>
+                      <td className="center">
+                        {item.signPath
+                          ? <Image src={getFileUrl() + item.signPath} width={50} height={50} />
+                          : item.createName}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+          {gasMonitoringRecord.length > 0 && (
+            <tr>
+              <td colSpan={6} style={{ border: "none", padding: 0 }}>
+                <table>
+                  <tbody>
+                    <tr>
+                      <td className="center title">作业前分析项目</td>
+                      <td className="center title">有毒有害物质含量</td>
+                      <td className="center title">可燃气含量</td>
+                      <td className="center title">氧气量</td>
+                      <td className="center title">取样时间</td>
+                      <td className="center title">取样位置</td>
+                      <td className="center title">取样人</td>
+                    </tr>
+                    {gasMonitoringRecord.map((item, index) => (
+                      <tr key={index}>
+                        {index === 0 && <td className="center title" rowSpan={gasMonitoringRecord.length}>作业前数据</td>}
+                        <td className="center">{item?.details?.toxicSubstanceContent}</td>
+                        <td className="center">{item?.details?.combustibleGasContent}</td>
+                        <td className="center">{item?.details?.oxygeAmount}</td>
+                        <td className="center">{item?.details?.samplingTime}</td>
+                        <td className="center">{item?.details?.samplingLocation}</td>
+                        <td className="center">
+                          {item?.details?.signImagePath
+                            && <Image src={getFileUrl() + item?.details?.signImagePath} width={50} height={50} />}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          )}
+          <tr>
+            <td className="title">作业单位负责人意见</td>
+            <td className="right" style={{ width: 200 }}>
+              <div>
+                {info?.info?.step_14?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_14?.signPath} width={50} height={50} />}
+              </div>
+              <div>{ info?.info?.step_14?.status !== 0 && info?.info?.step_14?.signTime}</div>
+              {/* <div className="remarks">{info?.info?.step_14?.remarks}</div> */}
+            </td>
+            <td className="title">管理单位发包部门意见</td>
+            <td className="right" style={{ width: 200 }}>
+              <div>
+                {info?.info?.step_15?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_15?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_15?.status !== 0 && info?.info?.step_15?.signTime}</div>
+              {/* <div className="remarks">{info?.info?.step_15?.remarks}</div> */}
+            </td>
+            <td className="title">管理单位安监部门意见</td>
+            <td className="right" style={{ width: 200 }}>
+              <div>
+                {info?.info?.step_16?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_16?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_16?.status !== 0 && info?.info?.step_16?.signTime}</div>
+              {/* <div className="remarks">{info?.info?.step_16?.remarks}</div> */}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/CutRoadWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/CutRoadWork/index.js
@ -0,0 +1,147 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">断路安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">作业地点/断路地点</td>
+            <td>{info?.info?.workLocation}</td>
+            <td className="title">作业类型</td>
+            <td>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title">涉及相关单位（部门）</td>
+            <td>{info?.info?.relatedUnit}</td>
+            <td className="title">作业级别</td>
+            <td>{info?.info?.workLevelName}</td>
+          </tr>
+          <tr>
+            <td className="title">断路原因</td>
+            <td>{info?.info?.breakReason}</td>
+            <td className="title">断路地段示意图</td>
+            <td>
+              {info?.info?.workScopeAndMethodImage
+                && <Image src={getFileUrl() + info?.info?.workScopeAndMethodImage} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">断路地段示意图相关说明</td>
+            <td>{info?.info?.workScopeAndMethod}</td>
+            <td className="title">监护人</td>
+            <td>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业负责人</td>
+            <td colSpan={3}>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={3}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">实际作业开始时间</td>
+            <td colSpan={3}>{info?.info?.workStartTime}</td>
+          </tr>
+          <SafetyMeasures workId={props.workId} colSpan={4} />
+          <DisclaimerSign
+            colSpan={2}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业负责人意见"
+            colSpan={4}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="所在单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_22?.remarks}
+            signPath={info?.info?.step_22?.signPath}
+            signTime={info?.info?.step_22?.status !== 0 && info?.info?.step_22?.signTime}
+          />
+          <OpinionSign
+            title="消防、安全管理部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_27?.remarks}
+            signPath={info?.info?.step_27?.signPath}
+            signTime={info?.info?.step_27?.status !== 0 && info?.info?.step_27?.signTime}
+          />
+          <OpinionSign
+            title="审批部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_24?.remarks}
+            signPath={info?.info?.step_24?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_24?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={4}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/ElectricityWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/ElectricityWork/index.js
@ -0,0 +1,178 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { Fragment, useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+    const { data: supplementaryInfo } = await props.eightWorkSupplementaryInfo({
+      eqWorkId: props.workId,
+      pageSize: 999,
+      pageIndex: 1,
+    });
+    setGasMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">临时用电安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">作业地点</td>
+            <td>{info?.info?.workLocation}</td>
+            <td className="title">作业类型</td>
+            <td>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业人电工证号</td>
+            <td>{info?.info?.electricNumber}</td>
+            <td className="title">作业级别</td>
+            <td>{info?.info?.workLevelName}</td>
+          </tr>
+          <tr>
+            <td className="title">电源接入点及许可用电功率</td>
+            <td>{info?.info?.pointPower}</td>
+            <td className="title">用电设备名称及额定功率</td>
+            <td>{info?.info?.equipmentNamePower}</td>
+          </tr>
+          <tr>
+            <td className="title">工作电压</td>
+            <td>{info?.info?.workVoltage}</td>
+            <td className="title">用电人</td>
+            <td>{info?.info?.electricUser}</td>
+          </tr>
+          <tr>
+            <td className="title">负责人电工号</td>
+            <td>{info?.info?.electricUserNo}</td>
+            <td className="title">监护人</td>
+            <td>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业人</td>
+            <td>{info?.info?.workUserName}</td>
+            <td className="title">作业负责人</td>
+            <td colSpan={3}>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={3}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">实际作业开始时间</td>
+            <td colSpan={3}>{info?.info?.workStartTime}</td>
+          </tr>
+          <tr>
+            <td className="title center" colSpan={4}>可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）</td>
+          </tr>
+          {
+            gasMonitoringRecord.length > 0
+              ? gasMonitoringRecord.map(item => (
+                  <Fragment key={item.id}>
+                    <tr>
+                      <td className="title">分析时间</td>
+                      <td>{item?.details?.samplingTime}</td>
+                      <td className="title">分析点</td>
+                      <td>{item?.details?.samplingLocation}</td>
+                    </tr>
+                    <tr>
+                      <td className="title">可燃气体检测结果</td>
+                      <td>{item?.details?.combustibleGasContent}</td>
+                      <td className="title">分析人</td>
+                      <td>
+                        {item?.details?.signImagePath
+                          && <Image src={getFileUrl() + item?.details?.signImagePath} width={50} height={50} />}
+                      </td>
+                    </tr>
+                  </Fragment>
+                ))
+              : <tr><td colSpan={4} className="center">暂无数据</td></tr>
+          }
+          <SafetyMeasures workId={props.workId} colSpan={4} />
+          <DisclaimerSign
+            colSpan={2}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业负责人意见"
+            colSpan={4}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="用电单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_28?.remarks}
+            signPath={info?.info?.step_28?.signPath}
+            signTime={info?.info?.step_28?.status !== 0 && info?.info?.step_28?.signTime}
+          />
+          <OpinionSign
+            title="配送电单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_29?.remarks}
+            signPath={info?.info?.step_29?.signPath}
+            signTime={info?.info?.step_29?.status !== 0 && info?.info?.step_29?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={4}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/HighWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HighWork/index.js
@ -0,0 +1,144 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">高处安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">作业地点</td>
+            <td>{info?.info?.workLocation}</td>
+            <td className="title">作业内容</td>
+            <td>{info?.info?.workContent}</td>
+          </tr>
+          <tr>
+            <td rowSpan={2} className="title">作业高度（米）</td>
+            <td rowSpan={2}>{info?.info?.workHeight}</td>
+            <td className="title">作业类型</td>
+            <td>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业级别</td>
+            <td>{info?.info?.workLevelName}</td>
+          </tr>
+          <tr>
+            <td className="title">作业单位</td>
+            <td>{info?.info?.step_21?.actUserDepartmentName}</td>
+            <td className="title">监护人</td>
+            <td>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业人</td>
+            <td>{info?.info?.workUserName}</td>
+            <td className="title">作业负责人</td>
+            <td>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={3}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">作业实施时间</td>
+            <td colSpan={3}>{`${info?.info?.workStartTime} 至 ${info?.info?.workEndTime} 止`}</td>
+          </tr>
+          <SafetyMeasures workId={props.workId} colSpan={4} />
+          <DisclaimerSign
+            colSpan={2}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业负责人意见"
+            colSpan={4}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="所在单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_22?.remarks}
+            signPath={info?.info?.step_22?.signPath}
+            signTime={info?.info?.step_22?.status !== 0 && info?.info?.step_22?.signTime}
+          />
+          <OpinionSign
+            title="审核部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_23?.remarks}
+            signPath={info?.info?.step_23?.signPath}
+            signTime={info?.info?.step_23?.status !== 0 && info?.info?.step_23?.signTime}
+          />
+          <OpinionSign
+            title="审批部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_24?.remarks}
+            signPath={info?.info?.step_24?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_24?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={4}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/HoistingWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HoistingWork/index.js
@ -0,0 +1,156 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
+import OpinionSign from "../eightWordPubilc/OpinionSign";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">吊装安全作业票</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">吊装地点</td>
+            <td>{info?.info?.workLocation}</td>
+            <td className="title">作业类型</td>
+            <td>{info?.info?.operationTypeName}</td>
+          </tr>
+          <tr>
+            <td className="title">吊具名称</td>
+            <td>{info?.info?.hoistName}</td>
+            <td className="title">作业级别</td>
+            <td>{info?.info?.workLevelName}</td>
+          </tr>
+          <tr>
+            <td className="title">吊装作业人</td>
+            <td>{info?.info?.workUserName}</td>
+            <td className="title">司索人</td>
+            <td>{info?.info?.pullUserName}</td>
+          </tr>
+          <tr>
+            <td className="title">指挥人</td>
+            <td>{info?.info?.commandUserName}</td>
+            <td rowSpan={2} className="title">吊物内容</td>
+            <td rowSpan={2}>{info?.info?.workContent}</td>
+          </tr>
+          <tr>
+            <td className="title">吊物质量（吨）</td>
+            <td>{info?.info?.hoistWeight}</td>
+          </tr>
+          <tr>
+            <td className="title">作业单位</td>
+            <td>{info?.info?.step_21?.actUserDepartmentName}</td>
+            <td className="title">监护人</td>
+            <td>
+              {info?.info?.step_20?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">作业人</td>
+            <td>{info?.info?.workUserName}</td>
+            <td className="title">作业负责人</td>
+            <td>
+              {info?.info?.step_21?.signPath
+                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
+            </td>
+          </tr>
+          <tr>
+            <td className="title">关联的其他特殊作业及安全作业票编号</td>
+            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
+          </tr>
+          <tr>
+            <td className="title">风险辨识结果</td>
+            <td colSpan={3}>{info?.info?.riskResults}</td>
+          </tr>
+          <tr>
+            <td className="title">作业实施时间</td>
+            <td colSpan={3}>{`${info?.info?.workStartTime} 至 ${info?.info?.workEndTime} 止`}</td>
+          </tr>
+          <SafetyMeasures colSpan={4} workId={props.id} />
+          <DisclaimerSign
+            colSpan={2}
+            safetyRemarks={info?.info?.step_18?.remarks}
+            safetySignPath={info?.info?.step_18?.signPath}
+            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
+            AcceptRemarks={info?.info?.step_19?.remarks}
+            AcceptSignPath={info?.info?.step_19?.signPath}
+            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
+          />
+          <OpinionSign
+            title="作业指挥负责人意见"
+            colSpan={4}
+            remarks={info?.info?.step_21?.remarks}
+            signPath={info?.info?.step_21?.signPath}
+            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
+          />
+          <OpinionSign
+            title="所在单位意见"
+            colSpan={4}
+            remarks={info?.info?.step_22?.remarks}
+            signPath={info?.info?.step_22?.signPath}
+            signTime={info?.info?.step_22?.status !== 0 && info?.info?.step_22?.signTime}
+          />
+          <OpinionSign
+            title="审核部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_23?.remarks}
+            signPath={info?.info?.step_23?.signPath}
+            signTime={info?.info?.step_23?.status !== 0 && info?.info?.step_23?.signTime}
+          />
+          <OpinionSign
+            title="审批部门意见"
+            colSpan={4}
+            remarks={info?.info?.step_24?.remarks}
+            signPath={info?.info?.step_24?.signPath}
+            signTime={info?.info?.step_24?.status !== 0 && info?.info?.step_24?.signTime}
+          />
+          <OpinionSign
+            title="完工验收"
+            colSpan={4}
+            remarks={info?.info?.step_25?.remarks}
+            signPath={info?.info?.step_25?.signPath}
+            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/HotWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HotWork/index.js
@ -0,0 +1,203 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Divider, Image } from "antd";
+import dayjs from "dayjs";
+import { Fragment, useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
+import "../eightWordPubilc/index.less";
+
+function View(props) {
+  const [info, setInfo] = useState({});
+  const [delayedMonitoringRecord, setDelayedMonitoringRecord] = useState([]);
+  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);
+
+  const getData = async () => {
+    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
+    setInfo(basicInfo);
+    const { data: supplementaryInfo } = await props.eightWorkSupplementaryInfo({
+      eqWorkId: props.workId,
+      pageSize: 999,
+      pageIndex: 1,
+    });
+    setDelayedMonitoringRecord(supplementaryInfo.filter(item => item.type === "delay"));
+    setGasMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="work_ticket_details">
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <Divider orientation="left">动火申请审批许可证</Divider>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none" }}>
+              <span>编号：</span>
+              <span>{info.checkNo}</span>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="title">申请单位</td>
+            <td>{info?.info?.applyUnit}</td>
+            <td className="title">申请时间</td>
+            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
+          </tr>
+          <tr>
+            <td className="title">动火部位</td>
+            <td>{info?.info?.work_place}</td>
+            <td className="title">动火方法</td>
+            <td>{info?.info?.work_way}</td>
+          </tr>
+          <tr>
+            <td className="title">动火等级</td>
+            <td>{info?.info?.workLevelName}</td>
+            <td className="title">作业内容</td>
+            <td>{info?.info?.workContent}</td>
+          </tr>
+          <tr>
+            <td className="title">动火时间</td>
+            <td colSpan={3}>{`${info?.info?.workStartTime} - ${info?.info?.workEndTime}`}</td>
+          </tr>
+          <tr>
+            <td className="title">现场负责人</td>
+            <td>{info?.info?.step_10?.actUserName}</td>
+            <td className="title">动火操作人</td>
+            <td>{info?.info?.hotWorkActUser?.map(item => item.name).join(", ")}</td>
+          </tr>
+          <tr>
+            <td className="title">动火监火人</td>
+            <td colSpan={3}>{info?.info?.workMonitor}</td>
+          </tr>
+          <tr>
+            <td className="title center" colSpan={4}>可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）</td>
+          </tr>
+          {
+            gasMonitoringRecord.length > 0
+              ? gasMonitoringRecord.map(item => (
+                  <Fragment key={item.id}>
+                    <tr>
+                      <td className="title">分析时间</td>
+                      <td>{item?.details?.analysisTime}</td>
+                      <td className="title">分析点</td>
+                      <td>{item?.details?.analysisPointName}</td>
+                    </tr>
+                    <tr>
+                      <td className="title">可燃气体检测结果</td>
+                      <td>{item?.details?.analysisResult}</td>
+                      <td className="title">分析人</td>
+                      <td>{item?.details?.analysisUserName}</td>
+                    </tr>
+                  </Fragment>
+                ))
+              : <tr><td colSpan={4} className="center">暂无数据</td></tr>
+          }
+          <tr>
+            <td className="title center" colSpan={4}>动火要求安全措施安全提示</td>
+          </tr>
+          <SafetyMeasures workId={props.workId} colSpan={4} />
+          <tr>
+            <td className="title">动火单位(部门)负责人意见</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_4?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_4?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_4?.status !== 0 && info?.info?.step_4?.signTime}</div>
+              <div className="remarks">{info?.info?.step_4?.remarks}</div>
+            </td>
+            <td className="title">项目发包单位(部门)人员意见</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_5?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_5?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_5?.status !== 0 && info?.info?.step_5?.signTime}</div>
+              <div className="remarks">{info?.info?.step_5?.remarks}</div>
+            </td>
+          </tr>
+          <tr>
+            <td className="title">现场管辖单位(部门)负责人意见</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_6?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_6?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_6?.status !== 0 && info?.info?.step_6?.signTime}</div>
+              <div className="remarks">{info?.info?.step_6?.remarks}</div>
+            </td>
+            <td className="title">动火许可证签发单位意见</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_7?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_7?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_7?.status !== 0 && info?.info?.step_7?.signTime}</div>
+              <div className="remarks">{info?.info?.step_7?.remarks}</div>
+            </td>
+          </tr>
+          <tr>
+            <td className="title">动火前管辖单位现场人员许可</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_9?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_9?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_9?.status !== 0 && info?.info?.step_9?.signTime}</div>
+              <div className="remarks">{info?.info?.step_9?.remarks}</div>
+            </td>
+            <td className="title">动火后管辖单位现场人员验收</td>
+            <td className="right">
+              <div>
+                {info?.info?.step_11?.signPath
+                  && <Image src={getFileUrl() + info?.info?.step_11?.signPath} width={50} height={50} />}
+              </div>
+              <div>{info?.info?.step_11?.status !== 0 && info?.info?.step_11?.signTime}</div>
+              <div className="remarks">{info?.info?.step_11?.remarks}</div>
+            </td>
+          </tr>
+          <tr>
+            <td className="title center" colSpan={4}>延时监火记录</td>
+          </tr>
+          <tr>
+            <td colSpan={4} style={{ border: "none", padding: 0 }}>
+              <table>
+                <tbody>
+                  <tr>
+                    <td className="title center">监火人</td>
+                    <td className="title center">时间</td>
+                    <td className="title center">签字照片</td>
+                  </tr>
+                  {
+                    delayedMonitoringRecord.length > 0
+                      ? delayedMonitoringRecord.map((item, index) => (
+                          <tr key={index}>
+                            <td className="center">{item?.details?.actUserName}</td>
+                            <td className="center">{item?.details?.delayHotTime}</td>
+                            <td className="center">
+                              {item?.details?.delayHotPhoto
+                                && <Image src={getFileUrl() + item?.details?.delayHotPhoto} width={50} height={50} />}
+                            </td>
+                          </tr>
+                        ))
+                      : <tr><td colSpan={3} className="center">暂无数据</td></tr>
+                  }
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(View);
--- a/src/pages/Container/Map/components/Content/modal/eightWordPubilc/DisclaimerSign/index.js
+++ b/src/pages/Container/Map/components/Content/modal/eightWordPubilc/DisclaimerSign/index.js
@ -0,0 +1,60 @@
+import { Image } from "antd";
+import { getFileUrl } from "zy-react-library/utils";
+
+function DisclaimerSign({
+  colSpan,
+  firstColSpan,
+  lastColSpan,
+  safetyRemarks,
+  safetySignPath,
+  safetySignTime,
+  AcceptRemarks,
+  AcceptSignPath,
+  AcceptSignTime,
+}) {
+  const showFirst = safetyRemarks || safetySignPath || safetySignTime;
+  const showLast = AcceptRemarks || AcceptSignPath || AcceptSignTime;
+
+  return (
+    <tr>
+      {
+        showFirst && (
+          <td colSpan={(firstColSpan || colSpan) + (!showLast ? (lastColSpan || colSpan) : 0)}>
+            <div className="flex">
+              <div>
+                <span>安全交底人：</span>
+                <span>{safetyRemarks}</span>
+              </div>
+              <div className="right">
+                <div>
+                  {safetySignPath && <Image src={getFileUrl() + safetySignPath} width={50} height={50} />}
+                </div>
+                <div>{safetySignTime}</div>
+              </div>
+            </div>
+          </td>
+        )
+      }
+      {
+        showLast && (
+          <td colSpan={(lastColSpan || colSpan) + (!showFirst ? (firstColSpan || colSpan) : 0)}>
+            <div className="flex">
+              <div>
+                <span>接受交底人：</span>
+                <span>{AcceptRemarks}</span>
+              </div>
+              <div className="right">
+                <div>
+                  {AcceptSignPath && <Image src={getFileUrl() + AcceptSignPath} width={50} height={50} />}
+                </div>
+                <div>{AcceptSignTime}</div>
+              </div>
+            </div>
+          </td>
+        )
+      }
+    </tr>
+  );
+}
+
+export default DisclaimerSign;
--- a/src/pages/Container/Map/components/Content/modal/eightWordPubilc/OpinionSign/index.js
+++ b/src/pages/Container/Map/components/Content/modal/eightWordPubilc/OpinionSign/index.js
@ -0,0 +1,46 @@
+import { Image } from "antd";
+import { Fragment } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+
+function OpinionSign({
+  title,
+  colSpan,
+  remarks,
+  signPath,
+  signTime,
+}) {
+  const show = signPath || remarks || signTime;
+
+  return (
+    <Fragment>
+      {
+        show && (
+          <tr>
+            <td colSpan={colSpan}>
+              <div className="flex">
+                <div>
+                  <span>
+                    {title}
+                    ：
+                  </span>
+                  <span className="remarks" style={{ display: "inline" }}>{remarks}</span>
+                </div>
+                <div className="right">
+                  <div>
+                    <span>签字：</span>
+                    <span>
+                      {signPath && <Image src={getFileUrl() + signPath} width={50} height={50} />}
+                    </span>
+                    <div>{signTime}</div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        )
+      }
+    </Fragment>
+  );
+}
+
+export default OpinionSign;
--- a/src/pages/Container/Map/components/Content/modal/eightWordPubilc/SafetyMeasures/index.js
+++ b/src/pages/Container/Map/components/Content/modal/eightWordPubilc/SafetyMeasures/index.js
@ -0,0 +1,72 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Image } from "antd";
+import { useEffect, useState } from "react";
+import { getFileUrl } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+function SafetyMeasures(props) {
+  const [safetyMeasures, setSafetyMeasures] = useState([]);
+  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([]);
+
+  const getData = async () => {
+    const { data } = await props.eightWorkMeasuresLogs({ workId: props.workId });
+    setSafetyMeasures(data.filter(item => item.type === 1));
+    setOtherSafetyMeasures(data.filter(item => item.type === 2));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <tr>
+      <td colSpan={props.colSpan} style={{ border: "none", padding: 0 }}>
+        <table>
+          <tbody>
+            <tr>
+              <td className="center title" style={{ width: 80 }}>序号</td>
+              <td className="center title" style={{ width: "auto" }}>安全措施</td>
+              <td className="center title" style={{ width: 100 }}>是否涉及</td>
+              <td className="center title" style={{ width: 100 }}>确认人</td>
+            </tr>
+            {safetyMeasures.map((item, index) => (
+              <tr key={index}>
+                <td className="center">{index + 1}</td>
+                <td>{item.content}</td>
+                <td className="center">符合</td>
+                <td className="center">
+                  {item.signPath && <Image src={getFileUrl() + item.signPath} width={50} height={50} />}
+                </td>
+              </tr>
+            ))}
+            {
+              otherSafetyMeasures.length > 0 && (
+                <tr>
+                  <td className="center">{safetyMeasures.length + 1}</td>
+                  <td colSpan={3}>
+                    {
+                      otherSafetyMeasures.map((item, index) => (
+                        <div key={index} style={{ display: "flex", justifyContent: "space-between" }}>
+                          <div>
+                            <span>其它安全措施：</span>
+                            <span>{item.content}</span>
+                          </div>
+                          <div>
+                            <span>编制人：</span>
+                            <span>{item.createName}</span>
+                          </div>
+                        </div>
+                      ))
+                    }
+                  </td>
+                </tr>
+              )
+            }
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  );
+}
+
+export default Connect([NS_BI_MARK_INFO], true)(SafetyMeasures);
--- a/src/pages/Container/Map/components/Content/modal/eightWordPubilc/index.less
+++ b/src/pages/Container/Map/components/Content/modal/eightWordPubilc/index.less
@ -0,0 +1,46 @@
+.work_ticket_details {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    color: #fff;
+
+    th, td {
+      border: 1px solid #0c1957;
+      padding: 8px;
+    }
+
+    .title{
+      font-weight: 600;
+      background-color: #0b1544;
+      width: 200px;
+    }
+
+    .center {
+      text-align: center;
+    }
+
+    .right {
+      text-align: right;
+      max-width: 0;
+      min-width: 200px;
+    }
+
+    .remarks {
+      text-align: left;
+      word-wrap: break-word;
+      word-break: break-all;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      display: inline-block;
+      max-width: 100%;
+    }
+
+    .flex {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+}
--- a/src/pages/Container/Map/components/Content/modal/index.js
+++ b/src/pages/Container/Map/components/Content/modal/index.js
@ -2,17 +2,26 @@ import { Button, Modal } from "antd";
 import { useContext } from "react";
 import { Context } from "~/pages/Container/Map/js/context";
 import AlarmEquipment from "./AlarmEquipment";
+import BlindBoardWork from "./BlindBoardWork";
+import BreakGroundWork from "./BreakgroundWork";
+import ConfinedSpaceWork from "./ConfinedSpaceWork";
+import CutRoadWork from "./CutRoadWork";
+import ElectricityWork from "./ElectricityWork";
 import FireControlRoom from "./FireControlRoom";
 import FirePointLocation from "./FirePointLocation";
 import FirePumpRoom from "./FirePumpRoom";
 import FireRescueTeam from "./FireRescueTeam";
 import FireWaterSource from "./FireWaterSource";
+import HighWork from "./HighWork";
+import HoistingWork from "./HoistingWork";
+import HotWork from "./HotWork";
 import MeteorologicalMonitoring from "./MeteorologicalMonitoring";

 const CustomModal = () => {
  const { modalVisible, modalData, actions } = useContext(Context);

  const renderContent = () => {
+    const markType = modalData.markType?.replace("标记点_", "");
    return {
      meteorologicalMonitoring: <MeteorologicalMonitoring />, // 气象监测
      fireRescueTeam: <FireRescueTeam id={modalData.id} />, // 消防救援队
@ -21,7 +30,15 @@ const CustomModal = () => {
      fireWaterSource: <FireWaterSource id={modalData.id} />, // 消防水源
      firePointLocation: <FirePointLocation id={modalData.id} />, // 消防点位
      alarmEquipment: <AlarmEquipment id={modalData.id} />, // 报警设备
-    }[modalData.markType?.replace("标记点_", "")];
+      hot_work: <HotWork id={modalData.id} workId={modalData.workId} />, // 动火作业
+      confinedspace_work: <ConfinedSpaceWork id={modalData.id} workId={modalData.workId} />, // 受限空间作业
+      electricity_work: <ElectricityWork id={modalData.id} workId={modalData.workId} />, // 临时用电作业
+      high_work: <HighWork id={modalData.id} workId={modalData.workId} />, // 高处作业
+      cutroad_work: <CutRoadWork id={modalData.id} workId={modalData.workId} />, // 断路作业
+      breakground_work: <BreakGroundWork id={modalData.id} workId={modalData.workId} />, // 动土作业
+      hoisting_work: <HoistingWork id={modalData.id} workId={modalData.workId} />, // 吊装作业
+      blindboard_work: <BlindBoardWork id={modalData.id} workId={modalData.workId} />, // 盲板抽堵作业
+    }[markType];
  };

  return (
--- a/src/pages/Container/Map/index.js
+++ b/src/pages/Container/Map/index.js
@ -114,21 +114,23 @@ function Map(props) {

  return (
    <div ref={fullscreenRef}>
-      <Context.Provider value={providerValues}>
-        <div id="cesiumContainer" />
-        <div id="contentContainer">
-          {isRenderContent && (
-            <Spin spinning={props.biMark.biFullLoading}>
-              <Header />
-              <CenterUtils />
-              <RightUtils history={props.history} isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
-              <BottomUtils />
-              <Content history={props.history} />
-              <CustomModal />
-            </Spin>
-          )}
-        </div>
-      </Context.Provider>
+      <Spin spinning={props.biMark.biFullLoading} delay={500} description="正在加载数据...">
+        <Context.Provider value={providerValues}>
+          <div id="cesiumContainer" />
+          <div id="contentContainer">
+            {isRenderContent && (
+              <>
+                <Header />
+                <CenterUtils />
+                <RightUtils history={props.history} isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
+                <BottomUtils />
+                <Content history={props.history} />
+                <CustomModal />
+              </>
+            )}
+          </div>
+        </Context.Provider>
+      </Spin>
      <div
        style={{ display: state.coverMaskVisible ? "block" : "none" }}
        className="coverMaskContainer"