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

refactor: Discover Router done.

Browse Source
This commit is contained in:
chiayin
2024-03-19 15:57:12 +08:00
parent bc3e20abd0
commit 6663b48159
10 changed files with 236 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,24 +9,21 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import FilesStore from '@/stores/files.js';
import axios from 'axios';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import StatusBar from '@/components/Discover/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
import axios from 'axios';
export default {
setup() {
const filesStore = FilesStore();
const loadingStore = LoadingStore();
const conformanceStore = ConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { allFiles } = storeToRefs(filesStore);
const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName, conformanceParent } = storeToRefs(conformanceStore);
const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName } = storeToRefs(conformanceStore);
return { filesStore, allFiles, isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName, conformanceParent }
return { isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName }
},
components: {
StatusBar,
@@ -34,62 +31,33 @@ export default {
ConformanceSidebar,
},
async created() {
let params = this.$route.params;
let parent = this.$route.meta.parent;
this.isLoading = true;
// type: log | filter | rule(名稱待討論) | log-check(MAP page 來的已存檔 rule) | filter-check(MAP page 來的已存檔 rule)
switch (params.type) {
case 'log': // FILES page 來的 log
this.conformanceLogId = params.fileId;
break;
case 'filter': // FILES page 來的 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.fetchAllFiles();
// await this.allFiles.forEach(file => {
// if(file.id == this.conformanceLogCreateCheckId) return this.conformanceFileName = file.name;
// });
// break;
// case 'filter':
// this.conformanceFilterId = params.checkFileId;
// this.conformanceFilterCreateCheckId = params.checkId;
// // 為複寫 Modal 取得 fileName
// await this.filesStore.fetchAllFiles();
// await this.allFiles.forEach(file => {
// if(file.id == this.conformanceFilterCreateCheckId) return this.conformanceFileName = file.name;
// });
// }
// await this.conformanceStore.getConformanceReport();
// break;
case 'rule': // FILES page 來的已存檔 rule
switch (parent.type) {
case 'log':
this.conformanceLogId = parent.id;
this.conformanceLogCreateCheckId = params.fileId;
break;
case 'filter':
this.conformanceFilterId = parent.id;
this.conformanceFilterCreateCheckId = params.fileId;
}
// 為複寫 Modal 取得 fileName
this.conformanceFileName = parent.name;
await this.conformanceStore.getConformanceReport();
break;
case 'log-check': // MAP page 來的已存檔 rule
console.log('c p:', params);
// 為複寫 Modal 取得 fileName
this.conformanceLogCreateCheckId = params.fileId;
this.conformanceFileName = parent.name;
break;
case 'filter-check': // MAP page 來的已存檔 rule
break;
const params = this.$route.params;
const file = this.$route.meta.file;
const isCheckPage = this.$route.name.includes('Check');
if(!isCheckPage) {
switch (params.type) {
case 'log': // FILES page 來的 log
this.conformanceLogId = params.fileId;
break;
case 'filter': // FILES page 來的 filter
this.conformanceFilterId = params.fileId;
break;
}
} else {
switch (params.type) {
case 'log': // FILES page 來的已存檔 rule(log-check)
this.conformanceLogId = file.parent.id;
this.conformanceFileName = file.name;
break;
case 'filter': // FILES page 來的已存檔 rule(filter-check)
this.conformanceFilterId = file.parent.id;
this.conformanceFileName = file.name;
break;
}
await this.conformanceStore.getConformanceReport();
}
await this.conformanceStore.getConformanceParams();
// 給 rule 檔取得 ShowBar 一些時間
@@ -113,17 +81,25 @@ export default {
this.conformanceFileName = null;
},
async beforeRouteEnter(to, from, next) {
const filesStore = FilesStore();
// Save token in Headers.
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
const isCheckPage = to.name.includes('Check');
await filesStore.fetchAllFiles();
await filesStore.allFiles.forEach(file => {
if(file.id == to.params.fileId) {
to.meta.parent = file.parent;
if (isCheckPage) {
const conformanceStore = ConformanceStore();
// Save token in Headers.
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
switch (to.params.type) {
case 'log':
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
break;
case 'filter':
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
});
await conformanceStore.getConformanceReport();
to.meta.file = await conformanceStore.conformanceTempReportData.file; // 將 file data 存到 route 給 Navbar, StatusBar 使用
}
next();
}
}

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

@@ -54,8 +54,10 @@
<script>
import { storeToRefs } from 'pinia';
import axios from 'axios';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import cytoscapeMap from '@/module/cytoscapeMap.js';
import SidebarView from '@/components/Discover/Map/SidebarView.vue';
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
@@ -359,37 +361,33 @@ export default {
},
async created() {
const routeParams = this.$route.params;
const file = this.$route.meta.file;
const isCheckPage = this.$route.name.includes('Check');
// 先 loading 再執行以下程式
this.isLoading = true;
// Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
switch (routeParams.type) {
case 'log':
this.logId = routeParams.fileId;
this.baseLogId = routeParams.fileId;
if(!isCheckPage) {
this.logId = routeParams.fileId;
this.baseLogId = routeParams.fileId;
} else {
this.logId = file.parent.id;
this.baseLogId = file.parent.id;
}
break;
case 'filter':
this.createFilterId = routeParams.fileId;
if(!isCheckPage) {
this.createFilterId = routeParams.fileId;
} else {
this.createFilterId = file.parent.id;
}
// 取得 logID 和上次儲存的 Funnel
await this.allMapDataStore.fetchFunnel(this.createFilterId);
this.isRuleData = await Array.from(this.temporaryData);
this.ruleData = await this.isRuleData.map(e => this.$refs.sidevarFilterRef.setRule(e));
break;
case 'rule':
switch (this.checkType) {
case 'log':
this.logId = this.checkFileId;
this.baseLogId = this.checkFileId;
break;
case 'filter':
this.createFilterId = this.checkFileId;
// 取得 logID 和上次儲存的 Funnel
await this.allMapDataStore.fetchFunnel(this.createFilterId);
this.isRuleData = await Array.from(this.temporaryData);
this.ruleData = await this.isRuleData.map(e => this.$refs.sidevarFilterRef.setRule(e));
break;
}
break;
}
// 取得 logId 後才 call api
await this.allMapDataStore.getAllMapData();
@@ -424,6 +422,28 @@ export default {
this.temporaryData = [];
this.postRuleData = [];
this.ruleData = [];
},
async beforeRouteEnter(to, from, next) {
const isCheckPage = to.name.includes('Check');
if (isCheckPage) {
const conformanceStore = ConformanceStore();
// Save token in Headers.
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
switch (to.params.type) {
case 'log':
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
break;
case 'filter':
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
await conformanceStore.getConformanceReport(true);
to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
}
next();
}
}
</script>

54
src/views/Discover/Performance/index.vue
View File

@@ -61,7 +61,12 @@
</li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
<Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
<div>
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
<div v-else class="h-96 bg-neutral-100 m-4 flex">
<p class="h2 text-danger m-auto">No waiting time.</p>
</div>
</div>
</li>
</ul>
</li>
@@ -94,8 +99,10 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import axios from 'axios';
import LoadingStore from '@/stores/loading.js';
import PerformanceStore from '@/stores/performance.js';
import ConformanceStore from '@/stores/conformance.js';
import StatusBar from '@/components/Discover/StatusBar.vue';
import { setLineChartData } from '@/module/setChartData.js';
import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
@@ -600,13 +607,23 @@ export default {
async created() {
this.isLoading = true; // moubeted 才停止 loading
const routeParams = this.$route.params;
let id = routeParams.fileId;
let type = routeParams.type;
const isCheckPage = this.$route.name.includes('Check');
const type = routeParams.type;
const file = this.$route.meta.file;
let id;
if(!isCheckPage) {
id = routeParams.fileId;
} else {
id = file.parent.id;
}
// 取得 Performance Data
await this.performanceStore.getPerformance(type, id);
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_process_time_by_task);
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
}
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
// create chart
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
@@ -614,12 +631,39 @@ export default {
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
} else {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
}
[this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
// 停止 loading
this.isLoading = false;
},
async beforeRouteEnter(to, from, next) {
const isCheckPage = to.name.includes('Check');
if (isCheckPage) {
const conformanceStore = ConformanceStore();
// Save token in Headers.
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
let data;
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
switch (to.params.type) {
case 'log':
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
break;
case 'filter':
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
await conformanceStore.getConformanceReport(true);
to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
}
next();
}
}
</script>
<style scoped>

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

@@ -365,7 +365,7 @@
this.createFilterId = null;
this.baseLogId = file.id;
fileId = file.id;
type = 'log';
type = file.type;
params = { type: type, fileId: fileId };
this.$router.push({name: 'Map', params: params});
break;
@@ -373,34 +373,21 @@
this.createFilterId = file.id;
this.baseLogId = file.parent.id;
fileId = file.id;
type = 'filter';
type = file.type;
params = { type: type, fileId: fileId };
this.$router.push({name: 'Map', params: params});
break;
// case 'log-check':
// // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
// type = 'rule';
// params = { type: type, checkType: 'log', checkId: file.id, checkFileId: file.parent.id };
// this.$router.push({name: 'CheckConformance', params: params});
// break
// case 'filter-check':
// type = 'rule';
// params = { type: type, checkType: 'filter', checkId: file.id, checkFileId: file.parent.id };
// this.$router.push({name: 'CheckConformance', params: params});
// break;
// conformanceLogId, conformanceFilterId, conformanceType
case 'log-check':
// path: "/discover/conformance/rule/:fileId"
fileId = file.id;
type = 'rule';
type = file.parent.type;
params = { type: type, fileId: fileId };
this.$router.push({name: 'Conformance', params: params});
this.$router.push({name: 'CheckConformance', params: params});
break
case 'filter-check':
fileId = file.id;
type = 'rule';
type = file.parent.type;
params = { type: type, fileId: fileId };
this.$router.push({name: 'Conformance', params: params});
this.$router.push({name: 'CheckConformance', params: params});
break;
}
},