feat: Performance aside done.
This commit is contained in:
chiayin
@@ -1,10 +1,74 @@
|
||||
<template>
|
||||
<main class="h-screen-main relative">
|
||||
<div class="h-full relative bg-neutral-50">
|
||||
performance: {{ this.performanceData }}
|
||||
<div class="flex justify-start items-start p-4 h-full overflow-y-auto scroll-smooth">
|
||||
<!-- tag -->
|
||||
<aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
|
||||
<section class="px-2 space-y-2 w-56 h-full">
|
||||
<div>
|
||||
<p class="h2 text-base">Time Usage</p>
|
||||
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
||||
<li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="h2 text-base">Time Usage</p>
|
||||
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
||||
<li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
<!-- graph -->
|
||||
<article class="w-full h-full">
|
||||
<section>
|
||||
<p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
|
||||
</section>
|
||||
<section>
|
||||
<ul class="list-disc list-inside px-4 pl-7">
|
||||
<li id="cycleTime" class="scroll-smooth">
|
||||
<span class="inline-block py-4">Cycle Time & Efficiency</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
<li id="processingTime">
|
||||
<span class="inline-block py-4">Processing Time</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
<li id="waitingTime">
|
||||
<span class="inline-block py-4">Waiting Time</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
|
||||
<ul class="list-disc list-inside px-4 pl-7">
|
||||
<li id="cases">
|
||||
<span class="inline-block py-4">Number of Cases</span>
|
||||
<div class="">
|
||||
圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StatusBar></StatusBar>
|
||||
<!-- <StatusBar></StatusBar> -->
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
@@ -25,6 +89,21 @@ export default {
|
||||
components: {
|
||||
StatusBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeUsageData: [
|
||||
{tagId: '#cycleTime', label: 'Cycle Time & Efficiency'},
|
||||
{tagId: '#processingTime', label: 'Processing Time'},
|
||||
{tagId: '#waitingTime', label: 'Waiting Time'},
|
||||
],
|
||||
frequencyData: [
|
||||
{tagId: '#cases', label: 'Number of Cases'},
|
||||
// {tagId: '#trace', label: 'Number of Trace'},
|
||||
// {tagId: '#resource', label: 'Resource'},
|
||||
],
|
||||
isActive: null
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.isLoading = true;
|
||||
const routeParams = this.$route.params;
|
||||
@@ -37,3 +116,8 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.active {
|
||||
@apply text-primary
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user