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>
|
||||
Reference in New Issue
Block a user