修复代码错误;修复属性查询无时间轴情况下也能查询的问题;修复工具栏定位错误的问题
This commit is contained in:
@@ -77,9 +77,9 @@ export default function Home() {
|
||||
return (
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<MapComponent>
|
||||
<MapToolbar />
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[800px] opacity-90 hover:opacity-100 transition-opacity duration-300">
|
||||
<Timeline />
|
||||
<MapToolbar />
|
||||
</div>
|
||||
</MapComponent>
|
||||
<SCADADeviceList
|
||||
|
||||
@@ -290,7 +290,7 @@ const Timeline: React.FC = () => {
|
||||
// 添加 useEffect 来监听 currentTime 和 selectedDate 的变化,并获取数据
|
||||
useEffect(() => {
|
||||
// 首次加载时,如果 selectedDate 或 currentTime 未定义,则跳过执行,避免报错
|
||||
if (selectedDate && currentTime !== undefined) {
|
||||
if (selectedDate && currentTime !== undefined && currentTime !== -1) {
|
||||
// 检查至少一个属性有值
|
||||
const junctionProperties = junctionText;
|
||||
const pipeProperties = pipeText;
|
||||
@@ -311,6 +311,8 @@ const Timeline: React.FC = () => {
|
||||
|
||||
// 组件卸载时清理定时器和防抖
|
||||
useEffect(() => {
|
||||
setCurrentTime(0); // 组件卸载时重置时间
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
|
||||
@@ -454,8 +454,8 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
|
||||
setComputedProperties({});
|
||||
}
|
||||
};
|
||||
|
||||
queryComputedProperties();
|
||||
// 仅当 currentTime 有效时查询
|
||||
if (currentTime !== -1) queryComputedProperties();
|
||||
}, [highlightFeature, currentTime, selectedDate]);
|
||||
|
||||
// 从要素属性中提取属性面板需要的数据
|
||||
|
||||
@@ -104,7 +104,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
|
||||
const [map, setMap] = useState<OlMap>();
|
||||
// currentCalData 用于存储当前计算结果
|
||||
const [currentTime, setCurrentTime] = useState<number>(0);
|
||||
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认-1表示未选择时间
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
|
||||
// const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
|
||||
|
||||
@@ -632,7 +632,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
|
||||
<div className="relative w-full h-full">
|
||||
<div ref={mapRef} className="w-full h-full"></div>
|
||||
<MapTools />
|
||||
|
||||
|
||||
{children}
|
||||
</div>
|
||||
<canvas id="deck-canvas" />
|
||||
|
||||
@@ -67,6 +67,9 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
||||
const [internalSelection, setInternalSelection] = useState<string[]>([]);
|
||||
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const activeSelection = selectedDeviceIds ?? internalSelection;
|
||||
|
||||
@@ -76,6 +79,14 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
}
|
||||
}, [selectedDeviceIds]);
|
||||
|
||||
// 添加 useEffect 来延迟调用 onSelectionChange,避免在渲染时触发父组件的 setState
|
||||
useEffect(() => {
|
||||
if (pendingSelection !== null) {
|
||||
onSelectionChange?.(pendingSelection);
|
||||
setPendingSelection(null);
|
||||
}
|
||||
}, [pendingSelection, onSelectionChange]);
|
||||
|
||||
// 获取设备类型列表
|
||||
const deviceTypes = useMemo(() => {
|
||||
const types = Array.from(new Set(devices.map((device) => device.type)));
|
||||
@@ -154,7 +165,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||||
? []
|
||||
: [device.id];
|
||||
|
||||
onSelectionChange?.(nextSelection);
|
||||
setPendingSelection(nextSelection); // 设置待处理的 selection,延迟调用
|
||||
return nextSelection;
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user