-
秦皇岛港
-
沧州港
-
曹实业
-
曹煤炭
-
+
+
{
+ props.history.push("./white/branchOffice");
+ }}
+ >
+ 分公司大屏
+
+
{
+ props.history.push("./white/share");
+ }}
+ >
+ 监管端大屏
+
);
}
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/Btn/index.less b/src/pages/Container/Map/components/Content/IndexInfo/Btn/index.less
index c3070b4..454f95b 100644
--- a/src/pages/Container/Map/components/Content/IndexInfo/Btn/index.less
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Btn/index.less
@@ -1,9 +1,9 @@
-.index_info_btn{
+.index_info_btn {
position: absolute;
top: 200px;
right: 450px;
- .item{
+ .item {
width: 127px;
height: 43px;
color: #ffffff;
diff --git a/src/pages/Container/Map/components/Content/IndexInfo/index.js b/src/pages/Container/Map/components/Content/IndexInfo/index.js
index 6c5bb2c..1927500 100644
--- a/src/pages/Container/Map/components/Content/IndexInfo/index.js
+++ b/src/pages/Container/Map/components/Content/IndexInfo/index.js
@@ -1,18 +1,18 @@
import Bottom from "./Bottom";
+import Btn from "./Btn";
import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel";
import Search from "./Search";
-import Btn from "./Btn";
import "./index.less";
-function IndexInfo() {
+function IndexInfo(props) {
return (
-
+
);
}
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index ff4cc7d..c11324e 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -29,34 +29,44 @@ import { Context } from "~/pages/Container/Map/js/context";
import { useContentAnimation } from "./useContentAnimation";
import "./index.less";
-function Content() {
+function Content(props) {
const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);
const [collapseLeft, setCollapseLeft] = useState(false);
const [collapseRight, setCollapseRight] = useState(false);
+ const {
+ controls: indexInfoControls,
+ isVisible: isIndexInfoVisible,
+ } = useContentAnimation({
+ currentContent: { currentPort, currentBranchOffice },
+ type: "index",
+ });
+
const {
controls: leftControls,
displayedContent: leftDisplayedContent,
isVisible: isLeftVisible,
handleCollapse: handleLeftCollapse,
- } = useContentAnimation(
- { currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
- collapseLeft,
- "left",
- pureMap,
- );
+ } = useContentAnimation({
+ currentContent: { currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
+ isCollapsed: collapseLeft,
+ side: "left",
+ isPureMap: pureMap,
+ type: "panel",
+ });
const {
controls: rightControls,
displayedContent: rightDisplayedContent,
isVisible: isRightVisible,
handleCollapse: handleRightCollapse,
- } = useContentAnimation(
- { currentBranchOffice, bottomUtilsCurrentIndex },
- collapseRight,
- "right",
- pureMap,
- );
+ } = useContentAnimation({
+ currentContent: { currentBranchOffice, bottomUtilsCurrentIndex },
+ isCollapsed: collapseRight,
+ side: "right",
+ isPureMap: pureMap,
+ type: "panel",
+ });
const renderPortContent = () => {
const bottomUtilsCurrentType = (leftDisplayedContent.bottomUtilsCurrentIndex !== -1 && portUtilsList[leftDisplayedContent.bottomUtilsCurrentIndex])
@@ -115,7 +125,11 @@ function Content() {
const renderContent = () => {
return (
<>
- {!leftDisplayedContent.currentPort && (
)}
+ {isIndexInfoVisible && (
+
+
+
+ )}
{isLeftVisible && (
折叠状态 > 内容变化
- *
- * @param {object} currentContent - 当前要显示的内容状态（包含 currentPort、currentBranchOffice、bottomUtilsCurrentIndex 等）
- * @param {boolean} isCollapsed - 当前是否处于折叠状态
- * @param {string} side - 'left' 或 'right'，控制动画方向
- * @param {boolean} isPureMap - 是否为纯地图模式
+ * @param {object} params - 参数对象
+ * @param {object} params.currentContent - 当前要显示的内容状态（包含 currentPort、currentBranchOffice、bottomUtilsCurrentIndex 等）
+ * @param {boolean} params.isCollapsed - 当前是否处于折叠状态（仅 panel 类型）
+ * @param {string} params.side - 'left' 或 'right'，控制动画方向（仅 panel 类型）
+ * @param {boolean} params.isPureMap - 是否为纯地图模式（仅 panel 类型）
+ * @param {string} params.type - 动画类型："index" 或 "panel"（默认 "panel"）
* @returns {object} 返回包含以下属性的对象：
* - controls: motion 动画控制器
- * - displayedContent: 延迟显示的内容状态（用于动画过渡）
+ * - displayedContent: 延迟显示的内容状态（仅 panel 类型）
* - isVisible: 元素可见性状态
- * - handleCollapse: 处理折叠/展开的函数
+ * - handleCollapse: 处理折叠/展开的函数（仅 panel 类型）
*/
-export function useContentAnimation(currentContent, isCollapsed, side = "left", isPureMap = false) {
+export function useContentAnimation({
+ currentContent,
+ isCollapsed = false,
+ side = "left",
+ isPureMap = false,
+ type = "panel",
+}) {
// ==================== 状态管理 ====================
// motion 动画控制器，用于控制元素的动画
const controls = useAnimation();
- // 标记是否是首次渲染（首次渲染不执行离开动画，直接进入）
- const isLeftFirstRender = useRef(true);
-
- // 标记当前是否正在执行动画（防止动画冲突）
- const isAnimating = useRef(false);
-
- // 延迟显示的内容状态
- // 作用：在内容切换时，先显示旧内容，动画完成后再更新为新内容
- const [displayedContent, setDisplayedContent] = useState(currentContent);
-
// 元素可见性状态
// false: 元素被隐藏（折叠或纯地图模式）
// true: 元素可见（非折叠、非纯地图模式）
const [isVisible, setIsVisible] = useState(true);
- // ==================== 辅助函数 ====================
+ // 标记当前是否正在执行动画（防止动画冲突）
+ const isAnimating = useRef(false);
- /**
- * 计算动画的初始位置
- * @returns {number} 初始 X 轴位移值（负数表示在左侧，正数表示在右侧）
- */
+ // 标记是否是首次渲染（首次渲染不执行离开动画，直接进入）
+ const isFirstRender = useRef(true);
+
+ // 延迟显示的内容状态（仅 panel 类型使用）
+ // 作用：在内容切换时，先显示旧内容，动画完成后再更新为新内容
+ const [displayedContent, setDisplayedContent] = useState(type === "index" ? {} : currentContent);
+
+ // ==================== IndexInfo 类型的缩放动画逻辑 ====================
+
+ useEffect(() => {
+ // 仅处理 index 类型
+ if (type !== "index") {
+ return;
+ }
+
+ // 判断是否应该显示 IndexInfo（没有选择任何港口或分公司时）
+ const shouldShowIndexInfo = !currentContent.currentPort && !currentContent.currentBranchOffice;
+
+ // ==================== 场景 1：应该显示 IndexInfo ====================
+ if (shouldShowIndexInfo) {
+ // ----- 情况 A：首次渲染 -----
+ if (isFirstRender.current) {
+ // 1. 设置元素到初始缩小状态
+ controls.set({
+ scale: 0.8, // 缩小到 80%
+ opacity: 0, // 透明
+ });
+
+ // 2. 显示元素
+ setIsVisible(true);
+
+ // 3. 执行放大进入动画（从小到大缩放）
+ requestAnimationFrame(() => {
+ controls.start({
+ scale: 1, // 放大到正常大小
+ opacity: 1, // 淡入
+ transition: { duration: 0.5, ease: "easeOut" },
+ });
+ });
+
+ // 4. 标记首次渲染完成
+ isFirstRender.current = false;
+ }
+
+ // ----- 情况 B：从其他内容切换回来：放大进入（带延迟，等待其他内容离开动画完成） -----
+ else if (!isVisible && !isAnimating.current) {
+ // 标记开始执行动画（防止动画冲突）
+ isAnimating.current = true;
+
+ // 1. 显示元素
+ setIsVisible(true);
+
+ // 2. 执行放大进入动画
+ requestAnimationFrame(() => {
+ // 设置元素到初始缩小状态
+ controls.set({
+ scale: 0.8,
+ opacity: 0,
+ });
+
+ // 然后触发放大进入动画（带 0.3s 延迟，等待其他内容离开）
+ requestAnimationFrame(() => {
+ controls.start({
+ scale: 1,
+ opacity: 1,
+ transition: { duration: 0.5, ease: "easeOut", delay: 0.3 },
+ }).then(() => {
+ // 动画完成标记
+ isAnimating.current = false;
+ });
+ });
+ });
+ }
+ }
+
+ // ==================== 场景 2：不应该显示 IndexInfo（选择了港口或分公司）====================
+ else if (isVisible && !isAnimating.current) {
+ // 标记开始执行动画（防止动画冲突）
+ isAnimating.current = true;
+
+ // 执行缩小离开动画
+ controls.start({
+ scale: 0.8, // 缩小到 80%
+ opacity: 0, // 淡出
+ transition: { duration: 0.3, ease: "easeIn" },
+ }).then(() => {
+ // 动画完成后：
+ // 1. 隐藏元素
+ setIsVisible(false);
+
+ // 2. 标记动画完成
+ isAnimating.current = false;
+ });
+ }
+ }, [currentContent.currentPort, currentContent.currentBranchOffice, controls, isVisible, type]);
+
+ // ==================== Panel 类型的滑动动画逻辑 ====================
+
+ // 辅助函数：计算动画的初始位置
+ // @returns {number} 初始 X 轴位移值（负数表示在左侧，正数表示在右侧）
const getInitialX = () => side === "left" ? -300 : 300;
// ==================== 折叠/展开处理 ====================
@@ -109,6 +201,11 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
// ==================== 主题：监听状态变化并执行动画 ====================
useEffect(() => {
+ // 仅处理 panel 类型
+ if (type !== "panel") {
+ return;
+ }
+
// ==================== 场景 1：纯地图模式（最高优先级）====================
if (isPureMap) {
// 如果元素当前可见，执行离开动画并隐藏
@@ -155,7 +252,7 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
);
// ----- 情况 A：首次渲染 -----
- if (isLeftFirstRender.current) {
+ if (isFirstRender.current) {
// 1. 设置元素到初始隐藏位置（侧边外部）
controls.set({
x: getInitialX(),
@@ -173,7 +270,7 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
});
// 4. 标记首次渲染完成
- isLeftFirstRender.current = false;
+ isFirstRender.current = false;
}
// ----- 情况 B：内容变化（用户切换工具）-----
@@ -230,10 +327,18 @@ export function useContentAnimation(currentContent, isCollapsed, side = "left",
});
});
}
- }, [currentContent, isCollapsed, isPureMap, controls, displayedContent, side, isVisible]);
+ }, [currentContent, isCollapsed, isPureMap, controls, displayedContent, side, isVisible, type]);
// ==================== 返回值 ====================
+ // 返回值根据类型不同而不同
+ if (type === "index") {
+ return {
+ controls, // motion 动画控制器
+ isVisible, // 元素可见性状态
+ };
+ }
+
return {
controls, // motion 动画控制器
displayedContent, // 延迟显示的内容（用于动画过渡）
diff --git a/src/pages/Container/Map/index.js b/src/pages/Container/Map/index.js
index 093b682..1029659 100644
--- a/src/pages/Container/Map/index.js
+++ b/src/pages/Container/Map/index.js
@@ -18,7 +18,7 @@ import {
} from "./js/mittKey";
import "./index.less";
-function Map() {
+function Map(props) {
const query = useGetUrlQuery();
const viewer = useRef(null); // cesium地图实例
@@ -98,7 +98,7 @@ function Map() {
-
+
- 
东区二号罐液位过低
-