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

feat: Compare sidebar layout done.

Browse Source
This commit is contained in:
chiayin
2024-02-16 11:35:10 +08:00
parent ac8a3b0b27
commit 66a6f7806d
6 changed files with 336 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/components/Compare/SidebarStates.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[440px]" @hide="hide" @show="show">
<template #header>
<p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
<!-- <ul class=" pl-4">
<li class="h1 text-neutral-900">Summary</li>
</ul> -->
</template>
<!-- header: summary -->
<div class="flex justify-start items-start">
<!-- 001 -->
<section class="w-[204px] box-border pr-4">
<div class="mb-4">
<p class="h2">File Name</p>
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
</div>
<!-- Stats -->
<ul class="pb-4 border-b border-neutral-300">
<li>
<p class="h2">Cases</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Traces</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Activity Instances</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Activities</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
</div>
</li>
</ul>
<!-- Log Timeframe -->
<div class="pt-1 pb-4 border-b border-neutral-300">
<p class="h2">Log Timeframe</p>
<div class="space-y-2 text-sm text-center">
<span class="block">{{ statData.started_at }}&nbsp</span>
<span class="block">~</span>
<span class="block">&nbsp{{ statData.completed_at }}</span>
</div>
</div>
<!-- Case Duration -->
<div class="pt-1 pb-4">
<p class="h2">Case Duration</p>
<ul class="space-y-1 text-sm">
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
</ul>
</div>
</section>
<!-- 002 -->
<section class="w-[204px] box-border pl-4">
<div class="mb-4">
<p class="h2">File Name</p>
<p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
</div>
<!-- Stats -->
<ul class="pb-4 border-b border-neutral-300">
<li>
<p class="h2">Cases</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Traces</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Activity Instances</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
</div>
</li>
<li>
<p class="h2">Activities</p>
<div class="flex justify-between items-center">
<div class="w-full mr-4">
<span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
</div>
<span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
</div>
</li>
</ul>
<!-- Log Timeframe -->
<div class="pt-1 pb-4 border-b border-neutral-300">
<p class="h2">Log Timeframe</p>
<div class="space-y-2 text-sm text-center">
<span class="block">{{ statData.started_at }}&nbsp</span>
<span class="block">~</span>
<span class="block">&nbsp{{ statData.completed_at }}</span>
</div>
</div>
<!-- Case Duration -->
<div class="pt-1 pb-4">
<p class="h2">Case Duration</p>
<ul class="space-y-1 text-sm">
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
</ul>
</div>
</section>
</div>
</Sidebar>
</template>
<script>
import { storeToRefs } from 'pinia';
import AllMapDataStore from '@/stores/allMapData.js';
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';
export default {
setup() {
const allMapDataStore = AllMapDataStore();
const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
return { logId, stats, createFilterId, allMapDataStore };
},
props:{
sidebarState: {
type: Boolean,
require: false,
},
},
data() {
return {
valueCases: 0,
valueTraces: 0,
valueTaskInstances: 0,
valueTasks: 0,
statData: null,
}
},
methods: {
/**
* Number to percentage
* @param {number} val
* @returns {string} 轉換完成的百分比字串
*/
getPercentLabel(val){
if((val * 100).toFixed(1) >= 100) return 100;
else return parseFloat((val * 100).toFixed(1));
},
/**
* setting stats data
*/
getStatData() {
this.statData = {
cases: {
count: this.stats.cases.count.toLocaleString('en-US'),
total: this.stats.cases.total.toLocaleString('en-US'),
ratio: this.getPercentLabel(this.stats.cases.ratio)
},
traces: {
count: this.stats.traces.count.toLocaleString('en-US'),
total: this.stats.traces.total.toLocaleString('en-US'),
ratio: this.getPercentLabel(this.stats.traces.ratio)
},
task_instances: {
count: this.stats.task_instances.count.toLocaleString('en-US'),
total: this.stats.task_instances.total.toLocaleString('en-US'),
ratio: this.getPercentLabel(this.stats.task_instances.ratio)
},
tasks: {
count: this.stats.tasks.count.toLocaleString('en-US'),
total: this.stats.tasks.total.toLocaleString('en-US'),
ratio: this.getPercentLabel(this.stats.tasks.ratio)
},
started_at: getMoment(this.stats.started_at).format('YYYY.MM.DD HH:mm'),
completed_at: getMoment(this.stats.completed_at).format('YYYY.MM.DD HH:mm'),
case_duration: {
min: getTimeLabel(this.stats.case_duration.min, 2),
max: getTimeLabel(this.stats.case_duration.max, 2),
average: getTimeLabel(this.stats.case_duration.average, 2),
median: getTimeLabel(this.stats.case_duration.median, 2),
}
}
},
/**
* Behavior when show
*/
show(){
this.valueCases = this.statData.cases.ratio * 100;
this.valueTraces= this.statData.traces.ratio * 100;
this.valueTaskInstances = this.statData.task_instances.ratio * 100;
this.valueTasks = this.statData.tasks.ratio * 100;
},
/**
* Behavior when hidden
*/
hide(){
this.valueCases = 0;
this.valueTraces= 0;
this.valueTaskInstances = 0;
this.valueTasks = 0;
},
},
async mounted() {
// log: 695977238 ; filter: 746150051
// let params = this.$route.params;
// switch (params.type) {
// case 'log':
// this.logId = params.fileId;
// break;
// case 'filter':
// this.createFilterId = params.fileId;
// break;
// case 'rule':
// switch (params.checkType) {
// case 'log':
// this.logId = params.checkFileId;
// break;
// case 'filter':
// this.createFilterId = params.checkFileId;
// }
// break;
// }
this.logId = 695977238;
await this.allMapDataStore.getAllMapData();
await this.getStatData();
this.isPanel = false; // 預設不打開
}
}
</script>
<style scoped>
:deep(.p-progressbar .p-progressbar-value) {
@apply bg-primary
}
</style>