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:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -9,40 +9,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
export default {
|
||||
props: ['data', 'select'],
|
||||
data() {
|
||||
return {
|
||||
sortData: [],
|
||||
actList: this.select,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler: function(newValue) {
|
||||
this.sortData = sortNumEngZhtw(newValue)
|
||||
},
|
||||
immediate: true, // 立即執行一次排序
|
||||
},
|
||||
select: function(newValue) {
|
||||
this.actList = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 將選取的 Activities 傳出去
|
||||
*/
|
||||
actListData() {
|
||||
this.$emitter.emit('actListData', this.actList);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.actList = data;
|
||||
});
|
||||
},
|
||||
const props = defineProps(['data', 'select']);
|
||||
|
||||
const sortData = ref([]);
|
||||
const actList = ref(props.select);
|
||||
|
||||
watch(() => props.data, (newValue) => {
|
||||
sortData.value = sortNumEngZhtw(newValue);
|
||||
}, { immediate: true });
|
||||
|
||||
watch(() => props.select, (newValue) => {
|
||||
actList.value = newValue;
|
||||
});
|
||||
|
||||
/**
|
||||
* 將選取的 Activities 傳出去
|
||||
*/
|
||||
function actListData() {
|
||||
emitter.emit('actListData', actList.value);
|
||||
}
|
||||
|
||||
// created
|
||||
emitter.on('reset', (data) => {
|
||||
actList.value = data;
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -9,65 +9,55 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, } from 'pinia';
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useConformanceInputStore } from "@/stores/conformanceInput";
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
export default {
|
||||
props: ['title', 'select', 'data', 'category', 'task', 'isSubmit'],
|
||||
data() {
|
||||
return {
|
||||
sortData: [],
|
||||
localSelect: null,
|
||||
selectedRadio: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler: function(newValue) {
|
||||
this.sortData = sortNumEngZhtw(newValue)
|
||||
},
|
||||
immediate: true, // 立即執行一次排序
|
||||
},
|
||||
task: function(newValue) {
|
||||
this.selectedRadio = newValue;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
inputActivityRadioData: {
|
||||
get(){
|
||||
return {
|
||||
category: this.category,
|
||||
task: this.selectedRadio, // For example, "a", or "出院"
|
||||
};
|
||||
},
|
||||
} ,
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 將選取的 Activity 傳出去
|
||||
*/
|
||||
actRadioData() {
|
||||
this.localSelect = null;
|
||||
this.$emitter.emit('actRadioData', this.inputActivityRadioData);
|
||||
this.$emit('selected-task', this.selectedRadio);
|
||||
this.setActivityRadioStartEndData(this.inputActivityRadioData.task);
|
||||
},
|
||||
setGlobalActivityRadioDataState(){
|
||||
//this.title: value might be "From" or "To"
|
||||
this.setActivityRadioStartEndData(this.inputActivityRadioData.task, this.title);
|
||||
},
|
||||
...mapActions(useConformanceInputStore, ['setActivityRadioStartEndData']),
|
||||
},
|
||||
created() {
|
||||
sortNumEngZhtw(this.sortData);
|
||||
this.localSelect = this.isSubmit ? this.select : null;
|
||||
this.selectedRadio = this.localSelect;
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.selectedRadio = data;
|
||||
});
|
||||
this.setGlobalActivityRadioDataState();
|
||||
},
|
||||
const props = defineProps(['title', 'select', 'data', 'category', 'task', 'isSubmit']);
|
||||
const emit = defineEmits(['selected-task']);
|
||||
|
||||
const conformanceInputStore = useConformanceInputStore();
|
||||
|
||||
const sortData = ref([]);
|
||||
const localSelect = ref(null);
|
||||
const selectedRadio = ref(null);
|
||||
|
||||
watch(() => props.data, (newValue) => {
|
||||
sortData.value = sortNumEngZhtw(newValue);
|
||||
}, { immediate: true });
|
||||
|
||||
watch(() => props.task, (newValue) => {
|
||||
selectedRadio.value = newValue;
|
||||
});
|
||||
|
||||
const inputActivityRadioData = computed(() => ({
|
||||
category: props.category,
|
||||
task: selectedRadio.value,
|
||||
}));
|
||||
|
||||
/**
|
||||
* 將選取的 Activity 傳出去
|
||||
*/
|
||||
function actRadioData() {
|
||||
localSelect.value = null;
|
||||
emitter.emit('actRadioData', inputActivityRadioData.value);
|
||||
emit('selected-task', selectedRadio.value);
|
||||
conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task);
|
||||
}
|
||||
|
||||
function setGlobalActivityRadioDataState() {
|
||||
//this.title: value might be "From" or "To"
|
||||
conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task, props.title);
|
||||
}
|
||||
|
||||
// created
|
||||
sortNumEngZhtw(sortData.value);
|
||||
localSelect.value = props.isSubmit ? props.select : null;
|
||||
selectedRadio.value = localSelect.value;
|
||||
emitter.on('reset', (data) => {
|
||||
selectedRadio.value = data;
|
||||
});
|
||||
setGlobalActivityRadioDataState();
|
||||
</script>
|
||||
|
||||
@@ -41,93 +41,92 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
export default {
|
||||
props: ['data', 'listSeq', 'isSubmit', 'category'],
|
||||
data() {
|
||||
return {
|
||||
listSequence: [],
|
||||
lastItemIndex: null,
|
||||
isSelect: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
datadata: function() {
|
||||
// Activity List 要排序
|
||||
let newData;
|
||||
if(this.data !== null) {
|
||||
newData = JSON.parse(JSON.stringify(this.data));
|
||||
sortNumEngZhtw(newData);
|
||||
}
|
||||
return newData;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* double click Activity List
|
||||
* @param {number} index data item index
|
||||
* @param {object} element data item
|
||||
*/
|
||||
moveActItem(index, element){
|
||||
this.listSequence.push(element);
|
||||
},
|
||||
/**
|
||||
* double click Sequence List
|
||||
* @param {number} index data item index
|
||||
* @param {object} element data item
|
||||
*/
|
||||
moveSeqItem(index, element){
|
||||
this.listSequence.splice(index, 1);
|
||||
},
|
||||
/**
|
||||
* get listSequence
|
||||
*/
|
||||
getComponentData(){
|
||||
this.$emitter.emit('getListSequence',{
|
||||
category: this.category,
|
||||
task: this.listSequence,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Element dragging started
|
||||
*/
|
||||
onStart(evt) {
|
||||
const lastChild = evt.to.lastChild.lastChild;
|
||||
lastChild.style.display = 'none';
|
||||
// 隱藏拖曳元素原位置
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = 'none';
|
||||
// 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
|
||||
const listIndex = this.listSequence.length - 1;
|
||||
if(evt.oldIndex === listIndex) this.lastItemIndex = listIndex;
|
||||
},
|
||||
/**
|
||||
* Element dragging ended
|
||||
*/
|
||||
onEnd(evt) {
|
||||
// 顯示拖曳元素
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = '';
|
||||
// 拖曳結束要顯示箭頭，但最後一個不用
|
||||
const lastChild = evt.item.lastChild;
|
||||
const listIndex = this.listSequence.length - 1
|
||||
if (evt.oldIndex !== listIndex) {
|
||||
lastChild.style.display = '';
|
||||
}
|
||||
// reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
|
||||
this.lastItemIndex = null;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const newlist = JSON.parse(JSON.stringify(this.listSeq));
|
||||
this.listSequence = this.isSubmit ? newlist : [];
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.listSequence = [];
|
||||
});
|
||||
},
|
||||
const props = defineProps(['data', 'listSeq', 'isSubmit', 'category']);
|
||||
|
||||
const listSequence = ref([]);
|
||||
const lastItemIndex = ref(null);
|
||||
const isSelect = ref(true);
|
||||
|
||||
const datadata = computed(() => {
|
||||
// Activity List 要排序
|
||||
let newData;
|
||||
if(props.data !== null) {
|
||||
newData = JSON.parse(JSON.stringify(props.data));
|
||||
sortNumEngZhtw(newData);
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
|
||||
/**
|
||||
* double click Activity List
|
||||
* @param {number} index data item index
|
||||
* @param {object} element data item
|
||||
*/
|
||||
function moveActItem(index, element) {
|
||||
listSequence.value.push(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* double click Sequence List
|
||||
* @param {number} index data item index
|
||||
* @param {object} element data item
|
||||
*/
|
||||
function moveSeqItem(index, element) {
|
||||
listSequence.value.splice(index, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* get listSequence
|
||||
*/
|
||||
function getComponentData() {
|
||||
emitter.emit('getListSequence', {
|
||||
category: props.category,
|
||||
task: listSequence.value,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Element dragging started
|
||||
*/
|
||||
function onStart(evt) {
|
||||
const lastChild = evt.to.lastChild.lastChild;
|
||||
lastChild.style.display = 'none';
|
||||
// 隱藏拖曳元素原位置
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = 'none';
|
||||
// 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
|
||||
const listIndex = listSequence.value.length - 1;
|
||||
if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Element dragging ended
|
||||
*/
|
||||
function onEnd(evt) {
|
||||
// 顯示拖曳元素
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = '';
|
||||
// 拖曳結束要顯示箭頭，但最後一個不用
|
||||
const lastChild = evt.item.lastChild;
|
||||
const listIndex = listSequence.value.length - 1;
|
||||
if (evt.oldIndex !== listIndex) {
|
||||
lastChild.style.display = '';
|
||||
}
|
||||
// reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
|
||||
lastItemIndex.value = null;
|
||||
}
|
||||
|
||||
// created
|
||||
const newlist = JSON.parse(JSON.stringify(props.listSeq));
|
||||
listSequence.value = props.isSubmit ? newlist : [];
|
||||
emitter.on('reset', (data) => {
|
||||
listSequence.value = [];
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@reference "../../../../assets/tailwind.css";
|
||||
|
||||
@@ -50,90 +50,81 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ruleType: [
|
||||
{id: 1, name: 'Have activity'},
|
||||
{id: 2, name: 'Activity sequence'},
|
||||
{id: 3, name: 'Activity duration'},
|
||||
{id: 4, name: 'Processing time'},
|
||||
{id: 5, name: 'Waiting time'},
|
||||
{id: 6, name: 'Cycle time'},
|
||||
],
|
||||
activitySequence: [
|
||||
{id: 1, name: 'Start & End'},
|
||||
{id: 2, name: 'Sequence'},
|
||||
],
|
||||
mode: [
|
||||
{id: 1, name: 'Directly follows'},
|
||||
{id: 2, name: 'Eventually follows'},
|
||||
{id: 3, name: 'Short loop(s)'},
|
||||
{id: 4, name: 'Self loop(s)'},
|
||||
],
|
||||
processScope: [
|
||||
{id: 1, name: 'End to end'},
|
||||
{id: 2, name: 'Partial'},
|
||||
],
|
||||
actSeqMore: [
|
||||
{id: 1, name: 'All'},
|
||||
{id: 2, name: 'Start'},
|
||||
{id: 3, name: 'End'},
|
||||
{id: 4, name: 'Start & End'},
|
||||
],
|
||||
actSeqFromTo: [
|
||||
{id: 1, name: 'From'},
|
||||
{id: 2, name: 'To'},
|
||||
{id: 3, name: 'From & To'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 切換 Rule Type 的選項時的行為
|
||||
*/
|
||||
changeRadio() {
|
||||
this.selectedActivitySequence = 'Start & End';
|
||||
this.selectedMode = 'Directly follows';
|
||||
this.selectedProcessScope = 'End to end';
|
||||
this.selectedActSeqMore = 'All';
|
||||
this.selectedActSeqFromTo = 'From';
|
||||
this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
|
||||
},
|
||||
/**
|
||||
* 切換 Activity sequence 的選項時的行為
|
||||
*/
|
||||
changeRadioSeq() {
|
||||
this.$emitter.emit('isRadioSeqChange',true);
|
||||
},
|
||||
/**
|
||||
* 切換 Processing time 的選項時的行為
|
||||
*/
|
||||
changeRadioProcessScope() {
|
||||
this.$emitter.emit('isRadioProcessScopeChange', true);
|
||||
},
|
||||
/**
|
||||
* 切換 Process Scope 的選項時的行為
|
||||
*/
|
||||
changeRadioActSeqMore() {
|
||||
this.$emitter.emit('isRadioActSeqMoreChange', true);
|
||||
},
|
||||
/**
|
||||
* 切換 Activity Sequence 的選項時的行為
|
||||
*/
|
||||
changeRadioActSeqFromTo() {
|
||||
this.$emitter.emit('isRadioActSeqFromToChange', true);
|
||||
},
|
||||
}
|
||||
const ruleType = [
|
||||
{id: 1, name: 'Have activity'},
|
||||
{id: 2, name: 'Activity sequence'},
|
||||
{id: 3, name: 'Activity duration'},
|
||||
{id: 4, name: 'Processing time'},
|
||||
{id: 5, name: 'Waiting time'},
|
||||
{id: 6, name: 'Cycle time'},
|
||||
];
|
||||
const activitySequence = [
|
||||
{id: 1, name: 'Start & End'},
|
||||
{id: 2, name: 'Sequence'},
|
||||
];
|
||||
const mode = [
|
||||
{id: 1, name: 'Directly follows'},
|
||||
{id: 2, name: 'Eventually follows'},
|
||||
{id: 3, name: 'Short loop(s)'},
|
||||
{id: 4, name: 'Self loop(s)'},
|
||||
];
|
||||
const processScope = [
|
||||
{id: 1, name: 'End to end'},
|
||||
{id: 2, name: 'Partial'},
|
||||
];
|
||||
const actSeqMore = [
|
||||
{id: 1, name: 'All'},
|
||||
{id: 2, name: 'Start'},
|
||||
{id: 3, name: 'End'},
|
||||
{id: 4, name: 'Start & End'},
|
||||
];
|
||||
const actSeqFromTo = [
|
||||
{id: 1, name: 'From'},
|
||||
{id: 2, name: 'To'},
|
||||
{id: 3, name: 'From & To'},
|
||||
];
|
||||
|
||||
/**
|
||||
* 切換 Rule Type 的選項時的行為
|
||||
*/
|
||||
function changeRadio() {
|
||||
selectedActivitySequence.value = 'Start & End';
|
||||
selectedMode.value = 'Directly follows';
|
||||
selectedProcessScope.value = 'End to end';
|
||||
selectedActSeqMore.value = 'All';
|
||||
selectedActSeqFromTo.value = 'From';
|
||||
emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
|
||||
}
|
||||
/**
|
||||
* 切換 Activity sequence 的選項時的行為
|
||||
*/
|
||||
function changeRadioSeq() {
|
||||
emitter.emit('isRadioSeqChange',true);
|
||||
}
|
||||
/**
|
||||
* 切換 Processing time 的選項時的行為
|
||||
*/
|
||||
function changeRadioProcessScope() {
|
||||
emitter.emit('isRadioProcessScopeChange', true);
|
||||
}
|
||||
/**
|
||||
* 切換 Process Scope 的選項時的行為
|
||||
*/
|
||||
function changeRadioActSeqMore() {
|
||||
emitter.emit('isRadioActSeqMoreChange', true);
|
||||
}
|
||||
/**
|
||||
* 切換 Activity Sequence 的選項時的行為
|
||||
*/
|
||||
function changeRadioActSeqFromTo() {
|
||||
emitter.emit('isRadioActSeqFromToChange', true);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,264 +1,258 @@
|
||||
<template>
|
||||
<div class="px-4 text-sm">
|
||||
<!-- Have activity -->
|
||||
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
|
||||
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="state.containstTasksData" :select="isSubmitTask"></ResultCheck>
|
||||
<!-- Activity sequence -->
|
||||
<ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="state.selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="state.selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
||||
<!-- Activity duration -->
|
||||
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
|
||||
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="state.durationData" :select="isSubmitDurationData"></ResultCheck>
|
||||
<!-- Processing time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
|
||||
<!-- Waiting time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
|
||||
<!-- Cycle time -->
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
|
||||
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
|
||||
import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
|
||||
import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
|
||||
},
|
||||
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE'],
|
||||
components: {
|
||||
ResultCheck,
|
||||
ResultArrow,
|
||||
ResultDot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
containstTasksData: null,
|
||||
startEndData: null,
|
||||
selectCfmSeqStart: null,
|
||||
selectCfmSeqEnd: null,
|
||||
selectCfmSeqDirectly: [],
|
||||
selectCfmSeqEventually: [],
|
||||
durationData: null,
|
||||
selectCfmPtEteStart: null, // Processing time
|
||||
selectCfmPtEteEnd: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPStart: null,
|
||||
selectCfmPtPEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteStart: null, // Waiting time
|
||||
selectCfmWtEteEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPStart: null,
|
||||
selectCfmWtPEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteStart: null, // Cycle time
|
||||
selectCfmCtEteEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
startAndEndIsReset: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectCfmSeqSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
|
||||
if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmPtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
|
||||
if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmPtPSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart);
|
||||
if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmWtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart);
|
||||
if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmWtPSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart);
|
||||
if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
selectCfmCtEteSE: function() {
|
||||
const data = [];
|
||||
if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart);
|
||||
if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
reset() {
|
||||
this.containstTasksData = null;
|
||||
this.startEndData = null;
|
||||
this.selectCfmSeqStart = null;
|
||||
this.selectCfmSeqEnd = null;
|
||||
this.selectCfmSeqDirectly = [];
|
||||
this.selectCfmSeqEventually = [];
|
||||
this.durationData = null;
|
||||
this.selectCfmPtEteStart = null;
|
||||
this.selectCfmPtEteEnd = null;
|
||||
this.selectCfmPtEteSEStart = null;
|
||||
this.selectCfmPtEteSEEnd = null;
|
||||
this.selectCfmPtPStart = null;
|
||||
this.selectCfmPtPEnd = null;
|
||||
this.selectCfmPtPSEStart = null;
|
||||
this.selectCfmPtPSEEnd = null;
|
||||
this.selectCfmWtEteStart = null; // Waiting time
|
||||
this.selectCfmWtEteEnd = null;
|
||||
this.selectCfmWtEteSEStart = null;
|
||||
this.selectCfmWtEteSEEnd = null;
|
||||
this.selectCfmWtPStart = null;
|
||||
this.selectCfmWtPEnd = null;
|
||||
this.selectCfmWtPSEStart = null;
|
||||
this.selectCfmWtPSEEnd = null;
|
||||
this.selectCfmCtEteStart = null; // Cycle time
|
||||
this.selectCfmCtEteEnd = null;
|
||||
this.selectCfmCtEteSEStart = null;
|
||||
this.selectCfmCtEteSEEnd = null;
|
||||
this.startAndEndIsReset = true;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$emitter.on('actListData', (data) => {
|
||||
this.containstTasksData = data;
|
||||
});
|
||||
this.$emitter.on('actRadioData', (newData) => {
|
||||
const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
|
||||
const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE']);
|
||||
|
||||
const categoryMapping = {
|
||||
'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
|
||||
'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
|
||||
'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
|
||||
'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
|
||||
'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
|
||||
'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
|
||||
'cfmPtPStart': ['From', 'selectCfmPtPStart'],
|
||||
'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
|
||||
'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
|
||||
'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
|
||||
'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
|
||||
'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
|
||||
'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
|
||||
'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
|
||||
'cfmWtPStart': ['From', 'selectCfmWtPStart'],
|
||||
'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
|
||||
'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
|
||||
'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
|
||||
'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
|
||||
'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
|
||||
'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
|
||||
'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
|
||||
};
|
||||
const state = reactive({
|
||||
containstTasksData: null,
|
||||
startEndData: null,
|
||||
selectCfmSeqStart: null,
|
||||
selectCfmSeqEnd: null,
|
||||
selectCfmSeqDirectly: [],
|
||||
selectCfmSeqEventually: [],
|
||||
durationData: null,
|
||||
selectCfmPtEteStart: null, // Processing time
|
||||
selectCfmPtEteEnd: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPStart: null,
|
||||
selectCfmPtPEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteStart: null, // Waiting time
|
||||
selectCfmWtEteEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPStart: null,
|
||||
selectCfmWtPEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteStart: null, // Cycle time
|
||||
selectCfmCtEteEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
startAndEndIsReset: false,
|
||||
});
|
||||
|
||||
const updateSelection = (key, mainSelector, secondarySelector) => {
|
||||
if (this[mainSelector]) {
|
||||
if (data.task !== this[mainSelector]) this[secondarySelector] = null;
|
||||
}
|
||||
data.category = categoryMapping[key][0];
|
||||
this[mainSelector] = data;
|
||||
};
|
||||
const selectCfmSeqSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
|
||||
if(state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
if (categoryMapping[data.category]) {
|
||||
const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
|
||||
if (secondarySelector) {
|
||||
updateSelection(data.category, mainSelector, secondarySelector);
|
||||
} else {
|
||||
data.category = category;
|
||||
this[mainSelector] = [data];
|
||||
}
|
||||
} else if (this.selectedRuleType === 'Activity duration') {
|
||||
this.durationData = [data.task];
|
||||
}
|
||||
});
|
||||
this.$emitter.on('getListSequence', (data) => {
|
||||
switch (data.category) {
|
||||
case 'cfmSeqDirectly':
|
||||
this.selectCfmSeqDirectly = data.task;
|
||||
break;
|
||||
case 'cfmSeqEventually':
|
||||
this.selectCfmSeqEventually = data.task;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.reset();
|
||||
});
|
||||
// Radio 切換時，資料要清空
|
||||
this.$emitter.on('isRadioChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) this.reset();
|
||||
});
|
||||
},
|
||||
const selectCfmPtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
|
||||
if(state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmPtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
|
||||
if(state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmWtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
|
||||
if(state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmWtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
|
||||
if(state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
const selectCfmCtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
|
||||
if(state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
function reset() {
|
||||
state.containstTasksData = null;
|
||||
state.startEndData = null;
|
||||
state.selectCfmSeqStart = null;
|
||||
state.selectCfmSeqEnd = null;
|
||||
state.selectCfmSeqDirectly = [];
|
||||
state.selectCfmSeqEventually = [];
|
||||
state.durationData = null;
|
||||
state.selectCfmPtEteStart = null;
|
||||
state.selectCfmPtEteEnd = null;
|
||||
state.selectCfmPtEteSEStart = null;
|
||||
state.selectCfmPtEteSEEnd = null;
|
||||
state.selectCfmPtPStart = null;
|
||||
state.selectCfmPtPEnd = null;
|
||||
state.selectCfmPtPSEStart = null;
|
||||
state.selectCfmPtPSEEnd = null;
|
||||
state.selectCfmWtEteStart = null; // Waiting time
|
||||
state.selectCfmWtEteEnd = null;
|
||||
state.selectCfmWtEteSEStart = null;
|
||||
state.selectCfmWtEteSEEnd = null;
|
||||
state.selectCfmWtPStart = null;
|
||||
state.selectCfmWtPEnd = null;
|
||||
state.selectCfmWtPSEStart = null;
|
||||
state.selectCfmWtPSEEnd = null;
|
||||
state.selectCfmCtEteStart = null; // Cycle time
|
||||
state.selectCfmCtEteEnd = null;
|
||||
state.selectCfmCtEteSEStart = null;
|
||||
state.selectCfmCtEteSEEnd = null;
|
||||
state.startAndEndIsReset = true;
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('actListData', (data) => {
|
||||
state.containstTasksData = data;
|
||||
});
|
||||
emitter.on('actRadioData', (newData) => {
|
||||
const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
|
||||
|
||||
const categoryMapping = {
|
||||
'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
|
||||
'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
|
||||
'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
|
||||
'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
|
||||
'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
|
||||
'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
|
||||
'cfmPtPStart': ['From', 'selectCfmPtPStart'],
|
||||
'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
|
||||
'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
|
||||
'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
|
||||
'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
|
||||
'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
|
||||
'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
|
||||
'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
|
||||
'cfmWtPStart': ['From', 'selectCfmWtPStart'],
|
||||
'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
|
||||
'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
|
||||
'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
|
||||
'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
|
||||
'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
|
||||
'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
|
||||
'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
|
||||
};
|
||||
|
||||
const updateSelection = (key, mainSelector, secondarySelector) => {
|
||||
if (state[mainSelector]) {
|
||||
if (data.task !== state[mainSelector]) state[secondarySelector] = null;
|
||||
}
|
||||
data.category = categoryMapping[key][0];
|
||||
state[mainSelector] = data;
|
||||
};
|
||||
|
||||
if (categoryMapping[data.category]) {
|
||||
const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
|
||||
if (secondarySelector) {
|
||||
updateSelection(data.category, mainSelector, secondarySelector);
|
||||
} else {
|
||||
data.category = category;
|
||||
state[mainSelector] = [data];
|
||||
}
|
||||
} else if (selectedRuleType.value === 'Activity duration') {
|
||||
state.durationData = [data.task];
|
||||
}
|
||||
});
|
||||
emitter.on('getListSequence', (data) => {
|
||||
switch (data.category) {
|
||||
case 'cfmSeqDirectly':
|
||||
state.selectCfmSeqDirectly = data.task;
|
||||
break;
|
||||
case 'cfmSeqEventually':
|
||||
state.selectCfmSeqEventually = data.task;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
emitter.on('reset', (data) => {
|
||||
reset();
|
||||
});
|
||||
// Radio 切換時，資料要清空
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) reset();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.disc) {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section class="animate-fadein w-full h-full" >
|
||||
|
||||
|
||||
<!-- Have activity -->
|
||||
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
|
||||
|
||||
|
||||
<!-- Activity sequence -->
|
||||
<div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'"
|
||||
class="flex justify-between items-center w-full h-full">
|
||||
@@ -12,7 +12,7 @@
|
||||
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData"
|
||||
:category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- actSeqDrag -->
|
||||
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
|
||||
&& selectedMode === 'Directly follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqDirectly"
|
||||
@@ -24,7 +24,7 @@
|
||||
<!-- Activity duration -->
|
||||
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"
|
||||
:select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>
|
||||
|
||||
|
||||
<!-- Processing time -->
|
||||
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task"
|
||||
@@ -97,346 +97,316 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
import ActList from './ActList.vue';
|
||||
import ActRadio from './ActRadio.vue';
|
||||
import ActSeqDrag from './ActSeqDrag.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loadingStore = useLoadingStore();
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
|
||||
selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
|
||||
cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd,
|
||||
cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected
|
||||
} = storeToRefs(conformanceStore);
|
||||
const loadingStore = useLoadingStore();
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
|
||||
selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
|
||||
cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd,
|
||||
cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected
|
||||
} = storeToRefs(conformanceStore);
|
||||
|
||||
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
|
||||
selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart,
|
||||
cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,
|
||||
cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected,
|
||||
isEndSelected
|
||||
};
|
||||
},
|
||||
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually',
|
||||
'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE',
|
||||
'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart',
|
||||
'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd',
|
||||
'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE',
|
||||
'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
|
||||
'isSubmitShowDataWtP', 'isSubmitShowDataCt'
|
||||
],
|
||||
components: {
|
||||
ActList,
|
||||
ActRadio,
|
||||
ActSeqDrag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
task: null,
|
||||
taskStart: null,
|
||||
taskEnd: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Activity sequence
|
||||
cfmSeqStartData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
|
||||
return this.isEndSelected ? this.setSeqStartAndEndData(this.cfmSeqEnd, 'sources', this.task) : this.cfmSeqStart.map(i => i.label);
|
||||
},
|
||||
cfmSeqEndData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
|
||||
return this.isStartSelected ? this.setSeqStartAndEndData(this.cfmSeqStart, 'sinks', this.task) : this.cfmSeqEnd.map(i => i.label);
|
||||
},
|
||||
// Processing time
|
||||
cfmPtEteStartData: function() {
|
||||
return this.cfmPtEteStart.map(i => i.task);
|
||||
},
|
||||
cfmPtEteEndData: function() {
|
||||
return this.cfmPtEteEnd.map(i => i.task);
|
||||
},
|
||||
cfmPtEteSEStartData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
|
||||
return this.isEndSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'end', this.task) : this.setTaskData(this.cfmPtEteSE, 'start');
|
||||
},
|
||||
cfmPtEteSEEndData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
|
||||
return this.isStartSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'start', this.task) : this.setTaskData(this.cfmPtEteSE, 'end');
|
||||
},
|
||||
cfmPtPStartData: function() {
|
||||
return this.cfmPtPStart.map(i => i.task);
|
||||
},
|
||||
cfmPtPEndData: function() {
|
||||
return this.cfmPtPEnd.map(i => i.task);
|
||||
},
|
||||
cfmPtPSEStartData: function() {
|
||||
if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
|
||||
return this.isEndSelected ? this.setStartAndEndData(this.cfmPtPSE, 'end', this.task) : this.setTaskData(this.cfmPtPSE, 'start');
|
||||
},
|
||||
cfmPtPSEEndData: function() {
|
||||
if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
|
||||
return this.isStartSelected ? this.setStartAndEndData(this.cfmPtPSE, 'start', this.task) : this.setTaskData(this.cfmPtPSE, 'end');
|
||||
},
|
||||
// Waiting time
|
||||
cfmWtEteStartData: function() {
|
||||
return this.cfmWtEteStart.map(i => i.task);
|
||||
},
|
||||
cfmWtEteEndData: function() {
|
||||
return this.cfmWtEteEnd.map(i => i.task);
|
||||
},
|
||||
cfmWtEteSEStartData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
|
||||
return this.isEndSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'end', this.task) : this.setTaskData(this.cfmWtEteSE, 'start');
|
||||
},
|
||||
cfmWtEteSEEndData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
|
||||
return this.isStartSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'start', this.task) : this.setTaskData(this.cfmWtEteSE, 'end');
|
||||
},
|
||||
cfmWtPStartData: function() {
|
||||
return this.cfmWtPStart.map(i => i.task);
|
||||
},
|
||||
cfmWtPEndData: function() {
|
||||
return this.cfmWtPEnd.map(i => i.task);
|
||||
},
|
||||
cfmWtPSEStartData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
|
||||
return this.isEndSelected ? this.setStartAndEndData(this.cfmWtPSE, 'end', this.task) : this.setTaskData(this.cfmWtPSE, 'start');
|
||||
},
|
||||
cfmWtPSEEndData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
|
||||
return this.isStartSelected ? this.setStartAndEndData(this.cfmWtPSE, 'start', this.task) : this.setTaskData(this.cfmWtPSE, 'end');
|
||||
},
|
||||
// Cycle time
|
||||
cfmCtEteStartData: function() {
|
||||
return this.cfmCtEteStart.map(i => i.task);
|
||||
},
|
||||
cfmCtEteEndData: function() {
|
||||
return this.cfmCtEteEnd.map(i => i.task);
|
||||
},
|
||||
cfmCtEteSEStartData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
|
||||
return this.isEndSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'end', this.task) : this.setTaskData(this.cfmCtEteSE, 'start');
|
||||
},
|
||||
cfmCtEteSEEndData: function() {
|
||||
if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
|
||||
return this.isStartSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'start', this.task) : this.setTaskData(this.cfmCtEteSE, 'end');
|
||||
},
|
||||
},
|
||||
watch: { // 解決儲存後的 Rule 檔，無法重新更改規則之問題
|
||||
isSubmitShowDataSeq: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
isSubmitShowDataPtEte: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
isSubmitShowDataPtP: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
isSubmitShowDataWtEte: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
isSubmitShowDataWtP: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
isSubmitShowDataCt: {
|
||||
handler: function(newValue) {
|
||||
this.taskStart = newValue.taskStart;
|
||||
this.taskEnd = newValue.taskEnd;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 設定 start and end 的 Radio Data
|
||||
* @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
|
||||
* 傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
|
||||
* @returns {array}
|
||||
*/
|
||||
setTaskData(data, category) {
|
||||
let newData = data.map(i => i[category]);
|
||||
newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
|
||||
return newData;
|
||||
},
|
||||
/**
|
||||
* 重新設定連動的 start and end 的 Radio Data
|
||||
* @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
|
||||
* 傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
|
||||
* @param {string} task 已選擇的 Activity task
|
||||
* @returns {array}
|
||||
*/
|
||||
setStartAndEndData(data, category, task) {
|
||||
let oppositeCategory = '';
|
||||
if (category === 'start') {
|
||||
oppositeCategory = 'end';
|
||||
} else {
|
||||
oppositeCategory = 'start';
|
||||
};
|
||||
let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]);
|
||||
newData = [...new Set(newData)];
|
||||
return newData;
|
||||
},
|
||||
/**
|
||||
* 重新設定 Activity sequence 連動的 start and end 的 Radio Data
|
||||
* @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
|
||||
* @param {string} task 已選擇的 Activity task
|
||||
* @returns {array}
|
||||
*/
|
||||
setSeqStartAndEndData(data, category, task) {
|
||||
let newData = data.filter(i => i.label === task).map(i => i[category]);
|
||||
newData = [...new Set(...newData)];
|
||||
return newData;
|
||||
},
|
||||
/**
|
||||
* select start list's task
|
||||
* @param {event} e 觸發 input 的詳細事件
|
||||
*/
|
||||
selectStart(e) {
|
||||
this.taskStart = e;
|
||||
if(this.isStartSelected === null || this.isStartSelected === true){
|
||||
this.isStartSelected = true;
|
||||
this.isEndSelected = false;
|
||||
this.task = e;
|
||||
this.taskEnd = null;
|
||||
this.$emitter.emit('sratrAndEndToStart', {
|
||||
start: true,
|
||||
end: false,
|
||||
});
|
||||
};
|
||||
},
|
||||
/**
|
||||
* select End list's task
|
||||
* @param {event} e 觸發 input 的詳細事件
|
||||
*/
|
||||
selectEnd(e) {
|
||||
this.taskEnd = e;
|
||||
if(this.isEndSelected === null || this.isEndSelected === true){
|
||||
this.isEndSelected = true;
|
||||
this.isStartSelected = false;
|
||||
this.task = e;
|
||||
this.taskStart = null;
|
||||
this.$emitter.emit('sratrAndEndToStart', {
|
||||
start: false,
|
||||
end: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* reset all data.
|
||||
*/
|
||||
reset() {
|
||||
this.task = null;
|
||||
this.isStartSelected = null;
|
||||
this.isEndSelected = null;
|
||||
this.taskStart = null;
|
||||
this.taskEnd = null;
|
||||
},
|
||||
/**
|
||||
* Radio 切換時，Start & End Data 連動改變
|
||||
* @param {boolean} data true | false，傳入 true 或 false
|
||||
*/
|
||||
setResetData(data) {
|
||||
if(data) {
|
||||
if(this.isSubmit) {
|
||||
switch (this.selectedRuleType) {
|
||||
case 'Activity sequence':
|
||||
this.task = this.isSubmitShowDataSeq.task;
|
||||
this.isStartSelected = this.isSubmitShowDataSeq.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataSeq.isEndSelected;
|
||||
const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually',
|
||||
'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE',
|
||||
'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart',
|
||||
'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd',
|
||||
'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE',
|
||||
'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
|
||||
'isSubmitShowDataWtP', 'isSubmitShowDataCt'
|
||||
]);
|
||||
|
||||
const task = ref(null);
|
||||
const taskStart = ref(null);
|
||||
const taskEnd = ref(null);
|
||||
|
||||
// Activity sequence
|
||||
const cfmSeqStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
|
||||
return isEndSelected.value ? setSeqStartAndEndData(cfmSeqEnd.value, 'sources', task.value) : cfmSeqStart.value.map(i => i.label);
|
||||
});
|
||||
const cfmSeqEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
|
||||
return isStartSelected.value ? setSeqStartAndEndData(cfmSeqStart.value, 'sinks', task.value) : cfmSeqEnd.value.map(i => i.label);
|
||||
});
|
||||
// Processing time
|
||||
const cfmPtEteStartData = computed(() => {
|
||||
return cfmPtEteStart.value.map(i => i.task);
|
||||
});
|
||||
const cfmPtEteEndData = computed(() => {
|
||||
return cfmPtEteEnd.value.map(i => i.task);
|
||||
});
|
||||
const cfmPtEteSEStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
|
||||
return isEndSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'end', task.value) : setTaskData(cfmPtEteSE.value, 'start');
|
||||
});
|
||||
const cfmPtEteSEEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
|
||||
return isStartSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'start', task.value) : setTaskData(cfmPtEteSE.value, 'end');
|
||||
});
|
||||
const cfmPtPStartData = computed(() => {
|
||||
return cfmPtPStart.value.map(i => i.task);
|
||||
});
|
||||
const cfmPtPEndData = computed(() => {
|
||||
return cfmPtPEnd.value.map(i => i.task);
|
||||
});
|
||||
const cfmPtPSEStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
|
||||
return isEndSelected.value ? setStartAndEndData(cfmPtPSE.value, 'end', task.value) : setTaskData(cfmPtPSE.value, 'start');
|
||||
});
|
||||
const cfmPtPSEEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
|
||||
return isStartSelected.value ? setStartAndEndData(cfmPtPSE.value, 'start', task.value) : setTaskData(cfmPtPSE.value, 'end');
|
||||
});
|
||||
// Waiting time
|
||||
const cfmWtEteStartData = computed(() => {
|
||||
return cfmWtEteStart.value.map(i => i.task);
|
||||
});
|
||||
const cfmWtEteEndData = computed(() => {
|
||||
return cfmWtEteEnd.value.map(i => i.task);
|
||||
});
|
||||
const cfmWtEteSEStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
|
||||
return isEndSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'end', task.value) : setTaskData(cfmWtEteSE.value, 'start');
|
||||
});
|
||||
const cfmWtEteSEEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
|
||||
return isStartSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'start', task.value) : setTaskData(cfmWtEteSE.value, 'end');
|
||||
});
|
||||
const cfmWtPStartData = computed(() => {
|
||||
return cfmWtPStart.value.map(i => i.task);
|
||||
});
|
||||
const cfmWtPEndData = computed(() => {
|
||||
return cfmWtPEnd.value.map(i => i.task);
|
||||
});
|
||||
const cfmWtPSEStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
|
||||
return isEndSelected.value ? setStartAndEndData(cfmWtPSE.value, 'end', task.value) : setTaskData(cfmWtPSE.value, 'start');
|
||||
});
|
||||
const cfmWtPSEEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
|
||||
return isStartSelected.value ? setStartAndEndData(cfmWtPSE.value, 'start', task.value) : setTaskData(cfmWtPSE.value, 'end');
|
||||
});
|
||||
// Cycle time
|
||||
const cfmCtEteStartData = computed(() => {
|
||||
return cfmCtEteStart.value.map(i => i.task);
|
||||
});
|
||||
const cfmCtEteEndData = computed(() => {
|
||||
return cfmCtEteEnd.value.map(i => i.task);
|
||||
});
|
||||
const cfmCtEteSEStartData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
|
||||
return isEndSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'end', task.value) : setTaskData(cfmCtEteSE.value, 'start');
|
||||
});
|
||||
const cfmCtEteSEEndData = computed(() => {
|
||||
if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
|
||||
return isStartSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'start', task.value) : setTaskData(cfmCtEteSE.value, 'end');
|
||||
});
|
||||
|
||||
// Watchers - 解決儲存後的 Rule 檔，無法重新更改規則之問題
|
||||
watch(() => props.isSubmitShowDataSeq, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
watch(() => props.isSubmitShowDataPtEte, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
watch(() => props.isSubmitShowDataPtP, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
watch(() => props.isSubmitShowDataWtEte, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
watch(() => props.isSubmitShowDataWtP, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
watch(() => props.isSubmitShowDataCt, (newValue) => {
|
||||
taskStart.value = newValue.taskStart;
|
||||
taskEnd.value = newValue.taskEnd;
|
||||
});
|
||||
|
||||
/**
|
||||
* 設定 start and end 的 Radio Data
|
||||
* @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
|
||||
* 傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
|
||||
* @returns {array}
|
||||
*/
|
||||
function setTaskData(data, category) {
|
||||
let newData = data.map(i => i[category]);
|
||||
newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
|
||||
return newData;
|
||||
}
|
||||
/**
|
||||
* 重新設定連動的 start and end 的 Radio Data
|
||||
* @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
|
||||
* 傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
|
||||
* @param {string} task 已選擇的 Activity task
|
||||
* @returns {array}
|
||||
*/
|
||||
function setStartAndEndData(data, category, taskVal) {
|
||||
let oppositeCategory = '';
|
||||
if (category === 'start') {
|
||||
oppositeCategory = 'end';
|
||||
} else {
|
||||
oppositeCategory = 'start';
|
||||
};
|
||||
let newData = data.filter(i => i[category] === taskVal).map(i => i[oppositeCategory]);
|
||||
newData = [...new Set(newData)];
|
||||
return newData;
|
||||
}
|
||||
/**
|
||||
* 重新設定 Activity sequence 連動的 start and end 的 Radio Data
|
||||
* @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
|
||||
* @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
|
||||
* @param {string} task 已選擇的 Activity task
|
||||
* @returns {array}
|
||||
*/
|
||||
function setSeqStartAndEndData(data, category, taskVal) {
|
||||
let newData = data.filter(i => i.label === taskVal).map(i => i[category]);
|
||||
newData = [...new Set(...newData)];
|
||||
return newData;
|
||||
}
|
||||
/**
|
||||
* select start list's task
|
||||
* @param {event} e 觸發 input 的詳細事件
|
||||
*/
|
||||
function selectStart(e) {
|
||||
taskStart.value = e;
|
||||
if(isStartSelected.value === null || isStartSelected.value === true){
|
||||
isStartSelected.value = true;
|
||||
isEndSelected.value = false;
|
||||
task.value = e;
|
||||
taskEnd.value = null;
|
||||
emitter.emit('sratrAndEndToStart', {
|
||||
start: true,
|
||||
end: false,
|
||||
});
|
||||
};
|
||||
}
|
||||
/**
|
||||
* select End list's task
|
||||
* @param {event} e 觸發 input 的詳細事件
|
||||
*/
|
||||
function selectEnd(e) {
|
||||
taskEnd.value = e;
|
||||
if(isEndSelected.value === null || isEndSelected.value === true){
|
||||
isEndSelected.value = true;
|
||||
isStartSelected.value = false;
|
||||
task.value = e;
|
||||
taskStart.value = null;
|
||||
emitter.emit('sratrAndEndToStart', {
|
||||
start: false,
|
||||
end: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* reset all data.
|
||||
*/
|
||||
function reset() {
|
||||
task.value = null;
|
||||
isStartSelected.value = null;
|
||||
isEndSelected.value = null;
|
||||
taskStart.value = null;
|
||||
taskEnd.value = null;
|
||||
}
|
||||
/**
|
||||
* Radio 切換時，Start & End Data 連動改變
|
||||
* @param {boolean} data true | false，傳入 true 或 false
|
||||
*/
|
||||
function setResetData(data) {
|
||||
if(data) {
|
||||
if(props.isSubmit) {
|
||||
switch (selectedRuleType.value) {
|
||||
case 'Activity sequence':
|
||||
task.value = props.isSubmitShowDataSeq.task;
|
||||
isStartSelected.value = props.isSubmitShowDataSeq.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataSeq.isEndSelected;
|
||||
break;
|
||||
case 'Processing time':
|
||||
switch (selectedProcessScope.value) {
|
||||
case 'End to end':
|
||||
task.value = props.isSubmitShowDataPtEte.task;
|
||||
isStartSelected.value = props.isSubmitShowDataPtEte.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataPtEte.isEndSelected;
|
||||
break;
|
||||
case 'Processing time':
|
||||
switch (this.selectedProcessScope) {
|
||||
case 'End to end':
|
||||
this.task = this.isSubmitShowDataPtEte.task;
|
||||
this.isStartSelected = this.isSubmitShowDataPtEte.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataPtEte.isEndSelected;
|
||||
break;
|
||||
case 'Partial':
|
||||
this.task = this.isSubmitShowDataPtP.task;
|
||||
this.isStartSelected = this.isSubmitShowDataPtP.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataPtP.isEndSelected;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'Waiting time':
|
||||
switch (this.selectedProcessScope) {
|
||||
case 'End to end':
|
||||
this.task = this.isSubmitShowDataWtEte.task;
|
||||
this.isStartSelected = this.isSubmitShowDataWtEte.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataWtEte.isEndSelected;
|
||||
break;
|
||||
case 'Partial':
|
||||
this.task = this.isSubmitShowDataWtP.task;
|
||||
this.isStartSelected = this.isSubmitShowDataWtP.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataWtP.isEndSelected;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'Cycle time':
|
||||
this.task = this.isSubmitShowDataCt.task;
|
||||
this.isStartSelected = this.isSubmitShowDataCt.isStartSelected;
|
||||
this.isEndSelected = this.isSubmitShowDataCt.isEndSelected;
|
||||
case 'Partial':
|
||||
task.value = props.isSubmitShowDataPtP.task;
|
||||
isStartSelected.value = props.isSubmitShowDataPtP.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataPtP.isEndSelected;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.reset();
|
||||
}
|
||||
break;
|
||||
case 'Waiting time':
|
||||
switch (selectedProcessScope.value) {
|
||||
case 'End to end':
|
||||
task.value = props.isSubmitShowDataWtEte.task;
|
||||
isStartSelected.value = props.isSubmitShowDataWtEte.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataWtEte.isEndSelected;
|
||||
break;
|
||||
case 'Partial':
|
||||
task.value = props.isSubmitShowDataWtP.task;
|
||||
isStartSelected.value = props.isSubmitShowDataWtP.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataWtP.isEndSelected;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'Cycle time':
|
||||
task.value = props.isSubmitShowDataCt.task;
|
||||
isStartSelected.value = props.isSubmitShowDataCt.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataCt.isEndSelected;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emitter.on('isRadioChange', (data) => {
|
||||
this.setResetData(data);
|
||||
});
|
||||
this.$emitter.on('isRadioSeqChange', (data) => {
|
||||
this.setResetData(data);
|
||||
});
|
||||
this.$emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
this.setResetData(data);
|
||||
};
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
this.setResetData(data);
|
||||
};
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
this.setResetData(data);
|
||||
};
|
||||
});
|
||||
this.$emitter.on('reset', data => {
|
||||
this.reset();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
setResetData(data);
|
||||
});
|
||||
emitter.on('isRadioSeqChange', (data) => {
|
||||
setResetData(data);
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
setResetData(data);
|
||||
};
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
setResetData(data);
|
||||
};
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
setResetData(data);
|
||||
};
|
||||
});
|
||||
emitter.on('reset', data => {
|
||||
reset();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,377 +1,384 @@
|
||||
<template>
|
||||
<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time'
|
||||
<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time'
|
||||
|| selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
|
||||
<p class="h2">Time Range</p>
|
||||
<div class=" text-sm leading-normal">
|
||||
<!-- Activity duration -->
|
||||
<TimeRangeDuration
|
||||
v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds"
|
||||
v-if="selectedRuleType === 'Activity duration'" :time="state.timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<!-- Processing time -->
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="state.timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="state.timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="state.timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="state.timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :time="state.timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :time="state.timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" :time="state.timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<!-- Waiting time -->
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="state.timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="state.timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="state.timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="state.timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :time="state.timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :time="state.timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" :time="state.timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<!-- Cycle time -->
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'All'" :time="state.timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :time="state.timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :time="state.timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" :time="state.timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
|
||||
selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
|
||||
cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
|
||||
cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart,
|
||||
cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
|
||||
cfmWtEteWhole, cfmCtEteWhole
|
||||
} = storeToRefs(conformanceStore);
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
|
||||
selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
|
||||
cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
|
||||
cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart,
|
||||
cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
|
||||
cfmWtEteWhole, cfmCtEteWhole
|
||||
} = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
|
||||
selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
|
||||
cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
|
||||
cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart,
|
||||
cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
|
||||
cfmWtEteWhole, cfmCtEteWhole
|
||||
};
|
||||
},
|
||||
props: ['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
|
||||
const props = defineProps(['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
|
||||
'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart',
|
||||
'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll',
|
||||
'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE',
|
||||
'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll',
|
||||
'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
timeDuration: null, // Activity duration
|
||||
timeCfmPtEteAll: null, // Processing time
|
||||
timeCfmPtEteAllDefault: null,
|
||||
timeCfmPtEteStart: null,
|
||||
timeCfmPtEteEnd: null,
|
||||
timeCfmPtEteSE: null,
|
||||
timeCfmPtPStart: null,
|
||||
timeCfmPtPEnd: null,
|
||||
timeCfmPtPSE: null,
|
||||
timeCfmWtEteAll: null, // Waiting time
|
||||
timeCfmWtEteAllDefault: null,
|
||||
timeCfmWtEteStart: null,
|
||||
timeCfmWtEteEnd: null,
|
||||
timeCfmWtEteSE: null,
|
||||
timeCfmWtPStart: null,
|
||||
timeCfmWtPEnd: null,
|
||||
timeCfmWtPSE: null,
|
||||
timeCfmCtEteAll: null, // Cycle time
|
||||
timeCfmCtEteAllDefault: null,
|
||||
timeCfmCtEteStart: null,
|
||||
timeCfmCtEteEnd: null,
|
||||
timeCfmCtEteSE: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TimeRangeDuration,
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 最小值總秒數
|
||||
*/
|
||||
minTotalSeconds(e) {
|
||||
this.$emit('min-total-seconds', e);
|
||||
},
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 最大值總秒數
|
||||
*/
|
||||
maxTotalSeconds(e) {
|
||||
this.$emit('max-total-seconds', e);
|
||||
},
|
||||
/**
|
||||
* get Time Range(duration)
|
||||
* @param {array} data API data，Activity 列表
|
||||
* @param {string} category 'act' | 'single' | 'double'，傳入以上任一值。
|
||||
* @param {string} task select Radio task or start
|
||||
* @param {string} taskTwo end
|
||||
* @returns {object} {min:12, max:345}
|
||||
*/
|
||||
getDurationTime(data, category, task, taskTwo) {
|
||||
let result = {min:0, max:0};
|
||||
switch (category) {
|
||||
case 'act':
|
||||
data.forEach(i => {
|
||||
if(i.label === task) {
|
||||
result = i.duration;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'single':
|
||||
data.forEach(i => {
|
||||
if(i.task === task) {
|
||||
result = i.time;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'double':
|
||||
data.forEach(i => {
|
||||
if(i.start === task && i.end === taskTwo) {
|
||||
result = i.time;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'all':
|
||||
result = data;
|
||||
break
|
||||
default:
|
||||
break;
|
||||
};
|
||||
return result;
|
||||
},
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
reset() {
|
||||
this.timeDuration = null; // Activity duration
|
||||
this.timeCfmPtEteAll = this.timeCfmPtEteAllDefault; // Processing time
|
||||
this.timeCfmPtEteStart = null;
|
||||
this.timeCfmPtEteEnd = null;
|
||||
this.timeCfmPtEteSE = null;
|
||||
this.timeCfmPtPStart = null;
|
||||
this.timeCfmPtPEnd = null;
|
||||
this.timeCfmPtPSE = null;
|
||||
this.timeCfmWtEteAll = this.timeCfmWtEteAllDefault; // Waiting time
|
||||
this.timeCfmWtEteStart = null;
|
||||
this.timeCfmWtEteEnd = null;
|
||||
this.timeCfmWtEteSE = null;
|
||||
this.timeCfmWtPStart = null;
|
||||
this.timeCfmWtPEnd = null;
|
||||
this.timeCfmWtPSE = null;
|
||||
this.timeCfmCtEteAll = this.timeCfmCtEteAllDefault; // Cycle time
|
||||
this.timeCfmCtEteStart = null;
|
||||
this.timeCfmCtEteEnd = null;
|
||||
this.timeCfmCtEteSE = null;
|
||||
this.selectCfmPtEteSEStart = null;
|
||||
this.selectCfmPtEteSEEnd = null;
|
||||
this.selectCfmPtPSEStart = null;
|
||||
this.selectCfmPtPSEEnd = null;
|
||||
this.selectCfmWtEteSEStart = null;
|
||||
this.selectCfmWtEteSEEnd = null;
|
||||
this.selectCfmWtPSEStart = null;
|
||||
this.selectCfmWtPSEEnd = null;
|
||||
this.selectCfmCtEteSEStart = null;
|
||||
this.selectCfmCtEteSEEnd = null;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$emitter.on('actRadioData', (data) => {
|
||||
const category = data.category;
|
||||
const task = data.task;
|
||||
]);
|
||||
|
||||
const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
|
||||
this[startKey] = task;
|
||||
this[timeKey] = { min: 0, max: 0 };
|
||||
if (this[endKey]) {
|
||||
this[timeKey] = this.getDurationTime(this[durationType], 'double', task, this[endKey]);
|
||||
}
|
||||
};
|
||||
const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
|
||||
|
||||
const handleSingleSelection = (key, timeKey, durationType) => {
|
||||
this[timeKey] = this.getDurationTime(this[durationType], 'single', task);
|
||||
};
|
||||
const state = reactive({
|
||||
timeDuration: null, // Activity duration
|
||||
timeCfmPtEteAll: null, // Processing time
|
||||
timeCfmPtEteAllDefault: null,
|
||||
timeCfmPtEteStart: null,
|
||||
timeCfmPtEteEnd: null,
|
||||
timeCfmPtEteSE: null,
|
||||
timeCfmPtPStart: null,
|
||||
timeCfmPtPEnd: null,
|
||||
timeCfmPtPSE: null,
|
||||
timeCfmWtEteAll: null, // Waiting time
|
||||
timeCfmWtEteAllDefault: null,
|
||||
timeCfmWtEteStart: null,
|
||||
timeCfmWtEteEnd: null,
|
||||
timeCfmWtEteSE: null,
|
||||
timeCfmWtPStart: null,
|
||||
timeCfmWtPEnd: null,
|
||||
timeCfmWtPSE: null,
|
||||
timeCfmCtEteAll: null, // Cycle time
|
||||
timeCfmCtEteAllDefault: null,
|
||||
timeCfmCtEteStart: null,
|
||||
timeCfmCtEteEnd: null,
|
||||
timeCfmCtEteSE: null,
|
||||
selectCfmPtEteSEStart: null,
|
||||
selectCfmPtEteSEEnd: null,
|
||||
selectCfmPtPSEStart: null,
|
||||
selectCfmPtPSEEnd: null,
|
||||
selectCfmWtEteSEStart: null,
|
||||
selectCfmWtEteSEEnd: null,
|
||||
selectCfmWtPSEStart: null,
|
||||
selectCfmWtPSEEnd: null,
|
||||
selectCfmCtEteSEStart: null,
|
||||
selectCfmCtEteSEEnd: null,
|
||||
});
|
||||
|
||||
switch (category) {
|
||||
// Activity duration
|
||||
case 'cfmDur':
|
||||
this.timeDuration = this.getDurationTime(this.conformanceAllTasks, 'act', task);
|
||||
break;
|
||||
// Processing time
|
||||
case 'cfmPtEteStart':
|
||||
handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
|
||||
break;
|
||||
case 'cfmPtEteEnd':
|
||||
handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
|
||||
break;
|
||||
case 'cfmPtEteSEStart':
|
||||
handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
||||
break;
|
||||
case 'cfmPtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
||||
break;
|
||||
case 'cfmPtPStart':
|
||||
handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
|
||||
break;
|
||||
case 'cfmPtPEnd':
|
||||
handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
|
||||
break;
|
||||
case 'cfmPtPSEStart':
|
||||
handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
|
||||
break;
|
||||
case 'cfmPtPSEEnd':
|
||||
handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
|
||||
break;
|
||||
// Waiting time
|
||||
case 'cfmWtEteStart':
|
||||
handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
|
||||
break;
|
||||
case 'cfmWtEteEnd':
|
||||
handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
|
||||
break;
|
||||
case 'cfmWtEteSEStart':
|
||||
handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
||||
break;
|
||||
case 'cfmWtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
||||
break;
|
||||
case 'cfmWtPStart':
|
||||
handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
|
||||
break;
|
||||
case 'cfmWtPEnd':
|
||||
handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
|
||||
break;
|
||||
case 'cfmWtPSEStart':
|
||||
handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
|
||||
break;
|
||||
case 'cfmWtPSEEnd':
|
||||
handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
|
||||
break;
|
||||
// Cycle time
|
||||
case 'cfmCtEteStart':
|
||||
handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
|
||||
break;
|
||||
case 'cfmCtEteEnd':
|
||||
handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
|
||||
break;
|
||||
case 'cfmCtEteSEStart':
|
||||
handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
||||
break;
|
||||
case 'cfmCtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
});
|
||||
this.$emitter.on('reset', (data) => {
|
||||
this.reset();
|
||||
});
|
||||
this.$emitter.on('isRadioChange', (data) => {
|
||||
if(data) {
|
||||
this.reset();
|
||||
switch (this.selectedRuleType) {
|
||||
case 'Processing time':
|
||||
this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
|
||||
this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
|
||||
break;
|
||||
case 'Waiting time':
|
||||
this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
|
||||
this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
|
||||
break;
|
||||
case 'Cycle time':
|
||||
this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
|
||||
this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}
|
||||
});
|
||||
this.$emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
this.reset();
|
||||
};
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
if(this.selectedActSeqMore === 'All') {
|
||||
switch (this.selectedRuleType) {
|
||||
case 'Processing time':
|
||||
this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
|
||||
this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
|
||||
break;
|
||||
case 'Waiting time':
|
||||
this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
|
||||
this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
|
||||
break;
|
||||
case 'Cycle time':
|
||||
this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
|
||||
this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}else this.reset();
|
||||
};
|
||||
});
|
||||
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
this.reset();
|
||||
};
|
||||
});
|
||||
},
|
||||
// Store refs lookup for dynamic access in handleSingleSelection/handleDoubleSelection
|
||||
const storeRefs = {
|
||||
cfmPtEteStart,
|
||||
cfmPtEteEnd,
|
||||
cfmPtEteSE,
|
||||
cfmPtPStart,
|
||||
cfmPtPEnd,
|
||||
cfmPtPSE,
|
||||
cfmWtEteStart,
|
||||
cfmWtEteEnd,
|
||||
cfmWtEteSE,
|
||||
cfmWtPStart,
|
||||
cfmWtPEnd,
|
||||
cfmWtPSE,
|
||||
cfmCtEteStart,
|
||||
cfmCtEteEnd,
|
||||
cfmCtEteSE,
|
||||
};
|
||||
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 最小值總秒數
|
||||
*/
|
||||
function minTotalSeconds(e) {
|
||||
emit('min-total-seconds', e);
|
||||
}
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 最大值總秒數
|
||||
*/
|
||||
function maxTotalSeconds(e) {
|
||||
emit('max-total-seconds', e);
|
||||
}
|
||||
/**
|
||||
* get Time Range(duration)
|
||||
* @param {array} data API data，Activity 列表
|
||||
* @param {string} category 'act' | 'single' | 'double'，傳入以上任一值。
|
||||
* @param {string} task select Radio task or start
|
||||
* @param {string} taskTwo end
|
||||
* @returns {object} {min:12, max:345}
|
||||
*/
|
||||
function getDurationTime(data, category, task, taskTwo) {
|
||||
let result = {min:0, max:0};
|
||||
switch (category) {
|
||||
case 'act':
|
||||
data.forEach(i => {
|
||||
if(i.label === task) {
|
||||
result = i.duration;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'single':
|
||||
data.forEach(i => {
|
||||
if(i.task === task) {
|
||||
result = i.time;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'double':
|
||||
data.forEach(i => {
|
||||
if(i.start === task && i.end === taskTwo) {
|
||||
result = i.time;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'all':
|
||||
result = data;
|
||||
break
|
||||
default:
|
||||
break;
|
||||
};
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* All reset
|
||||
*/
|
||||
function reset() {
|
||||
state.timeDuration = null; // Activity duration
|
||||
state.timeCfmPtEteAll = state.timeCfmPtEteAllDefault; // Processing time
|
||||
state.timeCfmPtEteStart = null;
|
||||
state.timeCfmPtEteEnd = null;
|
||||
state.timeCfmPtEteSE = null;
|
||||
state.timeCfmPtPStart = null;
|
||||
state.timeCfmPtPEnd = null;
|
||||
state.timeCfmPtPSE = null;
|
||||
state.timeCfmWtEteAll = state.timeCfmWtEteAllDefault; // Waiting time
|
||||
state.timeCfmWtEteStart = null;
|
||||
state.timeCfmWtEteEnd = null;
|
||||
state.timeCfmWtEteSE = null;
|
||||
state.timeCfmWtPStart = null;
|
||||
state.timeCfmWtPEnd = null;
|
||||
state.timeCfmWtPSE = null;
|
||||
state.timeCfmCtEteAll = state.timeCfmCtEteAllDefault; // Cycle time
|
||||
state.timeCfmCtEteStart = null;
|
||||
state.timeCfmCtEteEnd = null;
|
||||
state.timeCfmCtEteSE = null;
|
||||
state.selectCfmPtEteSEStart = null;
|
||||
state.selectCfmPtEteSEEnd = null;
|
||||
state.selectCfmPtPSEStart = null;
|
||||
state.selectCfmPtPSEEnd = null;
|
||||
state.selectCfmWtEteSEStart = null;
|
||||
state.selectCfmWtEteSEEnd = null;
|
||||
state.selectCfmWtPSEStart = null;
|
||||
state.selectCfmWtPSEEnd = null;
|
||||
state.selectCfmCtEteSEStart = null;
|
||||
state.selectCfmCtEteSEEnd = null;
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('actRadioData', (data) => {
|
||||
const category = data.category;
|
||||
const task = data.task;
|
||||
|
||||
const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
|
||||
state[startKey] = task;
|
||||
state[timeKey] = { min: 0, max: 0 };
|
||||
if (state[endKey]) {
|
||||
state[timeKey] = getDurationTime(storeRefs[durationType].value, 'double', task, state[endKey]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSingleSelection = (key, timeKey, durationType) => {
|
||||
state[timeKey] = getDurationTime(storeRefs[durationType].value, 'single', task);
|
||||
};
|
||||
|
||||
switch (category) {
|
||||
// Activity duration
|
||||
case 'cfmDur':
|
||||
state.timeDuration = getDurationTime(conformanceAllTasks.value, 'act', task);
|
||||
break;
|
||||
// Processing time
|
||||
case 'cfmPtEteStart':
|
||||
handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
|
||||
break;
|
||||
case 'cfmPtEteEnd':
|
||||
handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
|
||||
break;
|
||||
case 'cfmPtEteSEStart':
|
||||
handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
||||
break;
|
||||
case 'cfmPtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
||||
break;
|
||||
case 'cfmPtPStart':
|
||||
handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
|
||||
break;
|
||||
case 'cfmPtPEnd':
|
||||
handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
|
||||
break;
|
||||
case 'cfmPtPSEStart':
|
||||
handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
|
||||
break;
|
||||
case 'cfmPtPSEEnd':
|
||||
handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
|
||||
break;
|
||||
// Waiting time
|
||||
case 'cfmWtEteStart':
|
||||
handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
|
||||
break;
|
||||
case 'cfmWtEteEnd':
|
||||
handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
|
||||
break;
|
||||
case 'cfmWtEteSEStart':
|
||||
handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
||||
break;
|
||||
case 'cfmWtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
||||
break;
|
||||
case 'cfmWtPStart':
|
||||
handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
|
||||
break;
|
||||
case 'cfmWtPEnd':
|
||||
handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
|
||||
break;
|
||||
case 'cfmWtPSEStart':
|
||||
handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
|
||||
break;
|
||||
case 'cfmWtPSEEnd':
|
||||
handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
|
||||
break;
|
||||
// Cycle time
|
||||
case 'cfmCtEteStart':
|
||||
handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
|
||||
break;
|
||||
case 'cfmCtEteEnd':
|
||||
handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
|
||||
break;
|
||||
case 'cfmCtEteSEStart':
|
||||
handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
||||
break;
|
||||
case 'cfmCtEteSEEnd':
|
||||
handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
});
|
||||
emitter.on('reset', (data) => {
|
||||
reset();
|
||||
});
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
if(data) {
|
||||
reset();
|
||||
switch (selectedRuleType.value) {
|
||||
case 'Processing time':
|
||||
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
|
||||
state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
|
||||
break;
|
||||
case 'Waiting time':
|
||||
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
|
||||
state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
|
||||
break;
|
||||
case 'Cycle time':
|
||||
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
|
||||
state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
reset();
|
||||
};
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
if(selectedActSeqMore.value === 'All') {
|
||||
switch (selectedRuleType.value) {
|
||||
case 'Processing time':
|
||||
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
|
||||
state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
|
||||
break;
|
||||
case 'Waiting time':
|
||||
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
|
||||
state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
|
||||
break;
|
||||
case 'Cycle time':
|
||||
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
|
||||
state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}else reset();
|
||||
};
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
reset();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -8,9 +8,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResultArrow',
|
||||
props:['data', 'select'],
|
||||
}
|
||||
<script setup>
|
||||
defineProps(['data', 'select']);
|
||||
</script>
|
||||
|
||||
@@ -8,26 +8,21 @@
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResultCheck',
|
||||
props:['data', 'select'],
|
||||
data() {
|
||||
return {
|
||||
datadata: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: function(newValue) {
|
||||
this.datadata = newValue;
|
||||
},
|
||||
select: function(newValue) {
|
||||
this.datadata = newValue;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.datadata = this.select;
|
||||
this.$emitter.on('reset', data => this.datadata = data);
|
||||
},
|
||||
}
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
const props = defineProps(['data', 'select']);
|
||||
|
||||
const datadata = ref(props.select);
|
||||
|
||||
watch(() => props.data, (newValue) => {
|
||||
datadata.value = newValue;
|
||||
});
|
||||
|
||||
watch(() => props.select, (newValue) => {
|
||||
datadata.value = newValue;
|
||||
});
|
||||
|
||||
emitter.on('reset', (val) => datadata.value = val);
|
||||
</script>
|
||||
|
||||
@@ -7,27 +7,17 @@
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResultDot',
|
||||
props:['timeResultData', 'select'],
|
||||
data() {
|
||||
return {
|
||||
data: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeResultData: {
|
||||
handler(newValue) {
|
||||
this.data = newValue;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.data = this.select;
|
||||
this.$emitter.on('reset', data => this.data = data);
|
||||
},
|
||||
}
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
const props = defineProps(['timeResultData', 'select']);
|
||||
|
||||
const data = ref(props.select);
|
||||
|
||||
watch(() => props.timeResultData, (newValue) => {
|
||||
data.value = newValue;
|
||||
}, { deep: true });
|
||||
|
||||
emitter.on('reset', (val) => data.value = val);
|
||||
</script>
|
||||
|
||||
@@ -9,97 +9,78 @@
|
||||
</Durationjs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import Durationjs from '@/components/durationjs.vue';
|
||||
|
||||
export default {
|
||||
props: ['time', 'select'],
|
||||
data() {
|
||||
return {
|
||||
timeData: {
|
||||
min: 0,
|
||||
max: 0,
|
||||
},
|
||||
timeRangeMin: 0,
|
||||
timeRangeMax: 0,
|
||||
minVuemin: 0,
|
||||
minVuemax: 0,
|
||||
maxVuemin: 0,
|
||||
maxVuemax: 0,
|
||||
updateMax: null,
|
||||
updateMin: null,
|
||||
durationMin: null,
|
||||
durationMax: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Durationjs,
|
||||
},
|
||||
watch: {
|
||||
time: {
|
||||
handler: function(newValue, oldValue) {
|
||||
this.durationMax = null
|
||||
this.durationMin = null
|
||||
if(newValue === null) {
|
||||
this.timeData = {
|
||||
min: 0,
|
||||
max: 0
|
||||
};
|
||||
}else if(newValue !== null) {
|
||||
this.timeData = {
|
||||
min: newValue.min,
|
||||
max: newValue.max
|
||||
};
|
||||
this.$emit('min-total-seconds', newValue.min);
|
||||
this.$emit('max-total-seconds', newValue.max);
|
||||
}
|
||||
this.setTimeValue();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* set props values
|
||||
*/
|
||||
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));
|
||||
},
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 元件傳來的最小值總秒數
|
||||
*/
|
||||
minTotalSeconds(e) {
|
||||
this.timeRangeMin = e;
|
||||
this.updateMin = e;
|
||||
this.$emit('min-total-seconds', e);
|
||||
},
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 元件傳來的最大值總秒數
|
||||
*/
|
||||
maxTotalSeconds(e) {
|
||||
this.timeRangeMax = e;
|
||||
this.updateMax = e;
|
||||
this.$emit('max-total-seconds', e);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if(this.select){
|
||||
if(Object.keys(this.select.base).length !== 0) {
|
||||
this.timeData = this.select.base;
|
||||
this.setTimeValue();
|
||||
}
|
||||
if(Object.keys(this.select.rule).length !== 0) {
|
||||
this.durationMin = this.select.rule.min;
|
||||
this.durationMax = this.select.rule.max;
|
||||
}
|
||||
}
|
||||
const props = defineProps(['time', 'select']);
|
||||
const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
|
||||
|
||||
const timeData = ref({ min: 0, max: 0 });
|
||||
const timeRangeMin = ref(0);
|
||||
const timeRangeMax = ref(0);
|
||||
const minVuemin = ref(0);
|
||||
const minVuemax = ref(0);
|
||||
const maxVuemin = ref(0);
|
||||
const maxVuemax = ref(0);
|
||||
const updateMax = ref(null);
|
||||
const updateMin = ref(null);
|
||||
const durationMin = ref(null);
|
||||
const durationMax = ref(null);
|
||||
|
||||
/**
|
||||
* set props values
|
||||
*/
|
||||
function setTimeValue() {
|
||||
// 深拷貝原始 timeData 的內容
|
||||
minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
|
||||
minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
|
||||
maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
|
||||
maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
|
||||
}
|
||||
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 元件傳來的最小值總秒數
|
||||
*/
|
||||
function minTotalSeconds(e) {
|
||||
timeRangeMin.value = e;
|
||||
updateMin.value = e;
|
||||
emit('min-total-seconds', e);
|
||||
}
|
||||
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {Number} e 元件傳來的最大值總秒數
|
||||
*/
|
||||
function maxTotalSeconds(e) {
|
||||
timeRangeMax.value = e;
|
||||
updateMax.value = e;
|
||||
emit('max-total-seconds', e);
|
||||
}
|
||||
|
||||
watch(() => props.time, (newValue, oldValue) => {
|
||||
durationMax.value = null;
|
||||
durationMin.value = null;
|
||||
if(newValue === null) {
|
||||
timeData.value = { min: 0, max: 0 };
|
||||
}else if(newValue !== null) {
|
||||
timeData.value = { min: newValue.min, max: newValue.max };
|
||||
emit('min-total-seconds', newValue.min);
|
||||
emit('max-total-seconds', newValue.max);
|
||||
}
|
||||
setTimeValue();
|
||||
}, { deep: true, immediate: true });
|
||||
|
||||
// created
|
||||
if(props.select){
|
||||
if(Object.keys(props.select.base).length !== 0) {
|
||||
timeData.value = props.select.base;
|
||||
setTimeValue();
|
||||
}
|
||||
if(Object.keys(props.select.rule).length !== 0) {
|
||||
durationMin.value = props.select.rule.min;
|
||||
durationMax.value = props.select.rule.max;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Dialog :visible="listModal" @update:visible="$emit('closeModal', $event)" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
|
||||
<Dialog :visible="listModal" @update:visible="emit('closeModal', $event)" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
|
||||
<template #header>
|
||||
<div class=" py-5">
|
||||
<p class="text-base font-bold">Non-conformance Issue</p>
|
||||
@@ -61,219 +61,225 @@
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick, useTemplateRef } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
|
||||
|
||||
export default {
|
||||
props: ['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category'],
|
||||
setup() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { infinite404 } = storeToRefs(conformanceStore);
|
||||
const props = defineProps(['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category']);
|
||||
const emit = defineEmits(['closeModal']);
|
||||
|
||||
return { infinite404, conformanceStore }
|
||||
},
|
||||
data() {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { infinite404 } = storeToRefs(conformanceStore);
|
||||
|
||||
// template ref
|
||||
const cfmTrace = useTemplateRef('cfmTrace');
|
||||
|
||||
// data
|
||||
const contentClass = ref('!bg-neutral-100 border-t border-neutral-300 h-full');
|
||||
const showTraceId = ref(null);
|
||||
const infiniteData = ref(null);
|
||||
const maxItems = ref(false);
|
||||
const infiniteFinish = ref(true); // 無限滾動是否載入完成
|
||||
const startNum = ref(0);
|
||||
const processMap = ref({
|
||||
nodes:[],
|
||||
edges:[],
|
||||
});
|
||||
|
||||
// computed
|
||||
const traceTotal = computed(() => {
|
||||
return traceList.value.length;
|
||||
});
|
||||
|
||||
const traceList = computed(() => {
|
||||
const sum = props.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
|
||||
|
||||
return props.listTraces.map(trace => {
|
||||
return {
|
||||
contentClass: '!bg-neutral-100 border-t border-neutral-300 h-full',
|
||||
showTraceId: null,
|
||||
infiniteData: null,
|
||||
maxItems: false,
|
||||
infiniteFinish: true, // 無限滾動是否載入完成
|
||||
startNum: 0,
|
||||
processMap:{
|
||||
nodes:[],
|
||||
edges:[],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
traceTotal: function() {
|
||||
return this.traceList.length;
|
||||
},
|
||||
traceList: function() {
|
||||
const sum = this.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
|
||||
id: trace.id,
|
||||
value: Number((getPercentLabel(trace.count / sum))),
|
||||
count: trace.count.toLocaleString('en-US'),
|
||||
count_base: trace.count,
|
||||
ratio: getPercentLabel(trace.count / sum),
|
||||
};
|
||||
}).sort((x, y) => x.id - y.id);
|
||||
});
|
||||
|
||||
return this.listTraces.map(trace => {
|
||||
return {
|
||||
id: trace.id,
|
||||
value: Number((this.getPercentLabel(trace.count / sum))),
|
||||
count: trace.count.toLocaleString('en-US'),
|
||||
count_base: trace.count,
|
||||
ratio: this.getPercentLabel(trace.count / sum),
|
||||
};
|
||||
}).sort((x, y) => x.id - y.id);
|
||||
},
|
||||
caseData: function() {
|
||||
if(this.infiniteData !== null){
|
||||
const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
|
||||
data.forEach(item => {
|
||||
item.facets.forEach((facet, index) => {
|
||||
item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
|
||||
});
|
||||
delete item.facets; // 刪除原本的 facets 屬性
|
||||
|
||||
item.attributes.forEach((attribute, index) => {
|
||||
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
|
||||
});
|
||||
delete item.attributes; // 刪除原本的 attributes 屬性
|
||||
})
|
||||
return data;
|
||||
}
|
||||
},
|
||||
columnData: function() {
|
||||
const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
|
||||
const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
|
||||
|
||||
const result = [
|
||||
{ field: 'id', header: 'Case Id' },
|
||||
{ field: 'started_at', header: 'Start time' },
|
||||
{ field: 'completed_at', header: 'End time' },
|
||||
...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: facetName(fac.name) })),
|
||||
...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
|
||||
];
|
||||
return result
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
listModal: function(newValue) { // 第一次打開 Modal 要繪圖
|
||||
if(newValue) this.createCy();
|
||||
},
|
||||
taskSeq: function(newValue){
|
||||
if (newValue !== null) this.createCy();
|
||||
},
|
||||
traceId: function(newValue) {
|
||||
// 當 traceId 屬性變化時更新 showTraceId
|
||||
this.showTraceId = newValue;
|
||||
},
|
||||
showTraceId: function(newValue, oldValue) {
|
||||
const isScrollTop = document.querySelector('.infiniteTable');
|
||||
if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
|
||||
},
|
||||
firstCases: function(newValue, oldValue){
|
||||
this.infiniteData = newValue;
|
||||
},
|
||||
infinite404: function(newValue, oldValue){
|
||||
if (newValue === 404) this.maxItems = true;
|
||||
},
|
||||
},
|
||||
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));
|
||||
},
|
||||
/**
|
||||
* set progress bar width
|
||||
* @param {number} value 百分比數字
|
||||
* @returns {string} 樣式的寬度設定
|
||||
*/
|
||||
progressWidth(value){
|
||||
return `width:${value}%;`
|
||||
},
|
||||
/**
|
||||
* switch case data
|
||||
* @param {number} id case id
|
||||
*/
|
||||
async switchCaseData(id) {
|
||||
if(id == this.showTraceId) return;
|
||||
this.infinite404 = null;
|
||||
this.maxItems = false;
|
||||
this.startNum = 0;
|
||||
|
||||
let result;
|
||||
if(this.category === 'issue') result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, id, 0);
|
||||
else if(this.category === 'loop') result = await this.conformanceStore.getConformanceLoopsTraceDetail(this.listNo, id, 0);
|
||||
this.infiniteData = await result;
|
||||
this.showTraceId = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
|
||||
},
|
||||
/**
|
||||
* 將 trace element nodes 資料彙整
|
||||
*/
|
||||
setNodesData(){
|
||||
// 避免每次渲染都重複累加
|
||||
this.processMap.nodes = [];
|
||||
// 將 api call 回來的資料帶進 node
|
||||
if(this.taskSeq !== null) {
|
||||
this.taskSeq.forEach((node, index) => {
|
||||
this.processMap.nodes.push({
|
||||
data: {
|
||||
id: index,
|
||||
label: node,
|
||||
backgroundColor: '#CCE5FF',
|
||||
bordercolor: '#003366',
|
||||
shape: 'round-rectangle',
|
||||
height: 80,
|
||||
width: 100
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 將 trace edge line 資料彙整
|
||||
*/
|
||||
setEdgesData(){
|
||||
this.processMap.edges = [];
|
||||
if(this.taskSeq !== null) {
|
||||
this.taskSeq.forEach((edge, index) => {
|
||||
this.processMap.edges.push({
|
||||
data: {
|
||||
source: `${index}`,
|
||||
target: `${index + 1}`,
|
||||
lineWidth: 1,
|
||||
style: 'solid'
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 關係線數量筆節點少一個
|
||||
this.processMap.edges.pop();
|
||||
},
|
||||
/**
|
||||
* create trace cytoscape's map
|
||||
*/
|
||||
createCy(){
|
||||
this.$nextTick(() => {
|
||||
const graphId = this.$refs.cfmTrace;
|
||||
|
||||
this.setNodesData();
|
||||
this.setEdgesData();
|
||||
if(graphId !== null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
|
||||
const caseData = computed(() => {
|
||||
if(infiniteData.value !== null){
|
||||
const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
|
||||
data.forEach(item => {
|
||||
item.facets.forEach((facet, index) => {
|
||||
item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 無限滾動: 載入數據
|
||||
*/
|
||||
async fetchData() {
|
||||
try {
|
||||
this.infiniteFinish = false;
|
||||
this.startNum += 20
|
||||
const result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, this.showTraceId, this.startNum);
|
||||
this.infiniteData = await [...this.infiniteData, ...result];
|
||||
this.infiniteFinish = await true;
|
||||
} catch(error) {
|
||||
console.error('Failed to load data:', error);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 無限滾動: 監聽 scroll 有沒有滾到底部
|
||||
* @param {element} event 監聽時回傳的事件
|
||||
*/
|
||||
handleScroll(event) {
|
||||
if(this.maxItems || this.infiniteData.length < 20 || this.infiniteFinish === false) return;
|
||||
delete item.facets; // 刪除原本的 facets 屬性
|
||||
|
||||
const container = event.target;
|
||||
const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
|
||||
item.attributes.forEach((attribute, index) => {
|
||||
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
|
||||
});
|
||||
delete item.attributes; // 刪除原本的 attributes 屬性
|
||||
})
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
if (overScrollHeight) this.fetchData();
|
||||
},
|
||||
},
|
||||
const columnData = computed(() => {
|
||||
const data = JSON.parse(JSON.stringify(props.cases)); // 深拷貝原始 cases 的內容
|
||||
const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
|
||||
|
||||
const result = [
|
||||
{ field: 'id', header: 'Case Id' },
|
||||
{ field: 'started_at', header: 'Start time' },
|
||||
{ field: 'completed_at', header: 'End time' },
|
||||
...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: facetName(fac.name) })),
|
||||
...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
|
||||
];
|
||||
return result
|
||||
});
|
||||
|
||||
// watch
|
||||
watch(() => props.listModal, (newValue) => { // 第一次打開 Modal 要繪圖
|
||||
if(newValue) createCy();
|
||||
});
|
||||
|
||||
watch(() => props.taskSeq, (newValue) => {
|
||||
if (newValue !== null) createCy();
|
||||
});
|
||||
|
||||
watch(() => props.traceId, (newValue) => {
|
||||
// 當 traceId 屬性變化時更新 showTraceId
|
||||
showTraceId.value = newValue;
|
||||
});
|
||||
|
||||
watch(showTraceId, (newValue, oldValue) => {
|
||||
const isScrollTop = document.querySelector('.infiniteTable');
|
||||
if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
|
||||
});
|
||||
|
||||
watch(() => props.firstCases, (newValue) => {
|
||||
infiniteData.value = newValue;
|
||||
});
|
||||
|
||||
watch(infinite404, (newValue) => {
|
||||
if (newValue === 404) maxItems.value = true;
|
||||
});
|
||||
|
||||
// methods
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val 原始數字
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
function getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return 100;
|
||||
else return parseFloat((val * 100).toFixed(1));
|
||||
}
|
||||
/**
|
||||
* set progress bar width
|
||||
* @param {number} value 百分比數字
|
||||
* @returns {string} 樣式的寬度設定
|
||||
*/
|
||||
function progressWidth(value){
|
||||
return `width:${value}%;`
|
||||
}
|
||||
/**
|
||||
* switch case data
|
||||
* @param {number} id case id
|
||||
*/
|
||||
async function switchCaseData(id) {
|
||||
if(id == showTraceId.value) return;
|
||||
infinite404.value = null;
|
||||
maxItems.value = false;
|
||||
startNum.value = 0;
|
||||
|
||||
let result;
|
||||
if(props.category === 'issue') result = await conformanceStore.getConformanceTraceDetail(props.listNo, id, 0);
|
||||
else if(props.category === 'loop') result = await conformanceStore.getConformanceLoopsTraceDetail(props.listNo, id, 0);
|
||||
infiniteData.value = await result;
|
||||
showTraceId.value = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
|
||||
}
|
||||
/**
|
||||
* 將 trace element nodes 資料彙整
|
||||
*/
|
||||
function setNodesData(){
|
||||
// 避免每次渲染都重複累加
|
||||
processMap.value.nodes = [];
|
||||
// 將 api call 回來的資料帶進 node
|
||||
if(props.taskSeq !== null) {
|
||||
props.taskSeq.forEach((node, index) => {
|
||||
processMap.value.nodes.push({
|
||||
data: {
|
||||
id: index,
|
||||
label: node,
|
||||
backgroundColor: '#CCE5FF',
|
||||
bordercolor: '#003366',
|
||||
shape: 'round-rectangle',
|
||||
height: 80,
|
||||
width: 100
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 將 trace edge line 資料彙整
|
||||
*/
|
||||
function setEdgesData(){
|
||||
processMap.value.edges = [];
|
||||
if(props.taskSeq !== null) {
|
||||
props.taskSeq.forEach((edge, index) => {
|
||||
processMap.value.edges.push({
|
||||
data: {
|
||||
source: `${index}`,
|
||||
target: `${index + 1}`,
|
||||
lineWidth: 1,
|
||||
style: 'solid'
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 關係線數量筆節點少一個
|
||||
processMap.value.edges.pop();
|
||||
}
|
||||
/**
|
||||
* create trace cytoscape's map
|
||||
*/
|
||||
function createCy(){
|
||||
nextTick(() => {
|
||||
const graphId = cfmTrace.value;
|
||||
|
||||
setNodesData();
|
||||
setEdgesData();
|
||||
if(graphId !== null) cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 無限滾動: 載入數據
|
||||
*/
|
||||
async function fetchData() {
|
||||
try {
|
||||
infiniteFinish.value = false;
|
||||
startNum.value += 20
|
||||
const result = await conformanceStore.getConformanceTraceDetail(props.listNo, showTraceId.value, startNum.value);
|
||||
infiniteData.value = await [...infiniteData.value, ...result];
|
||||
infiniteFinish.value = await true;
|
||||
} catch(error) {
|
||||
console.error('Failed to load data:', error);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 無限滾動: 監聽 scroll 有沒有滾到底部
|
||||
* @param {element} event 監聽時回傳的事件
|
||||
*/
|
||||
function handleScroll(event) {
|
||||
if(maxItems.value || infiniteData.value.length < 20 || infiniteFinish.value === false) return;
|
||||
|
||||
const container = event.target;
|
||||
const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
|
||||
|
||||
if (overScrollHeight) fetchData();
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user