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

Conformance: StatusBar done.

Browse Source
This commit is contained in:
chiayin
2023-06-20 11:51:41 +08:00
parent a6fa85938b
commit 147c9b16cf
4 changed files with 115 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/Discover/Conformance/StatusBar.vue
View File

@@ -1,25 +1,99 @@
<template> <template>
<h1>Status bar</h1> <section class="w-full">
<section class=" bg-primary text-center">
<!-- status content --> <!-- status content -->
<div></div> <!-- 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">
<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>
<!-- <span class="material-symbols-outlined text-base">info</span> -->
</div>
<div class="flex justify-between items-center">
<div class="mr-2 w-full">
<span class="block text-sm mb-2">1.9K / 98.3K</span>
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
</div>
<span class="block text-2xl font-medium">100%</span>
</div>
</li>
<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">Traces</p>
<!-- <span class="material-symbols-outlined text-base">info</span> -->
</div>
<div class="flex justify-between items-center">
<div class="mr-2 w-full">
<span class="block text-sm mb-2">1.9K / 98.3K</span>
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
</div>
<span class="block text-2xl font-medium">100%</span>
</div>
</li>
<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">Activity Instances</p>
<!-- <span class="material-symbols-outlined text-base">info</span> -->
</div>
<div class="flex justify-between items-center">
<div class="mr-2 w-full">
<span class="block text-sm mb-2">1.9K / 98.3K</span>
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
</div>
<span class="block text-2xl font-medium">100%</span>
</div>
</li>
<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">Activities</p>
<!-- <span class="material-symbols-outlined text-base">info</span> -->
</div>
<div class="flex justify-between items-center">
<div class="mr-2 w-full">
<span class="block text-sm mb-2">1.9K / 98.3K</span>
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
</div>
<span class="block text-2xl font-medium">100%</span>
</div>
</li>
<li class="bg-neutral-10 rounded p-3 w-full">
<p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
<div class="px-2 space-y-2 min-w-[140px] h-[40px]">
<span class="inline-block">2018.01.01 12:03&nbsp</span>
<span class="inline-block">~&nbsp2022.08.05 02:53</span>
</div>
</li>
<li class="bg-neutral-10 rounded p-3 w-full">
<p class="font-bold text-sm leading-8">Case Duration</p>
<div class="flex justify-between items-center space-x-2 min-w-[272px]">
<div class="space-y-2">
<p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>11.34 mths</p>
<p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>instant</p>
</div>
<div class="space-y-2">
<p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>25.71 yrs</p>
<p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>6.00 days</p>
</div>
</div>
</li>
</ul>
<!-- control button --> <!-- control button -->
<div class="bg-neutral-300 inline-block rr"> <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>
<span class="material-symbols-outlined block px-8 text-xs ">keyboard_double_arrow_up</span>
<!-- 面板收合: 箭頭朝下 -->
<!-- <span class="material-symbols-outlined block px-8 text-xs">keyboard_double_arrow_down</span> -->
</div> </div>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
isPanel: false,
}
},
} }
</script> </script>
<style> <style scoped>
.rr { :deep(.p-progressbar .p-progressbar-value) {
border-radius: 0px 0px 999px 999px; @apply bg-neutral-900
} }
</style> </style>

21
src/components/Discover/Conformance/conformanceResults.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<section>
<p class="h2 text-base">Conformance Checking Results&nbsp<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>

8
src/views/Discover/Conformance/index.vue
View File

@@ -1,11 +1,15 @@
<template> <template>
<main class="bg-neutral-50 h-screen-main">
<StatusBar></StatusBar> <StatusBar></StatusBar>
<h1>Conformance</h1> <h1>sider</h1>
<ConformanceResults></ConformanceResults>
</main>
</template> </template>
<script> <script>
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js'; import LoadingStore from '@/stores/loading.js';
import StatusBar from '@/components/Discover/Conformance/StatusBar.vue'; import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/conformanceResults.vue';
export default { export default {
setup() { setup() {
@@ -16,11 +20,11 @@ export default {
}, },
components: { components: {
StatusBar, StatusBar,
ConformanceResults,
}, },
async created() { async created() {
let logId; let logId;
if(this.$route.params.type === 'log') logId = this.$route.params.fileId; if(this.$route.params.type === 'log') logId = this.$route.params.fileId;
console.log(logId);
// this.isLoading = true; // this.isLoading = true;
this.isLoading = false; this.isLoading = false;

2
tailwind.config.js
View File

@@ -11,7 +11,7 @@ module.exports = {
transparent: 'transparent', transparent: 'transparent',
current: 'currentColor', current: 'currentColor',
'primary': '#0099FF', 'primary': '#0099FF',
// 'secondary': '', 'secondary': '#FFAA44',
'neutral': { 'neutral': {
10: '#ffffff', 10: '#ffffff',
50: '#f8fafc', 50: '#f8fafc',