From a4e0e300eabfb1936b32799ee4e22b947413aa78 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 15 Mar 2023 16:08:27 +0800 Subject: [PATCH] Discover: sidebar-insight component done --- src/components/Discover/sidebarState.vue | 264 +++++++++++++++++++++++ src/router/index.js | 2 +- src/views/Discover/index.vue | 239 +------------------- tailwind.config.js | 14 +- 4 files changed, 284 insertions(+), 235 deletions(-) create mode 100644 src/components/Discover/sidebarState.vue diff --git a/src/components/Discover/sidebarState.vue b/src/components/Discover/sidebarState.vue new file mode 100644 index 0000000..56f31da --- /dev/null +++ b/src/components/Discover/sidebarState.vue @@ -0,0 +1,264 @@ + + + + + + diff --git a/src/router/index.js b/src/router/index.js index 57ada47..9a144b0 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,4 +1,4 @@ -import { createRouter, createWebHistory, createWebHashHistory, useRoute, useRouter } from "vue-router"; +import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"; import AuthContainer from '@/views/AuthContainer.vue'; import MainContainer from '@/views/MainContainer.vue'; import Login from '@/views/Login/index.vue'; diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index 07e3832..0e9948d 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/index.vue @@ -45,189 +45,10 @@ - + + - - -
- -
    -
  • -

    Cases

    -
    -
    - {{ numberLabel(stats.cases.count) }} / {{ numberLabel(stats.cases.total) }} - -
    - {{ getPercentLabel(stats.cases.ratio) }} -
    -
    • -
  • -

    Traces

    -
    -
    - {{ numberLabel(stats.traces.count) }} / {{ numberLabel(stats.traces.total) }} - -
    - {{ getPercentLabel(stats.traces.ratio) }} -
    -
    • -
  • -

    Activity Instances

    -
    -
    - {{ numberLabel(stats.task_instances.count) }} / {{ numberLabel(stats.task_instances.total) }} - -
    - {{ getPercentLabel(stats.task_instances.ratio) }} -
    -
    • -
  • -

    Activities

    -
    -
    - {{ numberLabel(stats.tasks.count) }} / {{ numberLabel(stats.tasks.total) }} - -
    - {{ getPercentLabel(stats.tasks.ratio) }} -
    -
    • -
- -
-

Log Timeframe

-

{{ moment(stats.started_at - ) }}~{{ moment(stats.completed_at - ) }}

-
- -
-

Case Duration

-
    -
  • {{ timeLabel(stats.case_duration.min) }}
    • -
  • {{ timeLabel(stats.case_duration.average - ) }}
    • -
  • {{ timeLabel(stats.case_duration.median) }}
    • -
  • {{ timeLabel(stats.case_duration.max) }}
    • -
-
-
-
-
-

Most frequent

-
    -
  • Activity:  - - {{ value }} - ,  - -
    • -
  • Inbound connections:  - - {{ value }} - ,  - -
    • -
  • Outbound connections:  - - {{ value }} - ,  - -
    • -
-

Most time-consuming

-
    -
  • Activity:  - - {{ value }} - ,  - -
    • -
  • Connection:  - - - {{ value }} - 🡲  - - ,  - -
    • -
-
-
-
    -
  • Self-loop
    • -
  • Short-loop
    • -
  • Shortest Trace
    • -
  • Longest Trace
    • -
  • Most Frequent Trace
    • -
- - -
    -
  • No data
    • -
  • - - {{ value }} - 🡲  - -
    • -
- - -
    -
  • No data
    • -
  • - - {{ value }} - 🡲  - -
    • -
- - -
    -
  • No data
    • -
  • - - {{ value }} - 🡲  - -
    • -
- - -
    -
  • No data
    • -
  • - - {{ value }} - 🡲  - -
    • -
- - -
    -
  • No data
    • -
  • - - {{ value }} - 🡲  - -
    • -
- - -
-
- @@ -238,10 +59,8 @@ import { storeToRefs } from 'pinia'; import LoadingStore from '@/stores/loading.js'; import AllMapDataStore from '@/stores/allMapData.js'; import cytoscapeMap from '@/module/cytoscapeMap.js'; -import sidebarView from '@/components/Discover/sidebarView.vue'; -import getNumberLabel from '@/module/numberLabel.js'; -import getTimeLabel from '@/module/timeLabel.js'; -import getMoment from 'moment'; +import SidebarView from '@/components/Discover/sidebarView.vue'; +import SidebarState from '@/components/Discover/sidebarState.vue'; export default { setup() { @@ -260,7 +79,8 @@ export default { } }, components: { - sidebarView, + SidebarView, + SidebarState, }, data() { return { @@ -283,43 +103,9 @@ export default { rank: 'LR', // 直向 TB | 橫向 LR sidebarView: false, // SideBar: Visualization Setting sidebarState: false, // SideBar: Summary & Insight - tab: 'summary', - valueCases: 0, - valueTraces: 0, - valueTaskInstances: 0, - valueTasks: 0, - active1: 0 } }, methods: { - switchTab(tab) { - this.tab = tab; - }, - timeLabel(time){ - return getTimeLabel(time); - }, - moment(time){ - return getMoment(time).format('YYYY-MM-DD HH:mm'); - }, - numberLabel(num){ - return getNumberLabel(num); - }, - getPercentLabel(val){ - if(val * 100 === 100) return `${val * 100}%`; - return `${(val * 100).toFixed(1)}%`; - }, - show(){ - this.valueCases = this.stats.cases.ratio * 100; - this.valueTraces= this.stats.traces.ratio * 100; - this.valueTaskInstances = this.stats.task_instances.ratio * 100; - this.valueTasks = this.stats.tasks.ratio * 100; - }, - hide(){ - this.valueCases = 0; - this.valueTraces= 0; - this.valueTaskInstances = 0; - this.valueTasks = 0; - }, /** * switch map type * @param {string} type processMap | bpmn @@ -509,16 +295,3 @@ export default { }, } - - diff --git a/tailwind.config.js b/tailwind.config.js index 1a9ea65..991ca4f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -46,6 +46,18 @@ module.exports = { // 'lg': '1024px', // 'xl': '1280px', '2xl': '1536px', - } + }, + extend: { + keyframes: { + 'fadein': { + '0%': { opacity: '0' }, + '50%': { opacity: '0.5' }, + '100%': { opacity: '1' }, + }, + }, + animation: { + 'fadein': 'fadein 1s ease-in-out', + }, + }, }, };