274 lines
11 KiB
Vue
274 lines
11 KiB
Vue
<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>
|