[feat]:[FL-133][优化雷电流幅值统计页面的事件详情展示]
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
chengkai3
@@ -618,134 +618,185 @@ export default function AdminLightningCurrentsPage() {
|
||||
destroyOnClose
|
||||
>
|
||||
{selectedEventForModal && (
|
||||
<Space direction="vertical" size={12} className="w-full">
|
||||
<Descriptions bordered size="small" column={3}>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
事件编号{" "}
|
||||
<AntTooltip title="每次导入时自动生成的唯一编号（格式：LC-时间戳-随机码），也可在导入时手动指定。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNullable(selectedEventForModal.event_id)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
峰值电流(kA){" "}
|
||||
<AntTooltip title="波形序列中绝对值最大的电流值（kA），代表该次雷击的最强瞬间。是衡量雷击强度的核心指标。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.peak_current_ka, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="绝对峰值(kA)">{formatNumber(selectedEventForModal.peak_abs_current_ka, 3)}</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
波形分类{" "}
|
||||
<AntTooltip title="将实际波形的波前时间（T1）和半峰值时间（T2）与 IEC 标准波形模板匹配，归入最接近的分类：10/350（T1=10μs, T2=350μs，典型直击雷波形）、8/20（T1=8μs, T2=20μs，典型感应雷/测试波形）、1.2/50（T1=1.2μs, T2=50μs，典型操作冲击波形）。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNullable(selectedEventForModal.wave_shape)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
波前时间 T1(us){" "}
|
||||
<AntTooltip title="电流从峰值的 10% 上升到 90% 所需时间的 1.25 倍（μs），反映雷电流上升的陡度。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.wavefront_time_t1_us, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
半峰值时间 T2(us){" "}
|
||||
<AntTooltip title="从虚拟零点到电流下降到峰值 50% 的时间（μs），反映脉冲宽度。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.half_value_time_t2_us, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
陡度(kA/us){" "}
|
||||
<AntTooltip title="波形中电流变化率的最大值（kA/μs），影响感应过电压的大小。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.steepness_ka_per_us, 6)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
I²t 作用积分(J/Ω){" "}
|
||||
<AntTooltip title="电流平方对时间的积分（J/Ω），衡量雷电流的热效应能量。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.action_integral_j_ohm, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
采样间隔(us){" "}
|
||||
<AntTooltip title="采样点之间的时间间隔（μs）。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.sample_interval_us, 6)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="采样频率(Hz)">{formatNumber(selectedEventForModal.sampling_frequency_hz, 2)}</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
极性{" "}
|
||||
<AntTooltip title="雷电流的主导方向。自然界约 90% 为负极性雷击，正极性雷击虽少但峰值更大、危害更强。正极性：正峰值大于负峰值；负极性：负峰值大于正峰值；混合：正负峰值相近。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatPolarity(selectedEventForModal.polarity)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
回击数{" "}
|
||||
<AntTooltip title="一次雷击过程中检测到的多次放电次数。一次雷击通常包含 3~5 次回击，主峰最高，后续回击会产生累积热效应。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{selectedEventForModal.stroke_count}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
采样点数{" "}
|
||||
<AntTooltip title="导入波形文件中解析出的数值行数，即该次雷击波形的时序采样长度。点数越多，波形记录越精细。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{selectedEventForModal.sample_count}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="城市">{formatNullable(selectedEventForModal.city)}</Descriptions.Item>
|
||||
<Descriptions.Item label="经纬度">
|
||||
{selectedEventForModal.longitude !== null && selectedEventForModal.latitude !== null
|
||||
? `${selectedEventForModal.longitude}, ${selectedEventForModal.latitude}`
|
||||
: "-"}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="传感器">{formatNullable(selectedEventForModal.sensor_model)}</Descriptions.Item>
|
||||
<Descriptions.Item label="安装位置">{formatNullable(selectedEventForModal.install_position)}</Descriptions.Item>
|
||||
<Descriptions.Item label="雷暴等级">{formatNullable(selectedEventForModal.weather_level)}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Space direction="vertical" size={16} className="w-full">
|
||||
<div>
|
||||
<Typography.Title level={5}>基本信息</Typography.Title>
|
||||
<Descriptions bordered size="small" column={2}>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
事件编号{" "}
|
||||
<AntTooltip title="每次导入时自动生成的唯一编号（格式：LC-时间戳-随机码），也可在导入时手动指定。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNullable(selectedEventForModal.event_id)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="来源">{selectedEventForModal.is_synthetic ? "合成" : "实测"}</Descriptions.Item>
|
||||
<Descriptions.Item label="城市">{formatNullable(selectedEventForModal.city)}</Descriptions.Item>
|
||||
<Descriptions.Item label="经纬度">
|
||||
{selectedEventForModal.longitude !== null && selectedEventForModal.latitude !== null
|
||||
? `${selectedEventForModal.longitude}, ${selectedEventForModal.latitude}`
|
||||
: "-"}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
||||
<Typography.Text type="secondary">
|
||||
多回击峰值点：{JSON.stringify(selectedEventForModal.stroke_peaks_json)}
|
||||
</Typography.Text>
|
||||
<div>
|
||||
<Typography.Title level={5}>波形特征参数</Typography.Title>
|
||||
<Descriptions bordered size="small" column={2}>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
峰值电流(kA){" "}
|
||||
<AntTooltip title="波形序列中绝对值最大的电流值（kA），代表该次雷击的最强瞬间。是衡量雷击强度的核心指标。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.peak_current_ka, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="绝对峰值(kA)">{formatNumber(selectedEventForModal.peak_abs_current_ka, 3)}</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
波形分类{" "}
|
||||
<AntTooltip title="将实际波形的波前时间（T1）和半峰值时间（T2）与 IEC 标准波形模板匹配，归入最接近的分类：10/350（T1=10μs, T2=350μs，典型直击雷波形）、8/20（T1=8μs, T2=20μs，典型感应雷/测试波形）、1.2/50（T1=1.2μs, T2=50μs，典型操作冲击波形）。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNullable(selectedEventForModal.wave_shape)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
极性{" "}
|
||||
<AntTooltip title="雷电流的主导方向。自然界约 90% 为负极性雷击，正极性雷击虽少但峰值更大、危害更强。正极性：正峰值大于负峰值；负极性：负峰值大于正峰值；混合：正负峰值相近。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatPolarity(selectedEventForModal.polarity)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
波前时间 T1(us){" "}
|
||||
<AntTooltip title="电流从峰值的 10% 上升到 90% 所需时间的 1.25 倍（μs），反映雷电流上升的陡度。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.wavefront_time_t1_us, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
半峰值时间 T2(us){" "}
|
||||
<AntTooltip title="从虚拟零点到电流下降到峰值 50% 的时间（μs），反映脉冲宽度。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.half_value_time_t2_us, 3)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
陡度(kA/us){" "}
|
||||
<AntTooltip title="波形中电流变化率的最大值（kA/μs），影响感应过电压的大小。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.steepness_ka_per_us, 6)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
I²t 作用积分(J/Ω){" "}
|
||||
<AntTooltip title="电流平方对时间的积分（J/Ω），衡量雷电流的热效应能量。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{formatNumber(selectedEventForModal.action_integral_j_ohm, 3)}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Title level={5}>多回击峰值分布</Typography.Title>
|
||||
{selectedEventForModal.stroke_peaks_json && selectedEventForModal.stroke_peaks_json.length > 0 ? (
|
||||
<>
|
||||
<Descriptions bordered size="small" column={1} style={{ marginBottom: 12 }}>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
回击数{" "}
|
||||
<AntTooltip title="一次雷击过程中检测到的多次放电次数。一次雷击通常包含 3~5 次回击，主峰最高，后续回击会产生累积热效应。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{selectedEventForModal.stroke_count}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<LineChart data={selectedEventForModal.stroke_peaks_json.map((peak: any, idx: number) => ({
|
||||
index: idx + 1,
|
||||
time_us: peak.time_us || 0,
|
||||
current_ka: peak.current_ka || 0,
|
||||
}))}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="index" label={{ value: "回击序号", position: "insideBottom", offset: -5 }} />
|
||||
<YAxis label={{ value: "峰值电流 (kA)", angle: -90, position: "insideLeft" }} />
|
||||
<Tooltip
|
||||
formatter={(value: any, name?: string | number) => {
|
||||
if (name === "current_ka") return [formatNumber(value, 3), "峰值电流 (kA)"];
|
||||
if (name === "time_us") return [formatNumber(value, 2), "时间 (μs)"];
|
||||
return [value, name];
|
||||
}}
|
||||
labelFormatter={(label) => `回击 ${label}`}
|
||||
/>
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="current_ka" stroke="#1890ff" name="峰值电流 (kA)" strokeWidth={2} dot={{ r: 4 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
) : (
|
||||
<Empty description="暂无多回击数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Title level={5}>采样参数</Typography.Title>
|
||||
<Descriptions bordered size="small" column={2}>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
采样点数{" "}
|
||||
<AntTooltip title="导入波形文件中解析出的数值行数，即该次雷击波形的时序采样长度。点数越多，波形记录越精细。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
}>
|
||||
{selectedEventForModal.sample_count}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="采样频率(Hz)">{formatNumber(selectedEventForModal.sampling_frequency_hz, 2)}</Descriptions.Item>
|
||||
<Descriptions.Item label={
|
||||
<span>
|
||||
采样间隔(us){" "}
|
||||
<AntTooltip title="采样点之间的时间间隔（μs）。">
|
||||
<QuestionCircleOutlined style={{ color: "#999", fontSize: "12px" }} />
|
||||
</AntTooltip>
|
||||
</span>
|
||||
} span={2}>
|
||||
{formatNumber(selectedEventForModal.sample_interval_us, 6)}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Title level={5}>环境信息</Typography.Title>
|
||||
<Descriptions bordered size="small" column={2}>
|
||||
<Descriptions.Item label="传感器">{formatNullable(selectedEventForModal.sensor_model)}</Descriptions.Item>
|
||||
<Descriptions.Item label="安装位置">{formatNullable(selectedEventForModal.install_position)}</Descriptions.Item>
|
||||
<Descriptions.Item label="雷暴等级" span={2}>{formatNullable(selectedEventForModal.weather_level)}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</Space>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user