Conformance: Activity sequence Start & End linkage done.

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -69,8 +69,8 @@ export default {
       visibleLeft: false,
       selectConformanceTask: null,
       selectConformanceStartAndEnd: null,
-      selectConformanceStart: null,
+      selectCfmSeqStart: null,
-      selectConformanceEnd: null,
+      selectCfmSeqEnd: null,
       selectConformanceFrom: null,
       selectConformanceTo: null,
       listSeq: [],
@@ -165,8 +165,8 @@ export default {
       // 不包含 this.selectDurationTime
       this.selectConformanceTask = null; // Have activity
       this.selectConformanceStartAndEnd = null; // Activity Sequence
-      this.selectConformanceStart = null;
+      this.selectCfmSeqStart = null;
-      this.selectConformanceEnd = null;
+      this.selectCfmSeqEnd = null;
       this.selectConformanceFrom = null;
       this.selectConformanceTo = null;
       this.listSeq = [];
@@ -247,8 +247,10 @@ export default {
         default:
           break;
       };
-      this.selectDurationTime.min = this.selectTimeRangeMin;
+      this.selectDurationTime = {
-      this.selectDurationTime.max = this.selectTimeRangeMax;
+        min: this.selectTimeRangeMin,
+        max: this.selectTimeRangeMax
+      };
 
       switch (this.selectedRuleType) {
         case 'Have activity': // Rule Type 選 Have activity 的行為
@@ -533,17 +535,12 @@ export default {
     });
     this.$emitter.on('actRadioData', (data) => {
       switch (data.category) {
-        case 'Start':
+        // Activity sequence
-          this.selectConformanceStart = data.task;
+        case 'cfmSeqStart':
+          this.selectCfmSeqStart = data.task;
           break;
-        case 'End':
+        case 'cfmSeqEnd':
-          this.selectConformanceEnd = data.task;
+          this.selectCfmSeqEnd = data.task;
-          break;
-        case 'From':
-          this.selectConformanceFrom = data.task;
-          break;
-        case 'To':
-          this.selectConformanceTo = data.task;
           break;
         // Processing time
         case 'cfmPtEteStart':
@@ -636,9 +633,6 @@ export default {
           };
           break;
       };
-      if(this.selectConformanceStart !== null && this.selectConformanceEnd !== null){
-        this.selectConformanceStartAndEnd = [this.selectConformanceStart, this.selectConformanceEnd];
-      };
     });
     this.$emitter.on('getListSequence', (data) => {
       this.listSeq = data;

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

@@ -1,9 +1,9 @@
 <template>
-<div class="px-4 text-sm">
+  <div class="px-4 text-sm">
     <!-- Have activity -->
     <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
     <!-- Activity sequence  -->
-    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="startEndData" :select="isSubmitStartAndEnd"></ResultDot>
+    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
     <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="listSequence" :select="isSubmitListSeq"></ResultArrow>
     <!-- Activity duration -->
     <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
@@ -25,7 +25,6 @@
     <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd"></ResultDot>
     <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE"></ResultDot>
-
   </div>
 </template>
 <script>
@@ -52,10 +51,8 @@ export default {
     return {
       containstTasksData: null,
       startEndData: null,
-      start: null,
+      selectCfmSeqStart: null,
-      end: null,
+      selectCfmSeqEnd: null,
-      from: null,
-      to: null,
       listSequence: null,
       durationData: null,
       selectCfmPtEteStart: null, // Processing time
@@ -82,6 +79,17 @@ export default {
     }
   },
   computed: {
+    selectCfmSeqSE: function() {
+      let data = [];
+      console.log(this.selectCfmSeqStart);
+      if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
+      if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
+      data.sort((a, b) => {
+        const order = { 'Start': 1, 'End': 2};
+        return order[a.category] - order[b.category];
+      });
+      return data;
+    },
     selectCfmPtEteSE: function() {
       let data = [];
       if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
@@ -162,10 +170,8 @@ export default {
     reset() {
       this.containstTasksData = null;
       this.startEndData = null;
-      this.start = null;
+      this.selectCfmSeqStart = null;
-      this.end = null;
+      this.selectCfmSeqEnd = null;
-      this.from = null;
-      this.to = null;
       this.listSequence = null;
       this.durationData = null;
       this.selectCfmPtEteStart = null;
@@ -197,17 +203,14 @@ export default {
     });
     this.$emitter.on('actRadioData', (data) => {
       switch (data.category) {
-        case 'Start':
+        // Activity sequence
-          this.start = [data];
+        case 'cfmSeqStart':
+          data.category = 'Start';
+          this.selectCfmSeqStart = data;
           break;
-        case 'End':
+        case 'cfmSeqEnd':
-          this.end = [data];
+          data.category = 'End';
-          break;
+          this.selectCfmSeqEnd = data;
-        case 'From':
-          this.from = [data];
-          break;
-        case 'To':
-          this.to = [data];
           break;
         // Processing time
         case 'cfmPtEteStart':
@@ -297,9 +300,6 @@ export default {
           else if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
           break;
       };
-      if(this.start !== null && this.end !== null){
-        this.startEndData = [...this.start, ...this.end];
-      };
     });
     this.$emitter.on('getListSequence', (data) => {
       this.listSequence = data;

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

@@ -4,8 +4,8 @@
     <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
     <!-- Activity sequence  -->
     <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex justify-between items-center w-full h-full">
-      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="conformanceStart" :category="'Start'" class="w-1/2" />
+      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData" :category="'cfmSeqStart'" @selected-task="selectStart" class="w-1/2" />
-      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="conformanceEnd" :category="'End'" class="w-1/2" />
+      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData" :category="'cfmSeqEnd'" @selected-task="selectEnd" class="w-1/2" />
     </div>
     <!-- actSeqDrag -->
     <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" :data="conformanceTask" :listSeq="isSubmitListSeq" :isSubmit="isSubmit"></ActSeqDrag>
@@ -59,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, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, 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, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE }
   },
   props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitListSeq', 'isSubmitDurationData'],
   components: {
@@ -77,6 +77,13 @@ export default {
     }
   },
   computed: {
+    // Activity sequence
+    cfmSeqStartData: function() {
+      return this.isEndSelected ? this.setSeqStartAndEndData(this.cfmSeqEnd, 'sources', this.task) : this.cfmSeqStart.map(i => i.label);
+    },
+    cfmSeqEndData: function() {
+      return this.isStartSelected ? this.setSeqStartAndEndData(this.cfmSeqStart, 'sinks', this.task) : this.cfmSeqEnd.map(i => i.label);
+    },
     // Processing time
     cfmPtEteStartData: function() {
       return this.cfmPtEteStart.map(i => i.task);
@@ -144,7 +151,7 @@ export default {
   methods: {
     /**
      * 設定 start and end 的 Radio Data
-     * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
+     * @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE
      * @param {string} category start | end
      * @returns {array}
      */
@@ -167,6 +174,22 @@ export default {
       newData = [...new Set(newData)];
       return newData;
     },
+    /**
+     * 重新設定 Activity sequence 連動的 start and end 的 Radio Data
+     * @param {object} data cfmSeqStart | cfmSeqEnd
+     * @param {string} category sources | sinks
+     * @param {string} task task
+     * @returns {array}
+     */
+    setSeqStartAndEndData(data, category, task = 'a') {
+      let newData = data.filter(i => i.label === task).map(i => i[category]);
+      newData = [...new Set(...newData)];
+      return newData;
+    },
+    /**
+     * select start list's task
+     * @param {event} e
+     */
     selectStart(e) {
       if(this.isStartSelected === null || this.isStartSelected === true){
         this.isStartSelected = true;
@@ -174,6 +197,10 @@ export default {
         this.task = e;
       };
     },
+    /**
+     * select End list's task
+     * @param {event} e
+     */
     selectEnd(e) {
       if(this.isEndSelected === null || this.isEndSelected === true){
         this.isEndSelected = true;

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

@@ -71,6 +71,7 @@ export default {
     minTotalSeconds(e) {
       this.timeRangeMin = e;
       this.$emit('min-total-seconds', e);
+      // console.log('min',e);
     },
     /**
      * get min total seconds
@@ -80,6 +81,7 @@ export default {
       this.timeRangeMax = e;
       this.updateMax = e;
       this.$emit('max-total-seconds', e);
+      // console.log('max',e);
     },
   },
 }

src/components/Discover/Conformance/MoreModal.vue

@@ -43,7 +43,6 @@
             <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        {{ caseData }}
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
             <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
               <div v-for="(col, index) in columnData" :key="index">
@@ -100,12 +99,12 @@ export default {
     caseData: function() {
       if(this.infiniteData !== null){
         const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
+        console.log(data);
         data.forEach(item => {
-          // item.facets.forEach((facet, index) => {
+          item.facets.forEach((facet, index) => {
-          //   console.log(facet.value);
+            item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
-          //   item[`fac_${index}`] = facet.value.join(', '); // 建立新的 key-value pair
+          });
-          // });
+          delete item.facets; // 刪除原本的 attributes 屬性
-          // delete item.facets; // 刪除原本的 attributes 屬性
 
           item.attributes.forEach((attribute, index) => {
             item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
@@ -121,6 +120,7 @@ export default {
         { field: 'id', header: 'Case Id' },
         { field: 'started_at', header: 'Start Date' },
         { field: 'completed_at', header: 'End Date' },
+        ...data[0].facets.map((fac, index) => ({ field: `fac_${index}`, header: fac.name })),
         ...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
       ];
       return result

src/stores/conformance.js

@@ -18,8 +18,8 @@ export default defineStore('conformanceStore', {
     conformanceFilterId: null,
     conformanceTempCheckerId: null,
     allConformanceTask: [],
-    allConformanceStart: [],
+    allCfmSeqStart: [],
-    allConformanceEnd: [],
+    allCfmSeqEnd: [],
     allProcessingTime: {},
     allWaitingTime: {},
     allCycleTime: {},
@@ -45,11 +45,11 @@ export default defineStore('conformanceStore', {
     conformanceTask: state => {
       return state.allConformanceTask.map(i => i.label);
     },
-    conformanceStart: state => {
+    cfmSeqStart: state => {
-      return state.allConformanceStart;
+      return state.allCfmSeqStart;
     },
-    conformanceEnd: state => {
+    cfmSeqEnd: state => {
-      return state.allConformanceEnd;
+      return state.allCfmSeqEnd;
     },
     cfmPtEteWhole: state => {
       return state.allProcessingTime.end_to_end.whole;
@@ -116,9 +116,20 @@ export default defineStore('conformanceStore', {
     },
     cases: state => {
       if(state.allCases !== null){
-        state.allCases.map(c => {
+        const newData = state.allCases.map(c => {
           c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
           c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
+          c.facets.map(fac => {
+            switch(fac.type) {
+              case 'float-list':
+                fac.value = fac.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
+                fac.value = fac.value.join(', ');
+                break;
+              default:
+                break;
+            };
+            return fac;
+          });
           c.attributes.map(att => {
             switch (att.type) {
               case 'date':
@@ -131,11 +142,12 @@ export default defineStore('conformanceStore', {
                 break;
             }
             return att;
-          })
-          return c;
           });
+          const { facets, attributes, ...rest } = c;
+          return { ...rest, facets, attributes };
+        });
+        return newData
       };
-      return state.allCases;
     },
     loopTraces: state => {
       return state.allLoopTraces;
@@ -145,25 +157,9 @@ export default defineStore('conformanceStore', {
     },
     loopCases: state => {
       if(state.allLoopCases !== null){
-        state.allLoopCases.map(c => {
+        const newData = state.allLoopCases.map(c => {
           c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM');
           c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM');
-          // if(c.facets) {
-            // c.facets = '111';
-            // c.facets.map(att => {
-            //   switch(att.type) {
-            //     case 'float-list':
-            //       console.log(att.value);
-            //       att.value ='111'
-            //       // att.value = att.value.map(v => v !== null ? new Decimal(v.toFixed(2)) : null);
-            //       // att.value = att.value.join(', ');
-            //       break;
-            //     default:
-            //       break;
-            //   };
-            //   return att;
-            // });
-          // };
           c.attributes.map(att => {
             switch (att.type) {
               case 'date':
@@ -179,8 +175,8 @@ export default defineStore('conformanceStore', {
           });
           return c;
         });
+        return newData;
       };
-      return state.allLoopCases;
     },
   },
   actions: {
@@ -194,8 +190,8 @@ export default defineStore('conformanceStore', {
       try {
         const response = await this.$axios.get(api);
         this.allConformanceTask = response.data.tasks;
-        this.allConformanceStart = response.data.sources;
+        this.allCfmSeqStart = response.data.sources;
-        this.allConformanceEnd = response.data.sinks;
+        this.allCfmSeqEnd = response.data.sinks;
         this.allProcessingTime = response.data.processing_time;
         this.allWaitingTime = response.data.waiting_time;
         this.allCycleTime = response.data.cycle_time;