救援添加 全屏功能

jjb.config.js

@@ -20,7 +20,7 @@ module.exports = {
     },
   },
   // 应用唯一标识符
-  appIdentifier: "emergencyRescue",
+  appIdentifier: "emergencyRescue-h5",
   // 应用上下文注入全局变量
   contextInject: {
     // 应用Key

src/pages/Container/BiRescue/index.js

@@ -1,4 +1,5 @@
 import useUrlState from "@ahooksjs/use-url-state";
+import { ArrowLeftOutlined } from "@ant-design/icons";
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useEventEmitter, useMount } from "ahooks";
 import { Button, message } from "antd";
@@ -12,6 +13,8 @@ import top from "~/pages/Container/Enterprise/EmergencyRescue/Rescue/Command/ima
 import "./Command/index.less";
 import "./index.less";
 
+const RESCUE_COMPLETE_EVENT = "RESCUE_COMPLETE";
+
 function BiRescue(props) {
   const [urlState, setUrlState] = useUrlState({
     id: "",
@@ -34,14 +37,36 @@ function BiRescue(props) {
     const { success } = await props["rescueUpdateStatus"]({ id: urlState.id, isRescueExecuted: 4 });
     if (success) {
       message.success("完成救援成功");
+      const eventData = {
+        type: RESCUE_COMPLETE_EVENT,
+        id: urlState.id,
+        status: 4,
+        time: Date.now(),
+      };
+      window.opener?.postMessage(eventData, window.location.origin);
+      localStorage.setItem(RESCUE_COMPLETE_EVENT, JSON.stringify(eventData));
       window.close();
     }
   };
 
+  const onBack = () => {
+    window.close();
+    if (!window.closed && window.history.length > 1) {
+      window.history.back();
+    }
+  };
+
   return (
     <div className="bi-rescue">
       <div className="command">
         <div style={{ backgroundImage: `url(${top})` }} className="top">
+          <Button
+            className="bi-rescue-back"
+            icon={<ArrowLeftOutlined />}
+            onClick={onBack}
+          >
+            返回
+          </Button>
           应急指挥台
           <Button className="bi-rescue-complete" type="primary" onClick={onComplete}>完成救援</Button>
         </div>

src/pages/Container/BiRescue/index.less

@@ -10,7 +10,7 @@
   min-width: 1280px;
   min-height: 720px;
   overflow: auto;
-  background-color: #E5EDFD;
+  background-color: #e5edfd;
   box-sizing: border-box;
   scrollbar-gutter: stable;
 
@@ -129,6 +129,13 @@
     transform: translateY(-50%);
   }
 
+  .bi-rescue-back {
+    position: absolute;
+    top: 50%;
+    left: 16px;
+    transform: translateY(-50%);
+  }
+
   .bi-rescue-main {
     display: grid;
     grid-template-columns: var(--bi-rescue-side-width) minmax(0, 1fr) var(--bi-rescue-side-width);

src/pages/Container/Enterprise/EmergencyRescue/Rescue/Command/index.js

@@ -3,6 +3,7 @@ import { FullscreenOutlined } from "@ant-design/icons";
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useEventEmitter } from "ahooks";
 import { Button, message, Space } from "antd";
+import { useEffect, useRef } from "react";
 import Page from "zy-react-library/components/Page";
 import { NS_RESUE } from "~/enumerate/namespace";
 import Cesium from "./components/Cesium";
@@ -13,6 +14,8 @@ import SelectEmergencyPlan from "./components/SelectEmergencyPlan";
 import top from "./images/top.png";
 import "./index.less";
 
+const RESCUE_COMPLETE_EVENT = "RESCUE_COMPLETE";
+
 function Command(props) {
   const [urlState, setUrlState] = useUrlState({
     id: "",
@@ -23,6 +26,44 @@ function Command(props) {
   }, { navigateMode: "replace" });
 
   const getCommandEvent = useEventEmitter();
+  const hasBackRef = useRef(false);
+
+  useEffect(() => {
+    const goBackAfterFullscreenComplete = (id) => {
+      if (hasBackRef.current || (id && String(id) !== String(urlState.id))) {
+        return;
+      }
+      hasBackRef.current = true;
+      props.history.goBack();
+    };
+
+    const handleMessage = (event) => {
+      if (event.origin !== window.location.origin || event.data?.type !== RESCUE_COMPLETE_EVENT) {
+        return;
+      }
+      goBackAfterFullscreenComplete(event.data.id);
+    };
+
+    const handleStorage = (event) => {
+      if (event.key !== RESCUE_COMPLETE_EVENT || !event.newValue) {
+        return;
+      }
+      try {
+        goBackAfterFullscreenComplete(JSON.parse(event.newValue).id);
+      }
+      catch {
+        // Ignore malformed cross-window rescue completion payloads.
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    window.addEventListener("storage", handleStorage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, [props.history, urlState.id]);
 
   const onComplete = async () => {
     const { success } = await props["rescueUpdateStatus"]({ id: urlState.id, isRescueExecuted: 4 });
@@ -34,12 +75,10 @@ function Command(props) {
 
   const onFullscreen = () => {
     const url = new URL(window.location.href);
-    const containerPath = url.pathname.match(/^(.*\/container)\/.*/i)?.[1];
     const basename = process.env.app.basename || "";
     const params = new URLSearchParams(window.location.search);
-
     params.set("token", sessionStorage.getItem("token") || "");
-    url.pathname = containerPath ? `${containerPath}/biRescue` : `${basename}/container/biRescue`;
+    url.pathname = `${basename}-h5/container/biRescue`;
     url.search = params.toString();
     window.open(url.toString(), "_blank");
   };

src/pages/Container/Enterprise/EmergencyRescue/Rescue/List/index.js

@@ -9,6 +9,8 @@ import useTable from "zy-react-library/hooks/useTable";
 import { getLabelName } from "zy-react-library/utils";
 import { NS_EVENT_REPORT, NS_RESUE } from "~/enumerate/namespace";
 
+// const RESCUE_COMPLETE_EVENT = "RESCUE_COMPLETE";
+
 function List(props) {
   const [form] = Search.useForm();
 
@@ -17,6 +19,20 @@ function List(props) {
     params: { isEventOrRescue: 2 },
   });
 
+  // useEffect(() => {
+  //   const handleStorage = (event) => {
+  //     if (event.key === RESCUE_COMPLETE_EVENT) {
+  //       getData();
+  //     }
+  //   };
+  //
+  //   window.addEventListener("storage", handleStorage);
+  //
+  //   return () => {
+  //     window.removeEventListener("storage", handleStorage);
+  //   };
+  // }, [getData]);
+
   return (
     <Page isShowAllAction={false}>
       <Search