diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index a294f20..9ab14d7 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -9,7 +9,7 @@
           <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
         <li v-if="isAdmin" id="btn_acct_mgmt"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center" @click="onBtnAcctMgmtClick">          
+          items-center" @click="onBtnAcctMgmtClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg" alt="accountManagement"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
         </li>
@@ -29,110 +29,90 @@
     </div>
 </template>
 
-<script>
-import { computed, onMounted, ref, } from 'vue';
-import { mapActions, mapState, storeToRefs } from 'pinia';
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useLoginStore } from '@/stores/login';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const { logOut } = useLoginStore();
-    const loginStore = useLoginStore();
-    const router = useRouter();
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const acctMgmtStore = useAcctMgmtStore();
-    const { tempFilterId } = storeToRefs(allMapDataStore);
-    const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
+const router = useRouter();
+const route = useRoute();
+const loginStore = useLoginStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const acctMgmtStore = useAcctMgmtStore();
 
-    const loginUserData = ref(null);
-    const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
-    const isAdmin = ref(false);
+const { logOut } = loginStore;
+const { tempFilterId } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+const { userData } = storeToRefs(loginStore);
+const { isAcctMenuOpen } = storeToRefs(acctMgmtStore);
 
-    const getIsAdminValue = async () => {
-        await loginStore.getUserData();
-        loginUserData.value = loginStore.userData;
-        await acctMgmtStore.getUserDetail(loginUserData.value.username);
-        isAdmin.value = acctMgmtStore.currentViewingUser.is_admin;
-      };
-    
-    const onBtnMyAccountClick = async() => {
-      acctMgmtStore.closeAcctMenu();
-      await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
-      await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
-      await router.push('/my-account');
-    }
+const loginUserData = ref(null);
+const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
+const isAdmin = ref(false);
 
-    onMounted(async () => { 
-        await getIsAdminValue();
-    });
-    
-    return {
-      logOut,
-      tempFilterId,
-      conformanceLogTempCheckId,
-      allMapDataStore,
-      conformanceStore,
-      isAdmin,
-      onBtnMyAccountClick,
-    };
-  },
-  data() {
-    return {
-      i18next: i18next,
-    }
-  },
-  computed: {
-    ...mapState(useLoginStore, ['userData']),
-    ...mapState(useAcctMgmtStore, ['isAcctMenuOpen']),
-  },
-  methods: {
-    clickOtherPlacesThenCloseMenu(){
-      const acctMgmtButton = document.getElementById('acct_mgmt_button');
-      const acctMgmtMenu = document.getElementById('account_menu');
-
-      document.addEventListener('click', (event) => {
-          if (!acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
-            this.closeAcctMenu();
-          }
-      });
-    },
-    onBtnAcctMgmtClick(){
-      this.$router.push({name: 'AcctAdmin'});
-      this.closeAcctMenu();
-    },
-    onLogoutBtnClick(){
-      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
-        // 傳給 Map，通知 Sidebar 要關閉。
-        this.$emitter.emit('leaveFilter', false);
-        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
-      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
-        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
-      } else {
-        this.logOut();
-      }
-    },
-    ...mapActions(useLoginStore, ['getUserData']),
-    ...mapActions(useAcctMgmtStore, ['closeAcctMenu']),
-  },
-  created() {
-    this.getUserData();
-  },
-  mounted(){
-    this.clickOtherPlacesThenCloseMenu();
-  },
+const getIsAdminValue = async () => {
+  await loginStore.getUserData();
+  loginUserData.value = loginStore.userData;
+  await acctMgmtStore.getUserDetail(loginUserData.value.username);
+  isAdmin.value = acctMgmtStore.currentViewingUser.is_admin;
 };
+
+const onBtnMyAccountClick = async () => {
+  acctMgmtStore.closeAcctMenu();
+  await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
+  await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
+  await router.push('/my-account');
+};
+
+const clickOtherPlacesThenCloseMenu = () => {
+  const acctMgmtButton = document.getElementById('acct_mgmt_button');
+  const acctMgmtMenu = document.getElementById('account_menu');
+
+  document.addEventListener('click', (event) => {
+    if (acctMgmtMenu && acctMgmtButton && !acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
+      acctMgmtStore.closeAcctMenu();
+    }
+  });
+};
+
+const onBtnAcctMgmtClick = () => {
+  router.push({name: 'AcctAdmin'});
+  acctMgmtStore.closeAcctMenu();
+};
+
+const onLogoutBtnClick = () => {
+  if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
+    // 傳給 Map，通知 Sidebar 要關閉。
+    emitter.emit('leaveFilter', false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
+  } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
+    && (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)) {
+    leaveConformance(false, conformanceStore.addConformanceCreateCheckId, false, logOut)
+  } else {
+    logOut();
+  }
+};
+
+// created
+loginStore.getUserData();
+
+// mounted
+onMounted(async () => {
+  await getIsAdminValue();
+  clickOtherPlacesThenCloseMenu();
+});
 </script>
 
 <style>
 #account_menu {
   z-index: 2147483648;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/AccountMenu/SearchBar.vue b/src/components/AccountMenu/SearchBar.vue
index 1a8d0ed..e0a1c71 100644
--- a/src/components/AccountMenu/SearchBar.vue
+++ b/src/components/AccountMenu/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
+    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
         justify-between">
         <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
             v-model="inputQuery" @keypress="handleKeyPressOfSearch"
@@ -9,30 +9,22 @@
     </div>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
-export default {
-    setup(props, { emit, }) {
-        const inputQuery = ref("");
 
-        const onSearchClick = (event) => {
-            event.preventDefault();
-            emit('on-search-account-button-click', inputQuery.value);
-        };
+const emit = defineEmits(['on-search-account-button-click']);
 
-        const handleKeyPressOfSearch = (event) => {
-            if (event.key === 'Enter') {
-                emit('on-search-account-button-click', inputQuery.value);
-            }
-        }
+const inputQuery = ref("");
 
-        return {
-            inputQuery,
-            onSearchClick,
-            handleKeyPressOfSearch,
-            i18next,
-        };
-    },
+const onSearchClick = (event) => {
+    event.preventDefault();
+    emit('on-search-account-button-click', inputQuery.value);
 };
-</script>
\ No newline at end of file
+
+const handleKeyPressOfSearch = (event) => {
+    if (event.key === 'Enter') {
+        emit('on-search-account-button-click', inputQuery.value);
+    }
+};
+</script>
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index c2b1354..14db807 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -1,6 +1,6 @@
 <template>
-    <div 
-      class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2" 
+    <div
+      class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
       :class="{
         'badge-activated': isActivated,
         'badge-deactivated': !isActivated,
@@ -11,28 +11,18 @@
       {{ displayText }}
     </div>
   </template>
-  
-  <script>
-  import { defineComponent } from 'vue';
-  
-  export default defineComponent({
-    props: {
-      isActivated: {
-        type: Boolean,
-        required: true,
-        default: true,
-      },
-      displayText: {
-        type: String,
-        required: true,
-        default: "Status",
-      }
+
+  <script setup>
+  defineProps({
+    isActivated: {
+      type: Boolean,
+      required: true,
+      default: true,
     },
-    setup(props) {
-      return {
-        isActivated: props.isActivated,
-        displayText: props.displayText,
-      };
+    displayText: {
+      type: String,
+      required: true,
+      default: "Status",
     }
   });
-  </script>
\ No newline at end of file
+  </script>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 36d575e..1e7a06e 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -15,35 +15,23 @@
     </button>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref } from 'vue';
 
-export default {
-    props: {
-        buttonText: {
-            type: String,
-            required: false,
-        },
+defineProps({
+    buttonText: {
+        type: String,
+        required: false,
     },
-    setup(props) {
-        const buttonText = props.buttonText;
+});
 
-        const isPressed = ref(false);
+const isPressed = ref(false);
 
-        const onMousedown = () => {
-            isPressed.value = true;
-        }
+const onMousedown = () => {
+    isPressed.value = true;
+};
 
-        const onMouseup = () => {
-            isPressed.value = false;
-        }
-
-        return {
-            buttonText,
-            onMousedown,
-            onMouseup,
-            isPressed,
-        };
-    },
-}
-</script>
\ No newline at end of file
+const onMouseup = () => {
+    isPressed.value = false;
+};
+</script>
diff --git a/src/components/ButtonFilled.vue b/src/components/ButtonFilled.vue
index 72ab00f..e6a70cc 100644
--- a/src/components/ButtonFilled.vue
+++ b/src/components/ButtonFilled.vue
@@ -16,35 +16,23 @@
     </button>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref } from 'vue';
 
-export default {
-    props: {
-        buttonText: {
-            type: String,
-            required: false,
-        },
+defineProps({
+    buttonText: {
+        type: String,
+        required: false,
     },
-    setup(props) {
-        const buttonText = props.buttonText;
+});
 
-        const isPressed = ref(false);
+const isPressed = ref(false);
 
-        const onMousedown = () => {
-            isPressed.value = true;
-        }
+const onMousedown = () => {
+    isPressed.value = true;
+};
 
-        const onMouseup = () => {
-            isPressed.value = false;
-        }
-
-        return {
-            buttonText,
-            onMousedown,
-            onMouseup,
-            isPressed,
-        };
-    },
-}
-</script>
\ No newline at end of file
+const onMouseup = () => {
+    isPressed.value = false;
+};
+</script>
diff --git a/src/components/Compare/SidebarStates.vue b/src/components/Compare/SidebarStates.vue
index 15ed9ff..cc15767 100644
--- a/src/components/Compare/SidebarStates.vue
+++ b/src/components/Compare/SidebarStates.vue
@@ -146,128 +146,126 @@
     </div>
   </Sidebar>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { useCompareStore } from '@/stores/compare';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
-export default {
-  setup() {
-    const compareStore = useCompareStore();
+const props = defineProps({
+  sidebarState: {
+    type: Boolean,
+    require: false,
+  },
+});
 
-    return { compareStore };
-  },
-  props:{
-    sidebarState: {
-      type: Boolean,
-      require: false,
+const route = useRoute();
+const compareStore = useCompareStore();
+
+const primaryValueCases = ref(0);
+const primaryValueTraces = ref(0);
+const primaryValueTaskInstances = ref(0);
+const primaryValueTasks = ref(0);
+const secondaryValueCases = ref(0);
+const secondaryValueTraces = ref(0);
+const secondaryValueTaskInstances = ref(0);
+const secondaryValueTasks = ref(0);
+const primaryStatData = ref(null);
+const secondaryStatData = ref(null);
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string} 轉換完成的百分比字串
+ */
+const getPercentLabel = (val) => {
+  if((val * 100).toFixed(1) >= 100) return 100;
+  else return parseFloat((val * 100).toFixed(1));
+};
+
+/**
+ * setting stats data
+ * @param { object } data fetch API stats data
+ * @param { string } fileName file Name
+ * @returns { object }  primaryStatData | secondaryStatData，回傳 primaryStatData 或 secondaryStatData
+ */
+const getStatData = (data, fileName) => {
+  return {
+    name: fileName,
+    cases: {
+      count: data.cases.count.toLocaleString('en-US'),
+      total: data.cases.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(data.cases.ratio)
     },
-  },
-  data() {
-    return {
-      primaryValueCases: 0,
-      primaryValueTraces: 0,
-      primaryValueTaskInstances: 0,
-      primaryValueTasks: 0,
-      secondaryValueCases: 0,
-      secondaryValueTraces: 0,
-      secondaryValueTaskInstances: 0,
-      secondaryValueTasks: 0,
-      primaryStatData: null,
-      secondaryStatData: null,
+    traces: {
+      count: data.traces.count.toLocaleString('en-US'),
+      total: data.traces.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(data.traces.ratio)
+    },
+    task_instances: {
+      count: data.task_instances.count.toLocaleString('en-US'),
+      total: data.task_instances.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(data.task_instances.ratio)
+    },
+    tasks: {
+      count: data.tasks.count.toLocaleString('en-US'),
+      total: data.tasks.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(data.tasks.ratio)
+    },
+    started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
+    completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
+    case_duration: {
+      min: getTimeLabel(data.case_duration.min, 2),
+      max: getTimeLabel(data.case_duration.max, 2),
+      average: getTimeLabel(data.case_duration.average, 2),
+      median: getTimeLabel(data.case_duration.median, 2),
     }
-  },
-  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
-     * @param { object } data fetch API stats data
-     * @param { string } fileName file Name
-     * @returns { object }  primaryStatData | secondaryStatData，回傳 primaryStatData 或 secondaryStatData
-     */
-    getStatData(data, fileName) {
-      return {
-        name: fileName,
-        cases: {
-          count: data.cases.count.toLocaleString('en-US'),
-          total: data.cases.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(data.cases.ratio)
-        },
-        traces: {
-          count: data.traces.count.toLocaleString('en-US'),
-          total: data.traces.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(data.traces.ratio)
-        },
-        task_instances: {
-          count: data.task_instances.count.toLocaleString('en-US'),
-          total: data.task_instances.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(data.task_instances.ratio)
-        },
-        tasks: {
-          count: data.tasks.count.toLocaleString('en-US'),
-          total: data.tasks.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(data.tasks.ratio)
-        },
-        started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
-        completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
-        case_duration: {
-          min: getTimeLabel(data.case_duration.min, 2),
-          max: getTimeLabel(data.case_duration.max, 2),
-          average: getTimeLabel(data.case_duration.average, 2),
-          median: getTimeLabel(data.case_duration.median, 2),
-        }
-      }
-    },
-    /**
-     * Behavior when show
-     */
-    show(){
-      this.primaryValueCases = this.primaryStatData.cases.ratio;
-      this.primaryValueTraces=  this.primaryStatData.traces.ratio;
-      this.primaryValueTaskInstances = this.primaryStatData.task_instances.ratio;
-      this.primaryValueTasks = this.primaryStatData.tasks.ratio;
-      this.secondaryValueCases = this.secondaryStatData.cases.ratio;
-      this.secondaryValueTraces=  this.secondaryStatData.traces.ratio;
-      this.secondaryValueTaskInstances = this.secondaryStatData.task_instances.ratio;
-      this.secondaryValueTasks = this.secondaryStatData.tasks.ratio;
-    },
-    /**
-     * Behavior when hidden
-     */
-    hide(){
-      this.primaryValueCases = 0;
-      this.primaryValueTraces=  0;
-      this.primaryValueTaskInstances = 0;
-      this.primaryValueTasks = 0;
-      this.secondaryValueCases = 0;
-      this.secondaryValueTraces=  0;
-      this.secondaryValueTaskInstances = 0;
-      this.secondaryValueTasks = 0;
-    },
-  },
-  async mounted() {
-    const routeParams = this.$route.params;
-    const primaryType = routeParams.primaryType;
-    const secondaryType = routeParams.secondaryType;
-    const primaryId = routeParams.primaryId;
-    const secondaryId = routeParams.secondaryId;
-    const primaryData  = await this.compareStore.getStateData(primaryType, primaryId);
-    const secondaryData  = await this.compareStore.getStateData(secondaryType, secondaryId);
-
-    const primaryFileName = await this.compareStore.getFileName(primaryId)
-    const secondaryFileName = await this.compareStore.getFileName(secondaryId)
-    this.primaryStatData = await this.getStatData(primaryData, primaryFileName);
-    this.secondaryStatData = await this.getStatData(secondaryData, secondaryFileName);
   }
-}
+};
+
+/**
+ * Behavior when show
+ */
+const show = () => {
+  primaryValueCases.value = primaryStatData.value.cases.ratio;
+  primaryValueTraces.value = primaryStatData.value.traces.ratio;
+  primaryValueTaskInstances.value = primaryStatData.value.task_instances.ratio;
+  primaryValueTasks.value = primaryStatData.value.tasks.ratio;
+  secondaryValueCases.value = secondaryStatData.value.cases.ratio;
+  secondaryValueTraces.value = secondaryStatData.value.traces.ratio;
+  secondaryValueTaskInstances.value = secondaryStatData.value.task_instances.ratio;
+  secondaryValueTasks.value = secondaryStatData.value.tasks.ratio;
+};
+
+/**
+ * Behavior when hidden
+ */
+const hide = () => {
+  primaryValueCases.value = 0;
+  primaryValueTraces.value = 0;
+  primaryValueTaskInstances.value = 0;
+  primaryValueTasks.value = 0;
+  secondaryValueCases.value = 0;
+  secondaryValueTraces.value = 0;
+  secondaryValueTaskInstances.value = 0;
+  secondaryValueTasks.value = 0;
+};
+
+onMounted(async () => {
+  const routeParams = route.params;
+  const primaryType = routeParams.primaryType;
+  const secondaryType = routeParams.secondaryType;
+  const primaryId = routeParams.primaryId;
+  const secondaryId = routeParams.secondaryId;
+  const primaryData = await compareStore.getStateData(primaryType, primaryId);
+  const secondaryData = await compareStore.getStateData(secondaryType, secondaryId);
+
+  const primaryFileName = await compareStore.getFileName(primaryId)
+  const secondaryFileName = await compareStore.getFileName(secondaryId)
+  primaryStatData.value = await getStatData(primaryData, primaryFileName);
+  secondaryStatData.value = await getStatData(secondaryData, secondaryFileName);
+});
 </script>
 <style scoped>
 :deep(.p-progressbar .p-progressbar-value) {
diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue
index 2d3aed5..24d567b 100644
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -191,7 +191,8 @@
   <MoreModal :listModal="loopModal" @closeModal="loopModal = $event" :listTraces="loopTraces" :taskSeq="loopTaskSeq" :cases="loopCases" :listNo="loopNo" :traceId="looptraceId" :firstCases="loopFirstCases" :category="'loop'"></MoreModal>
 </section>
 </template>
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
 import iconNA from '@/components/icons/IconNA.vue';
@@ -200,532 +201,500 @@ import getNumberLabel from '@/module/numberLabel.js';
 import { setLineChartData, setBarChartData, timeRange, yTimeRange, getXIndex, formatTime, formatMaxTwo } from '@/module/setChartData.js';
 import shortScaleNumber from '@/module/shortScaleNumber.js';
 import getMoment from 'moment';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);
+const conformanceStore = useConformanceStore();
+const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);
 
-    return { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases, conformanceStore }
+const data = ref({
+  total: '--',
+  counts: {
+    conforming: '--',
+    not_conforming: '--',
+    not_applicable: 0,
   },
-  data() {
+  charts: {
+    rate: {
+      rate: '--',
+      chart: {},
+    },
+    cases: {
+      conforming: '--',
+      total: '--',
+      chart: {},
+    },
+    fitness: '--',
+  },
+  effect: {
+    time: null,
+    tasks: null,
+  },
+  loops: null,
+  issues: 'reset',
+  timeTrend: {
+    not_conforming: '--',
+    total: '--',
+    chart: {},
+  },
+});
+const isCoverPlate = ref(false);
+const issuesModal = ref(false);
+const loopModal = ref(false);
+const rateChartData = ref(null);
+const rateChartOptions = ref(null);
+const casesChartData = ref(null);
+const casesChartOptions = ref(null);
+const timeChartData = ref(null);
+const timeChartOptions = ref(null);
+const issuesNo = ref(null);
+const traceId = ref(null);
+const firstCases = ref(null);
+const loopNo = ref(null);
+const looptraceId = ref(null);
+const loopFirstCases = ref(null);
+const selectDurationTime = ref(null);
+const tooltip = ref({
+  rate: {
+    value: '= Conforming / (Conforming + Not Conforming) * 100%',
+    class: '!max-w-[36rem] !text-[10px] !opacity-90',
+  },
+  case: {
+    value: '= Conforming / (Conforming + Not Conforming)',
+    class: '!max-w-[36rem] !text-[10px] !opacity-90',
+  },
+  timeTrend: {
+    value: '=Not Conforming / (total Conforming+total Not Conforming)',
+    class: '!max-w-[36rem] !text-[10px] !opacity-90',
+  },
+  issueList: {
+    value: 'Percentage of Issue Type (%) = Cases of Issue Type / Total Cases of All Issue Types.',
+    class: '!max-w-[36rem] !text-[10px] !opacity-90',
+  }
+});
+
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+const progressWidth = (value) => {
+  return `width:${value}%;`
+};
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string} 轉換完成的百分比字串
+ */
+const getPercentLabel = (val) => {
+  if((val * 100).toFixed(1) >= 100) return 100;
+  else return parseFloat((val * 100).toFixed(1));
+};
+
+/**
+ * Convert seconds to days
+ * @param {number} sec 秒數
+ * @returns {number} day
+ */
+const convertSecToDay = (sec) => {
+  return (sec / 86400)
+};
+
+/**
+ * Open Issues Modal.
+ * @param {number} no trace 編號
+ */
+const openMore = async (no) => {
+  // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
+  issuesNo.value = no;
+  await conformanceStore.getConformanceIssue(no);
+  traceId.value = await issueTraces.value[0].id;
+  firstCases.value = await conformanceStore.getConformanceTraceDetail(no, issueTraces.value[0].id, 0);
+  issuesModal.value = await true;
+};
+
+/**
+ * Open Loop Modal.
+ * @param {number} no trace 編號
+ */
+const openLoopMore = async (no) => {
+  // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
+  loopNo.value = no;
+  await conformanceStore.getConformanceLoop(no);
+  looptraceId.value = await loopTraces.value[0].id;
+  loopFirstCases.value = await conformanceStore.getConformanceLoopsTraceDetail(no, loopTraces.value[0].id, 0);
+  loopModal.value = await true;
+};
+
+/**
+ * set conformance report data
+ * @param   {object} data new watch's value 監聽到後端傳來的報告 data
+ */
+const setConformanceTempReportData = (newData) => {
+  const total = getNumberLabel(Object.values(newData.counts).reduce((acc, val) => acc + val, 0));
+  const sum = newData.counts.conforming + newData.counts.not_conforming;
+  const rate = ((newData.counts.conforming / sum) * 100).toFixed(1);
+  const isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
+  const isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
+  const setLoopData = value => value.map(item => {
     return {
-      data: {
-        total: '--',
-        counts: {
-          conforming: '--',
-          not_conforming: '--',
-          not_applicable: 0,
-        },
-        charts: {
-          rate: {
-            rate: '--',
-            chart: {},
-          },
-          cases: {
-            conforming: '--',
-            total: '--',
-            chart: {},
-          },
-          fitness: '--',
-        },
-        effect: {
-          time: null,
-          tasks: null,
-        },
-        loops: null,
-        issues: 'reset',
-        timeTrend: {
-          not_conforming: '--',
-          total: '--',
-          chart: {},
-        },
-      },
-      isCoverPlate: false,
-      issuesModal: false,
-      loopModal: false,
-      rateChartData: null,
-      rateChartOptions: null,
-      casesChartData: null,
-      casesChartOptions: null,
-      timeChartData: null,
-      timeChartOptions: null,
-      issuesNo: null,
-      traceId: null,
-      firstCases: null,
-      loopNo: null,
-      looptraceId: null,
-      loopFirstCases: null,
-      selectDurationTime: null,
-      tooltip: {
-        rate: {
-          value: '= Conforming / (Conforming + Not Conforming) * 100%',
-          class: '!max-w-[36rem] !text-[10px] !opacity-90',
-        },
-        case: {
-          value: '= Conforming / (Conforming + Not Conforming)',
-          class: '!max-w-[36rem] !text-[10px] !opacity-90',
-        },
-        timeTrend: {
-          value: '=Not Conforming / (total Conforming+total Not Conforming)',
-          class: '!max-w-[36rem] !text-[10px] !opacity-90',
-        },
-        issueList: {
-          value: 'Percentage of Issue Type (%) = Cases of Issue Type / Total Cases of All Issue Types.',
-          class: '!max-w-[36rem] !text-[10px] !opacity-90',
-        }
-      }
+      no: item.no,
+      label: item.description,
+      value: `width:${getPercentLabel(item.count / newData.counts.conforming)}%;`,
+      count: getNumberLabel(item.count),
+      ratio: getPercentLabel(item.count / newData.counts.conforming),
     }
-  },
-  components: {
-    iconNA,
-    MoreModal,
-  },
-  watch: {
-    conformanceTempReportData: {
-      handler: function(newValue) {
-        if(newValue?.rule && newValue.rule.min !== null) {
-          this.selectDurationTime = {
-            min: newValue.rule.min,
-            max: newValue.rule.max,
-          }
-        }
-        this.data = this.setConformanceTempReportData(newValue);
+  });
+  const setIssueData = value => value.map(item => {
+    return {
+      no: item.no,
+      label: item.description,
+      value: `width:${getPercentLabel(item.count / newData.counts.not_conforming)}%;`,
+      count: getNumberLabel(item.count),
+      ratio: getPercentLabel(item.count / newData.counts.not_conforming),
+    }
+  });
+  const isNullLoops = value => value === null ? null : setLoopData(value);
+  const isNullIsssue = value => value === null ? null : setIssueData(value);
+
+  const result = {
+    total: `Total ${total}`,
+    counts: {
+      conforming: getNumberLabel(newData.counts.conforming),
+      not_conforming: getNumberLabel(newData.counts.not_conforming),
+      not_applicable: getNumberLabel(newData.counts.not_applicable),
+    },
+    charts: {
+      rate: {
+        rate: rate,
+        data: setLineChartData(newData.charts.rate.data, newData.charts.rate.x_axis.max, newData.charts.rate.x_axis.min, true),
+        xMax: getMoment(newData.charts.rate.x_axis.max).format('YYYY/M/D'),
+        xMin: getMoment(newData.charts.rate.x_axis.min).format('YYYY/M/D'),
+      },
+      cases: {
+        conforming: getNumberLabel(newData.counts.conforming),
+        total: getNumberLabel(sum),
+        data: {
+          conforming: setBarChartData(newData.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
+          not_conforming: setBarChartData(newData.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
+        },
+        xMax: getMoment(newData.charts.cases.x_axis.max).format('YYYY/M/D'),
+        xMin: getMoment(newData.charts.cases.x_axis.min).format('YYYY/M/D'),
+      },
+      fitness: getNumberLabel(newData.charts.fitness),
+    },
+    effect: {
+      time: {
+        conforming: isNullTime(newData.effect.time.conforming),
+        not_conforming: isNullTime(newData.effect.time.not_conforming),
+        difference: (isNullTime(newData.effect.time.conforming) - isNullTime(newData.effect.time.not_conforming)).toFixed(1),
+      },
+      tasks: {
+        conforming: isNullCase(newData.effect.tasks.conforming),
+        not_conforming: isNullCase(newData.effect.tasks.not_conforming),
+        difference: (isNullCase(newData.effect.tasks.conforming) - isNullCase(newData.effect.tasks.not_conforming)).toFixed(1),
       },
     },
-  },
-  methods: {
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-     progressWidth(value){
-      return `width:${value}%;`
-    },
-    /**
-     * 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));
-    },
-    /**
-     * Convert seconds to days
-     * @param {number} sec 秒數
-     * @returns {number} day
-     */
-    convertSecToDay(sec) {
-      return (sec / 86400)
-    },
-    /**
-     * Open Issues Modal.
-     * @param {number} no trace 編號
-     */
-    async openMore(no) {
-      // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
-      this.issuesNo = no;
-      await this.conformanceStore.getConformanceIssue(no);
-      this.traceId = await this.issueTraces[0].id;
-      this.firstCases = await this.conformanceStore.getConformanceTraceDetail(no, this.issueTraces[0].id, 0);
-      this.issuesModal = await true;
-    },
-    /**
-     * Open Loop Modal.
-     * @param {number} no trace 編號
-     */
-    async openLoopMore(no) {
-      // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
-      this.loopNo = no;
-      await this.conformanceStore.getConformanceLoop(no);
-      this.looptraceId = await this.loopTraces[0].id;
-      this.loopFirstCases = await this.conformanceStore.getConformanceLoopsTraceDetail(no, this.loopTraces[0].id, 0);
-      this.loopModal = await true;
-    },
-    /**
-     * set conformance report data
-     * @param   {object} data new watch's value 監聽到後端傳來的報告 data
-     */
-    setConformanceTempReportData(data){
-      const total = getNumberLabel(Object.values(data.counts).reduce((acc, val) => acc + val, 0));
-      const sum = data.counts.conforming + data.counts.not_conforming;
-      const rate = ((data.counts.conforming / sum) * 100).toFixed(1);
-      const isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
-      const isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
-      const setLoopData = value => value.map(item => {
-        return {
-          no: item.no,
-          label: item.description,
-          value: `width:${this.getPercentLabel(item.count / data.counts.conforming)}%;`,
-          count: getNumberLabel(item.count),
-          ratio: this.getPercentLabel(item.count / data.counts.conforming),
-        }
-      });
-      const setIssueData = value => value.map(item => {
-        return {
-          no: item.no,
-          label: item.description,
-          value: `width:${this.getPercentLabel(item.count / data.counts.not_conforming)}%;`,
-          count: getNumberLabel(item.count),
-          ratio: this.getPercentLabel(item.count / data.counts.not_conforming),
-        }
-      });
-      const isNullLoops = value => value === null ? null : setLoopData(value);
-      const isNullIsssue = value => value === null ? null : setIssueData(value);
+    loops: isNullLoops(newData.loops),
+    issues: isNullIsssue(newData.issues),
+    timeTrend: {
+      not_conforming: getNumberLabel(newData.counts.not_conforming),
+      total: getNumberLabel(sum),
+      chart: null,
+      xMax: null,
+      xMin: null,
+      yMax: null,
+      yMin: null,
+    }
+  };
 
-      const result = {
-        total: `Total ${total}`,
-        counts: {
-          conforming: getNumberLabel(data.counts.conforming),
-          not_conforming: getNumberLabel(data.counts.not_conforming),
-          not_applicable: getNumberLabel(data.counts.not_applicable),
-        },
-        charts: {
-          rate: {
-            rate: rate,
-            data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min, true),
-            xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'),
-            xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'),
-          },
-          cases: {
-            conforming: getNumberLabel(data.counts.conforming),
-            total: getNumberLabel(sum),
-            data: {
-              conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
-              not_conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
-            },
-            xMax: getMoment(data.charts.cases.x_axis.max).format('YYYY/M/D'),
-            xMin: getMoment(data.charts.cases.x_axis.min).format('YYYY/M/D'),
-          },
-          fitness: getNumberLabel(data.charts.fitness),
-        },
-        effect: {
-          time: {
-            conforming: isNullTime(data.effect.time.conforming),
-            not_conforming: isNullTime(data.effect.time.not_conforming),
-            difference: (isNullTime(data.effect.time.conforming) - isNullTime(data.effect.time.not_conforming)).toFixed(1),
-          },
-          tasks: {
-            conforming: isNullCase(data.effect.tasks.conforming),
-            not_conforming: isNullCase(data.effect.tasks.not_conforming),
-            difference: (isNullCase(data.effect.tasks.conforming) - isNullCase(data.effect.tasks.not_conforming)).toFixed(1),
-          },
-        },
-        loops: isNullLoops(data.loops),
-        issues: isNullIsssue(data.issues),
-        timeTrend: {
-          not_conforming: getNumberLabel(data.counts.not_conforming),
-          total: getNumberLabel(sum),
-          chart: null,
-          xMax: null,
-          xMin: null,
-          yMax: null,
-          yMin: null,
-        }
-      };
+  if (newData.charts.time) {
+    result.timeTrend.chart = setLineChartData(newData.charts.time.data, newData.charts.time.x_axis.max, newData.charts.time.x_axis.min, false, newData.charts.time.y_axis.max, newData.charts.time.y_axis.min);
+    result.timeTrend.xMax = newData.charts.time.x_axis.max;
+    result.timeTrend.xMin = newData.charts.time.x_axis.min;
+    result.timeTrend.yMax = newData.charts.time.y_axis.max;
+    result.timeTrend.yMin = newData.charts.time.y_axis.min;
+  }
 
-      if (data.charts.time) {
-        result.timeTrend.chart = setLineChartData(data.charts.time.data, data.charts.time.x_axis.max, data.charts.time.x_axis.min, false, data.charts.time.y_axis.max, data.charts.time.y_axis.min);
-        result.timeTrend.xMax = data.charts.time.x_axis.max;
-        result.timeTrend.xMin = data.charts.time.x_axis.min;
-        result.timeTrend.yMax = data.charts.time.y_axis.max;
-        result.timeTrend.yMin = data.charts.time.y_axis.min;
+  setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
+  setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, newData.charts.cases.x_axis.max, newData.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
+  if(newData.charts.time) setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMax, result.timeTrend.yMin); // 建立圖表 Time Chart.js
+  return result;
+};
+
+/**
+ * set Rate Chart Data
+ * @param   {object} data new rate chart data
+ */
+const setRateChartData = (chartData) => {
+  rateChartData.value = {
+    labels:[],
+    datasets: [
+      {
+        label: 'Rate',
+        data: chartData,
+        fill: false,
+        pointRadius: 0, // 隱藏點
+        pointHoverRadius: 0, // 隱藏點的 hover
+        tension: 0.4,
+        borderColor: '#0099FF',
+        x: 'x',
+        y: 'y',
       }
+    ]
+  };
+  rateChartOptions.value = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 0.6,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false, // 圖例
+      tooltip: {
+        enabled: false // 隱藏 工具提示框
+      }
+    },
+    scales: {
+      x: {
+        type: 'time',
+        ticks: {
+          display: false,
+        },
+        grid: {
+          display: false, // 隱藏 x 軸網格
+        },
+        border: {
+          color: '#334155',
+        },
+      },
+      y: {
+        beginAtZero: true, // scale 包含 0
+        suggestedMin: 0,
+        suggestedMax: 1,
+        ticks:{ // 設定間隔數值
+          includeBounds: true,
+          color: '#334155',
+          align: 'inner',
+          callback: function(value, index, values) {
+            if (value === 0 || value === 1) {
+              return `${value * 100}%`;
+            }
+          },
+        },
+        grid: {
+          display: false, // 隱藏 y 軸網格
+        },
+        border: {
+          color: '#334155',
+        },
+      },
+    },
+  };
+};
 
-      this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
-      this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
-      if(data.charts.time) this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMax, result.timeTrend.yMin); // 建立圖表 Time Chart.js
-      return result;
+/**
+ * set Cases Chart Data
+ * @param   {array} conformingData new cases chart conforming data
+ * @param   {array} notConformingData new cases chart not conforming data
+ * @param   {number} xMax new cases chart xMax
+ * @param   {number} xMin new cases chart xMin
+ */
+const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
+  casesChartData.value = {
+    datasets: [
+      {
+        type: 'bar',
+        label: 'Conforming',
+        data: conformingData,
+        backgroundColor: '#0099FF',
+      },
+      {
+        type: 'bar',
+        label: 'Not Conforming',
+        data: notConformingData,
+        backgroundColor: '#FFAA44',
+      },
+    ]
+  };
+  casesChartOptions.value = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 0.8,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
     },
-    /**
-     * set Rate Chart Data
-     * @param   {object} data new rate chart data
-     */
-    setRateChartData(data){
-      this.rateChartData = {
-        labels:[],
-        datasets: [
-          {
-            label: 'Rate',
-            data: data,
-            fill: false,
-            pointRadius: 0, // 隱藏點
-            pointHoverRadius: 0, // 隱藏點的 hover
-            tension: 0.4,
-            borderColor: '#0099FF',
-            x: 'x',
-            y: 'y',
-          }
-        ]
-      };
-      this.rateChartOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        aspectRatio: 0.6,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            enabled: false // 隱藏 工具提示框
-          }
-        },
-        scales: {
-          x: {
-            type: 'time',
-            // time: {
-            //   max: '2022-01-12T02:29:42',
-            //   min: '2022-01-03T00:56:25',
-            //   displayFormats: {
-            //     day: 'yyyy/M/d'
-            //   }
-            // },
-            ticks: {
-              display: false,
-              // maxRotation: 0, // 不旋轉 lable 0~50
-              // color: '#334155',
-              // source: 'data',
-              // align: 'inner', // label 在軸線的位置
-              // callback: function(value, index, values) {
-              //   return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
-              // },
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-            border: {
-              color: '#334155',
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            suggestedMin: 0,
-            suggestedMax: 1,
-            ticks:{ // 設定間隔數值
-              includeBounds: true,
-              color: '#334155',
-              align: 'inner',
-              callback: function(value, index, values) {
-                if (value === 0 || value === 1) {
-                  return `${value * 100}%`;
-                }
-              },
-            },
-            grid: {
-              display: false, // 隱藏 y 軸網格
-            },
-            border: {
-              color: '#334155',
-            },
-          },
-        },
-      };
+    plugins: {
+      tooltips: {
+        mode: 'index',
+        intersect: false
+      },
+      legend: false, // 圖例
     },
-    /**
-     * set Cases Chart Data
-     * @param   {array} data new cases chart conforming data
-     * @param   {array} data new cases chart not conforming data
-     * @param   {number} data new cases chart xMax
-     * @param   {number} data new cases chart xMin
-     */
-    setCasesChartData(conformingData, notConformingData, xMax, xMin){
-      this.casesChartData = {
-        datasets: [
-          {
-            type: 'bar',
-            label: 'Conforming',
-            data: conformingData,
-            backgroundColor: '#0099FF',
-          },
-          {
-            type: 'bar',
-            label: 'Not Conforming',
-            data: notConformingData,
-            backgroundColor: '#FFAA44',
-          },
-        ]
-      };
-      this.casesChartOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        aspectRatio: 0.8,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
+    scales: {
+      x: {
+        stacked: true,
+        ticks: {
+          display: false,
         },
-        plugins: {
-          tooltips: {
-            mode: 'index',
-            intersect: false
-          },
-          legend: false, // 圖例
+        grid: {
+          display: false, // 隱藏 x 軸網格
         },
-        scales: {
-          x: {
-            stacked: true,
-            ticks: {
-              display: false,
-              // autoSkip: false,
-              // maxRotation: 0, // 不旋轉 lable 0~50
-              // color: '#334155',
-              // align: 'center', // label 在軸線的位置
-              // callback: function(value, index, values) {
-              //   if(index === 0) return getMoment(xMin).format('yyyy/M/D');
-              //   else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
-              //    else return null;
-              // },
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-            border: {
-              color: '#334155',
-            },
-          },
-          y: {
-            stacked: true,
-            beginAtZero: true, // scale 包含 0
-            ticks:{
-              color: '#334155',
-              align: 'inner',
-              callback: function(value, index, values) {
-                if (index === 0 || index === values.length - 1) {
-                  return shortScaleNumber(value);
-                }
-              },
-            },
-            grid: {
-              // display: false, // 隱藏 y 軸網格
-              color: function(context) {
-                return context.tick.value === 0 ? '#334155' : null;
-              },
-              drawTicks: false,
-            },
-            border: {
-              color: '#334155',
-            },
+        border: {
+          color: '#334155',
+        },
+      },
+      y: {
+        stacked: true,
+        beginAtZero: true, // scale 包含 0
+        ticks:{
+          color: '#334155',
+          align: 'inner',
+          callback: function(value, index, values) {
+            if (index === 0 || index === values.length - 1) {
+              return shortScaleNumber(value);
+            }
           },
         },
-      };
+        grid: {
+          // display: false, // 隱藏 y 軸網格
+          color: function(context) {
+            return context.tick.value === 0 ? '#334155' : null;
+          },
+          drawTicks: false,
+        },
+        border: {
+          color: '#334155',
+        },
+      },
     },
-    /**
-     * set Time Trend chart data
-     * @param   {array} data Time Trend chart conforming data
-     * @param   {number} xMax Time Trend xMax
-     * @param   {number} xMin Time Trend xMin
-     * @param   {number} yMax Time Trend yMax
-     * @param   {number} yMin Time Trend yMin
-     */
-    setTimeChartData(data, xMax, xMin, yMax, yMin) {
-      const max = yMax * 1.1;
-      const xVal = timeRange(xMin, xMax, 100);
-      const yVal = yTimeRange(data, 100, yMin, yMax);
-      xVal.map((x, index) => ({ x, y: yVal[index] }));
-      let formattedXVal = xVal.map(value => formatTime(value));
-      formattedXVal = formatMaxTwo(formattedXVal);
-      const selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min);
-      const selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max);
-      const start = selectTimeMinIndex;
-      const end = selectTimeMaxIndex;
-      const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
-      const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
+  };
+};
 
-      this.timeChartData = {
-        labels: formattedXVal,
-        datasets: [
-          {
-            label: 'Conforming',
-            data: yVal,
-            fill: true,
-            showLine: false,
-            tension: 0.4,
-            backgroundColor: 'rgba(0,153,255)',
-            pointRadius: 0,
-            pointHitRadius: 0,
-            spanGaps: true,
-            segment: {
-              backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(255,170,68)'),
-             },
-            x: 'x',
-            y: 'y',
-          },
-        ]
-      };
+/**
+ * set Time Trend chart data
+ * @param   {array} chartData Time Trend chart conforming data
+ * @param   {number} xMax Time Trend xMax
+ * @param   {number} xMin Time Trend xMin
+ * @param   {number} yMax Time Trend yMax
+ * @param   {number} yMin Time Trend yMin
+ */
+const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
+  const max = yMax * 1.1;
+  const xVal = timeRange(xMin, xMax, 100);
+  const yVal = yTimeRange(chartData, 100, yMin, yMax);
+  xVal.map((x, index) => ({ x, y: yVal[index] }));
+  let formattedXVal = xVal.map(value => formatTime(value));
+  formattedXVal = formatMaxTwo(formattedXVal);
+  const selectTimeMinIndex = getXIndex(xVal, selectDurationTime.value.min);
+  const selectTimeMaxIndex = getXIndex(xVal, selectDurationTime.value.max);
+  const start = selectTimeMinIndex;
+  const end = selectTimeMaxIndex;
+  const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
+  const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
 
-      this.timeChartOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: false,
-        },
-        scales: {
-          x: {
-            ticks: {
-              // autoSkip: false, // 彈性顯示或全部顯示 lable
-              // autoSkipPadding: 4, // lable 之間的距離
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#334155',
-              display: true,
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-            title: {
-              display: true,
-              text: 'Time',
-              color: 'rgba(100,116,139)',
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            max: max,
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              stepSize: max / 4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              drawTicks: false // 隱藏左側多的空間
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-            title: {
-              display: true,
-              text: 'Occurrences',
-              color: 'rgba(100,116,139)',
-            },
-          },
-        },
-      };
+  timeChartData.value = {
+    labels: formattedXVal,
+    datasets: [
+      {
+        label: 'Conforming',
+        data: yVal,
+        fill: true,
+        showLine: false,
+        tension: 0.4,
+        backgroundColor: 'rgba(0,153,255)',
+        pointRadius: 0,
+        pointHitRadius: 0,
+        spanGaps: true,
+        segment: {
+          backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(255,170,68)'),
+         },
+        x: 'x',
+        y: 'y',
+      },
+    ]
+  };
+
+  timeChartOptions.value = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
     },
-  },
-  created() {
-    this.$emitter.on('coverPlate', boolean => {
-      this.isCoverPlate = boolean;
-    });
-    // 取得 selectTimeTange 給 Tiem Trend 使用
-    this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
-  },
-}
+    plugins: {
+      legend: false, // 圖例
+      tooltip: false,
+    },
+    scales: {
+      x: {
+        ticks: {
+          maxRotation: 0, // 不旋轉 lable 0~50
+          color: '#334155',
+          display: true,
+        },
+        grid: {
+          display: false, // 隱藏 x 軸網格
+        },
+        title: {
+          display: true,
+          text: 'Time',
+          color: 'rgba(100,116,139)',
+        },
+      },
+      y: {
+        beginAtZero: true, // scale 包含 0
+        max: max,
+        ticks: { // 設定間隔數值
+          display: false, // 隱藏數值，只顯示格線
+          stepSize: max / 4,
+        },
+        grid: {
+          color: 'rgba(100,116,139)',
+          drawTicks: false // 隱藏左側多的空間
+        },
+        border: {
+          display: false, // 隱藏左側多出來的線
+        },
+        title: {
+          display: true,
+          text: 'Occurrences',
+          color: 'rgba(100,116,139)',
+        },
+      },
+    },
+  };
+};
+
+// watch
+watch(conformanceTempReportData, (newValue) => {
+  if(newValue?.rule && newValue.rule.min !== null) {
+    selectDurationTime.value = {
+      min: newValue.rule.min,
+      max: newValue.rule.max,
+    }
+  }
+  data.value = setConformanceTempReportData(newValue);
+});
+
+// created - emitter listeners
+emitter.on('coverPlate', boolean => {
+  isCoverPlate.value = boolean;
+});
+// 取得 selectTimeTange 給 Tiem Trend 使用
+emitter.on('timeRangeMaxMin', newData => selectDurationTime.value = newData);
 </script>
 <style scoped>
 :deep(.disc) {
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 595be74..7610dc1 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -80,7 +80,7 @@
         </button>
         <button id="btn_apply_conformance" type="button" class="btn btn-sm "
           @click="submitConformance"
-          :class="this.isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
+          :class="isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
           :disabled="isApplyBtnDisabled"
         >
           {{ i18next.t("Global.Apply") }}
@@ -121,9 +121,12 @@
 </section>
 </template>
 
-<script>
-import { storeToRefs, mapState, mapActions, } from 'pinia';
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useToast } from 'vue-toast-notification';
 import i18next from '@/i18n/i18n';
+import emitter from '@/utils/emitter';
 import { useConformanceInputStore } from '@/stores/conformanceInput';
 import { useLoadingStore } from '@/stores/loading';
 import { useConformanceStore } from '@/stores/conformance';
@@ -132,1374 +135,1380 @@ import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
 import ConformanceTimeRange from './ConformanceSidebar/ConformanceTimeRange.vue';
 import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';
 
-export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const conformanceStore = useConformanceStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole,
-      cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole,
-      cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole,
-      cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected,
-      conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-      conformanceTempReportData
-    } = storeToRefs(conformanceStore);
+const $toast = useToast();
 
-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode,
-      selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo,
-      conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart,
-      cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole,
-      cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE,
-      cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected,
-      conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-      conformanceTempReportData
-    };
-  },
-  data() {
-    return {
-      i18next: i18next,
-      isMainBtnDisabled: true,
-      isShowBarOpen: false,
-      selectConformanceTask: null,
-      selectConformanceStartAndEnd: null, // Activity sequence
-      selectCfmSeqStart: null,
-      selectCfmSeqEnd: null,
-      selectCfmSeqDirectly: [],
-      selectCfmSeqEventually: [],
-      selectDurationData: null, // Activity duration
-      selectDurationTime: { min: 0, max: 0},
-      selectTimeRangeMin: 0, // Time Range min
-      selectTimeRangeMax: 0, // Time Range max
-      selectCfmPtEteStart: null, // Processing time
-      selectCfmPtEteEnd: null,
-      selectCfmPtEteSEStart: null,
-      selectCfmPtEteSEEnd: null,
-      selectCfmPtPStart: null,
-      selectCfmPtPEnd: null,
-      selectCfmPtPSEStart: null,
-      selectCfmPtPSEEnd: null,
-      selectCfmWtEteStart: null, // Waiting time
-      selectCfmWtEteEnd: null,
-      selectCfmWtEteSEStart: null,
-      selectCfmWtEteSEEnd: null,
-      selectCfmWtPStart: null,
-      selectCfmWtPEnd: null,
-      selectCfmWtPSEStart: null,
-      selectCfmWtPSEEnd: null,
-      selectCfmCtEteStart: null, // Cycle time
-      selectCfmCtEteEnd: null,
-      selectCfmCtEteSEStart: null,
-      selectCfmCtEteSEEnd: null,
-      isAlreadySubmit: false,
-      isSubmittedData: null, // 已 Apply 後，沒有重新改變規則的 Data
-      isSubmitTask: null,
-      isSubmitStartAndEnd: null, // Activity sequence
-      isSubmitCfmSeqDirectly: [],
-      isSubmitCfmSeqEventually: [],
-      isSubmitDurationData: null, // Activity duration
-      isSubmitCfmPtEteStart: null, // Processing time
-      isSubmitCfmPtEteEnd: null,
-      isSubmitCfmPtEteSE: null,
-      isSubmitCfmPtPStart: null,
-      isSubmitCfmPtPEnd: null,
-      isSubmitCfmPtPSE: null,
-      isSubmitCfmWtEteStart: null, // Waiting time
-      isSubmitCfmWtEteEnd: null,
-      isSubmitCfmWtEteSE: null,
-      isSubmitCfmWtPStart: null,
-      isSubmitCfmWtPEnd: null,
-      isSubmitCfmWtPSE: null,
-      isSubmitCfmCtEteStart: null, // Cycle time
-      isSubmitCfmCtEteEnd: null,
-      isSubmitCfmCtEteSE: null,
-      isSubmitDurationTime: { base: {}, rule: {}}, // Activity duration Time Range
-      isSubmitTimeCfmPtEteAll: { base: {}, rule: {}}, // Processing time Time Range
-      isSubmitTimeCfmPtEteStart: { base: {}, rule: {}},
-      isSubmitTimeCfmPtEteEnd: { base: {}, rule: {}},
-      isSubmitTimeCfmPtEteSE: { base: {}, rule: {}},
-      isSubmitTimeCfmPtPStart: { base: {}, rule: {}},
-      isSubmitTimeCfmPtPEnd: { base: {}, rule: {}},
-      isSubmitTimeCfmPtPSE: { base: {}, rule: {}},
-      isSubmitTimeCfmWtEteAll: { base: {}, rule: {}}, // Waiting time Time Range
-      isSubmitTimeCfmWtEteStart: { base: {}, rule: {}},
-      isSubmitTimeCfmWtEteEnd: { base: {}, rule: {}},
-      isSubmitTimeCfmWtEteSE: { base: {}, rule: {}},
-      isSubmitTimeCfmWtPStart: { base: {}, rule: {}},
-      isSubmitTimeCfmWtPEnd: { base: {}, rule: {}},
-      isSubmitTimeCfmWtPSE: { base: {}, rule: {}},
-      isSubmitTimeCfmCtEteAll: { base: {}, rule: {}}, // Cycle time Time Range
-      isSubmitTimeCfmCtEteStart: { base: {}, rule: {}},
-      isSubmitTimeCfmCtEteEnd: { base: {}, rule: {}},
-      isSubmitTimeCfmCtEteSE: { base: {}, rule: {}},
-      isSubmitShowDataSeq: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      }, // To Start & End 連動資料
-      isSubmitShowDataPtEte: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      },
-      isSubmitShowDataPtP: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      },
-      isSubmitShowDataWtEte: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      },
-      isSubmitShowDataWtP: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      },
-      isSubmitShowDataCt: {
-        task: null,
-        taskStart: null,
-        taskEnd: null,
-        isStartSelected: null,
-        isEndSelected: null
-      },
+const loadingStore = useLoadingStore();
+const conformanceStore = useConformanceStore();
+const conformanceInputStore = useConformanceInputStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
+  selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole,
+  cfmPtEteStart: cfmPtEteStartStore, cfmPtEteEnd: cfmPtEteEndStore, cfmPtEteSE,
+  cfmPtPStart: cfmPtPStartStore, cfmPtPEnd: cfmPtPEndStore, cfmPtPSE,
+  cfmWtEteWhole, cfmWtEteStart: cfmWtEteStartStore, cfmWtEteEnd: cfmWtEteEndStore,
+  cfmWtEteSE, cfmWtPStart: cfmWtPStartStore, cfmWtPEnd: cfmWtPEndStore, cfmWtPSE,
+  cfmCtEteWhole, cfmCtEteStart: cfmCtEteStartStore, cfmCtEteEnd: cfmCtEteEndStore,
+  cfmCtEteSE, isStartSelected, isEndSelected,
+  conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
+  conformanceTempReportData
+} = storeToRefs(conformanceStore);
+const { activityRadioData } = storeToRefs(conformanceInputStore);
+
+// data
+const isMainBtnDisabled = ref(true);
+const isShowBarOpen = ref(false);
+const selectConformanceTask = ref(null);
+const selectConformanceStartAndEnd = ref(null); // Activity sequence
+const selectCfmSeqStart = ref(null);
+const selectCfmSeqEnd = ref(null);
+const selectCfmSeqDirectly = ref([]);
+const selectCfmSeqEventually = ref([]);
+const selectDurationData = ref(null); // Activity duration
+const selectDurationTime = ref({ min: 0, max: 0});
+const selectTimeRangeMin = ref(0); // Time Range min
+const selectTimeRangeMax = ref(0); // Time Range max
+const selectCfmPtEteStart = ref(null); // Processing time
+const selectCfmPtEteEnd = ref(null);
+const selectCfmPtEteSEStart = ref(null);
+const selectCfmPtEteSEEnd = ref(null);
+const selectCfmPtPStart = ref(null);
+const selectCfmPtPEnd = ref(null);
+const selectCfmPtPSEStart = ref(null);
+const selectCfmPtPSEEnd = ref(null);
+const selectCfmWtEteStart = ref(null); // Waiting time
+const selectCfmWtEteEnd = ref(null);
+const selectCfmWtEteSEStart = ref(null);
+const selectCfmWtEteSEEnd = ref(null);
+const selectCfmWtPStart = ref(null);
+const selectCfmWtPEnd = ref(null);
+const selectCfmWtPSEStart = ref(null);
+const selectCfmWtPSEEnd = ref(null);
+const selectCfmCtEteStart = ref(null); // Cycle time
+const selectCfmCtEteEnd = ref(null);
+const selectCfmCtEteSEStart = ref(null);
+const selectCfmCtEteSEEnd = ref(null);
+const isAlreadySubmit = ref(false);
+const isSubmittedData = ref(null); // 已 Apply 後，沒有重新改變規則的 Data
+const isSubmitTask = ref(null);
+const isSubmitStartAndEnd = ref(null); // Activity sequence
+const isSubmitCfmSeqDirectly = ref([]);
+const isSubmitCfmSeqEventually = ref([]);
+const isSubmitDurationData = ref(null); // Activity duration
+const isSubmitCfmPtEteStart = ref(null); // Processing time
+const isSubmitCfmPtEteEnd = ref(null);
+const isSubmitCfmPtEteSE = ref(null);
+const isSubmitCfmPtPStart = ref(null);
+const isSubmitCfmPtPEnd = ref(null);
+const isSubmitCfmPtPSE = ref(null);
+const isSubmitCfmWtEteStart = ref(null); // Waiting time
+const isSubmitCfmWtEteEnd = ref(null);
+const isSubmitCfmWtEteSE = ref(null);
+const isSubmitCfmWtPStart = ref(null);
+const isSubmitCfmWtPEnd = ref(null);
+const isSubmitCfmWtPSE = ref(null);
+const isSubmitCfmCtEteStart = ref(null); // Cycle time
+const isSubmitCfmCtEteEnd = ref(null);
+const isSubmitCfmCtEteSE = ref(null);
+const isSubmitDurationTime = ref({ base: {}, rule: {}}); // Activity duration Time Range
+const isSubmitTimeCfmPtEteAll = ref({ base: {}, rule: {}}); // Processing time Time Range
+const isSubmitTimeCfmPtEteStart = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmPtEteEnd = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmPtEteSE = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmPtPStart = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmPtPEnd = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmPtPSE = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtEteAll = ref({ base: {}, rule: {}}); // Waiting time Time Range
+const isSubmitTimeCfmWtEteStart = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtEteEnd = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtEteSE = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtPStart = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtPEnd = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmWtPSE = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmCtEteAll = ref({ base: {}, rule: {}}); // Cycle time Time Range
+const isSubmitTimeCfmCtEteStart = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmCtEteEnd = ref({ base: {}, rule: {}});
+const isSubmitTimeCfmCtEteSE = ref({ base: {}, rule: {}});
+const isSubmitShowDataSeq = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+}); // To Start & End 連動資料
+const isSubmitShowDataPtEte = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+});
+const isSubmitShowDataPtP = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+});
+const isSubmitShowDataWtEte = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+});
+const isSubmitShowDataWtP = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+});
+const isSubmitShowDataCt = ref({
+  task: null,
+  taskStart: null,
+  taskEnd: null,
+  isStartSelected: null,
+  isEndSelected: null
+});
+
+// Map for dynamic field access in handleSimpleSelection
+const selectFieldRefs = {
+  selectCfmPtEteStart,
+  selectCfmPtEteEnd,
+  selectCfmPtPStart,
+  selectCfmPtPEnd,
+  selectCfmWtEteStart,
+  selectCfmWtEteEnd,
+  selectCfmWtPStart,
+  selectCfmWtPEnd,
+  selectCfmCtEteStart,
+  selectCfmCtEteEnd,
+};
+
+// computed
+const notShowActList = computed(() => {
+  return (selectedRuleType.value === 'Activity sequence' && selectedActivitySequence.value === 'Sequence'
+  && (selectedMode.value === 'Short loop(s)' || selectedMode.value === 'Self loop(s)'))
+  || (selectedRuleType.value === 'Processing time' && selectedProcessScope.value === 'End to end'
+    && selectedActSeqMore.value === 'All')
+  || (selectedRuleType.value === 'Waiting time' && selectedProcessScope.value === 'End to end'
+    && selectedActSeqMore.value === 'All')
+  || (selectedRuleType.value === 'Cycle time' && selectedProcessScope.value === 'End to end'
+    && selectedActSeqMore.value === 'All')
+});
+
+/**
+ * Apply button is disabled or not
+ */
+const isApplyBtnDisabled = computed(() => {
+  let disabledBool = true;
+
+  switch (selectedRuleType.value) {
+      case 'Have activity':
+          disabledBool = checkHaveActivity();
+          break;
+      case 'Activity sequence':
+          disabledBool = checkActivitySequence();
+          break;
+      case 'Activity duration':
+          disabledBool = checkActivityDuration();
+          break;
+      case 'Processing time':
+          disabledBool = checkProcessingTime();
+          break;
+      case 'Waiting time':
+          disabledBool = checkWaitingTime();
+          break;
+      case 'Cycle time':
+          disabledBool = checkCycleTime();
+          break;
+      default:
+          break;
+  }
+
+  isMainBtnDisabled.value = disabledBool;
+  return isMainBtnDisabled.value;
+});
+
+// watch
+watch(isSubmittedData, (newValue) => {
+  isSubmittedData.value = newValue;
+});
+
+// 打開 rule 檔要顯示儲存的選項、規則、時間
+watch(conformanceTempReportData, (newValue) => {
+  setTimeout(() => {
+    if(newValue !== null) {
+      const rule = newValue.rule;
+
+      isSubmittedData.value = newValue.rule;
+      isAlreadySubmit.value = true;
+      switch (rule.type) {
+        case 'contains-tasks': // Rule Type 選 Have activity 的行為
+          selectedRuleType.value = 'Have activity';
+          isSubmitTask.value = rule.tasks;
+          break;
+        case 'start-end': // Rule Type 選 Activity sequence 的行為
+          selectedRuleType.value = 'Activity sequence';
+          selectedActivitySequence.value = 'Start & End';
+          isSubmitStartAndEnd.value = [
+            {category: 'Start', task: rule.starts_with},
+            {category: 'End', task: rule.ends_with},
+          ];
+          break;
+        case 'directly-follows': // Activity Sequence 選 Sequence 的行為
+          selectedRuleType.value = 'Activity sequence';
+          selectedActivitySequence.value = 'Sequence';
+          selectedMode.value = 'Directly follows';
+          isSubmitCfmSeqDirectly.value = rule.task_seq;
+          break;
+        case 'eventually-follows':
+          selectedRuleType.value = 'Activity sequence';
+          selectedActivitySequence.value = 'Sequence';
+          selectedMode.value = 'Eventually follows';
+          isSubmitCfmSeqEventually.value = rule.task_seq;
+          break;
+        case 'short-loops':
+          selectedRuleType.value = 'Activity sequence';
+          selectedActivitySequence.value = 'Sequence';
+          selectedMode.value = 'Short loop(s)';
+          break;
+        case 'self-loops':
+          selectedRuleType.value = 'Activity sequence';
+          selectedActivitySequence.value = 'Sequence';
+          selectedMode.value = 'Self loop(s)';
+          break;
+        case 'task-duration': // Rule Type 選 Activity duration 的行為
+          selectedRuleType.value = 'Activity duration';
+          selectDurationData.value = [rule.task];
+          isSubmitDurationData.value = [rule.task];
+          isSubmitDurationTime.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'All';
+          isSubmitTimeCfmPtEteAll.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-end-to-end-starts-with':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start';
+          selectCfmPtEteStart.value = rule.task;
+          isSubmitCfmPtEteStart.value = [
+            {category: 'Start', task: rule.task}
+          ];
+          isSubmitTimeCfmPtEteStart.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-end-to-end-ends-with':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'End';
+          selectCfmPtEteEnd.value = rule.task;
+          isSubmitCfmPtEteEnd.value = [
+            {category: 'End', task: rule.task}
+          ];
+          isSubmitTimeCfmPtEteEnd.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-end-to-end-start-end':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start & End';
+          isSubmitCfmPtEteSE.value = [
+            {category: 'Start', task: rule.start},
+            {category: 'End', task: rule.end}
+          ];
+          isSubmitTimeCfmPtEteSE.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          break;
+        case 'processing-time-partial-starts-with':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'From';
+          selectCfmPtPStart.value = rule.task;
+          isSubmitCfmPtPStart.value = [
+            {category: 'From', task: rule.task}
+          ];
+          isSubmitTimeCfmPtPStart.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-partial-ends-with':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'To';
+          selectCfmPtPEnd.value = rule.task;
+          isSubmitCfmPtPEnd.value = [
+            {category: 'To', task: rule.task}
+          ];
+          isSubmitTimeCfmPtPEnd.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'processing-time-partial-start-end':
+          selectedRuleType.value = 'Processing time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'From & To';
+          isSubmitCfmPtPSE.value = [
+            {category: 'From', task: rule.start},
+            {category: 'To', task: rule.end}
+          ];
+          isSubmitTimeCfmPtPSE.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          break;
+        case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'All';
+          isSubmitTimeCfmWtEteAll.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'waiting-time-end-to-end-starts-with':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start';
+          selectCfmWtEteStart.value = rule.task;
+          isSubmitCfmWtEteStart.value = [
+            {category: 'Start', task: rule.task}
+          ];
+          isSubmitTimeCfmWtEteStart.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'waiting-time-end-to-end-ends-with':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'End';
+          selectCfmWtEteEnd.value = rule.task;
+          isSubmitCfmWtEteEnd.value = [
+            {category: 'End', task: rule.task}
+          ];
+          isSubmitTimeCfmWtEteEnd.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'waiting-time-end-to-end-start-end':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start & End';
+          isSubmitCfmWtEteSE.value = [
+            {category: 'Start', task: rule.start},
+            {category: 'End', task: rule.end}
+          ];
+          isSubmitTimeCfmWtEteSE.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          break;
+        case 'waiting-time-partial-starts-with':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'From';
+          selectCfmWtPStart.value = rule.task;
+          isSubmitCfmWtPStart.value = [
+            {category: 'From', task: rule.task}
+          ];
+          isSubmitTimeCfmWtPStart.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'waiting-time-partial-ends-with':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'To';
+          selectCfmWtPEnd.value = rule.task;
+          isSubmitCfmWtPEnd.value = [
+            {category: 'To', task: rule.task}
+          ];
+          isSubmitTimeCfmWtPEnd.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'waiting-time-partial-start-end':
+          selectedRuleType.value = 'Waiting time';
+          selectedProcessScope.value = 'Partial';
+          selectedActSeqFromTo.value = 'From & To';
+          isSubmitCfmWtPSE.value = [
+            {category: 'From', task: rule.start},
+            {category: 'To', task: rule.end}
+          ];
+          isSubmitTimeCfmWtPSE.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          break;
+        case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為
+          selectedRuleType.value = 'Cycle time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'All';
+          isSubmitTimeCfmCtEteAll.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'cycle-time-end-to-end-starts-with':
+          selectedRuleType.value = 'Cycle time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start';
+          selectCfmCtEteStart.value = rule.task;
+          isSubmitCfmCtEteStart.value = [
+            {category: 'Start', task: rule.task}
+          ];
+          isSubmitTimeCfmCtEteStart.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'cycle-time-end-to-end-ends-with':
+          selectedRuleType.value = 'Cycle time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'End';
+          selectCfmCtEteEnd.value = rule.task;
+          isSubmitCfmCtEteEnd.value = [
+            {category: 'End', task: rule.task}
+          ];
+          isSubmitTimeCfmCtEteEnd.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          break;
+        case 'cycle-time-end-to-end-start-end':
+          selectedRuleType.value = 'Cycle time';
+          selectedProcessScope.value = 'End to end';
+          selectedActSeqMore.value = 'Start & End';
+          isSubmitCfmCtEteSE.value = [
+            {category: 'Start', task: rule.start},
+            {category: 'End', task: rule.end}
+          ];
+          isSubmitTimeCfmCtEteSE.value = {
+            base: newValue.charts.time.x_axis,
+            rule: { min: rule.min, max: rule.max},
+          };
+          isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(rule.start, rule.end);
+          break;
+      }
     }
-  },
-  components: {
-    ConformanceRadioGroup,
-    ConformanceShowBar,
-    ConformanceTimeRange,
-    ConformanceSelectResult,
-  },
-  computed: {
-    notShowActList: function() {
-      return (this.selectedRuleType === 'Activity sequence' && this.selectedActivitySequence === 'Sequence' 
-      && (this.selectedMode === 'Short loop(s)' || this.selectedMode === 'Self loop(s)')) 
-      || (this.selectedRuleType === 'Processing time' && this.selectedProcessScope === 'End to end' 
-        && this.selectedActSeqMore === 'All') 
-      || (this.selectedRuleType === 'Waiting time' && this.selectedProcessScope === 'End to end' 
-        && this.selectedActSeqMore === 'All') 
-      || (this.selectedRuleType === 'Cycle time' && this.selectedProcessScope === 'End to end' 
-        && this.selectedActSeqMore === 'All')
-    },
-    /**
-     * Apply button is disabled or not
-     */
-     isApplyBtnDisabled() {
-        let disabledBool = true;
+  }, 300);
+});
 
-        switch (this.selectedRuleType) {
-            case 'Have activity':
-                disabledBool = this.checkHaveActivity();
-                break;
-            case 'Activity sequence':
-                disabledBool = this.checkActivitySequence();
-                break;
-            case 'Activity duration':
-                disabledBool = this.checkActivityDuration();
-                break;
-            case 'Processing time':
-                disabledBool = this.checkProcessingTime();
-                break;
-            case 'Waiting time':
-                disabledBool = this.checkWaitingTime();
-                break;
-            case 'Cycle time':
-                disabledBool = this.checkCycleTime();
-                break;
-            default:
-                break;
-        }
-
-        this.isMainBtnDisabled = disabledBool;
-        return this.isMainBtnDisabled;
-    },
-    ...mapState(useConformanceInputStore, ['activityRadioData']),
-  },
-  watch: {
-    isSubmittedData: function(newValue) {
-      this.isSubmittedData = newValue;
-    },
-    // 打開 rule 檔要顯示儲存的選項、規則、時間
-    conformanceTempReportData: {
-      handler: function(newValue) {
-        setTimeout(() => {
-          if(newValue !== null) {
-            const rule = newValue.rule;
-
-            this.isSubmittedData = newValue.rule;
-            this.isAlreadySubmit = true;
-            switch (rule.type) {
-              case 'contains-tasks': // Rule Type 選 Have activity 的行為
-                this.selectedRuleType = 'Have activity';
-                this.isSubmitTask = rule.tasks;
-                break;
-              case 'start-end': // Rule Type 選 Activity sequence 的行為
-                this.selectedRuleType = 'Activity sequence';
-                this.selectedActivitySequence = 'Start & End';
-                this.isSubmitStartAndEnd = [
-                  {category: 'Start', task: rule.starts_with},
-                  {category: 'End', task: rule.ends_with},
-                ];
-                break;
-              case 'directly-follows': // Activity Sequence 選 Sequence 的行為
-                this.selectedRuleType = 'Activity sequence';
-                this.selectedActivitySequence = 'Sequence';
-                this.selectedMode = 'Directly follows';
-                this.isSubmitCfmSeqDirectly = rule.task_seq;
-                break;
-              case 'eventually-follows':
-                this.selectedRuleType = 'Activity sequence';
-                this.selectedActivitySequence = 'Sequence';
-                this.selectedMode = 'Eventually follows';
-                this.isSubmitCfmSeqEventually = rule.task_seq;
-                break;
-              case 'short-loops':
-                this.selectedRuleType = 'Activity sequence';
-                this.selectedActivitySequence = 'Sequence';
-                this.selectedMode = 'Short loop(s)';
-                break;
-              case 'self-loops':
-                this.selectedRuleType = 'Activity sequence';
-                this.selectedActivitySequence = 'Sequence';
-                this.selectedMode = 'Self loop(s)';
-                break;
-              case 'task-duration': // Rule Type 選 Activity duration 的行為
-                this.selectedRuleType = 'Activity duration';
-                this.selectDurationData = [rule.task];
-                this.isSubmitDurationData = [rule.task];
-                this.isSubmitDurationTime = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'All';
-                this.isSubmitTimeCfmPtEteAll = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-end-to-end-starts-with':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start';
-                this.selectCfmPtEteStart = rule.task;
-                this.isSubmitCfmPtEteStart = [
-                  {category: 'Start', task: rule.task}
-                ];
-                this.isSubmitTimeCfmPtEteStart = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-end-to-end-ends-with':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'End';
-                this.selectCfmPtEteEnd = rule.task;
-                this.isSubmitCfmPtEteEnd = [
-                  {category: 'End', task: rule.task}
-                ];
-                this.isSubmitTimeCfmPtEteEnd = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-end-to-end-start-end':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start & End';
-                this.isSubmitCfmPtEteSE = [
-                  {category: 'Start', task: rule.start},
-                  {category: 'End', task: rule.end}
-                ];
-                this.isSubmitTimeCfmPtEteSE = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                this.isSubmitShowDataPtEte = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
-                break;
-              case 'processing-time-partial-starts-with':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'From';
-                this.selectCfmPtPStart = rule.task;
-                this.isSubmitCfmPtPStart = [
-                  {category: 'From', task: rule.task}
-                ];
-                this.isSubmitTimeCfmPtPStart = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-partial-ends-with':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'To';
-                this.selectCfmPtPEnd = rule.task;
-                this.isSubmitCfmPtPEnd = [
-                  {category: 'To', task: rule.task}
-                ];
-                this.isSubmitTimeCfmPtPEnd = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'processing-time-partial-start-end':
-                this.selectedRuleType = 'Processing time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'From & To';
-                this.isSubmitCfmPtPSE = [
-                  {category: 'From', task: rule.start},
-                  {category: 'To', task: rule.end}
-                ];
-                this.isSubmitTimeCfmPtPSE = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                this.isSubmitShowDataPtP = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
-                break;
-              case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'All';
-                this.isSubmitTimeCfmWtEteAll = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'waiting-time-end-to-end-starts-with':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start';
-                this.selectCfmWtEteStart = rule.task;
-                this.isSubmitCfmWtEteStart = [
-                  {category: 'Start', task: rule.task}
-                ];
-                this.isSubmitTimeCfmWtEteStart = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'waiting-time-end-to-end-ends-with':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'End';
-                this.selectCfmWtEteEnd = rule.task;
-                this.isSubmitCfmWtEteEnd = [
-                  {category: 'End', task: rule.task}
-                ];
-                this.isSubmitTimeCfmWtEteEnd = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'waiting-time-end-to-end-start-end':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start & End';
-                this.isSubmitCfmWtEteSE = [
-                  {category: 'Start', task: rule.start},
-                  {category: 'End', task: rule.end}
-                ];
-                this.isSubmitTimeCfmWtEteSE = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                this.isSubmitShowDataWtEte = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
-                break;
-              case 'waiting-time-partial-starts-with':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'From';
-                this.selectCfmWtPStart = rule.task;
-                this.isSubmitCfmWtPStart = [
-                  {category: 'From', task: rule.task}
-                ];
-                this.isSubmitTimeCfmWtPStart = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'waiting-time-partial-ends-with':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'To';
-                this.selectCfmWtPEnd = rule.task;
-                this.isSubmitCfmWtPEnd = [
-                  {category: 'To', task: rule.task}
-                ];
-                this.isSubmitTimeCfmWtPEnd = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'waiting-time-partial-start-end':
-                this.selectedRuleType = 'Waiting time';
-                this.selectedProcessScope = 'Partial';
-                this.selectedActSeqFromTo = 'From & To';
-                this.isSubmitCfmWtPSE = [
-                  {category: 'From', task: rule.start},
-                  {category: 'To', task: rule.end}
-                ];
-                this.isSubmitTimeCfmWtPSE = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                this.isSubmitShowDataWtP = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
-                break;
-              case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為
-                this.selectedRuleType = 'Cycle time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'All';
-                this.isSubmitTimeCfmCtEteAll = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'cycle-time-end-to-end-starts-with':
-                this.selectedRuleType = 'Cycle time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start';
-                this.selectCfmCtEteStart = rule.task;
-                this.isSubmitCfmCtEteStart = [
-                  {category: 'Start', task: rule.task}
-                ];
-                this.isSubmitTimeCfmCtEteStart = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'cycle-time-end-to-end-ends-with':
-                this.selectedRuleType = 'Cycle time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'End';
-                this.selectCfmCtEteEnd = rule.task;
-                this.isSubmitCfmCtEteEnd = [
-                  {category: 'End', task: rule.task}
-                ];
-                this.isSubmitTimeCfmCtEteEnd = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                break;
-              case 'cycle-time-end-to-end-start-end':
-                this.selectedRuleType = 'Cycle time';
-                this.selectedProcessScope = 'End to end';
-                this.selectedActSeqMore = 'Start & End';
-                this.isSubmitCfmCtEteSE = [
-                  {category: 'Start', task: rule.start},
-                  {category: 'End', task: rule.end}
-                ];
-                this.isSubmitTimeCfmCtEteSE = {
-                  base: newValue.charts.time.x_axis,
-                  rule: { min: rule.min, max: rule.max},
-                };
-                this.isSubmitShowDataCt = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
-                break;
-            }
-          }
-        }, 300);
-      },
-    }
-  },
-  methods: {
-    /**
-     * get min total seconds
-     * @param {Number} e 最小值總秒數
-     */
-     minTotalSeconds(e) {
-      this.selectTimeRangeMin = e;
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 最大值總秒數
-     */
-    maxTotalSeconds(e) {
-      this.selectTimeRangeMax = e;
-    },
-    /**
-     * select Time Reset
-     */
-    selectTimeReset() {
-      // 不包含 this.selectDurationTime
-      this.selectConformanceTask = null; // Have activity
-      this.selectConformanceStartAndEnd = null; // Activity Sequence
-      this.selectCfmSeqStart = null;
-      this.selectCfmSeqEnd = null;
-      this.selectCfmSeqDirectly = [];
-      this.selectCfmSeqEventually = [];
-      this.selectDurationData = null; // Activity durations
-      this.selectTimeRangeMin = 0; // Time Range min
-      this.selectTimeRangeMax = 0; // Time Range max
-      this.selectCfmPtEteStart = null; // Processing time
-      this.selectCfmPtEteEnd = null;
-      this.selectCfmPtEteSEStart = null;
-      this.selectCfmPtEteSEEnd = null;
-      this.selectCfmPtPStart = null;
-      this.selectCfmPtPEnd = null;
-      this.selectCfmPtPSEStart = null;
-      this.selectCfmPtPSEEnd = null;
-      this.selectCfmWtEteStart = null; // Waiting time
-      this.selectCfmWtEteEnd = null;
-      this.selectCfmWtEteSEStart = null;
-      this.selectCfmWtEteSEEnd = null;
-      this.selectCfmWtPStart = null;
-      this.selectCfmWtPEnd = null;
-      this.selectCfmWtPSEStart = null;
-      this.selectCfmWtPSEEnd = null;
-      this.selectCfmCtEteStart = null; // Cycle time
-      this.selectCfmCtEteEnd = null;
-      this.selectCfmCtEteSEStart = null;
-      this.selectCfmCtEteSEEnd = null;
-    },
-    /**
-     * is submit select Reset
-     */
-    isSubmitReset() {
-      // 不包含 isSubmittedData
-      this.isSubmitTask = null;
-      this.isSubmitStartAndEnd = null;
-      this.isSubmitCfmSeqDirectly = [];
-      this.isSubmitCfmSeqEventually = [];
-      this.isSubmitDurationData = null;
-      this.isSubmitDurationTime = { base: {}, rule: {}};
-      this.isSubmitCfmPtEteStart = null; // Processing time
-      this.isSubmitCfmPtEteEnd = null;
-      this.isSubmitCfmPtEteSE = null;
-      this.isSubmitCfmPtPStart = null;
-      this.isSubmitCfmPtPEnd = null;
-      this.isSubmitCfmPtPSE = null;
-      this.isSubmitCfmWtEteStart = null; // Waiting time
-      this.isSubmitCfmWtEteEnd = null;
-      this.isSubmitCfmWtEteSE = null;
-      this.isSubmitCfmWtPStart = null;
-      this.isSubmitCfmWtPEnd = null;
-      this.isSubmitCfmWtPSE = null;
-      this.isSubmitCfmCtEteStart = null; // Cycle time
-      this.isSubmitCfmCtEteEnd = null;
-      this.isSubmitCfmCtEteSE = null;
-      this.isSubmitTimeCfmPtEteAll = { base: {}, rule: {}}; // Processing time Time Range
-      this.isSubmitTimeCfmPtEteStart = { base: {}, rule: {}};
-      this.isSubmitTimeCfmPtEteEnd = { base: {}, rule: {}};
-      this.isSubmitTimeCfmPtEteSE = { base: {}, rule: {}};
-      this.isSubmitTimeCfmPtPStart = { base: {}, rule: {}};
-      this.isSubmitTimeCfmPtPEnd = { base: {}, rule: {}};
-      this.isSubmitTimeCfmPtPSE = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtEteAll = { base: {}, rule: {}}; // Waiting time Time Range
-      this.isSubmitTimeCfmWtEteStart = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtEteEnd = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtEteSE = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtPStart = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtPEnd = { base: {}, rule: {}};
-      this.isSubmitTimeCfmWtPSE = { base: {}, rule: {}};
-      this.isSubmitTimeCfmCtEteAll = { base: {}, rule: {}}; // Cycle time Time Range
-      this.isSubmitTimeCfmCtEteStart = { base: {}, rule: {}};
-      this.isSubmitTimeCfmCtEteEnd = { base: {}, rule: {}};
-      this.isSubmitTimeCfmCtEteSE = { base: {}, rule: {}};
-    },
-    /**
-     * 清空選單的行為
-     */
-     reset() {
-      // Results page Cover Plate(遮罩為 ture)
-      this.$emitter.emit('coverPlate', true);
-      // is submit select Reset
-      this.isSubmitReset();
-      this.isSubmittedData = null; // 已 Apply 後，沒有重新改變規則的 Data
-      this.isAlreadySubmit = false;
-
-      // 其他子元件 reset
-      this.selectTimeReset();
-      this.$emitter.emit('reset', null);
-      // reset 成功訊息
-      this.$toast.success(i18next.t("Conformance.RuleCleared"));
-      this.isShowBarOpen = true;
-    },
-    /**
-     * 設定 Start & End Data 連動資料
-     * @param {string} start task
-     * @param {string} end task
-     * @returns {object}
-     */
-    setSubmitShowDataByStartEnd(start, end) {
-      if(this.isStartSelected) {
-        return {
-          task: start,
-          taskStart: start,
-          taskEnd: end,
-          isStartSelected:true,
-          isEndSelected: false
-        };
-      }else {
-        return {
-          task: end,
-          taskStart: start,
-          taskEnd: end,
-          isStartSelected:false,
-          isEndSelected: true
-        };
-      }
-    },
-    /**
-     * Apply button 發送選項，取得 Check Id.
-     */
-    async submitConformance() {
-      let dataToSave;
-
-      this.selectDurationTime = await {
-          min: this.selectTimeRangeMin,
-          max: this.selectTimeRangeMax
-      };
-      this.$emitter.emit('timeRangeMaxMin', this.selectDurationTime);
-
-      switch (this.selectedRuleType) {
-          case 'Have activity': // Rule Type 選 Have activity 的行為
-              dataToSave = this.getHaveActivityData();
-              break;
-          case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
-              dataToSave = this.getActivitySequenceData();
-              break;
-          case 'Activity duration': // Rule Type 選 Activity duration 的行為
-              dataToSave = this.getActivityDurationData();
-              break;
-          case 'Processing time': // Rule Type 選 Processing time 的行為
-              dataToSave = this.getProcessingTimeData();
-              break;
-          case 'Waiting time': // Rule Type 選 Waiting time 的行為
-              dataToSave = this.getWaitingTimeData();
-              break;
-          case 'Cycle time': // Rule Type 選 Cycle time 的行為
-              dataToSave = this.getCycleTimeData();
-              break;
-      }
-
-      if (dataToSave.min > dataToSave.max) {
-          return this.$toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
-      }
-      if (JSON.stringify(dataToSave) === JSON.stringify(this.isSubmittedData)) {
-          return this.$toast.error(i18next.t("Conformance.PleaseSetNewRule"));
-      }
-
-      this.isLoading = true;
-      this.isAlreadySubmit = true;
-      this.isSubmittedData = dataToSave; // 已 Apply 後，沒有重新改變規則的 Data
-      this.conformanceRuleData = dataToSave; // 給存檔的 Data
-      await this.conformanceStore.addConformanceCheckId(dataToSave);
-      await this.conformanceStore.getConformanceReport();
-      this.isShowBarOpen = false;
-      this.isLoading = false;
-      // Results page Cover Plate
-      this.$emitter.emit('coverPlate', false);
-      this.$toast.success(i18next.t("Conformance.RuleApplied"));
-    },
-    getHaveActivityData() {
-    const dataToSave = {
-        type: 'contains-tasks',
-        tasks: this.selectConformanceTask,
-    };
-    this.isSubmitReset();
-    this.isSubmitTask = this.selectConformanceTask;
-    return dataToSave;
-    },
-
-    getActivitySequenceData() {
-        let dataToSave;
-        switch (this.selectedActivitySequence) {
-            case 'Start & End':
-                dataToSave = {
-                    type: 'start-end',
-                    starts_with: this.selectCfmSeqStart,
-                    ends_with: this.selectCfmSeqEnd,
-                };
-                this.isSubmitReset();
-                this.isSubmitStartAndEnd = [
-                    { category: 'Start', task: this.selectCfmSeqStart },
-                    { category: 'End', task: this.selectCfmSeqEnd },
-                ];
-                this.isSubmitShowDataSeq = this.setSubmitShowDataByStartEnd(this.selectCfmSeqStart, this.selectCfmSeqEnd);
-                break;
-            case 'Sequence':
-                dataToSave = this.getSequenceData();
-                break;
-        }
-        return dataToSave;
-    },
-
-    getSequenceData() {
-        let dataToSave;
-        switch (this.selectedMode) {
-            case 'Directly follows':
-                dataToSave = {
-                    type: 'directly-follows',
-                    task_seq: this.selectCfmSeqDirectly,
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmSeqDirectly = JSON.parse(JSON.stringify(this.selectCfmSeqDirectly));
-                break;
-            case 'Eventually follows':
-                dataToSave = {
-                    type: 'eventually-follows',
-                    task_seq: this.selectCfmSeqEventually,
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmSeqEventually = JSON.parse(JSON.stringify(this.selectCfmSeqEventually));
-                break;
-            case 'Short loop(s)':
-                dataToSave = { type: 'short-loops' };
-                break;
-            case 'Self loop(s)':
-                dataToSave = { type: 'self-loops' };
-                break;
-        }
-        return dataToSave;
-    },
-
-    getActivityDurationData() {
-        const dataToSave = {
-            type: 'task-duration',
-            task: this.selectDurationData[0],
-            min: this.selectDurationTime.min,
-            max: this.selectDurationTime.max,
-        };
-        this.isSubmitReset();
-        this.isSubmitDurationData = this.selectDurationData;
-        this.isSubmitDurationTime.rule = this.selectDurationTime;
-        return dataToSave;
-    },
-
-    getProcessingTimeData() {
-        let dataToSave;
-        switch (this.selectedProcessScope) {
-            case 'End to end':
-                dataToSave = this.getEndToEndProcessingTimeData();
-                break;
-            case 'Partial':
-                dataToSave = this.getPartialProcessingTimeData();
-                break;
-        }
-        return dataToSave;
-    },
-
-    getEndToEndProcessingTimeData() {
-        let dataToSave;
-        switch (this.selectedActSeqMore) {
-            case 'All':
-                dataToSave = {
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-end-to-end-whole',
-                };
-                this.isSubmitReset();
-                this.isSubmitTimeCfmPtEteAll.rule = this.selectDurationTime;
-                break;
-            case 'Start':
-                dataToSave = {
-                    task: this.selectCfmPtEteStart,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-end-to-end-starts-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtEteStart = [{ category: 'Start', task: this.selectCfmPtEteStart }];
-                this.isSubmitTimeCfmPtEteStart.rule = this.selectDurationTime;
-                break;
-            case 'End':
-                dataToSave = {
-                    task: this.selectCfmPtEteEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-end-to-end-ends-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtEteEnd = [{ category: 'End', task: this.selectCfmPtEteEnd }];
-                this.isSubmitTimeCfmPtEteEnd.rule = this.selectDurationTime;
-                break;
-            case 'Start & End':
-                dataToSave = {
-                    start: this.selectCfmPtEteSEStart,
-                    end: this.selectCfmPtEteSEEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-end-to-end-start-end',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtEteSE = [
-                    { category: 'Start', task: this.selectCfmPtEteSEStart },
-                    { category: 'End', task: this.selectCfmPtEteSEEnd },
-                ];
-                this.isSubmitTimeCfmPtEteSE.rule = this.selectDurationTime;
-                this.isSubmitShowDataPtEte = this.setSubmitShowDataByStartEnd(this.selectCfmPtEteSEStart, this.selectCfmPtEteSEEnd);
-                break;
-        }
-        return dataToSave;
-    },
-
-    getPartialProcessingTimeData() {
-        let dataToSave;
-        switch (this.selectedActSeqFromTo) {
-            case 'From':
-                dataToSave = {
-                    task: this.selectCfmPtPStart,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-partial-starts-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtPStart = [{ category: 'From', task: this.selectCfmPtPStart }];
-                this.isSubmitTimeCfmPtPStart.rule = this.selectDurationTime;
-                break;
-            case 'To':
-                dataToSave = {
-                    task: this.selectCfmPtPEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-partial-ends-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtPEnd = [{ category: 'To', task: this.selectCfmPtPEnd }];
-                this.isSubmitTimeCfmPtPEnd.rule = this.selectDurationTime;
-                break;
-            case 'From & To':
-                dataToSave = {
-                    start: this.selectCfmPtPSEStart ? this.selectCfmPtPSEStart : this.activityRadioData.task[0],
-                    end: this.selectCfmPtPSEEnd ? this.selectCfmPtPSEEnd : this.activityRadioData.task[this.activityRadioData.task.length - 1],
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'processing-time-partial-start-end',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmPtPSE = [
-                    { category: 'From', task: this.selectCfmPtPSEStart },
-                    { category: 'To', task: this.selectCfmPtPSEEnd },
-                ];
-                this.isSubmitTimeCfmPtPSE.rule = this.selectDurationTime;
-                this.isSubmitShowDataPtP = this.setSubmitShowDataByStartEnd(this.selectCfmPtPSEStart, this.selectCfmPtPSEEnd);
-                break;
-        }
-        return dataToSave;
-    },
-
-    getWaitingTimeData() {
-        let dataToSave;
-        switch (this.selectedProcessScope) {
-            case 'End to end':
-                dataToSave = this.getEndToEndWaitingTimeData();
-                break;
-            case 'Partial':
-                dataToSave = this.getPartialWaitingTimeData();
-                break;
-        }
-        return dataToSave;
-    },
-
-    getEndToEndWaitingTimeData() {
-        let dataToSave;
-        switch (this.selectedActSeqMore) {
-            case 'All':
-                dataToSave = {
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-end-to-end-whole',
-                };
-                this.isSubmitReset();
-                this.isSubmitTimeCfmWtEteAll.rule = this.selectDurationTime;
-                break;
-            case 'Start':
-                dataToSave = {
-                    task: this.selectCfmWtEteStart,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-end-to-end-starts-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtEteStart = [{ category: 'Start', task: this.selectCfmWtEteStart }];
-                this.isSubmitTimeCfmWtEteStart.rule = this.selectDurationTime;
-                break;
-            case 'End':
-                dataToSave = {
-                    task: this.selectCfmWtEteEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-end-to-end-ends-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtEteEnd = [{ category: 'End', task: this.selectCfmWtEteEnd }];
-                this.isSubmitTimeCfmWtEteEnd.rule = this.selectDurationTime;
-                break;
-            case 'Start & End':
-                dataToSave = {
-                    start: this.selectCfmWtEteSEStart,
-                    end: this.selectCfmWtEteSEEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-end-to-end-start-end',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtEteSE = [
-                    { category: 'Start', task: this.selectCfmWtEteSEStart },
-                    { category: 'End', task: this.selectCfmWtEteSEEnd },
-                ];
-                this.isSubmitTimeCfmWtEteSE.rule = this.selectDurationTime;
-                this.isSubmitShowDataWtEte = this.setSubmitShowDataByStartEnd(this.selectCfmWtEteSEStart, this.selectCfmWtEteSEEnd);
-                break;
-        }
-        return dataToSave;
-    },
-
-    getPartialWaitingTimeData() {
-        let dataToSave;
-        switch (this.selectedActSeqFromTo) {
-            case 'From':
-                dataToSave = {
-                    task: this.selectCfmWtPStart,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-partial-starts-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtPStart = [{ category: 'From', task: this.selectCfmWtPStart }];
-                this.isSubmitTimeCfmWtPStart.rule = this.selectDurationTime;
-                break;
-            case 'To':
-                dataToSave = {
-                    task: this.selectCfmWtPEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-partial-ends-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtPEnd = [{ category: 'To', task: this.selectCfmWtPEnd }];
-                this.isSubmitTimeCfmWtPEnd.rule = this.selectDurationTime;
-                break;
-            case 'From & To':
-                dataToSave = {
-                    start: this.selectCfmWtPSEStart,
-                    end: this.selectCfmWtPSEEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'waiting-time-partial-start-end',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmWtPSE = [
-                    { category: 'From', task: this.selectCfmWtPSEStart },
-                    { category: 'To', task: this.selectCfmWtPSEEnd },
-                ];
-                this.isSubmitTimeCfmWtPSE.rule = this.selectDurationTime;
-                this.isSubmitShowDataWtP = this.setSubmitShowDataByStartEnd(this.selectCfmWtPSEStart, this.selectCfmWtPSEEnd);
-                break;
-        }
-        return dataToSave;
-    },
-
-    getCycleTimeData() {
-        let dataToSave;
-        switch (this.selectedActSeqMore) {
-            case 'All':
-                dataToSave = {
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'cycle-time-end-to-end-whole',
-                };
-                this.isSubmitReset();
-                this.isSubmitTimeCfmCtEteAll.rule = this.selectDurationTime;
-                break;
-            case 'Start':
-                dataToSave = {
-                    task: this.selectCfmCtEteStart,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'cycle-time-end-to-end-starts-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmCtEteStart = [{ category: 'Start', task: this.selectCfmCtEteStart }];
-                this.isSubmitTimeCfmCtEteStart.rule = this.selectDurationTime;
-                break;
-            case 'End':
-                dataToSave = {
-                    task: this.selectCfmCtEteEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'cycle-time-end-to-end-ends-with',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmCtEteEnd = [{ category: 'End', task: this.selectCfmCtEteEnd }];
-                this.isSubmitTimeCfmCtEteEnd.rule = this.selectDurationTime;
-                break;
-            case 'Start & End':
-                dataToSave = {
-                    start: this.selectCfmCtEteSEStart,
-                    end: this.selectCfmCtEteSEEnd,
-                    min: this.selectDurationTime.min,
-                    max: this.selectDurationTime.max,
-                    type: 'cycle-time-end-to-end-start-end',
-                };
-                this.isSubmitReset();
-                this.isSubmitCfmCtEteSE = [
-                    { category: 'Start', task: this.selectCfmCtEteSEStart },
-                    { category: 'End', task: this.selectCfmCtEteSEEnd },
-                ];
-                this.isSubmitTimeCfmCtEteSE.rule = this.selectDurationTime;
-                this.isSubmitShowDataCt = this.setSubmitShowDataByStartEnd(this.selectCfmCtEteSEStart, this.selectCfmCtEteSEEnd);
-                break;
-        }
-        return dataToSave;
-    },
-    /**
-     * 設置根據類別的任務選擇邏輯
-     */
-    setTaskByCategoryOnRadioEmitting() {
-        this.$emitter.on('actRadioData', (data) => {
-            const handlers = {
-                'cfmSeqStart': this.handleCfmSeqStart,
-                'cfmSeqEnd': this.handleCfmSeqEnd,
-                'cfmPtEteStart': this.handleSimpleSelection.bind(this, 'selectCfmPtEteStart'),
-                'cfmPtEteEnd': this.handleSimpleSelection.bind(this, 'selectCfmPtEteEnd'),
-                'cfmPtEteSEStart': this.handleCfmPtEteSEStart,
-                'cfmPtEteSEEnd': this.handleCfmPtEteSEEnd,
-                'cfmPtPStart': this.handleSimpleSelection.bind(this, 'selectCfmPtPStart'),
-                'cfmPtPEnd': this.handleSimpleSelection.bind(this, 'selectCfmPtPEnd'),
-                'cfmPtPSEStart': this.handleCfmPtPSEStart,
-                'cfmPtPSEEnd': this.handleCfmPtPSEEnd,
-                'cfmWtEteStart': this.handleSimpleSelection.bind(this, 'selectCfmWtEteStart'),
-                'cfmWtEteEnd': this.handleSimpleSelection.bind(this, 'selectCfmWtEteEnd'),
-                'cfmWtEteSEStart': this.handleCfmWtEteSEStart,
-                'cfmWtEteSEEnd': this.handleCfmWtEteSEEnd,
-                'cfmWtPStart': this.handleSimpleSelection.bind(this, 'selectCfmWtPStart'),
-                'cfmWtPEnd': this.handleSimpleSelection.bind(this, 'selectCfmWtPEnd'),
-                'cfmWtPSEStart': this.handleCfmWtPSEStart,
-                'cfmWtPSEEnd': this.handleCfmWtPSEEnd,
-                'cfmCtEteStart': this.handleSimpleSelection.bind(this, 'selectCfmCtEteStart'),
-                'cfmCtEteEnd': this.handleSimpleSelection.bind(this, 'selectCfmCtEteEnd'),
-                'cfmCtEteSEStart': this.handleCfmCtEteSEStart,
-                'cfmCtEteSEEnd': this.handleCfmCtEteSEEnd
-            };
-
-            if (handlers[data.category]) {
-                handlers[data.category].call(this, data.task);
-            } else if (this.selectedRuleType === 'Activity duration') {
-                this.selectDurationData = [data.task];
-            }
-        });
-    },
-    handleCfmSeqStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmSeqStart) {
-            this.selectCfmSeqEnd = null;
-        }
-        this.selectCfmSeqStart = task;
-    },
-
-    handleCfmSeqEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmSeqEnd) {
-            this.selectCfmSeqStart = null;
-        }
-        this.selectCfmSeqEnd = task;
-    },
-    handleSimpleSelection(field, task) {
-        this[field] = task;
-    },
-    handleCfmPtEteSEStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmPtEteSEStart) {
-            this.selectCfmPtEteSEEnd = null;
-        }
-        this.selectCfmPtEteSEStart = task;
-    },
-    handleCfmPtEteSEEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmPtEteSEEnd) {
-            this.selectCfmPtEteSEStart = null;
-        }
-        this.selectCfmPtEteSEEnd = task;
-    },
-    handleCfmPtPSEStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmPtPSEStart) {
-            this.selectCfmPtPSEEnd = null;
-        }
-        this.selectCfmPtPSEStart = task;
-    },
-    handleCfmPtPSEEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmPtPSEEnd) {
-            this.selectCfmPtPSEStart = null;
-        }
-        this.selectCfmPtPSEEnd = task;
-    },
-    handleCfmWtEteSEStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmWtEteSEStart) {
-            this.selectCfmWtEteSEEnd = null;
-        }
-        this.selectCfmWtEteSEStart = task;
-    },
-    handleCfmWtEteSEEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmWtEteSEEnd) {
-            this.selectCfmWtEteSEStart = null;
-        }
-        this.selectCfmWtEteSEEnd = task;
-    },
-    handleCfmWtPSEStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmWtPSEStart) {
-            this.selectCfmWtPSEEnd = null;
-        }
-        this.selectCfmWtPSEStart = task;
-    },
-    handleCfmWtPSEEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmWtPSEEnd) {
-            this.selectCfmWtPSEStart = null;
-        }
-        this.selectCfmWtPSEEnd = task;
-    },
-    handleCfmCtEteSEStart(task) {
-        if (this.isStartSelected && task !== this.selectCfmCtEteSEStart) {
-            this.selectCfmCtEteSEEnd = null;
-        }
-        this.selectCfmCtEteSEStart = task;
-    },
-    handleCfmCtEteSEEnd(task) {
-        if (this.isEndSelected && task !== this.selectCfmCtEteSEEnd) {
-            this.selectCfmCtEteSEStart = null;
-        }
-        this.selectCfmCtEteSEEnd = task;
-    },
-    setTaskByCategoryOnListSeqEmitting(){
-      this.$emitter.on('getListSequence', (data) => {
-        switch (data.category) {
-          case 'cfmSeqDirectly':
-            this.selectCfmSeqDirectly = data.task;
-            break;
-          case 'cfmSeqEventually':
-            this.selectCfmSeqEventually = data.task;
-            break;
-          default:
-            break;
-        }
-      });
-    },
-    checkHaveActivity() {
-      return !(this.selectConformanceTask?.length);
-    },
-    checkActivityDuration() {
-      return !this.selectDurationData?.length;
-    },
-    /**
-     * 檢查活動序列的邏輯
-     * @returns {boolean} 是否禁用按鈕
-     */
-    checkActivitySequence() {
-        switch (this.selectedActivitySequence) {
-            case 'Start & End':
-                return checkStartAndEndSequence(this.selectCfmSeqStart, this.selectCfmSeqEnd);
-            case 'Sequence':
-                return checkSequenceMode(this.selectedMode);
-            default:
-                return true;
-        }
-    },
-    /**
-     * 檢查 Start & End 活動序列
-     * @param {string} start 活動開始
-     * @param {string} end 活動結束
-     * @returns {boolean} 是否禁用按鈕
-     */
-    checkStartAndEndSequence(start, end) {
-        return !(start && end);
-    },
-    checkProcessingTime() {
-      let disabled = true;
-      switch (this.selectedProcessScope) {
-          case 'End to end':
-              disabled = this.checkEndToEnd();
-              break;
-          case 'Partial':
-              disabled = this.checkPartial();
-              break;
-          default:
-              break;
-      }
-      return disabled;
-    },
-    checkEndToEnd() {
-      let disabled = true;
-      switch (this.selectedActSeqMore) {
-          case 'All':
-              disabled = false;
-              break;
-          case 'Start':
-              disabled = !this.selectCfmPtEteStart;
-              break;
-          case 'End':
-              disabled = !this.selectCfmPtEteEnd;
-              break;
-          case 'Start & End':
-              disabled = this.checkStartAndEnd(
-                  this.selectCfmPtEteSEStart,
-                  this.selectCfmPtEteSEEnd
-              );
-              break;
-          default:
-              break;
-      }
-      return disabled;
-    },
-    checkPartial() {
-      let disabled = true;
-      switch (this.selectedActSeqFromTo) {
-          case 'From':
-              disabled = !this.selectCfmPtPStart;
-              break;
-          case 'To':
-              disabled = !this.selectCfmPtPEnd;
-              break;
-          case 'From & To':
-              disabled = this.checkStartAndEnd(
-                  this.selectCfmPtPSEStart,
-                  this.selectCfmPtPSEEnd
-              );
-              break;
-          default:
-              break;
-      }
-      return disabled;
-    },
-    checkWaitingTime() {
-      let disabled = true;
-      switch (this.selectedProcessScope) {
-          case 'End to end':
-              disabled = this.checkEndToEndWaiting();
-              break;
-          case 'Partial':
-              disabled = this.checkPartialWaiting();
-              break;
-          default:
-              break;
-      }
-      return disabled;
-    },
-
-    checkEndToEndWaiting() {
-        let disabled = true;
-        switch (this.selectedActSeqMore) {
-            case 'Start':
-                disabled = !this.selectCfmWtEteStart;
-                break;
-            case 'End':
-                disabled = !this.selectCfmWtEteEnd;
-                break;
-            case 'Start & End':
-                disabled = this.selectCfmWtEteSEStart !== this.selectCfmWtEteSEEnd;
-                break;
-            default:
-                break;
-        }
-        return disabled;
-    },
-    checkPartialWaiting() {
-        let disabled = true;
-        switch (this.selectedActSeqFromTo) {
-            case 'From':
-                disabled = !this.selectCfmWtPStart;
-                break;
-            case 'To':
-                disabled = !this.selectCfmWtPEnd;
-                break;
-            case 'From & To':
-                disabled = this.checkStartAndEnd(
-                    this.selectCfmWtPSEStart,
-                    this.selectCfmWtPSEEnd
-                );
-                break;
-            default:
-                break;
-        }
-        return disabled;
-    },
-    checkCycleTime() {
-      let disabled = true;
-      switch (this.selectedActSeqMore) {
-          case 'All':
-              disabled = false;
-              break;
-          case 'Start':
-              disabled = !this.selectCfmCtEteStart;
-              break;
-          case 'End':
-              disabled = !this.selectCfmCtEteEnd;
-              break;
-          case 'Start & End':
-              disabled = this.checkStartAndEnd(
-                  this.selectCfmCtEteSEStart,
-                  this.selectCfmCtEteSEEnd
-              );
-              break;
-          default:
-              break;
-      }
-      return disabled;
-    },
-    checkStartAndEnd(start, end) {
-        return !this.isAlreadySubmit
-            ? !(start && end)
-            : start !== end;
-    },
-   ...mapActions(useConformanceInputStore, [''])
-  },
-  created() {
-    this.isShowBarOpen = !(this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId);
-    // 選取 list 的結果
-    this.$emitter.on('actListData', (data) => {
-      this.selectConformanceTask = data;
-    });
-
-    this.setTaskByCategoryOnRadioEmitting();
-    this.setTaskByCategoryOnListSeqEmitting();
-    
-    // Radio 切換時，資料要清空
-    this.$emitter.on('isRadioChange', (data) => {
-      if(data) {
-        this.selectTimeReset();
-        this.selectDurationTime = { min: 0, max: 0};
-      };
-    });
-    this.$emitter.on('isRadioSeqChange', (data) => {
-      if(data) {
-        this.selectTimeReset();
-      };
-    });
-    this.$emitter.on('isRadioProcessScopeChange', (data) => {
-      if(data) {
-        this.selectTimeReset();
-        this.selectDurationTime = { min: 0, max: 0};
-      };
-    });
-    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
-      if(data) {
-        this.selectTimeReset();
-        if(this.selectedActSeqMore !== 'All') this.selectDurationTime = { min: 0, max: 0};
-      };
-    });
-    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
-      if(data) {
-        this.selectTimeReset();
-        this.selectDurationTime = { min: 0, max: 0};
-      };
-    });
-  },
-  beforeUnmount() {
-    this.isSubmitReset();
-    this.selectTimeReset();
-  },
+// methods
+/**
+ * get min total seconds
+ * @param {Number} e 最小值總秒數
+ */
+function minTotalSeconds(e) {
+  selectTimeRangeMin.value = e;
 }
+/**
+ * get min total seconds
+ * @param {Number} e 最大值總秒數
+ */
+function maxTotalSeconds(e) {
+  selectTimeRangeMax.value = e;
+}
+/**
+ * select Time Reset
+ */
+function selectTimeReset() {
+  // 不包含 selectDurationTime
+  selectConformanceTask.value = null; // Have activity
+  selectConformanceStartAndEnd.value = null; // Activity Sequence
+  selectCfmSeqStart.value = null;
+  selectCfmSeqEnd.value = null;
+  selectCfmSeqDirectly.value = [];
+  selectCfmSeqEventually.value = [];
+  selectDurationData.value = null; // Activity durations
+  selectTimeRangeMin.value = 0; // Time Range min
+  selectTimeRangeMax.value = 0; // Time Range max
+  selectCfmPtEteStart.value = null; // Processing time
+  selectCfmPtEteEnd.value = null;
+  selectCfmPtEteSEStart.value = null;
+  selectCfmPtEteSEEnd.value = null;
+  selectCfmPtPStart.value = null;
+  selectCfmPtPEnd.value = null;
+  selectCfmPtPSEStart.value = null;
+  selectCfmPtPSEEnd.value = null;
+  selectCfmWtEteStart.value = null; // Waiting time
+  selectCfmWtEteEnd.value = null;
+  selectCfmWtEteSEStart.value = null;
+  selectCfmWtEteSEEnd.value = null;
+  selectCfmWtPStart.value = null;
+  selectCfmWtPEnd.value = null;
+  selectCfmWtPSEStart.value = null;
+  selectCfmWtPSEEnd.value = null;
+  selectCfmCtEteStart.value = null; // Cycle time
+  selectCfmCtEteEnd.value = null;
+  selectCfmCtEteSEStart.value = null;
+  selectCfmCtEteSEEnd.value = null;
+}
+/**
+ * is submit select Reset
+ */
+function isSubmitReset() {
+  // 不包含 isSubmittedData
+  isSubmitTask.value = null;
+  isSubmitStartAndEnd.value = null;
+  isSubmitCfmSeqDirectly.value = [];
+  isSubmitCfmSeqEventually.value = [];
+  isSubmitDurationData.value = null;
+  isSubmitDurationTime.value = { base: {}, rule: {}};
+  isSubmitCfmPtEteStart.value = null; // Processing time
+  isSubmitCfmPtEteEnd.value = null;
+  isSubmitCfmPtEteSE.value = null;
+  isSubmitCfmPtPStart.value = null;
+  isSubmitCfmPtPEnd.value = null;
+  isSubmitCfmPtPSE.value = null;
+  isSubmitCfmWtEteStart.value = null; // Waiting time
+  isSubmitCfmWtEteEnd.value = null;
+  isSubmitCfmWtEteSE.value = null;
+  isSubmitCfmWtPStart.value = null;
+  isSubmitCfmWtPEnd.value = null;
+  isSubmitCfmWtPSE.value = null;
+  isSubmitCfmCtEteStart.value = null; // Cycle time
+  isSubmitCfmCtEteEnd.value = null;
+  isSubmitCfmCtEteSE.value = null;
+  isSubmitTimeCfmPtEteAll.value = { base: {}, rule: {}}; // Processing time Time Range
+  isSubmitTimeCfmPtEteStart.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtEteEnd.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtEteSE.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtPStart.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtPEnd.value = { base: {}, rule: {}};
+  isSubmitTimeCfmPtPSE.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtEteAll.value = { base: {}, rule: {}}; // Waiting time Time Range
+  isSubmitTimeCfmWtEteStart.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtEteEnd.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtEteSE.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtPStart.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtPEnd.value = { base: {}, rule: {}};
+  isSubmitTimeCfmWtPSE.value = { base: {}, rule: {}};
+  isSubmitTimeCfmCtEteAll.value = { base: {}, rule: {}}; // Cycle time Time Range
+  isSubmitTimeCfmCtEteStart.value = { base: {}, rule: {}};
+  isSubmitTimeCfmCtEteEnd.value = { base: {}, rule: {}};
+  isSubmitTimeCfmCtEteSE.value = { base: {}, rule: {}};
+}
+/**
+ * 清空選單的行為
+ */
+function reset() {
+  // Results page Cover Plate(遮罩為 ture)
+  emitter.emit('coverPlate', true);
+  // is submit select Reset
+  isSubmitReset();
+  isSubmittedData.value = null; // 已 Apply 後，沒有重新改變規則的 Data
+  isAlreadySubmit.value = false;
+
+  // 其他子元件 reset
+  selectTimeReset();
+  emitter.emit('reset', null);
+  // reset 成功訊息
+  $toast.success(i18next.t("Conformance.RuleCleared"));
+  isShowBarOpen.value = true;
+}
+/**
+ * 設定 Start & End Data 連動資料
+ * @param {string} start task
+ * @param {string} end task
+ * @returns {object}
+ */
+function setSubmitShowDataByStartEnd(start, end) {
+  if(isStartSelected.value) {
+    return {
+      task: start,
+      taskStart: start,
+      taskEnd: end,
+      isStartSelected:true,
+      isEndSelected: false
+    };
+  }else {
+    return {
+      task: end,
+      taskStart: start,
+      taskEnd: end,
+      isStartSelected:false,
+      isEndSelected: true
+    };
+  }
+}
+/**
+ * Apply button 發送選項，取得 Check Id.
+ */
+async function submitConformance() {
+  let dataToSave;
+
+  selectDurationTime.value = await {
+      min: selectTimeRangeMin.value,
+      max: selectTimeRangeMax.value
+  };
+  emitter.emit('timeRangeMaxMin', selectDurationTime.value);
+
+  switch (selectedRuleType.value) {
+      case 'Have activity': // Rule Type 選 Have activity 的行為
+          dataToSave = getHaveActivityData();
+          break;
+      case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
+          dataToSave = getActivitySequenceData();
+          break;
+      case 'Activity duration': // Rule Type 選 Activity duration 的行為
+          dataToSave = getActivityDurationData();
+          break;
+      case 'Processing time': // Rule Type 選 Processing time 的行為
+          dataToSave = getProcessingTimeData();
+          break;
+      case 'Waiting time': // Rule Type 選 Waiting time 的行為
+          dataToSave = getWaitingTimeData();
+          break;
+      case 'Cycle time': // Rule Type 選 Cycle time 的行為
+          dataToSave = getCycleTimeData();
+          break;
+  }
+
+  if (dataToSave.min > dataToSave.max) {
+      return $toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
+  }
+  if (JSON.stringify(dataToSave) === JSON.stringify(isSubmittedData.value)) {
+      return $toast.error(i18next.t("Conformance.PleaseSetNewRule"));
+  }
+
+  isLoading.value = true;
+  isAlreadySubmit.value = true;
+  isSubmittedData.value = dataToSave; // 已 Apply 後，沒有重新改變規則的 Data
+  conformanceRuleData.value = dataToSave; // 給存檔的 Data
+  await conformanceStore.addConformanceCheckId(dataToSave);
+  await conformanceStore.getConformanceReport();
+  isShowBarOpen.value = false;
+  isLoading.value = false;
+  // Results page Cover Plate
+  emitter.emit('coverPlate', false);
+  $toast.success(i18next.t("Conformance.RuleApplied"));
+}
+
+function getHaveActivityData() {
+  const dataToSave = {
+      type: 'contains-tasks',
+      tasks: selectConformanceTask.value,
+  };
+  isSubmitReset();
+  isSubmitTask.value = selectConformanceTask.value;
+  return dataToSave;
+}
+
+function getActivitySequenceData() {
+    let dataToSave;
+    switch (selectedActivitySequence.value) {
+        case 'Start & End':
+            dataToSave = {
+                type: 'start-end',
+                starts_with: selectCfmSeqStart.value,
+                ends_with: selectCfmSeqEnd.value,
+            };
+            isSubmitReset();
+            isSubmitStartAndEnd.value = [
+                { category: 'Start', task: selectCfmSeqStart.value },
+                { category: 'End', task: selectCfmSeqEnd.value },
+            ];
+            isSubmitShowDataSeq.value = setSubmitShowDataByStartEnd(selectCfmSeqStart.value, selectCfmSeqEnd.value);
+            break;
+        case 'Sequence':
+            dataToSave = getSequenceData();
+            break;
+    }
+    return dataToSave;
+}
+
+function getSequenceData() {
+    let dataToSave;
+    switch (selectedMode.value) {
+        case 'Directly follows':
+            dataToSave = {
+                type: 'directly-follows',
+                task_seq: selectCfmSeqDirectly.value,
+            };
+            isSubmitReset();
+            isSubmitCfmSeqDirectly.value = JSON.parse(JSON.stringify(selectCfmSeqDirectly.value));
+            break;
+        case 'Eventually follows':
+            dataToSave = {
+                type: 'eventually-follows',
+                task_seq: selectCfmSeqEventually.value,
+            };
+            isSubmitReset();
+            isSubmitCfmSeqEventually.value = JSON.parse(JSON.stringify(selectCfmSeqEventually.value));
+            break;
+        case 'Short loop(s)':
+            dataToSave = { type: 'short-loops' };
+            break;
+        case 'Self loop(s)':
+            dataToSave = { type: 'self-loops' };
+            break;
+    }
+    return dataToSave;
+}
+
+function getActivityDurationData() {
+    const dataToSave = {
+        type: 'task-duration',
+        task: selectDurationData.value[0],
+        min: selectDurationTime.value.min,
+        max: selectDurationTime.value.max,
+    };
+    isSubmitReset();
+    isSubmitDurationData.value = selectDurationData.value;
+    isSubmitDurationTime.value.rule = selectDurationTime.value;
+    return dataToSave;
+}
+
+function getProcessingTimeData() {
+    let dataToSave;
+    switch (selectedProcessScope.value) {
+        case 'End to end':
+            dataToSave = getEndToEndProcessingTimeData();
+            break;
+        case 'Partial':
+            dataToSave = getPartialProcessingTimeData();
+            break;
+    }
+    return dataToSave;
+}
+
+function getEndToEndProcessingTimeData() {
+    let dataToSave;
+    switch (selectedActSeqMore.value) {
+        case 'All':
+            dataToSave = {
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-end-to-end-whole',
+            };
+            isSubmitReset();
+            isSubmitTimeCfmPtEteAll.value.rule = selectDurationTime.value;
+            break;
+        case 'Start':
+            dataToSave = {
+                task: selectCfmPtEteStart.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-end-to-end-starts-with',
+            };
+            isSubmitReset();
+            isSubmitCfmPtEteStart.value = [{ category: 'Start', task: selectCfmPtEteStart.value }];
+            isSubmitTimeCfmPtEteStart.value.rule = selectDurationTime.value;
+            break;
+        case 'End':
+            dataToSave = {
+                task: selectCfmPtEteEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-end-to-end-ends-with',
+            };
+            isSubmitReset();
+            isSubmitCfmPtEteEnd.value = [{ category: 'End', task: selectCfmPtEteEnd.value }];
+            isSubmitTimeCfmPtEteEnd.value.rule = selectDurationTime.value;
+            break;
+        case 'Start & End':
+            dataToSave = {
+                start: selectCfmPtEteSEStart.value,
+                end: selectCfmPtEteSEEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-end-to-end-start-end',
+            };
+            isSubmitReset();
+            isSubmitCfmPtEteSE.value = [
+                { category: 'Start', task: selectCfmPtEteSEStart.value },
+                { category: 'End', task: selectCfmPtEteSEEnd.value },
+            ];
+            isSubmitTimeCfmPtEteSE.value.rule = selectDurationTime.value;
+            isSubmitShowDataPtEte.value = setSubmitShowDataByStartEnd(selectCfmPtEteSEStart.value, selectCfmPtEteSEEnd.value);
+            break;
+    }
+    return dataToSave;
+}
+
+function getPartialProcessingTimeData() {
+    let dataToSave;
+    switch (selectedActSeqFromTo.value) {
+        case 'From':
+            dataToSave = {
+                task: selectCfmPtPStart.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-partial-starts-with',
+            };
+            isSubmitReset();
+            isSubmitCfmPtPStart.value = [{ category: 'From', task: selectCfmPtPStart.value }];
+            isSubmitTimeCfmPtPStart.value.rule = selectDurationTime.value;
+            break;
+        case 'To':
+            dataToSave = {
+                task: selectCfmPtPEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-partial-ends-with',
+            };
+            isSubmitReset();
+            isSubmitCfmPtPEnd.value = [{ category: 'To', task: selectCfmPtPEnd.value }];
+            isSubmitTimeCfmPtPEnd.value.rule = selectDurationTime.value;
+            break;
+        case 'From & To':
+            dataToSave = {
+                start: selectCfmPtPSEStart.value ? selectCfmPtPSEStart.value : activityRadioData.value.task[0],
+                end: selectCfmPtPSEEnd.value ? selectCfmPtPSEEnd.value : activityRadioData.value.task[activityRadioData.value.task.length - 1],
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'processing-time-partial-start-end',
+            };
+            isSubmitReset();
+            isSubmitCfmPtPSE.value = [
+                { category: 'From', task: selectCfmPtPSEStart.value },
+                { category: 'To', task: selectCfmPtPSEEnd.value },
+            ];
+            isSubmitTimeCfmPtPSE.value.rule = selectDurationTime.value;
+            isSubmitShowDataPtP.value = setSubmitShowDataByStartEnd(selectCfmPtPSEStart.value, selectCfmPtPSEEnd.value);
+            break;
+    }
+    return dataToSave;
+}
+
+function getWaitingTimeData() {
+    let dataToSave;
+    switch (selectedProcessScope.value) {
+        case 'End to end':
+            dataToSave = getEndToEndWaitingTimeData();
+            break;
+        case 'Partial':
+            dataToSave = getPartialWaitingTimeData();
+            break;
+    }
+    return dataToSave;
+}
+
+function getEndToEndWaitingTimeData() {
+    let dataToSave;
+    switch (selectedActSeqMore.value) {
+        case 'All':
+            dataToSave = {
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-end-to-end-whole',
+            };
+            isSubmitReset();
+            isSubmitTimeCfmWtEteAll.value.rule = selectDurationTime.value;
+            break;
+        case 'Start':
+            dataToSave = {
+                task: selectCfmWtEteStart.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-end-to-end-starts-with',
+            };
+            isSubmitReset();
+            isSubmitCfmWtEteStart.value = [{ category: 'Start', task: selectCfmWtEteStart.value }];
+            isSubmitTimeCfmWtEteStart.value.rule = selectDurationTime.value;
+            break;
+        case 'End':
+            dataToSave = {
+                task: selectCfmWtEteEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-end-to-end-ends-with',
+            };
+            isSubmitReset();
+            isSubmitCfmWtEteEnd.value = [{ category: 'End', task: selectCfmWtEteEnd.value }];
+            isSubmitTimeCfmWtEteEnd.value.rule = selectDurationTime.value;
+            break;
+        case 'Start & End':
+            dataToSave = {
+                start: selectCfmWtEteSEStart.value,
+                end: selectCfmWtEteSEEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-end-to-end-start-end',
+            };
+            isSubmitReset();
+            isSubmitCfmWtEteSE.value = [
+                { category: 'Start', task: selectCfmWtEteSEStart.value },
+                { category: 'End', task: selectCfmWtEteSEEnd.value },
+            ];
+            isSubmitTimeCfmWtEteSE.value.rule = selectDurationTime.value;
+            isSubmitShowDataWtEte.value = setSubmitShowDataByStartEnd(selectCfmWtEteSEStart.value, selectCfmWtEteSEEnd.value);
+            break;
+    }
+    return dataToSave;
+}
+
+function getPartialWaitingTimeData() {
+    let dataToSave;
+    switch (selectedActSeqFromTo.value) {
+        case 'From':
+            dataToSave = {
+                task: selectCfmWtPStart.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-partial-starts-with',
+            };
+            isSubmitReset();
+            isSubmitCfmWtPStart.value = [{ category: 'From', task: selectCfmWtPStart.value }];
+            isSubmitTimeCfmWtPStart.value.rule = selectDurationTime.value;
+            break;
+        case 'To':
+            dataToSave = {
+                task: selectCfmWtPEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-partial-ends-with',
+            };
+            isSubmitReset();
+            isSubmitCfmWtPEnd.value = [{ category: 'To', task: selectCfmWtPEnd.value }];
+            isSubmitTimeCfmWtPEnd.value.rule = selectDurationTime.value;
+            break;
+        case 'From & To':
+            dataToSave = {
+                start: selectCfmWtPSEStart.value,
+                end: selectCfmWtPSEEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'waiting-time-partial-start-end',
+            };
+            isSubmitReset();
+            isSubmitCfmWtPSE.value = [
+                { category: 'From', task: selectCfmWtPSEStart.value },
+                { category: 'To', task: selectCfmWtPSEEnd.value },
+            ];
+            isSubmitTimeCfmWtPSE.value.rule = selectDurationTime.value;
+            isSubmitShowDataWtP.value = setSubmitShowDataByStartEnd(selectCfmWtPSEStart.value, selectCfmWtPSEEnd.value);
+            break;
+    }
+    return dataToSave;
+}
+
+function getCycleTimeData() {
+    let dataToSave;
+    switch (selectedActSeqMore.value) {
+        case 'All':
+            dataToSave = {
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'cycle-time-end-to-end-whole',
+            };
+            isSubmitReset();
+            isSubmitTimeCfmCtEteAll.value.rule = selectDurationTime.value;
+            break;
+        case 'Start':
+            dataToSave = {
+                task: selectCfmCtEteStart.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'cycle-time-end-to-end-starts-with',
+            };
+            isSubmitReset();
+            isSubmitCfmCtEteStart.value = [{ category: 'Start', task: selectCfmCtEteStart.value }];
+            isSubmitTimeCfmCtEteStart.value.rule = selectDurationTime.value;
+            break;
+        case 'End':
+            dataToSave = {
+                task: selectCfmCtEteEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'cycle-time-end-to-end-ends-with',
+            };
+            isSubmitReset();
+            isSubmitCfmCtEteEnd.value = [{ category: 'End', task: selectCfmCtEteEnd.value }];
+            isSubmitTimeCfmCtEteEnd.value.rule = selectDurationTime.value;
+            break;
+        case 'Start & End':
+            dataToSave = {
+                start: selectCfmCtEteSEStart.value,
+                end: selectCfmCtEteSEEnd.value,
+                min: selectDurationTime.value.min,
+                max: selectDurationTime.value.max,
+                type: 'cycle-time-end-to-end-start-end',
+            };
+            isSubmitReset();
+            isSubmitCfmCtEteSE.value = [
+                { category: 'Start', task: selectCfmCtEteSEStart.value },
+                { category: 'End', task: selectCfmCtEteSEEnd.value },
+            ];
+            isSubmitTimeCfmCtEteSE.value.rule = selectDurationTime.value;
+            isSubmitShowDataCt.value = setSubmitShowDataByStartEnd(selectCfmCtEteSEStart.value, selectCfmCtEteSEEnd.value);
+            break;
+    }
+    return dataToSave;
+}
+
+/**
+ * 設置根據類別的任務選擇邏輯
+ */
+function setTaskByCategoryOnRadioEmitting() {
+    emitter.on('actRadioData', (data) => {
+        const handlers = {
+            'cfmSeqStart': handleCfmSeqStart,
+            'cfmSeqEnd': handleCfmSeqEnd,
+            'cfmPtEteStart': (task) => handleSimpleSelection('selectCfmPtEteStart', task),
+            'cfmPtEteEnd': (task) => handleSimpleSelection('selectCfmPtEteEnd', task),
+            'cfmPtEteSEStart': handleCfmPtEteSEStart,
+            'cfmPtEteSEEnd': handleCfmPtEteSEEnd,
+            'cfmPtPStart': (task) => handleSimpleSelection('selectCfmPtPStart', task),
+            'cfmPtPEnd': (task) => handleSimpleSelection('selectCfmPtPEnd', task),
+            'cfmPtPSEStart': handleCfmPtPSEStart,
+            'cfmPtPSEEnd': handleCfmPtPSEEnd,
+            'cfmWtEteStart': (task) => handleSimpleSelection('selectCfmWtEteStart', task),
+            'cfmWtEteEnd': (task) => handleSimpleSelection('selectCfmWtEteEnd', task),
+            'cfmWtEteSEStart': handleCfmWtEteSEStart,
+            'cfmWtEteSEEnd': handleCfmWtEteSEEnd,
+            'cfmWtPStart': (task) => handleSimpleSelection('selectCfmWtPStart', task),
+            'cfmWtPEnd': (task) => handleSimpleSelection('selectCfmWtPEnd', task),
+            'cfmWtPSEStart': handleCfmWtPSEStart,
+            'cfmWtPSEEnd': handleCfmWtPSEEnd,
+            'cfmCtEteStart': (task) => handleSimpleSelection('selectCfmCtEteStart', task),
+            'cfmCtEteEnd': (task) => handleSimpleSelection('selectCfmCtEteEnd', task),
+            'cfmCtEteSEStart': handleCfmCtEteSEStart,
+            'cfmCtEteSEEnd': handleCfmCtEteSEEnd
+        };
+
+        if (handlers[data.category]) {
+            handlers[data.category](data.task);
+        } else if (selectedRuleType.value === 'Activity duration') {
+            selectDurationData.value = [data.task];
+        }
+    });
+}
+
+function handleCfmSeqStart(task) {
+    if (isStartSelected.value && task !== selectCfmSeqStart.value) {
+        selectCfmSeqEnd.value = null;
+    }
+    selectCfmSeqStart.value = task;
+}
+
+function handleCfmSeqEnd(task) {
+    if (isEndSelected.value && task !== selectCfmSeqEnd.value) {
+        selectCfmSeqStart.value = null;
+    }
+    selectCfmSeqEnd.value = task;
+}
+
+function handleSimpleSelection(field, task) {
+    selectFieldRefs[field].value = task;
+}
+
+function handleCfmPtEteSEStart(task) {
+    if (isStartSelected.value && task !== selectCfmPtEteSEStart.value) {
+        selectCfmPtEteSEEnd.value = null;
+    }
+    selectCfmPtEteSEStart.value = task;
+}
+function handleCfmPtEteSEEnd(task) {
+    if (isEndSelected.value && task !== selectCfmPtEteSEEnd.value) {
+        selectCfmPtEteSEStart.value = null;
+    }
+    selectCfmPtEteSEEnd.value = task;
+}
+function handleCfmPtPSEStart(task) {
+    if (isStartSelected.value && task !== selectCfmPtPSEStart.value) {
+        selectCfmPtPSEEnd.value = null;
+    }
+    selectCfmPtPSEStart.value = task;
+}
+function handleCfmPtPSEEnd(task) {
+    if (isEndSelected.value && task !== selectCfmPtPSEEnd.value) {
+        selectCfmPtPSEStart.value = null;
+    }
+    selectCfmPtPSEEnd.value = task;
+}
+function handleCfmWtEteSEStart(task) {
+    if (isStartSelected.value && task !== selectCfmWtEteSEStart.value) {
+        selectCfmWtEteSEEnd.value = null;
+    }
+    selectCfmWtEteSEStart.value = task;
+}
+function handleCfmWtEteSEEnd(task) {
+    if (isEndSelected.value && task !== selectCfmWtEteSEEnd.value) {
+        selectCfmWtEteSEStart.value = null;
+    }
+    selectCfmWtEteSEEnd.value = task;
+}
+function handleCfmWtPSEStart(task) {
+    if (isStartSelected.value && task !== selectCfmWtPSEStart.value) {
+        selectCfmWtPSEEnd.value = null;
+    }
+    selectCfmWtPSEStart.value = task;
+}
+function handleCfmWtPSEEnd(task) {
+    if (isEndSelected.value && task !== selectCfmWtPSEEnd.value) {
+        selectCfmWtPSEStart.value = null;
+    }
+    selectCfmWtPSEEnd.value = task;
+}
+function handleCfmCtEteSEStart(task) {
+    if (isStartSelected.value && task !== selectCfmCtEteSEStart.value) {
+        selectCfmCtEteSEEnd.value = null;
+    }
+    selectCfmCtEteSEStart.value = task;
+}
+function handleCfmCtEteSEEnd(task) {
+    if (isEndSelected.value && task !== selectCfmCtEteSEEnd.value) {
+        selectCfmCtEteSEStart.value = null;
+    }
+    selectCfmCtEteSEEnd.value = task;
+}
+
+function setTaskByCategoryOnListSeqEmitting(){
+  emitter.on('getListSequence', (data) => {
+    switch (data.category) {
+      case 'cfmSeqDirectly':
+        selectCfmSeqDirectly.value = data.task;
+        break;
+      case 'cfmSeqEventually':
+        selectCfmSeqEventually.value = data.task;
+        break;
+      default:
+        break;
+    }
+  });
+}
+
+function checkHaveActivity() {
+  return !(selectConformanceTask.value?.length);
+}
+function checkActivityDuration() {
+  return !selectDurationData.value?.length;
+}
+/**
+ * 檢查活動序列的邏輯
+ * @returns {boolean} 是否禁用按鈕
+ */
+function checkActivitySequence() {
+    switch (selectedActivitySequence.value) {
+        case 'Start & End':
+            return checkStartAndEndSequence(selectCfmSeqStart.value, selectCfmSeqEnd.value);
+        case 'Sequence':
+            return checkSequenceMode(selectedMode.value);
+        default:
+            return true;
+    }
+}
+/**
+ * 檢查 Start & End 活動序列
+ * @param {string} start 活動開始
+ * @param {string} end 活動結束
+ * @returns {boolean} 是否禁用按鈕
+ */
+function checkStartAndEndSequence(start, end) {
+    return !(start && end);
+}
+
+function checkProcessingTime() {
+  let disabled = true;
+  switch (selectedProcessScope.value) {
+      case 'End to end':
+          disabled = checkEndToEnd();
+          break;
+      case 'Partial':
+          disabled = checkPartial();
+          break;
+      default:
+          break;
+  }
+  return disabled;
+}
+function checkEndToEnd() {
+  let disabled = true;
+  switch (selectedActSeqMore.value) {
+      case 'All':
+          disabled = false;
+          break;
+      case 'Start':
+          disabled = !selectCfmPtEteStart.value;
+          break;
+      case 'End':
+          disabled = !selectCfmPtEteEnd.value;
+          break;
+      case 'Start & End':
+          disabled = checkStartAndEnd(
+              selectCfmPtEteSEStart.value,
+              selectCfmPtEteSEEnd.value
+          );
+          break;
+      default:
+          break;
+  }
+  return disabled;
+}
+function checkPartial() {
+  let disabled = true;
+  switch (selectedActSeqFromTo.value) {
+      case 'From':
+          disabled = !selectCfmPtPStart.value;
+          break;
+      case 'To':
+          disabled = !selectCfmPtPEnd.value;
+          break;
+      case 'From & To':
+          disabled = checkStartAndEnd(
+              selectCfmPtPSEStart.value,
+              selectCfmPtPSEEnd.value
+          );
+          break;
+      default:
+          break;
+  }
+  return disabled;
+}
+function checkWaitingTime() {
+  let disabled = true;
+  switch (selectedProcessScope.value) {
+      case 'End to end':
+          disabled = checkEndToEndWaiting();
+          break;
+      case 'Partial':
+          disabled = checkPartialWaiting();
+          break;
+      default:
+          break;
+  }
+  return disabled;
+}
+
+function checkEndToEndWaiting() {
+    let disabled = true;
+    switch (selectedActSeqMore.value) {
+        case 'Start':
+            disabled = !selectCfmWtEteStart.value;
+            break;
+        case 'End':
+            disabled = !selectCfmWtEteEnd.value;
+            break;
+        case 'Start & End':
+            disabled = selectCfmWtEteSEStart.value !== selectCfmWtEteSEEnd.value;
+            break;
+        default:
+            break;
+    }
+    return disabled;
+}
+function checkPartialWaiting() {
+    let disabled = true;
+    switch (selectedActSeqFromTo.value) {
+        case 'From':
+            disabled = !selectCfmWtPStart.value;
+            break;
+        case 'To':
+            disabled = !selectCfmWtPEnd.value;
+            break;
+        case 'From & To':
+            disabled = checkStartAndEnd(
+                selectCfmWtPSEStart.value,
+                selectCfmWtPSEEnd.value
+            );
+            break;
+        default:
+            break;
+    }
+    return disabled;
+}
+function checkCycleTime() {
+  let disabled = true;
+  switch (selectedActSeqMore.value) {
+      case 'All':
+          disabled = false;
+          break;
+      case 'Start':
+          disabled = !selectCfmCtEteStart.value;
+          break;
+      case 'End':
+          disabled = !selectCfmCtEteEnd.value;
+          break;
+      case 'Start & End':
+          disabled = checkStartAndEnd(
+              selectCfmCtEteSEStart.value,
+              selectCfmCtEteSEEnd.value
+          );
+          break;
+      default:
+          break;
+  }
+  return disabled;
+}
+function checkStartAndEnd(start, end) {
+    return !isAlreadySubmit.value
+        ? !(start && end)
+        : start !== end;
+}
+
+// created() logic
+isShowBarOpen.value = !(conformanceLogCreateCheckId.value || conformanceFilterCreateCheckId.value);
+// 選取 list 的結果
+emitter.on('actListData', (data) => {
+  selectConformanceTask.value = data;
+});
+
+setTaskByCategoryOnRadioEmitting();
+setTaskByCategoryOnListSeqEmitting();
+
+// Radio 切換時，資料要清空
+emitter.on('isRadioChange', (data) => {
+  if(data) {
+    selectTimeReset();
+    selectDurationTime.value = { min: 0, max: 0};
+  };
+});
+emitter.on('isRadioSeqChange', (data) => {
+  if(data) {
+    selectTimeReset();
+  };
+});
+emitter.on('isRadioProcessScopeChange', (data) => {
+  if(data) {
+    selectTimeReset();
+    selectDurationTime.value = { min: 0, max: 0};
+  };
+});
+emitter.on('isRadioActSeqMoreChange', (data) => {
+  if(data) {
+    selectTimeReset();
+    if(selectedActSeqMore.value !== 'All') selectDurationTime.value = { min: 0, max: 0};
+  };
+});
+emitter.on('isRadioActSeqFromToChange', (data) => {
+  if(data) {
+    selectTimeReset();
+    selectDurationTime.value = { min: 0, max: 0};
+  };
+});
+
+// beforeUnmount
+onBeforeUnmount(() => {
+  isSubmitReset();
+  selectTimeReset();
+});
 </script>
 <style>
 .text-shadow{
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
index dc54366..e5eb4c7 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
@@ -9,40 +9,33 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  props: ['data', 'select'],
-  data() {
-    return {
-      sortData: [],
-      actList: this.select,
-    }
-  },
-  watch: {
-    data: {
-      handler: function(newValue) {
-        this.sortData = sortNumEngZhtw(newValue)
-      },
-      immediate: true, // 立即執行一次排序
-    },
-    select: function(newValue) {
-      this.actList = newValue;
-    }
-  },
-  methods: {
-    /**
-     * 將選取的 Activities 傳出去
-     */
-    actListData() {
-      this.$emitter.emit('actListData', this.actList);
-    }
-  },
-  created() {
-    this.$emitter.on('reset', (data) => {
-      this.actList = data;
-    });
-  },
+const props = defineProps(['data', 'select']);
+
+const sortData = ref([]);
+const actList = ref(props.select);
+
+watch(() => props.data, (newValue) => {
+  sortData.value = sortNumEngZhtw(newValue);
+}, { immediate: true });
+
+watch(() => props.select, (newValue) => {
+  actList.value = newValue;
+});
+
+/**
+ * 將選取的 Activities 傳出去
+ */
+function actListData() {
+  emitter.emit('actListData', actList.value);
 }
+
+// created
+emitter.on('reset', (data) => {
+  actList.value = data;
+});
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
index 6921b2a..fb5524b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -9,65 +9,55 @@
     </div>
   </div>
 </template>
-<script>
-import { mapActions, } from 'pinia';
+<script setup>
+import { ref, computed, watch } from 'vue';
 import { useConformanceInputStore } from "@/stores/conformanceInput";
 import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  props: ['title', 'select', 'data', 'category', 'task', 'isSubmit'],
-  data() {
-    return {
-      sortData: [],
-      localSelect: null,
-      selectedRadio: null,
-    }
-  },
-  watch: {
-    data: {
-      handler: function(newValue) {
-        this.sortData = sortNumEngZhtw(newValue)
-      },
-      immediate: true, // 立即執行一次排序
-    },
-    task: function(newValue) {
-      this.selectedRadio = newValue;
-    },
-  },
-  computed: {
-    inputActivityRadioData: {
-      get(){
-        return {
-          category: this.category,
-          task: this.selectedRadio, // For example, "a", or "出院"
-      };
-      },
-    } ,
-  },
-  methods: {
-    /**
-     * 將選取的 Activity 傳出去
-     */
-    actRadioData() {
-      this.localSelect = null;
-      this.$emitter.emit('actRadioData', this.inputActivityRadioData);
-      this.$emit('selected-task', this.selectedRadio);
-      this.setActivityRadioStartEndData(this.inputActivityRadioData.task);
-    },
-    setGlobalActivityRadioDataState(){
-      //this.title: value might be "From" or "To"
-      this.setActivityRadioStartEndData(this.inputActivityRadioData.task, this.title);
-    },
-    ...mapActions(useConformanceInputStore, ['setActivityRadioStartEndData']),
-  },
-  created() {
-    sortNumEngZhtw(this.sortData);
-    this.localSelect = this.isSubmit ? this.select : null;
-    this.selectedRadio = this.localSelect;
-    this.$emitter.on('reset', (data) => {
-      this.selectedRadio = data;
-    });
-    this.setGlobalActivityRadioDataState();
-  },
+const props = defineProps(['title', 'select', 'data', 'category', 'task', 'isSubmit']);
+const emit = defineEmits(['selected-task']);
+
+const conformanceInputStore = useConformanceInputStore();
+
+const sortData = ref([]);
+const localSelect = ref(null);
+const selectedRadio = ref(null);
+
+watch(() => props.data, (newValue) => {
+  sortData.value = sortNumEngZhtw(newValue);
+}, { immediate: true });
+
+watch(() => props.task, (newValue) => {
+  selectedRadio.value = newValue;
+});
+
+const inputActivityRadioData = computed(() => ({
+  category: props.category,
+  task: selectedRadio.value,
+}));
+
+/**
+ * 將選取的 Activity 傳出去
+ */
+function actRadioData() {
+  localSelect.value = null;
+  emitter.emit('actRadioData', inputActivityRadioData.value);
+  emit('selected-task', selectedRadio.value);
+  conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task);
 }
+
+function setGlobalActivityRadioDataState() {
+  //this.title: value might be "From" or "To"
+  conformanceInputStore.setActivityRadioStartEndData(inputActivityRadioData.value.task, props.title);
+}
+
+// created
+sortNumEngZhtw(sortData.value);
+localSelect.value = props.isSubmit ? props.select : null;
+selectedRadio.value = localSelect.value;
+emitter.on('reset', (data) => {
+  selectedRadio.value = data;
+});
+setGlobalActivityRadioDataState();
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
index 80762cc..f6c2d8e 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -41,93 +41,92 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, computed } from 'vue';
 import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  props: ['data', 'listSeq', 'isSubmit', 'category'],
-  data() {
-    return {
-      listSequence: [],
-      lastItemIndex: null,
-      isSelect: true
-    }
-  },
-  computed: {
-    datadata: function() {
-      // Activity List 要排序
-      let newData;
-      if(this.data !== null) {
-        newData = JSON.parse(JSON.stringify(this.data));
-        sortNumEngZhtw(newData);
-      }
-      return newData;
-    },
-  },
-  methods: {
-    /**
-     * double click Activity List
-     * @param {number} index data item index
-     * @param {object} element data item
-     */
-    moveActItem(index, element){
-      this.listSequence.push(element);
-    },
-    /**
-     * double click Sequence List
-     * @param {number} index data item index
-     * @param {object} element data item
-     */
-    moveSeqItem(index, element){
-      this.listSequence.splice(index, 1);
-    },
-    /**
-     * get listSequence
-     */
-    getComponentData(){
-      this.$emitter.emit('getListSequence',{
-        category: this.category,
-        task: this.listSequence,
-      });
-    },
-    /**
-     * Element dragging started
-     */
-    onStart(evt) {
-      const lastChild = evt.to.lastChild.lastChild;
-      lastChild.style.display = 'none';
-      // 隱藏拖曳元素原位置
-      const originalElement = evt.item;
-      originalElement.style.display = 'none';
-      // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
-      const listIndex = this.listSequence.length - 1;
-      if(evt.oldIndex === listIndex) this.lastItemIndex  = listIndex;
-    },
-    /**
-     * Element dragging ended
-     */
-    onEnd(evt) {
-      // 顯示拖曳元素
-      const originalElement = evt.item;
-      originalElement.style.display = '';
-      // 拖曳結束要顯示箭頭，但最後一個不用
-      const lastChild = evt.item.lastChild;
-      const listIndex = this.listSequence.length - 1
-      if (evt.oldIndex !== listIndex) {
-        lastChild.style.display = '';
-      }
-      // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
-      this.lastItemIndex = null;
-    },
-  },
-  created() {
-    const newlist = JSON.parse(JSON.stringify(this.listSeq));
-    this.listSequence = this.isSubmit ? newlist : [];
-    this.$emitter.on('reset', (data) => {
-      this.listSequence = [];
-    });
-  },
+const props = defineProps(['data', 'listSeq', 'isSubmit', 'category']);
+
+const listSequence = ref([]);
+const lastItemIndex = ref(null);
+const isSelect = ref(true);
+
+const datadata = computed(() => {
+  // Activity List 要排序
+  let newData;
+  if(props.data !== null) {
+    newData = JSON.parse(JSON.stringify(props.data));
+    sortNumEngZhtw(newData);
+  }
+  return newData;
+});
+
+/**
+ * double click Activity List
+ * @param {number} index data item index
+ * @param {object} element data item
+ */
+function moveActItem(index, element) {
+  listSequence.value.push(element);
 }
+
+/**
+ * double click Sequence List
+ * @param {number} index data item index
+ * @param {object} element data item
+ */
+function moveSeqItem(index, element) {
+  listSequence.value.splice(index, 1);
+}
+
+/**
+ * get listSequence
+ */
+function getComponentData() {
+  emitter.emit('getListSequence', {
+    category: props.category,
+    task: listSequence.value,
+  });
+}
+
+/**
+ * Element dragging started
+ */
+function onStart(evt) {
+  const lastChild = evt.to.lastChild.lastChild;
+  lastChild.style.display = 'none';
+  // 隱藏拖曳元素原位置
+  const originalElement = evt.item;
+  originalElement.style.display = 'none';
+  // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  const listIndex = listSequence.value.length - 1;
+  if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
+}
+
+/**
+ * Element dragging ended
+ */
+function onEnd(evt) {
+  // 顯示拖曳元素
+  const originalElement = evt.item;
+  originalElement.style.display = '';
+  // 拖曳結束要顯示箭頭，但最後一個不用
+  const lastChild = evt.item.lastChild;
+  const listIndex = listSequence.value.length - 1;
+  if (evt.oldIndex !== listIndex) {
+    lastChild.style.display = '';
+  }
+  // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  lastItemIndex.value = null;
+}
+
+// created
+const newlist = JSON.parse(JSON.stringify(props.listSeq));
+listSequence.value = props.isSubmit ? newlist : [];
+emitter.on('reset', (data) => {
+  listSequence.value = [];
+});
 </script>
 <style scoped>
 @reference "../../../../assets/tailwind.css";
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
index 56d4fac..f392e73 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -50,90 +50,81 @@
     </div>
   </section>
 </template>
-<script>
+<script setup>
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
+const conformanceStore = useConformanceStore();
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
-  },
-  data() {
-    return {
-      ruleType: [
-        {id: 1, name: 'Have activity'},
-        {id: 2, name: 'Activity sequence'},
-        {id: 3, name: 'Activity duration'},
-        {id: 4, name: 'Processing time'},
-        {id: 5, name: 'Waiting time'},
-        {id: 6, name: 'Cycle time'},
-      ],
-      activitySequence: [
-        {id: 1, name: 'Start & End'},
-        {id: 2, name: 'Sequence'},
-      ],
-      mode: [
-        {id: 1, name: 'Directly follows'},
-        {id: 2, name: 'Eventually follows'},
-        {id: 3, name: 'Short loop(s)'},
-        {id: 4, name: 'Self loop(s)'},
-      ],
-      processScope: [
-        {id: 1, name: 'End to end'},
-        {id: 2, name: 'Partial'},
-      ],
-      actSeqMore: [
-        {id: 1, name: 'All'},
-        {id: 2, name: 'Start'},
-        {id: 3, name: 'End'},
-        {id: 4, name: 'Start & End'},
-      ],
-      actSeqFromTo: [
-        {id: 1, name: 'From'},
-        {id: 2, name: 'To'},
-        {id: 3, name: 'From & To'},
-      ]
-    }
-  },
-  methods: {
-    /**
-     * 切換 Rule Type 的選項時的行為
-     */
-    changeRadio() {
-      this.selectedActivitySequence = 'Start & End';
-      this.selectedMode = 'Directly follows';
-      this.selectedProcessScope = 'End to end';
-      this.selectedActSeqMore = 'All';
-      this.selectedActSeqFromTo = 'From';
-      this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
-    },
-    /**
-     * 切換 Activity sequence 的選項時的行為
-     */
-    changeRadioSeq() {
-      this.$emitter.emit('isRadioSeqChange',true);
-    },
-    /**
-     * 切換 Processing time 的選項時的行為
-     */
-    changeRadioProcessScope() {
-      this.$emitter.emit('isRadioProcessScopeChange', true);
-    },
-    /**
-     * 切換 Process Scope 的選項時的行為
-     */
-    changeRadioActSeqMore() {
-      this.$emitter.emit('isRadioActSeqMoreChange', true);
-    },
-    /**
-     * 切換 Activity Sequence 的選項時的行為
-     */
-    changeRadioActSeqFromTo() {
-      this.$emitter.emit('isRadioActSeqFromToChange', true);
-    },
-  }
+const ruleType = [
+  {id: 1, name: 'Have activity'},
+  {id: 2, name: 'Activity sequence'},
+  {id: 3, name: 'Activity duration'},
+  {id: 4, name: 'Processing time'},
+  {id: 5, name: 'Waiting time'},
+  {id: 6, name: 'Cycle time'},
+];
+const activitySequence = [
+  {id: 1, name: 'Start & End'},
+  {id: 2, name: 'Sequence'},
+];
+const mode = [
+  {id: 1, name: 'Directly follows'},
+  {id: 2, name: 'Eventually follows'},
+  {id: 3, name: 'Short loop(s)'},
+  {id: 4, name: 'Self loop(s)'},
+];
+const processScope = [
+  {id: 1, name: 'End to end'},
+  {id: 2, name: 'Partial'},
+];
+const actSeqMore = [
+  {id: 1, name: 'All'},
+  {id: 2, name: 'Start'},
+  {id: 3, name: 'End'},
+  {id: 4, name: 'Start & End'},
+];
+const actSeqFromTo = [
+  {id: 1, name: 'From'},
+  {id: 2, name: 'To'},
+  {id: 3, name: 'From & To'},
+];
+
+/**
+ * 切換 Rule Type 的選項時的行為
+ */
+function changeRadio() {
+  selectedActivitySequence.value = 'Start & End';
+  selectedMode.value = 'Directly follows';
+  selectedProcessScope.value = 'End to end';
+  selectedActSeqMore.value = 'All';
+  selectedActSeqFromTo.value = 'From';
+  emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
+}
+/**
+ * 切換 Activity sequence 的選項時的行為
+ */
+function changeRadioSeq() {
+  emitter.emit('isRadioSeqChange',true);
+}
+/**
+ * 切換 Processing time 的選項時的行為
+ */
+function changeRadioProcessScope() {
+  emitter.emit('isRadioProcessScopeChange', true);
+}
+/**
+ * 切換 Process Scope 的選項時的行為
+ */
+function changeRadioActSeqMore() {
+  emitter.emit('isRadioActSeqMoreChange', true);
+}
+/**
+ * 切換 Activity Sequence 的選項時的行為
+ */
+function changeRadioActSeqFromTo() {
+  emitter.emit('isRadioActSeqFromToChange', true);
 }
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
index 5c1b1b4..68ba424 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -1,264 +1,258 @@
 <template>
   <div class="px-4 text-sm">
     <!-- Have activity -->
-    <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
+    <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="state.containstTasksData" :select="isSubmitTask"></ResultCheck>
     <!-- Activity sequence  -->
     <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
-    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="state.selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="state.selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
     <!-- Activity duration -->
-    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
+    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="state.durationData" :select="isSubmitDurationData"></ResultCheck>
     <!-- Processing time -->
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
     <!-- Waiting time -->
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="state.selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="state.selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
     <!-- Cycle time -->
-    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
-    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="state.selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="state.selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
+import emitter from '@/utils/emitter';
 import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
 import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
 import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
 
-export default {
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
+const conformanceStore = useConformanceStore();
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
-  },
-  props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE'],
-  components: {
-    ResultCheck,
-    ResultArrow,
-    ResultDot,
-  },
-  data() {
-    return {
-      containstTasksData: null,
-      startEndData: null,
-      selectCfmSeqStart: null,
-      selectCfmSeqEnd: null,
-      selectCfmSeqDirectly: [],
-      selectCfmSeqEventually: [],
-      durationData: null,
-      selectCfmPtEteStart: null, // Processing time
-      selectCfmPtEteEnd: null,
-      selectCfmPtEteSEStart: null,
-      selectCfmPtEteSEEnd: null,
-      selectCfmPtPStart: null,
-      selectCfmPtPEnd: null,
-      selectCfmPtPSEStart: null,
-      selectCfmPtPSEEnd: null,
-      selectCfmWtEteStart: null, // Waiting time
-      selectCfmWtEteEnd: null,
-      selectCfmWtEteSEStart: null,
-      selectCfmWtEteSEEnd: null,
-      selectCfmWtPStart: null,
-      selectCfmWtPEnd: null,
-      selectCfmWtPSEStart: null,
-      selectCfmWtPSEEnd: null,
-      selectCfmCtEteStart: null, // Cycle time
-      selectCfmCtEteEnd: null,
-      selectCfmCtEteSEStart: null,
-      selectCfmCtEteSEEnd: null,
-      startAndEndIsReset: false,
-    }
-  },
-  computed: {
-    selectCfmSeqSE: function() {
-      const data = [];
-      if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
-      if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
-      data.sort((a, b) => {
-        const order = { 'Start': 1, 'End': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-    selectCfmPtEteSE: function() {
-      const data = [];
-      if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
-      if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd);
-      data.sort((a, b) => {
-        const order = { 'Start': 1, 'End': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-    selectCfmPtPSE: function() {
-      const data = [];
-      if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart);
-      if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd);
-      data.sort((a, b) => {
-        const order = { 'From': 1, 'To': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-    selectCfmWtEteSE: function() {
-      const data = [];
-      if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart);
-      if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd);
-      data.sort((a, b) => {
-        const order = { 'Start': 1, 'End': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-    selectCfmWtPSE: function() {
-      const data = [];
-      if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart);
-      if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd);
-      data.sort((a, b) => {
-        const order = { 'From': 1, 'To': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-    selectCfmCtEteSE: function() {
-      const data = [];
-      if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart);
-      if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd);
-      data.sort((a, b) => {
-        const order = { 'Start': 1, 'End': 2};
-        return order[a.category] - order[b.category];
-      });
-      return data;
-    },
-  },
-  methods: {
-    /**
-     * All reset
-     */
-    reset() {
-      this.containstTasksData = null;
-      this.startEndData = null;
-      this.selectCfmSeqStart = null;
-      this.selectCfmSeqEnd = null;
-      this.selectCfmSeqDirectly = [];
-      this.selectCfmSeqEventually = [];
-      this.durationData = null;
-      this.selectCfmPtEteStart = null;
-      this.selectCfmPtEteEnd = null;
-      this.selectCfmPtEteSEStart = null;
-      this.selectCfmPtEteSEEnd = null;
-      this.selectCfmPtPStart = null;
-      this.selectCfmPtPEnd = null;
-      this.selectCfmPtPSEStart = null;
-      this.selectCfmPtPSEEnd = null;
-      this.selectCfmWtEteStart = null; // Waiting time
-      this.selectCfmWtEteEnd = null;
-      this.selectCfmWtEteSEStart = null;
-      this.selectCfmWtEteSEEnd = null;
-      this.selectCfmWtPStart = null;
-      this.selectCfmWtPEnd = null;
-      this.selectCfmWtPSEStart = null;
-      this.selectCfmWtPSEEnd = null;
-      this.selectCfmCtEteStart = null; // Cycle time
-      this.selectCfmCtEteEnd = null;
-      this.selectCfmCtEteSEStart = null;
-      this.selectCfmCtEteSEEnd = null;
-      this.startAndEndIsReset = true;
-    },
-  },
-  created() {
-    this.$emitter.on('actListData', (data) => {
-      this.containstTasksData = data;
-    });
-    this.$emitter.on('actRadioData', (newData) => {
-    const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
+const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE']);
 
-    const categoryMapping = {
-      'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
-      'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
-      'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
-      'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
-      'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
-      'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
-      'cfmPtPStart': ['From', 'selectCfmPtPStart'],
-      'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
-      'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
-      'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
-      'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
-      'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
-      'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
-      'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
-      'cfmWtPStart': ['From', 'selectCfmWtPStart'],
-      'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
-      'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
-      'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
-      'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
-      'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
-      'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
-      'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
-    };
+const state = reactive({
+  containstTasksData: null,
+  startEndData: null,
+  selectCfmSeqStart: null,
+  selectCfmSeqEnd: null,
+  selectCfmSeqDirectly: [],
+  selectCfmSeqEventually: [],
+  durationData: null,
+  selectCfmPtEteStart: null, // Processing time
+  selectCfmPtEteEnd: null,
+  selectCfmPtEteSEStart: null,
+  selectCfmPtEteSEEnd: null,
+  selectCfmPtPStart: null,
+  selectCfmPtPEnd: null,
+  selectCfmPtPSEStart: null,
+  selectCfmPtPSEEnd: null,
+  selectCfmWtEteStart: null, // Waiting time
+  selectCfmWtEteEnd: null,
+  selectCfmWtEteSEStart: null,
+  selectCfmWtEteSEEnd: null,
+  selectCfmWtPStart: null,
+  selectCfmWtPEnd: null,
+  selectCfmWtPSEStart: null,
+  selectCfmWtPSEEnd: null,
+  selectCfmCtEteStart: null, // Cycle time
+  selectCfmCtEteEnd: null,
+  selectCfmCtEteSEStart: null,
+  selectCfmCtEteSEEnd: null,
+  startAndEndIsReset: false,
+});
 
-    const updateSelection = (key, mainSelector, secondarySelector) => {
-      if (this[mainSelector]) {
-        if (data.task !== this[mainSelector]) this[secondarySelector] = null;
-      }
-      data.category = categoryMapping[key][0];
-      this[mainSelector] = data;
-    };
+const selectCfmSeqSE = computed(() => {
+  const data = [];
+  if(state.selectCfmSeqStart) data.push(state.selectCfmSeqStart);
+  if(state.selectCfmSeqEnd) data.push(state.selectCfmSeqEnd);
+  data.sort((a, b) => {
+    const order = { 'Start': 1, 'End': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
 
-      if (categoryMapping[data.category]) {
-        const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
-        if (secondarySelector) {
-          updateSelection(data.category, mainSelector, secondarySelector);
-        } else {
-          data.category = category;
-          this[mainSelector] = [data];
-        }
-      } else if (this.selectedRuleType === 'Activity duration') {
-        this.durationData = [data.task];
-      }
-    });
-    this.$emitter.on('getListSequence', (data) => {
-      switch (data.category) {
-        case 'cfmSeqDirectly':
-          this.selectCfmSeqDirectly = data.task;
-          break;
-        case 'cfmSeqEventually':
-          this.selectCfmSeqEventually = data.task;
-          break;
-        default:
-          break;
-      }
-    });
-    this.$emitter.on('reset', (data) => {
-      this.reset();
-    });
-    // Radio 切換時，資料要清空
-    this.$emitter.on('isRadioChange', (data) => {
-      if(data) this.reset();
-    });
-    this.$emitter.on('isRadioProcessScopeChange', (data) => {
-      if(data) this.reset();
-    });
-    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
-      if(data) this.reset();
-    });
-    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
-      if(data) this.reset();
-    });
-  },
+const selectCfmPtEteSE = computed(() => {
+  const data = [];
+  if(state.selectCfmPtEteSEStart) data.push(state.selectCfmPtEteSEStart);
+  if(state.selectCfmPtEteSEEnd) data.push(state.selectCfmPtEteSEEnd);
+  data.sort((a, b) => {
+    const order = { 'Start': 1, 'End': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
+
+const selectCfmPtPSE = computed(() => {
+  const data = [];
+  if(state.selectCfmPtPSEStart) data.push(state.selectCfmPtPSEStart);
+  if(state.selectCfmPtPSEEnd) data.push(state.selectCfmPtPSEEnd);
+  data.sort((a, b) => {
+    const order = { 'From': 1, 'To': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
+
+const selectCfmWtEteSE = computed(() => {
+  const data = [];
+  if(state.selectCfmWtEteSEStart) data.push(state.selectCfmWtEteSEStart);
+  if(state.selectCfmWtEteSEEnd) data.push(state.selectCfmWtEteSEEnd);
+  data.sort((a, b) => {
+    const order = { 'Start': 1, 'End': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
+
+const selectCfmWtPSE = computed(() => {
+  const data = [];
+  if(state.selectCfmWtPSEStart) data.push(state.selectCfmWtPSEStart);
+  if(state.selectCfmWtPSEEnd) data.push(state.selectCfmWtPSEEnd);
+  data.sort((a, b) => {
+    const order = { 'From': 1, 'To': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
+
+const selectCfmCtEteSE = computed(() => {
+  const data = [];
+  if(state.selectCfmCtEteSEStart) data.push(state.selectCfmCtEteSEStart);
+  if(state.selectCfmCtEteSEEnd) data.push(state.selectCfmCtEteSEEnd);
+  data.sort((a, b) => {
+    const order = { 'Start': 1, 'End': 2};
+    return order[a.category] - order[b.category];
+  });
+  return data;
+});
+
+/**
+ * All reset
+ */
+function reset() {
+  state.containstTasksData = null;
+  state.startEndData = null;
+  state.selectCfmSeqStart = null;
+  state.selectCfmSeqEnd = null;
+  state.selectCfmSeqDirectly = [];
+  state.selectCfmSeqEventually = [];
+  state.durationData = null;
+  state.selectCfmPtEteStart = null;
+  state.selectCfmPtEteEnd = null;
+  state.selectCfmPtEteSEStart = null;
+  state.selectCfmPtEteSEEnd = null;
+  state.selectCfmPtPStart = null;
+  state.selectCfmPtPEnd = null;
+  state.selectCfmPtPSEStart = null;
+  state.selectCfmPtPSEEnd = null;
+  state.selectCfmWtEteStart = null; // Waiting time
+  state.selectCfmWtEteEnd = null;
+  state.selectCfmWtEteSEStart = null;
+  state.selectCfmWtEteSEEnd = null;
+  state.selectCfmWtPStart = null;
+  state.selectCfmWtPEnd = null;
+  state.selectCfmWtPSEStart = null;
+  state.selectCfmWtPSEEnd = null;
+  state.selectCfmCtEteStart = null; // Cycle time
+  state.selectCfmCtEteEnd = null;
+  state.selectCfmCtEteSEStart = null;
+  state.selectCfmCtEteSEEnd = null;
+  state.startAndEndIsReset = true;
 }
+
+// created() logic
+emitter.on('actListData', (data) => {
+  state.containstTasksData = data;
+});
+emitter.on('actRadioData', (newData) => {
+  const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
+
+  const categoryMapping = {
+    'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'],
+    'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'],
+    'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'],
+    'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'],
+    'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'],
+    'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'],
+    'cfmPtPStart': ['From', 'selectCfmPtPStart'],
+    'cfmPtPEnd': ['To', 'selectCfmPtPEnd'],
+    'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'],
+    'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'],
+    'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'],
+    'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'],
+    'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'],
+    'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'],
+    'cfmWtPStart': ['From', 'selectCfmWtPStart'],
+    'cfmWtPEnd': ['To', 'selectCfmWtPEnd'],
+    'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'],
+    'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'],
+    'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'],
+    'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'],
+    'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'],
+    'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart']
+  };
+
+  const updateSelection = (key, mainSelector, secondarySelector) => {
+    if (state[mainSelector]) {
+      if (data.task !== state[mainSelector]) state[secondarySelector] = null;
+    }
+    data.category = categoryMapping[key][0];
+    state[mainSelector] = data;
+  };
+
+    if (categoryMapping[data.category]) {
+      const [category, mainSelector, secondarySelector] = categoryMapping[data.category];
+      if (secondarySelector) {
+        updateSelection(data.category, mainSelector, secondarySelector);
+      } else {
+        data.category = category;
+        state[mainSelector] = [data];
+      }
+    } else if (selectedRuleType.value === 'Activity duration') {
+      state.durationData = [data.task];
+    }
+});
+emitter.on('getListSequence', (data) => {
+  switch (data.category) {
+    case 'cfmSeqDirectly':
+      state.selectCfmSeqDirectly = data.task;
+      break;
+    case 'cfmSeqEventually':
+      state.selectCfmSeqEventually = data.task;
+      break;
+    default:
+      break;
+  }
+});
+emitter.on('reset', (data) => {
+  reset();
+});
+// Radio 切換時，資料要清空
+emitter.on('isRadioChange', (data) => {
+  if(data) reset();
+});
+emitter.on('isRadioProcessScopeChange', (data) => {
+  if(data) reset();
+});
+emitter.on('isRadioActSeqMoreChange', (data) => {
+  if(data) reset();
+});
+emitter.on('isRadioActSeqFromToChange', (data) => {
+  if(data) reset();
+});
 </script>
 <style scoped>
 :deep(.disc) {
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index 1854b1a..103ab35 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -1,9 +1,9 @@
 <template>
   <section class="animate-fadein w-full h-full" >
-    
+
     <!-- Have activity -->
     <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
-    
+
     <!-- Activity sequence  -->
     <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'"
       class="flex justify-between items-center w-full h-full">
@@ -12,7 +12,7 @@
       <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData"
         :category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
     </div>
-    
+
     <!-- actSeqDrag -->
     <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'
       && selectedMode === 'Directly follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqDirectly"
@@ -24,7 +24,7 @@
     <!-- Activity duration -->
     <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"
       :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>
-    
+
       <!-- Processing time -->
     <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
       && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task"
@@ -97,346 +97,316 @@
     </div>
   </section>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useLoadingStore } from '@/stores/loading';
 import { useConformanceStore } from '@/stores/conformance';
+import emitter from '@/utils/emitter';
 import ActList from './ActList.vue';
 import ActRadio from './ActRadio.vue';
 import ActSeqDrag from './ActSeqDrag.vue';
 
-export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const conformanceStore = useConformanceStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
-      selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
-      cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd,
-      cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected
-    } = storeToRefs(conformanceStore);
+const loadingStore = useLoadingStore();
+const conformanceStore = useConformanceStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
+  selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
+  cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd,
+  cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected
+} = storeToRefs(conformanceStore);
 
-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-      selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart,
-      cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,
-      cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected,
-      isEndSelected
-    };
-  },
-  props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually',
-    'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE',
-    'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart',
-    'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd',
-    'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE',
-    'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
-    'isSubmitShowDataWtP', 'isSubmitShowDataCt'
-  ],
-  components: {
-    ActList,
-    ActRadio,
-    ActSeqDrag
-  },
-  data() {
-    return {
-      task: null,
-      taskStart: null,
-      taskEnd: null,
-    }
-  },
-  computed: {
-    // Activity sequence
-    cfmSeqStartData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
-      return this.isEndSelected ? this.setSeqStartAndEndData(this.cfmSeqEnd, 'sources', this.task) : this.cfmSeqStart.map(i => i.label);
-    },
-    cfmSeqEndData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
-      return this.isStartSelected ? this.setSeqStartAndEndData(this.cfmSeqStart, 'sinks', this.task) : this.cfmSeqEnd.map(i => i.label);
-    },
-    // Processing time
-    cfmPtEteStartData: function() {
-      return this.cfmPtEteStart.map(i => i.task);
-    },
-    cfmPtEteEndData: function() {
-      return this.cfmPtEteEnd.map(i => i.task);
-    },
-    cfmPtEteSEStartData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
-      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'end', this.task) : this.setTaskData(this.cfmPtEteSE, 'start');
-    },
-    cfmPtEteSEEndData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
-      return this.isStartSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'start', this.task) : this.setTaskData(this.cfmPtEteSE, 'end');
-    },
-    cfmPtPStartData: function() {
-      return this.cfmPtPStart.map(i => i.task);
-    },
-    cfmPtPEndData: function() {
-      return this.cfmPtPEnd.map(i => i.task);
-    },
-    cfmPtPSEStartData: function() {
-      if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
-      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtPSE, 'end', this.task) : this.setTaskData(this.cfmPtPSE, 'start');
-    },
-    cfmPtPSEEndData: function() {
-      if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
-      return this.isStartSelected ? this.setStartAndEndData(this.cfmPtPSE, 'start', this.task) : this.setTaskData(this.cfmPtPSE, 'end');
-    },
-    // Waiting time
-    cfmWtEteStartData: function() {
-      return this.cfmWtEteStart.map(i => i.task);
-    },
-    cfmWtEteEndData: function() {
-      return this.cfmWtEteEnd.map(i => i.task);
-    },
-    cfmWtEteSEStartData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
-      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'end', this.task) : this.setTaskData(this.cfmWtEteSE, 'start');
-    },
-    cfmWtEteSEEndData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
-      return this.isStartSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'start', this.task) : this.setTaskData(this.cfmWtEteSE, 'end');
-    },
-    cfmWtPStartData: function() {
-      return this.cfmWtPStart.map(i => i.task);
-    },
-    cfmWtPEndData: function() {
-      return this.cfmWtPEnd.map(i => i.task);
-    },
-    cfmWtPSEStartData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
-      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtPSE, 'end', this.task) : this.setTaskData(this.cfmWtPSE, 'start');
-    },
-    cfmWtPSEEndData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
-      return this.isStartSelected ? this.setStartAndEndData(this.cfmWtPSE, 'start', this.task) : this.setTaskData(this.cfmWtPSE, 'end');
-    },
-    // Cycle time
-    cfmCtEteStartData: function() {
-      return this.cfmCtEteStart.map(i => i.task);
-    },
-    cfmCtEteEndData: function() {
-      return this.cfmCtEteEnd.map(i => i.task);
-    },
-    cfmCtEteSEStartData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
-      return this.isEndSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'end', this.task) : this.setTaskData(this.cfmCtEteSE, 'start');
-    },
-    cfmCtEteSEEndData: function() {
-      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
-      return this.isStartSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'start', this.task) : this.setTaskData(this.cfmCtEteSE, 'end');
-    },
-  },
-  watch: { // 解決儲存後的 Rule 檔，無法重新更改規則之問題
-    isSubmitShowDataSeq: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-    isSubmitShowDataPtEte: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-    isSubmitShowDataPtP: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-    isSubmitShowDataWtEte: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-    isSubmitShowDataWtP: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-    isSubmitShowDataCt: {
-      handler: function(newValue) {
-        this.taskStart = newValue.taskStart;
-        this.taskEnd = newValue.taskEnd;
-      }
-    },
-  },
-  methods: {
-    /**
-     * 設定 start and end 的 Radio Data
-     * @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
-     * 傳入以上任一後端接到的 Activities 列表 Data。
-     * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
-     * @returns {array}
-     */
-    setTaskData(data, category) {
-      let newData = data.map(i => i[category]);
-      newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
-      return newData;
-    },
-    /**
-     * 重新設定連動的 start and end 的 Radio Data
-     * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
-     * 傳入以上任一後端接到的 Activities 列表 Data。
-     * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
-     * @param {string} task 已選擇的 Activity task
-     * @returns {array}
-     */
-    setStartAndEndData(data, category, task) {
-      let oppositeCategory = '';
-      if (category === 'start') {
-          oppositeCategory = 'end';
-      } else {
-          oppositeCategory = 'start';
-      };
-      let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]);
-      newData = [...new Set(newData)];
-      return newData;
-    },
-    /**
-     * 重新設定 Activity sequence 連動的 start and end 的 Radio Data
-     * @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
-     * @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
-     * @param {string} task 已選擇的 Activity task
-     * @returns {array}
-     */
-    setSeqStartAndEndData(data, category, task) {
-      let newData = data.filter(i => i.label === task).map(i => i[category]);
-      newData = [...new Set(...newData)];
-      return newData;
-    },
-    /**
-     * select start list's task
-     * @param {event} e 觸發 input 的詳細事件
-     */
-    selectStart(e) {
-      this.taskStart = e;
-      if(this.isStartSelected === null || this.isStartSelected === true){
-        this.isStartSelected = true;
-        this.isEndSelected = false;
-        this.task = e;
-        this.taskEnd = null;
-        this.$emitter.emit('sratrAndEndToStart', {
-          start: true,
-          end: false,
-        });
-      };
-    },
-    /**
-     * select End list's task
-     * @param {event} e 觸發 input 的詳細事件
-     */
-    selectEnd(e) {
-      this.taskEnd = e;
-      if(this.isEndSelected === null || this.isEndSelected === true){
-        this.isEndSelected = true;
-        this.isStartSelected = false;
-        this.task = e;
-        this.taskStart = null;
-        this.$emitter.emit('sratrAndEndToStart', {
-          start: false,
-          end: true,
-        });
-      }
-    },
-    /**
-     * reset all data.
-     */
-    reset() {
-      this.task = null;
-      this.isStartSelected = null;
-      this.isEndSelected = null;
-      this.taskStart = null;
-      this.taskEnd = null;
-    },
-    /**
-     * Radio 切換時，Start & End Data 連動改變
-     * @param {boolean} data true | false，傳入 true 或 false
-     */
-    setResetData(data) {
-      if(data) {
-        if(this.isSubmit) {
-          switch (this.selectedRuleType) {
-            case 'Activity sequence':
-              this.task = this.isSubmitShowDataSeq.task;
-              this.isStartSelected = this.isSubmitShowDataSeq.isStartSelected;
-              this.isEndSelected = this.isSubmitShowDataSeq.isEndSelected;
+const props = defineProps(['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually',
+  'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE',
+  'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart',
+  'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd',
+  'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE',
+  'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte',
+  'isSubmitShowDataWtP', 'isSubmitShowDataCt'
+]);
+
+const task = ref(null);
+const taskStart = ref(null);
+const taskEnd = ref(null);
+
+// Activity sequence
+const cfmSeqStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
+  return isEndSelected.value ? setSeqStartAndEndData(cfmSeqEnd.value, 'sources', task.value) : cfmSeqStart.value.map(i => i.label);
+});
+const cfmSeqEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataSeq.task;
+  return isStartSelected.value ? setSeqStartAndEndData(cfmSeqStart.value, 'sinks', task.value) : cfmSeqEnd.value.map(i => i.label);
+});
+// Processing time
+const cfmPtEteStartData = computed(() => {
+  return cfmPtEteStart.value.map(i => i.task);
+});
+const cfmPtEteEndData = computed(() => {
+  return cfmPtEteEnd.value.map(i => i.task);
+});
+const cfmPtEteSEStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
+  return isEndSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'end', task.value) : setTaskData(cfmPtEteSE.value, 'start');
+});
+const cfmPtEteSEEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtEte.task;
+  return isStartSelected.value ? setStartAndEndData(cfmPtEteSE.value, 'start', task.value) : setTaskData(cfmPtEteSE.value, 'end');
+});
+const cfmPtPStartData = computed(() => {
+  return cfmPtPStart.value.map(i => i.task);
+});
+const cfmPtPEndData = computed(() => {
+  return cfmPtPEnd.value.map(i => i.task);
+});
+const cfmPtPSEStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
+  return isEndSelected.value ? setStartAndEndData(cfmPtPSE.value, 'end', task.value) : setTaskData(cfmPtPSE.value, 'start');
+});
+const cfmPtPSEEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataPtP.task;
+  return isStartSelected.value ? setStartAndEndData(cfmPtPSE.value, 'start', task.value) : setTaskData(cfmPtPSE.value, 'end');
+});
+// Waiting time
+const cfmWtEteStartData = computed(() => {
+  return cfmWtEteStart.value.map(i => i.task);
+});
+const cfmWtEteEndData = computed(() => {
+  return cfmWtEteEnd.value.map(i => i.task);
+});
+const cfmWtEteSEStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
+  return isEndSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'end', task.value) : setTaskData(cfmWtEteSE.value, 'start');
+});
+const cfmWtEteSEEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtEte.task;
+  return isStartSelected.value ? setStartAndEndData(cfmWtEteSE.value, 'start', task.value) : setTaskData(cfmWtEteSE.value, 'end');
+});
+const cfmWtPStartData = computed(() => {
+  return cfmWtPStart.value.map(i => i.task);
+});
+const cfmWtPEndData = computed(() => {
+  return cfmWtPEnd.value.map(i => i.task);
+});
+const cfmWtPSEStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
+  return isEndSelected.value ? setStartAndEndData(cfmWtPSE.value, 'end', task.value) : setTaskData(cfmWtPSE.value, 'start');
+});
+const cfmWtPSEEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataWtP.task;
+  return isStartSelected.value ? setStartAndEndData(cfmWtPSE.value, 'start', task.value) : setTaskData(cfmWtPSE.value, 'end');
+});
+// Cycle time
+const cfmCtEteStartData = computed(() => {
+  return cfmCtEteStart.value.map(i => i.task);
+});
+const cfmCtEteEndData = computed(() => {
+  return cfmCtEteEnd.value.map(i => i.task);
+});
+const cfmCtEteSEStartData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
+  return isEndSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'end', task.value) : setTaskData(cfmCtEteSE.value, 'start');
+});
+const cfmCtEteSEEndData = computed(() => {
+  if(props.isSubmit && task.value === null) task.value = props.isSubmitShowDataCt.task;
+  return isStartSelected.value ? setStartAndEndData(cfmCtEteSE.value, 'start', task.value) : setTaskData(cfmCtEteSE.value, 'end');
+});
+
+// Watchers - 解決儲存後的 Rule 檔，無法重新更改規則之問題
+watch(() => props.isSubmitShowDataSeq, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+watch(() => props.isSubmitShowDataPtEte, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+watch(() => props.isSubmitShowDataPtP, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+watch(() => props.isSubmitShowDataWtEte, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+watch(() => props.isSubmitShowDataWtP, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+watch(() => props.isSubmitShowDataCt, (newValue) => {
+  taskStart.value = newValue.taskStart;
+  taskEnd.value = newValue.taskEnd;
+});
+
+/**
+ * 設定 start and end 的 Radio Data
+ * @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
+ * 傳入以上任一後端接到的 Activities 列表 Data。
+ * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
+ * @returns {array}
+ */
+function setTaskData(data, category) {
+  let newData = data.map(i => i[category]);
+  newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
+  return newData;
+}
+/**
+ * 重新設定連動的 start and end 的 Radio Data
+ * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，
+ * 傳入以上任一後端接到的 Activities 列表 Data。
+ * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
+ * @param {string} task 已選擇的 Activity task
+ * @returns {array}
+ */
+function setStartAndEndData(data, category, taskVal) {
+  let oppositeCategory = '';
+  if (category === 'start') {
+      oppositeCategory = 'end';
+  } else {
+      oppositeCategory = 'start';
+  };
+  let newData = data.filter(i => i[category] === taskVal).map(i => i[oppositeCategory]);
+  newData = [...new Set(newData)];
+  return newData;
+}
+/**
+ * 重新設定 Activity sequence 連動的 start and end 的 Radio Data
+ * @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
+ * @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
+ * @param {string} task 已選擇的 Activity task
+ * @returns {array}
+ */
+function setSeqStartAndEndData(data, category, taskVal) {
+  let newData = data.filter(i => i.label === taskVal).map(i => i[category]);
+  newData = [...new Set(...newData)];
+  return newData;
+}
+/**
+ * select start list's task
+ * @param {event} e 觸發 input 的詳細事件
+ */
+function selectStart(e) {
+  taskStart.value = e;
+  if(isStartSelected.value === null || isStartSelected.value === true){
+    isStartSelected.value = true;
+    isEndSelected.value = false;
+    task.value = e;
+    taskEnd.value = null;
+    emitter.emit('sratrAndEndToStart', {
+      start: true,
+      end: false,
+    });
+  };
+}
+/**
+ * select End list's task
+ * @param {event} e 觸發 input 的詳細事件
+ */
+function selectEnd(e) {
+  taskEnd.value = e;
+  if(isEndSelected.value === null || isEndSelected.value === true){
+    isEndSelected.value = true;
+    isStartSelected.value = false;
+    task.value = e;
+    taskStart.value = null;
+    emitter.emit('sratrAndEndToStart', {
+      start: false,
+      end: true,
+    });
+  }
+}
+/**
+ * reset all data.
+ */
+function reset() {
+  task.value = null;
+  isStartSelected.value = null;
+  isEndSelected.value = null;
+  taskStart.value = null;
+  taskEnd.value = null;
+}
+/**
+ * Radio 切換時，Start & End Data 連動改變
+ * @param {boolean} data true | false，傳入 true 或 false
+ */
+function setResetData(data) {
+  if(data) {
+    if(props.isSubmit) {
+      switch (selectedRuleType.value) {
+        case 'Activity sequence':
+          task.value = props.isSubmitShowDataSeq.task;
+          isStartSelected.value = props.isSubmitShowDataSeq.isStartSelected;
+          isEndSelected.value = props.isSubmitShowDataSeq.isEndSelected;
+          break;
+        case 'Processing time':
+          switch (selectedProcessScope.value) {
+            case 'End to end':
+              task.value = props.isSubmitShowDataPtEte.task;
+              isStartSelected.value = props.isSubmitShowDataPtEte.isStartSelected;
+              isEndSelected.value = props.isSubmitShowDataPtEte.isEndSelected;
               break;
-            case 'Processing time':
-              switch (this.selectedProcessScope) {
-                case 'End to end':
-                  this.task = this.isSubmitShowDataPtEte.task;
-                  this.isStartSelected = this.isSubmitShowDataPtEte.isStartSelected;
-                  this.isEndSelected = this.isSubmitShowDataPtEte.isEndSelected;
-                  break;
-                case 'Partial':
-                  this.task = this.isSubmitShowDataPtP.task;
-                  this.isStartSelected = this.isSubmitShowDataPtP.isStartSelected;
-                  this.isEndSelected = this.isSubmitShowDataPtP.isEndSelected;
-                  break;
-                default:
-                  break;
-              }
-              break;
-            case 'Waiting time':
-              switch (this.selectedProcessScope) {
-                  case 'End to end':
-                    this.task = this.isSubmitShowDataWtEte.task;
-                    this.isStartSelected = this.isSubmitShowDataWtEte.isStartSelected;
-                    this.isEndSelected = this.isSubmitShowDataWtEte.isEndSelected;
-                    break;
-                  case 'Partial':
-                    this.task = this.isSubmitShowDataWtP.task;
-                    this.isStartSelected = this.isSubmitShowDataWtP.isStartSelected;
-                    this.isEndSelected = this.isSubmitShowDataWtP.isEndSelected;
-                    break;
-                  default:
-                    break;
-                }
-                break;
-            case 'Cycle time':
-              this.task = this.isSubmitShowDataCt.task;
-              this.isStartSelected = this.isSubmitShowDataCt.isStartSelected;
-              this.isEndSelected = this.isSubmitShowDataCt.isEndSelected;
+            case 'Partial':
+              task.value = props.isSubmitShowDataPtP.task;
+              isStartSelected.value = props.isSubmitShowDataPtP.isStartSelected;
+              isEndSelected.value = props.isSubmitShowDataPtP.isEndSelected;
               break;
             default:
               break;
           }
-        } else {
-          this.reset();
-        }
+          break;
+        case 'Waiting time':
+          switch (selectedProcessScope.value) {
+              case 'End to end':
+                task.value = props.isSubmitShowDataWtEte.task;
+                isStartSelected.value = props.isSubmitShowDataWtEte.isStartSelected;
+                isEndSelected.value = props.isSubmitShowDataWtEte.isEndSelected;
+                break;
+              case 'Partial':
+                task.value = props.isSubmitShowDataWtP.task;
+                isStartSelected.value = props.isSubmitShowDataWtP.isStartSelected;
+                isEndSelected.value = props.isSubmitShowDataWtP.isEndSelected;
+                break;
+              default:
+                break;
+            }
+            break;
+        case 'Cycle time':
+          task.value = props.isSubmitShowDataCt.task;
+          isStartSelected.value = props.isSubmitShowDataCt.isStartSelected;
+          isEndSelected.value = props.isSubmitShowDataCt.isEndSelected;
+          break;
+        default:
+          break;
       }
+    } else {
+      reset();
     }
-  },
-  created() {
-    this.$emitter.on('isRadioChange', (data) => {
-      this.setResetData(data);
-    });
-    this.$emitter.on('isRadioSeqChange', (data) => {
-      this.setResetData(data);
-    });
-    this.$emitter.on('isRadioProcessScopeChange', (data) => {
-      if(data) {
-        this.setResetData(data);
-      };
-    });
-    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
-      if(data) {
-        this.setResetData(data);
-      };
-    });
-    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
-      if(data) {
-        this.setResetData(data);
-      };
-    });
-    this.$emitter.on('reset', data => {
-      this.reset();
-    });
   }
 }
+
+// created() logic
+emitter.on('isRadioChange', (data) => {
+  setResetData(data);
+});
+emitter.on('isRadioSeqChange', (data) => {
+  setResetData(data);
+});
+emitter.on('isRadioProcessScopeChange', (data) => {
+  if(data) {
+    setResetData(data);
+  };
+});
+emitter.on('isRadioActSeqMoreChange', (data) => {
+  if(data) {
+    setResetData(data);
+  };
+});
+emitter.on('isRadioActSeqFromToChange', (data) => {
+  if(data) {
+    setResetData(data);
+  };
+});
+emitter.on('reset', data => {
+  reset();
+});
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index ca65360..82509d7 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -1,377 +1,384 @@
 <template>
-<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time' 
+<div class="mt-2 mb-12" v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Waiting time'
   || selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
   <p class="h2">Time Range</p>
   <div class=" text-sm leading-normal">
       <!-- Activity duration -->
       <TimeRangeDuration
-      v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" 
+      v-if="selectedRuleType === 'Activity duration'" :time="state.timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
      <!-- Processing time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'All'" :time="state.timeCfmPtEteAll" :select="isSubmitTimeCfmPtEteAll" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start'" :time="state.timeCfmPtEteStart" :select="isSubmitTimeCfmPtEteStart" @min-total-seconds="minTotalSeconds"
          @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'End'" :time="state.timeCfmPtEteEnd" :select="isSubmitTimeCfmPtEteEnd" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmPtEteSE" :select="isSubmitTimeCfmPtEteSE" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'From'" :time="state.timeCfmPtPStart" :select="isSubmitTimeCfmPtPStart" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'To'" :time="state.timeCfmPtPEnd" :select="isSubmitTimeCfmPtPEnd" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'From & To'" :time="state.timeCfmPtPSE" :select="isSubmitTimeCfmPtPSE" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
      <!-- Waiting time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'All'" :time="timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'All'" :time="state.timeCfmWtEteAll" :select="isSubmitTimeCfmWtEteAll" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start'" :time="state.timeCfmWtEteStart" :select="isSubmitTimeCfmWtEteStart" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'End'" :time="state.timeCfmWtEteEnd" :select="isSubmitTimeCfmWtEteEnd" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmWtEteSE" :select="isSubmitTimeCfmWtEteSE" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'From'" :time="state.timeCfmWtPStart" :select="isSubmitTimeCfmWtPStart" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'To'" :time="state.timeCfmWtPEnd" :select="isSubmitTimeCfmWtPEnd" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' 
-      && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial'
+      && selectedActSeqFromTo === 'From & To'" :time="state.timeCfmWtPSE" :select="isSubmitTimeCfmWtPSE" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
      <!-- Cycle time -->
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'All'" :time="timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'All'" :time="state.timeCfmCtEteAll" :select="isSubmitTimeCfmCtEteAll" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start'" :time="state.timeCfmCtEteStart" :select="isSubmitTimeCfmCtEteStart" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'End'" :time="state.timeCfmCtEteEnd" :select="isSubmitTimeCfmCtEteEnd" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
-     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' 
-      && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds" 
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end'
+      && selectedActSeqMore === 'Start & End'" :time="state.timeCfmCtEteSE" :select="isSubmitTimeCfmCtEteSE" @min-total-seconds="minTotalSeconds"
         @max-total-seconds="maxTotalSeconds" />
   </div>
 </div>
 </template>
-<script>
-import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
+<script setup>
+import { reactive } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
+import emitter from '@/utils/emitter';
+import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
 
-export default {
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
-      cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
-      cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
-      cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
-      cfmWtEteWhole, cfmCtEteWhole
-    } = storeToRefs(conformanceStore);
+const conformanceStore = useConformanceStore();
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
+  selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
+  cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
+  cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
+  cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
+  cfmWtEteWhole, cfmCtEteWhole
+} = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
-      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
-      cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
-      cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart,
-      cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, cfmPtEteWhole,
-      cfmWtEteWhole, cfmCtEteWhole
-    };
-  },
-  props: ['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
+const props = defineProps(['isSubmitDurationTime', 'isSubmitTimeCfmPtEteAll', 'isSubmitTimeCfmPtEteStart',
   'isSubmitTimeCfmPtEteEnd', 'isSubmitTimeCfmPtEteSE', 'isSubmitTimeCfmPtPStart',
   'isSubmitTimeCfmPtPEnd', 'isSubmitTimeCfmPtPSE', 'isSubmitTimeCfmWtEteAll',
   'isSubmitTimeCfmWtEteStart', 'isSubmitTimeCfmWtEteEnd', 'isSubmitTimeCfmWtEteSE',
   'isSubmitTimeCfmWtPStart', 'isSubmitTimeCfmWtPEnd', 'isSubmitTimeCfmWtPSE', 'isSubmitTimeCfmCtEteAll',
    'isSubmitTimeCfmCtEteStart', 'isSubmitTimeCfmCtEteEnd', 'isSubmitTimeCfmCtEteSE'
-  ],
-  data() {
-    return {
-      timeDuration: null, // Activity duration
-      timeCfmPtEteAll: null, // Processing time
-      timeCfmPtEteAllDefault: null,
-      timeCfmPtEteStart: null,
-      timeCfmPtEteEnd: null,
-      timeCfmPtEteSE: null,
-      timeCfmPtPStart: null,
-      timeCfmPtPEnd: null,
-      timeCfmPtPSE: null,
-      timeCfmWtEteAll: null, // Waiting time
-      timeCfmWtEteAllDefault: null,
-      timeCfmWtEteStart: null,
-      timeCfmWtEteEnd: null,
-      timeCfmWtEteSE: null,
-      timeCfmWtPStart: null,
-      timeCfmWtPEnd: null,
-      timeCfmWtPSE: null,
-      timeCfmCtEteAll: null, // Cycle time
-      timeCfmCtEteAllDefault: null,
-      timeCfmCtEteStart: null,
-      timeCfmCtEteEnd: null,
-      timeCfmCtEteSE: null,
-      selectCfmPtEteSEStart: null,
-      selectCfmPtEteSEEnd: null,
-      selectCfmPtPSEStart: null,
-      selectCfmPtPSEEnd: null,
-      selectCfmWtEteSEStart: null,
-      selectCfmWtEteSEEnd: null,
-      selectCfmWtPSEStart: null,
-      selectCfmWtPSEEnd: null,
-      selectCfmCtEteSEStart: null,
-      selectCfmCtEteSEEnd: null,
-    }
-  },
-  components: {
-    TimeRangeDuration,
-  },
-  methods: {
-    /**
-     * get min total seconds
-     * @param {Number} e 最小值總秒數
-     */
-    minTotalSeconds(e) {
-      this.$emit('min-total-seconds', e);
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 最大值總秒數
-     */
-    maxTotalSeconds(e) {
-      this.$emit('max-total-seconds', e);
-    },
-    /**
-     * get Time Range(duration)
-     * @param {array} data API data，Activity 列表
-     * @param {string} category 'act' | 'single' | 'double'，傳入以上任一值。
-     * @param {string} task select Radio task or start
-     * @param {string} taskTwo end
-     * @returns {object} {min:12, max:345}
-     */
-     getDurationTime(data, category, task, taskTwo) {
-      let result = {min:0, max:0};
-      switch (category) {
-        case 'act':
-          data.forEach(i => {
-            if(i.label === task) {
-              result = i.duration;
-            }
-          });
-          break;
-        case 'single':
-          data.forEach(i => {
-            if(i.task === task) {
-              result = i.time;
-            }
-          });
-          break;
-        case 'double':
-          data.forEach(i => {
-            if(i.start === task && i.end === taskTwo) {
-              result = i.time;
-            }
-          });
-          break;
-        case 'all':
-          result = data;
-          break
-        default:
-          break;
-      };
-      return result;
-    },
-    /**
-     * All reset
-     */
-     reset() {
-      this.timeDuration = null; // Activity duration
-      this.timeCfmPtEteAll = this.timeCfmPtEteAllDefault; // Processing time
-      this.timeCfmPtEteStart = null;
-      this.timeCfmPtEteEnd = null;
-      this.timeCfmPtEteSE = null;
-      this.timeCfmPtPStart = null;
-      this.timeCfmPtPEnd = null;
-      this.timeCfmPtPSE = null;
-      this.timeCfmWtEteAll = this.timeCfmWtEteAllDefault; // Waiting time
-      this.timeCfmWtEteStart = null;
-      this.timeCfmWtEteEnd = null;
-      this.timeCfmWtEteSE = null;
-      this.timeCfmWtPStart = null;
-      this.timeCfmWtPEnd = null;
-      this.timeCfmWtPSE = null;
-      this.timeCfmCtEteAll = this.timeCfmCtEteAllDefault; // Cycle time
-      this.timeCfmCtEteStart = null;
-      this.timeCfmCtEteEnd = null;
-      this.timeCfmCtEteSE = null;
-      this.selectCfmPtEteSEStart = null;
-      this.selectCfmPtEteSEEnd = null;
-      this.selectCfmPtPSEStart = null;
-      this.selectCfmPtPSEEnd = null;
-      this.selectCfmWtEteSEStart = null;
-      this.selectCfmWtEteSEEnd = null;
-      this.selectCfmWtPSEStart = null;
-      this.selectCfmWtPSEEnd = null;
-      this.selectCfmCtEteSEStart = null;
-      this.selectCfmCtEteSEEnd = null;
-    },
-  },
-  created() {
-    this.$emitter.on('actRadioData', (data) => {
-      const category = data.category;
-    const task = data.task;
+]);
 
-    const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
-        this[startKey] = task;
-        this[timeKey] = { min: 0, max: 0 };
-        if (this[endKey]) {
-            this[timeKey] = this.getDurationTime(this[durationType], 'double', task, this[endKey]);
-        }
-    };
+const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
 
-    const handleSingleSelection = (key, timeKey, durationType) => {
-        this[timeKey] = this.getDurationTime(this[durationType], 'single', task);
-    };
+const state = reactive({
+  timeDuration: null, // Activity duration
+  timeCfmPtEteAll: null, // Processing time
+  timeCfmPtEteAllDefault: null,
+  timeCfmPtEteStart: null,
+  timeCfmPtEteEnd: null,
+  timeCfmPtEteSE: null,
+  timeCfmPtPStart: null,
+  timeCfmPtPEnd: null,
+  timeCfmPtPSE: null,
+  timeCfmWtEteAll: null, // Waiting time
+  timeCfmWtEteAllDefault: null,
+  timeCfmWtEteStart: null,
+  timeCfmWtEteEnd: null,
+  timeCfmWtEteSE: null,
+  timeCfmWtPStart: null,
+  timeCfmWtPEnd: null,
+  timeCfmWtPSE: null,
+  timeCfmCtEteAll: null, // Cycle time
+  timeCfmCtEteAllDefault: null,
+  timeCfmCtEteStart: null,
+  timeCfmCtEteEnd: null,
+  timeCfmCtEteSE: null,
+  selectCfmPtEteSEStart: null,
+  selectCfmPtEteSEEnd: null,
+  selectCfmPtPSEStart: null,
+  selectCfmPtPSEEnd: null,
+  selectCfmWtEteSEStart: null,
+  selectCfmWtEteSEEnd: null,
+  selectCfmWtPSEStart: null,
+  selectCfmWtPSEEnd: null,
+  selectCfmCtEteSEStart: null,
+  selectCfmCtEteSEEnd: null,
+});
 
-    switch (category) {
-        // Activity duration
-        case 'cfmDur':
-            this.timeDuration = this.getDurationTime(this.conformanceAllTasks, 'act', task);
-            break;
-        // Processing time
-        case 'cfmPtEteStart':
-            handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
-            break;
-        case 'cfmPtEteEnd':
-            handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
-            break;
-        case 'cfmPtEteSEStart':
-            handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
-            break;
-        case 'cfmPtEteSEEnd':
-            handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
-            break;
-        case 'cfmPtPStart':
-            handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
-            break;
-        case 'cfmPtPEnd':
-            handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
-            break;
-        case 'cfmPtPSEStart':
-            handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
-            break;
-        case 'cfmPtPSEEnd':
-            handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
-            break;
-        // Waiting time
-        case 'cfmWtEteStart':
-            handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
-            break;
-        case 'cfmWtEteEnd':
-            handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
-            break;
-        case 'cfmWtEteSEStart':
-            handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
-            break;
-        case 'cfmWtEteSEEnd':
-            handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
-            break;
-        case 'cfmWtPStart':
-            handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
-            break;
-        case 'cfmWtPEnd':
-            handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
-            break;
-        case 'cfmWtPSEStart':
-            handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
-            break;
-        case 'cfmWtPSEEnd':
-            handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
-            break;
-        // Cycle time
-        case 'cfmCtEteStart':
-            handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
-            break;
-        case 'cfmCtEteEnd':
-            handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
-            break;
-        case 'cfmCtEteSEStart':
-            handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
-            break;
-        case 'cfmCtEteSEEnd':
-            handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
-            break;
-        default:
-            break;
-      };
-    });
-    this.$emitter.on('reset', (data) => {
-      this.reset();
-    });
-    this.$emitter.on('isRadioChange', (data) => {
-      if(data) {
-        this.reset();
-        switch (this.selectedRuleType) {
-          case 'Processing time':
-            this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
-            this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
-            break;
-          case 'Waiting time':
-            this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
-            this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
-            break;
-          case 'Cycle time':
-            this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
-            this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
-            break;
-          default:
-            break;
-        };
-      }
-    });
-    this.$emitter.on('isRadioProcessScopeChange', (data) => {
-      if(data) {
-        this.reset();
-      };
-    });
-    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
-      if(data) {
-        if(this.selectedActSeqMore === 'All') {
-          switch (this.selectedRuleType) {
-            case 'Processing time':
-              this.timeCfmPtEteAll = this.getDurationTime(this.cfmPtEteWhole, 'all');
-              this.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmPtEteAll));
-              break;
-            case 'Waiting time':
-              this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
-              this.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmWtEteAll));
-              break;
-            case 'Cycle time':
-              this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
-              this.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(this.timeCfmCtEteAll));
-              break;
-            default:
-              break;
-          };
-        }else this.reset();
-      };
-    });
-    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
-      if(data) {
-        this.reset();
-      };
-    });
-  },
+// Store refs lookup for dynamic access in handleSingleSelection/handleDoubleSelection
+const storeRefs = {
+  cfmPtEteStart,
+  cfmPtEteEnd,
+  cfmPtEteSE,
+  cfmPtPStart,
+  cfmPtPEnd,
+  cfmPtPSE,
+  cfmWtEteStart,
+  cfmWtEteEnd,
+  cfmWtEteSE,
+  cfmWtPStart,
+  cfmWtPEnd,
+  cfmWtPSE,
+  cfmCtEteStart,
+  cfmCtEteEnd,
+  cfmCtEteSE,
+};
+
+/**
+ * get min total seconds
+ * @param {Number} e 最小值總秒數
+ */
+function minTotalSeconds(e) {
+  emit('min-total-seconds', e);
 }
+/**
+ * get min total seconds
+ * @param {Number} e 最大值總秒數
+ */
+function maxTotalSeconds(e) {
+  emit('max-total-seconds', e);
+}
+/**
+ * get Time Range(duration)
+ * @param {array} data API data，Activity 列表
+ * @param {string} category 'act' | 'single' | 'double'，傳入以上任一值。
+ * @param {string} task select Radio task or start
+ * @param {string} taskTwo end
+ * @returns {object} {min:12, max:345}
+ */
+function getDurationTime(data, category, task, taskTwo) {
+  let result = {min:0, max:0};
+  switch (category) {
+    case 'act':
+      data.forEach(i => {
+        if(i.label === task) {
+          result = i.duration;
+        }
+      });
+      break;
+    case 'single':
+      data.forEach(i => {
+        if(i.task === task) {
+          result = i.time;
+        }
+      });
+      break;
+    case 'double':
+      data.forEach(i => {
+        if(i.start === task && i.end === taskTwo) {
+          result = i.time;
+        }
+      });
+      break;
+    case 'all':
+      result = data;
+      break
+    default:
+      break;
+  };
+  return result;
+}
+/**
+ * All reset
+ */
+function reset() {
+  state.timeDuration = null; // Activity duration
+  state.timeCfmPtEteAll = state.timeCfmPtEteAllDefault; // Processing time
+  state.timeCfmPtEteStart = null;
+  state.timeCfmPtEteEnd = null;
+  state.timeCfmPtEteSE = null;
+  state.timeCfmPtPStart = null;
+  state.timeCfmPtPEnd = null;
+  state.timeCfmPtPSE = null;
+  state.timeCfmWtEteAll = state.timeCfmWtEteAllDefault; // Waiting time
+  state.timeCfmWtEteStart = null;
+  state.timeCfmWtEteEnd = null;
+  state.timeCfmWtEteSE = null;
+  state.timeCfmWtPStart = null;
+  state.timeCfmWtPEnd = null;
+  state.timeCfmWtPSE = null;
+  state.timeCfmCtEteAll = state.timeCfmCtEteAllDefault; // Cycle time
+  state.timeCfmCtEteStart = null;
+  state.timeCfmCtEteEnd = null;
+  state.timeCfmCtEteSE = null;
+  state.selectCfmPtEteSEStart = null;
+  state.selectCfmPtEteSEEnd = null;
+  state.selectCfmPtPSEStart = null;
+  state.selectCfmPtPSEEnd = null;
+  state.selectCfmWtEteSEStart = null;
+  state.selectCfmWtEteSEEnd = null;
+  state.selectCfmWtPSEStart = null;
+  state.selectCfmWtPSEEnd = null;
+  state.selectCfmCtEteSEStart = null;
+  state.selectCfmCtEteSEEnd = null;
+}
+
+// created() logic
+emitter.on('actRadioData', (data) => {
+  const category = data.category;
+  const task = data.task;
+
+  const handleDoubleSelection = (startKey, endKey, timeKey, durationType) => {
+      state[startKey] = task;
+      state[timeKey] = { min: 0, max: 0 };
+      if (state[endKey]) {
+          state[timeKey] = getDurationTime(storeRefs[durationType].value, 'double', task, state[endKey]);
+      }
+  };
+
+  const handleSingleSelection = (key, timeKey, durationType) => {
+      state[timeKey] = getDurationTime(storeRefs[durationType].value, 'single', task);
+  };
+
+  switch (category) {
+      // Activity duration
+      case 'cfmDur':
+          state.timeDuration = getDurationTime(conformanceAllTasks.value, 'act', task);
+          break;
+      // Processing time
+      case 'cfmPtEteStart':
+          handleSingleSelection('cfmPtEteStart', 'timeCfmPtEteStart', 'cfmPtEteStart');
+          break;
+      case 'cfmPtEteEnd':
+          handleSingleSelection('cfmPtEteEnd', 'timeCfmPtEteEnd', 'cfmPtEteEnd');
+          break;
+      case 'cfmPtEteSEStart':
+          handleDoubleSelection('selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd', 'timeCfmPtEteSE', 'cfmPtEteSE');
+          break;
+      case 'cfmPtEteSEEnd':
+          handleDoubleSelection('selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart', 'timeCfmPtEteSE', 'cfmPtEteSE');
+          break;
+      case 'cfmPtPStart':
+          handleSingleSelection('cfmPtPStart', 'timeCfmPtPStart', 'cfmPtPStart');
+          break;
+      case 'cfmPtPEnd':
+          handleSingleSelection('cfmPtPEnd', 'timeCfmPtPEnd', 'cfmPtPEnd');
+          break;
+      case 'cfmPtPSEStart':
+          handleDoubleSelection('selectCfmPtPSEStart', 'selectCfmPtPSEEnd', 'timeCfmPtPSE', 'cfmPtPSE');
+          break;
+      case 'cfmPtPSEEnd':
+          handleDoubleSelection('selectCfmPtPSEEnd', 'selectCfmPtPSEStart', 'timeCfmPtPSE', 'cfmPtPSE');
+          break;
+      // Waiting time
+      case 'cfmWtEteStart':
+          handleSingleSelection('cfmWtEteStart', 'timeCfmWtEteStart', 'cfmWtEteStart');
+          break;
+      case 'cfmWtEteEnd':
+          handleSingleSelection('cfmWtEteEnd', 'timeCfmWtEteEnd', 'cfmWtEteEnd');
+          break;
+      case 'cfmWtEteSEStart':
+          handleDoubleSelection('selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd', 'timeCfmWtEteSE', 'cfmWtEteSE');
+          break;
+      case 'cfmWtEteSEEnd':
+          handleDoubleSelection('selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart', 'timeCfmWtEteSE', 'cfmWtEteSE');
+          break;
+      case 'cfmWtPStart':
+          handleSingleSelection('cfmWtPStart', 'timeCfmWtPStart', 'cfmWtPStart');
+          break;
+      case 'cfmWtPEnd':
+          handleSingleSelection('cfmWtPEnd', 'timeCfmWtPEnd', 'cfmWtPEnd');
+          break;
+      case 'cfmWtPSEStart':
+          handleDoubleSelection('selectCfmWtPSEStart', 'selectCfmWtPSEEnd', 'timeCfmWtPSE', 'cfmWtPSE');
+          break;
+      case 'cfmWtPSEEnd':
+          handleDoubleSelection('selectCfmWtPSEEnd', 'selectCfmWtPSEStart', 'timeCfmWtPSE', 'cfmWtPSE');
+          break;
+      // Cycle time
+      case 'cfmCtEteStart':
+          handleSingleSelection('cfmCtEteStart', 'timeCfmCtEteStart', 'cfmCtEteStart');
+          break;
+      case 'cfmCtEteEnd':
+          handleSingleSelection('cfmCtEteEnd', 'timeCfmCtEteEnd', 'cfmCtEteEnd');
+          break;
+      case 'cfmCtEteSEStart':
+          handleDoubleSelection('selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd', 'timeCfmCtEteSE', 'cfmCtEteSE');
+          break;
+      case 'cfmCtEteSEEnd':
+          handleDoubleSelection('selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart', 'timeCfmCtEteSE', 'cfmCtEteSE');
+          break;
+      default:
+          break;
+    };
+});
+emitter.on('reset', (data) => {
+  reset();
+});
+emitter.on('isRadioChange', (data) => {
+  if(data) {
+    reset();
+    switch (selectedRuleType.value) {
+      case 'Processing time':
+        state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
+        state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
+        break;
+      case 'Waiting time':
+        state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
+        state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
+        break;
+      case 'Cycle time':
+        state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
+        state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
+        break;
+      default:
+        break;
+    };
+  }
+});
+emitter.on('isRadioProcessScopeChange', (data) => {
+  if(data) {
+    reset();
+  };
+});
+emitter.on('isRadioActSeqMoreChange', (data) => {
+  if(data) {
+    if(selectedActSeqMore.value === 'All') {
+      switch (selectedRuleType.value) {
+        case 'Processing time':
+          state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, 'all');
+          state.timeCfmPtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmPtEteAll));
+          break;
+        case 'Waiting time':
+          state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, 'all');
+          state.timeCfmWtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmWtEteAll));
+          break;
+        case 'Cycle time':
+          state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, 'all');
+          state.timeCfmCtEteAllDefault = JSON.parse(JSON.stringify(state.timeCfmCtEteAll));
+          break;
+        default:
+          break;
+      };
+    }else reset();
+  };
+});
+emitter.on('isRadioActSeqFromToChange', (data) => {
+  if(data) {
+    reset();
+  };
+});
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
index b756d2c..bd11485 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
@@ -8,9 +8,6 @@
     </li>
   </ul>
 </template>
-<script>
-export default {
-  name: 'ResultArrow',
-  props:['data', 'select'],
-}
+<script setup>
+defineProps(['data', 'select']);
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
index 2578178..574cda0 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
@@ -8,26 +8,21 @@
     </li>
   </ul>
 </template>
-<script>
-export default {
-  name: 'ResultCheck',
-  props:['data', 'select'],
-  data() {
-    return {
-      datadata: null,
-    }
-  },
-  watch: {
-    data: function(newValue) {
-      this.datadata = newValue;
-    },
-    select: function(newValue) {
-      this.datadata = newValue;
-    }
-  },
-  created() {
-    this.datadata = this.select;
-    this.$emitter.on('reset', data => this.datadata = data);
-  },
-}
+<script setup>
+import { ref, watch } from 'vue';
+import emitter from '@/utils/emitter';
+
+const props = defineProps(['data', 'select']);
+
+const datadata = ref(props.select);
+
+watch(() => props.data, (newValue) => {
+  datadata.value = newValue;
+});
+
+watch(() => props.select, (newValue) => {
+  datadata.value = newValue;
+});
+
+emitter.on('reset', (val) => datadata.value = val);
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
index 3b88bef..b191cd3 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue
@@ -7,27 +7,17 @@
     </li>
   </ul>
 </template>
-<script>
-export default {
-  name: 'ResultDot',
-  props:['timeResultData', 'select'],
-    data() {
-    return {
-      data: null,
-    }
-  },
-  watch: {
-    timeResultData: {
-      handler(newValue) {
-        this.data = newValue;
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  created() {
-    this.data = this.select;
-    this.$emitter.on('reset', data => this.data = data);
-  },
-}
+<script setup>
+import { ref, watch } from 'vue';
+import emitter from '@/utils/emitter';
+
+const props = defineProps(['timeResultData', 'select']);
+
+const data = ref(props.select);
+
+watch(() => props.timeResultData, (newValue) => {
+  data.value = newValue;
+}, { deep: true });
+
+emitter.on('reset', (val) => data.value = val);
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
index e5eb3c2..c4d833e 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
@@ -9,97 +9,78 @@
     </Durationjs>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import Durationjs from '@/components/durationjs.vue';
 
-export default {
-  props: ['time', 'select'],
-  data() {
-    return {
-      timeData: {
-        min: 0,
-        max: 0,
-      },
-      timeRangeMin: 0,
-      timeRangeMax: 0,
-      minVuemin: 0,
-      minVuemax: 0,
-      maxVuemin: 0,
-      maxVuemax: 0,
-      updateMax: null,
-      updateMin: null,
-      durationMin: null,
-      durationMax: null,
-    }
-  },
-  components: {
-    Durationjs,
-  },
-  watch: {
-    time: {
-      handler: function(newValue, oldValue) {
-        this.durationMax = null
-        this.durationMin = null
-        if(newValue === null) {
-          this.timeData = {
-            min: 0,
-            max: 0
-          };
-        }else if(newValue !== null) {
-          this.timeData = {
-            min: newValue.min,
-            max: newValue.max
-          };
-          this.$emit('min-total-seconds', newValue.min);
-          this.$emit('max-total-seconds', newValue.max);
-        }
-        this.setTimeValue();
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    /**
-     * set props values
-     */
-    setTimeValue() {
-      // 深拷貝原始 timeData 的內容
-      this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
-      this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
-      this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
-      this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 元件傳來的最小值總秒數
-     */
-     minTotalSeconds(e) {
-      this.timeRangeMin = e;
-      this.updateMin = e;
-      this.$emit('min-total-seconds', e);
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 元件傳來的最大值總秒數
-     */
-    maxTotalSeconds(e) {
-      this.timeRangeMax = e;
-      this.updateMax = e;
-      this.$emit('max-total-seconds', e);
-    },
-  },
-  created() {
-    if(this.select){
-      if(Object.keys(this.select.base).length !== 0) {
-        this.timeData = this.select.base;
-        this.setTimeValue();
-      }
-      if(Object.keys(this.select.rule).length !== 0) {
-        this.durationMin = this.select.rule.min;
-        this.durationMax = this.select.rule.max;
-      }
-    }
+const props = defineProps(['time', 'select']);
+const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
+
+const timeData = ref({ min: 0, max: 0 });
+const timeRangeMin = ref(0);
+const timeRangeMax = ref(0);
+const minVuemin = ref(0);
+const minVuemax = ref(0);
+const maxVuemin = ref(0);
+const maxVuemax = ref(0);
+const updateMax = ref(null);
+const updateMin = ref(null);
+const durationMin = ref(null);
+const durationMax = ref(null);
+
+/**
+ * set props values
+ */
+function setTimeValue() {
+  // 深拷貝原始 timeData 的內容
+  minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
+  minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+  maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
+  maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+}
+
+/**
+ * get min total seconds
+ * @param {Number} e 元件傳來的最小值總秒數
+ */
+function minTotalSeconds(e) {
+  timeRangeMin.value = e;
+  updateMin.value = e;
+  emit('min-total-seconds', e);
+}
+
+/**
+ * get min total seconds
+ * @param {Number} e 元件傳來的最大值總秒數
+ */
+function maxTotalSeconds(e) {
+  timeRangeMax.value = e;
+  updateMax.value = e;
+  emit('max-total-seconds', e);
+}
+
+watch(() => props.time, (newValue, oldValue) => {
+  durationMax.value = null;
+  durationMin.value = null;
+  if(newValue === null) {
+    timeData.value = { min: 0, max: 0 };
+  }else if(newValue !== null) {
+    timeData.value = { min: newValue.min, max: newValue.max };
+    emit('min-total-seconds', newValue.min);
+    emit('max-total-seconds', newValue.max);
+  }
+  setTimeValue();
+}, { deep: true, immediate: true });
+
+// created
+if(props.select){
+  if(Object.keys(props.select.base).length !== 0) {
+    timeData.value = props.select.base;
+    setTimeValue();
+  }
+  if(Object.keys(props.select.rule).length !== 0) {
+    durationMin.value = props.select.rule.min;
+    durationMax.value = props.select.rule.max;
   }
 }
 </script>
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 9f72a2e..222a9bd 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -1,5 +1,5 @@
 <template>
-<Dialog :visible="listModal" @update:visible="$emit('closeModal', $event)"  modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
+<Dialog :visible="listModal" @update:visible="emit('closeModal', $event)"  modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
   <template #header>
     <div class=" py-5">
       <p class="text-base font-bold">Non-conformance Issue</p>
@@ -61,219 +61,225 @@
   </div>
 </Dialog>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch, nextTick, useTemplateRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
-export default {
-  props: ['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category'],
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { infinite404 } = storeToRefs(conformanceStore);
+const props = defineProps(['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category']);
+const emit = defineEmits(['closeModal']);
 
-    return { infinite404, conformanceStore }
-  },
-  data() {
+const conformanceStore = useConformanceStore();
+const { infinite404 } = storeToRefs(conformanceStore);
+
+// template ref
+const cfmTrace = useTemplateRef('cfmTrace');
+
+// data
+const contentClass = ref('!bg-neutral-100 border-t border-neutral-300 h-full');
+const showTraceId = ref(null);
+const infiniteData = ref(null);
+const maxItems = ref(false);
+const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const startNum = ref(0);
+const processMap = ref({
+  nodes:[],
+  edges:[],
+});
+
+// computed
+const traceTotal = computed(() => {
+  return traceList.value.length;
+});
+
+const traceList = computed(() => {
+  const sum = props.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
+  return props.listTraces.map(trace => {
     return {
-      contentClass: '!bg-neutral-100 border-t border-neutral-300 h-full',
-      showTraceId: null,
-      infiniteData: null,
-      maxItems: false,
-      infiniteFinish: true, // 無限滾動是否載入完成
-      startNum: 0,
-      processMap:{
-        nodes:[],
-        edges:[],
-      },
-    }
-  },
-  computed: {
-    traceTotal: function() {
-      return this.traceList.length;
-    },
-    traceList: function() {
-      const sum = this.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+      id: trace.id,
+      value: Number((getPercentLabel(trace.count / sum))),
+      count: trace.count.toLocaleString('en-US'),
+      count_base: trace.count,
+      ratio: getPercentLabel(trace.count / sum),
+    };
+  }).sort((x, y) => x.id - y.id);
+});
 
-      return this.listTraces.map(trace => {
-        return {
-          id: trace.id,
-          value: Number((this.getPercentLabel(trace.count / sum))),
-          count: trace.count.toLocaleString('en-US'),
-          count_base: trace.count,
-          ratio: this.getPercentLabel(trace.count / sum),
-        };
-      }).sort((x, y) => x.id - y.id);
-    },
-    caseData: function() {
-      if(this.infiniteData !== null){
-        const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
-        data.forEach(item => {
-          item.facets.forEach((facet, index) => {
-            item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
-          });
-          delete item.facets; // 刪除原本的 facets 屬性
-
-          item.attributes.forEach((attribute, index) => {
-            item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
-          });
-          delete item.attributes; // 刪除原本的 attributes 屬性
-        })
-        return data;
-      }
-    },
-    columnData: function() {
-      const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
-      const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
-
-      const result = [
-        { field: 'id', header: 'Case Id' },
-        { field: 'started_at', header: 'Start time' },
-        { field: 'completed_at', header: 'End time' },
-        ...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: facetName(fac.name) })),
-        ...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
-      ];
-      return result
-    },
-  },
-  watch: {
-    listModal: function(newValue) { // 第一次打開 Modal 要繪圖
-      if(newValue) this.createCy();
-    },
-    taskSeq: function(newValue){
-      if (newValue !== null) this.createCy();
-    },
-    traceId: function(newValue) {
-      // 當 traceId 屬性變化時更新 showTraceId
-      this.showTraceId = newValue;
-    },
-    showTraceId: function(newValue, oldValue) {
-      const isScrollTop = document.querySelector('.infiniteTable');
-      if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
-    },
-    firstCases: function(newValue, oldValue){
-      this.infiniteData = newValue;
-    },
-    infinite404: function(newValue, oldValue){
-      if (newValue === 404) this.maxItems = true;
-    },
-  },
-  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));
-    },
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-     progressWidth(value){
-      return `width:${value}%;`
-    },
-    /**
-     * switch case data
-     * @param {number} id case id
-     */
-    async switchCaseData(id) {
-      if(id == this.showTraceId) return;
-      this.infinite404 = null;
-      this.maxItems = false;
-      this.startNum = 0;
-
-      let result;
-      if(this.category === 'issue') result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, id, 0);
-      else if(this.category === 'loop') result = await this.conformanceStore.getConformanceLoopsTraceDetail(this.listNo, id, 0);
-      this.infiniteData = await result;
-      this.showTraceId = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
-    },
-    /**
-     * 將 trace element nodes 資料彙整
-     */
-     setNodesData(){
-      // 避免每次渲染都重複累加
-      this.processMap.nodes = [];
-      // 將 api call 回來的資料帶進 node
-      if(this.taskSeq !== null) {
-        this.taskSeq.forEach((node, index) => {
-          this.processMap.nodes.push({
-            data: {
-              id: index,
-              label: node,
-              backgroundColor: '#CCE5FF',
-              bordercolor: '#003366',
-              shape: 'round-rectangle',
-              height: 80,
-              width: 100
-            }
-          });
-        });
-      };
-    },
-    /**
-     * 將 trace edge line 資料彙整
-     */
-    setEdgesData(){
-      this.processMap.edges = [];
-      if(this.taskSeq !== null) {
-        this.taskSeq.forEach((edge, index) => {
-          this.processMap.edges.push({
-            data: {
-              source: `${index}`,
-              target: `${index + 1}`,
-              lineWidth: 1,
-              style: 'solid'
-            }
-          });
-        });
-      };
-      // 關係線數量筆節點少一個
-      this.processMap.edges.pop();
-    },
-    /**
-     * create trace cytoscape's map
-     */
-    createCy(){
-      this.$nextTick(() => {
-        const graphId = this.$refs.cfmTrace;
-
-        this.setNodesData();
-        this.setEdgesData();
-        if(graphId !== null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
+const caseData = computed(() => {
+  if(infiniteData.value !== null){
+    const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+    data.forEach(item => {
+      item.facets.forEach((facet, index) => {
+        item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
       });
-    },
-    /**
-     * 無限滾動: 載入數據
-     */
-    async fetchData() {
-      try {
-        this.infiniteFinish = false;
-        this.startNum += 20
-        const result = await this.conformanceStore.getConformanceTraceDetail(this.listNo, this.showTraceId, this.startNum);
-        this.infiniteData = await [...this.infiniteData, ...result];
-        this.infiniteFinish = await true;
-      } catch(error) {
-        console.error('Failed to load data:', error);
-      }
-    },
-    /**
-     * 無限滾動: 監聽 scroll 有沒有滾到底部
-     * @param {element} event 監聽時回傳的事件
-     */
-    handleScroll(event) {
-      if(this.maxItems || this.infiniteData.length < 20 || this.infiniteFinish === false) return;
+      delete item.facets; // 刪除原本的 facets 屬性
 
-      const container = event.target;
-      const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
+      item.attributes.forEach((attribute, index) => {
+        item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+      });
+      delete item.attributes; // 刪除原本的 attributes 屬性
+    })
+    return data;
+  }
+});
 
-      if (overScrollHeight) this.fetchData();
-    },
-  },
+const columnData = computed(() => {
+  const data = JSON.parse(JSON.stringify(props.cases)); // 深拷貝原始 cases 的內容
+  const facetName = facName => facName.trim().replace(/^(.)(.*)$/, (match, firstChar, restOfString) => firstChar.toUpperCase() + restOfString.toLowerCase());
+
+  const result = [
+    { field: 'id', header: 'Case Id' },
+    { field: 'started_at', header: 'Start time' },
+    { field: 'completed_at', header: 'End time' },
+    ...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: facetName(fac.name) })),
+    ...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
+  ];
+  return result
+});
+
+// watch
+watch(() => props.listModal, (newValue) => { // 第一次打開 Modal 要繪圖
+  if(newValue) createCy();
+});
+
+watch(() => props.taskSeq, (newValue) => {
+  if (newValue !== null) createCy();
+});
+
+watch(() => props.traceId, (newValue) => {
+  // 當 traceId 屬性變化時更新 showTraceId
+  showTraceId.value = newValue;
+});
+
+watch(showTraceId, (newValue, oldValue) => {
+  const isScrollTop = document.querySelector('.infiniteTable');
+  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+});
+
+watch(() => props.firstCases, (newValue) => {
+  infiniteData.value = newValue;
+});
+
+watch(infinite404, (newValue) => {
+  if (newValue === 404) maxItems.value = true;
+});
+
+// methods
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return 100;
+  else return parseFloat((val * 100).toFixed(1));
+}
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+function progressWidth(value){
+  return `width:${value}%;`
+}
+/**
+ * switch case data
+ * @param {number} id case id
+ */
+async function switchCaseData(id) {
+  if(id == showTraceId.value) return;
+  infinite404.value = null;
+  maxItems.value = false;
+  startNum.value = 0;
+
+  let result;
+  if(props.category === 'issue') result = await conformanceStore.getConformanceTraceDetail(props.listNo, id, 0);
+  else if(props.category === 'loop') result = await conformanceStore.getConformanceLoopsTraceDetail(props.listNo, id, 0);
+  infiniteData.value = await result;
+  showTraceId.value = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
+}
+/**
+ * 將 trace element nodes 資料彙整
+ */
+function setNodesData(){
+  // 避免每次渲染都重複累加
+  processMap.value.nodes = [];
+  // 將 api call 回來的資料帶進 node
+  if(props.taskSeq !== null) {
+    props.taskSeq.forEach((node, index) => {
+      processMap.value.nodes.push({
+        data: {
+          id: index,
+          label: node,
+          backgroundColor: '#CCE5FF',
+          bordercolor: '#003366',
+          shape: 'round-rectangle',
+          height: 80,
+          width: 100
+        }
+      });
+    });
+  };
+}
+/**
+ * 將 trace edge line 資料彙整
+ */
+function setEdgesData(){
+  processMap.value.edges = [];
+  if(props.taskSeq !== null) {
+    props.taskSeq.forEach((edge, index) => {
+      processMap.value.edges.push({
+        data: {
+          source: `${index}`,
+          target: `${index + 1}`,
+          lineWidth: 1,
+          style: 'solid'
+        }
+      });
+    });
+  };
+  // 關係線數量筆節點少一個
+  processMap.value.edges.pop();
+}
+/**
+ * create trace cytoscape's map
+ */
+function createCy(){
+  nextTick(() => {
+    const graphId = cfmTrace.value;
+
+    setNodesData();
+    setEdgesData();
+    if(graphId !== null) cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+  });
+}
+/**
+ * 無限滾動: 載入數據
+ */
+async function fetchData() {
+  try {
+    infiniteFinish.value = false;
+    startNum.value += 20
+    const result = await conformanceStore.getConformanceTraceDetail(props.listNo, showTraceId.value, startNum.value);
+    infiniteData.value = await [...infiniteData.value, ...result];
+    infiniteFinish.value = await true;
+  } catch(error) {
+    console.error('Failed to load data:', error);
+  }
+}
+/**
+ * 無限滾動: 監聽 scroll 有沒有滾到底部
+ * @param {element} event 監聽時回傳的事件
+ */
+function handleScroll(event) {
+  if(maxItems.value || infiniteData.value.length < 20 || infiniteFinish.value === false) return;
+
+  const container = event.target;
+  const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;
+
+  if (overScrollHeight) fetchData();
 }
 </script>
 <style scoped>
diff --git a/src/components/Discover/Map/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue
index 4fad86d..e8ca513 100644
--- a/src/components/Discover/Map/Filter/ActAndSeq.vue
+++ b/src/components/Discover/Map/Filter/ActAndSeq.vue
@@ -57,104 +57,104 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch } from 'vue';
 import { sortNumEngZhtwForFilter } from '@/module/sortNumEngZhtw.js';
 
-export default {
-  props: {
-    filterTaskData: {
-      type: Array,
-      required: true,
-    },
-    progressWidth: {
-      type: Function,
-      required: false,
-    },
-    listSeq: {
-      type: Array,
-      required: true,
-    }
+const props = defineProps({
+  filterTaskData: {
+    type: Array,
+    required: true,
   },
-  data() {
-    return {
-      listSequence: [],
-      filteredData: this.filterTaskData,
-      lastItemIndex: null,
-    }
+  progressWidth: {
+    type: Function,
+    required: false,
   },
-  computed: {
-    data: function() {
-      // Activity List 要排序
-      this.filteredData = this.filteredData.sort((x, y) => {
-        const diff = y.occurrences - x.occurrences;
-        return diff !== 0 ? diff : sortNumEngZhtwForFilter(x.label, y.label);
-      });
-      return this.filteredData;
-    }
-  },
-  watch: {
-    listSeq(newval){
-      this.listSequence = newval;
-    },
-    filterTaskData(newval){
-      this.filteredData = newval;
-    }
-  },
-  methods: {
-    /**
-     * double click Activity List
-     * @param {number} index data item index
-     * @param {object} element data item
-     */
-    moveActItem(index, element){
-      this.listSequence.push(element);
-    },
-    /**
-     * double click Sequence List
-     * @param {number} index data item index
-     * @param {object} element data item
-     */
-    moveSeqItem(index, element){
-      this.listSequence.splice(index, 1);
-    },
-    /**
-     * get listSequence
-     */
-     getComponentData(){
-      this.$emit('update:listSeq', this.listSequence);
-    },
-    /**
-     * Element dragging started
-     * @param {event} evt input 傳入的事件
-     */
-    onStart(evt) {
-      const lastChild = evt.to.lastChild.lastChild;
-      lastChild.style.display = 'none';
-      // 隱藏拖曳元素原位置
-      const originalElement = evt.item;
-      originalElement.style.display = 'none';
-      // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
-      const listIndex = this.listSequence.length - 1;
-      if(evt.oldIndex === listIndex) this.lastItemIndex  = listIndex;
-    },
-    /**
-     * Element dragging ended
-     * @param {event} evt input 傳入的事件
-     */
-    onEnd(evt) {
-      // 顯示拖曳元素
-      const originalElement = evt.item;
-      originalElement.style.display = '';
-      // 拖曳結束要顯示箭頭，但最後一個不用
-      const lastChild = evt.item.lastChild;
-      const listIndex = this.listSequence.length - 1
-      if (evt.oldIndex !== listIndex) {
-          lastChild.style.display = '';
-      }
-      // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
-      this.lastItemIndex = null;
-    },
+  listSeq: {
+    type: Array,
+    required: true,
   }
+});
+
+const emit = defineEmits(['update:listSeq']);
+
+const listSequence = ref([]);
+const filteredData = ref(props.filterTaskData);
+const lastItemIndex = ref(null);
+
+const data = computed(() => {
+  // Activity List 要排序
+  filteredData.value = filteredData.value.sort((x, y) => {
+    const diff = y.occurrences - x.occurrences;
+    return diff !== 0 ? diff : sortNumEngZhtwForFilter(x.label, y.label);
+  });
+  return filteredData.value;
+});
+
+watch(() => props.listSeq, (newval) => {
+  listSequence.value = newval;
+});
+
+watch(() => props.filterTaskData, (newval) => {
+  filteredData.value = newval;
+});
+
+/**
+ * double click Activity List
+ * @param {number} index data item index
+ * @param {object} element data item
+ */
+function moveActItem(index, element) {
+  listSequence.value.push(element);
+}
+
+/**
+ * double click Sequence List
+ * @param {number} index data item index
+ * @param {object} element data item
+ */
+function moveSeqItem(index, element) {
+  listSequence.value.splice(index, 1);
+}
+
+/**
+ * get listSequence
+ */
+function getComponentData() {
+  emit('update:listSeq', listSequence.value);
+}
+
+/**
+ * Element dragging started
+ * @param {event} evt input 傳入的事件
+ */
+function onStart(evt) {
+  const lastChild = evt.to.lastChild.lastChild;
+  lastChild.style.display = 'none';
+  // 隱藏拖曳元素原位置
+  const originalElement = evt.item;
+  originalElement.style.display = 'none';
+  // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  const listIndex = listSequence.value.length - 1;
+  if(evt.oldIndex === listIndex) lastItemIndex.value = listIndex;
+}
+
+/**
+ * Element dragging ended
+ * @param {event} evt input 傳入的事件
+ */
+function onEnd(evt) {
+  // 顯示拖曳元素
+  const originalElement = evt.item;
+  originalElement.style.display = '';
+  // 拖曳結束要顯示箭頭，但最後一個不用
+  const lastChild = evt.item.lastChild;
+  const listIndex = listSequence.value.length - 1
+  if (evt.oldIndex !== listIndex) {
+      lastChild.style.display = '';
+  }
+  // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+  lastItemIndex.value = null;
 }
 </script>
 <style scoped>
diff --git a/src/components/Discover/Map/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue
index a0ac56e..96ec188 100644
--- a/src/components/Discover/Map/Filter/ActOcc.vue
+++ b/src/components/Discover/Map/Filter/ActOcc.vue
@@ -28,50 +28,42 @@
     </div>
   </div>
 </template>
-<script>
-import Search from '@/components/Search.vue';
+<script setup>
+import { ref, watch } from 'vue';
 
-export default {
-  props: {
-    tableTitle: {
-      type: String,
-      required: true,
-    },
-    tableData: {
-      type: Array,
-      required: true,
-    },
-    tableSelect: {
-      type: [Object, Array],
-      default: null
-    },
-    progressWidth: {
-      type: Function,
-      required: false,
-    }
+const props = defineProps({
+  tableTitle: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      select: null,
-      metaKey: true
-    }
+  tableData: {
+    type: Array,
+    required: true,
   },
-  components: {
-    Search,
-  },
-  watch: {
-    tableSelect(newval){
-      this.select = newval;
-    }
-  },
-  methods: {
-    /**
-     * 將選取的 row 傳到父層
-     * @param {event} e input 傳入的事件
-     */
-    onRowSelect(e) {
-      this.$emit('on-row-select', e)
-    }
+  tableSelect: {
+    type: [Object, Array],
+    default: null
   },
+  progressWidth: {
+    type: Function,
+    required: false,
+  }
+});
+
+const emit = defineEmits(['on-row-select']);
+
+const select = ref(null);
+const metaKey = ref(true);
+
+watch(() => props.tableSelect, (newval) => {
+  select.value = newval;
+});
+
+/**
+ * 將選取的 row 傳到父層
+ * @param {event} e input 傳入的事件
+ */
+function onRowSelect(e) {
+  emit('on-row-select', e);
 }
 </script>
diff --git a/src/components/Discover/Map/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue
index b771a47..1f54387 100644
--- a/src/components/Discover/Map/Filter/ActOccCase.vue
+++ b/src/components/Discover/Map/Filter/ActOccCase.vue
@@ -39,54 +39,49 @@
   </div>
 </template>
 
-<script>
-import Search from '@/components/Search.vue';
+<script setup>
+import { ref, watch } from 'vue';
 
-export default {
-  props: ['tableTitle', 'tableData', 'tableSelect', 'progressWidth'],
-  data() {
-    return {
-      select: null,
-      data: this.tableData
-    }
-  },
-  components: {
-    Search,
-  },
-  watch: {
-    tableSelect(newval){
-      this.select = newval;
-    }
-  },
-  methods: {
-    /**
-     * 選擇 Row 的行為
-     */
-    onRowSelect() {
-      this.$emit('on-row-select', this.select);
-    },
-    /**
-     * 取消選取 Row 的行為
-     */
-    onRowUnselect() {
-      this.$emit('on-row-select', this.select);
-    },
-    /**
-     * 全選 Row 的行為
-     * @param {event} e input 傳入的事件
-     */
-    onRowSelectAll(e) {
-      this.select = e.data;
-      this.$emit('on-row-select', this.select);
-    },
-    /**
-     * 取消全選 Row 的行為
-     * @param {event} e input 傳入的事件
-     */
-    onRowUnelectAll(e) {
-      this.select = null;
-      this.$emit('on-row-select', this.select)
-    }
-  },
+const props = defineProps(['tableTitle', 'tableData', 'tableSelect', 'progressWidth']);
+
+const emit = defineEmits(['on-row-select']);
+
+const select = ref(null);
+const data = ref(props.tableData);
+
+watch(() => props.tableSelect, (newval) => {
+  select.value = newval;
+});
+
+/**
+ * 選擇 Row 的行為
+ */
+function onRowSelect() {
+  emit('on-row-select', select.value);
+}
+
+/**
+ * 取消選取 Row 的行為
+ */
+function onRowUnselect() {
+  emit('on-row-select', select.value);
+}
+
+/**
+ * 全選 Row 的行為
+ * @param {event} e input 傳入的事件
+ */
+function onRowSelectAll(e) {
+  select.value = e.data;
+  emit('on-row-select', select.value);
+}
+
+/**
+ * 取消全選 Row 的行為
+ * @param {event} e input 傳入的事件
+ */
+function onRowUnelectAll(e) {
+  select.value = null;
+  emit('on-row-select', select.value);
 }
 </script>
diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index 328f15a..d4defeb 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -119,611 +119,621 @@
   </div>
 </section>
 </template>
-<script>
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { setLineChartData } from '@/module/setChartData.js';
 import getMoment from 'moment';
 import InputNumber from 'primevue/inputnumber';
 import { Decimal } from 'decimal.js';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const allMapDataStore = useAllMapDataStore();
-    const { filterAttrs } = storeToRefs(allMapDataStore);
+const emit = defineEmits(['select-attribute']);
 
-    return { filterAttrs }
+const allMapDataStore = useAllMapDataStore();
+const { filterAttrs } = storeToRefs(allMapDataStore);
+
+const selectedAttName = ref({});
+const selectedAttRange = ref(null);
+const valueTypes = ['int', 'float', 'date'];
+const classTypes = ['boolean', 'string'];
+const chartData = ref({});
+const chartOptions = ref({});
+const chartComplete = ref(null); // 已出圖的 chart.js 資料
+const selectArea = ref(null);
+const selectRange = ref(1000); // 更改 select 的切分數
+const startTime = ref(null); // PrimeVue Calendar v-model
+const endTime = ref(null); // PrimeVue Calendar v-model
+const startMinDate = ref(null);
+const startMaxDate = ref(null);
+const endMinDate = ref(null);
+const endMaxDate = ref(null);
+const valueStart = ref(null); // PrimeVue InputNumber v-model
+const valueEnd = ref(null); // PrimeVue InputNumber v-model
+const valueStartMin = ref(null);
+const valueStartMax = ref(null);
+const valueEndMin = ref(null);
+const valueEndMax = ref(null);
+const tableClass = 'w-full h-full !border-separate !border-spacing-x-2 !table-auto text-sm';
+const headerModeClass = 'w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10';
+const headerClass = '!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10';
+const bodyModeClass = '!p-2 !border-0';
+const bodyClass = 'break-words !py-2 !border-0';
+const panelProps = {
+  onClick: (event) => {
+    event.stopPropagation();
   },
-  components: {
-    InputNumber,
+};
+const tooltip = {
+  attributeName: {
+    value: 'Attributes with too many discrete values are excluded from selection. But users can still view those attributes in the DATA page.',
+    class: '!max-w-[212px] !text-[10px] !opacity-90',
   },
-  data() {
-    return {
-      selectedAttName: {},
-      selectedAttRange: null,
-      valueTypes: ['int', 'float', 'date'],
-      classTypes: ['boolean', 'string'],
-      chartData: {},
-      chartOptions: {},
-      chartComplete: null, // 已出圖的 chart.js 資料
-      selectArea: null,
-      selectRange: 1000, // 更改 select 的切分數
-      startTime: null, // PrimeVue Calendar v-model
-      endTime: null, // PrimeVue Calendar v-model
-      startMinDate: null,
-      startMaxDate: null,
-      endMinDate: null,
-      endMaxDate: null,
-      valueStart: null, // PrimeVue InputNumber v-model
-      valueEnd: null, // PrimeVue InputNumber v-model
-      valueStartMin: null,
-      valueStartMax: null,
-      valueEndMin: null,
-      valueEndMax: null,
-      tableClass: 'w-full h-full !border-separate !border-spacing-x-2 !table-auto text-sm',
-      headerModeClass: 'w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10',
-      headerClass: '!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10',
-      bodyModeClass: '!p-2 !border-0',
-      bodyClass: 'break-words !py-2 !border-0',
-      panelProps: {
-        onClick: (event) => {
-          event.stopPropagation();
-        },
-      },
-      tooltip: {
-        attributeName: {
-          value: 'Attributes with too many discrete values are excluded from selection. But users can still view those attributes in the DATA page.',
-          class: '!max-w-[212px] !text-[10px] !opacity-90',
-        },
-      }
+};
+
+const attTotal = computed(() => {
+  return filterAttrs.value.length;
+});
+
+const attRangeTotal = computed(() => {
+  const type = selectedAttName.value.type;
+
+  let result = null; // Initialize the result variable with null
+
+  if (classTypes.includes(type) && attRangeData.value) {
+      result = `(${attRangeData.value.length})`; // Assign the length of attRangeData if it exists
+  }
+  return result;
+});
+
+const attRangeData = computed(() => {
+  let data = [];
+  const type = selectedAttName.value.type;
+  const sum = selectedAttName.value.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0);
+  data = selectedAttName.value.options.map((item, index) => {
+    const ratio = item.freq / sum;
+    const result = {
+      id: index + 1,
+      key: selectedAttName.value.key,
+      type: type,
+      value: item.value,
+      occ_progress_bar: ratio * 100,
+      occ_value: item.freq.toLocaleString('en-US'),
+      occ_ratio: getPercentLabel(ratio),
+      freq: item.freq
+    };
+    result.label = null;
+    if (type === 'boolean') {
+      result.label = item.value ? 'Yes' : 'No';
+    } else {
+      result.label = null;
     }
-  },
-  computed: {
-    attTotal: function() {
-      return this.filterAttrs.length;
-    },
-    attRangeTotal: function() {
-      const type = this.selectedAttName.type;
+    return result;
+  })
+  return data.sort((x, y) => y.freq - x.freq);
+});
 
-      let result = null; // Initialize the result variable with null
+// 取出選取的 Attribute radio 數值型的資料
+const valueData = computed(() => {
+  // filter 回傳陣列，find 回傳遞一個找到的元素，因此使用 find 方法。
+  if(valueTypes.includes(selectedAttName.value.type)){
+    const data = filterAttrs.value.find(item => item.type === selectedAttName.value.type && item.key === selectedAttName.value.key);
+    return data
+  }
+});
 
-      if (this.classTypes.includes(type) && this.attRangeData) {
-          result = `(${this.attRangeData.length})`; // Assign the length of attRangeData if it exists
-      }
-      return result;
-    },
-    attRangeData: function() {
-      let data = [];
-      const type = this.selectedAttName.type;
-      const sum = this.selectedAttName.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0);
-      data = this.selectedAttName.options.map((item, index) => {
-        const ratio = item.freq / sum;
-        const result = {
-          id: index + 1,
-          key: this.selectedAttName.key,
-          type: type,
-          value: item.value,
-          occ_progress_bar: ratio * 100,
-          occ_value: item.freq.toLocaleString('en-US'),
-          occ_ratio: this.getPercentLabel(ratio),
-          freq: item.freq
-        };
-        result.label = null;
-        if (type === 'boolean') {
-          result.label = item.value ? 'Yes' : 'No';
-        } else {
-          result.label = null;
-        }
+// 找出 slidrData，時間格式:毫秒時間戳
+const sliderDataComputed = computed(() => {
+  let xAxisMin;
+  let xAxisMax;
+  const min = valueData.value.min;
+  const max = valueData.value.max;
+  const type = valueData.value.type;
+  switch (type) {
+    case 'dummy':
+    case 'date':
+      xAxisMin = new Date(min).getTime();
+      xAxisMax = new Date(max).getTime();
+      break;
+    default:
+      xAxisMin = min;
+      xAxisMax = max;
+      break;
+  }
+  const range = xAxisMax - xAxisMin;
+  const step = range / selectRange.value;
+  let data = []
+
+  for (let i = 0; i <= selectRange.value; i++) {
+    data.push(xAxisMin + (step * i));
+  }
+  switch (type) {
+    case 'int':
+      data = data.map(value => {
+        let result = Math.round(value);
+        result = result === -0 ? 0 : result;
+        return result;
+      });
+      break;
+    case 'float':
+      data = data.map(value => {
+        let result = new Decimal(value.toFixed(2)).toNumber();
+        result = result === -0 ? 0 : result;
         return result;
       })
-      return data.sort((x, y) => y.freq - x.freq);
-    },
-    // 取出選取的 Attribute radio 數值型的資料
-    valueData: function() {
-      // filter 回傳陣列，find 回傳遞一個找到的元素，因此使用 find 方法。
-      if(this.valueTypes.includes(this.selectedAttName.type)){
-        const valueData = this.filterAttrs.find(item => item.type === this.selectedAttName.type && item.key === this.selectedAttName.key);
-        return valueData
-      }
-    },
-    // 找出 slidrData，時間格式:毫秒時間戳
-    sliderData: function() {
-      let xAxisMin;
-      let xAxisMax;
-      const min = this.valueData.min;
-      const max = this.valueData.max;
-      const type = this.valueData.type;
-      switch (type) {
-        case 'dummy':
-        case 'date':
-          xAxisMin = new Date(min).getTime();
-          xAxisMax = new Date(max).getTime();
-          break;
-        default:
-          xAxisMin = min;
-          xAxisMax = max;
-          break;
-      }
-      const range = xAxisMax - xAxisMin;
-      const step = range / this.selectRange;
-      let sliderData = []
+      break;
+    default:
+      break;
+  }
+  return data;
+});
 
-      for (let i = 0; i <= this.selectRange; i++) {
-        sliderData.push(xAxisMin + (step * i));
-      }
-      switch (type) {
-        case 'int':
-          sliderData = sliderData.map(value => {
-            let result = Math.round(value);
-            result = result === -0 ? 0 : result;
-            return result;
-          });
-          break;
-        case 'float':
-          sliderData = sliderData.map(value => {
-            let result = new Decimal(value.toFixed(2)).toNumber();
-            result = result === -0 ? 0 : result;
-            return result;
-          })
-          break;
-        default:
-          break;
-      }
-      return sliderData;
-    },
-    // user select value type start and end
-    attValueTypeStartEnd: function() {
-      let start;
-      let end;
-      const type = this.selectedAttName.type;
+// user select value type start and end
+const attValueTypeStartEnd = computed(() => {
+  let start;
+  let end;
+  const type = selectedAttName.value.type;
 
-      switch (type) {
-        case 'dummy': //sonar-qube
-        case 'date':
-          start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00');
-          end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00');
-          break;
-        default:
-          start = this.valueStart;
-          end = this.valueEnd;
-          break;
-      }
-      const data = { // 傳給後端的資料
-        type: type,
-        data: {
-          key: this.selectedAttName.key,
-          min: start,
-          max: end,
-        }
-      }
-      this.$emit('select-attribute', data);
+  switch (type) {
+    case 'dummy': //sonar-qube
+    case 'date':
+      start = getMoment(startTime.value).format('YYYY-MM-DDTHH:mm:00');
+      end = getMoment(endTime.value).format('YYYY-MM-DDTHH:mm:00');
+      break;
+    default:
+      start = valueStart.value;
+      end = valueEnd.value;
+      break;
+  }
+  const data = { // 傳給後端的資料
+    type: type,
+    data: {
+      key: selectedAttName.value.key,
+      min: start,
+      max: end,
+    }
+  }
+  emit('select-attribute', data);
 
-      return [start, end];
-    },
-    labelsData: function() {
-      const min = new Date(this.valueData.min).getTime();
-      const max = new Date(this.valueData.max).getTime();
-      const numPoints = 11;
-      const step = (max - min) / (numPoints - 1);
-      const data = [];
-      for(let i = 0; i< numPoints; i++) {
-        const x = min + i * step;
-        data.push(x);
-      }
-      return data;
-    },
-  },
-  methods: {
-    /**
-     * 選取類別型 table 的選項
-     */
-    onRowSelect() {
-      const type = this.selectedAttName.type;
-      const data = {
-        type: type,
-        data: this.selectedAttRange,
-      };
-      this.$emit('select-attribute', data);
-    },
-    /**
-     * 取消類別型 table 的選項
-     */
-    onRowUnselect() {
-      const type = this.selectedAttName.type;
-      const data = {
-        type: type,
-        data: this.selectedAttRange,
-      };
-      this.$emit('select-attribute', data);
-    },
-    /**
-     * 選取類別型 table 的全選項
-     * @param {event} e input 傳入的事件
-     */
-    onRowSelectAll(e) {
-      this.selectedAttRange = e.data;
-      const type = this.selectedAttName.type;
-      const data = {
-        type: type,
-        data: this.selectedAttRange,
-      };
-      this.$emit('select-attribute', data);
-    },
-    /**
-     * 取消類別型 table 的全選項
-     */
-    onRowUnelectAll() {
-      this.selectedAttRange = null;
-      const type = this.selectedAttName.type;
-      const data = {
-        type: type,
-        data: this.selectedAttRange,
-      };
-      this.$emit('select-attribute', data)
-    },
-    /**
-     * 切換 Attribute Name Radio
-     * @param {event} e input 傳入的事件
-     */
-    switchAttNameRadio(e) {
-      this.selectedAttRange = null;
-      this.startTime = null;
-      this.endTime = null;
-      this.valueStart = null;
-      this.valueEnd = null;
-      if(this.valueData) { // 切換 Attribute Name
-        // 初始化雙向綁定
-        this.selectArea = [0, this.selectRange];
-        const min = this.valueData.min;
-        const max = this.valueData.max;
-        switch (this.selectedAttName.type) {
-          case 'dummy': //sonar-qube
-          case 'date':
-            // 除了 date 外雙向綁定為空
-            this.valueStart = null;
-            this.valueEnd = null;
-            // 初始化: Calendar
-            this.startMinDate = new Date(min);
-            this.startMaxDate = new Date(max);
-            this.endMinDate = new Date(min);
-            this.endMaxDate = new Date(max);
-            // 初始化: 讓日曆的範圍等於時間軸的範圍
-            this.startTime = new Date(min);
-            this.endTime = new Date(max);
-            break;
-          default:
-            // date 雙向綁定為空
-            this.startTime = null;
-            this.endTime = null;
-            // 初始化：InputNumber
-            this.valueStartMin = min;
-            this.valueStartMax = max;
-            this.valueEndMin = min;
-            this.valueEndMax = max;
-            // 初始化: 讓 InputNumber 的範圍等於時間軸的範圍
-            this.valueStart = min;
-            this.valueEnd = max;
-            break;
-        }
-        // 傳給後端
-        // this.attValueTypeStartEnd; 是否有要呼叫函數? sonar-qube
-        // 建立圖表
-        this.createChart();
-      }
-    },
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-     progressWidth(value){
-      return `width:${value}%;`
-    },
-    /**
-     * Number to percentage
-     * @param   {number} val 原始數字
-     * @returns {string}     轉換完成的百分比字串
-     */
-     getPercentLabel(val){
-      if((val * 100).toFixed(1) >= 100) return `100%`;
-      else return `${(val * 100).toFixed(1)}%`;
-    },
-    /**
-     * 調整遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeMask(chart) {
-      const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);
-      const to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01);
-      this.resizeLeftMask(chart, from);
-      this.resizeRightMask(chart, to);
-    },
-    /**
-     * 調整左邊遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeLeftMask(chart, from) {
-      const canvas = document.querySelector('#chartCanvasId canvas');
-      const mask = document.getElementById("chart-mask-left");
-      mask.style.left = `${canvas.offsetLeft + chart.chartArea.left}px`;
-      mask.style.width = `${chart.chartArea.width * from}px`;
-      mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
-      mask.style.height = `${chart.chartArea.height}px`;
-    },
-    /**
-     * 調整右邊遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeRightMask(chart, to) {
-      const canvas = document.querySelector('#chartCanvasId canvas');
-      const mask = document.getElementById("chart-mask-right");
-      mask.style.left = `${canvas.offsetLeft + chart.chartArea.left + chart.chartArea.width * to}px`;
-      mask.style.width = `${chart.chartArea.width * (1 - to)}px`;
-      mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
-      mask.style.height = `${chart.chartArea.height}px`;
-    },
-    /**
-     * create chart
-     */
-    createChart() {
-      const valueData = this.valueData;
-      const max = valueData.chart.y_axis.max * 1.1;
-      const data = setLineChartData(valueData.chart.data, valueData.chart.x_axis.max, valueData.chart.x_axis.min);
-      const isDateType = valueData.type === 'date';
-      const minX = valueData.chart.x_axis.min;
-      const maxX = valueData.chart.x_axis.max;
-      let setChartData= {};
-      let setChartOptions= {};
-      let setLabels = [];
+  return [start, end];
+});
 
-      switch (valueData.type) {
-        case 'int':
-          setLabels = data.map(item => Math.round(item.x));
-          break;
-        case 'float':
-          setLabels = data.map((item, index) => {
-            let x;
-            if (index === 0) {
-                x = Math.floor(item.x * 100) / 100;
-            } else if (index === data.length - 1) {
-                item.x = Math.ceil(item.x * 100) / 100;
-                x = item.x;
-            } else {
-                x = Math.round(item.x * 100) / 100;
-            }
-            return x
-          });
-          break;
-        case 'date':
-          setLabels = this.labelsData;
-          break;
-        default:
-          break;
-      }
-      setChartData = {
-        datasets: [
-          {
-            label: 'Attribute Value',
-            data: data,
-            fill: 'start',
-            showLine: false,
-            tension: 0.4,
-            backgroundColor: 'rgba(0,153,255)',
-            pointRadius: 0,
-          }
-        ],
-        labels: setLabels,
-      };
-      setChartOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          filler: {
-            propagate: false
-          },
-          title: false
-        },
-        animation: {
-          onComplete: e => {
-            this.chartComplete = e.chart;
-            this.resizeMask(e.chart);
-          }
-        },
-        interaction: {
-          intersect: true,
-        },
-        scales: {
-          y: {
-            beginAtZero: true, // scale 包含 0
-            max: max,
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              stepSize: max / 4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              z: 1,
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            }
-          },
-        },
-      };
-      if(isDateType) {
-        setChartOptions.scales.x = {
-          type: 'time',
-          ticks: {
-            min: minX,
-            max: maxX,
-            autoSkip: true, // 依比例判斷要不要換算時間單位
-            maxRotation: 0, // 不旋轉 lable 0~50
-            color: '#334155',
-            display: true,
-            source: 'labels', // 依比例彈性顯示 label 數量
-          },
-          grid: {
-            display: false, // 隱藏 x 軸網格
-          },
-          time: {
-            minUnit: 'day', // 顯示最小單位
-            // displayFormats: {
-            //   minute: 'HH:mm MMM d',
-            //   hour: 'HH:mm MMM d',
-            // }
-          }
-        }
-      } else {
-        setChartOptions.scales.x = {
-          bounds: 'data',
-          type: 'linear',
-          min: minX,
-          max: maxX,
-          ticks: {
-            autoSkip: true,
-            maxRotation: 0, // 不旋轉 lable 0~50
-            color: '#334155',
-            callback: ((value, index, values) => {
-              let x;
-              switch (valueData.type) {
-                case 'int':
-                  return Math.round(value);
-                case 'float':
-                  switch (index) {
-                    case 0:
-                      x = Math.floor(value * 100) / 100;
-                      break;
-                    case values.length - 1:
-                      x = Math.ceil(value * 100) / 100;
-                      break;
-                    default:
-                      x = Math.round(value * 100) / 100;
-                  }
-                  // 處理科學記號等格式轉換
-                  // Decimal 無法處理超過 16 位數
-                  x = new Intl.NumberFormat(undefined, {useGrouping: false}).format(x);
-                  return x
-              }
-            })
-          },
-          grid: {
-            display: false, // 隱藏 x 軸網格
-          },
-        }
-      }
-      this.chartData = setChartData;
-      this.chartOptions = setChartOptions;
-    },
-    /**
-     * 滑塊改變的時候
-     * @param {array} e [1, 100]
-     */
-     changeSelectArea(e) {
-      // 日曆改變時，滑塊跟著改變
-      const sliderData = this.sliderData;
-      const start = sliderData[e[0].toFixed()];
-      const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+const labelsData = computed(() => {
+  const min = new Date(valueData.value.min).getTime();
+  const max = new Date(valueData.value.max).getTime();
+  const numPoints = 11;
+  const step = (max - min) / (numPoints - 1);
+  const data = [];
+  for(let i = 0; i< numPoints; i++) {
+    const x = min + i * step;
+    data.push(x);
+  }
+  return data;
+});
 
-      switch (this.selectedAttName.type) {
-        case 'dummy':
-        case 'date':
-          this.startTime = new Date(start);
-          this.endTime = new Date(end);
-          // 重新設定 start end 日曆選取範圍
-          this.endMinDate = new Date(start);
-          this.startMaxDate = new Date(end);
-          break;
-        default:
-          this.valueStart = start;
-          this.valueEnd = end;
-          // 重新設定 start end 日曆選取範圍
-          this.valueEndMin = start;
-          this.valueStartMax = end;
-          break;
-      }
-      // 重新算圖
-      this.resizeMask(this.chartComplete);
-      // 執行 timeFrameStartEnd 才會改變數據
-      // this.attValueTypeStartEnd; 是否有要呼叫函數? sonar-qube
-    },
-    /**
-     * 選取開始或結束時間時，要改變滑塊跟圖表
-     * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間) | Blur Event
-     * @param {string} direction start or end
-     */
-     sliderValueRange(e, direction) {
-      // 找到最鄰近的 index，時間格式: 毫秒時間戳
-      const sliderData = this.sliderData;
-      const isDateType = this.selectedAttName.type === 'date';
-      let targetTime = [];
-      let inputValue;
+/**
+ * 選取類別型 table 的選項
+ */
+function onRowSelect() {
+  const type = selectedAttName.value.type;
+  const data = {
+    type: type,
+    data: selectedAttRange.value,
+  };
+  emit('select-attribute', data);
+}
 
-      if(isDateType) targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()];
-      else targetTime = [this.attValueTypeStartEnd[0], this.attValueTypeStartEnd[1]]
+/**
+ * 取消類別型 table 的選項
+ */
+function onRowUnselect() {
+  const type = selectedAttName.value.type;
+  const data = {
+    type: type,
+    data: selectedAttRange.value,
+  };
+  emit('select-attribute', data);
+}
 
-      const closestIndexes = targetTime.map(target => {
-        let closestIndex = 0;
-        closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
-        let result = Math.round(Math.abs(closestIndex));
-        result = result > this.selectRange ? this.selectRange : result;
-        return result
-      });
-      // 改變滑塊
-      this.selectArea = closestIndexes;
-      // 重新設定 start end 日曆選取範圍
-      if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ;
-      if(direction === 'start') {
-        if(isDateType){
-          this.endMinDate = e;
-        } else {
-          this.valueEndMin = inputValue;
-        }
-      }
-      else if(direction === 'end') {
-        if(isDateType) {
-          this.startMaxDate = e;
-        } else {
-          this.valueStartMax = inputValue;
-        };
-      }
-      // 重新算圖
-      if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete);
-      else return;
-    },
-  },
-  created() {
-    this.$emitter.on('map-filter-reset', value => {
-      if(value) {
-        this.selectedAttRange = null;
-        if(this.valueData && this.valueTypes.includes(this.selectedAttName.type)){
-          const min = this.valueData.min;
-          const max = this.valueData.max;
-          this.startTime = new Date(min);
-          this.endTime = new Date(max);
-          this.valueStart = min;
-          this.valueEnd = max;
-          this.selectArea = [0, this.selectRange];
-          this.resizeMask(this.chartComplete);
-        }
-      }
-    });
-  },
-  mounted() {
-    // Slider
-    this.selectArea = [0, this.selectRange]; // 初始化滑塊
-  },
-  beforeUnmount() {
-    this.selectedAttName = {};
+/**
+ * 選取類別型 table 的全選項
+ * @param {event} e input 傳入的事件
+ */
+function onRowSelectAll(e) {
+  selectedAttRange.value = e.data;
+  const type = selectedAttName.value.type;
+  const data = {
+    type: type,
+    data: selectedAttRange.value,
+  };
+  emit('select-attribute', data);
+}
+
+/**
+ * 取消類別型 table 的全選項
+ */
+function onRowUnelectAll() {
+  selectedAttRange.value = null;
+  const type = selectedAttName.value.type;
+  const data = {
+    type: type,
+    data: selectedAttRange.value,
+  };
+  emit('select-attribute', data)
+}
+
+/**
+ * 切換 Attribute Name Radio
+ * @param {event} e input 傳入的事件
+ */
+function switchAttNameRadio(e) {
+  selectedAttRange.value = null;
+  startTime.value = null;
+  endTime.value = null;
+  valueStart.value = null;
+  valueEnd.value = null;
+  if(valueData.value) { // 切換 Attribute Name
+    // 初始化雙向綁定
+    selectArea.value = [0, selectRange.value];
+    const min = valueData.value.min;
+    const max = valueData.value.max;
+    switch (selectedAttName.value.type) {
+      case 'dummy': //sonar-qube
+      case 'date':
+        // 除了 date 外雙向綁定為空
+        valueStart.value = null;
+        valueEnd.value = null;
+        // 初始化: Calendar
+        startMinDate.value = new Date(min);
+        startMaxDate.value = new Date(max);
+        endMinDate.value = new Date(min);
+        endMaxDate.value = new Date(max);
+        // 初始化: 讓日曆的範圍等於時間軸的範圍
+        startTime.value = new Date(min);
+        endTime.value = new Date(max);
+        break;
+      default:
+        // date 雙向綁定為空
+        startTime.value = null;
+        endTime.value = null;
+        // 初始化：InputNumber
+        valueStartMin.value = min;
+        valueStartMax.value = max;
+        valueEndMin.value = min;
+        valueEndMax.value = max;
+        // 初始化: 讓 InputNumber 的範圍等於時間軸的範圍
+        valueStart.value = min;
+        valueEnd.value = max;
+        break;
+    }
+    // 傳給後端
+    // attValueTypeStartEnd.value; 是否有要呼叫函數? sonar-qube
+    // 建立圖表
+    createChart();
   }
 }
+
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+function progressWidth(value){
+  return `width:${value}%;`
+}
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return `100%`;
+  else return `${(val * 100).toFixed(1)}%`;
+}
+
+/**
+ * 調整遮罩大小
+ * @param {object} chart 取得 chart.js 資料
+ */
+function resizeMask(chart) {
+  const from = (selectArea.value[0] * 0.01) / (selectRange.value * 0.01);
+  const to = (selectArea.value[1] * 0.01) / (selectRange.value * 0.01);
+  resizeLeftMask(chart, from);
+  resizeRightMask(chart, to);
+}
+
+/**
+ * 調整左邊遮罩大小
+ * @param {object} chart 取得 chart.js 資料
+ */
+function resizeLeftMask(chart, from) {
+  const canvas = document.querySelector('#chartCanvasId canvas');
+  const mask = document.getElementById("chart-mask-left");
+  mask.style.left = `${canvas.offsetLeft + chart.chartArea.left}px`;
+  mask.style.width = `${chart.chartArea.width * from}px`;
+  mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
+  mask.style.height = `${chart.chartArea.height}px`;
+}
+
+/**
+ * 調整右邊遮罩大小
+ * @param {object} chart 取得 chart.js 資料
+ */
+function resizeRightMask(chart, to) {
+  const canvas = document.querySelector('#chartCanvasId canvas');
+  const mask = document.getElementById("chart-mask-right");
+  mask.style.left = `${canvas.offsetLeft + chart.chartArea.left + chart.chartArea.width * to}px`;
+  mask.style.width = `${chart.chartArea.width * (1 - to)}px`;
+  mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
+  mask.style.height = `${chart.chartArea.height}px`;
+}
+
+/**
+ * create chart
+ */
+function createChart() {
+  const vData = valueData.value;
+  const max = vData.chart.y_axis.max * 1.1;
+  const data = setLineChartData(vData.chart.data, vData.chart.x_axis.max, vData.chart.x_axis.min);
+  const isDateType = vData.type === 'date';
+  const minX = vData.chart.x_axis.min;
+  const maxX = vData.chart.x_axis.max;
+  let setChartData= {};
+  let setChartOptions= {};
+  let setLabels = [];
+
+  switch (vData.type) {
+    case 'int':
+      setLabels = data.map(item => Math.round(item.x));
+      break;
+    case 'float':
+      setLabels = data.map((item, index) => {
+        let x;
+        if (index === 0) {
+            x = Math.floor(item.x * 100) / 100;
+        } else if (index === data.length - 1) {
+            item.x = Math.ceil(item.x * 100) / 100;
+            x = item.x;
+        } else {
+            x = Math.round(item.x * 100) / 100;
+        }
+        return x
+      });
+      break;
+    case 'date':
+      setLabels = labelsData.value;
+      break;
+    default:
+      break;
+  }
+  setChartData = {
+    datasets: [
+      {
+        label: 'Attribute Value',
+        data: data,
+        fill: 'start',
+        showLine: false,
+        tension: 0.4,
+        backgroundColor: 'rgba(0,153,255)',
+        pointRadius: 0,
+      }
+    ],
+    labels: setLabels,
+  };
+  setChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false, // 圖例
+      filler: {
+        propagate: false
+      },
+      title: false
+    },
+    animation: {
+      onComplete: e => {
+        chartComplete.value = e.chart;
+        resizeMask(e.chart);
+      }
+    },
+    interaction: {
+      intersect: true,
+    },
+    scales: {
+      y: {
+        beginAtZero: true, // scale 包含 0
+        max: max,
+        ticks: { // 設定間隔數值
+          display: false, // 隱藏數值，只顯示格線
+          stepSize: max / 4,
+        },
+        grid: {
+          color: 'rgba(100,116,139)',
+          z: 1,
+        },
+        border: {
+          display: false, // 隱藏左側多出來的線
+        }
+      },
+    },
+  };
+  if(isDateType) {
+    setChartOptions.scales.x = {
+      type: 'time',
+      ticks: {
+        min: minX,
+        max: maxX,
+        autoSkip: true, // 依比例判斷要不要換算時間單位
+        maxRotation: 0, // 不旋轉 lable 0~50
+        color: '#334155',
+        display: true,
+        source: 'labels', // 依比例彈性顯示 label 數量
+      },
+      grid: {
+        display: false, // 隱藏 x 軸網格
+      },
+      time: {
+        minUnit: 'day', // 顯示最小單位
+        // displayFormats: {
+        //   minute: 'HH:mm MMM d',
+        //   hour: 'HH:mm MMM d',
+        // }
+      }
+    }
+  } else {
+    setChartOptions.scales.x = {
+      bounds: 'data',
+      type: 'linear',
+      min: minX,
+      max: maxX,
+      ticks: {
+        autoSkip: true,
+        maxRotation: 0, // 不旋轉 lable 0~50
+        color: '#334155',
+        callback: ((value, index, values) => {
+          let x;
+          switch (vData.type) {
+            case 'int':
+              return Math.round(value);
+            case 'float':
+              switch (index) {
+                case 0:
+                  x = Math.floor(value * 100) / 100;
+                  break;
+                case values.length - 1:
+                  x = Math.ceil(value * 100) / 100;
+                  break;
+                default:
+                  x = Math.round(value * 100) / 100;
+              }
+              // 處理科學記號等格式轉換
+              // Decimal 無法處理超過 16 位數
+              x = new Intl.NumberFormat(undefined, {useGrouping: false}).format(x);
+              return x
+          }
+        })
+      },
+      grid: {
+        display: false, // 隱藏 x 軸網格
+      },
+    }
+  }
+  chartData.value = setChartData;
+  chartOptions.value = setChartOptions;
+}
+
+/**
+ * 滑塊改變的時候
+ * @param {array} e [1, 100]
+ */
+function changeSelectArea(e) {
+  // 日曆改變時，滑塊跟著改變
+  const sliderData = sliderDataComputed.value;
+  const start = sliderData[e[0].toFixed()];
+  const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+
+  switch (selectedAttName.value.type) {
+    case 'dummy':
+    case 'date':
+      startTime.value = new Date(start);
+      endTime.value = new Date(end);
+      // 重新設定 start end 日曆選取範圍
+      endMinDate.value = new Date(start);
+      startMaxDate.value = new Date(end);
+      break;
+    default:
+      valueStart.value = start;
+      valueEnd.value = end;
+      // 重新設定 start end 日曆選取範圍
+      valueEndMin.value = start;
+      valueStartMax.value = end;
+      break;
+  }
+  // 重新算圖
+  resizeMask(chartComplete.value);
+  // 執行 timeFrameStartEnd 才會改變數據
+  // attValueTypeStartEnd.value; 是否有要呼叫函數? sonar-qube
+}
+
+/**
+ * 選取開始或結束時間時，要改變滑塊跟圖表
+ * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間) | Blur Event
+ * @param {string} direction start or end
+ */
+function sliderValueRange(e, direction) {
+  // 找到最鄰近的 index，時間格式: 毫秒時間戳
+  const sliderData = sliderDataComputed.value;
+  const isDateType = selectedAttName.value.type === 'date';
+  let targetTime = [];
+  let inputValue;
+
+  if(isDateType) targetTime = [new Date(attValueTypeStartEnd.value[0]).getTime(), new Date(attValueTypeStartEnd.value[1]).getTime()];
+  else targetTime = [attValueTypeStartEnd.value[0], attValueTypeStartEnd.value[1]]
+
+  const closestIndexes = targetTime.map(target => {
+    let closestIndex = 0;
+    closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
+    let result = Math.round(Math.abs(closestIndex));
+    result = result > selectRange.value ? selectRange.value : result;
+    return result
+  });
+  // 改變滑塊
+  selectArea.value = closestIndexes;
+  // 重新設定 start end 日曆選取範圍
+  if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ;
+  if(direction === 'start') {
+    if(isDateType){
+      endMinDate.value = e;
+    } else {
+      valueEndMin.value = inputValue;
+    }
+  }
+  else if(direction === 'end') {
+    if(isDateType) {
+      startMaxDate.value = e;
+    } else {
+      valueStartMax.value = inputValue;
+    };
+  }
+  // 重新算圖
+  if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chartComplete.value);
+  else return;
+}
+
+// created() equivalent
+emitter.on('map-filter-reset', value => {
+  if(value) {
+    selectedAttRange.value = null;
+    if(valueData.value && valueTypes.includes(selectedAttName.value.type)){
+      const min = valueData.value.min;
+      const max = valueData.value.max;
+      startTime.value = new Date(min);
+      endTime.value = new Date(max);
+      valueStart.value = min;
+      valueEnd.value = max;
+      selectArea.value = [0, selectRange.value];
+      resizeMask(chartComplete.value);
+    }
+  }
+});
+
+onMounted(() => {
+  // Slider
+  selectArea.value = [0, selectRange.value]; // 初始化滑塊
+});
+
+onBeforeUnmount(() => {
+  selectedAttName.value = {};
+});
 </script>
 <style scoped>
 @reference "../../../../assets/tailwind.css";
diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue
index 0c0d6f4..0b19aad 100644
--- a/src/components/Discover/Map/Filter/Funnel.vue
+++ b/src/components/Discover/Map/Filter/Funnel.vue
@@ -38,90 +38,89 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { storeToRefs } from 'pinia';
+import { useToast } from 'vue-toast-notification';
 import { useLoadingStore } from '@/stores/loading';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { delaySecond, } from '@/utils/timeUtil.js';
 
-export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFilterId } = storeToRefs(allMapDataStore);
+const emit = defineEmits(['submit-all']);
+const $toast = useToast();
 
-    return { isLoading, hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, allMapDataStore, tempFilterId }
-  },
-  methods: {
-    /**
-     * @param {boolean} e ture | false，可選 ture 或 false
-     * @param {numble} index rule's index
-     */
-    isRule(e, index){
-      const rule = this.isRuleData[index];
-      // 先取得 rule object
-      // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉
-      if(!e) this.temporaryData[index] = 0;
-      else this.temporaryData[index] = rule;
-    },
-    /**
-     * header:Funnel 刪除全部的 Funnel
-     * @param {numble|string} index rule's index 或 全部
-     */
-    async deleteRule(index) {
-      if(index === 'all') {
-        this.temporaryData = [];
-        this.isRuleData = [];
-        this.ruleData = [];
-        if(this.tempFilterId) {
-          this.isLoading = true;
-          this.tempFilterId = await null;
-          await this.allMapDataStore.getAllMapData();
-          await this.allMapDataStore.getAllTrace(); // SidebarTrace 要連動
-          await this.$emit('submit-all');
-          this.isLoading = false;
-        }
-        this.$toast.success('Filter(s) deleted.');
-      }else{
-        this.$toast.success(`Filter deleted.`);
-        this.temporaryData.splice(index, 1);
-        this.isRuleData.splice(index, 1);
-        this.ruleData.splice(index, 1);
-      }
-    },
-    /**
-     * header:Funnel 發送暫存的選取資料
-     */
-    async submitAll() {
-      this.postRuleData = this.temporaryData.filter(item => item !== 0); // 取得 submit 的資料，有 toggle button 的話，找出並刪除陣列中為 0 的項目
-      if(!this.postRuleData?.length) return this.$toast.error('Not selected');
-      await this.allMapDataStore.checkHasResult(); // 後端快速檢查有沒有結果
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFilterId } = storeToRefs(allMapDataStore);
 
-      if(this.hasResultRule === null) {
-        return;
-      } else if(this.hasResultRule) {
-        this.isLoading = true;
-        await this.allMapDataStore.addTempFilterId();
-        await this.allMapDataStore.getAllMapData();
-        await this.allMapDataStore.getAllTrace(); // SidebarTrace 要連動
-        if(this.temporaryData[0]?.type) {
-          this.allMapDataStore.traceId = await this.allMapDataStore.traces[0]?.id;
-        }
-        await this.$emit('submit-all');
-        this.isLoading = false;
-        this.$toast.success('Filter(s) applied.');
-        return;
-      }
+/**
+ * @param {boolean} e ture | false，可選 ture 或 false
+ * @param {numble} index rule's index
+ */
+function isRule(e, index){
+  const rule = isRuleData.value[index];
+  // 先取得 rule object
+  // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉
+  if(!e) temporaryData.value[index] = 0;
+  else temporaryData.value[index] = rule;
+}
 
-      // sonar-qube "This statement will not be executed conditionally"
-      this.isLoading = true;
-      await delaySecond(1);
-      this.isLoading = false;
-      this.$toast.warning('No result.');
-    },
+/**
+ * header:Funnel 刪除全部的 Funnel
+ * @param {numble|string} index rule's index 或 全部
+ */
+async function deleteRule(index) {
+  if(index === 'all') {
+    temporaryData.value = [];
+    isRuleData.value = [];
+    ruleData.value = [];
+    if(tempFilterId.value) {
+      isLoading.value = true;
+      tempFilterId.value = await null;
+      await allMapDataStore.getAllMapData();
+      await allMapDataStore.getAllTrace(); // SidebarTrace 要連動
+      await emit('submit-all');
+      isLoading.value = false;
+    }
+    $toast.success('Filter(s) deleted.');
+  }else{
+    $toast.success(`Filter deleted.`);
+    temporaryData.value.splice(index, 1);
+    isRuleData.value.splice(index, 1);
+    ruleData.value.splice(index, 1);
   }
 }
+
+/**
+ * header:Funnel 發送暫存的選取資料
+ */
+async function submitAll() {
+  postRuleData.value = temporaryData.value.filter(item => item !== 0); // 取得 submit 的資料，有 toggle button 的話，找出並刪除陣列中為 0 的項目
+  if(!postRuleData.value?.length) return $toast.error('Not selected');
+  await allMapDataStore.checkHasResult(); // 後端快速檢查有沒有結果
+
+  if(hasResultRule.value === null) {
+    return;
+  } else if(hasResultRule.value) {
+    isLoading.value = true;
+    await allMapDataStore.addTempFilterId();
+    await allMapDataStore.getAllMapData();
+    await allMapDataStore.getAllTrace(); // SidebarTrace 要連動
+    if(temporaryData.value[0]?.type) {
+      allMapDataStore.traceId = await allMapDataStore.traces[0]?.id;
+    }
+    await emit('submit-all');
+    isLoading.value = false;
+    $toast.success('Filter(s) applied.');
+    return;
+  }
+
+  // sonar-qube "This statement will not be executed conditionally"
+  isLoading.value = true;
+  await delaySecond(1);
+  isLoading.value = false;
+  $toast.warning('No result.');
+}
 </script>
 
 <style scoped>
diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue
index 450ab16..2320175 100644
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -30,327 +30,326 @@
     </section>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { Chart, registerables } from 'chart.js';
 import 'chartjs-adapter-moment';
 import getMoment from 'moment';
 
-export default{
-  props:['selectValue'],
-  setup() {
-    const allMapDataStore = useAllMapDataStore();
-    const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
+const props = defineProps(['selectValue']);
 
-    return {allMapDataStore, filterTimeframe, selectTimeFrame }
+const allMapDataStore = useAllMapDataStore();
+const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
+
+const selectRange = ref(1000); // 更改 select 的切分數
+const selectArea = ref(null);
+const chart = ref(null);
+const canvasId = ref(null);
+const startTime = ref(null);
+const endTime = ref(null);
+const startMinDate = ref(null);
+const startMaxDate = ref(null);
+const endMinDate = ref(null);
+const endMaxDate = ref(null);
+const panelProps = ref({
+  onClick: (event) => {
+    event.stopPropagation();
   },
-  data() {
-    return {
-      selectRange: 1000, // 更改 select 的切分數
-      selectArea: null,
-      chart: null,
-      canvasId: null,
-      startTime: null,
-      endTime: null,
-      startMinDate: null,
-      startMaxDate: null,
-      endMinDate: null,
-      endMaxDate: null,
-      panelProps: {
-        onClick: (event) => {
-          event.stopPropagation();
-        },
-      },
-    }
-  },
-  computed: {
-    // user select time start and end
-    timeFrameStartEnd: function() {
-      const start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00');
-      const end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00');
-      this.selectTimeFrame = [start, end]; // 傳給後端的資料
+});
 
-      return [start, end];
-    },
-    // 找出 slidrData，時間格式:毫秒時間戳
-    sliderData: function() {
-      const xAxisMin = new Date(this.filterTimeframe.x_axis.min).getTime();
-      const xAxisMax = new Date(this.filterTimeframe.x_axis.max).getTime();
-      const range = xAxisMax - xAxisMin;
-      const step = range / this.selectRange;
-      const sliderData = []
+// user select time start and end
+const timeFrameStartEnd = computed(() => {
+  const start = getMoment(startTime.value).format('YYYY-MM-DDTHH:mm:00');
+  const end = getMoment(endTime.value).format('YYYY-MM-DDTHH:mm:00');
+  selectTimeFrame.value = [start, end]; // 傳給後端的資料
 
-      for (let i = 0; i <= this.selectRange; i++) {
-        sliderData.push(xAxisMin + (step * i));
-      }
+  return [start, end];
+});
 
-      return sliderData;
-    },
-    // 加入最大、最小值
-    timeFrameData: function(){
-      const data = this.filterTimeframe.data.map(i=>({x:i.x,y:i.y}))
-      // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
-      // x 值為 0 ~ 11,
-      // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
-      // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
-      // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
+// 找出 slidrData，時間格式:毫秒時間戳
+const sliderData = computed(() => {
+  const xAxisMin = new Date(filterTimeframe.value.x_axis.min).getTime();
+  const xAxisMax = new Date(filterTimeframe.value.x_axis.max).getTime();
+  const range = xAxisMax - xAxisMin;
+  const step = range / selectRange.value;
+  const data = []
 
-      // y 軸最小值
-      const a = 0;
-      let b;
-      const c = 1;
-      const d = this.filterTimeframe.data[0].y;
-      const e = 2;
-      const f = this.filterTimeframe.data[1].y;
-      b = (e*d - a*d - f*a - f*c) / (e - c - a);
-      if(b < 0) {
-        b = 0;
-      }
-      // y 軸最大值
-      const ma = 9;
-      const mb = this.filterTimeframe.data[8].y;
-      const mc = 10;
-      const md = this.filterTimeframe.data[9].y;
-      const me = 11;
-      let mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
-      if(mf < 0) {
-        mf = 0;
-      }
+  for (let i = 0; i <= selectRange.value; i++) {
+    data.push(xAxisMin + (step * i));
+  }
 
-      // 添加最小值
-      data.unshift({
-        x: this.filterTimeframe.x_axis.min_base,
-        y: b,
-      })
-      // 添加最大值
-      data.push({
-        x: this.filterTimeframe.x_axis.max_base,
-        y: mf,
-      })
+  return data;
+});
 
-      return data;
-    },
-    labelsData: function() {
-      const min = new Date(this.filterTimeframe.x_axis.min_base).getTime();
-      const max = new Date(this.filterTimeframe.x_axis.max_base).getTime();
-      const numPoints = 11;
-      const step = (max - min) / (numPoints - 1);
-      const data = [];
-      for(let i = 0; i< numPoints; i++) {
-        const x = min + i * step;
-        data.push(x);
-      }
-      return data;
-    },
-  },
-  watch:{
-    selectTimeFrame(newValue, oldValue) {
-      if(newValue.length === 0) {
-        this.startTime = new Date(this.filterTimeframe.x_axis.min);
-        this.endTime = new Date(this.filterTimeframe.x_axis.max);
-        this.selectArea = [0, this.selectRange];
-        this.resizeMask(this.chart);
-      }
-    },
-  },
-  methods: {
-    /**
-     * 調整遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeMask(chart) {
-      const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);
-      const to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01);
-      if(this.selectValue[0] === 'Timeframes') {
-        this.resizeLeftMask(chart, from);
-        this.resizeRightMask(chart, to);
-      }
-    },
-    /**
-     * 調整左邊遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeLeftMask(chart, from) {
-      const canvas = document.getElementById("chartCanvasId");
-      const mask = document.getElementById("chart-mask-left");
-      mask.style.left = `${canvas.offsetLeft + chart.chartArea.left}px`;
-      mask.style.width = `${chart.chartArea.width * from}px`;
-      mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
-      mask.style.height = `${chart.chartArea.height}px`;
-    },
-    /**
-     * 調整右邊遮罩大小
-     * @param {object} chart 取得 chart.js 資料
-     */
-    resizeRightMask(chart, to) {
-      const canvas = document.getElementById("chartCanvasId");
-      const mask = document.getElementById("chart-mask-right");
-      mask.style.left = `${canvas.offsetLeft + chart.chartArea.left + chart.chartArea.width * to}px`;
-      mask.style.width = `${chart.chartArea.width * (1 - to)}px`;
-      mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
-      mask.style.height = `${chart.chartArea.height}px`;
-    },
-    /**
-     * create chart
-     */
-    createChart() {
-      const max = this.filterTimeframe.y_axis.max * 1.1;
-      const minX = this.timeFrameData[0]?.x;
-      const maxX = this.timeFrameData[this.timeFrameData.length - 1]?.x;
+// 加入最大、最小值
+const timeFrameData = computed(() => {
+  const data = filterTimeframe.value.data.map(i=>({x:i.x,y:i.y}))
+  // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
+  // x 值為 0 ~ 11,
+  // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
+  // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
+  // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
 
-      const data = {
-        labels:this.labelsData,
-        datasets: [
-          {
-            label: 'Case',
-            data: this.timeFrameData,
-            fill: 'start',
-            showLine: false,
-            tension: 0.4,
-            backgroundColor: 'rgba(0,153,255)',
-            pointRadius: 0,
-            x: 'x',
-            y: 'y',
-          }
-        ]
-      };
-      const options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          filler: {
-            propagate: false
-          },
-          title: false
-        },
-        // animations: false, // 取消動畫
-        animation: {
-          onComplete: e => {
-            this.resizeMask(e.chart);
-          }
-        },
-        interaction: {
-          intersect: true,
-        },
-        scales: {
-          x: {
-            type: 'time',
-            min: minX,
-            max: maxX,
-            ticks: {
-              autoSkip: true,
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#334155',
-              display: true,
-              source: 'labels',
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-            time: {
-              minUnit: 'day', // 顯示最小單位
-              // displayFormats: {
-              //   minute: 'HH:mm MMM d',
-              //   hour: 'HH:mm MMM d',
-              // }
-            }
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            max: max,
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              stepSize: max / 4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              z: 1,
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            }
-          },
-        },
-      };
-      const config =  {
-        type: 'line',
-        data: data,
-        options: options,
-      };
-      this.canvasId = document.getElementById("chartCanvasId");
-      this.chart = new Chart(this.canvasId, config);
-    },
-    /**
-     * 滑塊改變的時候
-     * @param {array} e [1, 100]
-     */
-    changeSelectArea(e) {
-      // 日曆改變時，滑塊跟著改變
-      const sliderData = this.sliderData;
-      const start = sliderData[e[0].toFixed()];
-      const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+  // y 軸最小值
+  const a = 0;
+  let b;
+  const c = 1;
+  const d = filterTimeframe.value.data[0].y;
+  const e = 2;
+  const f = filterTimeframe.value.data[1].y;
+  b = (e*d - a*d - f*a - f*c) / (e - c - a);
+  if(b < 0) {
+    b = 0;
+  }
+  // y 軸最大值
+  const ma = 9;
+  const mb = filterTimeframe.value.data[8].y;
+  const mc = 10;
+  const md = filterTimeframe.value.data[9].y;
+  const me = 11;
+  let mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
+  if(mf < 0) {
+    mf = 0;
+  }
 
-      this.startTime = new Date(start);
-      this.endTime = new Date(end);
-      // 重新設定 start end 日曆選取範圍
-      this.endMinDate = new Date(start);
-      this.startMaxDate = new Date(end);
-      // 重新算圖
-      this.resizeMask(this.chart);
-      // 執行 timeFrameStartEnd 才會改變數據
-      this.timeFrameStartEnd();
-    },
-    /**
-     * 選取開始或結束時間時，要改變滑塊跟圖表
-     * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間)
-     * @param {string} direction start or end
-     */
-    sliderTimeRange(e, direction) {
-      // 找到最鄰近的 index，時間格式: 毫秒時間戳
-      const sliderData = this.sliderData;
-      const targetTime = [new Date(this.timeFrameStartEnd[0]).getTime(), new Date(this.timeFrameStartEnd[1]).getTime()];
-      const closestIndexes = targetTime.map(target => {
-        let closestIndex = 0;
-        closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
-        let result = Math.round(Math.abs(closestIndex));
-        result = result > this.selectRange ? this.selectRange : result;
-        return result
-      });
+  // 添加最小值
+  data.unshift({
+    x: filterTimeframe.value.x_axis.min_base,
+    y: b,
+  })
+  // 添加最大值
+  data.push({
+    x: filterTimeframe.value.x_axis.max_base,
+    y: mf,
+  })
 
-      // 改變滑塊
-      this.selectArea = closestIndexes;
-      // 重新設定 start end 日曆選取範圍
-      if(direction === 'start') this.endMinDate = e;
-      else if(direction === 'end') this.startMaxDate = e;
-      // 重新算圖
-      if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chart);
-      else return;
-    },
-  },
-  mounted() {
-    // Chart.js
-    Chart.register(...registerables);
-    this.createChart();
-    // Slider
-    this.selectArea = [0, this.selectRange];
-    // Calendar
-    this.startMinDate = new Date(this.filterTimeframe.x_axis.min);
-    this.startMaxDate = new Date(this.filterTimeframe.x_axis.max);
-    this.endMinDate = new Date(this.filterTimeframe.x_axis.min);
-    this.endMaxDate = new Date(this.filterTimeframe.x_axis.max);
-    // 讓日曆的範圍等於時間軸的範圍
-    this.startTime = this.startMinDate;
-    this.endTime = this.startMaxDate;
-    this.timeFrameStartEnd();
-  },
+  return data;
+});
+
+const labelsData = computed(() => {
+  const min = new Date(filterTimeframe.value.x_axis.min_base).getTime();
+  const max = new Date(filterTimeframe.value.x_axis.max_base).getTime();
+  const numPoints = 11;
+  const step = (max - min) / (numPoints - 1);
+  const data = [];
+  for(let i = 0; i< numPoints; i++) {
+    const x = min + i * step;
+    data.push(x);
+  }
+  return data;
+});
+
+watch(selectTimeFrame, (newValue, oldValue) => {
+  if(newValue.length === 0) {
+    startTime.value = new Date(filterTimeframe.value.x_axis.min);
+    endTime.value = new Date(filterTimeframe.value.x_axis.max);
+    selectArea.value = [0, selectRange.value];
+    resizeMask(chart.value);
+  }
+});
+
+/**
+ * 調整遮罩大小
+ * @param {object} chartInstance 取得 chart.js 資料
+ */
+function resizeMask(chartInstance) {
+  const from = (selectArea.value[0] * 0.01) / (selectRange.value * 0.01);
+  const to = (selectArea.value[1] * 0.01) / (selectRange.value * 0.01);
+  if(props.selectValue[0] === 'Timeframes') {
+    resizeLeftMask(chartInstance, from);
+    resizeRightMask(chartInstance, to);
+  }
 }
+
+/**
+ * 調整左邊遮罩大小
+ * @param {object} chartInstance 取得 chart.js 資料
+ */
+function resizeLeftMask(chartInstance, from) {
+  const canvas = document.getElementById("chartCanvasId");
+  const mask = document.getElementById("chart-mask-left");
+  mask.style.left = `${canvas.offsetLeft + chartInstance.chartArea.left}px`;
+  mask.style.width = `${chartInstance.chartArea.width * from}px`;
+  mask.style.top = `${canvas.offsetTop + chartInstance.chartArea.top}px`;
+  mask.style.height = `${chartInstance.chartArea.height}px`;
+}
+
+/**
+ * 調整右邊遮罩大小
+ * @param {object} chartInstance 取得 chart.js 資料
+ */
+function resizeRightMask(chartInstance, to) {
+  const canvas = document.getElementById("chartCanvasId");
+  const mask = document.getElementById("chart-mask-right");
+  mask.style.left = `${canvas.offsetLeft + chartInstance.chartArea.left + chartInstance.chartArea.width * to}px`;
+  mask.style.width = `${chartInstance.chartArea.width * (1 - to)}px`;
+  mask.style.top = `${canvas.offsetTop + chartInstance.chartArea.top}px`;
+  mask.style.height = `${chartInstance.chartArea.height}px`;
+}
+
+/**
+ * create chart
+ */
+function createChart() {
+  const max = filterTimeframe.value.y_axis.max * 1.1;
+  const minX = timeFrameData.value[0]?.x;
+  const maxX = timeFrameData.value[timeFrameData.value.length - 1]?.x;
+
+  const data = {
+    labels:labelsData.value,
+    datasets: [
+      {
+        label: 'Case',
+        data: timeFrameData.value,
+        fill: 'start',
+        showLine: false,
+        tension: 0.4,
+        backgroundColor: 'rgba(0,153,255)',
+        pointRadius: 0,
+        x: 'x',
+        y: 'y',
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false, // 圖例
+      filler: {
+        propagate: false
+      },
+      title: false
+    },
+    // animations: false, // 取消動畫
+    animation: {
+      onComplete: e => {
+        resizeMask(e.chart);
+      }
+    },
+    interaction: {
+      intersect: true,
+    },
+    scales: {
+      x: {
+        type: 'time',
+        min: minX,
+        max: maxX,
+        ticks: {
+          autoSkip: true,
+          maxRotation: 0, // 不旋轉 lable 0~50
+          color: '#334155',
+          display: true,
+          source: 'labels',
+        },
+        grid: {
+          display: false, // 隱藏 x 軸網格
+        },
+        time: {
+          minUnit: 'day', // 顯示最小單位
+          // displayFormats: {
+          //   minute: 'HH:mm MMM d',
+          //   hour: 'HH:mm MMM d',
+          // }
+        }
+      },
+      y: {
+        beginAtZero: true, // scale 包含 0
+        max: max,
+        ticks: { // 設定間隔數值
+          display: false, // 隱藏數值，只顯示格線
+          stepSize: max / 4,
+        },
+        grid: {
+          color: 'rgba(100,116,139)',
+          z: 1,
+        },
+        border: {
+          display: false, // 隱藏左側多出來的線
+        }
+      },
+    },
+  };
+  const config =  {
+    type: 'line',
+    data: data,
+    options: options,
+  };
+  canvasId.value = document.getElementById("chartCanvasId");
+  chart.value = new Chart(canvasId.value, config);
+}
+
+/**
+ * 滑塊改變的時候
+ * @param {array} e [1, 100]
+ */
+function changeSelectArea(e) {
+  // 日曆改變時，滑塊跟著改變
+  const sliderDataVal = sliderData.value;
+  const start = sliderDataVal[e[0].toFixed()];
+  const end = sliderDataVal[e[1].toFixed()]; // 取得 index，須為整數。
+
+  startTime.value = new Date(start);
+  endTime.value = new Date(end);
+  // 重新設定 start end 日曆選取範圍
+  endMinDate.value = new Date(start);
+  startMaxDate.value = new Date(end);
+  // 重新算圖
+  resizeMask(chart.value);
+  // 執行 timeFrameStartEnd 才會改變數據
+  timeFrameStartEnd.value;
+}
+
+/**
+ * 選取開始或結束時間時，要改變滑塊跟圖表
+ * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間)
+ * @param {string} direction start or end
+ */
+function sliderTimeRange(e, direction) {
+  // 找到最鄰近的 index，時間格式: 毫秒時間戳
+  const sliderDataVal = sliderData.value;
+  const targetTime = [new Date(timeFrameStartEnd.value[0]).getTime(), new Date(timeFrameStartEnd.value[1]).getTime()];
+  const closestIndexes = targetTime.map(target => {
+    let closestIndex = 0;
+    closestIndex = ((target - sliderDataVal[0])/(sliderDataVal[sliderDataVal.length-1]-sliderDataVal[0])) * sliderDataVal.length;
+    let result = Math.round(Math.abs(closestIndex));
+    result = result > selectRange.value ? selectRange.value : result;
+    return result
+  });
+
+  // 改變滑塊
+  selectArea.value = closestIndexes;
+  // 重新設定 start end 日曆選取範圍
+  if(direction === 'start') endMinDate.value = e;
+  else if(direction === 'end') startMaxDate.value = e;
+  // 重新算圖
+  if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) resizeMask(chart.value);
+  else return;
+}
+
+onMounted(() => {
+  // Chart.js
+  Chart.register(...registerables);
+  createChart();
+  // Slider
+  selectArea.value = [0, selectRange.value];
+  // Calendar
+  startMinDate.value = new Date(filterTimeframe.value.x_axis.min);
+  startMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
+  endMinDate.value = new Date(filterTimeframe.value.x_axis.min);
+  endMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
+  // 讓日曆的範圍等於時間軸的範圍
+  startTime.value = startMinDate.value;
+  endTime.value = startMaxDate.value;
+  timeFrameStartEnd.value;
+});
 </script>
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index 231194c..48d99bf 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -48,7 +48,7 @@
       <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
       <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
         <div class="h-full w-full">
-          <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
+          <div id="cyTrace" ref="cyTraceRef" class="h-full min-w-full relative"></div>
         </div>
       </div>
       <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
@@ -68,293 +68,303 @@
 </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { useLoadingStore } from '@/stores/loading';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
-export default {
-  expose: ['selectArea', 'showTraceId', 'traceTotal'],
-  setup() {
-    const allMapDataStore = useAllMapDataStore();
-    const loadingStore = useLoadingStore();
-    const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
-    const { isLoading } = storeToRefs(loadingStore);
+const emit = defineEmits(['filter-trace-selectArea']);
 
-    return {allMapDataStore, infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases, isLoading}
-  },
-  data() {
+const allMapDataStore = useAllMapDataStore();
+const loadingStore = useLoadingStore();
+const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
+const { isLoading } = storeToRefs(loadingStore);
+
+const processMap = ref({
+  nodes:[],
+  edges:[],
+});
+const showTraceId = ref(null);
+const infinitMaxItems = ref(false);
+const infiniteData = ref([]);
+const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const chartOptions = ref(null);
+const selectArea = ref([0, 1]);
+const cyTraceRef = ref(null);
+
+const traceTotal = computed(() => {
+  return baseTraces.value.length;
+});
+
+defineExpose({ selectArea, showTraceId, traceTotal });
+
+const traceCountTotal = computed(() => {
+  return baseTraces.value.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+});
+
+const traceList = computed(() => {
+  return baseTraces.value.map(trace => {
     return {
-      processMap:{
-        nodes:[],
-        edges:[],
-      },
-      showTraceId: null,
-      infinitMaxItems: false,
-      infiniteData: [],
-      infiniteFinish: true, // 無限滾動是否載入完成
-      chartOptions: null,
-      selectArea: [0, 1]
-    }
-  },
-  computed: {
-    traceTotal: function() {
-      return this.baseTraces.length;
-    },
-    traceCountTotal: function() {
-      return this.baseTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-    },
-    traceList: function() {
-      return this.baseTraces.map(trace => {
-        return {
-          id: trace.id,
-          value: this.progressWidth(Number(((trace.count / this.traceCountTotal) * 100).toFixed(1))),
-          count: trace.count.toLocaleString(),
-          base_count: trace.count,
-          ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
-        };
-      }).slice(this.selectArea[0], this.selectArea[1]);
-    },
-    caseTotalPercent: function() {
-      const ratioSum = this.traceList.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal;
-      return this.getPercentLabel(ratioSum)
-    },
-    chartData: function() {
-      const start = this.selectArea[0];
-      const end = this.selectArea[1] - 1;
-      const labels = this.baseTraces.map(trace => `#${trace.id}`);
-      const data = this.baseTraces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
-      const selectAreaData = this.baseTraces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+      id: trace.id,
+      value: progressWidth(Number(((trace.count / traceCountTotal.value) * 100).toFixed(1))),
+      count: trace.count.toLocaleString(),
+      base_count: trace.count,
+      ratio: getPercentLabel(trace.count / traceCountTotal.value),
+    };
+  }).slice(selectArea.value[0], selectArea.value[1]);
+});
 
-      return { // 要呈現的資料
-        labels,
-        datasets: [
-          {
-            label: 'Trace', // 資料的標題標籤
-            data,
-            backgroundColor: selectAreaData,
-            categoryPercentage: 1.0,
-            barPercentage: 1.0
-          },
-        ]
-      };
-    },
-    caseData: function() {
-      const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
-      data.forEach(item => {
-        item.attributes.forEach((attribute, index) => {
-          item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
-        });
-        delete item.attributes; // 刪除原本的 attributes 屬性
-      })
-      return data;
-    },
-    columnData: function() {
-      const data = JSON.parse(JSON.stringify(this.baseCases)); // 深拷貝原始 cases 的內容
-      let result = [
-          { field: 'id', header: 'Case Id' },
-          { field: 'started_at', header: 'Start time' },
-          { field: 'completed_at', header: 'End time' },
-        ];
-      if(data.length !== 0){
-        result = [
-          { field: 'id', header: 'Case Id' },
-          { field: 'started_at', header: 'Start time' },
-          { field: 'completed_at', header: 'End time' },
-          ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
-        ];
+const caseTotalPercent = computed(() => {
+  const ratioSum = traceList.value.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / traceCountTotal.value;
+  return getPercentLabel(ratioSum)
+});
+
+const chartData = computed(() => {
+  const start = selectArea.value[0];
+  const end = selectArea.value[1] - 1;
+  const labels = baseTraces.value.map(trace => `#${trace.id}`);
+  const data = baseTraces.value.map(trace => getPercentLabel(trace.count / traceCountTotal.value));
+  const selectAreaData = baseTraces.value.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+
+  return { // 要呈現的資料
+    labels,
+    datasets: [
+      {
+        label: 'Trace', // 資料的標題標籤
+        data,
+        backgroundColor: selectAreaData,
+        categoryPercentage: 1.0,
+        barPercentage: 1.0
+      },
+    ]
+  };
+});
+
+const caseData = computed(() => {
+  const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+  data.forEach(item => {
+    item.attributes.forEach((attribute, index) => {
+      item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+    });
+    delete item.attributes; // 刪除原本的 attributes 屬性
+  })
+  return data;
+});
+
+const columnData = computed(() => {
+  const data = JSON.parse(JSON.stringify(baseCases.value)); // 深拷貝原始 cases 的內容
+  let result = [
+      { field: 'id', header: 'Case Id' },
+      { field: 'started_at', header: 'Start time' },
+      { field: 'completed_at', header: 'End time' },
+    ];
+  if(data.length !== 0){
+    result = [
+      { field: 'id', header: 'Case Id' },
+      { field: 'started_at', header: 'Start time' },
+      { field: 'completed_at', header: 'End time' },
+      ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
+    ];
+  }
+  return result
+});
+
+watch(selectArea, (newValue, oldValue) => {
+  const roundValue = Math.round(newValue[1].toFixed());
+  if(newValue[1] !== roundValue) selectArea.value[1] = roundValue;
+  if(newValue != oldValue) emit('filter-trace-selectArea', newValue); // 判斷 Apply 是否 disable
+});
+
+watch(infinit404, (newValue) => {
+  if(newValue === 404) infinitMaxItems.value = true;
+});
+
+watch(showTraceId, (newValue, oldValue) => {
+  const isScrollTop = document.querySelector('.infiniteTable');
+  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+});
+
+/**
+ * Set bar chart Options
+ */
+function barOptions(){
+  return {
+    maintainAspectRatio: false,
+    aspectRatio: 0.8,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
       }
-      return result
     },
-  },
-  watch: {
-    selectArea: function(newValue, oldValue) {
-      const roundValue = Math.round(newValue[1].toFixed());
-      if(newValue[1] !== roundValue) this.selectArea[1] = roundValue;
-      if(newValue != oldValue) this.$emit('filter-trace-selectArea', newValue); // 判斷 Apply 是否 disable
-    },
-    infinite404: function(newValue) {
-      if(newValue === 404) this.infinitMaxItems = true;
-    },
-    showTraceId: function(newValue, oldValue) {
-      const isScrollTop = document.querySelector('.infiniteTable');
-      if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
-    },
-  },
-  methods: {
-    /**
-     * Set bar chart Options
-     */
-    barOptions(){
-      return {
-        maintainAspectRatio: false,
-        aspectRatio: 0.8,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: { // 圖例
-            display: false,
-          },
-          tooltip: {
-            callbacks: {
-              label: (tooltipItems) =>{
-                return `${tooltipItems.dataset.label}: ${tooltipItems.parsed.y}%`
-              }
-            }
-          }
-        },
-        animations: false,
-        scales: {
-          x: {
-            display:false
-          },
-          y: {
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              min: 0,
-              max: this.traceList[0]?.ratio,
-              stepSize: (this.traceList[0]?.ratio)/4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              z: 1,
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            }
+    plugins: {
+      legend: { // 圖例
+        display: false,
+      },
+      tooltip: {
+        callbacks: {
+          label: (tooltipItems) =>{
+            return `${tooltipItems.dataset.label}: ${tooltipItems.parsed.y}%`
           }
         }
-      };
+      }
     },
-    /**
-     * 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));
-    },
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-     progressWidth(value){
-      return `width:${value}%;`
-    },
-    /**
-     * switch case data
-     * @param {number} id case id
-     * @param {number} count 所有的 case 數量
-     */
-     async switchCaseData(id, count) {
-      // 點同一筆 id 不要有動作
-      if(id == this.showTraceId) return;
-      this.isLoading = true; // 都要 loading 畫面
-      this.infinit404 = null;
-      this.infinitMaxItems = false;
-      this.baseInfiniteStart = 0;
-      this.allMapDataStore.baseTraceId = id;
-      this.infiniteData = await this.allMapDataStore.getBaseTraceDetail();
-      this.showTraceId = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
-      this.createCy();
-      this.isLoading = false;
-    },
-    /**
-     * 將 trace element nodes 資料彙整
-     */
-     setNodesData(){
-      // 避免每次渲染都重複累加
-      this.processMap.nodes = [];
-      // 將 api call 回來的資料帶進 node
-      this.baseTraceTaskSeq.forEach((node, index) => {
-        this.processMap.nodes.push({
-          data: {
-            id: index,
-            label: node,
-            backgroundColor: '#CCE5FF',
-            bordercolor: '#003366',
-            shape: 'round-rectangle',
-            height: 80,
-            width: 100
-          }
-        });
-      })
-    },
-    /**
-     * 將 trace edge line 資料彙整
-     */
-    setEdgesData(){
-      this.processMap.edges = [];
-      this.baseTraceTaskSeq.forEach((edge, index) => {
-        this.processMap.edges.push({
-          data: {
-            source: `${index}`,
-            target: `${index + 1}`,
-            lineWidth: 1,
-            style: 'solid'
-          }
-        });
-      });
-      // 關係線數量筆節點少一個
-      this.processMap.edges.pop();
-    },
-    /**
-     * create trace cytoscape's map
-     */
-     createCy(){
-      const graphId = this.$refs.cyTrace;
-
-      this.setNodesData();
-      this.setEdgesData();
-      cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
-    },
-    /**
-     * 無限滾動: 監聽 scroll 有沒有滾到底部
-     * @param {element} event 滾動傳入的事件
-     */
-     handleScroll(event) {
-      if(this.infinitMaxItems || this.baseCases.length < 20 || this.infiniteFinish === false) return;
-
-      const container = event.target;
-      const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
-
-      if(overScrollHeight) this.fetchData();
-    },
-    /**
-     * 無限滾動: 滾到底後，要載入數據
-     */
-    async fetchData() {
-      try {
-        this.isLoading = true;
-        this.infiniteFinish = false;
-        this.baseInfiniteStart += 20;
-        await this.allMapDataStore.getBaseTraceDetail();
-        this.infiniteData = await [...this.infiniteData, ...this.baseCases];
-        this.infiniteFinish = await true;
-        this.isLoading = await false;
-      } catch(error) {
-        console.error('Failed to load data:', error);
+    animations: false,
+    scales: {
+      x: {
+        display:false
+      },
+      y: {
+        ticks: { // 設定間隔數值
+          display: false, // 隱藏數值，只顯示格線
+          min: 0,
+          max: traceList.value[0]?.ratio,
+          stepSize: (traceList.value[0]?.ratio)/4,
+        },
+        grid: {
+          color: 'rgba(100,116,139)',
+          z: 1,
+        },
+        border: {
+          display: false, // 隱藏左側多出來的線
+        }
       }
     }
-  },
-  mounted() {
-    this.isLoading = true; // createCy 執行完關閉
-    this.setNodesData();
-    this.setEdgesData();
-    this.createCy();
-    this.chartOptions = this.barOptions();
-    this.selectArea = [0, this.traceTotal]
-    this.isLoading = false;
-  },
+  };
 }
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return 100;
+  else return parseFloat((val * 100).toFixed(1));
+}
+
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+function progressWidth(value){
+  return `width:${value}%;`
+}
+
+/**
+ * switch case data
+ * @param {number} id case id
+ * @param {number} count 所有的 case 數量
+ */
+async function switchCaseData(id, count) {
+  // 點同一筆 id 不要有動作
+  if(id == showTraceId.value) return;
+  isLoading.value = true; // 都要 loading 畫面
+  infinit404.value = null;
+  infinitMaxItems.value = false;
+  baseInfiniteStart.value = 0;
+  allMapDataStore.baseTraceId = id;
+  infiniteData.value = await allMapDataStore.getBaseTraceDetail();
+  showTraceId.value = id; // 放 getDetail 為了 case table 載入完再切換 showTraceId
+  createCy();
+  isLoading.value = false;
+}
+
+/**
+ * 將 trace element nodes 資料彙整
+ */
+function setNodesData(){
+  // 避免每次渲染都重複累加
+  processMap.value.nodes = [];
+  // 將 api call 回來的資料帶進 node
+  baseTraceTaskSeq.value.forEach((node, index) => {
+    processMap.value.nodes.push({
+      data: {
+        id: index,
+        label: node,
+        backgroundColor: '#CCE5FF',
+        bordercolor: '#003366',
+        shape: 'round-rectangle',
+        height: 80,
+        width: 100
+      }
+    });
+  })
+}
+
+/**
+ * 將 trace edge line 資料彙整
+ */
+function setEdgesData(){
+  processMap.value.edges = [];
+  baseTraceTaskSeq.value.forEach((edge, index) => {
+    processMap.value.edges.push({
+      data: {
+        source: `${index}`,
+        target: `${index + 1}`,
+        lineWidth: 1,
+        style: 'solid'
+      }
+    });
+  });
+  // 關係線數量筆節點少一個
+  processMap.value.edges.pop();
+}
+
+/**
+ * create trace cytoscape's map
+ */
+function createCy(){
+  const graphId = cyTraceRef.value;
+
+  setNodesData();
+  setEdgesData();
+  cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+}
+
+/**
+ * 無限滾動: 監聽 scroll 有沒有滾到底部
+ * @param {element} event 滾動傳入的事件
+ */
+function handleScroll(event) {
+  if(infinitMaxItems.value || baseCases.value.length < 20 || infiniteFinish.value === false) return;
+
+  const container = event.target;
+  const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
+
+  if(overScrollHeight) fetchData();
+}
+
+/**
+ * 無限滾動: 滾到底後，要載入數據
+ */
+async function fetchData() {
+  try {
+    isLoading.value = true;
+    infiniteFinish.value = false;
+    baseInfiniteStart.value += 20;
+    await allMapDataStore.getBaseTraceDetail();
+    infiniteData.value = await [...infiniteData.value, ...baseCases.value];
+    infiniteFinish.value = await true;
+    isLoading.value = await false;
+  } catch(error) {
+    console.error('Failed to load data:', error);
+  }
+}
+
+onMounted(() => {
+  isLoading.value = true; // createCy 執行完關閉
+  setNodesData();
+  setEdgesData();
+  createCy();
+  chartOptions.value = barOptions();
+  selectArea.value = [0, traceTotal.value]
+  isLoading.value = false;
+});
 </script>
 
 <style scoped>
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 59acfd1..32289a8 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -79,7 +79,7 @@
           <!-- title: Attributes -->
           <Attributes v-if="selectValue[0] === 'Attributes'" @select-attribute="getSelectAttribute"></Attributes>
           <!-- title: Trace -->
-          <Trace v-if="selectValue[0] === 'Trace'" ref="filterTraceView" @filter-trace-selectArea="selectTraceArea = $event"></Trace>
+          <Trace v-if="selectValue[0] === 'Trace'" ref="filterTraceViewRef" @filter-trace-selectArea="selectTraceArea = $event"></Trace>
           <!-- title: Timeframes -->
           <Timeframes v-if="selectValue[0] === 'Timeframes'" :selectValue="selectValue"></Timeframes>
         </div>
@@ -87,7 +87,7 @@
         <!-- Button -->
         <div class="float-right space-x-4 px-4 py-2">
           <button type="button"  class="btn btn-sm btn-neutral" @click="reset">Clear</button>
-          <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabledButton" :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'">Apply</button>
+          <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabledButton" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Apply</button>
         </div>
       </div>
     </div>
@@ -96,8 +96,10 @@
   </Sidebar>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useToast } from 'vue-toast-notification';
 import { useLoadingStore } from '@/stores/loading';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import ActOccCase from '@/components/Discover/Map/Filter/ActOccCase.vue';
@@ -107,601 +109,626 @@ import Attributes from '@/components/Discover/Map/Filter/Attributes.vue';
 import Funnel from '@/components/Discover/Map/Filter/Funnel.vue';
 import Trace from '@/components/Discover/Map/Filter/Trace.vue';
 import Timeframes from '@/components/Discover/Map/Filter/Timeframes.vue';
+import emitter from '@/utils/emitter';
 import getMoment from 'moment';
 
-export default {
-  props: ['sidebarFilter', 'filterTasks', 'filterStartToEnd', 'filterEndToStart', 'filterTimeframe', 'filterTrace'],
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, selectTimeFrame } = storeToRefs(allMapDataStore);
+const props = defineProps(['sidebarFilter', 'filterTasks', 'filterStartToEnd', 'filterEndToStart', 'filterTimeframe', 'filterTrace']);
+const emit = defineEmits(['submit-all']);
+const $toast = useToast();
 
-    return { isLoading, hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, allMapDataStore, selectTimeFrame }
-  },
-  data() {
-    return {
-      selectFilter: {
-        'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
-        // 'Filter Type': ['Sequence', 'Trace', 'Timeframes'],
-        'Activity Sequence':['Have activity(s)', 'Start & End', 'Sequence'],
-        'Start & End': ['Start', 'End', 'Start & End'],
-        'Mode': ['Directly follows', 'Eventually follows'],
-        'ModeAtt': ['Case', 'Activity'],
-        'Refine': ['Include', 'Exclude'],
-        'Containment': ['Contained in', 'Started in', 'Ended in', 'Active in'],
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, selectTimeFrame } = storeToRefs(allMapDataStore);
+
+const selectFilter = {
+  'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
+  // 'Filter Type': ['Sequence', 'Trace', 'Timeframes'],
+  'Activity Sequence':['Have activity(s)', 'Start & End', 'Sequence'],
+  'Start & End': ['Start', 'End', 'Start & End'],
+  'Mode': ['Directly follows', 'Eventually follows'],
+  'ModeAtt': ['Case', 'Activity'],
+  'Refine': ['Include', 'Exclude'],
+  'Containment': ['Contained in', 'Started in', 'Ended in', 'Active in'],
+};
+const tab = ref('filter'); // filter | funnel
+const selectValue = reactive({
+  0: 'Sequence',
+  1: 'Have activity(s)',
+  2: 'Start',
+  3: 'Directly follows',
+  4: 'Case',
+  5: 'Include',
+  6: 'Contained in',
+});
+const selectFilterTask = ref(null);
+const selectAttType = ref('');
+const selectAttribute = ref(null);
+const selectFilterStart = ref(null);
+const selectFilterEnd = ref(null);
+const selectFilterStartToEnd = ref(null);
+const selectFilterEndToStart = ref(null);
+const listSeq = ref([]);
+//若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
+const isStartSelected = ref(null);
+const isEndSelected = ref(null);
+const isActAllTask = ref(true);
+const rowData = ref([]);
+const selectTraceArea = ref([]); // Trace 滑快
+const isDisabled = ref(true); // Apply Button disabled setting
+const filterTraceViewRef = ref(null);
+const tooltip = {
+  containment: {
+    value: '<img src="/filterContainment.png" alt="filterContainment" class="block" width="108" height="250">',
+    escape: false,
+    autoHide: false,
+    pt: {
+      root: {
+        class: 'bg-transparent'
       },
-      tab: 'filter', // filter | funnel
-      selectValue: {
-        0: 'Sequence',
-        1: 'Have activity(s)',
-        2: 'Start',
-        3: 'Directly follows',
-        4: 'Case',
-        5: 'Include',
-        6: 'Contained in',
-      },
-      selectFilterTask: null,
-      selectAttType: '',
-      selectAttribute: null,
-      selectFilterStart: null,
-      selectFilterEnd: null,
-      selectFilterStartToEnd: null,
-      selectFilterEndToStart: null,
-      listSeq: [],
-      //若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
-      isStartSelected: null,
-      isEndSelected: null,
-      isActAllTask: true,
-      rowData: [],
-      selectTraceArea: [], // Trace 滑快
-      isDisabled: true, // Apply Button disabled setting
-      tooltip: {
-        containment: {
-          value: '<img src="/filterContainment.png" alt="filterContainment" class="block" width="108" height="250">',
-          escape: false,
-          autoHide: false,
-          pt: {
-            root: {
-              class: 'bg-transparent'
-            },
-            arrow: {
-              class: 'hidden'
-            },
-            text: {
-              class: 'p-0 bg-transparent'
-            }
-          }
-        }
+      arrow: {
+        class: 'hidden'
       },
+      text: {
+        class: 'p-0 bg-transparent'
+      }
     }
   },
-  components: {
-    ActOccCase,
-    ActOcc,
-    ActAndSeq,
-    Attributes,
-    Funnel,
-    Trace,
-    Timeframes,
-  },
-  computed: {
-    // All Task
-    filterAllTaskData: function() {
-      return this.setHaveAct([...this.filterTasks]);
-    },
-    // Act And Seq
-    filterTaskData: function() {
-      return this.isActAllTask? this.setHaveAct([...this.filterTasks]) : this.filterTaskData;
-    },
-    // Start and End Task
-    filterStartData: function() {
-      return this.setActData(this.filterStartToEnd);
-    },
-    filterEndData: function() {
-      return this.setActData(this.filterEndToStart);
-    },
-    filterStartToEndData: function() {
-      return this.isEndSelected ? this.setStartAndEndData(this.filterEndToStart, this.rowData, 'sources') : this.setActData(this.filterStartToEnd);
-    },
-    filterEndToStartData: function() {
-      return this.isStartSelected ? this.setStartAndEndData(this.filterStartToEnd, this.rowData, 'sinks') : this.setActData(this.filterEndToStart);
-    },
-    // Apply Button disabled setting
-    isDisabledButton: function() {
-      let disabled = true;
-      const { selectValue: sele, selectAttType: type } = this;
-      const firstSelection = sele[0];
-      
-      if (firstSelection === 'Sequence') {
-        disabled = this.handleSequenceSelection(sele);
-      } else if (firstSelection === 'Attributes') {
-        disabled = this.handleAttributesSelection(type);
-      } else if (firstSelection === 'Trace') {
-        disabled = this.handleTraceSelection();
-      } else if (firstSelection === 'Timeframes') {
-        disabled = this.handleTimeframesSelection();
-      }
+};
 
-      this.isDisabled = disabled;
-      return disabled;
-    },
-  },
-  methods: {
-    /**
-     * Change Radio Filter Type
-     */
-    radioFilterType() {
-      this.reset();
-    },
-    /**
-     * Change Radio Act Seq
-     */
-    radioActSeq() {
-      this.reset();
-    },
-    /**
-     * Change Radio Start And End
-     */
-    radioStartAndEnd() {
-      this.reset();
-    },
-    /**
-     * @param {string} switch Summary or Insight
-     */
-     switchTab(tab) {
-      this.tab = tab;
-    },
-    /**
-     * Number to percentage
-     * @param   {number} val 原始數字
-     * @returns {string}     轉換完成的百分比字串
-     */
-     getPercentLabel(val){
-      if((val * 100).toFixed(1) >= 100) return `100%`;
-      else return `${(val * 100).toFixed(1)}%`;
-    },
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-     progressWidth(value){
-      return `width:${value}%;`
-    },
-    //設定 Have activity(s) 內容
-    /**
-     * @param {array} data filterTaskData
-     */
-    setHaveAct(data){
-      return data.map(task => {
-        return {
-          label: task.label,
-          occ_value: Number(task.occurrence_ratio * 100),
-          occurrences: Number(task.occurrences).toLocaleString('en-US'),
-          occurrences_base: task.occurrences,
-          occurrence_ratio: this.getPercentLabel(task.occurrence_ratio),
-          case_value: Number(task.case_ratio * 100),
-          cases: task.cases.toLocaleString('en-US'),
-          cases_base: task.cases,
-          case_ratio: this.getPercentLabel(task.case_ratio),
-        };
-      }).sort((x, y) => y.occurrences_base - x.occurrences_base);
-    },
-    // 調整 filterStartData / filterEndData / filterStartToEndData / filterEndToStartData 的內容
-    /**
-     * @param {array} array filterStartToEnd / filterEndToStart，可傳入以上任一。
-     */
-    setActData(array) {
-      const list = [];
-      array.forEach((task, index) => {
-        const data = {
-          label: task.label,
-          occ_value: Number(task.occurrence_ratio * 100),
-          occurrences: task.occurrences.toLocaleString('en-US'),
-          occurrences_base: task.occurrences,
-          occurrence_ratio: this.getPercentLabel(task.occurrence_ratio),
-        };
-        list.push(data);
-      });
-      list.sort((x, y) => y.occurrences_base - x.occurrences_base)
-      return list;
-    },
-    /**
-     * @param {array} e select Attribute
-     */
-    getSelectAttribute(e){
-      this.selectAttType = e.type;
-      this.selectAttribute = e.data;
-    },
-    /**
-     * @param {array} select select Have activity(s) rows
-     */
-    onRowAct(select){
-      this.selectFilterTask = select;
-    },
-    /**
-     * @param {object} e select Start rows
-     */
-     onRowStart(e){
-      this.selectFilterStart = e.data;
-    },
-    /**
-     * @param {object} e select End rows
-     */
-     onRowEnd(e){
-      this.selectFilterEnd = e.data;
-    },
-    /**
-     * @param {array} listSeq Update List Seq
-     */
-     onUpdateListSeq(listSeq) {
-       this.listSeq = listSeq;
-       this.isActAllTask = false;
-     },
-    // 在 Start & End 若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
-    /**
-     * @param {object} e object contains selected row's data
-     */
-    startRow(e){
-      this.selectFilterStartToEnd = e.data;
-      if(this.isStartSelected === null || this.isStartSelected === true){
-        this.isStartSelected = true;
-        this.isEndSelected = false;
-        this.rowData = e.data;
-      }
-    },
-    /**
-     * @param {object} e object contains selected row's data
-     */
-    endRow(e) {
-      this.selectFilterEndToStart = e.data;
-      if(this.isEndSelected === null || this.isEndSelected === true){
-        this.isEndSelected = true;
-        this.isStartSelected = false;
-        this.rowData = e.data;
-      }
-    },
-    // 重新設定連動的 filterStartToEndData / filterEndToStartData 內容
-    /**
-     * @param {array} eventData  Start or End List
-     * @param {object} rowData 所選擇的 row's data
-     * @param {string} event sinks / sources
-     */
-    setStartAndEndData(eventData, rowData, event){
-      const filterData = event === 'sinks' ? this.filterEndToStart : this.filterStartToEnd;
-      const relatedItems = eventData
-        .find(task => task.label === rowData.label)
-        ?.[event]?.filter(item => filterData.some(ele => ele.label === item))
-        ?.map(item => filterData.find(ele => ele.label === item));
+// All Task
+const filterAllTaskData = computed(() => {
+  return setHaveAct([...props.filterTasks]);
+});
 
-      if (!relatedItems) return [];
-      return relatedItems.map(item => ({
-        label: item.label,
-        occ_value: Number(item.occurrence_ratio * 100),
-        occurrences: Number(item.occurrences).toLocaleString('en-US'),
-        occurrence_ratio: this.getPercentLabel(item.occurrence_ratio),
-      }));
-    },
-    /**
-     * @param {object} e task's object
-     */
-    setRule(e) {
-      let label, type;
-      const includeStr = e.is_exclude? "exclude" : "include";
-      const containmentMap = {
-        'occurred-in' : 'contained in',
-        'started-in' : 'started in',
-        'completed-in' : 'ended in',
-        'occurred-around' : 'active in'
-      };
+// Act And Seq
+const filterTaskData = computed(() => {
+  return isActAllTask.value? setHaveAct([...props.filterTasks]) : filterTaskData.value;
+});
 
-      switch(e.type) { //sonar-qube
-        case "contains-task":
-        case "starts-with":
-        case "ends-with":
-        case "directly-follows":
-        case "eventually-follows":
-            label = `${includeStr}, ${this.getTaskLabel(e)}`;
-            type = "Sequence";
-            break;
-        case "start-end":
-            label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`;
-            type = "Sequence";
-            break;
-        case "trace-freq":
-            label = `${includeStr}, from #${e.lower} to #${e.upper}`;
-            type = "Trace";
-            break;
-        case 'string-attr':
-        case 'boolean-attr':
-        case 'int-attr':
-        case 'float-attr':
-        case 'date-attr':
-            label = `${includeStr}, ${getAttributeLabel(e)}`;
-            type = "Attributes";
-            break;
-        case "occurred-in":
-        case "started-in":
-        case "completed-in":
-        case "occurred-around":
-            label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} `;
-            type = "Timeframe"
-            break;
-    };    
+// Start and End Task
+const filterStartData = computed(() => {
+  return setActData(props.filterStartToEnd);
+});
+
+const filterEndData = computed(() => {
+  return setActData(props.filterEndToStart);
+});
+
+const filterStartToEndData = computed(() => {
+  return isEndSelected.value ? setStartAndEndData(props.filterEndToStart, rowData.value, 'sources') : setActData(props.filterStartToEnd);
+});
+
+const filterEndToStartData = computed(() => {
+  return isStartSelected.value ? setStartAndEndData(props.filterStartToEnd, rowData.value, 'sinks') : setActData(props.filterEndToStart);
+});
+
+// Apply Button disabled setting
+const isDisabledButton = computed(() => {
+  let disabled = true;
+  const sele = selectValue;
+  const type = selectAttType.value;
+  const firstSelection = sele[0];
+
+  if (firstSelection === 'Sequence') {
+    disabled = handleSequenceSelection(sele);
+  } else if (firstSelection === 'Attributes') {
+    disabled = handleAttributesSelection(type);
+  } else if (firstSelection === 'Trace') {
+    disabled = handleTraceSelection();
+  } else if (firstSelection === 'Timeframes') {
+    disabled = handleTimeframesSelection();
+  }
+
+  isDisabled.value = disabled;
+  return disabled;
+});
+
+/**
+ * Change Radio Filter Type
+ */
+function radioFilterType() {
+  reset();
+}
+
+/**
+ * Change Radio Act Seq
+ */
+function radioActSeq() {
+  reset();
+}
+
+/**
+ * Change Radio Start And End
+ */
+function radioStartAndEnd() {
+  reset();
+}
+
+/**
+ * @param {string} switch Summary or Insight
+ */
+function switchTab(newTab) {
+  tab.value = newTab;
+}
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return `100%`;
+  else return `${(val * 100).toFixed(1)}%`;
+}
+
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+function progressWidth(value){
+  return `width:${value}%;`
+}
+
+//設定 Have activity(s) 內容
+/**
+ * @param {array} data filterTaskData
+ */
+function setHaveAct(data){
+  return data.map(task => {
+    return {
+      label: task.label,
+      occ_value: Number(task.occurrence_ratio * 100),
+      occurrences: Number(task.occurrences).toLocaleString('en-US'),
+      occurrences_base: task.occurrences,
+      occurrence_ratio: getPercentLabel(task.occurrence_ratio),
+      case_value: Number(task.case_ratio * 100),
+      cases: task.cases.toLocaleString('en-US'),
+      cases_base: task.cases,
+      case_ratio: getPercentLabel(task.case_ratio),
+    };
+  }).sort((x, y) => y.occurrences_base - x.occurrences_base);
+}
+
+// 調整 filterStartData / filterEndData / filterStartToEndData / filterEndToStartData 的內容
+/**
+ * @param {array} array filterStartToEnd / filterEndToStart，可傳入以上任一。
+ */
+function setActData(array) {
+  const list = [];
+  array.forEach((task, index) => {
+    const data = {
+      label: task.label,
+      occ_value: Number(task.occurrence_ratio * 100),
+      occurrences: task.occurrences.toLocaleString('en-US'),
+      occurrences_base: task.occurrences,
+      occurrence_ratio: getPercentLabel(task.occurrence_ratio),
+    };
+    list.push(data);
+  });
+  list.sort((x, y) => y.occurrences_base - x.occurrences_base)
+  return list;
+}
+
+/**
+ * @param {array} e select Attribute
+ */
+function getSelectAttribute(e){
+  selectAttType.value = e.type;
+  selectAttribute.value = e.data;
+}
+
+/**
+ * @param {array} select select Have activity(s) rows
+ */
+function onRowAct(select){
+  selectFilterTask.value = select;
+}
+
+/**
+ * @param {object} e select Start rows
+ */
+function onRowStart(e){
+  selectFilterStart.value = e.data;
+}
+
+/**
+ * @param {object} e select End rows
+ */
+function onRowEnd(e){
+  selectFilterEnd.value = e.data;
+}
+
+/**
+ * @param {array} newListSeq Update List Seq
+ */
+function onUpdateListSeq(newListSeq) {
+  listSeq.value = newListSeq;
+  isActAllTask.value = false;
+}
+
+// 在 Start & End 若第一次選擇 start, 則 end 連動改變，若第一次選擇 end, 則 start 連動改變
+/**
+ * @param {object} e object contains selected row's data
+ */
+function startRow(e){
+  selectFilterStartToEnd.value = e.data;
+  if(isStartSelected.value === null || isStartSelected.value === true){
+    isStartSelected.value = true;
+    isEndSelected.value = false;
+    rowData.value = e.data;
+  }
+}
+
+/**
+ * @param {object} e object contains selected row's data
+ */
+function endRow(e) {
+  selectFilterEndToStart.value = e.data;
+  if(isEndSelected.value === null || isEndSelected.value === true){
+    isEndSelected.value = true;
+    isStartSelected.value = false;
+    rowData.value = e.data;
+  }
+}
+
+// 重新設定連動的 filterStartToEndData / filterEndToStartData 內容
+/**
+ * @param {array} eventData  Start or End List
+ * @param {object} rowDataVal 所選擇的 row's data
+ * @param {string} event sinks / sources
+ */
+function setStartAndEndData(eventData, rowDataVal, event){
+  const filterData = event === 'sinks' ? props.filterEndToStart : props.filterStartToEnd;
+  const relatedItems = eventData
+    .find(task => task.label === rowDataVal.label)
+    ?.[event]?.filter(item => filterData.some(ele => ele.label === item))
+    ?.map(item => filterData.find(ele => ele.label === item));
+
+  if (!relatedItems) return [];
+  return relatedItems.map(item => ({
+    label: item.label,
+    occ_value: Number(item.occurrence_ratio * 100),
+    occurrences: Number(item.occurrences).toLocaleString('en-US'),
+    occurrence_ratio: getPercentLabel(item.occurrence_ratio),
+  }));
+}
+
+/**
+ * @param {object} e task's object
+ */
+function setRule(e) {
+  let label, type;
+  const includeStr = e.is_exclude? "exclude" : "include";
+  const containmentMap = {
+    'occurred-in' : 'contained in',
+    'started-in' : 'started in',
+    'completed-in' : 'ended in',
+    'occurred-around' : 'active in'
+  };
+
+  switch(e.type) { //sonar-qube
+    case "contains-task":
+    case "starts-with":
+    case "ends-with":
+    case "directly-follows":
+    case "eventually-follows":
+        label = `${includeStr}, ${getTaskLabel(e)}`;
+        type = "Sequence";
+        break;
+    case "start-end":
+        label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`;
+        type = "Sequence";
+        break;
+    case "trace-freq":
+        label = `${includeStr}, from #${e.lower} to #${e.upper}`;
+        type = "Trace";
+        break;
+    case 'string-attr':
+    case 'boolean-attr':
+    case 'int-attr':
+    case 'float-attr':
+    case 'date-attr':
+        label = `${includeStr}, ${getAttributeLabel(e)}`;
+        type = "Attributes";
+        break;
+    case "occurred-in":
+    case "started-in":
+    case "completed-in":
+    case "occurred-around":
+        label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} `;
+        type = "Timeframe"
+        break;
+  };
+  return {
+    type,
+    label,
+    toggle: true,
+  };
+}
+
+/**
+ * @param {boolean} message true | false 清空選項，可選以上任一。
+ */
+function reset(message) {
+  // Sequence
+  selectFilterTask.value = null;
+  selectFilterStart.value = null;
+  selectFilterEnd.value = null;
+  selectFilterStartToEnd.value = null;
+  selectFilterEndToStart.value = null;
+  listSeq.value = [];
+  isStartSelected.value = null;
+  isEndSelected.value = null;
+  isActAllTask.value = true;
+  // Attributes
+  selectAttType.value = '';
+  selectAttribute.value = null;
+  emitter.emit('map-filter-reset', true);
+  // Timeframes
+  selectTimeFrame.value = [];
+  // Trace
+  if (filterTraceViewRef.value) {
+    filterTraceViewRef.value.showTraceId = null;
+    filterTraceViewRef.value.selectArea = [0, filterTraceViewRef.value.traceTotal];
+  };
+  // 成功訊息
+  if(message) {
+    $toast.success('Filter cleared.')
+  }
+}
+
+/**
+ * header:Filter 發送選取的資料
+ */
+async function submit() {
+  isLoading.value = true;
+
+  const sele = selectValue;
+  const isExclude = sele[5] === 'Exclude';
+  const containmentMap = {
+    'Contained in': 'occurred-in',
+    'Started in': 'started-in',
+    'Ended in': 'completed-in',
+    'Active in': 'occurred-around'
+  };
+
+  const data = getFilterData(sele, isExclude, containmentMap);
+
+  const postData = Array.isArray(data) ? data : [data];
+
+  postRuleData.value = postData;
+  await allMapDataStore.checkHasResult();
+
+  if (hasResultRule.value === null) {
+    isLoading.value = false;
+  } else if (hasResultRule.value) {
+    updateRules(postData);
+    reset(false);
+    await delay(1000);
+    isLoading.value = false;
+    $toast.success('Filter applied. Go to Funnel to verify.');
+  } else {
+    reset(false);
+    await delay(1000);
+    isLoading.value = false;
+    $toast.warning('No result.');
+  }
+}
+
+/**
+ * create map
+ */
+function sumbitAll() {
+  emit('submit-all');
+}
+
+function handleSequenceSelection(sele) {
+  const secondSelection = sele[1];
+
+  switch (secondSelection) {
+    case 'Have activity(s)':
+      return !(selectFilterTask.value && selectFilterTask.value.length !== 0);
+    case 'Start & End':
+      return handleStartEndSelection(sele[2]);
+    case 'Sequence':
+      return listSeq.value.length < 2;
+    default:
+      return true;
+  }
+}
+
+function handleStartEndSelection(option) {
+  switch (option) {
+    case 'Start':
+      return !selectFilterStart.value;
+    case 'End':
+      return !selectFilterEnd.value;
+    case 'Start & End':
+      return !(selectFilterStartToEnd.value && selectFilterEndToStart.value);
+    default:
+      return true;
+  }
+}
+
+function handleAttributesSelection(type) {
+  switch (type) {
+    case 'string':
+      return !(selectAttribute.value && selectAttribute.value.length > 0);
+    case 'boolean':
+      return !(selectAttribute.value?.key && selectAttribute.value?.label);
+    case 'int':
+    case 'float':
+    case 'date':
+      return !(selectAttribute.value?.key && selectAttribute.value?.min !== null && selectAttribute.value?.max !== null);
+    default:
+      return true;
+  }
+}
+
+function handleTraceSelection() {
+  return selectTraceArea.value[0] === selectTraceArea.value[1];
+}
+
+function handleTimeframesSelection() {
+  return selectTimeFrame.value.length === 0;
+}
+
+function getTaskLabel(e) {
+  switch (e.type) {
+      case "contains-task":
+          return `${e.task}`;
+      case "starts-with":
+          return `start with ${e.task}`;
+      case "ends-with":
+          return `end with ${e.task}`;
+      case "directly-follows":
+      case "eventually-follows":
+          return `${e.type.replace('-', ' ')}, ${e.task_seq.join(' -> ')}`;
+  }
+}
+
+function getAttributeLabel(e) {
+  switch (e.type) {
+      case 'string-attr':
+          return `${e.key}, ${e.value}`;
+      case 'boolean-attr':
+          return `${e.key}, ${selectAttribute.value?.label}`;
+      case 'int-attr':
+      case 'float-attr':
+          return `${e.key}, from ${e.min} to ${e.max}`;
+      case 'date-attr':
+          return `${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`;
+  }
+}
+
+function getFilterData(sele, isExclude, containmentMap) {
+  switch (sele[0]) {
+    case 'Sequence':
+      return getSequenceData(sele, isExclude);
+    case 'Attributes':
+      return getAttributesData(isExclude);
+    case 'Trace':
+      return getTraceData(isExclude);
+    case 'Timeframes':
       return {
-        type,
-        label,
-        toggle: true,
-      };
-    },
-    /**
-     * @param {boolean} massage true | false 清空選項，可選以上任一。
-     */
-    reset(massage) {
-      // Sequence
-      this.selectFilterTask = null;
-      this.selectFilterStart = null;
-      this.selectFilterEnd = null;
-      this.selectFilterStartToEnd = null;
-      this.selectFilterEndToStart = null;
-      this.listSeq = [];
-      this.isStartSelected = null;
-      this.isEndSelected = null;
-      this.isActAllTask = true;
-      // Attributes
-      this.selectAttType = '';
-      this.selectAttribute = null;
-      this.$emitter.emit('map-filter-reset', true);
-      // Timeframes
-      this.selectTimeFrame = [];
-      // Trace
-      if (this.$refs.filterTraceView) {
-        this.$refs.filterTraceView.showTraceId = null;
-        this.$refs.filterTraceView.selectArea = [0, this.$refs.filterTraceView.traceTotal];
-      };
-      // 成功訊息
-      if(message) {
-        this.$toast.success('Filter cleared.')
-      }
-    },
-    /**
-     * header:Filter 發送選取的資料
-     */
-     async submit() {
-      this.isLoading = true;
-
-      const sele = this.selectValue;
-      const isExclude = sele[5] === 'Exclude';
-      const containmentMap = {
-        'Contained in': 'occurred-in',
-        'Started in': 'started-in',
-        'Ended in': 'completed-in',
-        'Active in': 'occurred-around'
-      };
-
-      const data = this.getFilterData(sele, isExclude, containmentMap);
-
-      const postData = Array.isArray(data) ? data : [data];
-
-      this.postRuleData = postData;
-      await this.allMapDataStore.checkHasResult();
-
-      if (this.hasResultRule === null) {
-        this.isLoading = false;
-      } else if (this.hasResultRule) {
-        this.updateRules(postData);
-        this.reset(false);
-        await this.delay(1000);
-        this.isLoading = false;
-        this.$toast.success('Filter applied. Go to Funnel to verify.');
-      } else {
-        this.reset(false);
-        await this.delay(1000);
-        this.isLoading = false;
-        this.$toast.warning('No result.');
-      }
-    },
-    /**
-     * create map
-     */
-    sumbitAll() {
-      this.$emit('submit-all');
-    },
-    handleSequenceSelection(sele) {
-      const secondSelection = sele[1];
-      
-      switch (secondSelection) {
-        case 'Have activity(s)':
-          return !(this.selectFilterTask && this.selectFilterTask.length !== 0);
-        case 'Start & End':
-          return this.handleStartEndSelection(sele[2]);
-        case 'Sequence':
-          return this.listSeq.length < 2;
-        default:
-          return true;
-      }
-    },
-    handleStartEndSelection(option) {
-      switch (option) {
-        case 'Start':
-          return !this.selectFilterStart;
-        case 'End':
-          return !this.selectFilterEnd;
-        case 'Start & End':
-          return !(this.selectFilterStartToEnd && this.selectFilterEndToStart);
-        default:
-          return true;
-      }
-    },
-    handleAttributesSelection(type) {
-      switch (type) {
-        case 'string':
-          return !(this.selectAttribute && this.selectAttribute.length > 0);
-        case 'boolean':
-          return !(this.selectAttribute?.key && this.selectAttribute?.label);
-        case 'int':
-        case 'float':
-        case 'date':
-          return !(this.selectAttribute?.key && this.selectAttribute?.min !== null && this.selectAttribute?.max !== null);
-        default:
-          return true;
-      }
-    },
-    handleTraceSelection() {
-      return this.selectTraceArea[0] === this.selectTraceArea[1];
-    },
-    handleTimeframesSelection() {
-      return this.selectTimeFrame.length === 0;
-    },
-    getTaskLabel(e) {
-      switch (e.type) {
-          case "contains-task":
-              return `${e.task}`;
-          case "starts-with":
-              return `start with ${e.task}`;
-          case "ends-with":
-              return `end with ${e.task}`;
-          case "directly-follows":
-          case "eventually-follows":
-              return `${e.type.replace('-', ' ')}, ${e.task_seq.join(' -> ')}`;
-      }
-    },
-    getAttributeLabel(e) {
-      switch (e.type) {
-          case 'string-attr':
-              return `${e.key}, ${e.value}`;
-          case 'boolean-attr':
-              return `${e.key}, ${this.selectAttribute?.label}`;
-          case 'int-attr':
-          case 'float-attr':
-              return `${e.key}, from ${e.min} to ${e.max}`;
-          case 'date-attr':
-              return `${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`;
-      }
-    },
-    getFilterData(sele, isExclude, containmentMap) {
-      switch (sele[0]) {
-        case 'Sequence':
-          return this.getSequenceData(sele, isExclude);
-        case 'Attributes':
-          return this.getAttributesData(isExclude);
-        case 'Trace':
-          return this.getTraceData(isExclude);
-        case 'Timeframes':
-          return {
-            type: containmentMap[sele[6]],
-            start: this.selectTimeFrame[0],
-            end: this.selectTimeFrame[1],
-            is_exclude: isExclude
-          };
-        default:
-          return null;
-      }
-    },
-    getSequenceData(sele, isExclude) {
-      switch (sele[1]) {
-        case 'Have activity(s)':
-          return this.selectFilterTask.map(task => ({
-            type: 'contains-task',
-            task: task.label,
-            is_exclude: isExclude
-          }));
-        case 'Start & End':
-          return this.getStartEndData(sele, isExclude);
-        case 'Sequence':
-          return {
-            type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows',
-            task_seq: this.listSeq.map(task => task.label),
-            is_exclude: isExclude
-          };
-        default:
-          return null;
-      }
-    },
-    getStartEndData(sele, isExclude) {
-      switch (sele[2]) {
-        case 'Start':
-          return {
-            type: 'starts-with',
-            task: this.selectFilterStart.label,
-            is_exclude: isExclude
-          };
-        case 'End':
-          return {
-            type: 'ends-with',
-            task: this.selectFilterEnd.label,
-            is_exclude: isExclude
-          };
-        case 'Start & End':
-          return {
-            type: 'start-end',
-            starts_with: this.selectFilterStartToEnd.label,
-            ends_with: this.selectFilterEndToStart.label,
-            is_exclude: isExclude
-          };
-        default:
-          return null;
-      }
-    },
-    getAttributesData(isExclude) {
-      const attrTypeMap = {
-        'string': 'string-attr',
-        'boolean': 'boolean-attr',
-        'int': 'int-attr',
-        'float': 'float-attr',
-        'date': 'date-attr'
-      };
-
-      switch (this.selectAttType) {
-        case 'string':
-          return this.selectAttribute.map(task => ({
-            type: attrTypeMap['string'],
-            key: task.key,
-            value: task.value,
-            is_exclude: isExclude
-          }));
-        case 'boolean':
-        case 'int':
-        case 'float':
-        case 'date':
-          return {
-            type: attrTypeMap[this.selectAttType],
-            key: this.selectAttribute.key,
-            value: this.selectAttribute.value,
-            min: this.selectAttribute.min,
-            max: this.selectAttribute.max,
-            is_exclude: isExclude
-          };
-        default:
-          return null;
-      }
-    },
-    getTraceData(isExclude) {
-      const lowerIndex = this.$refs.filterTraceView.selectArea[0];
-      const upperIndex = this.$refs.filterTraceView.selectArea[1] - 1;
-      return {
-        type: 'trace-freq',
-        lower: this.allMapDataStore.traces[lowerIndex].id,
-        upper: this.allMapDataStore.traces[upperIndex].id,
+        type: containmentMap[sele[6]],
+        start: selectTimeFrame.value[0],
+        end: selectTimeFrame.value[1],
         is_exclude: isExclude
       };
-    },
-    updateRules(postData) {
-      if (!this.temporaryData?.length) {
-        this.temporaryData.push(...postData);
-        this.isRuleData = Array.from(this.temporaryData);
-        this.ruleData = this.isRuleData.map(e => this.setRule(e));
-      } else {
-        this.temporaryData.push(...postData);
-        this.isRuleData.push(...postData);
-        this.ruleData.push(...postData.map(e => this.setRule(e)));
-      }
-    },
-    delay(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-    }
-  },
+    default:
+      return null;
+  }
+}
+
+function getSequenceData(sele, isExclude) {
+  switch (sele[1]) {
+    case 'Have activity(s)':
+      return selectFilterTask.value.map(task => ({
+        type: 'contains-task',
+        task: task.label,
+        is_exclude: isExclude
+      }));
+    case 'Start & End':
+      return getStartEndData(sele, isExclude);
+    case 'Sequence':
+      return {
+        type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows',
+        task_seq: listSeq.value.map(task => task.label),
+        is_exclude: isExclude
+      };
+    default:
+      return null;
+  }
+}
+
+function getStartEndData(sele, isExclude) {
+  switch (sele[2]) {
+    case 'Start':
+      return {
+        type: 'starts-with',
+        task: selectFilterStart.value.label,
+        is_exclude: isExclude
+      };
+    case 'End':
+      return {
+        type: 'ends-with',
+        task: selectFilterEnd.value.label,
+        is_exclude: isExclude
+      };
+    case 'Start & End':
+      return {
+        type: 'start-end',
+        starts_with: selectFilterStartToEnd.value.label,
+        ends_with: selectFilterEndToStart.value.label,
+        is_exclude: isExclude
+      };
+    default:
+      return null;
+  }
+}
+
+function getAttributesData(isExclude) {
+  const attrTypeMap = {
+    'string': 'string-attr',
+    'boolean': 'boolean-attr',
+    'int': 'int-attr',
+    'float': 'float-attr',
+    'date': 'date-attr'
+  };
+
+  switch (selectAttType.value) {
+    case 'string':
+      return selectAttribute.value.map(task => ({
+        type: attrTypeMap['string'],
+        key: task.key,
+        value: task.value,
+        is_exclude: isExclude
+      }));
+    case 'boolean':
+    case 'int':
+    case 'float':
+    case 'date':
+      return {
+        type: attrTypeMap[selectAttType.value],
+        key: selectAttribute.value.key,
+        value: selectAttribute.value.value,
+        min: selectAttribute.value.min,
+        max: selectAttribute.value.max,
+        is_exclude: isExclude
+      };
+    default:
+      return null;
+  }
+}
+
+function getTraceData(isExclude) {
+  const lowerIndex = filterTraceViewRef.value.selectArea[0];
+  const upperIndex = filterTraceViewRef.value.selectArea[1] - 1;
+  return {
+    type: 'trace-freq',
+    lower: allMapDataStore.traces[lowerIndex].id,
+    upper: allMapDataStore.traces[upperIndex].id,
+    is_exclude: isExclude
+  };
+}
+
+function updateRules(postData) {
+  if (!temporaryData.value?.length) {
+    temporaryData.value.push(...postData);
+    isRuleData.value = Array.from(temporaryData.value);
+    ruleData.value = isRuleData.value.map(e => setRule(e));
+  } else {
+    temporaryData.value.push(...postData);
+    isRuleData.value.push(...postData);
+    ruleData.value.push(...postData.map(e => setRule(e)));
+  }
+}
+
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
 }
 </script>
 
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index dfd1902..0531da8 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -19,7 +19,7 @@
             <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
           </div>
         </li>
-      </ul>      
+      </ul>
       <ul class="pb-4 border-b border-neutral-300">
         <li>
           <p class="h2">Cases</p>
@@ -121,16 +121,16 @@
         <p class="h2">Most Frequent</p>
         <ul class="list-disc ml-6 mb-2 text-sm">
           <li class="leading-5">Activity:&nbsp;
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
             insights.most_freq_tasks" :key="key">{{ value }}</span>
           </li>
           <li class="leading-5">Inbound connections:&nbsp;
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
               insights.most_freq_in" :key="key">{{ value }}
             </span>
           </li>
           <li class="leading-5">Outbound connections:&nbsp;
-            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in 
+            <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
               insights.most_freq_out" :key="key">{{ value }}
             </span>
           </li>
@@ -138,7 +138,7 @@
         <p class="h2">Most Time-Consuming</p>
         <ul class="list-disc ml-6 mb-4 text-sm">
           <li class="w-full leading-5">Activity:&nbsp;
-            <span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) 
+            <span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
               in insights.most_time_tasks" :key="key">{{ value }}
             </span>
           </li>
@@ -241,8 +241,8 @@
   </Sidebar>
 </template>
 
-<script>
-import { computed, ref, } from 'vue';
+<script setup>
+import { computed, ref } from 'vue';
 import { usePageAdminStore } from '@/stores/pageAdmin';
 import { useMapPathStore } from '@/stores/mapPathStore';
 import { getTimeLabel } from '@/module/timeLabel.js';
@@ -252,120 +252,106 @@ import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 
 // 刪除第一個和第二個元素
 const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
-export default {
-  props:{
-    sidebarState: {
-      type: Boolean,
-      require: false,
-    },
-    stats: {
-      type: Object,
-      required: false,
-    },
-    insights: {
-      type: Object,
-      required: false,
-    }
+
+const props = defineProps({
+  sidebarState: {
+    type: Boolean,
+    require: false,
   },
-  setup(props){
-    const pageAdmin = usePageAdminStore();
-    const mapPathStore = useMapPathStore();
-
-    const activeTrace = ref(0);
-    const currentMapFile = computed(() => pageAdmin.currentMapFile);
-    const clickedPathListIndex = ref(0);
-    const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
-
-    const onActiveTraceClick = (clickedActiveTraceIndex) => {
-      mapPathStore.clearAllHighlight();
-      activeTrace.value = clickedActiveTraceIndex;
-      mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
-    }
-
-    const onPathOptionClick = (clickedPath) => {
-      clickedPathListIndex.value = clickedPath;
-      mapPathStore.highlightClickedPath(activeTrace.value, clickedPath);
-    };
-
-    const onResetTraceBtnClick = () => {
-      if(isBPMNOn.value) {
-        return;
-      }
-      clickedPathListIndex.value = undefined;
-    }
-
-    return {
-      currentMapFile,
-      i18next,
-      fieldNamesAndLabelNames,
-      clickedPathListIndex,
-      onPathOptionClick,
-      onActiveTraceClick,
-      onResetTraceBtnClick,
-      activeTrace,
-      isBPMNOn,
-      i18next,
-    };
-  },
-  data() {
-    return {
-      tab: 'summary',
-      valueCases: 0,
-      valueTraces: 0,
-      valueTaskInstances: 0,
-      valueTasks: 0,
-    }
-  },
-  methods: {
-    /**
-     * @param {string} switch Summary or Insight
-     */
-    switchTab(tab) {
-      this.tab = tab;
-    },
-    /**
-     * @param {number} time use timeLabel.js
-     */
-    timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
-      //
-      const label = getTimeLabel(time).replace(/\s+/g, ' '); // 將所有連續空白字符壓縮為一個空白
-      const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
-      return result;
-    },
-    /**
-     * @param {number} time use moment
-     */
-    moment(time){
-      return getMoment(time).format('YYYY-MM-DD HH:mm');
-    },
-    /**
-     * Number to percentage
-     * @param   {number} val 原始數字
-     * @returns {string}     轉換完成的百分比字串
-     */
-    getPercentLabel(val){
-      if((val * 100).toFixed(1) >= 100) return `100%`;
-      else return `${(val * 100).toFixed(1)}%`;
-    },
-    /**
-     * Behavior when show
-     */
-    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;
-    },
-    /**
-     * Behavior when hidden
-     */
-    hide(){
-      this.valueCases = 0;
-      this.valueTraces=  0;
-      this.valueTaskInstances = 0;
-      this.valueTasks = 0;
-    },
+  stats: {
+    type: Object,
+    required: false,
   },
+  insights: {
+    type: Object,
+    required: false,
+  }
+});
+
+const pageAdmin = usePageAdminStore();
+const mapPathStore = useMapPathStore();
+
+const activeTrace = ref(0);
+const currentMapFile = computed(() => pageAdmin.currentMapFile);
+const clickedPathListIndex = ref(0);
+const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
+
+const tab = ref('summary');
+const valueCases = ref(0);
+const valueTraces = ref(0);
+const valueTaskInstances = ref(0);
+const valueTasks = ref(0);
+
+function onActiveTraceClick(clickedActiveTraceIndex) {
+  mapPathStore.clearAllHighlight();
+  activeTrace.value = clickedActiveTraceIndex;
+  mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
+}
+
+function onPathOptionClick(clickedPath) {
+  clickedPathListIndex.value = clickedPath;
+  mapPathStore.highlightClickedPath(activeTrace.value, clickedPath);
+}
+
+function onResetTraceBtnClick() {
+  if(isBPMNOn.value) {
+    return;
+  }
+  clickedPathListIndex.value = undefined;
+}
+
+/**
+ * @param {string} newTab Summary or Insight
+ */
+function switchTab(newTab) {
+  tab.value = newTab;
+}
+
+/**
+ * @param {number} time use timeLabel.js
+ */
+function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
+  //
+  const label = getTimeLabel(time).replace(/\s+/g, ' '); // 將所有連續空白字符壓縮為一個空白
+  const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
+  return result;
+}
+
+/**
+ * @param {number} time use moment
+ */
+function moment(time){
+  return getMoment(time).format('YYYY-MM-DD HH:mm');
+}
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return `100%`;
+  else return `${(val * 100).toFixed(1)}%`;
+}
+
+/**
+ * Behavior when show
+ */
+function show(){
+  valueCases.value = props.stats.cases.ratio * 100;
+  valueTraces.value = props.stats.traces.ratio * 100;
+  valueTaskInstances.value = props.stats.task_instances.ratio * 100;
+  valueTasks.value = props.stats.tasks.ratio * 100;
+}
+
+/**
+ * Behavior when hidden
+ */
+function hide(){
+  valueCases.value = 0;
+  valueTraces.value = 0;
+  valueTaskInstances.value = 0;
+  valueTasks.value = 0;
 }
 </script>
 
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 4a349d6..bedf631 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -39,7 +39,7 @@
         <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
         <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
           <div class="h-full w-full">
-            <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
+            <div id="cyTrace" ref="cyTraceRef" class="h-full min-w-full relative"></div>
           </div>
         </div>
         <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_200px)] infiniteTable " @scroll="handleScroll">
@@ -59,221 +59,224 @@
     </div>
   </Sidebar>
 </template>
-<script>
+<script setup>
+import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useLoadingStore } from '@/stores/loading';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
-export default {
-  props: ['sidebarTraces', 'cases'],
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
+const props = defineProps(['sidebarTraces', 'cases']);
+const emit = defineEmits(['switch-Trace-Id']);
 
-    return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases, isLoading }
-  },
-  data() {
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
+
+const processMap = ref({
+  nodes:[],
+  edges:[],
+});
+const showTraceId = ref(null);
+const infinitMaxItems = ref(false);
+const infiniteData = ref([]);
+const infiniteFinish = ref(true); // 無限滾動是否載入完成
+const cyTraceRef = ref(null);
+
+const traceTotal = computed(() => {
+  return traces.value.length;
+});
+
+const traceList = computed(() => {
+  const sum = traces.value.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+  const result = traces.value.map(trace => {
     return {
-      processMap:{
-        nodes:[],
-        edges:[],
-      },
-      showTraceId: null,
-      infinitMaxItems: false,
-      infiniteData: [],
-      infiniteFinish: true, // 無限滾動是否載入完成
-    }
-  },
-  computed: {
-    traceTotal: function() {
-      return this.traces.length;
-    },
-    traceList: function() {
-      const sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-      const result = this.traces.map(trace => {
-        return {
-          id: trace.id,
-          value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
-          count: trace.count.toLocaleString(),
-          base_count: trace.count,
-          ratio: this.getPercentLabel(trace.count / sum),
-        };
-      })
-      return result;
-    },
-    caseData: function() {
-      const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
-      data.forEach(item => {
-        item.attributes.forEach((attribute, index) => {
-          item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
-        });
-        delete item.attributes; // 刪除原本的 attributes 屬性
-      })
-      return data;
-    },
-    columnData: function() {
-      const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
-      let result = [
-          { field: 'id', header: 'Case Id' },
-          { field: 'started_at', header: 'Start time' },
-          { field: 'completed_at', header: 'End time' },
-        ];
-      if(data.length !== 0){
-        result = [
-          { field: 'id', header: 'Case Id' },
-          { field: 'started_at', header: 'Start time' },
-          { field: 'completed_at', header: 'End time' },
-          ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
-        ];
+      id: trace.id,
+      value: progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
+      count: trace.count.toLocaleString(),
+      base_count: trace.count,
+      ratio: getPercentLabel(trace.count / sum),
+    };
+  })
+  return result;
+});
+
+const caseData = computed(() => {
+  const data = JSON.parse(JSON.stringify(infiniteData.value)); // 深拷貝原始 cases 的內容
+  data.forEach(item => {
+    item.attributes.forEach((attribute, index) => {
+      item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
+    });
+    delete item.attributes; // 刪除原本的 attributes 屬性
+  })
+  return data;
+});
+
+const columnData = computed(() => {
+  const data = JSON.parse(JSON.stringify(props.cases)); // 深拷貝原始 cases 的內容
+  let result = [
+      { field: 'id', header: 'Case Id' },
+      { field: 'started_at', header: 'Start time' },
+      { field: 'completed_at', header: 'End time' },
+    ];
+  if(data.length !== 0){
+    result = [
+      { field: 'id', header: 'Case Id' },
+      { field: 'started_at', header: 'Start time' },
+      { field: 'completed_at', header: 'End time' },
+      ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })),
+    ];
+  }
+  return result
+});
+
+watch(infinit404, (newValue) => {
+  if(newValue === 404) infinitMaxItems.value = true;
+});
+
+watch(traceId, (newValue) => {
+  showTraceId.value = newValue;
+}, { immediate: true });
+
+watch(showTraceId, (newValue, oldValue) => {
+  const isScrollTop = document.querySelector('.infiniteTable');
+  if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
+});
+
+watch(infiniteFirstCases, (newValue) => {
+  if(infiniteFirstCases.value) infiniteData.value = JSON.parse(JSON.stringify(newValue));
+});
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string}     轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return `100%`;
+  else return `${(val * 100).toFixed(1)}%`;
+}
+
+/**
+ * set progress bar width
+ * @param   {number} value 百分比數字
+ * @returns {string}      樣式的寬度設定
+ */
+function progressWidth(value){
+  return `width:${value}%;`
+}
+
+/**
+ * switch case data
+ * @param {number} id case id
+ * @param {number} count 總 case 數量
+ */
+async function switchCaseData(id, count) {
+  // 點同一筆 id 不要有動作
+  if(id == showTraceId.value) return;
+  isLoading.value = true; // 都要 loading 畫面
+  infinit404.value = null;
+  infinitMaxItems.value = false;
+  showTraceId.value = id;
+  infiniteStart.value = 0;
+  emit('switch-Trace-Id', {id: showTraceId.value, count: count}); // 傳遞到 Map index 再關掉 loading
+}
+
+/**
+ * 將 trace element nodes 資料彙整
+ */
+function setNodesData(){
+  // 避免每次渲染都重複累加
+  processMap.value.nodes = [];
+  // 將 api call 回來的資料帶進 node
+  traceTaskSeq.value.forEach((node, index) => {
+    processMap.value.nodes.push({
+      data: {
+        id: index,
+        label: node,
+        backgroundColor: '#CCE5FF',
+        bordercolor: '#003366',
+        shape: 'round-rectangle',
+        height: 80,
+        width: 100
       }
-      return result
-    },
-  },
-  watch: {
-    infinite404: function(newValue) {
-      if(newValue === 404) this.infinitMaxItems = true;
-    },
-    traceId: {
-      handler(newValue) {
-        this.showTraceId = newValue;
-      },
-      immediate: true
-    },
-    showTraceId: function(newValue, oldValue) {
-      const isScrollTop = document.querySelector('.infiniteTable');
-      if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0;
-    },
-    infiniteFirstCases: function(newValue){
-      if(this.infiniteFirstCases) this.infiniteData = JSON.parse(JSON.stringify(newValue));
-    },
-  },
-  methods: {
-    /**
-     * Number to percentage
-     * @param   {number} val 原始數字
-     * @returns {string}     轉換完成的百分比字串
-     */
-    getPercentLabel(val){
-      if((val * 100).toFixed(1) >= 100) return `100%`;
-      else return `${(val * 100).toFixed(1)}%`;
-    },
-    /**
-     * set progress bar width
-     * @param   {number} value 百分比數字
-     * @returns {string}      樣式的寬度設定
-     */
-    progressWidth(value){
-      return `width:${value}%;`
-    },
-    /**
-     * switch case data
-     * @param {number} id case id
-     * @param {number} count 總 case 數量
-     */
-    async switchCaseData(id, count) {
-      // 點同一筆 id 不要有動作
-      if(id == this.showTraceId) return;
-      this.isLoading = true; // 都要 loading 畫面
-      this.infinit404 = null;
-      this.infinitMaxItems = false;
-      this.showTraceId = id;
-      this.infiniteStart = 0;
-      this.$emit('switch-Trace-Id', {id: this.showTraceId, count: count}); // 傳遞到 Map index 再關掉 loading
-    },
-    /**
-     * 將 trace element nodes 資料彙整
-     */
-    setNodesData(){
-      // 避免每次渲染都重複累加
-      this.processMap.nodes = [];
-      // 將 api call 回來的資料帶進 node
-      this.traceTaskSeq.forEach((node, index) => {
-        this.processMap.nodes.push({
-          data: {
-            id: index,
-            label: node,
-            backgroundColor: '#CCE5FF',
-            bordercolor: '#003366',
-            shape: 'round-rectangle',
-            height: 80,
-            width: 100
-          }
-        });
-      })
-    },
-    /**
-     * 將 trace edge line 資料彙整
-     */
-    setEdgesData(){
-      this.processMap.edges = [];
-      this.traceTaskSeq.forEach((edge, index) => {
-        this.processMap.edges.push({
-          data: {
-            source: `${index}`,
-            target: `${index + 1}`,
-            lineWidth: 1,
-            style: 'solid'
-          }
-        });
-      });
-      // 關係線數量筆節點少一個
-      this.processMap.edges.pop();
-    },
-    /**
-     * create trace cytoscape's map
-     */
-     createCy(){
-      const graphId = this.$refs.cyTrace;
+    });
+  })
+}
 
-      this.setNodesData();
-      this.setEdgesData();
-      cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
-    },
-    /**
-     * create map
-     */
-     async show() {
-      this.isLoading = await true; // createCy 執行完關閉
-      // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
-      this.showTraceId = await this.traces[0]?.id;
-      this.infiniteStart = await 0;
-      this.setNodesData();
-      this.setEdgesData();
-      this.createCy();
-      this.isLoading = false;
-    },
-    /**
-     * 無限滾動: 監聽 scroll 有沒有滾到底部
-     * @param {element} event 滾動傳入的事件
-     */
-    handleScroll(event) {
-      if(this.infinitMaxItems || this.cases.length < 20 || this.infiniteFinish === false) return;
-
-      const container = event.target;
-      const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
-
-      if(overScrollHeight) this.fetchData();
-    },
-    /**
-     * 無限滾動: 滾到底後，要載入數據
-     */
-    async fetchData() {
-      try {
-        this.isLoading = true;
-        this.infiniteFinish = false;
-        this.infiniteStart += 20;
-        await this.allMapDataStore.getTraceDetail();
-        this.infiniteData = await [...this.infiniteData, ...this.cases];
-        this.infiniteFinish = await true;
-        this.isLoading = await false;
-      } catch(error) {
-        console.error('Failed to load data:', error);
+/**
+ * 將 trace edge line 資料彙整
+ */
+function setEdgesData(){
+  processMap.value.edges = [];
+  traceTaskSeq.value.forEach((edge, index) => {
+    processMap.value.edges.push({
+      data: {
+        source: `${index}`,
+        target: `${index + 1}`,
+        lineWidth: 1,
+        style: 'solid'
       }
-    }
-  },
+    });
+  });
+  // 關係線數量筆節點少一個
+  processMap.value.edges.pop();
+}
+
+/**
+ * create trace cytoscape's map
+ */
+function createCy(){
+  const graphId = cyTraceRef.value;
+
+  setNodesData();
+  setEdgesData();
+  cytoscapeMapTrace(processMap.value.nodes, processMap.value.edges, graphId);
+}
+
+/**
+ * create map
+ */
+async function show() {
+  isLoading.value = await true; // createCy 執行完關閉
+  // 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
+  showTraceId.value = await traces.value[0]?.id;
+  infiniteStart.value = await 0;
+  setNodesData();
+  setEdgesData();
+  createCy();
+  isLoading.value = false;
+}
+
+/**
+ * 無限滾動: 監聽 scroll 有沒有滾到底部
+ * @param {element} event 滾動傳入的事件
+ */
+function handleScroll(event) {
+  if(infinitMaxItems.value || props.cases.length < 20 || infiniteFinish.value === false) return;
+
+  const container = event.target;
+  const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
+
+  if(overScrollHeight) fetchData();
+}
+
+/**
+ * 無限滾動: 滾到底後，要載入數據
+ */
+async function fetchData() {
+  try {
+    isLoading.value = true;
+    infiniteFinish.value = false;
+    infiniteStart.value += 20;
+    await allMapDataStore.getTraceDetail();
+    infiniteData.value = await [...infiniteData.value, ...props.cases];
+    infiniteFinish.value = await true;
+    isLoading.value = await false;
+  } catch(error) {
+    console.error('Failed to load data:', error);
+  }
 }
 </script>
 
diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index a587a81..942cf76 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -69,110 +69,118 @@
   </Sidebar>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useMapPathStore } from '@/stores/mapPathStore';
-import { mapState, mapActions, } from 'pinia';
-export default {
-  props: {
-    sidebarView: {
-      type: Boolean,
-      require: true,
-    },
-  },
-  data() {
-    return {
-      selectFrequency: [
-        { value:"total", label:"Total", disabled:false, },
-        { value:"rel_freq", label:"Relative", disabled:false, },
-        { value:"average", label:"Average", disabled:false, },
-        { value:"median", label:"Median", disabled:false, },
-        { value:"max", label:"Max", disabled:false, },
-        { value:"min", label:"Min", disabled:false, },
-        { value:"cases", label:"Number of cases", disabled:false, },
-      ],
-      selectDuration:[
-        { value:"total", label:"Total", disabled:false, },
-        { value:"rel_duration", label:"Relative", disabled:false, },
-        { value:"average", label:"Average", disabled:false, },
-        { value:"median", label:"Median", disabled:false, },
-        { value:"max", label:"Max", disabled:false, },
-        { value:"min", label:"Min", disabled:false, },
-      ],
-      curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
-      mapType: 'processMap', // processMap | bpmn
-      dataLayerType: null, // freq | duration
-      dataLayerOption: null,
-      selectedFreq: '',
-      selectedDuration: '',
-      rank: 'LR', // 直向 TB | 橫向 LR
-    }
-  },
-  computed: {
-    ...mapState(useMapPathStore, ['isBPMNOn']),
-  },
-  methods: {
-    /**
-     * switch map type
-     * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
-     */
-     switchMapType(type) {
-       this.mapType = type;
-       this.$emit('switch-map-type', this.mapType);
-    },
-    /**
-     * switch curve style
-     * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
-     */
-    switchCurveStyles(style) {
-      this.curveStyle = style;
-      this.$emit('switch-curve-styles', this.curveStyle);
-    },
-    /**
-     * switch rank
-     * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
-     */
-    switchRank(rank) {
-      this.rank = rank;
-      this.$emit('switch-rank', this.rank);
-    },
-    /**
-     * switch Data Layoer Type or Option.
-     * @param {string} e 切換時傳入的選項
-     * @param {string} type 'freq' | 'duration'，可傳入以上任一。
-     */
-    switchDataLayerType(e, type){
-      let value = '';
 
-      if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
-      switch (type) {
-        case 'freq':
-          value = value || this.selectedFreq || 'total';
-          this.dataLayerType = type;
-          this.dataLayerOption = value;
-          this.selectedFreq = value;
-          break;
-        case 'duration':
-          value = value || this.selectedDuration || 'total';
-          this.dataLayerType = type;
-          this.dataLayerOption = value;
-          this.selectedDuration = value;
-          break;
-      }
-      this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
-    },
-    onProcessMapClick() {
-      this.setIsBPMNOn(false);
-      this.switchMapType('processMap');
-    },
-    onBPMNClick() {
-      this.setIsBPMNOn(true);
-      this.switchMapType('bpmn');
-    },
-    ...mapActions(useMapPathStore, ['setIsBPMNOn',]),
+defineProps({
+  sidebarView: {
+    type: Boolean,
+    require: true,
   },
-  mounted() {
-    this.dataLayerType = 'freq';
-    this.dataLayerOption = 'total';
-  }
+});
+
+const emit = defineEmits([
+  'switch-map-type',
+  'switch-curve-styles',
+  'switch-rank',
+  'switch-data-layer-type',
+]);
+
+const mapPathStore = useMapPathStore();
+const { isBPMNOn } = storeToRefs(mapPathStore);
+
+const selectFrequency = ref([
+  { value:"total", label:"Total", disabled:false, },
+  { value:"rel_freq", label:"Relative", disabled:false, },
+  { value:"average", label:"Average", disabled:false, },
+  { value:"median", label:"Median", disabled:false, },
+  { value:"max", label:"Max", disabled:false, },
+  { value:"min", label:"Min", disabled:false, },
+  { value:"cases", label:"Number of cases", disabled:false, },
+]);
+const selectDuration = ref([
+  { value:"total", label:"Total", disabled:false, },
+  { value:"rel_duration", label:"Relative", disabled:false, },
+  { value:"average", label:"Average", disabled:false, },
+  { value:"median", label:"Median", disabled:false, },
+  { value:"max", label:"Max", disabled:false, },
+  { value:"min", label:"Min", disabled:false, },
+]);
+const curveStyle = ref('unbundled-bezier'); // unbundled-bezier | taxi
+const mapType = ref('processMap'); // processMap | bpmn
+const dataLayerType = ref(null); // freq | duration
+const dataLayerOption = ref(null);
+const selectedFreq = ref('');
+const selectedDuration = ref('');
+const rank = ref('LR'); // 直向 TB | 橫向 LR
+
+/**
+ * switch map type
+ * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
+ */
+function switchMapType(type) {
+  mapType.value = type;
+  emit('switch-map-type', mapType.value);
 }
+
+/**
+ * switch curve style
+ * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
+ */
+function switchCurveStyles(style) {
+  curveStyle.value = style;
+  emit('switch-curve-styles', curveStyle.value);
+}
+
+/**
+ * switch rank
+ * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
+ */
+function switchRank(rankValue) {
+  rank.value = rankValue;
+  emit('switch-rank', rank.value);
+}
+
+/**
+ * switch Data Layoer Type or Option.
+ * @param {string} e 切換時傳入的選項
+ * @param {string} type 'freq' | 'duration'，可傳入以上任一。
+ */
+function switchDataLayerType(e, type) {
+  let value = '';
+
+  if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
+  switch (type) {
+    case 'freq':
+      value = value || selectedFreq.value || 'total';
+      dataLayerType.value = type;
+      dataLayerOption.value = value;
+      selectedFreq.value = value;
+      break;
+    case 'duration':
+      value = value || selectedDuration.value || 'total';
+      dataLayerType.value = type;
+      dataLayerOption.value = value;
+      selectedDuration.value = value;
+      break;
+  }
+  emit('switch-data-layer-type', dataLayerType.value, dataLayerOption.value);
+}
+
+function onProcessMapClick() {
+  mapPathStore.setIsBPMNOn(false);
+  switchMapType('processMap');
+}
+
+function onBPMNClick() {
+  mapPathStore.setIsBPMNOn(true);
+  switchMapType('bpmn');
+}
+
+onMounted(() => {
+  dataLayerType.value = 'freq';
+  dataLayerOption.value = 'total';
+});
 </script>
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index c294045..ed4d05a 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -78,89 +78,85 @@
 </section>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
-export default {
-  setup() {
-    const allMapDataStore = useAllMapDataStore();
-    const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
+const route = useRoute();
 
-    return { logId, stats, createFilterId, allMapDataStore };
-  },
-  data() {
-    return {
-      isPanel: false,
-      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));
+const allMapDataStore = useAllMapDataStore();
+const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
+
+const isPanel = ref(false);
+const statData = ref(null);
+
+/**
+ * Number to percentage
+ * @param   {number} val 原始數字
+ * @returns {string} 轉換完成的百分比字串
+ */
+function getPercentLabel(val){
+  if((val * 100).toFixed(1) >= 100) return 100;
+  else return parseFloat((val * 100).toFixed(1));
+}
+
+/**
+ * setting stats data
+ */
+function getStatData() {
+  statData.value = {
+    cases: {
+      count: stats.value.cases.count.toLocaleString('en-US'),
+      total: stats.value.cases.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(stats.value.cases.ratio)
     },
-    /**
-     * 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),
-          max: getTimeLabel(this.stats.case_duration.max),
-          average: getTimeLabel(this.stats.case_duration.average),
-          median: getTimeLabel(this.stats.case_duration.median),
-        }
-      }
+    traces: {
+      count: stats.value.traces.count.toLocaleString('en-US'),
+      total: stats.value.traces.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(stats.value.traces.ratio)
+    },
+    task_instances: {
+      count: stats.value.task_instances.count.toLocaleString('en-US'),
+      total: stats.value.task_instances.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(stats.value.task_instances.ratio)
+    },
+    tasks: {
+      count: stats.value.tasks.count.toLocaleString('en-US'),
+      total: stats.value.tasks.total.toLocaleString('en-US'),
+      ratio: getPercentLabel(stats.value.tasks.ratio)
+    },
+    started_at: getMoment(stats.value.started_at).format('YYYY-MM-DD HH:mm'),
+    completed_at: getMoment(stats.value.completed_at).format('YYYY-MM-DD HH:mm'),
+    case_duration: {
+      min: getTimeLabel(stats.value.case_duration.min),
+      max: getTimeLabel(stats.value.case_duration.max),
+      average: getTimeLabel(stats.value.case_duration.average),
+      median: getTimeLabel(stats.value.case_duration.median),
     }
-  },
-  async mounted() {
-    const params = this.$route.params;
-    const file = this.$route.meta.file;
-    const isCheckPage = this.$route.name.includes('Check');
-
-    switch (params.type) {
-      case 'log':
-        this.logId = isCheckPage ? file.parent.id : params.fileId;
-        break;
-      case 'filter':
-        this.createFilterId = isCheckPage ? file.parent.id : params.fileId;
-        break;
-    }
-    await this.allMapDataStore.getAllMapData();
-    await this.getStatData();
-    this.isPanel = false; // 預設不打開
   }
 }
+
+onMounted(async () => {
+  const params = route.params;
+  const file = route.meta.file;
+  const isCheckPage = route.name.includes('Check');
+
+  switch (params.type) {
+    case 'log':
+      logId.value = isCheckPage ? file.parent.id : params.fileId;
+      break;
+    case 'filter':
+      createFilterId.value = isCheckPage ? file.parent.id : params.fileId;
+      break;
+  }
+  await allMapDataStore.getAllMapData();
+  await getStatData();
+  isPanel.value = false; // 預設不打開
+});
 </script>
 <style scoped>
 @reference "../../assets/tailwind.css";
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
index a722a8e..0968eec 100644
--- a/src/components/File/UploadModal.vue
+++ b/src/components/File/UploadModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="$emit('closeModal', $event)">
+  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="emit('closeModal', $event)">
     <template #header>
       <div class="py-5">
       </div>
@@ -14,70 +14,61 @@
     </label>
   </Dialog>
 </template>
-<script>
-import IconUploarding from '../icons/IconUploarding.vue';
-import { uploadFailedFirst } from '@/module/alertModal.js'
+<script setup>
+import { onBeforeUnmount, } from 'vue';
 import { storeToRefs } from 'pinia';
+import IconUploarding from '../icons/IconUploarding.vue';
+import { uploadFailedFirst } from '@/module/alertModal.js';
 import { useFilesStore } from '@/stores/files';
 
-export default {
-  props: ['uploadModal'],
-  setup() {
-    const filesStore = useFilesStore();
-    const { uploadFileName } = storeToRefs(filesStore);
+defineProps(['uploadModal']);
+const emit = defineEmits(['closeModal']);
 
-    return { filesStore, uploadFileName }
-  },
-  data() {
-    return {
-      contentClass: 'h-full',
-    }
-  },
-  components: {
-    IconUploarding,
-  },
-  methods: {
-    /**
-     * 上傳的行為
-     * @param {event} event input 傳入的事件
-     */
-    async upload(event) {
-      const fileInput = document.getElementById('uploadFiles');
-      const target = event.target;
-      const formData = new FormData();
-      let uploadFile;
+const filesStore = useFilesStore();
+const { uploadFileName } = storeToRefs(filesStore);
 
-      // 判斷是否有檔案
-      if(target && target.files) {
-        uploadFile = target.files[0];
-      }
-      // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
-      if(uploadFile.size >= 94371840) {
-        fileInput.value = '';
-        return uploadFailedFirst('size');
-      }
-      // 將檔案加進 formData，欄位一定要「csv」
-      formData.append('csv', uploadFile);
-      // 呼叫第一階段上傳 API
-      if(uploadFile) {
-        await this.filesStore.upload(formData);
-      }
-      if (uploadFile.name.endsWith('.csv')) {
-        this.uploadFileName = uploadFile.name.slice(0, -4);
-      } else {
-        // 處理錯誤或無效的文件格式
-        this.uploadFileName = ''; // 或者其他適合的錯誤處理方式
-      }
-      // 清除選擇文件
-      if(fileInput) {
-        fileInput.value = '';
-      }
-    }
-  },
-  beforeUnmount() {
-    this.$emit('closeModal', false);
+const contentClass = 'h-full';
+
+/**
+ * 上傳的行為
+ * @param {event} event input 傳入的事件
+ */
+async function upload(event) {
+  const fileInput = document.getElementById('uploadFiles');
+  const target = event.target;
+  const formData = new FormData();
+  let uploadFile;
+
+  // 判斷是否有檔案
+  if(target && target.files) {
+    uploadFile = target.files[0];
+  }
+  // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
+  if(uploadFile.size >= 94371840) {
+    fileInput.value = '';
+    return uploadFailedFirst('size');
+  }
+  // 將檔案加進 formData，欄位一定要「csv」
+  formData.append('csv', uploadFile);
+  // 呼叫第一階段上傳 API
+  if(uploadFile) {
+    await filesStore.upload(formData);
+  }
+  if (uploadFile.name.endsWith('.csv')) {
+    uploadFileName.value = uploadFile.name.slice(0, -4);
+  } else {
+    // 處理錯誤或無效的文件格式
+    uploadFileName.value = ''; // 或者其他適合的錯誤處理方式
+  }
+  // 清除選擇文件
+  if(fileInput) {
+    fileInput.value = '';
   }
 }
+
+onBeforeUnmount(() => {
+  emit('closeModal', false);
+});
 </script>
 <style scoped>
 .loader-arrow-upward {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c1e6daf..ee42d48 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -13,16 +13,17 @@
           <img id="acct_mgmt_button" v-else  src="@/assets/icon-head-blue.svg" @mouseleave='isHeadHovered = false'
             width="32" height="32" @click="toggleIsAcctMenuOpen"
             class="cursor-pointer z-50" alt="user-head"
-          />       
+          />
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import { ref, } from 'vue';
+<script setup>
+import { ref, onMounted, } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs, } from 'pinia';
-import i18next from '@/i18n/i18n';
+import emitter from '@/utils/emitter';
 import { useLoginStore } from '@/stores/login';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import DspLogo from '@/components/icons/DspLogo.vue';
@@ -30,64 +31,44 @@ import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
-export default {
-  data() {
-    return {
-      showMember: false,
-      i18next: i18next,
-    }
-  },
-  setup() {
-    const store = useLoginStore();
-    const { logOut } = store;
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const acctMgmtStore = useAcctMgmtStore();
-    const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
-    const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
-    const isHeadHovered = ref(false);
+const route = useRoute();
 
-    const toggleIsAcctMenuOpen = () => {
-      acctMgmtStore.toggleIsAcctMenuOpen();
-    }
+const store = useLoginStore();
+const { logOut } = store;
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const acctMgmtStore = useAcctMgmtStore();
+const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
 
-    return { logOut, temporaryData, tempFilterId,
-      postRuleData, ruleData,
-      conformanceLogTempCheckId,
-      conformanceFilterTempCheckId,
-      allMapDataStore, conformanceStore,
-      conformanceFileName,
-      toggleIsAcctMenuOpen,
-      isHeadHovered,
-    };
-  },
-  components: {
-    DspLogo,
-  },
-  methods: {
-    /**
-     * 登出的行為
-     */
-    logOutButton() {
-      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
-        // 傳給 Map，通知 Sidebar 要關閉。
-        this.$emitter.emit('leaveFilter', false);
-        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
-      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
-        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
-      } else {
-        this.logOut();
-      }
-    },
-  },
-  mounted() {
-    if (this.$route.name === 'Login' || this.$route.name === 'NotFound404') {
-      this.showMember = false
-    } else {
-      this.showMember = true;
-    }
+const isHeadHovered = ref(false);
+const showMember = ref(false);
+
+const toggleIsAcctMenuOpen = () => {
+  acctMgmtStore.toggleIsAcctMenuOpen();
+};
+
+/**
+ * 登出的行為
+ */
+function logOutButton() {
+  if ((route.name === 'Map' || route.name === 'CheckMap') && tempFilterId.value) {
+    // 傳給 Map，通知 Sidebar 要關閉。
+    emitter.emit('leaveFilter', false);
+    leaveFilter(false, allMapDataStore.addFilterId, false, logOut)
+  } else if((route.name === 'Conformance' || route.name === 'CheckConformance')
+    && (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)) {
+    leaveConformance(false, conformanceStore.addConformanceCreateCheckId, false, logOut)
+  } else {
+    logOut();
   }
 }
 
+onMounted(() => {
+  if (route.name === 'Login' || route.name === 'NotFound404') {
+    showMember.value = false
+  } else {
+    showMember.value = true;
+  }
+});
 </script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index a1fa043..dcba9c4 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -44,8 +44,11 @@
     </div>
   </nav>
 </template>
-<script>
-import { storeToRefs, mapState, mapActions, } from 'pinia';
+<script setup>
+import { ref, computed, watch, onMounted, } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs, } from 'pinia';
+import emitter from '@/utils/emitter';
 import { useFilesStore } from '@/stores/files';
 import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
@@ -57,296 +60,274 @@ import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertMo
 import UploadModal from './File/UploadModal.vue';
 import AcctMenu from './AccountMenu/AcctMenu.vue';
 
-export default {
-  setup() {
-    const store = useFilesStore();
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdateFilter } = storeToRefs(allMapDataStore);
-    const { conformanceRuleData, conformanceLogId, conformanceFilterId,
-      conformanceLogTempCheckId, conformanceFilterTempCheckId, 
-      conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-      isUpdateConformance, conformanceFileName
-    } = storeToRefs(conformanceStore);
+const route = useRoute();
+const router = useRouter();
 
-    return {
-      store, allMapDataStore, logId, tempFilterId, createFilterId,
-      filterName, postRuleData, isUpdateFilter, conformanceStore, conformanceRuleData,
-      conformanceLogId, conformanceFilterId, conformanceLogTempCheckId,
-      conformanceFilterTempCheckId, conformanceLogCreateCheckId,
-      conformanceFilterCreateCheckId, isUpdateConformance, conformanceFileName,
-    };
-  },
-  components: {
-    IconSearch,
-    IconSetting,
-    UploadModal,
-    AcctMenu,
-  },
-  data() {
-    return {
-      mapCompareStore: useMapCompareStore(),
-      showNavbarBreadcrumb: false,
-      navViewData:
-      {
-        // 舉例：FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
-        FILES: ['ALL', 'DISCOVER', 'COMPARE'],
-        // 舉例：DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
-        // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
-        COMPARE: ['MAP', 'PERFORMANCE'],
-        'ACCOUNT MANAGEMENT': [],
-        'MY ACCOUNT': [],
-      },
-      navViewName: 'FILES',
-      uploadModal: false,
-    };
-  },
-  computed: {
-    disabledSave: function () {
-      switch (this.$route.name) {
-        case 'Map':
-        case 'CheckMap':
-          // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
-          return !this.tempFilterId;
-        case 'Conformance':
-        case 'CheckConformance':
-          return !(this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId);
-      }
-    },
-    showIcon: function() {
-      let result = true;
+const store = useFilesStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const mapCompareStore = useMapCompareStore();
+const pageAdminStore = usePageAdminStore();
 
-      result = !['FILES', 'UPLOAD'].includes(this.navViewName);
-      return result;
-    },
-    noShowSaveButton: function() {
-      return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || 
-        this.navViewName === 'ACCOUNT MANAGEMENT' ||
-        this.activePage === 'PERFORMANCE';
-    },
-    ...mapState(usePageAdminStore, [
-      'activePage',
-      'pendingActivePage',
-      'activePageComputedByRoute',
-      'shouldKeepPreviousPage',
-    ]),
-  },
-  watch: {
-    '$route':'getNavViewName',
-    filterName: function(newVal,) {
-      this.filterName = newVal;
-    },
-  },
-  mounted() {
-    this.handleNavItemBtn();
-    if(this.$route.params.type === 'filter') {
-      this.createFilterId= this.$route.params.fileId;
-    }
-    this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer');
-    this.getNavViewName();
-  },
-  methods: {
-    /**
-     * switch navbar item
-     * @param {event} event 選取 Navbar 選項後傳入的值
-     */
-    onNavItemBtnClick(event) {
-      let type;
-      let fileId;
-      let isCheckPage;
-      const navItemCandidate = event.target.innerText;
+const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdateFilter } = storeToRefs(allMapDataStore);
+const { conformanceRuleData, conformanceLogId, conformanceFilterId,
+  conformanceLogTempCheckId, conformanceFilterTempCheckId,
+  conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
+  isUpdateConformance, conformanceFileName
+} = storeToRefs(conformanceStore);
+const { activePage, pendingActivePage, activePageComputedByRoute, shouldKeepPreviousPage } = storeToRefs(pageAdminStore);
+const { setPendingActivePage, setPreviousPage, setActivePage, setActivePageComputedByRoute, setIsPagePendingBoolean } = pageAdminStore;
 
-      this.setPendingActivePage(navItemCandidate);
+const showNavbarBreadcrumb = ref(false);
+const navViewData = {
+  // 舉例：FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
+  FILES: ['ALL', 'DISCOVER', 'COMPARE'],
+  // 舉例：DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
+  DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
+  // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
+  COMPARE: ['MAP', 'PERFORMANCE'],
+  'ACCOUNT MANAGEMENT': [],
+  'MY ACCOUNT': [],
+};
+const navViewName = ref('FILES');
+const uploadModal = ref(false);
 
-      switch (this.navViewName) {
-        case 'FILES':
-          this.store.filesTag = navItemCandidate;
-          break;
-        case 'DISCOVER':
-          type = this.$route.params.type;
-          fileId = this.$route.params.fileId;
-          isCheckPage = this.$route.name.includes('Check');
+const disabledSave = computed(() => {
+  switch (route.name) {
+    case 'Map':
+    case 'CheckMap':
+      // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+      return !tempFilterId.value;
+    case 'Conformance':
+    case 'CheckConformance':
+      return !(conformanceFilterTempCheckId.value || conformanceLogTempCheckId.value);
+  }
+});
 
-          switch (navItemCandidate) {
-            case 'MAP':
-              if(isCheckPage) {
-                this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
-              }
-              else {
-                this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
-              }
-              break;
-            case 'CONFORMANCE':
-              if(isCheckPage) { // Beware of Swal popup, it might disturb which is the current active page        
-                this.$router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
-              }
-              else { // Beware of Swal popup, it might disturb which is the current active page
-                this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
-              }
-              break
-            case 'PERFORMANCE':
-              if(isCheckPage) {
-                this.$router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
-              }
-              else {
-                this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
-              }
-              break;
+const showIcon = computed(() => {
+  return !['FILES', 'UPLOAD'].includes(navViewName.value);
+});
+
+const noShowSaveButton = computed(() => {
+  return navViewName.value === 'UPLOAD' || navViewName.value === 'COMPARE' ||
+    navViewName.value === 'ACCOUNT MANAGEMENT' ||
+    activePage.value === 'PERFORMANCE';
+});
+
+watch(() => route, () => {
+  getNavViewName();
+}, { deep: true });
+
+watch(filterName, (newVal) => {
+  filterName.value = newVal;
+});
+
+/**
+ * switch navbar item
+ * @param {event} event 選取 Navbar 選項後傳入的值
+ */
+function onNavItemBtnClick(event) {
+  let type;
+  let fileId;
+  let isCheckPage;
+  const navItemCandidate = event.target.innerText;
+
+  setPendingActivePage(navItemCandidate);
+
+  switch (navViewName.value) {
+    case 'FILES':
+      store.filesTag = navItemCandidate;
+      break;
+    case 'DISCOVER':
+      type = route.params.type;
+      fileId = route.params.fileId;
+      isCheckPage = route.name.includes('Check');
+
+      switch (navItemCandidate) {
+        case 'MAP':
+          if(isCheckPage) {
+            router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
+          }
+          else {
+            router.push({name: 'Map', params: { type: type, fileId: fileId }});
           }
           break;
-        case 'COMPARE':
-          switch (navItemCandidate) {
-            case 'MAP':
-              this.$router.push({name: 'MapCompare', params: this.mapCompareStore.routeParam});
-              break;
-            case 'PERFORMANCE':
-              this.$router.push({name: 'CompareDashboard', params: this.mapCompareStore.routeParam});
-              break;
-            default:
-              break;
+        case 'CONFORMANCE':
+          if(isCheckPage) { // Beware of Swal popup, it might disturb which is the current active page
+            router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
           }
-      };
-    },
-    /**
-     * Based on the route.name, decide the navViewName.
-     * @returns {string} the string of navigation name to return
-     */
-    getNavViewName() {
-
-      const name = this.$route.name;
-      let valueToSet;
-
-      if(this.$route.name === 'NotFound404') {
-        return;
-      }
-
-      // 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
-      this.navViewName = this.$route.matched[1].name.toUpperCase();
-      this.store.filesTag = 'ALL';
-      switch (this.navViewName) {
-        case 'FILES':
-          valueToSet = this.navItemCandidate;
-          break;
-        case 'DISCOVER':
-          switch (name) {
-            case 'Map':
-            case 'CheckMap':
-              valueToSet = 'MAP';
-              break;
-            case 'Conformance':
-            case 'CheckConformance':
-              valueToSet = 'CONFORMANCE';
-              break;
-            case 'Performance':
-            case 'CheckPerformance':
-              valueToSet = 'PERFORMANCE';
-              break;
+          else { // Beware of Swal popup, it might disturb which is the current active page
+            router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
           }
-          break;
-        case 'COMPARE':
-          switch(name) {
-            case 'dummy':
-            case 'CompareDashboard':
-              valueToSet = 'DASHBOARD';
-              break;
-            default:
-              break;
+          break
+        case 'PERFORMANCE':
+          if(isCheckPage) {
+            router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
+          }
+          else {
+            router.push({name: 'Performance', params: { type: type, fileId: fileId }});
           }
           break;
       }
-
-      // Frontend is not sure which button will the user press on the modal,
-      // so here we need to save to a pending state
-      // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
-      // 因此我們需要將其保存到待處理狀態
-      if(!this.shouldKeepPreviousPage) { // 若使用者不是按下取消按鈕或是點選按鈕時
-        this.setPendingActivePage(valueToSet);
-      }
-      
-
-      return valueToSet;
-    },
-    /**
-     * Save button' modal
-     */
-     async saveModal() {
-    // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
-    // 傳給 Map，通知 Sidebar 要關閉。
-    this.$emitter.emit('saveModal', false);
-
-    switch (this.$route.name) {
-        case 'Map':
-            await this.handleMapSave();
-            break;
-        case 'CheckMap':
-            await this.handleCheckMapSave();
-            break;
-        case 'Conformance':
-        case 'CheckConformance':
-            await this.handleConformanceSave();
-            break;
+      break;
+    case 'COMPARE':
+      switch (navItemCandidate) {
+        case 'MAP':
+          router.push({name: 'MapCompare', params: mapCompareStore.routeParam});
+          break;
+        case 'PERFORMANCE':
+          router.push({name: 'CompareDashboard', params: mapCompareStore.routeParam});
+          break;
         default:
-            break;
+          break;
       }
-    },
-    /**
-     * Set nav item button background color in case the variable is an empty string
-     */
-    handleNavItemBtn() {
-      if(this.activePageComputedByRoute === "") {
-        this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
-      }
-    },
-    async handleMapSave() {
-      if (this.createFilterId) {
-        await this.allMapDataStore.updateFilter();
-        if (this.isUpdateFilter) {
-            await savedSuccessfully(this.filterName);
-          }
-      } else if (this.logId) {
-        const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
-        if (isSaved) {
-            this.setActivePage('MAP');
-            await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
-        }
-      }
-    },
-    async handleCheckMapSave() {
-      const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
-      if (isSaved) {
-          this.setActivePage('MAP');
-          await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
-      }
-    },
-    async handleConformanceSave() {
-      if (this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId) {
-          await this.conformanceStore.updateConformance();
-          if (this.isUpdateConformance) {
-              await savedSuccessfully(this.conformanceFileName);
-          }
-      } else {
-          const isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
-          if (isSaved) {
-              if (this.conformanceLogId) {
-                  this.setActivePage('CONFORMANCE');
-                  await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
-              } else if (this.conformanceFilterId) {
-                  this.setActivePage('CONFORMANCE');
-                  await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
-              }
-          }
-      }
-    },
-    ...mapActions(usePageAdminStore, [
-      'setPendingActivePage',
-      'setPreviousPage',
-      'setActivePage',
-      'setActivePageComputedByRoute',
-      'setIsPagePendingBoolean',
-    ],),
-  },
+  };
 }
+
+/**
+ * Based on the route.name, decide the navViewName.
+ * @returns {string} the string of navigation name to return
+ */
+function getNavViewName() {
+
+  const name = route.name;
+  let valueToSet;
+
+  if(route.name === 'NotFound404' || !route.matched[1]) {
+    return;
+  }
+
+  // 說明route.matched[1] 表示當前路由匹配的第二個路由記錄
+  navViewName.value = route.matched[1].name.toUpperCase();
+  store.filesTag = 'ALL';
+  switch (navViewName.value) {
+    case 'FILES':
+      valueToSet = activePage.value;
+      break;
+    case 'DISCOVER':
+      switch (name) {
+        case 'Map':
+        case 'CheckMap':
+          valueToSet = 'MAP';
+          break;
+        case 'Conformance':
+        case 'CheckConformance':
+          valueToSet = 'CONFORMANCE';
+          break;
+        case 'Performance':
+        case 'CheckPerformance':
+          valueToSet = 'PERFORMANCE';
+          break;
+      }
+      break;
+    case 'COMPARE':
+      switch(name) {
+        case 'dummy':
+        case 'CompareDashboard':
+          valueToSet = 'DASHBOARD';
+          break;
+        default:
+          break;
+      }
+      break;
+  }
+
+  // Frontend is not sure which button will the user press on the modal,
+  // so here we need to save to a pending state
+  // 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
+  // 因此我們需要將其保存到待處理狀態
+  if(!shouldKeepPreviousPage.value) { // 若使用者不是按下取消按鈕或是點選按鈕時
+    setPendingActivePage(valueToSet);
+  }
+
+
+  return valueToSet;
+}
+
+/**
+ * Save button' modal
+ */
+async function saveModal() {
+  // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
+  // 傳給 Map，通知 Sidebar 要關閉。
+  emitter.emit('saveModal', false);
+
+  switch (route.name) {
+      case 'Map':
+          await handleMapSave();
+          break;
+      case 'CheckMap':
+          await handleCheckMapSave();
+          break;
+      case 'Conformance':
+      case 'CheckConformance':
+          await handleConformanceSave();
+          break;
+      default:
+          break;
+    }
+}
+
+/**
+ * Set nav item button background color in case the variable is an empty string
+ */
+function handleNavItemBtn() {
+  if(activePageComputedByRoute.value === "") {
+    setActivePageComputedByRoute(route.matched[route.matched.length - 1].name);
+  }
+}
+
+async function handleMapSave() {
+  if (createFilterId.value) {
+    await allMapDataStore.updateFilter();
+    if (isUpdateFilter.value) {
+        await savedSuccessfully(filterName.value);
+      }
+  } else if (logId.value) {
+    const isSaved = await saveFilter(allMapDataStore.addFilterId);
+    if (isSaved) {
+        setActivePage('MAP');
+        await router.push(`/discover/filter/${createFilterId.value}/map`);
+    }
+  }
+}
+
+async function handleCheckMapSave() {
+  const isSaved = await saveFilter(allMapDataStore.addFilterId);
+  if (isSaved) {
+      setActivePage('MAP');
+      await router.push(`/discover/filter/${createFilterId.value}/map`);
+  }
+}
+
+async function handleConformanceSave() {
+  if (conformanceFilterCreateCheckId.value || conformanceLogCreateCheckId.value) {
+      await conformanceStore.updateConformance();
+      if (isUpdateConformance.value) {
+          await savedSuccessfully(conformanceFileName.value);
+      }
+  } else {
+      const isSaved = await saveConformance(conformanceStore.addConformanceCreateCheckId);
+      if (isSaved) {
+          if (conformanceLogId.value) {
+              setActivePage('CONFORMANCE');
+              await router.push(`/discover/conformance/log/${conformanceLogCreateCheckId.value}/conformance`);
+          } else if (conformanceFilterId.value) {
+              setActivePage('CONFORMANCE');
+              await router.push(`/discover/conformance/filter/${conformanceFilterCreateCheckId.value}/conformance`);
+          }
+      }
+  }
+}
+
+onMounted(() => {
+  handleNavItemBtn();
+  if(route.params.type === 'filter') {
+    createFilterId.value = route.params.fileId;
+  }
+  showNavbarBreadcrumb.value = route.matched[0].name !== ('AuthContainer');
+  getNavViewName();
+});
 </script>
 <style scoped>
 #searchFiles::-webkit-search-cancel-button{
diff --git a/src/components/Search.vue b/src/components/Search.vue
index a4b4863..9e4c97d 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -2,8 +2,8 @@
   <form role="search">
     <label for="searchFiles" class="mr-4 relative" htmlFor="searchFiles">
       Search
-      <input type="search" id="searchFiles" placeholder="Search Activity" class="px-5 py-2 w-52 rounded-full text-sm align-middle 
-        duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring 
+      <input type="search" id="searchFiles" placeholder="Search Activity" class="px-5 py-2 w-52 rounded-full text-sm align-middle
+        duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring
         focus:border-neutral-500"/>
       <span class="absolute top-2 bottom-0.5 right-0.5 flex justify-center items-center gap-2">
         <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
@@ -16,14 +16,7 @@
   </form>
 </template>
 
-<script>
+<script setup>
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
-
-export default {
-  components: {
-    IconSearch,
-    IconSetting
-  }
-}
 </script>
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index d277b7c..1f1195f 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -27,7 +27,7 @@
         :data-max="tUnits[unit].max"
         :data-min="tUnits[unit].min"
         :maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
-        
+
         @focus="onFocus"
         @change="onChange"
         @keyup="onKeyUp"
@@ -39,422 +39,320 @@
 </div>
 </template>
 
-<script>
-//:value="tUnits[unit].val.toString().padStart(2, '0')"
-import { mapActions, } from 'pinia';
-import { useConformanceInputStore } from '@/stores/conformanceInput';
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import emitter from '@/utils/emitter';
 
-export default {
-  props: {
-    max: {
-      type: Number,
-      default: 0,
-      required: true,
-      validator(value) {
-        return value >= 0;
-      },
+const props = defineProps({
+  max: {
+    type: Number,
+    default: 0,
+    required: true,
+    validator(value) {
+      return value >= 0;
     },
-    min: {
-      type: Number,
-      default: 0,
-      required: true,
-      validator(value) {
-        return value >= 0;
-      },
-    },
-    updateMax: {
-      type: Number,
-      required: false,
-      validator(value) {
-        return value >= 0;
-      },
-    },
-    updateMin: {
-      type: Number,
-      required: false,
-      validator(value) {
-        return value >= 0;
-      },
-    },
-    size: {
-      type: String,
-      default: false,
-      required: true,
-    },
-    value: {
-      type: Number,
-      required: false,
-      validator(value) {
-        return value >= 0;
-      },
-    }
   },
-  data() {
+  min: {
+    type: Number,
+    default: 0,
+    required: true,
+    validator(value) {
+      return value >= 0;
+    },
+  },
+  updateMax: {
+    type: Number,
+    required: false,
+    validator(value) {
+      return value >= 0;
+    },
+  },
+  updateMin: {
+    type: Number,
+    required: false,
+    validator(value) {
+      return value >= 0;
+    },
+  },
+  size: {
+    type: String,
+    default: false,
+    required: true,
+  },
+  value: {
+    type: Number,
+    required: false,
+    validator(value) {
+      return value >= 0;
+    },
+  }
+});
+
+const emit = defineEmits(['total-seconds']);
+
+const display = ref('dhms');
+const seconds = ref(0);
+const minutes = ref(0);
+const hours = ref(0);
+const days = ref(0);
+const maxDays = ref(0);
+const minDays = ref(0);
+const totalSeconds = ref(0);
+const maxTotal = ref(null);
+const minTotal = ref(null);
+const inputTypes = ref([]);
+const lastInput = ref(null);
+const openTimeSelect = ref(false);
+
+const tUnits = computed({
+  get() {
     return {
-      display: 'dhms', // d: day; h: hour; m: month; s: second.
-      seconds: 0,
-      minutes: 0,
-      hours: 0,
-      days: 0,
-      maxDays: 0,
-      minDays: 0,
-      totalSeconds: 0,
-      maxTotal: null,
-      minTotal: null,
-      inputTypes: [],
-      lastInput: null,
-      openTimeSelect: false,
+      s: { dsp: 's', inc: 1, val: seconds.value, max: 59, rate: 1, min: 0 },
+      m: { dsp: 'm', inc: 1, val: minutes.value, max: 59, rate: 60, min: 0 },
+      h: { dsp: 'h', inc: 1, val: hours.value, max: 23, rate: 3600, min: 0 },
+      d: { dsp: 'd', inc: 1, val: days.value, max: maxDays.value, rate: 86400, min: minDays.value }
     };
   },
-  computed: {
-    tUnits: {
-      get() {
-        return {
-          s: { dsp: 's', inc: 1, val: this.seconds, max: 59, rate: 1, min: 0 },
-          m: { dsp: 'm', inc: 1, val: this.minutes, max: 59, rate: 60, min: 0 },
-          h: { dsp: 'h', inc: 1, val: this.hours, max: 23, rate: 3600, min: 0 },
-          d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays }
-        };
-      },
-      set(newValues) {
-        // When the input value exceeds the acceptable maximum value, the front end
-        // should set the value to be equal to the maximum value.
-        // 當輸入的數值大於可接受的最大值時，前端要將數值設定成等同於最大值
-        for (const unit in newValues) {
-          this[unit] = newValues[unit].val;
-          const input = document.querySelector(`[data-tunit="${unit}"]`);
-          if (input) {
-            input.value = newValues[unit].val.toString();
-          }
-        }
-      },
-    },
-    inputTimeFields: {
-      get() {
-        const paddedTimeFields = [];
-        this.inputTypes.forEach(inputTypeUnit => {
-          // Pad the dd/hh/mm/ss field string to 2 digits and add it to the list
-          paddedTimeFields.push(this.tUnits[inputTypeUnit].val.toString().padStart(2, '0'));
-        });
-        return paddedTimeFields;
-      },
+  set(newValues) {
+    for (const unit in newValues) {
+      switch (unit) {
+        case 's': seconds.value = newValues[unit].val; break;
+        case 'm': minutes.value = newValues[unit].val; break;
+        case 'h': hours.value = newValues[unit].val; break;
+        case 'd': days.value = newValues[unit].val; break;
+      }
+      const input = document.querySelector(`[data-tunit="${unit}"]`);
+      if (input) {
+        input.value = newValues[unit].val.toString();
+      }
     }
   },
-  watch: {
-    max: {
-      handler: function(newValue, oldValue) {
-        this.maxTotal = newValue;
-        if(this.size === 'max' && newValue !== oldValue) {
-          this.createData();
-        };
-      },
-      immediate: true,
-    },
-    min: {
-      handler: function(newValue, oldValue) {
-        this.minTotal = newValue;
-        if( this.size === 'min' && newValue !== oldValue){
-          this.createData();
-        }
-      },
-      immediate: true,
-    },
-    // min 的最大值要等於 max 的總秒數
-    updateMax: {
-      handler: function(newValue, oldValue) {
-        this.maxTotal = newValue;
-        this.calculateTotalSeconds();
-      },
-    },
-    updateMin: {
-      handler: function(newValue, oldValue) {
-        this.minTotal = newValue;
-        this.calculateTotalSeconds();
-      },
-    },
-  },
-  methods: {
-    /**
-     * 關閉選單視窗
-     */
-    onClose () {
-    this.openTimeSelect = false;
-    },
-    /**
-     * get focus element
-     * @param {event} event input 傳入的事件
-     */
-    onFocus(event) {
-      this.lastInput = event.target;
-      this.lastInput.select(); // 當呼叫該方法時，文本框內的文字會被自動選中，這樣使用者可以方便地進行複製或刪除等操作。
-    },
-    /**
-     * when blur update input value and show number
-     * @param {event} event input 傳入的事件
-     */
-    onChange(event) {
-      const baseInputValue = event.target.value;
-      let decoratedInputValue;
-      // 讓前綴數字自動補 0
-      if(isNaN(event.target.value)){
-        event.target.value = '00';
-      } else {
-        event.target.value = event.target.value.toString();
-      }
-      decoratedInputValue = event.target.value.toString();
+});
 
-      // 手 key 數值大於最大值時，要等於最大值
-      // 先將字串轉為數字才能比大小
-      const inputValue = parseInt(event.target.value, 10);
-      const max = parseInt(event.target.dataset.max, 10); // 設定最大值
-      const min = parseInt(event.target.dataset.min, 10);
-      if(inputValue > max) {
-        decoratedInputValue = max.toString().padStart(2, '0');
-      }else if(inputValue < min) {
-        decoratedInputValue= min.toString();
-      }
-      // 數值更新, tUnits 也更新, 並計算 totalSeconds
-      const dsp = event.target.dataset.tunit;
-      this.tUnits[dsp].val = decoratedInputValue;
-      switch (dsp) {
-        case 'd':
-          this.days = baseInputValue;
-          break;
-        case 'h':
-          this.hours = decoratedInputValue;
-          break;
-        case 'm':
-          this.minutes = decoratedInputValue;
-          break;
-        case 's':
-          this.seconds = decoratedInputValue;
-          break;
-      };
+const inputTimeFields = computed(() => {
+  const paddedTimeFields = [];
+  inputTypes.value.forEach(inputTypeUnit => {
+    paddedTimeFields.push(tUnits.value[inputTypeUnit].val.toString().padStart(2, '0'));
+  });
+  return paddedTimeFields;
+});
 
-      this.calculateTotalSeconds();
-    },
-    /**
-     * 上下箭頭時的行為
-     * @param {event} event input 傳入的事件
-     */
-    onKeyUp(event) {
-      // 正規表達式 \D 即不是 0-9 的字符
-      event.target.value = event.target.value.replace(/\D/g, '');
+function onClose() {
+  openTimeSelect.value = false;
+}
 
-      // 38：上箭頭鍵（Arrow Up）
-      // 40：下箭頭鍵（Arrow Down）
-      if (event.keyCode === 38 || event.keyCode === 40) {
-        this.actionUpDown(event.target, event.keyCode === 38, true);
-      };
-    },
-    /**
-     * 上下箭頭時的行為
-     * @param {element} input input 傳入的事件
-     * @param {number} goUp 上箭頭的鍵盤代號
-     * @param {boolean} selectIt 是否已執行
-     */
-     actionUpDown(input, goUp, selectIt = false) {
-        const tUnit = input.dataset.tunit;
-        let newVal = this.getNewValue(input);
+function onFocus(event) {
+  lastInput.value = event.target;
+  lastInput.value.select();
+}
 
-        if (goUp) {
-            newVal = this.handleArrowUp(newVal, tUnit, input);
-        } else {
-            newVal = this.handleArrowDown(newVal, tUnit);
-        }
+function onChange(event) {
+  const baseInputValue = event.target.value;
+  let decoratedInputValue;
+  if(isNaN(event.target.value)){
+    event.target.value = '00';
+  } else {
+    event.target.value = event.target.value.toString();
+  }
+  decoratedInputValue = event.target.value.toString();
 
-        this.updateInputValue(input, newVal, tUnit);
-        if (selectIt) {
-            input.select();
-        }
-        this.calculateTotalSeconds();
-    },
+  const inputValue = parseInt(event.target.value, 10);
+  const max = parseInt(event.target.dataset.max, 10);
+  const min = parseInt(event.target.dataset.min, 10);
+  if(inputValue > max) {
+    decoratedInputValue = max.toString().padStart(2, '0');
+  }else if(inputValue < min) {
+    decoratedInputValue= min.toString();
+  }
+  const dsp = event.target.dataset.tunit;
+  tUnits.value[dsp].val = decoratedInputValue;
+  switch (dsp) {
+    case 'd':
+      days.value = baseInputValue;
+      break;
+    case 'h':
+      hours.value = decoratedInputValue;
+      break;
+    case 'm':
+      minutes.value = decoratedInputValue;
+      break;
+    case 's':
+      seconds.value = decoratedInputValue;
+      break;
+  };
 
-    /**
-     * 獲取新的數值
-     * @param {element} input 輸入的元素
-     * @returns {number} 新的數值
-     */
-    getNewValue(input) {
-        const newVal = parseInt(input.value, 10);
-        return isNaN(newVal) ? 0 : newVal;
-    },
+  calculateTotalSeconds();
+}
 
-    /**
-     * 處理向上箭頭的行為
-     * @param {number} newVal 當前數值
-     * @param {string} tUnit 時間單位
-     * @param {element} input 輸入的元素
-     * @returns {number} 更新後的數值
-     */
-    handleArrowUp(newVal, tUnit, input) {
-        newVal += this.tUnits[tUnit].inc;
-        if (newVal > this.tUnits[tUnit].max) {
-            if (this.tUnits[tUnit].dsp === 'd') {
-                this.totalSeconds = this.maxTotal;
-            } else {
-                newVal = newVal % (this.tUnits[tUnit].max + 1);
-                this.incrementPreviousUnit(input);
-            }
-        }
-        return newVal;
-    },
+function onKeyUp(event) {
+  event.target.value = event.target.value.replace(/\D/g, '');
+  if (event.keyCode === 38 || event.keyCode === 40) {
+    actionUpDown(event.target, event.keyCode === 38, true);
+  };
+}
 
-    /**
-     * 處理向下箭頭的行為
-     * @param {number} newVal 當前數值
-     * @param {string} tUnit 時間單位
-     * @returns {number} 更新後的數值
-     */
-    handleArrowDown(newVal, tUnit) {
-        newVal -= this.tUnits[tUnit].inc;
-        if (newVal < 0) {
-            newVal = (this.tUnits[tUnit].max + 1) - this.tUnits[tUnit].inc;
-        }
-        return newVal;
-    },
+function actionUpDown(input, goUp, selectIt = false) {
+  const tUnit = input.dataset.tunit;
+  let newVal = getNewValue(input);
 
-    /**
-     * 進位前一個更大的單位
-     * @param {element} input 輸入的元素
-     */
-    incrementPreviousUnit(input) {
-        if (input.dataset.index > 0) {
-            const prevUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
-            this.actionUpDown(prevUnit, true);
-        }
-    },
+  if (goUp) {
+    newVal = handleArrowUp(newVal, tUnit, input);
+  } else {
+    newVal = handleArrowDown(newVal, tUnit);
+  }
 
-    /**
-     * 更新輸入框的數值
-     * @param {element} input 輸入的元素
-     * @param {number} newVal 新的數值
-     * @param {string} tUnit 時間單位
-     */
-    updateInputValue(input, newVal, tUnit) {
-        input.value = newVal.toString();
-        switch (tUnit) {
-            case 'd':
-                this.days = input.value;
-                break;
-            case 'h':
-                this.hours = input.value;
-                break;
-            case 'm':
-                this.minutes = input.value;
-                break;
-            case 's':
-                this.seconds = input.value;
-                break;
-        }
-    },
-    /**
-     * 設定 dhms 的數值
-     * @param {number} totalSeconds 總秒數
-     * @param {string} size 'min' | 'max'，可選以上任一，最大值或最小值
-     */
-    secondToDate(totalSeconds, size) {
-      totalSeconds = parseInt(totalSeconds);
-      if(!isNaN(totalSeconds)) {
-        this.seconds = totalSeconds % 60;
-        this.minutes = (Math.floor(totalSeconds - this.seconds) / 60) % 60;
-        this.hours = (Math.floor(totalSeconds / 3600)) % 24;
-        this.days = Math.floor(totalSeconds / (3600 * 24));
+  updateInputValue(input, newVal, tUnit);
+  if (selectIt) {
+    input.select();
+  }
+  calculateTotalSeconds();
+}
 
-        if(size === 'max') {
-          this.maxDays = Math.floor(totalSeconds / (3600 * 24));
-        }
-        else if(size === 'min') {
-          this.minDays = Math.floor(totalSeconds / (3600 * 24));
-        }
-      };
-    },
-    /**
-     * 計算總秒數
-     */
-    calculateTotalSeconds() {
-      let totalSeconds = 0;
+function getNewValue(input) {
+  const newVal = parseInt(input.value, 10);
+  return isNaN(newVal) ? 0 : newVal;
+}
 
-      for (const unit in this.tUnits) {
-        const val = parseInt(this.tUnits[unit].val, 10);
-        if (!isNaN(val)) {
-          totalSeconds += val * this.tUnits[unit].rate;
-        }
-      }
-
-      if(totalSeconds >= this.maxTotal){ // 大於最大值時要等於最大值
-        totalSeconds = this.maxTotal;
-        this.secondToDate(this.maxTotal, 'max');
-      } else if (totalSeconds <= this.minTotal) { // 小於最小值時要等於最小值
-        totalSeconds = this.minTotal;
-        this.secondToDate(this.minTotal, 'min');
-      } else if((this.size === 'min' && totalSeconds <= this.maxTotal)) {
-        this.maxDays = Math.floor(this.maxTotal / (3600 * 24));
-      }
-      this.totalSeconds = totalSeconds;
-      this.$emit('total-seconds', totalSeconds);
-    },
-    /**
-     * 初始化
-     */
-    async createData() {
-      const size = this.size;
-
-      if (this.maxTotal !== await null && this.minTotal !== await null) {
-        switch (size) {
-          case 'max':
-            this.secondToDate(this.minTotal, 'min');
-            this.secondToDate(this.maxTotal, 'max');
-            this.totalSeconds = this.maxTotal;
-            if(this.value !== null) {
-              this.totalSeconds = this.value;
-              this.secondToDate(this.value);
-            }
-            break;
-          case 'min':
-            this.secondToDate(this.maxTotal, 'max');
-            this.secondToDate(this.minTotal, 'min');
-            this.totalSeconds = this.minTotal;
-            if(this.value !== null) {
-              this.totalSeconds =  this.value;
-              this.secondToDate(this.value);
-            }
-            break;
-        }
-      }
-    },
-    ...mapActions(
-      useConformanceInputStore,[]
-    ),
-  },
-  created() {
-    this.$emitter.on('reset', (data) => {
-      this.createData();
-    });
-  },
-  mounted() {
-    this.inputTypes = this.display.split('');
-  },
-  directives: {
-    'closable': {
-      mounted(el, {value}) {
-        const handleOutsideClick = function(e) {
-          let target = e.target;
-          while (target && target.id !== value.id) {
-            target = target.parentElement;
-          };
-          const isClickOutside = target?.id !== value.id && !el.contains(e.target)
-          if (isClickOutside) {
-            value.handler();
-          }
-          e.stopPropagation();
-        }
-        document.addEventListener('click', handleOutsideClick);
-        return () => {
-          document.removeEventListener('click', handleOutsideClick);
-        };
-      },
+function handleArrowUp(newVal, tUnit, input) {
+  newVal += tUnits.value[tUnit].inc;
+  if (newVal > tUnits.value[tUnit].max) {
+    if (tUnits.value[tUnit].dsp === 'd') {
+      totalSeconds.value = maxTotal.value;
+    } else {
+      newVal = newVal % (tUnits.value[tUnit].max + 1);
+      incrementPreviousUnit(input);
     }
+  }
+  return newVal;
+}
+
+function handleArrowDown(newVal, tUnit) {
+  newVal -= tUnits.value[tUnit].inc;
+  if (newVal < 0) {
+    newVal = (tUnits.value[tUnit].max + 1) - tUnits.value[tUnit].inc;
+  }
+  return newVal;
+}
+
+function incrementPreviousUnit(input) {
+  if (input.dataset.index > 0) {
+    const prevUnit = document.querySelector(`input[data-index="${parseInt(input.dataset.index) - 1}"]`);
+    actionUpDown(prevUnit, true);
+  }
+}
+
+function updateInputValue(input, newVal, tUnit) {
+  input.value = newVal.toString();
+  switch (tUnit) {
+    case 'd':
+      days.value = input.value;
+      break;
+    case 'h':
+      hours.value = input.value;
+      break;
+    case 'm':
+      minutes.value = input.value;
+      break;
+    case 's':
+      seconds.value = input.value;
+      break;
+  }
+}
+
+function secondToDate(totalSec, size) {
+  totalSec = parseInt(totalSec);
+  if(!isNaN(totalSec)) {
+    seconds.value = totalSec % 60;
+    minutes.value = (Math.floor(totalSec - seconds.value) / 60) % 60;
+    hours.value = (Math.floor(totalSec / 3600)) % 24;
+    days.value = Math.floor(totalSec / (3600 * 24));
+
+    if(size === 'max') {
+      maxDays.value = Math.floor(totalSec / (3600 * 24));
+    }
+    else if(size === 'min') {
+      minDays.value = Math.floor(totalSec / (3600 * 24));
+    }
+  };
+}
+
+function calculateTotalSeconds() {
+  let total = 0;
+
+  for (const unit in tUnits.value) {
+    const val = parseInt(tUnits.value[unit].val, 10);
+    if (!isNaN(val)) {
+      total += val * tUnits.value[unit].rate;
+    }
+  }
+
+  if(total >= maxTotal.value){
+    total = maxTotal.value;
+    secondToDate(maxTotal.value, 'max');
+  } else if (total <= minTotal.value) {
+    total = minTotal.value;
+    secondToDate(minTotal.value, 'min');
+  } else if((props.size === 'min' && total <= maxTotal.value)) {
+    maxDays.value = Math.floor(maxTotal.value / (3600 * 24));
+  }
+  totalSeconds.value = total;
+  emit('total-seconds', total);
+}
+
+async function createData() {
+  const size = props.size;
+
+  if (maxTotal.value !== await null && minTotal.value !== await null) {
+    switch (size) {
+      case 'max':
+        secondToDate(minTotal.value, 'min');
+        secondToDate(maxTotal.value, 'max');
+        totalSeconds.value = maxTotal.value;
+        if(props.value !== null) {
+          totalSeconds.value = props.value;
+          secondToDate(props.value);
+        }
+        break;
+      case 'min':
+        secondToDate(maxTotal.value, 'max');
+        secondToDate(minTotal.value, 'min');
+        totalSeconds.value = minTotal.value;
+        if(props.value !== null) {
+          totalSeconds.value = props.value;
+          secondToDate(props.value);
+        }
+        break;
+    }
+  }
+}
+
+// created
+emitter.on('reset', () => {
+  createData();
+});
+
+// mounted
+onMounted(() => {
+  inputTypes.value = display.value.split('');
+});
+
+const vClosable = {
+  mounted(el, {value}) {
+    const handleOutsideClick = function(e) {
+      let target = e.target;
+      while (target && target.id !== value.id) {
+        target = target.parentElement;
+      };
+      const isClickOutside = target?.id !== value.id && !el.contains(e.target)
+      if (isClickOutside) {
+        value.handler();
+      }
+      e.stopPropagation();
+    }
+    document.addEventListener('click', handleOutsideClick);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
   },
 };
 </script>
diff --git a/src/components/icons/IconChecked.vue b/src/components/icons/IconChecked.vue
index c4a5893..909bba7 100644
--- a/src/components/icons/IconChecked.vue
+++ b/src/components/icons/IconChecked.vue
@@ -5,30 +5,18 @@
         <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
         <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
     </div>
-    
+
 </template>
 
-<script>
-import { defineComponent, computed, } from 'vue';
+<script setup>
 import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
 import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
 import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
 
-export default defineComponent({
-    props: {
-        isChecked: {
+defineProps({
+    isChecked: {
         type: Boolean,
-        required: true // 表示这个 props 是必需的
-        },
-    },
-    setup(props) {
-        const isChecked = computed(() => props.isChecked);
-        return {
-            ImgCheckboxBlueFrame,
-            ImgCheckboxCheckedMark,
-            ImgCheckboxGrayFrame,
-            isChecked,
-        };
+        required: true,
     },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/main.ts b/src/main.ts
index e74f6d7..357a285 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import App from "./App.vue";
 import router from "./router";
 import pinia from '@/stores/main';
 import moment from 'moment';
-import mitt from 'mitt';
+import emitter from '@/utils/emitter';
 import ToastPlugin from 'vue-toast-notification';
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
@@ -44,7 +44,6 @@ import Checkbox from 'primevue/checkbox';
 import Dialog from 'primevue/dialog';
 import ContextMenu from 'primevue/contextmenu';
 
-const emitter = mitt();
 const app = createApp(App);
 
 // Pinia Set
diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
new file mode 100644
index 0000000..4b06ecd
--- /dev/null
+++ b/src/utils/emitter.ts
@@ -0,0 +1,5 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+
+export default emitter;
diff --git a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
index df9f8c8..1b0e350 100644
--- a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
+++ b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
@@ -16,7 +16,7 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer 
+                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer
                                     whitespace-nowrap overflow-hidden text-ellipsis">
                                     {{ slotProps.data.username }}
                                 </div>
@@ -63,10 +63,10 @@
                                         @click="setIsActiveInput(slotProps.data, false)"/>
                                     <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-activate cursor-pointer flex"
                                         @click="setIsActiveInput(slotProps.data, true)"/>
-                                </div> 
+                                </div>
                             </div>
                             <div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
-                            class="row-container flex-w-full-hoverable flex w-full h-6"></div>                            
+                            class="row-container flex-w-full-hoverable flex w-full h-6"></div>
                         </template>
                     </Column>
                     <Column :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500" headerClass="header-center">
@@ -88,7 +88,7 @@
                                     @mouseover="handleEditMouseOver(slotProps.data.username)"
                                     @mouseout="handleEditMouseOut(slotProps.data.username)"
                                 />
-                            </div>                            
+                            </div>
                         </template>
                     </Column>
                     <Column :header="i18next.t('AcctMgmt.Delete')" bodyClass="text-neutral-500 flex justify-center" headerClass="header-center">
@@ -112,9 +112,8 @@
     </div>
 </template>
 
-<script>
-import { ref, computed, onMounted, watch, } from 'vue';
-import { mapState, mapActions, } from 'pinia';
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
 import { useLoadingStore } from '@/stores/loading';
 import { useModalStore } from '@/stores/modal';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
@@ -129,304 +128,193 @@ import {
     MODAL_DELETE,
     ONCE_RENDER_NUM_OF_DATA,
   } from "@/constants/constants.js";
-  import iconDeleteGray from '@/assets/icon-delete-gray.svg';
-  import iconDeleteRed from '@/assets/icon-delete-red.svg';
-  import iconEditOff from '@/assets/icon-edit-off.svg';
-  import iconEditOn from '@/assets/icon-edit-on.svg';
-  import iconDetailOn from '@/assets/icon-detail-on.svg';
-  import iconDetailOff from '@/assets/icon-detail-card.svg';
+import iconDeleteGray from '@/assets/icon-delete-gray.svg';
+import iconDeleteRed from '@/assets/icon-delete-red.svg';
+import iconEditOff from '@/assets/icon-edit-off.svg';
+import iconEditOn from '@/assets/icon-edit-on.svg';
+import iconDetailOn from '@/assets/icon-detail-on.svg';
+import iconDetailOff from '@/assets/icon-detail-card.svg';
 
-export default {
-    setup() {
-        const toast = useToast();
-        const acctMgmtStore = useAcctMgmtStore();
-        const loadingStore = useLoadingStore();
-        const modalStore = useModalStore();
-        const loginStore = useLoginStore();
-        const infiniteStart = ref(0);
+const toast = useToast();
+const acctMgmtStore = useAcctMgmtStore();
+const loadingStore = useLoadingStore();
+const modalStore = useModalStore();
+const loginStore = useLoginStore();
+const infiniteStart = ref(0);
 
-        const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
-        
-        const allAccountResponsive = computed(() => acctMgmtStore.allUserAccoutList);
-        const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
-        const loginUserData = ref(null);
+const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
 
-        const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
-        const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
+const allAccountResponsive = computed(() => acctMgmtStore.allUserAccoutList);
+const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
+const loginUserData = ref(null);
 
-        const inputQuery = ref('');
+const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
+const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
 
-        const fetchLoginUserData = async () => {
-            await loginStore.getUserData();
-            loginUserData.value = loginStore.userData;
-        };
+const inputQuery = ref('');
 
-        const moveJustCreateUserToFirstRow = () => {
-            if(infiniteAcctData.value && infiniteAcctData.value.length){
-                const index = acctMgmtStore.allUserAccoutList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
-                if (index !== -1) {
-                    // 移除匹配的對象(剛剛新增的使用者)並將其插入到陣列的第一位
-                    const [justCreateUser] = acctMgmtStore.allUserAccoutList[index];
-                    infiniteAcctData.value.unshift(justCreateUser);
-                }
-            }
-        };
-
-        const accountSearchResults = computed(() => {
-            if(!inputQuery.value) {
-                return infiniteAcctData.value;
-            }
-            return acctMgmtStore.allUserAccoutList.filter (user => user.username.includes(inputQuery.value));
-        });
-
-        const onCreateNewClick = () => {
-            acctMgmtStore.clearCurrentViewingUser();
-            modalStore.openModal(MODAL_CREATE_NEW);
-        };
-
-        
-        const onAcctDoubleClick = (username) => {
-            acctMgmtStore.setCurrentViewingUser(username);
-            modalStore.openModal(MODAL_ACCT_INFO);
-        }
-
-        const handleDeleteMouseOver = (username) => {
-            acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
-        };
-
-        const handleDeleteMouseOut = (username) => {
-            acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
-            acctMgmtStore.changeIsRowHoveredByUser(username, false);
-        };
-
-        const handleRowMouseOver = (username) => {
-            acctMgmtStore.changeIsRowHoveredByUser(username, true);
-        };
-
-        const handleRowMouseOut = (username) => {
-            acctMgmtStore.changeIsRowHoveredByUser(username, false);
-        };
-
-
-        const handleEditMouseOver = (username) => {
-            acctMgmtStore.changeIsEditHoveredByUser(username, true);
-        };
-
-        const handleEditMouseOut = (username) => {
-            acctMgmtStore.changeIsEditHoveredByUser(username, false);
-            acctMgmtStore.changeIsRowHoveredByUser(username, false);
-        };
-
-        const handleDetailMouseOver = (username) => {
-            acctMgmtStore.changeIsDetailHoveredByUser(username, true);
-        };
-
-        const handleDetailMouseOut = (username) => {
-            acctMgmtStore.changeIsDetailHoveredByUser(username, false);
-            acctMgmtStore.changeIsRowHoveredByUser(username, false);
-        };
-        
-        const onEditButtonClick = userNameToEdit => {
-            acctMgmtStore.setCurrentViewingUser(userNameToEdit);
-            modalStore.openModal(MODAL_ACCT_EDIT);
-        }
-
-        const onDeleteBtnClick = (usernameToDelete) => {
-            acctMgmtStore.setCurrentViewingUser(usernameToDelete);
-            modalStore.openModal(MODAL_DELETE);
-        };
-
-        const getRowClass = (curData) => {
-            return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
-        };
-
-        watch(shouldUpdateList, async(newShouldUpdateList) => {
-            if (newShouldUpdateList) {
-                await acctMgmtStore.getAllUserAccounts();             
-                // 當夾帶有infiniteStart.value，就表示依然考慮到無限捲動的需求
-                infiniteAcctData.value = acctMgmtStore.allUserAccoutList.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA);
-                moveJustCreateUserToFirstRow();
-                accountSearchResults.value = infiniteAcctData.value;
-
-            }
-            acctMgmtStore.setShouldUpdateList(false);
-        });
-
-        const onSearchAccountButtonClick = (inputQueryString) => {
-            inputQuery.value = inputQueryString;
-        };
-        
-        const setIsActiveInput = async(userData, inputIsActiveToSet) => {
-            const userDataToReplace = {
-                username: userData.username,
-                name: userData.name,
-                is_active: inputIsActiveToSet,
-            };
-            await acctMgmtStore.editAccount(userData.username, userDataToReplace);
-            acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
-            toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-        }
-
-        const onAdminInputClick = async(userData, inputIsAdminOn) => {
-            const ADMIN_ROLE_NAME = 'admin';
-            switch(inputIsAdminOn) {
-                case true:
-                    await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
-                    break;
-                case false:
-                    await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
-                    break;
-                default:
-                    break;
-            }
-            const userDataToReplace = {
-                username: userData.username,
-                name: userData.name,
-                is_admin: inputIsAdminOn,
-            };
-            
-            acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
-            toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-        }
-
-        onMounted(async () => {
-            loadingStore.setIsLoading(false);
-            await fetchLoginUserData();
-            await acctMgmtStore.getAllUserAccounts();
-        });
-
-        /**
-         * 無限滾動: 監聽 scroll 有沒有滾到底部
-         * @param {element} event 滾動傳入的事件
-            
-            scrollTop，表示容器的垂直滾動位置。具體來說，它是以像素為單位的數值，
-            表示當前內容視窗（可見區域）的頂部距離整個可滾動內容的頂部的距離。
-            簡單來說，scrollTop 指的是滾動條的位置：當滾動條在最上面時，scrollTop 為 0；
-            當滾動條向下移動時，scrollTop 會增加。
-            可是作為：我們目前已經滾動了多少。
-            
-            clientHeight：表示容器的可見高度（不包括滾動條的高度）。它是以像素為單位的數值，
-            表示容器內部的可見區域的高度。
-            與 offsetHeight 不同的是，clientHeight 不包含邊框、內邊距和滾動條的高度，只計算內容區域的高度。
-            
-            scrollHeight：表示容器內部的總內容高度。它是以像素為單位的數值，
-            包括看不見的（需要滾動才能看到的）部分。
-            簡單來說，scrollHeight 是整個可滾動內容的總高度，包括可見區域和需要滾動才能看到的部分。
-         */
-
-        const handleScroll = (event) => {
-            const container = event.target;
-            const smallValue = 3;
-
-            const isOverScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
-            if(isOverScrollHeight){
-                fetchMoreDataVue3();
-            }
-        };
-        
-        const fetchMoreDataVue3 = () => {            
-            if(infiniteAcctData.value.length < acctMgmtStore.allUserAccoutList.length) {
-                infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
-            }  
-        };
-
-        return {
-            accountSearchResults,
-            modalStore,
-            loginUserData,
-            infiniteAcctData,
-            isOneAccountJustCreate,
-            justCreateUsername,
-            onEditButtonClick,
-            onCreateNewClick,
-            onAcctDoubleClick,
-            onSearchAccountButtonClick,
-            handleScroll,
-            getRowClass,
-            onDeleteBtnClick,
-            onAdminInputClick,
-            handleDeleteMouseOver,
-            handleDeleteMouseOut,
-            handleRowMouseOver,
-            handleRowMouseOut,
-            handleEditMouseOver,
-            handleEditMouseOut,
-            handleDetailMouseOver,
-            handleDetailMouseOut,
-            setIsActiveInput,
-            iconDeleteGray,
-            iconDeleteRed,
-            iconEditOff,
-            iconEditOn,
-            iconDetailOn,
-            iconDetailOff,
-        };
-    },
-    data() {
-        return {
-            i18next: i18next,
-            infiniteAcctDataVue2: [],
-            infiniteStart: 0,
-            isInfiniteFinish: true,
-            isInfinitMaxItemsMet: false,
-        };
-    },
-    components: {
-        SearchBar,
-    },
-    computed: {
-        ...mapState(useAcctMgmtStore, ['allUserAccoutList']),
-    },
-    methods: {
-        /**
-         * 無限滾動: 監聽 scroll 有沒有滾到底部
-         * @param {element} event 滾動傳入的事件
-         */
-        handleScrollVue2(event) {
-            if(this.infinitMaxItems || this.infiniteAcctDataVue2.length < ONCE_RENDER_NUM_OF_DATA || this.isInfiniteFinish === false) {
-                return;
-            }
-
-            const container = event.target;
-            const smallValue = 4;
-
-            const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
-
-            if(overScrollHeight){
-                this.fetchMoreDataVue2();
-            }
-        },
-        /**
-         * 無限滾動: 滾到底後，要載入數據
-         */
-        async fetchMoreDataVue2() {
-            this.infiniteFinish = false;
-               this.infiniteStart += ONCE_RENDER_NUM_OF_DATA;
-            this.infiniteAcctDataVue2 = await [...this.infiniteAcctDataVue2, ...this.allUserAccoutList.slice(
-                this.infiniteStart, this.infiniteStart + ONCE_RENDER_NUM_OF_DATA)];
-            this.isInfiniteFinish = true;
-        },
-        onDetailBtnClick(dataKey){
-            this.openModal(MODAL_ACCT_INFO);
-            this.setCurrentViewingUser(dataKey);
-        },
-        onEditBtnClickVue2(clickedUserName){
-            this.setCurrentViewingUser(clickedUserName);
-            this.openModal(MODAL_ACCT_EDIT);                       
-        },
-        ...mapActions(useModalStore, ['openModal']),
-        ...mapActions(useAcctMgmtStore, [
-            'setCurrentViewingUser',
-            'getAllUserAccounts',
-        ]),
-    },
-    created() {
-    },
+const fetchLoginUserData = async () => {
+    await loginStore.getUserData();
+    loginUserData.value = loginStore.userData;
 };
+
+const moveJustCreateUserToFirstRow = () => {
+    if(infiniteAcctData.value && infiniteAcctData.value.length){
+        const index = acctMgmtStore.allUserAccoutList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
+        if (index !== -1) {
+            const [justCreateUser] = acctMgmtStore.allUserAccoutList[index];
+            infiniteAcctData.value.unshift(justCreateUser);
+        }
+    }
+};
+
+const accountSearchResults = computed(() => {
+    if(!inputQuery.value) {
+        return infiniteAcctData.value;
+    }
+    return acctMgmtStore.allUserAccoutList.filter (user => user.username.includes(inputQuery.value));
+});
+
+const onCreateNewClick = () => {
+    acctMgmtStore.clearCurrentViewingUser();
+    modalStore.openModal(MODAL_CREATE_NEW);
+};
+
+
+const onAcctDoubleClick = (username) => {
+    acctMgmtStore.setCurrentViewingUser(username);
+    modalStore.openModal(MODAL_ACCT_INFO);
+}
+
+const handleDeleteMouseOver = (username) => {
+    acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
+};
+
+const handleDeleteMouseOut = (username) => {
+    acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
+    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+};
+
+const handleRowMouseOver = (username) => {
+    acctMgmtStore.changeIsRowHoveredByUser(username, true);
+};
+
+const handleRowMouseOut = (username) => {
+    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+};
+
+
+const handleEditMouseOver = (username) => {
+    acctMgmtStore.changeIsEditHoveredByUser(username, true);
+};
+
+const handleEditMouseOut = (username) => {
+    acctMgmtStore.changeIsEditHoveredByUser(username, false);
+    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+};
+
+const handleDetailMouseOver = (username) => {
+    acctMgmtStore.changeIsDetailHoveredByUser(username, true);
+};
+
+const handleDetailMouseOut = (username) => {
+    acctMgmtStore.changeIsDetailHoveredByUser(username, false);
+    acctMgmtStore.changeIsRowHoveredByUser(username, false);
+};
+
+const onEditButtonClick = userNameToEdit => {
+    acctMgmtStore.setCurrentViewingUser(userNameToEdit);
+    modalStore.openModal(MODAL_ACCT_EDIT);
+}
+
+const onDeleteBtnClick = (usernameToDelete) => {
+    acctMgmtStore.setCurrentViewingUser(usernameToDelete);
+    modalStore.openModal(MODAL_DELETE);
+};
+
+const getRowClass = (curData) => {
+    return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
+};
+
+const onDetailBtnClick = (dataKey) => {
+    acctMgmtStore.setCurrentViewingUser(dataKey);
+    modalStore.openModal(MODAL_ACCT_INFO);
+};
+
+watch(shouldUpdateList, async(newShouldUpdateList) => {
+    if (newShouldUpdateList) {
+        await acctMgmtStore.getAllUserAccounts();
+        moveJustCreateUserToFirstRow();
+    }
+    acctMgmtStore.setShouldUpdateList(false);
+});
+
+const onSearchAccountButtonClick = (inputQueryString) => {
+    inputQuery.value = inputQueryString;
+};
+
+const setIsActiveInput = async(userData, inputIsActiveToSet) => {
+    const userDataToReplace = {
+        username: userData.username,
+        name: userData.name,
+        is_active: inputIsActiveToSet,
+    };
+    await acctMgmtStore.editAccount(userData.username, userDataToReplace);
+    acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
+    toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+}
+
+const onAdminInputClick = async(userData, inputIsAdminOn) => {
+    const ADMIN_ROLE_NAME = 'admin';
+    switch(inputIsAdminOn) {
+        case true:
+            await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
+            break;
+        case false:
+            await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
+            break;
+        default:
+            break;
+    }
+    const userDataToReplace = {
+        username: userData.username,
+        name: userData.name,
+        is_admin: inputIsAdminOn,
+    };
+
+    acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
+    toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+}
+
+/**
+ * 無限滾動: 監聯 scroll 有沒有滾到底部
+ * @param {element} event 滾動傳入的事件
+ */
+const handleScroll = (event) => {
+    const container = event.target;
+    const smallValue = 3;
+
+    const isOverScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
+    if(isOverScrollHeight){
+        fetchMoreDataVue3();
+    }
+};
+
+const fetchMoreDataVue3 = () => {
+    if(infiniteAcctData.value.length < acctMgmtStore.allUserAccoutList.length) {
+        infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
+    }
+};
+
+onMounted(async () => {
+    loadingStore.setIsLoading(false);
+    await fetchLoginUserData();
+    await acctMgmtStore.getAllUserAccounts();
+});
 </script>
 <style>
 /*為了讓 radio 按鈕可以置中，所以讓欄位的文字也置中 */
 .header-center .p-column-header-content{
     justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 01678fc..2dea4b3 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -2,7 +2,7 @@
     <div id="modal_account_edit_or_create_new" class="w-[640px] bg-[#FFFFFF] rounded
         shadow-lg flex flex-col">
         <ModalHeader :headerText="modalTitle"/>
-        
+
         <main class="flex row min-h-[96px] my-[32px] flex-col px-6">
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
@@ -12,7 +12,7 @@
                     </span>
                 </div>
                 <div class="input-and-error flex flex-col">
-                    <input id="input_account_field" 
+                    <input id="input_account_field"
                         class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
                         v-model="inputUserAccount"
                         :class="{
@@ -23,14 +23,14 @@
                         :readonly="!isEditable" autocomplete="off"
                         @dblclick="onInputDoubleClick"
                     />
-                    <div v-show="!isAccountUnique" class="error-wrapper my-2">                    
+                    <div v-show="!isAccountUnique" class="error-wrapper my-2">
                         <div class="error-msg-section flex justify-start">
                         <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                         <span class="error-msg-text flex text-[#FF3366] h-[24px]">
                             {{ i18next.t("AcctMgmt.AccountNotUnique") }}
                         </span>
-                    </div> 
-                </div>                               
+                    </div>
+                </div>
             </div>
             </div>
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
@@ -108,7 +108,7 @@
                     }">
                     {{ i18next.t("AcctMgmt.ConfirmPassword") }}
                 </span>
-            
+
                 <div v-show="false" class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
                     h-[40px] mb-4"
                     :class="{
@@ -148,7 +148,7 @@
                         <IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
                         <span class="flex checkbox-text">
                             {{ i18next.t("AcctMgmt.SetAsAdmin") }}
-                        </span>                    
+                        </span>
                     </div>
                     <div class="checkbox-and-text flex">
                         <IconChecked  :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
@@ -159,7 +159,7 @@
                 </section>
             </div>
         </main>
-        <footer class="flex row footer justify-end pr-[32px] pb-8">            
+        <footer class="flex row footer justify-end pr-[32px] pb-8">
             <button class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
                 flex justify-center items-center text-[#4E5969] font-medium
                 hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
@@ -177,14 +177,13 @@
             >
                 {{ i18next.t("Global.Confirm") }}
             </button>
-        </footer>       
+        </footer>
     </div>
 </template>
 
-<script>
-import { defineComponent, computed, ref, watch, onMounted, } from 'vue';
+<script setup>
+import { computed, ref, watch } from 'vue';
 import i18next from "@/i18n/i18n.js";
-import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
@@ -193,228 +192,178 @@ import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
 import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, PWD_VALID_LENGTH } from '@/constants/constants.js';
 
-export default defineComponent({
-    setup() {
-        const acctMgmtStore = useAcctMgmtStore();
-        const modalStore = useModalStore();
+const acctMgmtStore = useAcctMgmtStore();
+const modalStore = useModalStore();
 
-        const router = useRouter();
-        const toast = useToast();
+const router = useRouter();
+const toast = useToast();
 
-        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
-        const isPwdEyeOn = ref(false);
-        const isConfirmDisabled = ref(true);
-        const isPwdLengthValid = ref(true);
-        const isResetPwdSectionShow = ref(false);
+const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+const isPwdEyeOn = ref(false);
+const isConfirmDisabled = ref(true);
+const isPwdLengthValid = ref(true);
+const isResetPwdSectionShow = ref(false);
 
-        const isSetAsAdminChecked = ref(false);
-        const isSetActivedChecked = ref(true);
+const isSetAsAdminChecked = ref(false);
+const isSetActivedChecked = ref(true);
 
-        const whichCurrentModal = computed(() => modalStore.whichModal);
+const whichCurrentModal = computed(() => modalStore.whichModal);
 
-        const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
-        const username = computed(() => acctMgmtStore.currentViewingUser.username);
-        const name = computed(() => acctMgmtStore.currentViewingUser.name);
-        
-        const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
-        const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
-        const inputPwd = ref("");
-        const isAccountUnique = ref(true);
-        const isEditable = ref(true);
+const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
+const username = computed(() => acctMgmtStore.currentViewingUser.username);
+const name = computed(() => acctMgmtStore.currentViewingUser.name);
 
-        // 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 欄位了。
-        watch(whichCurrentModal, (newVal) => {
-            if (newVal === MODAL_CREATE_NEW) {
-                inputUserAccount.value = '';
-                inputName.value = '';
-            } else {
-                inputUserAccount.value = currentViewingUser.value.username;
-                inputName.value = currentViewingUser.value.name;
-            }
-        });
+const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
+const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
+const inputPwd = ref("");
+const isAccountUnique = ref(true);
+const isEditable = ref(true);
 
-        const modalTitle = computed(() => {
-            return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
-        });
-
-        const togglePwdEyeBtn = (toBeOpen) => {
-            isPwdEyeOn.value = toBeOpen;
-        };
-
-        const validatePwdLength = () => {
-            isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
-        }
-
-        const onInputDoubleClick = () => {
-            // 允許編輯模式
-            isEditable.value = true;
-        }
-
-        const onConfirmBtnClick = async () => {
-            // rule for minimum length
-            validatePwdLength();
-            if(!isPwdLengthValid.value) {
-                return;
-            }
-            
-            // rule for account uniqueness
-            switch(whichCurrentModal.value) {
-                case MODAL_CREATE_NEW:
-                    await checkAccountIsUnique();
-                    if(!isAccountUnique.value) {
-                        return;
-                    }                
-                    await acctMgmtStore.createNewAccount({
-                        username: inputUserAccount.value,
-                        password: inputPwd.value === undefined ? '' : inputPwd.value,
-                        name: inputName.value,
-                        is_admin: isSetAsAdminChecked.value,
-                        is_active: isSetActivedChecked.value,
-                    });
-                    await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
-                    await modalStore.closeModal();
-                    acctMgmtStore.setShouldUpdateList(true);
-                    await router.push('/account-admin');
-                break;
-                case MODAL_ACCT_EDIT:
-                    await checkAccountIsUnique();
-                    if(!isAccountUnique.value) {
-                        return;
-                    }   
-                    // 要注意的是舊的username跟新的username可以是不同的
-                    // 區分有無傳入密碼的情況
-                    if(isResetPwdSectionShow.value) {
-                        await acctMgmtStore.editAccount(
-                            currentViewingUser.value.username, {
-                            newUsername: inputUserAccount.value,
-                            password: inputPwd.value,
-                            name: inputName.value === undefined ? '' : inputName.value,
-                            is_active: true,
-                        });
-                    } else {
-                        await acctMgmtStore.editAccount(
-                            currentViewingUser.value.username, {
-                            newUsername: inputUserAccount.value,
-                            name: inputName.value === undefined ? '' : inputName.value,
-                            is_active: true,
-                        });
-                    }                    
-                    await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-                    isEditable.value = false;
-                    break;
-                default:
-                break;
-            }
-        }
-
-        const checkAccountIsUnique = async() => {
-            // 如果使用者沒有更動過欄位，那就不用調用任何後端的API
-            if(inputUserAccount.value === username.value) {
-                return true;
-            }
-            const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
-            isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
-            return isAccountUnique.value;
-        };
-
-        const toggleIsAdmin = () => {
-            if(isEditable){
-                isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
-            }            
-        }
-
-        const toggleIsActivated = () => {
-            if(isEditable){
-                isSetActivedChecked.value = !isSetActivedChecked.value;
-            }
-        }
-
-        const onInputNameFocus = () => {
-            if(isConfirmDisabled.value){
-                isConfirmDisabled.value = false;
-            }
-        }
-
-        const onResetPwdButtonClick = () => {
-            isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
-            // 必須清空密碼欄位輸入的字串
-            inputPwd.value = '';
-        }
-
-        watch(
-            [inputPwd, inputUserAccount, inputName],
-            ([newPwd, newAccount, newName]) => { 
-                // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
-                if(newAccount.length > 0 && newName.length > 0) {
-                    isConfirmDisabled.value = false;
-                }
-                if(whichCurrentModal.value !== MODAL_CREATE_NEW) {
-                    if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
-                        isConfirmDisabled.value = true;
-                    }
-                }else {
-                    if(newPwd.length < PWD_VALID_LENGTH) {
-                        isConfirmDisabled.value = true;
-                    }
-                }                          
-            }
-        );
-
-        onMounted(() => {
-
-        });
-
-        return {
-            isConfirmDisabled,
-            username,
-            name,
-            isSSO,
-            isPwdEyeOn,
-            togglePwdEyeBtn,
-            isPwdLengthValid,
-            inputUserAccount,
-            inputName,
-            inputPwd,
-            onConfirmBtnClick,
-            onInputDoubleClick,
-            onInputNameFocus,
-            onResetPwdButtonClick,
-            isSetAsAdminChecked,
-            isSetActivedChecked,
-            isResetPwdSectionShow,
-            toggleIsAdmin,
-            toggleIsActivated,
-            whichCurrentModal,
-            MODAL_CREATE_NEW,
-            modalTitle,
-            isAccountUnique,
-            isEditable,
-        };
-    },
-    data() {
-        return {
-            i18next: i18next,
-        };
-    },
-    components: {
-        ModalHeader,
-        IconChecked,
-    },
-    methods: {
-        onCloseBtnClick(){
-            this.closeModal();
-        },
-        onCancelBtnClick(){
-            this.closeModal();
-        },
-        ...mapActions(useModalStore, ['closeModal']),
+// 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 欄位了。
+watch(whichCurrentModal, (newVal) => {
+    if (newVal === MODAL_CREATE_NEW) {
+        inputUserAccount.value = '';
+        inputName.value = '';
+    } else {
+        inputUserAccount.value = currentViewingUser.value.username;
+        inputName.value = currentViewingUser.value.name;
     }
 });
 
+const modalTitle = computed(() => {
+    return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
+});
+
+const togglePwdEyeBtn = (toBeOpen) => {
+    isPwdEyeOn.value = toBeOpen;
+};
+
+const validatePwdLength = () => {
+    isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
+}
+
+const onInputDoubleClick = () => {
+    // 允許編輯模式
+    isEditable.value = true;
+}
+
+const onConfirmBtnClick = async () => {
+    // rule for minimum length
+    validatePwdLength();
+    if(!isPwdLengthValid.value) {
+        return;
+    }
+
+    // rule for account uniqueness
+    switch(whichCurrentModal.value) {
+        case MODAL_CREATE_NEW:
+            await checkAccountIsUnique();
+            if(!isAccountUnique.value) {
+                return;
+            }
+            await acctMgmtStore.createNewAccount({
+                username: inputUserAccount.value,
+                password: inputPwd.value === undefined ? '' : inputPwd.value,
+                name: inputName.value,
+                is_admin: isSetAsAdminChecked.value,
+                is_active: isSetActivedChecked.value,
+            });
+            await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
+            await modalStore.closeModal();
+            acctMgmtStore.setShouldUpdateList(true);
+            await router.push('/account-admin');
+        break;
+        case MODAL_ACCT_EDIT:
+            await checkAccountIsUnique();
+            if(!isAccountUnique.value) {
+                return;
+            }
+            // 要注意的是舊的username跟新的username可以是不同的
+            // 區分有無傳入密碼的情況
+            if(isResetPwdSectionShow.value) {
+                await acctMgmtStore.editAccount(
+                    currentViewingUser.value.username, {
+                    newUsername: inputUserAccount.value,
+                    password: inputPwd.value,
+                    name: inputName.value === undefined ? '' : inputName.value,
+                    is_active: true,
+                });
+            } else {
+                await acctMgmtStore.editAccount(
+                    currentViewingUser.value.username, {
+                    newUsername: inputUserAccount.value,
+                    name: inputName.value === undefined ? '' : inputName.value,
+                    is_active: true,
+                });
+            }
+            await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+            isEditable.value = false;
+            break;
+        default:
+        break;
+    }
+}
+
+const checkAccountIsUnique = async() => {
+    // 如果使用者沒有更動過欄位，那就不用調用任何後端的API
+    if(inputUserAccount.value === username.value) {
+        return true;
+    }
+    const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
+    isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
+    return isAccountUnique.value;
+};
+
+const toggleIsAdmin = () => {
+    if(isEditable){
+        isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
+    }
+}
+
+const toggleIsActivated = () => {
+    if(isEditable){
+        isSetActivedChecked.value = !isSetActivedChecked.value;
+    }
+}
+
+const onInputNameFocus = () => {
+    if(isConfirmDisabled.value){
+        isConfirmDisabled.value = false;
+    }
+}
+
+const onResetPwdButtonClick = () => {
+    isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
+    // 必須清空密碼欄位輸入的字串
+    inputPwd.value = '';
+}
+
+watch(
+    [inputPwd, inputUserAccount, inputName],
+    ([newPwd, newAccount, newName]) => {
+        // 只要[確認密碼]或[密碼]欄位有更動，且所有欄位都不是空的，confirm 按鈕就可點選
+        if(newAccount.length > 0 && newName.length > 0) {
+            isConfirmDisabled.value = false;
+        }
+        if(whichCurrentModal.value !== MODAL_CREATE_NEW) {
+            if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
+                isConfirmDisabled.value = true;
+            }
+        }else {
+            if(newPwd.length < PWD_VALID_LENGTH) {
+                isConfirmDisabled.value = true;
+            }
+        }
+    }
+);
+
+function onCancelBtnClick(){
+    modalStore.closeModal();
+}
 </script>
 <style>
 #modal_account_edit {
     background-color: #ffffff;
     backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/AccountManagement/ModalAccountInfo.vue b/src/views/AccountManagement/ModalAccountInfo.vue
index 9cf9d6c..7f647c0 100644
--- a/src/views/AccountManagement/ModalAccountInfo.vue
+++ b/src/views/AccountManagement/ModalAccountInfo.vue
@@ -22,42 +22,25 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import ModalHeader from './ModalHeader.vue';
 import Badge from '../../components/Badge.vue';
 
-export default {
-    setup(){
-        const acctMgmtStore = useAcctMgmtStore();
-        const visitTime = ref(0);
-        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
-        const {
-            username,
-            name,
-            is_admin,
-            is_active,
-        } = currentViewingUser.value;
+const acctMgmtStore = useAcctMgmtStore();
+const visitTime = ref(0);
+const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+const {
+    username,
+    name,
+    is_admin,
+    is_active,
+} = currentViewingUser.value;
 
-        onBeforeMount(async() => {
-            await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
-            visitTime.value = currentViewingUser.value.detail.visits;
-        });
-
-        return {
-            i18next,
-            username,
-            name,
-            is_admin,
-            is_active,
-            visitTime,
-        };
-    },
-    components: {
-        ModalHeader,
-        Badge,
-    }
-}
-</script>
\ No newline at end of file
+onBeforeMount(async() => {
+    await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
+    visitTime.value = currentViewingUser.value.detail.visits;
+});
+</script>
diff --git a/src/views/AccountManagement/ModalContainer.vue b/src/views/AccountManagement/ModalContainer.vue
index 8ea144a..2a78fa0 100644
--- a/src/views/AccountManagement/ModalContainer.vue
+++ b/src/views/AccountManagement/ModalContainer.vue
@@ -7,11 +7,11 @@
         <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
         <ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
       </div>
-    </div>    
+    </div>
   </template>
-  
-  <script>
-  import { computed, } from 'vue';
+
+  <script setup>
+  import { computed } from 'vue';
   import { useModalStore } from '@/stores/modal';
   import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
   import ModalAccountInfo from './ModalAccountInfo.vue';
@@ -23,31 +23,12 @@
     MODAL_DELETE,
   } from "@/constants/constants.js";
 
-  
-  export default {
-    setup() {
-      const modalStore = useModalStore();
-      const whichModal = computed(() => modalStore.whichModal);
-
-      return {
-        modalStore,
-        whichModal,
-        MODAL_CREATE_NEW,
-        MODAL_ACCT_EDIT,
-        MODAL_ACCT_INFO,
-        MODAL_DELETE,
-      };
-    },
-    components: {
-      ModalAccountEditCreate,
-      ModalAccountInfo,
-      ModalDeleteAlert,
-    }
-  };
+  const modalStore = useModalStore();
+  const whichModal = computed(() => modalStore.whichModal);
   </script>
 <style>
 #modal_container {
     z-index: 9999;
     background-color: rgba(254,254,254, 0.8);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/AccountManagement/ModalDeleteAlert.vue b/src/views/AccountManagement/ModalDeleteAlert.vue
index 205d6c9..28953b8 100644
--- a/src/views/AccountManagement/ModalDeleteAlert.vue
+++ b/src/views/AccountManagement/ModalDeleteAlert.vue
@@ -27,39 +27,28 @@
     </div>
 </template>
 
-<script>
-import { defineComponent, } from 'vue';
+<script setup>
 import { useModalStore } from '@/stores/modal';
 import { useRouter } from 'vue-router';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import i18next from '@/i18n/i18n.js';
 import { useToast } from 'vue-toast-notification';
 
-export default defineComponent({
-    setup() {
-        const acctMgmtStore = useAcctMgmtStore();
-        const modalStore = useModalStore();
-        const toast = useToast();
-        const router = useRouter();
+const acctMgmtStore = useAcctMgmtStore();
+const modalStore = useModalStore();
+const toast = useToast();
+const router = useRouter();
 
-        const onDeleteConfirmBtnClick = async() => {
-            if(await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
-                toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
-                modalStore.closeModal();
-                acctMgmtStore.setShouldUpdateList(true);
-                await router.push("/account-admin");
-            }            
-        }
+const onDeleteConfirmBtnClick = async() => {
+    if(await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
+        toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
+        modalStore.closeModal();
+        acctMgmtStore.setShouldUpdateList(true);
+        await router.push("/account-admin");
+    }
+};
 
-        const onNoBtnClick = () => {
-            modalStore.closeModal();
-        }
-
-        return {
-            i18next,
-            onDeleteConfirmBtnClick,
-            onNoBtnClick,
-        };
-    },
-});
-</script>
\ No newline at end of file
+const onNoBtnClick = () => {
+    modalStore.closeModal();
+};
+</script>
diff --git a/src/views/AccountManagement/ModalHeader.vue b/src/views/AccountManagement/ModalHeader.vue
index 0261eaa..a445f04 100644
--- a/src/views/AccountManagement/ModalHeader.vue
+++ b/src/views/AccountManagement/ModalHeader.vue
@@ -7,28 +7,20 @@
             <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
                 @click="closeModal"
             />
-        </div>        
+        </div>
     </header>
 </template>
 
-<script>
+<script setup>
 import { useModalStore } from '@/stores/modal';
-export default {
-    props: {
-        headerText: {
-            type: String,
-            required: true // 确保 headerText 是必填的
-        }
-    },
-    setup(props) {
-        const modalStore = useModalStore();
-        const { headerText, } = props;
-        const { closeModal } = modalStore;
 
-        return {
-            headerText,
-            closeModal,
-        };
-  }
-}
-</script>
\ No newline at end of file
+defineProps({
+    headerText: {
+        type: String,
+        required: true,
+    }
+});
+
+const modalStore = useModalStore();
+const { closeModal } = modalStore;
+</script>
diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue
index 91ba429..52b3da2 100644
--- a/src/views/AccountManagement/MyAccount.vue
+++ b/src/views/AccountManagement/MyAccount.vue
@@ -27,13 +27,13 @@
                 </div>
                 <div class="account flex flex-col">
                     <span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
-                    <div v-show="false" class="error-wrapper my-2">                    
+                    <div v-show="false" class="error-wrapper my-2">
                         <div class="error-msg-section flex justify-start">
                             <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                             <span class="error-msg-text flex text-[#FF3366] h-[24px]">
                                 {{ i18next.t("AcctMgmt.AccountNotUnique") }}
                             </span>
-                        </div> 
+                        </div>
                     </div>
                 </div>
             </div>
@@ -87,23 +87,23 @@
                         <span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
                             {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
                         </span>
-                    </div>                    
+                    </div>
                 </div>
                 <div class="button-and-dummy-column flex flex-col text-[14px]">
                     <div class="button-group flex w-min-[80px] h-[40px]">
                         <div v-if='isPwdEditable' class="save-btn-container flex  ml-[112px]"
                           @click="onSavePwdClick">
                             <ButtonFilled :buttonText='i18next.t("Global.Save")' />
-                        </div>         
+                        </div>
                         <div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
                             <Button :buttonText='i18next.t("Global.Cancel")'/>
                         </div>
                         <div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
                             <Button :buttonText='i18next.t("Global.Reset")'/>
                         </div>
-                    </div>                    
+                    </div>
                     <div class="flex dummy-cell h-[40px]"></div>
-                </div>                
+                </div>
             </div>
         </main>
         <main class="session flex flex-col pt-6 px-8 w-[720px]">
@@ -114,8 +114,8 @@
     </div>
 </template>
 
-<script>
-import { onMounted, computed, ref, } from 'vue';
+<script setup>
+import { onMounted, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import { useLoginStore } from '@/stores/login';
 import { useAcctMgmtStore } from '@/stores/acctMgmt';
@@ -126,109 +126,77 @@ import ButtonFilled from '@/components/ButtonFilled.vue';
 import { useToast } from 'vue-toast-notification';
 import { PWD_VALID_LENGTH } from '@/constants/constants.js';
 
-export default {
-    setup() {
-        const loadingStore = useLoadingStore();
-        const loginStore = useLoginStore();
-        const acctMgmtStore = useAcctMgmtStore();
-        const toast = useToast();
+const loadingStore = useLoadingStore();
+const loginStore = useLoginStore();
+const acctMgmtStore = useAcctMgmtStore();
+const toast = useToast();
 
-        const visitTime = ref(0);
-        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
-        const name = computed(() => currentViewingUser.value.name);
-        const {
-            username,
-            is_admin,
-            is_active,
-        } = currentViewingUser.value;
+const visitTime = ref(0);
+const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+const name = computed(() => currentViewingUser.value.name);
+const {
+    username,
+    is_admin,
+    is_active,
+} = currentViewingUser.value;
 
-        const inputName = ref(name.value); // remember to add .value postfix
-        const inputPwd = ref('');
-        const isNameEditable = ref(false);
-        const isPwdEditable = ref(false);
-        const isPwdEyeOn = ref(false);
-        const isPwdLengthValid = ref(true);
+const inputName = ref(name.value);
+const inputPwd = ref('');
+const isNameEditable = ref(false);
+const isPwdEditable = ref(false);
+const isPwdEyeOn = ref(false);
+const isPwdLengthValid = ref(true);
 
-        const onEditNameClick = () => {
-            isNameEditable.value = true;           
-        }
+const onEditNameClick = () => {
+    isNameEditable.value = true;
+};
 
-        const onResetPwdClick = () => {
-            isPwdEditable.value = true;
-        }
+const onResetPwdClick = () => {
+    isPwdEditable.value = true;
+};
 
-        const onSaveNameClick = async() => {
-            if(inputName.value.length > 0) {
-                await acctMgmtStore.editAccountName(username, inputName.value);
-                await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-                await acctMgmtStore.getUserDetail(username);
-                isNameEditable.value = false;
-                inputName.value = name.value; // updated value
-            } 
-        };
+const validatePwdLength = () => {
+    isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
+};
 
-        const onSavePwdClick = async() => {
-            validatePwdLength();
-            if (isPwdLengthValid.value) {
-               isPwdEditable.value = false;               
-               await acctMgmtStore.editAccountPwd(username, inputPwd.value);
-               await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
-               inputPwd.value = '';
-               // remember to force update
-               await acctMgmtStore.getUserDetail(loginStore.userData.username);
-            }            
-        }
-
-        const onCancelNameClick = () => {
-            isNameEditable.value = false;
-            inputName.value = name.value;
-        };
-        
-        const onCancelPwdClick = () => {
-            isPwdEditable.value = false;
-            inputPwd.value = '';
-            isPwdLengthValid.value = true;
-        };
-
-        const togglePwdEyeBtn = (toBeOpen) => {
-            isPwdEyeOn.value = toBeOpen;
-        };
-
-        const validatePwdLength = () => {
-            isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
-        }
-
-        onMounted(async() => {
-            loadingStore.setIsLoading(false);
-            await acctMgmtStore.getUserDetail(loginStore.userData.username);   
-        });
-
-        return {
-            i18next,
-            username,
-            name,
-            is_admin,
-            is_active,
-            visitTime,
-            inputName,
-            inputPwd,
-            isNameEditable,
-            isPwdEditable,
-            isPwdEyeOn,
-            isPwdLengthValid,
-            onEditNameClick,
-            onResetPwdClick,
-            onSavePwdClick,
-            onSaveNameClick,
-            onCancelPwdClick,
-            onCancelNameClick,
-            togglePwdEyeBtn,
-        };
-  },
-  components: {
-        Badge,
-        Button,
-        ButtonFilled,
+const onSaveNameClick = async() => {
+    if(inputName.value.length > 0) {
+        await acctMgmtStore.editAccountName(username, inputName.value);
+        await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+        await acctMgmtStore.getUserDetail(username);
+        isNameEditable.value = false;
+        inputName.value = name.value;
     }
-}
-</script>
\ No newline at end of file
+};
+
+const onSavePwdClick = async() => {
+    validatePwdLength();
+    if (isPwdLengthValid.value) {
+       isPwdEditable.value = false;
+       await acctMgmtStore.editAccountPwd(username, inputPwd.value);
+       await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+       inputPwd.value = '';
+       await acctMgmtStore.getUserDetail(loginStore.userData.username);
+    }
+};
+
+const onCancelNameClick = () => {
+    isNameEditable.value = false;
+    inputName.value = name.value;
+};
+
+const onCancelPwdClick = () => {
+    isPwdEditable.value = false;
+    inputPwd.value = '';
+    isPwdLengthValid.value = true;
+};
+
+const togglePwdEyeBtn = (toBeOpen) => {
+    isPwdEyeOn.value = toBeOpen;
+};
+
+onMounted(async() => {
+    loadingStore.setIsLoading(false);
+    await acctMgmtStore.getUserDetail(loginStore.userData.username);
+});
+</script>
diff --git a/src/views/AuthContainer.vue b/src/views/AuthContainer.vue
index 8e3ae45..fc1965a 100644
--- a/src/views/AuthContainer.vue
+++ b/src/views/AuthContainer.vue
@@ -8,15 +8,7 @@
   </main>
 </template>
 
-<script>
+<script setup>
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
-
-export default {
-  name: 'AuthContainer',
-  components: {
-    Header,
-    Navbar,
-  },
-};
 </script>
diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue
index 2aa298c..a59ff3f 100644
--- a/src/views/Compare/Dashboard/Compare.vue
+++ b/src/views/Compare/Dashboard/Compare.vue
@@ -134,10 +134,10 @@
         <!-- Sidebar: State -->
         <div class="bg-transparent z-10">
           <ul class="flex flex-col justify-center items-center">
-            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 
-            cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" 
+            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9
+            cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
             :class="{'border-primary': sidebarState}" id="compareState">
-              <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" 
+              <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
               :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
                 info
               </span>
@@ -149,7 +149,9 @@
     </div>
   </main>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import moment from 'moment';
 import { useLoadingStore } from '@/stores/loading';
@@ -172,1144 +174,1034 @@ import {
  } from "@/constants/constants.js";
 import FreqChart from '../../Discover/Performance/FreqChart.vue';
 
+const route = useRoute();
 
-export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const compareStore = useCompareStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { compareDashboardData } = storeToRefs(compareStore);
+// Stores
+const loadingStore = useLoadingStore();
+const compareStore = useCompareStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { compareDashboardData } = storeToRefs(compareStore);
 
-    return { isLoading, compareStore, compareDashboardData }
+// Data
+const timeUsageData = [
+  {tagId: '#cycleTime', label: i18next.t("Compare.cycleEfficiency")},
+  {tagId: '#processingTime', label: i18next.t("Compare.ProcessingTime")},
+  {tagId: '#waitingTime', label: i18next.t("Compare.WaitingTime")},
+];
+const frequencyData = [
+  {tagId: '#cases', label: i18next.t("Compare.NumberOfCases")},
+];
+const contentData = {
+  avgCycleTime: {title: i18next.t("Compare.avgCycleTimeTitle"), x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgCycleTimeY")},
+  avgCycleEfficiency: {title: i18next.t("Compare.avgCycleEfficiencyTitle"), x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgCycleEfficiencyY")},
+  avgProcessTime: {title: i18next.t("Compare.avgProcessTimeTitle"), x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgProcessTimeY")},
+  avgProcessTimeByTask: {title: i18next.t("Compare.avgProcessTimeByTaskTitle"),
+    x: i18next.t("Compare.avgProcessTimeByTaskX"), y: i18next.t("Compare.labelActivityY")},
+  avgWaitingTime: {title: i18next.t("Compare.avgWaitingTimeTitle"), x: i18next.t("Compare.labelDateX"),
+    y: i18next.t("Compare.avgWaitingTimeY")},
+  avgWaitingTimeByEdge: {title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"),
+    x: i18next.t("Compare.avgWaitingTimeByEdgeX"),
+    y: i18next.t("Compare.avgWaitingTimeByEdgeY")},
+  freq: {title: i18next.t("Compare.freqTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.freqY")},
+  casesByTask: {title: i18next.t("Compare.casesByTaskTitle"), x: i18next.t("Compare.casesByTaskX"),
+    y: i18next.t("Compare.labelActivityY")},
+};
+const tooltip = {
+  avgCycleEfficiency: {
+    value: i18next.t("Compare.avgCycleEfficiency"),
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
   },
-  components: {
-    SidebarStates,
-    FreqChart,
+  avgWaitingTime: {
+    value: i18next.t("Compare.avgWaitingTime"),
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
   },
-  data() {
-    return {
-      i18next: i18next,
-      timeUsageData: [
-        {tagId: '#cycleTime', label: i18next.t("Compare.cycleEfficiency")},
-        {tagId: '#processingTime', label: i18next.t("Compare.ProcessingTime")},
-        {tagId: '#waitingTime', label: i18next.t("Compare.WaitingTime")},
-      ],
-      frequencyData: [
-        {tagId: '#cases', label: i18next.t("Compare.NumberOfCases")},
-        // {tagId: '#trace', label: 'Number of Trace'},
-        // {tagId: '#resource', label: 'Resource'},
-      ],
-      contentData: {
-        avgCycleTime: {title: i18next.t("Compare.avgCycleTimeTitle"), x: i18next.t("Compare.labelDateX"),
-          y: i18next.t("Compare.avgCycleTimeY")},
-        avgCycleEfficiency: {title: i18next.t("Compare.avgCycleEfficiencyTitle"), x: i18next.t("Compare.labelDateX"),
-          y: i18next.t("Compare.avgCycleEfficiencyY")},
-        avgProcessTime: {title: i18next.t("Compare.avgProcessTimeTitle"), x: i18next.t("Compare.labelDateX"),
-          y: i18next.t("Compare.avgProcessTimeY")},
-        avgProcessTimeByTask: {title: i18next.t("Compare.avgProcessTimeByTaskTitle"),
-          x: i18next.t("Compare.avgProcessTimeByTaskX"), y: i18next.t("Compare.labelActivityY")},
-        avgWaitingTime: {title: i18next.t("Compare.avgWaitingTimeTitle"), x: i18next.t("Compare.labelDateX"),
-          y: i18next.t("Compare.avgWaitingTimeY")},
-        avgWaitingTimeByEdge: {title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"),
-          x: i18next.t("Compare.avgWaitingTimeByEdgeX"),
-          y: i18next.t("Compare.avgWaitingTimeByEdgeY")},
-        freq: {title: i18next.t("Compare.freqTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.freqY")},
-        casesByTask: {title: i18next.t("Compare.casesByTaskTitle"), x: i18next.t("Compare.casesByTaskX"),
-          y: i18next.t("Compare.labelActivityY")},
-      },
-      tooltip: {
-        avgCycleEfficiency: {
-          value: i18next.t("Compare.avgCycleEfficiency"),
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-        avgWaitingTime: {
-          value: i18next.t("Compare.avgWaitingTime"),
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-        avgWaitingTimeByEdge: {
-          value: i18next.t("Compare.avgWaitingTimeByEdge"),
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-      },
-      isActive: null,
-      avgCycleTimeData: null,
-      avgCycleTimeOptions: null,
-      avgCycleEfficiencyData: null,
-      avgCycleEfficiencyOptions: null,
-      avgProcessTimeData: null,
-      avgProcessTimeOptions: null,
-      avgProcessTimeByTaskData: null,
-      avgProcessTimeByTaskOptions: null,
-      avgWaitingTimeData: null,
-      avgWaitingTimeOptions: null,
-      avgWaitingTimeByEdgeData: null,
-      avgWaitingTimeByEdgeOptions: null,
-      freqData: null,
-      freqOptions: null,
-      casesByTaskData: null,
-      casesByTaskOptions: null,
-      horizontalBarHeight: 500, // horizontal Bar default height
-      avgProcessTimeByTaskHeight: 500,
-      avgWaitingTimeByEdgeHeight: 500,
-      casesByTaskHeight: 500,
-      colorPrimary: '#0099FF',
-      colorSecondary: '#FFAA44',
-      sidebarState: false, // SideBar: Summary
-    }
+  avgWaitingTimeByEdge: {
+    value: i18next.t("Compare.avgWaitingTimeByEdge"),
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
   },
-  methods: {
-    handleClick(tagId) {
-      this.isActive = tagId;
+};
 
-      // 在進行導航前，檢查或處理 tagId 的值
-      if (this.isSafeTagId(tagId)) {
-        window.location.href = tagId; // 確保這個路徑是安全的
-        // 或者使用 Vue Router 進行導航
-        // this.$router.push({ path: tagId });
-      } else {
-        console.warn("不安全的 tagId: ", tagId);
-      }
-    },
-    // 避免直接使用動態 href：改用安全的方法來處理動態導航，避免直接將未經驗證的數據綁定到 href 屬性。
-    isSafeTagId(tagId) {
-      // 檢查 tagId 是否符合安全的格式（例如只允許特定的模式或路徑）
-      const pattern = /^#?[a-zA-Z0-9]*$/; // 例如： #waitingTime
-      return pattern.test(tagId);
-    },
-    /**
-     * 手刻折線圖 x label 時間刻度
-     * @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'}
-     */
-    setXLabelsData(valueData) {
-      const min = new Date(valueData.min).getTime();
-      const max = new Date(valueData.max).getTime();
-      const numPoints = 12;
-      const step = (max - min) / (numPoints - 1);
-      const data = [];
-      for(let i = 0; i< numPoints; i++) {
-        const x = min + i * step;
-        data.push(x);
-      }
-      return data;
-    },
-    /**
-     * 讓長條圖依 data 數量增加高度
-     * @param { object } chartData chart data
-     */
-    getHorizontalBarHeight(chartData) {
-      const totalBars = chartData.x_axis.labels.length;
-      let horizontalBar = this.horizontalBarHeight;
+const isActive = ref(null);
+const avgCycleTimeData = ref(null);
+const avgCycleTimeOptions = ref(null);
+const avgCycleEfficiencyData = ref(null);
+const avgCycleEfficiencyOptions = ref(null);
+const avgProcessTimeData = ref(null);
+const avgProcessTimeOptions = ref(null);
+const avgProcessTimeByTaskData = ref(null);
+const avgProcessTimeByTaskOptions = ref(null);
+const avgWaitingTimeData = ref(null);
+const avgWaitingTimeOptions = ref(null);
+const avgWaitingTimeByEdgeData = ref(null);
+const avgWaitingTimeByEdgeOptions = ref(null);
+const freqData = ref(null);
+const freqOptions = ref(null);
+const casesByTaskData = ref(null);
+const casesByTaskOptions = ref(null);
+const horizontalBarHeight = 500;
+const avgProcessTimeByTaskHeight = ref(500);
+const avgWaitingTimeByEdgeHeight = ref(500);
+const casesByTaskHeight = ref(500);
+const colorPrimary = '#0099FF';
+const colorSecondary = '#FFAA44';
+const sidebarState = ref(false);
 
-      if(totalBars > 10){
-        horizontalBar = (totalBars - 10) * 16 * 2 + this.horizontalBarHeight
-      };
+// Methods
+function handleClick(tagId) {
+  isActive.value = tagId;
 
-      return horizontalBar + 'px'
-    },
-    /**
-     * 建立折線圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { string } yUnit y 軸單位 'date' | 'count'，可傳入以上任一。
-     * @returns { [primeVueSetData, primeVueSetOption] } 這兩者為符合 primeVue 圖表格式的數據資料
-     */
-    getLineChart(chartData, content, yUnit) {
-      let datasetsPrimary;
-      let datasetsSecondary;
-      const minX = chartData.x_axis.min;
-      const maxX = chartData.x_axis.max;
-      let xLabelData;
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-      const getMoment = (time)=> {
-        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
-      };
-      const getSimpleTimeLabel = simpleTimeLabel;
-
-      // fabricate x label according to y unit
-      switch (yUnit) {
-        case 'date':
-          datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
-          chartData.y_axis.max, chartData.y_axis.min);
-          datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
-          chartData.y_axis.max, chartData.y_axis.min);
-          xLabelData = this.setXLabelsData(chartData.x_axis);
-          break;
-        case 'count': // 次數 10 個點
-          datasetsPrimary = chartData.data[0].data;
-          datasetsSecondary = chartData.data[1].data;
-          xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
-          break;
-      }
-
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xLabelData, formatToSet);
-      const customizedScaleOption = this.getCustomizedScaleOption(
-        knownScaleLineChartOptions, {
-          customizeOptions: {
-            content, ticksOfXAxis,
-          }        
-      });
-      primeVueSetData = {
-        labels: xLabelData,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: datasetsPrimary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: this.colorPrimary,
-            pointBackgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: datasetsSecondary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: this.colorSecondary,
-            pointBackgroundColor: this.colorSecondary,
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            mode: 'index',
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              },
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: customizedScaleOption,
-      };
-      switch (yUnit) {
-        case 'date':
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            const value = getSimpleTimeLabel(context.parsed.y, 2);
-
-            switch (context.datasetIndex) {
-              case 0: // Primary
-                return `${labelPrimary}: ${value}`;
-              case 1: // Secondary
-                return `${labelSecondary}: ${value}`;
-            }
-          };
-          primeVueSetOption.scales.x.min = minX;
-          primeVueSetOption.scales.x.max = maxX;
-          primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-            const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length); // Stepsize only needs to be calculated once
-            return getYTicksByIndex(YTickStepSize, index, unitToUse); 
-          }
-          break;
-        case 'count':
-          primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            const value = context.parsed.y;
-
-            switch (context.datasetIndex) {
-              case 0: // Primary
-                return `${labelPrimary}: ${value}`;
-              case 1: // Secondary
-                return `${labelSecondary}: ${value}`;
-            }
-          };
-          break;
-      }
-      
-      // JSON.parse(JSON.stringify()) wouldn't work
-      return [primeVueSetData, primeVueSetOption];
-    },
-    /**
-     * 建立長條圖
-     * @param { object } chartData chart data
-     * @param { object } content titles 文字標題
-     */
-    getBarChart(chartData, content, caller) {
-      const getMoment = (time)=> this.$moment(time).format('YYYY/MM/DD');
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 轉為百分比
-      const datasetsPrimary = chartData.data[0].data.map(value => {
-        return {
-          x: getMoment(value.x),
-          y: value.y === null ? null : value.y * 100
-        }
-      });
-      const xDataPrimary = datasetsPrimary.map(i => i.x);
-      const yDataPrimary = datasetsPrimary.map(i => i.y);
-      const datasetsSecondary = chartData.data[1].data.map(value => {
-        return {
-          x: getMoment(value.x),
-          y: value.y === null ? null : value.y * 100
-        }
-      });
-      const yDataSecondary = datasetsSecondary.map(i => i.y);
-
-      primeVueSetData = {
-        labels: xDataPrimary,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: yDataPrimary,
-            backgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: yDataSecondary,
-            backgroundColor: this.colorSecondary,
-          },
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: knownLayoutChartOption,
-        interaction: {
-          intersect: false,
-          mode: 'index', // 可顯示全部的 data label
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${context[0].label}`;
-              },
-              label: function(context) {
-                const value = `${(context.parsed.y * 10).toFixed(2)}%`;
-                switch (context.datasetIndex) {
-                  case 0: // Primary
-                    return `${labelPrimary}: ${value}`;
-                  case 1: // Secondary
-                    return `${labelSecondary}: ${value}`;
-                }
-              }
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: this.customizeScaleChartOptionTitleByContent(knownScaleBarChartOptions, content),
-      };
-
-      primeVueSetOption.scales = {
-        ...primeVueSetOption.scales, 
-          x: {
-            ticks: {
-              callback: function(value, index, ticks) {
-                return moment(xDataPrimary[index]).format('YYYY/MM');
-              },
-            },          
-        },
-      };
-
-      if(caller === "Cycle Eff") { //針對 cycle efficiency 特別處理
-        primeVueSetOption.scales.y.reverse = true; //不明原因上下顛倒，所以要顛倒過來
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          return 10 * index; //百分比
-        };
-        primeVueSetOption.scales.y.grid = {
-          color: GRID_COLOR,
-        };
-        primeVueSetOption.scales.x.grid = {
-          display: false,
-        };
-      }
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    /**
-     * 建立水平長條圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題的文字
-     * @param { boolean } isSingle 單個或雙數 activity
-     * @param { string } xUnit x 軸單位 'date' | 'count'，可傳入以上任一。
-     */
-    getHorizontalBarChart(chartData, content, isSingle, xUnit) {
-      const maxY = chartData.y_axis.max;
-      const getSimpleTimeLabel = simpleTimeLabel;
-      const getFollowTimeLabel = followTimeLabel;
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 大到小排序: Primary 為主
-      const datasetsPrimary = chartData.data[0].data;
-      const datasetsSecondary = chartData.data[1].data;
-      datasetsPrimary.sort((a, b) => b.y - a.y);
-      datasetsSecondary.sort((a, b) => {
-          // Find the index of a.x in data1
-          const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-          // Find the index of b.x in data1
-          const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-
-          // Compare the indexes
-          return indexA - indexB;
-      });
-
-      // 找出排序後，分別拉出 x, y Data
-      const xLabelData = datasetsPrimary.map(item => item.x);
-      const yDataPrimary = datasetsPrimary.map(item => item.y);
-      const yDataSecondary = datasetsSecondary.map(item => item.y);
-
-      primeVueSetData = {
-        labels: xLabelData,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: yDataPrimary,
-            backgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: yDataSecondary,
-            backgroundColor: this.colorSecondary,
-          },
-        ]
-      };
-      primeVueSetOption = {
-        indexAxis: 'y',
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            mode: 'index', // 可顯示全部的 data label
-            titleFont: {weight: 'normal'},
-            callbacks: {}
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: this.customizeScaleChartOptionTitleByContent(knownScaleHorizontalChartOptions, null),
-      };
-      switch (xUnit) {
-        case 'date':
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-              switch (context.datasetIndex) {
-                case 0: // Primary
-                  return `${labelPrimary}: ${value}`;
-                case 1: // Secondary
-                  return `${labelSecondary}: ${value}`;
-              }
-          };
-          primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-            return getFollowTimeLabel(value, maxY, 1)
-          };
-          break;
-        case 'count':
-        default:
-          primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-              const value = context.parsed.x === null ? "n/a" : context.parsed.x;
-              switch (context.datasetIndex) {
-                case 0: // Primary
-                  return `${labelPrimary}: ${value}`;
-                case 1: // Secondary
-                  return `${labelSecondary}: ${value}`;
-              }
-          };
-          break;
-      }
-      if(isSingle) { // 設定一個活動的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label}`;
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          if(label) {
-              return label.length > 21 ? `${label.substring(0, 18)}...` : label
-            };
-          }
-          
-      }else { // 設定「活動」到「活動」的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label.replace(',', ' - ')}`
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          let labelStart = label[0];
-          let labelEnd = label[1];
-
-          labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-          labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-          return labelStart + " - " + labelEnd
-        };
-      }
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    /**
-     * 
-     * @param whichScaleObj PrimeVue scale option object to reference to
-     * @param customizeOptions 
-     * @param customizeOptions.content
-     * @param customizeOptions.ticksOfXAxis
-     */
-    getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
-          content,
-          ticksOfXAxis,
-        },
-      }) {
-      let resultScaleObj;
-      resultScaleObj = this.customizeScaleChartOptionTitleByContent(whichScaleObj, content);
-      resultScaleObj = this.customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
-      return resultScaleObj;
-    },
-    /**
-     * 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
-     * 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
-     * This function alters the title property of known scales object of Chart option
-     * This is based on the fact that we know the order must be x -> title -> text.
-     * @param {object} whichScaleObj PrimeVue scale option object to reference to
-     * @param content whose property includes x and y and stand for titles
-     * 
-     * @returns { object } an object modified with two titles
-     */
-    customizeScaleChartOptionTitleByContent(whichScaleObj, content){
-      if (!content) {
-        // Early return
-        return whichScaleObj;
-      }
-
-      return {
-        ...whichScaleObj,
-          x: {
-            ...whichScaleObj.x,
-            title: {
-              ...whichScaleObj.x.title,
-              text: content.x
-            }
-          },
-          y: {
-            ...whichScaleObj.y,
-            title: {
-              ...whichScaleObj.y.title,
-              text: content.y
-            }
-          }
-        };
-    },
-    /**
-     * 
-     * @param {object} scaleObjectToAlter this object follows the format of prive vue chart
-     * @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
-     * or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
-     */
-     customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
-      return {
-        ...scaleObjectToAlter,
-        x: {
-          ...scaleObjectToAlter.x,
-            ticks: {
-              ...scaleObjectToAlter.x.ticks,
-                callback: function(value, index) {
-                  // 根據不同的級距客製化 x 軸的時間刻度
-                  return ticksOfXAxis[index];
-                },
-            },
-          },
-      };       
-    },
-    /**
-     * 建立Compare頁面的折線圖，並且避免同一個畫面中的設定值彼此覆蓋
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { string } yUnit y 軸單位 'date' | 'count'，可傳入以上任一。
-     * @returns { [primeVueSetData, primeVueSetOption] } 這兩者為符合 primeVue 圖表格式的數據資料
-     */
-     getLineChart0(chartData, content, yUnit) {
-      let datasetsPrimary;
-      let datasetsSecondary;
-      const minX = chartData.x_axis.min;
-      const maxX = chartData.x_axis.max;
-      let xLabelData;
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-      const getMoment = (time)=> {
-        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
-      };
-      const getSimpleTimeLabel = simpleTimeLabel;
-
-      // fabricate x label according to y unit
-      switch (yUnit) {
-        case 'date':
-          datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
-          chartData.y_axis.max, chartData.y_axis.min);
-          datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
-          chartData.y_axis.max, chartData.y_axis.min);
-          xLabelData = this.setXLabelsData(chartData.x_axis);
-          break;
-        case 'count': // 次數 10 個點
-          datasetsPrimary = chartData.data[0].data;
-          datasetsSecondary = chartData.data[1].data;
-          xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
-          break;
-      }
-
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xLabelData, formatToSet);
-
-      primeVueSetData = {
-        labels: xLabelData,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: datasetsPrimary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: this.colorPrimary,
-            pointBackgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: datasetsSecondary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: this.colorSecondary,
-            pointBackgroundColor: this.colorSecondary,
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            mode: 'index',
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              },
-              label:function(context) {
-                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-              },
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales:  {
-          x: {
-            min: minX,
-            max: maxX,
-            type: 'time',
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.x,              
-            },
-            time: {
-              displayFormats: {
-                second: 'h:mm:ss', // ex: 1:11:11
-                minute: 'M/d h:mm', // ex: 1/1 1:11
-                hour: 'M/d h:mm', // ex: 1/1 1:11
-                day: 'M/d h', // ex: 1/1 1
-                month: 'y/M/d', // ex: 1911/1/1
-              },
-              round: true
-            },
-            ticks: {
-              padding: 8,
-              display: true,
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#64748b',
-              source: 'labels', // 依比例彈性顯示 label 數量
-              callback: function(value, index) {
-                return ticksOfXAxis[index];
-              },
-            },
-            border: {
-              color: '#64748b',
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.y
-            },
-            grid: {
-              color: '#64748b',
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-            ticks: {
-              
-              color: '#64748b',
-              padding: 8,
-              callback: function (value, index, ticks) {
-                // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
-                const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
-                return getYTicksByIndex(resultStepSize, index, unitToUse);
-              },
-            }
-          },
-        },
-      };
-
-      return [primeVueSetData, primeVueSetOption];
-    },
-    /**
-     * 建立Case By Task水平長條圖
-     * 避免共用 PrimeVue 設定值，避免覆蓋設定
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題的文字
-     * @param { boolean } isSingle 單個或雙數 activity
-     * @param { string } xUnit x 軸單位
-     */
-     getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = 'count') {
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 大到小排序: Primary 為主
-      const datasetsPrimary = chartData.data[0].data;
-      const datasetsSecondary = chartData.data[1].data;
-      datasetsPrimary.sort((a, b) => b.y - a.y);
-      datasetsSecondary.sort((a, b) => {
-          // Find the index of a.x in data1
-          const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-          // Find the index of b.x in data1
-          const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-
-          // Compare the indexes
-          return indexA - indexB;
-      });
-
-      // 找出排序後，分別拉出 x, y Data
-      const xLabelData = datasetsPrimary.map(item => item.x);
-      const yDataPrimary = datasetsPrimary.map(item => item.y);
-      const yDataSecondary = datasetsSecondary.map(item => item.y);
-
-      primeVueSetData = {
-        labels: xLabelData,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: yDataPrimary,
-            backgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: yDataSecondary,
-            backgroundColor: this.colorSecondary,
-          },
-        ]
-      };
-      primeVueSetOption = {
-        indexAxis: 'y',
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            mode: 'index', // 可顯示全部的 data label
-            titleFont: {weight: 'normal'},
-            callbacks: {}
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-              title: {
-                display: true,
-                color: '#334155',
-                font: {
-                    size: 12,
-                    lineHeight: 2
-                },
-                text: content.x,
-              },
-              ticks: {
-                display: true,
-                maxRotation: 0, // 不旋轉 lable 0~50
-                color: '#64748b',
-                callback: function(value, index, ticks) {
-                  return value; // 計算數量，沒有時間單位才對
-                }
-                },
-              grid: {
-              color: '#64748b',
-              tickLength: 0, // 網格是否超過邊線
-              },
-              border: {
-              display:false,
-              },
-          },
-          y: {
-              beginAtZero: true, // scale 包含 0
-              type: 'category',
-              title: {
-                display: true,
-                color: '#334155',
-                font: {
-                    size: 12,
-                    lineHeight: 2
-                },
-                text: content.y,
-              },
-              ticks:{
-              color: '#64748b',
-              padding: 8,
-              },
-              grid: {
-              display:false,
-              color: '#64748b',
-              },
-              border: {
-              display: false, // 隱藏左側多出來的線
-              },
-          },
-          },
-      };
-      switch (xUnit) {
-        case 'dummy':
-        case 'count':
-        default:
-          primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            const value = context.parsed.x === null ? "n/a" : context.parsed.x;
-              switch (context.datasetIndex) {
-                case 0: // Primary
-                  return `${labelPrimary}: ${value}`;
-                case 1: // Secondary
-                  return `${labelSecondary}: ${value}`;
-              }
-          };
-          break;
-      }
-      if(isSingle) { // 設定一個活動的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label}`;
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          if(label) {
-              return label.length > 21 ? `${label.substring(0, 18)}...` : label
-            };
-          }
-          
-      }else { // 設定「活動」到「活動」的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label.replace(',', ' - ')}`
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          let labelStart = label[0];
-          let labelEnd = label[1];
-
-          labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-          labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-          return labelStart + " - " + labelEnd
-        };
-      }
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-        /**
-     * 建立 Average Processing Time水平長條圖
-     * 避免共用 PrimeVue 設定值，避免覆蓋設定
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題的文字
-     * @param { boolean } isSingle 單個或雙數 activity
-     * @param { string } xUnit x 軸單位 'date' | 'count'，可傳入以上任一。
-     */
-     getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit="date") {
-      const maxY = chartData.y_axis.max;
-      const getSimpleTimeLabel = simpleTimeLabel;
-      const getFollowTimeLabel = followTimeLabel;
-      const labelPrimary = chartData.data[0].label;
-      const labelSecondary = chartData.data[1].label;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 大到小排序: Primary 為主
-      const datasetsPrimary = chartData.data[0].data;
-      const datasetsSecondary = chartData.data[1].data;
-      datasetsPrimary.sort((a, b) => b.y - a.y);
-      datasetsSecondary.sort((a, b) => {
-          // Find the index of a.x in data1
-          const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
-          // Find the index of b.x in data1
-          const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
-
-          // Compare the indexes
-          return indexA - indexB;
-      });
-
-      // 找出排序後，分別拉出 x, y Data
-      const xLabelData = datasetsPrimary.map(item => item.x);
-      const yDataPrimary = datasetsPrimary.map(item => item.y);
-      const yDataSecondary = datasetsSecondary.map(item => item.y);
-
-      primeVueSetData = {
-        labels: xLabelData,
-        datasets: [
-          {
-            label: labelPrimary,
-            data: yDataPrimary,
-            backgroundColor: this.colorPrimary,
-          },
-          {
-            label: labelSecondary,
-            data: yDataSecondary,
-            backgroundColor: this.colorSecondary,
-          },
-        ]
-      };
-      primeVueSetOption = {
-        indexAxis: 'y',
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            // displayColors: false,
-            mode: 'index', // 可顯示全部的 data label
-            titleFont: {weight: 'normal'},
-            callbacks: {}
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-        x: {
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                  size: 12,
-                  lineHeight: 2
-              },
-              text: content.x,
-            },
-            ticks: {
-            display: true,
-            maxRotation: 0, // 不旋轉 lable 0~50
-            color: '#64748b',
-            },
-            grid: {
-            color: '#64748b',
-            tickLength: 0, // 網格是否超過邊線
-            },
-            border: {
-            display:false,
-            },
-        },
-        y: {
-            beginAtZero: true, // scale 包含 0
-            type: 'category',
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                  size: 12,
-                  lineHeight: 2
-              },
-              text: content.y
-            },
-            ticks:{
-            color: '#64748b',
-            padding: 8,
-            },
-            grid: {
-            display:false,
-            color: '#64748b',
-            },
-            border: {
-            display: false, // 隱藏左側多出來的線
-            },
-          },
-        },
-      };
-      switch (xUnit) {
-        case 'dummy': //sonar-qube
-        case 'date':
-        default:
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-              switch (context.datasetIndex) {
-                case 0: // Primary
-                  return `${labelPrimary}: ${value}`;
-                case 1: // Secondary
-                  return `${labelSecondary}: ${value}`;
-              }
-          };
-          primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-            return getFollowTimeLabel(value, maxY, 1)
-          };
-          break;
-      }
-      if(isSingle) { // 設定一個活動的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label}`;
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          if(label) {
-              return label.length > 21 ? `${label.substring(0, 18)}...` : label
-            };
-          }
-          
-      }else { // 設定「活動」到「活動」的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label.replace(',', ' - ')}`
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xLabelData[index];
-          let labelStart = label[0];
-          let labelEnd = label[1];
-
-          labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-          labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-          return labelStart + " - " + labelEnd
-        };
-      }
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-  },
-  async created() {
-    this.isLoading = true; // moubeted 才停止 loading
-
-    const routeParams = this.$route.params;
-    const primaryType = routeParams.primaryType;
-    const secondaryType = routeParams.secondaryType;
-    const primaryId = routeParams.primaryId;
-    const secondaryId = routeParams.secondaryId;
-    const typeMap = {
-      'log': 'log_id',
-      'filter': 'filter_id'
-    };
-    const primaryTypeParam = typeMap[primaryType];
-    const secondaryTypeParam = typeMap[secondaryType];
-    const queryParams = [
-      { [primaryTypeParam]: primaryId },
-      { [secondaryTypeParam]: secondaryId }
-    ];
-
-    // 取得 Compare Data
-    await this.compareStore.getCompare(queryParams);
-    this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_process_time_by_task);
-    if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
-      this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_waiting_time_by_edge);
-    };
-    this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
-    // create chart
-    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(
-      this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
-    [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(
-      this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency, "Cycle Eff");
-    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(
-      this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
-    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getAvgProcessTimeHorizontalBarChart(
-      this.compareDashboardData.time.avg_process_time_by_task,
-      this.contentData.avgProcessTimeByTask, true, 'date');
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(
-      this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
-    if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
-        this.compareDashboardData.time.avg_waiting_time_by_edge,
-        this.contentData.avgWaitingTimeByEdge, false, 'date');
-    } else {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
-    }
-    [this.freqData, this.freqOptions] = this.getLineChart(
-      this.compareDashboardData.freq.cases, this.contentData.freq, 'count');
-    [this.casesByTaskData, this.casesByTaskOptions] = this.getCaseByTaskHorizontalBarChart(
-      this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
-  },
-  mounted() {
-    // 停止 loading
-    this.isLoading = false;
+  if (isSafeTagId(tagId)) {
+    window.location.href = tagId;
+  } else {
+    console.warn("不安全的 tagId: ", tagId);
   }
 }
+
+function isSafeTagId(tagId) {
+  const pattern = /^#?[a-zA-Z0-9]*$/;
+  return pattern.test(tagId);
+}
+
+function setXLabelsData(valueData) {
+  const min = new Date(valueData.min).getTime();
+  const max = new Date(valueData.max).getTime();
+  const numPoints = 12;
+  const step = (max - min) / (numPoints - 1);
+  const data = [];
+  for(let i = 0; i< numPoints; i++) {
+    const x = min + i * step;
+    data.push(x);
+  }
+  return data;
+}
+
+function getHorizontalBarHeight(chartData) {
+  const totalBars = chartData.x_axis.labels.length;
+  let hBarHeight = horizontalBarHeight;
+
+  if(totalBars > 10){
+    hBarHeight = (totalBars - 10) * 16 * 2 + horizontalBarHeight
+  };
+
+  return hBarHeight + 'px'
+}
+
+function getLineChart(chartData, content, yUnit) {
+  let datasetsPrimary;
+  let datasetsSecondary;
+  const minX = chartData.x_axis.min;
+  const maxX = chartData.x_axis.max;
+  let xLabelData;
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+  const getMoment = (time)=> {
+    return moment(time).format('YYYY/M/D hh:mm:ss')
+  };
+  const getSimpleTimeLabel = simpleTimeLabel;
+
+  switch (yUnit) {
+    case 'date':
+      datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
+      chartData.y_axis.max, chartData.y_axis.min);
+      datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
+      chartData.y_axis.max, chartData.y_axis.min);
+      xLabelData = setXLabelsData(chartData.x_axis);
+      break;
+    case 'count':
+      datasetsPrimary = chartData.data[0].data;
+      datasetsSecondary = chartData.data[1].data;
+      xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+      break;
+  }
+
+  const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
+  const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xLabelData, formatToSet);
+  const customizedScaleOption = getCustomizedScaleOption(
+    knownScaleLineChartOptions, {
+      customizeOptions: {
+        content, ticksOfXAxis,
+      }
+  });
+  primeVueSetData = {
+    labels: xLabelData,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: datasetsPrimary,
+        fill: false,
+        tension: 0,
+        borderColor: colorPrimary,
+        pointBackgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: datasetsSecondary,
+        fill: false,
+        tension: 0,
+        borderColor: colorSecondary,
+        pointBackgroundColor: colorSecondary,
+      }
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        mode: 'index',
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          title: function(context) {
+            return `${content.x}: ${getMoment(context[0].parsed.x)}`;
+          },
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: customizedScaleOption,
+  };
+  switch (yUnit) {
+    case 'date':
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        const value = getSimpleTimeLabel(context.parsed.y, 2);
+
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
+      };
+      primeVueSetOption.scales.x.min = minX;
+      primeVueSetOption.scales.x.max = maxX;
+      primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+        const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+        return getYTicksByIndex(YTickStepSize, index, unitToUse);
+      }
+      break;
+    case 'count':
+      primeVueSetOption.scales.y.ticks.precision = 0;
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        const value = context.parsed.y;
+
+        switch (context.datasetIndex) {
+          case 0:
+            return `${labelPrimary}: ${value}`;
+          case 1:
+            return `${labelSecondary}: ${value}`;
+        }
+      };
+      break;
+  }
+
+  return [primeVueSetData, primeVueSetOption];
+}
+
+function getBarChart(chartData, content, caller) {
+  const getMoment = (time)=> moment(time).format('YYYY/MM/DD');
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  const datasetsPrimary = chartData.data[0].data.map(value => {
+    return {
+      x: getMoment(value.x),
+      y: value.y === null ? null : value.y * 100
+    }
+  });
+  const xDataPrimary = datasetsPrimary.map(i => i.x);
+  const yDataPrimary = datasetsPrimary.map(i => i.y);
+  const datasetsSecondary = chartData.data[1].data.map(value => {
+    return {
+      x: getMoment(value.x),
+      y: value.y === null ? null : value.y * 100
+    }
+  });
+  const yDataSecondary = datasetsSecondary.map(i => i.y);
+
+  primeVueSetData = {
+    labels: xDataPrimary,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: yDataPrimary,
+        backgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: yDataSecondary,
+        backgroundColor: colorSecondary,
+      },
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: knownLayoutChartOption,
+    interaction: {
+      intersect: false,
+      mode: 'index',
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          title: function(context) {
+            return `${content.x}: ${context[0].label}`;
+          },
+          label: function(context) {
+            const value = `${(context.parsed.y * 10).toFixed(2)}%`;
+            switch (context.datasetIndex) {
+              case 0:
+                return `${labelPrimary}: ${value}`;
+              case 1:
+                return `${labelSecondary}: ${value}`;
+            }
+          }
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: customizeScaleChartOptionTitleByContent(knownScaleBarChartOptions, content),
+  };
+
+  primeVueSetOption.scales = {
+    ...primeVueSetOption.scales,
+      x: {
+        ticks: {
+          callback: function(value, index, ticks) {
+            return moment(xDataPrimary[index]).format('YYYY/MM');
+          },
+        },
+    },
+  };
+
+  if(caller === "Cycle Eff") {
+    primeVueSetOption.scales.y.reverse = true;
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      return 10 * index;
+    };
+    primeVueSetOption.scales.y.grid = {
+      color: GRID_COLOR,
+    };
+    primeVueSetOption.scales.x.grid = {
+      display: false,
+    };
+  }
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
+  const maxY = chartData.y_axis.max;
+  const getSimpleTimeLabel = simpleTimeLabel;
+  const getFollowTimeLabel = followTimeLabel;
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  const datasetsPrimary = chartData.data[0].data;
+  const datasetsSecondary = chartData.data[1].data;
+  datasetsPrimary.sort((a, b) => b.y - a.y);
+  datasetsSecondary.sort((a, b) => {
+      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
+      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
+      return indexA - indexB;
+  });
+
+  const xLabelData = datasetsPrimary.map(item => item.x);
+  const yDataPrimary = datasetsPrimary.map(item => item.y);
+  const yDataSecondary = datasetsSecondary.map(item => item.y);
+
+  primeVueSetData = {
+    labels: xLabelData,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: yDataPrimary,
+        backgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: yDataSecondary,
+        backgroundColor: colorSecondary,
+      },
+    ]
+  };
+  primeVueSetOption = {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        mode: 'index',
+        titleFont: {weight: 'normal'},
+        callbacks: {}
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: customizeScaleChartOptionTitleByContent(knownScaleHorizontalChartOptions, null),
+  };
+  switch (xUnit) {
+    case 'date':
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
+          switch (context.datasetIndex) {
+            case 0:
+              return `${labelPrimary}: ${value}`;
+            case 1:
+              return `${labelSecondary}: ${value}`;
+          }
+      };
+      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
+        return getFollowTimeLabel(value, maxY, 1)
+      };
+      break;
+    case 'count':
+    default:
+      primeVueSetOption.scales.x.ticks.precision = 0;
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+          const value = context.parsed.x === null ? "n/a" : context.parsed.x;
+          switch (context.datasetIndex) {
+            case 0:
+              return `${labelPrimary}: ${value}`;
+            case 1:
+              return `${labelSecondary}: ${value}`;
+          }
+      };
+      break;
+  }
+  if(isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label}`;
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      if(label) {
+          return label.length > 21 ? `${label.substring(0, 18)}...` : label
+        };
+      }
+
+  }else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      let labelStart = label[0];
+      let labelEnd = label[1];
+
+      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
+      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd
+    };
+  }
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
+      content,
+      ticksOfXAxis,
+    },
+  }) {
+  let resultScaleObj;
+  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
+  return resultScaleObj;
+}
+
+function customizeScaleChartOptionTitleByContent(whichScaleObj, content){
+  if (!content) {
+    return whichScaleObj;
+  }
+
+  return {
+    ...whichScaleObj,
+      x: {
+        ...whichScaleObj.x,
+        title: {
+          ...whichScaleObj.x.title,
+          text: content.x
+        }
+      },
+      y: {
+        ...whichScaleObj.y,
+        title: {
+          ...whichScaleObj.y.title,
+          text: content.y
+        }
+      }
+    };
+}
+
+function customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
+  return {
+    ...scaleObjectToAlter,
+    x: {
+      ...scaleObjectToAlter.x,
+        ticks: {
+          ...scaleObjectToAlter.x.ticks,
+            callback: function(value, index) {
+              return ticksOfXAxis[index];
+            },
+        },
+      },
+  };
+}
+
+function getLineChart0(chartData, content, yUnit) {
+  let datasetsPrimary;
+  let datasetsSecondary;
+  const minX = chartData.x_axis.min;
+  const maxX = chartData.x_axis.max;
+  let xLabelData;
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+  const getMoment = (time)=> {
+    return moment(time).format('YYYY/M/D hh:mm:ss')
+  };
+  const getSimpleTimeLabel = simpleTimeLabel;
+
+  switch (yUnit) {
+    case 'date':
+      datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
+      chartData.y_axis.max, chartData.y_axis.min);
+      datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false,
+      chartData.y_axis.max, chartData.y_axis.min);
+      xLabelData = setXLabelsData(chartData.x_axis);
+      break;
+    case 'count':
+      datasetsPrimary = chartData.data[0].data;
+      datasetsSecondary = chartData.data[1].data;
+      xLabelData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+      break;
+  }
+
+  const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
+  const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xLabelData, formatToSet);
+
+  primeVueSetData = {
+    labels: xLabelData,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: datasetsPrimary,
+        fill: false,
+        tension: 0,
+        borderColor: colorPrimary,
+        pointBackgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: datasetsSecondary,
+        fill: false,
+        tension: 0,
+        borderColor: colorSecondary,
+        pointBackgroundColor: colorSecondary,
+      }
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        mode: 'index',
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          title: function(context) {
+            return `${content.x}: ${getMoment(context[0].parsed.x)}`;
+          },
+          label:function(context) {
+            return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+          },
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales:  {
+      x: {
+        min: minX,
+        max: maxX,
+        type: 'time',
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.x,
+        },
+        time: {
+          displayFormats: {
+            second: 'h:mm:ss',
+            minute: 'M/d h:mm',
+            hour: 'M/d h:mm',
+            day: 'M/d h',
+            month: 'y/M/d',
+          },
+          round: true
+        },
+        ticks: {
+          padding: 8,
+          display: true,
+          maxRotation: 0,
+          color: '#64748b',
+          source: 'labels',
+          callback: function(value, index) {
+            return ticksOfXAxis[index];
+          },
+        },
+        border: {
+          color: '#64748b',
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.y
+        },
+        grid: {
+          color: '#64748b',
+        },
+        border: {
+          display: false,
+        },
+        ticks: {
+
+          color: '#64748b',
+          padding: 8,
+          callback: function (value, index, ticks) {
+            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            return getYTicksByIndex(resultStepSize, index, unitToUse);
+          },
+        }
+      },
+    },
+  };
+
+  return [primeVueSetData, primeVueSetOption];
+}
+
+function getCaseByTaskHorizontalBarChart(chartData, content, isSingle, xUnit = 'count') {
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  const datasetsPrimary = chartData.data[0].data;
+  const datasetsSecondary = chartData.data[1].data;
+  datasetsPrimary.sort((a, b) => b.y - a.y);
+  datasetsSecondary.sort((a, b) => {
+      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
+      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
+      return indexA - indexB;
+  });
+
+  const xLabelData = datasetsPrimary.map(item => item.x);
+  const yDataPrimary = datasetsPrimary.map(item => item.y);
+  const yDataSecondary = datasetsSecondary.map(item => item.y);
+
+  primeVueSetData = {
+    labels: xLabelData,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: yDataPrimary,
+        backgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: yDataSecondary,
+        backgroundColor: colorSecondary,
+      },
+    ]
+  };
+  primeVueSetOption = {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        mode: 'index',
+        titleFont: {weight: 'normal'},
+        callbacks: {}
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+          title: {
+            display: true,
+            color: '#334155',
+            font: {
+                size: 12,
+                lineHeight: 2
+            },
+            text: content.x,
+          },
+          ticks: {
+            display: true,
+            maxRotation: 0,
+            color: '#64748b',
+            callback: function(value, index, ticks) {
+              return value;
+            }
+            },
+          grid: {
+          color: '#64748b',
+          tickLength: 0,
+          },
+          border: {
+          display:false,
+          },
+      },
+      y: {
+          beginAtZero: true,
+          type: 'category',
+          title: {
+            display: true,
+            color: '#334155',
+            font: {
+                size: 12,
+                lineHeight: 2
+            },
+            text: content.y,
+          },
+          ticks:{
+          color: '#64748b',
+          padding: 8,
+          },
+          grid: {
+          display:false,
+          color: '#64748b',
+          },
+          border: {
+          display: false,
+          },
+      },
+      },
+  };
+  switch (xUnit) {
+    case 'dummy':
+    case 'count':
+    default:
+      primeVueSetOption.scales.x.ticks.precision = 0;
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        const value = context.parsed.x === null ? "n/a" : context.parsed.x;
+          switch (context.datasetIndex) {
+            case 0:
+              return `${labelPrimary}: ${value}`;
+            case 1:
+              return `${labelSecondary}: ${value}`;
+          }
+      };
+      break;
+  }
+  if(isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label}`;
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      if(label) {
+          return label.length > 21 ? `${label.substring(0, 18)}...` : label
+        };
+      }
+
+  }else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      let labelStart = label[0];
+      let labelEnd = label[1];
+
+      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
+      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd
+    };
+  }
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getAvgProcessTimeHorizontalBarChart(chartData, content, isSingle, xUnit="date") {
+  const maxY = chartData.y_axis.max;
+  const getSimpleTimeLabel = simpleTimeLabel;
+  const getFollowTimeLabel = followTimeLabel;
+  const labelPrimary = chartData.data[0].label;
+  const labelSecondary = chartData.data[1].label;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  const datasetsPrimary = chartData.data[0].data;
+  const datasetsSecondary = chartData.data[1].data;
+  datasetsPrimary.sort((a, b) => b.y - a.y);
+  datasetsSecondary.sort((a, b) => {
+      const indexA = datasetsPrimary.findIndex(item => item.x === a.x);
+      const indexB = datasetsPrimary.findIndex(item => item.x === b.x);
+      return indexA - indexB;
+  });
+
+  const xLabelData = datasetsPrimary.map(item => item.x);
+  const yDataPrimary = datasetsPrimary.map(item => item.y);
+  const yDataSecondary = datasetsSecondary.map(item => item.y);
+
+  primeVueSetData = {
+    labels: xLabelData,
+    datasets: [
+      {
+        label: labelPrimary,
+        data: yDataPrimary,
+        backgroundColor: colorPrimary,
+      },
+      {
+        label: labelSecondary,
+        data: yDataSecondary,
+        backgroundColor: colorSecondary,
+      },
+    ]
+  };
+  primeVueSetOption = {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        mode: 'index',
+        titleFont: {weight: 'normal'},
+        callbacks: {}
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+    x: {
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+              size: 12,
+              lineHeight: 2
+          },
+          text: content.x,
+        },
+        ticks: {
+        display: true,
+        maxRotation: 0,
+        color: '#64748b',
+        },
+        grid: {
+        color: '#64748b',
+        tickLength: 0,
+        },
+        border: {
+        display:false,
+        },
+    },
+    y: {
+        beginAtZero: true,
+        type: 'category',
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+              size: 12,
+              lineHeight: 2
+          },
+          text: content.y
+        },
+        ticks:{
+        color: '#64748b',
+        padding: 8,
+        },
+        grid: {
+        display:false,
+        color: '#64748b',
+        },
+        border: {
+        display: false,
+        },
+      },
+    },
+  };
+  switch (xUnit) {
+    case 'dummy':
+    case 'date':
+    default:
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
+          switch (context.datasetIndex) {
+            case 0:
+              return `${labelPrimary}: ${value}`;
+            case 1:
+              return `${labelSecondary}: ${value}`;
+          }
+      };
+      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
+        return getFollowTimeLabel(value, maxY, 1)
+      };
+      break;
+  }
+  if(isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label}`;
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      if(label) {
+          return label.length > 21 ? `${label.substring(0, 18)}...` : label
+        };
+      }
+
+  }else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xLabelData[index];
+      let labelStart = label[0];
+      let labelEnd = label[1];
+
+      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
+      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd
+    };
+  }
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+// Created logic
+(async () => {
+  isLoading.value = true;
+
+  const routeParams = route.params;
+  const primaryType = routeParams.primaryType;
+  const secondaryType = routeParams.secondaryType;
+  const primaryId = routeParams.primaryId;
+  const secondaryId = routeParams.secondaryId;
+  const typeMap = {
+    'log': 'log_id',
+    'filter': 'filter_id'
+  };
+  const primaryTypeParam = typeMap[primaryType];
+  const secondaryTypeParam = typeMap[secondaryType];
+  const queryParams = [
+    { [primaryTypeParam]: primaryId },
+    { [secondaryTypeParam]: secondaryId }
+  ];
+
+  // 取得 Compare Data
+  await compareStore.getCompare(queryParams);
+  avgProcessTimeByTaskHeight.value = await getHorizontalBarHeight(compareDashboardData.value.time.avg_process_time_by_task);
+  if(compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
+    avgWaitingTimeByEdgeHeight.value = await getHorizontalBarHeight(compareDashboardData.value.time.avg_waiting_time_by_edge);
+  };
+  casesByTaskHeight.value = await getHorizontalBarHeight(compareDashboardData.value.freq.cases_by_task);
+  // create chart
+  [avgCycleTimeData.value, avgCycleTimeOptions.value] = getLineChart(
+    compareDashboardData.value.time.avg_cycle_time, contentData.avgCycleTime, 'date');
+  [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] = getBarChart(
+    compareDashboardData.value.time.avg_cycle_efficiency, contentData.avgCycleEfficiency, "Cycle Eff");
+  [avgProcessTimeData.value, avgProcessTimeOptions.value] = getLineChart(
+    compareDashboardData.value.time.avg_process_time, contentData.avgProcessTime, 'date');
+  [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] = getAvgProcessTimeHorizontalBarChart(
+    compareDashboardData.value.time.avg_process_time_by_task,
+    contentData.avgProcessTimeByTask, true, 'date');
+  [avgWaitingTimeData.value, avgWaitingTimeOptions.value] = getLineChart(
+    compareDashboardData.value.time.avg_waiting_time, contentData.avgWaitingTime, 'date');
+  if(compareDashboardData.value.time.avg_waiting_time_by_edge !== null) {
+    [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = getHorizontalBarChart(
+      compareDashboardData.value.time.avg_waiting_time_by_edge,
+      contentData.avgWaitingTimeByEdge, false, 'date');
+  } else {
+    [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [null, null]
+  }
+  [freqData.value, freqOptions.value] = getLineChart(
+    compareDashboardData.value.freq.cases, contentData.freq, 'count');
+  [casesByTaskData.value, casesByTaskOptions.value] = getCaseByTaskHorizontalBarChart(
+    compareDashboardData.value.freq.cases_by_task, contentData.casesByTask, true, 'count');
+})();
+
+// Mounted
+onMounted(() => {
+  isLoading.value = false;
+});
 </script>
 <style scoped>
 @reference "../../../assets/tailwind.css";
diff --git a/src/views/Compare/MapCompare.vue b/src/views/Compare/MapCompare.vue
index d3460e9..53eae2b 100644
--- a/src/views/Compare/MapCompare.vue
+++ b/src/views/Compare/MapCompare.vue
@@ -1,535 +1,499 @@
+<!-- Sidebar: Switch data type -->
 <template>
-    <!-- Sidebar: Switch data type -->
-    <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
-      <ul class="space-y-4 flex flex-col justify-center items-center">
-        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-          hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
-          <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
-            track_changes
-          </span>
-        </li>
-        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-          hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
-          <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
-            tornado
-          </span>
-        </li>
-        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50
-          drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
-          <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
-            rebase
-          </span>
-        </li>
-      </ul>
-    </div>
-  
-    <!-- Cytoscape Map -->
-    <div class="min-w-full h-screen-main bg-neutral-50 -z-40">
-      <div id="cy" class="min-w-full h-screen-main"></div>
-    </div>
-  
-    <!-- Sidebar: State -->
-    <div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
-      <ul class="flex flex-col justify-center items-center">
-        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer
-          bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
-          :class="{'border-primary': sidebarState}" id="iconState" v-tooltip.left="tooltip.sidebarState">
-          <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
-            :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
-            info
-          </span>
-        </li>
-      </ul>
-    </div>
-  
-    <!-- Sidebar Model -->
-    <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
-      @switch-data-layer-type="switchDataLayerType" ></SidebarView>
-    <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
-    <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
-    <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
-      :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
-    @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRef"></SidebarFilter>
-  </template>
-  
-  <script>
-  import { onBeforeMount, computed, } from 'vue';
-  import { storeToRefs } from 'pinia';
-  import { useRoute } from 'vue-router';
-  import { useLoadingStore } from '@/stores/loading';
-  import { useAllMapDataStore } from '@/stores/allMapData';
-  import { useConformanceStore } from '@/stores/conformance';
-  import cytoscapeMap from '@/module/cytoscapeMap.js';
-  import { useCytoscapeStore } from '@/stores/cytoscapeStore';
-  import { useMapPathStore } from '@/stores/mapPathStore';
-  import SidebarView from '@/components/Discover/Map/SidebarView.vue';
-  import SidebarState from '@/components/Discover/Map/SidebarState.vue';
-  import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
-  import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
-  import ImgCapsule1 from '@/assets/capsule1.svg';
-  import ImgCapsule2 from '@/assets/capsule2.svg';
-  import ImgCapsule3 from '@/assets/capsule3.svg';
-  import ImgCapsule4 from '@/assets/capsule4.svg';
-  
-  const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
-  
-  export default {
-    setup() {
-      const loadingStore = useLoadingStore();
-      const allMapDataStore = useAllMapDataStore();
-      const { isLoading } = storeToRefs(loadingStore);
-      const route = useRoute();
-      const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
-        filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
-        temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
-        postRuleData
-      } = storeToRefs(allMapDataStore);
-  
-      const cytoscapeStore = useCytoscapeStore();
-  
-      const { setCurrentGraphId } = cytoscapeStore;
-  
-      const numberBeforeMapInRoute = computed(() => {
-        // 取得當前路由的路徑
-        const path = route.path;
-        // 使用斜線分割路徑
-        const segments = path.split('/');
-        // 查找包含 'map' 的片段索引
-        const mapIndex = segments.findIndex(segment => segment.includes('map'));
-        if (mapIndex > 0) {
-          // 定位到 'map' 片段的左邊片段
-          const previousSegment = segments[mapIndex - 1];
-          // 萃取左邊片段中的數字
-          const match = previousSegment.match(/\d+/);
-          return match ? match[0] : 'No number found';
-        }
-        return 'No map segment found';
-      });
-  
-      onBeforeMount(() => {
-        setCurrentGraphId(numberBeforeMapInRoute);
-      });
-  
-  
-      return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
-        baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe,
-        filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData,
-        ruleData, allMapDataStore, cases, postRuleData,
-        setCurrentGraphId,
-      };
-    },
-    props:['type', 'checkType', 'checkId', 'checkFileId'], // 來自 router 的 props
-    components: {
-      SidebarView,
-      SidebarState,
-      SidebarTraces,
-      SidebarFilter,
-    },
-    data() {
-      return {
-        processMapData: {
-          startId: 0,
-          endId: 1,
-          nodes: [],
-          edges: [],
-        },
-        bpmnData: {
-          startId: 0,
-          endId: 1,
-          nodes: [],
-          edges: [],
-        },
-        cytoscapeGraph: null,
-        curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
-        mapType: 'processMap', // processMap | bpmn
-        mapPathStore: useMapPathStore(),
-        dataLayerType: 'freq', // freq | duration
-        dataLayerOption: 'total',
-        rank: 'LR', // 直向 TB | 橫向 LR
-        traceId: 1,
-        sidebarView: false, // SideBar: Visualization Setting
-        sidebarState: false, // SideBar: Summary & Insight
-        sidebarTraces: false, // SideBar: Traces
-        sidebarFilter: false, // SideBar: Filter
-        infiniteFirstCases: null,
-        tooltip: {
-          sidebarView: {
-            value: 'Visualization Setting',
-            class: 'ml-1',
-            pt: {
-              text: 'text-[10px] p-1'
-            }
-          },
-          sidebarTraces: {
-            value: 'Trace',
-            class: 'ml-1',
-            pt: {
-              text: 'text-[10px] p-1'
-            }
-          },
-          sidebarFilter: {
-            value: 'Filter',
-            class: 'ml-1',
-            pt: {
-              text: 'text-[10px] p-1'
-            }
-          },
-          sidebarState: {
-            value: 'Summary',
-            class: 'ml-1',
-            pt: {
-              text: 'text-[10px] p-1'
-            }
-          },
-        }
-      }
-    },
-    computed:{
-      sidebarLeftValue: function() {
-        const result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true;
-        return result;
-      }
-    },
-    watch: {
-      sidebarView: function(newValue) {
-        if(newValue) {
-          this.sidebarFilter = false;
-          this.sidebarTraces = false;
-        }
-      },
-      sidebarFilter: function(newValue) {
-        if(newValue) {
-          this.sidebarView = false;
-          this.sidebarState = false;
-          this.sidebarTraces = false;
-          this.sidebarState = false;
-        }
-      },
-      sidebarTraces: function(newValue) {
-        if(newValue) {
-          this.sidebarView = false;
-          this.sidebarState = false;
-          this.sidebarFilter = false;
-          this.sidebarState = false;
-        }
-      },
-      sidebarState: function(newValue) {
-        if(newValue) {
-          this.sidebarFilter = false;
-          this.sidebarTraces = false;
-        }
-      },
-    },
-    methods: {
-      /**
-       * switch map type
-       * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
-       */
-      async switchMapType(type) {
-        this.mapType = type;
-        this.createCy(type);
-      },
-      /**
-       * switch curve style
-       * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
-       */
-      async switchCurveStyles(style) {
-        this.curveStyle = style;
-        this.createCy(this.mapType);
-      },
-      /**
-       * switch rank
-       * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
-       */
-      async switchRank(rank) {
-        this.rank = rank;
-        this.createCy(this.mapType);
-      },
-      /**
-       * switch Data Layoer Type or Option.
-       * @param {string} type freq | duration
-       * @param {string} option 下拉選單中的選項
-       */
-      async switchDataLayerType(type, option){
-        this.dataLayerType = type;
-        this.dataLayerOption = option;
-        this.createCy(this.mapType);
-      },
-      /**
-       * switch trace id and data
-       * @param {event} e input 傳入的事件
-       */
-      async switchTraceId(e) {
-        if(e.id == this.traceId) return;
-        // 超過 1000 筆要 loading 畫面
-        this.isLoading = true; // 都要 loading 畫面
-        this.traceId = e.id;
-        await this.allMapDataStore.getTraceDetail();
-        this.$refs.tracesView.createCy();
-        this.isLoading = false;
-      },
-      /**
-       * 將 element nodes 資料彙整
-       * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
-       */
-       setNodesData(mapData) {
-         const mapType = this.mapType;
-         const logFreq = {
-          "total": "",
-          "rel_freq": "",
-          "average": "",
-          "median": "",
-          "max": "",
-          "min": "",
-          "cases": ""
-        };
-        const logDuration = {
-          "total": "",
-          "rel_duration": "",
-          "average": "",
-          "median": "",
-          "max": "",
-          "min": "",
-        };
-        // BPMN 才有 gateway 類別
-        const gateway = {
-          parallel: "+",
-          exclusive: "x",
-          inclusive: "o",
-        };
-  
-        // 避免每次渲染都重複累加
-        mapData.nodes = [];
-        // 將 api call 回來的資料帶進 node
-        this[mapType].vertices.forEach(node => {
-          switch (node.type) {
-            // add type of 'bpmn gateway' node
-            case 'gateway':
-              mapData.nodes.push({
-                data:{
-                  id:node.id,
-                  type:node.type,
-                  label:gateway[node.gateway_type],
-                  height:60,
-                  width:60,
-                  backgroundColor:'#FFF',
-                  bordercolor:'#003366',
-                  shape:"diamond",
-                  freq:logFreq,
-                  duration:logDuration,
-                }
-              })
-              break;
-            // add type of 'event' node
-            case 'event':
-              if(node.event_type === 'start') mapData.startId = node.id;
-              else if(node.event_type === 'end') mapData.endId = node.id;
-  
-              mapData.nodes.push({
-                data:{
-                  id:node.id,
-                  type:node.type,
-                  label:node.event_type,
-                  height: 48,
-                  width: 48,
-                  backgroundColor:'#FFFFFF',
-                  bordercolor:'#0F172A',
-                  textColor: '#FF3366',
-                  shape:"ellipse",
-                  freq:logFreq,
-                  duration:logDuration,
-                }
-              });
-              break;
-            // add type of 'activity' node
-            default:
-              mapData.nodes.push({
-                  data:{
-                    id:node.id,
-                    type:node.type,
-                    label:node.label,
-                    height: 48,
-                    width: 216,
-                    textColor: '#0F172A',
-                    backgroundColor:'rgba(0, 0, 0, 0)',
-                    borderradius: 999,
-                    shape:"round-rectangle",
-                    freq:node.freq,
-                    duration:node.duration,
-                    backgroundOpacity: 0,
-                    borderOpacity: 0,
-                  }
-                })
-              break;
-          }
-        });
-       },
-      /**
-       * 將 element edges 資料彙整
-       * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
-       */
-      setEdgesData(mapData) {
-        const mapType = this.mapType;
-        //add event duration is empty
-        const logDuration = {
-          "total": "",
-          "rel_duration": "",
-          "average": "",
-          "median": "",
-          "max": "",
-          "min": "",
-          "cases": ""
-        };
-  
-        mapData.edges = [];
-        this[mapType].edges.forEach(edge => {
-          mapData.edges.push({
-            data: {
-              source:edge.tail,
-              target:edge.head,
-              freq:edge.freq,
-              duration:edge.duration === null ? logDuration : edge.duration,
-              style:'dotted',
-              lineWidth:1,
-            },
-          });
-        });
-       },
-      /**
-       * create cytoscape's map
-       * @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。
-       */
-      async createCy(type) {
-        const graphId = document.getElementById('cy');
-        const mapData = type === 'processMap'? this.processMapData: this.bpmnData;
-  
-        if(this[type].vertices.length !== 0){        
-          this.setNodesData(mapData);
-          this.setEdgesData(mapData);
-          this.setActivityBgImage(mapData);       
-          this.cytoscapeGraph = await cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
-          const processOrBPMN = this.mapType === 'processMap' ? 'process' : 'bpmn';
-          const curveType = this.curveStyle === 'taxi' ? 'elbow' : 'curved';
-          const directionType = this.rank === 'LR' ? 'horizontal' : 'vertical';
-          await this.mapPathStore.setCytoscape(this.cytoscapeGraph, processOrBPMN, curveType, directionType);
-        };
-      },
-      setActivityBgImage(mapData) {
-        const nodes = mapData.nodes;
-        // 一組有多少個activities
-        const groupSize = Math.floor(nodes.length / ImgCapsules.length);
-        let nodeOptionArr = [];
-        const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
-        // 設定除了 start, end 的 node 顏色
-        // 找出 type activity's node
-        const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
-        // 找出除了 start, end 以外所有的 node 的 option value
-        activityNodeArray.forEach(node => nodeOptionArr.push(node.data[this.dataLayerType][this.dataLayerOption]));
-        // 將node的option值從小到大排序(映對色階淺到深)
-        nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
-        for(let i = 0; i < ImgCapsules.length; i++) {
-          const startIdx = i * groupSize;
-          const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
-          leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
-        }
-        for(let level = 0; level < leveledGroups.length; level++) {
-          leveledGroups[level].forEach(option => {
-            // 考慮可能有名次一樣的情形
-            const curNodes = activityNodeArray.filter(activityNode => activityNode.data[this.dataLayerType][this.dataLayerOption] === option);
-            curNodes.forEach(curNode => {
-                curNode.data = {
-                ...curNode.data,
-                nodeImageUrl: ImgCapsules[level],
-                level,
-              };
-            });          
-          });
-        }      
-      },
-    },
-    async created() {
-      const routeParams = this.$route.params;
-      const file = this.$route.meta.file;
-      const isCheckPage = this.$route.name.includes('Check');
-  
-      // 先 loading 再執行以下程式
-      this.isLoading = true;
-      // Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
-      switch (routeParams.type) {
+  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
+    :class="sidebarLeftValue ? 'bg-neutral-50' : ''">
+    <ul class="space-y-4 flex flex-col justify-center items-center">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
+        hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
+        v-tooltip="tooltip.sidebarView">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
+          track_changes
+        </span>
+      </li>
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
+        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
+        v-tooltip="tooltip.sidebarFilter">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
+          tornado
+        </span>
+      </li>
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50
+        drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
+        :class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
+          :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+          rebase
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Cytoscape Map -->
+  <div class="min-w-full h-screen-main bg-neutral-50 -z-40">
+    <div id="cy" class="min-w-full h-screen-main"></div>
+  </div>
+
+  <!-- Sidebar: State -->
+  <div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+    <ul class="flex flex-col justify-center items-center">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer
+        bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
+        :class="{ 'border-primary': sidebarState }" id="iconState" v-tooltip.left="tooltip.sidebarState">
+        <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
+          :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+          info
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Sidebar Model -->
+  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
+    @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
+  <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
+  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef">
+  </SidebarTraces>
+  <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
+    :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
+    @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
+</template>
+
+<script>
+import { useConformanceStore } from '@/stores/conformance';
+
+export default {
+  async beforeRouteEnter(to, from, next) {
+    const isCheckPage = to.name.includes('Check');
+
+    if (isCheckPage) {
+      const conformanceStore = useConformanceStore();
+      switch (to.params.type) {
         case 'log':
-          if(!isCheckPage) {
-            this.logId = await routeParams.fileId;
-            this.baseLogId = await routeParams.fileId;
-          } else {
-            this.logId = await file.parent.id;
-            this.baseLogId = await file.parent.id;
-          }
+          conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
           break;
         case 'filter':
-          if(!isCheckPage) {
-            this.createFilterId = await routeParams.fileId;
-          } else {
-            this.createFilterId = await file.parent.id;
-          }
-          // 取得 logID 和上次儲存的 Funnel
-          await this.allMapDataStore.fetchFunnel(this.createFilterId);
-          this.isRuleData = await Array.from(this.temporaryData);
-          this.ruleData = await this.isRuleData.map(e => this.$refs.sidebarFilterRef.setRule(e));
+          conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
           break;
       }
-      // 取得 logId 後才 call api
-      await this.allMapDataStore.getAllMapData();
-      await this.allMapDataStore.getAllTrace();
-      
-      // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
-      this.traceId = await this.traces[0]?.id;
-      this.baseTraceId = await this.baseTraces[0]?.id;
-      await this.createCy(this.mapType);
-      await this.allMapDataStore.getFilterParams();
-      await this.allMapDataStore.getTraceDetail();
-  
-      // 執行完後才取消 loading
-      this.isLoading = false;
-      // 存檔 Modal 打開時，側邊欄要關閉
-      this.$emitter.on('saveModal', boolean => {
-        this.sidebarView = boolean;
-        this.sidebarFilter = boolean;
-        this.sidebarTraces = boolean;
-        this.sidebarState = boolean;
-      });
-      this.$emitter.on('leaveFilter', boolean => {
-        this.sidebarView = boolean;
-        this.sidebarFilter = boolean;
-        this.sidebarTraces = boolean;
-        this.sidebarState = boolean;
-      });
-    },
-    beforeUnmount() {
-      this.logId = null;
-      this.createFilterId = null;
-      this.tempFilterId = null;
-      this.temporaryData = [];
-      this.postRuleData = [];
-      this.ruleData = [];
-    },
-    async beforeRouteEnter(to, from, next) {
-      const isCheckPage = to.name.includes('Check');
-  
-      if (isCheckPage) {
-        const conformanceStore = useConformanceStore();
-        switch (to.params.type) {
-          case 'log':
-            conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
-            break;
-          case 'filter':
-            conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
-            break;
-        }
-        await conformanceStore.getConformanceReport(true);
-        to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
-      }
-      next();
+      await conformanceStore.getConformanceReport(true);
+      to.meta.file = conformanceStore.routeFile;
     }
+    next();
   }
-  </script>
-  
\ No newline at end of file
+}
+</script>
+
+<script setup>
+import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { useAllMapDataStore } from '@/stores/allMapData';
+import { useConformanceStore } from '@/stores/conformance';
+import cytoscapeMap from '@/module/cytoscapeMap.js';
+import { useCytoscapeStore } from '@/stores/cytoscapeStore';
+import { useMapPathStore } from '@/stores/mapPathStore';
+import emitter from '@/utils/emitter';
+import SidebarView from '@/components/Discover/Map/SidebarView.vue';
+import SidebarState from '@/components/Discover/Map/SidebarState.vue';
+import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
+import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
+import ImgCapsule1 from '@/assets/capsule1.svg';
+import ImgCapsule2 from '@/assets/capsule2.svg';
+import ImgCapsule3 from '@/assets/capsule3.svg';
+import ImgCapsule4 from '@/assets/capsule4.svg';
+
+const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
+
+const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
+
+const route = useRoute();
+
+// Stores
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
+  filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
+  temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
+  postRuleData
+} = storeToRefs(allMapDataStore);
+
+const cytoscapeStore = useCytoscapeStore();
+const { setCurrentGraphId } = cytoscapeStore;
+const mapPathStore = useMapPathStore();
+
+const numberBeforeMapInRoute = computed(() => {
+  const path = route.path;
+  const segments = path.split('/');
+  const mapIndex = segments.findIndex(segment => segment.includes('map'));
+  if (mapIndex > 0) {
+    const previousSegment = segments[mapIndex - 1];
+    const match = previousSegment.match(/\d+/);
+    return match ? match[0] : 'No number found';
+  }
+  return 'No map segment found';
+});
+
+onBeforeMount(() => {
+  setCurrentGraphId(numberBeforeMapInRoute);
+});
+
+// Data
+const processMapData = ref({
+  startId: 0,
+  endId: 1,
+  nodes: [],
+  edges: [],
+});
+const bpmnData = ref({
+  startId: 0,
+  endId: 1,
+  nodes: [],
+  edges: [],
+});
+const cytoscapeGraph = ref(null);
+const curveStyle = ref('unbundled-bezier');
+const mapType = ref('processMap');
+const dataLayerType = ref('freq');
+const dataLayerOption = ref('total');
+const rank = ref('LR');
+const localTraceId = ref(1);
+const sidebarView = ref(false);
+const sidebarState = ref(false);
+const sidebarTraces = ref(false);
+const sidebarFilter = ref(false);
+const infiniteFirstCases = ref(null);
+const startNodeId = ref(-1);
+const endNodeId = ref(-1);
+const tracesViewRef = ref(null);
+const sidebarFilterRefComp = ref(null);
+
+const tooltip = {
+  sidebarView: {
+    value: 'Visualization Setting',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarTraces: {
+    value: 'Trace',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarFilter: {
+    value: 'Filter',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarState: {
+    value: 'Summary',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+};
+
+// Computed
+const sidebarLeftValue = computed(() => {
+  return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
+});
+
+// Watch
+watch(sidebarView, (newValue) => {
+  if (newValue) {
+    sidebarFilter.value = false;
+    sidebarTraces.value = false;
+  }
+});
+
+watch(sidebarFilter, (newValue) => {
+  if (newValue) {
+    sidebarView.value = false;
+    sidebarState.value = false;
+    sidebarTraces.value = false;
+    sidebarState.value = false;
+  }
+});
+
+watch(sidebarTraces, (newValue) => {
+  if (newValue) {
+    sidebarView.value = false;
+    sidebarState.value = false;
+    sidebarFilter.value = false;
+    sidebarState.value = false;
+  }
+});
+
+watch(sidebarState, (newValue) => {
+  if (newValue) {
+    sidebarFilter.value = false;
+    sidebarTraces.value = false;
+  }
+});
+
+// Methods
+async function switchMapType(type) {
+  mapType.value = type;
+  createCy(type);
+}
+
+async function switchCurveStyles(style) {
+  curveStyle.value = style;
+  createCy(mapType.value);
+}
+
+async function switchRank(rankValue) {
+  rank.value = rankValue;
+  createCy(mapType.value);
+}
+
+async function switchDataLayerType(type, option) {
+  dataLayerType.value = type;
+  dataLayerOption.value = option;
+  createCy(mapType.value);
+}
+
+async function switchTraceId(e) {
+  if (e.id == traceId.value) return;
+  isLoading.value = true;
+  traceId.value = e.id;
+  await allMapDataStore.getTraceDetail();
+  tracesViewRef.value.createCy();
+  isLoading.value = false;
+}
+
+function setNodesData(mapData) {
+  const mapTypeVal = mapType.value;
+  const logFreq = {
+    "total": "",
+    "rel_freq": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+    "cases": ""
+  };
+  const logDuration = {
+    "total": "",
+    "rel_duration": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+  };
+  const gateway = {
+    parallel: "+",
+    exclusive: "x",
+    inclusive: "o",
+  };
+
+  mapData.nodes = [];
+  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  mapSource.vertices.forEach(node => {
+    switch (node.type) {
+      case 'gateway':
+        mapData.nodes.push({
+          data: {
+            id: node.id,
+            type: node.type,
+            label: gateway[node.gateway_type],
+            height: 60,
+            width: 60,
+            backgroundColor: '#FFF',
+            bordercolor: '#003366',
+            shape: "diamond",
+            freq: logFreq,
+            duration: logDuration,
+          }
+        })
+        break;
+      case 'event':
+        if (node.event_type === 'start') {
+          mapData.startId = node.id;
+          startNodeId.value = node.id;
+        }
+        else if (node.event_type === 'end') {
+          mapData.endId = node.id;
+          endNodeId.value = node.id;
+        }
+
+        mapData.nodes.push({
+          data: {
+            id: node.id,
+            type: node.type,
+            label: node.event_type,
+            height: 48,
+            width: 48,
+            backgroundColor: '#FFFFFF',
+            bordercolor: '#0F172A',
+            textColor: '#FF3366',
+            shape: "ellipse",
+            freq: logFreq,
+            duration: logDuration,
+          }
+        });
+        break;
+      default:
+        mapData.nodes.push({
+          data: {
+            id: node.id,
+            type: node.type,
+            label: node.label,
+            height: 48,
+            width: 216,
+            textColor: '#0F172A',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderradius: 999,
+            shape: "round-rectangle",
+            freq: node.freq,
+            duration: node.duration,
+            backgroundOpacity: 0,
+            borderOpacity: 0,
+          }
+        })
+        break;
+    }
+  });
+}
+
+function setEdgesData(mapData) {
+  const mapTypeVal = mapType.value;
+  const logDuration = {
+    "total": "",
+    "rel_duration": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+    "cases": ""
+  };
+
+  mapData.edges = [];
+  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  mapSource.edges.forEach(edge => {
+    mapData.edges.push({
+      data: {
+        source: edge.tail,
+        target: edge.head,
+        freq: edge.freq,
+        duration: edge.duration === null ? logDuration : edge.duration,
+        edgeStyle: edge.tail === startNodeId.value || edge.head === endNodeId.value ? 'dotted' : 'solid',
+        lineWidth: 1,
+      },
+    });
+  });
+}
+
+async function createCy(type) {
+  const graphId = document.getElementById('cy');
+  const mapData = type === 'processMap' ? processMapData.value : bpmnData.value;
+  const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
+
+  if (mapSource.vertices.length !== 0) {
+    setNodesData(mapData);
+    setEdgesData(mapData);
+    setActivityBgImage(mapData);
+    cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
+    const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
+    const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
+    const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
+    await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
+  };
+}
+
+function setActivityBgImage(mapData) {
+  const nodes = mapData.nodes;
+  const groupSize = Math.floor(nodes.length / ImgCapsules.length);
+  let nodeOptionArr = [];
+  const leveledGroups = [];
+  const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
+  activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
+  nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
+  for (let i = 0; i < ImgCapsules.length; i++) {
+    const startIdx = i * groupSize;
+    const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
+    leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
+  }
+  for (let level = 0; level < leveledGroups.length; level++) {
+    leveledGroups[level].forEach(option => {
+      const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
+      curNodes.forEach(curNode => {
+        curNode.data = {
+          ...curNode.data,
+          nodeImageUrl: ImgCapsules[level],
+          level,
+        };
+      });
+    });
+  }
+}
+
+// Created logic
+(async () => {
+  const routeParams = route.params;
+  const file = route.meta.file;
+  const isCheckPage = route.name.includes('Check');
+
+  isLoading.value = true;
+  switch (routeParams.type) {
+    case 'log':
+      if (!isCheckPage) {
+        logId.value = await routeParams.fileId;
+        baseLogId.value = await routeParams.fileId;
+      } else {
+        logId.value = await file.parent.id;
+        baseLogId.value = await file.parent.id;
+      }
+      break;
+    case 'filter':
+      if (!isCheckPage) {
+        createFilterId.value = await routeParams.fileId;
+      } else {
+        createFilterId.value = await file.parent.id;
+      }
+      await allMapDataStore.fetchFunnel(createFilterId.value);
+      isRuleData.value = await Array.from(temporaryData.value);
+      ruleData.value = await isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
+      break;
+  }
+  await allMapDataStore.getAllMapData();
+  await allMapDataStore.getAllTrace();
+
+  traceId.value = await traces.value[0]?.id;
+  baseTraceId.value = await baseTraces.value[0]?.id;
+  await createCy(mapType.value);
+  await allMapDataStore.getFilterParams();
+  await allMapDataStore.getTraceDetail();
+
+  isLoading.value = false;
+  emitter.on('saveModal', boolean => {
+    sidebarView.value = boolean;
+    sidebarFilter.value = boolean;
+    sidebarTraces.value = boolean;
+    sidebarState.value = boolean;
+  });
+  emitter.on('leaveFilter', boolean => {
+    sidebarView.value = boolean;
+    sidebarFilter.value = boolean;
+    sidebarTraces.value = boolean;
+    sidebarState.value = boolean;
+  });
+})();
+
+onBeforeUnmount(() => {
+  logId.value = null;
+  createFilterId.value = null;
+  temporaryData.value = [];
+  postRuleData.value = [];
+  ruleData.value = [];
+});
+</script>
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index 2060609..36ef74e 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -8,95 +8,13 @@
   </main>
 </template>
 <script>
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
 import { useConformanceStore } from '@/stores/conformance';
-import StatusBar from '@/components/Discover/StatusBar.vue';
-import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
-import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
 
 export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const conformanceStore = useConformanceStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-      conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
-      selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
-      conformanceTempReportData, conformanceFileName,
-    } = storeToRefs(conformanceStore);
-
-    return { isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
-      conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType,
-      selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo,
-      conformanceRuleData, conformanceTempReportData, conformanceFileName
-    };
-  },
-  components: {
-    StatusBar,
-    ConformanceResults,
-    ConformanceSidebar,
-  },
-  async created() {
-    this.isLoading = true;
-
-    const params = this.$route.params;
-    const file = this.$route.meta.file;
-    const isCheckPage = this.$route.name.includes('Check');
-
-    if(!isCheckPage) {
-      switch (params.type) {
-        case 'log': // FILES page 來的 log
-          this.conformanceLogId = params.fileId;
-          break;
-        case 'filter': // FILES page 來的 filter
-          this.conformanceFilterId = params.fileId;
-          break;
-      }
-    } else {
-      switch (params.type) {
-        case 'log': // FILES page 來的已存檔 rule(log-check)
-          this.conformanceLogId = file.parent.id;
-          this.conformanceFileName = file.name;
-          break;
-        case 'filter': // FILES page 來的已存檔 rule(filter-check)
-          this.conformanceFilterId = file.parent.id;
-          this.conformanceFileName = file.name;
-          break;
-      }
-      await this.conformanceStore.getConformanceReport();
-    }
-    await this.conformanceStore.getConformanceParams();
-    // 給 rule 檔取得 ShowBar 一些時間
-    setTimeout(() => this.isLoading = false, 500);
-  },
-  mounted() {
-    this.selectedRuleType = 'Have activity';
-    this.selectedActivitySequence = 'Start & End';
-    this.selectedMode = 'Directly follows';
-    this.selectedProcessScope = 'End to end';
-    this.selectedActSeqMore = 'All';
-    this.selectedActSeqFromTo = 'From';
-  },
-  beforeUnmount() {
-    // 離開 conformance 時將 id 為 null，避免污染其他檔案
-    this.conformanceLogId = null;
-    this.conformanceFilterId = null;
-    this.conformanceLogCreateCheckId = null;
-    this.conformanceFilterCreateCheckId = null;
-    this.conformanceRuleData = null;
-    this.conformanceFileName = null;
-  },
   async beforeRouteEnter(to, from, next) {
     const isCheckPage = to.name.includes('Check');
     if (isCheckPage) {
       const conformanceStore = useConformanceStore();
-      // Save token in Headers.
-      // (?:^|.;\s)：匹配 "luciaToken" 之前的內容，允許它在字符串開頭或某個分號之後。
-      // luciaToken\s=\s**：匹配 "luciaToken="，並忽略兩邊的空格。
-      // ([^;]*)：捕獲 "luciaToken" 的值，直到遇到下一個分號或字符串結尾。
-      // .*$：匹配剩餘的字符，確保完整的提取。
-      // |^.*$：在找不到 "luciaToken" 的情況下，匹配整個字符串。
       switch (to.params.type) {
         case 'log':
           conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
@@ -106,9 +24,84 @@ export default {
           break;
       }
       await conformanceStore.getConformanceReport();
-      to.meta.file = await conformanceStore.conformanceTempReportData?.file; // 將 file data 存到 route 給 Navbar, StatusBar 使用
+      to.meta.file = await conformanceStore.conformanceTempReportData?.file;
     }
     next();
   }
 }
 </script>
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { useConformanceStore } from '@/stores/conformance';
+import StatusBar from '@/components/Discover/StatusBar.vue';
+import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
+import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
+
+const route = useRoute();
+
+// Stores
+const loadingStore = useLoadingStore();
+const conformanceStore = useConformanceStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
+  conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
+  selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
+  conformanceTempReportData, conformanceFileName,
+} = storeToRefs(conformanceStore);
+
+// Created logic
+(async () => {
+  isLoading.value = true;
+
+  const params = route.params;
+  const file = route.meta.file;
+  const isCheckPage = route.name.includes('Check');
+
+  if(!isCheckPage) {
+    switch (params.type) {
+      case 'log':
+        conformanceLogId.value = params.fileId;
+        break;
+      case 'filter':
+        conformanceFilterId.value = params.fileId;
+        break;
+    }
+  } else {
+    switch (params.type) {
+      case 'log':
+        conformanceLogId.value = file.parent.id;
+        conformanceFileName.value = file.name;
+        break;
+      case 'filter':
+        conformanceFilterId.value = file.parent.id;
+        conformanceFileName.value = file.name;
+        break;
+    }
+    await conformanceStore.getConformanceReport();
+  }
+  await conformanceStore.getConformanceParams();
+  setTimeout(() => isLoading.value = false, 500);
+})();
+
+// Mounted
+onMounted(() => {
+  selectedRuleType.value = 'Have activity';
+  selectedActivitySequence.value = 'Start & End';
+  selectedMode.value = 'Directly follows';
+  selectedProcessScope.value = 'End to end';
+  selectedActSeqMore.value = 'All';
+  selectedActSeqFromTo.value = 'From';
+});
+
+onBeforeUnmount(() => {
+  conformanceLogId.value = null;
+  conformanceFilterId.value = null;
+  conformanceLogCreateCheckId.value = null;
+  conformanceFilterCreateCheckId.value = null;
+  conformanceRuleData.value = null;
+  conformanceFileName.value = null;
+});
+</script>
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index 201fea6..71950b6 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -1,29 +1,22 @@
 <template>
   <!-- Sidebar: Switch data type -->
-  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
-    :class="sidebarLeftValue ? 'bg-neutral-50' : ''">
+  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
     <ul class="space-y-4 flex flex-col justify-center items-center">
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-        hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
-        v-tooltip="tooltip.sidebarView">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
-          :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
+        hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
           track_changes
         </span>
       </li>
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
-        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
-        v-tooltip="tooltip.sidebarFilter">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
-          :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
+        hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
           tornado
         </span>
       </li>
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50
-        drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
-        :class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
-        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
-          :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
+        drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
+        <span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
           rebase
         </span>
       </li>
@@ -40,7 +33,7 @@
     <ul class="flex flex-col justify-center items-center">
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer
         bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
-        :class="{ 'border-primary': sidebarState }" id="iconState" v-tooltip.left="tooltip.sidebarState">
+        :class="{'border-primary': sidebarState}" id="iconState" v-tooltip.left="tooltip.sidebarState">
         <span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
           :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
           info
@@ -50,486 +43,19 @@
   </div>
 
   <!-- Sidebar Model -->
-  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
-    @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
+  <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
+    @switch-data-layer-type="switchDataLayerType" ></SidebarView>
   <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
-  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView">
-  </SidebarTraces>
+  <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef"></SidebarTraces>
   <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
     :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
-    @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRef"></SidebarFilter>
+  @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
 </template>
 
 <script>
-import { onBeforeMount, computed, } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useRoute } from 'vue-router';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
 import { useConformanceStore } from '@/stores/conformance';
-import cytoscapeMap from '@/module/cytoscapeMap.js';
-import { useCytoscapeStore } from '@/stores/cytoscapeStore';
-import { useMapPathStore } from '@/stores/mapPathStore';
-import SidebarView from '@/components/Discover/Map/SidebarView.vue';
-import SidebarState from '@/components/Discover/Map/SidebarState.vue';
-import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
-import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
-import ImgCapsule1 from '@/assets/capsule1.svg';
-import ImgCapsule2 from '@/assets/capsule2.svg';
-import ImgCapsule3 from '@/assets/capsule3.svg';
-import ImgCapsule4 from '@/assets/capsule4.svg';
-
-const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
 export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const route = useRoute();
-    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
-      filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
-      temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
-      postRuleData
-    } = storeToRefs(allMapDataStore);
-
-    const cytoscapeStore = useCytoscapeStore();
-
-    const { setCurrentGraphId } = cytoscapeStore;
-
-    const numberBeforeMapInRoute = computed(() => {
-      // 取得當前路由的路徑
-      const path = route.path;
-      // 使用斜線分割路徑
-      const segments = path.split('/');
-      // 查找包含 'map' 的片段索引
-      const mapIndex = segments.findIndex(segment => segment.includes('map'));
-      if (mapIndex > 0) {
-        // 定位到 'map' 片段的左邊片段
-        const previousSegment = segments[mapIndex - 1];
-        // 萃取左邊片段中的數字
-        const match = previousSegment.match(/\d+/);
-        return match ? match[0] : 'No number found';
-      }
-      return 'No map segment found';
-    });
-
-    onBeforeMount(() => {
-      setCurrentGraphId(numberBeforeMapInRoute);
-    });
-
-
-    return {
-      isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
-      baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe,
-      filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData,
-      ruleData, allMapDataStore, cases, postRuleData,
-      setCurrentGraphId,
-    };
-  },
-  props: ['type', 'checkType', 'checkId', 'checkFileId'], // 來自 router 的 props
-  components: {
-    SidebarView,
-    SidebarState,
-    SidebarTraces,
-    SidebarFilter,
-  },
-  data() {
-    return {
-      processMapData: {
-        startId: 0,
-        endId: 1,
-        nodes: [],
-        edges: [],
-      },
-      bpmnData: {
-        startId: 0,
-        endId: 1,
-        nodes: [],
-        edges: [],
-      },
-      cytoscapeGraph: null,
-      curveStyle: 'unbundled-bezier', // unbundled-bezier | taxi
-      mapType: 'processMap', // processMap | bpmn
-      mapPathStore: useMapPathStore(),
-      dataLayerType: 'freq', // freq | duration
-      dataLayerOption: 'total',
-      rank: 'LR', // 直向 TB | 橫向 LR
-      traceId: 1,
-      sidebarView: false, // SideBar: Visualization Setting
-      sidebarState: false, // SideBar: Summary & Insight
-      sidebarTraces: false, // SideBar: Traces
-      sidebarFilter: false, // SideBar: Filter
-      infiniteFirstCases: null,
-      startNodeId: -1,
-      endNodeId: -1,
-      tooltip: {
-        sidebarView: {
-          value: 'Visualization Setting',
-          class: 'ml-1',
-          pt: {
-            text: 'text-[10px] p-1'
-          }
-        },
-        sidebarTraces: {
-          value: 'Trace',
-          class: 'ml-1',
-          pt: {
-            text: 'text-[10px] p-1'
-          }
-        },
-        sidebarFilter: {
-          value: 'Filter',
-          class: 'ml-1',
-          pt: {
-            text: 'text-[10px] p-1'
-          }
-        },
-        sidebarState: {
-          value: 'Summary',
-          class: 'ml-1',
-          pt: {
-            text: 'text-[10px] p-1'
-          }
-        },
-      }
-    }
-  },
-  computed: {
-    sidebarLeftValue: function () {
-      const result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true;
-      return result;
-    }
-  },
-  watch: {
-    sidebarView: function (newValue) {
-      if (newValue) {
-        this.sidebarFilter = false;
-        this.sidebarTraces = false;
-      }
-    },
-    sidebarFilter: function (newValue) {
-      if (newValue) {
-        this.sidebarView = false;
-        this.sidebarState = false;
-        this.sidebarTraces = false;
-        this.sidebarState = false;
-      }
-    },
-    sidebarTraces: function (newValue) {
-      if (newValue) {
-        this.sidebarView = false;
-        this.sidebarState = false;
-        this.sidebarFilter = false;
-        this.sidebarState = false;
-      }
-    },
-    sidebarState: function (newValue) {
-      if (newValue) {
-        this.sidebarFilter = false;
-        this.sidebarTraces = false;
-      }
-    },
-  },
-  methods: {
-    /**
-     * switch map type
-     * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
-     */
-    async switchMapType(type) {
-      this.mapType = type;
-      this.createCy(type);
-    },
-    /**
-     * switch curve style
-     * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
-     */
-    async switchCurveStyles(style) {
-      this.curveStyle = style;
-      this.createCy(this.mapType);
-    },
-    /**
-     * switch rank
-     * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
-     */
-    async switchRank(rank) {
-      this.rank = rank;
-      this.createCy(this.mapType);
-    },
-    /**
-     * switch Data Layoer Type or Option.
-     * @param {string} type freq | duration
-     * @param {string} option 下拉選單中的選項
-     */
-    async switchDataLayerType(type, option) {
-      this.dataLayerType = type;
-      this.dataLayerOption = option;
-      this.createCy(this.mapType);
-    },
-    /**
-     * switch trace id and data
-     * @param {event} e input 傳入的事件
-     */
-    async switchTraceId(e) {
-      if (e.id == this.traceId) return;
-      // 超過 1000 筆要 loading 畫面
-      this.isLoading = true; // 都要 loading 畫面
-      this.traceId = e.id;
-      await this.allMapDataStore.getTraceDetail();
-      this.$refs.tracesView.createCy();
-      this.isLoading = false;
-    },
-    /**
-     * 將 element nodes 資料彙整
-     * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
-     */
-    setNodesData(mapData) {
-      const mapType = this.mapType;
-      const logFreq = {
-        "total": "",
-        "rel_freq": "",
-        "average": "",
-        "median": "",
-        "max": "",
-        "min": "",
-        "cases": ""
-      };
-      const logDuration = {
-        "total": "",
-        "rel_duration": "",
-        "average": "",
-        "median": "",
-        "max": "",
-        "min": "",
-      };
-      // BPMN 才有 gateway 類別
-      const gateway = {
-        parallel: "+",
-        exclusive: "x",
-        inclusive: "o",
-      };
-
-      // 避免每次渲染都重複累加
-      mapData.nodes = [];
-      // 將 api call 回來的資料帶進 node
-      this[mapType].vertices.forEach(node => {
-        switch (node.type) {
-          // add type of 'bpmn gateway' node
-          case 'gateway':
-            mapData.nodes.push({
-              data: {
-                id: node.id,
-                type: node.type,
-                label: gateway[node.gateway_type],
-                height: 60,
-                width: 60,
-                backgroundColor: '#FFF',
-                bordercolor: '#003366',
-                shape: "diamond",
-                freq: logFreq,
-                duration: logDuration,
-              }
-            })
-            break;
-          // add type of 'event' node
-          case 'event':
-            if (node.event_type === 'start') {
-              mapData.startId = node.id;
-              this.startNodeId = node.id;
-            }
-            else if (node.event_type === 'end') {
-              mapData.endId = node.id;
-              this.endNodeId = node.id;
-            }
-
-            mapData.nodes.push({
-              data: {
-                id: node.id,
-                type: node.type,
-                label: node.event_type,
-                height: 48,
-                width: 48,
-                backgroundColor: '#FFFFFF',
-                bordercolor: '#0F172A',
-                textColor: '#FF3366',
-                shape: "ellipse",
-                freq: logFreq,
-                duration: logDuration,
-              }
-            });
-            break;
-          // add type of 'activity' node
-          default:
-            mapData.nodes.push({
-              data: {
-                id: node.id,
-                type: node.type,
-                label: node.label,
-                height: 48,
-                width: 216,
-                textColor: '#0F172A',
-                backgroundColor: 'rgba(0, 0, 0, 0)',
-                borderradius: 999,
-                shape: "round-rectangle",
-                freq: node.freq,
-                duration: node.duration,
-                backgroundOpacity: 0,
-                borderOpacity: 0,
-              }
-            })
-            break;
-        }
-      });
-    },
-    /**
-     * 將 element edges 資料彙整
-     * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
-     */
-    setEdgesData(mapData) {
-      const mapType = this.mapType;
-      //add event duration is empty
-      const logDuration = {
-        "total": "",
-        "rel_duration": "",
-        "average": "",
-        "median": "",
-        "max": "",
-        "min": "",
-        "cases": ""
-      };
-
-      mapData.edges = [];
-      this[mapType].edges.forEach(edge => {
-        mapData.edges.push({
-          data: {
-            source: edge.tail,
-            target: edge.head,
-            freq: edge.freq,
-            duration: edge.duration === null ? logDuration : edge.duration,
-            // Don't know why but tail is related to start and head is related to end
-            edgeStyle: edge.tail === this.startNodeId || edge.head === this.endNodeId ? 'dotted' : 'solid',
-            lineWidth: 1,
-          },
-        });
-      });
-    },
-    /**
-     * create cytoscape's map
-     * @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。
-     */
-    async createCy(type) {
-      const graphId = document.getElementById('cy');
-      const mapData = type === 'processMap' ? this.processMapData : this.bpmnData;
-
-      if (this[type].vertices.length !== 0) {
-        this.setNodesData(mapData);
-        this.setEdgesData(mapData);
-        this.setActivityBgImage(mapData);
-        this.cytoscapeGraph = await cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
-        const processOrBPMN = this.mapType === 'processMap' ? 'process' : 'bpmn';
-        const curveType = this.curveStyle === 'taxi' ? 'elbow' : 'curved';
-        const directionType = this.rank === 'LR' ? 'horizontal' : 'vertical';
-        await this.mapPathStore.setCytoscape(this.cytoscapeGraph, processOrBPMN, curveType, directionType);
-      };
-    },
-    setActivityBgImage(mapData) {
-      const nodes = mapData.nodes;
-      // 一組有多少個activities
-      const groupSize = Math.floor(nodes.length / ImgCapsules.length);
-      let nodeOptionArr = [];
-      const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
-      // 設定除了 start, end 的 node 顏色
-      // 找出 type activity's node
-      const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
-      // 找出除了 start, end 以外所有的 node 的 option value
-      activityNodeArray.forEach(node => nodeOptionArr.push(node.data[this.dataLayerType][this.dataLayerOption]));
-      // 將node的option值從小到大排序(映對色階淺到深)
-      nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
-      for (let i = 0; i < ImgCapsules.length; i++) {
-        const startIdx = i * groupSize;
-        const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
-        leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
-      }
-      for (let level = 0; level < leveledGroups.length; level++) {
-        leveledGroups[level].forEach(option => {
-          // 考慮可能有名次一樣的情形
-          const curNodes = activityNodeArray.filter(activityNode => activityNode.data[this.dataLayerType][this.dataLayerOption] === option);
-          curNodes.forEach(curNode => {
-            curNode.data = {
-              ...curNode.data,
-              nodeImageUrl: ImgCapsules[level],
-              level,
-            };
-          });
-        });
-      }
-    },
-  },
-  async created() {
-    const routeParams = this.$route.params;
-    const file = this.$route.meta.file;
-    const isCheckPage = this.$route.name.includes('Check');
-
-    // 先 loading 再執行以下程式
-    this.isLoading = true;
-    // Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
-    switch (routeParams.type) {
-      case 'log':
-        if (!isCheckPage) {
-          this.logId = await routeParams.fileId;
-          this.baseLogId = await routeParams.fileId;
-        } else {
-          this.logId = await file.parent.id;
-          this.baseLogId = await file.parent.id;
-        }
-        break;
-      case 'filter':
-        if (!isCheckPage) {
-          this.createFilterId = await routeParams.fileId;
-        } else {
-          this.createFilterId = await file.parent.id;
-        }
-        // 取得 logID 和上次儲存的 Funnel
-        await this.allMapDataStore.fetchFunnel(this.createFilterId);
-        this.isRuleData = await Array.from(this.temporaryData);
-        this.ruleData = await this.isRuleData.map(e => this.$refs.sidebarFilterRef.setRule(e));
-        break;
-    }
-    // 取得 logId 後才 call api
-    await this.allMapDataStore.getAllMapData();
-    await this.allMapDataStore.getAllTrace();
-
-    // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
-    this.traceId = await this.traces[0]?.id;
-    this.baseTraceId = await this.baseTraces[0]?.id;
-    await this.createCy(this.mapType);
-    await this.allMapDataStore.getFilterParams();
-    await this.allMapDataStore.getTraceDetail();
-
-    // 執行完後才取消 loading
-    this.isLoading = false;
-    // 存檔 Modal 打開時，側邊欄要關閉
-    this.$emitter.on('saveModal', boolean => {
-      this.sidebarView = boolean;
-      this.sidebarFilter = boolean;
-      this.sidebarTraces = boolean;
-      this.sidebarState = boolean;
-    });
-    this.$emitter.on('leaveFilter', boolean => {
-      this.sidebarView = boolean;
-      this.sidebarFilter = boolean;
-      this.sidebarTraces = boolean;
-      this.sidebarState = boolean;
-    });
-  },
-  beforeUnmount() {
-    this.logId = null;
-    this.createFilterId = null;
-    this.tempFilterId = null;
-    this.temporaryData = [];
-    this.postRuleData = [];
-    this.ruleData = [];
-  },
   async beforeRouteEnter(to, from, next) {
     const isCheckPage = to.name.includes('Check');
 
@@ -544,9 +70,413 @@ export default {
           break;
       }
       await conformanceStore.getConformanceReport(true);
-      to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
+      to.meta.file = conformanceStore.routeFile;
     }
     next();
   }
 }
 </script>
+
+<script setup>
+import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { useAllMapDataStore } from '@/stores/allMapData';
+import cytoscapeMap from '@/module/cytoscapeMap.js';
+import { useCytoscapeStore } from '@/stores/cytoscapeStore';
+import { useMapPathStore } from '@/stores/mapPathStore';
+import emitter from '@/utils/emitter';
+import SidebarView from '@/components/Discover/Map/SidebarView.vue';
+import SidebarState from '@/components/Discover/Map/SidebarState.vue';
+import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
+import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
+import ImgCapsule1 from '@/assets/capsule1.svg';
+import ImgCapsule2 from '@/assets/capsule2.svg';
+import ImgCapsule3 from '@/assets/capsule3.svg';
+import ImgCapsule4 from '@/assets/capsule4.svg';
+
+const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
+
+const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
+
+const route = useRoute();
+
+// Stores
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
+  filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
+  temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
+  postRuleData
+} = storeToRefs(allMapDataStore);
+
+const cytoscapeStore = useCytoscapeStore();
+const { setCurrentGraphId } = cytoscapeStore;
+const mapPathStore = useMapPathStore();
+
+const numberBeforeMapInRoute = computed(() => {
+  const path = route.path;
+  const segments = path.split('/');
+  const mapIndex = segments.findIndex(segment => segment.includes('map'));
+  if (mapIndex > 0) {
+    const previousSegment = segments[mapIndex - 1];
+    const match = previousSegment.match(/\d+/);
+    return match ? match[0] : 'No number found';
+  }
+  return 'No map segment found';
+});
+
+onBeforeMount(() => {
+  setCurrentGraphId(numberBeforeMapInRoute);
+});
+
+// Data
+const processMapData = ref({
+  startId: 0,
+  endId: 1,
+  nodes: [],
+  edges: [],
+});
+const bpmnData = ref({
+  startId: 0,
+  endId: 1,
+  nodes: [],
+  edges: [],
+});
+const cytoscapeGraph = ref(null);
+const curveStyle = ref('unbundled-bezier');
+const mapType = ref('processMap');
+const dataLayerType = ref('freq');
+const dataLayerOption = ref('total');
+const rank = ref('LR');
+const localTraceId = ref(1);
+const sidebarView = ref(false);
+const sidebarState = ref(false);
+const sidebarTraces = ref(false);
+const sidebarFilter = ref(false);
+const infiniteFirstCases = ref(null);
+const tracesViewRef = ref(null);
+const sidebarFilterRefComp = ref(null);
+
+const tooltip = {
+  sidebarView: {
+    value: 'Visualization Setting',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarTraces: {
+    value: 'Trace',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarFilter: {
+    value: 'Filter',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+  sidebarState: {
+    value: 'Summary',
+    class: 'ml-1',
+    pt: {
+      text: 'text-[10px] p-1'
+    }
+  },
+};
+
+// Computed
+const sidebarLeftValue = computed(() => {
+  return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
+});
+
+// Watch
+watch(sidebarView, (newValue) => {
+  if(newValue) {
+    sidebarFilter.value = false;
+    sidebarTraces.value = false;
+  }
+});
+
+watch(sidebarFilter, (newValue) => {
+  if(newValue) {
+    sidebarView.value = false;
+    sidebarState.value = false;
+    sidebarTraces.value = false;
+    sidebarState.value = false;
+  }
+});
+
+watch(sidebarTraces, (newValue) => {
+  if(newValue) {
+    sidebarView.value = false;
+    sidebarState.value = false;
+    sidebarFilter.value = false;
+    sidebarState.value = false;
+  }
+});
+
+watch(sidebarState, (newValue) => {
+  if(newValue) {
+    sidebarFilter.value = false;
+    sidebarTraces.value = false;
+  }
+});
+
+// Methods
+async function switchMapType(type) {
+  mapType.value = type;
+  createCy(type);
+}
+
+async function switchCurveStyles(style) {
+  curveStyle.value = style;
+  createCy(mapType.value);
+}
+
+async function switchRank(rankValue) {
+  rank.value = rankValue;
+  createCy(mapType.value);
+}
+
+async function switchDataLayerType(type, option){
+  dataLayerType.value = type;
+  dataLayerOption.value = option;
+  createCy(mapType.value);
+}
+
+async function switchTraceId(e) {
+  if(e.id == traceId.value) return;
+  isLoading.value = true;
+  traceId.value = e.id;
+  await allMapDataStore.getTraceDetail();
+  tracesViewRef.value.createCy();
+  isLoading.value = false;
+}
+
+function setNodesData(mapData) {
+  const mapTypeVal = mapType.value;
+  const logFreq = {
+    "total": "",
+    "rel_freq": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+    "cases": ""
+  };
+  const logDuration = {
+    "total": "",
+    "rel_duration": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+  };
+  const gateway = {
+    parallel: "+",
+    exclusive: "x",
+    inclusive: "o",
+  };
+
+  mapData.nodes = [];
+  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  mapSource.vertices.forEach(node => {
+    switch (node.type) {
+      case 'gateway':
+        mapData.nodes.push({
+          data:{
+            id:node.id,
+            type:node.type,
+            label:gateway[node.gateway_type],
+            height:60,
+            width:60,
+            backgroundColor:'#FFF',
+            bordercolor:'#003366',
+            shape:"diamond",
+            freq:logFreq,
+            duration:logDuration,
+          }
+        })
+        break;
+      case 'event':
+        if(node.event_type === 'start') mapData.startId = node.id;
+        else if(node.event_type === 'end') mapData.endId = node.id;
+
+        mapData.nodes.push({
+          data:{
+            id:node.id,
+            type:node.type,
+            label:node.event_type,
+            height: 48,
+            width: 48,
+            backgroundColor:'#FFFFFF',
+            bordercolor:'#0F172A',
+            textColor: '#FF3366',
+            shape:"ellipse",
+            freq:logFreq,
+            duration:logDuration,
+          }
+        });
+        break;
+      default:
+        mapData.nodes.push({
+            data:{
+              id:node.id,
+              type:node.type,
+              label:node.label,
+              height: 48,
+              width: 216,
+              textColor: '#0F172A',
+              backgroundColor:'rgba(0, 0, 0, 0)',
+              borderradius: 999,
+              shape:"round-rectangle",
+              freq:node.freq,
+              duration:node.duration,
+              backgroundOpacity: 0,
+              borderOpacity: 0,
+            }
+          })
+        break;
+    }
+  });
+}
+
+function setEdgesData(mapData) {
+  const mapTypeVal = mapType.value;
+  const logDuration = {
+    "total": "",
+    "rel_duration": "",
+    "average": "",
+    "median": "",
+    "max": "",
+    "min": "",
+    "cases": ""
+  };
+
+  mapData.edges = [];
+  const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
+  mapSource.edges.forEach(edge => {
+    mapData.edges.push({
+      data: {
+        source:edge.tail,
+        target:edge.head,
+        freq:edge.freq,
+        duration:edge.duration === null ? logDuration : edge.duration,
+        style:'dotted',
+        lineWidth:1,
+      },
+    });
+  });
+}
+
+async function createCy(type) {
+  const graphId = document.getElementById('cy');
+  const mapData = type === 'processMap'? processMapData.value: bpmnData.value;
+  const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
+
+  if(mapSource.vertices.length !== 0){
+    setNodesData(mapData);
+    setEdgesData(mapData);
+    setActivityBgImage(mapData);
+    cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
+    const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
+    const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
+    const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
+    await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
+  };
+}
+
+function setActivityBgImage(mapData) {
+  const nodes = mapData.nodes;
+  const groupSize = Math.floor(nodes.length / ImgCapsules.length);
+  let nodeOptionArr = [];
+  const leveledGroups = [];
+  const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
+  activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
+  nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
+  for(let i = 0; i < ImgCapsules.length; i++) {
+    const startIdx = i * groupSize;
+    const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
+    leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
+  }
+  for(let level = 0; level < leveledGroups.length; level++) {
+    leveledGroups[level].forEach(option => {
+      const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
+      curNodes.forEach(curNode => {
+          curNode.data = {
+          ...curNode.data,
+          nodeImageUrl: ImgCapsules[level],
+          level,
+        };
+      });
+    });
+  }
+}
+
+// Created logic
+(async () => {
+  const routeParams = route.params;
+  const file = route.meta.file;
+  const isCheckPage = route.name.includes('Check');
+
+  isLoading.value = true;
+  switch (routeParams.type) {
+    case 'log':
+      if(!isCheckPage) {
+        logId.value = await routeParams.fileId;
+        baseLogId.value = await routeParams.fileId;
+      } else {
+        logId.value = await file.parent.id;
+        baseLogId.value = await file.parent.id;
+      }
+      break;
+    case 'filter':
+      if(!isCheckPage) {
+        createFilterId.value = await routeParams.fileId;
+      } else {
+        createFilterId.value = await file.parent.id;
+      }
+      await allMapDataStore.fetchFunnel(createFilterId.value);
+      isRuleData.value = await Array.from(temporaryData.value);
+      ruleData.value = await isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
+      break;
+  }
+  await allMapDataStore.getAllMapData();
+  await allMapDataStore.getAllTrace();
+
+  traceId.value = await traces.value[0]?.id;
+  baseTraceId.value = await baseTraces.value[0]?.id;
+  await createCy(mapType.value);
+  await allMapDataStore.getFilterParams();
+  await allMapDataStore.getTraceDetail();
+
+  isLoading.value = false;
+  emitter.on('saveModal', boolean => {
+    sidebarView.value = boolean;
+    sidebarFilter.value = boolean;
+    sidebarTraces.value = boolean;
+    sidebarState.value = boolean;
+  });
+  emitter.on('leaveFilter', boolean => {
+    sidebarView.value = boolean;
+    sidebarFilter.value = boolean;
+    sidebarTraces.value = boolean;
+    sidebarState.value = boolean;
+  });
+})();
+
+onBeforeUnmount(() => {
+  logId.value = null;
+  createFilterId.value = null;
+  temporaryData.value = [];
+  postRuleData.value = [];
+  ruleData.value = [];
+});
+</script>
diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue
index c7d063a..c0dbcd3 100644
--- a/src/views/Discover/Performance/FreqChart.vue
+++ b/src/views/Discover/Performance/FreqChart.vue
@@ -2,7 +2,7 @@
     <Chart type="line" :data="primeVueSetDataState" :options="primeVueSetOptionsState" class="h-96" />
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted } from 'vue';
 import {
   setTimeStringFormatBaseOnTimeDifference,
@@ -65,220 +65,208 @@ y: {
 },
 };
 
-// 試著把 chart 獨立成一個 vue component
-// 企圖防止 PrimeVue 誤用其他圖表 option 值的 bug
-export default {
-  props: {
-    chartData: {
-      type: Object,
+const props = defineProps({
+  chartData: {
+    type: Object,
+  },
+  content: {
+    type: Object,
+  },
+  yUnit: {
+    type: String,
+  },
+  pageName: {
+    type: String,
+  },
+});
+
+const primeVueSetDataState = ref(null);
+const primeVueSetOptionsState = ref(null);
+const colorPrimary = ref('#0099FF');
+const colorSecondary = ref('#FFAA44');
+
+/**
+ * Compare page and Performance have this same function.
+ * @param whichScaleObj PrimeVue scale option object to reference to
+ * @param customizeOptions
+ * @param customizeOptions.content
+ * @param customizeOptions.ticksOfXAxis
+ */
+const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
+      content,
+      ticksOfXAxis,
     },
-    content: {
-      type: Object,
-    },
-    yUnit: {
-      type: String,
-    },
-    pageName: {
-      type: String,
-    },
-  }, 
-  setup(props) {
-
-    const primeVueSetDataState = ref(null);
-    const primeVueSetOptionsState = ref(null);
-    const colorPrimary = ref('#0099FF');
-    const colorSecondary = ref('#FFAA44');
-    
-    /**
-     * Compare page and Performance have this same function.
-     * @param whichScaleObj PrimeVue scale option object to reference to
-     * @param customizeOptions 
-     * @param customizeOptions.content
-     * @param customizeOptions.ticksOfXAxis
-     */
-     const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
-          content,
-          ticksOfXAxis,
-        },
-      }) => {
-      let resultScaleObj;
-      resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
-      resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
-      return resultScaleObj;
-    };
-
-    /**
-     * Compare page and Performance have this same function.
-     * @param {object} scaleObjectToAlter this object follows the format of prive vue chart
-     * @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
-     * or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
-     */
-     const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
-      return {
-        ...scaleObjectToAlter,
-        x: {
-          ...scaleObjectToAlter.x,
-            ticks: {
-              ...scaleObjectToAlter.x.ticks,
-                callback: function(value, index) {
-                  // 根據不同的級距客製化 x 軸的時間刻度
-                  return ticksOfXAxis[index];
-                },
-            },
-          },
-      };
-    };
-
-    /** Compare page and Performance have this same function.
-     * 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
-     * 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
-     * This function alters the title property of known scales object of Chart option
-     * This is based on the fact that we know the order must be x -> title -> text.
-     * @param {object} whichScaleObj PrimeVue scale option object to reference to
-     * @param content whose property includes x and y and stand for titles
-     * 
-     * @returns { object } an object modified with two titles
-     */
-     const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
-      if (!content) {
-        // Early return
-        return whichScaleObj;
-      }
-
-      return {
-        ...whichScaleObj,
-          x: {
-            ...whichScaleObj.x,
-            title: {
-              ...whichScaleObj.x.title,
-              text: content.x
-            }
-          },
-          y: {
-            ...whichScaleObj.y,
-            title: {
-              ...whichScaleObj.y.title,
-              text: content.y
-            }
-          }
-        };
-    };
-
-    const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
-      let datasetsArr;
-      let datasets;
-      let datasetsPrimary; // For Compare page case
-      let datasetsSecondary; // For Compare page case
-      const minX = chartData?.x_axis?.min;
-      const maxX = chartData?.x_axis?.max;
-      let xData;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 考慮 chartData.data 的dimension
-      // 當我們遇到了 Compare 頁面的案例
-      if(pageName === "Compare"){
-        datasetsPrimary = chartData.data[0].data;
-        datasetsSecondary = chartData.data[1].data;
-
-        datasetsArr = [
-          {
-            label: chartData.data[0].label,
-            data: datasetsPrimary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: colorPrimary,
-            pointBackgroundColor: colorPrimary,
-          },
-          {
-            label: chartData.data[1].label,
-            data: datasetsSecondary,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: colorSecondary,
-            pointBackgroundColor: colorSecondary,
-          }
-        ];
-        xData = chartData.data[0].data.map(item => new Date(item.x).getTime());        
-      } else {
-        datasets = chartData.data;
-        datasetsArr = [
-          {
-            label: content.title,
-            data: datasets,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: '#0099FF',
-          }
-        ];
-        xData = chartData.data.map(item => new Date(item.x).getTime());
-      }   
-      
-      
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
-      const customizedScaleOption = getCustomizedScaleOption(
-        knownScaleLineChartOptions, {
-          customizeOptions: {
-            content, ticksOfXAxis,
-          }        
-      });
-  
-      primeVueSetData = {
-        labels: xData,
-        datasets: datasetsArr,
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: true,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              label: function(tooltipItem) {
-                  // 取得數據
-                  const label = tooltipItem.dataset.label || '';
-
-                  // 建立一個小方塊顯示顏色
-                  return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
-              },
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: customizedScaleOption,
-      };
-
-      primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
-      primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-        return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
-      };
-      primeVueSetDataState.value = primeVueSetData;
-      primeVueSetOptionsState.value = primeVueSetOption;
-    };
-
-    onMounted(() => {
-      getLineChartPrimeVueSetting(props.chartData, props.content, props.pageName);
-    });
-
-    return {
-      ...props,
-      primeVueSetDataState,
-      primeVueSetOptionsState,
-    };
-  }
+  }) => {
+  let resultScaleObj;
+  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
+  return resultScaleObj;
 };
-</script>
\ No newline at end of file
+
+/**
+ * Compare page and Performance have this same function.
+ * @param {object} scaleObjectToAlter this object follows the format of prive vue chart
+ * @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
+ * or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
+ */
+const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
+  return {
+    ...scaleObjectToAlter,
+    x: {
+      ...scaleObjectToAlter.x,
+        ticks: {
+          ...scaleObjectToAlter.x.ticks,
+            callback: function(value, index) {
+              // 根據不同的級距客製化 x 軸的時間刻度
+              return ticksOfXAxis[index];
+            },
+        },
+      },
+  };
+};
+
+/** Compare page and Performance have this same function.
+ * 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
+ * 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
+ * This function alters the title property of known scales object of Chart option
+ * This is based on the fact that we know the order must be x -> title -> text.
+ * @param {object} whichScaleObj PrimeVue scale option object to reference to
+ * @param content whose property includes x and y and stand for titles
+ *
+ * @returns { object } an object modified with two titles
+ */
+const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
+  if (!content) {
+    // Early return
+    return whichScaleObj;
+  }
+
+  return {
+    ...whichScaleObj,
+      x: {
+        ...whichScaleObj.x,
+        title: {
+          ...whichScaleObj.x.title,
+          text: content.x
+        }
+      },
+      y: {
+        ...whichScaleObj.y,
+        title: {
+          ...whichScaleObj.y.title,
+          text: content.y
+        }
+      }
+    };
+};
+
+const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
+  let datasetsArr;
+  let datasets;
+  let datasetsPrimary; // For Compare page case
+  let datasetsSecondary; // For Compare page case
+  const minX = chartData?.x_axis?.min;
+  const maxX = chartData?.x_axis?.max;
+  let xData;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  // 考慮 chartData.data 的dimension
+  // 當我們遇到了 Compare 頁面的案例
+  if(pageName === "Compare"){
+    datasetsPrimary = chartData.data[0].data;
+    datasetsSecondary = chartData.data[1].data;
+
+    datasetsArr = [
+      {
+        label: chartData.data[0].label,
+        data: datasetsPrimary,
+        fill: false,
+        tension: 0, // 貝茲曲線張力
+        borderColor: colorPrimary,
+        pointBackgroundColor: colorPrimary,
+      },
+      {
+        label: chartData.data[1].label,
+        data: datasetsSecondary,
+        fill: false,
+        tension: 0, // 貝茲曲線張力
+        borderColor: colorSecondary,
+        pointBackgroundColor: colorSecondary,
+      }
+    ];
+    xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+  } else {
+    datasets = chartData.data;
+    datasetsArr = [
+      {
+        label: content.title,
+        data: datasets,
+        fill: false,
+        tension: 0, // 貝茲曲線張力
+        borderColor: '#0099FF',
+      }
+    ];
+    xData = chartData.data.map(item => new Date(item.x).getTime());
+  }
+
+
+  // Customize X axis ticks due to different differences between min and max of data group
+  // Compare page and Performance page share the same logic
+  const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
+  const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
+  const customizedScaleOption = getCustomizedScaleOption(
+    knownScaleLineChartOptions, {
+      customizeOptions: {
+        content, ticksOfXAxis,
+      }
+  });
+
+  primeVueSetData = {
+    labels: xData,
+    datasets: datasetsArr,
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false, // 圖例
+      tooltip: {
+        displayColors: true,
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          label: function(tooltipItem) {
+              // 取得數據
+              const label = tooltipItem.dataset.label || '';
+
+              // 建立一個小方塊顯示顏色
+              return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
+          },
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: customizedScaleOption,
+  };
+
+  primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
+  primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+    return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
+  };
+  primeVueSetDataState.value = primeVueSetData;
+  primeVueSetOptionsState.value = primeVueSetOption;
+};
+
+onMounted(() => {
+  getLineChartPrimeVueSetting(props.chartData, props.content, props.pageName);
+});
+</script>
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 6083113..54a9e29 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -48,7 +48,7 @@
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">
                       {{ contentData.avgCycleEfficiency.title }}
-                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" 
+                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
                       v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
                     <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
                   </li>
@@ -136,784 +136,9 @@
   </main>
 </template>
 <script>
-import { storeToRefs, mapActions, } from 'pinia';
-import moment from 'moment';
-import { useLoadingStore } from '@/stores/loading';
-import { usePerformanceStore } from '@/stores/performance';
 import { useConformanceStore } from '@/stores/conformance';
-import StatusBar from '@/components/Discover/StatusBar.vue';
-import { setLineChartData } from '@/module/setChartData.js';
-import { simpleTimeLabel, followTimeLabel,
-  setTimeStringFormatBaseOnTimeDifference,
-  mapTimestampToAxisTicksByFormat,
-  getStepSizeOfYTicks,
-  getYTicksByIndex,
- } from '@/module/timeLabel.js';
-import FreqChart from './FreqChart.vue';
-import { PRIME_VUE_TICKS_LIMIT } from '../../../constants/constants.js';
-
-const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
 
 export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const performanceStore = usePerformanceStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { performanceData } = storeToRefs(performanceStore);
-
-    return { isLoading, performanceStore, performanceData }
-  },
-  components: {
-    StatusBar,
-    FreqChart,
-  },
-  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'},
-      ],
-      contentData: {
-        avgCycleTime: {title: 'Average Cycle Time', x: 'Date', y: 'Cycle time'},
-        avgCycleEfficiency: {title: 'Cycle Efficiency', x: 'Date', y: 'Cycle efficiency (%)'},
-        avgProcessTime: {title: 'Average Processing Time', x: 'Date', y: 'Processing time'},
-        avgProcessTimeByTask: {title: 'Average Processing Time by Activity', x: 'Processing time', y: 'Activity'},
-        avgWaitingTime: {title: 'Average Waiting Time', x: 'Date', y: 'Waiting time'},
-        avgWaitingTimeByEdge: {title: 'Average Waiting Time between Activity', x: 'Waiting time', y: 'Activities'},
-        freq: {title: 'New Cases', x: 'Date', y: 'Count'},
-        casesByTask: {title: 'Number of Cases by Activity', x: 'Count', y: 'Activity'},
-      },
-      tooltip: {
-        avgCycleEfficiency: {
-          value: 'Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.',
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-        avgWaitingTime: {
-          value: 'Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-        avgWaitingTimeByEdge: {
-          value: 'Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
-          class: '!max-w-[212px] !text-[10px] !opacity-80',
-          autoHide: false,
-        },
-      },
-      isActive: null,
-      avgCycleTimeData: null,
-      avgCycleTimeOptions: null,
-      avgCycleEfficiencyData: null,
-      avgCycleEfficiencyOptions: null,
-      avgProcessTimeData: null,
-      avgProcessTimeOptions: null,
-      avgProcessTimeByTaskData: null,
-      avgProcessTimeByTaskOptions: null,
-      avgWaitingTimeData: null,
-      avgWaitingTimeOptions: null,
-      avgWaitingTimeByEdgeData: null,
-      avgWaitingTimeByEdgeOptions: null,
-      freqData: null,
-      freqOptions: null,
-      casesByTaskData: null,
-      casesByTaskOptions: null,
-      horizontalBarHeight: 500, // horizontal Bar default height
-      avgProcessTimeByTaskHeight: 500,
-      avgWaitingTimeByEdgeHeight: 500,
-      casesByTaskHeight: 500
-    }
-  },
-  methods: {
-    handleClick(tagId) {
-      this.isActive = tagId;
-
-      // 在進行導航前，檢查或處理 tagId 的值
-      if (this.isSafeTagId(tagId)) {
-        window.location.href = tagId; // 確保這個路徑是安全的
-        // 或者使用 Vue Router 進行導航
-        // this.$router.push({ path: tagId });
-      } else {
-        console.warn("不安全的 tagId: ", tagId);
-      }
-    },
-    // 避免直接使用動態 href：改用安全的方法來處理動態導航，避免直接將未經驗證的數據綁定到 href 屬性。
-    isSafeTagId(tagId) {
-      // 檢查 tagId 是否符合安全的格式（例如只允許特定的模式或路徑）
-      const pattern = /^#?[a-zA-Z0-9-]*$/; // 例如： #waitingTime
-      return pattern.test(tagId);
-    },
-    /**
-     * 手刻折線圖 x label 時間刻度
-     * @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'}
-     */
-     setXLabelsData(valueData) {
-      const min = new Date(valueData.min).getTime();
-      const max = new Date(valueData.max).getTime();
-      const numPoints = 12;
-      const step = (max - min) / (numPoints - 1);
-      const data = [];
-      for(let i = 0; i< numPoints; i++) {
-        const x = min + i * step;
-        data.push(x);
-      }
-      return data;
-    },
-    /**
-     * 讓長條圖依 data 數量增加高度
-     * @param { object } chartData chart data
-     */
-    getHorizontalBarHeight(chartData) {
-      const totalBars = chartData.data.length;
-      let horizontalBar = this.horizontalBarHeight;
-
-      if(totalBars > 10) horizontalBar = (totalBars - 10) * 16 + this.horizontalBarHeight;
-
-      return horizontalBar + 'px'
-    },     
-    /**
-     * 建立長條圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     */
-    getBarChart(chartData, content) {
-      const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      const datasets = chartData.data.map(value => {
-        return {
-          x: getMoment(value.x),
-          y: value.y * 100
-        }
-      }); // 轉為百分比
-      const xData = datasets.map(i => i.x);
-      const yData = datasets.map(i => i.y)
-
-      primeVueSetData = {
-        labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: yData,
-            backgroundColor: '#0099FF'
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${context[0].label}`;
-              },
-              label: function(context) {
-                return `${content.y}: ${context.parsed.y.toFixed(2)}`;
-              }
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            title: {
-              display: true,
-              text: content.x,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              }
-            },
-            ticks: {
-              display: true,
-              color: '#64748b',
-              callback: function(value, index, ticks) {
-                return moment(xData[index]).format('YYYY/MM/DD');
-              },
-            },
-            border: {
-              color: '#64748b',
-            },
-            grid: {
-              display: false,
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            title: {
-              display: true,
-              text: content.y,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-            },
-            ticks:{
-              color: '#64748b',
-              padding: 8,
-              
-            },
-            grid: {
-              color: '#64748b',
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-          },
-        },
-      };
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    /**
-     * 建立水平長條圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { boolean } isSingle 單個或雙數 activity
-     * @param { string } xUnit x 軸單位 'date' | 'count'，可傳入以上任一。
-     */
-    getHorizontalBarChart(chartData, content, isSingle, xUnit) {
-      const maxY = chartData.y_axis.max;
-      const getSimpleTimeLabel = simpleTimeLabel;
-      const getFollowTimeLabel = followTimeLabel;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-
-      // 大到小排序
-      chartData.data.sort((a, b) => b.y - a.y);
-      const xData = chartData.data.map(item => item.x);
-      const yData = chartData.data.map(item => item.y);
-
-      primeVueSetData = {
-        labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: yData,
-            backgroundColor: '#0099FF',
-          }
-        ]
-      };
-      primeVueSetOption = {
-        indexAxis: 'y',
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {}
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            title: {
-              display: true,
-              text: content.x,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              }
-            },
-            ticks: {
-              display: true,
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#64748b',
-            },
-            grid: {
-              color: '#64748b',
-            },
-            border: {
-              display:false,
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            type: 'category',
-            title: {
-              display: true,
-              text: content.y,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-            },
-            ticks:{
-              color: '#64748b',
-              padding: 8,
-              
-            },
-            grid: {
-              display:false,
-              color: '#64748b',
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-          },
-        },
-      };
-      switch (xUnit) {
-        case 'date':
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
-          };
-          primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
-            return getFollowTimeLabel(value, maxY, 1)
-          };
-          break;
-        case 'count':
-        default:
-          primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            return `${content.x}: ${context.parsed.x}`;
-          }
-          break;
-      }
-      if(isSingle) { // 設定一個活動的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label}`;
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xData[index];
-          return label.length > 21 ? `${label.substring(0, 18)}...` : label
-        };
-      }else { // 設定「活動」到「活動」的 y label、提示框文字
-        primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
-          return `${content.y}: ${context[0].label.replace(',', ' - ')}`
-        };
-        primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-          const label = xData[index];
-          let labelStart = label[0];
-          let labelEnd = label[1];
-
-          labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
-          labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
-          return labelStart + " - " + labelEnd
-        };
-      }
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    /**
-     * Compare page and Performance have this same function.
-     * @param whichScaleObj PrimeVue scale option object to reference to
-     * @param customizeOptions 
-     * @param customizeOptions.content
-     * @param customizeOptions.ticksOfXAxis
-     */
-     getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
-          content,
-          ticksOfXAxis,
-        },
-      }) {
-      let resultScaleObj;
-      resultScaleObj = this.customizeScaleChartOptionTitleByContent(whichScaleObj, content);
-      resultScaleObj = this.customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
-      return resultScaleObj;
-    },
-    /** Compare page and Performance have this same function.
-     * 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
-     * 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
-     * This function alters the title property of known scales object of Chart option
-     * This is based on the fact that we know the order must be x -> title -> text.
-     * @param {object} whichScaleObj PrimeVue scale option object to reference to
-     * @param content whose property includes x and y and stand for titles
-     * 
-     * @returns { object } an object modified with two titles
-     */
-     customizeScaleChartOptionTitleByContent(whichScaleObj, content){
-      if (!content) {
-        // Early return
-        return whichScaleObj;
-      }
-
-      return {
-        ...whichScaleObj,
-          x: {
-            ...whichScaleObj.x,
-            title: {
-              ...whichScaleObj.x.title,
-              text: content.x
-            }
-          },
-          y: {
-            ...whichScaleObj.y,
-            title: {
-              ...whichScaleObj.y.title,
-              text: content.y
-            }
-          }
-        };
-    },
-    /**
-     * Compare page and Performance have this same function.
-     * @param {object} scaleObjectToAlter this object follows the format of prive vue chart
-     * @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
-     * or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
-     */
-     customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
-      return {
-        ...scaleObjectToAlter,
-        x: {
-          ...scaleObjectToAlter.x,
-            ticks: {
-              ...scaleObjectToAlter.x.ticks,
-                callback: function(value, index) {
-                  return ticksOfXAxis[index];
-                },
-            },
-          },
-      };       
-    },   
-    /**
-     * 建立Performance頁面的折線圖，並且避免同一個畫面中的設定值彼此覆蓋
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { string } yUnit y 軸單位 'date'
-     */
-     getExplicitDeclaredLineChart(chartData, content, yUnit) {
-      const minX = chartData.x_axis.min;
-      const maxX = chartData.x_axis.max;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-      const getSimpleTimeLabel = simpleTimeLabel;
-
-      const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
-      chartData.y_axis.min);
-      const xData = this.setXLabelsData(chartData.x_axis);
-
-      
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
-      primeVueSetData = {
-        labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: datasets,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: '#0099FF',
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              label: function(context) {
-                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-              }
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            min: minX,
-            max: maxX,
-            type: 'time',
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.x,              
-            },
-            time: {
-              displayFormats: {
-                second: 'h:mm:ss', // ex: 1:11:11
-                minute: 'M/d h:mm', // ex: 1/1 1:11
-                hour: 'M/d h:mm', // ex: 1/1 1:11
-                day: 'M/d h', // ex: 1/1 1
-                month: 'y/M/d', // ex: 1911/1/1
-              },
-              round: true
-            },
-            ticks: {
-              maxTicksLimit: primeVueTicksLimit,
-              padding: 8,
-              display: true,
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#64748b',
-              source: 'labels', // 依比例彈性顯示 label 數量
-              callback: function(value, index) {
-                return ticksOfXAxis[index];
-              },
-            },
-            border: {
-              color: '#64748b',
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.y
-            },
-            grid: {
-              color: '#64748b',
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-            ticks: {
-              
-              color: '#64748b',
-              padding: 8,
-              callback: function (value, index, ticks) {
-                // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
-                const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
-                return getYTicksByIndex(resultStepSize, index, unitToUse);
-              },
-            }
-          },
-        },
-      };
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    /**
-     * 建立Average Waiting Time折線圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { string } yUnit y 軸單位 'date'
-     */
-     getAvgWaitingTimeLineChart(chartData, content, yUnit) {
-      const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
-      const minX = chartData.x_axis.min;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-      const getSimpleTimeLabel = simpleTimeLabel;
-
-      const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
-      chartData.y_axis.min);
-      const xData = this.setXLabelsData(chartData.x_axis);
-
-      
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
-  
-      primeVueSetData = {
-        labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: datasets,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: '#0099FF',
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              },
-              label:function(context) {
-                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-              },
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            min: minX,
-            max: maxX,
-            type: 'time',
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.x,              
-            },
-            time: {
-              displayFormats: {
-                second: 'h:mm:ss', // ex: 1:11:11
-                minute: 'M/d h:mm', // ex: 1/1 1:11
-                hour: 'M/d h:mm', // ex: 1/1 1:11
-                day: 'M/d h', // ex: 1/1 1
-                month: 'y/M/d', // ex: 1911/1/1
-              },
-              round: true
-            },
-            ticks: {
-              display: true,
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#64748b',
-              source: 'labels', // 依比例彈性顯示 label 數量
-              callback: function(value, index) {
-                return ticksOfXAxis[index];
-              },
-            },
-            border: {
-              color: '#64748b',
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            title: {
-              display: true,
-              color: '#334155',
-              font: {
-                size: 12,
-                lineHeight: 2
-              },
-              text: content.y
-            },
-            grid: {
-              color: '#64748b',
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            },
-            ticks: {
-              
-              color: '#64748b',
-              padding: 8,
-              callback: function (value, index, ticks) {
-                // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
-                const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
-                return getYTicksByIndex(resultStepSize, index, unitToUse);
-              },
-            }
-          },
-        },
-      };
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    ...mapActions(usePerformanceStore, [
-      'setFreqChartData',
-      'setFreqChartOptions',
-      'setFreqChartXData'
-    ]),
-  },
-  async created() {
-    this.isLoading = true; // moubeted 才停止 loading
-    const routeParams = this.$route.params;
-    const isCheckPage = this.$route.name.includes('Check');
-    const type = routeParams.type;
-    const file = this.$route.meta.file;
-    let id;
-
-    if(!isCheckPage) {
-      id = await routeParams.fileId;
-    } else {
-      id = await file.parent.id;
-    }
-
-    // 取得 Performance Data
-    await this.performanceStore.getPerformance(type, id);
-    this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_process_time_by_task);
-    if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
-      this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
-    }
-    this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
-    // create chart
-    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getExplicitDeclaredLineChart(this.performanceData.time.avg_cycle_time,
-      this.contentData.avgCycleTime, 'date');
-    [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(
-      this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
-    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getExplicitDeclaredLineChart(this.performanceData.time.avg_process_time,
-      this.contentData.avgProcessTime, 'date');
-    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(
-      this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getExplicitDeclaredLineChart(
-      this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
-    if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
-        this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
-    } else {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
-    }
-
-    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task,
-      this.contentData.casesByTask, true, 'count');
-    // 停止 loading
-    this.isLoading = false;
-  },
   async beforeRouteEnter(to, from, next) {
     const isCheckPage = to.name.includes('Check');
 
@@ -928,12 +153,724 @@ export default {
           break;
       }
       await conformanceStore.getConformanceReport(true);
-      to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
+      to.meta.file = conformanceStore.routeFile;
     }
     next();
   }
 }
 </script>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import moment from 'moment';
+import { useLoadingStore } from '@/stores/loading';
+import { usePerformanceStore } from '@/stores/performance';
+import StatusBar from '@/components/Discover/StatusBar.vue';
+import { setLineChartData } from '@/module/setChartData.js';
+import { simpleTimeLabel, followTimeLabel,
+  setTimeStringFormatBaseOnTimeDifference,
+  mapTimestampToAxisTicksByFormat,
+  getStepSizeOfYTicks,
+  getYTicksByIndex,
+ } from '@/module/timeLabel.js';
+import FreqChart from './FreqChart.vue';
+import { PRIME_VUE_TICKS_LIMIT } from '../../../constants/constants.js';
+
+const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
+
+const route = useRoute();
+
+// Stores
+const loadingStore = useLoadingStore();
+const performanceStore = usePerformanceStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { performanceData } = storeToRefs(performanceStore);
+
+// Data
+const timeUsageData = [
+  {tagId: '#cycleTime', label: 'Cycle Time & Efficiency'},
+  {tagId: '#processingTime', label: 'Processing Time'},
+  {tagId: '#waitingTime', label: 'Waiting Time'},
+];
+const frequencyData = [
+  {tagId: '#cases', label: 'Number of Cases'},
+];
+const contentData = {
+  avgCycleTime: {title: 'Average Cycle Time', x: 'Date', y: 'Cycle time'},
+  avgCycleEfficiency: {title: 'Cycle Efficiency', x: 'Date', y: 'Cycle efficiency (%)'},
+  avgProcessTime: {title: 'Average Processing Time', x: 'Date', y: 'Processing time'},
+  avgProcessTimeByTask: {title: 'Average Processing Time by Activity', x: 'Processing time', y: 'Activity'},
+  avgWaitingTime: {title: 'Average Waiting Time', x: 'Date', y: 'Waiting time'},
+  avgWaitingTimeByEdge: {title: 'Average Waiting Time between Activity', x: 'Waiting time', y: 'Activities'},
+  freq: {title: 'New Cases', x: 'Date', y: 'Count'},
+  casesByTask: {title: 'Number of Cases by Activity', x: 'Count', y: 'Activity'},
+};
+const tooltip = {
+  avgCycleEfficiency: {
+    value: 'Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.',
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
+  },
+  avgWaitingTime: {
+    value: 'Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
+  },
+  avgWaitingTimeByEdge: {
+    value: 'Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
+    class: '!max-w-[212px] !text-[10px] !opacity-80',
+    autoHide: false,
+  },
+};
+
+const isActive = ref(null);
+const avgCycleTimeData = ref(null);
+const avgCycleTimeOptions = ref(null);
+const avgCycleEfficiencyData = ref(null);
+const avgCycleEfficiencyOptions = ref(null);
+const avgProcessTimeData = ref(null);
+const avgProcessTimeOptions = ref(null);
+const avgProcessTimeByTaskData = ref(null);
+const avgProcessTimeByTaskOptions = ref(null);
+const avgWaitingTimeData = ref(null);
+const avgWaitingTimeOptions = ref(null);
+const avgWaitingTimeByEdgeData = ref(null);
+const avgWaitingTimeByEdgeOptions = ref(null);
+const freqData = ref(null);
+const freqOptions = ref(null);
+const casesByTaskData = ref(null);
+const casesByTaskOptions = ref(null);
+const horizontalBarHeight = 500;
+const avgProcessTimeByTaskHeight = ref(500);
+const avgWaitingTimeByEdgeHeight = ref(500);
+const casesByTaskHeight = ref(500);
+
+// Methods
+function handleClick(tagId) {
+  isActive.value = tagId;
+
+  if (isSafeTagId(tagId)) {
+    window.location.href = tagId;
+  } else {
+    console.warn("不安全的 tagId: ", tagId);
+  }
+}
+
+function isSafeTagId(tagId) {
+  const pattern = /^#?[a-zA-Z0-9-]*$/;
+  return pattern.test(tagId);
+}
+
+function setXLabelsData(valueData) {
+  const min = new Date(valueData.min).getTime();
+  const max = new Date(valueData.max).getTime();
+  const numPoints = 12;
+  const step = (max - min) / (numPoints - 1);
+  const data = [];
+  for(let i = 0; i< numPoints; i++) {
+    const x = min + i * step;
+    data.push(x);
+  }
+  return data;
+}
+
+function getHorizontalBarHeight(chartData) {
+  const totalBars = chartData.data.length;
+  let hBarHeight = horizontalBarHeight;
+
+  if(totalBars > 10) hBarHeight = (totalBars - 10) * 16 + horizontalBarHeight;
+
+  return hBarHeight + 'px'
+}
+
+function getBarChart(chartData, content) {
+  const getMoment = (time)=> moment(time).format('YYYY/M/D hh:mm:ss');
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  const datasets = chartData.data.map(value => {
+    return {
+      x: getMoment(value.x),
+      y: value.y * 100
+    }
+  });
+  const xData = datasets.map(i => i.x);
+  const yData = datasets.map(i => i.y)
+
+  primeVueSetData = {
+    labels: xData,
+    datasets: [
+      {
+        label: content.title,
+        data: yData,
+        backgroundColor: '#0099FF'
+      }
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        displayColors: false,
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          title: function(context) {
+            return `${content.x}: ${context[0].label}`;
+          },
+          label: function(context) {
+            return `${content.y}: ${context.parsed.y.toFixed(2)}`;
+          }
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: content.x,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          }
+        },
+        ticks: {
+          display: true,
+          color: '#64748b',
+          callback: function(value, index, ticks) {
+            return moment(xData[index]).format('YYYY/MM/DD');
+          },
+        },
+        border: {
+          color: '#64748b',
+        },
+        grid: {
+          display: false,
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: content.y,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+        },
+        ticks:{
+          color: '#64748b',
+          padding: 8,
+
+        },
+        grid: {
+          color: '#64748b',
+        },
+        border: {
+          display: false,
+        },
+      },
+    },
+  };
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getHorizontalBarChart(chartData, content, isSingle, xUnit) {
+  const maxY = chartData.y_axis.max;
+  const getSimpleTimeLabel = simpleTimeLabel;
+  const getFollowTimeLabel = followTimeLabel;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+
+  chartData.data.sort((a, b) => b.y - a.y);
+  const xData = chartData.data.map(item => item.x);
+  const yData = chartData.data.map(item => item.y);
+
+  primeVueSetData = {
+    labels: xData,
+    datasets: [
+      {
+        label: content.title,
+        data: yData,
+        backgroundColor: '#0099FF',
+      }
+    ]
+  };
+  primeVueSetOption = {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        displayColors: false,
+        titleFont: {weight: 'normal'},
+        callbacks: {}
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: content.x,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          }
+        },
+        ticks: {
+          display: true,
+          maxRotation: 0,
+          color: '#64748b',
+        },
+        grid: {
+          color: '#64748b',
+        },
+        border: {
+          display:false,
+        },
+      },
+      y: {
+        beginAtZero: true,
+        type: 'category',
+        title: {
+          display: true,
+          text: content.y,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+        },
+        ticks:{
+          color: '#64748b',
+          padding: 8,
+
+        },
+        grid: {
+          display:false,
+          color: '#64748b',
+        },
+        border: {
+          display: false,
+        },
+      },
+    },
+  };
+  switch (xUnit) {
+    case 'date':
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
+      };
+      primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
+        return getFollowTimeLabel(value, maxY, 1)
+      };
+      break;
+    case 'count':
+    default:
+      primeVueSetOption.scales.x.ticks.precision = 0;
+      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
+        return `${content.x}: ${context.parsed.x}`;
+      }
+      break;
+  }
+  if(isSingle) {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label}`;
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xData[index];
+      return label.length > 21 ? `${label.substring(0, 18)}...` : label
+    };
+  }else {
+    primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
+      return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+    };
+    primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
+      const label = xData[index];
+      let labelStart = label[0];
+      let labelEnd = label[1];
+
+      labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
+      labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
+      return labelStart + " - " + labelEnd
+    };
+  }
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getCustomizedScaleOption(whichScaleObj, {customizeOptions: {
+      content,
+      ticksOfXAxis,
+    },
+  }) {
+  let resultScaleObj;
+  resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+  resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
+  return resultScaleObj;
+}
+
+function customizeScaleChartOptionTitleByContent(whichScaleObj, content){
+  if (!content) {
+    return whichScaleObj;
+  }
+
+  return {
+    ...whichScaleObj,
+      x: {
+        ...whichScaleObj.x,
+        title: {
+          ...whichScaleObj.x.title,
+          text: content.x
+        }
+      },
+      y: {
+        ...whichScaleObj.y,
+        title: {
+          ...whichScaleObj.y.title,
+          text: content.y
+        }
+      }
+    };
+}
+
+function customizeScaleChartOptionTicks(scaleObjectToAlter, ticksOfXAxis) {
+  return {
+    ...scaleObjectToAlter,
+    x: {
+      ...scaleObjectToAlter.x,
+        ticks: {
+          ...scaleObjectToAlter.x.ticks,
+            callback: function(value, index) {
+              return ticksOfXAxis[index];
+            },
+        },
+      },
+  };
+}
+
+function getExplicitDeclaredLineChart(chartData, content, yUnit) {
+  const minX = chartData.x_axis.min;
+  const maxX = chartData.x_axis.max;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+  const getSimpleTimeLabel = simpleTimeLabel;
+
+  const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
+  chartData.y_axis.min);
+  const xData = setXLabelsData(chartData.x_axis);
+
+
+  const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
+  const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
+  primeVueSetData = {
+    labels: xData,
+    datasets: [
+      {
+        label: content.title,
+        data: datasets,
+        fill: false,
+        tension: 0,
+        borderColor: '#0099FF',
+      }
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        displayColors: false,
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          label: function(context) {
+            return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+          }
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        min: minX,
+        max: maxX,
+        type: 'time',
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.x,
+        },
+        time: {
+          displayFormats: {
+            second: 'h:mm:ss',
+            minute: 'M/d h:mm',
+            hour: 'M/d h:mm',
+            day: 'M/d h',
+            month: 'y/M/d',
+          },
+          round: true
+        },
+        ticks: {
+          maxTicksLimit: primeVueTicksLimit,
+          padding: 8,
+          display: true,
+          maxRotation: 0,
+          color: '#64748b',
+          source: 'labels',
+          callback: function(value, index) {
+            return ticksOfXAxis[index];
+          },
+        },
+        border: {
+          color: '#64748b',
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.y
+        },
+        grid: {
+          color: '#64748b',
+        },
+        border: {
+          display: false,
+        },
+        ticks: {
+
+          color: '#64748b',
+          padding: 8,
+          callback: function (value, index, ticks) {
+            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            return getYTicksByIndex(resultStepSize, index, unitToUse);
+          },
+        }
+      },
+    },
+  };
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+function getAvgWaitingTimeLineChart(chartData, content, yUnit) {
+  const getMoment = (time)=> moment(time).format('YYYY/M/D hh:mm:ss');
+  const minX = chartData.x_axis.min;
+  const maxX = chartData.x_axis.max;
+  let primeVueSetData = {};
+  let primeVueSetOption = {};
+  const getSimpleTimeLabel = simpleTimeLabel;
+
+  const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
+  chartData.y_axis.min);
+  const xData = setXLabelsData(chartData.x_axis);
+
+
+  const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
+  const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
+
+  primeVueSetData = {
+    labels: xData,
+    datasets: [
+      {
+        label: content.title,
+        data: datasets,
+        fill: false,
+        tension: 0,
+        borderColor: '#0099FF',
+      }
+    ]
+  };
+  primeVueSetOption = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        top: 16,
+        left: 8,
+        right: 8,
+      }
+    },
+    plugins: {
+      legend: false,
+      tooltip: {
+        displayColors: false,
+        titleFont: {weight: 'normal'},
+        callbacks: {
+          title: function(context) {
+            return `${content.x}: ${getMoment(context[0].parsed.x)}`;
+          },
+          label:function(context) {
+            return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+          },
+        },
+      },
+      title: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        min: minX,
+        max: maxX,
+        type: 'time',
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.x,
+        },
+        time: {
+          displayFormats: {
+            second: 'h:mm:ss',
+            minute: 'M/d h:mm',
+            hour: 'M/d h:mm',
+            day: 'M/d h',
+            month: 'y/M/d',
+          },
+          round: true
+        },
+        ticks: {
+          display: true,
+          maxRotation: 0,
+          color: '#64748b',
+          source: 'labels',
+          callback: function(value, index) {
+            return ticksOfXAxis[index];
+          },
+        },
+        border: {
+          color: '#64748b',
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          color: '#334155',
+          font: {
+            size: 12,
+            lineHeight: 2
+          },
+          text: content.y
+        },
+        grid: {
+          color: '#64748b',
+        },
+        border: {
+          display: false,
+        },
+        ticks: {
+
+          color: '#64748b',
+          padding: 8,
+          callback: function (value, index, ticks) {
+            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
+            return getYTicksByIndex(resultStepSize, index, unitToUse);
+          },
+        }
+      },
+    },
+  };
+
+  return [primeVueSetData, primeVueSetOption]
+}
+
+// Created logic
+(async () => {
+  isLoading.value = true;
+  const routeParams = route.params;
+  const isCheckPage = route.name.includes('Check');
+  const type = routeParams.type;
+  const file = route.meta.file;
+  let id;
+
+  if(!isCheckPage) {
+    id = await routeParams.fileId;
+  } else {
+    id = await file.parent.id;
+  }
+
+  // 取得 Performance Data
+  await performanceStore.getPerformance(type, id);
+  avgProcessTimeByTaskHeight.value = await getHorizontalBarHeight(performanceData.value.time.avg_process_time_by_task);
+  if(performanceData.value.time.avg_waiting_time_by_edge !== null) {
+    avgWaitingTimeByEdgeHeight.value = await getHorizontalBarHeight(performanceData.value.time.avg_waiting_time_by_edge);
+  }
+  casesByTaskHeight.value = await getHorizontalBarHeight(performanceData.value.freq.cases_by_task);
+  // create chart
+  [avgCycleTimeData.value, avgCycleTimeOptions.value] = getExplicitDeclaredLineChart(performanceData.value.time.avg_cycle_time,
+    contentData.avgCycleTime, 'date');
+  [avgCycleEfficiencyData.value, avgCycleEfficiencyOptions.value] = getBarChart(
+    performanceData.value.time.avg_cycle_efficiency, contentData.avgCycleEfficiency);
+  [avgProcessTimeData.value, avgProcessTimeOptions.value] = getExplicitDeclaredLineChart(performanceData.value.time.avg_process_time,
+    contentData.avgProcessTime, 'date');
+  [avgProcessTimeByTaskData.value, avgProcessTimeByTaskOptions.value] = getHorizontalBarChart(
+    performanceData.value.time.avg_process_time_by_task, contentData.avgProcessTimeByTask, true, 'date');
+  [avgWaitingTimeData.value, avgWaitingTimeOptions.value] = getExplicitDeclaredLineChart(
+    performanceData.value.time.avg_waiting_time, contentData.avgWaitingTime, 'date');
+  if(performanceData.value.time.avg_waiting_time_by_edge !== null) {
+    [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = getHorizontalBarChart(
+      performanceData.value.time.avg_waiting_time_by_edge, contentData.avgWaitingTimeByEdge, false, 'date');
+  } else {
+    [avgWaitingTimeByEdgeData.value, avgWaitingTimeByEdgeOptions.value] = [null, null]
+  }
+
+  [casesByTaskData.value, casesByTaskOptions.value] = getHorizontalBarChart(performanceData.value.freq.cases_by_task,
+    contentData.casesByTask, true, 'count');
+  // 停止 loading
+  isLoading.value = false;
+})();
+</script>
 <style scoped>
 @reference "../../../assets/tailwind.css";
 .active {
diff --git a/src/views/Files/Files.vue b/src/views/Files/Files.vue
index 2272c75..00a4e3b 100644
--- a/src/views/Files/Files.vue
+++ b/src/views/Files/Files.vue
@@ -71,7 +71,7 @@
             <span v-show="secondaryDragData.length > 0" class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger" @click="secondaryDragDelete
             ">do_not_disturb_on</span>
           </div>
-          <button class="btn btn-sm" :class="this.isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
+          <button class="btn btn-sm" :class="isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
         </div>
       </section>
       <!-- Recently Used -->
@@ -117,7 +117,7 @@
         </div>
         <!-- All Files type of grid -->
          <ul>
-          <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 
+          <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4
             flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" id="compareGridCards">
             <template #item="{ element, index }">
               <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300
@@ -209,7 +209,7 @@
       </section>
     </div>
     <!-- ContextMenu -->
-    <ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
+    <ContextMenu ref="fileRightMenuRef" :model="items" @hide="selectedFile = null" class="cursor-pointer">
       <template #item="{ item }">
         <a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
           <span class="material-symbols-outlined">{{ item.icon }}</span>
@@ -220,8 +220,10 @@
     </ContextMenu>
   </div>
 </template>
-<script>
-  import { storeToRefs, mapActions, } from 'pinia';
+<script setup>
+  import { ref, computed, watch, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
   import { useMapCompareStore } from '@/stores/mapCompareStore';
   import { useLoginStore } from '@/stores/login';
   import { useFilesStore } from '@/stores/files';
@@ -237,390 +239,388 @@
   import IconGrid from '@/components/icons/IconGrid.vue';
   import { renameModal, deleteFileModal, reallyDeleteInformation } from '@/module/alertModal.js';
 
-  export default {
-    data() {
-      return {
-        mapCompareStore: useMapCompareStore(),
-        isActive: null,
-        isHover: null,
-        switchListOrGrid: false,
-        selectedTableFile: null, // table 右鍵選單 item
-        selectedFile: null, // 右鍵選單 item
-        selectedType: null,
-        selectedId: null,
-        selectedName: null,
-        items: [
-          {
-            label: 'Rename',
-            icon: 'edit_square',
-            command: this.rename,
-          },
-          {
-            label: 'Download',
-            icon: 'download',
-            command: this.download,
-          },
-          {
-            separator: true // 分隔符號
-          },
-          {
-            label: 'Delete',
-            icon: 'delete',
-            command: this.deleteFile,
-          },
-        ],
-        compareData: null,
-        primaryDragData: [],
-        secondaryDragData: [],
-        gridSort: null,
-        columnType: [
-          { name: 'By File Name (A to Z)', code: 'nameAscending'},
-          { name: 'By File Name (Z to A)', code: 'nameDescending'},
-          { name: 'By Dependency (A to Z)', code: 'parentLogAscending'},
-          { name: 'By Dependency (Z to A)', code: 'parentLogDescending'},
-          { name: 'By File Type (A to Z)', code: 'fileAscending'},
-          { name: 'By File Type (Z to A)', code: 'fileDescending'},
-          { name: 'By Last Update (A to Z)', code: 'updatedAscending'},
-          { name: 'By Last Update (Z to A)', code: 'updatedDescending'},
-        ],
-      }
-    },
-    setup() {
-      const loginStore = useLoginStore();
-      const store = useFilesStore();
-      const allMapDataStore = useAllMapDataStore();
-      const loadingStore = useLoadingStore();
-      const { dependentsData, filesTag } = storeToRefs(store);
-      const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
-      const { isLoading } = storeToRefs(loadingStore);
+  const router = useRouter();
 
-      return { loginStore, store, dependentsData, filesTag, allMapDataStore, createFilterId, baseLogId, isLoading }
-    },
-    components: {
-      IconDataFormat,
-      IconRule,
-      IconsFilter,
-      IconFlowChart,
-      IconVector,
-      IconList,
-      IconGrid
-    },
-    computed: {
-      /**
-       * Read allFiles
-       */
-      allFiles: function() {
-        if(this.store.allFiles.length !== 0){
-          const sortFiles = Array.from(this.store.allFiles);
-          sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
-          return sortFiles;
-        }
-      },
-      /**
-       * 時間排序，如果沒有 accessed_at 就不加入 data
-       */
-      recentlyUsedFiles: function() {
-        let recentlyUsedFiles = Array.from(this.store.allFiles);
-        recentlyUsedFiles = recentlyUsedFiles.filter(item => item.accessed_at !== null);
-        recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
-        return recentlyUsedFiles;
-      },
-      /**
-       * Compare Submit button disabled
-       */
-      isCompareDisabledButton: function() {
-        const result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0;
-        return result;
-      },
-      /**
-       * Really deleted information
-       */
-      reallyDeleteData: function() {
-        let result = [];
+  // Stores
+  const mapCompareStore = useMapCompareStore();
+  const loginStore = useLoginStore();
+  const store = useFilesStore();
+  const allMapDataStore = useAllMapDataStore();
+  const pageAdminStore = usePageAdminStore();
+  const loadingStore = useLoadingStore();
 
-        if(this.store.allFiles.length !== 0){
-          result = JSON.parse(JSON.stringify(this.store.allFiles));
-          result = result.filter(file => file.is_deleted === true);
-        }
+  const { dependentsData, filesTag } = storeToRefs(store);
+  const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
+  const { isLoading } = storeToRefs(loadingStore);
 
-        return result
-      }
+  // Data
+  const isActive = ref(null);
+  const isHover = ref(null);
+  const switchListOrGrid = ref(false);
+  const selectedTableFile = ref(null);
+  const selectedFile = ref(null);
+  const selectedType = ref(null);
+  const selectedId = ref(null);
+  const selectedName = ref(null);
+  const compareData = ref(null);
+  const primaryDragData = ref([]);
+  const secondaryDragData = ref([]);
+  const gridSort = ref(null);
+  const fileRightMenuRef = ref(null);
+
+  const items = [
+    {
+      label: 'Rename',
+      icon: 'edit_square',
+      command: rename,
     },
-    watch: {
-      filesTag: {
-        handler(newValue) {
-          if(newValue !== 'COMPARE'){
-            this.primaryDragData = [];
-            this.secondaryDragData = [];
-          }
-        }
-      },
-      allFiles: {
-        handler(newValue) {
-          if(newValue !== null) this.compareData = JSON.parse(JSON.stringify(newValue));
-        }
-      },
-      reallyDeleteData: {
-        handler(newValue, oldValue) {
-          if(newValue.length !== 0 && oldValue.length === 0){
-            this.showReallyDelete();
-          }
-        },
-        immediate: true
-      }
+    {
+      label: 'Download',
+      icon: 'download',
+      command: download,
     },
-    methods: {
-      /**
-       * Set Row Style
-       */
-      setRowClass() {
-        return ['group']
-      },
-      /**
-       * Set Compare Row Style
-       */
-      setCompareRowClass() {
-        return ['leading-6']
-      },
-      /**
-       * 選擇該 files 進入 Discover/Compare/Design 頁面
-       * @param {object} file 該 file 的詳細資料
-       */
-      enterDiscover(file){
-        let type;
-        let fileId;
-        let params;
+    {
+      separator: true
+    },
+    {
+      label: 'Delete',
+      icon: 'delete',
+      command: deleteFile,
+    },
+  ];
 
-        this.setCurrentMapFile(file.name);
+  const columnType = [
+    { name: 'By File Name (A to Z)', code: 'nameAscending'},
+    { name: 'By File Name (Z to A)', code: 'nameDescending'},
+    { name: 'By Dependency (A to Z)', code: 'parentLogAscending'},
+    { name: 'By Dependency (Z to A)', code: 'parentLogDescending'},
+    { name: 'By File Type (A to Z)', code: 'fileAscending'},
+    { name: 'By File Type (Z to A)', code: 'fileDescending'},
+    { name: 'By Last Update (A to Z)', code: 'updatedAscending'},
+    { name: 'By Last Update (Z to A)', code: 'updatedDescending'},
+  ];
 
-        switch (file.type) {
-          case 'log':
-            this.createFilterId = null;
-            this.baseLogId = file.id;
-            fileId = file.id;
-            type = file.type;
-            params = { type: type, fileId: fileId };
-            this.$router.push({name: 'Map', params: params});
-            break;
-          case 'filter':
-            this.createFilterId = file.id;
-            this.baseLogId = file.parent.id;
-            fileId = file.id;
-            type = file.type;
-            params = { type: type, fileId: fileId };
-            this.$router.push({name: 'Map', params: params});
-            break;
+  // Computed
+  /**
+   * Read allFiles
+   */
+  const allFiles = computed(() => {
+    if(store.allFiles.length !== 0){
+      const sortFiles = Array.from(store.allFiles);
+      sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
+      return sortFiles;
+    }
+  });
+
+  /**
+   * 時間排序，如果沒有 accessed_at 就不加入 data
+   */
+  const recentlyUsedFiles = computed(() => {
+    let recentlyUsed = Array.from(store.allFiles);
+    recentlyUsed = recentlyUsed.filter(item => item.accessed_at !== null);
+    recentlyUsed.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
+    return recentlyUsed;
+  });
+
+  /**
+   * Compare Submit button disabled
+   */
+  const isCompareDisabledButton = computed(() => {
+    return primaryDragData.value.length === 0 || secondaryDragData.value.length === 0;
+  });
+
+  /**
+   * Really deleted information
+   */
+  const reallyDeleteData = computed(() => {
+    let result = [];
+    if(store.allFiles.length !== 0){
+      result = JSON.parse(JSON.stringify(store.allFiles));
+      result = result.filter(file => file.is_deleted === true);
+    }
+    return result;
+  });
+
+  // Watch
+  watch(filesTag, (newValue) => {
+    if(newValue !== 'COMPARE'){
+      primaryDragData.value = [];
+      secondaryDragData.value = [];
+    }
+  });
+
+  watch(allFiles, (newValue) => {
+    if(newValue !== null) compareData.value = JSON.parse(JSON.stringify(newValue));
+  });
+
+  watch(reallyDeleteData, (newValue, oldValue) => {
+    if(newValue.length !== 0 && oldValue.length === 0){
+      showReallyDelete();
+    }
+  }, { immediate: true });
+
+  // Methods
+  /**
+   * Set Row Style
+   */
+  function setRowClass() {
+    return ['group'];
+  }
+
+  /**
+   * Set Compare Row Style
+   */
+  function setCompareRowClass() {
+    return ['leading-6'];
+  }
+
+  /**
+   * 選擇該 files 進入 Discover/Compare/Design 頁面
+   * @param {object} file 該 file 的詳細資料
+   */
+  function enterDiscover(file){
+    let type;
+    let fileId;
+    let params;
+
+    pageAdminStore.setCurrentMapFile(file.name);
+
+    switch (file.type) {
+      case 'log':
+        createFilterId.value = null;
+        baseLogId.value = file.id;
+        fileId = file.id;
+        type = file.type;
+        params = { type: type, fileId: fileId };
+        router.push({name: 'Map', params: params});
+        break;
+      case 'filter':
+        createFilterId.value = file.id;
+        baseLogId.value = file.parent.id;
+        fileId = file.id;
+        type = file.type;
+        params = { type: type, fileId: fileId };
+        router.push({name: 'Map', params: params});
+        break;
+      case 'log-check':
+      case 'filter-check':
+        fileId = file.id;
+        type = file.parent.type;
+        params = { type: type, fileId: fileId };
+        router.push({name: 'CheckConformance', params: params});
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Right Click DOM Event
+   * @param {event} event 該 file 的詳細資料
+   * @param {string} file file's name
+   */
+  function onRightClick(event, file) {
+    selectedType.value = file.type;
+    selectedId.value = file.id;
+    selectedName.value = file.name;
+    fileRightMenuRef.value.show(event);
+  }
+
+  /**
+   * Right Click Table DOM Event
+   * @param {event} event 該 file 的詳細資料
+   */
+  function onRightClickTable(event) {
+    selectedType.value = event.data.type;
+    selectedId.value = event.data.id;
+    selectedName.value = event.data.name;
+    fileRightMenuRef.value.show(event.originalEvent);
+  }
+
+  /**
+   * Right Click Gride Card DOM Event
+   * @param {event} event 該 file 的詳細資料
+   * @param {number} index 該 file 的 index
+   */
+  function onGridCardClick(file, index) {
+    selectedType.value = file.type;
+    selectedId.value = file.id;
+    selectedName.value = file.name;
+    isActive.value = index;
+  }
+
+  /**
+   * File's Rename
+   * @param {string} type 該檔案的 type
+   * @param {number} id 該檔案的 id
+   * @param {string} source hover icon 該檔案的 icon
+   * @param {string} fileName file's name
+   */
+  function rename(type, id, source, fileName) {
+    if(type && id && source === 'list-hover') {
+      selectedType.value = type;
+      selectedId.value = id;
+      selectedName.value = fileName;
+    }
+    renameModal(store.rename, selectedType.value, selectedId.value, selectedName.value);
+  }
+
+  /**
+   * Delete file
+   * @param {string} type 該檔案的 type
+   * @param {number} id 該檔案的 id
+   * @param {string} source hover icon 該檔案的 icon
+   */
+  async function deleteFile(type, id, name, source) {
+    let srt = '';
+    let data = [];
+    // 判斷是否來自 hover icon 選單
+    if(type && id && name && source === 'list-hover') {
+      selectedType.value = type;
+      selectedId.value = id;
+      selectedName.value = name;
+    }
+    // 取得相依性檔案
+    await store.getDependents(selectedType.value, selectedId.value);
+    if(dependentsData.value.length !== 0) {
+      data = [...dependentsData.value];
+      data.forEach(i => {
+        switch (i.type) {
           case 'log-check':
+            i.type = 'rule';
+            break;
           case 'filter-check':
-            fileId = file.id;
-            type = file.parent.type;
-            params = { type: type, fileId: fileId };
-            this.$router.push({name: 'CheckConformance', params: params});
+            i.type = 'rule';
             break;
           default:
             break;
         }
-      },
-      /**
-       * Right Click DOM Event
-       * @param {event} event 該 file 的詳細資料
-       * @param {string} file file's name
-       */
-      onRightClick(event, file) {
-        this.selectedType = file.type;
-        this.selectedId = file.id;
-        this.selectedName = file.name;
-        this.$refs.fileRightMenu.show(event)
-      },
-      /**
-       * Right Click Table DOM Event
-       * @param {event} event 該 file 的詳細資料
-       */
-      onRightClickTable(event) {
-        this.selectedType = event.data.type;
-        this.selectedId = event.data.id;
-        this.selectedName = event.data.name;
-        this.$refs.fileRightMenu.show(event.originalEvent)
-      },
-      /**
-       * Right Click Gride Card DOM Event
-       * @param {event} event 該 file 的詳細資料
-       * @param {number} index 該 file 的 index
-       */
-      onGridCardClick(file, index) {
-        this.selectedType = file.type;
-        this.selectedId = file.id;
-        this.selectedName = file.name;
-        this.isActive = index;
-      },
-      /**
-       * File's Rename
-       * @param {string} type 該檔案的 type
-       * @param {number} id 該檔案的 id
-       * @param {string} source hover icon 該檔案的 icon
-       * @param {string} fileName file's name
-       */
-      rename(type, id, source, fileName) {
-        if(type && id && source === 'list-hover') {
-          this.selectedType = type;
-          this.selectedId = id;
-          this.selectedName = fileName;
-        }
-        renameModal(this.store.rename, this.selectedType, this.selectedId, this.selectedName);
-      },
-      /**
-       * Delete file
-       * @param {string} type 該檔案的 type
-       * @param {number} id 該檔案的 id
-       * @param {string} source hover icon 該檔案的 icon
-       */
-      async deleteFile(type, id, name, source) {
-        let srt = '';
-        let data = [];
-        // 判斷是否來自 hover icon 選單
-        if(type && id && name && source === 'list-hover') {
-          this.selectedType = type;
-          this.selectedId = id;
-          this.selectedName = name;
-        }
-        // 取得相依性檔案
-        await this.store.getDependents(this.selectedType, this.selectedId);
-        if(this.dependentsData.length !== 0) {
-          data = [...this.dependentsData];
-          data.forEach(i => {
-            switch (i.type) {
-              case 'log-check':
-                i.type = 'rule';
-                break;
-              case 'filter-check':
-                i.type = 'rule';
-                break;
-              default:
-                break;
-            }
-            const content = `<li>[${i.type}] ${i.name}</li>`;
-            srt += content;
-          });
-        }
-        deleteFileModal(srt, this.selectedType, this.selectedId, this.selectedName);
-        srt = '';
-      },
-      /**
-       * 顯示被 Admin 或被其他帳號刪除的檔案
-       */
-       showReallyDelete(){
-        let srt = '';
-
-        if(this.reallyDeleteData.length !== 0) {
-          this.reallyDeleteData.forEach(file => {
-            switch (file.type) {
-              case 'log-check':
-              case 'filter-check':
-              default:
-                file.type = 'rule';
-                break;
-            }
-
-            const content = `<li>[${file.type}] ${file.name}</li>`;
-            srt += content;
-          });
-        }
-        reallyDeleteInformation(srt, this.reallyDeleteData);
-        srt = '';
-      },
-      /**
-       * Download file as CSV
-       * @param {string} type 該檔案的 type
-       * @param {number} id 該檔案的 id
-       * @param {string} source hover icon 該檔案的 icon
-       */
-      download(type, id, source, name) {
-        if(type && id && source === 'list-hover' && name) {
-          this.selectedType = type;
-          this.selectedId = id;
-          this.selectedName = name;
-        }
-        this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selectedName);
-      },
-      /**
-       * Delete Compare Primary log
-       */
-       primaryDragDelete() {
-        this.compareData.unshift(this.primaryDragData[0]);
-        this.primaryDragData.length = 0;
-      },
-      /**
-       * Delete Compare Secondary log
-       */
-      secondaryDragDelete() {
-        this.compareData.unshift(this.secondaryDragData[0]);
-        this.secondaryDragData.length = 0;
-      },
-      /**
-       * Enter the Compare page
-       */
-       compareSubmit() {
-        const primaryType = this.primaryDragData[0].type;
-        const secondaryType = this.secondaryDragData[0].type;
-        const primaryId = this.primaryDragData[0].id;
-        const secondaryId = this.secondaryDragData[0].id;
-        const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
-
-        this.mapCompareStore.setCompareRouteParam(primaryType, primaryId, secondaryType, secondaryId);
-        this.$router.push({name: 'CompareDashboard', params: params});
-      },
-      /**
-       * Grid 模板時的篩選器
-       * @param {event} event choose columnType item
-       */
-      getGridSortData(event) {
-        const code = event.value.code;
-
-         // 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
-        switch (code) {
-          case 'nameAscending':
-            this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-            break;
-          case 'nameDescending':
-            this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
-            break;
-          case 'parentLogAscending':
-            this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
-            break;
-          case 'parentLogDescending':
-            this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
-            break;
-          case 'fileAscending':
-            this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
-            break;
-          case 'fileDescending':
-            this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
-            break;
-          case 'updatedAscending':
-            this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
-            break;
-          case 'updatedDescending':
-          this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
-            break;
-        }
-      },
-      ...mapActions(
-        usePageAdminStore, ['setCurrentMapFile',],
-      )
-    },
-    mounted() {
-      this.isLoading = true;
-      this.store.fetchAllFiles();
-      window.addEventListener('click', (e) => {
-        const clickedLi = e.target.closest('li');
-        if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
-      })
-      // 為 DataTable tbody 加入 .scrollbar 選擇器
-      const tbodyElement = document.querySelector('.p-datatable-tbody');
-      tbodyElement.classList.add('scrollbar');
-      this.isLoading = false;
-    },
+        const content = `<li>[${i.type}] ${i.name}</li>`;
+        srt += content;
+      });
+    }
+    deleteFileModal(srt, selectedType.value, selectedId.value, selectedName.value);
+    srt = '';
   }
+
+  /**
+   * 顯示被 Admin 或被其他帳號刪除的檔案
+   */
+  function showReallyDelete(){
+    let srt = '';
+
+    if(reallyDeleteData.value.length !== 0) {
+      reallyDeleteData.value.forEach(file => {
+        switch (file.type) {
+          case 'log-check':
+          case 'filter-check':
+          default:
+            file.type = 'rule';
+            break;
+        }
+
+        const content = `<li>[${file.type}] ${file.name}</li>`;
+        srt += content;
+      });
+    }
+    reallyDeleteInformation(srt, reallyDeleteData.value);
+    srt = '';
+  }
+
+  /**
+   * Download file as CSV
+   * @param {string} type 該檔案的 type
+   * @param {number} id 該檔案的 id
+   * @param {string} source hover icon 該檔案的 icon
+   */
+  function download(type, id, source, name) {
+    if(type && id && source === 'list-hover' && name) {
+      selectedType.value = type;
+      selectedId.value = id;
+      selectedName.value = name;
+    }
+    store.downloadFileCSV(selectedType.value, selectedId.value, selectedName.value);
+  }
+
+  /**
+   * Delete Compare Primary log
+   */
+  function primaryDragDelete() {
+    compareData.value.unshift(primaryDragData.value[0]);
+    primaryDragData.value.length = 0;
+  }
+
+  /**
+   * Delete Compare Secondary log
+   */
+  function secondaryDragDelete() {
+    compareData.value.unshift(secondaryDragData.value[0]);
+    secondaryDragData.value.length = 0;
+  }
+
+  /**
+   * Enter the Compare page
+   */
+  function compareSubmit() {
+    const primaryType = primaryDragData.value[0].type;
+    const secondaryType = secondaryDragData.value[0].type;
+    const primaryId = primaryDragData.value[0].id;
+    const secondaryId = secondaryDragData.value[0].id;
+    const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
+
+    mapCompareStore.setCompareRouteParam(primaryType, primaryId, secondaryType, secondaryId);
+    router.push({name: 'CompareDashboard', params: params});
+  }
+
+  /**
+   * Grid 模板時的篩選器
+   * @param {event} event choose columnType item
+   */
+  function getGridSortData(event) {
+    const code = event.value.code;
+
+    // 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
+    switch (code) {
+      case 'nameAscending':
+        compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+        break;
+      case 'nameDescending':
+        compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
+        break;
+      case 'parentLogAscending':
+        compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
+        break;
+      case 'parentLogDescending':
+        compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
+        break;
+      case 'fileAscending':
+        compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
+        break;
+      case 'fileDescending':
+        compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
+        break;
+      case 'updatedAscending':
+        compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
+        break;
+      case 'updatedDescending':
+        compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
+        break;
+    }
+  }
+
+  // Mounted
+  onMounted(() => {
+    isLoading.value = true;
+    store.fetchAllFiles();
+    window.addEventListener('click', (e) => {
+      const clickedLi = e.target.closest('li');
+      if(!clickedLi || !clickedLi.id.startsWith('li')) isActive.value = null;
+    });
+    // 為 DataTable tbody 加入 .scrollbar 選擇器
+    const tbodyElement = document.querySelector('.p-datatable-tbody');
+    tbodyElement.classList.add('scrollbar');
+    isLoading.value = false;
+  });
 </script>
 <style scoped>
 @reference "../../assets/tailwind.css";
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index df1fc87..07a76ee 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -46,9 +46,10 @@
   </div>
 </template>
 
-<script>
-import { ref, } from 'vue';
-import { storeToRefs, mapActions } from 'pinia';
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
 import { useLoginStore } from '@/stores/login';
 import IconMember from '@/components/icons/IconMember.vue';
 import IconLockKey from '@/components/icons/IconLockKey.vue';
@@ -56,69 +57,47 @@ import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
 import IconEyeClose from '@/components/icons/IconEyeClose.vue';
 import IconWarnTriangle from '@/components/icons/IconWarnTriangle.vue';
 
-export default {
-  data(){
-    return {
-      isDisabled: true,
-      showPassword: false,
-    }
-  },
-  setup() {
-    // 調用函數，獲取 Store
-    const store = useLoginStore();
-    // 調用 store 裡的 state
-    const { auth, isInvalid } = storeToRefs(store);
-    // 調用 store 裡的 action
-    const { signIn } = store;
-    const isJustFocus = ref(true);
+const route = useRoute();
 
-    return {
-      auth,
-      isInvalid,
-      signIn,
-      isJustFocus,
-    }
-  },
-  components: {
-    IconMember,
-    IconLockKey,
-    IconEyeOpen,
-    IconEyeClose,
-    IconWarnTriangle
-  },
-  computed: {
-    /**
-    * if input no value , disabled.
-    */
-    isDisabledButton() {     
-      return  this.auth.username === '' || this.auth.password === '' || this.isInvalid;
-    },
-  },
-  methods: {
-    /**
-     * when input onChange value , isInvalid === false.
-     * @param {event} event input 傳入的事件
-     */
-    changeHandler(event) {
-      const inputValue = event.target.value;
-      if(inputValue !== '') {
-        this.isInvalid = false;
-      }
-    },
-    onInputAccountFocus(){
-    },
-    onInputPwdFocus(){
-    },
-    ...mapActions(useLoginStore, ['setRememberedReturnToUrl']),
-  },
-  created() {
-    // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
-    // btoa: 對字串進行 Base64 編碼
-    if(this.$route.query['return-to']) {
-      this.setRememberedReturnToUrl(this.$route.query['return-to']);
-    }    
-  },
-};
+// Store
+const store = useLoginStore();
+const { auth, isInvalid } = storeToRefs(store);
+const { signIn, setRememberedReturnToUrl } = store;
+
+// Data
+const isDisabled = ref(true);
+const showPassword = ref(false);
+const isJustFocus = ref(true);
+
+// Computed
+const isDisabledButton = computed(() => {
+  return auth.value.username === '' || auth.value.password === '' || isInvalid.value;
+});
+
+// Methods
+/**
+ * when input onChange value , isInvalid === false.
+ * @param {event} event input 傳入的事件
+ */
+function changeHandler(event) {
+  const inputValue = event.target.value;
+  if(inputValue !== '') {
+    isInvalid.value = false;
+  }
+}
+
+function onInputAccountFocus(){
+}
+
+function onInputPwdFocus(){
+}
+
+// Created logic
+// 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
+// btoa: 對字串進行 Base64 編碼
+if(route.query['return-to']) {
+  setRememberedReturnToUrl(route.query['return-to']);
+}
 </script>
 
 <style scoped>
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index d98be48..da0be54 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -5,86 +5,21 @@
       <Navbar/>
   </header>
   <main id='loading_and_router_view_container_in_maincontainer' class="w-full">
-    <Loading v-if="loadingStore.isLoading" />    
+    <Loading v-if="loadingStore.isLoading" />
     <router-view></router-view>
   </main>
 </template>
 
 <script lang='ts'>
-import { onBeforeMount, } from 'vue';
-import { useRouter } from 'vue-router';
-import { storeToRefs, mapActions, mapState, } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import Header from "@/components/Header.vue";
-import Navbar from "@/components/Navbar.vue";
-import Loading from '@/components/Loading.vue';
-import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
-import { usePageAdminStore } from '@/stores/pageAdmin';
 import { useLoginStore } from "@/stores/login";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
 import { getCookie, setCookie } from "@/utils/cookieUtil.js";
-import ModalContainer from './AccountManagement/ModalContainer.vue';
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+import emitter from "@/utils/emitter";
 
 export default {
-  name: 'MainContainer',
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const pageAdminStore = usePageAdminStore();
-    const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
-    const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
-    const router = useRouter();
-    const setHighlightedNavItemOnLanding = () => {
-      const currentPath = router.currentRoute.value.path;
-      const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
-      if(pathSegments.length === 1) {
-        if(pathSegments[0] === 'files') {
-          pageAdminStore.setActivePage('ALL');
-        }
-      } else if (pathSegments.length > 1){
-        pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
-      }
-    };
-
-    onBeforeMount(() => {
-      setHighlightedNavItemOnLanding();
-    });
-    return {
-      loadingStore, temporaryData, tempFilterId,
-      createFilterId, postRuleData, ruleData,
-      conformanceLogTempCheckId, conformanceFilterTempCheckId,
-      allMapDataStore, conformanceStore,
-    };
-  },
-  components: {
-    Header,
-    Navbar,
-    Loading,
-    ModalContainer,
-  },
-  computed: {
-    ...mapState(usePageAdminStore, [
-      'shouldKeepPreviousPage',
-      'activePageComputedByRoute'
-    ]),
-    ...mapState(useLoginStore, [
-      'isLoggedIn',
-      'auth',
-    ])
-  },
-  methods: {
-    ...mapActions(usePageAdminStore, [
-      'copyPendingPageToActivePage',
-      'setPreviousPage',
-      'clearShouldKeepPreviousPageBoolean',
-      'setActivePageComputedByRoute',
-    ],),
-    ...mapActions(useLoginStore, [
-      'refreshToken',
-    ],),
-  },
   // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
     // PSEUDOCODE
     // if (not logged in) {
@@ -101,8 +36,8 @@ export default {
     // }
   async beforeRouteEnter(to, from, next) {
     const loginStore = useLoginStore();
-   
-    if (!getCookie("isLuciaLoggedIn")) {  //這裡不要用pinia的isLoggedIn來檢查，因為會有重新整理時撈不到Persisted value的值的bug
+
+    if (!getCookie("isLuciaLoggedIn")) {
       if (getCookie('luciaRefreshToken')) {
         try {
           await loginStore.refreshToken();
@@ -121,42 +56,79 @@ export default {
         next({
           path: '/login',
           query: {
-            // 記憶未來登入後要進入的網址，且記憶的時候要用base64編碼包裹住
             'return-to': btoa(window.location.href),
           }
         });
       }
-    } else {    
+    } else {
       next();
     }
   },
   // Remember, Swal modal handling is called before beforeRouteUpdate
   beforeRouteUpdate(to, from, next) {
-    this.setPreviousPage(from.name);
+    const pageAdminStore = usePageAdminStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
+
+    pageAdminStore.setPreviousPage(from.name);
 
     // 離開 Map 頁時判斷是否有無資料和需要存檔
-    if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
+    if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
       // 傳給 Map，通知 Sidebar 要關閉。
-      this.$emitter.emit('leaveFilter', false);
-      leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
-    } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') 
-        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-      leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path);
-    } else if(this.shouldKeepPreviousPage) {
-      // pass on and reset boolean for future use
-      this.clearShouldKeepPreviousPageBoolean();
+      emitter.emit('leaveFilter', false);
+      leaveFilter(next, allMapDataStore.addFilterId, to.path)
+    } else if((from.name === 'Conformance' || from.name === 'CheckConformance')
+        && (conformanceStore.conformanceLogTempCheckId || conformanceStore.conformanceFilterTempCheckId)) {
+      leaveConformance(next, conformanceStore.addConformanceCreateCheckId, to.path);
+    } else if(pageAdminStore.shouldKeepPreviousPage) {
+      pageAdminStore.clearShouldKeepPreviousPageBoolean();
     } else {
-      // most cases go this road
-
-      // In this else block:
-      // for those pages who don't need popup modals, we handle page administration right now.
-      // By calling the following code, we decide the next visiting page.
-      // 在這個 else 區塊中：
-      // 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
-      // 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
-      this.copyPendingPageToActivePage();
+      pageAdminStore.copyPendingPageToActivePage();
       next();
     }
   },
 };
 </script>
+
+<script setup lang='ts'>
+import { onBeforeMount } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { useAllMapDataStore } from '@/stores/allMapData';
+import { useConformanceStore } from '@/stores/conformance';
+import Header from "@/components/Header.vue";
+import Navbar from "@/components/Navbar.vue";
+import Loading from '@/components/Loading.vue';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import { usePageAdminStore } from '@/stores/pageAdmin';
+import { useLoginStore } from "@/stores/login";
+import emitter from '@/utils/emitter';
+import ModalContainer from './AccountManagement/ModalContainer.vue';
+
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const pageAdminStore = usePageAdminStore();
+const loginStore = useLoginStore();
+const router = useRouter();
+
+const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+
+const setHighlightedNavItemOnLanding = () => {
+  const currentPath = router.currentRoute.value.path;
+  const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
+  if(pathSegments.length === 1) {
+    if(pathSegments[0] === 'files') {
+      pageAdminStore.setActivePage('ALL');
+    }
+  } else if (pathSegments.length > 1){
+    pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
+  }
+};
+
+onBeforeMount(() => {
+  setHighlightedNavItemOnLanding();
+});
+</script>
diff --git a/src/views/MemberArea/index.vue b/src/views/MemberArea/index.vue
index 91d9b8e..956082f 100644
--- a/src/views/MemberArea/index.vue
+++ b/src/views/MemberArea/index.vue
@@ -10,24 +10,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useLoginStore } from '@/stores/login';
 
-export default {
-  setup() {
-    const store = useLoginStore();
-    const { userData } = storeToRefs(store);
-    const { getUserData } = store;
-
-    return {
-      userData,
-      getUserData,
-    }
-  },
-  mounted() {
-    this.getUserData();
-  }
-};
+const store = useLoginStore();
+const { userData } = storeToRefs(store);
 
+onMounted(() => {
+  store.getUserData();
+});
 </script>
diff --git a/src/views/NotFound404.vue b/src/views/NotFound404.vue
index 4bde20c..606f102 100644
--- a/src/views/NotFound404.vue
+++ b/src/views/NotFound404.vue
@@ -13,13 +13,7 @@
   </main>
 </template>
 
-<script>
+<script setup>
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
-export default {
-  components: {
-    Header,
-    Navbar,
-  },
-};
 </script>
diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue
index 696c8cb..f4b379f 100644
--- a/src/views/Upload/index.vue
+++ b/src/views/Upload/index.vue
@@ -78,248 +78,14 @@
   </section>
 </template>
 <script>
-import { storeToRefs } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
 import { useFilesStore } from '@/stores/files';
-import { uploadFailedFirst, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
 
 export default {
-  setup() {
-    const loadingStore = useLoadingStore();
-    const filesStore = useFilesStore();
-    const { isLoading } = storeToRefs(loadingStore);
-    const { uploadDetail, uploadId, uploadFileName } = storeToRefs(filesStore);
-
-    return { isLoading, filesStore, uploadDetail, uploadId, uploadFileName }
-  },
-  data() {
-    return {
-      tooltipUpload: {
-        value: `1. Case ID: A unique identifier for each case.
-          2. Activity: A process step executed by either a system (automated) or humans (manual).
-          3. Activity Instance ID: A unique identifier for a single occurrence of an activity.
-          4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
-          5. Status: Activity status, such as Start or Complete.
-          6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
-          // 暫時沒有 Resource
-          // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
-       class: '!max-w-[400px] !text-[10px] !opacity-80',
-       autoHide: false,
-      },
-      columnType: [
-        { name: 'Case ID*', code: 'case_id', color: '!text-secondary', value: '', label: 'Case ID', required: true },
-        { name: 'Timestamp*', code: 'timestamp', color: '!text-secondary', value: '', label: 'Timestamp', required: true },
-        { name: 'Status*', code: 'status', color: '!text-secondary', value: '', label: 'Status', required: true },
-        { name: 'Activity*', code: 'name', color: '!text-secondary', value: '', label: 'Activity', required: true },
-        { name: 'Activity Instance ID*', code: 'instance', color: '!text-secondary', value: '', label: 'Activity Instance ID', required: true },
-        { name: 'Case Attribute', code: 'case_attributes', color: '!text-primary', value: '', label: 'Case Attribute', required: false },
-        // { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // 現階段沒有，未來可能有
-        { name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
-      ],
-      selectedColumns: [],
-      informData: [], // 藍字提示，尚未選擇的 type
-      repeatedData: [], // 紅字提示，重複選擇的 type
-      fileName: this.uploadFileName,
-    };
-  },
-  computed: {
-    isDisabled: function() {
-      // 1. 長度一樣，強制每一個都要選
-      // 2. 不為 null undefind
-      const hasValue = !this.selectedColumns.includes(undefined);
-      const result = !(this.selectedColumns.length === this.uploadDetail?.columns.length 
-        && this.informData.length === 0 && this.repeatedData.length === 0 && hasValue);
-      return result
-    },
-  },
-  watch: {
-    selectedColumns: {
-      deep: true, // 監聽陣列內部的變化
-      handler(newVal, oldVal) {
-        this.updateValidationData(newVal);
-      },
-    }
-  },
-  methods: {
-    uploadFailedFirst,
-    uploadSuccess,
-    uploadConfirm,
-    /**
-     * Rename 離開 input 的行為
-     * @param {Event} e input 傳入的事件
-     */
-    onBlur(e) {
-      const baseWidth = 20;
-
-      if(e.target.value === '') {
-        e.target.value = this.uploadFileName;
-        const textWidth = this.getTextWidth(e.target.value, e.target);
-        e.target.style.width = baseWidth + textWidth + 'px';
-      }else if(e.target.value !== e.target.value.trim()) {
-        e.target.value = e.target.value.trim();
-        const textWidth = this.getTextWidth(e.target.value, e.target);
-        e.target.style.width = baseWidth + textWidth + 'px';
-      }
-    },
-    /**
-     * Rename 輸入 input 的行為
-     * @param {Event} e input 傳入的事件
-     */
-    onInput(e) {
-      const baseWidth = 20;
-      const textWidth = this.getTextWidth(e.target.value, e.target);
-
-      e.target.style.width = baseWidth + textWidth + 'px';
-    },
-    /**
-     * input 寬度隨著 value 響應式改變
-     * @param {String} text file's name
-     * @param {Event} e input 傳入的事件
-     */
-    getTextWidth(text, e) {
-      // 替換空格為不斷行的空格
-      const processedText = text.replace(/ /g, '\u00a0');
-      const hiddenSpan = document.createElement('span');
-
-      hiddenSpan.innerHTML = processedText;
-      hiddenSpan.style.font = window.getComputedStyle(e).font;
-      hiddenSpan.style.visibility = 'hidden';
-      document.body.appendChild(hiddenSpan);
-      const width = hiddenSpan.getBoundingClientRect().width;
-      document.body.removeChild(hiddenSpan);
-
-      return width;
-    },
-    /**
-     * 驗證，根據新的 selectedColumns 更新 informData 和 repeatedData
-     * @param {Array} data 已選擇的 type 的 data
-     */
-    updateValidationData(data) {
-      const nameOccurrences = {};
-      const noSortedRepeatedData = []; // 未排序的重複選擇的 data
-      const selectedData = [] // 已經選擇的 data
-
-      this.informData = []; // 尚未選擇的 data
-      this.repeatedData = []; // 重複選擇的 data
-
-      data.forEach(item => {
-        const { name, code } = item;
-
-        if(nameOccurrences[name]) {
-          // 'Not Assigned'、'Case Attribute' 不列入驗證
-          if(!code || code === 'case_attributes') return;
-          nameOccurrences[name]++;
-          // 重複的選項只出現一次
-          if(nameOccurrences[name] === 2){
-            noSortedRepeatedData.push(item)
-          }
-          // 要按照選單的順序排序
-          this.repeatedData = this.columnType.filter(column => noSortedRepeatedData.includes(column));
-        }else {
-          nameOccurrences[name] = 1;
-          selectedData.push(name);
-          this.informData = this.columnType.filter(item => item.required ? !selectedData.includes(item.name) : false);
-        }
-      });
-    },
-    /**
-     * Reset Button
-     */
-    reset() {
-      // 路徑不列入歷史紀錄
-      this.selectedColumns = [];
-    },
-    /**
-     * Cancel Button
-     */
-    cancel() {
-      // 路徑不列入歷史紀錄
-      this.$router.push({name: 'Files', replace: true});
-    },
-    /**
-     * Upload Button
-     */
-    async submit() {
-      // Post API Data
-      const fetchData = {
-        timestamp: '',
-        case_id: '',
-        name: '',
-        instance: '',
-        status: '',
-        case_attributes: []
-      };
-      // 給值
-      const haveValueData = this.selectedColumns.map((column, i) => {
-        if (column && this.uploadDetail.columns[i]) {
-          return {
-            name: column.name,
-            code: column.code,
-            color: column.color,
-            value: this.uploadDetail.columns[i]
-          }
-        }
-      });
-
-      // 取得欲更改的檔名，
-      this.uploadFileName = this.fileName;
-      // 設定第二階段上傳的 data
-      haveValueData.forEach(column => {
-        if(column !== undefined) {
-          switch (column.code) {
-            case 'timestamp':
-              fetchData.timestamp = column.value;
-              break;
-            case 'case_id':
-              fetchData.case_id = column.value;
-              break;
-            case 'name':
-              fetchData.name = column.value;
-              break;
-            case 'instance':
-              fetchData.instance = column.value;
-              break;
-            case 'status':
-              fetchData.status = column.value;
-              break;
-            case 'case_attributes':
-              fetchData.case_attributes.push(column.value);
-              break;
-            default:
-              break;
-          }
-        }
-      });
-      this.uploadConfirm(fetchData);
-    },
-  },
-  async mounted() {
-    // 只監聽第一次
-    const unwatch = this.$watch('fileName', (newValue) => {
-        if (newValue) {
-          const inputElement = document.getElementById('fileNameInput');
-          const baseWidth = 20;
-          const textWidth = this.getTextWidth(this.fileName, inputElement);
-          inputElement.style.width = baseWidth + textWidth + 'px';
-        }
-      },
-      { immediate: true }
-    );
-    this.showEdit = true;
-    if(this.uploadId) await this.filesStore.getUploadDetail();
-    this.selectedColumns = await Array.from({ length: this.uploadDetail.columns.length }, () => this.columnType[this.columnType.length - 1]); // 預設選 Not Assigned
-    unwatch();
-    this.isLoading = false;
-  },
-  beforeUnmount() {
-    // 離開頁面要刪 uploadID
-    this.uploadId = null;
-    this.uploadFileName = null;
-  },
   beforeRouteEnter(to, from, next){
     // 要有 uploadID 才能進來
     next(vm => {
-      if(vm.uploadId === null) {
+      const filesStore = useFilesStore();
+      if(filesStore.uploadId === null) {
         vm.$router.push({name: 'Files', replace: true});
         vm.$toast.default('Please upload your file.', {position: 'bottom'});
       }
@@ -327,3 +93,246 @@ export default {
   },
 }
 </script>
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { uploadFailedFirst, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
+
+const router = useRouter();
+
+// Stores
+const loadingStore = useLoadingStore();
+const filesStore = useFilesStore();
+const { isLoading } = storeToRefs(loadingStore);
+const { uploadDetail, uploadId, uploadFileName } = storeToRefs(filesStore);
+
+// Data
+const tooltipUpload = {
+  value: `1. Case ID: A unique identifier for each case.
+    2. Activity: A process step executed by either a system (automated) or humans (manual).
+    3. Activity Instance ID: A unique identifier for a single occurrence of an activity.
+    4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
+    5. Status: Activity status, such as Start or Complete.
+    6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
+    // 暫時沒有 Resource
+    // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
+ class: '!max-w-[400px] !text-[10px] !opacity-80',
+ autoHide: false,
+};
+
+const columnType = [
+  { name: 'Case ID*', code: 'case_id', color: '!text-secondary', value: '', label: 'Case ID', required: true },
+  { name: 'Timestamp*', code: 'timestamp', color: '!text-secondary', value: '', label: 'Timestamp', required: true },
+  { name: 'Status*', code: 'status', color: '!text-secondary', value: '', label: 'Status', required: true },
+  { name: 'Activity*', code: 'name', color: '!text-secondary', value: '', label: 'Activity', required: true },
+  { name: 'Activity Instance ID*', code: 'instance', color: '!text-secondary', value: '', label: 'Activity Instance ID', required: true },
+  { name: 'Case Attribute', code: 'case_attributes', color: '!text-primary', value: '', label: 'Case Attribute', required: false },
+  // { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // 現階段沒有，未來可能有
+  { name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
+];
+
+const selectedColumns = ref([]);
+const informData = ref([]);
+const repeatedData = ref([]);
+const fileName = ref(uploadFileName.value);
+const showEdit = ref(false);
+
+// Computed
+const isDisabled = computed(() => {
+  // 1. 長度一樣，強制每一個都要選
+  // 2. 不為 null undefind
+  const hasValue = !selectedColumns.value.includes(undefined);
+  const result = !(selectedColumns.value.length === uploadDetail.value?.columns.length
+    && informData.value.length === 0 && repeatedData.value.length === 0 && hasValue);
+  return result;
+});
+
+// Watch
+watch(selectedColumns, (newVal) => {
+  updateValidationData(newVal);
+}, { deep: true });
+
+// Methods
+/**
+ * Rename 離開 input 的行為
+ * @param {Event} e input 傳入的事件
+ */
+function onBlur(e) {
+  const baseWidth = 20;
+
+  if(e.target.value === '') {
+    e.target.value = uploadFileName.value;
+    const textWidth = getTextWidth(e.target.value, e.target);
+    e.target.style.width = baseWidth + textWidth + 'px';
+  }else if(e.target.value !== e.target.value.trim()) {
+    e.target.value = e.target.value.trim();
+    const textWidth = getTextWidth(e.target.value, e.target);
+    e.target.style.width = baseWidth + textWidth + 'px';
+  }
+}
+
+/**
+ * Rename 輸入 input 的行為
+ * @param {Event} e input 傳入的事件
+ */
+function onInput(e) {
+  const baseWidth = 20;
+  const textWidth = getTextWidth(e.target.value, e.target);
+
+  e.target.style.width = baseWidth + textWidth + 'px';
+}
+
+/**
+ * input 寬度隨著 value 響應式改變
+ * @param {String} text file's name
+ * @param {Event} e input 傳入的事件
+ */
+function getTextWidth(text, e) {
+  // 替換空格為不斷行的空格
+  const processedText = text.replace(/ /g, '\u00a0');
+  const hiddenSpan = document.createElement('span');
+
+  hiddenSpan.innerHTML = processedText;
+  hiddenSpan.style.font = window.getComputedStyle(e).font;
+  hiddenSpan.style.visibility = 'hidden';
+  document.body.appendChild(hiddenSpan);
+  const width = hiddenSpan.getBoundingClientRect().width;
+  document.body.removeChild(hiddenSpan);
+
+  return width;
+}
+
+/**
+ * 驗證，根據新的 selectedColumns 更新 informData 和 repeatedData
+ * @param {Array} data 已選擇的 type 的 data
+ */
+function updateValidationData(data) {
+  const nameOccurrences = {};
+  const noSortedRepeatedData = []; // 未排序的重複選擇的 data
+  const selectedData = [] // 已經選擇的 data
+
+  informData.value = []; // 尚未選擇的 data
+  repeatedData.value = []; // 重複選擇的 data
+
+  data.forEach(item => {
+    const { name, code } = item;
+
+    if(nameOccurrences[name]) {
+      // 'Not Assigned'、'Case Attribute' 不列入驗證
+      if(!code || code === 'case_attributes') return;
+      nameOccurrences[name]++;
+      // 重複的選項只出現一次
+      if(nameOccurrences[name] === 2){
+        noSortedRepeatedData.push(item)
+      }
+      // 要按照選單的順序排序
+      repeatedData.value = columnType.filter(column => noSortedRepeatedData.includes(column));
+    }else {
+      nameOccurrences[name] = 1;
+      selectedData.push(name);
+      informData.value = columnType.filter(item => item.required ? !selectedData.includes(item.name) : false);
+    }
+  });
+}
+
+/**
+ * Reset Button
+ */
+function reset() {
+  // 路徑不列入歷史紀錄
+  selectedColumns.value = [];
+}
+
+/**
+ * Cancel Button
+ */
+function cancel() {
+  // 路徑不列入歷史紀錄
+  router.push({name: 'Files', replace: true});
+}
+
+/**
+ * Upload Button
+ */
+async function submit() {
+  // Post API Data
+  const fetchData = {
+    timestamp: '',
+    case_id: '',
+    name: '',
+    instance: '',
+    status: '',
+    case_attributes: []
+  };
+  // 給值
+  const haveValueData = selectedColumns.value.map((column, i) => {
+    if (column && uploadDetail.value.columns[i]) {
+      return {
+        name: column.name,
+        code: column.code,
+        color: column.color,
+        value: uploadDetail.value.columns[i]
+      }
+    }
+  });
+
+  // 取得欲更改的檔名，
+  uploadFileName.value = fileName.value;
+  // 設定第二階段上傳的 data
+  haveValueData.forEach(column => {
+    if(column !== undefined) {
+      switch (column.code) {
+        case 'timestamp':
+          fetchData.timestamp = column.value;
+          break;
+        case 'case_id':
+          fetchData.case_id = column.value;
+          break;
+        case 'name':
+          fetchData.name = column.value;
+          break;
+        case 'instance':
+          fetchData.instance = column.value;
+          break;
+        case 'status':
+          fetchData.status = column.value;
+          break;
+        case 'case_attributes':
+          fetchData.case_attributes.push(column.value);
+          break;
+        default:
+          break;
+      }
+    }
+  });
+  uploadConfirm(fetchData);
+}
+
+// Mounted
+onMounted(async () => {
+  // 只監聯第一次
+  const unwatch = watch(fileName, (newValue) => {
+      if (newValue) {
+        const inputElement = document.getElementById('fileNameInput');
+        const baseWidth = 20;
+        const textWidth = getTextWidth(fileName.value, inputElement);
+        inputElement.style.width = baseWidth + textWidth + 'px';
+      }
+    },
+    { immediate: true }
+  );
+  showEdit.value = true;
+  if(uploadId.value) await filesStore.getUploadDetail();
+  selectedColumns.value = await Array.from({ length: uploadDetail.value.columns.length }, () => columnType[columnType.length - 1]); // 預設選 Not Assigned
+  unwatch();
+  isLoading.value = false;
+});
+
+onBeforeUnmount(() => {
+  // 離開頁面要刪 uploadID
+  uploadId.value = null;
+  uploadFileName.value = null;
+});
+</script>
diff --git a/tests/components/Login.test.js b/tests/components/Login.test.js
index 1a5667b..34e75b1 100644
--- a/tests/components/Login.test.js
+++ b/tests/components/Login.test.js
@@ -6,6 +6,14 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const mockRoute = vi.hoisted(() => ({
+  query: {},
+}));
+
+vi.mock('vue-router', () => ({
+  useRoute: () => mockRoute,
+}));
+
 import Login from '@/views/Login/Login.vue';
 import { useLoginStore } from '@/stores/login';
 
@@ -15,18 +23,16 @@ describe('Login', () => {
   beforeEach(() => {
     pinia = createPinia();
     setActivePinia(pinia);
+    mockRoute.query = {};
   });
 
   const mountLogin = (options = {}) => {
+    if (options.route?.query) {
+      Object.assign(mockRoute.query, options.route.query);
+    }
     return mount(Login, {
       global: {
         plugins: [pinia],
-        mocks: {
-          $route: {
-            query: {},
-            ...options.route,
-          },
-        },
       },
     });
   };