Conformance: Have activity Layout done.
This commit is contained in:
chiayin
273
src/components/Discover/Conformance/ConformanceResults.vue
Normal file
273
src/components/Discover/Conformance/ConformanceResults.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<section class="p-4 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto float-right">
|
||||
<!-- title -->
|
||||
<p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
|
||||
<!-- total group -->
|
||||
<ul class=" text-neutral-10 text-sm flex gap-2 py-2">
|
||||
<li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
|
||||
<span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conformance<span>3,890</span>
|
||||
</li>
|
||||
<li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
|
||||
<span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Non-Conformance<span>27,230</span>
|
||||
</li>
|
||||
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
|
||||
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- chart -->
|
||||
<div class="flex gap-4 w-full">
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
|
||||
<span class="text-2xl">10%</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl">13.5</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- effect -->
|
||||
<section>
|
||||
<p class="h2 text-base">Effect</p>
|
||||
<div class="flex gap-4 w-full">
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
|
||||
<p class="h2 pl-2 mb-2">Throughput Time</p>
|
||||
<p class="pl-2 space-x-2">
|
||||
<span class="text-cfm-primary text-2xl font-medium">48</span>
|
||||
<span>vs</span>
|
||||
<span class="text-cfm-secondary text-2xl font-medium">56</span>
|
||||
<span>days,</span>
|
||||
<span class="text-2xl font-medium">-8</span>
|
||||
<span>days of difference.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
|
||||
<p class="h2 pl-2 mb-2">Activities per Case</p>
|
||||
<p class="pl-2 space-x-2">
|
||||
<span class="text-cfm-primary text-2xl font-medium">7.0</span>
|
||||
<span>vs</span>
|
||||
<span class="text-cfm-secondary text-2xl font-medium">3.9</span>
|
||||
<span>activities,</span>
|
||||
<span class="text-2xl font-medium">3.1</span>
|
||||
<span>activities of difference.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Issues group -->
|
||||
<section>
|
||||
<p class="h2 text-base">Non-conformance Issues</p>
|
||||
<div class="flex gap-4 w-full">
|
||||
<!-- Issues chart -->
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Issues list -->
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
|
||||
<p class="h2 pl-2 mb-2">Issue List</p>
|
||||
<table class="text-sm min-w-full table-fixed">
|
||||
<tbody>
|
||||
<tr v-for="(trace, key) in traceList" :key="key">
|
||||
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
|
||||
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
|
||||
</td>
|
||||
<td class="p-2 min-w-[96px] w-2/5">
|
||||
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
|
||||
<div class="h-full bg-primary" :style="trace.value"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 text-right truncate">{{ trace.count }}</td>
|
||||
<td class="p-2 text-center">{{ trace.ratio }}%</td>
|
||||
<td class="p-2 text-center">
|
||||
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- title -->
|
||||
<p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
|
||||
<!-- total group -->
|
||||
<ul class=" text-neutral-10 text-sm flex gap-2 py-2">
|
||||
<li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
|
||||
<span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conformance<span>3,890</span>
|
||||
</li>
|
||||
<li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
|
||||
<span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Non-Conformance<span>27,230</span>
|
||||
</li>
|
||||
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
|
||||
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- chart -->
|
||||
<div class="flex gap-4 w-full">
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
|
||||
<span class="text-2xl">10%</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl">13.5</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- effect -->
|
||||
<section>
|
||||
<p class="h2 text-base">Effect</p>
|
||||
<div class="flex gap-4 w-full">
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
|
||||
<p class="h2 pl-2 mb-2">Throughput Time</p>
|
||||
<p class="pl-2 space-x-2">
|
||||
<span class="text-cfm-primary text-2xl font-medium">48</span>
|
||||
<span>vs</span>
|
||||
<span class="text-cfm-secondary text-2xl font-medium">56</span>
|
||||
<span>days,</span>
|
||||
<span class="text-2xl font-medium">-8</span>
|
||||
<span>days of difference.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
|
||||
<p class="h2 pl-2 mb-2">Activities per Case</p>
|
||||
<p class="pl-2 space-x-2">
|
||||
<span class="text-cfm-primary text-2xl font-medium">7.0</span>
|
||||
<span>vs</span>
|
||||
<span class="text-cfm-secondary text-2xl font-medium">3.9</span>
|
||||
<span>activities,</span>
|
||||
<span class="text-2xl font-medium">3.1</span>
|
||||
<span>activities of difference.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Issues group -->
|
||||
<section>
|
||||
<p class="h2 text-base">Non-conformance Issues</p>
|
||||
<div class="flex gap-4 w-full">
|
||||
<!-- Issues chart -->
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
|
||||
<p class="h2 pl-2 flex justify-between items-center">
|
||||
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Issues list -->
|
||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
|
||||
<p class="h2 pl-2 mb-2">Issue List</p>
|
||||
<table class="text-sm min-w-full table-fixed">
|
||||
<tbody>
|
||||
<tr v-for="(trace, key) in traceList" :key="key">
|
||||
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
|
||||
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
|
||||
</td>
|
||||
<td class="p-2 min-w-[96px] w-2/5">
|
||||
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
|
||||
<div class="h-full bg-primary" :style="trace.value"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 text-right truncate">{{ trace.count }}</td>
|
||||
<td class="p-2 text-center">{{ trace.ratio }}%</td>
|
||||
<td class="p-2 text-center">
|
||||
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="switchCaseData(trace.id)">More</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import iconNA from '@/components/icons/IconNA.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
traceList: [
|
||||
{
|
||||
id: 1,
|
||||
issue: 'Skip',
|
||||
value: this.progressWidth(80),
|
||||
count: '1,234,567,890',
|
||||
ratio: 80,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
issue: 'Order Switch',
|
||||
value: this.progressWidth(30),
|
||||
count: '567,890',
|
||||
ratio: 30,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
issue: 'Activity不包含到院、出院、出院、出院',
|
||||
value: this.progressWidth(70),
|
||||
count: '4,567,890',
|
||||
ratio: 70,
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
results: {
|
||||
value: 'This page will perform a conformance check based on the filtering results of the map.',
|
||||
},
|
||||
rate: {
|
||||
value: '=(total Non-Conformance/total Conformance)*100%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
iconNA,
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* set progress bar width
|
||||
* @param {number} value
|
||||
* @returns {string} 樣式的寬度設定
|
||||
*/
|
||||
progressWidth(value){
|
||||
return `width:${value}%;`
|
||||
},
|
||||
/**
|
||||
* switch case data
|
||||
* @param {number} id
|
||||
*/
|
||||
switchCaseData(id) {
|
||||
console.log(id);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.disc) {
|
||||
font-variation-settings:
|
||||
'FILL' 1,
|
||||
'wght' 100,
|
||||
'GRAD' 0,
|
||||
'opsz' 20
|
||||
}
|
||||
|
||||
</style>
|
||||
53
src/components/Discover/Conformance/ConformanceSidebar.vue
Normal file
53
src/components/Discover/Conformance/ConformanceSidebar.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 " :class="isShowBar?'w-full':'w-[300px]'">
|
||||
<!-- header -->
|
||||
<div class="bg-neutral-200 px-4">
|
||||
<p class="h2">Rule Settings</p>
|
||||
</div>
|
||||
|
||||
<!-- contanier -->
|
||||
<div class="p-4 h-[calc(100%_-_40px)] flex">
|
||||
<div class="h-full flex flex-col justify-between w-[268px]">
|
||||
<!-- select -->
|
||||
<div class="h-full overflow-y-auto scrollbar">
|
||||
<!-- show and hidden button -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="h2">Activity Select</p>
|
||||
<span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded " @click="isShowBar = !isShowBar">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
|
||||
</div>
|
||||
<!-- radio group -->
|
||||
<ConformanceRadioGroup></ConformanceRadioGroup>
|
||||
<!-- select result -->
|
||||
<ConformanceSelectResult></ConformanceSelectResult>
|
||||
</div>
|
||||
<!-- button -->
|
||||
<div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="reset">Clear</button>
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="submit">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- show bar -->
|
||||
<ConformanceShowBar :class="isShowBar?'':'hidden'"></ConformanceShowBar>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
|
||||
import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
|
||||
import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowBar: false,
|
||||
visibleLeft: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ConformanceRadioGroup,
|
||||
ConformanceShowBar,
|
||||
ConformanceSelectResult,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +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" 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>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
actList: null,
|
||||
data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="space-y-2 text-sm">
|
||||
<!-- Rule Type -->
|
||||
<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" />
|
||||
<label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Sequence (2 item) -->
|
||||
<div v-show="selectedRuleType === 'Activity sequence'">
|
||||
<p class="h2">Activity Sequence</p>
|
||||
<div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" />
|
||||
<label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mode -->
|
||||
<div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
|
||||
<p class="h2">Mode</p>
|
||||
<div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
|
||||
<RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
|
||||
<label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Process Scope -->
|
||||
<div v-show="selectedRuleType === 'Processing 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" />
|
||||
<label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity Sequence (4 item) -->
|
||||
<div v-show="selectedRuleType === 'Processing time' || 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>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import ConformanceStore from '@/stores/conformance.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const conformanceStore = ConformanceStore();
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
|
||||
|
||||
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// selectedRuleType: '',
|
||||
ruleType: [
|
||||
{id: 1, name: 'Have activity'},
|
||||
{id: 2, name: 'Activity sequence'},
|
||||
{id: 3, name: 'Activity duration'},
|
||||
{id: 4, name: 'Processing time'},
|
||||
{id: 5, name: 'Waiting time'},
|
||||
{id: 6, name: 'Cycle time'},
|
||||
],
|
||||
// selectedActivitySequence: '',
|
||||
activitySequence: [
|
||||
{id: 1, name: 'Start & End'},
|
||||
{id: 2, name: 'Sequence'},
|
||||
],
|
||||
// selectedMode: '',
|
||||
mode: [
|
||||
{id: 1, name: 'Directly follows'},
|
||||
{id: 2, name: 'Eventually follows'},
|
||||
{id: 3, name: 'Short loop(s)'},
|
||||
{id: 4, name: 'Self loop(s)'},
|
||||
],
|
||||
// selectedProcessScope: '',
|
||||
processScope: [
|
||||
{id: 1, name: 'End to end'},
|
||||
{id: 2, name: 'Partial'},
|
||||
],
|
||||
// selectedActSeqMore: '',
|
||||
actSeqMore: [
|
||||
{id: 1, name: 'All'},
|
||||
{id: 2, name: 'Start'},
|
||||
{id: 3, name: 'End'},
|
||||
{id: 4, name: 'Start & End '},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
<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">
|
||||
<!-- {{ selectedRuleType }}
|
||||
{{ selectedActivitySequence }}
|
||||
{{ selectedMode }}
|
||||
{{ selectedProcessScope }}
|
||||
{{ selectedActSeqMore }} -->
|
||||
<ActList v-if="selectedRuleType === 'Have activity'"></ActList>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import LoadingStore from '@/stores/loading.js';
|
||||
import ConformanceStore from '@/stores/conformance.js';
|
||||
import ActList from './ActList.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loadingStore = LoadingStore();
|
||||
const conformanceStore = ConformanceStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
|
||||
|
||||
return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
|
||||
},
|
||||
components: {
|
||||
ActList,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="w-full">
|
||||
<section class="w-full top-0">
|
||||
<!-- <section class="w-full top-0"> -->
|
||||
<!-- status content -->
|
||||
<!-- whitespace-nowrap min-w-[228px] min-w-[164px] min-w-[256px] -->
|
||||
<ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" v-show="isPanel">
|
||||
<ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700 " >
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<p class="font-bold text-sm leading-8">Cases</p>
|
||||
@@ -76,10 +76,12 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- absolute -->
|
||||
<!-- :class="isPanel?'':'hidden'" -->
|
||||
<!-- control button -->
|
||||
<div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
|
||||
<!-- <div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
|
||||
<span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<p class="h2 text-base">Conformance Checking Results <span class="material-symbols-outlined text-base align-middle">info</span></p>
|
||||
<ul class=" text-neutral-10">
|
||||
<li class=" bg-primary rounded-full">
|
||||
<span class="material-symbols-outlined">check_circle</span>Conformance<span>3,890</span>
|
||||
</li>
|
||||
<li class=" bg-secondary rounded-full">
|
||||
<span class="material-symbols-outlined">cancel</span>Non-Conformance<span>27,230</span>
|
||||
</li>
|
||||
<li class=" bg-neutral-700 rounded-full">
|
||||
<span class="material-symbols-outlined">flaky</span>Not Applicable<span>7,780</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user