From 53cd28807bd470d1145df9e4ecbe0f34465e6d4d Mon Sep 17 00:00:00 2001
From: mmc <1556375442@qq.com>
Date: Fri, 22 May 2026 14:14:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95loading=20=20=E8=A3=85?=
 =?UTF-8?q?=E9=85=8D=E5=9B=BE=20=E9=A6=96=E5=85=88=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E9=83=BD=E4=B8=AD=E5=9B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map.jsx                        | 12 +++++++
 src/components/devices/DeviceOverviewPage.tsx | 19 +++++++----
 src/pages/Agri.jsx                            | 33 +++++++++++++++----
 3 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index f1c65d9..97efbbb 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -692,6 +692,18 @@ export default function CesiumMap({ realtimePosition, pathPoints = [], devices =
 		viewer.scene.requestRenderMode = true; // 👈 加这个（只在需要时渲染）
 		viewer.scene.globe.enableLighting = false;
 
+		viewer.camera.flyTo({
+			// 中国中心大致坐标 + 合适高度（200万米）
+			destination: window.Cesium.Cartesian3.fromDegrees(103.84, 31.15, 2000000),
+			orientation: {
+				heading: window.Cesium.Math.toRadians(0),
+				pitch: window.Cesium.Math.toRadians(-90),
+				roll: 0
+			},
+			duration: 0 // 初始化直接到位，无需动画
+		});
+
+
 		try { fetchPublishedLayers() } catch (e) { }
 
 		return () => {
diff --git a/src/components/devices/DeviceOverviewPage.tsx b/src/components/devices/DeviceOverviewPage.tsx
index 6a3cf7a..51fe403 100644
--- a/src/components/devices/DeviceOverviewPage.tsx
+++ b/src/components/devices/DeviceOverviewPage.tsx
@@ -22,6 +22,7 @@ import DroneLivePlayer from '../VolcRtcPlayer.jsx';
 import AgoraTextTest from '../AgoraRtc.tsx';
 import { useWebRTCPlayer } from '../useWebRTCStream.tsx';
 import VideoPlayer from '../VideoPlayer.tsx.tsx';
+import CesiumMap from '../Map.jsx';
 
 const { Content } = Layout;
 const { Text, Title } = Typography;
@@ -234,8 +235,8 @@ export default function DeviceOverviewPage({ devices, planedevices, devicesAll,
 			<Row gutter={[8, 8]}>
 				<Col xs={24} lg={14}>
 					<Card title={<><EnvironmentOutlined /> 装备协同态势图</>} extra={<Button type="text" icon={<SettingOutlined />} />} bordered={false} style={{ borderRadius: 8, marginBottom: 8 }} bodyStyle={{ padding: 0 }}>
-						<div style={{ width: '100%', height: 350, background: '#e6f7ff url(https://picsum.photos/seed/solarfarm/1600/800) center/cover', borderRadius: 8, position: 'relative', overflow: 'hidden' }}>
-							<div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,0.95)', borderRadius: 6, padding: 8 }}>
+						<div style={{ width: '100%', height: 350, borderRadius: 8, position: 'relative', overflow: 'hidden' }}>
+							<div style={{ position: 'absolute', zIndex: 9999, top: 12, left: 12, background: 'rgba(255,255,255,0.95)', borderRadius: 6, padding: 8 }}>
 								<div style={{ fontSize: 11, fontWeight: 60, marginBottom: 4 }}>图例说明</div>
 								<div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 10 }}>
 									<div><span style={{ color: '#1890ff' }}>———</span> 巡检航线</div>
@@ -246,6 +247,7 @@ export default function DeviceOverviewPage({ devices, planedevices, devicesAll,
 									<div><span style={{ color: '#ff4d4f' }}>■</span> 障碍/禁入区</div>
 								</div>
 							</div>
+							<CesiumMap />
 						</div>
 					</Card>
 
@@ -369,10 +371,15 @@ export default function DeviceOverviewPage({ devices, planedevices, devicesAll,
 										</div>
 
 										<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12, maxHeight: "160px", overflow: "auto", scrollbarWidth: 'thin', scrollbarColor: '#ccc transparent' }}>
-											<div style={{ display: 'flex', justifyContent: 'space-between' }}>
-												<span style={{ color: '#666', fontSize: 12 }}>产品类型</span>
-												<span style={{ fontSize: 12 }}>{getVal(selectedDevice.productName)}</span>
-											</div>
+											{selectedDevice.productName && (
+												<>
+													<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+														<span style={{ color: '#666', fontSize: 12 }}>产品类型</span>
+														<span style={{ fontSize: 12 }}>{getVal(selectedDevice.productName)}</span>
+													</div>
+												</>
+											)}
+
 											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
 												<span style={{ color: '#666', fontSize: 12, whiteSpace: 'nowrap' }}>设备SN</span>
 												<span
diff --git a/src/pages/Agri.jsx b/src/pages/Agri.jsx
index 3dea029..9d8c5bd 100644
--- a/src/pages/Agri.jsx
+++ b/src/pages/Agri.jsx
@@ -69,6 +69,8 @@ export default function Agri() {
 	});
 	const [detectFiles, setDetectFiles] = useState([]);
 	const [selectedHotspot, setSelectedHotspot] = useState(null);
+	const [targetLoading, setTargetLoading] = useState(false);
+	const [hotLoading, setHotLoading] = useState(false);
 
 	const [detectJobId, setDetectJobId] = useState(null);
 	const [detectStatus, setDetectStatus] = useState(null);
@@ -113,6 +115,7 @@ export default function Agri() {
 		}
 	};
 	const handleGetTargetDemo = () => {
+		setTargetLoading(true);
 		getTargetDemo().then((res) => {
 			if (res && res?.jobId) {
 				setDetectJobId(res?.jobId);
@@ -121,6 +124,9 @@ export default function Agri() {
 				//startPolling(res?.data?.jobId);
 				// 添加到历史
 				addToHistory('detect', res?.jobId);
+				setTargetLoading(false);
+
+
 			}
 		})
 		//const res = {
@@ -212,6 +218,7 @@ export default function Agri() {
 		}
 	};
 	const handleGetDemo = () => {
+		setHotLoading(true);
 		//const res = {
 		//	"msg": "操作成功",
 		//	"code": 200,
@@ -4360,6 +4367,8 @@ export default function Agri() {
 		//	}
 		//}
 		getHotDemo().then(res => {
+			setHotLoading(false);
+
 			setSegResult(res);
 			utils.message.success('热成像分析完成');
 			addToHistory('segmentation', res.analysisId || 'seg-' + Date.now());
@@ -4684,8 +4693,13 @@ export default function Agri() {
 				>
 					{polling ? '任务处理中...' : '提交检测任务'}
 				</Button>
-				<Button icon={<PlayCircleOutlined />} onClick={handleGetTargetDemo}>调用服务器样例</Button>
-				<Button icon={<SyncOutlined />} onClick={fetchModels}>刷新模型</Button>
+				<Button
+					icon={<PlayCircleOutlined />}
+					onClick={handleGetTargetDemo}
+					loading={targetLoading}
+				>
+					调用服务器样例
+				</Button>				<Button icon={<SyncOutlined />} onClick={fetchModels}>刷新模型</Button>
 			</Space>
 		</div>
 	);
@@ -4775,8 +4789,13 @@ export default function Agri() {
 				>
 					提交热成像分析
 				</Button>
-				<Button icon={<PlayCircleOutlined />} onClick={handleGetDemo}>调用服务器样例</Button>
-				<Button icon={<HistoryOutlined />}>读取服务器历史</Button>
+				<Button
+					icon={<PlayCircleOutlined />}
+					onClick={handleGetDemo}
+					loading={hotLoading}
+				>
+					调用服务器样例
+				</Button>				<Button icon={<HistoryOutlined />}>读取服务器历史</Button>
 			</Space>
 		</div>
 	);
@@ -4979,7 +4998,7 @@ export default function Agri() {
 					<Col span={12}>
 						<div
 							style={{
-								//background: '#001529',
+								background: '#001529',
 								borderRadius: 8,
 								height: 400,
 								display: 'flex',
@@ -4989,10 +5008,10 @@ export default function Agri() {
 								position: 'relative'
 							}}
 						>
-							{segResult.image?.overlay_image_url && (
+							{segResult?.image?.overlay_image_url && (
 								<img
 									src={hasResult
-										? "http://47.100.102.7:10101" + segResult.image?.overlay_image_url
+										? "http://47.100.102.7:10101" + segResult?.image?.overlay_image_url
 										: URL.createObjectURL(inputFile.originFileObj)
 									}
 									style={{ maxWidth: '100%', maxHeight: '100%' }}