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 +++++++++++++++++++++++++++-------
 zy-acs-flow/src/i18n/en.js             |    1 
 zy-acs-flow/src/i18n/zh.js             |    3 +
 zy-acs-flow/src/map/MapPage.jsx        |    5 +-
 4 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/zy-acs-flow/src/i18n/en.js b/zy-acs-flow/src/i18n/en.js
index 06e1e1e..c99369a 100644
--- a/zy-acs-flow/src/i18n/en.js
+++ b/zy-acs-flow/src/i18n/en.js
@@ -664,6 +664,7 @@
                 flip: 'FLIP',
                 fake: 'FAKE',
                 route: 'ROUTE',
+                area: 'AREA',
                 disable: 'DISABLE',
                 enable: 'ENABLE',
                 reset: 'RESET',
diff --git a/zy-acs-flow/src/i18n/zh.js b/zy-acs-flow/src/i18n/zh.js
index 7706c13..bdf056c 100644
--- a/zy-acs-flow/src/i18n/zh.js
+++ b/zy-acs-flow/src/i18n/zh.js
@@ -661,9 +661,10 @@
                 clear: '娓呯┖鍦板浘',
                 adapt: '閫傞厤',
                 rotate: '鏃嬭浆',
-                flip: 'FLIP',
+                flip: '缈昏浆',
                 fake: '妯℃嫙',
                 route: '璺嚎',
+                area: '鍖哄煙',
                 disable: '绂佺敤',
                 enable: '鍚敤',
                 reset: '閲嶇疆',
diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 1c4b71c..12874c3 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -59,6 +59,7 @@
 
     const [rcsStatus, setRcsStatus] = useState(null);
     const [showRoutes, setShowRoutes] = useState(false);
+    const [showAreas, setShowAreas] = useState(false);
     const [curZone, setCurZone] = useState(() => {
         const storedValue = localStorage.getItem('curZone');
         return storedValue !== null ? JSON.parse(storedValue) : null;
@@ -470,8 +471,8 @@
                         <>
                             <AreaFab
                                 curZone={curZone}
-                                showRoutes={showRoutes}
-                                setShowRoutes={setShowRoutes}
+                                showAreas={showAreas}
+                                setShowAreas={setShowAreas}
                                 notify={notify}
                             />
                         </>
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