# sly

**Repository Path**: groot_2/sly

## Basic Information

- **Project Name**: sly
- **Description**: 进阶系统前端界面展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
output:
  word_document: default
---
# 一、推荐环境

* Node.js >= 20

# 二、依赖安装

## 2.1 使用 npm 安装依赖

```bash
npm install
```

## 2.2 使用 pnpm 安装依赖

```bash
npm install -g pnpm
pnpm install
```

* 如果你遇到依赖安装问题，可以尝试以下命令：

```bash
// 清除缓存
npm cache clean --force
npm install
```

# 三、运行方式

```bash
# 开发环境
npm run dev

# 构建生产环境
npm run build
```

# 四、配置说明

## 4.1 配置文件路径

```
/public/airCity/ac_conf.js
```

## 4.2 参数说明

* **hostConfig：** DTS Cloud SDK 的主机配置，包括地址、SDK路径、是否需要登录以及是否使用 HTTPS。例如：

```js
var HostConfig = {
  Player: '192.168.0.129:8080',
  PlayerMapping: '192.168.0.129:8080',
  Path: 'D:/freedo/DTS_Cloud_6.1.0812.18527/SDK',
  UseHttps: false,
};
```

# 五、目录结构

```bash
├── README.md
├── package.json
├── index.html
├── src
│   ├── AirCityUtils  # 模型相关工具类
│   ├── api  # 请求接口
│   ├── assets  # 静态资源
│   ├── components  # 通用业务组件
│   ├── config  # 全局配置
│          └── settings.json  # 配置文件
│   ├── hooks # 全局hooks
│   ├── layout  # 布局
│   ├── views  # 页面
│   ├── router # 路由配置
│   ├── store  # 状态管理中心
│          └── airCity # 模型相关
│   ├── types  # Typescript 类型
│   └── utils  # 工具库
│   └── App.vue  # 视图入口
│   └── main.ts  # 入口文件
└── tsconfig.json
```

# 六、文档

## 6.1 用户手册

用户手册: [https://doc.freedo3d.com/](https://doc.freedo3d.com/)

## 6.2 SDK二次开发文档

**模型运行地址**: `http://192.168.0.129:8080` 为 DTS Cloud 的运行 IP 地址和端口号。

**注意事项**:

- 确保 DTS Cloud 服务已正常启动
- 默认端口为 8080，如有修改请相应调整配置

SDK二次开发文档: [http://192.168.0.129:8080/doc/api/index.html](http://192.168.0.129:8080/doc/api/index.html)

## 6.3 API 示例

[http://192.168.0.129:8080/samples/locale_zh/main.html](http://192.168.0.129:8080/samples/locale_zh/main.html)

## 6.4 Camera

[http://192.168.0.129:8080/locale/zh/doc/Camera.html](http://192.168.0.129:8080/locale/zh/doc/Camera.html)

```js
// 设置相机位置
__g.camera.set(390.485938, 317.416733, 7.025873, -23.682409, -142.434784, 1);
```

## 6.5 tileLayer 图层

[http://192.168.0.129:8080/locale/zh/doc/TileLayer.html](http://192.168.0.129:8080/locale/zh/doc/TileLayer.html)

```js

// 清除所有高亮
__g.tileLayer.stopHighlightAllActors();

// 高亮指定模型
__g.tileLayer.highlightActor(layerId, objectId);

// 视角聚焦到指定模型
__g.tileLayer.focusActor(
    layerId,           // 图层ID
    objectId,          // 设备ObjectID
    distance,          // 相机距离
    flyTime,           // 飞行时间(秒)
    rotation           // 旋转角度
);

```

## 6.6 连接模型

DigitalTwinPlayer 在页面上创建和显示三维视频流
[http://192.168.0.129:8080/locale/zh/doc/DigitalTwinPlayer.html](http://192.168.0.129:8080/locale/zh/doc/DigitalTwinPlayer.html)

```js
    // AirCityAPI初始化选项
    const apiOptions = {
      onReady,  // 加载成功后的回调函数
      onApiVersion, // 版本信息
      onEvent,  // 事件处理的回调函数
      useColorLog: false,
    };

    let  options = {
        domId: 'player',  // DOM元素
        apiOptions,   // DigitalTwinAPI初始化选项
        showMarker: false,
        showStartupInfo: false,  
        keyEventReceiver: 'video',
        onclose: onClose,  
        password: HostConfig.password,  // 实例密码
      };
    

    aircityPlayer.value = new window.AirCityPlayer(HostConfig.Player, options);

```

# 七、设备点击交互功能

## 7.1 功能说明

### 一、点击设备，切换设备视角并高亮显示设备模型

> 目前按照需求实现的定位逻辑：

> 1、点击设备时，通过高亮显示定位到模型中对应的设备模型位置上；

> 2、定位到设备模型上后，切换视角并弹出设备详情弹窗展示设备信息。

文件：`src/views/Basic/index.vue`

解析：

1、`selectDevice`函数，点击设备时响应，接收设备ID和objectId参数。

2、调用`deviceStore.setDevicePopup(id)`通过设备状态管理器打开设备详情弹窗，展示该设备的详细信息。

3、根据objectId在`window.customModel`数组中查找对应的设备模型信息，获取设备在3D模型中的位置和相关参数。

4、如果找到匹配的设备模型（`suoyin.Id`存在）：
   - 清空所有已高亮：`window.__g.tileLayer.stopHighlightAllActors()`
   - 设置高亮：`window.__g.tileLayer.highlightActor(suoyin.Id, suoyin.ObjectID)`
   - 执行定位操作：
     - 如果设备有预定义的相机位置参数（x, y, z, pitch, yaw），使用`__g.camera.set()`直接设置相机位置
     - 否则使用`__g.tileLayer.focusActor()`聚焦到设备模型

5、定位逻辑支持两种方式：
   - **精确定位**：使用预定义的相机坐标参数（x, y, z, pitch, yaw, flyTime），适用于需要特定视角展示的设备
   - **自动聚焦**：使用图层ID、对象ID、距离、飞行时间和旋转角度参数，由系统自动计算最佳视角

6、设备模型数据结构：
   - `window.customModel`数组包含所有设备在3D模型中的映射信息
   - 每个设备对象包含：Id（图层ID）、ObjectID（对象ID）、相机位置参数、聚焦参数等
   - 通过objectId匹配找到对应的设备模型信息

7、高亮显示机制：
   - 先清空所有已高亮的模型，避免多个设备同时高亮造成视觉干扰
   - 再高亮当前选中的设备模型，使用`highlightActor`方法设置高亮效果
   - 高亮效果会突出显示设备在3D模型中的位置，便于用户快速识别