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

Conformance: time duration component done.

Browse Source
This commit is contained in:
chiayin
2023-08-29 12:56:22 +08:00
parent b897b163aa
commit 89aa346b8f
2 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,8 @@
<div class="mt-2">
<p class="h2">Time Range</p>
<div class=" text-sm leading-normal">
<p>min: {{ timeData.min }}</p>
<p>max: {{ timeData.max }}</p>
<div class="flex justify-between items-center">
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
<span>~</span>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
</div>
@@ -25,56 +23,50 @@ export default {
},
timeRangeMin: 0,
timeRangeMax: 0,
minVuemin: 0,
minVuemax: 0,
maxVuemin: 0,
maxVuemax: 0,
updateMax: null,
}
},
components: {
Durationjs,
},
computed: {
minVuemin() {
let min = 0;
min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
return min;
},
minVuemax() {
let max = 0;
max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
return max;
},
maxVuemin() {
let min = 0;
min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
return min;
},
maxVuemax() {
let max = 0;
max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
return max;
},
},
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
};
}
time: {
handler: function(newValue, oldValue) {
if(newValue == null) {
this.timeData = {
min: 0,
max: 0
};
}else if(newValue != null) {
this.timeData = {
min: newValue.min,
max: newValue.max
};
this.setTimeValue();
}
},
deep: true,
immediate: true,
},
},
methods: {
setTimeValue() {
// 深拷貝原始 timeData 的內容
this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
},
minTotalSeconds(e) {
console.log('min:', e);
this.timeRangeMin = e;
},
maxTotalSeconds(e) {
console.log('max:', e);
this.timeRangeMax = e;
this.updateMax = e;
},
},
}