天津港智慧港口运营管理平台

项目介绍

天津港智慧港口运营管理平台是一个现代化的可视化大屏项目，专为天津港务集团开发，用于实时展示港口运营数据、船舶状态、吞吐量等关键业务指标。该平台采用深蓝科技风格设计，符合智慧港口的先进定位，为管理层提供直观、实时的数据可视化界面。

安装与运行

# 安装依赖
npm install

# 开发环境运行
npm run dev

# 打包构建
npm run build

开发服务器启动后，可通过 http://localhost:5173/ 访问系统。

添加Logo指南

1. 请将天津港Logo图片保存为PNG或JPG格式
2. 将图片文件命名为tianjin-port-logo.png或tianjin-port-logo.jpg
3. 将图片文件放置在src/assets/目录中
4. 如果使用不同的文件名，请在App.vue文件中更新相应的引用路径

项目功能

系统集成了多个实时数据展示模块，全面呈现天津港的运营情况：

船舶雷达图

• 实时监控港口附近船舶位置
• 区分不同类型船舶（集装箱船、散货船、油轮等）
• 动态船舶移动效果，模拟真实港口情况
• 状态异常船舶警示功能

港口可视化

• 码头泊位实时状态展示
• 船舶靠泊和离港动态过程
• 货物类型分布饼图
• 海水波浪动态效果

吞吐量图表

• 月度累积吞吐量趋势与目标对比
• 近7日每日吞吐量统计
• 动态数据更新效果
• 关键指标数值动画展示

设备运行状态

• 设备状态实时监控（运行中/维护中/离线）
• 设备效率仪表盘
• 设备详细运行时间列表
• 设备状态变化动态更新

船舶时间线

• 在港船舶时间线追踪
• 船舶作业进度展示
• 船舶状态动态变化（即将到达/已停靠/装卸中/离港中/已完成）
• 船舶货物类型和数量信息

船舶状态分析

• 船舶类型分布统计
• 主要航线分布和占比分析
• 数据自动轮换展示

屏幕适配

系统采用自适应缩放技术，可根据不同分辨率的显示设备自动调整显示比例：

• 基于1920x1080像素设计
• 自动计算最佳缩放比例
• 保持所有组件的可见性
• 适用于各种大屏展示环境

技术栈

• 前端框架: Vue 3
• 开发语言: TypeScript
• 构建工具: Vite
• 数据可视化: ECharts 5
• 动画效果: GSAP动画库
• 样式技术: CSS3动画、Flexbox布局
• 响应式设计: 自适应缩放算法

目录结构

tianjin-port-dashboard/
├── src/
│   ├── assets/              # 静态资源（如Logo图片）
│   │   └── tianjin-port-logo.png  # 天津港Logo图片
│   ├── components/          # 组件文件夹
│   │   ├── ShipRadar.vue    # 船舶雷达图组件
│   │   ├── PortVisualization.vue  # 港口可视化组件
│   │   ├── ThroughputChart.vue    # 吞吐量图表组件
│   │   ├── OperationStats.vue     # 设备运行状态组件
│   │   ├── ShipTimeline.vue       # 船舶时间线组件
│   │   └── ShipStatusChart.vue    # 船舶状态分析组件
│   ├── App.vue              # 主应用组件
│   └── main.ts              # 应用入口文件
├── public/                  # 公共静态资源
├── index.html               # HTML入口文件
├── package.json             # 项目依赖配置
├── tsconfig.json            # TypeScript配置
├── vite.config.ts           # Vite配置
└── README.md                # 项目说明文档

维护说明

本项目使用Vue的组件化架构，每个可视化模块都是独立的组件，便于维护和扩展。

主要组件

• ShipRadar: 船舶雷达图显示，使用ECharts散点图实现，添加了雷达旋转光束动画
• PortVisualization: 港口和码头可视化，结合自定义CSS动画和ECharts饼图
• ThroughputChart: 吞吐量图表，使用ECharts折线图和柱状图，支持数据动态更新
• OperationStats: 设备运行状态，使用ECharts饼图和仪表盘，配合自定义列表
• ShipTimeline: 船舶时间线，使用自定义CSS和动态数据更新实现
• ShipStatusChart: 船舶状态分析，使用ECharts饼图和仪表盘，支持数据轮换展示

屏幕适配

屏幕适配功能在App.vue中实现，通过监听窗口大小变化自动调整缩放比例，确保在不同分辨率下内容完整展示。

数据更新

各组件中的数据更新通过定时器实现模拟，在实际生产环境中，建议替换为WebSocket或API轮询方式，连接实际的后端数据源。

浏览器兼容性

• 推荐使用Chrome、Firefox、Edge等现代浏览器
• 支持最新的两个版本
• 不支持IE浏览器

未来扩展

1. 集成实时数据API接口
2. 添加用户登录和权限管理
3. 开发更多专业分析模块
4. 增强移动设备兼容性
5. 添加历史数据查询和回放功能

许可与版权

© 2025 Johnson 版权所有