Apply repository-wide ESLint auto-fix formatting pass
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
@@ -1,10 +1,30 @@
|
||||
<template>
|
||||
<div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
|
||||
<div
|
||||
class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
|
||||
>
|
||||
<p class="h2 pl-2 border-b mb-3">Activity list</p>
|
||||
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]" id="cyp-conformance-list-checkbox">
|
||||
<div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
|
||||
<Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>
|
||||
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
|
||||
<div
|
||||
class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
|
||||
id="cyp-conformance-list-checkbox"
|
||||
>
|
||||
<div
|
||||
class="flex items-center w-[166px]"
|
||||
v-for="(act, index) in sortData"
|
||||
:key="index"
|
||||
:title="act"
|
||||
>
|
||||
<Checkbox
|
||||
v-model="actList"
|
||||
:inputId="index.toString()"
|
||||
name="actList"
|
||||
:value="act"
|
||||
@change="actListData"
|
||||
/>
|
||||
<label
|
||||
:for="index"
|
||||
class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
||||
>{{ act }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,30 +40,37 @@
|
||||
* Checkbox-based activity list for conformance checking input.
|
||||
*/
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { ref, watch } from "vue";
|
||||
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const props = defineProps(['data', 'select']);
|
||||
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.data,
|
||||
(newValue) => {
|
||||
sortData.value = sortNumEngZhtw(newValue);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(() => props.select, (newValue) => {
|
||||
actList.value = newValue;
|
||||
});
|
||||
watch(
|
||||
() => props.select,
|
||||
(newValue) => {
|
||||
actList.value = newValue;
|
||||
},
|
||||
);
|
||||
|
||||
/** Emits the selected activities list via the event bus. */
|
||||
function actListData() {
|
||||
emitter.emit('actListData', actList.value);
|
||||
emitter.emit("actListData", actList.value);
|
||||
}
|
||||
|
||||
// created
|
||||
emitter.on('reset', (data) => {
|
||||
emitter.on("reset", (data) => {
|
||||
actList.value = data;
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,29 @@
|
||||
<template>
|
||||
<div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
|
||||
<div
|
||||
class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
|
||||
>
|
||||
<p class="h2 pl-2 border-b mb-3">{{ title }}</p>
|
||||
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]">
|
||||
<div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
|
||||
<RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
|
||||
<label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
|
||||
<div
|
||||
class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
|
||||
>
|
||||
<div
|
||||
class="flex items-center w-[166px]"
|
||||
v-for="(act, index) in sortData"
|
||||
:key="index"
|
||||
:title="act"
|
||||
>
|
||||
<RadioButton
|
||||
v-model="selectedRadio"
|
||||
:inputId="index + act"
|
||||
:name="select"
|
||||
:value="act"
|
||||
@change="actRadioData"
|
||||
/>
|
||||
<label
|
||||
:for="index + act"
|
||||
class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
||||
>{{ act }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,13 +41,20 @@
|
||||
* start/end activity input.
|
||||
*/
|
||||
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useConformanceInputStore } from "@/stores/conformanceInput";
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const props = defineProps(['title', 'select', 'data', 'category', 'task', 'isSubmit']);
|
||||
const emit = defineEmits(['selected-task']);
|
||||
const props = defineProps([
|
||||
"title",
|
||||
"select",
|
||||
"data",
|
||||
"category",
|
||||
"task",
|
||||
"isSubmit",
|
||||
]);
|
||||
const emit = defineEmits(["selected-task"]);
|
||||
|
||||
const conformanceInputStore = useConformanceInputStore();
|
||||
|
||||
@@ -36,13 +62,20 @@ const sortData = ref([]);
|
||||
const localSelect = ref(null);
|
||||
const selectedRadio = ref(null);
|
||||
|
||||
watch(() => props.data, (newValue) => {
|
||||
sortData.value = sortNumEngZhtw(newValue);
|
||||
}, { immediate: true });
|
||||
watch(
|
||||
() => props.data,
|
||||
(newValue) => {
|
||||
sortData.value = sortNumEngZhtw(newValue);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(() => props.task, (newValue) => {
|
||||
selectedRadio.value = newValue;
|
||||
});
|
||||
watch(
|
||||
() => props.task,
|
||||
(newValue) => {
|
||||
selectedRadio.value = newValue;
|
||||
},
|
||||
);
|
||||
|
||||
const inputActivityRadioData = computed(() => ({
|
||||
category: props.category,
|
||||
@@ -52,22 +85,27 @@ const inputActivityRadioData = computed(() => ({
|
||||
/** Emits the selected activity via event bus and updates the store. */
|
||||
function actRadioData() {
|
||||
localSelect.value = null;
|
||||
emitter.emit('actRadioData', inputActivityRadioData.value);
|
||||
emit('selected-task', selectedRadio.value);
|
||||
conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task);
|
||||
emitter.emit("actRadioData", inputActivityRadioData.value);
|
||||
emit("selected-task", selectedRadio.value);
|
||||
conformanceInputStore.setActivityRadioStartEndData(
|
||||
inputActivityRadioData.value.task,
|
||||
);
|
||||
}
|
||||
|
||||
/** Sets the global activity radio data state in the conformance input store. */
|
||||
function setGlobalActivityRadioDataState() {
|
||||
//this.title: value might be "From" or "To"
|
||||
conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task, props.title);
|
||||
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) => {
|
||||
emitter.on("reset", (data) => {
|
||||
selectedRadio.value = data;
|
||||
});
|
||||
setGlobalActivityRadioDataState();
|
||||
|
||||
@@ -1,38 +1,99 @@
|
||||
<template>
|
||||
<div class="h-full w-full flex justify-between items-center">
|
||||
<!-- Activity List -->
|
||||
<div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
|
||||
<div
|
||||
class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
|
||||
>
|
||||
<p class="h2 pl-2 border-b mb-3">Activity list</p>
|
||||
<div class="h-[calc(100%_-_56px)]">
|
||||
<Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false" @end="onEnd" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
|
||||
<Draggable
|
||||
:list="datadata"
|
||||
:group="{ name: 'activity', pull: 'clone' }"
|
||||
itemKey="name"
|
||||
animation="300"
|
||||
:fallbackTolerance="5"
|
||||
:forceFallback="true"
|
||||
:ghostClass="'ghostSelected'"
|
||||
:dragClass="'dragSelected'"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)" :title="element">
|
||||
<span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
|
||||
<div
|
||||
:class="
|
||||
listSequence.includes(element)
|
||||
? 'border-primary text-primary'
|
||||
: ''
|
||||
"
|
||||
class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20"
|
||||
@dblclick="moveActItem(index, element)"
|
||||
:title="element"
|
||||
>
|
||||
<span
|
||||
class="whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
||||
>{{ element }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sequence -->
|
||||
<div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2 text-sm">
|
||||
<div
|
||||
class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2 text-sm"
|
||||
>
|
||||
<p class="h2 border-b border-500 mb-3">Sequence</p>
|
||||
<!-- No Data -->
|
||||
<div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
|
||||
<p class="text-neutral-500">Please drag and drop at least two activities here and sort.</p>
|
||||
<div
|
||||
v-if="listSequence && listSequence.length === 0"
|
||||
class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute"
|
||||
>
|
||||
<p class="text-neutral-500">
|
||||
Please drag and drop at least two activities here and sort.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Have Data -->
|
||||
<div class="m-auto w-full h-[calc(100%_-_56px)]">
|
||||
<div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center">
|
||||
<draggable class="h-full" :group="{name: 'activity'}" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()" :ghostClass="'!opacity-0'">
|
||||
<div class="m-auto w-full h-[calc(100%_-_56px)]">
|
||||
<div
|
||||
class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center"
|
||||
>
|
||||
<draggable
|
||||
class="h-full"
|
||||
:group="{ name: 'activity' }"
|
||||
:list="listSequence"
|
||||
itemKey="name"
|
||||
animation="300"
|
||||
:forceFallback="true"
|
||||
:dragClass="'dragSelected'"
|
||||
:fallbackTolerance="5"
|
||||
@start="onStart"
|
||||
@end="onEnd"
|
||||
:component-data="getComponentData()"
|
||||
:ghostClass="'!opacity-0'"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div :title="element">
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
|
||||
<div
|
||||
class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20"
|
||||
@dblclick="moveSeqItem(index, element)"
|
||||
>
|
||||
<span>{{ element }}</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
|
||||
<span
|
||||
class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger"
|
||||
@click.stop.native="moveSeqItem(index, element)"
|
||||
>close</span
|
||||
>
|
||||
</div>
|
||||
<span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"></span>
|
||||
<span
|
||||
v-show="
|
||||
index !== listSequence.length - 1 &&
|
||||
index !== lastItemIndex - 1
|
||||
"
|
||||
class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
@@ -54,11 +115,11 @@
|
||||
* conformance rule configuration.
|
||||
*/
|
||||
|
||||
import { ref, computed } from 'vue';
|
||||
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { ref, computed } from "vue";
|
||||
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const props = defineProps(['data', 'listSeq', 'isSubmit', 'category']);
|
||||
const props = defineProps(["data", "listSeq", "isSubmit", "category"]);
|
||||
|
||||
const listSequence = ref([]);
|
||||
const lastItemIndex = ref(null);
|
||||
@@ -67,7 +128,7 @@ const isSelect = ref(true);
|
||||
const datadata = computed(() => {
|
||||
// Sort the Activity List
|
||||
let newData;
|
||||
if(props.data !== null) {
|
||||
if (props.data !== null) {
|
||||
newData = JSON.parse(JSON.stringify(props.data));
|
||||
sortNumEngZhtw(newData);
|
||||
}
|
||||
@@ -96,7 +157,7 @@ function moveSeqItem(index, element) {
|
||||
* get listSequence
|
||||
*/
|
||||
function getComponentData() {
|
||||
emitter.emit('getListSequence', {
|
||||
emitter.emit("getListSequence", {
|
||||
category: props.category,
|
||||
task: listSequence.value,
|
||||
});
|
||||
@@ -107,13 +168,13 @@ function getComponentData() {
|
||||
*/
|
||||
function onStart(evt) {
|
||||
const lastChild = evt.to.lastChild.lastChild;
|
||||
lastChild.style.display = 'none';
|
||||
lastChild.style.display = "none";
|
||||
// Hide the dragged element at its original position
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = 'none';
|
||||
originalElement.style.display = "none";
|
||||
// When dragging the last element, hide the arrow of the second-to-last element
|
||||
const listIndex = listSequence.value.length - 1;
|
||||
if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
|
||||
if (evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -122,12 +183,12 @@ function onStart(evt) {
|
||||
function onEnd(evt) {
|
||||
// Show the dragged element
|
||||
const originalElement = evt.item;
|
||||
originalElement.style.display = '';
|
||||
originalElement.style.display = "";
|
||||
// Show the arrow after drag ends, except for the last element
|
||||
const lastChild = evt.item.lastChild;
|
||||
const listIndex = listSequence.value.length - 1;
|
||||
if (evt.oldIndex !== listIndex) {
|
||||
lastChild.style.display = '';
|
||||
lastChild.style.display = "";
|
||||
}
|
||||
// Reset: hide the second-to-last element's arrow when dragging the last element
|
||||
lastItemIndex.value = null;
|
||||
@@ -136,16 +197,16 @@ function onEnd(evt) {
|
||||
// created
|
||||
const newlist = JSON.parse(JSON.stringify(props.listSeq));
|
||||
listSequence.value = props.isSubmit ? newlist : [];
|
||||
emitter.on('reset', (data) => {
|
||||
emitter.on("reset", (data) => {
|
||||
listSequence.value = [];
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@reference "../../../../assets/tailwind.css";
|
||||
.ghostSelected {
|
||||
@apply bg-primary/20
|
||||
@apply bg-primary/20;
|
||||
}
|
||||
.dragSelected {
|
||||
@apply !opacity-100
|
||||
@apply !opacity-100;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,117 @@
|
||||
<template>
|
||||
<section class="space-y-2 text-sm">
|
||||
<section class="space-y-2 text-sm">
|
||||
<!-- Rule Type -->
|
||||
<div id="cyp-conformance-type-radio">
|
||||
<p class="h2">Rule Type</p>
|
||||
<div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
|
||||
<RadioButton
|
||||
v-model="selectedRuleType"
|
||||
:inputId="rule.id + rule.name"
|
||||
name="ruleType"
|
||||
:value="rule.name"
|
||||
@change="changeRadio"
|
||||
/>
|
||||
<label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Sequence (2 item) -->
|
||||
<div v-show="selectedRuleType === 'Activity sequence'" id="cyp-conformance-sequence-radio">
|
||||
<div
|
||||
v-show="selectedRuleType === 'Activity sequence'"
|
||||
id="cyp-conformance-sequence-radio"
|
||||
>
|
||||
<p class="h2">Activity Sequence</p>
|
||||
<div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
|
||||
<RadioButton
|
||||
v-model="selectedActivitySequence"
|
||||
:inputId="act.id + act.name"
|
||||
name="activitySequence"
|
||||
:value="act.name"
|
||||
@change="changeRadioSeq"
|
||||
/>
|
||||
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mode -->
|
||||
<div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" id="cyp-conformance-Mode-radio">
|
||||
<div
|
||||
v-show="
|
||||
selectedRuleType === 'Activity sequence' &&
|
||||
selectedActivitySequence === 'Sequence'
|
||||
"
|
||||
id="cyp-conformance-Mode-radio"
|
||||
>
|
||||
<p class="h2">Mode</p>
|
||||
<div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
|
||||
<RadioButton
|
||||
v-model="selectedMode"
|
||||
:inputId="mode.id + mode.name"
|
||||
name="mode"
|
||||
:value="mode.name"
|
||||
/>
|
||||
<label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Process Scope -->
|
||||
<div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'" id="cyp-conformance-procss-radio">
|
||||
<div
|
||||
v-show="
|
||||
selectedRuleType === 'Processing time' ||
|
||||
selectedRuleType === 'Waiting time'
|
||||
"
|
||||
id="cyp-conformance-procss-radio"
|
||||
>
|
||||
<p class="h2">Process Scope</p>
|
||||
<div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" @change="changeRadioProcessScope"/>
|
||||
<RadioButton
|
||||
v-model="selectedProcessScope"
|
||||
:inputId="pro.id + pro.name"
|
||||
name="processScope"
|
||||
:value="pro.name"
|
||||
@change="changeRadioProcessScope"
|
||||
/>
|
||||
<label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Sequence (4 item) -->
|
||||
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'" id="cyp-conformance-actseq-radio">
|
||||
<div
|
||||
v-show="
|
||||
(selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'End to end') ||
|
||||
(selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'End to end') ||
|
||||
selectedRuleType === 'Cycle time'
|
||||
"
|
||||
id="cyp-conformance-actseq-radio"
|
||||
>
|
||||
<p class="h2">Activity Sequence</p>
|
||||
<div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" @change="changeRadioActSeqMore"/>
|
||||
<RadioButton
|
||||
v-model="selectedActSeqMore"
|
||||
:inputId="act.id + act.name"
|
||||
name="activitySequenceMore"
|
||||
:value="act.name"
|
||||
@change="changeRadioActSeqMore"
|
||||
/>
|
||||
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Sequence (3 item) -->
|
||||
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')" id="cyp-conformance-actseqfromto-radio">
|
||||
<div
|
||||
v-show="
|
||||
(selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'Partial') ||
|
||||
(selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'Partial')
|
||||
"
|
||||
id="cyp-conformance-actseqfromto-radio"
|
||||
>
|
||||
<p class="h2">Activity Sequence</p>
|
||||
<div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" @change="changeRadioActSeqFromTo"/>
|
||||
<RadioButton
|
||||
v-model="selectedActSeqFromTo"
|
||||
:inputId="act.id + act.name"
|
||||
name="activitySequenceFromTo"
|
||||
:value="act.name"
|
||||
@change="changeRadioActSeqFromTo"
|
||||
/>
|
||||
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,70 +129,77 @@
|
||||
* sequence, mode, and process scope selection.
|
||||
*/
|
||||
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
|
||||
const {
|
||||
selectedRuleType,
|
||||
selectedActivitySequence,
|
||||
selectedMode,
|
||||
selectedProcessScope,
|
||||
selectedActSeqMore,
|
||||
selectedActSeqFromTo,
|
||||
} = storeToRefs(conformanceStore);
|
||||
|
||||
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'},
|
||||
{ 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'},
|
||||
{ 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)'},
|
||||
{ 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'},
|
||||
{ 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'},
|
||||
{ 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'},
|
||||
{ id: 1, name: "From" },
|
||||
{ id: 2, name: "To" },
|
||||
{ id: 3, name: "From & To" },
|
||||
];
|
||||
|
||||
/** Resets dependent selections when the rule type radio changes. */
|
||||
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); // Clear data when switching radio buttons
|
||||
selectedActivitySequence.value = "Start & End";
|
||||
selectedMode.value = "Directly follows";
|
||||
selectedProcessScope.value = "End to end";
|
||||
selectedActSeqMore.value = "All";
|
||||
selectedActSeqFromTo.value = "From";
|
||||
emitter.emit("isRadioChange", true); // Clear data when switching radio buttons
|
||||
}
|
||||
/** Emits event when the activity sequence radio changes. */
|
||||
function changeRadioSeq() {
|
||||
emitter.emit('isRadioSeqChange',true);
|
||||
emitter.emit("isRadioSeqChange", true);
|
||||
}
|
||||
/** Emits event when the process scope radio changes. */
|
||||
function changeRadioProcessScope() {
|
||||
emitter.emit('isRadioProcessScopeChange', true);
|
||||
emitter.emit("isRadioProcessScopeChange", true);
|
||||
}
|
||||
/** Emits event when the extended activity sequence radio changes. */
|
||||
function changeRadioActSeqMore() {
|
||||
emitter.emit('isRadioActSeqMoreChange', true);
|
||||
emitter.emit("isRadioActSeqMoreChange", true);
|
||||
}
|
||||
/** Emits event when the from/to activity sequence radio changes. */
|
||||
function changeRadioActSeqFromTo() {
|
||||
emitter.emit('isRadioActSeqFromToChange', true);
|
||||
emitter.emit("isRadioActSeqFromToChange", true);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,31 +1,183 @@
|
||||
<template>
|
||||
<div class="px-4 text-sm">
|
||||
<!-- Have activity -->
|
||||
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="state.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="state.selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
||||
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="state.selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
||||
<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="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="state.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="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="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>
|
||||
<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="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="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="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>
|
||||
<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="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="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>
|
||||
<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 setup>
|
||||
@@ -41,18 +193,49 @@
|
||||
* scrollable display of check results.
|
||||
*/
|
||||
|
||||
import { reactive, computed, onBeforeUnmount } 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';
|
||||
import { reactive, computed, onBeforeUnmount } 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";
|
||||
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
||||
const {
|
||||
selectedRuleType,
|
||||
selectedActivitySequence,
|
||||
selectedMode,
|
||||
selectedProcessScope,
|
||||
selectedActSeqMore,
|
||||
selectedActSeqFromTo,
|
||||
isStartSelected,
|
||||
isEndSelected,
|
||||
} = storeToRefs(conformanceStore);
|
||||
|
||||
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 props = defineProps([
|
||||
"isSubmit",
|
||||
"isSubmitTask",
|
||||
"isSubmitStartAndEnd",
|
||||
"isSubmitCfmSeqDirectly",
|
||||
"isSubmitCfmSeqEventually",
|
||||
"isSubmitDurationData",
|
||||
"isSubmitCfmPtEteStart",
|
||||
"isSubmitCfmPtEteEnd",
|
||||
"isSubmitCfmPtEteSE",
|
||||
"isSubmitCfmPtPStart",
|
||||
"isSubmitCfmPtPEnd",
|
||||
"isSubmitCfmPtPSE",
|
||||
"isSubmitCfmWtEteStart",
|
||||
"isSubmitCfmWtEteEnd",
|
||||
"isSubmitCfmWtEteSE",
|
||||
"isSubmitCfmWtPStart",
|
||||
"isSubmitCfmWtPEnd",
|
||||
"isSubmitCfmWtPSE",
|
||||
"isSubmitCfmCtEteStart",
|
||||
"isSubmitCfmCtEteEnd",
|
||||
"isSubmitCfmCtEteSE",
|
||||
]);
|
||||
|
||||
const state = reactive({
|
||||
containstTasksData: null,
|
||||
@@ -87,10 +270,10 @@ const state = reactive({
|
||||
|
||||
const selectCfmSeqSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
|
||||
if(state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
|
||||
if (state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
|
||||
if (state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
const order = { Start: 1, End: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -98,10 +281,10 @@ const selectCfmSeqSE = computed(() => {
|
||||
|
||||
const selectCfmPtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
|
||||
if(state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
|
||||
if (state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
|
||||
if (state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
const order = { Start: 1, End: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -109,10 +292,10 @@ const selectCfmPtEteSE = computed(() => {
|
||||
|
||||
const selectCfmPtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
|
||||
if(state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
|
||||
if (state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
|
||||
if (state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
const order = { From: 1, To: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -120,10 +303,10 @@ const selectCfmPtPSE = computed(() => {
|
||||
|
||||
const selectCfmWtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
|
||||
if(state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
|
||||
if (state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
|
||||
if (state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
const order = { Start: 1, End: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -131,10 +314,10 @@ const selectCfmWtEteSE = computed(() => {
|
||||
|
||||
const selectCfmWtPSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
|
||||
if(state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
|
||||
if (state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
|
||||
if (state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'From': 1, 'To': 2};
|
||||
const order = { From: 1, To: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -142,10 +325,10 @@ const selectCfmWtPSE = computed(() => {
|
||||
|
||||
const selectCfmCtEteSE = computed(() => {
|
||||
const data = [];
|
||||
if(state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
|
||||
if(state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
|
||||
if (state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
|
||||
if (state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
|
||||
data.sort((a, b) => {
|
||||
const order = { 'Start': 1, 'End': 2};
|
||||
const order = { Start: 1, End: 2 };
|
||||
return order[a.category] - order[b.category];
|
||||
});
|
||||
return data;
|
||||
@@ -186,35 +369,35 @@ function reset() {
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('actListData', (data) => {
|
||||
emitter.on("actListData", (data) => {
|
||||
state.containstTasksData = data;
|
||||
});
|
||||
emitter.on('actRadioData', (newData) => {
|
||||
emitter.on("actRadioData", (newData) => {
|
||||
const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data
|
||||
|
||||
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']
|
||||
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) => {
|
||||
@@ -225,64 +408,65 @@ emitter.on('actRadioData', (newData) => {
|
||||
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];
|
||||
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) => {
|
||||
emitter.on("getListSequence", (data) => {
|
||||
switch (data.category) {
|
||||
case 'cfmSeqDirectly':
|
||||
case "cfmSeqDirectly":
|
||||
state.selectCfmSeqDirectly = data.task;
|
||||
break;
|
||||
case 'cfmSeqEventually':
|
||||
case "cfmSeqEventually":
|
||||
state.selectCfmSeqEventually = data.task;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
emitter.on('reset', (data) => {
|
||||
emitter.on("reset", (data) => {
|
||||
reset();
|
||||
});
|
||||
// Clear data when switching radio buttons
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
if(data) reset();
|
||||
emitter.on("isRadioChange", (data) => {
|
||||
if (data) reset();
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) reset();
|
||||
emitter.on("isRadioProcessScopeChange", (data) => {
|
||||
if (data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) reset();
|
||||
emitter.on("isRadioActSeqMoreChange", (data) => {
|
||||
if (data) reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) reset();
|
||||
emitter.on("isRadioActSeqFromToChange", (data) => {
|
||||
if (data) reset();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
emitter.off('actListData');
|
||||
emitter.off('actRadioData');
|
||||
emitter.off('getListSequence');
|
||||
emitter.off('reset');
|
||||
emitter.off('isRadioChange');
|
||||
emitter.off('isRadioProcessScopeChange');
|
||||
emitter.off('isRadioActSeqMoreChange');
|
||||
emitter.off('isRadioActSeqFromToChange');
|
||||
emitter.off("actListData");
|
||||
emitter.off("actRadioData");
|
||||
emitter.off("getListSequence");
|
||||
emitter.off("reset");
|
||||
emitter.off("isRadioChange");
|
||||
emitter.off("isRadioProcessScopeChange");
|
||||
emitter.off("isRadioActSeqMoreChange");
|
||||
emitter.off("isRadioActSeqFromToChange");
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.disc) {
|
||||
font-variation-settings:
|
||||
'FILL' 1,
|
||||
'wght' 100,
|
||||
'GRAD' 0,
|
||||
'opsz' 20
|
||||
"FILL" 1,
|
||||
"wght" 100,
|
||||
"GRAD" 0,
|
||||
"opsz" 20;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,99 +1,345 @@
|
||||
<template>
|
||||
<section class="animate-fadein w-full h-full" >
|
||||
|
||||
<section class="animate-fadein w-full h-full">
|
||||
<!-- Have activity -->
|
||||
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
|
||||
<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">
|
||||
<ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData"
|
||||
:category="'cfmSeqStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
|
||||
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData"
|
||||
:category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Activity sequence' &&
|
||||
selectedActivitySequence === 'Start & End'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'Start activity'"
|
||||
:select="isSubmitStartAndEnd?.[0].task"
|
||||
:data="cfmSeqStartData"
|
||||
:category="'cfmSeqStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<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"
|
||||
:isSubmit="isSubmit" :category="'cfmSeqDirectly'"></ActSeqDrag>
|
||||
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
|
||||
&& selectedMode === 'Eventually follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqEventually"
|
||||
:isSubmit="isSubmit" :category="'cfmSeqEventually'"></ActSeqDrag>
|
||||
<ActSeqDrag
|
||||
v-if="
|
||||
selectedRuleType === 'Activity sequence' &&
|
||||
selectedActivitySequence === 'Sequence' &&
|
||||
selectedMode === 'Directly follows'
|
||||
"
|
||||
:data="conformanceTask"
|
||||
:listSeq="isSubmitCfmSeqDirectly"
|
||||
:isSubmit="isSubmit"
|
||||
:category="'cfmSeqDirectly'"
|
||||
></ActSeqDrag>
|
||||
<ActSeqDrag
|
||||
v-if="
|
||||
selectedRuleType === 'Activity sequence' &&
|
||||
selectedActivitySequence === 'Sequence' &&
|
||||
selectedMode === 'Eventually follows'
|
||||
"
|
||||
:data="conformanceTask"
|
||||
:listSeq="isSubmitCfmSeqEventually"
|
||||
:isSubmit="isSubmit"
|
||||
:category="'cfmSeqEventually'"
|
||||
></ActSeqDrag>
|
||||
|
||||
<!-- Activity duration -->
|
||||
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"
|
||||
:select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>
|
||||
<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"
|
||||
:data="cfmPtEteStartData" :category="'cfmPtEteStart'" :isSubmit="isSubmit" />
|
||||
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData"
|
||||
:category="'cfmPtEteEnd'" :isSubmit="isSubmit" />
|
||||
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
|
||||
<ActRadio :title="'Start'" :select="isSubmitCfmPtEteSE?.[0].task" :data="cfmPtEteSEStartData"
|
||||
:category="'cfmPtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
|
||||
<ActRadio :title="'End'" :select="isSubmitCfmPtEteSE?.[1].task" :data="cfmPtEteSEEndData"
|
||||
:category="'cfmPtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
|
||||
<!-- Processing time -->
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start'
|
||||
"
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmPtEteStart?.[0].task"
|
||||
:data="cfmPtEteStartData"
|
||||
:category="'cfmPtEteStart'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'End'
|
||||
"
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmPtEteEnd?.[0].task"
|
||||
:data="cfmPtEteEndData"
|
||||
:category="'cfmPtEteEnd'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start & End'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmPtEteSE?.[0].task"
|
||||
:data="cfmPtEteSEStartData"
|
||||
:category="'cfmPtEteSEStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<ActRadio
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmPtEteSE?.[1].task"
|
||||
:data="cfmPtEteSEEndData"
|
||||
:category="'cfmPtEteSEEnd'"
|
||||
:task="taskEnd"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectEnd"
|
||||
class="w-1/2"
|
||||
/>
|
||||
</div>
|
||||
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmPtPStart?.[0].task" :data="cfmPtPStartData"
|
||||
:category="'cfmPtPStart'" :isSubmit="isSubmit" />
|
||||
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmPtPEnd?.[0].task" :data="cfmPtPEndData"
|
||||
:category="'cfmPtPEnd'" :isSubmit="isSubmit" />
|
||||
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
|
||||
<ActRadio :title="'From'" :select="isSubmitCfmPtPSE?.[0].task" :data="cfmPtPSEStartData"
|
||||
class="w-1/2" :category="'cfmPtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
|
||||
<ActRadio :title="'To'" :select="isSubmitCfmPtPSE?.[1].task" :data="cfmPtPSEEndData" class="w-1/2"
|
||||
:category="'cfmPtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'From'
|
||||
"
|
||||
:title="'From'"
|
||||
:select="isSubmitCfmPtPStart?.[0].task"
|
||||
:data="cfmPtPStartData"
|
||||
:category="'cfmPtPStart'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'To'
|
||||
"
|
||||
:title="'To'"
|
||||
:select="isSubmitCfmPtPEnd?.[0].task"
|
||||
:data="cfmPtPEndData"
|
||||
:category="'cfmPtPEnd'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Processing time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'From & To'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'From'"
|
||||
:select="isSubmitCfmPtPSE?.[0].task"
|
||||
:data="cfmPtPSEStartData"
|
||||
class="w-1/2"
|
||||
:category="'cfmPtPSEStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
/>
|
||||
<ActRadio
|
||||
:title="'To'"
|
||||
:select="isSubmitCfmPtPSE?.[1].task"
|
||||
:data="cfmPtPSEEndData"
|
||||
class="w-1/2"
|
||||
:category="'cfmPtPSEEnd'"
|
||||
:task="taskEnd"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectEnd"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Waiting time -->
|
||||
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmWtEteStart?.[0].task"
|
||||
:data="cfmWtEteStartData" :category="'cfmWtEteStart'" :isSubmit="isSubmit" />
|
||||
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmWtEteEnd?.[0].task"
|
||||
:data="cfmWtEteEndData" :category="'cfmWtEteEnd'" :isSubmit="isSubmit" />
|
||||
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
|
||||
<ActRadio :title="'Start'" :select="isSubmitCfmWtEteSE?.[0].task" :data="cfmWtEteSEStartData" class="w-1/2"
|
||||
:category="'cfmWtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
|
||||
<ActRadio :title="'End'" :select="isSubmitCfmWtEteSE?.[1].task" :data="cfmWtEteSEEndData" class="w-1/2"
|
||||
:category="'cfmWtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start'
|
||||
"
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmWtEteStart?.[0].task"
|
||||
:data="cfmWtEteStartData"
|
||||
:category="'cfmWtEteStart'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'End'
|
||||
"
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmWtEteEnd?.[0].task"
|
||||
:data="cfmWtEteEndData"
|
||||
:category="'cfmWtEteEnd'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start & End'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmWtEteSE?.[0].task"
|
||||
:data="cfmWtEteSEStartData"
|
||||
class="w-1/2"
|
||||
:category="'cfmWtEteSEStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
/>
|
||||
<ActRadio
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmWtEteSE?.[1].task"
|
||||
:data="cfmWtEteSEEndData"
|
||||
class="w-1/2"
|
||||
:category="'cfmWtEteSEEnd'"
|
||||
:task="taskEnd"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectEnd"
|
||||
/>
|
||||
</div>
|
||||
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmWtPStart?.[0].task" :data="cfmWtPStartData"
|
||||
:category="'cfmWtPStart'" :isSubmit="isSubmit" />
|
||||
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmWtPEnd?.[0].task"
|
||||
:data="cfmWtPEndData" :category="'cfmWtPEnd'" :isSubmit="isSubmit" />
|
||||
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
|
||||
&& selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
|
||||
<ActRadio :title="'From'" :select="isSubmitCfmWtPSE?.[0].task" :data="cfmWtPSEStartData"
|
||||
class="w-1/2" :category="'cfmWtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
|
||||
<ActRadio :title="'To'" :select="isSubmitCfmWtPSE?.[1].task" :data="cfmWtPSEEndData"
|
||||
class="w-1/2" :category="'cfmWtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'From'
|
||||
"
|
||||
:title="'From'"
|
||||
:select="isSubmitCfmWtPStart?.[0].task"
|
||||
:data="cfmWtPStartData"
|
||||
:category="'cfmWtPStart'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'To'
|
||||
"
|
||||
:title="'To'"
|
||||
:select="isSubmitCfmWtPEnd?.[0].task"
|
||||
:data="cfmWtPEndData"
|
||||
:category="'cfmWtPEnd'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Waiting time' &&
|
||||
selectedProcessScope === 'Partial' &&
|
||||
selectedActSeqFromTo === 'From & To'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'From'"
|
||||
:select="isSubmitCfmWtPSE?.[0].task"
|
||||
:data="cfmWtPSEStartData"
|
||||
class="w-1/2"
|
||||
:category="'cfmWtPSEStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
/>
|
||||
<ActRadio
|
||||
:title="'To'"
|
||||
:select="isSubmitCfmWtPSE?.[1].task"
|
||||
:data="cfmWtPSEEndData"
|
||||
class="w-1/2"
|
||||
:category="'cfmWtPSEEnd'"
|
||||
:task="taskEnd"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectEnd"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Cycle time -->
|
||||
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmCtEteStart?.[0].task"
|
||||
:data="cfmCtEteStartData" :category="'cfmCtEteStart'" :isSubmit="isSubmit" />
|
||||
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
|
||||
&& selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmCtEteEnd?.[0].task" :data="cfmCtEteEndData"
|
||||
:category="'cfmCtEteEnd'" :isSubmit="isSubmit" />
|
||||
<div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"
|
||||
class="flex justify-between items-center w-full h-full">
|
||||
<ActRadio :title="'Start'" :select="isSubmitCfmCtEteSE?.[0].task" :data="cfmCtEteSEStartData" class="w-1/2"
|
||||
:category="'cfmCtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
|
||||
<ActRadio :title="'End'" :select="isSubmitCfmCtEteSE?.[1].task" :data="cfmCtEteSEEndData" class="w-1/2"
|
||||
:category="'cfmCtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Cycle time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start'
|
||||
"
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmCtEteStart?.[0].task"
|
||||
:data="cfmCtEteStartData"
|
||||
:category="'cfmCtEteStart'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<ActRadio
|
||||
v-if="
|
||||
selectedRuleType === 'Cycle time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'End'
|
||||
"
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmCtEteEnd?.[0].task"
|
||||
:data="cfmCtEteEndData"
|
||||
:category="'cfmCtEteEnd'"
|
||||
:isSubmit="isSubmit"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
selectedRuleType === 'Cycle time' &&
|
||||
selectedProcessScope === 'End to end' &&
|
||||
selectedActSeqMore === 'Start & End'
|
||||
"
|
||||
class="flex justify-between items-center w-full h-full"
|
||||
>
|
||||
<ActRadio
|
||||
:title="'Start'"
|
||||
:select="isSubmitCfmCtEteSE?.[0].task"
|
||||
:data="cfmCtEteSEStartData"
|
||||
class="w-1/2"
|
||||
:category="'cfmCtEteSEStart'"
|
||||
:task="taskStart"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectStart"
|
||||
/>
|
||||
<ActRadio
|
||||
:title="'End'"
|
||||
:select="isSubmitCfmCtEteSE?.[1].task"
|
||||
:data="cfmCtEteSEEndData"
|
||||
class="w-1/2"
|
||||
:category="'cfmCtEteSEEnd'"
|
||||
:task="taskEnd"
|
||||
:isSubmit="isSubmit"
|
||||
@selected-task="selectEnd"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -110,31 +356,75 @@
|
||||
* check result statistics.
|
||||
*/
|
||||
|
||||
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';
|
||||
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";
|
||||
|
||||
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
|
||||
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 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 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);
|
||||
@@ -143,112 +433,166 @@ 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);
|
||||
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);
|
||||
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);
|
||||
return cfmPtEteStart.value.map((i) => i.task);
|
||||
});
|
||||
const cfmPtEteEndData = computed(() => {
|
||||
return cfmPtEteEnd.value.map(i => i.task);
|
||||
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');
|
||||
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');
|
||||
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);
|
||||
return cfmPtPStart.value.map((i) => i.task);
|
||||
});
|
||||
const cfmPtPEndData = computed(() => {
|
||||
return cfmPtPEnd.value.map(i => i.task);
|
||||
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');
|
||||
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');
|
||||
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);
|
||||
return cfmWtEteStart.value.map((i) => i.task);
|
||||
});
|
||||
const cfmWtEteEndData = computed(() => {
|
||||
return cfmWtEteEnd.value.map(i => i.task);
|
||||
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');
|
||||
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');
|
||||
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);
|
||||
return cfmWtPStart.value.map((i) => i.task);
|
||||
});
|
||||
const cfmWtPEndData = computed(() => {
|
||||
return cfmWtPEnd.value.map(i => i.task);
|
||||
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');
|
||||
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');
|
||||
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);
|
||||
return cfmCtEteStart.value.map((i) => i.task);
|
||||
});
|
||||
const cfmCtEteEndData = computed(() => {
|
||||
return cfmCtEteEnd.value.map(i => i.task);
|
||||
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');
|
||||
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');
|
||||
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 - Fix issue where saved rule files could not be re-edited
|
||||
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;
|
||||
});
|
||||
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;
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Sets the start and end radio data.
|
||||
@@ -257,7 +601,7 @@ watch(() => props.isSubmitShowDataCt, (newValue) => {
|
||||
* @returns {array}
|
||||
*/
|
||||
function setTaskData(data, category) {
|
||||
let newData = data.map(i => i[category]);
|
||||
let newData = data.map((i) => i[category]);
|
||||
newData = [...new Set(newData)]; // Set is a collection type that only stores unique values.
|
||||
return newData;
|
||||
}
|
||||
@@ -269,13 +613,15 @@ function setTaskData(data, category) {
|
||||
* @returns {array}
|
||||
*/
|
||||
function setStartAndEndData(data, category, taskVal) {
|
||||
let oppositeCategory = '';
|
||||
if (category === 'start') {
|
||||
oppositeCategory = 'end';
|
||||
let oppositeCategory = "";
|
||||
if (category === "start") {
|
||||
oppositeCategory = "end";
|
||||
} else {
|
||||
oppositeCategory = 'start';
|
||||
};
|
||||
let newData = data.filter(i => i[category] === taskVal).map(i => i[oppositeCategory]);
|
||||
oppositeCategory = "start";
|
||||
}
|
||||
let newData = data
|
||||
.filter((i) => i[category] === taskVal)
|
||||
.map((i) => i[oppositeCategory]);
|
||||
newData = [...new Set(newData)];
|
||||
return newData;
|
||||
}
|
||||
@@ -287,7 +633,7 @@ function setStartAndEndData(data, category, taskVal) {
|
||||
* @returns {array}
|
||||
*/
|
||||
function setSeqStartAndEndData(data, category, taskVal) {
|
||||
let newData = data.filter(i => i.label === taskVal).map(i => i[category]);
|
||||
let newData = data.filter((i) => i.label === taskVal).map((i) => i[category]);
|
||||
newData = [...new Set(...newData)];
|
||||
return newData;
|
||||
}
|
||||
@@ -297,16 +643,16 @@ function setSeqStartAndEndData(data, category, taskVal) {
|
||||
*/
|
||||
function selectStart(e) {
|
||||
taskStart.value = e;
|
||||
if(isStartSelected.value === null || isStartSelected.value === true){
|
||||
if (isStartSelected.value === null || isStartSelected.value === true) {
|
||||
isStartSelected.value = true;
|
||||
isEndSelected.value = false;
|
||||
task.value = e;
|
||||
taskEnd.value = null;
|
||||
emitter.emit('sratrAndEndToStart', {
|
||||
emitter.emit("sratrAndEndToStart", {
|
||||
start: true,
|
||||
end: false,
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
/**
|
||||
* select End list's task
|
||||
@@ -314,12 +660,12 @@ function selectStart(e) {
|
||||
*/
|
||||
function selectEnd(e) {
|
||||
taskEnd.value = e;
|
||||
if(isEndSelected.value === null || isEndSelected.value === true){
|
||||
if (isEndSelected.value === null || isEndSelected.value === true) {
|
||||
isEndSelected.value = true;
|
||||
isStartSelected.value = false;
|
||||
task.value = e;
|
||||
taskStart.value = null;
|
||||
emitter.emit('sratrAndEndToStart', {
|
||||
emitter.emit("sratrAndEndToStart", {
|
||||
start: false,
|
||||
end: true,
|
||||
});
|
||||
@@ -340,22 +686,23 @@ function reset() {
|
||||
* @param {boolean} data - Whether data should be restored from submission state.
|
||||
*/
|
||||
function setResetData(data) {
|
||||
if(data) {
|
||||
if(props.isSubmit) {
|
||||
if (data) {
|
||||
if (props.isSubmit) {
|
||||
switch (selectedRuleType.value) {
|
||||
case 'Activity sequence':
|
||||
case "Activity sequence":
|
||||
task.value = props.isSubmitShowDataSeq.task;
|
||||
isStartSelected.value = props.isSubmitShowDataSeq.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataSeq.isEndSelected;
|
||||
break;
|
||||
case 'Processing time':
|
||||
case "Processing time":
|
||||
switch (selectedProcessScope.value) {
|
||||
case 'End to end':
|
||||
case "End to end":
|
||||
task.value = props.isSubmitShowDataPtEte.task;
|
||||
isStartSelected.value = props.isSubmitShowDataPtEte.isStartSelected;
|
||||
isStartSelected.value =
|
||||
props.isSubmitShowDataPtEte.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataPtEte.isEndSelected;
|
||||
break;
|
||||
case 'Partial':
|
||||
case "Partial":
|
||||
task.value = props.isSubmitShowDataPtP.task;
|
||||
isStartSelected.value = props.isSubmitShowDataPtP.isStartSelected;
|
||||
isEndSelected.value = props.isSubmitShowDataPtP.isEndSelected;
|
||||
@@ -364,23 +711,24 @@ function setResetData(data) {
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'Waiting time':
|
||||
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':
|
||||
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;
|
||||
@@ -395,28 +743,28 @@ function setResetData(data) {
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('isRadioChange', (data) => {
|
||||
emitter.on("isRadioChange", (data) => {
|
||||
setResetData(data);
|
||||
});
|
||||
emitter.on('isRadioSeqChange', (data) => {
|
||||
emitter.on("isRadioSeqChange", (data) => {
|
||||
setResetData(data);
|
||||
});
|
||||
emitter.on('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
emitter.on("isRadioProcessScopeChange", (data) => {
|
||||
if (data) {
|
||||
setResetData(data);
|
||||
};
|
||||
}
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
emitter.on("isRadioActSeqMoreChange", (data) => {
|
||||
if (data) {
|
||||
setResetData(data);
|
||||
};
|
||||
}
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
emitter.on("isRadioActSeqFromToChange", (data) => {
|
||||
if (data) {
|
||||
setResetData(data);
|
||||
};
|
||||
}
|
||||
});
|
||||
emitter.on('reset', data => {
|
||||
emitter.on("reset", (data) => {
|
||||
reset();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,71 +1,226 @@
|
||||
<template>
|
||||
<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">
|
||||
<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="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="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="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="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="state.timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<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="state.timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<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="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="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="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="state.timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<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="state.timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
<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="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="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="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="state.timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds" />
|
||||
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="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="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="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="state.timeCfmPtEteSE"
|
||||
:select="isSubmitTimeCfmPtEteSE"
|
||||
@min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds"
|
||||
/>
|
||||
<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="state.timeCfmPtPEnd"
|
||||
:select="isSubmitTimeCfmPtPEnd"
|
||||
@min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds"
|
||||
/>
|
||||
<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="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="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="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="state.timeCfmWtEteSE"
|
||||
:select="isSubmitTimeCfmWtEteSE"
|
||||
@min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds"
|
||||
/>
|
||||
<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="state.timeCfmWtPEnd"
|
||||
:select="isSubmitTimeCfmWtPEnd"
|
||||
@min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds"
|
||||
/>
|
||||
<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="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="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="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="state.timeCfmCtEteSE"
|
||||
:select="isSubmitTimeCfmCtEteSE"
|
||||
@min-total-seconds="minTotalSeconds"
|
||||
@max-total-seconds="maxTotalSeconds"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// The Lucia project.
|
||||
@@ -80,30 +235,67 @@
|
||||
* configuration with calendar inputs.
|
||||
*/
|
||||
|
||||
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';
|
||||
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";
|
||||
|
||||
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
|
||||
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 props = defineProps(['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
|
||||
'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart',
|
||||
'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll',
|
||||
'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE',
|
||||
'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll',
|
||||
'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'
|
||||
const props = defineProps([
|
||||
"isSubmitDurationTime",
|
||||
"isSubmitTimeCfmPtEteAll",
|
||||
"isSubmitTimeCfmPtEteStart",
|
||||
"isSubmitTimeCfmPtEteEnd",
|
||||
"isSubmitTimeCfmPtEteSE",
|
||||
"isSubmitTimeCfmPtPStart",
|
||||
"isSubmitTimeCfmPtPEnd",
|
||||
"isSubmitTimeCfmPtPSE",
|
||||
"isSubmitTimeCfmWtEteAll",
|
||||
"isSubmitTimeCfmWtEteStart",
|
||||
"isSubmitTimeCfmWtEteEnd",
|
||||
"isSubmitTimeCfmWtEteSE",
|
||||
"isSubmitTimeCfmWtPStart",
|
||||
"isSubmitTimeCfmWtPEnd",
|
||||
"isSubmitTimeCfmWtPSE",
|
||||
"isSubmitTimeCfmCtEteAll",
|
||||
"isSubmitTimeCfmCtEteStart",
|
||||
"isSubmitTimeCfmCtEteEnd",
|
||||
"isSubmitTimeCfmCtEteSE",
|
||||
]);
|
||||
|
||||
const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
|
||||
const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
|
||||
|
||||
const state = reactive({
|
||||
timeDuration: null, // Activity duration
|
||||
@@ -164,14 +356,14 @@ const storeRefs = {
|
||||
* @param {number} e - The minimum total seconds.
|
||||
*/
|
||||
function minTotalSeconds(e) {
|
||||
emit('min-total-seconds', e);
|
||||
emit("min-total-seconds", e);
|
||||
}
|
||||
/**
|
||||
* get min total seconds
|
||||
* @param {number} e - The maximum total seconds.
|
||||
*/
|
||||
function maxTotalSeconds(e) {
|
||||
emit('max-total-seconds', e);
|
||||
emit("max-total-seconds", e);
|
||||
}
|
||||
/**
|
||||
* get Time Range(duration)
|
||||
@@ -182,35 +374,35 @@ function maxTotalSeconds(e) {
|
||||
* @returns {object} {min:12, max:345}
|
||||
*/
|
||||
function getDurationTime(data, category, task, taskTwo) {
|
||||
let result = {min:0, max:0};
|
||||
let result = { min: 0, max: 0 };
|
||||
switch (category) {
|
||||
case 'act':
|
||||
data.forEach(i => {
|
||||
if(i.label === task) {
|
||||
case "act":
|
||||
data.forEach((i) => {
|
||||
if (i.label === task) {
|
||||
result = i.duration;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'single':
|
||||
data.forEach(i => {
|
||||
if(i.task === task) {
|
||||
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) {
|
||||
case "double":
|
||||
data.forEach((i) => {
|
||||
if (i.start === task && i.end === taskTwo) {
|
||||
result = i.time;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'all':
|
||||
case "all":
|
||||
result = data;
|
||||
break
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
@@ -249,148 +441,235 @@ function reset() {
|
||||
}
|
||||
|
||||
// created() logic
|
||||
emitter.on('actRadioData', (data) => {
|
||||
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]);
|
||||
}
|
||||
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);
|
||||
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;
|
||||
};
|
||||
// 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('isRadioProcessScopeChange', (data) => {
|
||||
if(data) {
|
||||
reset();
|
||||
};
|
||||
emitter.on("reset", (data) => {
|
||||
reset();
|
||||
});
|
||||
emitter.on('isRadioActSeqMoreChange', (data) => {
|
||||
if(data) {
|
||||
if(selectedActSeqMore.value === 'All') {
|
||||
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));
|
||||
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));
|
||||
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));
|
||||
case "Cycle time":
|
||||
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
|
||||
state.timeCfmCtEteAllDefault = JSON.parse(
|
||||
JSON.stringify(state.timeCfmCtEteAll),
|
||||
);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
};
|
||||
}else reset();
|
||||
};
|
||||
}
|
||||
} else reset();
|
||||
}
|
||||
});
|
||||
emitter.on('isRadioActSeqFromToChange', (data) => {
|
||||
if(data) {
|
||||
emitter.on("isRadioActSeqFromToChange", (data) => {
|
||||
if (data) {
|
||||
reset();
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
<template>
|
||||
<ul class="space-y-2" id="cyp-conformance-result-arrow">
|
||||
<li class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index" :title="act">
|
||||
<li
|
||||
class="flex justify-start items-center pr-4"
|
||||
v-for="(act, index) in data"
|
||||
:key="index"
|
||||
:title="act"
|
||||
>
|
||||
<span class="material-symbols-outlined text-primary mr-2">
|
||||
arrow_circle_down
|
||||
</span>
|
||||
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
|
||||
<p
|
||||
class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
||||
>
|
||||
{{ act }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@@ -20,5 +29,5 @@
|
||||
* sequences.
|
||||
*/
|
||||
|
||||
defineProps(['data', 'select']);
|
||||
defineProps(["data", "select"]);
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
<template>
|
||||
<ul class="space-y-2" id="cyp-conformance-result-check">
|
||||
<li class="flex justify-start items-center pr-4" v-for="(act, index) in datadata" :key="index" :title="act">
|
||||
<li
|
||||
class="flex justify-start items-center pr-4"
|
||||
v-for="(act, index) in datadata"
|
||||
:key="index"
|
||||
:title="act"
|
||||
>
|
||||
<span class="material-symbols-outlined text-primary mr-2">
|
||||
check_circle
|
||||
</span>
|
||||
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
|
||||
<p
|
||||
class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
||||
>
|
||||
{{ act }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@@ -20,20 +29,26 @@
|
||||
* matched activities.
|
||||
*/
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { ref, watch } from "vue";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const props = defineProps(['data', 'select']);
|
||||
const props = defineProps(["data", "select"]);
|
||||
|
||||
const datadata = ref(props.select);
|
||||
|
||||
watch(() => props.data, (newValue) => {
|
||||
datadata.value = newValue;
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
(newValue) => {
|
||||
datadata.value = newValue;
|
||||
},
|
||||
);
|
||||
|
||||
watch(() => props.select, (newValue) => {
|
||||
datadata.value = newValue;
|
||||
});
|
||||
watch(
|
||||
() => props.select,
|
||||
(newValue) => {
|
||||
datadata.value = newValue;
|
||||
},
|
||||
);
|
||||
|
||||
emitter.on('reset', (val) => datadata.value = val);
|
||||
emitter.on("reset", (val) => (datadata.value = val));
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<ul id="cyp-conformance-result-dot">
|
||||
<li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act" :title="act">
|
||||
<span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>
|
||||
<li
|
||||
class="flex justify-start items-center py-1 pr-4"
|
||||
v-for="(act, index) in data"
|
||||
:key="index + act"
|
||||
:title="act"
|
||||
>
|
||||
<span class="material-symbols-outlined disc !text-sm align-middle mr-1"
|
||||
>fiber_manual_record</span
|
||||
>
|
||||
<span class="mr-2 block w-12">{{ act.category }}</span>
|
||||
<span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>
|
||||
<span
|
||||
class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block"
|
||||
>{{ act.task }}</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@@ -19,16 +29,20 @@
|
||||
* and task pairs.
|
||||
*/
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
import { ref, watch } from "vue";
|
||||
import emitter from "@/utils/emitter";
|
||||
|
||||
const props = defineProps(['timeResultData', 'select']);
|
||||
const props = defineProps(["timeResultData", "select"]);
|
||||
|
||||
const data = ref(props.select);
|
||||
|
||||
watch(() => props.timeResultData, (newValue) => {
|
||||
data.value = newValue;
|
||||
}, { deep: true });
|
||||
watch(
|
||||
() => props.timeResultData,
|
||||
(newValue) => {
|
||||
data.value = newValue;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
emitter.on('reset', (val) => data.value = val);
|
||||
emitter.on("reset", (val) => (data.value = val));
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,23 @@
|
||||
<template>
|
||||
<div id="timeranges_s_e_container" class="flex justify-between items-center">
|
||||
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
|
||||
@total-seconds="minTotalSeconds" :value="durationMin">
|
||||
<Durationjs
|
||||
:max="minVuemax"
|
||||
:min="minVuemin"
|
||||
:size="'min'"
|
||||
:updateMax="updateMax"
|
||||
@total-seconds="minTotalSeconds"
|
||||
:value="durationMin"
|
||||
>
|
||||
</Durationjs>
|
||||
<span>~</span>
|
||||
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin"
|
||||
@total-seconds="maxTotalSeconds" :value="durationMax">
|
||||
<span>~</span>
|
||||
<Durationjs
|
||||
:max="maxVuemax"
|
||||
:min="maxVuemin"
|
||||
:size="'max'"
|
||||
:updateMin="updateMin"
|
||||
@total-seconds="maxTotalSeconds"
|
||||
:value="durationMax"
|
||||
>
|
||||
</Durationjs>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,11 +34,11 @@
|
||||
* for conformance time-based rules.
|
||||
*/
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
import Durationjs from '@/components/durationjs.vue';
|
||||
import { ref, watch } from "vue";
|
||||
import Durationjs from "@/components/durationjs.vue";
|
||||
|
||||
const props = defineProps(['time', 'select']);
|
||||
const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
|
||||
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);
|
||||
@@ -56,7 +68,7 @@ function setTimeValue() {
|
||||
function minTotalSeconds(e) {
|
||||
timeRangeMin.value = e;
|
||||
updateMin.value = e;
|
||||
emit('min-total-seconds', e);
|
||||
emit("min-total-seconds", e);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -66,29 +78,33 @@ function minTotalSeconds(e) {
|
||||
function maxTotalSeconds(e) {
|
||||
timeRangeMax.value = e;
|
||||
updateMax.value = e;
|
||||
emit('max-total-seconds', 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 });
|
||||
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) {
|
||||
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) {
|
||||
if (Object.keys(props.select.rule).length !== 0) {
|
||||
durationMin.value = props.select.rule.min;
|
||||
durationMax.value = props.select.rule.max;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user