@operato/scene-manufacturing 7.0.6 → 7.0.7

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.
Files changed (29) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/db.sqlite +0 -0
  3. package/dist/tact-timer.js +20 -18
  4. package/dist/tact-timer.js.map +1 -1
  5. package/helps/scene/component/manufacturing/tact-timer.ja.md +39 -39
  6. package/helps/scene/component/manufacturing/tact-timer.ko.md +8 -8
  7. package/helps/scene/component/manufacturing/tact-timer.md +38 -38
  8. package/helps/scene/component/manufacturing/tact-timer.ms.md +45 -42
  9. package/helps/scene/component/manufacturing/tact-timer.zh.md +45 -45
  10. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +15 -0
  11. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +15 -5
  12. package/logs/application-2024-07-12-16.log +105 -0
  13. package/logs/application-2024-07-12-17.log +210 -0
  14. package/logs/application-2024-07-12-19.log +46 -0
  15. package/logs/connections-2024-07-12-16.log +50 -0
  16. package/logs/connections-2024-07-12-17.log +100 -0
  17. package/logs/connections-2024-07-12-19.log +94 -0
  18. package/package.json +2 -2
  19. package/src/tact-timer.ts +25 -21
  20. package/translations/en.json +10 -10
  21. package/translations/ja.json +10 -10
  22. package/translations/ko.json +4 -4
  23. package/translations/ms.json +9 -9
  24. package/translations/zh.json +9 -9
  25. package/tsconfig.tsbuildinfo +1 -1
  26. package/cache/translations/system/en.json +0 -1
  27. package/cache/translations/system/ko.json +0 -1
  28. package/icons/tact-timer-mask.svg +0 -37
  29. package/logs/connections-2024-06-27-22.log +0 -47
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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
+ ## [7.0.7](https://github.com/things-scene/operato-scene/compare/v7.0.6...v7.0.7) (2024-07-13)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * upgrade tact-timer ([b1d9521](https://github.com/things-scene/operato-scene/commit/b1d952152a8e2d5ac116d46e595a31f733af0ba4))
12
+
13
+
14
+
6
15
  ## [7.0.6](https://github.com/things-scene/operato-scene/compare/v7.0.5...v7.0.6) (2024-07-11)
7
16
 
8
17
 
package/db.sqlite CHANGED
Binary file
package/dist/tact-timer.js CHANGED
@@ -39,23 +39,23 @@ const NATURE = {
39
39
  },
40
40
  {
41
41
  type: 'color',
42
- label: 'increase-progress-color',
43
- name: 'increaseProgressColor'
42
+ label: 'before-due-progress-color',
43
+ name: 'beforeDueProgressColor'
44
44
  },
45
45
  {
46
46
  type: 'color',
47
- label: 'decrease-progress-color',
48
- name: 'decreaseProgressColor'
47
+ label: 'over-due-progress-color',
48
+ name: 'overDueProgressColor'
49
49
  },
50
50
  {
51
51
  type: 'color',
52
- label: 'increase-font-color',
53
- name: 'increaseFontColor'
52
+ label: 'before-due-font-color',
53
+ name: 'beforeDueFontColor'
54
54
  },
55
55
  {
56
56
  type: 'color',
57
- label: 'decrese-font-color',
58
- name: 'decreaseFontColor'
57
+ label: 'over-due-font-color',
58
+ name: 'overDueFontColor'
59
59
  },
60
60
  {
61
61
  type: 'color',
@@ -110,17 +110,17 @@ export default class TactTimer extends RectPath(Shape) {
110
110
  }
111
111
  }
