336 lines
15 KiB
Vue
336 lines
15 KiB
Vue
<template>
|
|
<div class="px-4 text-sm">
|
|
<!-- Have activity -->
|
|
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
|
|
<!-- Activity sequence -->
|
|
<ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
|
|
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
|
|
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
|
|
<!-- Activity duration -->
|
|
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
|
|
<!-- Processing time -->
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
|
|
<!-- Waiting time -->
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
|
|
<!-- Cycle time -->
|
|
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
|
|
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { storeToRefs } from 'pinia';
|
|
import ConformanceStore from '@/stores/conformance.js';
|
|
import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
|
|
import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
|
|
import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
|
|
|
|
export default {
|
|
setup() {
|
|
const conformanceStore = ConformanceStore();
|
|
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
|
|
|
|
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
|
|
},
|
|
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE'],
|
|
components: {
|
|
ResultCheck,
|
|
ResultArrow,
|
|
ResultDot,
|
|
},
|
|
data() {
|
|
return {
|
|
containstTasksData: null,
|
|
startEndData: null,
|
|
selectCfmSeqStart: null,
|
|
selectCfmSeqEnd: null,
|
|
selectCfmSeqDirectly: [],
|
|
selectCfmSeqEventually: [],
|
|
durationData: null,
|
|
selectCfmPtEteStart: null, // Processing time
|
|
selectCfmPtEteEnd: null,
|
|
selectCfmPtEteSEStart: null,
|
|
selectCfmPtEteSEEnd: null,
|
|
selectCfmPtPStart: null,
|
|
selectCfmPtPEnd: null,
|
|
selectCfmPtPSEStart: null,
|
|
selectCfmPtPSEEnd: null,
|
|
selectCfmWtEteStart: null, // Waiting time
|
|
selectCfmWtEteEnd: null,
|
|
selectCfmWtEteSEStart: null,
|
|
selectCfmWtEteSEEnd: null,
|
|
selectCfmWtPStart: null,
|
|
selectCfmWtPEnd: null,
|
|
selectCfmWtPSEStart: null,
|
|
selectCfmWtPSEEnd: null,
|
|
selectCfmCtEteStart: null, // Cycle time
|
|
selectCfmCtEteEnd: null,
|
|
selectCfmCtEteSEStart: null,
|
|
selectCfmCtEteSEEnd: null,
|
|
startAndEndIsReset: false,
|
|
}
|
|
},
|
|
computed: {
|
|
selectCfmSeqSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
|
|
if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'Start': 1, 'End': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
selectCfmPtEteSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
|
|
if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'Start': 1, 'End': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
selectCfmPtPSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart);
|
|
if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'From': 1, 'To': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
selectCfmWtEteSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart);
|
|
if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'Start': 1, 'End': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
selectCfmWtPSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart);
|
|
if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'From': 1, 'To': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
selectCfmCtEteSE: function() {
|
|
let data = [];
|
|
if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart);
|
|
if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd);
|
|
data.sort((a, b) => {
|
|
const order = { 'Start': 1, 'End': 2};
|
|
return order[a.category] - order[b.category];
|
|
});
|
|
return data;
|
|
},
|
|
},
|
|
methods: {
|
|
/**
|
|
* All reset
|
|
*/
|
|
reset() {
|
|
this.containstTasksData = null;
|
|
this.startEndData = null;
|
|
this.selectCfmSeqStart = null;
|
|
this.selectCfmSeqEnd = null;
|
|
this.selectCfmSeqDirectly = [];
|
|
this.selectCfmSeqEventually = [];
|
|
this.durationData = null;
|
|
this.selectCfmPtEteStart = null;
|
|
this.selectCfmPtEteEnd = null;
|
|
this.selectCfmPtEteSEStart = null;
|
|
this.selectCfmPtEteSEEnd = null;
|
|
this.selectCfmPtPStart = null;
|
|
this.selectCfmPtPEnd = null;
|
|
this.selectCfmPtPSEStart = null;
|
|
this.selectCfmPtPSEEnd = null;
|
|
this.selectCfmWtEteStart = null; // Waiting time
|
|
this.selectCfmWtEteEnd = null;
|
|
this.selectCfmWtEteSEStart = null;
|
|
this.selectCfmWtEteSEEnd = null;
|
|
this.selectCfmWtPStart = null;
|
|
this.selectCfmWtPEnd = null;
|
|
this.selectCfmWtPSEStart = null;
|
|
this.selectCfmWtPSEEnd = null;
|
|
this.selectCfmCtEteStart = null; // Cycle time
|
|
this.selectCfmCtEteEnd = null;
|
|
this.selectCfmCtEteSEStart = null;
|
|
this.selectCfmCtEteSEEnd = null;
|
|
this.startAndEndIsReset = true;
|
|
},
|
|
},
|
|
created() {
|
|
this.$emitter.on('actListData', (data) => {
|
|
this.containstTasksData = data;
|
|
});
|
|
this.$emitter.on('actRadioData', (newData) => {
|
|
let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
|
|
switch (data.category) {
|
|
// Activity sequence
|
|
case 'cfmSeqStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmSeqStart) this.selectCfmSeqEnd = null;
|
|
data.category = 'Start';
|
|
this.selectCfmSeqStart = data;
|
|
break;
|
|
case 'cfmSeqEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmSeqEnd)this.selectCfmSeqStart = null;
|
|
data.category = 'End';
|
|
this.selectCfmSeqEnd = data;
|
|
break;
|
|
// Processing time
|
|
case 'cfmPtEteStart':
|
|
data.category = 'Start';
|
|
this.selectCfmPtEteStart = [data];
|
|
break;
|
|
case 'cfmPtEteEnd':
|
|
data.category = 'End';
|
|
this.selectCfmPtEteEnd = [data];
|
|
break;
|
|
case 'cfmPtEteSEStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmPtEteSEStart) this.selectCfmPtEteSEEnd = null;
|
|
data.category = 'Start';
|
|
this.selectCfmPtEteSEStart = data;
|
|
break;
|
|
case 'cfmPtEteSEEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmPtEteSEEnd)this.selectCfmPtEteSEStart = null;
|
|
data.category = 'End';
|
|
this.selectCfmPtEteSEEnd = data;
|
|
break;
|
|
case 'cfmPtPStart':
|
|
data.category = 'From';
|
|
this.selectCfmPtPStart = [data];
|
|
break;
|
|
case 'cfmPtPEnd':
|
|
data.category = 'To';
|
|
this.selectCfmPtPEnd = [data];
|
|
break;
|
|
case 'cfmPtPSEStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) this.selectCfmPtPSEEnd = null;
|
|
data.category = 'From';
|
|
this.selectCfmPtPSEStart = data;
|
|
break;
|
|
case 'cfmPtPSEEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd)this.selectCfmPtPSEStart = null;
|
|
data.category = 'To';
|
|
this.selectCfmPtPSEEnd = data;
|
|
break;
|
|
// Waiting time
|
|
case 'cfmWtEteStart':
|
|
data.category = 'Start';
|
|
this.selectCfmWtEteStart = [data];
|
|
break;
|
|
case 'cfmWtEteEnd':
|
|
data.category = 'End';
|
|
this.selectCfmWtEteEnd = [data];
|
|
break;
|
|
case 'cfmWtEteSEStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) this.selectCfmWtEteSEEnd = null;
|
|
data.category = 'Start';
|
|
this.selectCfmWtEteSEStart = data;
|
|
break;
|
|
case 'cfmWtEteSEEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd)this.selectCfmWtEteSEStart = null;
|
|
data.category = 'End';
|
|
this.selectCfmWtEteSEEnd = data;
|
|
break;
|
|
case 'cfmWtPStart':
|
|
data.category = 'From';
|
|
this.selectCfmWtPStart = [data];
|
|
break;
|
|
case 'cfmWtPEnd':
|
|
data.category = 'To';
|
|
this.selectCfmWtPEnd = [data];
|
|
break;
|
|
case 'cfmWtPSEStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmWtPSEStart) this.selectCfmWtPSEEnd = null;
|
|
data.category = 'From';
|
|
this.selectCfmWtPSEStart = data;
|
|
break;
|
|
case 'cfmWtPSEEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmWtPSEEnd)this.selectCfmWtPSEStart = null;
|
|
data.category = 'To';
|
|
this.selectCfmWtPSEEnd = data;
|
|
break;
|
|
// Cycle time
|
|
case 'cfmCtEteStart':
|
|
data.category = 'Start';
|
|
this.selectCfmCtEteStart = [data];
|
|
break;
|
|
case 'cfmCtEteEnd':
|
|
data.category = 'End';
|
|
this.selectCfmCtEteEnd = [data];
|
|
break;
|
|
case 'cfmCtEteSEStart':
|
|
if(this.isStartSelected === true && data.task !== this.selectCfmCtEteSEStart) this.selectCfmCtEteSEEnd = null;
|
|
data.category = 'Start';
|
|
this.selectCfmCtEteSEStart = data;
|
|
break;
|
|
case 'cfmCtEteSEEnd':
|
|
if(this.isEndSelected === true && data.task !== this.selectCfmCtEteSEEnd)this.selectCfmCtEteSEStart = null;
|
|
data.category = 'End';
|
|
this.selectCfmCtEteSEEnd = data;
|
|
break;
|
|
default:
|
|
if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
|
|
break;
|
|
};
|
|
});
|
|
this.$emitter.on('getListSequence', (data) => {
|
|
switch (data.category) {
|
|
case 'cfmSeqDirectly':
|
|
this.selectCfmSeqDirectly = data.task;
|
|
break;
|
|
case 'cfmSeqEventually':
|
|
this.selectCfmSeqEventually = data.task;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
this.$emitter.on('reset', (data) => {
|
|
this.reset();
|
|
});
|
|
// Radio 切換時，資料要清空
|
|
this.$emitter.on('isRadioChange', (data) => {
|
|
if(data) this.reset();
|
|
});
|
|
this.$emitter.on('isRadioProcessScopeChange', (data) => {
|
|
if(data) this.reset();
|
|
});
|
|
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
|
|
if(data) this.reset();
|
|
});
|
|
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
|
|
if(data) this.reset();
|
|
});
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
:deep(.disc) {
|
|
font-variation-settings:
|
|
'FILL' 1,
|
|
'wght' 100,
|
|
'GRAD' 0,
|
|
'opsz' 20
|
|
}
|
|
</style>
|