Conformance: add ConformanceTimeRange.vue

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -40,7 +40,11 @@
         :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
         ></ConformanceSelectResult>
         <!-- time range -->
-        <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" ></ConformanceTimeRange>
+        <!-- <ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'" :time="selectDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" ></ConformanceTimeRange> -->
+        <ConformanceTimeRange
+        @min-total-seconds="minTotalSeconds"
+        @max-total-seconds="maxTotalSeconds"
+        :isSubmitDurationTime="isSubmitDurationTime" ></ConformanceTimeRange>
       </div>
       <!-- button -->
       <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
@@ -166,30 +170,30 @@ export default {
      * @param {string} taskTwo end
      * @returns {object} {min:12, max:345}
      */
-     getDurationTime(data, category, task, taskTwo) {
+    //  getDurationTime(data, category, task, taskTwo) {
-      switch (category) {
+    //   switch (category) {
-        case 'act':
+    //     case 'act':
-          data.forEach(i => {
+    //       data.forEach(i => {
-            if(i.label === task) this.selectDurationTime = i.duration;
+    //         if(i.label === task) this.selectDurationTime = i.duration;
-          });
+    //       });
-          break;
+    //       break;
-        case 'single':
+    //     case 'single':
-          data.forEach(i => {
+    //       data.forEach(i => {
-            if(i.task === task) this.selectDurationTime = i.time;
+    //         if(i.task === task) this.selectDurationTime = i.time;
-          });
+    //       });
-          break;
+    //       break;
-        case 'double':
+    //     case 'double':
-          data.forEach(i => {
+    //       data.forEach(i => {
-            if(i.start === task && i.end === taskTwo) this.selectDurationTime = i.time;
+    //         if(i.start === task && i.end === taskTwo) this.selectDurationTime = i.time;
-          });
+    //       });
-          break;
+    //       break;
-        case 'all':
+    //     case 'all':
-          this.selectDurationTime = data;
+    //       this.selectDurationTime = data;
-          break
+    //       break
-        default:
+    //     default:
-          break;
+    //       break;
-      };
+    //   };
-    },
+    // },
     /**
      * get min total seconds
      * @param {Number} e
@@ -287,7 +291,7 @@ export default {
     async submit() {
       let data;
 
-      this.selectDurationTime = {
+      this.selectDurationTime = await {
         min: this.selectTimeRangeMin,
         max: this.selectTimeRangeMax
       };
@@ -702,91 +706,91 @@ export default {
         // Processing time
         case 'cfmPtEteStart':
           this.selectCfmPtEteStart = data.task;
-          this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
+          // this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
           break;
         case 'cfmPtEteEnd':
           this.selectCfmPtEteEnd = data.task;
-          this.getDurationTime(this.cfmPtEteEnd, 'single', data.task);
+          // this.getDurationTime(this.cfmPtEteEnd, 'single', data.task);
           break;
         case 'cfmPtEteSEStart':
           this.selectCfmPtEteSEStart = data.task;
-          if(this.selectCfmPtEteSEEnd)this.getDurationTime(this.cfmPtEteSE, 'double', data.task, this.selectCfmPtEteSEEnd);
+          // if(this.selectCfmPtEteSEEnd)this.getDurationTime(this.cfmPtEteSE, 'double', data.task, this.selectCfmPtEteSEEnd);
           break;
         case 'cfmPtEteSEEnd':
           this.selectCfmPtEteSEEnd = data.task;
-          if(this.selectCfmPtEteSEStart)this.getDurationTime(this.cfmPtEteSE, 'double', this.selectCfmPtEteSEStart, data.task);
+          // if(this.selectCfmPtEteSEStart)this.getDurationTime(this.cfmPtEteSE, 'double', this.selectCfmPtEteSEStart, data.task);
           break;
         case 'cfmPtPStart':
           this.selectCfmPtPStart = data.task;
-          this.getDurationTime(this.cfmPtPStart, 'single', data.task);
+          // this.getDurationTime(this.cfmPtPStart, 'single', data.task);
           break;
         case 'cfmPtPEnd':
           this.selectCfmPtPEnd = data.task;
-          this.getDurationTime(this.cfmPtPEnd, 'single', data.task);
+          // this.getDurationTime(this.cfmPtPEnd, 'single', data.task);
           break;
         case 'cfmPtPSEStart':
           this.selectCfmPtPSEStart = data.task;
-          if(this.selectCfmPtPSEEnd)this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
+          // if(this.selectCfmPtPSEEnd)this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
           break;
         case 'cfmPtPSEEnd':
           this.selectCfmPtPSEEnd = data.task;
-          if(this.selectCfmPtPSEStart)this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
+          // if(this.selectCfmPtPSEStart)this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
           break;
         // Waiting time
         case 'cfmWtEteStart':
           this.selectCfmWtEteStart = data.task;
-          this.getDurationTime(this.cfmWtEteStart, 'single', data.task);
+          // this.getDurationTime(this.cfmWtEteStart, 'single', data.task);
           break;
         case 'cfmWtEteEnd':
           this.selectCfmWtEteEnd = data.task;
-          this.getDurationTime(this.cfmWtEteEnd, 'single', data.task);
+          // this.getDurationTime(this.cfmWtEteEnd, 'single', data.task);
           break;
         case 'cfmWtEteSEStart':
           this.selectCfmWtEteSEStart = data.task;
-          if(this.selectCfmWtEteSEEnd)this.getDurationTime(this.cfmWtEteSE, 'double', data.task, this.selectCfmWtEteSEEnd);
+          // if(this.selectCfmWtEteSEEnd)this.getDurationTime(this.cfmWtEteSE, 'double', data.task, this.selectCfmWtEteSEEnd);
           break;
         case 'cfmWtEteSEEnd':
           this.selectCfmWtEteSEEnd = data.task;
-          if(this.selectCfmWtEteSEStart)this.getDurationTime(this.cfmWtEteSE, 'double', this.selectCfmWtEteSEStart, data.task);
+          // if(this.selectCfmWtEteSEStart)this.getDurationTime(this.cfmWtEteSE, 'double', this.selectCfmWtEteSEStart, data.task);
           break;
         case 'cfmWtPStart':
           this.selectCfmWtPStart = data.task;
-          this.getDurationTime(this.cfmWtPStart, 'single', data.task);
+          // this.getDurationTime(this.cfmWtPStart, 'single', data.task);
           break;
         case 'cfmWtPEnd':
           this.selectCfmWtPEnd = data.task;
-          this.getDurationTime(this.cfmWtPEnd, 'single', data.task);
+          // this.getDurationTime(this.cfmWtPEnd, 'single', data.task);
           break;
         case 'cfmWtPSEStart':
           this.selectCfmWtPSEStart = data.task;
-          if(this.selectCfmWtPSEEnd)this.getDurationTime(this.cfmWtPSE, 'double', data.task, this.selectCfmWtPSEEnd);
+          // if(this.selectCfmWtPSEEnd)this.getDurationTime(this.cfmWtPSE, 'double', data.task, this.selectCfmWtPSEEnd);
           break;
         case 'cfmWtPSEEnd':
           this.selectCfmWtPSEEnd = data.task;
-          if(this.selectCfmWtPSEStart)this.getDurationTime(this.cfmWtPSE, 'double', this.selectCfmWtPSEStart, data.task);
+          // if(this.selectCfmWtPSEStart)this.getDurationTime(this.cfmWtPSE, 'double', this.selectCfmWtPSEStart, data.task);
           break;
         // Cycle time
         case 'cfmCtEteStart':
           this.selectCfmCtEteStart = data.task;
-          this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
+          // this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
           break;
         case 'cfmCtEteEnd':
           this.selectCfmCtEteEnd = data.task;
-          this.getDurationTime(this.cfmCtEteEnd, 'single', data.task);
+          // this.getDurationTime(this.cfmCtEteEnd, 'single', data.task);
           break;
         case 'cfmCtEteSEStart':
           this.selectCfmCtEteSEStart = data.task;
-          if(this.selectCfmCtEteSEEnd)this.getDurationTime(this.cfmCtEteSE, 'double', data.task, this.selectCfmCtEteSEEnd);
+          // if(this.selectCfmCtEteSEEnd)this.getDurationTime(this.cfmCtEteSE, 'double', data.task, this.selectCfmCtEteSEEnd);
           break;
         case 'cfmCtEteSEEnd':
           this.selectCfmCtEteSEEnd = data.task;
-          if(this.selectCfmCtEteSEStart)this.getDurationTime(this.cfmCtEteSE, 'double', this.selectCfmCtEteSEStart, data.task);
+          // if(this.selectCfmCtEteSEStart)this.getDurationTime(this.cfmCtEteSE, 'double', this.selectCfmCtEteSEStart, data.task);
           break;
         default:
           if(this.selectedRuleType === 'Activity sequence') this.listSequence = [data.task];
           else if(this.selectedRuleType === 'Activity duration') {
             this.selectDurationData = [data.task];
-            this.getDurationTime(this.conformanceAllTasks, 'act', data.task);
+            // this.getDurationTime(this.conformanceAllTasks, 'act', data.task);
           };
           break;
       };
@@ -800,19 +804,19 @@ export default {
         this.selectTimeReset();
         this.selectDurationTime = { min: 0, max: 0};
       };
-      switch (this.selectedRuleType) {
+      // switch (this.selectedRuleType) {
-        case 'Processing time':
+      //   case 'Processing time':
-          this.getDurationTime(this.cfmPtEteWhole, 'all');
+      //     this.getDurationTime(this.cfmPtEteWhole, 'all');
-          break;
+      //     break;
-        case 'Waiting time':
+      //   case 'Waiting time':
-          this.getDurationTime(this.cfmWtEteWhole, 'all');
+      //     this.getDurationTime(this.cfmWtEteWhole, 'all');
-          break;
+      //     break;
-        case 'Cycle time':
+      //   case 'Cycle time':
-          this.getDurationTime(this.cfmCtEteWhole, 'all');
+      //     this.getDurationTime(this.cfmCtEteWhole, 'all');
-          break;
+      //     break;
-        default:
+      //   default:
-          break;
+      //     break;
-      };
+      // };
     });
     this.$emitter.on('isRadioSeqChange', (data) => {
       if(data) {
@@ -827,23 +831,7 @@ export default {
     });
     this.$emitter.on('isRadioActSeqMoreChange', (data) => {
       if(data) {
-        if(this.selectedActSeqMore === 'All') {
+        if(this.selectedActSeqMore !== 'All') this.selectDurationTime = { min: 0, max: 0};
-          switch (this.selectedRuleType) {
-          case 'Processing time':
-            this.getDurationTime(this.cfmPtEteWhole, 'all');
-            break;
-          case 'Waiting time':
-            this.getDurationTime(this.cfmWtEteWhole, 'all');
-            break;
-          case 'Cycle time':
-            this.getDurationTime(this.cfmCtEteWhole, 'all');
-            break;
-          default:
-            break;
-        };
-        }else{
-          this.selectDurationTime = { min: 0, max: 0};
-        };
       };
     });
     this.$emitter.on('isRadioActSeqFromToChange', (data) => {

src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue

@@ -200,7 +200,8 @@ export default {
     this.$emitter.on('actListData', (data) => {
       this.containstTasksData = data;
     });
-    this.$emitter.on('actRadioData', (data) => {
+    this.$emitter.on('actRadioData', (newData) => {
+      let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
       switch (data.category) {
         // Activity sequence
         case 'cfmSeqStart':

src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue

@@ -10,7 +10,7 @@
     <!-- actSeqDrag -->
     <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && (selectedMode === 'Directly follows' || selectedMode === 'Eventually follows')" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
     <!-- Activity duration -->
-    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" />
+    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'"/>
     <!-- Processing time -->
     <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task" :data="cfmPtEteStartData" :category="'cfmPtEteStart'" />
     <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData" :category="'cfmPtEteEnd'" />

src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue

@@ -2,74 +2,90 @@
 <div class="mt-2">
   <p class="h2">Time Range</p>
   <div class=" text-sm leading-normal">
-    <div class="flex justify-between items-center">
+    <!-- Activity duration -->
-      <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
+    <TimeRangeDuration
-        <span>~</span>
+    v-if="selectedRuleType === 'Activity duration'" :time="timeDuration" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
-      <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
+     <!-- Processing time -->
-    </div>
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'All'" :time="timeCfmPtEteAll" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmPtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmPtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmPtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmPtPStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmPtPEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmPtPSE" :select="isSubmitDurationTime" @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="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmWtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmWtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmWtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :time="timeCfmWtPStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :time="timeCfmWtPEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :time="timeCfmWtPSE" :select="isSubmitDurationTime" @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="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :time="timeCfmCtEteStart" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :time="timeCfmCtEteEnd" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
+     <TimeRangeDuration v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :time="timeCfmCtEteSE" :select="isSubmitDurationTime" @min-total-seconds="minTotalSeconds" @max-total-seconds="maxTotalSeconds" />
   </div>
 </div>
 </template>
 <script>
-import Durationjs from '@/components/durationjs.vue';
+import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
+import { storeToRefs } from 'pinia';
+import ConformanceStore from '@/stores/conformance.js';
 
 export default {
-  props: ['time'],
+  setup() {
+    const conformanceStore = ConformanceStore();
+    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'],
   data() {
     return {
-      timeData: {
+      timeDuration: null, // Activity duration
-        min: 0,
+      timeCfmPtEteAll: null, // Processing time
-        max: 0,
+      timeCfmPtEteStart: null,
-      },
+      timeCfmPtEteEnd: null,
-      timeRangeMin: 0,
+      timeCfmPtEteSE: null,
-      timeRangeMax: 0,
+      timeCfmPtPStart: null,
-      minVuemin: 0,
+      timeCfmPtPEnd: null,
-      minVuemax: 0,
+      timeCfmPtPSE: null,
-      maxVuemin: 0,
+      timeCfmWtEteAll: null, // Waiting time
-      maxVuemax: 0,
+      timeCfmWtEteStart: null,
-      updateMax: null,
+      timeCfmWtEteEnd: null,
+      timeCfmWtEteSE: null,
+      timeCfmWtPStart: null,
+      timeCfmWtPEnd: null,
+      timeCfmWtPSE: null,
+      timeCfmCtEteAll: null, // Cycle time
+      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,
+
+      timeCfmPtEteSE:null
     }
   },
   components: {
-    Durationjs,
+    TimeRangeDuration,
-  },
-  watch: {
-    time: {
-      handler: function(newValue, oldValue) {
-        if(newValue == null) {
-          this.timeData = {
-            min: 0,
-            max: 0
-          };
-        }else if(newValue != null) {
-          this.timeData = {
-            min: newValue.min,
-            max: 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.$emit('min-total-seconds', e);
     },
     /**
@@ -77,10 +93,183 @@ export default {
      * @param {Number} e
      */
     maxTotalSeconds(e) {
-      this.timeRangeMax = e;
-      this.updateMax = e;
       this.$emit('max-total-seconds', e);
     },
+    /**
+     * get Time Range(duration)
+     * @param {array} data API data
+     * @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
+    },
+  },
+  created() {
+    this.$emitter.on('actRadioData', (data) => {
+      switch (data.category) {
+        // Activity duration
+        case 'cfmDur':
+          this.timeDuration = this.getDurationTime(this.conformanceAllTasks, 'act', data.task);
+          break;
+        // Processing time
+        case 'cfmPtEteStart':
+          this.timeCfmPtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
+          break;
+        case 'cfmPtEteEnd':
+          this.timeCfmPtEteEnd = this.getDurationTime(this.cfmPtEteEnd, 'single', data.task);
+          break;
+        case 'cfmPtEteSEStart':
+          this.selectCfmPtEteSEStart = data.task;
+          if(this.selectCfmPtEteSEEnd) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', data.task, this.selectCfmPtEteSEEnd);
+          break;
+        case 'cfmPtEteSEEnd':
+          this.selectCfmPtEteSEEnd = data.task;
+          if(this.selectCfmPtEteSEStart) this.timeCfmPtEteSE = this.getDurationTime(this.cfmPtEteSE, 'double', this.selectCfmPtEteSEStart, data.task);
+          break;
+        case 'cfmPtPStart':
+          this.timeCfmPtPStart = this.getDurationTime(this.cfmPtPStart, 'single', data.task);
+          break;
+        case 'cfmPtPEnd':
+          this.timeCfmPtPEnd = this.getDurationTime(this.cfmPtPEnd, 'single', data.task);
+          break;
+        case 'cfmPtPSEStart':
+          this.selectCfmPtPSEStart = data.task;
+          if(this.selectCfmPtPSEEnd) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', data.task, this.selectCfmPtPSEEnd);
+          break;
+        case 'cfmPtPSEEnd':
+          this.selectCfmPtPSEEnd = data.task;
+          if(this.selectCfmPtPSEStart) this.timeCfmPtPSE = this.getDurationTime(this.cfmPtPSE, 'double', this.selectCfmPtPSEStart, data.task);
+          break;
+        // Waiting time
+        case 'cfmWtEteStart':
+          this.timeCfmWtEteStart = this.getDurationTime(this.cfmWtEteStart, 'single', data.task);
+          break;
+        case 'cfmWtEteEnd':
+          this.timeCfmWtEteEnd = this.getDurationTime(this.cfmWtEteEnd, 'single', data.task);
+          break;
+        case 'cfmWtEteSEStart':
+          this.selectCfmWtEteSEStart = data.task;
+          if(this.selectCfmWtEteSEEnd) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', data.task, this.selectCfmWtEteSEEnd);
+          break;
+        case 'cfmWtEteSEEnd':
+          this.selectCfmWtEteSEEnd = data.task;
+          if(this.selectCfmWtEteSEStart) this.timeCfmWtEteSE = this.getDurationTime(this.cfmWtEteSE, 'double', this.selectCfmWtEteSEStart, data.task);
+          break;
+        case 'cfmWtPStart':
+          this.timeCfmWtPStart = this.getDurationTime(this.cfmWtPStart, 'single', data.task);
+          break;
+        case 'cfmWtPEnd':
+          this.timeCfmWtPEnd = this.getDurationTime(this.cfmWtPEnd, 'single', data.task);
+          break;
+        case 'cfmWtPSEStart':
+          this.selectCfmWtPSEStart = data.task;
+          if(this.selectCfmWtPSEEnd) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', data.task, this.selectCfmWtPSEEnd);
+          break;
+        case 'cfmWtPSEEnd':
+          this.selectCfmWtPSEEnd = data.task;
+          if(this.selectCfmWtPSEStart) this.timeCfmWtPSE = this.getDurationTime(this.cfmWtPSE, 'double', this.selectCfmWtPSEStart, data.task);
+          break;
+        // Cycle time
+        case 'cfmCtEteStart':
+          this.timeCfmCtEteStart = this.getDurationTime(this.cfmPtEteStart, 'single', data.task);
+          break;
+        case 'cfmCtEteEnd':
+          this.timeCfmCtEteEnd = this.getDurationTime(this.cfmCtEteEnd, 'single', data.task);
+          break;
+        case 'cfmCtEteSEStart':
+          this.selectCfmCtEteSEStart = data.task;
+          if(this.selectCfmCtEteSEEnd) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', data.task, this.selectCfmCtEteSEEnd);
+          break;
+        case 'cfmCtEteSEEnd':
+          this.selectCfmCtEteSEEnd = data.task;
+          if(this.selectCfmCtEteSEStart) this.timeCfmCtEteSE = this.getDurationTime(this.cfmCtEteSE, 'double', this.selectCfmCtEteSEStart, data.task);
+          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');
+            break;
+          case 'Waiting time':
+            this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
+            break;
+          case 'Cycle time':
+            this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
+            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');
+              break;
+            case 'Waiting time':
+              this.timeCfmWtEteAll = this.getDurationTime(this.cfmWtEteWhole, 'all');
+              break;
+            case 'Cycle time':
+              this.timeCfmCtEteAll = this.getDurationTime(this.cfmCtEteWhole, 'all');
+              break;
+            default:
+              break;
+          };
+        }else this.reset();
+      };
+    });
+    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
+      if(data) {
+        this.reset();
+      };
+    });
   },
 }
 </script>

src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex justify-between items-center">
+    <Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
+      <span>~</span>
+    <Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
+  </div>
+</template>
+<script>
+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,
+    }
+  },
+  components: {
+    Durationjs,
+  },
+  watch: {
+    time: {
+      handler: function(newValue, oldValue) {
+        if(newValue == null) {
+          this.timeData = {
+            min: 0,
+            max: 0
+          };
+        }else if(newValue != null) {
+          this.timeData = {
+            min: newValue.min,
+            max: 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.$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){
+      this.timeData = this.select;
+      this.setTimeValue();
+    }
+  }
+}
+</script>