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

Conformance: layout done.(not time range)

Browse Source
This commit is contained in:
chiayin
2023-07-12 09:56:23 +08:00
parent 466c6ea867
commit 9db7b73d2c
17 changed files with 805 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,23 @@
<template>
<p class="h2 pl-2">Activity list</p>
<div class="h-[calc(100%_-_48px)]">
<p class="h2 pl-2 border-b mb-3">Activity</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">
<Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" />
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}{{ index }}</label>
</div>
<div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<p class="h2 pl-2">Activity list</p>
<div class="h-[calc(100%_-_48px)]">
<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">
<Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" />
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
actList: null,
data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院']
}
}
}

24
src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<p class="h2 pl-2">{{ title }}</p>
<div class="h-[calc(100%_-_48px)]">
<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" />
<label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['title', 'vModel', 'data',],
data() {
return {
selectedRadio: this.vModel,
}
}
}
</script>

120
src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="h-full w-full flex justify-between items-center">
<!-- Activity List -->
<div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<p class="h2 pl-2">Activity list</p>
<div class="h-[calc(100%_-_48px)]">
<p class="h2 pl-2 border-b mb-3">Sort</p>
<Draggable :list="datadata" group="activity" itemKey="name" animation="300" @end="onEnd" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
<template #item="{ element, index }">
<div class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
<span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
</div>
</template>
</Draggable>
</div>
</div>
<!-- sequence -->
<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">
<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">
<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)">
<span>{{ element }}</span>
</div>
<span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2"></span>
</div>
</template>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
export default {
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);
}
},
methods: {
/**
* double click Activity List
* @param {number} index data item index
* @param {object} element data item
*/
moveActItem(index, element){
this.data.splice(index, 1);
this.listSequence.push(element);
},
/**
* double click Sequence List
* @param {number} index data item index
* @param {object} element data item
*/
moveSeqItem(index, element){
this.listSequence.splice(index, 1);
this.data.push(element);
},
/**
* Element dragging started
*/
onStart(evt) {
const lastChild = evt.to.lastChild.lastChild;
lastChild.style.display = 'none';
// 隱藏拖曳元素原位置
const originalElement = evt.item;
originalElement.style.display = 'none';
// 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
const listIndex = this.listSequence.length - 1;
if(evt.oldIndex === listIndex) this.lastItemIndex = listIndex;
},
/**
* Element dragging ended
*/
onEnd(evt) {
// 顯示拖曳元素
const originalElement = evt.item;
originalElement.style.display = '';
// 拖曳結束要顯示箭頭，但最後一個不用
const lastChild = evt.item.lastChild;
const listIndex = this.listSequence.length - 1
evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
// reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
this.lastItemIndex = null;
this.$emit('update:listSeq', this.listSequence);
},
}
}
</script>
<style scoped>
.ghostSelected {
@apply bg-primary/20
}
.dragSelected {
@apply !opacity-100
}
</style>

35
src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
View File

@@ -4,7 +4,7 @@
<div>
<p class="h2">Rule Type</p>
<div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
<RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" />
<RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio($event)"/>
<label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
</div>
</div>
@@ -25,7 +25,7 @@
</div>
</div>
<!-- Process Scope -->
<div v-show="selectedRuleType === 'Processing time'">
<div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'">
<p class="h2">Process Scope</p>
<div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
<RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" />
@@ -33,13 +33,21 @@
</div>
</div>
<!-- Activity Sequence (4 item) -->
<div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'">
<p class="h2">Activity Sequence</p>
<div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
<RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" />
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
</div>
</div>
<!-- Activity Sequence (3 item) -->
<div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')">
<p class="h2">Activity Sequence</p>
<div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
<RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" />
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
</div>
</div>
</section>
</template>
<script>
@@ -49,9 +57,9 @@ import ConformanceStore from '@/stores/conformance.js';
export default {
setup() {
const conformanceStore = ConformanceStore();
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
},
data() {
return {
@@ -86,9 +94,24 @@ export default {
{id: 1, name: 'All'},
{id: 2, name: 'Start'},
{id: 3, name: 'End'},
{id: 4, name: 'Start & End '},
{id: 4, name: 'Start & End'},
],
// selectedActSeqFromTo: '',
actSeqFromTo: [
{id: 1, name: 'From'},
{id: 2, name: 'To'},
{id: 3, name: 'From & To'},
]
}
},
methods: {
changeRadio(event) {
this.selectedActivitySequence = 'Start & End';
this.selectedMode = 'Directly follows';
this.selectedProcessScope = 'End to end';
this.selectedActSeqMore = 'All';
this.selectedActSeqFromTo = 'From';
},
}
}
</script>

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

File diff suppressed because one or more lines are too long

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

@@ -1,11 +1,57 @@
<template>
<section class="animate-fadein w-full h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<section class="animate-fadein w-full h-full">
<!-- {{ selectedRuleType }}
{{ selectedActivitySequence }}
{{ selectedMode }}
{{ selectedProcessScope }}
{{ selectedActSeqMore }} -->
<ActList v-if="selectedRuleType === 'Have activity'"></ActList>
<!-- Have activity -->
<ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask"></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" />
</div>
<!-- v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" -->
<!-- actSeqDrag -->
<ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'"></ActSeqDrag>
<!-- Activity duration -->
<ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :v-model="'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" />
<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" />
</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" />
<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" />
</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" />
<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" />
</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" />
<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" />
</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" />
<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" />
</div>
</section>
</template>
@@ -14,18 +60,25 @@ import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import ActList from './ActList.vue';
import ActRadio from './ActRadio.vue';
import ActSeqDrag from './ActSeqDrag.vue';
export default {
setup() {
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask } = storeToRefs(conformanceStore);
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask }
},
components: {
ActList,
ActList, ActRadio, ActSeqDrag
},
data() {
return {
data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院']
}
}
}
</script>

49
src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="mt-2">
<p class="h2">Time Range</p>
<div>
<Durationjs></Durationjs>
</div>
</div>
</template>
<script>
import Durationjs from '@/components/durationjs.vue';
export default {
data() {
return {
selectTimeRange: [20, 80],
selectedStart: null,
selectedEnd: null,
timeStart: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
timeEnd: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
}
},
components: {
Durationjs,
},
created() {
this.selectedStart = this.timeStart[1];
this.selectedEnd = this.timeEnd[5];
},
}
</script>
<style>
.time-preview {
border: 1px solid #eee;
max-width: 400px;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
padding: 15px;
background: rgb(70, 25, 173);
color: #fff;
}
.time-preview-time {
font-size: 30px;
}
</style>