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

Conformance: Activity sequence Start & End linkage done.

Browse Source
This commit is contained in:
chiayin
2023-08-30 14:19:20 +08:00
parent 1e49e11a1b
commit 187ce7afcc
6 changed files with 103 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -69,8 +69,8 @@ export default {
visibleLeft: false,
selectConformanceTask: null,
selectConformanceStartAndEnd: null,
selectConformanceStart: null,
selectConformanceEnd: null,
selectCfmSeqStart: null,
selectCfmSeqEnd: null,
selectConformanceFrom: null,
selectConformanceTo: null,
listSeq: [],
@@ -165,8 +165,8 @@ export default {
// 不包含 this.selectDurationTime
this.selectConformanceTask = null; // Have activity
this.selectConformanceStartAndEnd = null; // Activity Sequence
this.selectConformanceStart = null;
this.selectConformanceEnd = null;
this.selectCfmSeqStart = null;
this.selectCfmSeqEnd = null;
this.selectConformanceFrom = null;
this.selectConformanceTo = null;
this.listSeq = [];
@@ -247,8 +247,10 @@ export default {
default:
break;
};
this.selectDurationTime.min = this.selectTimeRangeMin;
this.selectDurationTime.max = this.selectTimeRangeMax;
this.selectDurationTime = {
min: this.selectTimeRangeMin,
max: this.selectTimeRangeMax
};
switch (this.selectedRuleType) {
case 'Have activity': // Rule Type 選 Have activity 的行為
@@ -533,17 +535,12 @@ export default {
});
this.$emitter.on('actRadioData', (data) => {
switch (data.category) {
case 'Start':
this.selectConformanceStart = data.task;
// Activity sequence
case 'cfmSeqStart':
this.selectCfmSeqStart = data.task;
break;
case 'End':
this.selectConformanceEnd = data.task;
break;
case 'From':
this.selectConformanceFrom = data.task;
break;
case 'To':
this.selectConformanceTo = data.task;
case 'cfmSeqEnd':
this.selectCfmSeqEnd = data.task;
break;
// Processing time
case 'cfmPtEteStart':
@@ -636,9 +633,6 @@ export default {
};
break;
};
if(this.selectConformanceStart !== null && this.selectConformanceEnd !== null){
this.selectConformanceStartAndEnd = [this.selectConformanceStart, this.selectConformanceEnd];
};
});
this.$emitter.on('getListSequence', (data) => {
this.listSeq = data;

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

@@ -1,9 +1,9 @@
<template>
<div class="px-4 text-sm">
<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="startEndData" :select="isSubmitStartAndEnd"></ResultDot>
<ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="listSequence" :select="isSubmitListSeq"></ResultArrow>
<!-- Activity duration -->
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
@@ -25,7 +25,6 @@
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart"></ResultDot>
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd"></ResultDot>
<ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE"></ResultDot>
</div>
</template>
<script>
@@ -52,10 +51,8 @@ export default {
return {
containstTasksData: null,
startEndData: null,
start: null,
end: null,
from: null,
to: null,
selectCfmSeqStart: null,
selectCfmSeqEnd: null,
listSequence: null,
durationData: null,
selectCfmPtEteStart: null, // Processing time
@@ -82,6 +79,17 @@ export default {
}
},
computed: {
selectCfmSeqSE: function() {
let data = [];
console.log(this.selectCfmSeqStart);
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);
@@ -162,10 +170,8 @@ export default {
reset() {
this.containstTasksData = null;
this.startEndData = null;
this.start = null;
this.end = null;
this.from = null;
this.to = null;
this.selectCfmSeqStart = null;
this.selectCfmSeqEnd = null;
this.listSequence = null;
this.durationData = null;
this.selectCfmPtEteStart = null;
@@ -197,17 +203,14 @@ export default {
});
this.$emitter.on('actRadioData', (data) => {
switch (data.category) {
case 'Start':
this.start = [data];
// Activity sequence
case 'cfmSeqStart':
data.category = 'Start';
this.selectCfmSeqStart = data;
break;
case 'End':
this.end = [data];
break;
case 'From':
this.from = [data];
break;
case 'To':
this.to = [data];
case 'cfmSeqEnd':
data.category = 'End';
this.selectCfmSeqEnd = data;
break;
// Processing time
case 'cfmPtEteStart':
@@ -297,9 +300,6 @@ export default {
else if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
break;
};
if(this.start !== null && this.end !== null){
this.startEndData = [...this.start, ...this.end];
};
});
this.$emitter.on('getListSequence', (data) => {
this.listSequence = data;

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

@@ -4,8 +4,8 @@
<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="conformanceStart" :category="'Start'" class="w-1/2" />
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" class="w-1/2" />
<ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData" :category="'cfmSeqStart'" @selected-task="selectStart" class="w-1/2" />
<ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData" :category="'cfmSeqEnd'" @selected-task="selectEnd" class="w-1/2" />
</div>
<!-- actSeqDrag -->
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
@@ -59,9 +59,9 @@ export default {
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE } = storeToRefs(conformanceStore);
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 } = storeToRefs(conformanceStore);
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
},
props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitListSeq', 'isSubmitDurationData'],
components: {
@@ -77,6 +77,13 @@ export default {
}
},
computed: {
// Activity sequence
cfmSeqStartData: function() {
return this.isEndSelected ? this.setSeqStartAndEndData(this.cfmSeqEnd, 'sources', this.task) : this.cfmSeqStart.map(i => i.label);
},
cfmSeqEndData: function() {
return this.isStartSelected ? this.setSeqStartAndEndData(this.cfmSeqStart, 'sinks', this.task) : this.cfmSeqEnd.map(i => i.label);
},
// Processing time
cfmPtEteStartData: function() {
return this.cfmPtEteStart.map(i => i.task);
@@ -144,7 +151,7 @@ export default {
methods: {
/**
* 設定 start and end 的 Radio Data
* @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
* @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
* @param {string} category start | end
* @returns {array}
*/
@@ -167,6 +174,22 @@ export default {
newData = [...new Set(newData)];
return newData;
},
/**
* 重新設定 Activity sequence 連動的 start and end 的 Radio Data
* @param {object} data cfmSeqStart | cfmSeqEnd
* @param {string} category sources | sinks
* @param {string} task task
* @returns {array}
*/
setSeqStartAndEndData(data, category, task = 'a') {
let newData = data.filter(i => i.label === task).map(i => i[category]);
newData = [...new Set(...newData)];
return newData;
},
/**
* select start list's task
* @param {event} e
*/
selectStart(e) {
if(this.isStartSelected === null || this.isStartSelected === true){
this.isStartSelected = true;
@@ -174,6 +197,10 @@ export default {
this.task = e;
};
},
/**
* select End list's task
* @param {event} e
*/
selectEnd(e) {
if(this.isEndSelected === null || this.isEndSelected === true){
this.isEndSelected = true;

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

@@ -71,6 +71,7 @@ export default {
minTotalSeconds(e) {
this.timeRangeMin = e;
this.$emit('min-total-seconds', e);
// console.log('min',e);
},
/**
* get min total seconds
@@ -80,6 +81,7 @@ export default {
this.timeRangeMax = e;
this.updateMax = e;
this.$emit('max-total-seconds', e);
// console.log('max',e);
},
},
}

12
src/components/Discover/Conformance/MoreModal.vue
View File

@@ -43,7 +43,6 @@
<div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
</div>
</div>
{{ caseData }}
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
<DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
<div v-for="(col, index) in columnData" :key="index">
@@ -100,12 +99,12 @@ export default {
caseData: function() {
if(this.infiniteData !== null){
const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
console.log(data);
data.forEach(item => {
// item.facets.forEach((facet, index) => {
// console.log(facet.value);
// item[`fac_${index}`] = facet.value.join(', '); // 建立新的 key-value pair
// });
// delete item.facets; // 刪除原本的 attributes 屬性
item.facets.forEach((facet, index) => {
item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
});
delete item.facets; // 刪除原本的 attributes 屬性
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
@@ -121,6 +120,7 @@ export default {
{ field: 'id', header: 'Case Id' },
{ field: 'started_at', header: 'Start Date' },
{ field: 'completed_at', header: 'End Date' },
...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: fac.name })),
...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
];
return result

56
src/stores/conformance.js
View File

@@ -18,8 +18,8 @@ export default defineStore('conformanceStore', {
conformanceFilterId: null,
conformanceTempCheckerId: null,
allConformanceTask: [],
allConformanceStart: [],
allConformanceEnd: [],
allCfmSeqStart: [],
allCfmSeqEnd: [],
allProcessingTime: {},
allWaitingTime: {},
allCycleTime: {},
@@ -45,11 +45,11 @@ export default defineStore('conformanceStore', {
conformanceTask: state => {
return state.allConformanceTask.map(i => i.label);
},
conformanceStart: state => {
return state.allConformanceStart;
cfmSeqStart: state => {
return state.allCfmSeqStart;
},
conformanceEnd: state => {
return state.allConformanceEnd;
cfmSeqEnd: state => {
return state.allCfmSeqEnd;
},
cfmPtEteWhole: state => {
return state.allProcessingTime.end_to_end.whole;
@@ -116,9 +116,20 @@ export default defineStore('conformanceStore', {
},
cases: state => {
if(state.allCases !== null){
state.allCases.map(c => {
const newData = state.allCases.map(c => {
c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
c.facets.map(fac => {
switch(fac.type) {
case 'float-list':
fac.value = fac.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
fac.value = fac.value.join(', ');
break;
default:
break;
};
return fac;
});
c.attributes.map(att => {
switch (att.type) {
case 'date':
@@ -131,11 +142,12 @@ export default defineStore('conformanceStore', {
break;
}
return att;
})
return c;
});
const { facets, attributes, ...rest } = c;
return { ...rest, facets, attributes };
});
return newData
};
return state.allCases;
},
loopTraces: state => {
return state.allLoopTraces;
@@ -145,25 +157,9 @@ export default defineStore('conformanceStore', {
},
loopCases: state => {
if(state.allLoopCases !== null){
state.allLoopCases.map(c => {
const newData = state.allLoopCases.map(c => {
c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
// if(c.facets) {
// c.facets = '111';
// c.facets.map(att => {
// switch(att.type) {
// case 'float-list':
// console.log(att.value);
// att.value ='111'
// // att.value = att.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
// // att.value = att.value.join(', ');
// break;
// default:
// break;
// };
// return att;
// });
// };
c.attributes.map(att => {
switch (att.type) {
case 'date':
@@ -179,8 +175,8 @@ export default defineStore('conformanceStore', {
});
return c;
});
return newData;
};
return state.allLoopCases;
},
},
actions: {
@@ -194,8 +190,8 @@ export default defineStore('conformanceStore', {
try {
const response = await this.$axios.get(api);
this.allConformanceTask = response.data.tasks;
this.allConformanceStart = response.data.sources;
this.allConformanceEnd = response.data.sinks;
this.allCfmSeqStart = response.data.sources;
this.allCfmSeqEnd = response.data.sinks;
this.allProcessingTime = response.data.processing_time;
this.allWaitingTime = response.data.waiting_time;
this.allCycleTime = response.data.cycle_time;