diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 1ad0df3..e7b3e9b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -26,9 +26,6 @@
         ></ConformanceSelectResult>
         <!-- time range -->
         <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime"></ConformanceTimeRange>
-        <!-- selectDurationData:{{selectDurationData}} <br>
-        selectDurationTime:{{selectDurationTime}} <br>
-        isSubmitDurationData:{{isSubmitDurationData}} <br> -->
       </div>
       <!-- button -->
       <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
index 5046e1a..982d4cf 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -5,8 +5,8 @@
       <p class="h2 pl-2 border-b mb-3">Sort</p>
       <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
           <div class="flex items-center w-[166px]" v-for="(act, index) in data" :key="index">
-              <RadioButton v-model="selectedRadio" :inputId="index.toString()" :name="select" :value="act" @change="actRadioData" />
-              <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
+              <RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
+              <label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
           </div>
       </div>
     </div>
@@ -26,6 +26,7 @@ export default {
         category: this.category,
         task: this.selectedRadio,
       });
+      this.$emit('selected-task', this.selectedRadio);
     }
   },
   created() {
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
index 6ea214b..76a3b61 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -12,7 +12,7 @@
     <div v-show="selectedRuleType === 'Activity sequence'">
       <p class="h2">Activity Sequence</p>
       <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeSeqRadio"/>
+        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
@@ -28,7 +28,7 @@
     <div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'">
       <p class="h2">Process Scope</p>
       <div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" />
+        <RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" @change="changeRadioProcessScope"/>
         <label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
       </div>
     </div>
@@ -36,7 +36,7 @@
     <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'">
       <p class="h2">Activity Sequence</p>
       <div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" />
+        <RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" @change="changeRadioActSeqMore"/>
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
@@ -44,7 +44,7 @@
     <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')">
       <p class="h2">Activity Sequence</p>
       <div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
-        <RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" />
+        <RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" @change="changeRadioActSeqFromTo"/>
         <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
       </div>
     </div>
@@ -107,9 +107,18 @@ export default {
       this.selectedActSeqFromTo = 'From';
       this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
     },
-    changeSeqRadio() {
+    changeRadioSeq() {
       this.$emitter.emit('isRadioSeqChange',true);
-    }
+    },
+    changeRadioProcessScope() {
+      this.$emitter.emit('isRadioProcessScopeChange', true);
+    },
+    changeRadioActSeqMore() {
+      this.$emitter.emit('isRadioActSeqMoreChange', true);
+    },
+    changeRadioActSeqFromTo() {
+      this.$emitter.emit('isRadioActSeqFromToChange', true);
+    },
   }
 }
 </script>
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index 309f397..697e8a1 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -3,48 +3,47 @@
     <!-- 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 h-full">
-      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="conformanceStart" :category="'Start'" />
-      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" />
+    <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="conformanceStart" :category="'Start'" class="w-1/2" />
+      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" class="w-1/2" />
     </div>
     <!-- actSeqDrag -->
     <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
     <!-- Activity duration -->
     <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" />
     <!-- Processing time -->
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="data" />
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="data" />
-    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
-      <ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'protimeStartRadio'" :data="cfmPtEteStartData" :category="'cfmPtEteStart'" />
+    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'protimeEndRadio'" :data="cfmPtEteEndData" :category="'cfmPtEteEnd'" />
+    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="cfmPtEteSEStartData" :category="'cfmPtEteSEStart'" @selected-task="selectStart" class="w-1/2" />
+      <ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="cfmPtEteSEEndData" :category="'cfmPtEteSEEnd'" @selected-task="selectEnd" class="w-1/2" />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="data" />
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="data" />
-    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
-      <ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="data" />
-      <ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="cfmPtPStartData" />
+    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="cfmPtPEndData" />
+    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="cfmPtPSEStartData" class="w-1/2" :category="'cfmPtPSEStart'" @selected-task="selectStart" />
+      <ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="cfmPtPSEEndData" class="w-1/2" :category="'cfmPtPSEEnd'" @selected-task="selectEnd" />
     </div>
     <!-- Waiting time -->
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="data" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="data" />
-    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
-      <ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="cfmWtEteStartData" />
+    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="cfmWtEteEndData" />
+    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="cfmWtEteSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
+      <ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="cfmWtEteSEEndData" class="w-1/2" :category="'cfmWtEteSEEnd'" @selected-task="selectEnd" />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="data" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="data" />
-    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex h-full">
-      <ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="data" />
-      <ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="cfmWtPStartData" />
+    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="cfmWtPEndData" />
+    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="cfmWtPSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
+      <ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="cfmWtPSEEndData" class="w-1/2" :category="'cfmWtEteSEEnd'" @selected-task="selectEnd" />
     </div>
     <!-- Cycle time -->
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="data" />
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="data" />
-    <div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex h-full">
-      <ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="cfmCtEteStartData" />
+    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="cfmCtEteEndData" />
+    <div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
+      <ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="cfmCtEteSEStartData" class="w-1/2" :category="'cfmCtEteSEStart'" @selected-task="selectStart" />
+      <ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="cfmCtEteSEEndData" class="w-1/2" :category="'cfmCtEteSEEnd'" @selected-task="selectEnd" />
     </div>
