Conformance: Activity sequence, Sequence, Directly follows done.

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -28,7 +28,8 @@
       </div>
     </div>
     <!-- show bar -->
-    <ConformanceShowBar :class="isShowBar?'':'hidden'"></ConformanceShowBar>
+    <ConformanceShowBar :class="isShowBar?'':'hidden'" :selectConformanceTask="selectConformanceTask" :selectConformanceStartAndEnd="selectConformanceStartAndEnd" :selectConformanceStart="selectConformanceStart" :selectConformanceEnd="selectConformanceEnd" :selectConformanceFrom="selectConformanceFrom" :selectConformanceTo="selectConformanceTo"
+    :listSeq="listSeq"></ConformanceShowBar>
   </div>
 </section>
 </template>
@@ -56,6 +57,12 @@ export default {
       isShowBar: false,
       visibleLeft: false,
       selectConformanceTask: null,
+      selectConformanceStartAndEnd: null,
+      selectConformanceStart: null,
+      selectConformanceEnd: null,
+      selectConformanceFrom: null,
+      selectConformanceTo: null,
+      listSeq: [],
     }
   },
   components: {
@@ -73,8 +80,12 @@ export default {
        this.$emitter.emit('coverPlate', true);
       // Have activity
       this.selectConformanceTask = null;
-      this.$emitter.emit('reset', null);
+      // Activity sequence
+      this.selectConformanceStartAndEnd = null;
+      this.listSeq = null;
 
+      // 其他子元件 reset
+      this.$emitter.emit('reset', null);
       // reset 成功訊息
       this.$toast.success('Reset Success.');
     },
@@ -83,12 +94,46 @@ export default {
      */
     async submit() {
       let data;
+      let isMode = '';
+      switch (this.selectedMode) {
+        case 'Directly follows':
+          isMode = 'directly-follows';
+          break;
+        case 'Eventually follows':
+          isMode = 'a';
+          break;
+        case 'Short loop(s)':
+          isMode = 'b';
+          break;
+        case 'Self loop(s)':
+          isMode = 'c';
+          break;
+        default:
+          break;
+      };
 
-      if(this.selectedRuleType === 'Have activity') {
+      if(this.selectedRuleType === 'Have activity') { // Activity Sequence 選 Have activity(s) 的行為
         if(!this.selectConformanceTask?.length) return this.$toast.error('Not selected.');
         else data = {
           type: 'contains-tasks',
           tasks: this.selectConformanceTask,
+        };
+      }else if(this.selectedRuleType === 'Activity sequence') { // Activity Sequence 選 Start & End 的行為
+        if(this.selectedActivitySequence === 'Start & End'){
+          if(this.selectConformanceStartAndEnd === null || this.selectConformanceStartAndEnd.length === 0) return this.$toast.error('Both Start and End must be selected.');
+          else data = {
+            type: 'start-end',
+            starts_with: this.selectConformanceStartAndEnd[0],
+            ends_with: this.selectConformanceStartAndEnd[1],
+          };
+        }else if(this.selectedActivitySequence === 'Sequence'){ // Activity Sequence 選 Sequence 的行為
+          if(this.listSeq.length < 2) return this.$toast.error('Select two or more.');
+          else {
+            data = {
+              type: isMode,
+              task_seq: this.listSeq,
+            }
+          }
         }
       }
 
@@ -107,6 +152,30 @@ export default {
     this.$emitter.on('actListData', (data) => {
       this.selectConformanceTask = data;
     });
+    this.$emitter.on('actRadioData', (data) => {
+      switch (data.category) {
+        case 'Start':
+          this.selectConformanceStart = data.task;
+          break;
+        case 'End':
+          this.selectConformanceEnd = data.task;
+          break;
+        case 'From':
+          this.selectConformanceFrom = data.task;
+          break;
+        case 'To':
+          this.selectConformanceTo = data.task;
+          break;
+        default:
+          break;
+      };
+      if(this.selectConformanceStart !== null && this.selectConformanceEnd !== null){
+        this.selectConformanceStartAndEnd = [this.selectConformanceStart, this.selectConformanceEnd];
+      };
+    });
+    this.$emitter.on('getListSequence', (data) => {
+      this.listSeq = data;
+    })
   },
 }
 </script>

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

@@ -14,12 +14,17 @@
 </template>
 <script>
 export default {
-  props: ['data'],
+  props: ['data', 'select'],
   data() {
     return {
-      actList: null,
+      actList: this.select
     }
   },
+  watch: {
+    select(newval){
+      this.actList = newval;
+    },
+  },
   methods: {
     actListData() {
       this.$emitter.emit('actListData', this.actList);

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

@@ -5,7 +5,7 @@
       <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="vModel" :value="act" />
+              <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>
           </div>
       </div>
@@ -14,11 +14,29 @@
 </template>
 <script>
 export default {
-  props: ['title', 'vModel', 'data',],
+  props: ['title', 'select', 'data', 'category'],
   data() {
     return {
-      selectedRadio: this.vModel,
+      selectedRadio: this.select,
     }
+  },
+  watch: {
+    select(newval){
+      this.selectedRadio = newval;
+    },
+  },
+  methods: {
+    actRadioData() {
+      this.$emitter.emit('actRadioData', {
+        category: this.category,
+        task: this.selectedRadio,
+      });
     }
+  },
+  created() {
+    this.$emitter.on('reset', (data) => {
+      this.selectedRadio = data;
+    });
+  },
 }
 </script>

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

@@ -18,13 +18,13 @@
     <div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2 text-sm">
       <p class="h2 border-b border-500 my-2">Sequence</p>
       <!-- No Data -->
-      <div v-if="listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
+      <div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
         <p class="text-neutral-500">Please drag and drop activity(s) here and sort.</p>
       </div>
       <!-- Have Data -->
       <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
         <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
-          <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd">
+          <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
             <template #item="{ element, index }">
               <div>
                 <div class="w-full p-2 border rounded bg-neutral-10  cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
@@ -44,20 +44,21 @@
 import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
 
 export default {
+  props: ['data', 'listSeq'],
   data() {
     return {
       actList: null,
       listSequence: [],
       lastItemIndex: null,
-      data:['第三次醫囑', '第四次醫囑','第一次醫囑', '第二次醫囑', 'ddd', 'bbb', 'ccc', 'aaa', 'accc', 'abbb', '1234', '1111', '1222', '1333', '3333', '4444', '0', '1000', '100', '10', '9', '80']
     }
   },
   computed: {
     datadata: function() {
       // TODO Activity List 的 dblclick, drag & drop 要改假刪除
       // Activity List 要排序
-      return sortNumEngZhtw(this.data);
+      if(this.data !== null) sortNumEngZhtw(this.data);
-    }
+      return this.data;
+    },
   },
   methods: {
     /**
@@ -78,6 +79,12 @@ export default {
       this.listSequence.splice(index, 1);
       this.data.push(element);
     },
+    /**
+     * get listSequence
+     */
+    getComponentData(){
+      this.$emitter.emit('getListSequence', this.listSequence);
+    },
     /**
      * Element dragging started
      */
@@ -104,10 +111,13 @@ export default {
       evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
       // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
       this.lastItemIndex = null;
-      this.$emit('update:listSeq', this.listSequence);
     },
-
+  },
-  }
+  created() {
+    this.$emitter.on('reset', (data) => {
+      this.listSequence = [];
+    });
+  },
 }
 </script>
 <style scoped>

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

@@ -1,36 +1,39 @@
 <template>
 <div class="px-4 text-sm">
     <!-- Have activity -->
-    <div class="space-y-2" v-if="selectedRuleType === 'Have activity' || selectedRuleType === 'Activity duration'">
+    <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData"></ResultCheck>
-      <div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
-        <span class="material-symbols-outlined text-primary mr-2">
-          check_circle
-        </span>
-        <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
-      </div>
-    </div>
     <!-- Activity sequence  -->
-    <div class="space-y-2" v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
+    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="startEndData"></ResultDot>
-      <div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
+    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="listSequence"></ResultArrow>
-        <span class="material-symbols-outlined text-primary mr-2">
+    <!-- Activity duration -->
-          arrow_circle_down
+    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'"></ResultCheck>
-        </span>
+    <!-- Processing time -->
-        <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
-      </div>
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
-    </div>
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
-    <!-- Processing time, Waiting time, Cycle time -->
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
-    <ul v-if="(selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End') || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'">
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
-      <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in timeResultData" :key="index + act">
+    <ResultArrow v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
-        <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>
+    <!-- Waiting time -->
-        <span class="mr-2 block w-12">{{ act.scope }}</span>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
-        <span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.activity }}</span>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
-      </li>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
-    </ul>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'"></ResultArrow>
+    <!-- Cycle time -->
+    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'"></ResultArrow>
+    <ResultArrow v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'"></ResultArrow>
+
   </div>
 </template>
 <script>
 import { storeToRefs } from 'pinia';
 import ConformanceStore from '@/stores/conformance.js';
+import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
+import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
+import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
 
 export default {
   setup() {
@@ -39,39 +42,81 @@ export default {
 
     return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
   },
+  components: {
+    ResultCheck,
+    ResultArrow,
+    ResultDot,
+  },
   data() {
     return {
-      data: null,
+      containstTasksData: null,
-      timeResultData: [
+      startEndData: null,
-        {
+      start: null,
-          id: 1,
+      end: null,
-          scope: 'Start',
+      from: null,
-          activity: '到院'
+      to: null,
-        },
+      listSequence: null,
-        {
-          id: 2,
-          scope: 'End',
-          activity: '出院'
-        },
-        {
-          id: 3,
-          scope: 'From',
-          activity: '到院到院到院到院到院到院'
-        },
-        {
-          id: 4,
-          scope: 'Start',
-          activity: '出院出院出院出院出院出院'
-        },
-      ],
     }
   },
+  methods: {
+    /**
+     * set Time Result Data
+     * @param   {array} data
+     * @returns {array}
+     * timeResultData: [
+     *  {
+     *    id: 1,
+     *    category: 'start', start|end|from|to
+     *    task: '到院'
+     *  },
+     * ]
+     */
+    setTimeResultData(data) {
+      let result = data.map((item, index) => {
+        return {
+          id: index + 1,
+          category: item.category.replace(/^./, item.category[0].toUpperCase()),
+          task: item.task
+        }
+      });
+      return result;
+    },
+  },
   created() {
     this.$emitter.on('actListData', (data) => {
-      this.data = data;
+      this.containstTasksData = data;
     });
+    this.$emitter.on('actRadioData', (data) => {
+      switch (data.category) {
+        case 'Start':
+          this.start = [data];
+          break;
+        case 'End':
+          this.end = [data];
+          break;
+        case 'From':
+          this.from = [data];
+          break;
+        case 'To':
+          this.to = [data];
+          break;
+        default:
+          break;
+      };
+      if(this.start !== null && this.end !== null){
+        this.startEndData = [...this.start, ...this.end];
+      };
+    });
+    this.$emitter.on('getListSequence', (data) => {
+      this.listSequence = data;
+    })
     this.$emitter.on('reset', (data) => {
-      this.data = data;
+      this.containstTasksData = data;
+      this.startEndData = data;
+      this.start = data;
+      this.end = data;
+      this.from = data;
+      this.to = data;
     });
   },
 

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

@@ -1,48 +1,48 @@
 <template>
   <section class="animate-fadein w-full h-full">
     <!-- Have activity -->
-    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask"></ActList>
+    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="selectConformanceTask"></ActList>
     <!-- Activity sequence  -->
     <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex h-full">
-      <ActRadio :title="'Start activity'" :v-model="'actseqStartAndEndRadioStart'" :data="data" />
+      <ActRadio :title="'Start activity'" :select="'actseqStartAndEndRadioStart'" :data="conformanceStart" :category="'Start'" />
-      <ActRadio :title="'End activity'" :v-model="'actseqStartAndEndRadioEnd'" :data="data" />
+      <ActRadio :title="'End activity'" :select="'actseqStartAndEndRadioEnd'" :data="conformanceEnd" :category="'End'" />
     </div>
     <!-- actSeqDrag -->
-    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'"></ActSeqDrag>
+    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="listSeq"></ActSeqDrag>
     <!-- Activity duration -->
-    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :v-model="'actInclude'" :data="data" />
+    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="'actInclude'" :data="data" />
     <!-- Processing time -->
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'protimeStartRadio'" :data="data" />
+    <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'" :v-model="'protimeEndRadio'" :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'" :v-model="'protimeStartAndEndRadioStart'" :data="data" />
+      <ActRadio :title="'Start'" :select="'protimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :v-model="'protimeStartAndEndRadioEnd'" :data="data" />
+      <ActRadio :title="'End'" :select="'protimeStartAndEndRadioEnd'" :data="data" />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :v-model="'protimeFromRadio'" :data="data" />
+    <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'" :v-model="'protimeToRadio'" :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'" :v-model="'protimeFromAndToRadioFrom'" :data="data" />
+      <ActRadio :title="'From'" :select="'protimeFromAndToRadioFrom'" :data="data" />
-      <ActRadio :title="'To'" :v-model="'protimeFromAndToRadioTo'" :data="data" />
+      <ActRadio :title="'To'" :select="'protimeFromAndToRadioTo'" :data="data" />
     </div>
     <!-- Waiting time -->
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'waittimeStartRadio'" :data="data" />
+    <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'" :v-model="'waittimeEndRadio'" :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'" :v-model="'waittimeStartAndEndRadioStart'" :data="data" />
+      <ActRadio :title="'Start'" :select="'waittimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :v-model="'waittimeStartAndEndRadioEnd'" :data="data" />
+      <ActRadio :title="'End'" :select="'waittimeStartAndEndRadioEnd'" :data="data" />
     </div>
-    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :v-model="'waittimeFromRadio'" :data="data" />
+    <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'" :v-model="'waittimeToRadio'" :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'" :v-model="'waittimeFromAndToRadioFrom'" :data="data" />
+      <ActRadio :title="'From'" :select="'waittimeFromAndToRadioFrom'" :data="data" />
-      <ActRadio :title="'To'" :v-model="'waittimeFromAndToRadioTo'" :data="data" />
+      <ActRadio :title="'To'" :select="'waittimeFromAndToRadioTo'" :data="data" />
     </div>
     <!-- Cycle time -->
-    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :v-model="'cyctimeStartRadio'" :data="data" />
+    <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'" :v-model="'cyctimeEndRadio'" :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'" :v-model="'cyctimeStartAndEndRadioStart'" :data="data" />
+      <ActRadio :title="'Start'" :select="'cyctimeStartAndEndRadioStart'" :data="data" />
-      <ActRadio :title="'End'" :v-model="'cyctimeStartAndEndRadioEnd'" :data="data" />
+      <ActRadio :title="'End'" :select="'cyctimeStartAndEndRadioEnd'" :data="data" />
     </div>
 
   </section>
@@ -60,10 +60,11 @@ export default {
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd } = storeToRefs(conformanceStore);
 
-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, conformanceStart, conformanceEnd }
   },
+  props: ['selectConformanceTask', 'selectConformanceStartAndEnd', 'selectConformanceStart', 'selectConformanceEnd', 'selectConformanceFrom', 'selectConformanceTo', 'listSeq'],
   components: {
     ActList, ActRadio, ActSeqDrag
   },

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
+      <span class="material-symbols-outlined text-primary mr-2">
+        arrow_circle_down
+      </span>
+      <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ResultArrow',
+  props:['data'],
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
+      <span class="material-symbols-outlined text-primary mr-2">
+        check_circle
+      </span>
+      <p class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ResultCheck',
+  props:['data'],
+}
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <ul>
+    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in timeResultData" :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>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'ResultDot',
+  props:['timeResultData'],
+}
+</script>

