Migrate all Vue components from Options API to <script setup>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -146,128 +146,126 @@
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useCompareStore } from '@/stores/compare';
|
||||
import { getTimeLabel } from '@/module/timeLabel.js';
|
||||
import getMoment from 'moment';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const compareStore = useCompareStore();
|
||||
const props = defineProps({
|
||||
sidebarState: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
},
|
||||
});
|
||||
|
||||
return { compareStore };
|
||||
},
|
||||
props:{
|
||||
sidebarState: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
const route = useRoute();
|
||||
const compareStore = useCompareStore();
|
||||
|
||||
const primaryValueCases = ref(0);
|
||||
const primaryValueTraces = ref(0);
|
||||
const primaryValueTaskInstances = ref(0);
|
||||
const primaryValueTasks = ref(0);
|
||||
const secondaryValueCases = ref(0);
|
||||
const secondaryValueTraces = ref(0);
|
||||
const secondaryValueTaskInstances = ref(0);
|
||||
const secondaryValueTasks = ref(0);
|
||||
const primaryStatData = ref(null);
|
||||
const secondaryStatData = ref(null);
|
||||
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val 原始數字
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
const getPercentLabel = (val) => {
|
||||
if((val * 100).toFixed(1) >= 100) return 100;
|
||||
else return parseFloat((val * 100).toFixed(1));
|
||||
};
|
||||
|
||||
/**
|
||||
* setting stats data
|
||||
* @param { object } data fetch API stats data
|
||||
* @param { string } fileName file Name
|
||||
* @returns { object } primaryStatData | secondaryStatData，回傳 primaryStatData 或 secondaryStatData
|
||||
*/
|
||||
const getStatData = (data, fileName) => {
|
||||
return {
|
||||
name: fileName,
|
||||
cases: {
|
||||
count: data.cases.count.toLocaleString('en-US'),
|
||||
total: data.cases.total.toLocaleString('en-US'),
|
||||
ratio: getPercentLabel(data.cases.ratio)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
primaryValueCases: 0,
|
||||
primaryValueTraces: 0,
|
||||
primaryValueTaskInstances: 0,
|
||||
primaryValueTasks: 0,
|
||||
secondaryValueCases: 0,
|
||||
secondaryValueTraces: 0,
|
||||
secondaryValueTaskInstances: 0,
|
||||
secondaryValueTasks: 0,
|
||||
primaryStatData: null,
|
||||
secondaryStatData: null,
|
||||
traces: {
|
||||
count: data.traces.count.toLocaleString('en-US'),
|
||||
total: data.traces.total.toLocaleString('en-US'),
|
||||
ratio: getPercentLabel(data.traces.ratio)
|
||||
},
|
||||
task_instances: {
|
||||
count: data.task_instances.count.toLocaleString('en-US'),
|
||||
total: data.task_instances.total.toLocaleString('en-US'),
|
||||
ratio: getPercentLabel(data.task_instances.ratio)
|
||||
},
|
||||
tasks: {
|
||||
count: data.tasks.count.toLocaleString('en-US'),
|
||||
total: data.tasks.total.toLocaleString('en-US'),
|
||||
ratio: getPercentLabel(data.tasks.ratio)
|
||||
},
|
||||
started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
|
||||
completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
|
||||
case_duration: {
|
||||
min: getTimeLabel(data.case_duration.min, 2),
|
||||
max: getTimeLabel(data.case_duration.max, 2),
|
||||
average: getTimeLabel(data.case_duration.average, 2),
|
||||
median: getTimeLabel(data.case_duration.median, 2),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val 原始數字
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return 100;
|
||||
else return parseFloat((val * 100).toFixed(1));
|
||||
},
|
||||
/**
|
||||
* setting stats data
|
||||
* @param { object } data fetch API stats data
|
||||
* @param { string } fileName file Name
|
||||
* @returns { object } primaryStatData | secondaryStatData，回傳 primaryStatData 或 secondaryStatData
|
||||
*/
|
||||
getStatData(data, fileName) {
|
||||
return {
|
||||
name: fileName,
|
||||
cases: {
|
||||
count: data.cases.count.toLocaleString('en-US'),
|
||||
total: data.cases.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.cases.ratio)
|
||||
},
|
||||
traces: {
|
||||
count: data.traces.count.toLocaleString('en-US'),
|
||||
total: data.traces.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.traces.ratio)
|
||||
},
|
||||
task_instances: {
|
||||
count: data.task_instances.count.toLocaleString('en-US'),
|
||||
total: data.task_instances.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.task_instances.ratio)
|
||||
},
|
||||
tasks: {
|
||||
count: data.tasks.count.toLocaleString('en-US'),
|
||||
total: data.tasks.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(data.tasks.ratio)
|
||||
},
|
||||
started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
|
||||
completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
|
||||
case_duration: {
|
||||
min: getTimeLabel(data.case_duration.min, 2),
|
||||
max: getTimeLabel(data.case_duration.max, 2),
|
||||
average: getTimeLabel(data.case_duration.average, 2),
|
||||
median: getTimeLabel(data.case_duration.median, 2),
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Behavior when show
|
||||
*/
|
||||
show(){
|
||||
this.primaryValueCases = this.primaryStatData.cases.ratio;
|
||||
this.primaryValueTraces= this.primaryStatData.traces.ratio;
|
||||
this.primaryValueTaskInstances = this.primaryStatData.task_instances.ratio;
|
||||
this.primaryValueTasks = this.primaryStatData.tasks.ratio;
|
||||
this.secondaryValueCases = this.secondaryStatData.cases.ratio;
|
||||
this.secondaryValueTraces= this.secondaryStatData.traces.ratio;
|
||||
this.secondaryValueTaskInstances = this.secondaryStatData.task_instances.ratio;
|
||||
this.secondaryValueTasks = this.secondaryStatData.tasks.ratio;
|
||||
},
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
hide(){
|
||||
this.primaryValueCases = 0;
|
||||
this.primaryValueTraces= 0;
|
||||
this.primaryValueTaskInstances = 0;
|
||||
this.primaryValueTasks = 0;
|
||||
this.secondaryValueCases = 0;
|
||||
this.secondaryValueTraces= 0;
|
||||
this.secondaryValueTaskInstances = 0;
|
||||
this.secondaryValueTasks = 0;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
const routeParams = this.$route.params;
|
||||
const primaryType = routeParams.primaryType;
|
||||
const secondaryType = routeParams.secondaryType;
|
||||
const primaryId = routeParams.primaryId;
|
||||
const secondaryId = routeParams.secondaryId;
|
||||
const primaryData = await this.compareStore.getStateData(primaryType, primaryId);
|
||||
const secondaryData = await this.compareStore.getStateData(secondaryType, secondaryId);
|
||||
|
||||
const primaryFileName = await this.compareStore.getFileName(primaryId)
|
||||
const secondaryFileName = await this.compareStore.getFileName(secondaryId)
|
||||
this.primaryStatData = await this.getStatData(primaryData, primaryFileName);
|
||||
this.secondaryStatData = await this.getStatData(secondaryData, secondaryFileName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Behavior when show
|
||||
*/
|
||||
const show = () => {
|
||||
primaryValueCases.value = primaryStatData.value.cases.ratio;
|
||||
primaryValueTraces.value = primaryStatData.value.traces.ratio;
|
||||
primaryValueTaskInstances.value = primaryStatData.value.task_instances.ratio;
|
||||
primaryValueTasks.value = primaryStatData.value.tasks.ratio;
|
||||
secondaryValueCases.value = secondaryStatData.value.cases.ratio;
|
||||
secondaryValueTraces.value = secondaryStatData.value.traces.ratio;
|
||||
secondaryValueTaskInstances.value = secondaryStatData.value.task_instances.ratio;
|
||||
secondaryValueTasks.value = secondaryStatData.value.tasks.ratio;
|
||||
};
|
||||
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
const hide = () => {
|
||||
primaryValueCases.value = 0;
|
||||
primaryValueTraces.value = 0;
|
||||
primaryValueTaskInstances.value = 0;
|
||||
primaryValueTasks.value = 0;
|
||||
secondaryValueCases.value = 0;
|
||||
secondaryValueTraces.value = 0;
|
||||
secondaryValueTaskInstances.value = 0;
|
||||
secondaryValueTasks.value = 0;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const routeParams = route.params;
|
||||
const primaryType = routeParams.primaryType;
|
||||
const secondaryType = routeParams.secondaryType;
|
||||
const primaryId = routeParams.primaryId;
|
||||
const secondaryId = routeParams.secondaryId;
|
||||
const primaryData = await compareStore.getStateData(primaryType, primaryId);
|
||||
const secondaryData = await compareStore.getStateData(secondaryType, secondaryId);
|
||||
|
||||
const primaryFileName = await compareStore.getFileName(primaryId)
|
||||
const secondaryFileName = await compareStore.getFileName(secondaryId)
|
||||
primaryStatData.value = await getStatData(primaryData, primaryFileName);
|
||||
secondaryStatData.value = await getStatData(secondaryData, secondaryFileName);
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.p-progressbar .p-progressbar-value) {
|
||||
|
||||
Reference in New Issue
Block a user