imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

featurn: time duration maxValue and minValue done.

Browse Source
This commit is contained in:
chiayin
2023-08-10 09:44:44 +08:00
parent b84fe38609
commit 13e9f7787b
2 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -24,7 +24,7 @@
:isSubmitListSeq="isSubmitListSeq"
:isSubmitDurationData="isSubmitDurationData"
></ConformanceSelectResult>
<p>selectConformanceTask: {{ selectConformanceTask }}</p>
<!-- <p>selectConformanceTask: {{ selectConformanceTask }}</p>
<p>selectConformanceStartAndEnd: {{ selectConformanceStartAndEnd }}</p>
<p>selectConformanceStart: {{ selectConformanceStart }}</p>
<p>selectConformanceEnd: {{ selectConformanceEnd }}</p>
@@ -34,7 +34,7 @@
<p>isSubmit: {{ isSubmit }}</p>
<p>isSubmitTask: {{ isSubmitTask }}</p>
<p>isSubmitListSeq: {{ isSubmitListSeq }}</p>
<p>isSubmitStartAndEnd: {{ isSubmitStartAndEnd }}</p>
<p>isSubmitStartAndEnd: {{ isSubmitStartAndEnd }}</p> -->
<!-- time range -->
<ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime"></ConformanceTimeRange>
</div>

64
src/components/durationjs.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="duration-container">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"
@@ -7,6 +7,7 @@
:data-index="index"
:data-tunit="unit"
:data-max="tUnits[unit].max"
:data-min="tUnits[unit].min"
:maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
:value="tUnits[unit].val.toString().padStart(2, '0')"
@focus="onFocus"
@@ -27,8 +28,11 @@ export default {
minutes: 0,
hours: 0,
days: 0,
maxDays: 0,
minDays: 0,
totalSeconds: 0,
apiTotal: 8740000,
maxTotal: 8740000,
minTotal: 6666666,
inputTypes: [],
lastInput: null,
};
@@ -37,10 +41,10 @@ export default {
tUnits: {
get() {
return {
s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1 },
m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60 },
h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600 },
d: { dsp: 'd', inc: 1, val: this.days, max: this.days, rate: 86400 }
s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays }
};
},
set(newValues) {
@@ -66,7 +70,12 @@ export default {
event.target.value = event.target.value.toString().padStart(2, '0');
// 手 key 數值大於最大值時，要等於最大值
if(event.target.value > event.target.dataset.max) event.target.value = (event.target.dataset.max - 1).toString().padStart(2, '0');
// 先將字串轉為數字才能比大小
const inputValue = parseInt(event.target.value, 10);
const max = parseInt(event.target.dataset.max, 10); // 設定最大值
const min = parseInt(event.target.dataset.min, 10);
if(inputValue> max) event.target.value = max.toString().padStart(2, '0');
else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
// 數值更新, tUnits 也更新, 並計算 totalSeconds
this.tUnits[event.target.dataset.tunit].val = event.target.value;
@@ -109,7 +118,7 @@ export default {
input.value = newVal.toString().padStart(2, '0');
if (selectIt) input.select();
},
secondToDate(totalSeconds) {
secondToDate(totalSeconds, size) {
// .toString().padStart(2, '0')
totalSeconds = parseInt(totalSeconds);
if(!isNaN(totalSeconds)) {
@@ -117,27 +126,36 @@ export default {
this.minutes = (Math.floor(totalSeconds - this.seconds) / 60) % 60;
this.hours = (Math.floor(totalSeconds / 3600)) % 24;
this.days = Math.floor(totalSeconds / (3600 * 24));
}
if(size === 'max') this.maxDays = Math.floor(totalSeconds / (3600 * 24));
else if(size === 'min') this.minDays = Math.floor(totalSeconds / (3600 * 24));
};
},
calculateTotalSeconds() {
let totalSeconds = 0;
let tUnits = {
s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1 },
m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60 },
h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600 },
d: { dsp: 'd', inc: 1, val: this.days, max: this.days, rate: 86400 },
s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays },
};
for (const unit in this.tUnits) {
const val = parseInt(this.tUnits[unit].val, 10);
if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
}
console.log(totalSeconds);
// 大於最大值時要等於最大值
if(totalSeconds >= this.apiTotal){
totalSeconds = this.apiTotal;
if(totalSeconds >= this.maxTotal){
totalSeconds = this.maxTotal;
this.tUnits = tUnits;
this.secondToDate(this.apiTotal);
this.secondToDate(this.maxTotal, 'max');
} else if (totalSeconds <= this.minTotal) {
// 小於最小值時要等於最小值
totalSeconds = this.minTotal;
this.tUnits = tUnits;
this.secondToDate(this.minTotal, 'min');
} else {
this.totalSeconds = totalSeconds;
}
@@ -145,16 +163,25 @@ export default {
},
mounted() {
this.inputTypes = this.display.split('');
this.secondToDate(this.apiTotal);
this.totalSeconds = this.apiTotal;
this.secondToDate(this.maxTotal, 'max');
this.totalSeconds = this.maxTotal;
},
};
</script>
<style scoped>
.duration-container {
margin: 4px;
border-radius: 4px;
background: var(--10, #FFF);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
height: 36px;
width: 221px;
}
.duration-box {
float:left;
overflow: auto;
height: var(--main-input-height);
padding: 4px;
}
.duration-box > .duration {
border: 1px solid var(--main-bg-light);
@@ -180,6 +207,7 @@ export default {
height: var(--main-input-height);
outline: none;
font-size: 14px;
margin: 0px 2px;
}
.duration-box > label.duration {
line-height: 28px;