397 lines
17 KiB
Vue
397 lines
17 KiB
Vue
<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">
|
|
<!-- 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" />
|
|
</div>
|
|
</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/ConformanceTimeRange
|
|
* Time range picker for conformance time-based rule
|
|
* 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';
|
|
|
|
const conformanceStore = useConformanceStore();
|
|
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
|
|
selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
|
|
cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
|
|
cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart,
|
|
cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
|
|
cfmWtEteWhole, cfmCtEteWhole
|
|
} = storeToRefs(conformanceStore);
|
|
|
|
const 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 state = reactive({
|
|
timeDuration: null, // Activity duration
|
|
timeCfmPtEteAll: null, // Processing time
|
|
timeCfmPtEteAllDefault: null,
|
|
timeCfmPtEteStart: null,
|
|
timeCfmPtEteEnd: null,
|
|
timeCfmPtEteSE: null,
|
|
timeCfmPtPStart: null,
|
|
timeCfmPtPEnd: null,
|
|
timeCfmPtPSE: null,
|
|
timeCfmWtEteAll: null, // Waiting time
|
|
timeCfmWtEteAllDefault: null,
|
|
timeCfmWtEteStart: null,
|
|
timeCfmWtEteEnd: null,
|
|
timeCfmWtEteSE: null,
|
|
timeCfmWtPStart: null,
|
|
timeCfmWtPEnd: null,
|
|
timeCfmWtPSE: null,
|
|
timeCfmCtEteAll: null, // Cycle time
|
|
timeCfmCtEteAllDefault: null,
|
|
timeCfmCtEteStart: null,
|
|
timeCfmCtEteEnd: null,
|
|
timeCfmCtEteSE: null,
|
|
selectCfmPtEteSEStart: null,
|
|
selectCfmPtEteSEEnd: null,
|
|
selectCfmPtPSEStart: null,
|
|
selectCfmPtPSEEnd: null,
|
|
selectCfmWtEteSEStart: null,
|
|
selectCfmWtEteSEEnd: null,
|
|
selectCfmWtPSEStart: null,
|
|
selectCfmWtPSEEnd: null,
|
|
selectCfmCtEteSEStart: null,
|
|
selectCfmCtEteSEEnd: null,
|
|
});
|
|
|
|
// Store refs lookup for dynamic access in handleSingleSelection/handleDoubleSelection
|
|
const storeRefs = {
|
|
cfmPtEteStart,
|
|
cfmPtEteEnd,
|
|
cfmPtEteSE,
|
|
cfmPtPStart,
|
|
cfmPtPEnd,
|
|
cfmPtPSE,
|
|
cfmWtEteStart,
|
|
cfmWtEteEnd,
|
|
cfmWtEteSE,
|
|
cfmWtPStart,
|
|
cfmWtPEnd,
|
|
cfmWtPSE,
|
|
cfmCtEteStart,
|
|
cfmCtEteEnd,
|
|
cfmCtEteSE,
|
|
};
|
|
|
|
/**
|
|
* get min total seconds
|
|
* @param {number} e - The minimum total seconds.
|
|
*/
|
|
function minTotalSeconds(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);
|
|
}
|
|
/**
|
|
* get Time Range(duration)
|
|
* @param {Array} data - Activity list data from the API.
|
|
* @param {string} category - 'act', 'single', or 'double'.
|
|
* @param {string} task select Radio task or start
|
|
* @param {string} taskTwo end
|
|
* @returns {object} {min:12, max:345}
|
|
*/
|
|
function getDurationTime(data, category, task, taskTwo) {
|
|
let result = {min:0, max:0};
|
|
switch (category) {
|
|
case 'act':
|
|
data.forEach(i => {
|
|
if(i.label === task) {
|
|
result = i.duration;
|
|
}
|
|
});
|
|
break;
|
|
case 'single':
|
|
data.forEach(i => {
|
|
if(i.task === task) {
|
|
result = i.time;
|
|
}
|
|
});
|
|
break;
|
|
case 'double':
|
|
data.forEach(i => {
|
|
if(i.start === task && i.end === taskTwo) {
|
|
result = i.time;
|
|
}
|
|
});
|
|
break;
|
|
case 'all':
|
|
result = data;
|
|
break
|
|
default:
|
|
break;
|
|
};
|
|
return result;
|
|
}
|
|
/**
|
|
* All reset
|
|
*/
|
|
function reset() {
|
|
state.timeDuration = null; // Activity duration
|
|
state.timeCfmPtEteAll = state.timeCfmPtEteAllDefault; // Processing time
|
|
state.timeCfmPtEteStart = null;
|
|
state.timeCfmPtEteEnd = null;
|
|
state.timeCfmPtEteSE = null;
|
|
state.timeCfmPtPStart = null;
|
|
state.timeCfmPtPEnd = null;
|
|
state.timeCfmPtPSE = null;
|
|
state.timeCfmWtEteAll = state.timeCfmWtEteAllDefault; // Waiting time
|
|
state.timeCfmWtEteStart = null;
|
|
state.timeCfmWtEteEnd = null;
|
|
state.timeCfmWtEteSE = null;
|
|
state.timeCfmWtPStart = null;
|
|
state.timeCfmWtPEnd = null;
|
|
state.timeCfmWtPSE = null;
|
|
state.timeCfmCtEteAll = state.timeCfmCtEteAllDefault; // Cycle time
|
|
state.timeCfmCtEteStart = null;
|
|
state.timeCfmCtEteEnd = null;
|
|
state.timeCfmCtEteSE = null;
|
|
state.selectCfmPtEteSEStart = null;
|
|
state.selectCfmPtEteSEEnd = null;
|
|
state.selectCfmPtPSEStart = null;
|
|
state.selectCfmPtPSEEnd = null;
|
|
state.selectCfmWtEteSEStart = null;
|
|
state.selectCfmWtEteSEEnd = null;
|
|
state.selectCfmWtPSEStart = null;
|
|
state.selectCfmWtPSEEnd = null;
|
|
state.selectCfmCtEteSEStart = null;
|
|
state.selectCfmCtEteSEEnd = null;
|
|
}
|
|
|
|
// created() logic
|
|
emitter.on('actRadioData', (data) => {
|
|
const category = data.category;
|
|
const task = data.task;
|
|
|
|
const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
|
|
state[startKey] = task;
|
|
state[timeKey] = { min: 0, max: 0 };
|
|
if (state[endKey]) {
|
|
state[timeKey] = getDurationTime(storeRefs[durationType].value, 'double', task, state[endKey]);
|
|
}
|
|
};
|
|
|
|
const handleSingleSelection = (key, timeKey, durationType) => {
|
|
state[timeKey] = getDurationTime(storeRefs[durationType].value, 'single', task);
|
|
};
|
|
|
|
switch (category) {
|
|
// Activity duration
|
|
case 'cfmDur':
|
|
state.timeDuration = getDurationTime(conformanceAllTasks.value, 'act', task);
|
|
break;
|
|
// Processing time
|
|
case 'cfmPtEteStart':
|
|
handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
|
|
break;
|
|
case 'cfmPtEteEnd':
|
|
handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
|
|
break;
|
|
case 'cfmPtEteSEStart':
|
|
handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
|
break;
|
|
case 'cfmPtEteSEEnd':
|
|
handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
|
|
break;
|
|
case 'cfmPtPStart':
|
|
handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
|
|
break;
|
|
case 'cfmPtPEnd':
|
|
handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
|
|
break;
|
|
case 'cfmPtPSEStart':
|
|
handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
|
|
break;
|
|
case 'cfmPtPSEEnd':
|
|
handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
|
|
break;
|
|
// Waiting time
|
|
case 'cfmWtEteStart':
|
|
handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
|
|
break;
|
|
case 'cfmWtEteEnd':
|
|
handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
|
|
break;
|
|
case 'cfmWtEteSEStart':
|
|
handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
|
break;
|
|
case 'cfmWtEteSEEnd':
|
|
handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
|
|
break;
|
|
case 'cfmWtPStart':
|
|
handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
|
|
break;
|
|
case 'cfmWtPEnd':
|
|
handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
|
|
break;
|
|
case 'cfmWtPSEStart':
|
|
handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
|
|
break;
|
|
case 'cfmWtPSEEnd':
|
|
handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
|
|
break;
|
|
// Cycle time
|
|
case 'cfmCtEteStart':
|
|
handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
|
|
break;
|
|
case 'cfmCtEteEnd':
|
|
handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
|
|
break;
|
|
case 'cfmCtEteSEStart':
|
|
handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
|
break;
|
|
case 'cfmCtEteSEEnd':
|
|
handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
|
|
break;
|
|
default:
|
|
break;
|
|
};
|
|
});
|
|
emitter.on('reset', (data) => {
|
|
reset();
|
|
});
|
|
emitter.on('isRadioChange', (data) => {
|
|
if(data) {
|
|
reset();
|
|
switch (selectedRuleType.value) {
|
|
case 'Processing time':
|
|
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
|
|
state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
|
|
break;
|
|
case 'Waiting time':
|
|
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
|
|
state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
|
|
break;
|
|
case 'Cycle time':
|
|
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
|
|
state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
|
|
break;
|
|
default:
|
|
break;
|
|
};
|
|
}
|
|
});
|
|
emitter.on('isRadioProcessScopeChange', (data) => {
|
|
if(data) {
|
|
reset();
|
|
};
|
|
});
|
|
emitter.on('isRadioActSeqMoreChange', (data) => {
|
|
if(data) {
|
|
if(selectedActSeqMore.value === 'All') {
|
|
switch (selectedRuleType.value) {
|
|
case 'Processing time':
|
|
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
|
|
state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
|
|
break;
|
|
case 'Waiting time':
|
|
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
|
|
state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
|
|
break;
|
|
case 'Cycle time':
|
|
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
|
|
state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
|
|
break;
|
|
default:
|
|
break;
|
|
};
|
|
}else reset();
|
|
};
|
|
});
|
|
emitter.on('isRadioActSeqFromToChange', (data) => {
|
|
if(data) {
|
|
reset();
|
|
};
|
|
});
|
|
</script>
|