From b5019d6d7b5b8e1900db6cc9bd61b7dea4dc9936 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期三, 17 十二月 2025 11:06:36 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/header/AreaFab.jsx |   70 +++++++++++++++++++++++++++-------
 1 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/zy-acs-flow/src/map/header/AreaFab.jsx b/zy-acs-flow/src/map/header/AreaFab.jsx
index 76d9708..5111ca6 100644
--- a/zy-acs-flow/src/map/header/AreaFab.jsx
+++ b/zy-acs-flow/src/map/header/AreaFab.jsx
@@ -1,22 +1,62 @@
-import React from "react";
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslate } from "react-admin";
-import { Fab } from '@mui/material';
+import {
+    Fab,
+    Box,
+    Backdrop,
+    useTheme,
+} from '@mui/material';
 import CropFreeIcon from '@mui/icons-material/CropFree';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as Tool from '../tool';
 
-const AreaFab = ({ active = false, onToggle }) => {
+const AreaFab = (props) => {
+    const { curZone, showAreas, setShowAreas, notify } = props;
     const translate = useTranslate();
+    const theme = useTheme();   // theme.palette.primary.main
+
+    const [loading, setLoading] = React.useState(false);
+
+    const handleClick = () => {
+        if (showAreas) {
+            setShowAreas(false);
+            // Tool.hideRoutes(curZone, setShowAreas);
+        } else {
+            setShowAreas(true);
+            // Tool.showRoutes(curZone, setShowAreas, setLoading);
+        }
+    }
 
     return (
-        <Fab
-            variant="extended"
-            color={active ? 'primary' : 'default'}
-            size="small"
-            onClick={onToggle}
-        >
-            <CropFreeIcon />
-            &nbsp;{translate('page.map.devices.area')}&nbsp;
-        </Fab>
-    );
-};
+        <>
+            <Fab
+                variant="extended"
+                color={showAreas ? 'primary' : 'default'}
+                size="small"
+                disabled={loading}
+                onClick={handleClick}
+                sx={{
+                    minWidth: 100
+                }}
+            >
+                <CropFreeIcon />
+                &nbsp;{translate('page.map.action.area')}&nbsp;
+                {loading && (
+                    <>
+                        <svg width={0} height={0}>
+                            <defs>
+                                <linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                                    <stop offset="0%" stopColor="#e01cd5" />
+                                    <stop offset="100%" stopColor="#1CB5E0" />
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                        <CircularProgress size={18} thickness={8} sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
+                    </>
+                )}
+            </Fab>
+        </>
+    )
+}
 
-export default AreaFab;
+export default AreaFab;
\ No newline at end of file

--
Gitblit v1.9.1