imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conformance: add ConformanceTimeRange.vue

Browse Source
This commit is contained in:
chiayin
2023-09-05 14:06:46 +08:00
parent 5219636eb8
commit e3b8153a8e
5 changed files with 396 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
View File

@@ -200,7 +200,8 @@ export default {
this.$emitter.on('actListData', (data) => {
this.containstTasksData = data;
});
this.$emitter.on('actRadioData', (data) => {
this.$emitter.on('actRadioData', (newData) => {
let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
switch (data.category) {
// Activity sequence
case 'cfmSeqStart':

2
src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
View File

@@ -10,7 +10,7 @@
<!-- actSeqDrag -->
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && (selectedMode === 'Directly follows' || selectedMode === 'Eventually follows')" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
<!-- Activity duration -->
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" />
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'"/>
<!-- Processing time -->
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task" :data="cfmPtEteStartData" :category="'cfmPtEteStart'" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData" :category="'cfmPtEteEnd'" />

293
src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
View File

@@ -2,74 +2,90 @@
<div class="mt-2">
<p class="h2">Time Range</p>
<div class=" text-sm leading-normal">
<div class="flex justify-between items-center">
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
<span>~</span>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
</div>
<!-- Activity duration -->
<TimeRangeDuration
v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<!-- Processing time -->
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<!-- Waiting time -->
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<!-- Cycle time -->
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
<TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
</div>
</div>
</template>
<script>
import Durationjs from '@/components/durationjs.vue';
import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
export default {
props: ['time'],
setup() {
const conformanceStore = ConformanceStore();
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole } = storeToRefs(conformanceStore);
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole, cfmWtEteWhole, cfmCtEteWhole }
},
props: ['isSubmitDurationTime'],
data() {
return {
timeData: {
min: 0,
max: 0,
},
timeRangeMin: 0,
timeRangeMax: 0,
minVuemin: 0,
minVuemax: 0,
maxVuemin: 0,
maxVuemax: 0,
updateMax: null,
timeDuration: null, // Activity duration
timeCfmPtEteAll: null, // Processing time
timeCfmPtEteStart: null,
timeCfmPtEteEnd: null,
timeCfmPtEteSE: null,
timeCfmPtPStart: null,
timeCfmPtPEnd: null,
timeCfmPtPSE: null,
timeCfmWtEteAll: null, // Waiting time
timeCfmWtEteStart: null,
timeCfmWtEteEnd: null,
timeCfmWtEteSE: null,
timeCfmWtPStart: null,
timeCfmWtPEnd: null,
timeCfmWtPSE: null,
timeCfmCtEteAll: null, // Cycle time
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,
timeCfmPtEteSE:null
}
},
components: {
Durationjs,
},
watch: {
time: {
handler: function(newValue, oldValue) {
if(newValue == null) {
this.timeData = {
min: 0,
max: 0
};
}else if(newValue != null) {
this.timeData = {
min: newValue.min,
max: newValue.max
};
this.setTimeValue();
}
},
deep: true,
immediate: true,
},
TimeRangeDuration,
},
methods: {
/**
* set props values
*/
setTimeValue() {
// 深拷貝原始 timeData 的內容
this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
},
/**
* get min total seconds
* @param {Number} e
*/
minTotalSeconds(e) {
this.timeRangeMin = e;
this.$emit('min-total-seconds', e);
},
/**
@@ -77,10 +93,183 @@ export default {
* @param {Number} e
*/
maxTotalSeconds(e) {
this.timeRangeMax = e;
this.updateMax = e;
this.$emit('max-total-seconds', e);
},
/**
* get Time Range(duration)
* @param {array} data API data
* @param {string} category act | single | double
* @param {string} task select Radio task or start
* @param {string} taskTwo end
* @returns {object} {min:12, max:345}
*/
getDurationTime(data, category, task, taskTwo) {
let result = {min:0, max:0};
switch (category) {
case 'act':
data.forEach(i => {
if(i.label === task) result = i.duration;
});
break;
case 'single':
data.forEach(i => {
if(i.task === task) result = i.time;
});
break;
case 'double':
data.forEach(i => {
if(i.start === task && i.end === taskTwo) result = i.time;
});
break;
case 'all':
result = data;
break
default:
break;
};
return result;
},
/**
* All reset
*/
reset() {
this.timeDuration = null; // Activity duration
},
},
created() {
this.$emitter.on('actRadioData', (data) => {
switch (data.category) {
// Activity duration
case 'cfmDur':
this.timeDuration = this.getDurationTime(this.conformanceAllTasks, 'act', data.task);
break;
// Processing time
case 'cfmPtEteStart':
this.timeCfmPtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
break;
case 'cfmPtEteEnd':
this.timeCfmPtEteEnd = this.getDurationTime(this.cfmPtEteEnd, 'single', data.task);
break;
case 'cfmPtEteSEStart':
this.selectCfmPtEteSEStart = data.task;
if(this.selectCfmPtEteSEEnd) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', data.task, this.selectCfmPtEteSEEnd);
break;
case 'cfmPtEteSEEnd':
this.selectCfmPtEteSEEnd = data.task;
if(this.selectCfmPtEteSEStart) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', this.selectCfmPtEteSEStart, data.task);
break;
case 'cfmPtPStart':
this.timeCfmPtPStart = this.getDurationTime(this.cfmPtPStart, 'single', data.task);
break;
case 'cfmPtPEnd':
this.timeCfmPtPEnd = this.getDurationTime(this.cfmPtPEnd, 'single', data.task);
break;
case 'cfmPtPSEStart':
this.selectCfmPtPSEStart = data.task;
if(this.selectCfmPtPSEEnd) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
break;
case 'cfmPtPSEEnd':
this.selectCfmPtPSEEnd = data.task;
if(this.selectCfmPtPSEStart) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
break;
// Waiting time
case 'cfmWtEteStart':
this.timeCfmWtEteStart = this.getDurationTime(this.cfmWtEteStart, 'single', data.task);
break;
case 'cfmWtEteEnd':
this.timeCfmWtEteEnd = this.getDurationTime(this.cfmWtEteEnd, 'single', data.task);
break;
case 'cfmWtEteSEStart':
this.selectCfmWtEteSEStart = data.task;
if(this.selectCfmWtEteSEEnd) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', data.task, this.selectCfmWtEteSEEnd);
break;
case 'cfmWtEteSEEnd':
this.selectCfmWtEteSEEnd = data.task;
if(this.selectCfmWtEteSEStart) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', this.selectCfmWtEteSEStart, data.task);
break;
case 'cfmWtPStart':
this.timeCfmWtPStart = this.getDurationTime(this.cfmWtPStart, 'single', data.task);
break;
case 'cfmWtPEnd':
this.timeCfmWtPEnd = this.getDurationTime(this.cfmWtPEnd, 'single', data.task);
break;
case 'cfmWtPSEStart':
this.selectCfmWtPSEStart = data.task;
if(this.selectCfmWtPSEEnd) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', data.task, this.selectCfmWtPSEEnd);
break;
case 'cfmWtPSEEnd':
this.selectCfmWtPSEEnd = data.task;
if(this.selectCfmWtPSEStart) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', this.selectCfmWtPSEStart, data.task);
break;
// Cycle time
case 'cfmCtEteStart':
this.timeCfmCtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
break;
case 'cfmCtEteEnd':
this.timeCfmCtEteEnd = this.getDurationTime(this.cfmCtEteEnd, 'single', data.task);
break;
case 'cfmCtEteSEStart':
this.selectCfmCtEteSEStart = data.task;
if(this.selectCfmCtEteSEEnd) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', data.task, this.selectCfmCtEteSEEnd);
break;
case 'cfmCtEteSEEnd':
this.selectCfmCtEteSEEnd = data.task;
if(this.selectCfmCtEteSEStart) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', this.selectCfmCtEteSEStart, data.task);
break;
default:
break;
};
});
this.$emitter.on('reset', (data) => {
this.reset();
});
this.$emitter.on('isRadioChange', (data) => {
if(data) {
this.reset();
switch (this.selectedRuleType) {
case 'Processing time':
this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
break;
case 'Waiting time':
this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
break;
case 'Cycle time':
this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
break;
default:
break;
};
}
});
this.$emitter.on('isRadioProcessScopeChange', (data) => {
if(data) {
this.reset();
};
});
this.$emitter.on('isRadioActSeqMoreChange', (data) => {
if(data) {
if(this.selectedActSeqMore === 'All') {
switch (this.selectedRuleType) {
case 'Processing time':
this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
break;
case 'Waiting time':
this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
break;
case 'Cycle time':
this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
break;
default:
break;
};
}else this.reset();
};
});
this.$emitter.on('isRadioActSeqFromToChange', (data) => {
if(data) {
this.reset();
};
});
},
}
</script>

87
src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div class="flex justify-between items-center">
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
<span>~</span>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
</div>
</template>
<script>
import Durationjs from '@/components/durationjs.vue';
export default {
props: ['time', 'select'],
data() {
return {
timeData: {
min: 0,
max: 0,
},
timeRangeMin: 0,
timeRangeMax: 0,
minVuemin: 0,
minVuemax: 0,
maxVuemin: 0,
maxVuemax: 0,
updateMax: null,
}
},
components: {
Durationjs,
},
watch: {
time: {
handler: function(newValue, oldValue) {
if(newValue == null) {
this.timeData = {
min: 0,
max: 0
};
}else if(newValue != null) {
this.timeData = {
min: newValue.min,
max: newValue.max
};
}
this.setTimeValue();
},
deep: true,
immediate: true,
},
},
methods: {
/**
* set props values
*/
setTimeValue() {
// 深拷貝原始 timeData 的內容
this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
},
/**
* get min total seconds
* @param {Number} e
*/
minTotalSeconds(e) {
this.timeRangeMin = e;
this.$emit('min-total-seconds', e);
},
/**
* get min total seconds
* @param {Number} e
*/
maxTotalSeconds(e) {
this.timeRangeMax = e;
this.updateMax = e;
this.$emit('max-total-seconds', e);
},
},
created() {
if(this.select){
this.timeData = this.select;
this.setTimeValue();
}
}
}
</script>