Conformance: processing time, waiting time, cycle time, showbox list done.

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">

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" />
+              <RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
-              <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
+              <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() {

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>

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">
+    <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'" />
+      <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'" />
+      <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 === '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="data" />
+    <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 h-full">
+    <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="data" />
+      <ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="cfmPtEteSEStartData" :category="'cfmPtEteSEStart'" @selected-task="selectStart" class="w-1/2" />
-      <ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="data" />
+      <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 === 'From'" :title="'From'" :select="'protimeFromRadio'" :data="cfmPtPStartData" />
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'protimeToRadio'" :data="data" />
+    <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 h-full">
+    <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="data" />
+      <ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="cfmPtPSEStartData" class="w-1/2" :category="'cfmPtPSEStart'" @selected-task="selectStart" />
-      <ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="data" />
+      <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 === 'Start'" :title="'Start'" :select="'waittimeStartRadio'" :data="cfmWtEteStartData" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'waittimeEndRadio'" :data="data" />
+    <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 h-full">
+    <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="data" />
+      <ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="cfmWtEteSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
-      <ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="data" />
+      <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 === 'From'" :title="'From'" :select="'waittimeFromRadio'" :data="cfmWtPStartData" />
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="'waittimeToRadio'" :data="data" />
+    <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 h-full">
+    <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="data" />
+      <ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="cfmWtPSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" @selected-task="selectStart" />
-      <ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="data" />
+      <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 === 'Start'" :title="'Start'" :select="'cyctimeStartRadio'" :data="cfmCtEteStartData" />
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="'cyctimeEndRadio'" :data="data" />
+    <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 h-full">
+    <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="data" />
+      <ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="cfmCtEteSEStartData" class="w-1/2" :category="'cfmCtEteSEStart'" @selected-task="selectStart" />
-      <ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="data" />
+      <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>

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;