-
   </section>
 </template>
 <script>
@@ -60,9 +59,9 @@ export default {
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE } = storeToRefs(conformanceStore);
 
-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
   },
   props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitListSeq', 'isSubmitDurationData'],
   components: {
@@ -73,7 +72,146 @@ export default {
   data() {
     return {
       data:['到到到到到到到到到到到到到到到到到到到到到到院', '住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住住院', '開開開開開開開開開開開開開開開開開開開開開開刀', '第第第第第第第第第第一次醫囑', 'aaaaaaaaaaaaaaaa', 'bb ccc ddddd eeee', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院 到院 到院 到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院院院院院院院院院院院院院院院院院院院院院院院院院院院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院', '到院', '住院', '開刀', '第一次醫囑', '第二次醫囑', '照會', '繳費', '領藥', '出院'],
+      task: null,
+      isStartSelected: null,
+      isEndSelected: null,
     }
   },
+  computed: {
+    // Processing time
+    cfmPtEteStartData: function() {
+      return this.cfmPtEteStart.map(i => i.task);
+    },
+    cfmPtEteEndData: function() {
+      return this.cfmPtEteEnd.map(i => i.task);
+    },
+    cfmPtEteSEStartData: function() {
+      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'end', this.task) : this.setTaskData(this.cfmPtEteSE, 'start');
+    },
+    cfmPtEteSEEndData: function() {
+      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() {
+      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtPSE, 'end', this.task) : this.setTaskData(this.cfmPtPSE, 'start');
+    },
+    cfmPtPSEEndData: function() {
+      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() {
+      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'end', this.task) : this.setTaskData(this.cfmWtEteSE, 'start');
+    },
+    cfmWtEteSEEndData: function() {
+      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() {
+      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtPSE, 'end', this.task) : this.setTaskData(this.cfmWtPSE, 'start');
+    },
+    cfmWtPSEEndData: function() {
+      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() {
+      return this.isEndSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'end', this.task) : this.setTaskData(this.cfmCtEteSE, 'start');
+    },
+    cfmCtEteSEEndData: function() {
+      return this.isStartSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'start', this.task) : this.setTaskData(this.cfmCtEteSE, 'end');
+    },
+  },
+  methods: {
+    /**
+     * 設定 start and end 的 Radio Data
+     * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
+     * @param {string} category 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
+     * @param {string} category start | end
+     * @param {string} task task
+     * @returns {array}
+     */
+    setStartAndEndData(data, category, task) {
+      let oppositeCategory = '';
+      category === 'start' ? oppositeCategory = 'end' : oppositeCategory = 'start';
+      let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]);
+      newData = [...new Set(newData)];
+      return newData;
+    },
+    selectStart(e) {
+      if(this.isStartSelected === null || this.isStartSelected === true){
+        this.isStartSelected = true;
+        this.isEndSelected = false;
+        this.task = e;
+      };
+    },
+    selectEnd(e) {
+      if(this.isEndSelected === null || this.isEndSelected === true){
+        this.isEndSelected = true;
+        this.isStartSelected = false;
+        this.task = e;
+      }
+    },
+  },
+  created() {
+    this.$emitter.on('isRadioChange', (data) => {
+      if(data) {
+        this.task = null;
+        this.isStartSelected = null;
+        this.isEndSelected = null;
+      };
+    });
+    this.$emitter.on('isRadioProcessScopeChange', (data) => {
+      if(data) {
+        this.task = null;
+        this.isStartSelected = null;
+        this.isEndSelected = null;
+      };
+    });
+    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
+      if(data) {
+        this.task = null;
+        this.isStartSelected = null;
+        this.isEndSelected = null;
+      };
+    });
+    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
+      if(data) {
+        this.task = null;
+        this.isStartSelected = null;
+        this.isEndSelected = null;
+      };
+    });
+  }
 }
 </script>
