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

Conformance: Activity sequence, Sequence, Directly follows done.

Browse Source
This commit is contained in:
chiayin
2023-08-02 14:38:08 +08:00
parent 86e1c52585
commit 34aa0f28c2
11 changed files with 309 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,8 @@
</div>
</div>
<!-- show bar -->
<ConformanceShowBar :class="isShowBar?'':'hidden'"></ConformanceShowBar>
<ConformanceShowBar :class="isShowBar?'':'hidden'" :selectConformanceTask="selectConformanceTask" :selectConformanceStartAndEnd="selectConformanceStartAndEnd" :selectConformanceStart="selectConformanceStart" :selectConformanceEnd="selectConformanceEnd" :selectConformanceFrom="selectConformanceFrom" :selectConformanceTo="selectConformanceTo"
:listSeq="listSeq"></ConformanceShowBar>
</div>
</section>
</template>
@@ -56,6 +57,12 @@ export default {
isShowBar: false,
visibleLeft: false,
selectConformanceTask: null,
selectConformanceStartAndEnd: null,
selectConformanceStart: null,
selectConformanceEnd: null,
selectConformanceFrom: null,
selectConformanceTo: null,
listSeq: [],
}
},
components: {
@@ -73,8 +80,12 @@ export default {
this.$emitter.emit('coverPlate', true);
// Have activity
this.selectConformanceTask = null;
this.$emitter.emit('reset', null);
// Activity sequence
this.selectConformanceStartAndEnd = null;
this.listSeq = null;
// 其他子元件 reset
this.$emitter.emit('reset', null);
// reset 成功訊息
this.$toast.success('Reset Success.');
},
@@ -83,12 +94,46 @@ export default {
*/
async submit() {
let data;
let isMode = '';
switch (this.selectedMode) {
case 'Directly follows':
isMode = 'directly-follows';
break;
case 'Eventually follows':
isMode = 'a';
break;
case 'Short loop(s)':
isMode = 'b';
break;
case 'Self loop(s)':
isMode = 'c';
break;
default:
break;
};
if(this.selectedRuleType === 'Have activity') {
if(this.selectedRuleType === 'Have activity') { // Activity Sequence 選 Have activity(s) 的行為
if(!this.selectConformanceTask?.length) return this.$toast.error('Not selected.');
else data = {
type: 'contains-tasks',
tasks: this.selectConformanceTask,
};
}else if(this.selectedRuleType === 'Activity sequence') { // Activity Sequence 選 Start & End 的行為
if(this.selectedActivitySequence === 'Start & End'){
if(this.selectConformanceStartAndEnd === null || this.selectConformanceStartAndEnd.length === 0) return this.$toast.error('Both Start and End must be selected.');
else data = {
type: 'start-end',
starts_with: this.selectConformanceStartAndEnd[0],
ends_with: this.selectConformanceStartAndEnd[1],
};
}else if(this.selectedActivitySequence === 'Sequence'){ // Activity Sequence 選 Sequence 的行為
if(this.listSeq.length < 2) return this.$toast.error('Select two or more.');
else {
data = {
type: isMode,
task_seq: this.listSeq,
}
}
}
}
@@ -107,6 +152,30 @@ export default {
this.$emitter.on('actListData', (data) => {
this.selectConformanceTask = data;
});
this.$emitter.on('actRadioData', (data) => {
switch (data.category) {
case 'Start':
this.selectConformanceStart = data.task;
break;
case 'End':
this.selectConformanceEnd = data.task;
break;
case 'From':
this.selectConformanceFrom = data.task;
break;
case 'To':
this.selectConformanceTo = data.task;
break;
default:
break;
};
if(this.selectConformanceStart !== null && this.selectConformanceEnd !== null){
this.selectConformanceStartAndEnd = [this.selectConformanceStart, this.selectConformanceEnd];
};
});
this.$emitter.on('getListSequence', (data) => {
this.listSeq = data;
})
},
}
</script>

9
src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
View File

@@ -14,12 +14,17 @@
</template>
<script>
export default {
props: ['data'],
props: ['data', 'select'],
data() {
return {
actList: null,
actList: this.select
}
},
watch: {
select(newval){
this.actList = newval;
},
},
methods: {
actListData() {
this.$emitter.emit('actListData', this.actList);

26
src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
View File

@@ -5,7 +5,7 @@
<p class="h2 pl-2 border-b mb-3">Sort</p>
<div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
<div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
<RadioButton v-model="selectedRadio" :inputId="index.toString()" :name="vModel" :value="act" />
<RadioButton v-model="selectedRadio" :inputId="index.toString()" :name="select" :value="act" @change="actRadioData" />
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div>
</div>
@@ -14,11 +14,29 @@
</template>
<script>
export default {
props: ['title', 'vModel', 'data',],
props: ['title', 'select', 'data', 'category'],
data() {
return {
selectedRadio: this.vModel,
selectedRadio: this.select,
}
}
},
watch: {
select(newval){
this.selectedRadio = newval;
},
},
methods: {
actRadioData() {
this.$emitter.emit('actRadioData', {
category: this.category,
task: this.selectedRadio,
});
}
},
created() {
this.$emitter.on('reset', (data) => {
this.selectedRadio = data;
});
},
}
</script>

26
src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
View File

@@ -18,13 +18,13 @@
<div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2 text-sm">
<p class="h2 border-b border-500 my-2">Sequence</p>
<!-- No Data -->
<div v-if="listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
<div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
<p class="text-neutral-500">Please drag and drop activity(s) here and sort.</p>
</div>
<!-- Have Data -->
<div class="py-4 m-auto w-full h-[calc(100%_-_56px)]">
<div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
<draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd">
<draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
<template #item="{ element, index }">
<div>
<div class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
@@ -44,20 +44,21 @@
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
export default {
props: ['data', 'listSeq'],
data() {
return {
actList: null,
listSequence: [],
lastItemIndex: null,
data:['第三次醫囑', '第四次醫囑','第一次醫囑', '第二次醫囑', 'ddd', 'bbb', 'ccc', 'aaa', 'accc', 'abbb', '1234', '1111', '1222', '1333', '3333', '4444', '0', '1000', '100', '10', '9', '80']
}
},
computed: {
datadata: function() {
// TODO Activity List 的 dblclick, drag & drop 要改假刪除
// Activity List 要排序
return sortNumEngZhtw(this.data);
}
if(this.data !== null) sortNumEngZhtw(this.data);
return this.data;
},
},
methods: {
/**
@@ -78,6 +79,12 @@ export default {
this.listSequence.splice(index, 1);
this.data.push(element);
},
/**
* get listSequence
*/
getComponentData(){
this.$emitter.emit('getListSequence', this.listSequence);
},
/**
* Element dragging started
*/
@@ -104,10 +111,13 @@ export default {
evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
// reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
this.lastItemIndex = null;
this.$emit('update:listSeq', this.listSequence);
},
}
},
created() {
this.$emitter.on('reset', (data) => {
this.listSequence = [];
});
},
}
</script>
<style scoped>

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

@@ -1,36 +1,39 @@
<template>
<div class="px-4 text-sm">
<!-- Have activity -->
<div class="space-y-2" v-if="selectedRuleType === 'Have activity' || selectedRuleType === 'Activity duration'">
<div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
<span class="material-symbols-outlined text-primary mr-2">
check_circle
</span>
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
</div>
</div>
<ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData"></ResultCheck>
<!-- Activity sequence -->
<div class="space-y-2" v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
<div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
<span class="material-symbols-outlined text-primary mr-2">
arrow_circle_down
</span>
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
</div>
</div>
<!-- Processing time, Waiting time, Cycle time -->
<ul v-if="(selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End') || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'">
<li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in timeResultData" :key="index + act">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
<span class="mr-2 block w-12">{{ act.scope }}</span>
<span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.activity }}</span>
</li>
</ul>
<ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="startEndData"></ResultDot>
<ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="listSequence"></ResultArrow>
<!-- Activity duration -->
<ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"></ResultCheck>
<!-- Processing time -->
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
<!-- Waiting time -->
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
<!-- Cycle time -->
<ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
<ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
</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() {
@@ -39,39 +42,81 @@ export default {
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
},
components: {
ResultCheck,
ResultArrow,
ResultDot,
},
data() {
return {
data: null,
timeResultData: [
{
id: 1,
scope: 'Start',
activity: '到院'
},
{
id: 2,
scope: 'End',
activity: '出院'
},
{
id: 3,
scope: 'From',
activity: '到院到院到院到院到院到院'
},
{
id: 4,
scope: 'Start',
activity: '出院出院出院出院出院出院'
},
],
containstTasksData: null,
startEndData: null,
start: null,
end: null,
from: null,
to: null,
listSequence: null,
}
},
methods: {
/**
* set Time Result Data
* @param {array} data
* @returns {array}
* timeResultData: [
* {
* id: 1,
* category: 'start', start|end|from|to
* task: '到院'
* },
* ]
*/
setTimeResultData(data) {
let result = data.map((item, index) => {
return {
id: index + 1,
category: item.category.replace(/^./, item.category[0].toUpperCase()),
task: item.task
}
});
return result;
},
},
created() {
this.$emitter.on('actListData', (data) => {
this.data = data;
this.containstTasksData = data;
});
this.$emitter.on('actRadioData', (data) => {
switch (data.category) {
case 'Start':
this.start = [data];
break;
case 'End':
this.end = [data];
break;
case 'From':
this.from = [data];
break;
case 'To':
this.to = [data];
break;
default:
break;
};
if(this.start !== null && this.end !== null){
this.startEndData = [...this.start, ...this.end];
};
});
this.$emitter.on('getListSequence', (data) => {
this.listSequence = data;
})
this.$emitter.on('reset', (data) => {
this.data = data;
this.containstTasksData = data;
this.startEndData = data;
this.start = data;
this.end = data;
this.from = data;
this.to = data;
});
},

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

@@ -1,48 +1,48 @@
<template>
<section class="animate-fadein w-full h-full">
<!-- Have activity -->
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask"></ActList>
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="selectConformanceTask"></ActList>
<!-- Activity sequence -->
<div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start activity'" :v-model="'actseqStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End activity'" :v-model="'actseqStartAndEndRadioEnd'" :data="data" />
<ActRadio :title="'Start activity'" :select="'actseqStartAndEndRadioStart'" :data="conformanceStart" :category="'Start'" />
<ActRadio :title="'End activity'" :select="'actseqStartAndEndRadioEnd'" :data="conformanceEnd" :category="'End'" />
</div>
<!-- actSeqDrag -->
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'"></ActSeqDrag>
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="listSeq"></ActSeqDrag>
<!-- Activity duration -->
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :v-model="'actInclude'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="'actInclude'" :data="data" />
<!-- Processing time -->
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'protimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :v-model="'protimeEndRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :v-model="'protimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :v-model="'protimeStartAndEndRadioEnd'" :data="data" />
<ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="data" />
</div>
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :v-model="'protimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :v-model="'protimeToRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="data" />
<div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
<ActRadio :title="'From'" :v-model="'protimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :v-model="'protimeFromAndToRadioTo'" :data="data" />
<ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="data" />
</div>
<!-- Waiting time -->
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'waittimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :v-model="'waittimeEndRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :v-model="'waittimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :v-model="'waittimeStartAndEndRadioEnd'" :data="data" />
<ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="data" />
</div>
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :v-model="'waittimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :v-model="'waittimeToRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="data" />
<div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
<ActRadio :title="'From'" :v-model="'waittimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :v-model="'waittimeFromAndToRadioTo'" :data="data" />
<ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="data" />
<ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="data" />
</div>
<!-- Cycle time -->
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'cyctimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :v-model="'cyctimeEndRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="data" />
<ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="data" />
<div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
<ActRadio :title="'Start'" :v-model="'cyctimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :v-model="'cyctimeStartAndEndRadioEnd'" :data="data" />
<ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="data" />
<ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="data" />
</div>
</section>
@@ -60,10 +60,11 @@ export default {
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask } = storeToRefs(conformanceStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd } = storeToRefs(conformanceStore);
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask }
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd }
},
props: ['selectConformanceTask', 'selectConformanceStartAndEnd', 'selectConformanceStart', 'selectConformanceEnd', 'selectConformanceFrom', 'selectConformanceTo', 'listSeq'],
components: {
ActList, ActRadio, ActSeqDrag
},

