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

feat: Performance aside done.

Browse Source
This commit is contained in:
chiayin
2024-01-26 17:08:34 +08:00
parent 329e1035ad
commit bddc1d3a7a
2 changed files with 101 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/router/index.js
View File

@@ -93,6 +93,11 @@ const routes = [
name: "NotFound404", name: "NotFound404",
component: NotFound404, component: NotFound404,
}, },
// {
// path: "/discover/performance",
// name: "Performance",
// component: Performance,
// }
]; ];
const base_url = import.meta.env.BASE_URL; const base_url = import.meta.env.BASE_URL;
@@ -103,15 +108,15 @@ const router = createRouter({
}); });
// 全域性路由守衛 // 全域性路由守衛
router.beforeEach((to, from) => { // router.beforeEach((to, from) => {
// to: Route: 即將要進入的目標 路由物件 // // to: Route: 即將要進入的目標 路由物件
// from: Route: 當前導航正要離開的路由 // // from: Route: 當前導航正要離開的路由
let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。 // let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。
// 當路由到 login 時，有登入要跳轉至home // // 當路由到 login 時，有登入要跳轉至home
if (to.name === 'Login') { // if (to.name === 'Login') {
if (isRemoveCookie) router.push({ name: 'Files' }); // if (isRemoveCookie) router.push({ name: 'Files' });
} // }
}); // });
export default router; export default router;

90
src/views/Discover/Performance/index.vue
View File

@@ -1,10 +1,74 @@
<template> <template>
<main class="h-screen-main relative"> <main class="h-screen-main relative">
<div class="h-full relative bg-neutral-50"> <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> </div>
<!-- <StatusBar></StatusBar> -->
<StatusBar></StatusBar>
</main> </main>
</template> </template>
<script> <script>
@@ -25,6 +89,21 @@ export default {
components: { components: {
StatusBar, 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() { async created() {
this.isLoading = true; this.isLoading = true;
const routeParams = this.$route.params; const routeParams = this.$route.params;
@@ -37,3 +116,8 @@ export default {
} }
} }
</script> </script>
<style scoped>
.active {
@apply text-primary
}
</style>