diff --git a/src/stores/conformance.js b/src/stores/conformance.js
index 13cda5c..bf03184 100644
--- a/src/stores/conformance.js
+++ b/src/stores/conformance.js
@@ -20,6 +20,9 @@ export default defineStore('conformanceStore', {
     allConformanceTask: [],
     allConformanceStart: [],
     allConformanceEnd: [],
+    allProcessingTime: {},
+    allWaitingTime: {},
+    allCycleTime: {},
     allConformanceTempReportData: null,
     allIssueTraces: null,
     allTaskSeq: null,
@@ -33,7 +36,6 @@ export default defineStore('conformanceStore', {
     selectedProcessScope: 'End to end', // radio
     selectedActSeqMore: 'All', // radio
     selectedActSeqFromTo: 'From', // radio
-    // selectConformanceTask: null, // select task
     infinite404: null,
   }),
   getters: {
@@ -49,6 +51,60 @@ export default defineStore('conformanceStore', {
     conformanceEnd: state => {
       return state.allConformanceEnd;
     },
+    cfmPtEteWhole: state => {
+      return state.allProcessingTime.end_to_end.whole;
+    },
+    cfmPtEteStart: state => {
+      return state.allProcessingTime.end_to_end.starts_with;
+    },
+    cfmPtEteEnd: state => {
+      return state.allProcessingTime.end_to_end.ends_with;
+    },
+    cfmPtEteSE: state => {
+      return state.allProcessingTime.end_to_end.start_end;
+    },
+    cfmPtPStart: state => {
+      return state.allProcessingTime.partial.starts_with;
+    },
+    cfmPtPEnd: state => {
+      return state.allProcessingTime.partial.ends_with;
+    },
+    cfmPtPSE: state => {
+      return state.allProcessingTime.partial.start_end;
+    },
+    cfmWtEteWhole: state => {
+      return state.allWaitingTime.end_to_end.whole;
+    },
+    cfmWtEteStart: state => {
+      return state.allWaitingTime.end_to_end.starts_with;
+    },
+    cfmWtEteEnd: state => {
+      return state.allWaitingTime.end_to_end.ends_with;
+    },
+    cfmWtEteSE: state => {
+      return state.allWaitingTime.end_to_end.start_end;
+    },
+    cfmWtPStart: state => {
+      return state.allWaitingTime.partial.starts_with;
+    },
+    cfmWtPEnd: state => {
+      return state.allWaitingTime.partial.ends_with;
+    },
+    cfmWtPSE: state => {
+      return state.allWaitingTime.partial.start_end;
+    },
+    cfmCtEteWhole: state => {
+      return state.allCycleTime.end_to_end.whole;
+    },
+    cfmCtEteStart: state => {
+      return state.allCycleTime.end_to_end.starts_with;
+    },
+    cfmCtEteEnd: state => {
+      return state.allCycleTime.end_to_end.ends_with;
+    },
+    cfmCtEteSE: state => {
+      return state.allCycleTime.end_to_end.start_end;
+    },
     conformanceTempReportData: state => {
       return state.allConformanceTempReportData;
     },
@@ -124,6 +180,9 @@ export default defineStore('conformanceStore', {
         this.allConformanceTask = response.data.tasks;
         this.allConformanceStart = response.data.sources;
         this.allConformanceEnd = response.data.sinks;
+        this.allProcessingTime = response.data.processing_time;
+        this.allWaitingTime = response.data.waiting_time;
+        this.allCycleTime = response.data.cycle_time;
       } catch(error) {
         await delay();
         loading.isLoading = true;