更新属性面板为可拖动，优化工具栏激活逻辑
This commit is contained in:
@@ -169,7 +169,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
|
||||
{
|
||||
name: "Hydraulic Simulation",
|
||||
meta: {
|
||||
icon: <MdWater className="w-6 h-6" />,
|
||||
// icon: <MdWater className="w-6 h-6" />,
|
||||
label: "事件模拟",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -986,7 +986,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
<Box
|
||||
className="absolute top-20 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
|
||||
onClick={() => setIsExpanded(true)}
|
||||
sx={{ zIndex: 1300 }}
|
||||
sx={{ zIndex: 1290 }}
|
||||
>
|
||||
<Box className="flex flex-col items-center py-3 px-3 gap-1">
|
||||
<ShowChart className="text-[#257DD4] w-5 h-5" />
|
||||
|
||||
@@ -129,14 +129,17 @@ const fetchFromBackend = async (
|
||||
"raw"
|
||||
);
|
||||
} else if (type === "scheme") {
|
||||
// 查询策略模拟值、清洗值和监测值
|
||||
const [cleanedRes, rawRes, schemeSimRes] = await Promise.all([
|
||||
// 查询策略模拟值、实时模拟值、清洗值和监测值
|
||||
const [cleanedRes, rawRes, simulationRes, schemeSimRes] = await Promise.all([
|
||||
apiFetch(cleanedDataUrl)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.catch(() => null),
|
||||
apiFetch(rawDataUrl)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.catch(() => null),
|
||||
apiFetch(simulationDataUrl)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.catch(() => null),
|
||||
apiFetch(schemeSimulationDataUrl)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.catch(() => null),
|
||||
@@ -146,40 +149,18 @@ const fetchFromBackend = async (
|
||||
// 如果清洗数据有值，则不显示原始监测值
|
||||
const rawData =
|
||||
cleanedData.length > 0 ? [] : transformBackendData(rawRes, featureIds);
|
||||
const simulationData = transformBackendData(simulationRes, featureIds);
|
||||
const schemeSimData = transformBackendData(schemeSimRes, featureIds);
|
||||
|
||||
// 合并三组数据
|
||||
const timeMap = new Map<string, Record<string, number | null>>();
|
||||
|
||||
[cleanedData, rawData, schemeSimData].forEach((data, index) => {
|
||||
const suffix = ["clean", "raw", "scheme_sim"][index];
|
||||
data.forEach((point) => {
|
||||
if (!timeMap.has(point.timestamp)) {
|
||||
timeMap.set(point.timestamp, {});
|
||||
}
|
||||
const values = timeMap.get(point.timestamp)!;
|
||||
featureIds.forEach((deviceId) => {
|
||||
const value = point.values[deviceId];
|
||||
if (value !== undefined) {
|
||||
values[`${deviceId}_${suffix}`] = value;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const result = Array.from(timeMap.entries()).map(
|
||||
([timestamp, values]) => ({
|
||||
timestamp,
|
||||
values,
|
||||
})
|
||||
return mergeMultipleTimeSeriesData(
|
||||
[
|
||||
{ data: cleanedData, suffix: "clean" },
|
||||
{ data: rawData, suffix: "raw" },
|
||||
{ data: simulationData, suffix: "sim" },
|
||||
{ data: schemeSimData, suffix: "scheme_sim" },
|
||||
],
|
||||
featureIds
|
||||
);
|
||||
|
||||
result.sort(
|
||||
(a, b) =>
|
||||
new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
|
||||
);
|
||||
|
||||
return result;
|
||||
} else {
|
||||
// realtime: 查询模拟值、清洗值和监测值
|
||||
const [cleanedRes, rawRes, simulationRes] = await Promise.all([
|
||||
@@ -336,6 +317,42 @@ const mergeTimeSeriesData = (
|
||||
return result;
|
||||
};
|
||||
|
||||
const mergeMultipleTimeSeriesData = (
|
||||
datasets: Array<{
|
||||
data: TimeSeriesPoint[];
|
||||
suffix: string;
|
||||
}>,
|
||||
deviceIds: string[]
|
||||
): TimeSeriesPoint[] => {
|
||||
const timeMap = new Map<string, Record<string, number | null>>();
|
||||
|
||||
datasets.forEach(({ data, suffix }) => {
|
||||
data.forEach((point) => {
|
||||
if (!timeMap.has(point.timestamp)) {
|
||||
timeMap.set(point.timestamp, {});
|
||||
}
|
||||
const values = timeMap.get(point.timestamp)!;
|
||||
deviceIds.forEach((deviceId) => {
|
||||
const value = point.values[deviceId];
|
||||
if (value !== undefined) {
|
||||
values[`${deviceId}_${suffix}`] = value;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const result = Array.from(timeMap.entries()).map(([timestamp, values]) => ({
|
||||
timestamp,
|
||||
values,
|
||||
}));
|
||||
|
||||
result.sort(
|
||||
(a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
|
||||
);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: string) =>
|
||||
dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
|
||||
|
||||
@@ -537,7 +554,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
const suffixes = [
|
||||
{ key: "clean", name: "清洗值" },
|
||||
{ key: "raw", name: "监测值" },
|
||||
{ key: "sim", name: "模拟值" },
|
||||
{ key: "sim", name: "实时模拟值" },
|
||||
{ key: "scheme_sim", name: "方案模拟值" },
|
||||
];
|
||||
|
||||
@@ -643,32 +660,46 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
: suffix === "raw"
|
||||
? "监测值"
|
||||
: suffix === "sim"
|
||||
? "模拟"
|
||||
? "实时模拟"
|
||||
: "方案模拟";
|
||||
|
||||
series.push({
|
||||
name: `${id} (${displayName})`,
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
symbol:
|
||||
suffix === "clean"
|
||||
? "circle"
|
||||
: suffix === "raw"
|
||||
? "diamond"
|
||||
: "none",
|
||||
symbolSize: suffix === "clean" || suffix === "raw" ? 7 : 0,
|
||||
showSymbol: suffix === "clean" || suffix === "raw",
|
||||
sampling: "lttb",
|
||||
connectNulls: true,
|
||||
connectNulls: suffix !== "clean" && suffix !== "raw",
|
||||
itemStyle: {
|
||||
color: colors[(index * 4 + sIndex) % colors.length],
|
||||
},
|
||||
data: dataset.map((item) => item[key]),
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colors[(index * 4 + sIndex) % colors.length],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 255, 255, 0)",
|
||||
},
|
||||
]),
|
||||
opacity: 0.3,
|
||||
},
|
||||
lineStyle:
|
||||
suffix === "clean" || suffix === "raw"
|
||||
? { width: 0 }
|
||||
: undefined,
|
||||
areaStyle:
|
||||
suffix === "clean" || suffix === "raw"
|
||||
? undefined
|
||||
: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colors[(index * 4 + sIndex) % colors.length],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 255, 255, 0)",
|
||||
},
|
||||
]),
|
||||
opacity: 0.3,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -840,7 +871,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
border: "none",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
zIndex: 1300,
|
||||
zIndex: 1290,
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
"&:hover": {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
|
||||
import React, { useRef } from "react";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
interface BaseProperty {
|
||||
label: string;
|
||||
@@ -28,6 +31,8 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
||||
type = "未知类型",
|
||||
properties = [],
|
||||
}) => {
|
||||
const draggableRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const formatValue = (property: BaseProperty) => {
|
||||
if (property.formatter) {
|
||||
return property.formatter(property.value);
|
||||
@@ -50,162 +55,16 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-1300 opacity-95 hover:opacity-100 transition-all duration-300 ">
|
||||
{/* 头部 */}
|
||||
<div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="text-lg font-semibold">属性面板</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
{!id ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
|
||||
<Draggable nodeRef={draggableRef} handle=".drag-handle">
|
||||
<div
|
||||
ref={draggableRef}
|
||||
className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-1300 opacity-95 hover:opacity-100"
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="drag-handle flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white cursor-move select-none">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
className="w-16 h-16 mb-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm">暂无属性信息</p>
|
||||
<p className="text-xs mt-1">请选择一个要素以查看其属性</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{/* ID 属性 */}
|
||||
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
|
||||
ID
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
|
||||
{id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 类型属性 */}
|
||||
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
|
||||
类型
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
|
||||
{type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 其他属性（包含二级表格） */}
|
||||
{properties.map((property, index) => {
|
||||
// 二级表格
|
||||
if ("type" in property && property.type === "table") {
|
||||
return (
|
||||
<div
|
||||
key={`table-${index}`}
|
||||
className="group rounded-lg p-3 transition-all duration-200 bg-gray-50 hover:bg-gray-100"
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-gray-600">
|
||||
{property.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-4 mt-2 border border-gray-300 rounded-md overflow-hidden shadow-sm">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-gray-200 text-gray-700">
|
||||
<tr>
|
||||
{property.columns.map((col, ci) => (
|
||||
<th
|
||||
key={ci}
|
||||
className="px-3 py-2 text-left font-semibold"
|
||||
>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-300">
|
||||
{property.rows.map((row, ri) => (
|
||||
<tr key={ri} className="bg-white hover:bg-gray-50">
|
||||
{row.map((cell, cci) => (
|
||||
<td
|
||||
key={cci}
|
||||
className="px-3 py-2 text-gray-800"
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 普通属性
|
||||
const base = property as BaseProperty;
|
||||
const isImportant = isImportantKeys.includes(base.label);
|
||||
return (
|
||||
<div
|
||||
key={`prop-${index}`}
|
||||
className={`group rounded-lg p-3 transition-all duration-200 ${
|
||||
isImportant
|
||||
? "bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500"
|
||||
: "bg-gray-50 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span
|
||||
className={`font-medium text-xs uppercase tracking-wide ${
|
||||
isImportant ? "text-blue-700" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{base.label}
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-semibold text-right flex-1 ${
|
||||
isImportant ? "text-blue-900" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{formatValue(base)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 底部统计区域 */}
|
||||
<div className="px-5 py-3 bg-gray-50 border-t border-gray-200">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-600 flex items-center gap-1">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -214,20 +73,172 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
共 {totalProps} 个属性
|
||||
</span>
|
||||
{id && (
|
||||
<span className="text-green-600 flex items-center gap-1 font-medium">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
|
||||
已选中
|
||||
</span>
|
||||
<h3 className="text-lg font-semibold">属性面板</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
{!id ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
|
||||
<svg
|
||||
className="w-16 h-16 mb-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm">暂无属性信息</p>
|
||||
<p className="text-xs mt-1">请选择一个要素以查看其属性</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{/* ID 属性 */}
|
||||
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
|
||||
ID
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
|
||||
{id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 类型属性 */}
|
||||
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
|
||||
类型
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
|
||||
{type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 其他属性（包含二级表格） */}
|
||||
{properties.map((property, index) => {
|
||||
// 二级表格
|
||||
if ("type" in property && property.type === "table") {
|
||||
return (
|
||||
<div
|
||||
key={`table-${index}`}
|
||||
className="group rounded-lg p-3 transition-all duration-200 bg-gray-50 hover:bg-gray-100"
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span className="font-medium text-xs uppercase tracking-wide text-gray-600">
|
||||
{property.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-4 mt-2 border border-gray-300 rounded-md overflow-hidden shadow-sm">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-gray-200 text-gray-700">
|
||||
<tr>
|
||||
{property.columns.map((col, ci) => (
|
||||
<th
|
||||
key={ci}
|
||||
className="px-3 py-2 text-left font-semibold"
|
||||
>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-300">
|
||||
{property.rows.map((row, ri) => (
|
||||
<tr key={ri} className="bg-white hover:bg-gray-50">
|
||||
{row.map((cell, cci) => (
|
||||
<td
|
||||
key={cci}
|
||||
className="px-3 py-2 text-gray-800"
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 普通属性
|
||||
const base = property as BaseProperty;
|
||||
const isImportant = isImportantKeys.includes(base.label);
|
||||
return (
|
||||
<div
|
||||
key={`prop-${index}`}
|
||||
className={`group rounded-lg p-3 transition-all duration-200 ${
|
||||
isImportant
|
||||
? "bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500"
|
||||
: "bg-gray-50 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3">
|
||||
<span
|
||||
className={`font-medium text-xs uppercase tracking-wide ${
|
||||
isImportant ? "text-blue-700" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{base.label}
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-semibold text-right flex-1 ${
|
||||
isImportant ? "text-blue-900" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{formatValue(base)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* 底部统计区域 */}
|
||||
<div className="px-5 py-3 bg-gray-50 border-t border-gray-200">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-600 flex items-center gap-1">
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
/>
|
||||
</svg>
|
||||
共 {totalProps} 个属性
|
||||
</span>
|
||||
{id && (
|
||||
<span className="text-green-600 flex items-center gap-1 font-medium">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
|
||||
已选中
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -402,15 +402,8 @@ const Toolbar: React.FC<ToolbarProps> = ({
|
||||
deactivateTool(tool);
|
||||
setActiveTools((prev) => prev.filter((t) => t !== tool));
|
||||
} else {
|
||||
// 如果当前工具未激活，先关闭所有其他工具，然后激活当前工具
|
||||
// 关闭所有面板（但保持样式编辑器状态）
|
||||
closeAllPanelsExceptStyle();
|
||||
|
||||
// 取消激活所有非样式工具
|
||||
setActiveTools((prev) => {
|
||||
const styleActive = prev.includes("style");
|
||||
return styleActive ? ["style", tool] : [tool];
|
||||
});
|
||||
// 如果当前工具未激活，保留其他已打开工具，仅新增当前工具
|
||||
setActiveTools((prev) => [...prev, tool]);
|
||||
|
||||
// 激活当前工具并打开对应面板
|
||||
activateTool(tool);
|
||||
@@ -422,14 +415,18 @@ const Toolbar: React.FC<ToolbarProps> = ({
|
||||
switch (tool) {
|
||||
case "info":
|
||||
setShowPropertyPanel(false);
|
||||
setHighlightFeatures([]);
|
||||
if (!activeTools.includes("history")) {
|
||||
setHighlightFeatures([]);
|
||||
}
|
||||
break;
|
||||
case "draw":
|
||||
setShowDrawPanel(false);
|
||||
break;
|
||||
case "history":
|
||||
setShowHistoryPanel(false);
|
||||
setHighlightFeatures([]);
|
||||
if (!activeTools.includes("info")) {
|
||||
setHighlightFeatures([]);
|
||||
}
|
||||
setChatPanelFeatureInfos(null);
|
||||
setChatPanelTimeRange(null);
|
||||
break;
|
||||
@@ -452,16 +449,6 @@ const Toolbar: React.FC<ToolbarProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭所有面板（除了样式编辑器）
|
||||
const closeAllPanelsExceptStyle = () => {
|
||||
setShowPropertyPanel(false);
|
||||
setHighlightFeatures([]);
|
||||
setShowDrawPanel(false);
|
||||
setShowHistoryPanel(false);
|
||||
setChatPanelFeatureInfos(null);
|
||||
setChatPanelTimeRange(null);
|
||||
// 样式编辑器保持其当前状态，不自动关闭
|
||||
};
|
||||
const [computedProperties, setComputedProperties] = useState<
|
||||
Record<string, any>
|
||||
>({});
|
||||
|
||||
Reference in New Issue
Block a user