+
+
-
-
+
+
@@ -186,21 +168,15 @@ export default {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
- const { hasResultRule, postRuleData} = storeToRefs(allMapDataStore);
+ const { hasResultRule, temporaryData, postRuleData} = storeToRefs(allMapDataStore);
- return { isLoading, hasResultRule, postRuleData, allMapDataStore }
+ return { isLoading, hasResultRule, temporaryData, postRuleData, allMapDataStore }
},
data() {
return {
- events: [
- { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
- { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
- { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
- { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
- ],
selectFilter: {
'Filter Type': ['Sequence', 'Attributes', 'Trace', 'Timeframes'],
- 'Activity Sequence':['Have activity(s)', 'Start activity & end activity', 'Sequence'],
+ 'Activity Sequence':['Have activity(s)', 'Start activity / end activity', 'Sequence'],
'Start & End': ['Start', 'End', 'Start & End'],
'Mode': ['Directly follows', 'Eventually follows'],
'ModeAtt': ['Case', 'Activity'],
@@ -208,7 +184,6 @@ export default {
'Containment': ['Contained in', 'Started in', 'End in', 'Activity in', 'Trim'],
},
tab: 'filter', // filter | funnel
- // selectValue: ['Sequence', 'Have activity(s)', 'Start', 'Directly follows', 'Case', 'Include', 'Contained in'],
selectValue: {
0: 'Sequence',
1: 'Have activity(s)',
@@ -229,7 +204,8 @@ export default {
isEndSelected: null,
isActAllTask: true,
rowData: [],
- temporaryData: [],
+ ruleData: [],
+ isRuleData: [], // toggle button data
}
},
components: {
@@ -257,12 +233,25 @@ export default {
}
},
methods: {
+
+
/**
* @param {string} switch Summary or Insight
*/
switchTab(tab) {
this.tab = tab;
},
+ /**
+ * @param {boolean} e ture | false
+ * @param {numble} index rule's index
+ */
+ isRule(e, index){
+ let rule = this.isRuleData[index];
+ // 先取得 rule object
+ // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉
+ if(!e) this.temporaryData[index] = 0;
+ else this.temporaryData[index] = rule;
+ },
/**
* Number to percentage
* @param {number} val
@@ -379,6 +368,59 @@ export default {
occurrence_ratio: this.getPercentLabel(item.occurrence_ratio),
}));
},
+ /**
+ * @param {object} e task's object
+ */
+ setRule(e) {
+ let label = "";
+ let type = "";
+ let includeStr = e.is_exclude?" Exclude ":" Include ";
+
+ switch(e.type){
+ case "contains-task":
+ label = `${includeStr} ${e.task}`
+ type = "Sequence"
+ break
+ case "starts-with":
+ label = `Start with ${e.task} ${includeStr}`
+ type = "Sequence"
+ break
+ case "ends-with":
+ label = `End with ${e.task} ${includeStr}`
+ type = "Sequence"
+ break
+ case "start-end":
+ label = `Start with ${e.starts_with}, End with ${e.ends_with} ${includeStr}`
+ type = "Sequence"
+ break
+ case "directly-follows":
+ label = `Directly-follows ${e.task_seq.join(' -> ')}${includeStr}`
+ type = "Sequence"
+ break
+ case "eventually-follows":
+ label = `Eventually-follows ${e.task_seq.join(' -> ')}${includeStr}`
+ type = "Sequence"
+ break
+ case "occurred-in":
+ case "started-in":
+ case "completed-in":
+ case "occurred-around":
+ label = `${e.type} from ${moment(e.start).format("YYYY-MM-DD HH:mm:ss")} to ${moment(e.end).format("YYYY-MM-DD HH:mm:ss")} ${includeStr}`
+ type = "Timeframe"
+ break
+ case "trace-freq":
+ label = `from ${e.lower} to ${e.upper} ${includeStr}`
+ type = "Trace"
+ break
+ default:
+ break
+ }
+ return {
+ type:type,
+ label:label,
+ toggle:true,
+ }
+ },
/**
* 清空選項
*/
@@ -415,7 +457,7 @@ export default {
}
})
};
- }else if(sele[1] === 'Start activity & end activity') { // Activity Sequence 選 Start activity & end activity 的行為
+ }else if(sele[1] === 'Start activity / end activity') { // Activity Sequence 選 Start activity & end activity 的行為
if(sele[2] === 'Start') {
if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('Not selected');
else {
@@ -429,7 +471,7 @@ export default {
if(this.selectFilterEnd === null || this.selectFilterEnd.length === 0) return this.$toast.error('Not selected');
else {
data = {
- type: 'starts-with',
+ type: 'ends-with',
task: this.selectFilterEnd.label,
is_exclude: isExclude,
}
@@ -468,6 +510,8 @@ export default {
if(this.hasResultRule === null) return;
else if(this.hasResultRule) {
this.temporaryData.push(...postData);
+ this.isRuleData = Array.from(this.temporaryData);
+ this.ruleData = this.temporaryData.map(e => this.setRule(e));
this.reset(false);
this.isLoading = true;
await new Promise(resolve => setTimeout(resolve, 1000));
@@ -482,21 +526,30 @@ export default {
};
},
// header:Funnel 刪除全部的 Funnel
- deleteAll() {
- this.temporaryData = [];
- this.$toast.success('All deleted.');
+ deleteRule(index) {
+ if(index === 'all') {
+ this.temporaryData = [];
+ this.isRuleData = [];
+ this.$toast.success('All deleted.');
+ }else{
+ this.$toast.success(`Delete ${this.ruleData[index].label}.`);
+ this.temporaryData.splice(index, 1);
+ this.isRuleData.splice(index, 1);
+ this.ruleData.splice(index, 1);
+ }
},
// header:Funnel 發送暫存的選取資料
async submitAll() {
- if(this.temporaryData.length === 0) return this.$toast.error('No Filter.');
-
- this.postRuleData = this.temporaryData;
+ this.postRuleData = this.temporaryData; // 取得 submit 的資料
+ this.postRuleData = this.postRuleData.filter(item => item !== 0); // 有 toggle button 的話，找出並刪除陣列中為 0 的項目
await this.allMapDataStore.checkHasResult();
if(this.hasResultRule === null) return;
else if(this.hasResultRule) {
this.isLoading = true;
await this.allMapDataStore.addTempFilterId();
+ await this.allMapDataStore.getAllMapData();
+ await this.$emit('submit-all');
this.isLoading = false;
this.$toast.success('Filter Success. View the Map.');
}else {
@@ -517,10 +570,22 @@ export default {
}
/* TimeLine */
+:deep(.p-timeline) {
+ @apply leading-none my-4
+}
+:deep(.p-timeline-event-opposite) {
+ @apply hidden
+}
+:deep(.p-timeline-event-separator) {
+ @apply mx-4
+}
:deep(.p-timeline-event-marker) {
- @apply !bg-primary !border-primary !h-2 !w-2
+ @apply !bg-primary !border-primary !w-2 !h-2
}
:deep(.p-timeline-event-connector) {
@apply !bg-primary my-2 !w-[1px]
}
+:deep(.p-timeline-event-content) {
+ @apply !px-0
+}
diff --git a/src/main.js b/src/main.js
index 4da27fd..b05d3cf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,7 @@ import Row from 'primevue/row'; // optional
import RadioButton from 'primevue/radiobutton';
import PickList from 'primevue/picklist';
import Timeline from 'primevue/timeline';
+import InputSwitch from 'primevue/inputswitch';
const emitter = mitt();
const app = createApp(App);
@@ -62,7 +63,7 @@ app.use(router);
app.use(VueAxios, axios);
app.use(ToastPlugin, { // use `this.$toast` in Vue.js
position: 'bottom',
- duration: 5000,
+ duration: 3000,
});
app.use(PrimeVue);
app.component('Sidebar', Sidebar);
@@ -79,6 +80,7 @@ app.component('Row', Row);
app.component('RadioButton', RadioButton);
app.component('PickList', PickList);
app.component('Timeline', Timeline);
+app.component('InputSwitch', InputSwitch);
app.component('Draggable', draggable); // 拖曳
app.mount("#app");
diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js
index b5eb78b..f03c920 100644
--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -29,7 +29,8 @@ export default defineStore('allMapDataStore', {
allFilterTrace: [],
httpStatus: 200,
hasResultRule: null, // click Apply 後檢查是否有 Data
- postRuleData: [],
+ temporaryData: [], // 沒被 apply 的 Data
+ postRuleData: [], // has-result API & temp-filters API 的 Data
}),
getters: {
processMap: state => {
@@ -79,10 +80,7 @@ export default defineStore('allMapDataStore', {
async getAllMapData() {
let logId = this.logId;
let tempFilterId = this.tempFilterId;
- let api = tempFilterId !== null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`;
- console.log(tempFilterId);
- // console.log(logId);
- // const api = `/api/logs/${logId}/discover`;
+ let api = tempFilterId != null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`;
try {
const response = await this.$axios.get(api);
diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue
index 8ebcff5..70f6307 100644
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -48,7 +48,8 @@
-
+
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 9900f18..3615a33 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -125,14 +125,6 @@
return recentlyUsedFiles;
},
},
- watch:{
- allFiles:{
- handler:function(val,oldVal){
- this.allFiles;
- },
- deep:true,
- }
- },
methods: {
/**
* 選擇該 files 進入 Discover/Compare/Design 頁面
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index c2705a4..9110766 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -11,8 +11,10 @@