imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Conformance Save Log Done.

Browse Source
This commit is contained in:
chiayin
2023-11-29 16:47:25 +08:00
parent f1666a0bd1
commit 1f0a6aa900
14 changed files with 628 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -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: {
/**

225
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -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;

3
src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
View File

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

15
src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue
View File

@@ -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>

3
src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
View File

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

20
src/components/Discover/Conformance/StatusBar.vue
View File

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

1
src/components/Header.vue
View File

@@ -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() {

82
src/components/Navbar.vue
View File

@@ -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 可以另存新檔
if(this.createFilterId) {
await this.allMapDataStore.updataFilter();
if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
this.tempFilterId = null;
}else if(this.logId){
await saveFilter(this.allMapDataStore.addFilterId);
// 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
};
// 判斷在哪個子頁面
switch (this.$route.name) {
case 'Map':
// 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
// 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
if(this.createFilterId) {
await this.allMapDataStore.updataFilter();
if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
this.tempFilterId = null;
}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;
}
}
},
}

93
src/module/alertModal.js
View File

@@ -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();

14
src/router/index.js
View File

@@ -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,
},
]
},
]

97
src/stores/conformance.js
View File

@@ -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.');
}
},
},
})

68
src/stores/files.js
View File

@@ -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}
},

56
src/views/Discover/Conformance/index.vue
View File

@@ -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;
else if(this.$route.params.type === 'filter') this.conformanceFilterId = this.$route.params.fileId;
switch (params.type) {
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>

14
src/views/Files/index.vue
View File

@@ -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>