From 1bc33546a044cbc84dd9595c19dbcd9a4e309fc9 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期六, 10 一月 2026 14:06:10 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/header/AreaFab.jsx |   61 +++++++++++++++++++++++-------
 1 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/zy-acs-flow/src/map/header/AreaFab.jsx b/zy-acs-flow/src/map/header/AreaFab.jsx
index 76d9708..ab8e847 100644
--- a/zy-acs-flow/src/map/header/AreaFab.jsx
+++ b/zy-acs-flow/src/map/header/AreaFab.jsx
@@ -2,21 +2,54 @@
 import { useTranslate } from "react-admin";
 import { Fab } from '@mui/material';
 import CropFreeIcon from '@mui/icons-material/CropFree';
+import CropIcon from '@mui/icons-material/Crop';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as Tool from '../tool';
 
-const AreaFab = ({ active = false, onToggle }) => {
+const AreaFab = (props) => {
+    const { curZone, showAreas, setShowAreas } = props;
     const translate = useTranslate();
 
-    return (
-        <Fab
-            variant="extended"
-            color={active ? 'primary' : 'default'}
-            size="small"
-            onClick={onToggle}
-        >
-            <CropFreeIcon />
-            &nbsp;{translate('page.map.devices.area')}&nbsp;
-        </Fab>
-    );
-};
+    const [loading, setLoading] = React.useState(false);
 
-export default AreaFab;
+    const handleClick = () => {
+        if (showAreas) {
+            Tool.hideAreas(curZone, setShowAreas);
+        } else {
+            Tool.showAreas(curZone, setShowAreas, setLoading);
+        }
+    }
+
+    return (
+        <>
+            <Fab
+                variant="extended"
+                color={showAreas ? 'primary' : 'default'}
+                size="small"
+                disabled={loading}
+                onClick={handleClick}
+                sx={{
+                    minWidth: 100
+                }}
+            >
+                <CropIcon />
+                &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;
\ No newline at end of file

--
Gitblit v1.9.1