112
112
  start() {
113
- const { startTime, endTime } = this.state;
113
+ const { startTime, endTime, hidden } = this.state;
114
114
  const start = this.parseTime(startTime);
115
115
  const end = this.parseTime(endTime);
116
- if (start && end) {
116
+ if (start && end && !hidden) {
117
117
  this._due = end.getTime();
118
118
  this._start = start.getTime();
119
119
  this.counting();
120
120
  }
121
121
  }
122
122
  onchange(after) {
123
- if ('startTime' in after || 'endTime' in after) {
123
+ if ('startTime' in after || 'endTime' in after || 'hidden' in after) {
124
124
  this.start();
125
125
  }
126
126
  if ('maskColor' in after) {
@@ -137,12 +137,14 @@ export default class TactTimer extends RectPath(Shape) {
137
137
  return this.imageElement;
138
138
  }
139
139
  counting() {
140
- if (this.disposed) {
140
+ const { hidden } = this.state;
141
+ if (this.disposed || hidden) {
141
142
  return;
142
143
  }
143
144
  requestAnimationFrame(() => {
144
- const { showTimer } = this.state;
145
+ const { showTimer, beforeDueFontColor, overDueFontColor, fontColor } = this.state;
145
146
  const countdown = this.countdown;
147
+ this.setState('fontColor', (this.countdown > 0 ? beforeDueFontColor : overDueFontColor) || fontColor);
146
148
  if (showTimer) {
147
149
  const text = format(Math.abs(countdown), this.getState('format'));
148
150
  this.text = text;
@@ -157,7 +159,7 @@ export default class TactTimer extends RectPath(Shape) {
157
159
  });
158
160
  }
159
161
  render(context) {
160
- var { top, left, height, width, round = 0, fontColor, maskColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0, showProgress } = this.state;
162
+ var { top, left, height, width, round = 0, fontColor, maskColor, beforeDueFontColor, overDueFontColor, beforeDueProgressColor = 'transparent', overDueProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0, showProgress } = this.state;
161
163
  const increase = this.countdown > 0;
162
164
  const totalDuration = (this._due - this._start) / 1000;
163
165
  const underThreshold = this.countdown / totalDuration < progressThreshold / 100;
@@ -184,15 +186,15 @@ export default class TactTimer extends RectPath(Shape) {
184
186
  context.fillStyle = increase
185
187
  ? underThreshold
186
188
  ? underThresholdColor
187
- : increaseProgressColor
188
- : decreaseProgressColor;
189
+ : beforeDueProgressColor
190
+ : overDueProgressColor;
189
191
  context.fill();
190
192
  context.beginPath();
191
193
  }
192
194
  const image = this.getImageElement();
193
- this.drawImage(context, image, left, top, width, height);
195
+ this.drawImage(context, image, left - 2, top - 2, width + 4, height + 4);
194
196
  context.roundRect(left, top, width, height, round);
195
- this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor);
197
+ this.setState('fontColor', (increase ? beforeDueFontColor : overDueFontColor) || fontColor);
196
198
  }
197
199
  postrender(context) {
198
200
  this.drawStroke(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":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport format from './libs/format'\nimport { MASK } from './tact-timer-mask'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'start-time',\n name: 'startTime',\n placeholder: 'YYYYMMDDhhmmss'\n },\n {\n type: 'string',\n label: 'end-time',\n name: 'endTime',\n placeholder: 'YYYYMMDDhhmmss'\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: 'tact-timer-mask-color',\n name: 'maskColor'\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 type: 'boolean',\n label: 'show-progress',\n name: 'showProgress'\n },\n {\n type: 'boolean',\n label: 'show-timer',\n name: 'showTimer'\n }\n ],\n help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n private _start: number = 0\n private _due: number = 0\n private imageElement?: HTMLImageElement\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 const { startTime, endTime } = this.state\n const start = this.parseTime(startTime)\n const end = this.parseTime(endTime)\n\n if (start && end) {\n this._due = end.getTime()\n this._start = start.getTime()\n this.counting()\n }\n }\n\n onchange(after: Properties) {\n if ('startTime' in after || 'endTime' in after) {\n this.start()\n }\n if ('maskColor' in after) {\n delete this.imageElement\n }\n }\n\n getImageElement(): HTMLImageElement | undefined {\n if (!this.imageElement) {\n const { maskColor = 'black' } = this.state\n\n this.imageElement = new Image()\n this.imageElement.src =\n 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MASK.replace(/{{fillColor}}/g, maskColor))\n }\n\n return this.imageElement\n }\n\n counting() {\n if (this.disposed) {\n return\n }\n\n requestAnimationFrame(() => {\n const { showTimer } = this.state\n const countdown = this.countdown\n\n if (showTimer) {\n const text = format(Math.abs(countdown), this.getState('format'))\n this.text = text\n } else {\n this.text = ''\n }\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 top,\n left,\n height,\n width,\n round = 0,\n fontColor,\n maskColor,\n increaseFontColor,\n decreaseFontColor,\n increaseProgressColor = 'transparent',\n decreaseProgressColor = 'transparent',\n underThresholdColor = 'transparent',\n progressDirection = 'increase',\n progressThreshold = 0,\n showProgress\n } = this.state\n\n const increase = this.countdown > 0\n const totalDuration = (this._due - this._start) / 1000\n const underThreshold = this.countdown / totalDuration < 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 if (!showProgress) {\n return\n }\n\n var progress = Math.abs((this.countdown / totalDuration) * 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 const image = this.getImageElement()\n this.drawImage(context, image!, left, top, width, height)\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 parseTime(timeString: string): Date | undefined {\n if (!timeString || timeString.length !== 14) {\n return undefined\n }\n const year = parseInt(timeString.slice(0, 4), 10)\n const month = parseInt(timeString.slice(4, 6), 10) - 1\n const day = parseInt(timeString.slice(6, 8), 10)\n const hour = parseInt(timeString.slice(8, 10), 10)\n const minute = parseInt(timeString.slice(10, 12), 10)\n const second = parseInt(timeString.slice(12, 14), 10)\n\n return new Date(year, month, day, hour, minute, second)\n }\n\n get countdown(): number {\n const due = this._due || 0\n const now = Date.now()\n\n return Math.round((due - now) / 1000)\n }\n\n get value() {\n const { startTime, endTime } = this.state\n return [startTime, endTime]\n }\n\n set value(v) {\n if (v instanceof Array) {\n const [startTime, endTime] = v\n this.setState({\n startTime,\n endTime\n })\n } else if (typeof v == 'object') {\n const { startTime, endTime } = v\n this.setState({\n startTime,\n endTime\n })\n } else if (typeof v == 'string') {\n const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)\n this.setState({\n startTime,\n endTime\n })\n } else {\n this.setState({\n startTime: undefined,\n endTime: undefined\n })\n }\n }\n}\n\nComponent.register('tact-timer', TactTimer)\n"]}
1
+ {"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../src/tact-timer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport format from './libs/format'\nimport { MASK } from './tact-timer-mask'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'start-time',\n name: 'startTime',\n placeholder: 'YYYYMMDDhhmmss'\n },\n {\n type: 'string',\n label: 'end-time',\n name: 'endTime',\n placeholder: 'YYYYMMDDhhmmss'\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: 'tact-timer-mask-color',\n name: 'maskColor'\n },\n {\n type: 'color',\n label: 'before-due-progress-color',\n name: 'beforeDueProgressColor'\n },\n {\n type: 'color',\n label: 'over-due-progress-color',\n name: 'overDueProgressColor'\n },\n {\n type: 'color',\n label: 'before-due-font-color',\n name: 'beforeDueFontColor'\n },\n {\n type: 'color',\n label: 'over-due-font-color',\n name: 'overDueFontColor'\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 type: 'boolean',\n label: 'show-progress',\n name: 'showProgress'\n },\n {\n type: 'boolean',\n label: 'show-timer',\n name: 'showTimer'\n }\n ],\n help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n private _start: number = 0\n private _due: number = 0\n private imageElement?: HTMLImageElement\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 const { startTime, endTime, hidden } = this.state\n const start = this.parseTime(startTime)\n const end = this.parseTime(endTime)\n\n if (start && end && !hidden) {\n this._due = end.getTime()\n this._start = start.getTime()\n this.counting()\n }\n }\n\n onchange(after: Properties) {\n if ('startTime' in after || 'endTime' in after || 'hidden' in after) {\n this.start()\n }\n\n if ('maskColor' in after) {\n delete this.imageElement\n }\n }\n\n getImageElement(): HTMLImageElement | undefined {\n if (!this.imageElement) {\n const { maskColor = 'black' } = this.state\n\n this.imageElement = new Image()\n this.imageElement.src =\n 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MASK.replace(/{{fillColor}}/g, maskColor))\n }\n\n return this.imageElement\n }\n\n counting() {\n const { hidden } = this.state\n if (this.disposed || hidden) {\n return\n }\n\n requestAnimationFrame(() => {\n const { showTimer, beforeDueFontColor, overDueFontColor, fontColor } = this.state\n const countdown = this.countdown\n\n this.setState('fontColor', (this.countdown > 0 ? beforeDueFontColor : overDueFontColor) || fontColor)\n\n if (showTimer) {\n const text = format(Math.abs(countdown), this.getState('format'))\n this.text = text\n } else {\n this.text = ''\n }\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 top,\n left,\n height,\n width,\n round = 0,\n fontColor,\n maskColor,\n beforeDueFontColor,\n overDueFontColor,\n beforeDueProgressColor = 'transparent',\n overDueProgressColor = 'transparent',\n underThresholdColor = 'transparent',\n progressDirection = 'increase',\n progressThreshold = 0,\n showProgress\n } = this.state\n\n const increase = this.countdown > 0\n const totalDuration = (this._due - this._start) / 1000\n const underThreshold = this.countdown / totalDuration < 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 if (!showProgress) {\n return\n }\n\n var progress = Math.abs((this.countdown / totalDuration) * 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 : beforeDueProgressColor\n : overDueProgressColor\n context.fill()\n\n context.beginPath()\n }\n\n const image = this.getImageElement()\n this.drawImage(context, image!, left - 2, top - 2, width + 4, height + 4)\n\n context.roundRect(left, top, width, height, round)\n\n this.setState('fontColor', (increase ? beforeDueFontColor : overDueFontColor) || fontColor)\n }\n\n postrender(context: CanvasRenderingContext2D) {\n this.drawStroke(context)\n this.drawText(context)\n }\n\n parseTime(timeString: string): Date | undefined {\n if (!timeString || timeString.length !== 14) {\n return undefined\n }\n const year = parseInt(timeString.slice(0, 4), 10)\n const month = parseInt(timeString.slice(4, 6), 10) - 1\n const day = parseInt(timeString.slice(6, 8), 10)\n const hour = parseInt(timeString.slice(8, 10), 10)\n const minute = parseInt(timeString.slice(10, 12), 10)\n const second = parseInt(timeString.slice(12, 14), 10)\n\n return new Date(year, month, day, hour, minute, second)\n }\n\n get countdown(): number {\n const due = this._due || 0\n const now = Date.now()\n\n return Math.round((due - now) / 1000)\n }\n\n get value() {\n const { startTime, endTime } = this.state\n return [startTime, endTime]\n }\n\n set value(v) {\n if (v instanceof Array) {\n const [startTime, endTime] = v\n this.setState({\n startTime,\n endTime\n })\n } else if (typeof v == 'object') {\n const { startTime, endTime } = v\n this.setState({\n startTime,\n endTime\n })\n } else if (typeof v == 'string') {\n const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)\n this.setState({\n startTime,\n endTime\n })\n } else {\n this.setState({\n startTime: undefined,\n endTime: undefined\n })\n }\n }\n}\n\nComponent.register('tact-timer', TactTimer)\n"]}
package/helps/scene/component/manufacturing/tact-timer.ja.md CHANGED
@@ -1,65 +1,65 @@
1
- ### タクトタイマー（Tact Timer）
1
+ # Tact Timer
2
2
 
3
- タクトタイマーは生産ラインやプロセスで使用される時間管理ツールで、特定の作業や活動に割り当てられた時間を設定し管理するために使用されます。このツールは開始時間と終了時間に基づいてリアルタイムで経過時間を計算し、実際の経過時間をモニタリングし、プログレスバーとカウントダウンテキストを表示して、使用者に現在の進行状況を視覚的に表現します。これにより、生産プロセスを効率的に管理し、生産量を最適化するのに役立ちます。
3
+ "Tact Timer"は、生産ラインや工程で使用される時間管理ツールで、特定の作業や活動に割り当てられた時間を設定および管理するために使用されます。このツールは開始時間と終了時間に基づいてリアルタイムで経過時間を計算および監視し、プログレスバーとカウントダウンテキストを表示してユーザーに現在の進行状況を視覚的に表現します。これにより、生産プロセスを効率的に管理し、生産量を最適化するのに役立ちます。
4
4
 
5
- #### 特性
5
+ ## properties
6
6
 
7
- - 開始時間（startTime）
7
+ - 開始時間(startTime)
8
8
  - 作業の開始時間を設定します。
9
- - フォーマット：'YYYYMMDDhhmmss'
10
- - 終了時間（endTime）
9
+ - フォーマット: 'YYYYMMDDhhmmss'
10
+ - 終了時間(endTime)
11
11
  - 作業の終了時間を設定します。
12
- - フォーマット：'YYYYMMDDhhmmss'
13
- - カウントダウンフォーマット（format）
14
- - フォーマット：'hh:mm:ss'
15
- - カウントダウン結果の表示形式
16
- - 進行方向（progressDirection）
17
- - プログレスバーの進行方向設定
18
- - 'increase' の場合、increaseProgressColor から始まり、0 を過ぎた後は decreaseProgressColor に変わります
19
- - 'decrease' の場合、decreaseProgressColor から始まり、0 を過ぎた後は increaseProgressColor に変わります
20
- - 増加進行色（increaseProgressColor）
21
- - 増加時の進行色
22
- - 減少進行色（decreaseProgressColor）
23
- - 減少時の進行色
24
- - 増加フォント色（increaseFontColor）
25
- - 増加時のフォント色
26
- - 減少フォント色（decreaseFontColor）
27
- - 減少時のフォント色
28
- - 進行閾値（progressThreshold）
29
- - 警告閾値（%）、進行状況が閾値以下の場合に閾値以下色が使用されます
30
- - 閾値以下色（underThresholdColor）
31
- - 閾値以下の進行色
32
- - 自動開始（autoStart）
33
- - カウントダウンを自動的に開始します
34
- - 角を丸くする（round）
35
- - コンポーネント四角形領域の 4 つの角の丸い形状の半径サイズ
12
+ - フォーマット: 'YYYYMMDDhhmmss'
13
+ - カウントダウンフォーマット(format)
14
+ - フォーマット: 'hh:mm:ss'
15
+ - カウントダウン結果の表示フォーマット
16
+ - 進行方向(progressDirection)
17
+ - プログレスバーの進行方向を設定します。
18
+ - 'increase': 増加する方向
19
+ - 'decrease': 減少する方向
20
+ - 期限前進行色(beforeDueProgressColor)
21
+ - 期限前の進行色
22
+ - 期限後進行色(overDueProgressColor)
23
+ - 期限後の進行色
24
+ - 期限前フォント色(beforeDueFontColor)
25
+ - 期限前のフォント色
26
+ - 期限後フォント色(overDueFontColor)
27
+ - 期限後のフォント色
28
+ - 進行しきい値(progressThreshold)
29
+ - 警告しきい値(%)。進行状況がしきい値以下の場合、しきい値以下の色が使用されます
30
+ - しきい値以下の色(underThresholdColor)
31
+ - しきい値以下の場合の進行色
32
+ - 自動開始(autoStart)
33
+ - カウントダウンを自動的に開始します。
34
+ - 丸くする(round)
35
+ - コンポーネントの四角の四隅の丸みの半径サイズ
36
36
  - 進行色を表示(showProgress)
37
- - 進行度を背景色で表現する
37
+ - 背景色で進行状況を表示します。
38
38
  - タイマーを表示(showTimer)
39
- - 残り時間または経過時間をテキストで表示する
39
+ - 残り時間または経過時間をテキストで表示します。
40
40
 
41
- #### データ
41
+ ## data
42
42
 
43
- - 設定された開始時間と終了時間に基づいて、現在の残り時間が毎秒更新されます。
43
+ - 設定された開始時間と終了時間に基づいて、毎秒現在の残り時間が更新されます。
44
44
  - タイマーは設定された終了時間を基準に 0 までカウントダウンされます。
45
45
 
46
- #### value
46
+ ## value
47
47
 
48
- `value`プロパティは、`startTime`と`endTime`をさまざまな形式で設定するために使用できます。また、さまざまな特殊文字を使用して時間を区切ることができます：
48
+ `value`プロパティは`startTime`と`endTime`をさまざまな形式で設定するために使用でき、複数の特殊文字を使用して時間を区切ることができます：
49
49
 
50
- - 配列として: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
50
+ - 配列として設定: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
51
51
 
52
52
  ```javascript
53
53
  component.value = ['20240101000000', '20240101235959']
54
54
  ```
55
55
 
56
- - オブジェクトとして:
56
+ - オブジェクトとして設定:
57
57
 
58
58
  ```javascript
59
59
  component.value = { startTime: '20240101000000', endTime: '20240101235959' }
60
60
  ```
61
61
 
62
- - 特殊文字を含む文字列として:
62
+ - 特殊文字を含む文字列として設定:
63
63
  - 使用可能な特殊文字: `-`, `/`, `%`, `$`, `#`, `_`, `,`
64
64
  ```javascript
65
65
  component.value = '20240101000000-20240101235959'
package/helps/scene/component/manufacturing/tact-timer.ko.md CHANGED
@@ -17,14 +17,14 @@
17
17
  - 프로그레스 바의 진행 방향을 설정합니다.
18
18
  - 'increase': 증가하는 방향으로 진행
19
19
  - 'decrease': 감소하는 방향으로 진행
20
- - 증가 진행 색상(increaseProgressColor)
21
- - 증가할 때의 진행 색상
22
- - 감소 진행 색상(decreaseProgressColor)
23
- - 감소할 때의 진행 색상
24
- - 증가 폰트 색상(increaseFontColor)
25
- - 증가할 때의 폰트 색상
26
- - 감소 폰트 색상(decreaseFontColor)
27
- - 감소할 때의 폰트 색상
20
+ - 만기 이전 진행 색상(beforeDueProgressColor)
21
+ - 만기 이전의 진행 색상
22
+ - 만기 이후 진행 색상(overDueProgressColor)
23
+ - 만기 이후의 진행 색상
24
+ - 만기 이전 폰트 색상(beforeDueFontColor)
25
+ - 만기 이전의 폰트 색상
26
+ - 만기 이후 폰트 색상(overDueFontColor)
27
+ - 만기 이후의 폰트 색상
28
28
  - 진행 임계값(progressThreshold)
29
29
  - 경고 임계값(%). 진행 상황이 임계값 이하인 경우 임계 이하 색상이 사용됨
30
30
  - 임계 이하 색상(underThresholdColor)
package/helps/scene/component/manufacturing/tact-timer.md CHANGED
@@ -1,66 +1,66 @@
1
- ### Tact Timer
1
+ # Tact Timer
2
2
 
3
- "Tact Timer" is a time management tool used in production lines or processes. It is utilized for setting and managing allocated time for a specific task or activity. This tool calculates elapsed 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.
3
+ "Tact Timer" is a time management tool used in production lines or processes to set and manage the time allocated to specific tasks or activities. This tool calculates and monitors elapsed time in real-time based on the start and end times and displays the current progress visually to the user using a progress bar and countdown text. This helps manage the production process efficiently and optimize output.
4
4
 
5
- #### properties
5
+ ## properties
6
6
 
7
- - Start Time (startTime)
7
+ - start time(startTime)
8
8
  - Sets the start time of the task.
9
9
  - Format: 'YYYYMMDDhhmmss'
10
- - End Time (endTime)
10
+ - end time(endTime)
11
11
  - Sets the end time of the task.
12
12
  - Format: 'YYYYMMDDhhmmss'
13
- - Countdown Format (format)
13
+ - countdown format(format)
14
14
  - Format: 'hh:mm:ss'
15
15
  - Format for displaying the countdown result
16
- - Progress Direction (progressDirection)
17
- - Sets the direction of progress for the progress bar
18
- - In the case of 'increase', it starts with increaseProgressColor, changing to decreaseProgressColor after passing 0
19
- - In the case of 'decrease', it starts with decreaseProgressColor, changing to increaseProgressColor after passing 0
20
- - Increase Progress Color (increaseProgressColor)
21
- - Color for progress during increase
22
- - Decrease Progress Color (decreaseProgressColor)
23
- - Color for progress during decrease
24
- - Increase Font Color (increaseFontColor)
25
- - Font color during increase
26
- - Decrease Font Color (decreaseFontColor)
27
- - Font color during decrease
28
- - Progress Threshold (progressThreshold)
29
- - Warning threshold (%) of elapsed time; threshold color is used when progress is below this level
30
- - Under Threshold Color (underThresholdColor)
31
- - Color for progress below the threshold
32
- - Auto Start (autoStart)
16
+ - progress direction(progressDirection)
17
+ - Sets the direction of the progress bar.
18
+ - 'increase': Progress increases
19
+ - 'decrease': Progress decreases
20
+ - before due progress color(beforeDueProgressColor)
21
+ - Progress color before due
22
+ - over due progress color(overDueProgressColor)
23
+ - Progress color after due
24
+ - before due font color(beforeDueFontColor)
25
+ - Font color before due
26
+ - over due font color(overDueFontColor)
27
+ - Font color after due
28
+ - progress threshold(progressThreshold)
29
+ - Warning threshold(%). Under threshold color is used when progress is below the threshold
30
+ - under threshold color(underThresholdColor)
31
+ - Progress color when below threshold
32
+ - auto start(autoStart)
33
33
  - Automatically starts the countdown
34
- - Round (round)
35
- - Radius size of the rounded shape at the four corners of the component's rectangular area
36
- - Show Progress Color (showProgress)
37
- - Use background color to represent the degree of progress
38
- - Show Timer (showTimer)
39
- - Show remaining time or elapsed time as text
34
+ - round(round)
35
+ - Radius size of the rounded corners of the component's rectangular area
36
+ - show progress color(showProgress)
37
+ - Displays the progress as a background color
38
+ - show timer(showTimer)
39
+ - Displays the remaining or elapsed time as text
40
40
 
41
- #### data
41
+ ## data
42
42
 
43
- - The current value, counted down from the start time to the end time, is updated every second (unit: seconds).
43
+ - The remaining time is updated every second based on the set start and end times.
44
44
  - The timer counts down to 0 based on the set end time.
45
45
 
46
- #### value
46
+ ## value
47
47
 
48
- The `value` property can be used to set the `startTime` and `endTime` in different formats and using various special characters to separate the times:
48
+ The `value` attribute can be used to set `startTime` and `endTime` in various formats, and can use various special characters to separate the times:
49
49
 
50
- - As an array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
50
+ - Set as an array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
51
51
 
52
52
  ```javascript
53
53
  component.value = ['20240101000000', '20240101235959']
54
54
  ```
55
55
 
56
- - As an object:
56
+ - Set as an object:
57
57
 
58
58
  ```javascript
59
59
  component.value = { startTime: '20240101000000', endTime: '20240101235959' }
60
60
  ```
61
61
 
62
- - As a string with special characters:
63
- - Allowed special characters: `-`, `/`, `%`, `$`, `#`, `_`, `,`
62
+ - Set as a string with special characters:
63
+ - Available special characters: `-`, `/`, `%`, `$`, `#`, `_`, `,`
64
64
  ```javascript
65
65
  component.value = '20240101000000-20240101235959'
66
66
  component.value = '20240101000000/20240101235959'
@@ -71,4 +71,4 @@ The `value` property can be used to set the `startTime` and `endTime` in differe
71
71
  component.value = '20240101000000,20240101235959'
72
72
  ```
73
73
 
74
- In all cases, the component will parse the provided `startTime` and `endTime` and update its state accordingly.
74
+ In all cases, the component parses the provided `startTime` and `endTime` and updates its state accordingly.
package/helps/scene/component/manufacturing/tact-timer.ms.md CHANGED
@@ -1,66 +1,69 @@
1
- ### Tact Timer
1
+ # Tact Timer
2
2
 
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. Alat ini mengira dan memantau masa yang berlalu antara waktu mula dan tamat secara real-time, 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.
3
+ "Tact Timer" adalah alat pengurusan masa yang digunakan dalam barisan pengeluaran atau proses untuk menetapkan dan menguruskan masa yang diperuntukkan untuk tugas atau aktiviti tertentu. Alat ini berdasarkan masa mula dan masa tamat untuk mengira dan memantau masa yang telah berlalu secara masa nyata, serta memaparkan bar kemajuan dan teks kiraan masa untuk memberikan gambaran visual tentang kemajuan semasa kepada pengguna. Ini membantu dalam menguruskan proses pengeluaran dengan cekap dan mengoptimumkan hasil pengeluaran.
4
4
 
5
- #### properties
5
+ ## properties
6
6
 
7
- - Waktu mula (startTime)
8
- - Menetapkan waktu mula kerja.
7
+ - masa mula(startTime)
8
+ - Tetapkan masa mula tugas.
9
9
  - Format: 'YYYYMMDDhhmmss'
10
- - Waktu tamat (endTime)
11
- - Menetapkan waktu tamat kerja.
10
+ - masa tamat(endTime)
11
+ - Tetapkan masa tamat tugas.
12
12
  - Format: 'YYYYMMDDhhmmss'
13
- - Format kiraan mundur (format)
13
+ - format kiraan masa(format)
14
14
  - Format: 'hh:mm:ss'
15
- - Format paparan hasil kiraan mundur
16
- - Arah kemajuan (progressDirection)
17
- - Tetapan arah kemajuan bar kemajuan
18
- - Jika 'increase', bermula dengan increaseProgressColor, selepas melalui 0 berubah kepada decreaseProgressColor
19
- - Jika 'decrease', bermula dengan decreaseProgressColor, selepas melalui 0 berubah kepada increaseProgressColor
20
- - Warna kemajuan meningkat (increaseProgressColor)
21
- - Warna kemajuan semasa meningkat
22
- - Warna kemajuan menurun (decreaseProgressColor)
23
- - Warna kemajuan semasa menurun
24
- - Warna fon meningkat (increaseFontColor)
25
- - Warna fon semasa meningkat
26
- - Warna fon menurun (decreaseFontColor)
27
- - Warna fon semasa menurun
28
- - Ambang kemajuan (progressThreshold)
29
- - Ambang amaran Tact Time (%), warna di bawah ambang digunakan apabila kemajuan berada di bawah nilai ambang
30
- - Warna di bawah ambang (underThresholdColor)
15
+ - Format paparan hasil kiraan masa
16
+ - arah kemajuan(progressDirection)
17
+ - Tetapkan arah kemajuan bar kemajuan.
18
+ - 'increase': Kemajuan meningkat
19
+ - 'decrease': Kemajuan menurun
20
+ - warna kemajuan sebelum tarikh akhir(beforeDueProgressColor)
21
+ - Warna kemajuan sebelum tarikh akhir
22
+ - warna kemajuan selepas tarikh akhir(overDueProgressColor)
23
+ - Warna kemajuan selepas tarikh akhir
24
+ - warna fon sebelum tarikh akhir(beforeDueFont
25
+
26
+ Color)
27
+
28
+ - Warna fon sebelum tarikh akhir
29
+ - warna fon selepas tarikh akhir(overDueFontColor)
30
+ - Warna fon selepas tarikh akhir
31
+ - ambang kemajuan(progressThreshold)
32
+ - Ambang amaran(%). Warna di bawah ambang digunakan jika kemajuan di bawah ambang
33
+ - warna di bawah ambang(underThresholdColor)
31
34
  - Warna kemajuan di bawah ambang
32
- - Auto mula (autoStart)
33
- - Mula kiraan mundur secara automatik
34
- - Bulat (round)
35
- - Saiz jejari bentuk bulat di empat penjuru kawasan segi empat komponen
36
- - Tunjuk warna kemajuan (showProgress)
37
- - Menunjukkan kemajuan dalam warna latar belakang
38
- - Tunjuk pemasa (showTimer)
39
- - Menunjukkan masa yang tinggal atau masa yang telah berlalu dalam bentuk teks
35
+ - mula automatik(autoStart)
36
+ - Memulakan kiraan masa secara automatik
37
+ - bulat(round)
38
+ - Saiz jejari bulat bagi keempat-empat sudut kawasan segi empat komponen
39
+ - tunjukkan warna kemajuan(showProgress)
40
+ - Menunjukkan tahap kemajuan dengan warna latar belakang
41
+ - tunjukkan pemasa(showTimer)
42
+ - Memaparkan masa yang tinggal atau masa yang telah berlalu dalam teks
40
43
 
41
- #### data
44
+ ## data
42
45
 
43
- - Nilai semasa dikira mundur dari waktu mula ke waktu tamat yang ditetapkan setiap saat.
44
- - Pemasa akan mengira mundur hingga ke 0 berdasarkan waktu tamat yang ditetapkan.
46
+ - Masa yang tinggal dikemas kini setiap saat berdasarkan masa mula dan masa tamat yang ditetapkan.
47
+ - Pemasa mengira masa sehingga 0 berdasarkan masa tamat yang ditetapkan.
45
48
 
46
- #### value
49
+ ## value
47
50
 
48
- Property `value` boleh digunakan untuk menetapkan `startTime` dan `endTime` dalam pelbagai format dan menggunakan pelbagai karakter khas untuk memisahkan waktu:
51
+ Harta `value` boleh digunakan untuk menetapkan `startTime` dan `endTime` dalam pelbagai format, dan boleh menggunakan pelbagai aksara khas untuk memisahkan masa:
49
52
 
50
- - Sebagai array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
53
+ - Tetapkan sebagai array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
51
54
 
52
55
  ```javascript
53
56
  component.value = ['20240101000000', '20240101235959']
54
57
  ```
55
58
 
56
- - Sebagai objek:
59
+ - Tetapkan sebagai objek:
57
60
 
58
61
  ```javascript
59
62
  component.value = { startTime: '20240101000000', endTime: '20240101235959' }
60
63
  ```
61
64
 
62
- - Sebagai string dengan karakter khas:
63
- - Karakter khas yang dibenarkan: `-`, `/`, `%`, `$`, `#`, `_`, `,`
65
+ - Tetapkan sebagai rentetan yang mengandungi aksara khas:
66
+ - Aksara khas yang boleh digunakan: `-`, `/`, `%`, `$`, `#`, `_`, `,`
64
67
  ```javascript
65
68
  component.value = '20240101000000-20240101235959'
66
69
  component.value = '20240101000000/20240101235959'
@@ -71,4 +74,4 @@ Property `value` boleh digunakan untuk menetapkan `startTime` dan `endTime` dala
71
74
  component.value = '20240101000000,20240101235959'
72
75
  ```
73
76
 
74
- Dalam semua kes, komponen akan mengurai `startTime` dan `endTime` yang diberikan dan mengemaskini statusnya mengikut kesesuaian.
77
+ Dalam semua kes, komponen akan mengurai `startTime` dan `endTime` yang disediakan dan mengemas kini status mengikut keadaan.