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

Conformance: time duration component fix bug.

Browse Source
This commit is contained in:
chiayin
2023-08-28 17:01:26 +08:00
parent 83485fa8aa
commit b897b163aa
5 changed files with 90 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,12 +5,9 @@
<p>min: {{ timeData.min }}</p>
<p>max: {{ timeData.max }}</p>
<div class="flex justify-between items-center">
<!-- <Durationjs :max="max" :min="min" :size="'min'" @total-seconds="minTotalSeconds"></Durationjs>
<Durationjs :max="minVuemax" :min="minVuemin" :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>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
</div>
</div>
</div>
@@ -26,23 +23,33 @@ export default {
min: 0,
max: 0,
},
timeRangeMin: 0,
timeRangeMax: 0,
}
},
components: {
Durationjs,
},
computed: { // 一定得用 computed 傳遞資料，不要拿父元件 props 的數值，不然子元件會交互影響。
computed: {
minVuemin() {
return this.time ? this.time.min : 0;
let min = 0;
min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
return min;
},
minVuemax() {
return this.time ? this.time.max : 0;
let max = 0;
max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
return max;
},
maxVuemin() {
return this.time ? this.time.min : 0;
let min = 0;
min = JSON.parse(JSON.stringify(this.timeData.min)); // 深拷貝原始 timeData 的內容
return min;
},
maxVuemax() {
return this.time ? this.time.max : 0;
let max = 0;
max = JSON.parse(JSON.stringify(this.timeData.max)); // 深拷貝原始 timeData 的內容
return max;
},
},
watch: {
@@ -57,15 +64,17 @@ export default {
min: newValue.min,
max: newValue.max
};
};
}
},
},
methods: {
minTotalSeconds(e) {
// console.log('min:', e);
console.log('min:', e);
this.timeRangeMin = e;
},
maxTotalSeconds(e) {
// console.log('max:', e);
console.log('max:', e);
this.timeRangeMax = e;
},
},
}

2
src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
View File

@@ -19,7 +19,7 @@ export default {
watch: {
timeResultData: {
handler(newValue) {
console.log(newValue);
// console.log(newValue);
this.data = newValue;
},
immediate: true,

7
src/components/Discover/Conformance/MoreModal.vue
View File

@@ -43,6 +43,7 @@
<div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
</div>
</div>
{{ caseData }}
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
<DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
<div v-for="(col, index) in columnData" :key="index">
@@ -100,6 +101,12 @@ export default {
if(this.infiniteData !== null){
const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
data.forEach(item => {
// item.facets.forEach((facet, index) => {
// console.log(facet.value);
// item[`fac_${index}`] = facet.value.join(', '); // 建立新的 key-value pair
// });
// delete item.facets; // 刪除原本的 attributes 屬性
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
});

99
src/components/durationjs.vue
View File

@@ -1,15 +1,12 @@
<template>
<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">
<div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
<p>{{ days }}d</p>
<p>{{ hours }}h</p>
<p>{{ minutes }}m</p>
<p>{{ seconds }}s</p>
</div>
<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-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"
@@ -69,13 +66,7 @@ export default {
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 }
// },
openTimeSelect: false,
};
},
computed: {
@@ -101,15 +92,20 @@ export default {
},
},
watch: {
max: function(newValue, oldValue) {
max: {
handler: function(newValue, oldValue) {
this.maxTotal = newValue;
this.size === 'max' && newValue !== oldValue ? this.createData() : null;
},
min: function(newValue, oldValue) {
this.minTotal = newValue;
this.size === 'min' && newValue !== oldValue ? this.createData() : null;
immediate: true,
},
min: {
handler: function(newValue, oldValue) {
this.minTotal = newValue;
this.size === 'min' && newValue !== oldValue ? this.createData() : null;
},
immediate: true,
}
},
methods: {
onFocus(event) {
@@ -126,8 +122,11 @@ 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');
else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
if(inputValue > max) {
event.target.value = max.toString().padStart(2, '0');
this.totalSeconds = this.maxTotal;
this.secondToDate(this.maxTotal, 'max');
}else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
// 數值更新, tUnits 也更新, 並計算 totalSeconds
const dsp = event.target.dataset.tunit;
@@ -179,9 +178,9 @@ export default {
newVal = '00';
} else {
newVal = '00';
};
};
};
}
}
}
input.value = newVal.toString().padStart(2, '0');
switch (tUnit) {
@@ -214,12 +213,6 @@ export default {
},
calculateTotalSeconds() {
let totalSeconds = 0;
let tUnits = {
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);
@@ -228,47 +221,41 @@ export default {
}
}
// 大於最大值時要等於最大值
console.log(totalSeconds);
if(totalSeconds >= this.maxTotal){
console.log('>max');
if(totalSeconds >= this.maxTotal){ // 大於最大值時要等於最大值
totalSeconds = this.maxTotal;
this.tUnits = tUnits;
} else if (totalSeconds <= this.minTotal) {
console.log('<min');
// 小於最小值時要等於最小值
} else if (totalSeconds <= this.minTotal) { // 小於最小值時要等於最小值
totalSeconds = this.minTotal;
this.tUnits = tUnits;
this.secondToDate(this.minTotal, 'min');
} else {
this.totalSeconds = totalSeconds;
};
// this.$emit('total-seconds', this.totalSeconds);
this.$emit('total-seconds', this.totalSeconds);
},
createData() {
// let size = 'min';
async createData() {
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);
if (this.maxTotal !== await null && this.minTotal !== await null) {
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('');
this.createData();
// this.createData();
},
};
</script>

18
src/stores/conformance.js
View File

@@ -148,6 +148,22 @@ export default defineStore('conformanceStore', {
state.allLoopCases.map(c => {
c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
// if(c.facets) {
// c.facets = '111';
// c.facets.map(att => {
// switch(att.type) {
// case 'float-list':
// console.log(att.value);
// att.value ='111'
// // att.value = att.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
// // att.value = att.value.join(', ');
// break;
// default:
// break;
// };
// return att;
// });
// };
c.attributes.map(att => {
switch (att.type) {
case 'date':
@@ -160,7 +176,7 @@ export default defineStore('conformanceStore', {
break;
}
return att;
})
});
return c;
});
};