src/components/Discover/Conformance/MoreModal.vue

@@ -58,7 +58,6 @@
 import { storeToRefs } from 'pinia';
 import ConformanceStore from '@/stores/conformance.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
-import { nextTick } from 'vue';
 
 export default {
   props: ['issusModal', 'issusNo', 'traceId', 'firstCases'],
@@ -219,9 +218,12 @@ export default {
 
         this.setNodesData();
         this.setEdgesData();
-        cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
+        if(graphId !== null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
       });
     },
+    /**
+     * 無限滾動: 載入數據
+     */
     async fetchData() {
       try {
         this.loading = true;
@@ -234,8 +236,12 @@ export default {
         this.loading = false;
       }
     },
+    /**
+     * 無限滾動: 監聽 scroll 有沒有滾到底部
+     * @param {element} event
+     */
     handleScroll(event) {
-      if(this.loading || this.maxItems) return;
+      if(this.loading || this.maxItems || this.infiniteData.length < 20) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight + 20 >= container.scrollHeight;

src/stores/conformance.js

@@ -5,7 +5,6 @@ import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import moment from "moment";
 import { Decimal } from 'decimal.js';
-import { resolveTransitionHooks } from "vue";
 
 const loading = loadingStore(pinia);
 const $toast = useToast();
@@ -19,6 +18,8 @@ export default defineStore('conformanceStore', {
     conformanceFilterId: null,
     conformanceTempCheckerId: null,
     allConformanceTask: [],
+    allConformanceStart: [],
+    allConformanceEnd: [],
     allConformanceTempReportData: null,
     allIssueTraces: null,
     allTaskSeq: null,
@@ -29,12 +30,19 @@ export default defineStore('conformanceStore', {
     selectedProcessScope: 'End to end', // radio
     selectedActSeqMore: 'All', // radio
     selectedActSeqFromTo: 'From', // radio
+    // selectConformanceTask: null, // select task
     infinite404: null,
   }),
   getters: {
     conformanceTask: state => {
       return state.allConformanceTask.map(i => i.label);
     },
+    conformanceStart: state => {
+      return state.allConformanceStart;
+    },
+    conformanceEnd: state => {
+      return state.allConformanceEnd;
+    },
     conformanceTempReportData: state => {
       return state.allConformanceTempReportData;
     },
@@ -79,6 +87,8 @@ export default defineStore('conformanceStore', {
       try {
         const response = await this.$axios.get(api);
         this.allConformanceTask = response.data.tasks;
+        this.allConformanceStart = response.data.sources;
+        this.allConformanceEnd = response.data.sinks;
       } catch(error) {
         await delay();
         loading.isLoading = true;