一、需求背景
随着港口运营规模的不断扩大与信息化水平的提升，传统的数据报表与分散监控方式已难以满足实时感知、智能分析与高效决策的管理需求。港口管理部门亟需一种能够集中展示作业动态、实时监测异常情况、直观反映运营效率的数据可视化大屏解决方案。港口作业数据量大、指标多样、关联复杂，因此需要通过可视化手段，构建一个集数据整合、智能预警与交互分析于一体的运营指挥大屏。
二、大屏介绍
港口作业分析大屏旨在实现港口核心运营数据的全景可视化、实时监测与智能交互，主要包括以下核心模块：
- 告警信息中心：实时呈现港口异常事件，支持一键穿透处理；
- 船舶状态监测：通过表格与进度条直观展示船舶作业进度与吨位分布；
- 泊位利用率分析：通过指标卡与页签联动，实现多港口数据对比；
- 作业运行分析：支持船只类型与货物类型的图表下钻与切换展示。
大屏通过多种图表组合、个性化样式设计与灵活的交互配置，实现了数据的高效传达与操作闭环。
三、搭建步骤
通过smardaten构建港口作业分析大屏，仅需以下四个核心步骤：
- 大屏框架生成：利用AI指令快速生成大屏布局、图表与样式；
- 样式优化：根据业务需求删减非必要指标，补充缺失模块并美化样式；
- 组件配置与绑定：拖拽图表与交互组件，绑定数据资产并配置显示规则；
- 交互事件配置：设置点击下钻、页签筛选、开关切换等交互逻辑，实现数据联动。
四、大屏设计
4.1、AI生成大屏
进入应用设计界面，唤起右下角的AI助手，输入大屏生成指令：“生成一个管理港口作业的大屏，包含货物吞吐量、船舶调度、泊位利用率等多个模块指标”
输入大屏生成指令后，系统便会根据业务场景，完成大屏展示字段、所需图表、整体样式的设计工作。
双击进入大屏配置后台，我们观察后发现，AI不仅精准还原了我们要求展示的全部核心指标，而且其生成的布局配色专业、图表类型选用得当，整体视觉效果与可用性均达到了较高水准。
接下来，我们仅需调整部分展示内容，并补充图表交互，即可快速投入实际业务使用。
4.2、船舶状态监测
在完成大屏基础框架搭建后，我们发现缺少"船舶状态监测"这一核心业务场景。
首先，通过AI指令快速删除原布局中不重要的指标项：“删除货物吞吐量分布、总吞吐量、港口任务分布、完成任务数、装卸背景、装卸标题组件”
随后拖入表格组件，绑定船舶实时数据资产，手动隐藏"国籍"、"代理公司"等非核心字段，确保表格信息聚焦。
然后我们利用AI调整表格尺寸：“调整普通表格宽度为914、高度为236”
在样式优化方面，我们进行了多维度配置：
- 表头设置深色背景与白色加粗字体，文字居中显示，增强视觉层次感
- 为表格的奇数行和偶数行分别设置不同背景色，提升数据行的可读性
- 将"作业进度"列切换为"进度条"可视化模式，使得完成比例一目了然
- 为快速识别大吨位船舶，我们设置了特殊样式规则：当"吨数"字段值大于200时，该数字自动显示为醒目的红色并加粗
| |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
经过这一系列配置，一个数据清晰、视觉直观、重点突出的船舶状态监测表格便已完成，实现了对在港船舶作业情况的实时监控与重点船舶的快速识别。
4.3、港口告警信息
在屏幕左侧区域的告警信息模块，我们采用画布组件实现更自由的布局与更直观的视觉呈现。
双击进入画布配置界面，首先调整画布尺寸与间隔，并拖入告警标题、触发时间、发生位置等核心字段，逐一配置字体大小、颜色
接下来，我们为每个告警字段配置了交互事件：点击任一告警信息，即可一键穿透至后台的告警处理列表，直接进行派单或关闭等处置操作，形成了从全局监控到精准处理的完整闭环。
针对"系统异常"这类高优先级告警，我们专门新增独立画布，设置醒目的红色字体与故障图标，并通过显示条件设置实现两类告警画布的差异化呈现。
如此一来，不仅实现了告警信息的智能化展示，更确保了重点异常能够得到优先关注与快速处置。
4.4、作业效率排行
在大屏右下角，我们用排行榜组件直观呈现各作业单位的效率竞争态势，重点优化了视觉呈现效果：
- 调整柱状图宽度至舒适比例，确保数据对比清晰直观
- 采用蓝-青渐变色系映射效率值高低
- 将所有数值文字统一设置为同色系，并置于柱状图上方显示
- 为突出表现优秀单位，我们为TOP3数据设置了特别样式规则：柱状图与文字整体使用渐变金色主题，并设置合适的滚动速度，确保所有数据都能得到充分展示
通过以上配置，港口作业效率排行榜成功实现了对各作业单位效率值的直观对比与动态展示，为管理人员的绩效评估与决策分析提供了有力的数据支撑。
4.5、泊位利用率
在右上角的泊位利用率分析模块中，AI已自动配置了4个指标卡用于展示泊位占用率、平均作业时长、船主满意度和吞吐量等关键运营数据。我们针对船主满意度指标进行专项优化：
- 将数值调整为百分比显示，更符合业务阅读习惯
- 在指标左侧添加形象化的满意度图标，使数据表达更加直观
- 当满意度数值低于70%时，指标卡自动切换为灰色显示
| |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
为实现指标卡显示多港口数据，我们在该模块上方添加了页签组件：
分别配置各港口名称页签，并配置交互事件，当用户切换不同港口时，页签值作为筛选条件实时传入指标卡的数据资产中，驱动四个指标同步更新，精准展示对应港口的运营状况
通过以上配置，泊位利用率分析模块不仅实现了关键指标的清晰展示，还具备了多港口数据对比与智能预警能力，为港口运营管理提供了有力的决策支持。
4.6、港口作业运行分析
在港口作业运行分析模块中，AI已通过柱状图清晰展示了各类船只的分布情况。我们在此基础之上，进一步增强了该模块的数据分析能力和交互体验。
首先柱状图设置交互下钻规则：点击任一船只类型柱状图，即可穿透查看该类型船舶在各个港口的详细分布情况
在同一个模块区域中，复用预先设计好的环形图模板，快速完成货物类别占比的可视化呈现
通过两个开关组件实现同一区域的图表切换展示，节省大屏空间。将"船只分析"开关关联到船只类型柱状图，"货物分析"开关关联到货物类型环形图。并设置互斥显示规则，用户只需轻点开关，即可在船舶分析与货物分析两种视角间自由切换。
该模块通过柱状图下钻、环形图占比展示以及开关切换功能，实现了对港口作业运行情况的多维度、多层次分析，有效支撑了业务决策的数据需求。
五、效果预览
启动港口作业分析大屏后，整体视觉效果专业协调，各模块数据清晰呈现，交互响应流畅敏捷：
• 船舶状态监测表格中，作业进度以直观的进度条展示，大吨位船舶（吨数>200）的数值自动红色加粗显示，重点船舶一目了然；
• 港口告警信息模块以自由布局形式呈现于左侧，不同类型告警通过颜色与图标差异化显示。
• 点击任一告警信息，系统立即跳转至后台处理界面，实现从发现问题到处理问题的无缝衔接；
• 泊位利用率分析区域，点击上方港口页签，四个指标卡数据实时联动更新，满意度低于70%时自动变灰提示，有效支持多港口对比分析；
• 港口作业运行分析模块中，点击任一船只类型柱状图，即可下钻查看该类型在各港口的详细分布。
• 通过右侧开关，用户可轻松在"船舶分析"与"货物分析"视图间切换，同一区域实现双重分析维度。
六、体验总结
通过对港口作业分析大屏的完整搭建，我们充分体验到smardaten平台在数据可视化大屏开发中的显著优势：
AI助力，高效起步：通过自然语言指令快速生成专业大屏框架，大幅降低初始设计成本，实现分钟级原型搭建。
交互灵活，闭环可控：支持穿透、下钻、筛选、切换等多种交互方式，实现从数据展示到业务操作的完整闭环。
样式丰富，视觉出众：提供细粒度样式配置，轻松实现进度条、渐变色彩、条件变色等专业视觉效果。
配置灵活，维护便捷：通过拖拽调整、AI指令和条件规则，可快速响应业务变化，确保大屏长期实用价值。
作者：中杯可乐多加冰
链接：https://juejin.cn/post/7572115057221845027
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。