Conformance: processing time, waiting time, cycle time, add show activity selector not done.

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -146,30 +146,44 @@ export default {
      * select Time Reset
      */
     selectTimeReset() {
+      // 不包含 this.selectDurationTime
       this.selectConformanceTask = null; // Have activity
-      selectConformanceStartAndEnd = null; // Activity Sequence
+      this.selectConformanceStartAndEnd = null; // Activity Sequence
+      this.selectConformanceStart = null;
+      this.selectConformanceEnd = null;
+      this.selectConformanceFrom = null;
+      this.selectConformanceTo = null;
       this.listSeq = [];
       this.selectDurationData = null; // Activity duration
-      selectCfmPtEteStart = null; // Processing time
+      this.selectCfmPtEteStart = null; // Processing time
-      selectCfmPtEteEnd = null;
+      this.selectCfmPtEteEnd = null;
-      selectCfmPtEteSEStart = null;
+      this.selectCfmPtEteSEStart = null;
-      selectCfmPtEteSEEnd = null;
+      this.selectCfmPtEteSEEnd = null;
-      selectCfmPtPStart = null;
+      this.selectCfmPtPStart = null;
-      selectCfmPtPEnd = null;
+      this.selectCfmPtPEnd = null;
-      selectCfmPtPSEStart = null;
+      this.selectCfmPtPSEStart = null;
-      selectCfmPtPSEEnd = null;
+      this.selectCfmPtPSEEnd = null;
-      selectCfmWtEteStart = null; // Waiting time
+      this.selectCfmWtEteStart = null; // Waiting time
-      selectCfmWtEteEnd = null;
+      this.selectCfmWtEteEnd = null;
-      selectCfmWtEteSEStart = null;
+      this.selectCfmWtEteSEStart = null;
-      selectCfmWtEteSEEnd = null;
+      this.selectCfmWtEteSEEnd = null;
-      selectCfmWtPStart = null;
+      this.selectCfmWtPStart = null;
-      selectCfmWtPEnd = null;
+      this.selectCfmWtPEnd = null;
-      selectCfmWtPSEStart = null;
+      this.selectCfmWtPSEStart = null;
-      selectCfmWtPSEEnd = null;
+      this.selectCfmWtPSEEnd = null;
-      selectCfmCtEteStart = null; // Cycle time
+      this.selectCfmCtEteStart = null; // Cycle time
-      selectCfmCtEteEnd = null;
+      this.selectCfmCtEteEnd = null;
-      selectCfmCtEteSEStart = null;
+      this.selectCfmCtEteSEStart = null;
-      selectCfmCtEteSEEnd = null;
+      this.selectCfmCtEteSEEnd = null;
+    },
+    /**
+     * is submit select Reset
+     */
+    isSubmitReset() {
+      this.isSubmitTask = null;
+      this.isSubmitStartAndEnd = null;
+      this.isSubmitListSeq = [];
+      this.isSubmitDurationData = null;
     },
     /**
      * @param {boolean} massage true | false 清空選單選項, 選擇的結果
@@ -224,11 +238,10 @@ export default {
               type: 'contains-tasks',
               tasks: this.selectConformanceTask,
             };
-            this.isSubmitTask = this.selectConformanceTask;
             // 其他 isSubmitData 為 null
-            this.isSubmitStartAndEnd = null;
+            this.isSubmitReset();
-            this.isSubmitListSeq = [];
+            this.isSubmitTask = this.selectConformanceTask;
-            this.isSubmitDurationData = null;
+
           }
           break;
         case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
@@ -241,14 +254,11 @@ export default {
                   starts_with: this.selectConformanceStartAndEnd[0],
                   ends_with: this.selectConformanceStartAndEnd[1],
                 };
+                this.isSubmitReset();
                 this.isSubmitStartAndEnd = [
                   {category: 'Start', task: this.selectConformanceStartAndEnd[0]},
                   {category: 'End', task: this.selectConformanceStartAndEnd[1]},
                 ];
-                // 其他 isSubmitData 為 null
-                this.isSubmitTask = null;
-                this.isSubmitListSeq = [];
-                this.isSubmitDurationData = null;
               };
               break;
             case 'Sequence': // Activity Sequence 選 Sequence 的行為
@@ -258,10 +268,8 @@ export default {
                   type: isMode,
                   task_seq: this.listSeq,
                 };
+                this.isSubmitReset();
                 this.isSubmitListSeq = this.listSeq;
-                this.isSubmitTask = null;
-                this.isSubmitStartAndEnd = null;
-                this.isSubmitDurationData = null;
               };
             default:
               break;
@@ -276,11 +284,8 @@ export default {
               min: this.selectDurationTime.min,
               max: this.selectDurationTime.max,
             };
+            this.isSubmitReset();
             this.isSubmitDurationData = this.selectDurationData;
-            // 其他 isSubmitData 為 null
-            this.isSubmitTask = null;
-            this.isSubmitStartAndEnd = null;
-            this.isSubmitListSeq = [];
           };
           break;
         case 'Processing time': // Rule Type 選 Processing time 的行為
@@ -295,7 +300,6 @@ export default {
                   };
                   break;
                 case 'Start':
-                this.selectCfmPtEteStart = null
                   if(!this.selectCfmPtEteStart) return this.$toast.error('Not selected.');
                   else data = {
                     task: this.selectCfmPtEteStart,
@@ -622,14 +626,7 @@ export default {
     // Radio 切換時，資料要清空
     this.$emitter.on('isRadioChange', (data) => {
       if(data) {
-        this.selectConformanceTask = null;
+        this.selectTimeReset();
-        this.selectConformanceStartAndEnd = null;
-        this.selectConformanceStart = null;
-        this.selectConformanceEnd = null;
-        this.selectConformanceFrom = null;
-        this.selectConformanceTo = null;
-        this.listSeq = [];
-        this.selectDurationData = null;
         this.selectDurationTime = null;
       };
       switch (this.selectedRuleType) {
@@ -662,11 +659,9 @@ export default {
         if(this.selectedActSeqMore === 'All') {
           switch (this.selectedRuleType) {
           case 'Processing time':
-            console.log(this.cfmPtEteWhole);
             this.getDurationTime(this.cfmPtEteWhole, 'all');
             break;
           case 'Waiting time':
-          console.log(this.cfmWtEteWhole);
             this.getDurationTime(this.cfmWtEteWhole, 'all');
             break;
           case 'Cycle time':

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

@@ -8,23 +8,23 @@
     <!-- Activity duration -->
     <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
     <!-- Processing time -->
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE"></ResultDot>
     <!-- Waiting time -->
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE"></ResultDot>
     <!-- Cycle time -->
-    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd"></ResultDot>
-    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
+    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE"></ResultDot>
 
   </div>
 </template>
@@ -58,8 +58,81 @@ export default {
       to: null,
       listSequence: null,
       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: {
+    selectCfmPtEteSE: function() {
+      let 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() {
+      let 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() {
+      let 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() {
+      let 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() {
+      let 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: {
     /**
      * set Time Result Data
@@ -83,6 +156,40 @@ export default {
       });
       return result;
     },
+    /**
+     * All reset
+     */
+    reset() {
+      this.containstTasksData = null;
+      this.startEndData = null;
+      this.start = null;
+      this.end = null;
+      this.from = null;
+      this.to = null;
+      this.listSequence = null;
+      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) => {
@@ -102,6 +209,89 @@ export default {
         case 'To':
           this.to = [data];
           break;
+        // Processing time
+        case 'cfmPtEteStart':
+          data.category = 'Start';
+          this.selectCfmPtEteStart = [data];
+          break;
+        case 'cfmPtEteEnd':
+          data.category = 'End';
+          this.selectCfmPtEteEnd = [data];
+          break;
+        case 'cfmPtEteSEStart':
+          data.category = 'Start';
+          this.selectCfmPtEteSEStart = data;
+          break;
+        case 'cfmPtEteSEEnd':
+          data.category = 'End';
+          this.selectCfmPtEteSEEnd = data;
+          break;
+        case 'cfmPtPStart':
+          data.category = 'From';
+          this.selectCfmPtPStart = [data];
+          break;
+        case 'cfmPtPEnd':
+          data.category = 'To';
+          this.selectCfmPtPEnd = [data];
+          break;
+        case 'cfmPtPSEStart':
+          data.category = 'From';
+          this.selectCfmPtPSEStart = data;
+          break;
+        case 'cfmPtPSEEnd':
+          data.category = 'To';
+          this.selectCfmPtPSEEnd = data;
+          break;
+        // Waiting time
+        case 'cfmWtEteStart':
+          data.category = 'Start';
+          this.selectCfmWtEteStart = [data];
+          break;
+        case 'cfmWtEteEnd':
+          data.category = 'End';
+          this.selectCfmWtEteEnd = [data];
+          break;
+        case 'cfmWtEteSEStart':
+          data.category = 'Start';
+          this.selectCfmWtEteSEStart = data;
+          break;
+        case 'cfmWtEteSEEnd':
+          data.category = 'End';
+          this.selectCfmWtEteSEEnd = data;
+          break;
+        case 'cfmWtPStart':
+          data.category = 'From';
+          this.selectCfmWtPStart = [data];
+          break;
+        case 'cfmWtPEnd':
+          data.category = 'To';
+          this.selectCfmWtPEnd = [data];
+          break;
+        case 'cfmWtPSEStart':
+          data.category = 'From';
+          this.selectCfmWtPSEStart = data;
+          break;
+        case 'cfmWtPSEEnd':
+          data.category = 'To';
+          this.selectCfmWtPSEEnd = data;
+          break;
+        // Cycle time
+        case 'cfmCtEteStart':
+          data.category = 'Start';
+          this.selectCfmCtEteStart = [data];
+          break;
+        case 'cfmCtEteEnd':
+          data.category = 'End';
+          this.selectCfmCtEteEnd = [data];
+          break;
+        case 'cfmCtEteSEStart':
+          data.category = 'Start';
+          this.selectCfmCtEteSEStart = data;
+          break;
+        case 'cfmCtEteSEEnd':
+          data.category = 'End';
+          this.selectCfmCtEteSEEnd = data;
+          break;
         default:
           if(this.selectedRuleType === 'Activity sequence') this.listSequence = [data.task];
           else if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
@@ -115,26 +305,20 @@ export default {
       this.listSequence = data;
     });
     this.$emitter.on('reset', (data) => {
-      this.containstTasksData = data;
+      this.reset();
-      this.startEndData = data;
-      this.start = data;
-      this.end = data;
-      this.from = data;
-      this.to = data;
-      this.durationData = data;
     });
     // Radio 切換時，資料要清空
     this.$emitter.on('isRadioChange', (data) => {
-      if(data) {
+      if(data) this.reset();
-        this.containstTasksData = null;
+    });
-        this.startEndData = null;
+    this.$emitter.on('isRadioProcessScopeChange', (data) => {
-        this.start = null;
+      if(data) this.reset();
-        this.end = null;
+    });
-        this.from = null;
+    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
-        this.to = null;
+      if(data) this.reset();
-        this.listSequence = null;
+    });
-        this.durationData = null;
+    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
-      };
+      if(data) this.reset();
     });
   },
 }

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

@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in datadata" :key="index + act">
+    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act">
       <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
       <span class="mr-2 block w-12">{{ act.category }}</span>
       <span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>
@@ -13,16 +13,21 @@ export default {
   props:['timeResultData', 'select'],
     data() {
     return {
-      datadata: null,
+      data: null,
     }
   },
   watch: {
-    timeResultData: function(newValue) {
+    timeResultData: {
-      this.datadata = newValue;
+      handler(newValue) {
-    }
+        console.log(newValue);
+        this.data = newValue;
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   created() {
-    this.datadata = this.select;
+    this.data = this.select;
   },
 }
 </script>