473 lines
14 KiB
Vue
473 lines
14 KiB
Vue
<template>
|
|
<div class="px-4 text-sm">
|
|
<!-- Have activity -->
|
|
<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>
|
|
<!-- Activity duration -->
|
|
<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>
|
|
<!-- 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>
|
|
<!-- 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>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult
|
|
* Conformance result list with selectable items and
|
|
* 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";
|
|
|
|
const conformanceStore = useConformanceStore();
|
|
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 state = reactive({
|
|
containstTasksData: null,
|
|
startEndData: null,
|
|
selectCfmSeqStart: null,
|
|
selectCfmSeqEnd: null,
|
|
selectCfmSeqDirectly: [],
|
|
selectCfmSeqEventually: [],
|
|
durationData: null,
|
|
selectCfmPtEteStart: null, // Processing time
|
|
selectCfmPtEteEnd: null,
|
|
selectCfmPtEteSEStart: null,
|
|
selectCfmPtEteSEEnd: null,
|
|
selectCfmPtPStart: null,
|
|
selectCfmPtPEnd: null,
|
|
selectCfmPtPSEStart: null,
|
|
selectCfmPtPSEEnd: null,
|
|
selectCfmWtEteStart: null, // Waiting time
|
|
selectCfmWtEteEnd: null,
|
|
selectCfmWtEteSEStart: null,
|
|
selectCfmWtEteSEEnd: null,
|
|
selectCfmWtPStart: null,
|
|
selectCfmWtPEnd: null,
|
|
selectCfmWtPSEStart: null,
|
|
selectCfmWtPSEEnd: null,
|
|
selectCfmCtEteStart: null, // Cycle time
|
|
selectCfmCtEteEnd: null,
|
|
selectCfmCtEteSEStart: null,
|
|
selectCfmCtEteSEEnd: null,
|
|
startAndEndIsReset: false,
|
|
});
|
|
|
|
const selectCfmSeqSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
|
|
if (state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
|
|
data.sort((a, b) => {
|
|
const order = { Start: 1, End: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
const selectCfmPtEteSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
|
|
if (state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { Start: 1, End: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
const selectCfmPtPSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
|
|
if (state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { From: 1, To: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
const selectCfmWtEteSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
|
|
if (state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { Start: 1, End: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
const selectCfmWtPSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
|
|
if (state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { From: 1, To: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
const selectCfmCtEteSE = computed(() => {
|
|
const data = [];
|
|
if (state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
|
|
if (state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { Start: 1, End: 2 };
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
});
|
|
|
|
/**
|
|
* All reset
|
|
*/
|
|
function reset() {
|
|
state.containstTasksData = null;
|
|
state.startEndData = null;
|
|
state.selectCfmSeqStart = null;
|
|
state.selectCfmSeqEnd = null;
|
|
state.selectCfmSeqDirectly = [];
|
|
state.selectCfmSeqEventually = [];
|
|
state.durationData = null;
|
|
state.selectCfmPtEteStart = null;
|
|
state.selectCfmPtEteEnd = null;
|
|
state.selectCfmPtEteSEStart = null;
|
|
state.selectCfmPtEteSEEnd = null;
|
|
state.selectCfmPtPStart = null;
|
|
state.selectCfmPtPEnd = null;
|
|
state.selectCfmPtPSEStart = null;
|
|
state.selectCfmPtPSEEnd = null;
|
|
state.selectCfmWtEteStart = null; // Waiting time
|
|
state.selectCfmWtEteEnd = null;
|
|
state.selectCfmWtEteSEStart = null;
|
|
state.selectCfmWtEteSEEnd = null;
|
|
state.selectCfmWtPStart = null;
|
|
state.selectCfmWtPEnd = null;
|
|
state.selectCfmWtPSEStart = null;
|
|
state.selectCfmWtPSEEnd = null;
|
|
state.selectCfmCtEteStart = null; // Cycle time
|
|
state.selectCfmCtEteEnd = null;
|
|
state.selectCfmCtEteSEStart = null;
|
|
state.selectCfmCtEteSEEnd = null;
|
|
state.startAndEndIsReset = true;
|
|
}
|
|
|
|
// created() logic
|
|
emitter.on("actListData", (data) => {
|
|
state.containstTasksData = data;
|
|
});
|
|
emitter.on("actRadioData", (newData) => {
|
|
const data = JSON.parse(JSON.stringify(newData)); // 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"],
|
|
};
|
|
|
|
const updateSelection = (key, mainSelector, secondarySelector) => {
|
|
if (state[mainSelector]) {
|
|
if (data.task !== state[mainSelector]) state[secondarySelector] = null;
|
|
}
|
|
data.category = categoryMapping[key][0];
|
|
state[mainSelector] = data;
|
|
};
|
|
|
|
if (categoryMapping[data.category]) {
|
|
const [category, mainSelector, secondarySelector] =
|
|
categoryMapping[data.category];
|
|
if (secondarySelector) {
|
|
updateSelection(data.category, mainSelector, secondarySelector);
|
|
} else {
|
|
data.category = category;
|
|
state[mainSelector] = [data];
|
|
}
|
|
} else if (selectedRuleType.value === "Activity duration") {
|
|
state.durationData = [data.task];
|
|
}
|
|
});
|
|
emitter.on("getListSequence", (data) => {
|
|
switch (data.category) {
|
|
case "cfmSeqDirectly":
|
|
state.selectCfmSeqDirectly = data.task;
|
|
break;
|
|
case "cfmSeqEventually":
|
|
state.selectCfmSeqEventually = data.task;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
emitter.on("reset", (data) => {
|
|
reset();
|
|
});
|
|
// Clear data when switching radio buttons
|
|
emitter.on("isRadioChange", (data) => {
|
|
if (data) reset();
|
|
});
|
|
emitter.on("isRadioProcessScopeChange", (data) => {
|
|
if (data) reset();
|
|
});
|
|
emitter.on("isRadioActSeqMoreChange", (data) => {
|
|
if (data) reset();
|
|
});
|
|
emitter.on("isRadioActSeqFromToChange", (data) => {
|
|
if (data) reset();
|
|
});
|
|
|
|
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");
|
|
});
|
|
</script>
|
|
<style scoped>
|
|
:deep(.disc) {
|
|
font-variation-settings:
|
|
"FILL" 1,
|
|
"wght" 100,
|
|
"GRAD" 0,
|
|
"opsz" 20;
|
|
}
|
|
</style>
|