@operato/scene-manufacturing 1.3.0 → 1.3.3
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/CHANGELOG.md +18 -0
- package/db.sqlite +0 -0
- package/dist/tact-timer.js +29 -8
- package/dist/tact-timer.js.map +1 -1
- package/helps/scene/component/manufacturing/tact-timer.ja.md +28 -22
- package/helps/scene/component/manufacturing/tact-timer.ko.md +12 -9
- package/helps/scene/component/manufacturing/tact-timer.md +29 -26
- package/helps/scene/component/manufacturing/tact-timer.ms.md +31 -28
- package/helps/scene/component/manufacturing/tact-timer.zh.md +25 -22
- package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +5 -0
- package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +5 -0
- package/logs/application-2023-12-01-10.log +6 -0
- package/logs/connections-2023-12-01-10.log +41 -0
- package/package.json +2 -2
- package/src/tact-timer.ts +32 -8
- package/translations/en.json +9 -8
- package/translations/ja.json +9 -8
- package/translations/ko.json +7 -5
- package/translations/ms.json +8 -7
- package/translations/zh.json +9 -8
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/editors/index.d.ts +0 -0
- package/dist/editors/index.js +0 -2
- package/dist/editors/index.js.map +0 -1
- package/dist/groups/index.d.ts +0 -0
- package/dist/groups/index.js +0 -2
- package/dist/groups/index.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.3.3](https://github.com/things-scene/operato-scene/compare/v1.3.2...v1.3.3) (2023-12-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tact-timer missing parameter ([be02dce](https://github.com/things-scene/operato-scene/commit/be02dce0dc06802abd2be02840f3f2e80539296f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [1.3.1](https://github.com/things-scene/operato-scene/compare/v1.3.0...v1.3.1) (2023-12-01)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* complete tact-timer in manufacturing module ([7b569d9](https://github.com/things-scene/operato-scene/commit/7b569d9c98e2732791b4cbd07166896c6e4df440))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [1.3.0](https://github.com/things-scene/operato-scene/compare/v1.2.91...v1.3.0) (2023-11-30)
|
|
7
25
|
|
|
8
26
|
|
package/db.sqlite
CHANGED
|
Binary file
|
package/dist/tact-timer.js
CHANGED
|
@@ -49,14 +49,25 @@ const NATURE = {
|
|
|
49
49
|
name: 'decreaseFontColor'
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
|
-
type: '
|
|
53
|
-
label: '
|
|
54
|
-
name: '
|
|
52
|
+
type: 'color',
|
|
53
|
+
label: 'under-threshold-color',
|
|
54
|
+
name: 'underThresholdColor'
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
type: 'number',
|
|
58
|
+
label: 'progress-threshold',
|
|
59
|
+
name: 'progressThreshold',
|
|
60
|
+
placeholder: '%'
|
|
55
61
|
},
|
|
56
62
|
{
|
|
57
63
|
type: 'number',
|
|
58
64
|
label: 'round',
|
|
59
65
|
name: 'round'
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
type: 'boolean',
|
|
69
|
+
label: 'auto-start',
|
|
70
|
+
name: 'autoStart'
|
|
60
71
|
}
|
|
61
72
|
],
|
|
62
73
|
'value-property': 'tactTime',
|
|
@@ -100,8 +111,9 @@ export default class TactTimer extends RectPath(Shape) {
|
|
|
100
111
|
});
|
|
101
112
|
}
|
|
102
113
|
render(context) {
|
|
103
|
-
var { tactTime, top, left, height, width, round = 0, fontColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent' } = this.state;
|
|
104
|
-
const increase = this.countdown > 0
|
|
114
|
+
var { tactTime, top, left, height, width, round = 0, fontColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0 } = this.state;
|
|
115
|
+
const increase = this.countdown > 0;
|
|
116
|
+
const underThreshold = this.countdown / tactTime < progressThreshold / 100;
|
|
105
117
|
// progress의 색상
|
|
106
118
|
context.beginPath();
|
|
107
119
|
context.roundRect(left, top, width, height, round);
|
|
@@ -113,12 +125,21 @@ export default class TactTimer extends RectPath(Shape) {
|
|
|
113
125
|
if (!isNaN(progress)) {
|
|
114
126
|
progress = width - (width * progress) / 100;
|
|
115
127
|
progress = Math.max(Math.min(progress, width), 0);
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
if (progressDirection == 'increase') {
|
|
129
|
+
context.rect(left, top, progress, height);
|
|
130
|
+
}
|
|
131
|
+
else {
|
|
132
|
+
context.rect(left + progress, top, width - progress, height);
|
|
133
|
+
}
|
|
134
|
+
context.fillStyle = increase
|
|
135
|
+
? underThreshold
|
|
136
|
+
? underThresholdColor
|
|
137
|
+
: increaseProgressColor
|
|
138
|
+
: decreaseProgressColor;
|
|
118
139
|
context.fill();
|
|
119
140
|
context.beginPath();
|
|
120
141
|
}
|
|
121
|
-
context.roundRect(left, top, width, height);
|
|
142
|
+
context.roundRect(left, top, width, height, round);
|
|
122
143
|
this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor);
|
|
123
144
|
}
|
|
124
145
|
postrender(context) {
|
package/dist/tact-timer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../src/tact-timer.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAA+B,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEhG,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,SAAS;SACvB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,UAAU;SACxB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,mBAAmB;YACzB,QAAQ,EAAE;gBACR,OAAO,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,UAAU,CAAC;aACtC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,yBAAyB;YAChC,IAAI,EAAE,uBAAuB;SAC9B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,yBAAyB;YAChC,IAAI,EAAE,uBAAuB;SAC9B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,qBAAqB;YAC5B,IAAI,EAAE,mBAAmB;SAC1B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,mBAAmB;SAC1B;QACD;YACE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../src/tact-timer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nimport format from './libs/format'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'number',\n label: 'tact-time',\n name: 'tactTime',\n placeholder: 'seconds'\n },\n {\n type: 'string',\n label: 'format',\n name: 'format',\n placeholder: 'hh:mm:ss'\n },\n {\n type: 'select',\n label: 'progress-direction',\n name: 'progressDirection',\n property: {\n options: ['', 'increase', 'decrease']\n }\n },\n {\n type: 'color',\n label: 'increase-progress-color',\n name: 'increaseProgressColor'\n },\n {\n type: 'color',\n label: 'decrease-progress-color',\n name: 'decreaseProgressColor'\n },\n {\n type: 'color',\n label: 'increase-font-color',\n name: 'increaseFontColor'\n },\n {\n type: 'color',\n label: 'decrese-font-color',\n name: 'decreaseFontColor'\n },\n {\n type: 'color',\n label: 'under-threshold-color',\n name: 'underThresholdColor'\n },\n {\n type: 'number',\n label: 'progress-threshold',\n name: 'progressThreshold',\n placeholder: '%'\n },\n {\n type: 'number',\n label: 'round',\n name: 'round'\n },\n {\n type: 'boolean',\n label: 'auto-start',\n name: 'autoStart'\n }\n ],\n 'value-property': 'tactTime',\n help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n private _due?: number\n\n get nature() {\n return NATURE\n }\n\n ready() {\n if (!this.app.isViewMode) {\n return\n }\n\n const { autoStart } = this.state\n\n if (autoStart) {\n this.start()\n }\n }\n\n start() {\n this._due = Date.now() + this.tactTime * 1000\n this.counting()\n }\n\n onchange(after: Properties) {\n if ('tactTime' in after) {\n this.start()\n }\n }\n\n counting() {\n // @ts-ignore\n if (this.disposed || this.countdown < -this.tactTime) {\n return\n }\n\n requestAnimationFrame(() => {\n const countdown = this.countdown\n\n const text = format(Math.abs(countdown), this.getState('format'))\n this.text = text\n\n this.setState('data', this.countdown)\n\n setTimeout(() => {\n this.counting()\n }, 1000)\n })\n }\n\n render(context: CanvasRenderingContext2D) {\n var {\n tactTime,\n top,\n left,\n height,\n width,\n round = 0,\n fontColor,\n increaseFontColor,\n decreaseFontColor,\n increaseProgressColor = 'transparent',\n decreaseProgressColor = 'transparent',\n underThresholdColor = 'transparent',\n progressDirection = 'increase',\n progressThreshold = 0\n } = this.state\n\n const increase = this.countdown > 0\n const underThreshold = this.countdown / tactTime < progressThreshold / 100\n\n // progress의 색상\n context.beginPath()\n context.roundRect(left, top, width, height, round)\n context.clip()\n this.drawFill(context)\n\n // value의 색상\n context.beginPath()\n\n var progress = Math.abs((this.countdown / tactTime) * 100)\n\n if (!isNaN(progress)) {\n progress = width - (width * progress) / 100\n progress = Math.max(Math.min(progress, width), 0)\n\n if (progressDirection == 'increase') {\n context.rect(left, top, progress, height)\n } else {\n context.rect(left + progress, top, width - progress, height)\n }\n\n context.fillStyle = increase\n ? underThreshold\n ? underThresholdColor\n : increaseProgressColor\n : decreaseProgressColor\n context.fill()\n\n context.beginPath()\n }\n\n context.roundRect(left, top, width, height, round)\n\n this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)\n }\n\n postrender(context: CanvasRenderingContext2D) {\n this.drawStroke(context)\n this.drawText(context)\n }\n\n get tactTime() {\n return Number(this.getState('tactTime') || 0)\n }\n\n set tactTime(tactTime) {\n this.setState('tactTime', Number(tactTime) || 0)\n }\n\n get countdown() {\n const due = this._due || 0\n const now = Date.now()\n\n return Math.round((due - now) / 1000)\n }\n}\n\nComponent.register('tact-timer', TactTimer)\n"]}
|
|
@@ -1,34 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
#### Tact Timer（タクトタイマー）
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
タクトタイマーは生産ラインやプロセスで使用される時間管理ツールで、特定の作業や活動に割り当てられた時間、つまり Tact time を設定し管理するために使用されます。このツールはリアルタイムで Tact time を計算し、実際の経過時間をモニタリングし、プログレスバーとカウントダウンテキストを表示して、使用者に現在の進行状況を視覚的に表現します。これにより、生産プロセスを効率的に管理し、生産量を最適化するのに役立ちます。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
#### 特性
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
- このコンポーネントの value
|
|
7
|
+
- Tact Time（タクトタイム）
|
|
8
|
+
- このコンポーネントの value プロパティです。
|
|
9
9
|
- カウントダウンフォーマット（format）
|
|
10
10
|
- フォーマット：hh:mm:ss
|
|
11
11
|
- カウントダウン結果の表示形式
|
|
12
|
-
- progressDirection
|
|
13
|
-
-
|
|
14
|
-
- increase の場合、increaseProgressColor から始まり、0
|
|
15
|
-
- decrease の場合、decreaseProgressColor から始まり、0
|
|
16
|
-
|
|
12
|
+
- 進行方向（progressDirection）
|
|
13
|
+
- プログレスバーの進行方向設定
|
|
14
|
+
- increase の場合、increaseProgressColor から始まり、0 を過ぎた後は decreaseProgressColor に変わります
|
|
15
|
+
- decrease の場合、decreaseProgressColor から始まり、0 を過ぎた後は increaseProgressColor に
|
|
16
|
+
|
|
17
|
+
変わります
|
|
18
|
+
|
|
19
|
+
- 増加進行色（increaseProgressColor）
|
|
17
20
|
- 増加時の進行色
|
|
18
|
-
-
|
|
19
|
-
- decreaseProgressColor
|
|
21
|
+
- tackTime 設定から tactTime の 20%のカウントダウンまでの進行色
|
|
22
|
+
- 減少進行色（decreaseProgressColor）
|
|
20
23
|
- 減少時の進行色
|
|
21
|
-
|
|
22
|
-
- increseFontColor
|
|
24
|
+
- 増加フォント色（increseFontColor）
|
|
23
25
|
- 増加時のフォント色
|
|
24
|
-
- decreseFontColor
|
|
26
|
+
- 減少フォント色（decreseFontColor）
|
|
25
27
|
- 減少時のフォント色
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
28
|
+
- 進行閾値（progressThreshold）
|
|
29
|
+
- Tact Time の警告閾値（%）、進行状況が閾値以下の場合には閾値以下色が使用されます
|
|
30
|
+
- 閾値以下色（underThresholdColor）
|
|
31
|
+
- 閾値以下の進行色
|
|
32
|
+
- 自動開始（autoStart）
|
|
33
|
+
- カウントダウンを自動的に開始します
|
|
34
|
+
- 角を丸くする（round）
|
|
35
|
+
- コンポーネント四角形領域の 4 つの角の丸い形状の半径サイズ
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
#### データ
|
|
32
38
|
|
|
33
|
-
- tackTime
|
|
34
|
-
- tactTime
|
|
39
|
+
- tackTime 設定値の設定時点から、カウントダウンされた現在値が毎秒設定されます（単位：秒）。
|
|
40
|
+
- tactTime 設定値から始まり、0 を過ぎて-tactTime までカウントダウンされます。
|
|
@@ -4,28 +4,31 @@
|
|
|
4
4
|
|
|
5
5
|
## properties
|
|
6
6
|
|
|
7
|
-
- tactTime
|
|
7
|
+
- Tact Time(tactTime)
|
|
8
8
|
- 이 컴포넌트의 value property 이다.
|
|
9
9
|
- 카운트다운 포맷(format)
|
|
10
10
|
- format : hh:mm:ss
|
|
11
11
|
- 카운트다운 결과 표현형식
|
|
12
|
-
- progressDirection
|
|
12
|
+
- 진행 방향(progressDirection)
|
|
13
13
|
- 프로그레스바의 진행 방향 설정
|
|
14
14
|
- increase인 경우에는 increaseProgressColor로 시작하여, 0를 지난 후부터는 decreaseProgressColor로 변경된다
|
|
15
15
|
- decrease인 경우에는 decreaseProgressColor로 시작하여, 0를 지난 후부터는 increaseProgressColor로 변경된다
|
|
16
|
-
- increaseProgressColor
|
|
16
|
+
- 증가 진행색상(increaseProgressColor)
|
|
17
17
|
- 증가시 진행 색상
|
|
18
18
|
- tackTime 설정시부터 tactTime의 20% 수준 countdown까지의 진행 색상
|
|
19
|
-
- decreaseProgressColor
|
|
19
|
+
- 감소 진행색상(decreaseProgressColor)
|
|
20
20
|
- 감소시 진행 색상
|
|
21
|
-
|
|
22
|
-
- increseFontColor
|
|
21
|
+
- 증가 폰트 색상(increseFontColor)
|
|
23
22
|
- 증가시 폰트 색상
|
|
24
|
-
- decreseFontColor
|
|
23
|
+
- 감소 폰트 색상(decreseFontColor)
|
|
25
24
|
- 감소시 폰트 색상
|
|
26
|
-
-
|
|
25
|
+
- 진행 임계값(progressThreshold)
|
|
26
|
+
- Tact Time의 경고 임계값(%), 진행상황이 임계값이하인 경우에 임계 이하 색상이 사용됨
|
|
27
|
+
- 임계이하 색상(underThresholdColor)
|
|
28
|
+
- 임계치 이하 진행 색상
|
|
29
|
+
- 자동 시작(autoStart)
|
|
27
30
|
- 카운트다운을 자동으로 시작한다
|
|
28
|
-
- round
|
|
31
|
+
- 둥글게(round)
|
|
29
32
|
- 컴포넌트 사각형영역의 4꼭지점 부분의 둥근 모양의 반지름 크기
|
|
30
33
|
|
|
31
34
|
## data
|
|
@@ -1,34 +1,37 @@
|
|
|
1
1
|
# Tact Timer
|
|
2
2
|
|
|
3
|
-
"Tact Timer" is a time management tool used in production lines or processes
|
|
3
|
+
"Tact Timer" is a time management tool used in production lines or processes. It is utilized for setting and managing Tact time, which is the allocated time for a specific task or activity. This tool calculates Tact time in real-time, monitors actual elapsed time, and visually represents the current progress to the user by displaying a progress bar and countdown text. It aids in efficiently managing the production process and optimizing output.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## properties
|
|
6
6
|
|
|
7
|
-
- tactTime
|
|
8
|
-
- This
|
|
7
|
+
- Tact Time (tactTime)
|
|
8
|
+
- This is the value property of the component.
|
|
9
9
|
- Countdown Format (format)
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
- progressDirection
|
|
13
|
-
- Sets the
|
|
14
|
-
- In case of increase, it starts with increaseProgressColor
|
|
15
|
-
- In case of decrease, it starts with decreaseProgressColor
|
|
16
|
-
- increaseProgressColor
|
|
17
|
-
-
|
|
18
|
-
- Progress color from setting tactTime to
|
|
19
|
-
- decreaseProgressColor
|
|
20
|
-
-
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
|
|
26
|
-
-
|
|
10
|
+
- format: hh:mm:ss
|
|
11
|
+
- Format for displaying the countdown result
|
|
12
|
+
- Progress Direction (progressDirection)
|
|
13
|
+
- Sets the direction of progress for the progress bar
|
|
14
|
+
- In the case of increase, it starts with increaseProgressColor, changing to decreaseProgressColor after passing 0
|
|
15
|
+
- In the case of decrease, it starts with decreaseProgressColor, changing to increaseProgressColor after passing 0
|
|
16
|
+
- Increase Progress Color (increaseProgressColor)
|
|
17
|
+
- Color for progress during increase
|
|
18
|
+
- Progress color from the setting of tactTime up to 20% level countdown of tactTime
|
|
19
|
+
- Decrease Progress Color (decreaseProgressColor)
|
|
20
|
+
- Color for progress during decrease
|
|
21
|
+
- Increase Font Color (increseFontColor)
|
|
22
|
+
- Font color during increase
|
|
23
|
+
- Decrease Font Color (decreseFontColor)
|
|
24
|
+
- Font color during decrease
|
|
25
|
+
- Progress Threshold (progressThreshold)
|
|
26
|
+
- Warning threshold (%) of Tact Time; threshold color is used when progress is below this level
|
|
27
|
+
- Under Threshold Color (underThresholdColor)
|
|
28
|
+
- Color for progress below the threshold
|
|
29
|
+
- Auto Start (autoStart)
|
|
27
30
|
- Automatically starts the countdown
|
|
28
|
-
- round
|
|
29
|
-
- Radius size of the rounded
|
|
31
|
+
- Round (round)
|
|
32
|
+
- Radius size of the rounded shape at the four corners of the component's rectangular area
|
|
30
33
|
|
|
31
|
-
##
|
|
34
|
+
## data
|
|
32
35
|
|
|
33
|
-
- The current value counted down from the
|
|
34
|
-
- The countdown starts from the tactTime setting value,
|
|
36
|
+
- The current value, counted down from the setting of tactTime, is set every second (unit: seconds).
|
|
37
|
+
- The countdown starts from the tactTime setting value, goes past 0, and counts down to -tactTime.
|
|
@@ -1,34 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
#### Tact Timer
|
|
2
2
|
|
|
3
|
-
"Tact Timer"
|
|
3
|
+
"Tact Timer" adalah alat pengurusan masa yang digunakan dalam barisan pengeluaran atau proses, untuk menetapkan dan mengurus masa yang diperuntukkan untuk tugas atau aktiviti tertentu, iaitu Tact time. Alat ini digunakan untuk mengira Tact time secara real-time dan memantau masa sebenar yang berlalu, serta memaparkan bar kemajuan dan teks kiraan mundur untuk menggambarkan kemajuan semasa kepada pengguna secara visual. Ini membantu dalam mengurus proses pengeluaran dengan efisien dan mengoptimumkan pengeluaran.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
#### properties
|
|
6
6
|
|
|
7
|
-
- tactTime
|
|
8
|
-
-
|
|
9
|
-
- Format
|
|
10
|
-
-
|
|
7
|
+
- Tact Time (tactTime)
|
|
8
|
+
- Ini adalah property nilai komponen.
|
|
9
|
+
- Format kiraan mundur (format)
|
|
10
|
+
- format: hh:mm:ss
|
|
11
11
|
- Format paparan hasil kiraan mundur
|
|
12
|
-
- progressDirection
|
|
13
|
-
-
|
|
14
|
-
- Jika increase, bermula dengan increaseProgressColor
|
|
15
|
-
- Jika decrease, bermula dengan decreaseProgressColor
|
|
16
|
-
- increaseProgressColor
|
|
17
|
-
- Warna kemajuan semasa
|
|
18
|
-
- Warna kemajuan dari
|
|
19
|
-
- decreaseProgressColor
|
|
20
|
-
- Warna kemajuan semasa
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
|
|
28
|
-
-
|
|
29
|
-
|
|
12
|
+
- Arah kemajuan (progressDirection)
|
|
13
|
+
- Tetapan arah kemajuan bar kemajuan
|
|
14
|
+
- Jika increase, bermula dengan increaseProgressColor, selepas melalui 0 berubah kepada decreaseProgressColor
|
|
15
|
+
- Jika decrease, bermula dengan decreaseProgressColor, selepas melalui 0 berubah kepada increaseProgressColor
|
|
16
|
+
- Warna kemajuan meningkat (increaseProgressColor)
|
|
17
|
+
- Warna kemajuan semasa meningkat
|
|
18
|
+
- Warna kemajuan dari tetapan tackTime hingga ke 20% kiraan mundur tactTime
|
|
19
|
+
- Warna kemajuan menurun (decreaseProgressColor)
|
|
20
|
+
- Warna kemajuan semasa menurun
|
|
21
|
+
- Warna fon meningkat (increseFontColor)
|
|
22
|
+
- Warna fon semasa meningkat
|
|
23
|
+
- Warna fon menurun (decreseFontColor)
|
|
24
|
+
- Warna fon semasa menurun
|
|
25
|
+
- Ambang kemajuan (progressThreshold)
|
|
26
|
+
- Ambang amaran Tact Time (%), warna di bawah ambang digunakan apabila kemajuan berada di bawah nilai ambang
|
|
27
|
+
- Warna di bawah ambang (underThresholdColor)
|
|
28
|
+
- Warna kemajuan di bawah ambang
|
|
29
|
+
- Auto mula (autoStart)
|
|
30
|
+
- Mula kiraan mundur secara automatik
|
|
31
|
+
- Bulat (round)
|
|
32
|
+
- Saiz jejari bentuk bulat di empat penjuru kawasan segi empat komponen
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
#### data
|
|
32
35
|
|
|
33
|
-
- Nilai semasa yang dikira mundur dari
|
|
34
|
-
-
|
|
36
|
+
- Nilai semasa yang dikira mundur dari titik tetapan nilai tackTime ditetapkan setiap saat (unit: saat).
|
|
37
|
+
- Mengira mundur dari nilai tetapan tactTime, melalui 0 hingga ke -tactTime.
|
|
@@ -1,34 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
#### Tact Timer (节拍计时器)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
节拍计时器是生产线或工序中使用的时间管理工具，用于设定和管理特定工作或活动的分配时间，即 Tact time。这个工具能实时计算 Tact time，并监控实际经过时间，通过进度条和倒计时文本显示，向用户直观地展示当前进度。它有助于有效管理生产过程并优化产量。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
#### 属性
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
7
|
+
- Tact Time（节拍时间）
|
|
8
|
+
- 这是组件的 value 属性。
|
|
9
9
|
- 倒计时格式（format）
|
|
10
10
|
- 格式：hh:mm:ss
|
|
11
|
-
-
|
|
12
|
-
- progressDirection
|
|
13
|
-
-
|
|
14
|
-
- 如果是 increase，则从 increaseProgressColor
|
|
15
|
-
- 如果是 decrease，则从 decreaseProgressColor
|
|
16
|
-
- increaseProgressColor
|
|
11
|
+
- 倒计时的结果显示格式
|
|
12
|
+
- 进度方向（progressDirection）
|
|
13
|
+
- 设置进度条的进度方向
|
|
14
|
+
- 如果是 increase，则从 increaseProgressColor 开始，经过 0 后变为 decreaseProgressColor
|
|
15
|
+
- 如果是 decrease，则从 decreaseProgressColor 开始，经过 0 后变为 increaseProgressColor
|
|
16
|
+
- 增加进度颜色（increaseProgressColor）
|
|
17
17
|
- 增加时的进度颜色
|
|
18
|
-
- 从 tackTime
|
|
19
|
-
- decreaseProgressColor
|
|
18
|
+
- 从 tackTime 设置到倒数 20%的进度颜色
|
|
19
|
+
- 减少进度颜色（decreaseProgressColor）
|
|
20
20
|
- 减少时的进度颜色
|
|
21
|
-
|
|
22
|
-
- increseFontColor
|
|
21
|
+
- 增加字体颜色（increseFontColor）
|
|
23
22
|
- 增加时的字体颜色
|
|
24
|
-
- decreseFontColor
|
|
23
|
+
- 减少字体颜色（decreseFontColor）
|
|
25
24
|
- 减少时的字体颜色
|
|
26
|
-
-
|
|
25
|
+
- 进度阈值（progressThreshold）
|
|
26
|
+
- Tact Time 的警告阈值（%），进度低于阈值时使用阈值以下颜色
|
|
27
|
+
- 阈值以下颜色（underThresholdColor）
|
|
28
|
+
- 阈值以下的进度颜色
|
|
29
|
+
- 自动开始（autoStart）
|
|
27
30
|
- 自动开始倒计时
|
|
28
|
-
- round
|
|
29
|
-
-
|
|
31
|
+
- 圆角（round）
|
|
32
|
+
- 组件矩形区域四角部分的圆角半径大小
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
#### 数据
|
|
32
35
|
|
|
33
|
-
-
|
|
34
|
-
- 从 tactTime
|
|
36
|
+
- 从 tackTime 设置值设置时刻开始，每秒设置当前倒计时的值（单位：秒）。
|
|
37
|
+
- 从 tactTime 设置值开始，经过 0 后，倒计时至-tactTime。
|
|
@@ -19,6 +19,11 @@
|
|
|
19
19
|
"date": 1701365281113,
|
|
20
20
|
"name": "logs/application-2023-12-01-02.log",
|
|
21
21
|
"hash": "84c23313bddd79db6dbcca3408f195a8831ee36675cef5c09af71f83a44d29a5"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"date": 1701395322059,
|
|
25
|
+
"name": "logs/application-2023-12-01-10.log",
|
|
26
|
+
"hash": "e57b96f77902f6fb66606de50909b9d85035eb22a08cdcdc7400883fb40301dd"
|
|
22
27
|
}
|
|
23
28
|
],
|
|
24
29
|
"hashType": "sha256"
|
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
"date": 1701358701612,
|
|
10
10
|
"name": "logs/connections-2023-12-01-00.log",
|
|
11
11
|
"hash": "173883b0db84bd765d6bc0ded70a54e39dd05e58a72447da2d68717058e3f169"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"date": 1701395324166,
|
|
15
|
+
"name": "logs/connections-2023-12-01-10.log",
|
|
16
|
+
"hash": "1331a3a1904ef4e4161a752aeb3020b62a7c87a2be2abbd8ddcbaeac4f0e757a"
|
|
12
17
|
}
|
|
13
18
|
],
|
|
14
19
|
"hashType": "sha256"
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
2023-12-01T10:48:43+09:00 info: File Storage is Ready.
|
|
2
|
+
2023-12-01T10:48:44+09:00 error: oracledb module loading failed
|
|
3
|
+
2023-12-01T10:48:44+09:00 error: oracledb module loading failed
|
|
4
|
+
2023-12-01T10:48:45+09:00 info: Default DataSource established
|
|
5
|
+
2023-12-01T10:48:46+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
|
|
6
|
+
2023-12-01T10:48:46+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
2023-12-01T10:48:46+09:00 info: Initializing ConnectionManager...
|
|
2
|
+
2023-12-01T10:48:46+09:00 info: Connector 'echo-back-server' started to ready
|
|
3
|
+
2023-12-01T10:48:46+09:00 info: Connector 'echo-back' started to ready
|
|
4
|
+
2023-12-01T10:48:46+09:00 info: Connector 'http-connector' started to ready
|
|
5
|
+
2023-12-01T10:48:46+09:00 info: Connector 'graphql-connector' started to ready
|
|
6
|
+
2023-12-01T10:48:46+09:00 info: Connector 'sqlite-connector' started to ready
|
|
7
|
+
2023-12-01T10:48:46+09:00 info: Connector 'postgresql-connector' started to ready
|
|
8
|
+
2023-12-01T10:48:46+09:00 info: Connector 'mqtt-connector' started to ready
|
|
9
|
+
2023-12-01T10:48:46+09:00 info: Connector 'mssql-connector' started to ready
|
|
10
|
+
2023-12-01T10:48:46+09:00 info: Connector 'oracle-connector' started to ready
|
|
11
|
+
2023-12-01T10:48:46+09:00 info: Connector 'mysql-connector' started to ready
|
|
12
|
+
2023-12-01T10:48:46+09:00 info: Connector 'socket-server' started to ready
|
|
13
|
+
2023-12-01T10:48:46+09:00 info: Connector 'operato-connector' started to ready
|
|
14
|
+
2023-12-01T10:48:46+09:00 info: Connector 'msgraph-connector' started to ready
|
|
15
|
+
2023-12-01T10:48:46+09:00 info: echo-back-servers are ready
|
|
16
|
+
2023-12-01T10:48:46+09:00 info: echo-back connections are ready
|
|
17
|
+
2023-12-01T10:48:46+09:00 info: http-connector connections are ready
|
|
18
|
+
2023-12-01T10:48:46+09:00 info: graphql-connector connections are ready
|
|
19
|
+
2023-12-01T10:48:46+09:00 info: sqlite-connector connections are ready
|
|
20
|
+
2023-12-01T10:48:46+09:00 info: postgresql-connector connections are ready
|
|
21
|
+
2023-12-01T10:48:46+09:00 info: mqtt-connector connections are ready
|
|
22
|
+
2023-12-01T10:48:46+09:00 info: mssql-connector connections are ready
|
|
23
|
+
2023-12-01T10:48:46+09:00 info: oracle-connector connections are ready
|
|
24
|
+
2023-12-01T10:48:46+09:00 info: mysql-connector connections are ready
|
|
25
|
+
2023-12-01T10:48:46+09:00 info: socket servers are ready
|
|
26
|
+
2023-12-01T10:48:46+09:00 info: graphql-connector connections are ready
|
|
27
|
+
2023-12-01T10:48:46+09:00 info: msgraph-connector connections are ready
|
|
28
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'echo-back-server' ready
|
|
29
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'echo-back' ready
|
|
30
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'http-connector' ready
|
|
31
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'graphql-connector' ready
|
|
32
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'sqlite-connector' ready
|
|
33
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'postgresql-connector' ready
|
|
34
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'mqtt-connector' ready
|
|
35
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'mssql-connector' ready
|
|
36
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'oracle-connector' ready
|
|
37
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'mysql-connector' ready
|
|
38
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'socket-server' ready
|
|
39
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'operato-connector' ready
|
|
40
|
+
2023-12-01T10:48:46+09:00 info: All connector for 'msgraph-connector' ready
|
|
41
|
+
2023-12-01T10:48:46+09:00 info: ConnectionManager initialization done:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/scene-manufacturing",
|
|
3
3
|
"description": "Things scene components for manufacturing industry",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.3",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"things-scene": true,
|
|
7
7
|
"author": "heartyoh",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"prettier --write"
|
|
58
58
|
]
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "856c04c6cfe7663c5b72676d22a063d65abdb8d8"
|
|
61
61
|
}
|
package/src/tact-timer.ts
CHANGED
|
@@ -52,14 +52,25 @@ const NATURE: ComponentNature = {
|
|
|
52
52
|
name: 'decreaseFontColor'
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
|
-
type: '
|
|
56
|
-
label: '
|
|
57
|
-
name: '
|
|
55
|
+
type: 'color',
|
|
56
|
+
label: 'under-threshold-color',
|
|
57
|
+
name: 'underThresholdColor'
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
type: 'number',
|
|
61
|
+
label: 'progress-threshold',
|
|
62
|
+
name: 'progressThreshold',
|
|
63
|
+
placeholder: '%'
|
|
58
64
|
},
|
|
59
65
|
{
|
|
60
66
|
type: 'number',
|
|
61
67
|
label: 'round',
|
|
62
68
|
name: 'round'
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: 'boolean',
|
|
72
|
+
label: 'auto-start',
|
|
73
|
+
name: 'autoStart'
|
|
63
74
|
}
|
|
64
75
|
],
|
|
65
76
|
'value-property': 'tactTime',
|
|
@@ -128,10 +139,14 @@ export default class TactTimer extends RectPath(Shape) {
|
|
|
128
139
|
increaseFontColor,
|
|
129
140
|
decreaseFontColor,
|
|
130
141
|
increaseProgressColor = 'transparent',
|
|
131
|
-
decreaseProgressColor = 'transparent'
|
|
142
|
+
decreaseProgressColor = 'transparent',
|
|
143
|
+
underThresholdColor = 'transparent',
|
|
144
|
+
progressDirection = 'increase',
|
|
145
|
+
progressThreshold = 0
|
|
132
146
|
} = this.state
|
|
133
147
|
|
|
134
|
-
const increase = this.countdown > 0
|
|
148
|
+
const increase = this.countdown > 0
|
|
149
|
+
const underThreshold = this.countdown / tactTime < progressThreshold / 100
|
|
135
150
|
|
|
136
151
|
// progress의 색상
|
|
137
152
|
context.beginPath()
|
|
@@ -148,14 +163,23 @@ export default class TactTimer extends RectPath(Shape) {
|
|
|
148
163
|
progress = width - (width * progress) / 100
|
|
149
164
|
progress = Math.max(Math.min(progress, width), 0)
|
|
150
165
|
|
|
151
|
-
|
|
152
|
-
|
|
166
|
+
if (progressDirection == 'increase') {
|
|
167
|
+
context.rect(left, top, progress, height)
|
|
168
|
+
} else {
|
|
169
|
+
context.rect(left + progress, top, width - progress, height)
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
context.fillStyle = increase
|
|
173
|
+
? underThreshold
|
|
174
|
+
? underThresholdColor
|
|
175
|
+
: increaseProgressColor
|
|
176
|
+
: decreaseProgressColor
|
|
153
177
|
context.fill()
|
|
154
178
|
|
|
155
179
|
context.beginPath()
|
|
156
180
|
}
|
|
157
181
|
|
|
158
|
-
context.roundRect(left, top, width, height)
|
|
182
|
+
context.roundRect(left, top, width, height, round)
|
|
159
183
|
|
|
160
184
|
this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)
|
|
161
185
|
}
|
package/translations/en.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"label.
|
|
3
|
-
"label.
|
|
4
|
-
"label.
|
|
5
|
-
"label.
|
|
6
|
-
"label.increase-
|
|
7
|
-
"label.
|
|
8
|
-
"label.progress-
|
|
9
|
-
"label.tact-time": "
|
|
2
|
+
"label.decrease-progress-color": "Decrease Progress Color",
|
|
3
|
+
"label.decrese-font-color": "Decrease Font Color",
|
|
4
|
+
"label.format": "Format",
|
|
5
|
+
"label.increase-font-color": "Increase Font Color",
|
|
6
|
+
"label.increase-progress-color": "Increase Progress Color",
|
|
7
|
+
"label.progress-direction": "Progress Direction",
|
|
8
|
+
"label.progress-threshold": "Progress Threshold",
|
|
9
|
+
"label.tact-time": "Tact Time",
|
|
10
|
+
"label.under-threshold-color": "Under Threshold Color"
|
|
10
11
|
}
|