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"
|
||||
)
|
||||
|
||||
with ui.card().classes("w-full p-4 shadow-md"):
|
||||
ui.label("方案对比结果 (点击行查看拓扑详情)").classes(
|
||||
"text-xl font-semibold mb-2"
|
||||
)
|
||||
columns = [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "方案名称",
|
||||
"field": "name",
|
||||
"required": True,
|
||||
"align": "left",
|
||||
},
|
||||
{
|
||||
"name": "cost_wan",
|
||||
"label": "总投资 (万元)",
|
||||
"field": "cost_wan",
|
||||
"sortable": True,
|
||||
},
|
||||
{
|
||||
"name": "loss_kw",
|
||||
"label": "线损 (kW)",
|
||||
"field": "loss_kw",
|
||||
"sortable": True,
|
||||
},
|
||||
{
|
||||
"name": "note",
|
||||
"label": "备注",
|
||||
"field": "note",
|
||||
"align": "left",
|
||||
},
|
||||
]
|
||||
# 使用内置的 selection='single' 结合行点击事件实现背景高亮
|
||||
# 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类
|
||||
refs["results_table"] = ui.table(
|
||||
columns=columns,
|
||||
rows=[],
|
||||
selection="single",
|
||||
row_key="original_name",
|
||||
).classes("w-full hide-selection-column")
|
||||
refs["results_table"].on("row-click", handle_row_click)
|
||||
with ui.card().classes("w-full p-0 shadow-md overflow-hidden"):
|
||||
with ui.expansion(
|
||||
"方案对比结果 (点击行查看拓扑详情)", icon="analytics", value=True
|
||||
).classes("w-full").props("header-class=\"text-xl font-semibold\""):
|
||||
columns = [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "方案名称",
|
||||
"field": "name",
|
||||
"required": True,
|
||||
"align": "left",
|
||||
},
|
||||
{
|
||||
"name": "cost_wan",
|
||||
"label": "总投资 (万元)",
|
||||
"field": "cost_wan",
|
||||
"sortable": True,
|
||||
},
|
||||
{
|
||||
"name": "loss_kw",
|
||||
"label": "线损 (kW)",
|
||||
"field": "loss_kw",
|
||||
"sortable": True,
|
||||
},
|
||||
{
|
||||
"name": "note",
|
||||
"label": "备注",
|
||||
"field": "note",
|
||||
"align": "left",
|
||||
},
|
||||
]
|
||||
# 使用内置的 selection='single' 结合行点击事件实现背景高亮
|
||||
# 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类
|
||||
refs["results_table"] = ui.table(
|
||||
columns=columns,
|
||||
rows=[],
|
||||
selection="single",
|
||||
row_key="original_name",
|
||||
).classes("w-full hide-selection-column")
|
||||
refs["results_table"].on("row-click", handle_row_click)
|
||||
with ui.card().classes("w-full p-4 shadow-md"):
|
||||
ui.label("拓扑可视化").classes("text-xl font-semibold mb-2")
|
||||
refs["plot_container"] = ui.column().classes("w-full items-center")
|
||||
|
||||
Reference in New Issue
Block a user