chbim-time-axis-v2 0.0.192 → 0.0.194
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,6 +22,8 @@
|
|
|
22
22
|
- **⚡ 开发体验**:
|
|
23
23
|
- **TypeScript**: 提供完整的类型定义。
|
|
24
24
|
- **Vue 3**: 基于 Composition API 构建，响应式性能优秀。
|
|
25
|
+
- **🔍 灵活的缩放控制**:
|
|
26
|
+
- **自定义最小缩放级别**: 支持通过 `minZoomLevel` 属性设置最小缩放层级（分钟、小时、天）。
|
|
25
27
|
|
|
26
28
|
## 📦 安装
|
|
27
29
|
|
|
@@ -280,11 +282,12 @@ roamController.start();
|
|
|
280
282
|
|
|
281
283
|
### Props (属性)
|
|
282
284
|
|
|
283
|
-
| 属性名
|
|
284
|
-
|
|
|
285
|
-
| `tasks`
|
|
286
|
-
| `viewer`
|
|
287
|
-
| `clock`
|
|
285
|
+
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
|
|
286
|
+
| :------------- | :-------------- | :--- | :------- | :------------------------------------------------------------------------- |
|
|
287
|
+
| `tasks` | `GanttTask[]` | ✅ | `[]` | 任务数据源，支持 `v-model:tasks` 双向绑定。 |
|
|
288
|
+
| `viewer` | `Cesium.Viewer` | ❌ | - | Cesium Viewer 实例。传入后组件会自动绑定时钟。 |
|
|
289
|
+
| `clock` | `Cesium.Clock` | ❌ | - | 单独传入 Cesium Clock 实例。如果传入 `viewer`，则优先使用 `viewer.clock`。 |
|
|
290
|
+
| `minZoomLevel` | `string` | ❌ | `"hour"` | 最小缩放层级。可选值：`"minute"` (分钟), `"hour"` (小时), `"day"` (天)。 |
|
|
288
291
|
|
|
289
292
|
### Events (事件)
|
|
290
293
|
|
|
@@ -386,9 +389,9 @@ roamController.start();
|
|
|
386
389
|
|
|
387
390
|
组件通过 `Cesium.Clock.onTick` 事件与 Cesium 保持高频同步：
|
|
388
391
|
|
|
389
|
-
1.
|
|
390
|
-
2.
|
|
391
|
-
3.
|
|
392
|
+
1. **时间同步**: 甘特图的 `currentTime` 会实时更新为 Cesium 的当前时间。
|
|
393
|
+
2. **播放控制**: 点击甘特图的播放按钮会控制 `viewer.clock.shouldAnimate`。
|
|
394
|
+
3. **视口跟随**: 当播放时间超出当前甘特图可视范围时，时间轴会自动滚动以保持当前时间可见。
|
|
392
395
|
|
|
393
396
|
## ❓ 常见问题
|
|
394
397
|
|
|
@@ -398,6 +401,7 @@ A:
|
|
|
398
401
|
- 对于 `block` 类型，在 `blocks` 数组中指定 `color` 属性。
|
|
399
402
|
- 对于 `instant` 类型，在 `instants` 数组中指定 `color` 属性。
|
|
400
403
|
- 对于普通 `task`，建议在任务对象中设置 `class` 属性，并通过自定义 CSS 类来控制颜色。例如：
|
|
404
|
+
|
|
401
405
|
```css
|
|
402
406
|
.my-red-task {
|
|
403
407
|
background-color: red !important;
|