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

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>