feat: Compare sidebar layout done.
This commit is contained in:
chiayin
277
src/components/Compare/SidebarStates.vue
Normal file
277
src/components/Compare/SidebarStates.vue
Normal 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 }} </span>
|
||||
<span class="block">~</span>
|
||||
<span class="block"> {{ 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 }} </span>
|
||||
<span class="block">~</span>
|
||||
<span class="block"> {{ 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>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>ProformanceView</h2>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user