feat: Conformance Save Log Done.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -267,9 +267,15 @@ export default {
   watch: {
     conformanceTempReportData: {
       handler: function(newValue) {
+        if(newValue?.rule && newValue.rule.min) {
+          this.selectDurationTime = {
+            min: newValue.rule.min,
+            max: newValue.rule.max,
+          }
+        }
         this.data = this.setConformanceTempReportData(newValue);
       },
-    }
+    },
   },
   methods: {
     /**

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -119,9 +119,9 @@ export default {
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected, conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceTempReportData } = storeToRefs(conformanceStore);
 
-    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected }
+    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected, conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceTempReportData }
   },
   data() {
     return {
@@ -396,6 +396,220 @@ export default {
   watch: {
     isSubmitData: function(newValue) {
       this.isSubmitData = newValue;
+    },
+    // 打開 rule 檔要顯示儲存的選項、規則、時間
+    conformanceTempReportData: {
+      handler: function(newValue) {
+        this.isLoading = true;
+        setTimeout(() => {
+          if(newValue !== null) {
+            const rule = newValue.rule;
+
+            this.isSubmitData = newValue.rule;
+            this.isSubmit = true;
+            switch (rule.type) {
+              case 'contains-tasks': // Rule Type 選 Have activity 的行為
+                this.selectedRuleType = 'Have activity';
+                this.isSubmitTask = rule.tasks;
+                break;
+              case 'start-end': // Rule Type 選 Activity sequence 的行為
+                this.selectedRuleType = 'Activity sequence';
+                this.isSubmitStartAndEnd = [
+                  {category: 'Start', task: rule.starts_with},
+                  {category: 'End', task: rule.ends_with},
+                ];
+                // this.isSubmitShowDataSeq = this.setSubmitShowData(rule.start, rule.end);
+                break;
+              case 'directly-follows': // Activity Sequence 選 Sequence 的行為
+                this.selectedRuleType = 'Sequence';
+                this.selectedMode = 'Directly follows';
+                this.isSubmitCfmSeqDirectly = rule.task_seq;
+                break;
+              case 'eventually-follows':
+                this.selectedRuleType = 'Sequence';
+                this.selectedMode = 'Eventually follows';
+                this.isSubmitCfmSeqEventually = rule.task_seq;
+                break;
+              case 'short-loops':
+                this.selectedRuleType = 'Sequence';
+                this.selectedMode = 'Short loop(s)';
+                break;
+              case 'self-loops':
+                this.selectedRuleType = 'Sequence';
+                this.selectedMode = 'Self loop(s)';
+                break;
+              case 'task-duration': // Rule Type 選 Activity duration 的行為
+                this.selectedRuleType = 'Activity duration';
+                this.isSubmitDurationData = [rule.task];
+                this.isSubmitDurationTime = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'All';
+                this.isSubmitTimeCfmPtEteAll = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-end-to-end-starts-with':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start';
+                this.isSubmitCfmPtEteStart = [
+                  {category: 'Start', task: rule.task}
+                ];
+                this.isSubmitTimeCfmPtEteStart = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-end-to-end-ends-with':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'End';
+                this.isSubmitCfmPtEteEnd = [
+                  {category: 'End', task: rule.task}
+                ];
+                this.isSubmitTimeCfmPtEteEnd = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-end-to-end-start-end':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start & End';
+                this.isSubmitCfmPtEteSE = [
+                  {category: 'Start', task: rule.start},
+                  {category: 'End', task: rule.end}
+                ];
+                this.isSubmitTimeCfmPtEteSE = { min: rule.min, max: rule.max};
+                // this.isSubmitShowDataPtEte = this.setSubmitShowData(rule.start, rule.end);
+                break;
+              case 'processing-time-partial-starts-with':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'From';
+                this.isSubmitCfmPtPStart = [
+                  {category: 'From', task: rule.task}
+                ];
+                this.isSubmitTimeCfmPtPStart = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-partial-ends-with':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'To';
+                this.isSubmitCfmPtPEnd = [
+                  {category: 'To', task: rule.task}
+                ];
+                this.isSubmitTimeCfmPtPEnd = { min: rule.min, max: rule.max};
+                break;
+              case 'processing-time-partial-start-end':
+                this.selectedRuleType = 'Processing time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'From & To';
+                this.isSubmitCfmPtPSE = [
+                  {category: 'From', task: rule.start},
+                  {category: 'To', task: rule.end}
+                ];
+                this.isSubmitTimeCfmPtPSE = { min: rule.min, max: rule.max};
+                this.isSubmitShowDataPtP = this.setSubmitShowData(rule.start, rule.end);
+                break;
+              case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'All';
+                this.isSubmitTimeCfmWtEteAll = { min: rule.min, max: rule.max};
+                break;
+              case 'waiting-time-end-to-end-starts-with':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start';
+                this.isSubmitCfmWtEteStart = [
+                  {category: 'Start', task: rule.task}
+                ];
+                this.isSubmitTimeCfmWtEteStart = { min: rule.min, max: rule.max};
+                break;
+              case 'waiting-time-end-to-end-ends-with':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'End';
+                this.isSubmitCfmWtEteEnd = [
+                  {category: 'End', task: rule.task}
+                ];
+                this.isSubmitTimeCfmWtEteEnd = { min: rule.min, max: rule.max};
+                break;
+              case 'waiting-time-end-to-end-start-end':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start & End';
+                this.isSubmitCfmWtEteSE = [
+                  {category: 'Start', task: rule.start},
+                  {category: 'End', task: rule.end}
+                ];
+                this.isSubmitTimeCfmWtEteSE = { min: rule.min, max: rule.max};
+                this.isSubmitShowDataWtEte = this.setSubmitShowData(rule.start, rule.end);
+                break;
+              case 'waiting-time-partial-starts-with':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'From';
+                this.isSubmitCfmWtPStart = [
+                  {category: 'From', task: rule.task}
+                ];
+                this.isSubmitTimeCfmWtPStart = { min: rule.min, max: rule.max};
+                break;
+              case 'waiting-time-partial-ends-with':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'To';
+                this.isSubmitCfmWtPEnd = [
+                  {category: 'To', task: rule.task}
+                ];
+                this.isSubmitTimeCfmWtPEnd = { min: rule.min, max: rule.max};
+                break;
+              case 'waiting-time-partial-start-end':
+                this.selectedRuleType = 'Waiting time';
+                this.selectedProcessScope = 'Partial';
+                this.selectedActSeqFromTo = 'From & To';
+                this.isSubmitCfmWtPSE = [
+                  {category: 'From', task: rule.start},
+                  {category: 'To', task: rule.end}
+                ];
+                this.isSubmitTimeCfmWtPSE = { min: rule.min, max: rule.max};
+                this.isSubmitShowDataWtP = this.setSubmitShowData(rule.start, rule.end);
+                break;
+              case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為
+                this.selectedRuleType = 'Cycle time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'All';
+                this.isSubmitTimeCfmCtEteAll = { min: rule.min, max: rule.max};
+                break;
+              case 'cycle-time-end-to-end-starts-with':
+                this.selectedRuleType = 'Cycle time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start';
+                this.isSubmitCfmCtEteStart = [
+                  {category: 'Start', task: rule.task}
+                ];
+                this.isSubmitTimeCfmCtEteStart = { min: rule.min, max: rule.max};
+                break;
+              case 'cycle-time-end-to-end-ends-with':
+                this.selectedRuleType = 'Cycle time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'End';
+                this.isSubmitCfmCtEteEnd = [
+                  {category: 'End', task: rule.task}
+                ];
+                this.isSubmitTimeCfmCtEteEnd = { min: rule.min, max: rule.max};
+                break;
+              case 'cycle-time-end-to-end-start-end':
+                this.selectedRuleType = 'Cycle time';
+                this.selectedProcessScope = 'End to end';
+                this.selectedActSeqMore = 'Start & End';
+                this.isSubmitCfmCtEteSE = [
+                  {category: 'Start', task: rule.start},
+                  {category: 'End', task: rule.end}
+                ];
+                this.isSubmitTimeCfmCtEteSE = { min: rule.min, max: rule.max};
+                this.isSubmitShowDataCt = this.setSubmitShowData(rule.start, rule.end);
+                break;
+            }
+          }
+        }, 200);
+      }
     }
   },
   methods: {
@@ -675,8 +889,6 @@ export default {
                   this.isSubmitTimeCfmPtEteSE = this.selectDurationTime;
                   this.isSubmitShowDataPtEte = this.setSubmitShowData(this.selectCfmPtEteSEStart, this.selectCfmPtEteSEEnd);
                 break;
-                default:
-                  break;
               };
               break;
             case 'Partial':
@@ -899,8 +1111,6 @@ export default {
               break;
           };
           break;
-        default:
-          break;
       };
       if(data.min > data.max) return this.$toast.error('Please check time range setting.');
       if(JSON.stringify(data) === JSON.stringify(this.isSubmitData)) return this.$toast.error('Please set the new rule.');
@@ -908,6 +1118,7 @@ export default {
       this.isLoading = true;
       this.isSubmit = true;
       this.isSubmitData = data; // 已 Apply 後，沒有重新改變規則的 Data
+      this.conformanceRuleData = data; // 給存檔的 Data
       await this.conformanceStore.addConformanceCheckId(data);
       await this.conformanceStore.getConformanceReport();
       this.isShowBar = false;
@@ -918,7 +1129,7 @@ export default {
     },
   },
   created() {
-    this.isShowBar = true;
+    this.isShowBar = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true;
     // 選取 list 的結果
     this.$emitter.on('actListData', (data) => {
       this.selectConformanceTask = data;

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

@@ -27,6 +27,9 @@ export default {
       },
       immediate: true, // 立即執行一次排序
     },
+    select: function(newValue) {
+      this.actList = newValue;
+    }
   },
   methods: {
     actListData() {

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

@@ -11,6 +11,19 @@
 <script>
 export default {
   name: 'ResultArrow',
-  props:['data'],
+  props:['data', 'select'],
+  // data() {
+  //   return {
+  //     datadata: []
+  //   }
+  // },
+  // watch: {
+  //   data: function(newValue) {
+  //     this.datadata = newValue;
+  //   },
+  //   select: function(newValue) {
+  //     this.datadata = newValue;
+  //   }
+  // }
 }
 </script>

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

@@ -20,6 +20,9 @@ export default {
   watch: {
     data: function(newValue) {
       this.datadata = newValue;
+    },
+    select: function(newValue) {
+      this.datadata = newValue;
     }
   },
   created() {

src/components/Discover/Conformance/StatusBar.vue

@@ -148,15 +148,23 @@ export default {
     }
   },
   async mounted() {
-    if(this.$route.params.type === 'log') this.logId = this.$route.params.fileId;
+    let params = this.$route.params;
-    switch (this.$route.params.type) {
+
+    switch (params.type) {
       case 'log':
-        this.logId = this.$route.params.fileId;
+        this.logId = params.fileId;
         break;
       case 'filter':
-        this.createFilterId = this.$route.params.fileId;
+        this.createFilterId = params.fileId;
-      break;
+        break;
-      default:
+      case 'rule':
+        switch (params.checkType) {
+          case 'log':
+            this.logId = params.checkFileId;
+            break;
+          case 'filter':
+            this.createFilterId = params.checkFileId;
+        }
         break;
     }
     await this.allMapDataStore.getAllMapData();

src/components/Header.vue

@@ -24,7 +24,6 @@ import loginStore from '@/stores/login.js';
 import DspLogo from '@/components/icons/DspLogo.vue';
 import IconMember from '@/components/icons/IconMember.vue';
 import AllMapDataStore from '@/stores/allMapData.js';
-import { logoutLeave } from '@/module/alertModal.js';
 
 export default {
   data() {

src/components/Navbar.vue

@@ -48,11 +48,27 @@
 import { storeToRefs } from 'pinia';
 import filesStore from '@/stores/files.js';
 import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 import { saveFilter, savedSuccessfully } from '@/module/alertModal.js';
 
 export default {
+  setup() {
+    const store = filesStore();
+    const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
+    const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore);
+    const { conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName } = storeToRefs(conformanceStore);
+
+    return { store, allMapDataStore, logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter, conformanceStore, conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName }
+  },
+  components: {
+    IconSearch,
+    IconSetting,
+    saveFilter,
+    savedSuccessfully
+  },
   data() {
     return {
       showNavbarBreadcrumb: false,
@@ -67,9 +83,16 @@ export default {
     };
   },
   computed: {
-    // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
     disabledSave: function () {
-      return this.tempFilterId ? false : true;
+      switch (this.$route.name) {
+        case 'Map':
+        case 'CheckMap':
+          // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+          return this.tempFilterId ? false : true;
+        case 'Conformance':
+        case 'CheckConformance':
+          return this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId ? false : true;
+      }
     }
   },
   watch: {
@@ -78,19 +101,6 @@ export default {
       this.filterName = newVal;
     },
   },
-  setup() {
-    const store = filesStore();
-    const allMapDataStore = AllMapDataStore();
-    const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore);
-
-    return { store, allMapDataStore, logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter}
-  },
-  components: {
-    IconSearch,
-    IconSetting,
-    saveFilter,
-    savedSuccessfully
-  },
   mounted() {
     if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
@@ -125,17 +135,37 @@ export default {
     async saveModal() {
       // 傳給 Map，通知 Sidebar 要關閉。
       this.$emitter.emit('saveModal', false);
-      // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
+      // 判斷在哪個子頁面
-      // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
+      switch (this.$route.name) {
-      if(this.createFilterId) {
+        case 'Map':
-        await this.allMapDataStore.updataFilter();
+          // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
-        if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
+          // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
-        this.tempFilterId = null;
+          if(this.createFilterId) {
-      }else if(this.logId){
+            await this.allMapDataStore.updataFilter();
-        await saveFilter(this.allMapDataStore.addFilterId);
+            if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
-        // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
+            this.tempFilterId = null;
-        await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
+          }else if(this.logId){
-      };
+            await saveFilter(this.allMapDataStore.addFilterId);
+            // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
+            await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
+          };
+          break;
+        case 'Conformance':
+        case 'CheckMap':
+        case 'CheckConformance':
+          // 先判斷有沒有 check Id，有就儲存 return，沒有就往下走
+          // 沒有 check Id, 有暫存 temp Id 可以另存新檔
+          if(this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId){
+            await this.conformanceStore.updataConformance();
+            if(this.isUpdataConformance) await savedSuccessfully(this.conformanceFileName);
+          } else {
+            await saveFilter(this.conformanceStore.addConformanceCreateCheckId);
+            // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
+            if(this.conformanceLogId) await this.$router.push(`/rule/log/${this.conformanceLogCreateCheckId}/conformance/${this.conformanceLogId}`);
+            else if(this.conformanceFilterId) await this.$router.push(`/rule/filter/${this.conformanceFilterCreateCheckId}/conformance/${this.conformanceFilterId}`);
+          }
+          break;
+      }
     }
   },
 }

src/module/alertModal.js

@@ -1,5 +1,6 @@
 import Swal from 'sweetalert2';
 import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
 import LoginStore from '@/stores/login.js';
 
 const customClass = {
@@ -12,18 +13,20 @@ const customClass = {
   confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
   cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
 };
-
+/**
-// 帶入參數 pinia aciton this.sweetVal
+ * Map Saved
+ * @param { function } addFilterId
+ */
 export async function saveFilter(addFilterId) {
-  let filterName = '';
+  let fileName = '';
   const { value, isConfirmed } = await Swal.fire({
     title: 'SAVE NEW FILTER',
     input: 'text',
     inputPlaceholder: 'Enter Filter Name.',
-    inputValue: filterName,
+    inputValue: fileName,
     inputValidator: (value) => {
       if (!value) return 'You need to write something!';
-      filterName = value;
+      fileName = value;
     },
     icon: 'info',
     iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
@@ -35,13 +38,16 @@ export async function saveFilter(addFilterId) {
     customClass: customClass,
   });
   // 存檔成功
-  if(isConfirmed) await addFilterId(filterName);
+  if(isConfirmed) await addFilterId(fileName);
   // 顯示儲存完成
   if (value) savedSuccessfully(value);
   // 清空欄位
-  filterName = '';
+  fileName = '';
 }
-
+/**
+ * Saved Success
+ * @param { string } value
+ */
 export async function savedSuccessfully(value) {
   value = value ? value : '';
   await Swal.fire({
@@ -54,7 +60,12 @@ export async function savedSuccessfully(value) {
     customClass: customClass
   })
 };
-
+/**
+ * leave Map page
+ * @param { function } next
+ * @param { function } addFilterId
+ * @param { string } toPath
+ */
 export async function leaveFilter(next, addFilterId, toPath) {
   const allMapDataStore = AllMapDataStore();
   const result = await Swal.fire({
@@ -80,7 +91,69 @@ export async function leaveFilter(next, addFilterId, toPath) {
     next(false);
   }
 };
-
+/**
+ * Conformance Saved
+ * @param { function } addConformanceCreateCheckId
+ */
+export async function saveConformance(addConformanceCreateCheckId) {
+  let fileName = '';
+  const { value, isConfirmed } = await Swal.fire({
+    title: 'SAVE NEW RULE',
+    input: 'text',
+    inputPlaceholder: 'Enter Rule Name.',
+    inputValue: fileName,
+    inputValidator: (value) => {
+      if (!value) return 'You need to write something!';
+      fileName = value;
+    },
+    icon: 'info',
+    iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+    iconColor: '#0099FF',
+    reverseButtons:true,
+    confirmButtonColor: '#0099FF',
+    showCancelButton: true,
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass,
+  });
+  // 存檔成功
+  if(isConfirmed) await addConformanceCreateCheckId(fileName);
+  // 顯示儲存完成
+  if (value) savedSuccessfully(value);
+  // 清空欄位
+  fileName = '';
+}
+/**
+ * leave Conformance page
+ * @param { function } next
+ * @param { function } addConformanceCreateCheckId
+ * @param { string } toPath
+ */
+export async function leaveConformance(next, addConformanceCreateCheckId, toPath) {
+  const allMapDataStore = AllMapDataStore();
+  const result = await Swal.fire({
+    title: 'SAVE YOUR RULE?',
+    icon: 'warning',
+    iconColor: '#FF3366',
+    reverseButtons:true,
+    confirmButtonText: 'Yes',
+    confirmButtonColor: '#FF3366',
+    showCancelButton: true,
+    cancelButtonText: 'No',
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass
+  })
+  if(result.isConfirmed) {
+    await saveFilter(addConformanceCreateCheckId)
+    next(toPath);
+  } else if(result.dismiss === 'cancel') {
+    ConformanceStore.conformanceFilterTempCheckId = null;
+    ConformanceStore.conformanceLogTempCheckId = null;
+    next(toPath);
+  } else if(result.dismiss === 'backdrop') {
+    next(false);
+  }
+};
+// 登出 button 規則，暫時沒用到
 export async function logoutLeave(addFilterId) {
   const allMapDataStore = AllMapDataStore();
   const loginStore = LoginStore();

src/router/index.js

@@ -58,6 +58,20 @@ const routes = [
             name: "Conformance",
             component: Conformance,
           },
+          {
+            // type: rule(名稱待討論)
+            // checkType: log | filter
+            path: "/:type/:checkType/:checkId/map/:checkFileId",
+            name: "CheckMap",
+            component: Map,
+            props: true,
+          },
+          {
+            path: "/:type/:checkType/:checkId/conformance/:checkFileId",
+            name: "CheckConformance",
+            component: Conformance,
+            props: true,
+          },
         ]
       },
     ]

src/stores/conformance.js

@@ -10,6 +10,8 @@ export default defineStore('conformanceStore', {
     conformanceFilterId: null, // filter 檔
     conformanceLogTempCheckId: null, // log 檔存檔前的 check Id
     conformanceFilterTempCheckId: null, // Filter 檔存檔前的 check Id
+    conformanceLogCreateCheckId: null, // log 檔存檔後的 check Id
+    conformanceFilterCreateCheckId: null, // Filter 檔存檔後的 check Id
     allConformanceTask: [],
     allCfmSeqStart: [],
     allCfmSeqEnd: [],
@@ -32,6 +34,9 @@ export default defineStore('conformanceStore', {
     infinite404: null,
     isStartSelected: null, // start & end 連動先選擇 start
     isEndSelected: null, // start & end 連動先選擇 end
+    conformanceRuleData: null, // create checkId's data to save
+    isUpdataConformance: false, // 成功儲存後要跳 Modal
+    conformanceFileName: null, // 儲存成功的 Modal 用
   }),
   getters: {
     conformanceAllTasks: state => {
@@ -225,11 +230,15 @@ export default defineStore('conformanceStore', {
     async getConformanceReport() {
       let logTempCheckId = this.conformanceLogTempCheckId;
       let filterTempCheckId = this.conformanceFilterTempCheckId;
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
       let api = '';
 
-      // 先判斷 filter 檔，再判斷 log 檔。
+      // 先判斷 Temp 再判斷原 ID；先判斷 filter 檔，再判斷 log 檔。
       if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}`;
-      else api = `/api/temp-log-checks/${logTempCheckId}`;
+      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}`;
+      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`;
 
       try {
         const response = await this.$axios.get(api);
@@ -243,12 +252,16 @@ export default defineStore('conformanceStore', {
      */
     async getConformanceIssue(issueNo) {
       let logTempCheckId = this.conformanceLogTempCheckId;
-      let filterTempCheckId = this.conformanceFilterTempCheckId
+      let filterTempCheckId = this.conformanceFilterTempCheckId;
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
       if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}`;
-      else api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`;
+      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`;
+      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}`;
 
       try {
         const response = await this.$axios.get(api);
@@ -262,12 +275,16 @@ export default defineStore('conformanceStore', {
      */
     async getConformanceTraceDetail(issueNo, traceId, start) {
       let logTempCheckId = this.conformanceLogTempCheckId;
-      let filterTempCheckId = this.conformanceFilterTempCheckId
+      let filterTempCheckId = this.conformanceFilterTempCheckId;
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
       if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
-      else api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`;
 
       try {
         const response = await this.$axios.get(api);
@@ -284,12 +301,16 @@ export default defineStore('conformanceStore', {
      */
     async getConformanceLoop(loopNo) {
       let logTempCheckId = this.conformanceLogTempCheckId;
-      let filterTempCheckId = this.conformanceFilterTempCheckId
+      let filterTempCheckId = this.conformanceFilterTempCheckId;
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
       if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/loops/${loopNo}`;
-      else api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}`;
+      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}`;
+      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/loops/${loopNo}`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}`;
 
       try {
         const response = await this.$axios.get(api);
@@ -303,12 +324,16 @@ export default defineStore('conformanceStore', {
      */
     async getConformanceLoopsTraceDetail(loopNo, traceId, start) {
       let logTempCheckId = this.conformanceLogTempCheckId;
-      let filterTempCheckId = this.conformanceFilterTempCheckId
+      let filterTempCheckId = this.conformanceFilterTempCheckId;
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
       let api = '';
 
       // 先判斷 filter 檔，再判斷 log 檔。
       if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
-      else api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
 
       try {
         const response = await this.$axios.get(api);
@@ -320,5 +345,57 @@ export default defineStore('conformanceStore', {
         apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
       };
     },
+    /**
+     * Add a New Log Conformance Check, Save the log file.
+     */
+    async addConformanceCreateCheckId(value) {
+      let logId = this.conformanceLogId;
+      let filterId = this.conformanceFilterId;
+      let api = '';
+      let data = {
+        name: value,
+        rule: this.conformanceRuleData
+      };
+
+      // 先判斷 filter 檔，再判斷 log 檔。
+      if(filterId !== null) api = `/api/filter-checks?filter_id=${filterId}`;
+      else api = `/api/log-checks?log_id=${logId}`;
+
+      try {
+        const response = await this.$axios.post(api, data);
+        if(filterId !== null) {
+          this.conformanceFilterCreateCheckId = response.data.id;
+          this.conformanceFilterTempCheckId = null;
+        }
+        else {
+          this.conformanceLogCreateCheckId = response.data.id;
+          this.conformanceLogTempCheckId= null;
+        }
+      }catch(error) {
+        apiError(error, 'Failed to add the Conformance Check for a file.');
+      };
+    },
+    /**
+     * Updata an Existing Conformance Check, log and filter
+     */
+    async updataConformance() {
+      let logCreateCheckId = this.conformanceLogCreateCheckId;
+      let filterCreateCheckId = this.conformanceFilterCreateCheckId;
+      let api = '';
+      const data = this.conformanceRuleData;
+
+      // 先判斷有無 Temp ID，再判斷原始檔 ID
+      if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}`;
+      else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`;
+
+      try {
+        const response = await this.$axios.put(api, data);
+        this.isUpdataConformance = response.status === 200;
+        this.conformanceLogTempCheckId = null;
+        this.conformanceFilterTempCheckId = null;
+      }catch(error) {
+        apiError(error, 'Failed to updata an Existing Conformance.');
+      }
+    },
   },
 })

src/stores/files.js

@@ -16,6 +16,20 @@ export default defineStore('filesStore', {
         ownerName: '',
       }
     ],
+    allConformanceLog: [
+      {
+        log: {},
+        fileType: '',
+        ownerName: '',
+      }
+    ],
+    allConformanceFilter: [
+      {
+        filter: {},
+        fileType: '',
+        ownerName: '',
+      }
+    ],
     allEventLog: [
       {
         parentLog: '',
@@ -39,7 +53,9 @@ export default defineStore('filesStore', {
   allFiles: state => {
     let result = [
       ...state.allEventLog,
-      ...state.allFilter
+      ...state.allFilter,
+      ...state.allConformanceLog,
+      ...state.allConformanceFilter
     ];
     let data = state.switchFilesTagData;
     let filesTag = state.filesTag;
@@ -101,6 +117,56 @@ export default defineStore('filesStore', {
         apiError(error, 'Failed to load the filters.');
       };
     },
+    /**
+     * Fetch Conformance Log api
+     */
+    async fetchConformanceLog() {
+      const api = '/api/log-checks';
+
+      try {
+        const response = await axios.get(api);
+
+        this.allConformanceLog = response.data;
+        this.allConformanceLog.map(o => {
+          o.icon = 'local_police';
+          o.parentLog = o.log.name;
+          o.fileType = "Rule";
+          o.ownerName = o.owner.name;
+          o.updated_base = o.updated_at;
+          o.accessed_base = o.accessed_at;
+          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
+          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
+        });
+        if(this.httpStatus < 300) loading.isLoading = false;
+      } catch(error) {
+        apiError(error, 'Failed to load the filters.');
+      };
+    },
+    /**
+     * Fetch Conformance Filter api
+     */
+    async fetchConformanceFilter() {
+      const api = '/api/filter-checks';
+
+      try {
+        const response = await axios.get(api);
+
+        this.allConformancefilter = response.data;
+        this.allConformancefilter.map(o => {
+          o.icon = 'local_police';
+          o.parentLog = o.filter.name;
+          o.fileType = "Rule";
+          o.ownerName = o.owner.name;
+          o.updated_base = o.updated_at;
+          o.accessed_base = o.accessed_at;
+          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
+          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
+        });
+        if(this.httpStatus < 300) loading.isLoading = false;
+      } catch(error) {
+        apiError(error, 'Failed to load the filters.');
+      };
+    },
     // fetchRule(){o.icon = local_police}
     // fetchDesign(){o.icon = shape_line}
   },

src/views/Discover/Conformance/index.vue

@@ -1,4 +1,10 @@
 <template>
+  <!-- conformanceLogId: {{ conformanceLogId }} <br>
+  conformanceFilterId: {{ conformanceFilterId }} <br>
+  conformanceLogTempCheckId: {{ conformanceLogTempCheckId }} <br>
+  conformanceFilterTempCheckId: {{ conformanceFilterTempCheckId }} <br>
+  conformanceLogCreateCheckId: {{ conformanceLogCreateCheckId }} <br>
+  conformanceFilterCreateCheckId: {{ conformanceFilterCreateCheckId }} <br> -->
   <main class="h-screen-main relative">
     <div class="h-full relative bg-neutral-50">
       <ConformanceSidebar></ConformanceSidebar>
@@ -9,6 +15,7 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
+import FilesStore from '@/stores/files.js';
 import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
@@ -17,12 +24,14 @@ import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSid
 
 export default {
   setup() {
+    const filesStore = FilesStore();
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { conformanceLogId, conformanceFilterId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
+    const { allConformanceLog, allConformanceFilter } = storeToRefs(filesStore);
+    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName } = storeToRefs(conformanceStore);
 
-    return { isLoading, conformanceLogId, conformanceFilterId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, }
+    return { filesStore, allConformanceLog, allConformanceFilter, isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName }
   },
   components: {
     StatusBar,
@@ -30,13 +39,37 @@ export default {
     ConformanceSidebar,
   },
   async created() {
-    // let logId;
+    let params = this.$route.params;
+
     this.isLoading = true;
-    if(this.$route.params.type === 'log') this.conformanceLogId = this.$route.params.fileId;
+    switch (params.type) {
-    else if(this.$route.params.type === 'filter') this.conformanceFilterId = this.$route.params.fileId;
+      case 'log':
-
+        this.conformanceLogId = params.fileId;
+        break;
+      case 'filter':
+        this.conformanceFilterId = params.fileId;
+        break;
+      case 'rule':
+        // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
+        switch (params.checkType) {
+          case 'log':
+            this.conformanceLogId = params.checkFileId;
+            this.conformanceLogCreateCheckId = params.checkId;
+            // 為複寫 Modal 取得 fileName
+            await this.filesStore.fetchConformanceLog();
+            await this.allConformanceLog.forEach(file => this.conformanceFileName = file.id == this.conformanceLogCreateCheckId ? file.name : null);
+            break;
+          case 'filter':
+            this.conformanceFilterId = params.checkFileId;
+            this.conformanceFilterCreateCheckId = params.checkId;
+            // 為複寫 Modal 取得 fileName
+            await this.filesStore.fetchConformanceFilter();
+            await this.allConformanceFilter.forEach(file => this.conformanceFileName = file.id == this.conformanceLogCreateCheckId ? file.name : null);
+        }
+        await this.conformanceStore.getConformanceReport();
+        break;
+    }
     await this.conformanceStore.getConformanceParams();
-
     this.isLoading = false;
   },
   mounted() {
@@ -47,5 +80,14 @@ export default {
     this.selectedActSeqMore = 'All';
     this.selectedActSeqFromTo = 'From';
   },
+  beforeUnmount() {
+    // 離開 conformance 時將 id 為 null，避免污染其他檔案
+    this.conformanceLogId = null;
+    this.conformanceFilterId = null;
+    this.conformanceLogCreateCheckId = null;
+    this.conformanceFilterCreateCheckId = null;
+    this.conformanceRuleData = null;
+    this.conformanceFileName = null;
+  },
 }
 </script>

src/views/Files/index.vue

@@ -154,7 +154,17 @@
             this.$router.push({name: 'Map', params: params});
             // this.$router.push({name: 'Map', params: params, query: params});
             break;
-          default:
+          // 先不考慮 MAP 只做 CONFORMANCE
+          case 'Rule':
+            // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
+            type = 'rule';
+            if(file.log){
+              params = { type: type, checkType: 'log', checkId: file.id, checkFileId: file.log.id };
+              this.$router.push({name: 'CheckConformance', params: params});
+            } else if(file.filter) {
+              params = { type: type, checkType: 'filter', checkId: file.id, checkFileId: file.filter.id };
+              this.$router.push({name: 'CheckConformance', params: params});
+            }
             break;
         }
       }
@@ -162,6 +172,8 @@
     mounted() {
       this.store.fetchEventLog();
       this.store.fetchFilter();
+      this.store.fetchConformanceLog();
+      this.store.fetchConformanceFilter();
     }
   }
 </script>