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

compontent time duration 交互影響, 關聯性待修.

Browse Source
This commit is contained in:
chiayin
2023-08-21 10:16:24 +08:00
parent c5441475a9
commit 66e09aa85c
3 changed files with 138 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,9 +26,9 @@
></ConformanceSelectResult>
<!-- time range -->
<ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime"></ConformanceTimeRange>
selectDurationData:{{selectDurationData}} <br>
<!-- selectDurationData:{{selectDurationData}} <br>
selectDurationTime:{{selectDurationTime}} <br>
isSubmitDurationData:{{isSubmitDurationData}} <br>
isSubmitDurationData:{{isSubmitDurationData}} <br> -->
</div>
<!-- button -->
<div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">

80
src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
View File

@@ -5,12 +5,13 @@
<p>min: {{ timeData.min }}</p>
<p>max: {{ timeData.max }}</p>
<div class="flex justify-between items-center">
<Durationjs></Durationjs>
<span>~</span>
<Durationjs></Durationjs>
<!-- <Durationjs :max="max" :min="min" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
<span>~</span>
<Durationjs :max="max" :min="min" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs> -->
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" ></Durationjs>
<span>~</span>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" ></Durationjs>
</div>
<!-- <Durationjs></Durationjs> -->
</div>
</div>
</template>
@@ -22,47 +23,50 @@ export default {
data() {
return {
timeData: {
min: null,
max: null,
min: 0,
max: 0,
},
selectTimeRange: [20, 80],
selectedStart: null,
selectedEnd: null,
timeStart: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
timeEnd: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
}
},
components: {
Durationjs,
},
watch: {
time: function(newValue, oldValue) {
this.timeData = {
min: newValue.min,
max: newValue.max
}
computed: { // 一定得用 computed 傳遞資料，不要拿父元件 props 的數值，不然子元件會交互影響。
minVuemin() {
return this.time ? this.time.min : 0;
},
minVuemax() {
return this.time ? this.time.max : 0;
},
maxVuemin() {
return this.time ? this.time.min : 0;
},
maxVuemax() {
return this.time ? this.time.max : 0;
},
},
created() {
this.selectedStart = this.timeStart[1];
this.selectedEnd = this.timeEnd[5];
watch: {
time: function(newValue, oldValue) {
if(newValue == null) {
this.timeData = {
min: 0,
max: 0
};
}else if(newValue != null) {
this.timeData = {
min: newValue.min,
max: newValue.max
};
};
},
},
methods: {
minTotalSeconds(e) {
// console.log('min:', e);
},
maxTotalSeconds(e) {
// console.log('max:', e);
},
},
}
</script>
<style>
.time-preview {
border: 1px solid #eee;
max-width: 400px;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
padding: 15px;
background: rgb(70, 25, 173);
color: #fff;
}
.time-preview-time {
font-size: 30px;
}
</style>

133
src/components/durationjs.vue
View File

@@ -1,12 +1,15 @@
<template>
<div class=" relative">
<div class=" relative">
<div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
<p>{{ days }}d</p>
<p>{{ hours }}h</p>
<p>{{ minutes }}m</p>
<p>{{ seconds }}s</p>
</div>
<div class="duration-container absolute left-1/2 top-1/2 -translate-x-1/2" v-show="openTiemSelect">
<p>maxTotal: {{ maxTotal }}</p>
<p>minTotal: {{ minTotal }}</p>
<p>size: {{ size }}</p>
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTiemSelect">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"
@@ -29,6 +32,29 @@
<script>
export default {
props: {
max: {
type: Number,
default: 0,
required: true,
validator(value) {
return value >= 0;
},
},
min: {
type: Number,
default: 0,
required: true,
validator(value) {
return value >= 0;
},
},
size: {
type: String,
default: false,
required: true,
},
},
data() {
return {
display: 'dhms',
@@ -39,11 +65,17 @@ export default {
maxDays: 0,
minDays: 0,
totalSeconds: 0,
maxTotal: 8740000,
minTotal: 6666666,
maxTotal: null,
minTotal: null,
inputTypes: [],
lastInput: null,
openTiemSelect: false,
// tUnits: {
// s: { dsp: 's', inc: 1, val: 0, max: 60, rate: 1, min: 0 },
// m: { dsp: 'm', inc: 1, val: 0, max: 60, rate: 60, min: 0 },
// h: { dsp: 'h', inc: 1, val: 0, max: 24, rate: 3600, min: 0 },
// d: { dsp: 'd', inc: 1, val: 0, max: this.maxDays, rate: 86400, min: this.minDays }
// },
};
},
computed: {
@@ -68,23 +100,17 @@ export default {
},
},
},
directives: {
'click-outside': {
bind(el, { value }) {
handleOutsideClick = e => {
const isClickOutside = e.target !== el && !el.contains(e.target)
if (isClickOutside) value(e)
e.stopPropagation()
}
document.addEventListener('click', handleOutsideClick)
document.addEventListener('touchstart', handleOutsideClick)
watch: {
max: function(newValue, oldValue) {
this.maxTotal = newValue;
this.size === 'max' && newValue !== oldValue ? this.createData() : null;
},
unbind() {
document.removeEventListener('click', handleOutsideClick)
document.removeEventListener('touchstart', handleOutsideClick)
}
}
},
min: function(newValue, oldValue) {
this.minTotal = newValue;
this.size === 'min' && newValue !== oldValue ? this.createData() : null;
},
},
methods: {
onFocus(event) {
this.lastInput = event.target;
@@ -100,7 +126,7 @@ export default {
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');
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
@@ -120,6 +146,7 @@ export default {
this.seconds = event.target.value;
break;
};
this.calculateTotalSeconds();
},
onKeyUp(event) {
@@ -152,15 +179,28 @@ export default {
newVal = '00';
} else {
newVal = '00';
}
}
}
};
};
};
input.value = newVal.toString().padStart(2, '0');
switch (tUnit) {
case 'd':
this.days = input.value;
break;
case 'h':
this.hours = input.value;
break;
case 'm':
this.minutes = input.value;
break;
case 's':
this.seconds = input.value;
break;
};
if (selectIt) input.select();
},
secondToDate(totalSeconds, size) {
// .toString().padStart(2, '0')
totalSeconds = parseInt(totalSeconds);
if(!isNaN(totalSeconds)) {
this.seconds = totalSeconds % 60;
@@ -183,37 +223,52 @@ export default {
for (const unit in this.tUnits) {
const val = parseInt(this.tUnits[unit].val, 10);
if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
if (!isNaN(val)) {
totalSeconds += val * this.tUnits[unit].rate;
}
}
// 大於最大值時要等於最大值
console.log(totalSeconds);
if(totalSeconds >= this.maxTotal){
console.log('>max');
totalSeconds = this.maxTotal;
this.tUnits = tUnits;
this.secondToDate(this.maxTotal, 'max');
} else if (totalSeconds <= this.minTotal) {
console.log('<min');
// 小於最小值時要等於最小值
totalSeconds = this.minTotal;
this.tUnits = tUnits;
this.secondToDate(this.minTotal, 'min');
} else {
this.totalSeconds = totalSeconds;
}
};
// this.$emit('total-seconds', this.totalSeconds);
},
createData() {
// let size = 'min';
let size = this.size;
switch (size) {
case 'max':
this.secondToDate(this.minTotal, 'min');
this.secondToDate(this.maxTotal, 'max');
this.totalSeconds = this.maxTotal;
break;
case 'min':
this.secondToDate(this.maxTotal, 'max');
this.secondToDate(this.minTotal, 'min');
this.totalSeconds = this.minTotal;
break;
default:
break;
};
// this.$emit('total-seconds', this.totalSeconds);
},
},
mounted() {
this.inputTypes = this.display.split('');
let size ='min';
if(size === 'max') {
this.secondToDate(this.minTotal, 'min');
this.secondToDate(this.maxTotal, 'max');
this.totalSeconds = this.maxTotal;
}else if(size === 'min') {
this.secondToDate(this.maxTotal, 'max');
this.secondToDate(this.minTotal, 'min');
this.totalSeconds = this.minTotal;
}
this.createData();
},
};
</script>