16
src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="space-y-2">
<div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
<span class="material-symbols-outlined text-primary mr-2">
arrow_circle_down
</span>
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'ResultArrow',
props:['data'],
}
</script>

16
src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="space-y-2">
<div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
<span class="material-symbols-outlined text-primary mr-2">
check_circle
</span>
<p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'ResultCheck',
props:['data'],
}
</script>

15
src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<ul>
<li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in timeResultData" :key="index + act">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
<span class="mr-2 block w-12">{{ act.category }}</span>
<span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>
</li>
</ul>
</template>
<script>
export default {
name: 'ResultDot',
props:['timeResultData'],
}
</script>

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

@@ -58,7 +58,6 @@
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
import { nextTick } from 'vue';
export default {
props: ['issusModal', 'issusNo', 'traceId', 'firstCases'],
@@ -213,15 +212,18 @@ export default {
/**
* create trace cytoscape's map
*/
createCy(){
createCy(){
this.$nextTick(() => {
let graphId = this.$refs.cfmTrace;
this.setNodesData();
this.setEdgesData();
cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
if(graphId !== null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
});
},
/**
* 無限滾動: 載入數據
*/
async fetchData() {
try {
this.loading = true;
@@ -234,8 +236,12 @@ export default {
this.loading = false;
}
},
/**
* 無限滾動: 監聽 scroll 有沒有滾到底部
* @param {element} event
*/
handleScroll(event) {
if(this.loading || this.maxItems) return;
if(this.loading || this.maxItems || this.infiniteData.length < 20) return;
const container = event.target;
const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;

12
src/stores/conformance.js
View File

@@ -5,7 +5,6 @@ import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
import moment from "moment";
import { Decimal } from 'decimal.js';
import { resolveTransitionHooks } from "vue";
const loading = loadingStore(pinia);
const $toast = useToast();
@@ -19,6 +18,8 @@ export default defineStore('conformanceStore', {
conformanceFilterId: null,
conformanceTempCheckerId: null,
allConformanceTask: [],
allConformanceStart: [],
allConformanceEnd: [],
allConformanceTempReportData: null,
allIssueTraces: null,
allTaskSeq: null,
@@ -29,12 +30,19 @@ export default defineStore('conformanceStore', {
selectedProcessScope: 'End to end', // radio
selectedActSeqMore: 'All', // radio
selectedActSeqFromTo: 'From', // radio
// selectConformanceTask: null, // select task
infinite404: null,
}),
getters: {
conformanceTask: state => {
return state.allConformanceTask.map(i => i.label);
},
conformanceStart: state => {
return state.allConformanceStart;
},
conformanceEnd: state => {
return state.allConformanceEnd;
},
conformanceTempReportData: state => {
return state.allConformanceTempReportData;
},
@@ -79,6 +87,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;
} catch(error) {
await delay();
loading.isLoading = true;