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

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>