# 智能远控前台

**Repository Path**: ZLZG_1/webproject

## Basic Information

- **Project Name**: 智能远控前台
- **Description**: 龙门吊智能远控 实时界面展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-12-21
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 智能远控系统前端

> **现代化的远程堆场控制系统前端界面**，集成实时数据动态渲染、交互式控制和可视化管理。

---

## ✨ 项目简介

本项目是远程堆场管理系统的前端部分，负责为用户提供实时的堆场状态可视化界面和交互功能。通过与后端 WebSocket 服务的集成，系统可以实时渲染堆场吊具位置、连接线、箱号等动态数据，帮助用户高效管理堆场设备。

### 核心功能
- **实时堆场可视化**：动态模拟堆场网格布局，包括吊具、连接线和堆场箱号。
- **吊具动态控制**：支持吊具水平和垂直位置的实时调整。
- **数据自动更新**：通过 WebSocket 与后台服务交互，实时展示堆场状态。
- **多屏适配**：支持桌面端和移动端的完美展示。

---


![输入图片说明](public/172572810a43d98c0d7a5905c3369c3a.png)

## 🔧 项目启动

### 1️⃣ 克隆项目代码

```
git clone https://gitee.com/qiaojiangwink/webproject.git
cd webproject
```

### 2️⃣ 安装依赖

运行以下命令安装项目的依赖库：

```
npm install
```

### 3️⃣ 启动开发服务器

使用以下命令启动本地开发服务器：

```
npm run serve
```

项目默认会在 `http://localhost:80` 启动，你可以在浏览器中访问并调试。

### 4️⃣ 构建生产环境

如果需要打包生产环境代码，运行以下命令：

```
npm run build
```

构建的静态文件将输出到 `dist/` 目录中。

------

## 📋 功能说明

### 页面结构

1. **吊具（Hoist）**：动态调整位置的堆场吊具，支持实时移动。
2. **连接线（Connection Line）**：连接吊具与堆场格子的视觉线条，动态计算长度与粗细。
3. **堆场网格（Storage Yard Grid）**：动态生成的堆场布局，包括行、列和箱号。
4. **柱子与横梁（Pillars & Beam）**：堆场的固定结构，增强场景真实感。
5. **错误提示（Error Message）**：当接口或数据获取失败时，显示用户友好的错误信息。

### 动态更新

通过 WebSocket 后端接口，前端会实时接收以下数据并更新页面：

- **吊具位置**：基于阈值计算和线性插值，动态计算吊具的水平位置。
- **堆场箱号**：实时更新堆场格子中显示的箱号。
- **开锁/闭锁状态**：通过状态颜色或文本显示当前堆场设备的锁定状态。

------

## 📂 项目目录结构

```
bash复制代码src/
├── assets/               # 静态资源文件（图片、字体等）
├── components/           # Vue 组件目录
│   ├── Hoist.vue         # 吊具组件
│   ├── StorageYard.vue   # 堆场网格组件
├── views/                # 页面组件
│   ├── Dashboard.vue     # 主控制页面
├── styles/               # 全局样式
│   ├── variables.scss    # 样式变量
│   ├── global.scss       # 全局样式文件
├── utils/                # 工具方法（如 WebSocket 管理等）
│   ├── api.js            # 数据请求封装
│   ├── websocket.js      # WebSocket 管理
├── App.vue               # 应用根组件
├── main.js               # 入口文件
└── router/               # 路由配置
```

------

## 🌟 特性亮点

1. **实时动态数据渲染**：通过 WebSocket 接收后端消息，实时更新吊具和堆场状态。
2. **响应式设计**：页面支持不同屏幕尺寸下的自适应布局，兼容桌面端与移动端。
3. **动画过渡效果**：吊具位置变化和横向组件移动均有平滑的动画效果，提升用户体验。
4. **模块化代码结构**：组件化开发，便于扩展和维护。
5. **简单的错误提示机制**：当接口或数据加载失败时，提供明确的错误提示。

------

## 📡 WebSocket 接入指南

前端通过 WebSocket 连接后端服务，实时接收堆场的状态数据：

- **WebSocket 连接地址**：`ws://localhost:8080/ws/status`

- **接收示例消息**：

  ```
  json复制代码Port 9008: { "status": "success", "message": "吊具位置更新" }
  Port 9007: { "status": "error", "message": "数据解码失败" }
  ```

- **示例代码**：

  ```
  javascript复制代码// 建立 WebSocket 连接
  const ws = new WebSocket("ws://localhost:8080/ws/status");
  
  // 监听消息
  ws.onmessage = (event) => {
    console.log("收到后端消息:", event.data);
    // 在这里处理动态更新逻辑
  };
  
  // 发送消息
  ws.send("前端已连接");
  ```

------

## 🛠️ 技术栈

- **前端框架**: Vue.js 3.x - 渐进式 JavaScript 框架。
- **UI 设计**: 使用原生 CSS 结合 SCSS 实现样式控制。
- **状态管理**: Vue 的响应式属性与计算属性。
- **数据交互**: WebSocket 用于实时数据通信，Axios 用于 RESTful API 调用。
- **构建工具**: Vite 或 Vue CLI。

------

## 🤝 开发者

- **前端开发**: [蒋睿]
- **UI 设计**: [蒋睿]

------

## 🧭 后续计划

1. 增加堆场状态的实时图表展示。
2. 优化连接线的动态样式配置，支持更多自定义功能。
3. 引入国际化（i18n）支持，适配多语言场景。
4. 支持更多后端接口的数据展示和交互功能。

------

## 📄 开源协议

本项目基于 **MIT License** 开源，欢迎参与贡献！