feat: 方案对比结果区域改为可折叠显示
- 将方案对比结果卡片改为可折叠的expansion组件 - 添加analytics图标,提升界面美观度 - 默认展开状态,方便用户查看 - 优化卡片样式,移除内边距并添加overflow-hidden
This commit is contained in:
80
gui.py
80
gui.py
@@ -926,46 +926,46 @@ def index():
|
|||||||
"text-gray-500 italic"
|
"text-gray-500 italic"
|
||||||
)
|
)
|
||||||
|
|
||||||
with ui.card().classes("w-full p-4 shadow-md"):
|
with ui.card().classes("w-full p-0 shadow-md overflow-hidden"):
|
||||||
ui.label("方案对比结果 (点击行查看拓扑详情)").classes(
|
with ui.expansion(
|
||||||
"text-xl font-semibold mb-2"
|
"方案对比结果 (点击行查看拓扑详情)", icon="analytics", value=True
|
||||||
)
|
).classes("w-full").props("header-class=\"text-xl font-semibold\""):
|
||||||
columns = [
|
columns = [
|
||||||
{
|
{
|
||||||
"name": "name",
|
"name": "name",
|
||||||
"label": "方案名称",
|
"label": "方案名称",
|
||||||
"field": "name",
|
"field": "name",
|
||||||
"required": True,
|
"required": True,
|
||||||
"align": "left",
|
"align": "left",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "cost_wan",
|
"name": "cost_wan",
|
||||||
"label": "总投资 (万元)",
|
"label": "总投资 (万元)",
|
||||||
"field": "cost_wan",
|
"field": "cost_wan",
|
||||||
"sortable": True,
|
"sortable": True,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "loss_kw",
|
"name": "loss_kw",
|
||||||
"label": "线损 (kW)",
|
"label": "线损 (kW)",
|
||||||
"field": "loss_kw",
|
"field": "loss_kw",
|
||||||
"sortable": True,
|
"sortable": True,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "note",
|
"name": "note",
|
||||||
"label": "备注",
|
"label": "备注",
|
||||||
"field": "note",
|
"field": "note",
|
||||||
"align": "left",
|
"align": "left",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
# 使用内置的 selection='single' 结合行点击事件实现背景高亮
|
# 使用内置的 selection='single' 结合行点击事件实现背景高亮
|
||||||
# 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类
|
# 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类
|
||||||
refs["results_table"] = ui.table(
|
refs["results_table"] = ui.table(
|
||||||
columns=columns,
|
columns=columns,
|
||||||
rows=[],
|
rows=[],
|
||||||
selection="single",
|
selection="single",
|
||||||
row_key="original_name",
|
row_key="original_name",
|
||||||
).classes("w-full hide-selection-column")
|
).classes("w-full hide-selection-column")
|
||||||
refs["results_table"].on("row-click", handle_row_click)
|
refs["results_table"].on("row-click", handle_row_click)
|
||||||
with ui.card().classes("w-full p-4 shadow-md"):
|
with ui.card().classes("w-full p-4 shadow-md"):
|
||||||
ui.label("拓扑可视化").classes("text-xl font-semibold mb-2")
|
ui.label("拓扑可视化").classes("text-xl font-semibold mb-2")
|
||||||
refs["plot_container"] = ui.column().classes("w-full items-center")
|
refs["plot_container"] = ui.column().classes("w-full items-center")
|
||||||
|
|||||||
Reference in New Issue
Block a user